1 files changed, 26 insertions, 11 deletions
diff --git a/src/view/com/auth/create/StepHeader.tsx b/src/view/com/auth/create/StepHeader.tsx
index 41f912051..af6bf5478 100644
--- a/src/view/com/auth/create/StepHeader.tsx
+++ b/src/view/com/auth/create/StepHeader.tsx
@@ -3,27 +3,42 @@ import {StyleSheet, View} from 'react-native'
 import {Text} from 'view/com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Trans} from '@lingui/macro'
+import {CreateAccountState} from './state'
 
-export function StepHeader({step, title}: {step: string; title: string}) {
+export function StepHeader({
+  uiState,
+  title,
+  children,
+}: React.PropsWithChildren<{uiState: CreateAccountState; title: string}>) {
   const pal = usePalette('default')
+  const numSteps = uiState.isPhoneVerificationRequired ? 3 : 2
   return (
     <View style={styles.container}>
-      <Text type="lg" style={[pal.textLight]}>
-        {step === '3' ? (
-          <Trans>Last step!</Trans>
-        ) : (
-          <Trans>Step {step} of 3</Trans>
-        )}
-      </Text>
-      <Text style={[pal.text]} type="title-xl">
-        {title}
-      </Text>
+      <View>
+        <Text type="lg" style={[pal.textLight]}>
+          {uiState.step === 3 ? (
+            <Trans>Last step!</Trans>
+          ) : (
+            <Trans>
+              Step {uiState.step} of {numSteps}
+            </Trans>
+          )}
+        </Text>
+
+        <Text style={[pal.text]} type="title-xl">
+          {title}
+        </Text>
+      </View>
+      {children}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     marginBottom: 20,
   },
 })