change Message container style

 import React from "react";
 import React from "react";
 import styled from "styled-components";
 import styled from "styled-components";
-import { parse, format } from "date-fns";
+import ProfileIcon from "./ProfileIcon";
 
 
 const MessageWrapper = styled.div`
 const MessageWrapper = styled.div`
   display: flex;
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   align-items: center;
   align-items: center;
   padding: 20px 10px;
   padding: 20px 10px;
   margin-top: 20px;
   margin-top: 20px;
@@ -13,6 +13,11 @@ const MessageWrapper = styled.div`
 
 
 const MsgContainer = styled.div`
 const MsgContainer = styled.div`
   display: flex;
   display: flex;
+  flex-direction: row;
+`;
+
+const ColumnBox = styled.div`
+  display: flex;
   flex-direction: column;
   flex-direction: column;
 `;
 `;
 
 
@@ -20,9 +25,7 @@ const MsgBox = styled.div`
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
-  background-color: #54a0ff;
-  color: white;
-  border-radius: 20px;
+  color: black;
   margin-bottom: 10px;
   margin-bottom: 10px;
 `;
 `;
 
 
@@ -42,16 +45,19 @@ const Time = styled.span`
   font-size: 15px;
   font-size: 15px;
 `;
 `;
 
 
-export default ({ text }) => {
+export default ({ text, avatar }) => {
   return (
   return (
     <MessageWrapper className="MessageWrapper">
     <MessageWrapper className="MessageWrapper">
       <MsgContainer>
       <MsgContainer>
-        <MsgBox>
-          <Msg> {text} </Msg>
-        </MsgBox>
-        <TimeBox>
-          <Time></Time>
-        </TimeBox>
+        <ProfileIcon avatar={avatar} />
+        <ColumnBox>
+          <MsgBox>
+            <Msg> {text} </Msg>
+          </MsgBox>
+          <TimeBox>
+            <Time>1</Time>
+          </TimeBox>
+        </ColumnBox>
       </MsgContainer>
       </MsgContainer>
     </MessageWrapper>
     </MessageWrapper>
   );
   );