diff --git a/jam-ui/src/components/people/JKFriendsAutoComplete.js b/jam-ui/src/components/people/JKFriendsAutoComplete.js
index a40131d82..cd139883c 100644
--- a/jam-ui/src/components/people/JKFriendsAutoComplete.js
+++ b/jam-ui/src/components/people/JKFriendsAutoComplete.js
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { PropTypes } from 'prop-types';
 import Avatar from '../common/Avatar';
+import JKProfileAvatar from '../profile/JKProfileAvatar';
 import { useResponsive } from '@farfetch/react-context-responsive';
 
 function JKFriendsAutoComplete({ friends, onSelect }) {
@@ -108,10 +109,14 @@ function JKFriendsAutoComplete({ friends, onSelect }) {
       <ListGroup className={showDropdown ? 'd-block' : 'd-none'} data-testid="autocomplete-list">
         {filteredFriends.map(f => (
           <ListGroupItem key={f.id} onMouseOver={highlight} onMouseOut={unhighlight} onClick={() => handleOnClick(f)}>
-            <Avatar src={f.photo_url} size="m" />
-            <span className="ml-1" style={{ cursor: 'pointer' }}>
-              {f.first_name} {f.last_name}
-            </span>
+            <div style={{ display: "grid", gridTemplateColumns: "30px auto", columnGap: "5px"}}>
+              <div>
+                <JKProfileAvatar src={f.photo_url} size="m" /> 
+              </div>
+              <div>
+                {f.first_name} {f.last_name}
+              </div>
+            </div>
           </ListGroupItem>
         ))}
       </ListGroup>