diff --git a/.snyk b/.snyk
new file mode 100644
index 000000000..1c6af145e
--- /dev/null
+++ b/.snyk
@@ -0,0 +1,26 @@
+# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
+version: v1.7.1
+ignore: {}
+# patches apply the minimum changes required to fix a vulnerability
+patch:
+  'npm:debug:20170905':
+    - react-native > connect > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - react-native > connect > express-session > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - react-native > connect > finalhandler > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - react-native > connect > morgan > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - react-native > connect > serve-index > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - react-native > connect > body-parser > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - react-native > connect > compression > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - react-native > connect > connect-timeout > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - react-native > connect > serve-static > send > debug:
+        patched: '2017-09-29T23:29:20.238Z'
+    - realm > extract-zip > debug:
+        patched: '2017-09-29T23:29:20.238Z'
diff --git a/__tests__/__snapshots__/RoomItem.js.snap b/__tests__/__snapshots__/RoomItem.js.snap
index 0a4e79839..f8904769c 100644
--- a/__tests__/__snapshots__/RoomItem.js.snap
+++ b/__tests__/__snapshots__/RoomItem.js.snap
@@ -87,13 +87,16 @@ exports[`render channel 1`] = `
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
-        Object {
-          "color": "#444",
-          "flex": 1,
-          "fontSize": 16,
-          "height": 16,
-          "paddingTop": 10,
-        }
+        Array [
+          Object {
+            "color": "#444",
+            "flex": 1,
+            "fontSize": 16,
+            "height": 16,
+            "paddingTop": 10,
+          },
+          undefined,
+        ]
       }
     >
       general
@@ -163,13 +166,16 @@ exports[`render no icon 1`] = `
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
-        Object {
-          "color": "#444",
-          "flex": 1,
-          "fontSize": 16,
-          "height": 16,
-          "paddingTop": 10,
-        }
+        Array [
+          Object {
+            "color": "#444",
+            "flex": 1,
+            "fontSize": 16,
+            "height": 16,
+            "paddingTop": 10,
+          },
+          undefined,
+        ]
       }
     >
       name
@@ -239,13 +245,16 @@ exports[`render private group 1`] = `
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
-        Object {
-          "color": "#444",
-          "flex": 1,
-          "fontSize": 16,
-          "height": 16,
-          "paddingTop": 10,
-        }
+        Array [
+          Object {
+            "color": "#444",
+            "flex": 1,
+            "fontSize": 16,
+            "height": 16,
+            "paddingTop": 10,
+          },
+          undefined,
+        ]
       }
     >
       private-group
@@ -351,13 +360,16 @@ exports[`render unread +999 1`] = `
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
-        Object {
-          "color": "#444",
-          "flex": 1,
-          "fontSize": 16,
-          "height": 16,
-          "paddingTop": 10,
-        }
+        Array [
+          Object {
+            "color": "#444",
+            "flex": 1,
+            "fontSize": 16,
+            "height": 16,
+            "paddingTop": 10,
+          },
+          undefined,
+        ]
       }
     >
       name
@@ -386,13 +398,13 @@ exports[`render unread +999 1`] = `
     style={
       Object {
         "backgroundColor": "#1d74f5",
-        "borderRadius": 5,
+        "borderRadius": 3,
         "color": "#fff",
         "fontSize": 14,
         "minWidth": 20,
         "overflow": "hidden",
-        "paddingLeft": 5,
-        "paddingRight": 5,
+        "paddingHorizontal": 5,
+        "paddingVertical": 2,
         "textAlign": "center",
       }
     }
@@ -483,13 +495,16 @@ exports[`render unread 1`] = `
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
-        Object {
-          "color": "#444",
-          "flex": 1,
-          "fontSize": 16,
-          "height": 16,
-          "paddingTop": 10,
-        }
+        Array [
+          Object {
+            "color": "#444",
+            "flex": 1,
+            "fontSize": 16,
+            "height": 16,
+            "paddingTop": 10,
+          },
+          undefined,
+        ]
       }
     >
       name
@@ -518,13 +533,13 @@ exports[`render unread 1`] = `
     style={
       Object {
         "backgroundColor": "#1d74f5",
-        "borderRadius": 5,
+        "borderRadius": 3,
         "color": "#fff",
         "fontSize": 14,
         "minWidth": 20,
         "overflow": "hidden",
-        "paddingLeft": 5,
-        "paddingRight": 5,
+        "paddingHorizontal": 5,
+        "paddingVertical": 2,
         "textAlign": "center",
       }
     }
@@ -615,13 +630,16 @@ exports[`renders correctly 1`] = `
       ellipsizeMode="tail"
       numberOfLines={1}
       style={
-        Object {
-          "color": "#444",
-          "flex": 1,
-          "fontSize": 16,
-          "height": 16,
-          "paddingTop": 10,
-        }
+        Array [
+          Object {
+            "color": "#444",
+            "flex": 1,
+            "fontSize": 16,
+            "height": 16,
+            "paddingTop": 10,
+          },
+          undefined,
+        ]
       }
     >
       name
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index bdf174320..2f91e8629 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -253,13 +253,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
           }
         >
           rocket.cat
@@ -381,13 +384,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              Object {
+                "fontWeight": "bold",
+              },
+            ]
           }
         >
           rocket.cat
@@ -509,13 +517,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
           }
         >
           rocket.cat
@@ -544,13 +555,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         style={
           Object {
             "backgroundColor": "#1d74f5",
-            "borderRadius": 5,
+            "borderRadius": 3,
             "color": "#fff",
             "fontSize": 14,
             "minWidth": 20,
             "overflow": "hidden",
-            "paddingLeft": 5,
-            "paddingRight": 5,
+            "paddingHorizontal": 5,
+            "paddingVertical": 2,
             "textAlign": "center",
           }
         }
@@ -657,13 +668,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              Object {
+                "fontWeight": "bold",
+              },
+            ]
           }
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
@@ -692,13 +708,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         style={
           Object {
             "backgroundColor": "#1d74f5",
-            "borderRadius": 5,
+            "borderRadius": 3,
             "color": "#fff",
             "fontSize": 14,
             "minWidth": 20,
             "overflow": "hidden",
-            "paddingLeft": 5,
-            "paddingRight": 5,
+            "paddingHorizontal": 5,
+            "paddingVertical": 2,
             "textAlign": "center",
           }
         }
@@ -805,13 +821,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
           }
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
@@ -840,13 +859,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         style={
           Object {
             "backgroundColor": "#1d74f5",
-            "borderRadius": 5,
+            "borderRadius": 3,
             "color": "#fff",
             "fontSize": 14,
             "minWidth": 20,
             "overflow": "hidden",
-            "paddingLeft": 5,
-            "paddingRight": 5,
+            "paddingHorizontal": 5,
+            "paddingVertical": 2,
             "textAlign": "center",
           }
         }
@@ -953,13 +972,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
           }
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
@@ -988,13 +1010,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         style={
           Object {
             "backgroundColor": "#1d74f5",
-            "borderRadius": 5,
+            "borderRadius": 3,
             "color": "#fff",
             "fontSize": 14,
             "minWidth": 20,
             "overflow": "hidden",
-            "paddingLeft": 5,
-            "paddingRight": 5,
+            "paddingHorizontal": 5,
+            "paddingVertical": 2,
             "textAlign": "center",
           }
         }
@@ -1101,13 +1123,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
           }
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
@@ -1136,13 +1161,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         style={
           Object {
             "backgroundColor": "#1d74f5",
-            "borderRadius": 5,
+            "borderRadius": 3,
             "color": "#fff",
             "fontSize": 14,
             "minWidth": 20,
             "overflow": "hidden",
-            "paddingLeft": 5,
-            "paddingRight": 5,
+            "paddingHorizontal": 5,
+            "paddingVertical": 2,
             "textAlign": "center",
           }
         }
@@ -1150,6 +1175,157 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         999+
       </Text>
     </View>
+    <View
+      accessibilityComponentType={undefined}
+      accessibilityLabel={undefined}
+      accessibilityTraits={undefined}
+      accessible={true}
+      collapsable={undefined}
+      hitSlop={undefined}
+      isTVSelectable={true}
+      nativeID={undefined}
+      onLayout={undefined}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 56,
+          "opacity": 1,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+        }
+      }
+      testID={undefined}
+      tvParallaxProperties={undefined}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "justifyContent": "center",
+              "overflow": "hidden",
+            },
+            Object {
+              "backgroundColor": "#795548",
+              "borderRadius": 4,
+              "height": 40,
+              "width": 40,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#ffffff",
+              },
+              Object {
+                "fontSize": 20,
+              },
+            ]
+          }
+        >
+          LC
+        </Text>
+        <CachedImage
+          source={
+            Object {
+              "uri": "https://demo.rocket.chat/avatar/Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
+            }
+          }
+          style={
+            Array [
+              Object {
+                "position": "absolute",
+              },
+              Object {
+                "borderRadius": 4,
+                "height": 40,
+                "width": 40,
+              },
+            ]
+          }
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "marginLeft": 16,
+            "marginRight": 4,
+          }
+        }
+      >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
+          }
+        >
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
+        </Text>
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#888",
+              "flex": 1,
+              "fontSize": 10,
+              "height": 10,
+            }
+          }
+        >
+          11-10-2017 10:00:00
+        </Text>
+      </View>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "backgroundColor": "#1d74f5",
+            "borderRadius": 3,
+            "color": "#fff",
+            "fontSize": 14,
+            "minWidth": 20,
+            "overflow": "hidden",
+            "paddingHorizontal": 5,
+            "paddingVertical": 2,
+            "textAlign": "center",
+          }
+        }
+      >
+        @ 999+
+      </Text>
+    </View>
     <View
       accessibilityComponentType={undefined}
       accessibilityLabel={undefined}
@@ -1230,13 +1406,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
           }
         >
           W
@@ -1339,13 +1518,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
           }
         >
           WW
@@ -1448,13 +1630,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
           ellipsizeMode="tail"
           numberOfLines={1}
           style={
-            Object {
-              "color": "#444",
-              "flex": 1,
-              "fontSize": 16,
-              "height": 16,
-              "paddingTop": 10,
-            }
+            Array [
+              Object {
+                "color": "#444",
+                "flex": 1,
+                "fontSize": 16,
+                "height": 16,
+                "paddingTop": 10,
+              },
+              undefined,
+            ]
           }
         >
           
diff --git a/app/lib/realm.js b/app/lib/realm.js
index ec3e79837..e1a3edff7 100644
--- a/app/lib/realm.js
+++ b/app/lib/realm.js
@@ -66,6 +66,7 @@ const subscriptionSchema = {
 	properties: {
 		_id: 'string',
 		_server: 'servers',
+		f: { type: 'bool', optional: true },
 		t: 'string',
 		ts: { type: 'date', optional: true },
 		ls: { type: 'date', optional: true },
@@ -76,6 +77,7 @@ const subscriptionSchema = {
 		alert: { type: 'bool', optional: true },
 		roles: { type: 'list', objectType: 'subscriptionRolesSchema' },
 		unread: { type: 'int', optional: true },
+		userMentions: { type: 'int', optional: true },
 		// userMentions: 0,
 		// groupMentions: 0,
 		_updatedAt: { type: 'date', optional: true }
@@ -159,7 +161,8 @@ const realm = new Realm({
 		messagesEditedBySchema,
 		permissionsSchema,
 		permissionsRolesSchema
-	]
+	],
+	deleteRealmIfMigrationNeeded: true
 });
 export default realm;
 
diff --git a/app/presentation/RoomItem.js b/app/presentation/RoomItem.js
index 3d97e491b..3731dde1b 100644
--- a/app/presentation/RoomItem.js
+++ b/app/presentation/RoomItem.js
@@ -17,14 +17,14 @@ const styles = StyleSheet.create({
 	},
 	number: {
 		minWidth: 20,
-		borderRadius: 5,
+		borderRadius: 3,
 		backgroundColor: '#1d74f5',
 		color: '#fff',
 		textAlign: 'center',
 		overflow: 'hidden',
 		fontSize: 14,
-		paddingLeft: 5,
-		paddingRight: 5
+		paddingHorizontal: 5,
+		paddingVertical: 2
 	},
 	roomNameView: {
 		flex: 1,
@@ -38,6 +38,12 @@ const styles = StyleSheet.create({
 		height: 16,
 		color: '#444'
 	},
+	alert: {
+		fontWeight: 'bold'
+	},
+	favorite: {
+		// backgroundColor: '#eee'
+	},
 	update: {
 		flex: 1,
 		fontSize: 10,
@@ -67,7 +73,10 @@ export default class RoomItem extends React.PureComponent {
 		type: PropTypes.string.isRequired,
 		name: PropTypes.string.isRequired,
 		_updatedAt: PropTypes.instanceOf(Date),
+		favorite: PropTypes.bool,
+		alert: PropTypes.bool,
 		unread: PropTypes.number,
+		userMentions: PropTypes.number,
 		baseUrl: PropTypes.string,
 		onPress: PropTypes.func,
 		dateFormat: PropTypes.string
@@ -101,7 +110,7 @@ export default class RoomItem extends React.PureComponent {
 		);
 	}
 
-	renderNumber = (unread) => {
+	renderNumber = (unread, userMentions) => {
 		if (!unread || unread <= 0) {
 			return;
 		}
@@ -110,6 +119,10 @@ export default class RoomItem extends React.PureComponent {
 			unread = '999+';
 		}
 
+		if (userMentions > 0) {
+			unread = `@ ${ unread }`;
+		}
+
 		return (
 			<Text style={styles.number}>
 				{ unread }
@@ -118,16 +131,18 @@ export default class RoomItem extends React.PureComponent {
 	}
 
 	render() {
-		const { unread, name, _updatedAt } = this.props;
+		const {
+			favorite, alert, unread, userMentions, name, _updatedAt
+		} = this.props;
 
 		return (
-			<TouchableOpacity onPress={this.props.onPress} style={styles.container}>
+			<TouchableOpacity onPress={this.props.onPress} style={[styles.container, favorite && styles.favorite]}>
 				{this.icon}
 				<View style={styles.roomNameView}>
-					<Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
+					<Text style={[styles.roomName, alert && styles.alert]} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
 					{_updatedAt ? <Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ moment(_updatedAt).format(this.props.dateFormat) }</Text> : null}
 				</View>
-				{this.renderNumber(unread)}
+				{this.renderNumber(unread, userMentions)}
 			</TouchableOpacity>
 		);
 	}
diff --git a/app/views/RoomsListView.js b/app/views/RoomsListView.js
index e81b41670..84d2e33a1 100644
--- a/app/views/RoomsListView.js
+++ b/app/views/RoomsListView.js
@@ -254,7 +254,10 @@ export default class RoomsListView extends React.Component {
 
 	renderItem = item => (
 		<RoomItem
+			alert={item.alert}
 			unread={item.unread}
+			userMentions={item.userMentions}
+			favorite={item.f}
 			name={item.name}
 			_updatedAt={item._updatedAt}
 			key={item._id}
diff --git a/package.json b/package.json
index eaf2cf1be..c952b9f00 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
     "ios": "react-native run-ios",
     "log-android": "react-native log-android",
     "android": "react-native run-android",
-    "storybook": "storybook start -p 7007"
+    "storybook": "storybook start -p 7007",
+    "snyk-protect": "snyk protect",
+    "prepare": "npm run snyk-protect"
   },
   "dependencies": {
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -49,7 +51,8 @@
     "redux-saga": "^0.16.0",
     "regenerator-runtime": "^0.11.0",
     "remote-redux-devtools": "^0.5.12",
-    "strip-ansi": "^4.0.0"
+    "strip-ansi": "^4.0.0",
+    "snyk": "^1.41.1"
   },
   "devDependencies": {
     "@storybook/addon-storyshots": "^3.2.15",
@@ -80,6 +83,7 @@
       ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
     }
   },
+  "snyk": true,
   "engines": {
     "node": ">=8.x",
     "npm": ">=4.x",
diff --git a/storybook/stories/Channels/DirectMessage.js b/storybook/stories/Channels/DirectMessage.js
index e90904076..e9833ab4a 100644
--- a/storybook/stories/Channels/DirectMessage.js
+++ b/storybook/stories/Channels/DirectMessage.js
@@ -18,6 +18,7 @@ export default (
 		<RoomItem
 			type='d'
 			unread={0}
+			alert
 			_updatedAt={date}
 			dateFormat={dateFormat}
 			name='rocket.cat'
@@ -34,6 +35,7 @@ export default (
 		<RoomItem
 			type='d'
 			unread={9}
+			alert
 			_updatedAt={date}
 			dateFormat={dateFormat}
 			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
@@ -50,6 +52,7 @@ export default (
 		<RoomItem
 			type='d'
 			unread={100}
+			userMentions={0}
 			_updatedAt={date}
 			dateFormat={dateFormat}
 			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
@@ -58,6 +61,16 @@ export default (
 		<RoomItem
 			type='d'
 			unread={100000}
+			userMentions={0}
+			_updatedAt={date}
+			dateFormat={dateFormat}
+			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+			baseUrl='https://demo.rocket.chat'
+		/>
+		<RoomItem
+			type='d'
+			unread={100000}
+			userMentions={1}
 			_updatedAt={date}
 			dateFormat={dateFormat}
 			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"