diff --git a/client/src/App.jsx b/client/src/App.jsx
index 835fdf0..12be154 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import MyAccount from './components/MyAccount';
 
 import './Normalize.css';
 import './App.css';
@@ -7,14 +8,13 @@ import './App.css';
 /* eslint-disable  */
 class App extends Component {
   render() {
-    return(
+    return (
       <Router>
         <Switch>
-          <Route exact path="/my-account" >
-          </Route>
+          <Route exact path="/my-account" component={MyAccount} />
         </Switch>
       </Router>
-    )
+    );
   }
 }
 
diff --git a/client/src/components/Login/Login.css b/client/src/components/Login/Login.css
index af5d60b..e06a8c6 100644
--- a/client/src/components/Login/Login.css
+++ b/client/src/components/Login/Login.css
@@ -5,6 +5,7 @@
   flex-direction: column;
   background-color: #f7f7f7;
   padding-bottom: 10px;
+  margin: 30px 0 0 0;
 }
 
 .login-form__button-container {
@@ -73,9 +74,20 @@
 @media only screen and (min-width: 1000px) {
   .login-form {
     display: flex;
-    width: 35%;
+    width: 50%;
     height: 31%;
     flex-direction: column;
     background-color: #f7f7f7;
+    margin: 30px 0 0 40px;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .login-form {
+    display: flex;
+    width: 100%;
+    height: 360px;
+    flex-direction: column;
+    background-color: #f7f7f7;
   }
 }
diff --git a/client/src/components/Login/index.jsx b/client/src/components/Login/index.jsx
index bc6a8e7..02ac60a 100644
--- a/client/src/components/Login/index.jsx
+++ b/client/src/components/Login/index.jsx
@@ -1,78 +1,57 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
 import InputField from '../common/InputField';
 import './Login.css';
 
-export default class Login extends Component {
-  state = {
-    email: '',
-    password: '',
-    rememberMe: false,
-  };
-
-  handleClick = () => {
-    this.setState(prevState => ({
-      rememberMe: !prevState.rememberMe,
-    }));
-  };
-
-  handleChange = e => {
-    this.setState({ [e.target.name]: e.target.value });
-  };
-
-  handleSubmit = e => {
-    fetch('/login', {
-      credentials: 'same-origin',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-      body: JSON.stringify(this.state),
-    });
-    e.preventDefault();
-  };
-
-  render() {
-    return (
-      <form className="login-form" onSubmit={this.handleSubmit}>
-        <h4 className="login-form__header">Registered Customer</h4>
+export default function Login(props) {
+  const { handleChange, handleSubmit, handleClick } = props;
+  return (
+    <form className="login-form" onSubmit={handleSubmit}>
+      <h4 className="login-form__header">Registered Customer</h4>
+      <InputField
+        id="email"
+        labelText="Username or email address"
+        className="login-form__text"
+        labelClass="login-form__label"
+        name="loginEmail"
+        type="text"
+        onChange={handleChange}
+      />
+      <InputField
+        id="password"
+        labelText="Password"
+        labelClass="login-form__label"
+        className="login-form__text"
+        name="loginPassword"
+        type="text"
+        onChange={handleChange}
+      />
+      <div className="login-form__button-container">
         <InputField
-          id="email"
-          labelText="Username or email address"
-          className="login-form__text"
-          labelClass="login-form__label"
-          name="email"
-          type="text"
-          onChange={this.handleChange}
+          className="login-form__submit"
+          type="submit"
+          value="Login"
         />
         <InputField
-          id="password"
-          labelText="Password"
-          labelClass="login-form__label"
-          className="login-form__text"
-          name="password"
-          type="text"
-          onChange={this.handleChange}
+          className="login-form__checkbox"
+          type="checkbox"
+          onClick={handleClick}
         />
-        <div className="login-form__button-container">
-          <InputField
-            className="login-form__submit"
-            type="submit"
-            value="Login"
-          />
-          <InputField
-            className="login-form__checkbox"
-            type="checkbox"
-            onClick={this.handleClick}
-          />
-          <span className="remember-me__span">Remember Me</span>
-        </div>
-        <p>
-          <Link to="/my-account/lost-password" className="login-form__anchor">
-            Lost your password?
-          </Link>
-        </p>
-      </form>
-    );
-  }
+        <span className="remember-me__span">Remember Me</span>
+      </div>
+      <p>
+        <Link to="/my-account/lost-password" className="login-form__anchor">
+          Lost your password?
+        </Link>
+      </p>
+    </form>
+  );
 }
+
+Login.propTypes = {
+  handleChange: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  handleClick: PropTypes.func.isRequired,
+};
diff --git a/client/src/components/MyAccount/MyAccount.css b/client/src/components/MyAccount/MyAccount.css
new file mode 100644
index 0000000..c9707ec
--- /dev/null
+++ b/client/src/components/MyAccount/MyAccount.css
@@ -0,0 +1,118 @@
+.my-account {
+  display: flex;
+  width: 100%;
+  height: 120px;
+  background-color: #f9f9f9;
+}
+
+.my-account__container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 120px;
+  align-content: center;
+  justify-content: space-between;
+  margin: 0 5%;
+}
+
+.my-account__header {
+  margin-top: 35px;
+  font-size: 35px;
+  font-weight: lighter;
+  color: grey;
+}
+
+.my-account__link-wrapper {
+  display: flex;
+  flex-direction: row;
+  width: 200px;
+}
+
+.my-account__home-ref {
+  margin: 50px 10px 0px 25px;
+  color: grey;
+}
+
+.my-account__wrapper-text {
+  margin-top: 51px;
+  color: lightgray;
+}
+
+.my-account__forms-container {
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  margin: 20px 0 0 5%;
+}
+
+.my-account__error-icon {
+  margin-right: 3px;
+}
+
+.my-account__forms-container:nth-child(0) {
+  margin-right: 50px;
+}
+
+.my-account__error-message {
+  outline: darkred solid 3px;
+  width: 95.7%;
+  margin: 60px 0 0 42px;
+  padding: 15px 15px;
+}
+
+.my-account__forms-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+@media only screen and (max-width: 1000px) {
+  .my-account__forms-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 0 15%;
+  }
+
+  .my-account__forms-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .my-account__header {
+    margin-top: 46px;
+    font-size: 20px;
+    font-weight: lighter;
+    color: grey;
+  }
+
+  .my-account__home-ref {
+    margin: 48px 10px 0px 25px;
+    color: grey;
+  }
+  
+  .my-account__wrapper-text {
+    margin-top: 48px;
+    color: lightgray;
+  }
+
+  .my-account__forms-container {
+    display: flex;
+    flex-direction: column;
+    width: 96%;
+    margin: 2%;
+  }
+
+  .my-account__error-message {
+    outline: darkred solid 3px;
+    margin: 60px 0 0 0;
+    padding: 15px 15px;
+  }
+  
+  .my-account__forms-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
diff --git a/client/src/components/MyAccount/index.jsx b/client/src/components/MyAccount/index.jsx
new file mode 100644
index 0000000..594485d
--- /dev/null
+++ b/client/src/components/MyAccount/index.jsx
@@ -0,0 +1,117 @@
+import React, { Fragment, Component } from 'react';
+import { Link } from 'react-router-dom';
+import { MdError } from 'react-icons/md';
+
+import SignUp from '../SignUp';
+import Login from '../Login';
+import './MyAccount.css';
+
+export default class MyAccount extends Component {
+  state = {
+    loginEmail: '',
+    loginPassword: '',
+    loginRememberMe: false,
+    signupEmail: '',
+    signupPassword: '',
+    error: false,
+  };
+
+  handleLoginChange = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  handleLoginSubmit = e => {
+    const { loginEmail, loginPassword, loginRememberMe } = this.state;
+    const loginState = {
+      loginEmail,
+      loginPassword,
+      loginRememberMe,
+    };
+
+    if (loginEmail === '' || loginPassword === '') {
+      this.setState({ error: true });
+    } else {
+      this.setState({ error: false });
+      fetch('/login', {
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify(loginState),
+      });
+    }
+    e.preventDefault();
+  };
+
+  handleLoginClick = () => {
+    this.setState(prevState => ({
+      LoginRememberMe: !prevState.LoginRememberMe,
+    }));
+  };
+
+  handleSignUpChange = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  handleSignUpSubmit = e => {
+    e.preventDefault();
+    const { signupEmail, signupPassword } = this.state;
+    const signUpState = {
+      signupEmail,
+      signupPassword,
+    };
+
+    if (signupEmail === '' || signupPassword === '') {
+      this.setState({ error: true });
+    } else {
+      this.setState({ error: false });
+      fetch('/sign-up', {
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify(signUpState),
+      });
+    }
+  };
+
+  render() {
+    const { error } = this.state;
+    return (
+      <Fragment>
+        <div className="my-account">
+          <div className="my-account__container">
+            <h2 className="my-account__header">My Account</h2>
+            <div className="my-account__link-wrapper">
+              <Link className="my-account__home-ref" to="/">
+                Atelier
+              </Link>
+              <p className="my-account__wrapper-text"> &gt; My Account</p>
+            </div>
+          </div>
+        </div>
+        <div className="my-account__forms-container">
+          {error === true && (
+            <div className="my-account__error-message">
+              <MdError className="my-account__error-icon" />
+              <b>Error:</b> Username or password is required
+            </div>
+          )}
+          <div className="my-account__forms-wrapper">
+            <Login
+              handleChange={this.handleLoginChange}
+              handleSubmit={this.handleLoginSubmit}
+              handleClick={this.handleLoginClick}
+            />
+            <SignUp
+              handleChange={this.handleSignUpChange}
+              handleSubmit={this.handleSignUpSubmit}
+            />
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
diff --git a/client/src/components/SignUp/SignUp.css b/client/src/components/SignUp/SignUp.css
index db14cd3..eabfbb3 100644
--- a/client/src/components/SignUp/SignUp.css
+++ b/client/src/components/SignUp/SignUp.css
@@ -5,6 +5,7 @@
   flex-direction: column;
   background-color: white;
   padding-bottom: 10px;
+  margin: 30px 0 0 0;
 }
 
 .sign-up-form__submit-container {
@@ -67,7 +68,18 @@
 @media only screen and (min-width: 1000px) {
   .sign-up-form {
     display: flex;
-    width: 35%;
+    width: 48%;
+    height: 360px;
+    flex-direction: column;
+    background-color: white;
+    margin: 30px 0 0 40px;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .sign-up-form {
+    display: flex;
+    width: 100%;
     height: 360px;
     flex-direction: column;
     background-color: white;
diff --git a/client/src/components/SignUp/index.jsx b/client/src/components/SignUp/index.jsx
index 6eab1bf..265681a 100644
--- a/client/src/components/SignUp/index.jsx
+++ b/client/src/components/SignUp/index.jsx
@@ -1,67 +1,50 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import InputField from '../common/InputField';
 import './SignUp.css';
-/* eslint linebreak-style: ["error", "windows"] */
-export default class SignUp extends Component {
-  state = {
-    email: '',
-    password: '',
-  };
 
-  handleChange = e => {
-    this.setState({ [e.target.name]: e.target.value });
-  };
-
-  handleSubmit = e => {
-    fetch('/sign-up', {
-      credentials: 'same-origin',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-      body: JSON.stringify(this.state),
-    });
-    e.preventDefault();
-  };
-
-  render() {
-    return (
-      <form className="sign-up-form" onSubmit={this.handleSubmit}>
-        <div className="sign-up-form__container">
-          <h4 className="sign-up-form__header">Not registered? No problem</h4>
-          <p className="sign-up-form__paragraph">
-            Creating an account with Joyn is quick and easy, and will allow you
-            to move through our checkout quicker. You can also store multiple
-            shipping addresses, gain access to your order history, and much
-            more.
-          </p>
+export default function SignUp(props) {
+  const { handleSubmit, handleChange } = props;
+  return (
+    <form className="sign-up-form" onSubmit={handleSubmit}>
+      <div className="sign-up-form__container">
+        <h4 className="sign-up-form__header">Not registered? No problem</h4>
+        <p className="sign-up-form__paragraph">
+          Creating an account with Joyn is quick and easy, and will allow you to
+          move through our checkout quicker. You can also store multiple
+          shipping addresses, gain access to your order history, and much more.
+        </p>
+        <InputField
+          id="email"
+          labelText="Email address"
+          className="sign-up-form__text"
+          labelClass="sign-up-form__label"
+          name="signupEmail"
+          type="text"
+          onChange={handleChange}
+        />
+        <InputField
+          id="password"
+          labelText="Password"
+          labelClass="sign-up-form__label"
+          className="sign-up-form__text"
+          name="signupPassword"
+          type="text"
+          onChange={handleChange}
+        />
+        <div className="sign-up-form__submit-container">
           <InputField
-            id="email"
-            labelText="Email address"
-            className="sign-up-form__text"
-            labelClass="sign-up-form__label"
-            name="email"
-            type="text"
-            onChange={this.handleChange}
+            className="sign-up-form__submit"
+            type="submit"
+            value="Register"
           />
-          <InputField
-            id="password"
-            labelText="Password"
-            labelClass="sign-up-form__label"
-            className="sign-up-form__text"
-            name="password"
-            type="text"
-            onChange={this.handleChange}
-          />
-          <div className="sign-up-form__submit-container">
-            <InputField
-              className="sign-up-form__submit"
-              type="submit"
-              value="Register"
-            />
-          </div>
         </div>
-      </form>
-    );
-  }
+      </div>
+    </form>
+  );
 }
+
+SignUp.propTypes = {
+  handleChange: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+};