diff --git a/native/account/registration/connect-farcaster.react.js b/native/account/registration/connect-farcaster.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/connect-farcaster.react.js
@@ -0,0 +1,81 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import RegistrationButtonContainer from './registration-button-container.react.js';
+import RegistrationButton from './registration-button.react.js';
+import RegistrationContainer from './registration-container.react.js';
+import RegistrationContentContainer from './registration-content-container.react.js';
+import { RegistrationContext } from './registration-context.js';
+import type { RegistrationNavigationProp } from './registration-navigator.react.js';
+import type {
+  CoolOrNerdMode,
+  EthereumAccountSelection,
+} from './registration-types.js';
+import FarcasterPrompt from '../../components/farcaster-prompt.react.js';
+import FarcasterWebView from '../../components/farcaster-web-view.react.js';
+import type { FarcasterWebViewState } from '../../components/farcaster-web-view.react.js';
+import { type NavigationRoute } from '../../navigation/route-names.js';
+
+export type ConnectFarcasterParams = {
+  +userSelections: {
+    +coolOrNerdMode: CoolOrNerdMode,
+    +keyserverURL: string,
+    +ethereumAccount?: EthereumAccountSelection,
+  },
+};
+
+type Props = {
+  +navigation: RegistrationNavigationProp<'ConnectFarcaster'>,
+  +route: NavigationRoute<'ConnectFarcaster'>,
+};
+
+// eslint-disable-next-line no-unused-vars
+function ConnectFarcaster(prop: Props): React.Node {
+  const registrationContext = React.useContext(RegistrationContext);
+  invariant(registrationContext, 'registrationContext should be set');
+
+  const [webViewState, setWebViewState] =
+    React.useState<FarcasterWebViewState>('closed');
+
+  const onSuccess = React.useCallback(() => {
+    // TODO: implement onSuccess
+  }, []);
+
+  const onPressConnectFarcaster = React.useCallback(() => {
+    setWebViewState('opening');
+  }, []);
+
+  const connectButtonVariant =
+    webViewState === 'opening' ? 'loading' : 'enabled';
+
+  const connectFarcaster = React.useMemo(
+    () => (
+      <RegistrationContainer>
+        <RegistrationContentContainer style={styles.scrollViewContentContainer}>
+          <FarcasterPrompt />
+        </RegistrationContentContainer>
+        <FarcasterWebView onSuccess={onSuccess} webViewState={webViewState} />
+        <RegistrationButtonContainer>
+          <RegistrationButton
+            onPress={onPressConnectFarcaster}
+            label="Connect Farcaster account"
+            variant={connectButtonVariant}
+          />
+        </RegistrationButtonContainer>
+      </RegistrationContainer>
+    ),
+    [connectButtonVariant, onPressConnectFarcaster, onSuccess, webViewState],
+  );
+
+  return connectFarcaster;
+}
+
+const styles = {
+  scrollViewContentContainer: {
+    flexGrow: 1,
+  },
+};
+
+export default ConnectFarcaster;
diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js
--- a/native/account/registration/registration-navigator.react.js
+++ b/native/account/registration/registration-navigator.react.js
@@ -10,6 +10,7 @@
 import AccountDoesNotExist from './account-does-not-exist.react.js';
 import AvatarSelection from './avatar-selection.react.js';
 import ConnectEthereum from './connect-ethereum.react.js';
+import ConnectFarcaster from './connect-farcaster.react.js';
 import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js';
 import EmojiAvatarSelection from './emoji-avatar-selection.react.js';
 import ExistingEthereumAccount from './existing-ethereum-account.react.js';
@@ -25,6 +26,7 @@
   ConnectEthereumRouteName,
   ExistingEthereumAccountRouteName,
   UsernameSelectionRouteName,
+  ConnectFarcasterRouteName,
   PasswordSelectionRouteName,
   AvatarSelectionRouteName,
   EmojiAvatarSelectionRouteName,
@@ -83,6 +85,10 @@
         name={ExistingEthereumAccountRouteName}
         component={ExistingEthereumAccount}
       />
+      <Registration.Screen
+        name={ConnectFarcasterRouteName}
+        component={ConnectFarcaster}
+      />
       <Registration.Screen
         name={UsernameSelectionRouteName}
         component={UsernameSelection}
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -6,6 +6,7 @@
 import type { InviteLinkModalParams } from './invite-link-modal.react';
 import type { AvatarSelectionParams } from '../account/registration/avatar-selection.react.js';
 import type { ConnectEthereumParams } from '../account/registration/connect-ethereum.react.js';
+import type { ConnectFarcasterParams } from '../account/registration/connect-farcaster.react.js';
 import type { EmojiAvatarSelectionParams } from '../account/registration/emoji-avatar-selection.react.js';
 import type { ExistingEthereumAccountParams } from '../account/registration/existing-ethereum-account.react.js';
 import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js';
@@ -121,6 +122,7 @@
 export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection';
 export const ConnectEthereumRouteName = 'ConnectEthereum';
 export const ExistingEthereumAccountRouteName = 'ExistingEthereumAccount';
+export const ConnectFarcasterRouteName = 'ConnectFarcaster';
 export const UsernameSelectionRouteName = 'UsernameSelection';
 export const CommunityCreationRouteName = 'CommunityCreation';
 export const CommunityConfigurationRouteName = 'CommunityConfiguration';
@@ -253,6 +255,7 @@
   +KeyserverSelection: KeyserverSelectionParams,
   +ConnectEthereum: ConnectEthereumParams,
   +ExistingEthereumAccount: ExistingEthereumAccountParams,
+  +ConnectFarcaster: ConnectFarcasterParams,
   +UsernameSelection: UsernameSelectionParams,
   +PasswordSelection: PasswordSelectionParams,
   +AvatarSelection: AvatarSelectionParams,