diff --git a/ui/component/settingAccount/index.js b/ui/component/settingAccount/index.js
new file mode 100644
index 000000000..9abbe808b
--- /dev/null
+++ b/ui/component/settingAccount/index.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import SettingAccount from './view';
+
+const select = (state) => ({
+  isAuthenticated: selectUserVerifiedEmail(state),
+  walletEncrypted: selectWalletIsEncrypted(state),
+});
+
+const perform = (dispatch) => ({
+  doWalletStatus: () => dispatch(doWalletStatus()),
+});
+
+export default connect(select, perform)(SettingAccount);
diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx
new file mode 100644
index 000000000..4097b532d
--- /dev/null
+++ b/ui/component/settingAccount/view.jsx
@@ -0,0 +1,55 @@
+// @flow
+import React from 'react';
+import Card from 'component/common/card';
+import SettingAccountPassword from 'component/settingAccountPassword';
+import SyncToggle from 'component/syncToggle';
+import { getPasswordFromCookie } from 'util/saved-passwords';
+
+type Props = {
+  // --- select ---
+  isAuthenticated: boolean,
+  walletEncrypted: boolean,
+  // --- perform ---
+  doWalletStatus: () => void,
+};
+
+export default function SettingAccount(props: Props) {
+  const { isAuthenticated, walletEncrypted, doWalletStatus } = props;
+  const [storedPassword, setStoredPassword] = React.useState(false);
+
+  // Determine if password is stored.
+  React.useEffect(() => {
+    if (isAuthenticated || !IS_WEB) {
+      doWalletStatus();
+      getPasswordFromCookie().then((p) => {
+        if (typeof p === 'string') {
+          setStoredPassword(true);
+        }
+      });
+    }
+    // enterSettings(); @KP need to do this at each component, or just at Settings Page?
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Card
+      title={__('Account')}
+      subtitle=""
+      isBodyList
+      body={
+        <>
+          {isAuthenticated && (
+            <div className="card__main-actions">
+              <SettingAccountPassword />
+            </div>
+          )}
+
+          {/* @if TARGET='app' */}
+          <div className="card__main-actions">
+            <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
+          </div>
+          {/* @endif */}
+        </>
+      }
+    />
+  );
+}
diff --git a/ui/component/settingAccountPassword/view.jsx b/ui/component/settingAccountPassword/view.jsx
index a63dff59a..494d078e6 100644
--- a/ui/component/settingAccountPassword/view.jsx
+++ b/ui/component/settingAccountPassword/view.jsx
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ErrorText from 'component/common/error-text';
-import Card from 'component/common/card';
 import * as PAGES from 'constants/pages';
 
 type Props = {
@@ -38,54 +37,52 @@ export default function SettingAccountPassword(props: Props) {
     }
   }, [passwordSetSuccess, setOldPassword, setNewPassword, doClearPasswordEntry, doToast]);
 
-  return (
-    <Card
-      title={__('Account password')}
-      subtitle={hasPassword ? '' : __('You do not currently have a password set.')}
-      actions={
-        isAddingPassword ? (
-          <div>
-            <Form onSubmit={handleSubmit} className="section">
-              {hasPassword && (
-                <FormField
-                  type="password"
-                  name="setting_set_old_password"
-                  label={__('Old Password')}
-                  value={oldPassword}
-                  onChange={e => setOldPassword(e.target.value)}
-                />
-              )}
-              <FormField
-                type="password"
-                name="setting_set_new_password"
-                label={__('New Password')}
-                value={newPassword}
-                onChange={e => setNewPassword(e.target.value)}
-              />
-
-              <div className="section__actions">
-                <Button button="primary" type="submit" label={__('Set Password')} disabled={!newPassword} />
-                {hasPassword ? (
-                  <Button button="link" label={__('Forgot Password?')} navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}`} />
-                ) : (
-                  <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
-                )}
-              </div>
-            </Form>
-            {passwordSetError && (
-              <div className="section">
-                <ErrorText>{passwordSetError}</ErrorText>
-              </div>
-            )}
-          </div>
-        ) : (
-          <Button
-            button="primary"
-            label={hasPassword ? __('Update Your Password') : __('Add A Password')}
-            onClick={() => setIsAddingPassword(true)}
+  return isAddingPassword ? (
+    <div>
+      <Form onSubmit={handleSubmit} className="section">
+        {hasPassword && (
+          <FormField
+            type="password"
+            name="setting_set_old_password"
+            label={__('Old Password')}
+            value={oldPassword}
+            onChange={(e) => setOldPassword(e.target.value)}
           />
-        )
-      }
-    />
+        )}
+        <FormField
+          type="password"
+          name="setting_set_new_password"
+          label={__('New Password')}
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+        />
+
+        <div className="section__actions">
+          <Button button="primary" type="submit" label={__('Set Password')} disabled={!newPassword} />
+          {hasPassword ? (
+            <Button button="link" label={__('Forgot Password?')} navigate={`/$/${PAGES.AUTH_PASSWORD_RESET}`} />
+          ) : (
+            <Button button="link" label={__('Cancel')} onClick={() => setIsAddingPassword(false)} />
+          )}
+        </div>
+      </Form>
+      {passwordSetError && (
+        <div className="section">
+          <ErrorText>{passwordSetError}</ErrorText>
+        </div>
+      )}
+    </div>
+  ) : (
+    <div className="section__actions--between">
+      <div>
+        <p>{__('Password')}</p>
+        {!hasPassword && <p className="help">{__('You do not currently have a password set.')}</p>}
+      </div>
+      <Button
+        button="primary"
+        label={hasPassword ? __('Update Your Password') : __('Add A Password')}
+        onClick={() => setIsAddingPassword(true)}
+      />
+    </div>
   );
 }
diff --git a/ui/component/syncToggle/view.jsx b/ui/component/syncToggle/view.jsx
index 2a885ecf3..e6a702947 100644
--- a/ui/component/syncToggle/view.jsx
+++ b/ui/component/syncToggle/view.jsx
@@ -6,10 +6,10 @@ import { withRouter } from 'react-router';
 import { FormField } from 'component/common/form';
 
 type Props = {
-  setSyncEnabled: boolean => void,
+  setSyncEnabled: (boolean) => void,
   syncEnabled: boolean,
   verifiedEmail: ?string,
-  history: { push: string => void },
+  history: { push: (string) => void },
   location: UrlLocation,
   getSyncError: ?string,
   disabled: boolean,
@@ -21,20 +21,24 @@ function SyncToggle(props: Props) {
 
   return (
     <div>
-      {!verifiedEmail ? (
+      <FormField
+        type="checkbox"
+        name="sync_toggle"
+        label={__('Sync your balance and preferences across devices.')}
+        checked={syncEnabled && verifiedEmail}
+        onChange={() => openModal(MODALS.SYNC_ENABLE, { mode: syncEnabled ? 'disable' : 'enable' })}
+        disabled={disabled || !verifiedEmail}
+        helper={
+          disabled
+            ? __("To enable Sync, close LBRY completely and check 'Remember Password' during wallet unlock.")
+            : null
+        }
+      />
+      {!verifiedEmail && (
         <div>
-          <Button requiresAuth button="primary" label={__('Add Email')} />
           <p className="help">{__('An email address is required to sync your account.')}</p>
+          <Button requiresAuth button="primary" label={__('Add Email')} />
         </div>
-      ) : (
-        <FormField
-          type="checkbox"
-          name="sync_toggle"
-          label={__('Sync your balance and preferences across devices.')}
-          checked={syncEnabled}
-          onChange={() => openModal(MODALS.SYNC_ENABLE, { mode: syncEnabled ? 'disable' : 'enable' })}
-          disabled={disabled}
-        />
       )}
     </div>
   );
diff --git a/ui/page/settings/index.js b/ui/page/settings/index.js
index c9292b3cf..6db459061 100644
--- a/ui/page/settings/index.js
+++ b/ui/page/settings/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doClearCache, doNotifyForgetPassword, doToggle3PAnalytics, doOpenModal } from 'redux/actions/app';
+import { doClearCache, doToggle3PAnalytics, doOpenModal } from 'redux/actions/app';
 import { selectAllowAnalytics } from 'redux/selectors/app';
 import {
   doSetDaemonSetting,
@@ -16,7 +16,7 @@ import {
   selectLanguage,
   selectShowMatureContent,
 } from 'redux/selectors/settings';
-import { doWalletStatus, selectMyChannelUrls, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
+import { selectMyChannelUrls, SETTINGS } from 'lbry-redux';
 import SettingsPage from './view';
 import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
 
@@ -30,7 +30,6 @@ const select = (state) => ({
   automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state),
   clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
   autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
-  walletEncrypted: selectWalletIsEncrypted(state),
   autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
   floatingPlayer: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
@@ -47,8 +46,6 @@ const perform = (dispatch) => ({
   toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
   clearCache: () => dispatch(doClearCache()),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
-  updateWalletStatus: () => dispatch(doWalletStatus()),
-  confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
   setDarkTime: (time, options) => dispatch(doSetDarkTime(time, options)),
   openModal: (id, params) => dispatch(doOpenModal(id, params)),
diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx
index 60d29d385..79f9a0f40 100644
--- a/ui/page/settings/view.jsx
+++ b/ui/page/settings/view.jsx
@@ -7,14 +7,12 @@ import { SETTINGS } from 'lbry-redux';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import Page from 'component/page';
+import SettingAccount from 'component/settingAccount';
 import SettingLanguage from 'component/settingLanguage';
 import FileSelector from 'component/common/file-selector';
-import SyncToggle from 'component/syncToggle';
 import HomepageSelector from 'component/homepageSelector';
 import Card from 'component/common/card';
-import SettingAccountPassword from 'component/settingAccountPassword';
 import classnames from 'classnames';
-import { getPasswordFromCookie } from 'util/saved-passwords';
 import { SIMPLE_SITE } from 'config';
 // $FlowFixMe
 import homepages from 'homepages';
@@ -61,9 +59,6 @@ type Props = {
   automaticDarkModeEnabled: boolean,
   clock24h: boolean,
   autoplay: boolean,
-  updateWalletStatus: () => void,
-  walletEncrypted: boolean,
-  confirmForgetPassword: ({}) => void,
   floatingPlayer: boolean,
   hideReposts: ?boolean,
   clearPlayingUri: () => void,
@@ -79,7 +74,6 @@ type Props = {
 
 type State = {
   clearingCache: boolean,
-  storedPassword: boolean,
 };
 
 class SettingsPage extends React.PureComponent<Props, State> {
@@ -88,26 +82,15 @@ class SettingsPage extends React.PureComponent<Props, State> {
 
     this.state = {
       clearingCache: false,
-      storedPassword: false,
     };
 
     (this: any).onThemeChange = this.onThemeChange.bind(this);
     (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
     (this: any).onChangeTime = this.onChangeTime.bind(this);
-    (this: any).onConfirmForgetPassword = this.onConfirmForgetPassword.bind(this);
   }
 
   componentDidMount() {
-    const { isAuthenticated, enterSettings } = this.props;
-
-    if (isAuthenticated || !IS_WEB) {
-      this.props.updateWalletStatus();
-      getPasswordFromCookie().then((p) => {
-        if (typeof p === 'string') {
-          this.setState({ storedPassword: true });
-        }
-      });
-    }
+    const { enterSettings } = this.props;
     enterSettings();
   }
 
@@ -134,15 +117,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
     this.props.setClientSetting(SETTINGS.CLOCK_24H, value);
   }
 
-  onConfirmForgetPassword() {
-    const { confirmForgetPassword } = this.props;
-    confirmForgetPassword({
-      callback: () => {
-        this.setState({ storedPassword: false });
-      },
-    });
-  }
-
   onChangeTime(event: SyntheticInputEvent<*>, options: OptionTimes) {
     const { value } = event.target;
 
@@ -180,7 +154,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
       automaticDarkModeEnabled,
       clock24h,
       autoplay,
-      walletEncrypted,
       // autoDownload,
       setDaemonSetting,
       setClientSetting,
@@ -194,12 +167,17 @@ class SettingsPage extends React.PureComponent<Props, State> {
       myChannelUrls,
       user,
     } = this.props;
-    const { storedPassword } = this.state;
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
     const startHours = ['18', '19', '20', '21'];
     const endHours = ['5', '6', '7', '8'];
 
-    return (
+    const newStyle = true;
+
+    return newStyle ? (
+      <Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
+        <SettingAccount />
+      </Page>
+    ) : (
       <Page
         noFooter
         noSideNavigation
@@ -235,7 +213,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
           </section>
         ) : (
           <div className={classnames('card-stack', { 'card--disabled': IS_WEB && !isAuthenticated })}>
-            {isAuthenticated && <SettingAccountPassword />}
             {/* @if TARGET='app' */}
             <Card
               title={__('Download directory')}
@@ -252,15 +229,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 </React.Fragment>
               }
             />
-            <Card
-              title={__('Sync')}
-              subtitle={
-                walletEncrypted && !storedPassword && storedPassword !== ''
-                  ? __("To enable Sync, close LBRY completely and check 'Remember Password' during wallet unlock.")
-                  : null
-              }
-              actions={<SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />}
-            />
             {/* @endif */}
 
             <Card