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,60 +85,74 @@ export default ({
   phoneNum,
   phoneNum,
   onSubmit,
   onSubmit,
 }) => (
 }) => (
-  <Wrapper>
-    <TitleContainer>
-      <Title>KhuChat</Title>
-    </TitleContainer>
-    <Form>
-      {action === "logIn" ? (
-        <>
-          <Helmet>
-            <title>Log In</title>
-          </Helmet>
-          <form onSubmit={onSubmit}>
-            <Input placeholder={"Email"} type="email" {...email} />
-            <Input placeholder={"Password"} type="password" {...password} />
-            <Button text={"Log In"} />
-          </form>
-        </>
-      ) : (
-        <>
-          <Helmet>
-            <title>Sign Up</title>
-          </Helmet>
-          <form onSubmit={onSubmit}>
-            <Input placeholder={"Email"} type="email" {...email} />
-            <Input placeholder={"UserName"} {...username} />
-            <Input placeholder={"PhoneNumber"} {...phoneNum} />
-            <Input placeholder={"Password"} type="password" {...password} />
-            <Input
-              placeholder={"Password for validation"}
-              type="password"
-              {...password2}
-            />
-            <Button text={"Sign Up"} />
-          </form>
-        </>
-      )}
-    </Form>
-    <StateChanger>
-      {action === "logIn" ? (
-        <>
-          Don't you have an account ?
-          <Link onClick={() => setAction("signUp")}> Sign Up </Link>
-        </>
-      ) : (
-        <>
-          Did you have an account ?
-          <Link onClick={() => setAction("logIn")}> Log in </Link>
-        </>
-      )}
-    </StateChanger>
-    <SocialLogin>
-      <FontAwesomeIcon icon={faFacebook} />
-      <FontAwesomeIcon icon={faGoogle} />
-      <FontAwesomeIcon icon={faTwitter} />
-      <FontAwesomeIcon icon={faGithub} />
-    </SocialLogin>
-  </Wrapper>
+  <>
+    <Header />
+    <Wrapper>
+      <TitleContainer>
+        <Title>Linker</Title>
+      </TitleContainer>
+      <Form>
+        {action === "logIn" ? (
+          <>
+            <Helmet>
+              <title>Log In</title>
+            </Helmet>
+            <form onSubmit={onSubmit}>
+              <Input placeholder={"Email"} type="email" {...email} />
+              <Input placeholder={"Password"} type="password" {...password} />
+              <Button text={"Log In"} />
+            </form>
+          </>
+        ) : (
+          <>
+            <Helmet>
+              <title>Sign Up</title>
+            </Helmet>
+            <form onSubmit={onSubmit}>
+              <Input placeholder={"Email"} type="email" {...email} />
+              <Input placeholder={"UserName"} {...username} />
+              <Input placeholder={"PhoneNumber"} {...phoneNum} />
+              <Input placeholder={"Password"} type="password" {...password} />
+              <Input
+                placeholder={"Password for validation"}
+                type="password"
+                {...password2}
+              />
+              <Button text={"Sign Up"} />
+            </form>
+          </>
+        )}
+      </Form>
+      <StateChanger>
+        {action === "logIn" ? (
+          <>
+            Don't you have an account ?
+            <ToggleSpan onClick={() => setAction("signUp")}>
+              {" "}
+              Sign Up{" "}
+            </ToggleSpan>
+          </>
+        ) : (
+          <>
+            Did you have an account ?
+            <ToggleSpan onClick={() => setAction("logIn")}> Log in </ToggleSpan>
+          </>
+        )}
+      </StateChanger>
+      <SocialLogin>
+        <Link to="/facebook">
+          <FontAwesomeIcon icon={faFacebook} />
+        </Link>
+        <Link to="/google">
+          <FontAwesomeIcon icon={faGoogle} />
+        </Link>
+        <Link to="/twitter">
+          <FontAwesomeIcon icon={faTwitter} />
+        </Link>
+        <Link to="/github">
+          <FontAwesomeIcon icon={faGithub} />
+        </Link>
+      </SocialLogin>
+    </Wrapper>
+  </>
 );
 );