diff --git a/native/components/connect-farcaster-bottom-sheet.react.js b/native/components/connect-farcaster-bottom-sheet.react.js
--- a/native/components/connect-farcaster-bottom-sheet.react.js
+++ b/native/components/connect-farcaster-bottom-sheet.react.js
@@ -1,7 +1,13 @@
 // @flow
 
 import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
 
+import FarcasterPrompt from './farcaster-prompt.react.js';
+import FarcasterWebView, {
+  type FarcasterWebViewState,
+} from './farcaster-web-view.react.js';
+import RegistrationButton from '../account/registration/registration-button.react.js';
 import BottomSheet from '../bottom-sheet/bottom-sheet.react.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
@@ -18,11 +24,60 @@
 
   const bottomSheetRef = React.useRef(null);
 
-  return (
-    <BottomSheet ref={bottomSheetRef} onClosed={goBack}>
-      {null}
-    </BottomSheet>
+  const [webViewState, setWebViewState] =
+    React.useState<FarcasterWebViewState>('closed');
+
+  const onSuccessfulConnect = React.useCallback(() => {
+    // TODO: Update fid
+    bottomSheetRef.current?.close();
+  }, []);
+
+  const onPressConnect = React.useCallback(() => {
+    setWebViewState('opening');
+  }, []);
+
+  const connectButtonVariant =
+    webViewState === 'opening' ? 'loading' : 'enabled';
+
+  const connectFarcasterBottomSheet = React.useMemo(
+    () => (
+      <BottomSheet ref={bottomSheetRef} onClosed={goBack}>
+        <View style={styles.container}>
+          <View style={styles.promptContainer}>
+            <FarcasterPrompt />
+          </View>
+          <RegistrationButton
+            onPress={onPressConnect}
+            label="Connect Farcaster account"
+            variant={connectButtonVariant}
+          />
+        </View>
+        <FarcasterWebView
+          onSuccess={onSuccessfulConnect}
+          webViewState={webViewState}
+        />
+      </BottomSheet>
+    ),
+    [
+      connectButtonVariant,
+      goBack,
+      onPressConnect,
+      onSuccessfulConnect,
+      webViewState,
+    ],
   );
+
+  return connectFarcasterBottomSheet;
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  promptContainer: {
+    marginBottom: 40,
+  },
+});
+
 export default ConnectFarcasterBottomSheet;