recreate header

 import React from "react";
 import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faComments, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
-import { gql } from "apollo-boost";
-import { useMutation } from "@apollo/react-hooks";
-import { BrowserRouter as Router, Link } from "react-router-dom";
+import { faComments } from "@fortawesome/free-solid-svg-icons";
 
-const LOG_OUT = gql`
-  mutation logUserOut {
-    logUserOut @client
-  }
+const HeaderBox = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
-const HeaderContainer = styled.div`
+const HeaderTitleBox = styled.div`
+  display: flex;
+`;
+
+const HeaderTitle = styled.span`
+  font-size: 15px;
+`;
+
+const HeaderMenuBox = styled.div`
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  svg {
-    font-size: 30px;
-  }
-  box-shadow: 1px 1px 20px #8395a7;
-  background-color: #667aff;
 `;
 
-const TitleBox = styled.div`
+const HeaderMenuList = styled.ul`
   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;
+const HeaderMenuItem = styled.li`
+  content: ${(props) => props.text};
 `;
 
-const StyledLink = styled(Link)`
-  text-decoration: none;
-  color: white;
-  cursor: pointer;
+const StartBox = styled.div`
+  background-color: #1b1464;
+  color: #f1f2f6;
+  font-size: 20px;
 `;
 
-export default ({ text }) => {
-  const [logOut] = useMutation(LOG_OUT);
+export default () => {
   return (
-    <HeaderContainer className="Header">
-      <TitleBox>
-        <FontAwesomeIcon icon={faComments} />
-        <HeaderSpan>{text}</HeaderSpan>
-      </TitleBox>
-      <TitleBox>
-        <Router>
-          <StyledLink to="/" onClick={logOut}>
-            <FontAwesomeIcon icon={faSignOutAlt} />
-          </StyledLink>
-        </Router>
-      </TitleBox>
-    </HeaderContainer>
+    <HeaderBox>
+      <HeaderTitleBox>
+        <FontAwesomeIcon>
+          <faComments />
+        </FontAwesomeIcon>
+        <HeaderTitle>KhuChat</HeaderTitle>
+      </HeaderTitleBox>
+      <HeaderMenuBox>
+        <HeaderMenuList>
+          <HeaderMenuItem text={"About This"} />
+        </HeaderMenuList>
+      </HeaderMenuBox>
+      <StartBox>Start</StartBox>
+    </HeaderBox>
   );
 };