diff --git a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.styles.ts b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.styles.ts
new file mode 100644
index 00000000000..5360e56b6b6
--- /dev/null
+++ b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.styles.ts
@@ -0,0 +1,22 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+export const warning: CSSObject = {color: 'var(--danger-color)'};
diff --git a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.test.tsx b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.test.tsx
similarity index 100%
rename from src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.test.tsx
rename to src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.test.tsx
diff --git a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.tsx b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.tsx
similarity index 84%
rename from src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.tsx
rename to src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.tsx
index bc44c16bb0d..c997ed9d99a 100644
--- a/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning.tsx
+++ b/src/script/components/MessagesList/Message/ContentMessage/FailedToSendWarning/FailedToSendWarning.tsx
@@ -22,10 +22,12 @@ import {useState} from 'react';
import type {QualifiedUserClients} from '@wireapp/api-client/lib/conversation';
import {QualifiedId} from '@wireapp/api-client/lib/user';
-import {Button, ButtonVariant} from '@wireapp/react-ui-kit';
+import {Bold, Button, ButtonVariant} from '@wireapp/react-ui-kit';
import {matchQualifiedIds} from 'Util/QualifiedId';
+import {warning} from './FailedToSendWarning.styles';
+
export type User = {id: QualifiedId; name: string};
type Props = {
failedToSend: QualifiedUserClients;
@@ -58,23 +60,29 @@ export const FailedToSendWarning = ({failedToSend, knownUsers}: Props) => {
const namedUsers = generateNamedUsers(knownUsers, failedToSend);
const message =
- namedUsers.length === 1
- ? `${namedUsers[0].name} will receive your message later`
- : `${userCount} Participants had issues receiving this message`;
+ namedUsers.length === 1 ? (
+ <>
+
{message}
+{message}
{showToggle && ( <> {isOpen && ( -{namedUsers.map(user => ( {user.name} ))} -