diff --git a/src/domain/session/room/timeline/tiles/SimpleTile.js b/src/domain/session/room/timeline/tiles/SimpleTile.js
index f29f46d6..17d16ab4 100644
--- a/src/domain/session/room/timeline/tiles/SimpleTile.js
+++ b/src/domain/session/room/timeline/tiles/SimpleTile.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 import {UpdateAction} from "../UpdateAction.js";
 import {ViewModel} from "../../../../ViewModel.js";
+import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";
 
 export class SimpleTile extends ViewModel {
     constructor(options) {
@@ -47,6 +48,10 @@ export class SimpleTile extends ViewModel {
         return this._entry.isPending;
     }
 
+    get isUnsent() {
+        return this._entry.isPending && this._entry.status !== SendStatus.Sent;
+    }
+
     abortSending() {
         this._entry.pendingEvent?.abort();
     }
diff --git a/src/platform/web/ui/css/themes/bubbles/theme.css b/src/platform/web/ui/css/themes/bubbles/theme.css
index 933ae9d3..3e302110 100644
--- a/src/platform/web/ui/css/themes/bubbles/theme.css
+++ b/src/platform/web/ui/css/themes/bubbles/theme.css
@@ -159,7 +159,7 @@ a {
     margin-left: auto;
 }
 
-.TextMessageView.pending .message-container {
+.TextMessageView.unsent .message-container {
     background-color: #333;
 }
 
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index a4d7c4e6..4c6e1dbf 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -624,7 +624,7 @@ only loads when the top comes into view*/
     align-self: start;
 }
 
-.TextMessageView.pending .message-container {
+.TextMessageView.unsent .message-container {
     color: #ccc;
 }
 
diff --git a/src/platform/web/ui/session/room/timeline/common.js b/src/platform/web/ui/session/room/timeline/common.js
index d49e845b..0d1e30ee 100644
--- a/src/platform/web/ui/session/room/timeline/common.js
+++ b/src/platform/web/ui/session/room/timeline/common.js
@@ -21,7 +21,7 @@ export function renderMessage(t, vm, children) {
     const classes = {
         "TextMessageView": true,
         own: vm.isOwn,
-        pending: vm.isPending,
+        unsent: vm.isUnsent,
         unverified: vm.isUnverified,
         continuation: vm => vm.isContinuation,
         messageStatus: vm => vm.shape === "message-status" || vm.shape === "missing-attachment" || vm.shape === "file",