diff --git a/app/containers/HeaderButton/Common.tsx b/app/containers/HeaderButton/Common.tsx
index 82006f9ef..b9645dcbd 100644
--- a/app/containers/HeaderButton/Common.tsx
+++ b/app/containers/HeaderButton/Common.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { StackActions, useNavigation } from '@react-navigation/native';
 
-import { isIOS } from '../../lib/methods/helpers';
 import I18n from '../../i18n';
+import { isIOS } from '../../lib/methods/helpers';
 import Container from './HeaderButtonContainer';
 import Item, { IHeaderButtonItem } from './HeaderButtonItem';
 
@@ -18,13 +19,22 @@ export const Drawer = React.memo(
 	)
 );
 
-export const CloseModal = React.memo(
-	({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => (
+export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => {
+	const { dispatch } = useNavigation();
+	return (
 		<Container left>
-			<Item iconName='close' onPress={onPress} testID={testID} {...props} />
+			<Item
+				iconName='close'
+				onPress={arg => {
+					if (onPress) return onPress(arg);
+					dispatch(StackActions.pop());
+				}}
+				testID={testID}
+				{...props}
+			/>
 		</Container>
-	)
-);
+	);
+});
 
 export const CancelModal = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
 	<Container left>
diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx
index 5243af2ac..1fd04eb36 100644
--- a/app/containers/markdown/index.tsx
+++ b/app/containers/markdown/index.tsx
@@ -22,14 +22,14 @@ import { formatText } from './formatText';
 import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { formatHyperlink } from './formatHyperlink';
-import { TSupportedThemes } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import { themes } from '../../lib/constants';
 
 export { default as MarkdownPreview } from './Preview';
 
 interface IMarkdownProps {
 	msg?: string | null;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	md?: MarkdownAST;
 	mentions?: IUserMention[];
 	getCustomEmoji?: TGetCustomEmoji;
@@ -158,9 +158,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 				style={[
 					{
 						...styles.codeInline,
-						color: themes[theme].bodyText,
-						backgroundColor: themes[theme].bannerBackground,
-						borderColor: themes[theme].bannerBackground
+						color: themes[theme!].bodyText,
+						backgroundColor: themes[theme!].bannerBackground,
+						borderColor: themes[theme!].bannerBackground
 					},
 					...style
 				]}
@@ -177,9 +177,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 				style={[
 					{
 						...styles.codeBlock,
-						color: themes[theme].bodyText,
-						backgroundColor: themes[theme].bannerBackground,
-						borderColor: themes[theme].bannerBackground
+						color: themes[theme!].bodyText,
+						backgroundColor: themes[theme!].bannerBackground,
+						borderColor: themes[theme!].bannerBackground
 					},
 					...style
 				]}
@@ -200,7 +200,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 			return null;
 		}
 		return (
-			<Text style={[styles.text, style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
+			<Text style={[styles.text, style, { color: themes[theme!].bodyText }]} numberOfLines={numberOfLines}>
 				{children}
 			</Text>
 		);
@@ -209,7 +209,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	renderLink = ({ children, href }: any) => {
 		const { theme, onLinkPress } = this.props;
 		return (
-			<MarkdownLink link={href} theme={theme} onLinkPress={onLinkPress}>
+			<MarkdownLink link={href} theme={theme!} onLinkPress={onLinkPress}>
 				{children}
 			</MarkdownLink>
 		);
@@ -261,7 +261,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 		// @ts-ignore
 		const textStyle = styles[`heading${level}Text`];
 		return (
-			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}>
+			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].bodyText }]}>
 				{children}
 			</Text>
 		);
@@ -289,13 +289,13 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 
 	renderBlockQuote = ({ children }: { children: JSX.Element }) => {
 		const { theme } = this.props;
-		return <MarkdownBlockQuote theme={theme}>{children}</MarkdownBlockQuote>;
+		return <MarkdownBlockQuote theme={theme!}>{children}</MarkdownBlockQuote>;
 	};
 
 	renderTable = ({ children, numColumns }: { children: JSX.Element; numColumns: number }) => {
 		const { theme } = this.props;
 		return (
-			<MarkdownTable numColumns={numColumns} theme={theme}>
+			<MarkdownTable numColumns={numColumns} theme={theme!}>
 				{children}
 			</MarkdownTable>
 		);
@@ -354,4 +354,4 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	}
 }
 
-export default Markdown;
+export default withTheme(Markdown);
diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index 982ee4d4d..5c077081c 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -282,11 +282,7 @@ const E2ESaveYourPasswordStackNavigator = () => {
 				component={E2ESaveYourPasswordView}
 				options={E2ESaveYourPasswordView.navigationOptions}
 			/>
-			<E2ESaveYourPasswordStack.Screen
-				name='E2EHowItWorksView'
-				component={E2EHowItWorksView}
-				options={E2EHowItWorksView.navigationOptions}
-			/>
+			<E2ESaveYourPasswordStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
 		</E2ESaveYourPasswordStack.Navigator>
 	);
 };
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index ec385a649..c740c781f 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -200,7 +200,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					component={E2ESaveYourPasswordView}
 					options={E2ESaveYourPasswordView.navigationOptions}
 				/>
-				<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} options={E2EHowItWorksView.navigationOptions} />
+				<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
 				<ModalStack.Screen
 					name='E2EEnterYourPasswordView'
 					component={E2EEnterYourPasswordView}
diff --git a/app/views/E2EHowItWorksView.tsx b/app/views/E2EHowItWorksView.tsx
index 540664b9f..5fc469779 100644
--- a/app/views/E2EHowItWorksView.tsx
+++ b/app/views/E2EHowItWorksView.tsx
@@ -1,20 +1,18 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 
-import SafeAreaView from '../containers/SafeAreaView';
-import { themes } from '../lib/constants';
 import * as HeaderButton from '../containers/HeaderButton';
 import Markdown from '../containers/markdown';
-import { withTheme } from '../theme';
+import SafeAreaView from '../containers/SafeAreaView';
 import I18n from '../i18n';
 import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
-import { IBaseScreen } from '../definitions';
+import { useTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		padding: 44,
-		paddingTop: 32
+		padding: 16
 	},
 	info: {
 		fontSize: 14,
@@ -22,31 +20,28 @@ const styles = StyleSheet.create({
 	}
 });
 
-type TE2EHowItWorksViewProps = IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
+const E2EHowItWorksView = (): React.ReactElement => {
+	const { setOptions } = useNavigation();
+	const { colors } = useTheme();
+	const { params } = useRoute<RouteProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>>();
 
-class E2EHowItWorksView extends React.Component<TE2EHowItWorksViewProps, any> {
-	static navigationOptions = ({ route, navigation }: Pick<TE2EHowItWorksViewProps, 'navigation' | 'route'>) => {
-		const showCloseModal = route.params?.showCloseModal;
-		return {
+	useEffect(() => {
+		setOptions({
 			title: I18n.t('How_It_Works'),
-			headerLeft: showCloseModal ? () => <HeaderButton.CloseModal navigation={navigation} /> : undefined
-		};
-	};
+			headerLeft: params?.showCloseModal ? () => <HeaderButton.CloseModal /> : undefined
+		});
+	}, []);
 
-	render() {
-		const { theme } = this.props;
+	const infoStyle = [styles.info, { color: colors.bodyText }];
 
-		const infoStyle = [styles.info, { color: themes[theme].bodyText }];
+	return (
+		<SafeAreaView style={[styles.container, { backgroundColor: colors.backgroundColor }]} testID='e2e-how-it-works-view'>
+			<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} />
+			<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} />
+			<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} />
+			<Markdown msg={I18n.t('E2E_How_It_Works_info4')} style={infoStyle} />
+		</SafeAreaView>
+	);
+};
 
-		return (
-			<SafeAreaView style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} testID='e2e-how-it-works-view'>
-				<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} theme={theme} />
-				<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} theme={theme} />
-				<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} theme={theme} />
-				<Markdown msg={I18n.t('E2E_How_It_Works_info4')} style={infoStyle} theme={theme} />
-			</SafeAreaView>
-		);
-	}
-}
-
-export default withTheme(E2EHowItWorksView);
+export default E2EHowItWorksView;