diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1 @@
+node_modules
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..2996636
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,8 @@
+FROM node:14.16-slim
+WORKDIR /ask-feed-frontend-client
+COPY package.json /ask-feed-frontend-client/package.json
+RUN npm install
+COPY . /ask-feed-frontend-client
+RUN npm run build
+CMD ["npm", "start"]
+EXPOSE 3000
diff --git a/package.json b/package.json
index 66bd524..9e2ec43 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
+    "http-proxy-middleware": "^2.0.0",
     "install": "^0.13.0",
+    "lodash": "^4.17.21",
     "materialize-css": "^1.0.0-rc.2",
     "npm": "^7.16.0",
     "react": "^17.0.2",
@@ -18,6 +20,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",
+    "redux-form": "^8.3.7",
     "redux-thunk": "^2.3.0",
     "web-vitals": "^1.1.2"
   },
diff --git a/public/index.html b/public/index.html
index aa069f2..5c42788 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,10 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+     <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/actions/index.js b/src/actions/index.js
index 7fb7bb4..dfae3a2 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,7 +1,14 @@
-// import axios from "axios";
-// import { FETCH_USER } from "./types";
+import axios from "axios";
+import { FETCH_USER, FETCH_SURVEYS } from "./types";
+export const submitSurvey = (values, history) => async (dispatch) => {
+  const res = await axios.post(
+    "http://localhost:2000/survey/createsurvey",
+    values
+  );
+  dispatch({ type: FETCH_USER, payload: res.data });
+};
 
-// export const fetchUser = () => async (dispatch) => {
-//   const res = axios.get("/api/current_user");
-//   dispatch({ type: FETCH_USER, payload: res.data });
-// };
+export const fetchSurveys = () => async (dispatch) => {
+  const res = await axios.get("http://localhost:2000/survey/getSurvey");
+  dispatch({ type: FETCH_SURVEYS, payload: res.data });
+};
diff --git a/src/actions/types.js b/src/actions/types.js
index ae4fb65..b97dd3d 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -1 +1,2 @@
 export const FETCH_USER = "fetch_user";
+export const FETCH_SURVEYS = "fetch_surveys";
diff --git a/src/components/About.js b/src/components/About.js
index ebdb35a..a525bd8 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -4,13 +4,7 @@ import "./About.css";
 const About = () => {
   return (
     <>
-      {/* <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta charset="utf-8">
-      <meta name="keywords" content=""><meta name="description" content=""><meta name="page_type" content="np-template-header-footer-from-plugin"> */}
-
-      {/* <meta name="generator" content="Nicepage 3.16.1, nicepage.com"></head> */}
-      {/* <body class="u-body u-hide-header" data-style="blank" data-posts="" data-global-section-properties="{&quot;colorings&quot;:{&quot;light&quot;:[&quot;clean&quot;],&quot;colored&quot;:[&quot;clean&quot;],&quot;dark&quot;:[&quot;dark&quot;]}}" data-source="blank" data-page-sections-style="[]" data-page-coloring-types="{&quot;light&quot;:[&quot;clean&quot;],&quot;colored&quot;:[&quot;clean&quot;],&quot;dark&quot;:[&quot;dark&quot;]}" data-page-category="&quot;Basic&quot;" data-back-link="html-templates" data-back-link-title="HTML Template" data-wp-back-link="wordpress-themes" data-wp-back-link-title="WordPress Themes" data-jm-back-link="joomla-templates" data-jm-back-link-title="Free Joomla Templates" data-created-with-title="Website Builder Software" data-wp-created-with-link="wordpress-website-builder" data-wp-created-with-title="WordPress Website Builder" data-jm-created-with-link="joomla-page-builder" data-jm-created-with-title="Joomla Page Builder"><section class="u-clearfix u-image u-block-bb46-1" custom-posts-hash="[]" data-style="blank" data-section-properties="{&quot;margin&quot;:&quot;none&quot;,&quot;stretch&quot;:true}" id="carousel_ca00" data-source="fix" data-id="bb46" data-image-width="662" data-image-height="750"> */}
-      <p className="about">
+         <p className="about">
         <div class="u-clearfix u-sheet u-block-bb46-2">
           <div class="u-clearfix u-expanded-width u-layout-wrap u-block-bb46-3">
             <div class="u-layout">
diff --git a/src/components/ActivationEmail.css b/src/components/ActivationEmail.css
new file mode 100644
index 0000000..cd76089
--- /dev/null
+++ b/src/components/ActivationEmail.css
@@ -0,0 +1,5 @@
+.login-anchor {
+  font-size: 30px;
+  text-decoration: none;
+  color: #3362a8;
+}
diff --git a/src/components/ActivationEmail.js b/src/components/ActivationEmail.js
index 0fd5bda..7cd4d82 100644
--- a/src/components/ActivationEmail.js
+++ b/src/components/ActivationEmail.js
@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { NavLink, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { showErrMsg, showSuccessMsg } from "./utils/notification/Notification";
 import axios from "axios";
+import "./ActivationEmail.css";
+import logo from "./LandingPage/images/favicon.png";
 function ActivationEmail() {
   const { token } = useParams();
-  // console.log(token);
+
   const [err, setErr] = useState("");
   const [success, setSuccess] = useState("");
   console.log(useParams());
@@ -13,40 +15,44 @@ function ActivationEmail() {
     if (token) {
       const activationEmail = async () => {
         try {
-          const res = await axios.post(`/api/activate/${token}`, {
-            token,
-          });
+          const res = await axios.post(
+            `http://localhost:2000/api/activate/${token}`,
+            {
+              token,
+            }
+          );
           setSuccess(res.data.msg);
         } catch (err) {
           err.response.data.msg && setErr(err.response.data.msg);
         }
-        // console.log(res);
       };
       activationEmail();
     }
   }, [token]);
 
-  // const res = await fetch("/api/signup", {
-  //   method: "POST",
-  //   headers: {
-  //     "Content-Type": "application/json",
-  //   },
-
-  //   const [err, setErr] = useState("");
-  //   const [success, setSuccess] = useState("");
-  //   useEffect(()=>{
-  //       if(tonpmken){
-  //           const
-  //       }
-  //   })
   return (
-    <div className="active_page">
-      {err && showErrMsg(err)}
-      {success && showSuccessMsg(success)}
-      {/* <NavLink>Kindly click on this link</NavLink> */}
-      <h1>Successs!!</h1>
-      {/* <Button onClick={}/> */}
-    </div>
+    <>
+      <div className="active_page">
+        {err && showErrMsg(err)}
+        {success && showSuccessMsg(success)}
+
+        <h1
+          className="message"
+          style={{ textAlign: "center", marginTop: "30px" }}
+        >
+          Successs!! Click on login to get redirected to the login page!
+        </h1>
+        <a
+          href="/login"
+          className="login-anchor"
+          style={{ textAlign: "center", left: "50px" }}
+        >
+          Login!
+        </a>
+      </div>
+      <img src={logo} alt="logo" className="logo-activation" />
+    </>
   );
 }
 export default ActivationEmail;
+
diff --git a/src/components/App.js b/src/components/App.js
index d0c2135..026c037 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -5,27 +5,23 @@ import { connect } from "react-redux";
 import * as actions from "../actions";
 import Login from "./Login";
 import Signup from "./Signup";
-import About from "./About";
+import ResetLink from "./ResetLink";
 import Dashboard from "./Dashboard";
-import SurveyNew from "./SurveyNew";
-import Header from "./Header";
-import "./App.css";
+import ResetPassword from "./ResetPassword";
+import SurveyNew from "./surveys/SurveyNew";
+import Logout from "./Logout";
+import EditInfo from "./EditInfo";
 import ActivationEmail from "./ActivationEmail";
+import StoringYes from "./surveys/StoringYes.js";
+import StoringNo from "./surveys/StoringNo.js";
 
-class App extends Component {
-  // componentDidMount() {
-  //   this.props.fetchUser();
-  // }
 
+class App extends Component {
   render() {
     return (
       <div className="container">
         <BrowserRouter>
           <div>
-            {/* <Route exact path="/header">
-            <Header />
-          </Route> */}
-            {/* <Header /> */}
             <Route exact path="/">
               <LandingPage />
             </Route>
@@ -35,9 +31,6 @@ class App extends Component {
             <Route exact path="/register">
               <Signup />
             </Route>
-            {/* <Route exact path="/about">
-            <About />
-          </Route> */}
             <Route exact path="/dashboard">
               <Dashboard />
             </Route>
@@ -46,10 +39,27 @@ class App extends Component {
               path="/api/activate/:token"
               component={ActivationEmail}
             />
-
-            {/* <Route exact path="/surveys/new">
-            <SurveyNew />
-          </Route>  */}
+            <Route exact path="/api/resetlink">
+              <ResetLink />
+            </Route>
+            <Route exact path="/api/changepassword/:token">
+              <ResetPassword />
+            </Route>
+            <Route
+              exact
+              path="/survey/response/yes/:id"
+              component={StoringYes}
+            />
+            <Route exact path="/survey/response/no/:id" component={StoringNo} />
+            <Route exact path="/surveys/new">
+              <SurveyNew />
+            </Route>
+            <Route exact path="/api/logout">
+              <Logout />
+            </Route>
+            <Route exact path="/api/editInfo">
+              <EditInfo />
+            </Route>
           </div>
         </BrowserRouter>
       </div>
@@ -58,3 +68,4 @@ class App extends Component {
 }
 
 export default connect(null, actions)(App);
+
diff --git a/src/components/Dashboard.css b/src/components/Dashboard.css
new file mode 100644
index 0000000..314000a
--- /dev/null
+++ b/src/components/Dashboard.css
@@ -0,0 +1,408 @@
+html {
+  font-size: 62.5%;
+}
+
+.create-survey {
+  position: absolute;
+  width: 23.7rem;
+  height: 7.6rem;
+  left: 114.9rem;
+  top: 5.3rem;
+  font-size: 2.2rem;
+  background: #3362a8;
+  border: 0.1rem solid #3362a8;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+  color: white;
+}
+
+.head-logo {
+  position: absolute;
+  width: 21.5rem;
+  height: 14.2rem;
+  left: 14rem;
+  top: 2rem;
+}
+
+.dashboard-btn {
+  position: absolute;
+  width: 23.7rem;
+  height: 7.6rem;
+  left: 142.6rem;
+  top: 5.3rem;
+
+  background: #ffffff;
+  border: 0.1rem solid #3362a8;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+  color: #3362a8;
+  font-size: 2.2rem;
+}
+.logout {
+  position: absolute;
+  width: 7.7rem;
+  height: 3rem;
+  left: 170.3rem;
+  top: 7.6rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2.2rem;
+  line-height: 3rem;
+  color: #3362a8;
+}
+
+.footer {
+  position: absolute;
+  width: 192rem;
+  height: 24.3rem;
+  left: 0rem;
+  top: 134.7rem;
+
+  /* background: #f1f7ff; */
+}
+
+.footer-logo {
+  position: absolute;
+  width: 21.5rem;
+  height: 14.2rem;
+  left: 14rem;
+  top: 139.8rem;
+}
+
+.about-us {
+  position: absolute;
+  width: 10.1rem;
+  height: 3rem;
+  left: 125.5rem;
+  top: 145.4rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2.2rem;
+  line-height: 3rem;
+  color: #3362a8;
+}
+
+.terms {
+  position: absolute;
+  width: 14.1rem;
+  height: 3rem;
+  left: 163.9rem;
+  top: 145.4rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2.2rem;
+  line-height: 3rem;
+  color: #3362a8;
+}
+.edit-info {
+  position: absolute;
+  width: 17.1rem;
+  height: 2.7rem;
+  left: 36.7rem;
+  top: 110.8rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 2.7rem;
+  text-decoration-line: none;
+
+  color: #3362a8;
+}
+
+.pricing {
+  position: absolute;
+  width: 7.6rem;
+  height: 3rem;
+  left: 153.3rem;
+  top: 145.4rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2.2rem;
+  line-height: 3rem;
+  color: #3362a8;
+}
+.contact-us {
+  position: absolute;
+  width: 11.7rem;
+  height: 3rem;
+  left: 138.6rem;
+  top: 145.4rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2.2rem;
+  line-height: 3rem;
+  color: #3362a8;
+}
+
+.create-survey-anchor {
+  position: absolute;
+  width: 18.5rem;
+  height: 3rem;
+  left: 80.6rem;
+  top: 121.8rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2.2rem;
+  line-height: 3rem;
+  /* identical to box height */
+
+  color: #3362a8;
+}
+
+.info-box {
+  position: absolute;
+  width: 60.1rem;
+  height: 61.2rem;
+  left: 14rem;
+  top: 58.5rem;
+
+  background: #e9f2f3;
+  opacity: 0.1;
+  border: 0.1rem solid #000000;
+  box-sizing: border-box;
+  border-radius: 1rem;
+}
+
+.name-head {
+  position: absolute;
+  width: 10.2rem;
+  height: 3rem;
+  left: 18rem;
+  top: 64.9rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 2.5rem;
+  line-height: 3rem;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+
+  color: #666666;
+
+  opacity: 0.5;
+}
+
+.name-info {
+  position: absolute;
+  width: 4.4rem;
+  height: 3rem;
+  left: 18rem;
+  top: 69.4rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2.5rem;
+  line-height: 3rem;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+  padding-left: 2.5rem;
+
+  color: #000000;
+}
+
+.email-head {
+  position: absolute;
+  width: 13.2rem;
+  height: 3rem;
+  left: 16.5rem;
+  top: 78.8rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 2.5rem;
+  line-height: 3rem;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+
+  color: #666666;
+
+  opacity: 0.5;
+}
+
+.email-info {
+  position: absolute;
+  width: 20.5rem;
+  height: 3rem;
+  left: 19.9rem;
+  top: 83.3rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2.5rem;
+  line-height: 3rem;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+
+  color: #000000;
+}
+
+.divider {
+  position: absolute;
+  width: 49.3rem;
+  height: 0rem;
+  left: 18.3rem;
+  top: 105.8rem;
+
+  opacity: 0.1;
+  border: 0.1rem solid #000000;
+}
+
+.phone-number-head {
+  position: absolute;
+  width: 11.9rem;
+  height: 3rem;
+  left: 17rem;
+  top: 93.5rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 2.5rem;
+  line-height: 3rem;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+
+  color: #666666;
+
+  opacity: 0.5;
+}
+
+.phone-number-info {
+  position: absolute;
+  width: 11rem;
+  height: 3rem;
+  left: 19.3rem;
+  top: 98rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 3rem;
+  /* identical to box height, or 150% */
+
+  text-align: center;
+
+  color: #000000;
+}
+
+.change-password-anchor {
+  position: absolute;
+  width: 8.1rem;
+  height: 2.7rem;
+  left: 21.1rem;
+  top: 110.9rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 2.7rem;
+  text-decoration-line: none;
+
+  color: #3362a8;
+}
+
+.current-survey-head {
+  position: absolute;
+  width: 24rem;
+  height: 3rem;
+  left: 78.9rem;
+  top: 58.5rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 3.3rem;
+  line-height: 3rem;
+  /* identical to box height, or 120% */
+
+  text-align: center;
+
+  color: #3362a8;
+}
+
+.survey-box {
+  position: absolute;
+  width: 101.6rem;
+  height: 52.3rem;
+  left: 78rem;
+  top: 66.8rem;
+
+  background: #ffffff;
+  border: 0.1rem solid rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  border-radius: 0.6rem;
+}
+
+.name-dashboard {
+  position: absolute;
+  width: 47.7rem;
+  height: 7.3rem;
+  left: 14rem;
+  top: 24.4rem;
+
+  font-family: Paytone One;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
+  /* identical to box height */
+
+  color: #000000;
+}
+.box-info {
+  position: absolute;
+  width: 32.4rem;
+  height: 6rem;
+  left: 112.6rem;
+  top: 89.1rem;
+
+  font-family: Open Sans;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 2.5rem;
+  line-height: 3rem;
+  /* or 120% */
+
+  text-align: center;
+
+  color: #746276;
+}
+
+@media (max-width: 768px) {
+  html {
+    font-size: 40%;
+  }
+}
+
+@media (max-width: 600px) {
+  html {
+    font-size: 45%;
+  }
+}
+
+
diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
index 5f91b8f..1e00351 100644
--- a/src/components/Dashboard.js
+++ b/src/components/Dashboard.js
@@ -1,5 +1,56 @@
+import React from "react";
+import logo from "./LandingPage/images/favicon.png";
+import "./Dashboard.css";
+import SurveyList from "./surveys/SurveyList";
+import { Link } from "react-router-dom";
+
 const DashBoard = () => {
-  return <p>Hiiiii DashBoard</p>;
+  return (
+    <>
+      <img src={logo} className="head-logo" alt="logo" />
+      <Link to="/surveys/new">
+        <button className="create-survey">Create a Survey</button>
+      </Link>
+      <button className="dashboard-btn">Dashboard</button>
+      <Link className="logout" to="/api/logout">
+        Logout
+      </Link>
+      <div className="info-box"></div>
+      <label className="name-head">Name</label>
+      <label className="name-info">Sanjam Singh</label>
+      <label className="email-head">Email</label>
+      <label className="email-info">csecec.1802194@gmail.com</label>
+      <div className="divider"></div>
+      <div className="name-dashboard"> Sanjam's Dashboard </div>
+      <div className="phone-number-head">Phone</div>
+      <div className="phone-number-info">9878901905</div>
+      <div className="footer"></div>
+      <a className="change-password-anchor" href="/api/resetlink">
+        Change Password
+      </a>
+      <Link to="/api/editInfo" className="edit-info">
+        Edit your Info!
+      </Link>
+      <img src={logo} className="footer-logo" alt="logo" />
+      <label className="current-survey-head">Current Surveys</label>
+      <div className="survey-box"></div>
+      <div className="box-info">
+        <SurveyList />
+      </div>
+      <a className="create-survey-anchor" href="/surveys/new">
+        Create a Survey
+      </a>
+      <a className="about-us" href="/about">
+        About Us
+      </a>
+      <a className="contact-us" href="/contact">
+        Contact Us
+      </a>
+      <a className="terms" href="/terms">
+        Terms of Use
+      </a>
+    </>
+  );
 };
 
 export default DashBoard;
diff --git a/src/components/EditInfo.js b/src/components/EditInfo.js
new file mode 100644
index 0000000..bcbc088
--- /dev/null
+++ b/src/components/EditInfo.js
@@ -0,0 +1,55 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const EditInfo = () => {
+
+  const editInfo = () => {
+    window.alert("Updated Successfully!");
+  };
+
+  return (
+    <>
+      <h3
+        style={{ marginBottom: "53px", fontWeight: "bold", color: "#3362a8" }}
+      >
+        Please edit your entries 👉🏼
+      </h3>
+      <div>
+        <label style={{ fontSize: "35px", color: "#3362a8" }}>Name:</label>
+        <input
+          style={{ marginBottom: "5px", fontSize: "30px" }}
+        />
+        <div
+          className="red-text"
+          style={{ marginBottom: "20px", fontSize: "30px" }}
+        ></div>
+        <label style={{ fontSize: "35px", color: "#3362a8" }}>
+          Phone Number:
+        </label>
+        <input
+          style={{ marginBottom: "5px", fontSize: "30px" }}
+          value="9878901905"
+        />
+        <div
+          className="red-text"
+          style={{ marginBottom: "20px", fontSize: "30px" }}
+        ></div>
+        <button
+          className="green btn-flat right white-text"
+          style={{ fontSize: "30px", height: "50px" }}
+          onClick={editInfo}
+        >
+          Submit
+        </button>
+        <Link
+          to="/dashboard"
+          className="blue btn-flat white-text"
+          style={{ fontSize: "30px", height: "50px" }}
+        >
+          Back
+        </Link>
+      </div>
+    </>
+  );
+};
+export default EditInfo;
diff --git a/src/components/LandingPage/LandingPage.css b/src/components/LandingPage/LandingPage.css
index a167b18..6837c23 100644
--- a/src/components/LandingPage/LandingPage.css
+++ b/src/components/LandingPage/LandingPage.css
@@ -1,49 +1,34 @@
-/* * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-} */
+html {
+  font-size: 62.5%;
+  zoom: 67%;
+}
 
 body {
   width: 100%;
   height: 100%;
-  /* min-height: 100vh; */
-  /* position: relative;
-    height: auto;
-    top: 0;
-    width: 100%; */
-  /* max-height: 120px;
-    height: 100px; */
-  /* overflow-x: hidden; */
-
-  /* position: relative;
-    width: 1920px;
-    height: 5041px;
-  
-    background: #ffffff; */
 }
 .header {
   position: absolute;
-  width: 1920px;
-  height: 1080px;
-  left: 0px;
-  top: 0px;
+  width: 192rem;
+  height: 108rem;
+  left: 0rem;
+  top: 0rem;
 
   background: #f1f7ff;
 }
 
 .header .header-title {
   position: absolute;
-  width: 810px;
-  height: 73px;
-  left: 140px;
-  top: 351px;
+  width: 81rem;
+  height: 7.3rem;
+  left: 14rem;
+  top: 35.1rem;
 
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   color: #000000;
@@ -51,53 +36,79 @@ body {
 
 .logo {
   position: absolute;
-  width: 215px;
-  height: 142px;
-  left: 140px;
-  top: 20px;
-
-  /* background: url(ask_feed-removebg-preview.png); */
+  width: 21.5rem;
+  height: 14.2rem;
+  left: 14rem;
+  top: 2rem;
 }
+
+/* background: url(ask_feed-removebg-preview.png); */
+/* }
 .login-btn {
   position: absolute;
-  width: 60px;
-  height: 30px;
-  left: 1420px;
-  top: 76px;
+  width: 60rem;
+  height: 30rem;
+  left: 1420rem;
+  top: 76rem;
   background-color: #f1f7ff;
   border-color: #f1f7ff;
   font-family: Open Sans;
   font-style: normal;
   font-weight: bold;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 22rem;
+  line-height: 30rem;
   /* identical to box height */
-  text-decoration: none;
+/* text-decoration: none;
   color: #3362a8;
 }
+*/
 .loginn {
+  width: 6rem;
+  height: 3rem;
+  left: 142rem;
+
+  top: 10.7rem;
   text-decoration: none;
+  font-family: Open Sans sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2.5rem;
+  line-height: 3rem;
+  padding-left: 142rem;
+  /* identical to box height */
   color: #3362a8;
-  font-size: 30px;
-  padding-right: 50px;
+}
+.login-btn {
+  width: 6rem;
+  /* 30rem */
+  height: 3rem;
+  left: 143rem;
+
+  top: 10.7rem;
+  text-decoration: none;
+  font-family: Open Sans sans-serif;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 2.5rem;
+  line-height: 3rem;
 }
 .registerr {
   text-decoration: none;
   color: #3362a8;
-  font-size: 25px;
+  font-size: 2.5rem;
 }
 
 .register-btn {
   position: absolute;
-  width: 237px;
-  height: 76px;
-  left: 1543px;
-  top: 53px;
+  width: 23.7rem;
+  height: 7.6rem;
+  left: 154.3rem;
+  top: 5.3rem;
 
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 
   /* identical to box height */
 
@@ -105,41 +116,41 @@ body {
 }
 .header .header-sub {
   position: absolute;
-  width: 830px;
-  height: 150px;
-  left: 140px;
-  top: 456px;
-  padding-top: 40px;
+  width: 83rem;
+  height: 15rem;
+  left: 14rem;
+  top: 45.6rem;
+  padding-top: 4rem;
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
+  font-size: 2.2rem;
 
-  line-height: 30px;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .hero-image {
   position: absolute;
-  width: 438px;
-  height: 643px;
-  left: 1231px;
-  top: 219px;
+  width: 43.8rem;
+  height: 64.3rem;
+  left: 123.1rem;
+  top: 21.9rem;
 }
 
 .next-heading {
   position: absolute;
-  width: 677px;
-  height: 146px;
-  left: 622px;
-  top: 1143px;
+  width: 67.7rem;
+  height: 14.6rem;
+  left: 62.2rem;
+  top: 114.3rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   text-align: center;
 
   color: #3362a8;
@@ -147,16 +158,16 @@ body {
 
 .after-next-heading {
   position: absolute;
-  width: 341px;
-  height: 73px;
-  left: 790px;
-  top: 1477px;
+  width: 34.1rem;
+  height: 7.3rem;
+  left: 79rem;
+  top: 147.7rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   color: #000000;
@@ -164,27 +175,27 @@ body {
 
 .ellipse-1 {
   position: absolute;
-  width: 64px;
-  height: 64px;
-  left: 214px;
-  top: 1667px;
+  width: 6.4rem;
+  height: 6.4rem;
+  left: 21.4rem;
+  top: 166.7rem;
   border-radius: 50%;
   background: #3362a8;
 }
 .ellipse-1 .num-1 {
   /* position: absolute; */
-  width: 24px;
-  height: 73px;
-  left: 234px;
-  top: 1658px;
+  width: 2.4rem;
+  height: 7.3rem;
+  left: 23.4rem;
+  top: 165.8rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
 
-  padding-left: 20px;
+  padding-left: 2rem;
   text-align: center;
 
   color: #ffffff;
@@ -192,60 +203,60 @@ body {
 
 .el-head-1 {
   position: absolute;
-  width: 239px;
-  height: 38px;
-  /* left: 224px;
-    top: 1742px; */
+  width: 23.9rem;
+  height: 3.8rem;
+  /* left: 224rem;
+    top: 1742rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .el-p-1 {
   position: absolute;
-  width: 342px;
-  height: 120px;
-  /* left: 224px;
-    top: 1788px; */
+  width: 34.2rem;
+  height: 12rem;
+  /* left: 224rem;
+    top: 1788rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .ellipse-2 {
   position: absolute;
-  width: 64px;
-  height: 64px;
-  left: 596px;
-  top: 1667px;
+  width: 6.4rem;
+  height: 6.4rem;
+  left: 59.6rem;
+  top: 166.7rem;
   border-radius: 50%;
   background: #3362a8;
 }
 
 .ellipse-2 .num-2 {
   /* position: absolute; */
-  width: 27px;
-  height: 73px;
-  left: 615px;
-  top: 1658px;
+  width: 2.7rem;
+  height: 7.3rem;
+  left: 61.5rem;
+  top: 165.8rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
-  padding-left: 20px;
+  padding-left: 2rem;
   text-align: center;
 
   color: #ffffff;
@@ -253,209 +264,209 @@ body {
 
 .el-head-2 {
   position: absolute;
-  width: 253px;
-  height: 38px;
-  /* left: 606px;
-    top: 1742px; */
+  width: 25.3rem;
+  height: 3.8rem;
+  /* left: 606rem;
+    top: 1742rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .el-p-2 {
   position: absolute;
-  width: 359px;
-  height: 90px;
-  /* left: 606px;
-    top: 1788px; */
+  width: 35.9rem;
+  height: 9rem;
+  /* left: 606rem;
+    top: 1788rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .ellipse-3 {
   position: absolute;
-  width: 64px;
-  height: 64px;
-  left: 995px;
-  top: 1667px;
+  width: 6.4rem;
+  height: 6.4rem;
+  left: 99.5rem;
+  top: 166.7rem;
   border-radius: 50%;
   background: #3362a8;
 }
 
 .ellipse-3 .num-3 {
   /* position: absolute; */
-  width: 28px;
-  height: 73px;
-  left: 1013px;
-  top: 1658px;
+  width: 2.8rem;
+  height: 7.3rem;
+  left: 101.3rem;
+  top: 165.8rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   text-align: center;
-  padding-left: 20px;
+  padding-left: 2rem;
   color: #ffffff;
 }
 
 .el-head-3 {
   position: absolute;
-  width: 204px;
-  height: 38px;
-  /* left: 1005px;
-    top: 1742px; */
+  width: 20.4rem;
+  height: 3.8rem;
+  /* left: 1005rem;
+    top: 1742rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 .el-p-3 {
   position: absolute;
-  width: 324px;
-  height: 120px;
-  /* left: 1005px;
-    top: 1788px; */
+  width: 32.4rem;
+  height: 12rem;
+  /* left: 1005rem;
+    top: 1788rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .ellipse-4 {
   position: absolute;
-  width: 64px;
-  height: 64px;
-  left: 1359px;
-  top: 1667px;
+  width: 6.4rem;
+  height: 6.4rem;
+  left: 135.9rem;
+  top: 166.7rem;
   border-radius: 50%;
   background: #3362a8;
 }
 
 .ellipse-4 .num-4 {
   /* position: absolute; */
-  width: 34px;
-  height: 73px;
-  left: 1374px;
-  top: 1658px;
+  width: 3.4rem;
+  height: 7.3rem;
+  left: 137.4rem;
+  top: 165.8rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   text-align: center;
-  padding-left: 15px;
+  padding-left: 1.5rem;
   color: #ffffff;
 }
 
 .el-head-4 {
   position: absolute;
-  width: 114px;
-  height: 38px;
-  /* left: 1369px;
-    top: 1742px; */
+  width: 11.4rem;
+  height: 3.8rem;
+  /* left: 1369rem;
+    top: 1742rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .el-p-4 {
   position: absolute;
-  width: 337px;
-  height: 120px;
-  /* left: 1369px;
-    top: 1788px; */
+  width: 33.7rem;
+  height: 12rem;
+  /* left: 1369rem;
+    top: 1788rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .third-level-image {
   position: absolute;
-  width: 604px;
-  height: 575px;
-  left: 191px;
-  top: 2081px;
+  width: 60.4rem;
+  height: 57.5rem;
+  left: 19.1rem;
+  top: 208.1rem;
 }
 
 .third-level-head {
   position: absolute;
-  width: 830px;
-  height: 146px;
-  left: 899px;
-  top: 2241px;
+  width: 83rem;
+  height: 14.6rem;
+  left: 89.9rem;
+  top: 224.1rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
 
   color: #000000;
 }
 
 .third-level-para {
   position: absolute;
-  width: 744px;
-  height: 90px;
-  left: 899px;
-  top: 2406px;
+  width: 74.4rem;
+  height: 9rem;
+  left: 89.9rem;
+  top: 240.6rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .fourth-level-head {
   position: absolute;
-  width: 556px;
-  height: 73px;
-  left: 682px;
-  top: 2829px;
+  width: 55.6rem;
+  height: 7.3rem;
+  left: 68.2rem;
+  top: 282.9rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   color: #000000;
@@ -463,341 +474,341 @@ body {
 
 .box-1 {
   position: absolute;
-  width: 441px;
-  height: 403px;
-  left: 278px;
-  top: 2993px;
+  width: 44.1rem;
+  height: 40.3rem;
+  left: 27.8rem;
+  top: 299.3rem;
 
   background: #ffffff;
-  /* border: 1px solid rgba(0, 0, 0, 0.1); */
+  /* border: 1rem solid rgba(0, 0, 0, 0.1); */
   box-sizing: border-box;
-  border: 1px solid #fe0061;
-  border-radius: 5px;
-  box-shadow: 0px 4px 25px rgba(254, 0, 97, 0.2);
+  border: 0.1rem solid #fe0061;
+  border-radius: 0.5rem;
+  box-shadow: 0rem 0.4rem 2.5rem rgba(254, 0, 97, 0.2);
 }
 
 .box-img-1 {
   position: absolute;
-  width: 118px;
-  height: 122px;
-  left: 310px;
-  top: 3064px;
+  width: 11.8rem;
+  height: 12.2rem;
+  left: 31rem;
+  top: 306.4rem;
 }
 .box-head-1 {
   position: absolute;
-  width: 253px;
-  height: 38px;
-  left: 310px;
-  top: 3219px;
+  width: 25.3rem;
+  height: 3.8rem;
+  left: 31rem;
+  top: 321.9rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .box-para-1 {
   position: absolute;
-  width: 378px;
-  height: 90px;
-  left: 310px;
-  top: 3265px;
+  width: 37.8rem;
+  height: 9rem;
+  left: 31rem;
+  top: 326.5rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 .box-2 {
   position: absolute;
-  width: 440px;
-  height: 403px;
-  left: 740px;
-  top: 2993px;
+  width: 44rem;
+  height: 40.3rem;
+  left: 74rem;
+  top: 299.3rem;
 
   background: #ffffff;
-  border: 1px solid #fe0061;
+  border: 0.1rem solid #fe0061;
   box-sizing: border-box;
-  border-radius: 5px;
-  box-shadow: 0px 4px 25px rgba(254, 0, 97, 0.2);
+  border-radius: 0.5rem;
+  box-shadow: 0rem 0.4rem 2.5rem rgba(254, 0, 97, 0.2);
 }
 
 .box-img-2 {
   position: absolute;
-  width: 125px;
-  height: 124px;
-  left: 772px;
-  top: 3063px;
+  width: 12.5rem;
+  height: 12.4rem;
+  left: 77.2rem;
+  top: 306.3rem;
 }
 
 .box-head-2 {
   position: absolute;
-  width: 253px;
-  height: 38px;
-  left: 772px;
-  top: 3219px;
+  width: 25.3rem;
+  height: 3.8rem;
+  left: 77.2rem;
+  top: 321.9rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .box-para-2 {
   position: absolute;
-  width: 378px;
-  height: 90px;
-  left: 772px;
-  top: 3265px;
+  width: 37.8rem;
+  height: 9rem;
+  left: 77.2rem;
+  top: 326.5rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .box-3 {
   position: absolute;
-  width: 463px;
-  height: 423px;
-  left: 1189px;
-  top: 2973px;
+  width: 46.3rem;
+  height: 42.3rem;
+  left: 118.9rem;
+  top: 297.3rem;
 
   background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 0.1rem solid rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 
-  border: 1px solid #fe0061;
-  box-shadow: 0px 4px 25px rgba(254, 0, 97, 0.2);
+  border: 0.1rem solid #fe0061;
+  box-shadow: 0rem 0.4rem 2.5rem rgba(254, 0, 97, 0.2);
 }
 
 .box-img-3 {
   position: absolute;
-  width: 130px;
-  height: 128px;
-  left: 1223px;
-  top: 3048px;
+  width: 13rem;
+  height: 12.8rem;
+  left: 122.3rem;
+  top: 304.8rem;
 }
 
 .box-head-3 {
   position: absolute;
-  width: 265.56px;
-  height: 39.89px;
-  left: 1222.64px;
-  top: 3210.22px;
+  width: 26.556rem;
+  height: 3.989rem;
+  left: 122.264rem;
+  top: 321.022rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .box-para-3 {
   position: absolute;
-  width: 396.76px;
-  height: 94.47px;
-  left: 1222.64px;
-  top: 3258.5px;
+  width: 39.676rem;
+  height: 9.447rem;
+  left: 122.264rem;
+  top: 325.85rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .box-4 {
   position: absolute;
-  width: 441px;
-  height: 403px;
-  left: 278px;
-  top: 3416px;
+  width: 44.1rem;
+  height: 40.3rem;
+  left: 27.8rem;
+  top: 341.6rem;
 
   background: #ffffff;
-  border: 1px solid #fe0061;
-  box-shadow: 0px 4px 25px rgba(254, 0, 97, 0.2);
+  border: 0.1rem solid #fe0061;
+  box-shadow: 0rem 0.4rem 2.5rem rgba(254, 0, 97, 0.2);
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .box-img-4 {
   position: absolute;
-  width: 119px;
-  height: 105px;
-  left: 310px;
-  top: 3486px;
+  width: 11.9rem;
+  height: 10.5rem;
+  left: 31rem;
+  top: 348.6rem;
 }
 
 .box-head-4 {
   position: absolute;
-  width: 253px;
-  height: 38px;
-  left: 310px;
-  top: 3636px;
+  width: 25.3rem;
+  height: 3.8rem;
+  left: 31rem;
+  top: 363.6rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .box-para-4 {
   position: absolute;
-  width: 378px;
-  height: 90px;
-  left: 310px;
-  top: 3682px;
+  width: 37.8rem;
+  height: 9rem;
+  left: 31rem;
+  top: 368.2rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .box-5 {
   position: absolute;
-  width: 440px;
-  height: 403px;
-  left: 740px;
-  top: 3416px;
+  width: 44rem;
+  height: 40.3rem;
+  left: 74rem;
+  top: 341.6rem;
 
   background: #ffffff;
-  border: 1px solid #fe0061;
-  box-shadow: 0px 4px 25px rgba(254, 0, 97, 0.2);
+  border: 0.1rem solid #fe0061;
+  box-shadow: 0rem 0.4rem 2.5rem rgba(254, 0, 97, 0.2);
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .box-img-5 {
   position: absolute;
-  width: 71px;
-  height: 117px;
-  left: 772px;
-  top: 3486px;
+  width: 7.1rem;
+  height: 11.7rem;
+  left: 77.2rem;
+  top: 348.6rem;
 }
 
 .box-head-5 {
   position: absolute;
-  width: 253px;
-  height: 38px;
-  left: 772px;
-  top: 3636px;
+  width: 25.3rem;
+  height: 3.8rem;
+  left: 77.2rem;
+  top: 363.6rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .box-para-5 {
   position: absolute;
-  width: 378px;
-  height: 90px;
-  left: 772px;
-  top: 3682px;
+  width: 37.8rem;
+  height: 9rem;
+  left: 77.2rem;
+  top: 368.2rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .box-6 {
   position: absolute;
-  width: 441px;
-  height: 403px;
-  left: 1200px;
-  top: 3416px;
+  width: 44.1rem;
+  height: 40.3rem;
+  left: 120rem;
+  top: 341.6rem;
 
   background: #ffffff;
-  border: 1px solid #fe0061;
-  box-shadow: 0px 4px 25px rgba(254, 0, 97, 0.2);
+  border: 0.1rem solid #fe0061;
+  box-shadow: 0rem 0.4rem 2.5rem rgba(254, 0, 97, 0.2);
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .box-img-6 {
   position: absolute;
-  width: 124px;
-  height: 124px;
-  left: 1232px;
-  top: 3486px;
+  width: 12.4rem;
+  height: 12.4rem;
+  left: 123.2rem;
+  top: 348.6rem;
 }
 
 .box-head-6 {
   position: absolute;
-  width: 253px;
-  height: 38px;
-  left: 1232px;
-  top: 3636px;
+  width: 25.3rem;
+  height: 3.8rem;
+  left: 123.2rem;
+  top: 363.6rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .box-para-6 {
   position: absolute;
-  width: 378px;
-  height: 90px;
-  left: 1232px;
-  top: 3682px;
+  width: 37.8rem;
+  height: 9rem;
+  left: 123.2rem;
+  top: 368.2rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .testimonial {
   position: absolute;
-  width: 343px;
-  height: 73px;
-  left: 789px;
-  top: 3992px;
+  width: 34.3rem;
+  height: 7.3rem;
+  left: 78.9rem;
+  top: 399.2rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   color: #000000;
@@ -805,66 +816,66 @@ body {
 
 .testimonial-img {
   position: absolute;
-  width: 178px;
-  height: 178px;
-  left: 487px;
-  top: 4169px;
+  width: 17.8rem;
+  height: 17.8rem;
+  left: 48.7rem;
+  top: 416.9rem;
 
-  border: 10px solid #fe0061;
+  border: 1rem solid #fe0061;
   box-sizing: border-box;
 }
 
 .testimonial-box {
   position: absolute;
-  width: 857px;
-  height: 259px;
-  left: 576px;
-  top: 4128px;
+  width: 85.7rem;
+  height: 25.9rem;
+  left: 57.6rem;
+  top: 412.8rem;
 
   /* background: #ffffff; */
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 0.1rem solid rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
-  border-radius: 10px;
+  border-radius: 1rem;
 }
 
 .testimonial-para {
   position: absolute;
-  width: 735px;
-  height: 60px;
-  left: 698px;
-  top: 4209px;
+  width: 73.5rem;
+  height: 6rem;
+  left: 69.8rem;
+  top: 420.9rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
 
   color: #000000;
 }
 
 .get-started {
   position: absolute;
-  width: 1920px;
-  height: 348px;
-  left: 0px;
-  top: 4450px;
+  width: 192rem;
+  height: 34.8rem;
+  left: 0rem;
+  top: 445rem;
 
   background: #132047;
 }
 
 .get-started-head {
   position: absolute;
-  width: 572px;
-  height: 73px;
-  left: 140px;
-  top: 4550px;
+  width: 57.2rem;
+  height: 7.3rem;
+  left: 14rem;
+  top: 455rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   text-align: center;
@@ -874,82 +885,82 @@ body {
 
 .get-started-para {
   position: absolute;
-  width: 830px;
-  height: 60px;
-  left: 190px;
-  top: 4638px;
+  width: 83rem;
+  height: 6rem;
+  left: 19rem;
+  top: 463.8rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* text-align: center; */
   color: #ffffff;
 }
 
 .get-started-btn {
   position: absolute;
-  width: 333px;
-  height: 76px;
-  left: 1294px;
-  top: 4586px;
+  width: 33.3rem;
+  height: 7.6rem;
+  left: 129.4rem;
+  top: 458.6rem;
 
   background: #ffffff;
-  border: 1px solid #225aff;
+  border: 0.1rem solid #225aff;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .get-started-btn-text {
   position: absolute;
-  width: 117px;
-  height: 30px;
-  left: 108px;
-  right: 108px;
-  top: 1px;
-  /* bottom: 23px; */
+  width: 11.7rem;
+  height: 3rem;
+  left: 10.8rem;
+  right: 10.8rem;
+  top: 0.1rem;
+  /* bottom: 23rem; */
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
 
   color: #3362a8;
 }
 
-.footer {
+.footer-land {
   position: absolute;
-  width: 1920px;
-  height: 243px;
-  left: 0px;
-  top: 4798px;
+  width: 192rem;
+  height: 24.3rem;
+  left: 0rem;
+  top: 479.8rem;
 
   background: #f1f7ff;
 }
 
 .footer-img {
   position: absolute;
-  width: 215px;
-  height: 142px;
-  left: 140px;
-  top: 4849px;
+  width: 21.5rem;
+  height: 14.2rem;
+  left: 14rem;
+  top: 484.9rem;
 }
 
 .footer-about-us-btn {
   position: absolute;
-  width: 101px;
-  height: 30px;
-  left: 1255px;
-  top: 4905px;
+  width: 10.1rem;
+  height: 3rem;
+  left: 125.5rem;
+  top: 490.5rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
   background-color: #f1f7ff;
   border-color: #f1f7ff;
@@ -958,16 +969,16 @@ body {
 
 .footer-contact-us-btn {
   position: absolute;
-  width: 117px;
-  height: 30px;
-  left: 1386px;
-  top: 4905px;
+  width: 11.7rem;
+  height: 3rem;
+  left: 138.6rem;
+  top: 490.5rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
   background-color: #f1f7ff;
   border-color: #f1f7ff;
@@ -976,16 +987,16 @@ body {
 
 .footer-pricing-btn {
   position: absolute;
-  width: 76px;
-  height: 30px;
-  left: 1533px;
-  top: 4905px;
+  width: 7.6rem;
+  height: 3rem;
+  left: 153.3rem;
+  top: 490.5rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
   background-color: #f1f7ff;
   border-color: #f1f7ff;
@@ -994,18 +1005,32 @@ body {
 
 .footer-terms-btn {
   position: absolute;
-  width: 141px;
-  height: 30px;
-  left: 1639px;
-  top: 4905px;
+  width: 14.1rem;
+  height: 3rem;
+  left: 163.9rem;
+  top: 490.5rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: bold;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
   background-color: #f1f7ff;
   border-color: #f1f7ff;
   color: #3362a8;
 }
+@media (max-width: 768px) {
+  html {
+    font-size: 40%;
+  }
+  .hero-image {
+    min-height: 500px;
+  }
+}
+
+@media (max-width: 600px) {
+  html {
+    font-size: 45%;
+  }
+}
diff --git a/src/components/LandingPage/LandingPage.js b/src/components/LandingPage/LandingPage.js
index 1a96f34..a3ec22f 100644
--- a/src/components/LandingPage/LandingPage.js
+++ b/src/components/LandingPage/LandingPage.js
@@ -17,10 +17,10 @@ function LandingPage() {
     <div>
       <div className="header">
         <div className="logo">
-          <img src={logo} />
+          <img src={logo} alt="Logo" />
         </div>
         <button type="button" className="login-btn">
-          <NavLink to="/login" className="loginn">
+          <NavLink className="loginn" to="/login">
             Login
           </NavLink>
         </button>
@@ -40,7 +40,7 @@ function LandingPage() {
           same.
         </div>
         <div className="hero-image">
-          <img src={hero} />
+          <img src={hero} alt="hero" />
         </div>
       </div>
       <div className="second-level">
@@ -60,12 +60,12 @@ function LandingPage() {
             </div>
           </div>
         </div>
-        <div class="group-2">
-          <div class="ellipse-2">
-            <div class="num-2">2</div>
-            <div class="el-head-2">
+        <div className="group-2">
+          <div className="ellipse-2">
+            <div className="num-2">2</div>
+            <div className="el-head-2">
               Customer Survey
-              <p class="el-p-2">
+              <p className="el-p-2">
                 Gain valuable insights to improve employee engagement,
                 satisfaction, and company culture.
               </p>
@@ -95,64 +95,64 @@ function LandingPage() {
           </div>
         </div>
       </div>
-      <img class="third-level-image" src={thirdLevel} />
-      <div class="third-level-head">
+      <img className="third-level-image" src={thirdLevel} alt="3rd level img" />
+      <div className="third-level-head">
         <p>Find out what employees really think🤔</p>
       </div>
-      <div class="third-level-para">
+      <div className="third-level-para">
         <p>
           simply dummy text of the printing and typesetting industry. Lorem
           Ipsum has been the industry's standard dummy text ever since the
           1500s, when an unknown printer took a galley of type and
         </p>
       </div>
-      <div class="fourth-level-head">
+      <div className="fourth-level-head">
         <p>How We Can Help You?</p>
       </div>
       <div className="box-1"></div>
-      <img className="box-img-1" src={box1} />
+      <img className="box-img-1" src={box1} alt="box-img" />
       <div className="box-head-1">Customer Surveys</div>
       <p className="box-para-1">
         Gain valuable insights to improve employee engagement, satisfaction, and
         company culture.
       </p>
       <div className="box-2"></div>
-      <img className="box-img-2" src={box2} />
+      <img className="box-img-2" src={box2} alt="box-img-2" />
       <div className="box-head-2">Customer Surveys</div>
       <p className="box-para-2">
         Gain valuable insights to improve employee engagement, satisfaction, and
         company culture.
       </p>
       <div className="box-3"></div>
-      <img className="box-img-3" src={box3} />
+      <img className="box-img-3" src={box3} alt="box-img-3" />
       <div className="box-head-3">Customer Surveys</div>
       <p className="box-para-3">
         Gain valuable insights to improve employee engagement, satisfaction, and
         company culture.
       </p>
       <div className="box-4"></div>
-      <img className="box-img-4" src={box4} />
+      <img className="box-img-4" src={box4} alt="box-img-4" />
       <div className="box-head-4">Customer Surveys</div>
       <p className="box-para-4">
         Gain valuable insights to improve employee engagement, satisfaction, and
         company culture.
       </p>
       <div className="box-5"></div>
-      <img className="box-img-5" src={box5} />
+      <img className="box-img-5" src={box5} alt="box-img-5" />
       <div className="box-head-5">Customer Surveys</div>
       <p className="box-para-5">
         Gain valuable insights to improve employee engagement, satisfaction, and
         company culture.
       </p>
       <div className="box-6"></div>
-      <img className="box-img-6" src={box6} />
+      <img className="box-img-6" src={box6} alt="box-img-6" />
       <div className="box-head-6">Customer Surveys</div>
       <p className="box-para-6">
         Gain valuable insights to improve employee engagement, satisfaction, and
         company culture.
       </p>
       <div className="testimonial">Testimonials</div>
-      <img className="testimonial-img" src={testimonial} />
+      <img className="testimonial-img" src={testimonial} alt="testimonial" />
       <div className="testimonial-box"></div>
       <div className="testimonial-para">
         Form builders are as old as the web, but Typeform elevates the medium
@@ -168,7 +168,7 @@ function LandingPage() {
         <p className="get-started-btn-text">Get Started</p>
       </button>
       <div className="footer"></div>
-      <img className="footer-img" src={footerImage} />
+      <img className="footer-img" src={footerImage} alt="footer" />
       <NavLink to="/about" className="about">
         <button className="footer-about-us-btn">About Us</button>
       </NavLink>
diff --git a/src/components/Login.css b/src/components/Login.css
index 55a826a..ea77c51 100644
--- a/src/components/Login.css
+++ b/src/components/Login.css
@@ -1,41 +1,45 @@
+html {
+  font-size: 62.5%;
+}
+
 .login {
   position: relative;
-  width: 1920px;
-  height: 1590px;
+  width: 19.2rem;
+  height: 15.9rem;
 
   background: #ffffff;
 }
 
 .left-col {
   position: absolute;
-  width: 894px;
-  height: 1590px;
-  left: 0px;
-  top: 0px;
+  width: 8.94rem;
+  height: 15.9rem;
+  left: 0rem;
+  top: 0rem;
 
   background: #f1f7ff;
 }
 
 .logo {
   position: absolute;
-  width: 215px;
-  height: 142px;
-  left: 140px;
-  top: 54px;
+  width: 21.5rem;
+  height: 14.2rem;
+  left: 14rem;
+  top: 5.4rem;
 }
 
 .head {
   position: absolute;
-  width: 394px;
-  height: 73px;
-  left: 140px;
-  top: 530px;
+  width: 39.4rem;
+  height: 7.3rem;
+  left: 14rem;
+  top: 53rem;
 
   font-family: Paytone One;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   color: #3362a8;
@@ -43,32 +47,32 @@
 
 .head-description {
   position: absolute;
-  width: 667px;
-  height: 76px;
-  left: 140px;
-  top: 621px;
+  width: 66.7rem;
+  height: 7.6rem;
+  left: 14rem;
+  top: 62.1rem;
 
   font-family: Open Sans;
   font-style: normal;
   font-weight: normal;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .signin-link {
   position: absolute;
-  width: 287px;
-  height: 30px;
-  left: 1233px;
-  top: 110px;
+  width: 28.7rem;
+  height: 3rem;
+  left: 123.3rem;
+  top: 11rem;
   text-decoration: none;
   font-family: Open Sans;
   font-style: normal;
   font-weight: 600;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
 
   color: #000000;
@@ -76,87 +80,85 @@
 
 .register-btn {
   position: absolute;
-  width: 237px;
-  height: 76px;
-  left: 1543px;
-  top: 87px;
-  font-size: 22px;
+  width: 23.7rem;
+  height: 7.6rem;
+  left: 154.3rem;
+  top: 8.7rem;
+  font-size: 2.2rem;
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .email {
   position: absolute;
-  width: 672px;
-  height: 103px;
-  left: 996px;
-  top: 463px;
-  font-size: 22px;
+  width: 67.2rem;
+  height: 10.3rem;
+  left: 99.6rem;
+  top: 46.3rem;
+  font-size: 2.2rem;
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .password {
   position: absolute;
-  width: 672px;
-  height: 103px;
-  left: 996px;
-  top: 598px;
-  font-size: 22px;
+  width: 67.2rem;
+  height: 10.3rem;
+  left: 99.6rem;
+  top: 59.8rem;
+  font-size: 2.2rem;
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 .signin {
   position: absolute;
-  width: 237px;
-  height: 76px;
-  left: 1213px;
-  top: 780px;
-  font-size: 22px;
+  width: 23.7rem;
+  height: 7.6rem;
+  left: 121.3rem;
+  top: 78rem;
+  font-size: 2.2rem;
   color: white;
   background: #3362a8;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .reset-password {
   position: absolute;
-  width: 193px;
-  height: 30px;
-  left: 1236px;
-  top: 891px;
+  width: 19.3rem;
+  height: 3rem;
+  left: 123.6rem;
+  top: 89.1rem;
 
   font-family: Open Sans;
   font-style: normal;
   font-weight: 600;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
   text-decoration: none;
   color: #3362a8;
 }
 
-.divider {
-}
 .login-options {
   position: absolute;
-  width: 111px;
-  height: 30px;
-  left: 1277px;
-  top: 1053px;
+  width: 11.1rem;
+  height: 3rem;
+  left: 127.7rem;
+  top: 105.3rem;
 
   font-family: Open Sans;
   font-style: normal;
   font-weight: 600;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
 
   color: #000000;
@@ -166,13 +168,25 @@
 
 .google-btn {
   position: absolute;
-  width: 102px;
-  height: 103px;
-  left: 1281px;
-  top: 1120px;
+  width: 10.2rem;
+  height: 10.3rem;
+  left: 128.1rem;
+  top: 112rem;
 
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  html {
+    font-size: 40%;
+  }
+}
+
+@media (max-width: 600px) {
+  html {
+    font-size: 45%;
+  }
 }
diff --git a/src/components/Login.js b/src/components/Login.js
index 49889ed..e5ad75c 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -82,7 +82,7 @@ const Login = () => {
                 required
               />
             </div>
-            <NavLink to="/" className="reset-password">
+            <NavLink to="/api/resetlink" className="reset-password">
               Forget Password ?
             </NavLink>
             <NavLink to="/register" className="signin-link">
@@ -90,12 +90,6 @@ const Login = () => {
             </NavLink>
             <button className="register-btn">Create an Account</button>
           </form>
-          <div className="divider"></div>
-          <div className="OR">OR</div>
-          <p className="login-options">Login With</p>
-          <button className="google-btn">
-            <a href="/auth/google"> Google</a>
-          </button>
         </div>
       </div>
     </>
diff --git a/src/components/Logout.js b/src/components/Logout.js
new file mode 100644
index 0000000..8d8611c
--- /dev/null
+++ b/src/components/Logout.js
@@ -0,0 +1,33 @@
+import React, { useEffect } from "react";
+import { useHistory } from "react-router-dom";
+
+const Logout = () => {
+  const history = useHistory();
+  useEffect(() => {
+    fetch("/api/logout", {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+    })
+      .then((res) => {
+        history.push("/login", { replace: true });
+        if (res.status !== 200) {
+          const error = new Error(res.error);
+          throw error;
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  });
+
+  return (
+    <>
+      <p>Logout!</p>
+    </>
+  );
+};
+export default Logout;
diff --git a/src/components/ResetLink.js b/src/components/ResetLink.js
new file mode 100644
index 0000000..745688a
--- /dev/null
+++ b/src/components/ResetLink.js
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import axios from "axios";
+
+const initialState = {
+  email: "",
+  err: "",
+  success: "",
+};
+
+const ResetLink = () => {
+  const [data, setData] = useState(initialState);
+  const { email, err, success } = data;
+
+  const handleChangeInput = (e) => {
+    const { name, value } = e.target;
+    setData({ ...data, [name]: value, err: "", success: "" });
+  };
+
+  const forgetPassword = async () => {
+    try {
+      const res = await axios.post("http://localhost:3000/api/resetlink", {
+        email,
+      });
+      return setData({ ...data, err: "", success: res.data.msg });
+    } catch (err) {
+      console.log(err);
+      console.log(email);
+    }
+  };
+
+  return (
+    <div className="fg_pass">
+      <div className="row">
+        <h2>Forget Password? Don't Worry we got you!</h2>
+
+        <label htmlFor="email">Enter your email address!</label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          value={email}
+          onChange={handleChangeInput}
+        />
+        <button onClick={forgetPassword}>Verify your email</button>
+      </div>
+    </div>
+  );
+};
+export default ResetLink;
diff --git a/src/components/ResetPassword.css b/src/components/ResetPassword.css
new file mode 100644
index 0000000..c662c63
--- /dev/null
+++ b/src/components/ResetPassword.css
@@ -0,0 +1,31 @@
+fg_pass h2 {
+  color: #555;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 2rem;
+  margin: 50px 0;
+  letter-spacing: 1.3px;
+}
+.fg_pass .row {
+  max-width: 500px;
+  margin: auto;
+  padding: 0 10px;
+}
+.fg_pass .row input {
+  width: 100%;
+  height: 45px;
+  border: 1px solid #ccc;
+  outline: none;
+  padding: 0 15px;
+  border-radius: 3px;
+  margin: 5px 0;
+}
+.fg_pass .row button {
+  background: #333;
+  color: white;
+  padding: 10px 30px;
+  text-transform: uppercase;
+  letter-spacing: 1.3px;
+  border-radius: 3px;
+  margin-top: 15px;
+}
diff --git a/src/components/ResetPassword.js b/src/components/ResetPassword.js
new file mode 100644
index 0000000..93bea59
--- /dev/null
+++ b/src/components/ResetPassword.js
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { useParams } from "react-router-dom";
+import "./ResetPassword.css";
+const initialState = {
+  password: "",
+  err: "",
+  success: "",
+};
+
+function ResetPassword() {
+  const [data, setData] = useState(initialState);
+  const { token } = useParams();
+
+  const { password, err, success } = data;
+
+  const handleChangeInput = (e) => {
+    const { name, value } = e.target;
+    setData({ ...data, [name]: value, err: "", success: "" });
+  };
+
+  const handleResetPassword = async () => {
+    try {
+      const res = await axios.post(
+        `http://localhost:2000/api/changepassword/${token}`,
+        { password },
+        {
+          headers: { Authorization: token },
+        }
+      );
+      return setData({ ...data, err: "", success: res.data.msg });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <div className="fg_pass">
+      <h2>Reset Password</h2>
+      <div className="row">
+        <label htmlFor="password">Enter your password </label>
+        <input
+          type="password"
+          name="password"
+          id="password"
+          value={password}
+          onChange={handleChangeInput}
+        />
+        <button onClick={handleResetPassword}>Reset Password</button>
+      </div>
+    </div>
+  );
+}
+export default ResetPassword;
diff --git a/src/components/Signup.css b/src/components/Signup.css
index 731176a..28a3beb 100644
--- a/src/components/Signup.css
+++ b/src/components/Signup.css
@@ -1,133 +1,19 @@
-/* * {
-  margin: 0;
-  padding: 3px;
+html {
+  font-size: 62.5%;
 }
 
-body {
-  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2044837-jpeg.jpg")
-    center center no-repeat;
-  background-size: cover;
-  width: 100vw;
-  height: 100vh;
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  font-size: 65pt;
-  font-family: "Spartan";
-  color: #366a83;
-/* } 
-.contact-us {
-  background: #f8f4e5;
-  padding: 50px 100px;
-  border-top: 10px solid #f45702;
-}
-
-.form-title {
-  padding-left: 58px;
-  color: #277eb1;
-}
-
-.register {
-  color: #366a83;
-} 
-
-.clearfix {
-  color: #366a83;
-  text-decoration: none;
-  padding-left: 50px;
-  font-size: 15pt;
-}
-label,
-input,
-textarea {
-  display: block;
-  width: 100%;
-  font-size: 15pt;
-  line-height: 24pt;
-  font-family: "Spartan";
-}
-input {
-  margin-bottom: 12pt * 2;
-}
-
-h3 {
-  font-weight: normal;
-  font-size: 10pt;
-  line-height: 12pt * 2;
-  font-style: italic;
-  margin: 0 0 0.5em 0;
-}
-span {
-  font-size: 8pt;
-}
-
-em {
-  color: #f45702;
-  font-weight: bold;
-}
-input,
-textarea {
-  border: none;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
-  background: #f8f4e5;
-  padding-left: 5px;
-  outline: none;
-}
-input:focus,
-textarea:focus {
-  border: 1px solid #6bd4b1;
-}
-textarea {
-  resize: none;
-}
-
-button {
-  display: block;
-  float: right;
-  line-height: 12pt * 2;
-  padding: 0 20px;
-  border: none;
-  background: #f45702;
-  color: white;
-  letter-spacing: 2px;
-  transition: 0.2s all ease-in-out;
-  border-bottom: 2px solid transparent;
-  outline: none;
-
-  /* &:hover
-    background: inherit
-    color: #f45702
-    border-bottom: 2px solid #f45702 */
-/* }
-::selection {
-  background: rgb(255, 199, 184);
-} */
-/* 
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover,
-textarea:-webkit-autofill:focus {
-  border: 1px solid #6bd4b1;
-  -webkit-text-fill-color: #2a293e;
-} */
-/* -webkit-box-shadow: 0 0 0px 1000px #f8f4e5; inset} */
-/* transition: background-color 5000s ease-in-out 0s} */
-
 .head {
   position: absolute;
-  width: 519px;
-  height: 73px;
-  left: 140px;
-  top: 530px;
+  width: 51.9rem;
+  height: 7.3rem;
+  left: 14rem;
+  top: 53rem;
 
-  font-family: Paytone One;
+  font-family: Paytone One sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 52px;
-  line-height: 73px;
+  font-size: 5.2rem;
+  line-height: 7.3rem;
   /* identical to box height */
 
   color: #3362a8;
@@ -135,49 +21,49 @@ textarea:-webkit-autofill:focus {
 
 .left-description {
   position: absolute;
-  width: 667px;
-  height: 76px;
-  left: 140px;
-  top: 621px;
+  width: 66.7rem;
+  height: 7.6rem;
+  left: 14rem;
+  top: 62.1rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: normal;
-  font-size: 28px;
-  line-height: 38px;
+  font-size: 2.8rem;
+  line-height: 3.8rem;
 
   color: #000000;
 }
 
 .signup {
   position: relative;
-  width: 1920px;
-  height: 1590px;
+  width: 192rem;
+  height: 159rem;
 
   background: #ffffff;
 }
 .left-column {
   position: absolute;
-  width: 894px;
-  height: 1590px;
-  left: 0px;
-  top: 0px;
+  width: 89.4rem;
+  height: 159rem;
+  left: 0rem;
+  top: 0rem;
 
   background: #f1f7ff;
 }
 
 .clearfix {
   position: absolute;
-  width: 277px;
-  height: 30px;
-  left: 1233px;
-  top: 110px;
+  width: 27.7rem;
+  height: 3rem;
+  left: 123.3rem;
+  top: 11rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: 600;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
 
   color: #000000;
@@ -187,128 +73,118 @@ textarea:-webkit-autofill:focus {
 
 .name {
   position: absolute;
-  width: 672px;
-  height: 103px;
-  left: 996px;
-  top: 328px;
+  width: 67.2rem;
+  height: 10.3rem;
+  left: 99.6rem;
+  top: 32.8rem;
 
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
-  font-size: 22px;
+  border-radius: 0.5rem;
+  font-size: 2.2rem;
 }
 
 .password {
   position: absolute;
-  width: 672px;
-  height: 103px;
-  left: 996px;
-  top: 462px;
-  font-size: 22px;
+  width: 67.2rem;
+  height: 10.3rem;
+  left: 99.6rem;
+  top: 46.2rem;
+  font-size: 2.2rem;
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 .email {
   position: absolute;
-  width: 672px;
-  height: 103px;
-  left: 996px;
-  top: 597px;
-  font-size: 22px;
+  width: 67.2rem;
+  height: 10.3rem;
+  left: 99.6rem;
+  top: 59.7rem;
+  font-size: 2.2rem;
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .phone {
   position: absolute;
-  width: 672px;
-  height: 103px;
-  left: 996px;
-  top: 731px;
-  font-size: 22px;
+  width: 67.2rem;
+  height: 10.3rem;
+  left: 99.6rem;
+  top: 73.1rem;
+  font-size: 2.2rem;
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .register {
   position: absolute;
-  width: 237px;
-  height: 76px;
-  left: 1213px;
-  top: 883px;
-  font-size: 22px;
+  width: 23.7rem;
+  height: 7.6rem;
+  left: 121.3rem;
+  top: 88.3rem;
+  font-size: 2.2rem;
   background: #3362a8;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
   color: white;
-  border-radius: 5px;
-}
-
-.left-column {
-  position: absolute;
-  width: 894px;
-  height: 1590px;
-  left: 0px;
-  top: 0px;
-
-  background: #f1f7ff;
+  border-radius: 0.5rem;
 }
 
 .divider {
   position: absolute;
-  width: 672px;
-  height: 0px;
-  left: 996px;
-  top: 1064px;
+  width: 67.2rem;
+  height: 0rem;
+  left: 99.6rem;
+  top: 106.4rem;
 
-  border: 2px solid #dce1e2;
+  border: 0.2rem solid #dce1e2;
 }
 
 .OR {
   position: absolute;
-  width: 28.8px;
-  height: 27px;
-  left: 1322px;
-  top: 1030px;
+  width: 2.88rem;
+  height: 2.7rem;
+  left: 132.2rem;
+  top: 103rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: 600;
-  font-size: 22px;
-  line-height: 27px;
+  font-size: 2.2rem;
+  line-height: 2.7rem;
   /* identical to box height */
 
   color: #3362a8;
 }
 .circle {
   position: absolute;
-  width: 45px;
-  height: 45px;
-  left: 1314px;
-  top: 1042px;
+  width: 4.5rem;
+  height: 4.5rem;
+  left: 131.4rem;
+  top: 104.2rem;
 
   background: #dce1e2;
 }
 
 .options {
   position: absolute;
-  width: 111px;
-  height: 30px;
-  left: 1277px;
-  top: 1135px;
+  width: 11.1rem;
+  height: 3rem;
+  left: 127.7rem;
+  top: 113.5rem;
 
-  font-family: Open Sans;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: 600;
-  font-size: 22px;
-  line-height: 30px;
+  font-size: 2.2rem;
+  line-height: 3rem;
   /* identical to box height */
 
   color: #000000;
@@ -318,51 +194,78 @@ textarea:-webkit-autofill:focus {
 
 .login-btn {
   position: absolute;
-  width: 237px;
-  height: 76px;
-  left: 1543px;
-  top: 87px;
+  width: 0.0001rem;
+  height: 7.6rem;
+  /* left: 154.3rem; */
+  left: 1.3rem;
+  top: 8.7rem;
 
-  background: #ffffff;
-  border: 1px solid #3362a8;
+  background: #f1f7ff;
+  border: 0.1rem solid #f1f7ff;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
+/* .login-btn {
+  position: absolute;
+  width: 23.7rem;
+  height: 7.6rem;
+  /* left: 154.3rem; */
+/*left: 1.3rem;
+  top: 8.7rem;
+
+  background: #ffffff;
+  border: 0.1rem solid #3362a8;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+} */
 
 .logo {
   position: absolute;
-  width: 215px;
-  height: 142px;
-  left: 140px;
-  top: 54px;
+  width: 21.5rem;
+  height: 14.2rem;
+  left: 14rem;
+  top: 5.4rem;
 }
 .GoogleLogin {
   position: absolute;
-  width: 102px;
-  height: 103px;
-  left: 1281px;
-  top: 1202px;
-  font-size: 22px;
+  width: 10.2rem;
+  height: 10.3rem;
+  left: 128.1rem;
+  top: 120.2rem;
+  font-size: 2.2rem;
   background: #ffffff;
-  border: 1px solid #3362a8;
+  border: 0.1rem solid #3362a8;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 0.5rem;
 }
 
 .terms {
   position: absolute;
-  width: 672px;
-  height: 75px;
-  left: 996px;
-  top: 1353px;
-  font-size: 22px;
-  font-family: Open Sans;
+  width: 67.2rem;
+  height: 7.5rem;
+  left: 99.6rem;
+  top: 135.3rem;
+  font-size: 2.2rem;
+  font-family: Open Sans sans-serif;
   font-style: normal;
   font-weight: 600;
 
-  line-height: 25px;
+  line-height: 2.5rem;
 
   color: #000000;
 
   opacity: 0.5;
 }
+
+@media (max-width: 768px) {
+  html {
+    font-size: 40%;
+  }
+}
+
+@media (max-width: 600px) {
+  html {
+    font-size: 45%;
+  }
+}
+
diff --git a/src/components/Signup.js b/src/components/Signup.js
index 6cd9e37..ee72739 100644
--- a/src/components/Signup.js
+++ b/src/components/Signup.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { NavLink, useHistory } from "react-router-dom";
 import "./Signup.css";
-import logo from "../LandingPage/images/favicon.png";
+import logo from "./LandingPage/images/favicon.png";
 
 const Signup = () => {
   const history = useHistory();
@@ -128,17 +128,6 @@ const Signup = () => {
           </form>
         </div>
       </div>
-      <div className="divider"></div>
-      <div className="circle"></div>
-      <p className="OR">OR</p>
-      <div className="options">Login with</div>
-      <button className="GoogleLogin">Goggle</button>
-      <div className="terms">
-        By clicking ‘Register’, you agree to the Terms of Use and Privacy
-        Notice. You also agree to receive information and offers relevant to our
-        services via email. You can opt-out of these emails in your My Account
-        page anytime.
-      </div>
     </>
   );
 };
diff --git a/src/components/SurveyNew.js b/src/components/SurveyNew.js
deleted file mode 100644
index 4615935..0000000
--- a/src/components/SurveyNew.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const SurveyNew = () => {};
-export default SurveyNew;
diff --git a/src/components/surveys/StoringNo.js b/src/components/surveys/StoringNo.js
new file mode 100644
index 0000000..d6184c2
--- /dev/null
+++ b/src/components/surveys/StoringNo.js
@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { showErrMsg, showSuccessMsg } from "../utils/notification/Notification";
+import axios from "axios";
+
+function StoringNo() {
+  const { id } = useParams();
+  console.log(id);
+  const [err, setErr] = useState("");
+  const [success, setSuccess] = useState("");
+  console.log(useParams());
+
+  useEffect(() => {
+    if (id) {
+      const activationEmail = async () => {
+        try {
+          const res = await axios.put(
+            `http://localhost:2000/survey/response/no/${id}`,
+            {
+              id,
+            }
+          );
+          setSuccess(res.data.msg);
+        } catch (err) {
+          err.response.data.msg && setErr(err.response.data.msg);
+        }
+      };
+      activationEmail();
+    }
+  }, [id]);
+  return (
+    <div className="active_page">
+      {err && showErrMsg(err)}
+      {success && showSuccessMsg(success)}
+      {/* <NavLink>Kindly click on this link</NavLink> */}
+      <h1 className="message">Thankyou! your response has been sent!</h1>
+    </div>
+  );
+}
+export default StoringNo;
+
diff --git a/src/components/surveys/StoringYes.js b/src/components/surveys/StoringYes.js
new file mode 100644
index 0000000..73a8585
--- /dev/null
+++ b/src/components/surveys/StoringYes.js
@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { showErrMsg, showSuccessMsg } from "../utils/notification/Notification";
+import axios from "axios";
+
+function StoringYes() {
+  const { id } = useParams();
+  const [err, setErr] = useState("");
+  const [success, setSuccess] = useState("");
+
+
+  useEffect(() => {
+    if (id) {
+      const activationEmail = async () => {
+        try {
+          const res = await axios.put(
+            `http://localhost:2000/survey/response/yes/${id}`,
+            {
+              id,
+            }
+          );
+          setSuccess(res.data.msg);
+        } catch (err) {
+          err.response.data.msg && setErr(err.response.data.msg);
+        }
+      };
+      activationEmail();
+    }
+  }, [id]);
+  return (
+    <div className="active_page">
+      {err && showErrMsg(err)}
+      {success && showSuccessMsg(success)}
+      <h1 className="message">Thankyou! your response has been sent!</h1>
+    </div>
+  );
+}
+export default StoringYes;
diff --git a/src/components/surveys/SurveyField.js b/src/components/surveys/SurveyField.js
new file mode 100644
index 0000000..2e4318d
--- /dev/null
+++ b/src/components/surveys/SurveyField.js
@@ -0,0 +1,16 @@
+//this file will contain the logic to render a single label and text input
+import React from "react";
+export default ({ input, label, meta: { error, touched } }) => {
+  return (
+    <div>
+      <label style={{ fontSize: "35px", color: "#3362a8" }}>{label}</label>
+      <input {...input} style={{ marginBottom: "5px", fontSize: "30px" }} />
+      <div
+        className="red-text"
+        style={{ marginBottom: "20px", fontSize: "30px" }}
+      >
+        {touched && error}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/surveys/SurveyForm.css b/src/components/surveys/SurveyForm.css
new file mode 100644
index 0000000..caaebc8
--- /dev/null
+++ b/src/components/surveys/SurveyForm.css
@@ -0,0 +1,10 @@
+.text-form {
+  font-size: 40px;
+}
+.submit-btn {
+  font-size: 40px;
+  background-color: #6691d1;
+}
+.input-field {
+  padding-left: 101px;
+}
diff --git a/src/components/surveys/SurveyForm.js b/src/components/surveys/SurveyForm.js
new file mode 100644
index 0000000..593adc2
--- /dev/null
+++ b/src/components/surveys/SurveyForm.js
@@ -0,0 +1,77 @@
+import React, { Component } from "react";
+import _ from "lodash";
+import { reduxForm, Field } from "redux-form";
+import SurveyField from "./SurveyField";
+import { Link } from "react-router-dom";
+import "./SurveyForm.css";
+import formFields from "./formFields";
+import validateEmails from "../utils/validateEmails";
+
+class SurveyForm extends Component {
+  renderFields() {
+    return _.map(formFields, ({ label, name }) => {
+      return (
+        <Field
+          key={name}
+          component={SurveyField}
+          type="text"
+          label={label}
+          name={name}
+        />
+      );
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h3
+          style={{ marginBottom: "53px", fontWeight: "bold", color: "#3362a8" }}
+        >
+          Please provide the following details 👉🏼
+        </h3>
+        <form
+          className="text-form"
+          onSubmit={this.props.handleSubmit(this.props.onSurveySubmit)}
+        >
+          {this.renderFields()}
+          <Link
+            to="/dashboard"
+            className="red btn-flat white-text"
+            style={{ fontSize: "30px", height: "50px" }}
+          >
+            Cancel
+          </Link>
+
+          <button
+            className="teal btn-flat right white-text"
+            style={{ fontSize: "30px", height: "50px" }}
+            type="submit"
+          >
+            Next
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+function validate(values) {
+  const errors = {};
+  errors.recipients = validateEmails(values.recipients || "");
+
+  _.each(formFields, ({ name }) => {
+    if (!values[name]) {
+      errors[name] = "Please enter a value!";
+    }
+  });
+
+  return errors;
+}
+export default reduxForm({
+  validate: validate,
+  form: "surveyForm",
+  destroyOnUnmount: false,
+})(SurveyForm);
+
+
+
diff --git a/src/components/surveys/SurveyFormReview.js b/src/components/surveys/SurveyFormReview.js
new file mode 100644
index 0000000..36f489e
--- /dev/null
+++ b/src/components/surveys/SurveyFormReview.js
@@ -0,0 +1,51 @@
+import React from "react";
+import _ from "lodash";
+import { connect } from "react-redux";
+import formFields from "./formFields";
+import { withRouter } from "react-router-dom";
+import * as actions from "../../actions/index";
+
+const SurveyFormReview = ({ onCancel, formValues, submitSurvey, history }) => {
+  const reviewFields = _.map(formFields, ({ name, label }) => {
+    return (
+      <div key={name}>
+        <label style={{ fontSize: "35px", color: "#3362a8" }}>{label}</label>
+        <div style={{ marginBottom: "20px", fontSize: "30px" }}>
+          {formValues[name]}
+        </div>
+      </div>
+    );
+  });
+
+  return (
+    <div>
+      <h3
+        style={{ marginBottom: "53px", fontWeight: "bold", color: "#3362a8" }}
+      >
+        Please confirm your entries 👉🏼
+      </h3>
+      {reviewFields}
+      <button
+        className="yellow darken-3 white-text btn-flat"
+        style={{ fontSize: "30px", height: "50px" }}
+        onClick={onCancel}
+      >
+        Back
+      </button>
+      <button
+        className="green btn-flat right white-text"
+        style={{ fontSize: "30px", height: "50px" }}
+        onClick={() => submitSurvey(formValues, history)}
+      >
+        Send Survey
+      </button>
+    </div>
+  );
+};
+
+function mapStateToProps(state) {
+  return { formValues: state.form.surveyForm.values };
+}
+
+export default connect(mapStateToProps, actions)(withRouter(SurveyFormReview));
+
diff --git a/src/components/surveys/SurveyList.js b/src/components/surveys/SurveyList.js
new file mode 100644
index 0000000..736e104
--- /dev/null
+++ b/src/components/surveys/SurveyList.js
@@ -0,0 +1,49 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { fetchSurveys } from "../../actions";
+
+class SurveyList extends Component {
+  componentDidMount() {
+    this.props.fetchSurveys();
+  }
+
+  renderSurveyList() {
+    return this.props.surveys.reverse().map((survey) => {
+      return (
+        <div
+          className="card darken-1"
+          key={survey._id}
+          style={{ width: "1013px", bottom: "227px", right: "345px" }}
+        >
+          <div className="card-content">
+            <span className="card-title" style={{ color: "#3362a8" }}>
+              {survey.body}
+            </span>
+            <p>{survey.subject}</p>
+            <p className="right">
+              Sent on: {new Date(survey.dateSent).toLocaleDateString()}
+            </p>
+          </div>
+          <div className="card-action">
+            <a href="/dashboard" style={{ color: "green" }}>
+              Yes: {survey.yes}
+            </a>
+            <a href="/dashboard" style={{ color: "red" }}>
+              No: {survey.No}
+            </a>
+          </div>
+        </div>
+      );
+    });
+  }
+
+  render() {
+    return <div>{this.renderSurveyList()}</div>;
+  }
+}
+function mapStateToProps({ surveys }) {
+  return { surveys: surveys };
+}
+
+export default connect(mapStateToProps, { fetchSurveys })(SurveyList);
+
diff --git a/src/components/surveys/SurveyNew.js b/src/components/surveys/SurveyNew.js
new file mode 100644
index 0000000..d13426b
--- /dev/null
+++ b/src/components/surveys/SurveyNew.js
@@ -0,0 +1,30 @@
+//Survey new shows us SurveyForm and SurveyFormReview
+import React, { Component } from "react";
+import SurveyForm from "./SurveyForm";
+import { reduxForm } from "redux-form";
+import SurveyFormReview from "./SurveyFormReview";
+
+class SurveyNew extends Component {
+  state = { showFormReview: false };
+
+  renderContent() {
+    if (this.state.showFormReview) {
+      return (
+        <SurveyFormReview
+          onCancel={() => this.setState({ showFormReview: false })}
+        />
+      );
+    }
+    return (
+      <SurveyForm
+        onSurveySubmit={() => this.setState({ showFormReview: true })}
+      />
+    );
+  }
+  render() {
+    return <div>{this.renderContent()}</div>;
+  }
+}
+export default reduxForm({
+  form: "surveyForm",
+})(SurveyNew);
diff --git a/src/components/surveys/formFields.js b/src/components/surveys/formFields.js
new file mode 100644
index 0000000..ed3434f
--- /dev/null
+++ b/src/components/surveys/formFields.js
@@ -0,0 +1,7 @@
+export default [
+  { label: "Survey Title", name: "title" },
+  { label: "Survey Category", name: "category" },
+  { label: "Email Body", name: "body" },
+  { label: "Subject  Line", name: "subject" },
+  { label: "Recipient List", name: "recipients" },
+];
diff --git a/src/components/utils/validateEmails.js b/src/components/utils/validateEmails.js
new file mode 100644
index 0000000..97121d7
--- /dev/null
+++ b/src/components/utils/validateEmails.js
@@ -0,0 +1,13 @@
+const re =
+  /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+export default (emails) => {
+  const invalidEmails = emails
+    .split(",")
+    .map((email) => email.trim())
+    .filter((email) => re.test(email) === false);
+
+  if (invalidEmails.length) {
+    return `These emails are invalid : ${invalidEmails}`;
+  }
+  return;
+};
diff --git a/src/index.js b/src/index.js
index 49bf7e1..a633561 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,11 +7,9 @@ import { Provider } from "react-redux";
 import { createStore, applyMiddleware } from "redux";
 import App from "./components/App";
 import reportWebVitals from "./reportWebVitals";
-// import { BrowserRouter } from "react-router-dom";
 import reducers from "./reducers";
 
 const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
-// const store = createStore(() => reducers, {}, applyMiddleware(reduxThunk));
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
@@ -21,7 +19,5 @@ ReactDOM.render(
   document.getElementById("root")
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 5d0ca97..7e5ed24 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,6 +1,10 @@
 import { combineReducers } from "redux";
 import authReducer from "./authReducer";
+import { reducer as reduxForm } from "redux-form";
+import surveysReducer from "./surveysReducer";
 
 export default combineReducers({
   auth: authReducer,
+  form: reduxForm,
+  surveys: surveysReducer,
 });
diff --git a/src/reducers/surveysReducer.js b/src/reducers/surveysReducer.js
new file mode 100644
index 0000000..537cbf3
--- /dev/null
+++ b/src/reducers/surveysReducer.js
@@ -0,0 +1,10 @@
+import { FETCH_SURVEYS } from "../actions/types";
+
+export default function (state = [], action) {
+  switch (action.type) {
+    case FETCH_SURVEYS:
+      return action.payload;
+    default:
+      return state;
+  }
+}
