add link in social login

 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 { Helmet } from "react-helmet";
 import { Helmet } from "react-helmet";
+import Header from "../../Components/Header";
 import Input from "../../Components/Input";
 import Input from "../../Components/Input";
 import Button from "../../Components/Button";
 import Button from "../../Components/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -13,6 +15,7 @@ import {
 
 
 const Wrapper = styled.div`
 const Wrapper = styled.div`
   width: 100%;
   width: 100%;
+  height: 100vh;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   justify-content: center;
   justify-content: center;
@@ -36,7 +39,7 @@ const StateChanger = styled(Box)`
   margin-bottom: 15px;
   margin-bottom: 15px;
 `;
 `;
 
 
-const Link = styled.span`
+const ToggleSpan = styled.span`
   cursor: pointer;
   cursor: pointer;
   color: #0652dd;
   color: #0652dd;
 `;
 `;
@@ -63,7 +66,7 @@ const Form = styled(Box)`
 
 
 const SocialLogin = styled(Box)`
 const SocialLogin = styled(Box)`
   display: flex;
   display: flex;
-  svg {
+  a {
     &:not(:last-child) {
     &:not(:last-child) {
       margin-right: 20px;
       margin-right: 20px;
     }
     }
@@ -82,9 +85,11 @@ export default ({
   phoneNum,
   phoneNum,
   onSubmit,
   onSubmit,
 }) => (
 }) => (
+  <>
+    <Header />
     <Wrapper>
     <Wrapper>
       <TitleContainer>
       <TitleContainer>
-      <Title>KhuChat</Title>
+        <Title>Linker</Title>
       </TitleContainer>
       </TitleContainer>
       <Form>
       <Form>
         {action === "logIn" ? (
         {action === "logIn" ? (
@@ -122,20 +127,32 @@ export default ({
         {action === "logIn" ? (
         {action === "logIn" ? (
           <>
           <>
             Don't you have an account ?
             Don't you have an account ?
-          <Link onClick={() => setAction("signUp")}> Sign Up </Link>
+            <ToggleSpan onClick={() => setAction("signUp")}>
+              {" "}
+              Sign Up{" "}
+            </ToggleSpan>
           </>
           </>
         ) : (
         ) : (
           <>
           <>
             Did you have an account ?
             Did you have an account ?
-          <Link onClick={() => setAction("logIn")}> Log in </Link>
+            <ToggleSpan onClick={() => setAction("logIn")}> Log in </ToggleSpan>
           </>
           </>
         )}
         )}
       </StateChanger>
       </StateChanger>
       <SocialLogin>
       <SocialLogin>
+        <Link to="/facebook">
           <FontAwesomeIcon icon={faFacebook} />
           <FontAwesomeIcon icon={faFacebook} />
+        </Link>
+        <Link to="/google">
           <FontAwesomeIcon icon={faGoogle} />
           <FontAwesomeIcon icon={faGoogle} />
+        </Link>
+        <Link to="/twitter">
           <FontAwesomeIcon icon={faTwitter} />
           <FontAwesomeIcon icon={faTwitter} />
+        </Link>
+        <Link to="/github">
           <FontAwesomeIcon icon={faGithub} />
           <FontAwesomeIcon icon={faGithub} />
+        </Link>
       </SocialLogin>
       </SocialLogin>
     </Wrapper>
     </Wrapper>
+  </>
 );
 );