diff --git a/components/chat.js b/components/chat.js
index 2d8c6ad..f728304 100644
--- a/components/chat.js
+++ b/components/chat.js
@@ -7,7 +7,7 @@ const debounce = require('debounce')
 const jdenticon = require('jdenticon')
 const defaultValue = require('default-value')
 
-const Event = require('./events/Event.js') 
+const Event = require('./events/Event.js')
 
 jdenticon.config = {
     lightness: {
@@ -132,7 +132,7 @@ let EventGroup = create({
       return <Event event={event} key={key} client={this.props.client} />
     })
     return <div className="eventGroup">
-      <svg id="avatar" ref={this.avatarRef} ></svg>
+      <svg id="avatar" ref={this.avatarRef} />
       <div className="col">
         <div id="name" className={`fg-palet-${this.state.color}`}>{this.state.user.displayName}</div>
         {events}
diff --git a/components/sidebar.js b/components/sidebar.js
index 7d44d69..dc9c3cb 100644
--- a/components/sidebar.js
+++ b/components/sidebar.js
@@ -18,8 +18,8 @@ let RoomListItem = create({
     }
   },
 
-  componentDidMount() {
-    jdenticon.update("svg")
+  avatarRef: function(ref) {
+    jdenticon.update(ref, this.props.content.roomId)
   },
 
   setRef: function(ref) {
@@ -42,7 +42,7 @@ let RoomListItem = create({
       className += " unread"
     }
     return <div className={className} ref={this.setRef}>
-      <svg id="avatar" data-jdenticon-value={this.props.content.roomId}></svg>
+      <svg id="avatar" ref={this.avatarRef}/>
       <span id="name">{this.props.content.name}</span>
     </div>
   }