diff --git a/frontend/src/lang/fr.json b/frontend/src/lang/fr.json
index eee4865522a74c44068d5c2aa041240617a58b6d..c2bd5c0e34b94fce939fcb4e07e0148f31fb9fc9 100644
--- a/frontend/src/lang/fr.json
+++ b/frontend/src/lang/fr.json
@@ -212,6 +212,7 @@
 		"availability": "Disponibilités"
 	},
 	"session": {
+		"feedbackInline": "Un feedback a été ajouté à",
 		"modal": {
 			"satisfy": {
 				"title": "Questionnaire de satisfaction",
diff --git a/frontend/src/lib/api/sessions.ts b/frontend/src/lib/api/sessions.ts
index 00078a5d99306e5d2b4a7465099594e0ef1e9c8d..7dfee6c9ca0437b55539fa1c34f04d0f6cb55a74 100644
--- a/frontend/src/lib/api/sessions.ts
+++ b/frontend/src/lib/api/sessions.ts
@@ -45,7 +45,7 @@ export async function createMessageAPI(
 	id: number,
 	content: string,
 	metadata: { message: string; date: number }[]
-): Promise<number | null> {
+): Promise<any | null> {
 	const response = await axiosInstance.post(`/sessions/${id}/messages`, { content, metadata });
 
 	if (response.status !== 201) {
diff --git a/frontend/src/lib/components/sessions/chatbox.svelte b/frontend/src/lib/components/sessions/chatbox.svelte
index e1b68000c5f7516db374fd5acbadbdb1cdccec4d..d4f6ad2a6f30ef9610137c321faa0fddb3030ec5 100644
--- a/frontend/src/lib/components/sessions/chatbox.svelte
+++ b/frontend/src/lib/components/sessions/chatbox.svelte
@@ -7,6 +7,8 @@
 	import { t } from '$lib/services/i18n';
 	import { toastSuccess } from '$lib/utils/toasts';
 	import { Icon, PencilSquare } from 'svelte-hero-icons';
+	import Message from '$lib/types/message';
+	import Feedback from '$lib/types/feedback';
 
 	export let token: string;
 
@@ -15,10 +17,15 @@
 
 	session.messages.subscribe((newMessages) => {
 		let news = newMessages
-			.filter((m) => !messages.find((m2) => m2.message_id === m.message_id))
+			.filter(
+				(m) =>
+					!messages.find(
+						(m2) => m instanceof Message && m2 instanceof Message && m2.message_id === m.message_id
+					)
+			)
 			.at(-1);
 		messages = newMessages;
-		if (!news) return;
+		if (!news || !(news instanceof Message)) return;
 
 		if (document.hidden) {
 			new Notification(news.user.nickname, {
@@ -120,13 +127,21 @@
 	});
 </script>
 
-<div class="flex flex-col w-full h-full border-x-2">
+<div class="flex flex-col w-full h-full border-x-2 scroll-smooth">
 	<div class="flex-grow h-48 overflow-auto flex-col-reverse px-4 flex mb-2">
 		<div class:hidden={!isTyping}>
 			<span class="loading loading-dots loading-md"></span>
 		</div>
-		{#each messages.sort((a, b) => b.created_at.getTime() - a.created_at.getTime()) as message (message.message_id)}
-			<MessageC {message} />
+		{#each messages.sort((a, b) => b.created_at.getTime() - a.created_at.getTime()) as message (message.uuid)}
+			{#if message instanceof Message}
+				<MessageC {message} />
+			{:else if message instanceof Feedback}
+				<a class="text-center italic text-gray-500 my-2" href="#{message.message.uuid}">
+					{$t('session.feedbackInline')} "{message.message.content.length > 20
+						? message.message.content.substring(0, 20) + '...'
+						: message.message.content}"
+				</a>
+			{/if}
 		{/each}
 	</div>
 	{#if !wsConnected}
diff --git a/frontend/src/lib/components/sessions/message.svelte b/frontend/src/lib/components/sessions/message.svelte
index f5a5cc5a3574a1de50d83f6bfb2a299741ffd09f..7817b15cf84e9e470dd40fe6ffa36d3d0ec2fc4e 100644
--- a/frontend/src/lib/components/sessions/message.svelte
+++ b/frontend/src/lib/components/sessions/message.svelte
@@ -159,7 +159,12 @@
 	const isSender = message.user.id == $user?.id;
 </script>
 
-<div class="chat group" class:chat-start={!isSender} class:chat-end={isSender}>
+<div
+	class="chat group scroll-smooth target:bg-gray-200 rounded-xl"
+	id={message.uuid}
+	class:chat-start={!isSender}
+	class:chat-end={isSender}
+>
 	<div class="rounded-full mx-2 chat-image size-12" title={message.user.nickname}>
 		<Gravatar
 			email={message.user.email}
diff --git a/frontend/src/lib/types/feedback.ts b/frontend/src/lib/types/feedback.ts
index 0d676f21e25f25f158eb290866225e7abd4adb8b..a8c49131e292983fd89095e4efa52ee4c9b81951 100644
--- a/frontend/src/lib/types/feedback.ts
+++ b/frontend/src/lib/types/feedback.ts
@@ -1,3 +1,4 @@
+import { parseToLocalDate } from '$lib/utils/date';
 import { toastAlert } from '$lib/utils/toasts';
 import Message from './message';
 
@@ -7,19 +8,22 @@ export default class Feedback {
 	private _start: number;
 	private _end: number;
 	private _content: string | null;
+	private _date: Date;
 
 	public constructor(
 		id: number,
 		message: Message,
 		start: number,
 		end: number,
-		content: string | null
+		content: string | null,
+		date: Date
 	) {
 		this._id = id;
 		this._message = message;
 		this._start = start;
 		this._end = end;
 		this._content = content;
+		this._date = date;
 	}
 
 	get id(): number {
@@ -42,6 +46,18 @@ export default class Feedback {
 		return this._content;
 	}
 
+	get date(): Date {
+		return this._date;
+	}
+
+	get created_at(): Date {
+		return this._date;
+	}
+
+	get uuid(): string {
+		return `feedback-${this._id}`;
+	}
+
 	static parse(json: any, message: Message): Feedback | null {
 		if (json === null || json == undefined) {
 			toastAlert('Failed to parse feedback: json is null');
@@ -53,7 +69,14 @@ export default class Feedback {
 			return null;
 		}
 
-		const feedback = new Feedback(json.id, message, json.start, json.end, json.content);
+		const feedback = new Feedback(
+			json.id,
+			message,
+			json.start,
+			json.end,
+			json.content,
+			parseToLocalDate(json.date)
+		);
 
 		return feedback;
 	}
diff --git a/frontend/src/lib/types/message.ts b/frontend/src/lib/types/message.ts
index 5be486240e85d3f3133f6ce44cbd3b3bed975946..a92c9ad7e11a286d2b328a68b7586e0c4c9dc1be 100644
--- a/frontend/src/lib/types/message.ts
+++ b/frontend/src/lib/types/message.ts
@@ -70,6 +70,10 @@ export default class Message {
 		return this._feedbacks;
 	}
 
+	get uuid(): string {
+		return `message-${this._message_id}`;
+	}
+
 	async update(content: string, metadata: { message: string; date: number }[]): Promise<boolean> {
 		const response = await updateMessageAPI(this._session.id, this._message_id, content, metadata);
 		if (response == null || response.id == null) return false;
@@ -174,7 +178,9 @@ export default class Message {
 
 			if (!m) continue;
 
-			const prev = messages.find((msg) => msg.message_id == m?.message_id);
+			const prev = messages.find(
+				(msg) => msg instanceof Message && msg.message_id == m?.message_id
+			);
 
 			if (!prev) {
 				messages.push(m);
diff --git a/frontend/src/lib/types/session.ts b/frontend/src/lib/types/session.ts
index 2fbdbb65211ae4376f927c328b393e6a3272ccb6..0f15247e574bff6b7e93192c5498e042dbd3fc78 100644
--- a/frontend/src/lib/types/session.ts
+++ b/frontend/src/lib/types/session.ts
@@ -1,4 +1,4 @@
-import { toastAlert, toastWarning } from '$lib/utils/toasts';
+import { toastAlert } from '$lib/utils/toasts';
 import { get, writable, type Writable } from 'svelte/store';
 import User, { user } from './user';
 import { axiosInstance } from '$lib/api/apiInstance';
@@ -28,7 +28,8 @@ export default class Session {
 	private _token: string;
 	private _is_active: boolean;
 	private _users: User[];
-	private _messages: Writable<Message[]>;
+	private _messages: Writable<(Message | Feedback)[]>;
+
 	private _created_at: Date;
 	private _start_time: Date;
 	private _end_time: Date;
@@ -95,7 +96,7 @@ export default class Session {
 		return this._language;
 	}
 
-	get messages(): Writable<Message[]> {
+	get messages(): Writable<(Message | Feedback)[]> {
 		return this._messages;
 	}
 
@@ -204,10 +205,12 @@ export default class Session {
 		const message = new Message(json.id, json.message_id, content, new Date(), sender, this);
 
 		this._messages.update((messages) => {
-			if (!messages.find((m) => m.message_id === message.message_id)) {
+			if (!messages.find((m) => m instanceof Message && m.message_id === message.message_id)) {
 				return [...messages, message];
 			}
-			return messages.map((m) => (m.message_id === message.message_id ? message : m));
+			return messages.map((m) =>
+				m instanceof Message && m.message_id === message.message_id ? message : m
+			);
 		});
 
 		return message;
@@ -262,10 +265,14 @@ export default class Session {
 					const message = Message.parse(data['data']);
 					if (message) {
 						this._messages.update((messages) => {
-							if (!messages.find((m) => m.message_id === message.message_id)) {
+							if (
+								!messages.find((m) => m instanceof Message && m.message_id === message.message_id)
+							) {
 								return [...messages, message];
 							}
-							return messages.map((m) => (m.message_id === message.message_id ? message : m));
+							return messages.map((m) =>
+								m instanceof Message && m.message_id === message.message_id ? message : m
+							);
 						});
 
 						return;
@@ -273,19 +280,23 @@ export default class Session {
 				} else if (data['action'] === 'update') {
 					const message = Message.parse(data['data']);
 					if (message) {
-						if (get(this._messages).find((m) => m.id === message.id)) {
+						if (get(this._messages).find((m) => m instanceof Message && m.id === message.id)) {
 							this._messages.update((messages) => {
-								const mEdited = messages.find((m) => m.id === message.id);
-								if (!mEdited) return messages;
+								const mEdited = messages.find((m) => m instanceof Message && m.id === message.id);
+								if (!mEdited || !(mEdited instanceof Message)) return messages;
 								mEdited.localUpdate(message.content, true);
 								return messages.map((m) => (m.id === message.id ? mEdited : m));
 							});
 						} else {
 							this._messages.update((messages) => {
-								const mEdited = messages.find((m) => m.message_id === message.message_id);
-								if (!mEdited) return messages;
+								const mEdited = messages.find(
+									(m) => m instanceof Message && m.message_id === message.message_id
+								);
+								if (!mEdited || !(mEdited instanceof Message)) return messages;
 								mEdited.localUpdate(message.content);
-								return messages.map((m) => (m.message_id === message.message_id ? mEdited : m));
+								return messages.map((m) =>
+									m instanceof Message && m.message_id === message.message_id ? mEdited : m
+								);
 							});
 
 							return;
@@ -295,11 +306,14 @@ export default class Session {
 					this._lastTyping.set(new Date());
 					return;
 				} else if (data['action'] == 'feedback') {
-					const message = get(this._messages).find((m) => m.id === data['data']['message_id']);
-					if (message) {
+					const message = get(this._messages).find(
+						(m) => m instanceof Message && m.id === data['data']['message_id']
+					);
+					if (message && message instanceof Message) {
 						const feedback = Feedback.parse(data['data'], message);
 						if (feedback) {
 							feedback.message.localFeedback(feedback);
+							this._messages.update((ms) => [...ms, feedback]);
 							return;
 						}
 					}