diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 7158ffc0277..654928449c0 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -20,7 +20,7 @@ limitations under the License.
     margin-right: 6px;
     padding: 0 6px;
     border: 1px solid $reaction-row-button-border-color;
-    border-radius: 10px;
+    border-radius: 10px; 
     background-color: $reaction-row-button-bg-color;
     cursor: pointer;
     user-select: none;
@@ -33,6 +33,13 @@ limitations under the License.
         background-color: $reaction-row-button-selected-bg-color;
         border-color: $reaction-row-button-selected-border-color;
     }
+    &.mx_ReactionsRowButton_failed {
+        background-color: $reaction-notsent-color;
+        border-color: $reaction-notsent-border;
+    }
+    &.mx_ReactionsRowButton_failed::after{
+        //Add a exclamation icon
+    }
 
     .mx_ReactionsRowButton_content {
         max-width: 100px;
@@ -42,3 +49,4 @@ limitations under the License.
         padding-right: 4px;
     }
 }
+
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 925d268eb00..15e47dd75c6 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -145,6 +145,10 @@ $event-redacted-border-color: #000000;
 $event-highlight-fg-color: $warning-color;
 $event-highlight-bg-color: #25271F;
 
+//event not sent
+$reaction-notsent-color: rgba(140, 12, 12, 0.748);
+$reaction-notsent-border: rgba(68, 0, 0, 0.748);
+
 // event timestamp
 $event-timestamp-color: $text-secondary-color;
 
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 28e6e223260..1b1bcb94280 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -143,6 +143,10 @@ $event-highlight-bg-color: #25271F;
 // event timestamp
 $event-timestamp-color: $text-secondary-color;
 
+//event not sent
+$reaction-notsent-color: rgba(140, 12, 12, 0.748);
+$reaction-notsent-border: rgba(68, 0, 0, 0.748);
+
 // Tabbed views
 $tab-label-fg-color: $text-primary-color;
 $tab-label-active-fg-color: $text-primary-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 7b6bdad4a4d..356980e82e3 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -231,6 +231,8 @@ $yellow-background: #fff8e3;
 
 // event tile lifecycle
 $event-notsent-color: #f44;
+$reaction-notsent-color: rgba(140, 12, 12, 0.748);
+$reaction-notsent-border: rgba(68, 0, 0, 0.748);
 
 $event-highlight-fg-color: $warning-color;
 $event-highlight-bg-color: $yellow-background;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 5b46138dae2..1ae5e72dcff 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -227,6 +227,8 @@ $yellow-background: #fff8e3;
 
 // event tile lifecycle
 $event-notsent-color: #f44;
+$reaction-notsent-color: rgba(140, 12, 12, 0.748);
+$reaction-notsent-border: rgba(68, 0, 0, 0.748);
 
 $event-highlight-fg-color: $warning-color;
 $event-highlight-bg-color: $yellow-background;
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 06421c02a2a..981d33b7497 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
+import {EventStatus} from 'matrix-js-sdk/src/models/event';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -86,9 +86,11 @@ export default class ReactionsRowButton extends React.PureComponent {
         const ReactionsRowButtonTooltip =
             sdk.getComponent('messages.ReactionsRowButtonTooltip');
         const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
+        const failed = mxEvent.status === EventStatus.NOT_SENT;
 
         const classes = classNames({
             mx_ReactionsRowButton: true,
+            mx_ReactionsRowButton_failed: failed,
             mx_ReactionsRowButton_selected: !!myReactionEvent,
         });