diff --git a/src/components/Room.js b/src/components/Room.js
index 0184619..abf2277 100644
--- a/src/components/Room.js
+++ b/src/components/Room.js
@@ -1,14 +1,15 @@
 import React, { PropTypes } from "react";
 
-const Room = ({ isSelected, name, onClick }) => {
-    let className;
+const Room = ({ isSelected, name, onClick, room }) => {
+    const classes = ["room"];
     if (isSelected) {
-        className = "room room-selected";
-    } else {
-        className = "room";
+        classes.push("room-selected");
+    }
+    if (room.membership == "Member") {
+        classes.push("room-joined");
     }
     return (
-        <a className={className} onClick={onClick} href="#">
+        <a className={classes.join(" ")} onClick={onClick} href="#">
             {name}
         </a>
     );
@@ -17,7 +18,10 @@ const Room = ({ isSelected, name, onClick }) => {
 Room.propTypes = {
     isSelected: PropTypes.bool.isRequired,
     name: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired
+    onClick: PropTypes.func.isRequired,
+    room: PropTypes.shape({
+        membership: PropTypes.string.isRequired
+    })
 };
 
 export default Room;
diff --git a/src/components/RoomList.js b/src/components/RoomList.js
index d0e720d..cccdb1e 100644
--- a/src/components/RoomList.js
+++ b/src/components/RoomList.js
@@ -24,8 +24,12 @@ class RoomList extends React.Component {
 
             children.push(
                 <li key={room_name}>
-                    <Room onClick={onClick} name={room_name} {...room_data}
-                        isSelected={selected == room_name} />
+                    <Room
+                        onClick={onClick}
+                        name={room_name}
+                        room={room_data}
+                        isSelected={selected == room_name}
+                    />
                 </li>
             );
         }
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 0bd74df..b5b818e 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -164,7 +164,7 @@ main {
     overflow-y: auto;
 }
 
-a.room {
+.room {
     display: flex;
     color: inherit;
     text-decoration: inherit;
@@ -172,16 +172,20 @@ a.room {
     border: solid grey 0.1em;
 }
 
-a.room:hover {
+.room:hover {
     background: lightgrey;
 }
 
-a.room:active {
+.room:active {
     background: grey;
 }
 
-a.room-selected {
-    background: orange;
+.room-joined {
+    background: lightgreen;
+}
+
+.room-selected {
+    background: lightblue;
 }
 
 #login-status-pane, #socket-status-pane {