diff --git a/components/Comment.js b/components/Comment.js
index fd216dd..5b0fe4e 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -10,6 +10,7 @@ import Moment from 'moment';
 import i18n from "../i18nMessages.js";
 import 'moment/min/locales';
 Moment.locale(i18n.locale);
+import ProfilePhotoCircle from './ProfilePhotoCircle.js';
 
 let Comment = ({ comment, postid }) => {
     const gState = useSnapshot(GlobalState);
@@ -19,7 +20,7 @@ let Comment = ({ comment, postid }) => {
     const newCommentReaction = () => {
         if (!comment.reactions[viewer._id]) {
             comment.reactions[viewer._id] = { type: "like" };
-            changeLikes(likes+1);
+            changeLikes(likes + 1);
             API.newCommentReaction(postid, comment.createdAt);
         } else {
             //API.removePostReaction(viewer._id).then(() => {
@@ -31,14 +32,20 @@ let Comment = ({ comment, postid }) => {
     return (
         <Card style={styles.comment}>
             <Card.Content>
-                <View style={{flexDirection: "row", alignItems: "center", justifyContent: "center"}}>
-                    <View style={{flex:8}}>
-                        <Text style={styles.userName}>
-                            <UserName profileid={comment.profileid} key={comment.profileid} />
-                            <Text style={{fontSize: 12, fontWeight: "normal"}}> {Moment(comment.createdAt).fromNow()}</Text>
-                        </Text>
+                <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
+                    <View style={{ flex: 8, marginBottom: 8 }}>
+                        <ProfilePhotoCircle profileid={comment.profileid} />
+                        <Text style={
+                            {
+                                fontSize: 12,
+                                fontWeight: "normal",
+                                position: "absolute",
+                                top: 20,
+                                left: 37,
+                            }
+                        }> {Moment(comment.createdAt).fromNow()}</Text>
                     </View>
-                    <View style={{flex:2}}>
+                    <View style={{ flex: 2 }}>
                         <Button
                             icon={comment.reactions[viewer._id] ? "favorite" : "favorite-border"}
                             dense={true}
@@ -46,8 +53,8 @@ let Comment = ({ comment, postid }) => {
                         >{likes ? likes : ''}</Button>
                     </View>
                 </View>
-                <Text style={{fontSize: 14}}>{cleanContent}</Text>
-                <Media content={comment.content} postId={postid} skiptVideo={true}/>
+                <Text style={{ fontSize: 14 }}>{cleanContent}</Text>
+                <Media content={comment.content} postId={postid} skiptVideo={true} />
             </Card.Content>
         </Card>
     );
@@ -60,12 +67,6 @@ const styles = StyleSheet.create({
         margin: 8,
         marginTop: 0,
     },
-    userName: {
-        fontSize: 14,
-        fontWeight: 'bold',
-        marginBottom: 5,
-        fontSize: 16
-    },
     likeComment: {
         position: 'absolute',
         margin: 16,