diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index f4d6d781283..d2e02efff31 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -4,14 +4,17 @@
  */
 
 /** Messages list dimensions:
- * - text max width: 70em (recommended by W3C standard) = 1050px
- * - utils-width: 52px (group avatar with paddings) + 120px (date and checkmark) + 4*4px (date paddings) = 188px
- * - list max width: text width + utils width + 4 + 8 (paddings) = 1250px
+ * - text max width: 1050px (70em recommended by W3C standard)
+ * - avatar width: 32px (AVATAR.SIZE.SMALL) + 16px (paddings) = 48px
+ * - info width: 8ch(~68px) (timestamp) + 40px (checkmark with paddings) = ~108px
+ * - list max width: 48px (avatar width) + 1058px (text width with paddings) + ~108px (info width) = ~1214px
+ * - input max width: ~1214px (list max width) - 100px (send button) = ~1114px
  */
 $messages-text-max-width: calc(70 * var(--default-font-size));
-$message-utils-width: calc(52px + 4 * var(--default-grid-baseline) + 120px);
-$messages-list-max-width: calc($messages-text-max-width + $message-utils-width + 3 * var(--default-grid-baseline));
-$message-input-max-width: calc($messages-list-max-width - 100px);
+$messages-avatar-width: calc(32px + 4 * var(--default-grid-baseline));
+$messages-info-width: calc(8ch + var(--clickable-area-small, 24px) + 4 * var(--default-grid-baseline));
+$messages-list-max-width: calc($messages-avatar-width + $messages-text-max-width + 2 * var(--default-grid-baseline) + $messages-info-width);
+$messages-input-max-width: calc($messages-list-max-width - 100px);
 
 // background color of call container
 $color-call-background: rgba(34, 34, 34, 0.8);
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index c885db811cc..e16d30fa4bf 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -449,7 +449,6 @@ export default {
 
 .message-body {
 	padding: var(--default-grid-baseline);
-	padding-left: calc(2 * var(--default-grid-baseline));
 	font-size: var(--default-font-size);
 	line-height: var(--default-line-height);
 	position: relative;
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index d7affa900ef..4bdc05eb890 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -69,7 +69,7 @@
 
 		<!-- Additional message info-->
 		<div v-if="!isDeletedMessage" class="message-main__info">
-			<span :class="['date', { 'date--hidden': hideDate }]" :title="messageDate">{{ messageTime }}</span>
+			<span class="date" :class="{ 'date--hidden': hideDate }" :title="messageDate">{{ messageTime }}</span>
 
 			<!-- Message delivery status indicators -->
 			<div v-if="message.sendingFailure"
@@ -83,6 +83,7 @@
 				@mouseleave="showReloadButton = false"
 				@blur="showReloadButton = false">
 				<NcButton v-if="sendingErrorCanRetry && showReloadButton"
+					size="small"
 					:aria-label="sendingErrorIconTooltip"
 					@click="handleRetry">
 					<template #icon>
@@ -447,16 +448,14 @@ export default {
 @import '../../../../../assets/variables';
 
 .message-main {
-	display: flex;
+	display: grid;
+	grid-template-columns: minmax(0, $messages-text-max-width) $messages-info-width;
 	justify-content: space-between;
 	align-items: flex-start;
 	min-width: 100%;
 
 	&__text {
-		flex: 0 1 $messages-text-max-width;
 		width: 100%;
-		min-width: 0;
-		max-width: $messages-text-max-width;
 		color: var(--color-text-light);
 
 		& > .single-emoji {
@@ -507,32 +506,34 @@ export default {
 	}
 
 	&__info {
-		justify-self: flex-start;
-		justify-content: flex-end;
 		position: relative;
 		user-select: none;
 		display: flex;
+		justify-content: flex-end;
 		color: var(--color-text-maxcontrast);
 		font-size: var(--default-font-size);
-		flex: 1 0 auto;
-		padding: 0 calc(2 * var(--default-grid-baseline));
+		width: $messages-info-width;
+		padding-inline: calc(2 * var(--default-grid-baseline));
 
 		.date {
+			width: 8ch;
+			text-align: end;
+
 			&--hidden {
 				pointer-events: none;
 				opacity: 0;
 			}
 
 			&:last-child {
-				margin-right: var(--default-clickable-area);
+				margin-right: var(--clickable-area-small, 24px);
 			}
 		}
 	}
 }
 
 .message-status {
-	width: var(--default-clickable-area);
-	height: 24px;
+	width: var(--clickable-area-small, 24px);
+	height: var(--clickable-area-small, 24px);
 	display: flex;
 	justify-content: center;
 	align-items: center;
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 7461b5cc46b..18f02953f51 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -121,9 +121,9 @@ export default {
 @import '../../../assets/variables';
 
 .wrapper {
-	max-width: $messages-list-max-width;
 	display: flex;
-	margin: auto;
+	align-items: flex-start;
+	width: 100%;
 	padding: 0;
 
 	&:focus {
@@ -134,7 +134,7 @@ export default {
 .messages {
 	flex: auto;
 	display: flex;
-	padding: 8px 0 8px 0;
+	padding: var(--default-grid-baseline) 0;
 	flex-direction: column;
 	width: 100%;
 	min-width: 0;
@@ -142,16 +142,15 @@ export default {
 	&__avatar {
 		position: sticky;
 		top: 0;
-		height: 52px;
-		width: 52px;
-		padding: 18px 10px 10px 10px;
+		padding: calc(2 * var(--default-grid-baseline));
+		margin-top: calc(2 * var(--default-grid-baseline));
 	}
 
 	&__author {
 		display: flex;
 		gap: 4px;
 		max-width: $messages-text-max-width;
-		padding: var(--default-grid-baseline) 0 0 calc(2 * var(--default-grid-baseline));
+		padding-left: var(--default-grid-baseline);
 		color: var(--color-text-maxcontrast);
 
 		&-name {
diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
index d794d2cb342..b7d8717b48c 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -8,8 +8,7 @@
 		<div v-for="messagesCollapsed in messagesGroupedBySystemMessage"
 			:key="messagesCollapsed.id"
 			class="messages-group__system">
-			<ul v-if="messagesCollapsed.messages?.length > 1"
-				class="messages messages--header">
+			<ul v-if="messagesCollapsed.messages?.length > 1" class="messages">
 				<Message is-combined-system-message
 					:is-combined-system-message-collapsed="messagesCollapsed.collapsed"
 					:next-message-id="getNextMessageId(messagesCollapsed.messages.at(-1))"
@@ -254,13 +253,12 @@ export default {
 }
 
 .wrapper {
-	max-width: $messages-list-max-width;
 	display: flex;
-	margin: auto;
+	width: 100%;
 	padding: 0;
 	&--system {
 		flex-direction: column;
-		padding-left: calc(var(--default-clickable-area) + 8px);
+		padding-left: calc($messages-avatar-width);
 	}
 	&:focus {
 		background-color: rgba(47, 47, 47, 0.068);
@@ -274,8 +272,6 @@ export default {
 	width: 100%;
 	min-width: 0;
 
-	&--header {
-	}
 	&--collapsed {
 		border-radius: var(--border-radius-large);
 		background-color: var(--color-background-hover);
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 7213b065538..baab6f3476e 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -21,7 +21,8 @@
 			:key="`section_${dateTimestamp}`"
 			:ref="`dateGroup-${token}`"
 			:data-date-timestamp="dateTimestamp"
-			:class="{'has-sticky': dateTimestamp === stickyDate}">
+			class="scroller__content"
+			:class="{ 'has-sticky': dateTimestamp === stickyDate }">
 			<li class="messages-group__date">
 				<span class="messages-group__date-text" role="heading" aria-level="3">
 					{{ dateSeparatorLabels[dateTimestamp] }}
@@ -1228,7 +1229,7 @@ export default {
 		onMessageHeightChanged({ heightDiff }) {
 			// scroll down by the height difference
 			this.$refs.scroller.scrollTop += heightDiff
-		}
+		},
 	},
 }
 </script>
@@ -1249,6 +1250,11 @@ export default {
 		border-bottom-color: transparent;
 	}
 
+	&__content {
+		max-width: $messages-list-max-width;
+		margin: 0 auto;
+	}
+
 	&__loading {
 		height: 40px;
 		transform: translatex(-64px);
@@ -1272,18 +1278,19 @@ export default {
 	&__date {
 		position: sticky;
 		top: 0;
-		display: flex;
-		justify-content: center;
+		display: grid;
+		grid-template-columns: minmax(0, $messages-text-max-width) $messages-info-width;
 		z-index: 2;
+		margin-left: calc($messages-avatar-width);
 		margin-bottom: 5px;
+		padding-inline: var(--default-grid-baseline);
 		pointer-events: none;
 	}
 
 	&__date-text {
-		margin-right: calc(var(--default-clickable-area) * 2);
-		content: attr(data-date);
-		padding: 4px 12px;
-		left: 50%;
+		margin: 0 auto;
+		padding: var(--default-grid-baseline) calc(3 * var(--default-grid-baseline));
+		text-wrap: nowrap;
 		color: var(--color-text-maxcontrast);
 		background-color: var(--color-background-dark);
 		border-radius: var(--border-radius-element, var(--border-radius-pill));
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index 8c8b4fc0a46..e3f09d8ae90 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -1043,7 +1043,7 @@ export default {
 	display: flex;
 	gap: var(--default-grid-baseline);
 	position: relative;
-	max-width: $message-input-max-width;
+	max-width: $messages-input-max-width;
 	margin: 0 auto;
 
 	&__emoji-picker {
diff --git a/src/components/NewMessage/NewMessageTypingIndicator.vue b/src/components/NewMessage/NewMessageTypingIndicator.vue
index d1577fef180..6b076d645e1 100644
--- a/src/components/NewMessage/NewMessageTypingIndicator.vue
+++ b/src/components/NewMessage/NewMessageTypingIndicator.vue
@@ -143,7 +143,7 @@ export default {
 	margin-bottom: 4px;
 
 	&__wrapper {
-		max-width: $message-input-max-width;
+		max-width: $messages-input-max-width;
 		display: flex;
 		align-items: center;
 		margin: auto;