diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 9cbf839f21..49e3930979 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -23,8 +23,14 @@ limitations under the License.
     border: 1px solid $reaction-row-button-border-color;
     border-radius: 10px;
     background-color: $reaction-row-button-bg-color;
+    cursor: pointer;
 
     &:hover {
         border-color: $reaction-row-button-hover-border-color;
     }
+
+    &.mx_ReactionsRowButton_selected {
+        background-color: $reaction-row-button-selected-bg-color;
+        border-color: $reaction-row-button-selected-border-color;
+    }
 }
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 30066c7af4..592b1a1887 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -154,6 +154,8 @@ $message-action-bar-hover-border-color: $header-panel-text-primary-color;
 $reaction-row-button-bg-color: $header-panel-bg-color;
 $reaction-row-button-border-color: #616b7f;
 $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
+$reaction-row-button-selected-bg-color: #1f6954;
+$reaction-row-button-selected-border-color: $accent-color;
 
 // ***** Mixins! *****
 
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 223d0fc80c..adadd39333 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -262,6 +262,8 @@ $message-action-bar-hover-border-color: #b8c1d2;
 $reaction-row-button-bg-color: $header-panel-bg-color;
 $reaction-row-button-border-color: #e9edf1;
 $reaction-row-button-hover-border-color: #bebebe;
+$reaction-row-button-selected-bg-color: #e9fff9;
+$reaction-row-button-selected-border-color: $accent-color;
 
 // ***** Mixins! *****
 
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 4afcf93fff..985479a237 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 export default class ReactionsRowButton extends React.PureComponent {
     static propTypes = {
@@ -23,11 +24,42 @@ export default class ReactionsRowButton extends React.PureComponent {
         count: PropTypes.number.isRequired,
     }
 
+    constructor(props) {
+        super(props);
+
+        // TODO: This should be derived from actual reactions you may have sent
+        // once we have some API to read them.
+        this.state = {
+            selected: false,
+        };
+    }
+
+    onClick = (ev) => {
+        const state = this.state.selected;
+        this.setState({
+            selected: !state,
+        });
+        // TODO: Send the reaction event
+    };
+
     render() {
         const { content, count } = this.props;
+        const { selected } = this.state;
 
-        return <span className="mx_ReactionsRowButton">
-            {content} {count}
+        const classes = classNames({
+            mx_ReactionsRowButton: true,
+            mx_ReactionsRowButton_selected: selected,
+        });
+
+        let adjustedCount = count;
+        if (selected) {
+            adjustedCount++;
+        }
+
+        return <span className={classes}
+            onClick={this.onClick}
+        >
+            {content} {adjustedCount}
         </span>;
     }
 }