diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index e8eaced6f8..4b392473c8 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect, useSelector } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { Helmet } from 'react-helmet';
-import { useTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { withRouter, browserHistory } from 'react-router';
 import { parse } from 'query-string';
 import { createApiKey, removeApiKey } from '../actions';
@@ -45,107 +44,85 @@ function SocialLoginPanel() {
   );
 }
 
-class AccountView extends React.Component {
-  componentDidMount() {
-    document.body.className = this.props.theme;
-  }
+function AccountView({ location }) {
+  const { t } = useTranslation();
 
-  render() {
-    const queryParams = parse(this.props.location.search);
-    const showError = !!queryParams.error;
-    const errorType = queryParams.error;
-    const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
+  const queryParams = parse(location.search);
+  const showError = !!queryParams.error;
+  const errorType = queryParams.error;
+  const accessTokensUIEnabled = window.process.env.UI_ACCESS_TOKEN_ENABLED;
 
-    return (
-      <div className="account-settings__container">
-        <Helmet>
-          <title>{this.props.t('AccountView.Title')}</title>
-        </Helmet>
-        <Toast />
+  const apiKeys = useSelector((state) => state.user.apiKeys);
+  const dispatch = useDispatch();
 
-        <Nav layout="dashboard" />
+  return (
+    <div className="account-settings__container">
+      <Helmet>
+        <title>{t('AccountView.Title')}</title>
+      </Helmet>
+      <Toast />
 
-        {showError && (
-          <Overlay
-            title={this.props.t('ErrorModal.LinkTitle')}
-            ariaLabel={this.props.t('ErrorModal.LinkTitle')}
-            closeOverlay={() => {
-              browserHistory.push(this.props.location.pathname);
-            }}
-          >
-            <ErrorModal type="oauthError" service={errorType} />
-          </Overlay>
-        )}
+      <Nav layout="dashboard" />
 
-        <main className="account-settings">
-          <header className="account-settings__header">
-            <h1 className="account-settings__title">
-              {this.props.t('AccountView.Settings')}
-            </h1>
-          </header>
-          {accessTokensUIEnabled && (
-            <Tabs className="account__tabs">
-              <TabList>
-                <div className="tabs__titles">
+      {showError && (
+        <Overlay
+          title={t('ErrorModal.LinkTitle')}
+          ariaLabel={t('ErrorModal.LinkTitle')}
+          closeOverlay={() => {
+            browserHistory.push(location.pathname);
+          }}
+        >
+          <ErrorModal type="oauthError" service={errorType} />
+        </Overlay>
+      )}
+
+      <main className="account-settings">
+        <header className="account-settings__header">
+          <h1 className="account-settings__title">
+            {t('AccountView.Settings')}
+          </h1>
+        </header>
+        {accessTokensUIEnabled && (
+          <Tabs className="account__tabs">
+            <TabList>
+              <div className="tabs__titles">
+                <Tab>
+                  <h4 className="tabs__title">{t('AccountView.AccountTab')}</h4>
+                </Tab>
+                {accessTokensUIEnabled && (
                   <Tab>
                     <h4 className="tabs__title">
-                      {this.props.t('AccountView.AccountTab')}
+                      {t('AccountView.AccessTokensTab')}
                     </h4>
                   </Tab>
-                  {accessTokensUIEnabled && (
-                    <Tab>
-                      <h4 className="tabs__title">
-                        {this.props.t('AccountView.AccessTokensTab')}
-                      </h4>
-                    </Tab>
-                  )}
-                </div>
-              </TabList>
-              <TabPanel>
-                <SocialLoginPanel />
-              </TabPanel>
-              <TabPanel>
-                <APIKeyForm {...this.props} />
-              </TabPanel>
-            </Tabs>
-          )}
-          {!accessTokensUIEnabled && <SocialLoginPanel />}
-        </main>
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    initialValues: state.user, // <- initialValues for reduxForm
-    previousPath: state.ide.previousPath,
-    user: state.user,
-    apiKeys: state.user.apiKeys,
-    theme: state.preferences.theme
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(
-    {
-      createApiKey,
-      removeApiKey
-    },
-    dispatch
+                )}
+              </div>
+            </TabList>
+            <TabPanel>
+              <SocialLoginPanel />
+            </TabPanel>
+            <TabPanel>
+              <APIKeyForm
+                // TODO: it makes more sense to connect the APIKeyForm component directly -Linda
+                apiKeys={apiKeys}
+                createApiKey={() => dispatch(createApiKey)}
+                removeApiKey={() => dispatch(removeApiKey)}
+                t={t}
+              />
+            </TabPanel>
+          </Tabs>
+        )}
+        {!accessTokensUIEnabled && <SocialLoginPanel />}
+      </main>
+    </div>
   );
 }
 
 AccountView.propTypes = {
-  previousPath: PropTypes.string.isRequired,
-  theme: PropTypes.string.isRequired,
-  t: PropTypes.func.isRequired,
   location: PropTypes.shape({
     search: PropTypes.string.isRequired,
     pathname: PropTypes.string.isRequired
   }).isRequired
 };
 
-export default withTranslation()(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(AccountView))
-);
+export default withRouter(AccountView);
diff --git a/client/modules/User/pages/CollectionView.jsx b/client/modules/User/pages/CollectionView.jsx
index 9df16e4950..64ccc001a9 100644
--- a/client/modules/User/pages/CollectionView.jsx
+++ b/client/modules/User/pages/CollectionView.jsx
@@ -14,10 +14,6 @@ class CollectionView extends React.Component {
     user: null
   };
 
-  componentDidMount() {
-    document.body.className = this.props.theme;
-  }
-
   ownerName() {
     if (this.props.params.username) {
       return this.props.params.username;
@@ -69,8 +65,7 @@ class CollectionView extends React.Component {
 
 function mapStateToProps(state) {
   return {
-    user: state.user,
-    theme: state.preferences.theme
+    user: state.user
   };
 }
 
@@ -86,7 +81,6 @@ CollectionView.propTypes = {
     collection_id: PropTypes.string.isRequired,
     username: PropTypes.string.isRequired
   }).isRequired,
-  theme: PropTypes.string.isRequired,
   user: PropTypes.shape({
     username: PropTypes.string
   }),
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index 38958b2335..b2dab45229 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -39,10 +39,6 @@ class DashboardView extends React.Component {
     };
   }
 
-  componentDidMount() {
-    document.body.className = this.props.theme;
-  }
-
   closeAccountPage() {
     browserHistory.push(this.props.previousPath);
   }
@@ -174,8 +170,7 @@ class DashboardView extends React.Component {
 function mapStateToProps(state) {
   return {
     previousPath: state.ide.previousPath,
-    user: state.user,
-    theme: state.preferences.theme
+    user: state.user
   };
 }
 
@@ -192,7 +187,6 @@ DashboardView.propTypes = {
     username: PropTypes.string.isRequired
   }).isRequired,
   previousPath: PropTypes.string.isRequired,
-  theme: PropTypes.string.isRequired,
   user: PropTypes.shape({
     username: PropTypes.string
   }),