update Header Component

 import React from "react";
 import React from "react";
 import styled from "styled-components";
 import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faComments, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
 
 
-const HeaderContainer = styled.div``;
+const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  svg {
+    font-size: 30px;
+  }
+  box-shadow: 1px 1px 20px #8395a7;
+  background-color: #667aff;
+`;
 
 
-const HeaderTitle = styled.span``;
+const TitleBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 20px 10px;
+  color: white;
+  svg {
+    margin-right: 5px;
+    opacity: 0.7;
+  }
+`;
+
+const HeaderSpan = styled.span`
+  font-family: "Raleway", sans-serif;
+  font-size: 30px;
+`;
 
 
 export default ({ text }) => {
 export default ({ text }) => {
   return (
   return (
     <HeaderContainer>
     <HeaderContainer>
-      <HeaderTitle>{text}</HeaderTitle>
+      <TitleBox>
+        <FontAwesomeIcon icon={faComments} />
+        <HeaderSpan>{text}</HeaderSpan>
+      </TitleBox>
+      <TitleBox>
+        <FontAwesomeIcon icon={faSignOutAlt} />
+      </TitleBox>
     </HeaderContainer>
     </HeaderContainer>
   );
   );
 };
 };