update styling

 import React from "react";
 import React from "react";
 import styled from "styled-components";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { BrowserRouter as Router, Link } from "react-router-dom";
 
 
 const Wrapper = styled.div`
 const Wrapper = styled.div`
   display: flex;
   display: flex;
@@ -63,18 +63,52 @@ const CreateContainer = styled.div`
   box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.04);
   box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.04);
 `;
 `;
 
 
+const StyledLink = styled(Link)`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  text-decoration: none;
+  cursor: pointer;
+  color: #079992;
+  svg {
+    color: #079992;
+    &:hover {
+      border-bottom: 1px solid #079992;
+    }
+  }
+  li {
+    color: black;
+    &:hover {
+      color: #079992;
+    }
+  }
+  span {
+    &:hover {
+      border-bottom: 1px solid #079992;
+    }
+  }
+`;
+
 export default () => {
 export default () => {
   return (
   return (
+    <Router>
       <Wrapper>
       <Wrapper>
         <ChannelContainer>
         <ChannelContainer>
           <ChannelList>
           <ChannelList>
+            <StyledLink to="/">
               <ChannelItem>First Channel</ChannelItem>
               <ChannelItem>First Channel</ChannelItem>
               <FontAwesomeIcon icon={faArrowRight} />
               <FontAwesomeIcon icon={faArrowRight} />
+            </StyledLink>
           </ChannelList>
           </ChannelList>
         </ChannelContainer>
         </ChannelContainer>
         <CreateContainer>
         <CreateContainer>
-        <Link to="/">Create New Channel</Link>
+          <StyledLink to="/">
+            <span>Create New Channel</span>
+          </StyledLink>
         </CreateContainer>
         </CreateContainer>
       </Wrapper>
       </Wrapper>
+    </Router>
   );
   );
 };
 };

@@ -2,6 +2,15 @@ import React from "react";
 import styled from "styled-components";
 import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faComments, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
 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";
+
+const LOG_OUT = gql`
+  mutation logUserOut {
+    logUserOut @client
+  }
+`;
 
 
 const HeaderContainer = styled.div`
 const HeaderContainer = styled.div`
   display: flex;
   display: flex;
@@ -33,7 +42,14 @@ const HeaderSpan = styled.span`
   font-size: 30px;
   font-size: 30px;
 `;
 `;
 
 
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: white;
+  cursor: pointer;
+`;
+
 export default ({ text }) => {
 export default ({ text }) => {
+  const [logOut] = useMutation(LOG_OUT);
   return (
   return (
     <HeaderContainer>
     <HeaderContainer>
       <TitleBox>
       <TitleBox>
@@ -41,7 +57,11 @@ export default ({ text }) => {
         <HeaderSpan>{text}</HeaderSpan>
         <HeaderSpan>{text}</HeaderSpan>
       </TitleBox>
       </TitleBox>
       <TitleBox>
       <TitleBox>
+        <Router>
+          <StyledLink to="/" onClick={logOut}>
             <FontAwesomeIcon icon={faSignOutAlt} />
             <FontAwesomeIcon icon={faSignOutAlt} />
+          </StyledLink>
+        </Router>
       </TitleBox>
       </TitleBox>
     </HeaderContainer>
     </HeaderContainer>
   );
   );