diff --git a/client/me/security-2fa-disable/index.jsx b/client/me/security-2fa-disable/index.jsx
index 005f51cec793..1adcd3d9d261 100644
--- a/client/me/security-2fa-disable/index.jsx
+++ b/client/me/security-2fa-disable/index.jsx
@@ -1,3 +1,4 @@
+import { Card } from '@automattic/components';
 import { localizeUrl } from '@automattic/i18n-utils';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
@@ -52,34 +53,36 @@ class Security2faDisable extends Component {
 		const { userSettings, translate } = this.props;
 		if ( userSettings.two_step_sms_enabled ) {
 			return (
-				<div>
-					<p>
-						{ translate(
-							"You've enabled two-step authentication. " +
-								'While enabled, logging in to WordPress.com ' +
-								'requires you to enter a unique passcode, sent via text message, ' +
-								'in addition to your username and password.'
-						) }
-					</p>
+				<Card>
+					<div>
+						<p>
+							{ translate(
+								"You've enabled two-step authentication. " +
+									'While enabled, logging in to WordPress.com ' +
+									'requires you to enter a unique passcode, sent via text message, ' +
+									'in addition to your username and password.'
+							) }
+						</p>
 
-					<p>
-						{ translate(
-							"You're all set to receive authentication codes at " +
-								'{{strong}}%(smsNumber)s{{/strong}}. ' +
-								'Want to switch to a different number? No problem! ' +
-								"You'll need to disable two-step authentication, " +
-								'then complete the setup process again on another device.',
-							{
-								components: {
-									strong: <strong />,
-								},
-								args: {
-									smsNumber: userSettings.two_step_sms_phone_number,
-								},
-							}
-						) }
-					</p>
-				</div>
+						<p>
+							{ translate(
+								"You're all set to receive authentication codes at " +
+									'{{strong}}%(smsNumber)s{{/strong}}. ' +
+									'Want to switch to a different number? No problem! ' +
+									"You'll need to disable two-step authentication, " +
+									'then complete the setup process again on another device.',
+								{
+									components: {
+										strong: <strong />,
+									},
+									args: {
+										smsNumber: userSettings.two_step_sms_phone_number,
+									},
+								}
+							) }
+						</p>
+					</div>
+				</Card>
 			);
 		}
 
diff --git a/client/me/security-2fa-initial-setup/index.jsx b/client/me/security-2fa-initial-setup/index.jsx
index 9fddbbb9663f..5f554d2f6f5a 100644
--- a/client/me/security-2fa-initial-setup/index.jsx
+++ b/client/me/security-2fa-initial-setup/index.jsx
@@ -1,107 +1,56 @@
-import { FormLabel, Gridicon } from '@automattic/components';
-import debugFactory from 'debug';
-import { localize } from 'i18n-calypso';
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import FormButton from 'calypso/components/forms/form-button';
-import FormFieldset from 'calypso/components/forms/form-fieldset';
-import FormRadio from 'calypso/components/forms/form-radio';
-import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
+import { CompactCard } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import { useCallback } from 'react';
+import VerticalNavItemEnhanced from 'calypso/components/vertical-nav/item/enhanced';
 import { gaRecordEvent } from 'calypso/lib/analytics/ga';
+import { APP_BASED_2FA_SETUP, SMS_BASED_2FA_SETUP } from 'calypso/me/security-2fa-setup';
 
 import './style.scss';
 
-const debug = debugFactory( 'calypso:me:security:2fa-initial-setup' );
-
-class Security2faInitialSetup extends Component {
-	static displayName = 'Security2faInitialSetup';
-
-	static propTypes = {
-		onSuccess: PropTypes.func.isRequired,
-	};
-
-	state = {
-		authMethod: 'app-based',
-	};
-
-	componentDidMount() {
-		debug( this.constructor.displayName + ' React component is mounted.' );
-	}
-
-	componentWillUnmount() {
-		debug( this.constructor.displayName + ' React component will unmount.' );
-	}
-
-	setAuth = ( event ) => this.setState( { authMethod: event.currentTarget.value } );
-
-	render() {
-		return (
-			<div>
-				<p>
-					{ this.props.translate(
-						'Two-Step Authentication adds an extra layer ' +
-							'of security to your account. Once enabled, logging in to ' +
-							'WordPress.com will require you to enter a unique passcode ' +
-							'generated by an app on your mobile device or sent via text ' +
-							'message, in addition to your username and password.'
-					) }
-				</p>
-
-				<FormFieldset>
-					<FormRadio
-						id="app-auth"
-						name="auth_method"
-						value="app-based"
-						defaultChecked
-						onChange={ this.setAuth }
-					/>
-					<FormLabel htmlFor="app-auth">
-						<Gridicon icon="phone" />
-						<span className="security-2fa-initial-setup__item-title">
-							{ this.props.translate( 'Set up using an app', {
-								comment: 'A label used during Two-Step setup.',
-							} ) }
-						</span>
-					</FormLabel>
-					<FormSettingExplanation>
-						{ this.props.translate(
-							'Use an application on your phone to get two-step authentication codes when you login.'
-						) }
-					</FormSettingExplanation>
-				</FormFieldset>
-				<FormFieldset>
-					<FormRadio
-						id="sms-auth"
-						name="auth_method"
-						value="sms-settings"
-						onChange={ this.setAuth }
-					/>
-					<FormLabel htmlFor="sms-auth">
-						<Gridicon icon="chat" />
-						<span className="security-2fa-initial-setup__item-title">
-							{ this.props.translate( 'Set up using SMS', {
-								comment: 'A label used during Two-Step setup.',
-							} ) }
-						</span>
-					</FormLabel>
-					<FormSettingExplanation>
-						{ this.props.translate(
-							'WordPress.com will send you an SMS with a two-step authentication code when you log in.'
-						) }
-					</FormSettingExplanation>
-				</FormFieldset>
-
-				<FormButton
-					onClick={ ( event ) => {
-						gaRecordEvent( 'Me', 'Clicked On 2fa Get Started Button' );
-						this.props.onSuccess( event, this.state.authMethod );
-					} }
-				>
-					{ this.props.translate( 'Get Started' ) }
-				</FormButton>
-			</div>
-		);
-	}
-}
-
-export default localize( Security2faInitialSetup );
+const Security2faInitialSetup = ( { onSuccess } ) => {
+	const translate = useTranslate();
+
+	const handleClick = useCallback(
+		( event, authMethod ) => {
+			gaRecordEvent( 'Me', 'Clicked On 2fa Get Started Button' );
+			onSuccess( event, authMethod );
+		},
+		[ onSuccess ]
+	);
+
+	return (
+		<>
+			<CompactCard>
+				{ translate(
+					'Two-Step Authentication adds an extra layer ' +
+						'of security to your account. Once enabled, logging in to ' +
+						'WordPress.com will require you to enter a unique passcode ' +
+						'generated by an app on your mobile device or sent via text ' +
+						'message, in addition to your username and password.'
+				) }
+			</CompactCard>
+
+			<VerticalNavItemEnhanced
+				className="security-initial-setup-nav-item"
+				gridicon="phone"
+				onClick={ ( event ) => handleClick( event, APP_BASED_2FA_SETUP ) }
+				text={ translate( 'Set up using an app' ) }
+				description={ translate(
+					'Use an application on your phone to get two-step authentication codes when you login.'
+				) }
+			/>
+
+			<VerticalNavItemEnhanced
+				className="security-initial-setup-nav-item"
+				gridicon="comment"
+				onClick={ ( event ) => handleClick( event, SMS_BASED_2FA_SETUP ) }
+				text={ translate( 'Set up using SMS' ) }
+				description={ translate(
+					'WordPress.com will send you an SMS with a two-step authentication code when you log in.'
+				) }
+			/>
+		</>
+	);
+};
+
+export default Security2faInitialSetup;
diff --git a/client/me/security-2fa-initial-setup/style.scss b/client/me/security-2fa-initial-setup/style.scss
index 0e5c4723712d..5b0bedb6b4e6 100644
--- a/client/me/security-2fa-initial-setup/style.scss
+++ b/client/me/security-2fa-initial-setup/style.scss
@@ -1,5 +1,13 @@
-.security-2fa-initial-setup__item-title {
-	margin-left: 5px;
-	font-size: $font-body;
-	vertical-align: top;
+.security-2fa-setup__steps-container {
+	.security-2fa-initial-setup__item-title {
+		margin-left: 5px;
+		font-size: $font-body;
+		vertical-align: top;
+	}
+
+	.security-initial-setup-nav-item {
+		cursor: pointer;
+	}
 }
+
+
diff --git a/client/me/security-2fa-setup/index.jsx b/client/me/security-2fa-setup/index.jsx
index fdbca0113bcc..8ce5c0f6ffbc 100644
--- a/client/me/security-2fa-setup/index.jsx
+++ b/client/me/security-2fa-setup/index.jsx
@@ -1,3 +1,4 @@
+import { Card } from '@automattic/components';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
@@ -8,6 +9,9 @@ import Security2faSetupBackupCodes from 'calypso/me/security-2fa-setup-backup-co
 import Security2faSMSSettings from 'calypso/me/security-2fa-sms-settings';
 import { successNotice } from 'calypso/state/notices/actions';
 
+export const SMS_BASED_2FA_SETUP = 'sms-settings';
+export const APP_BASED_2FA_SETUP = 'app-based';
+
 class Security2faSetup extends Component {
 	static propTypes = {
 		onFinished: PropTypes.func.isRequired,
@@ -16,7 +20,7 @@ class Security2faSetup extends Component {
 
 	state = {
 		step: 'initial-setup',
-		authMethod: 'app-based',
+		authMethod: APP_BASED_2FA_SETUP,
 	};
 
 	onCancelSetup = ( event ) => {
@@ -43,7 +47,7 @@ class Security2faSetup extends Component {
 	};
 
 	onVerifyByApp = () => {
-		this.setState( { step: 'app-based' } );
+		this.setState( { step: APP_BASED_2FA_SETUP } );
 	};
 
 	onVerifyBySMS = () => {
@@ -51,41 +55,48 @@ class Security2faSetup extends Component {
 	};
 
 	render() {
-		const isSmsFlow = [ 'sms-based', 'sms-settings' ].includes( this.state.authMethod );
-		return (
-			<div className="security-2fa-setup__steps-container">
-				{ 'initial-setup' === this.state.step ? (
+		const isSmsFlow = [ 'sms-based', SMS_BASED_2FA_SETUP ].includes( this.state.authMethod );
+
+		if ( this.state.step === 'initial-setup' ) {
+			return (
+				<div className="security-2fa-setup__steps-container">
 					<Security2faInitialSetup onSuccess={ this.onInitialSetupSuccess } />
-				) : null }
-
-				{ 'sms-settings' === this.state.step ? (
-					<Security2faSMSSettings
-						onCancel={ this.onCancelSetup }
-						onVerifyByApp={ this.onVerifyByApp }
-						onVerifyBySMS={ this.onVerifyBySMS }
-					/>
-				) : null }
-
-				{ 'app-based' === this.state.step ? (
-					<Security2faEnable
-						isSmsFlow={ false }
-						onCancel={ this.onCancelSetup }
-						onSuccess={ this.onSetupSuccess }
-					/>
-				) : null }
-
-				{ 'sms-based' === this.state.step ? (
-					<Security2faEnable
-						isSmsFlow
-						onCancel={ this.onCancelSetup }
-						onSuccess={ this.onSetupSuccess }
-					/>
-				) : null }
-
-				{ 'backup-codes' === this.state.step ? (
-					<Security2faSetupBackupCodes isSmsFlow={ isSmsFlow } onFinished={ this.onFinished } />
-				) : null }
-			</div>
+				</div>
+			);
+		}
+
+		return (
+			<Card>
+				<div className="security-2fa-setup__steps-container">
+					{ SMS_BASED_2FA_SETUP === this.state.step ? (
+						<Security2faSMSSettings
+							onCancel={ this.onCancelSetup }
+							onVerifyByApp={ this.onVerifyByApp }
+							onVerifyBySMS={ this.onVerifyBySMS }
+						/>
+					) : null }
+
+					{ APP_BASED_2FA_SETUP === this.state.step ? (
+						<Security2faEnable
+							isSmsFlow={ false }
+							onCancel={ this.onCancelSetup }
+							onSuccess={ this.onSetupSuccess }
+						/>
+					) : null }
+
+					{ 'sms-based' === this.state.step ? (
+						<Security2faEnable
+							isSmsFlow
+							onCancel={ this.onCancelSetup }
+							onSuccess={ this.onSetupSuccess }
+						/>
+					) : null }
+
+					{ 'backup-codes' === this.state.step ? (
+						<Security2faSetupBackupCodes isSmsFlow={ isSmsFlow } onFinished={ this.onFinished } />
+					) : null }
+				</div>
+			</Card>
 		);
 	}
 }
diff --git a/client/me/two-step/index.jsx b/client/me/two-step/index.jsx
index 9501e7c01eb9..b11c3a06135c 100644
--- a/client/me/two-step/index.jsx
+++ b/client/me/two-step/index.jsx
@@ -1,6 +1,5 @@
 import { isEnabled } from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
-import { Card } from '@automattic/components';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
@@ -137,8 +136,7 @@ class TwoStep extends Component {
 					</HeaderCake>
 				) }
 
-				<Card>{ this.renderTwoStepSection() }</Card>
-
+				{ this.renderTwoStepSection() }
 				{ this.renderEnhancedSecuritySetting() }
 				{ this.render2faKey() }
 				{ this.renderBackupCodes() }