diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css
index ddd3962b33..2f735f624b 100644
--- a/skins/base/css/molecules/MemberTile.css
+++ b/skins/base/css/molecules/MemberTile.css
@@ -51,3 +51,11 @@ limitations under the License.
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.mx_MemberTile_unavailable {
+    opacity: 0.75;
+}
+
+.mx_MemberTile_offline {
+    opacity: 0.5;
+}
\ No newline at end of file
diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js
index 4e00f2af23..1286173d38 100644
--- a/skins/base/views/molecules/MemberTile.js
+++ b/skins/base/views/molecules/MemberTile.js
@@ -46,9 +46,21 @@ module.exports = React.createClass({
             var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
             power = <img src={ img } className="mx_MemberTile_power" width="48" height="48" alt=""/>;
         }
+        var presenceClass = "mx_MemberTile_offline";
+        var mainClassName = "mx_MemberTile ";
+        if (this.props.member.user) {
+            if (this.props.member.user.presence === "online") {
+                presenceClass = "mx_MemberTile_online";
+            }
+            else if (this.props.member.user.presence === "unavailable") {
+                presenceClass = "mx_MemberTile_unavailable";
+            }
+        }
+        mainClassName += presenceClass;
 
         return (
-            <div className="mx_MemberTile" onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave } >
+            <div className={mainClassName} onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }
+            >
                 <div className="mx_MemberTile_avatar">
                     <img className="mx_MemberTile_avatarImg"
                          src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 40, 40, "crop") : null }
diff --git a/skins/base/views/organisms/MemberList.js b/skins/base/views/organisms/MemberList.js
index a08a03c3c3..3e586e569c 100644
--- a/skins/base/views/organisms/MemberList.js
+++ b/skins/base/views/organisms/MemberList.js
@@ -47,7 +47,7 @@ module.exports = React.createClass({
         return Object.keys(self.state.memberDict).map(function(userId) {
             var m = self.state.memberDict[userId];
             return (
-                <MemberTile key={userId} member={m} />
+                <MemberTile key={userId} member={m} ref={userId} />
             );
         });
     },
diff --git a/src/controllers/organisms/MemberList.js b/src/controllers/organisms/MemberList.js
index 89dd985564..0695270066 100644
--- a/src/controllers/organisms/MemberList.js
+++ b/src/controllers/organisms/MemberList.js
@@ -40,6 +40,7 @@ module.exports = {
     componentWillUnmount: function() {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+            MatrixClientPeg.get().removeListener("User.presence", this.userPresenceFn);
         }
     },
 
@@ -51,8 +52,19 @@ module.exports = {
                 memberDict: self.roomMembers()
             });
         }, 50);
-    },
 
+        // Attach a SINGLE listener for global presence changes then locate the
+        // member tile and re-render it. This is more efficient than every tile
+        // evar attaching their own listener.
+        function updateUserState(event, user) {
+            var tile = self.refs[user.userId];
+            if (tile) {
+                tile.forceUpdate();
+            }
+        }
+        MatrixClientPeg.get().on("User.presence", updateUserState);
+        this.userPresenceFn = updateUserState;
+    },
     // Remember to set 'key' on a MemberList to the ID of the room it's for
     /*componentWillReceiveProps: function(newProps) {
     },*/