diff --git a/app/stacks/OutsideStack.tsx b/app/stacks/OutsideStack.tsx
index fb791330f..3a9f3b018 100644
--- a/app/stacks/OutsideStack.tsx
+++ b/app/stacks/OutsideStack.tsx
@@ -28,7 +28,7 @@ const _OutsideStack = () => {
 			<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} options={ForgotPasswordView.navigationOptions} />
 			<Outside.Screen name='SendEmailConfirmationView' component={SendEmailConfirmationView} />
 			<Outside.Screen name='RegisterView' component={RegisterView} options={RegisterView.navigationOptions} />
-			<Outside.Screen name='LegalView' component={LegalView} options={LegalView.navigationOptions} />
+			<Outside.Screen name='LegalView' component={LegalView} />
 		</Outside.Navigator>
 	);
 };
diff --git a/app/views/LegalView.tsx b/app/views/LegalView.tsx
index 3efce1973..c4ef9f66a 100644
--- a/app/views/LegalView.tsx
+++ b/app/views/LegalView.tsx
@@ -1,62 +1,60 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { StackNavigationOptions } from '@react-navigation/stack';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
 import openLink from '../utils/openLink';
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
+import { OutsideParamList } from '../stacks/types';
+import { IBaseScreen, IApplicationState } from '../definitions';
 
-interface ILegalView {
+interface ILegalViewProps extends IBaseScreen<OutsideParamList, 'LegalView'> {
 	server: string;
-	theme: TSupportedThemes;
 }
 
-class LegalView extends React.Component<ILegalView, any> {
-	static navigationOptions = (): StackNavigationOptions => ({
-		title: I18n.t('Legal')
-	});
+const LegalView = ({ navigation }: ILegalViewProps): React.ReactElement => {
+	const server = useSelector((state: IApplicationState) => state.server.server);
+	const { theme } = useTheme();
 
-	onPressItem = ({ route }: { route: string }) => {
-		const { server, theme } = this.props;
+	useEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Legal')
+		});
+	}, []);
+
+	const onPressItem = ({ route }: { route: string }) => {
 		if (!server) {
 			return;
 		}
 		openLink(`${server}/${route}`, theme);
 	};
 
-	render() {
-		return (
-			<SafeAreaView testID='legal-view'>
-				<StatusBar />
-				<List.Container>
-					<List.Section>
-						<List.Separator />
-						<List.Item
-							title='Terms_of_Service'
-							onPress={() => this.onPressItem({ route: 'terms-of-service' })}
-							testID='legal-terms-button'
-							showActionIndicator
-						/>
-						<List.Separator />
-						<List.Item
-							title='Privacy_Policy'
-							onPress={() => this.onPressItem({ route: 'privacy-policy' })}
-							testID='legal-privacy-button'
-							showActionIndicator
-						/>
-						<List.Separator />
-					</List.Section>
-				</List.Container>
-			</SafeAreaView>
-		);
-	}
-}
+	return (
+		<SafeAreaView testID='legal-view'>
+			<StatusBar />
+			<List.Container>
+				<List.Section>
+					<List.Separator />
+					<List.Item
+						title='Terms_of_Service'
+						onPress={() => onPressItem({ route: 'terms-of-service' })}
+						testID='legal-terms-button'
+						showActionIndicator
+					/>
+					<List.Separator />
+					<List.Item
+						title='Privacy_Policy'
+						onPress={() => onPressItem({ route: 'privacy-policy' })}
+						testID='legal-privacy-button'
+						showActionIndicator
+					/>
+					<List.Separator />
+				</List.Section>
+			</List.Container>
+		</SafeAreaView>
+	);
+};
 
-const mapStateToProps = (state: any) => ({
-	server: state.server.server
-});
-
-export default connect(mapStateToProps)(withTheme(LegalView));
+export default LegalView;