diff --git a/app/components/custom_list/custom_list_row.js b/app/components/custom_list/custom_list_row.js
index 494349dc3..7650dbf09 100644
--- a/app/components/custom_list/custom_list_row.js
+++ b/app/components/custom_list/custom_list_row.js
@@ -49,7 +49,9 @@ export default class CustomListRow extends React.PureComponent {
                             </View>
                         </View>
                     }
-                    {this.props.children}
+                    <View style={style.children}>
+                        {this.props.children}
+                    </View>
                 </View>
             </ConditionalTouchable>
         );
@@ -65,9 +67,8 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             alignItems: 'center',
             backgroundColor: theme.centerChannelBg,
         },
-        displayName: {
-            fontSize: 15,
-            color: theme.centerChannelColor,
+        children: {
+            flexDirection: 'row',
         },
         selector: {
             height: 28,
@@ -79,6 +80,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             justifyContent: 'center',
         },
         selectorContainer: {
+            flex: 1,
             height: 50,
             paddingRight: 15,
             alignItems: 'center',
diff --git a/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap b/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
index c5095aacf..2e1519289 100644
--- a/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
+++ b/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
@@ -1,147 +1,282 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserListRow should match snapshot 1`] = `
-<CustomListRow
-  enabled={true}
-  id="21345"
-  onPress={[Function]}
-  theme={Object {}}
+<Component
+  style={
+    Object {
+      "flex": 1,
+      "flexDirection": "row",
+      "marginLeft": 10,
+    }
+  }
 >
-  <Connect(ProfilePicture)
-    size={32}
-    userId="21345"
-  />
-  <Component
-    style={
+  <CustomListRow
+    enabled={true}
+    id="21345"
+    onPress={[Function]}
+    theme={
       Object {
-        "flexDirection": "row",
-        "marginLeft": 5,
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
       }
     }
   >
-    <Component>
-      <Component
-        style={
-          Object {
-            "color": undefined,
-            "fontSize": 15,
-          }
+    <Component
+      style={
+        Object {
+          "color": "#3d3c40",
+          "flexDirection": "row",
+          "marginLeft": 10,
         }
-      >
-        user
-      </Component>
+      }
+    >
+      <Connect(ProfilePicture)
+        size={32}
+        userId="21345"
+      />
     </Component>
-    <Component>
-      <Component
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
+    <Component
+      style={
+        Array [
           Object {
-            "color": undefined,
-            "fontSize": 15,
             "marginLeft": 5,
+          },
+          Object {
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Component>
+        <Component
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#3d3c40",
+              "fontSize": 15,
+            }
           }
-        }
-      >
-        (@user)
+        >
+          @user
+        </Component>
       </Component>
     </Component>
-  </Component>
-</CustomListRow>
+    <Component
+      style={
+        Object {
+          "width": 25,
+        }
+      }
+    />
+  </CustomListRow>
+</Component>
 `;
 
 exports[`UserListRow should match snapshot for  currentUser with (you) populated in list 1`] = `
-<CustomListRow
-  enabled={true}
-  id="21345"
-  onPress={[Function]}
-  theme={Object {}}
+<Component
+  style={
+    Object {
+      "flex": 1,
+      "flexDirection": "row",
+      "marginLeft": 10,
+    }
+  }
 >
-  <Connect(ProfilePicture)
-    size={32}
-    userId="21345"
-  />
-  <Component
-    style={
+  <CustomListRow
+    enabled={true}
+    id="21345"
+    onPress={[Function]}
+    theme={
       Object {
-        "flexDirection": "row",
-        "marginLeft": 5,
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
       }
     }
   >
-    <Component>
-      <Component
-        style={
-          Object {
-            "color": undefined,
-            "fontSize": 15,
-          }
-        }
-      >
-        user
-      </Component>
-    </Component>
-    <Component>
-      <Component
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          Object {
-            "color": undefined,
-            "fontSize": 15,
-            "marginLeft": 5,
-          }
+    <Component
+      style={
+        Object {
+          "color": "#3d3c40",
+          "flexDirection": "row",
+          "marginLeft": 10,
         }
+      }
+    >
+      <Connect(ProfilePicture)
+        size={32}
+        userId="21345"
       />
     </Component>
-  </Component>
-</CustomListRow>
+    <Component
+      style={
+        Array [
+          Object {
+            "marginLeft": 5,
+          },
+          Object {
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Component>
+        <Component
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#3d3c40",
+              "fontSize": 15,
+            }
+          }
+        />
+      </Component>
+    </Component>
+    <Component
+      style={
+        Object {
+          "width": 25,
+        }
+      }
+    />
+  </CustomListRow>
+</Component>
 `;
 
 exports[`UserListRow should match snapshot for deactivated user 1`] = `
-<CustomListRow
-  enabled={true}
-  id="21345"
-  onPress={[Function]}
-  theme={Object {}}
+<Component
+  style={
+    Object {
+      "flex": 1,
+      "flexDirection": "row",
+      "marginLeft": 10,
+    }
+  }
 >
-  <Connect(ProfilePicture)
-    size={32}
-    userId="21345"
-  />
-  <Component
-    style={
+  <CustomListRow
+    enabled={true}
+    id="21345"
+    onPress={[Function]}
+    theme={
       Object {
-        "flexDirection": "row",
-        "marginLeft": 5,
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
       }
     }
   >
-    <Component>
-      <Component
-        style={
-          Object {
-            "color": undefined,
-            "fontSize": 15,
-          }
-        }
-      >
-        user
-      </Component>
-    </Component>
-    <Component>
-      <Component
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          Object {
-            "color": undefined,
-            "fontSize": 15,
-            "marginLeft": 5,
-          }
+    <Component
+      style={
+        Object {
+          "color": "#3d3c40",
+          "flexDirection": "row",
+          "marginLeft": 10,
         }
+      }
+    >
+      <Connect(ProfilePicture)
+        size={32}
+        userId="21345"
       />
     </Component>
-  </Component>
-</CustomListRow>
+    <Component
+      style={
+        Array [
+          Object {
+            "marginLeft": 5,
+          },
+          Object {
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Component>
+        <Component
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Object {
+              "color": "#3d3c40",
+              "fontSize": 15,
+            }
+          }
+        />
+      </Component>
+    </Component>
+    <Component
+      style={
+        Object {
+          "width": 25,
+        }
+      }
+    />
+  </CustomListRow>
+</Component>
 `;
diff --git a/app/components/custom_list/user_list_row/user_list_row.js b/app/components/custom_list/user_list_row/user_list_row.js
index 80e1b7c5d..d411c93a3 100644
--- a/app/components/custom_list/user_list_row/user_list_row.js
+++ b/app/components/custom_list/user_list_row/user_list_row.js
@@ -8,7 +8,9 @@ import {
     Text,
     View,
 } from 'react-native';
+
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
+
 import ProfilePicture from 'app/components/profile_picture';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
 import CustomListRow from 'app/components/custom_list/custom_list_row';
@@ -48,11 +50,11 @@ export default class UserListRow extends React.PureComponent {
         const {id, username} = user;
         const style = getStyleFromTheme(theme);
 
-        let usernameDisplay = `(@${username})`;
+        let usernameDisplay = `@${username}`;
         if (isMyUser) {
             usernameDisplay = formatMessage({
                 id: 'mobile.more_dms.you',
-                defaultMessage: '(@{username} - you)',
+                defaultMessage: '@{username} - you',
             }, {username});
         }
 
@@ -63,36 +65,50 @@ export default class UserListRow extends React.PureComponent {
             }, {displayname: usernameDisplay});
         }
 
+        const teammateDisplay = displayUsername(user, teammateNameDisplay);
+        const showTeammateDisplay = teammateDisplay !== username;
+
         return (
-            <CustomListRow
-                id={id}
-                theme={theme}
-                onPress={this.onPress}
-                enabled={enabled}
-                selectable={selectable}
-                selected={selected}
-            >
-                <ProfilePicture
-                    userId={id}
-                    size={32}
-                />
-                <View style={style.textContainer}>
-                    <View>
-                        <Text style={style.displayName}>
-                            {displayUsername(user, teammateNameDisplay)}
-                        </Text>
+            <View style={style.container}>
+                <CustomListRow
+                    id={id}
+                    theme={theme}
+                    onPress={this.onPress}
+                    enabled={enabled}
+                    selectable={selectable}
+                    selected={selected}
+                >
+                    <View style={style.profileContainer}>
+                        <ProfilePicture
+                            userId={id}
+                            size={32}
+                        />
                     </View>
-                    <View>
-                        <Text
-                            style={style.username}
-                            ellipsizeMode='tail'
-                            numberOfLines={1}
-                        >
-                            {usernameDisplay}
-                        </Text>
+                    <View style={[style.textContainer, (showTeammateDisplay ? style.showTeammateDisplay : style.hideTeammateDisplay)]}>
+                        <View>
+                            <Text
+                                style={style.username}
+                                ellipsizeMode='tail'
+                                numberOfLines={1}
+                            >
+                                {usernameDisplay}
+                            </Text>
+                        </View>
+                        {showTeammateDisplay &&
+                        <View>
+                            <Text
+                                style={style.displayName}
+                                ellipsizeMode='tail'
+                                numberOfLines={1}
+                            >
+                                {teammateDisplay}
+                            </Text>
+                        </View>
+                        }
                     </View>
-                </View>
-            </CustomListRow>
+                    <View style={style.rightFiller}/>
+                </CustomListRow>
+            </View>
         );
     }
 }
@@ -100,50 +116,35 @@ export default class UserListRow extends React.PureComponent {
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
         container: {
+            flex: 1,
             flexDirection: 'row',
-            height: 65,
-            paddingHorizontal: 15,
-            alignItems: 'center',
-            backgroundColor: theme.centerChannelBg,
+            marginLeft: 10,
         },
-        displayName: {
-            fontSize: 15,
-            color: theme.centerChannelColor,
-        },
-        icon: {
-            fontSize: 20,
+        profileContainer: {
+            flexDirection: 'row',
+            marginLeft: 10,
             color: theme.centerChannelColor,
         },
         textContainer: {
-            flexDirection: 'row',
             marginLeft: 5,
         },
-        username: {
-            marginLeft: 5,
+        showTeammateDisplay: {
+            flexDirection: 'column',
+            flex: 1,
+        },
+        hideTeammateDisplay: {
+            justifyContent: 'center',
+        },
+        displayName: {
             fontSize: 15,
             color: changeOpacity(theme.centerChannelColor, 0.5),
         },
-        selector: {
-            height: 28,
-            width: 28,
-            borderRadius: 14,
-            borderWidth: 1,
-            borderColor: '#888',
-            alignItems: 'center',
-            justifyContent: 'center',
+        username: {
+            fontSize: 15,
+            color: theme.centerChannelColor,
         },
-        selectorContainer: {
-            height: 50,
-            paddingRight: 15,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        selectorDisabled: {
-            backgroundColor: '#888',
-        },
-        selectorFilled: {
-            backgroundColor: '#378FD2',
-            borderWidth: 0,
+        rightFiller: {
+            width: 25,
         },
     };
 });
diff --git a/app/components/custom_list/user_list_row/user_list_test.test.js b/app/components/custom_list/user_list_row/user_list_test.test.js
index 5d37c8e0a..3e7039d46 100644
--- a/app/components/custom_list/user_list_row/user_list_test.test.js
+++ b/app/components/custom_list/user_list_row/user_list_test.test.js
@@ -4,6 +4,9 @@
 import React from 'react';
 import {configure, shallow} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
 import UserListRow from './user_list_row';
 
 configure({adapter: new Adapter()});
@@ -27,7 +30,7 @@ describe('UserListRow', () => {
             username: 'user',
             delete_at: 0,
         },
-        theme: {},
+        theme: Preferences.THEMES.default,
         teammateNameDisplay: 'test',
     };
 
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index e2bd74a88..ad5afc2bb 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -270,7 +270,7 @@
   "mobile.more_dms.cannot_add_more": "You cannot add more users",
   "mobile.more_dms.start": "Start",
   "mobile.more_dms.title": "New Conversation",
-  "mobile.more_dms.you": "(@{username} - you)",
+  "mobile.more_dms.you": "@{username} - you",
   "mobile.notice_mobile_link": "mobile apps",
   "mobile.notice_platform_link": "server",
   "mobile.notice_text": "Mattermost is made possible by the open source software used in our {platform} and {mobile}.",