diff --git a/src/js/components/login/AuthPage.jsx b/src/js/components/login/AuthPage.jsx
index 637d308ba..3edc6d967 100644
--- a/src/js/components/login/AuthPage.jsx
+++ b/src/js/components/login/AuthPage.jsx
@@ -3,7 +3,6 @@
 * Created by Kevin Li 10/24/16
 */
 
-import React from 'react';
 import AuthContainer from 'containers/login/AuthContainer';
 import { kGlobalConstants } from '../../GlobalConstants';
 import LoginWarningTxt from './LoginWarningTxt';
@@ -11,28 +10,28 @@ import LoginIntro from './LoginIntro';
 import TestEnvironmentBanner from '../SharedComponents/banners/TestEnvironmentBanner';
 
 
-export default class AuthPage extends React.Component {
-    render() {
-        let testBanner = null;
-        if (!kGlobalConstants.PROD) {
-            testBanner = <TestEnvironmentBanner />;
-        }
+const AuthPage = (props) => {
+    let testBanner = null;
+    if (!kGlobalConstants.PROD) {
+        testBanner = <TestEnvironmentBanner />;
+    }
 
-        return (
-            <div className="usa-da-login-page">
-                <div className="flex-wrapper">
-                    <div className="usa-da-login container-fluid">
-                        {testBanner}
-                        <div className="login-banner-wrap">
-                            <div className="usa-da-login-wrap">
-                                <LoginIntro />
-                                <AuthContainer {...this.props} />
-                            </div>
+    return (
+        <div className="usa-da-login-page">
+            <div className="flex-wrapper">
+                <div className="usa-da-login container-fluid">
+                    {testBanner}
+                    <div className="login-banner-wrap">
+                        <div className="usa-da-login-wrap">
+                            <LoginIntro />
+                            <AuthContainer {...props} />
                         </div>
-                        <LoginWarningTxt />
                     </div>
+                    <LoginWarningTxt />
                 </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default AuthPage;
diff --git a/src/js/components/login/LoginBanner.jsx b/src/js/components/login/LoginBanner.jsx
index 2113f207c..12f973408 100644
--- a/src/js/components/login/LoginBanner.jsx
+++ b/src/js/components/login/LoginBanner.jsx
@@ -3,19 +3,18 @@
 * Created by Kyle Fox 2/19/16
 */
 
-import React from 'react';
 import LoginIntro from './LoginIntro';
 import LoginContainer from '../../containers/login/LoginContainer';
 
-export default class LoginBanner extends React.Component {
-    render() {
-        return (
-            <div className="login-banner-wrap">
-                <div className="usa-da-login-wrap">
-                    <LoginIntro />
-                    <LoginContainer {...this.props} />
-                </div>
+const LoginBanner = (props) => {
+    return (
+        <div className="login-banner-wrap">
+            <div className="usa-da-login-wrap">
+                <LoginIntro />
+                <LoginContainer {...props} />
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default LoginBanner;
diff --git a/src/js/components/login/LoginCaia.jsx b/src/js/components/login/LoginCaia.jsx
index 9c2a10a32..16ac8dfbd 100644
--- a/src/js/components/login/LoginCaia.jsx
+++ b/src/js/components/login/LoginCaia.jsx
@@ -3,9 +3,8 @@
   * Createdd by Kevin Li 10/13/16
   */
 
-import React from 'react';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
 import Cookies from 'js-cookie';
 import { kGlobalConstants } from '../../GlobalConstants';
 import { getRedirectPath } from '../../helpers/loginHelper';
@@ -14,52 +13,41 @@ const propTypes = {
     location: PropTypes.object
 };
 
-const defaultProps = {
-    location: null
-};
+const LoginCaia = ({location = null}) => {
+    const [loginRedirect, setLoginRedirect] = useState('');
 
-export default class LoginCaia extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            redirect: ''
-        };
-        this.handleClick = this.handleClick.bind(this);
-    }
+    useEffect(() => {
+        detectRedirection();
+    }, []);
 
-    componentDidMount() {
-        this.detectRedirection();
-    }
+    useEffect(() => {
+        detectRedirection();
+    }, [location]);
 
-    componentDidUpdate(prevProps) {
-        if (!_.isEqual(prevProps.location, this.props.location)) {
-            this.detectRedirection();
+    useEffect(() => {
+        if(loginRedirect === '') {
+            // remove the redirect destination cookie
+            Cookies.remove('brokerRedirect');
+        }
+        else {
+            // save the redirect destination as a cookie, expire after 5 min (expressed in units of
+            // days per library documentation)
+            Cookies.set('brokerRedirect', loginRedirect, { expires: (5 / (24 * 60)) });
         }
-    }
+    }, [loginRedirect]);
 
-    detectRedirection() {
+    const detectRedirection = () => {
         // check if the URL has a redirect param, save it in the state
-        const redirectPath = getRedirectPath(this.props.location);
+        const redirectPath = getRedirectPath(location);
         if (redirectPath) {
-            this.setState({
-                redirect: redirectPath
-            }, () => {
-                // save the redirect destination as a cookie, expire after 5 min (expressed in units of
-                // days per library documentation)
-                Cookies.set('brokerRedirect', this.state.redirect, { expires: (5 / (24 * 60)) });
-            });
+            setLoginRedirect(redirectPath);
         }
         else {
-            this.setState({
-                redirect: ''
-            }, () => {
-                // remove the redirect destination cookie
-                Cookies.remove('brokerRedirect');
-            });
+            setLoginRedirect('');
         }
-    }
+    };
 
-    handleClick(e) {
+    const handleClick = (e) => {
         if (e.keyCode === '13' || !e.keyCode) {
             const scope = "openid email profile address phone";
             const url = `${kGlobalConstants.CAIA_ROOT}/as/authorization.oauth2?`
@@ -69,28 +57,26 @@ export default class LoginCaia extends React.Component {
                 + `&client_id=${encodeURIComponent(kGlobalConstants.CAIA_CLIENT)}`;
             window.location.assign(url);
         }
-    }
+    };
 
-    render() {
-        return (
-            <div className="row">
-                <div className="col-xs-12">
-                    <p className="instructions">
-                        Sign in or register for the Data Broker using your CAIA login.
-                    </p>
-                    <button
-                        className="usa-da-button btn-primary btn-lg btn-full bottom-login-button"
-                        tabIndex="0"
-                        role="link"
-                        onKeyDown={this.handleClick}
-                        onClick={this.handleClick}>
-                        Sign In Using CAIA
-                    </button>
-                </div>
+    return (
+        <div className="row">
+            <div className="col-xs-12">
+                <p className="instructions">
+                    Sign in or register for the Data Broker using your CAIA login.
+                </p>
+                <button
+                    className="usa-da-button btn-primary btn-lg btn-full bottom-login-button"
+                    tabIndex="0"
+                    role="link"
+                    onKeyDown={handleClick}
+                    onClick={handleClick}>
+                    Sign In Using CAIA
+                </button>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
 LoginCaia.propTypes = propTypes;
-LoginCaia.defaultProps = defaultProps;
+export default LoginCaia;
diff --git a/src/js/components/login/LoginCaiaErrorMessage.jsx b/src/js/components/login/LoginCaiaErrorMessage.jsx
index 4c64785a3..dee8285c5 100644
--- a/src/js/components/login/LoginCaiaErrorMessage.jsx
+++ b/src/js/components/login/LoginCaiaErrorMessage.jsx
@@ -3,7 +3,6 @@
 * Created by Nipun Monga 11/18/16
 */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -11,18 +10,17 @@ const propTypes = {
     message: PropTypes.string.isRequired
 };
 
-export default class LoginCaiaErrorMessage extends React.Component {
-    render() {
-        return (
-            <div className="alert alert-error mt-40 mb-0" role="alert">
-                <FontAwesomeIcon icon="circle-exclamation" className="exclamation-circle-icon" />
-                <div className="alert-header-text">Error</div>
-                <p data-testid="errormessage">
-                    {this.props.message} Please work with your agency to request Data Broker access through CAIA.
-                </p>
-            </div>
-        );
-    }
-}
+const LoginCaiaErrorMessage = (props) => {
+    return (
+        <div className="alert alert-error mt-40 mb-0" role="alert">
+            <FontAwesomeIcon icon="circle-exclamation" className="exclamation-circle-icon" />
+            <div className="alert-header-text">Error</div>
+            <p data-testid="errormessage">
+                {props.message} Please work with your agency to request Data Broker access through CAIA.
+            </p>
+        </div>
+    );
+};
 
 LoginCaiaErrorMessage.propTypes = propTypes;
+export default LoginCaiaErrorMessage;
diff --git a/src/js/components/login/LoginCaiaLoading.jsx b/src/js/components/login/LoginCaiaLoading.jsx
index c81bfb48b..065e6acd6 100644
--- a/src/js/components/login/LoginCaiaLoading.jsx
+++ b/src/js/components/login/LoginCaiaLoading.jsx
@@ -3,7 +3,6 @@
   * Created by Kevin Li 10/14/16
   */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 
@@ -14,46 +13,40 @@ const propTypes = {
     errorMessage: PropTypes.string
 };
 
-const defaultProps = {
-    errorMessage: ''
-};
-
-export default class LoginCaiaLoading extends React.Component {
-    render() {
-        let errorMessageComponent = null;
-        let hideLoading = '';
-        let hideError = ' hide';
+const LoginCaiaLoading = ({errorMessage = ''}) => {
+    let errorMessageComponent = null;
+    let hideLoading = '';
+    let hideError = ' hide';
 
-        if (this.props.errorMessage) {
-            errorMessageComponent = <LoginCaiaErrorMessage message={this.props.errorMessage} />;
-            hideLoading = ' hide';
-            hideError = '';
-        }
+    if (errorMessage) {
+        errorMessageComponent = <LoginCaiaErrorMessage message={errorMessage} />;
+        hideLoading = ' hide';
+        hideError = '';
+    }
 
-        return (
-            <div>
-                <div className="row">
-                    <div className={`col-md-12 login-loading${hideLoading}`}>
-                        <div className="loading-animation">
-                            <LoadingBauble />
-                        </div>
-                        <div className="loading-text">
-                            Signing into Data Broker...
-                        </div>
+    return (
+        <div>
+            <div className="row">
+                <div className={`col-md-12 login-loading${hideLoading}`}>
+                    <div className="loading-animation">
+                        <LoadingBauble />
+                    </div>
+                    <div className="loading-text">
+                        Signing into Data Broker...
                     </div>
                 </div>
-                <div className={`row${hideError}`}>
-                    <div className="col-md-12">
-                        {errorMessageComponent}
-                        <div className="back-link">
-                            <Link to="/">Back to login page</Link>
-                        </div>
+            </div>
+            <div className={`row${hideError}`}>
+                <div className="col-md-12">
+                    {errorMessageComponent}
+                    <div className="back-link">
+                        <Link to="/">Back to login page</Link>
                     </div>
                 </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
 
 LoginCaiaLoading.propTypes = propTypes;
-LoginCaiaLoading.defaultProps = defaultProps;
+export default LoginCaiaLoading;
diff --git a/src/js/components/login/LoginIntro.jsx b/src/js/components/login/LoginIntro.jsx
index 858de6843..307f47a3f 100644
--- a/src/js/components/login/LoginIntro.jsx
+++ b/src/js/components/login/LoginIntro.jsx
@@ -3,18 +3,16 @@
 * Created by Kyle Fox 12/4/15
 */
 
-import React from 'react';
+const LoginIntro = () => {
+    return (
+        <div className="login-left usa-da-page-title">
+            <div className="login-title">Data Broker</div>
+            <p>
+                Sign in to upload your agency financial data and validate it against the Governmentwide Spending
+                Data Model (GSDM), formerly known as the DATA Act Information Model Schema (DAIMS).
+            </p>
+        </div>
+    );
+};
 
-export default class LoginIntro extends React.Component {
-    render() {
-        return (
-            <div className="login-left usa-da-page-title">
-                <div className="login-title">Data Broker</div>
-                <p>
-                    Sign in to upload your agency financial data and validate it against the Governmentwide Spending
-                    Data Model (GSDM), formerly known as the DATA Act Information Model Schema (DAIMS).
-                </p>
-            </div>
-        );
-    }
-}
+export default LoginIntro;
diff --git a/src/js/components/login/LoginPage.jsx b/src/js/components/login/LoginPage.jsx
index 6cdc9e667..b68458385 100644
--- a/src/js/components/login/LoginPage.jsx
+++ b/src/js/components/login/LoginPage.jsx
@@ -3,29 +3,28 @@
 * Created by Kyle Fox 12/4/15
 */
 
-import React from 'react';
 import { kGlobalConstants } from '../../GlobalConstants';
 import LoginBanner from './LoginBanner';
 import LoginWarningTxt from './LoginWarningTxt';
 import TestEnvironmentBanner from '../SharedComponents/banners/TestEnvironmentBanner';
 
-export default class LoginPage extends React.Component {
-    render() {
-        let testBanner = null;
-        if (!kGlobalConstants.PROD) {
-            testBanner = <TestEnvironmentBanner />;
-        }
+const LoginPage = (props) => {
+    let testBanner = null;
+    if (!kGlobalConstants.PROD) {
+        testBanner = <TestEnvironmentBanner />;
+    }
 
-        return (
-            <div className="usa-da-login-page">
-                <div className="flex-wrapper">
-                    <div className="usa-da-login container-fluid">
-                        {testBanner}
-                        <LoginBanner {...this.props} />
-                        <LoginWarningTxt />
-                    </div>
+    return (
+        <div className="usa-da-login-page">
+            <div className="flex-wrapper">
+                <div className="usa-da-login container-fluid">
+                    {testBanner}
+                    <LoginBanner {...props} />
+                    <LoginWarningTxt />
                 </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default LoginPage;
diff --git a/src/js/components/login/LoginPanel.jsx b/src/js/components/login/LoginPanel.jsx
index 6b1d2c2da..b93dba7a7 100644
--- a/src/js/components/login/LoginPanel.jsx
+++ b/src/js/components/login/LoginPanel.jsx
@@ -3,7 +3,7 @@
 * Created by Kyle Fox 2/19/16
 */
 
-import React from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Username from './Username';
 import Password from './Password';
@@ -17,85 +17,58 @@ const propTypes = {
     loading: PropTypes.bool
 };
 
-const defaultProps = {
-    performLogin: null,
-    session: null,
-    errorMessage: '',
-    loading: false
-};
+const LoginPanel = ({performLogin = null, session = null, errorMessage = '', loading = false}) => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
 
-export default class LoginPanel extends React.Component {
-    constructor(props) {
-        super(props);
+    const loginClicked = () => {
+        performLogin(username, password);
+    };
 
-        this.state = {
-            username: '',
-            password: ''
-        };
-    }
+    const handleUsernameChange = (e) => {
+        setUsername(e.target.value);
+    };
 
-    loginClicked() {
-        this.props.performLogin(this.state.username, this.state.password);
-    }
-
-    handleKeyPress(e) {
-        const enterKey = 13;
-        if (e.charCode === enterKey) {
-            this.loginClicked();
-            e.preventDefault();
-        }
-    }
+    const handlePasswordChange = (e) => {
+        setPassword(e.target.value);
+    };
 
-    handleUsernameChange(e) {
-        this.setState({
-            username: e.target.value
-        });
-    }
+    let errorMessageComponent = null;
 
-    handlePasswordChange(e) {
-        this.setState({
-            password: e.target.value
-        });
+    if (session.login === "failed") {
+        errorMessageComponent = <ErrorMessage message={errorMessage} />;
     }
 
-    render() {
-        let errorMessageComponent = null;
-
-        if (this.props.session.login === "failed") {
-            errorMessageComponent = <ErrorMessage message={this.props.errorMessage} />;
-        }
-
-        return (
-            <div className="login-form-wrap">
-                <form>
-                    <div className="row">
-                        <div className="col-md-12">
-                            <Username handleChange={this.handleUsernameChange.bind(this)} tabIndex="0" />
-                        </div>
+    return (
+        <div className="login-form-wrap">
+            <form>
+                <div className="row">
+                    <div className="col-md-12">
+                        <Username handleChange={handleUsernameChange} tabIndex="0" />
                     </div>
-                    <div className="row">
-                        <div className="col-md-12">
-                            <Password handleChange={this.handlePasswordChange.bind(this)} tabIndex="0" />
-                        </div>
+                </div>
+                <div className="row">
+                    <div className="col-md-12">
+                        <Password handleChange={handlePasswordChange} tabIndex="0" />
                     </div>
-                    <div className="row">
-                        <div className="col-sm-12 col-md-offset-4 col-md-8">
-                            <SignInButton
-                                onClick={this.loginClicked.bind(this)}
-                                buttonText="Sign In"
-                                disabled={this.props.loading} />
-                        </div>
+                </div>
+                <div className="row">
+                    <div className="col-sm-12 col-md-offset-4 col-md-8">
+                        <SignInButton
+                            onClick={loginClicked}
+                            buttonText="Sign In"
+                            disabled={loading} />
                     </div>
-                    <div className="row">
-                        <div className="col-md-12">
-                            {errorMessageComponent}
-                        </div>
+                </div>
+                <div className="row">
+                    <div className="col-md-12">
+                        {errorMessageComponent}
                     </div>
-                </form>
-            </div>
-        );
-    }
-}
+                </div>
+            </form>
+        </div>
+    );
+};
 
 LoginPanel.propTypes = propTypes;
-LoginPanel.defaultProps = defaultProps;
+export default LoginPanel;
diff --git a/src/js/components/login/LoginWarningTxt.jsx b/src/js/components/login/LoginWarningTxt.jsx
index a6f6f998a..90e053734 100644
--- a/src/js/components/login/LoginWarningTxt.jsx
+++ b/src/js/components/login/LoginWarningTxt.jsx
@@ -3,34 +3,32 @@
 * Created by Destin Frasier 4/15/16
 */
 
-import React from 'react';
-
-export default class LoginWarningTxt extends React.Component {
-    render() {
-        return (
-            <div className="usa-da-warning-msg container">
-                <div className="row">
-                    <div className="col-md-12 warning-text">
-                        <p>
-                            <strong>WARNING WARNING WARNING</strong> You have accessed a U.S. Government information
-                            system, which includes (1) this computer, (2) this network, (3) all computers connected to
-                            this network, and (4) all devices and storage media attached to this network or to a
-                            computer on this network. U.S. Government information systems are provided for the
-                            processing of official U.S. Government information only. Unauthorized or improper use of
-                            this information system is prohibited and may subject you to disciplinary action, as well
-                            as civil and criminal penalties. All data contained on U.S. Government information systems
-                            is owned by the U.S. Government and may, for the purpose of protecting the rights and
-                            property of the U.S. Government, be monitored, intercepted, recorded, read, searched,
-                            copied, or captured in any manner and disclosed or used for any lawful government purpose
-                            at any time. THERE IS NO RIGHT TO PRIVACY IN THIS SYSTEM. System personnel may give to law
-                            enforcement officials any potential evidence of crime found on U.S. Government information
-                            systems. USE OF THIS SYSTEM BY ANY USER, AUTHORIZED OR UNAUTHORIZED, CONSTITUTES YOUR
-                            UNDERSTANDING AND CONSENT TO THIS MONITORING, INTERCEPTION, RECORDING, READING, COPYING, OR
-                            CAPTURING AND DISCLOSURE.
-                        </p>
-                    </div>
+const LoginWarningTxt = () => {
+    return (
+        <div className="usa-da-warning-msg container">
+            <div className="row">
+                <div className="col-md-12 warning-text">
+                    <p>
+                        <strong>WARNING WARNING WARNING</strong> You have accessed a U.S. Government information
+                        system, which includes (1) this computer, (2) this network, (3) all computers connected to
+                        this network, and (4) all devices and storage media attached to this network or to a
+                        computer on this network. U.S. Government information systems are provided for the
+                        processing of official U.S. Government information only. Unauthorized or improper use of
+                        this information system is prohibited and may subject you to disciplinary action, as well
+                        as civil and criminal penalties. All data contained on U.S. Government information systems
+                        is owned by the U.S. Government and may, for the purpose of protecting the rights and
+                        property of the U.S. Government, be monitored, intercepted, recorded, read, searched,
+                        copied, or captured in any manner and disclosed or used for any lawful government purpose
+                        at any time. THERE IS NO RIGHT TO PRIVACY IN THIS SYSTEM. System personnel may give to law
+                        enforcement officials any potential evidence of crime found on U.S. Government information
+                        systems. USE OF THIS SYSTEM BY ANY USER, AUTHORIZED OR UNAUTHORIZED, CONSTITUTES YOUR
+                        UNDERSTANDING AND CONSENT TO THIS MONITORING, INTERCEPTION, RECORDING, READING, COPYING, OR
+                        CAPTURING AND DISCLOSURE.
+                    </p>
                 </div>
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default LoginWarningTxt;
diff --git a/src/js/components/login/Password.jsx b/src/js/components/login/Password.jsx
index 7d24e6192..2e0f95ab6 100644
--- a/src/js/components/login/Password.jsx
+++ b/src/js/components/login/Password.jsx
@@ -3,7 +3,6 @@
 * Created by Kyle Fox 12/4/15
 */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -16,40 +15,32 @@ const propTypes = {
     isRequired: PropTypes.bool
 };
 
-const defaultProps = {
-    fieldID: "password",
-    error: false,
-    tabIndex: "2",
-    placeholder: "Password",
-    isRequired: true
-};
-
-export default class Password extends React.Component {
-    render() {
-        let className = '';
-        if (this.props.error) {
-            className = ' error';
-        }
-        return (
-            <div className="usa-da-input-container usa-da-input-password">
-                <label className="sr-only" htmlFor="password">Password</label>
-                <input
-                    className={`usa-da-input-with-icon${className}`}
-                    id={this.props.fieldID}
-                    name={this.props.fieldID}
-                    type="password"
-                    placeholder={this.props.placeholder}
-                    aria-describedby="password"
-                    onChange={this.props.handleChange}
-                    tabIndex={this.props.tabIndex}
-                    aria-required={this.props.isRequired} />
-                <span className="usa-da-icon">
-                    <FontAwesomeIcon icon="lock" />
-                </span>
-            </div>
-        );
+const Password = ({
+    fieldID = 'password', error = false, tabIndex = '2', placeholder = 'Password', isRequired = true, ...props
+}) => {
+    let className = '';
+    if (error) {
+        className = ' error';
     }
-}
+    return (
+        <div className="usa-da-input-container usa-da-input-password">
+            <label className="sr-only" htmlFor="password">Password</label>
+            <input
+                className={`usa-da-input-with-icon${className}`}
+                id={fieldID}
+                name={fieldID}
+                type="password"
+                placeholder={placeholder}
+                aria-describedby="password"
+                onChange={props.handleChange}
+                tabIndex={tabIndex}
+                aria-required={isRequired} />
+            <span className="usa-da-icon">
+                <FontAwesomeIcon icon="lock" />
+            </span>
+        </div>
+    );
+};
 
 Password.propTypes = propTypes;
-Password.defaultProps = defaultProps;
+export default Password;
diff --git a/src/js/components/login/PendingPage.jsx b/src/js/components/login/PendingPage.jsx
index 9ec876e51..40d915290 100644
--- a/src/js/components/login/PendingPage.jsx
+++ b/src/js/components/login/PendingPage.jsx
@@ -3,17 +3,15 @@
 * Created by Kevin Li 3/21/16
 */
 
-import React from 'react';
-
-export default class PendingPage extends React.Component {
-    render() {
-        return (
-            <div className="site_wrap usa-da-pending-page">
-                <nav className="navbar navbar-default usa-da-header" />
-                <div className="site_content pending-page">
-                    <div className="usa-da-content-dark" />
-                </div>
+const PendingPage = () => {
+    return (
+        <div className="site_wrap usa-da-pending-page">
+            <nav className="navbar navbar-default usa-da-header" />
+            <div className="site_content pending-page">
+                <div className="usa-da-content-dark" />
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
+
+export default PendingPage;
diff --git a/src/js/components/login/SignInButton.jsx b/src/js/components/login/SignInButton.jsx
index bce705b56..c61504dd8 100644
--- a/src/js/components/login/SignInButton.jsx
+++ b/src/js/components/login/SignInButton.jsx
@@ -6,7 +6,6 @@
 * Pass this function through props, calling it onClick
 */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const propTypes = {
@@ -15,28 +14,22 @@ const propTypes = {
     disabled: PropTypes.bool
 };
 
-const defaultProps = {
-    disabled: false
-};
-
-export default class SignInButton extends React.Component {
-    render() {
-        let disabled = '';
-        if (this.props.disabled) {
-            disabled = ' usa-da-btn-disabled';
-        }
-        return (
-            <button
-                className={`usa-da-button btn-primary btn-lg pull-right${disabled}`}
-                disabled={this.props.disabled}
-                type="submit"
-                onClick={this.props.onClick}
-                data-testid="signin">
-                {this.props.buttonText}
-            </button>
-        );
+const SignInButton = ({disabled = false, ...props}) => {
+    let disabledCSS = '';
+    if (disabled) {
+        disabledCSS = ' usa-da-btn-disabled';
     }
-}
+    return (
+        <button
+            className={`usa-da-button btn-primary btn-lg pull-right${disabledCSS}`}
+            disabled={disabled}
+            type="submit"
+            onClick={props.onClick}
+            data-testid="signin">
+            {props.buttonText}
+        </button>
+    );
+};
 
 SignInButton.propTypes = propTypes;
-SignInButton.defaultProps = defaultProps;
+export default SignInButton;
diff --git a/src/js/components/login/Username.jsx b/src/js/components/login/Username.jsx
index 2031e3dc0..73858ee84 100644
--- a/src/js/components/login/Username.jsx
+++ b/src/js/components/login/Username.jsx
@@ -3,7 +3,6 @@
 * Created by Kyle Fox 2/19/16
 */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -12,31 +11,25 @@ const propTypes = {
     tabIndex: PropTypes.string
 };
 
-const defaultProps = {
-    tabIndex: "1"
+const Username = ({tabIndex = '1', ...props}) => {
+    return (
+        <div className="usa-da-input-container">
+            <label className="sr-only" htmlFor="username">Email address</label>
+            <input
+                className="usa-da-input-with-icon"
+                id="username"
+                name="username"
+                type="text"
+                placeholder="Email Address"
+                aria-describedby="username"
+                onChange={props.handleChange}
+                tabIndex={tabIndex} />
+            <span className="usa-da-icon">
+                <FontAwesomeIcon icon="user" />
+            </span>
+        </div>
+    );
 };
 
-export default class Username extends React.Component {
-    render() {
-        return (
-            <div className="usa-da-input-container">
-                <label className="sr-only" htmlFor="username">Email address</label>
-                <input
-                    className="usa-da-input-with-icon"
-                    id="username"
-                    name="username"
-                    type="text"
-                    placeholder="Email Address"
-                    aria-describedby="username"
-                    onChange={this.props.handleChange}
-                    tabIndex={this.props.tabIndex} />
-                <span className="usa-da-icon">
-                    <FontAwesomeIcon icon="user" />
-                </span>
-            </div>
-        );
-    }
-}
-
-Username.defaultProps = defaultProps;
 Username.propTypes = propTypes;
+export default Username;
diff --git a/src/js/containers/login/LoginContainer.jsx b/src/js/containers/login/LoginContainer.jsx
index 544e75c98..26b31cf38 100644
--- a/src/js/containers/login/LoginContainer.jsx
+++ b/src/js/containers/login/LoginContainer.jsx
@@ -3,7 +3,7 @@
 * Created by Kevin Li 3/17/16
 */
 
-import React from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -21,24 +21,12 @@ const propTypes = {
     location: PropTypes.object
 };
 
-const defaultProps = {
-    location: {}
-};
-
-class LoginContainer extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            loading: false,
-            errorMessage: ''
-        };
-    }
+const LoginContainer = (props) => {
+    const [loading, setLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
 
-    performLogin(username, password) {
-        this.setState({
-            loading: true
-        });
+    const performLogin = (username, password) => {
+        setLoading(true);
 
         LoginHelper.performLogin(username, password)
             .then((loginRes) => {
@@ -46,7 +34,7 @@ class LoginContainer extends React.Component {
 
                 if (!Cookies.get('session')) {
                     // couldn't set cookie, fail this request and notify the user
-                    this.props.setLoginState('failed');
+                    props.setLoginState('failed');
                     return Promise.reject('cookie');
                 }
 
@@ -55,11 +43,11 @@ class LoginContainer extends React.Component {
             .catch((err) => {
                 // if the endpoint that failed was the login
                 if (err.request?.responseURL.includes('login')) {
-                    this.props.setLoginState('failed');
+                    props.setLoginState('failed');
                 }
                 // if the endpoint that failed was the active user check
                 if (err.request?.responseURL.includes('active_user')) {
-                    this.props.setLoggedOut();
+                    props.setLoggedOut();
                 }
 
                 // unset the login state cookie
@@ -67,45 +55,38 @@ class LoginContainer extends React.Component {
 
                 // if there was a cookie issue, we have to specify it, otherwise just show the error
                 if (err === "cookie") {
-                    this.props.setLoginState('failed');
-                    this.setState({
-                        loading: false,
-                        errorMessage: 'Your browser does not support cookies, which Data Broker requires ' +
-                            'to function correctly. Try changing your browser settings to enable cookies or use a ' +
-                            'different browser.'
-                    });
+                    props.setLoginState('failed');
+                    setLoading(false);
+                    setErrorMessage('Your browser does not support cookies, which Data Broker requires to function ' +
+                        'correctly. Try changing your browser settings to enable cookies or use a different browser.'
+                    );
                 }
                 else {
-                    this.setState({
-                        loading: false,
-                        errorMessage: err.response.data.message
-                    });
+                    setLoading(false);
+                    setLoading(err.response.data.message);
                 }
             });
-    }
+    };
+
+    let login = <LoginCaia {...props} />;
 
-    render() {
-        let login = <LoginCaia {...this.props} />;
-
-        if (kGlobalConstants.LOCAL) {
-            login = (<LoginPanel
-                {...this.props}
-                performLogin={this.performLogin.bind(this)}
-                loading={this.state.loading}
-                errorMessage={this.state.errorMessage} />);
-        }
-
-        return (
-            <div className="login-right usa-da-login-container">
-                <Banner type="login" />
-                {login}
-            </div>
-        );
+    if (kGlobalConstants.LOCAL) {
+        login = (<LoginPanel
+            {...props}
+            performLogin={performLogin}
+            loading={loading}
+            errorMessage={errorMessage} />);
     }
-}
+
+    return (
+        <div className="login-right usa-da-login-container">
+            <Banner type="login" />
+            {login}
+        </div>
+    );
+};
 
 LoginContainer.propTypes = propTypes;
-LoginContainer.defaultProps = defaultProps;
 
 export default connect(
     (state) => ({ session: state.session }),