Update login and password reset UI across iOS and Android

- Add email/username login support
  - Android: Update LoginScreen with email keyboard type
  - iOS: Update LoginView with email keyboard support

- Refactor iOS password reset screens to use native SwiftUI components
  - Convert ForgotPasswordView to use Form with Sections
  - Convert VerifyResetCodeView to use Form with Sections
  - Convert ResetPasswordView to use Form with Sections
  - Use Label components for error/success messages
  - Add navigation titles and improve iOS-native appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

composeApp/src/commonMain/kotlin/com/example/mycrib/ui/screens/LoginScreen.kt

@@ -7,10 +7,13 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.dp
@@ -84,13 +87,17 @@ fun LoginScreen(
                 OutlinedTextField(
                     value = username,
                     onValueChange = { username = it },
-                    label = { Text("Username") },
+                    label = { Text("Username or Email") },
                     leadingIcon = {
                         Icon(Icons.Default.Person, contentDescription = null)
                     },
                     modifier = Modifier.fillMaxWidth(),
                     singleLine = true,
-                    shape = RoundedCornerShape(12.dp)
+                    shape = RoundedCornerShape(12.dp),
+                    keyboardOptions = KeyboardOptions(
+                        keyboardType = KeyboardType.Email,
+                        imeAction = ImeAction.Next
+                    )
                 )
 
                 OutlinedTextField(

iosApp/iosApp/Login/LoginView.swift

@@ -41,9 +41,10 @@ struct LoginView: View {
                 .listRowBackground(Color.clear)
 
                 Section {
-                    TextField("Username", text: $viewModel.username)
+                    TextField("Username or Email", text: $viewModel.username)
                         .textInputAutocapitalization(.never)
                         .autocorrectionDisabled()
+                        .keyboardType(.emailAddress)
                         .focused($focusedField, equals: .username)
                         .submitLabel(.next)
                         .onSubmit {

iosApp/iosApp/PasswordReset/ForgotPasswordView.swift

@@ -7,150 +7,106 @@ struct ForgotPasswordView: View {
 
     var body: some View {
         NavigationView {
-            ZStack {
+            Form {
-                Color(.systemGroupedBackground)
+                // Header Section
-                    .ignoresSafeArea()
+                Section {
+                    VStack(spacing: 12) {
+                        Image(systemName: "key.fill")
+                            .font(.system(size: 60))
+                            .foregroundStyle(.blue.gradient)
+                            .padding(.vertical)
 
-                ScrollView {
+                        Text("Forgot Password?")
-                    VStack(spacing: 24) {
+                            .font(.title2)
-                        Spacer().frame(height: 20)
+                            .fontWeight(.bold)
 
-                        // Header
+                        Text("Enter your email address and we'll send you a verification code")
-                        VStack(spacing: 12) {
-                            Image(systemName: "key.fill")
-                                .font(.system(size: 60))
-                                .foregroundStyle(.blue.gradient)
-                                .padding(.bottom, 8)
-
-                            Text("Forgot Password?")
-                                .font(.title)
-                                .fontWeight(.bold)
-
-                            Text("Enter your email address and we'll send you a code to reset your password")
-                                .font(.subheadline)
-                                .foregroundColor(.secondary)
-                                .multilineTextAlignment(.center)
-                                .padding(.horizontal)
-                        }
-
-                        // Email Input
-                        VStack(alignment: .leading, spacing: 12) {
-                            Text("Email Address")
-                                .font(.headline)
-                                .padding(.horizontal)
-
-                            TextField("Enter your email", text: $viewModel.email)
-                                .textInputAutocapitalization(.never)
-                                .autocorrectionDisabled()
-                                .keyboardType(.emailAddress)
-                                .textFieldStyle(.roundedBorder)
-                                .frame(height: 44)
-                                .padding(.horizontal)
-                                .focused($isEmailFocused)
-                                .submitLabel(.go)
-                                .onSubmit {
-                                    viewModel.requestPasswordReset()
-                                }
-                                .onChange(of: viewModel.email) { _, _ in
-                                    viewModel.clearError()
-                                }
-
-                            Text("We'll send a 6-digit verification code to this address")
-                                .font(.caption)
-                                .foregroundColor(.secondary)
-                                .padding(.horizontal)
-                        }
-
-                        // Error Message
-                        if let errorMessage = viewModel.errorMessage {
-                            HStack(spacing: 12) {
-                                Image(systemName: "exclamationmark.triangle.fill")
-                                    .foregroundColor(.red)
-                                Text(errorMessage)
-                                    .foregroundColor(.red)
-                                    .font(.subheadline)
-                            }
-                            .padding()
-                            .background(Color.red.opacity(0.1))
-                            .cornerRadius(12)
-                            .padding(.horizontal)
-                        }
-
-                        // Success Message
-                        if let successMessage = viewModel.successMessage {
-                            HStack(spacing: 12) {
-                                Image(systemName: "checkmark.circle.fill")
-                                    .foregroundColor(.green)
-                                Text(successMessage)
-                                    .foregroundColor(.green)
-                                    .font(.subheadline)
-                            }
-                            .padding()
-                            .background(Color.green.opacity(0.1))
-                            .cornerRadius(12)
-                            .padding(.horizontal)
-                        }
-
-                        // Send Code Button
-                        Button(action: {
-                            viewModel.requestPasswordReset()
-                        }) {
-                            HStack {
-                                if viewModel.isLoading {
-                                    ProgressView()
-                                        .progressViewStyle(CircularProgressViewStyle(tint: .white))
-                                } else {
-                                    Image(systemName: "envelope.fill")
-                                    Text("Send Reset Code")
-                                        .fontWeight(.semibold)
-                                }
-                            }
-                            .frame(maxWidth: .infinity)
-                            .frame(height: 50)
-                            .background(
-                                !viewModel.email.isEmpty && !viewModel.isLoading
-                                    ? Color.blue
-                                    : Color.gray.opacity(0.3)
-                            )
-                            .foregroundColor(.white)
-                            .cornerRadius(12)
-                        }
-                        .disabled(viewModel.email.isEmpty || viewModel.isLoading)
-                        .padding(.horizontal)
-
-                        Spacer().frame(height: 20)
-
-                        // Help Text
-                        Text("Remember your password?")
                             .font(.subheadline)
                             .foregroundColor(.secondary)
+                            .multilineTextAlignment(.center)
+                    }
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical)
+                }
+                .listRowBackground(Color.clear)
 
-                        Button(action: {
+                // Email Input Section
-                            dismiss()
+                Section {
-                        }) {
+                    TextField("Email Address", text: $viewModel.email)
-                            Text("Back to Login")
+                        .textInputAutocapitalization(.never)
-                                .font(.subheadline)
+                        .autocorrectionDisabled()
-                                .fontWeight(.semibold)
+                        .keyboardType(.emailAddress)
+                        .focused($isEmailFocused)
+                        .submitLabel(.go)
+                        .onSubmit {
+                            viewModel.requestPasswordReset()
+                        }
+                        .onChange(of: viewModel.email) { _, _ in
+                            viewModel.clearError()
+                        }
+                } header: {
+                    Text("Email")
+                } footer: {
+                    Text("We'll send a 6-digit verification code to this address")
+                }
+
+                // Error/Success Messages
+                if let errorMessage = viewModel.errorMessage {
+                    Section {
+                        Label {
+                            Text(errorMessage)
+                                .foregroundColor(.red)
+                        } icon: {
+                            Image(systemName: "exclamationmark.triangle.fill")
+                                .foregroundColor(.red)
                         }
                     }
                 }
-            }
+
-            .navigationBarTitleDisplayMode(.inline)
+                if let successMessage = viewModel.successMessage {
-            .navigationBarBackButtonHidden(true)
+                    Section {
-            .toolbar {
+                        Label {
-                ToolbarItem(placement: .navigationBarLeading) {
+                            Text(successMessage)
+                                .foregroundColor(.green)
+                        } icon: {
+                            Image(systemName: "checkmark.circle.fill")
+                                .foregroundColor(.green)
+                        }
+                    }
+                }
+
+                // Send Code Button
+                Section {
+                    Button(action: {
+                        viewModel.requestPasswordReset()
+                    }) {
+                        HStack {
+                            Spacer()
+                            if viewModel.isLoading {
+                                ProgressView()
+                            } else {
+                                Label("Send Reset Code", systemImage: "envelope.fill")
+                                    .fontWeight(.semibold)
+                            }
+                            Spacer()
+                        }
+                    }
+                    .disabled(viewModel.email.isEmpty || viewModel.isLoading)
+
                     Button(action: {
                         dismiss()
                     }) {
-                        HStack(spacing: 4) {
+                        HStack {
-                            Image(systemName: "chevron.left")
+                            Spacer()
-                                .font(.system(size: 16))
+                            Text("Back to Login")
-                            Text("Back")
+                                .foregroundColor(.secondary)
-                                .font(.subheadline)
+                            Spacer()
                         }
                     }
                 }
             }
+            .navigationTitle("Reset Password")
+            .navigationBarTitleDisplayMode(.inline)
             .onAppear {
                 isEmailFocused = true
             }

iosApp/iosApp/PasswordReset/ResetPasswordView.swift

@@ -13,210 +13,180 @@ struct ResetPasswordView: View {
     }
 
     var body: some View {
-        ZStack {
+        NavigationView {
-            Color(.systemGroupedBackground)
+            Form {
-                .ignoresSafeArea()
+                // Header Section
-
+                Section {
-            ScrollView {
-                VStack(spacing: 24) {
-                    Spacer().frame(height: 20)
-
-                    // Header
                     VStack(spacing: 12) {
                         Image(systemName: "lock.rotation")
                             .font(.system(size: 60))
                             .foregroundStyle(.blue.gradient)
-                            .padding(.bottom, 8)
+                            .padding(.vertical)
 
                         Text("Set New Password")
-                            .font(.title)
+                            .font(.title2)
                             .fontWeight(.bold)
 
                         Text("Create a strong password to secure your account")
                             .font(.subheadline)
                             .foregroundColor(.secondary)
                             .multilineTextAlignment(.center)
-                            .padding(.horizontal)
                     }
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical)
+                }
+                .listRowBackground(Color.clear)
 
-                    // Password Requirements
+                // Password Requirements
-                    GroupBox {
+                Section {
-                        VStack(alignment: .leading, spacing: 8) {
+                    VStack(alignment: .leading, spacing: 8) {
-                            Text("Password Requirements")
+                        HStack(spacing: 8) {
-                                .font(.subheadline)
+                            Image(systemName: viewModel.newPassword.count >= 8 ? "checkmark.circle.fill" : "circle")
-                                .fontWeight(.semibold)
+                                .foregroundColor(viewModel.newPassword.count >= 8 ? .green : .secondary)
-
+                            Text("At least 8 characters")
-                            HStack(spacing: 8) {
+                                .font(.caption)
-                                Image(systemName: viewModel.newPassword.count >= 8 ? "checkmark.circle.fill" : "circle")
-                                    .foregroundColor(viewModel.newPassword.count >= 8 ? .green : .secondary)
-                                Text("At least 8 characters")
-                                    .font(.caption)
-                            }
-
-                            HStack(spacing: 8) {
-                                Image(systemName: hasLetter ? "checkmark.circle.fill" : "circle")
-                                    .foregroundColor(hasLetter ? .green : .secondary)
-                                Text("Contains letters")
-                                    .font(.caption)
-                            }
-
-                            HStack(spacing: 8) {
-                                Image(systemName: hasNumber ? "checkmark.circle.fill" : "circle")
-                                    .foregroundColor(hasNumber ? .green : .secondary)
-                                Text("Contains numbers")
-                                    .font(.caption)
-                            }
-
-                            HStack(spacing: 8) {
-                                Image(systemName: passwordsMatch ? "checkmark.circle.fill" : "circle")
-                                    .foregroundColor(passwordsMatch ? .green : .secondary)
-                                Text("Passwords match")
-                                    .font(.caption)
-                            }
                         }
-                        .padding(.vertical, 4)
-                    }
-                    .padding(.horizontal)
 
-                    // New Password Input
+                        HStack(spacing: 8) {
-                    VStack(alignment: .leading, spacing: 12) {
+                            Image(systemName: hasLetter ? "checkmark.circle.fill" : "circle")
-                        Text("New Password")
+                                .foregroundColor(hasLetter ? .green : .secondary)
-                            .font(.headline)
+                            Text("Contains letters")
-                            .padding(.horizontal)
+                                .font(.caption)
-
-                        HStack {
-                            if isNewPasswordVisible {
-                                TextField("Enter new password", text: $viewModel.newPassword)
-                                    .textInputAutocapitalization(.never)
-                                    .autocorrectionDisabled()
-                                    .focused($focusedField, equals: .newPassword)
-                                    .submitLabel(.next)
-                                    .onSubmit {
-                                        focusedField = .confirmPassword
-                                    }
-                            } else {
-                                SecureField("Enter new password", text: $viewModel.newPassword)
-                                    .focused($focusedField, equals: .newPassword)
-                                    .submitLabel(.next)
-                                    .onSubmit {
-                                        focusedField = .confirmPassword
-                                    }
-                            }
-
-                            Button(action: {
-                                isNewPasswordVisible.toggle()
-                            }) {
-                                Image(systemName: isNewPasswordVisible ? "eye.slash.fill" : "eye.fill")
-                                    .foregroundColor(.secondary)
-                            }
-                            .buttonStyle(.plain)
                         }
-                        .textFieldStyle(.roundedBorder)
+
-                        .frame(height: 44)
+                        HStack(spacing: 8) {
-                        .padding(.horizontal)
+                            Image(systemName: hasNumber ? "checkmark.circle.fill" : "circle")
-                        .onChange(of: viewModel.newPassword) { _, _ in
+                                .foregroundColor(hasNumber ? .green : .secondary)
-                            viewModel.clearError()
+                            Text("Contains numbers")
+                                .font(.caption)
+                        }
+
+                        HStack(spacing: 8) {
+                            Image(systemName: passwordsMatch ? "checkmark.circle.fill" : "circle")
+                                .foregroundColor(passwordsMatch ? .green : .secondary)
+                            Text("Passwords match")
+                                .font(.caption)
                         }
                     }
+                } header: {
+                    Text("Password Requirements")
+                }
 
-                    // Confirm Password Input
+                // New Password Input
-                    VStack(alignment: .leading, spacing: 12) {
+                Section {
-                        Text("Confirm Password")
+                    HStack {
-                            .font(.headline)
+                        if isNewPasswordVisible {
-                            .padding(.horizontal)
+                            TextField("Enter new password", text: $viewModel.newPassword)
-
+                                .textInputAutocapitalization(.never)
-                        HStack {
+                                .autocorrectionDisabled()
-                            if isConfirmPasswordVisible {
+                                .focused($focusedField, equals: .newPassword)
-                                TextField("Re-enter new password", text: $viewModel.confirmPassword)
+                                .submitLabel(.next)
-                                    .textInputAutocapitalization(.never)
+                                .onSubmit {
-                                    .autocorrectionDisabled()
+                                    focusedField = .confirmPassword
-                                    .focused($focusedField, equals: .confirmPassword)
+                                }
-                                    .submitLabel(.go)
+                        } else {
-                                    .onSubmit {
+                            SecureField("Enter new password", text: $viewModel.newPassword)
-                                        viewModel.resetPassword()
+                                .focused($focusedField, equals: .newPassword)
-                                    }
+                                .submitLabel(.next)
-                            } else {
+                                .onSubmit {
-                                SecureField("Re-enter new password", text: $viewModel.confirmPassword)
+                                    focusedField = .confirmPassword
-                                    .focused($focusedField, equals: .confirmPassword)
+                                }
-                                    .submitLabel(.go)
-                                    .onSubmit {
-                                        viewModel.resetPassword()
-                                    }
-                            }
-
-                            Button(action: {
-                                isConfirmPasswordVisible.toggle()
-                            }) {
-                                Image(systemName: isConfirmPasswordVisible ? "eye.slash.fill" : "eye.fill")
-                                    .foregroundColor(.secondary)
-                            }
-                            .buttonStyle(.plain)
                         }
-                        .textFieldStyle(.roundedBorder)
+
-                        .frame(height: 44)
+                        Button(action: {
-                        .padding(.horizontal)
+                            isNewPasswordVisible.toggle()
-                        .onChange(of: viewModel.confirmPassword) { _, _ in
+                        }) {
-                            viewModel.clearError()
+                            Image(systemName: isNewPasswordVisible ? "eye.slash.fill" : "eye.fill")
+                                .foregroundColor(.secondary)
                         }
+                        .buttonStyle(.plain)
                     }
+                    .onChange(of: viewModel.newPassword) { _, _ in
+                        viewModel.clearError()
+                    }
+                } header: {
+                    Text("New Password")
+                }
 
-                    // Error Message
+                // Confirm Password Input
-                    if let errorMessage = viewModel.errorMessage {
+                Section {
-                        HStack(spacing: 12) {
+                    HStack {
-                            Image(systemName: "exclamationmark.triangle.fill")
+                        if isConfirmPasswordVisible {
-                                .foregroundColor(.red)
+                            TextField("Re-enter new password", text: $viewModel.confirmPassword)
+                                .textInputAutocapitalization(.never)
+                                .autocorrectionDisabled()
+                                .focused($focusedField, equals: .confirmPassword)
+                                .submitLabel(.go)
+                                .onSubmit {
+                                    viewModel.resetPassword()
+                                }
+                        } else {
+                            SecureField("Re-enter new password", text: $viewModel.confirmPassword)
+                                .focused($focusedField, equals: .confirmPassword)
+                                .submitLabel(.go)
+                                .onSubmit {
+                                    viewModel.resetPassword()
+                                }
+                        }
+
+                        Button(action: {
+                            isConfirmPasswordVisible.toggle()
+                        }) {
+                            Image(systemName: isConfirmPasswordVisible ? "eye.slash.fill" : "eye.fill")
+                                .foregroundColor(.secondary)
+                        }
+                        .buttonStyle(.plain)
+                    }
+                    .onChange(of: viewModel.confirmPassword) { _, _ in
+                        viewModel.clearError()
+                    }
+                } header: {
+                    Text("Confirm Password")
+                }
+
+                // Error/Success Messages
+                if let errorMessage = viewModel.errorMessage {
+                    Section {
+                        Label {
                             Text(errorMessage)
                                 .foregroundColor(.red)
-                                .font(.subheadline)
+                        } icon: {
+                            Image(systemName: "exclamationmark.triangle.fill")
+                                .foregroundColor(.red)
                         }
-                        .padding()
-                        .background(Color.red.opacity(0.1))
-                        .cornerRadius(12)
-                        .padding(.horizontal)
                     }
+                }
 
-                    // Success Message
+                if let successMessage = viewModel.successMessage {
-                    if let successMessage = viewModel.successMessage {
+                    Section {
-                        HStack(spacing: 12) {
+                        Label {
-                            Image(systemName: "checkmark.circle.fill")
-                                .foregroundColor(.green)
                             Text(successMessage)
                                 .foregroundColor(.green)
-                                .font(.subheadline)
                                 .multilineTextAlignment(.center)
+                        } icon: {
+                            Image(systemName: "checkmark.circle.fill")
+                                .foregroundColor(.green)
                         }
-                        .padding()
-                        .background(Color.green.opacity(0.1))
-                        .cornerRadius(12)
-                        .padding(.horizontal)
                     }
+                }
 
-                    // Reset Password Button
+                // Reset Password Button
+                Section {
                     Button(action: {
                         viewModel.resetPassword()
                     }) {
                         HStack {
+                            Spacer()
                             if viewModel.isLoading {
                                 ProgressView()
-                                    .progressViewStyle(CircularProgressViewStyle(tint: .white))
                             } else {
-                                Image(systemName: "lock.shield.fill")
+                                Label("Reset Password", systemImage: "lock.shield.fill")
-                                Text("Reset Password")
                                     .fontWeight(.semibold)
                             }
+                            Spacer()
                         }
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 50)
-                        .background(
-                            isFormValid && !viewModel.isLoading
-                                ? Color.blue
-                                : Color.gray.opacity(0.3)
-                        )
-                        .foregroundColor(.white)
-                        .cornerRadius(12)
                     }
                     .disabled(!isFormValid || viewModel.isLoading)
-                    .padding(.horizontal)
 
                     // Return to Login Button (shown after success)
                     if viewModel.currentStep == .success {
@@ -224,42 +194,44 @@ struct ResetPasswordView: View {
                             viewModel.reset()
                             onSuccess()
                         }) {
-                            Text("Return to Login")
+                            HStack {
-                                .font(.subheadline)
+                                Spacer()
-                                .fontWeight(.semibold)
+                                Text("Return to Login")
-                        }
+                                    .fontWeight(.semibold)
-                        .padding(.top, 8)
+                                Spacer()
-                    }
+                            }
-
-                    Spacer().frame(height: 20)
-                }
-            }
-        }
-        .navigationBarBackButtonHidden(true)
-        .toolbar {
-            ToolbarItem(placement: .navigationBarLeading) {
-                // Only show back button if not from deep link
-                if viewModel.resetToken == nil || viewModel.currentStep != .resetPassword {
-                    Button(action: {
-                        if viewModel.currentStep == .success {
-                            viewModel.reset()
-                            onSuccess()
-                        } else {
-                            viewModel.moveToPreviousStep()
-                        }
-                    }) {
-                        HStack(spacing: 4) {
-                            Image(systemName: viewModel.currentStep == .success ? "xmark" : "chevron.left")
-                                .font(.system(size: 16))
-                            Text(viewModel.currentStep == .success ? "Close" : "Back")
-                                .font(.subheadline)
                         }
                     }
                 }
             }
-        }
+            .navigationTitle("Reset Password")
-        .onAppear {
+            .navigationBarTitleDisplayMode(.inline)
-            focusedField = .newPassword
+            .navigationBarBackButtonHidden(true)
+            .toolbar {
+                ToolbarItem(placement: .navigationBarLeading) {
+                    // Only show back button if not from deep link
+                    if viewModel.resetToken == nil || viewModel.currentStep != .resetPassword {
+                        Button(action: {
+                            if viewModel.currentStep == .success {
+                                viewModel.reset()
+                                onSuccess()
+                            } else {
+                                viewModel.moveToPreviousStep()
+                            }
+                        }) {
+                            HStack(spacing: 4) {
+                                Image(systemName: viewModel.currentStep == .success ? "xmark" : "chevron.left")
+                                    .font(.system(size: 16))
+                                Text(viewModel.currentStep == .success ? "Close" : "Back")
+                                    .font(.subheadline)
+                            }
+                        }
+                    }
+                }
+            }
+            .onAppear {
+                focusedField = .newPassword
+            }
         }
     }
 

iosApp/iosApp/PasswordReset/VerifyResetCodeView.swift

@@ -6,23 +6,18 @@ struct VerifyResetCodeView: View {
     @Environment(\.dismiss) var dismiss
 
     var body: some View {
-        ZStack {
+        NavigationView {
-            Color(.systemGroupedBackground)
+            Form {
-                .ignoresSafeArea()
+                // Header Section
-
+                Section {
-            ScrollView {
-                VStack(spacing: 24) {
-                    Spacer().frame(height: 20)
-
-                    // Header
                     VStack(spacing: 12) {
                         Image(systemName: "envelope.badge.fill")
                             .font(.system(size: 60))
                             .foregroundStyle(.blue.gradient)
-                            .padding(.bottom, 8)
+                            .padding(.vertical)
 
                         Text("Check Your Email")
-                            .font(.title)
+                            .font(.title2)
                             .fontWeight(.bold)
 
                         Text("We sent a 6-digit code to")
@@ -33,115 +28,91 @@ struct VerifyResetCodeView: View {
                             .font(.subheadline)
                             .fontWeight(.semibold)
                             .foregroundColor(.primary)
-                            .padding(.horizontal)
                     }
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical)
+                }
+                .listRowBackground(Color.clear)
 
-                    // Info Card
+                // Info Section
-                    GroupBox {
+                Section {
-                        HStack(spacing: 12) {
+                    Label {
-                            Image(systemName: "clock.fill")
+                        Text("Code expires in 15 minutes")
-                                .foregroundColor(.orange)
+                            .fontWeight(.semibold)
-                                .font(.title2)
+                    } icon: {
-
+                        Image(systemName: "clock.fill")
-                            Text("Code expires in 15 minutes")
+                            .foregroundColor(.orange)
-                                .font(.subheadline)
-                                .foregroundColor(.primary)
-                                .fontWeight(.semibold)
-                        }
-                        .padding(.vertical, 4)
                     }
-                    .padding(.horizontal)
+                }
 
-                    // Code Input
+                // Code Input Section
-                    VStack(alignment: .leading, spacing: 12) {
+                Section {
-                        Text("Verification Code")
+                    TextField("000000", text: $viewModel.code)
-                            .font(.headline)
+                        .font(.system(size: 32, weight: .semibold, design: .rounded))
-                            .padding(.horizontal)
+                        .multilineTextAlignment(.center)
-
+                        .keyboardType(.numberPad)
-                        TextField("000000", text: $viewModel.code)
+                        .focused($isCodeFocused)
-                            .font(.system(size: 32, weight: .semibold, design: .rounded))
+                        .onChange(of: viewModel.code) { _, newValue in
-                            .multilineTextAlignment(.center)
+                            // Limit to 6 digits
-                            .keyboardType(.numberPad)
+                            if newValue.count > 6 {
-                            .textFieldStyle(.roundedBorder)
+                                viewModel.code = String(newValue.prefix(6))
-                            .frame(height: 60)
-                            .padding(.horizontal)
-                            .focused($isCodeFocused)
-                            .onChange(of: viewModel.code) { _, newValue in
-                                // Limit to 6 digits
-                                if newValue.count > 6 {
-                                    viewModel.code = String(newValue.prefix(6))
-                                }
-                                // Only allow numbers
-                                viewModel.code = newValue.filter { $0.isNumber }
-                                viewModel.clearError()
                             }
+                            // Only allow numbers
+                            viewModel.code = newValue.filter { $0.isNumber }
+                            viewModel.clearError()
+                        }
+                } header: {
+                    Text("Verification Code")
+                } footer: {
+                    Text("Enter the 6-digit code from your email")
+                }
 
-                        Text("Enter the 6-digit code from your email")
+                // Error/Success Messages
-                            .font(.caption)
+                if let errorMessage = viewModel.errorMessage {
-                            .foregroundColor(.secondary)
+                    Section {
-                            .padding(.horizontal)
+                        Label {
-                    }
-
-                    // Error Message
-                    if let errorMessage = viewModel.errorMessage {
-                        HStack(spacing: 12) {
-                            Image(systemName: "exclamationmark.triangle.fill")
-                                .foregroundColor(.red)
                             Text(errorMessage)
                                 .foregroundColor(.red)
-                                .font(.subheadline)
+                        } icon: {
+                            Image(systemName: "exclamationmark.triangle.fill")
+                                .foregroundColor(.red)
                         }
-                        .padding()
-                        .background(Color.red.opacity(0.1))
-                        .cornerRadius(12)
-                        .padding(.horizontal)
                     }
+                }
 
-                    // Success Message
+                if let successMessage = viewModel.successMessage {
-                    if let successMessage = viewModel.successMessage {
+                    Section {
-                        HStack(spacing: 12) {
+                        Label {
-                            Image(systemName: "checkmark.circle.fill")
-                                .foregroundColor(.green)
                             Text(successMessage)
                                 .foregroundColor(.green)
-                                .font(.subheadline)
+                        } icon: {
+                            Image(systemName: "checkmark.circle.fill")
+                                .foregroundColor(.green)
                         }
-                        .padding()
-                        .background(Color.green.opacity(0.1))
-                        .cornerRadius(12)
-                        .padding(.horizontal)
                     }
+                }
 
-                    // Verify Button
+                // Verify Button
+                Section {
                     Button(action: {
                         viewModel.verifyResetCode()
                     }) {
                         HStack {
+                            Spacer()
                             if viewModel.isLoading {
                                 ProgressView()
-                                    .progressViewStyle(CircularProgressViewStyle(tint: .white))
                             } else {
-                                Image(systemName: "checkmark.shield.fill")
+                                Label("Verify Code", systemImage: "checkmark.shield.fill")
-                                Text("Verify Code")
                                     .fontWeight(.semibold)
                             }
+                            Spacer()
                         }
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 50)
-                        .background(
-                            viewModel.code.count == 6 && !viewModel.isLoading
-                                ? Color.blue
-                                : Color.gray.opacity(0.3)
-                        )
-                        .foregroundColor(.white)
-                        .cornerRadius(12)
                     }
                     .disabled(viewModel.code.count != 6 || viewModel.isLoading)
-                    .padding(.horizontal)
+                }
 
-                    Spacer().frame(height: 20)
+                // Help Section
-
+                Section {
-                    // Help Section
                     VStack(spacing: 12) {
                         Text("Didn't receive the code?")
                             .font(.subheadline)
@@ -162,29 +133,32 @@ struct VerifyResetCodeView: View {
                             .font(.caption)
                             .foregroundColor(.secondary)
                             .multilineTextAlignment(.center)
-                            .padding(.horizontal, 32)
+                    }
+                    .frame(maxWidth: .infinity)
+                }
+                .listRowBackground(Color.clear)
+            }
+            .navigationTitle("Verify Code")
+            .navigationBarTitleDisplayMode(.inline)
+            .navigationBarBackButtonHidden(true)
+            .toolbar {
+                ToolbarItem(placement: .navigationBarLeading) {
+                    Button(action: {
+                        viewModel.moveToPreviousStep()
+                    }) {
+                        HStack(spacing: 4) {
+                            Image(systemName: "chevron.left")
+                                .font(.system(size: 16))
+                            Text("Back")
+                                .font(.subheadline)
+                        }
                     }
                 }
             }
-        }
+            .onAppear {
-        .navigationBarBackButtonHidden(true)
+                isCodeFocused = true
-        .toolbar {
-            ToolbarItem(placement: .navigationBarLeading) {
-                Button(action: {
-                    viewModel.moveToPreviousStep()
-                }) {
-                    HStack(spacing: 4) {
-                        Image(systemName: "chevron.left")
-                            .font(.system(size: 16))
-                        Text("Back")
-                            .font(.subheadline)
-                    }
-                }
             }
         }
-        .onAppear {
-            isCodeFocused = true
-        }
     }
 }