diff --git a/client/src/pages/EmnetHeader/Header.css b/client/src/pages/EmnetHeader/Header.css
new file mode 100644
index 0000000..4463e7b
--- /dev/null
+++ b/client/src/pages/EmnetHeader/Header.css
@@ -0,0 +1,41 @@
+.link {
+  text-decoration: none;
+  color: black;
+}
+.nav {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30px;
+}
+
+.nav__image {
+  padding-left: 110px;
+}
+
+.nav__bar {
+  padding-right: 190px;
+  font-size: 19px;
+}
+.nav__bar button {
+  height: 45px;
+  width: 250px;
+  margin: 15px 0;
+  background-color: #516cf0;
+  border: 1px solid #3a59ef;
+  border-radius: 4px;
+  color: aliceblue;
+  font-size: 17px;
+}
+.nav__bar button:hover {
+  background: #db7405;
+  border: #fe8402;
+  cursor: pointer;
+  color: aliceblue;
+}
+
+.nav__bar .nav__works {
+  padding: 35px;
+}
+.nav__bar :hover {
+  color: #da7000;
+}
diff --git a/client/src/pages/EmnetHeader/Header.js b/client/src/pages/EmnetHeader/Header.js
new file mode 100644
index 0000000..16cf49d
--- /dev/null
+++ b/client/src/pages/EmnetHeader/Header.js
@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { UserContext } from "../../CONTEXT/UserContext";
+import "./Header.css";
+
+const Header = ({loginRes}) => {
+  const [userData, setUserData] = useContext(UserContext);
+
+  // const handleAuthentication = () => {
+  //   if (userData) {
+  //     
+  //   }
+  // };
+
+  return (
+    <div className="nav">
+      <Link to="/">
+      <img
+        className="nav__image"
+        src="https://www.evangadi.com/themes/humans//assets/images/misc/evangadi-logo-home.png"
+        alt=""
+      />
+      </Link>
+
+        <Link to={!userData && "/login"} className="link">
+      <div className="nav__bar">
+        <span>Home</span>
+        <span className="nav__works">How it Works</span>
+          {/* <div onClick={handleAuthentication} className=""> */}
+            <button>{!userData ? "SIGN IN" : "LogOut"}</button>
+          {/* </div> */}
+      </div>
+        </Link>
+        
+
+
+    </div>
+  );
+};
+
+export default Header;
diff --git a/client/src/pages/EmnetSignIn/Login.css b/client/src/pages/EmnetSignIn/Login.css
new file mode 100644
index 0000000..12c87fe
--- /dev/null
+++ b/client/src/pages/EmnetSignIn/Login.css
@@ -0,0 +1,115 @@
+.account__link {
+  color: #e47703;
+}
+.login {
+  display: flex;
+}
+.login__container {
+  margin-left: 290px;
+  text-align: center;
+}
+
+.login__title {
+  width: 530px;
+  height: 520px;
+  margin-top: 30px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgb(158 158 158 / 90%);
+  border-radius: 10px;
+  position: relative;
+  top: 0;
+}
+
+.login__title h2 {
+  padding-top: 120px;
+}
+.login__form input {
+  height: 40px;
+  margin-bottom: 9px;
+  width: 450px;
+  border: 1.9px solid #ddd;
+  border-radius: 4px;
+}
+
+.login__container button {
+  height: 45px;
+  width: 250px;
+  margin: 15px 0;
+  background-color: #516cf0;
+  border: 1px solid #3a59ef;
+  border-radius: 4px;
+  color: aliceblue;
+  font-size: 17px;
+}
+.login__container button:hover {
+  background: #fe8402;
+  border: #fe8402;
+  cursor: pointer;
+}
+
+.login__about {
+  padding-top: 120px;
+  width: 600px;
+  padding-left: 40px;
+}
+#about {
+  color: #f88409;
+}
+.login__about button {
+  background: #f17f04;
+  border: 1px solid #fe8402;
+  border-radius: 4px;
+  padding: 12px;
+  color: #fff;
+  width: 190px;
+  margin-top: 20px;
+}
+
+.footer {
+  height: 200px;
+  background-color: #1e2f3f;
+  padding-left: 100px;
+  margin-top: 210px;
+  display: flex;
+}
+
+.footer__image {
+  padding-top: 30px;
+}
+.footer_socialLink a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.footer__instagram {
+  padding: 15px;
+}
+
+.footer__linkList {
+  display: flex;
+  padding-left: 300px;
+  padding-top: 13px;
+  color: #fff;
+
+  /* padding-bottom: 60px; */
+}
+.footer__linkList ul li {
+  list-style: none;
+  opacity: 0.3;
+}
+.footer__linkUseful ul li:hover {
+  text-decoration: underline;
+  opacity: 1;
+}
+.footer__linkUseful {
+  padding-right: 100px;
+}
+.footer__linkList h3 {
+  padding-left: 37px;
+  font-weight: 500;
+  font-size: 20px;
+}
+.footer__linkContact {
+  padding-left: 300px;
+  padding-right: 180px;
+}
diff --git a/client/src/pages/EmnetSignIn/Login.js b/client/src/pages/EmnetSignIn/Login.js
new file mode 100644
index 0000000..e463653
--- /dev/null
+++ b/client/src/pages/EmnetSignIn/Login.js
@@ -0,0 +1,146 @@
+import axios from "axios";
+import React, { useContext, useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { UserContext } from "../../CONTEXT/UserContext";
+import "./Login.css";
+
+const Login = () => {
+  const [userData, setUserData] = useContext(UserContext);
+  const navigate = useNavigate();
+  const [form, setForm] = useState({});
+
+  useEffect(() => {
+    if (userData.user) navigate("/");
+  }, [userData.user, navigate]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      //sending user data to database to be logged in
+      const loginRes = await axios.post(
+        "http://localhost:3500/api/users/login",
+        {
+          email: form.email,
+          password: form.password,
+        }
+      );
+
+      //updating global state with response from backend(user-info)
+      setUserData({
+        token: loginRes.data.token,
+        user: loginRes.data.user,
+      });
+
+      //setting localstorage with the token
+      localStorage.setItem("auth-token", loginRes.data.token);
+      navigate("/"); //navigating user to homepage
+    } catch (err) {
+      console.log("problem", err.response.data.msg);
+      alert(err.response.data.msg);
+    }
+  };
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+  return (
+    <div>
+    <div className="login">
+      <div className="login__container">
+        <div className="login__title">
+          <h2>Login to your account</h2>
+          <p>
+            Don't have an account?{" "}
+            <Link className="account__link" to="/signup">
+              Create a new account
+            </Link>
+          </p>
+
+          <form className="login__form" onSubmit={handleSubmit}>
+            {/* <label>Email</label> */}
+            <input
+              type="email"
+              name="email"
+              placeholder="Your Email"
+              onChange={handleChange}
+            />{" "}
+            <br />
+            {/* <label>Password</label> */}
+            <input
+              type="password"
+              name="password"
+              placeholder="Your Password"
+              onChange={handleChange}
+            />
+            <br />
+            <button>Submit</button>
+          </form>
+          <Link className="account__link" to="/signup">
+            Create an Account?
+          </Link>
+        </div>
+      </div>
+
+        <div className="login__about">
+          <p id="about">About</p>
+          <h1>Evangadi Networks Q&A</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium,
+            molestias! Expedita ex nostrum officia harum quos numquam pariatur
+            quas sequi nulla itaque molestias ullam fugit aut voluptatem at,
+            laudantium reprehenderit.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
+            porro quidem maxime in nostrum asperiores quos totam quia, molestias
+            facere, consectetur dolores quod soluta aspernatur obcaecati, ipsam
+            mollitia? Assumenda, fugiat?
+          </p>{" "}
+          <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
+            obcaecati corporis a reiciendis vitae repellat. Repellendus
+            voluptatum et sapiente possimus, reiciendis, necessitatibus voluptas
+            laudantium accusamus totam eligendi consectetur dolorem quae.
+          </p>
+          <button>HOW IT WORKS</button>
+        </div>
+            </div>
+
+        <div className="footer">
+            <div>
+            <img className="footer__image" src="https://www.evangadi.com/themes/humans//assets/images/misc/evangadi-logo-footer.png"
+        alt=""
+      />
+      <div className="footer_socialLink">
+      <span><a href="">facebook</a></span> 
+      <span className="footer__instagram"><a href="">insta</a></span> 
+      <span><a href="">youtube</a></span>
+      </div>
+      </div>
+
+<div className="footer__linkList">
+    <div className="footer__linkUseful">
+      <h3>Useful Link</h3>
+      <ul>
+        <li>How it works</li>
+        <li>Terms of Service</li>
+        <li>Privacy policy</li>
+      </ul>
+      </div>
+<div className="footer__linkContact">
+      <h3>Contact Info</h3>
+      <ul>
+        <li>Evangadi Networks</li>
+        <li>support@evangadi.com</li>
+        <li>+1-202-386-2702</li>
+      </ul>
+      </div>
+
+      </div>
+
+        </div>
+        </div>
+  );
+};
+
+export default Login;
diff --git a/client/src/pages/EmnetSignUp/SignUp.css b/client/src/pages/EmnetSignUp/SignUp.css
new file mode 100644
index 0000000..313fa8c
--- /dev/null
+++ b/client/src/pages/EmnetSignUp/SignUp.css
@@ -0,0 +1,76 @@
+.signup {
+  display: flex;
+}
+.signup__container {
+  margin-left: 290px;
+  text-align: center;
+  padding-top: 10px;
+}
+.signup__title {
+  width: 530px;
+  height: 600px;
+  margin-top: 30px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgb(158 158 158 / 90%);
+  border-radius: 10px;
+  position: relative;
+  top: 0;
+}
+
+.signup__title h2 {
+  padding-top: 60px;
+}
+
+p a {
+  color: #db7202;
+}
+.signup__form input {
+  height: 40px;
+  margin-bottom: 9px;
+  width: 450px;
+  border: 1.9px solid #ddd;
+  border-radius: 6px;
+}
+
+.signup__FLname{
+  display: flex;
+  padding: 0 35px;
+}
+#lastname {
+  margin-left: 7px;
+}
+.signup__container button {
+  height: 45px;
+  width: 455px;
+  margin: 20px 0;
+  background-color: #516cf0;
+  border: 1px solid #3a59ef;
+  border-radius: 4px;
+  color: aliceblue;
+  font-size: 18px;
+}
+
+.signup__container button:hover {
+  background: #f17f04;
+  border: #fe8402;
+  cursor: pointer;
+}
+
+.signup__about {
+  padding-top: 150px;
+  width: 600px;
+  padding-left: 40px;
+}
+#about {
+  color: #f88409;
+}
+.signup__about button {
+  background: #f17f04;
+  border: 1px solid #fe8402;
+  border-radius: 4px;
+  padding: 12px;
+  color: #fff;
+  width: 190px;
+  margin-top: 20px;
+
+}
diff --git a/client/src/pages/EmnetSignUp/SignUp.js b/client/src/pages/EmnetSignUp/SignUp.js
new file mode 100644
index 0000000..33f9d1b
--- /dev/null
+++ b/client/src/pages/EmnetSignUp/SignUp.js
@@ -0,0 +1,120 @@
+import axios from 'axios';
+import React, { useContext, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom';
+import { UserContext } from '../../CONTEXT/UserContext';
+import "./SignUp.css"
+const SignUp = () => {
+  const [userData, setUserData] = useContext(UserContext);
+ const  navigate = useNavigate()
+const [form, setForm] = useState({})
+
+  const handleChange = (e) =>{
+    setForm({...form, [e.target.name]:e.target.value})
+}
+
+const handleSubmit = async(e) =>{
+  e.preventDefault();
+  try{ //sending data to be registered in database
+     await axios.post("http://localhost:3500/api/users", form)
+
+     // once registered the login automatically send the new user infoto be logged in 
+     const loginRes = await axios.post("http://localhost:3500/api/users/login",
+      {
+          email: form.email,
+          password: form.password
+      })
+
+      //updating global state with response from backend(user-info)
+      setUserData({
+          token: loginRes.data.token,
+          user:loginRes.data.user
+      })
+
+      //setting localstorage with the token
+      localStorage.setItem("auth-token", loginRes.data.token)
+      navigate("/") //navigating user to homepage
+
+  }catch (err){
+console.log("problem==>", err.response.data.msg);
+alert(err.response.data.msg)
+  }
+}
+  return (
+    <div>
+    <div className='signup'>
+    <div className='signup__container'>
+      <div className='signup__title'>
+        <h2>Join the network</h2>
+        <p>Already have an account? <Link className='account__link'  to="/login">Sign in</Link></p>
+        
+        <form  className='signup__form' aonSubmit={handleSubmit}>
+            <input type="email" name ="email" placeholder='Email' onChange={handleChange}/> <br />
+
+          <div className='signup__FLname'>
+            <input type="text" name ="firstName" placeholder='First Name' onChange={handleChange}/> <br /> 
+
+            <input id='lastname' type="text" name='lastName'  placeholder='Last Name'onChange={handleChange}/><br />
+            </div>
+
+            <input type="text" name='userName'  placeholder='User Name'onChange={handleChange}/><br />
+
+            <input type="password" name='password' placeholder='Password' onChange={handleChange}/><br />
+            <button>Agree and Join</button>
+        </form>
+        <p>I agree to the <a href="">privacy policy</a> and <a href="">terms of service</a></p>
+        <Link className='account__link' to = "/login">Already have an ccount?</Link>
+        </div>
+
+    </div>
+ 
+        <div className="signup__about">
+          <p id='about'>About</p>
+      <h1>Evangadi Networks Q&A</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, molestias! Expedita ex nostrum officia harum quos numquam pariatur quas sequi nulla itaque molestias ullam fugit aut voluptatem at, laudantium reprehenderit.</p> 
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates porro quidem maxime in nostrum asperiores quos totam quia, molestias facere, consectetur dolores quod soluta aspernatur obcaecati, ipsam mollitia? Assumenda, fugiat?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis obcaecati corporis a reiciendis vitae repellat. Repellendus voluptatum et sapiente possimus, reiciendis, necessitatibus voluptas laudantium accusamus totam eligendi consectetur dolorem quae.
+      </p>
+
+      <button>HOW IT WORKS</button>
+      </div>
+      </div>
+
+      <div className="footer">
+            <div>
+            <img className="footer__image" src="https://www.evangadi.com/themes/humans//assets/images/misc/evangadi-logo-footer.png"
+        alt=""
+      />
+      <div className="footer_socialLink">
+      <span><a href="">facebook</a></span> 
+      <span className="footer__instagram"><a href="">insta</a></span> 
+      <span><a href="">youtube</a></span>
+      </div>
+      </div>
+
+<div className="footer__linkList">
+    <div className="footer__linkUseful">
+      <h3>Useful Link</h3>
+      <ul>
+        <li>How it works</li>
+        <li>Terms of Service</li>
+        <li>Privacy policy</li>
+      </ul>
+      </div>
+<div className="footer__linkContact">
+      <h3>Contact Info</h3>
+      <ul>
+        <li>Evangadi Networks</li>
+        <li>support@evangadi.com</li>
+        <li>+1-202-386-2702</li>
+      </ul>
+      </div>
+
+      </div>
+
+        </div>
+    
+    </div>
+  )
+}
+
+export default SignUp
\ No newline at end of file