add link and update style

 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 { faComments } from "@fortawesome/free-solid-svg-icons";
 import { faComments } from "@fortawesome/free-solid-svg-icons";
 
 
@@ -12,15 +13,16 @@ const Nav = styled.nav`
   width: 100%;
   width: 100%;
   position: fixed;
   position: fixed;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+  background-color: rgba(255, 255, 255);
+  z-index: 100;
 `;
 `;
 
 
 const HeaderBox = styled.div`
 const HeaderBox = styled.div`
   height: 100%;
   height: 100%;
-  width: 100%;
   display: flex;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
   align-items: center;
-  margin: 0 auto;
+  margin: 0px 200px;
 `;
 `;
 
 
 const HeaderTitleBox = styled.div`
 const HeaderTitleBox = styled.div`
@@ -29,32 +31,49 @@ const HeaderTitleBox = styled.div`
   align-items: center;
   align-items: center;
   svg {
   svg {
     font-size: 1.5rem;
     font-size: 1.5rem;
+    margin-right: 10px;
   }
   }
 `;
 `;
 
 
 const HeaderTitle = styled.span`
 const HeaderTitle = styled.span`
   font-size: 1.5rem;
   font-size: 1.5rem;
+  font-weight: 600;
 `;
 `;
 
 
 const HeaderMenuNav = styled.nav`
 const HeaderMenuNav = styled.nav`
   display: flex;
   display: flex;
   justify-content: flex-start;
   justify-content: flex-start;
+  width: 100%;
+  height: 80%;
 `;
 `;
 
 
 const HeaderMenuList = styled.ul`
 const HeaderMenuList = styled.ul`
   display: flex;
   display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
 `;
 `;
 
 
 const HeaderMenuItem = styled.li`
 const HeaderMenuItem = styled.li`
-  &::before {
-    content: ${(props) => props.text};
-  }
+  font-size: 1.2rem;
+  width: auto;
+  padding: 1rem;
 `;
 `;
 
 
 const StartBox = styled.div`
 const StartBox = styled.div`
-  background-color: #1b1464;
+  display: flex;
+  align-items: center;
+`;
+
+const StartButton = styled.button`
+  background-color: #3dc1d3;
   color: #f1f2f6;
   color: #f1f2f6;
-  font-size: 20px;
+  font-size: 18px;
+  font-weight: 500;
+  width: 150px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
 `;
 `;
 
 
 export default () => {
 export default () => {
@@ -68,9 +87,22 @@ export default () => {
           </HeaderTitleBox>
           </HeaderTitleBox>
           <HeaderMenuNav>
           <HeaderMenuNav>
             <HeaderMenuList>
             <HeaderMenuList>
-              <HeaderMenuItem>About This</HeaderMenuItem>
+              <HeaderMenuItem>
+                <Link to="/">About This</Link>
+              </HeaderMenuItem>
+              <HeaderMenuItem>
+                <Link to="/">Difference</Link>
+              </HeaderMenuItem>
+              <HeaderMenuItem>
+                <Link to="/">Documentation</Link>
+              </HeaderMenuItem>
+              <HeaderMenuItem>
+                <Link to="/">Support US</Link>
+              </HeaderMenuItem>
             </HeaderMenuList>
             </HeaderMenuList>
-            <StartBox>Start</StartBox>
+            <StartBox>
+              <StartButton>Start</StartButton>
+            </StartBox>
           </HeaderMenuNav>
           </HeaderMenuNav>
         </HeaderBox>
         </HeaderBox>
       </Nav>
       </Nav>