diff --git a/GravatarApp.xcodeproj/project.pbxproj b/GravatarApp.xcodeproj/project.pbxproj
index bfebd70c..914fc486 100644
--- a/GravatarApp.xcodeproj/project.pbxproj
+++ b/GravatarApp.xcodeproj/project.pbxproj
@@ -364,6 +364,7 @@
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
 				GENERATE_INFOPLIST_FILE = YES;
 				INCLUDED_SOURCE_FILE_NAMES = "";
+				INFOPLIST_KEY_NSCameraUsageDescription = "Upload new avatars";
 				"INFOPLIST_KEY_UIApplicationSceneManifest_Generation[sdk=iphoneos*]" = YES;
 				"INFOPLIST_KEY_UIApplicationSceneManifest_Generation[sdk=iphonesimulator*]" = YES;
 				"INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents[sdk=iphoneos*]" = YES;
@@ -404,6 +405,7 @@
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
 				GENERATE_INFOPLIST_FILE = YES;
 				INCLUDED_SOURCE_FILE_NAMES = "";
+				INFOPLIST_KEY_NSCameraUsageDescription = "Upload new avatars";
 				"INFOPLIST_KEY_UIApplicationSceneManifest_Generation[sdk=iphoneos*]" = YES;
 				"INFOPLIST_KEY_UIApplicationSceneManifest_Generation[sdk=iphonesimulator*]" = YES;
 				"INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents[sdk=iphoneos*]" = YES;
@@ -536,6 +538,7 @@
 				CODE_SIGN_ENTITLEMENTS = GravatarApp/GravatarApp.entitlements;
 				ENABLE_PREVIEWS = YES;
 				GENERATE_INFOPLIST_FILE = YES;
+				INFOPLIST_KEY_NSCameraUsageDescription = "Upload new avatars";
 				"INFOPLIST_KEY_UIApplicationSceneManifest_Generation[sdk=iphoneos*]" = YES;
 				"INFOPLIST_KEY_UIApplicationSceneManifest_Generation[sdk=iphonesimulator*]" = YES;
 				"INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents[sdk=iphoneos*]" = YES;
@@ -634,7 +637,7 @@
 			repositoryURL = "https://github.com/Automattic/Gravatar-SDK-iOS.git";
 			requirement = {
 				kind = revision;
-				revision = f32fe832d31fd19df4b6d94800abb231bfd085c8;
+				revision = 356d43dacd780d6476f503e0a4c0af090fd83762;
 			};
 		};
 /* End XCRemoteSwiftPackageReference section */
diff --git a/GravatarApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved b/GravatarApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
index 27ad32a9..78302e6d 100644
--- a/GravatarApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/GravatarApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -1,5 +1,5 @@
 {
-  "originHash" : "836a6c1f59ccca7cc2a410d4156881da4efbded0acf8657b79c1288717ea525b",
+  "originHash" : "437adc9d79bbd65f1a26832e8f13a2ef3fffd3eb33063cdda86c8dde1cd94dce",
   "pins" : [
     {
       "identity" : "automattic-tracks-ios",
@@ -15,7 +15,7 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/Automattic/Gravatar-SDK-iOS.git",
       "state" : {
-        "revision" : "f32fe832d31fd19df4b6d94800abb231bfd085c8"
+        "revision" : "356d43dacd780d6476f503e0a4c0af090fd83762"
       }
     },
     {
diff --git a/GravatarApp/AvatarPicker/Avatar/AvatarActionsMenu.swift b/GravatarApp/AvatarPicker/Avatar/AvatarActionsMenu.swift
new file mode 100644
index 00000000..51fc3e69
--- /dev/null
+++ b/GravatarApp/AvatarPicker/Avatar/AvatarActionsMenu.swift
@@ -0,0 +1,60 @@
+import SwiftUI
+
+struct AvatarActionsMenu<Label>: View where Label: View {
+    let isAvatarSelected: Bool
+    let label: () -> Label
+    let onActionSelected: (AvatarAction) -> Void
+
+    var body: some View {
+        actionsMenu(isSelected: isAvatarSelected, label: label)
+    }
+
+    func actionsMenu(isSelected: Bool, label: () -> Label) -> some View {
+        Menu {
+            Section {
+                if !isSelected {
+                    button(for: .select)
+                }
+                button(for: .share)
+                // TODO: We might use this soon, so keeping it commented for now
+                /**
+                 if #available(iOS 18.2, *) {
+                     if EnvironmentValues().supportsImagePlayground {
+                         button(for: .playground)
+                     }
+                 }
+                  */
+                button(for: .altText)
+            }
+            Section {
+                button(for: .delete)
+            }
+        } label: {
+            label()
+        }
+    }
+
+    private func button(
+        for action: AvatarAction,
+        isSelected selected: Bool = false,
+        systemImageWhenSelected systemImage: String = "checkmark"
+    ) -> some View {
+        Button(role: action.role) {
+            onActionSelected(action)
+        } label: {
+            buttonLabel(forAction: action)
+        }
+    }
+
+    private func buttonLabel(forAction action: AvatarAction, title: String? = nil, systemImage: String) -> SwiftUI.Label<Text, Image> {
+        buttonLabel(forAction: action, title: title, image: Image(systemName: systemImage))
+    }
+
+    private func buttonLabel(forAction action: AvatarAction, title: String? = nil, image: Image? = nil) -> SwiftUI.Label<Text, Image> {
+        SwiftUI.Label {
+            Text(title ?? action.localizedTitle)
+        } icon: {
+            image ?? action.icon
+        }
+    }
+}
diff --git a/GravatarApp/AvatarPicker/Avatar/AvatarImageModel.swift b/GravatarApp/AvatarPicker/Avatar/AvatarImageModel.swift
index ab6a5aec..1bb57d22 100644
--- a/GravatarApp/AvatarPicker/Avatar/AvatarImageModel.swift
+++ b/GravatarApp/AvatarPicker/Avatar/AvatarImageModel.swift
@@ -103,7 +103,12 @@ extension AvatarImageModel {
 
 extension AvatarImageModel {
     /// This is meant to be used in previews and unit tests only.
-    static func preview_init(id: String, source: Source, state: State = .loaded, isSelected: Bool = false) -> Self {
+    static func preview_init(
+        id: String = "1",
+        source: Source = .remote(url: "https://gravatar.com/"),
+        state: State = .loaded,
+        isSelected: Bool = false
+    ) -> Self {
         AvatarImageModel(id: id, source: source, state: state, isSelected: isSelected, altText: "")
     }
 }
diff --git a/GravatarApp/AvatarPicker/Avatar/AvatarPickerAvatarView.swift b/GravatarApp/AvatarPicker/Avatar/AvatarPickerAvatarView.swift
index a815d46a..34d2d12a 100644
--- a/GravatarApp/AvatarPicker/Avatar/AvatarPickerAvatarView.swift
+++ b/GravatarApp/AvatarPicker/Avatar/AvatarPickerAvatarView.swift
@@ -1,96 +1,135 @@
 import GravatarUI
 import SwiftUI
 
-struct FailedUploadInfo {
-    let avatarLocalID: String
-    let supportsRetry: Bool
-    let errorMessage: String
-}
-
-extension CGFloat {
-    fileprivate static let horizontalPadding: CGFloat = .DS.Padding.double
-    fileprivate static let selectedBorderWidth: CGFloat = 3
-    fileprivate static let avatarCornerRadius: CGFloat = 6
-}
-
 struct AvatarPickerAvatarView: View {
     let avatar: AvatarImageModel
     let maxSize: CGFloat
     let minSize: CGFloat
     let shouldSelect: () -> Bool
-    let onFailedUploadTapped: (FailedUploadInfo) -> Void
-    let onActionTap: (AvatarAction) -> Void
+    let avatarUploadErrorAction: (AvatarUploadErrorAction) -> Void
+    let onActionSelected: (AvatarAction) -> Void
+
+    @State private var uploadError: AvatarUploadErrorInfo?
+    @State private var presentUploadErrorActions: Bool = false
 
     var body: some View {
-        ZStack(alignment: .bottomTrailing) {
-            AvatarView(
-                url: avatar.url,
-                placeholderView: {
-                    avatar.localImage?.resizable()
-                },
-                loadingView: {
-                    ProgressView()
-                        .progressViewStyle(CircularProgressViewStyle())
-                },
-                transaction: .init(animation: .smooth)
-            )
-            .scaledToFill()
-            .frame(minWidth: minSize, maxWidth: maxSize, minHeight: minSize, maxHeight: maxSize)
-            .background(Color(UIColor.secondarySystemBackground))
-            .aspectRatio(1, contentMode: .fill)
-            .shape(
-                RoundedRectangle(cornerRadius: .avatarCornerRadius),
-                borderColor: Color.clear,
-                borderWidth: 0
-            )
-            .overlay {
-                switch avatar.state {
-                case .loading:
-                    DimmingActivityIndicator()
-                        .cornerRadius(.avatarCornerRadius)
-                case .error(let supportsRetry, let errorMessage):
-                    DimmingErrorButton {
-                        onFailedUploadTapped(
-                            .init(
-                                avatarLocalID: avatar.id,
-                                supportsRetry: supportsRetry,
-                                errorMessage: errorMessage
-                            )
-                        )
-                    }
-                    .cornerRadius(.avatarCornerRadius)
-                case .loaded:
-                    if shouldSelect() {
-                        ZStack {
-                            // We want an inner border, so we draw it in the overlay
-                            RoundedRectangle(cornerRadius: .avatarCornerRadius)
-                                .stroke(Color.primary, lineWidth: .selectedBorderWidth)
-                                .padding(1)
-                            CheckmarkCircleView()
-                                .transition(.scale)
-                        }
-                    } else {
-                        EmptyView()
-                    }
-                }
-            }
-            .transition(.opacity)
+        AvatarView(
+            url: avatar.url,
+            placeholderView: {
+                avatar.localImage?.resizable()
+            },
+            loadingView: {
+                ProgressView()
+                    .progressViewStyle(CircularProgressViewStyle())
+            },
+            transaction: .init(animation: .smooth)
+        )
+        .scaledToFill()
+        .frame(minWidth: minSize, maxWidth: maxSize, minHeight: minSize, maxHeight: maxSize)
+        .background(Color(UIColor.secondarySystemBackground))
+        .aspectRatio(1, contentMode: .fill)
+        .shape(
+            RoundedRectangle(cornerRadius: .avatarCornerRadius),
+            borderColor: Color.clear,
+            borderWidth: 0
+        )
+        .overlay {
+            avatarOverlayView(for: avatar.state)
         }
+        .transition(.opacity)
+        .avatarUploadErrorDialog(isPresented: $presentUploadErrorActions, uploadError: $uploadError, action: { action in
+            avatarUploadErrorAction(action)
+        })
         .accessibilityElement(children: .combine)
         .accessibilityAddTraits(.isButton)
         .accessibilityAddTraits(shouldSelect() ? .isSelected : [])
         .accessibilityLabel(Text(avatar.accessibilityLabel(altText: avatar.altText)))
     }
+
+    @ViewBuilder
+    private func avatarOverlayView(for state: AvatarImageModel.State) -> some View {
+        switch state {
+        case .loading:
+            loadingOverlayView()
+        case .error(let supportsRetry, let errorMessage):
+            errorOverlayView(supportsRetry: supportsRetry, errorMessage: errorMessage)
+        case .loaded:
+            loadedOverlayView(avatarSelected: shouldSelect())
+        }
+    }
+
+    private func loadingOverlayView() -> some View {
+        DimmingActivityIndicator()
+            .cornerRadius(.avatarCornerRadius)
+    }
+
+    private func errorOverlayView(supportsRetry: Bool, errorMessage: String) -> some View {
+        DimmingErrorButton {
+            uploadError = AvatarUploadErrorInfo(avatarLocalID: avatar.id, supportsRetry: supportsRetry, errorMessage: errorMessage)
+            presentUploadErrorActions = true
+        }
+        .cornerRadius(.avatarCornerRadius)
+    }
+
+    @ViewBuilder
+    private func loadedOverlayView(avatarSelected: Bool) -> some View {
+        if avatarSelected {
+            selectedCheckmarkView()
+        }
+        AvatarActionsMenu(isAvatarSelected: avatarSelected) {
+            Color.clear
+        } onActionSelected: { action in
+            onActionSelected(action)
+        }
+    }
+
+    private func selectedCheckmarkView() -> some View {
+        ZStack {
+            // We want an inner border, so we draw it in the overlay
+            RoundedRectangle(cornerRadius: .avatarCornerRadius)
+                .stroke(Color.primary, lineWidth: .selectedBorderWidth)
+                .padding(1)
+            CheckmarkCircleView()
+                .transition(.scale)
+        }
+    }
+}
+
+extension CGFloat {
+    fileprivate static let horizontalPadding: CGFloat = .DS.Padding.double
+    fileprivate static let selectedBorderWidth: CGFloat = 3
+    fileprivate static let avatarCornerRadius: CGFloat = 6
 }
 
 #Preview {
-    let avatar = AvatarImageModel.preview_init(
-        id: "1",
-        source: .remote(url: "https://gravatar.com/userimage/110207384/aa5f129a2ec75162cee9a1f0c472356a.jpeg?size=256")
-    )
+    let avatar = AvatarImageModel.preview_init()
+    let avatarLoading = AvatarImageModel.preview_init(state: .loading)
+    let avatarError = AvatarImageModel.preview_init(state: .error(
+        supportsRetry: true,
+        errorMessage: "Something went wrong. Retry?"
+    ))
+    let avatarErrorNoRetry = AvatarImageModel.preview_init(state: .error(
+        supportsRetry: false,
+        errorMessage: "Something terrible happened."
+    ))
     AvatarPickerAvatarView(avatar: avatar, maxSize: 90, minSize: 80) {
         false
-    } onFailedUploadTapped: { _ in
-    } onActionTap: { _ in
-    }
+    } avatarUploadErrorAction: { _ in
+    } onActionSelected: { _ in }
+    AvatarPickerAvatarView(avatar: avatar, maxSize: 90, minSize: 80) {
+        true
+    } avatarUploadErrorAction: { _ in
+    } onActionSelected: { _ in }
+    AvatarPickerAvatarView(avatar: avatarLoading, maxSize: 90, minSize: 80) {
+        true
+    } avatarUploadErrorAction: { _ in
+    } onActionSelected: { _ in }
+    AvatarPickerAvatarView(avatar: avatarError, maxSize: 90, minSize: 80) {
+        true
+    } avatarUploadErrorAction: { _ in
+    } onActionSelected: { _ in }
+    AvatarPickerAvatarView(avatar: avatarErrorNoRetry, maxSize: 90, minSize: 80) {
+        true
+    } avatarUploadErrorAction: { _ in
+    } onActionSelected: { _ in }
 }
diff --git a/GravatarApp/AvatarPicker/AvatarPickerView.swift b/GravatarApp/AvatarPicker/AvatarPickerView.swift
index 82ea04dd..446843e5 100644
--- a/GravatarApp/AvatarPicker/AvatarPickerView.swift
+++ b/GravatarApp/AvatarPicker/AvatarPickerView.swift
@@ -24,41 +24,77 @@ struct AvatarPickerView: View {
                     .padding()
                 Spacer()
             } else {
-                gridView()
-                    .transition(.opacity)
+                ScrollView {
+                    ImagePickerSectionView(onImageSelected: { selectedImage in
+                        Task {
+                            await avatarPickerModel.upload(selectedImage)
+                        }
+                    })
+                    .appPadding()
+                    gridView()
+                        .transition(.opacity)
+                }
             }
         }
         .ignoresSafeArea(.container, edges: .top)
     }
 
     func gridView() -> some View {
-        ScrollView {
-            VStack(alignment: .leading) {
-                VStack(alignment: .leading, spacing: 0) {
-                    Text("Previous avatars")
-                        .font(.headline)
-                    Text("Tap for options")
-                        .font(.subheadline)
-                        .foregroundStyle(.secondary)
-                }
-                AvatarGrid(grid: avatarPickerModel.grid) { avatar, _ in
-                    Task {
-                        _ = await avatarPickerModel.selectAvatar(with: avatar.id)
-                        forceRefreshHeader = true
-                    }
-                } onFailedUploadTapped: { _ in
-                }
+        VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: 0) {
+                Text("Previous avatars")
+                    .font(.headline)
+                Text("Tap for options")
+                    .font(.subheadline)
+                    .foregroundStyle(.secondary)
+            }
+            AvatarGrid(
+                grid: avatarPickerModel.grid,
+                onAvatarActionSelected: avatarAction,
+                avatarUploadErrorAction: avatarUploadErrorAction
+            )
+        }
+        .appPadding()
+    }
+
+    // MARK: - Actions
+
+    private func avatarAction(avatar: AvatarImageModel, action: AvatarAction) {
+        switch action {
+        case .select:
+            Task {
+                _ = await avatarPickerModel.selectAvatar(with: avatar.id)
+                forceRefreshHeader = true
+            }
+        default:
+            print("Action not implemented")
+        }
+    }
+
+    private func avatarUploadErrorAction(action: AvatarUploadErrorAction) {
+        switch action {
+        case .delete(let avatarID):
+            avatarPickerModel.deleteFailed(avatarID)
+        case .retry(let avatarID):
+            Task {
+                await avatarPickerModel.retryUpload(of: avatarID)
             }
-            .padding()
         }
     }
 }
 
+extension View {
+    func appPadding() -> some View {
+        self.padding(16)
+    }
+}
+
 #if DEBUG
 #Preview {
     AvatarPickerView(avatarPickerModel: .preview_init(avatars: [
         .init(id: "1", source: .remote(url: ""), state: .loaded, isSelected: false, altText: ""),
         .init(id: "2", source: .remote(url: ""), state: .loaded, isSelected: true, altText: ""),
+        .init(id: "3", source: .remote(url: ""), state: .loading, isSelected: false, altText: ""),
     ]), onLogout: {})
 }
 #endif
diff --git a/GravatarApp/AvatarPicker/AvatarPickerViewModel.swift b/GravatarApp/AvatarPicker/AvatarPickerViewModel.swift
index de516e39..7b879150 100644
--- a/GravatarApp/AvatarPicker/AvatarPickerViewModel.swift
+++ b/GravatarApp/AvatarPicker/AvatarPickerViewModel.swift
@@ -136,22 +136,6 @@ class AvatarPickerViewModel: ObservableObject {
         }
     }
 
-    func deleteFailed(_ id: String) {
-        _ = grid.deleteModel(id)
-    }
-
-    private func handleUploadError(imageID: String, squareImage: UIImage, supportsRetry: Bool, errorMessage: String) {
-        let storedModel = grid.model(with: imageID)
-        let newModel = AvatarImageModel(
-            id: imageID,
-            source: .local(image: squareImage),
-            state: .error(supportsRetry: supportsRetry, errorMessage: errorMessage),
-            isSelected: false,
-            altText: storedModel?.altText ?? ""
-        )
-        grid.replaceModel(withID: imageID, with: newModel)
-    }
-
     private func updateSelectedAvatarURL() {
         guard let selectedID = selectedAvatarResult?.value() else { return }
         grid.selectAvatar(withID: selectedID)
@@ -231,6 +215,111 @@ class AvatarPickerViewModel: ObservableObject {
             }
         }
     }
+
+    func upload(_ image: UIImage) async {
+        // SwiftUI doesn't update the UI if the grid is empty.
+        // objectWillChange forces the update.
+        objectWillChange.send()
+
+        let localID = UUID().uuidString
+
+        let localImageModel = AvatarImageModel(id: localID, source: .local(image: image), state: .loading, isSelected: false, altText: "")
+        grid.append(localImageModel)
+
+        await doUpload(squareImage: image, localID: localID, accessToken: authToken)
+    }
+
+    func retryUpload(of localID: String) async {
+        guard
+            let model = grid.avatars.first(where: { $0.id == localID }),
+            let localImage = model.localUIImage
+        else {
+            return
+        }
+        grid.setState(to: .loading, onAvatarWithID: localID)
+        await doUpload(squareImage: localImage, localID: localID, accessToken: authToken)
+    }
+
+    func deleteFailed(_ id: String) {
+        withAnimation {
+            _ = grid.deleteModel(id)
+        }
+    }
+
+    private func doUpload(squareImage: UIImage, localID: String, accessToken: String) async {
+        do {
+            let avatar = try await avatarService.upload(
+                squareImage,
+                selectionPolicy: .selectUploadedImageIfNoneSelected(for: .hashID(HashID(profile.hash))),
+                accessToken: accessToken
+            )
+
+            ImageCache.shared.setEntry(.ready(squareImage), for: avatar.imageURL)
+
+            let newModel = AvatarImageModel(with: avatar)
+            grid.replaceModel(withID: localID, with: newModel)
+
+            if avatar.isSelected {
+                grid.selectAvatar(withID: avatar.imageID)
+                self.selectedAvatarURL = URL(string: avatar.imageURL)
+                self.backendSelectedAvatarURL = URL(string: avatar.imageURL)
+            }
+        } catch ImageUploadError.responseError(reason: let .invalidHTTPStatusCode(response, errorPayload))
+            where response.statusCode == HTTPStatus.badRequest.rawValue || response.statusCode == HTTPStatus.payloadTooLarge.rawValue
+        {
+            let message: String = {
+                if response.statusCode == HTTPStatus.payloadTooLarge.rawValue {
+                    // The error response comes back as an HTML document for 413, which is unexpected.
+                    // Until BE starts to send the json, we'll handle 413 on the client side.
+                    return Localized.imageTooBigError
+                }
+                return errorPayload?.message ?? Localized.genericUploadError
+            }()
+            // If the status code is 400 then it means we got a validation error about this image and the operation is not suitable for retrying.
+            handleUploadError(
+                imageID: localID,
+                squareImage: squareImage,
+                supportsRetry: false,
+                errorMessage: message
+            )
+        } catch ImageUploadError.responseError(reason: let .invalidHTTPStatusCode(response, errorPayload))
+            where response.statusCode == HTTPStatus.unauthorized.rawValue
+        {
+            // If the status code is 401 (unauthorized), then it means the token is not valid and we should prompt the user accordingly.
+            handleUnrecoverableClientError(APIError.responseError(reason: .invalidHTTPStatusCode(response: response, errorPayload: errorPayload)))
+        } catch ImageUploadError.responseError(reason: let reason) where reason.urlSessionErrorLocalizedDescription != nil {
+            handleUploadError(
+                imageID: localID,
+                squareImage: squareImage,
+                supportsRetry: true,
+                errorMessage: reason.urlSessionErrorLocalizedDescription ?? Localized.genericUploadError
+            )
+        } catch {
+            handleUploadError(
+                imageID: localID,
+                squareImage: squareImage,
+                supportsRetry: true,
+                errorMessage: Localized.genericUploadError
+            )
+        }
+    }
+
+    private func handleUploadError(imageID: String, squareImage: UIImage, supportsRetry: Bool, errorMessage: String) {
+        let storedModel = grid.model(with: imageID)
+        let newModel = AvatarImageModel(
+            id: imageID,
+            source: .local(image: squareImage),
+            state: .error(supportsRetry: supportsRetry, errorMessage: errorMessage),
+            isSelected: false,
+            altText: storedModel?.altText ?? ""
+        )
+        grid.replaceModel(withID: imageID, with: newModel)
+    }
+
+    private func handleUnrecoverableClientError(_ error: Error) {
+        self.grid.setAvatars([])
+        self.gridResponseStatus = .failure(error)
+    }
 }
 
 extension AvatarPickerViewModel {
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorAction.swift b/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorAction.swift
new file mode 100644
index 00000000..02040153
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorAction.swift
@@ -0,0 +1,4 @@
+enum AvatarUploadErrorAction {
+    case delete(String)
+    case retry(String)
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorDialogModifier.swift b/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorDialogModifier.swift
new file mode 100644
index 00000000..1b53c0cb
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorDialogModifier.swift
@@ -0,0 +1,69 @@
+import SwiftUI
+
+struct AvatarUploadErrorDialogModifier: ViewModifier {
+    @Binding var isPresented: Bool
+    @Binding var uploadError: AvatarUploadErrorInfo?
+    let action: (AvatarUploadErrorAction) -> Void
+
+    func body(content: Content) -> some View {
+        content.confirmationDialog(
+            Localized.uploadErrorTitle,
+            isPresented: $isPresented,
+            titleVisibility: .visible,
+            presenting: uploadError
+        ) { error in
+            Button(role: .destructive) {
+                action(.delete(error.avatarLocalID))
+            } label: {
+                Label(Localized.removeButtonTitle, systemImage: "trash")
+            }
+            if error.supportsRetry {
+                Button {
+                    action(.retry(error.avatarLocalID))
+                } label: {
+                    Label(Localized.retryButtonTitle, systemImage: "arrow.clockwise")
+                }
+            }
+            Button(Localized.dismissButtonTitle, role: .cancel) {}
+        } message: { error in
+            Text(error.errorMessage)
+        }
+    }
+}
+
+extension View {
+    func avatarUploadErrorDialog(
+        isPresented: Binding<Bool>,
+        uploadError: Binding<AvatarUploadErrorInfo?>,
+        action: @escaping (AvatarUploadErrorAction) -> Void
+    ) -> some View {
+        self.modifier(AvatarUploadErrorDialogModifier(
+            isPresented: isPresented,
+            uploadError: uploadError,
+            action: action
+        ))
+    }
+}
+
+private enum Localized {
+    static let uploadErrorTitle = NSLocalizedString(
+        "AvatarPicker.Upload.Error.title",
+        value: "Upload has failed",
+        comment: "The title of the upload error dialog."
+    )
+    static let removeButtonTitle = NSLocalizedString(
+        "AvatarPicker.Upload.Error.Remove.title",
+        value: "Remove",
+        comment: "The title of the remove button on the upload error dialog."
+    )
+    static let retryButtonTitle = NSLocalizedString(
+        "AvatarPicker.Upload.Error.Retry.title",
+        value: "Retry",
+        comment: "The title of the retry button on the upload error dialog."
+    )
+    static let dismissButtonTitle = NSLocalizedString(
+        "AvatarPicker.Dismiss.title",
+        value: "Dismiss",
+        comment: "The title of the dismiss button on a confirmation dialog."
+    )
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorInfo.swift b/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorInfo.swift
new file mode 100644
index 00000000..7d64159f
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/AvatarUploadErrorInfo.swift
@@ -0,0 +1,5 @@
+struct AvatarUploadErrorInfo {
+    let avatarLocalID: String
+    let supportsRetry: Bool
+    let errorMessage: String
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/CameraImagePicker.swift b/GravatarApp/AvatarPicker/AvatarUpload/CameraImagePicker.swift
new file mode 100644
index 00000000..77043cb2
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/CameraImagePicker.swift
@@ -0,0 +1,51 @@
+import PhotosUI
+import SwiftUI
+
+struct CameraImagePicker: UIViewControllerRepresentable {
+    let onImageSelected: (ImagePickerItem) -> Void
+
+    @State private var pickedImage: ImagePickerItem? {
+        didSet {
+            if let pickedImage {
+                onImageSelected(pickedImage)
+            }
+        }
+    }
+
+    func makeUIViewController(context: Context) -> UIImagePickerController {
+        let imagePicker = UIImagePickerController()
+        // Forcefully use UIImagePickerController for device camera only
+        imagePicker.sourceType = .camera
+        imagePicker.delegate = context.coordinator
+        // Use custom image cropper
+        imagePicker.allowsEditing = false
+
+        return imagePicker
+    }
+
+    func updateUIViewController(_: UIImagePickerController, context: Context) {
+        // No-op
+    }
+
+    func makeCoordinator() -> Coordinator {
+        Coordinator(self)
+    }
+
+    final class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
+        var parent: CameraImagePicker
+
+        init(_ parent: CameraImagePicker) {
+            self.parent = parent
+        }
+
+        func imagePickerController(_: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
+            if let image = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
+                parent.pickedImage = .init(id: UUID().uuidString, image: image)
+            }
+        }
+
+        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
+            picker.dismiss(animated: true)
+        }
+    }
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/CropFrameOverlayView.swift b/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/CropFrameOverlayView.swift
new file mode 100644
index 00000000..dca680b4
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/CropFrameOverlayView.swift
@@ -0,0 +1,33 @@
+import UIKit
+
+class CropFrameOverlayView: UIView {
+    var scrollViewFrame: CGRect = .zero {
+        didSet {
+            setNeedsDisplay()
+        }
+    }
+
+    override func draw(_ rect: CGRect) {
+        guard let context = UIGraphicsGetCurrentContext() else { return }
+
+        // Fill the entire view with a semi black color
+        context.setFillColor(UIColor.black.withAlphaComponent(0.5).cgColor)
+        context.fill(rect)
+
+        // Create a circular path for the transparent hole
+        let circlePath = UIBezierPath(ovalIn: scrollViewFrame)
+
+        // Clear the circular area
+        context.addPath(circlePath.cgPath)
+        context.clip(using: .evenOdd)
+        context.clear(scrollViewFrame)
+
+        // Restore context to draw the square border
+        context.resetClip()
+
+        // Draw a white border around the square
+        context.setStrokeColor(UIColor.white.cgColor)
+        context.setLineWidth(1)
+        context.stroke(scrollViewFrame)
+    }
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/ImageCropper.swift b/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/ImageCropper.swift
new file mode 100644
index 00000000..f0ccf379
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/ImageCropper.swift
@@ -0,0 +1,28 @@
+import SwiftUI
+
+struct ImageCropper: UIViewControllerRepresentable {
+    let inputImage: UIImage
+    var editingDidFinish: @Sendable (UIImage) -> Void
+    var onCancel: () -> Void
+
+    typealias UIViewControllerType = UINavigationController
+
+    init(inputImage: UIImage, editingDidFinish: @escaping @Sendable (UIImage) -> Void, onCancel: @escaping () -> Void) {
+        self.inputImage = inputImage
+        self.editingDidFinish = editingDidFinish
+        self.onCancel = onCancel
+    }
+
+    func makeUIViewController(context: UIViewControllerRepresentableContext<ImageCropper>) -> UINavigationController {
+        ImageCropperViewController.wrappedInNavigationViewController(
+            image: inputImage,
+            onCompletion: editingDidFinish,
+            onCancel: onCancel
+        )
+    }
+
+    func updateUIViewController(
+        _: UINavigationController,
+        context: UIViewControllerRepresentableContext<ImageCropper>
+    ) {}
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/ImageCropperViewController.swift b/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/ImageCropperViewController.swift
new file mode 100644
index 00000000..147f3f6e
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/ImageCropper/ImageCropperViewController.swift
@@ -0,0 +1,277 @@
+import UIKit
+
+class ImageCropperViewController: UIViewController, UIScrollViewDelegate {
+    private enum Constants {
+        static let backgroundColor = UIColor.black
+        static let croperFrameSize: CGFloat = 320
+        static let maxOutputImageSizeInPixels: CGFloat = 1280
+    }
+
+    // ScrollView for zooming and panning
+    private let scrollView: UIScrollView = {
+        let scrollView = UIScrollView()
+        scrollView.isScrollEnabled = true
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
+        scrollView.showsVerticalScrollIndicator = false
+        scrollView.showsHorizontalScrollIndicator = false
+        scrollView.bouncesZoom = true
+        scrollView.bounces = true
+        scrollView.contentMode = .scaleAspectFit
+        return scrollView
+    }()
+
+    // ImageView for displaying the image
+    private let imageView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.isUserInteractionEnabled = true
+        imageView.contentMode = .scaleAspectFit
+        return imageView
+    }()
+
+    // View to show the cropping frame
+    private let cropFrameView: CropFrameOverlayView = {
+        let cropFrameView = CropFrameOverlayView()
+        cropFrameView.translatesAutoresizingMaskIntoConstraints = false
+        cropFrameView.backgroundColor = .clear
+        cropFrameView.isUserInteractionEnabled = false
+        return cropFrameView
+    }()
+
+    let inputImage: UIImage
+    var onCompletion: ((UIImage) -> Void)?
+    var onCancel: (() -> Void)?
+
+    lazy var cancelAction = UIAction { [weak self] _ in
+        self?.cancelWasPressed()
+    }
+
+    lazy var doneAction = UIAction { [weak self] _ in
+        self?.cropWasPressed()
+    }
+
+    init(image: UIImage) {
+        self.inputImage = image
+        super.init(nibName: nil, bundle: nil)
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        let appearance = UINavigationBarAppearance()
+        navigationController?.navigationBar.standardAppearance = appearance
+        navigationController?.navigationBar.scrollEdgeAppearance = appearance
+
+        view.addSubview(scrollView)
+        scrollView.addSubview(imageView)
+        view.addSubview(cropFrameView)
+        configureConstraints()
+
+        title = Localized.title
+
+        view.backgroundColor = Constants.backgroundColor
+        scrollView.delegate = self
+
+        setImageToCrop(image: inputImage)
+        setupToolbar()
+    }
+
+    private func setupToolbar() {
+        setToolbarItems([
+            UIBarButtonItem(systemItem: .cancel, primaryAction: cancelAction),
+            UIBarButtonItem(systemItem: .flexibleSpace),
+            UIBarButtonItem(systemItem: .done, primaryAction: doneAction),
+        ], animated: false)
+
+        navigationController?.isToolbarHidden = false
+
+        let toolBarAppearance = UIToolbarAppearance()
+        toolBarAppearance.backgroundColor = .secondarySystemBackground.resolvedColor(with: .init(userInterfaceStyle: .dark)).withAlphaComponent(0.7)
+        toolBarAppearance.backgroundEffect = nil
+
+        navigationController?.toolbar.compactAppearance = toolBarAppearance
+        navigationController?.toolbar.standardAppearance = toolBarAppearance
+        navigationController?.toolbar.scrollEdgeAppearance = toolBarAppearance
+        navigationController?.toolbar.compactScrollEdgeAppearance = toolBarAppearance
+        navigationController?.toolbar.tintColor = .white
+    }
+
+    private func configureConstraints() {
+        let scrollViewWidthConstraint = scrollView.widthAnchor.constraint(equalToConstant: Constants.croperFrameSize)
+        scrollViewWidthConstraint.priority = .defaultLow
+
+        NSLayoutConstraint.activate([
+            // scrollView
+            scrollView.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor),
+            view.trailingAnchor.constraint(greaterThanOrEqualTo: scrollView.trailingAnchor),
+            view.safeAreaLayoutGuide.bottomAnchor.constraint(greaterThanOrEqualTo: scrollView.bottomAnchor),
+            scrollView.topAnchor.constraint(greaterThanOrEqualTo: view.safeAreaLayoutGuide.topAnchor, constant: .DS.Padding.half),
+            scrollView.heightAnchor.constraint(equalTo: scrollView.widthAnchor),
+            scrollView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
+            scrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
+            scrollViewWidthConstraint,
+            // imageView
+            imageView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
+            imageView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
+            imageView.topAnchor.constraint(equalTo: scrollView.topAnchor),
+            imageView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
+            // crop frame
+            cropFrameView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            cropFrameView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            cropFrameView.topAnchor.constraint(equalTo: view.topAnchor),
+            cropFrameView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+        ])
+
+        imageView.frame = CGRect(x: 0, y: 0, width: scrollView.frame.width, height: scrollView.frame.height)
+    }
+
+    func setImageToCrop(image: UIImage) {
+        imageView.image = image
+        scrollView.layoutIfNeeded()
+        scrollView.clipsToBounds = false
+        imageView.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)
+        scrollView.contentSize = image.size
+        let scaleHeight = scrollView.frame.size.height / scrollView.contentSize.height
+        let scaleWidth = scrollView.frame.size.width / scrollView.contentSize.width
+        let minScale = max(scaleWidth, scaleHeight) // chosing the "max" to avoid having empty black space inside the crop frame
+        scrollView.minimumZoomScale = minScale
+        scrollView.maximumZoomScale = 1
+        scrollView.zoomScale = minScale
+
+        centerScrollViewContent()
+    }
+
+    private func centerScrollViewContent() {
+        let scrollViewSize = scrollView.bounds.size
+        let contentSize = scrollView.contentSize
+
+        // Calculate the horizontal and vertical offsets to center the content
+        let horizontalOffset = max(0, (contentSize.width - scrollViewSize.width) / 2)
+        let verticalOffset = max(0, (contentSize.height - scrollViewSize.height) / 2)
+
+        // Set the contentOffset to scroll to the calculated position
+        scrollView.setContentOffset(CGPoint(x: horizontalOffset, y: verticalOffset), animated: false)
+    }
+
+    // MARK: - Action Handlers
+
+    @objc
+    func cropWasPressed() {
+        guard let image = imageView.image?.correctlyOriented else { return }
+
+        let cropFrame = scrollView.frame
+        let zoomScale = scrollView.zoomScale
+
+        // Calculate the visible content offset in the scroll view (relative to the zoomed content)
+        let contentOffset = scrollView.contentOffset
+
+        // Convert crop frame into the image's coordinate system, adjusted by zoom scale
+        let visibleRect = CGRect(
+            x: (contentOffset.x + cropFrame.origin.x - scrollView.frame.origin.x) / zoomScale,
+            y: (contentOffset.y + cropFrame.origin.y - scrollView.frame.origin.y) / zoomScale,
+            width: cropFrame.width / zoomScale,
+            height: cropFrame.height / zoomScale
+        )
+
+        // cropping(to:) can return unequal edges since it adjusts the cropping rect to integral bounds.
+        guard let croppedCGImage = image.cgImage?.cropping(to: visibleRect) else { return }
+
+        let croppedUIImage = UIImage(cgImage: croppedCGImage, scale: UITraitCollection.current.displayScale, orientation: .up)
+
+        guard let result = croppedUIImage.square(maxLength: Constants.maxOutputImageSizeInPixels) else { return }
+        onCompletion?(result)
+    }
+
+    @objc
+    func cancelWasPressed() {
+        onCancel?()
+    }
+
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+
+        // Update the scrollViewFrame in the overlay view when the layout changes
+        let scrollViewFrameInSuperview = scrollView.convert(scrollView.bounds, to: view)
+        cropFrameView.scrollViewFrame = scrollViewFrameInSuperview
+
+        centerScrollViewContent()
+    }
+
+    // MARK: - UIScrollViewDelegate Methods
+
+    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
+        imageView
+    }
+
+    func scrollViewDidEndZooming(_: UIScrollView, with view: UIView?, atScale scale: CGFloat) {
+        // NO-OP:
+        // Required to enable scrollView Zooming
+    }
+
+    static func wrappedInNavigationViewController(
+        image: UIImage,
+        onCompletion: @escaping ((UIImage) -> Void),
+        onCancel: @escaping (() -> Void)
+    ) -> UINavigationController {
+        let imageCropController = ImageCropperViewController(image: image)
+        imageCropController.onCancel = onCancel
+        imageCropController.onCompletion = onCompletion
+        let navigationController = UINavigationController(rootViewController: imageCropController)
+        navigationController.modalPresentationStyle = .formSheet
+        return navigationController
+    }
+
+    private enum Localized {
+        static let title = NSLocalizedString(
+            "ImageCropper.title",
+            value: "Resize & Crop",
+            comment: "Screen title. Resize and crop an image."
+        )
+    }
+}
+
+@MainActor
+extension UIImage {
+    // Resize the UIImage fitting within a specified maximum size.
+    func square(maxLength maxLengthInPixels: CGFloat) -> UIImage? {
+        let scale = UITraitCollection.current.displayScale
+        let smallerEgde = min(size.width * scale, size.height * scale)
+        let squareEdge = floor(min(maxLengthInPixels, smallerEgde))
+        return downsize(to: squareEdge)
+    }
+
+    // Downsize to targetSquareEdgeInPixels
+    private func downsize(to targetSquareEdgeInPixels: CGFloat) -> UIImage? {
+        let scale = UITraitCollection.current.displayScale
+        let currentSizeInPixels: CGSize = .init(width: size.width * scale, height: size.height * scale)
+        // Downsize if this is not a square (to fix the unequal edges produced by cropping(to:) )
+        // OR if size is bigger than target.
+        guard currentSizeInPixels.width != currentSizeInPixels.height ||
+            targetSquareEdgeInPixels < currentSizeInPixels.width ||
+            targetSquareEdgeInPixels < currentSizeInPixels.height
+        else { return self }
+        let newSize = CGSize(width: targetSquareEdgeInPixels, height: targetSquareEdgeInPixels)
+        let format = UIGraphicsImageRendererFormat()
+        format.scale = 1
+        let renderer = UIGraphicsImageRenderer(size: newSize, format: format)
+        let resizedImage = renderer.image { _ in
+            self.draw(in: CGRect(origin: .zero, size: newSize))
+        }
+        return resizedImage
+    }
+
+    /// A UIImage instance with corrected orientation. If the instance's orientation is already `.up`, it simply returns the original.
+    fileprivate var correctlyOriented: UIImage? {
+        if imageOrientation == .up { return self }
+
+        UIGraphicsBeginImageContextWithOptions(size, false, scale)
+        draw(in: CGRect(origin: .zero, size: size))
+        let normalizedImage = UIGraphicsGetImageFromCurrentImageContext()
+        UIGraphicsEndImageContext()
+
+        return normalizedImage
+    }
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/ImageEditor.swift b/GravatarApp/AvatarPicker/AvatarUpload/ImageEditor.swift
new file mode 100644
index 00000000..4ff5389b
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/ImageEditor.swift
@@ -0,0 +1,29 @@
+import SwiftUI
+
+/// View with the full image edition experience.
+struct ImageEditor: View {
+    let item: ImagePickerItem
+    let onEditComplete: (UIImage) -> Void
+    let onCancel: (() -> Void)?
+
+    var body: some View {
+        ImageCropper(inputImage: item.image) { croppedImage in
+            Task { @MainActor in
+                onEditComplete(croppedImage)
+            }
+        } onCancel: {
+            onCancel?()
+        }
+        .ignoresSafeArea()
+    }
+}
+
+#Preview {
+    if let image = UIImage(systemName: "person") {
+        ImageEditor(
+            item: .init(id: "", image: image)
+        ) { _ in
+        }
+        onCancel: {}
+    }
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/ImagePickerSectionView.swift b/GravatarApp/AvatarPicker/AvatarUpload/ImagePickerSectionView.swift
new file mode 100644
index 00000000..0413bc41
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/ImagePickerSectionView.swift
@@ -0,0 +1,67 @@
+import SwiftUI
+
+struct ImagePickerSectionView: View {
+    let onImageSelected: (UIImage) -> Void
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            VStack(alignment: .leading, spacing: 0) {
+                Text(Localized.sectionHeader)
+                    .font(.headline)
+            }
+            HStack {
+                ForEach(ImagePickerSource.allCases, id: \.id) { source in
+                    ImagePicker(sourceType: source) {
+                        uploadAvatarButton(title: source.localizedTitle, systemImage: source.iconName)
+                    } onImageSelected: { image in
+                        onImageSelected(image)
+                    }
+                }
+            }
+        }
+    }
+
+    func uploadAvatarButton(title: String, systemImage: String) -> some View {
+        Label {
+            Text(title)
+                .font(.subheadline)
+        } icon: {
+            Image(systemName: systemImage)
+                .font(.title)
+        }
+        .labelStyle(.vertical)
+        .foregroundStyle(Color.DS.bluishColor)
+        .padding(.vertical, 16)
+        .frame(maxWidth: .infinity)
+        .background(Color.DS.bluishColor.opacity(0.15))
+        .cornerRadius(12)
+    }
+}
+
+private enum Localized {
+    static let sectionHeader = NSLocalizedString(
+        "AvatarPicker.UploadSection.header",
+        value: "Get a new look",
+        comment: "Title for the section with the upload image buttons"
+    )
+}
+
+struct VerticalLabelStyle: LabelStyle {
+    func makeBody(configuration: LabelStyle.Configuration) -> some View {
+        VStack(spacing: 8) {
+            configuration.icon
+            configuration.title
+        }
+    }
+}
+
+extension LabelStyle where Self == VerticalLabelStyle {
+    @MainActor static var vertical: VerticalLabelStyle {
+        VerticalLabelStyle()
+    }
+}
+
+#Preview("Avatar Upload") {
+    ImagePickerSectionView { _ in
+    }
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/ImagePlaygroundModifier.swift b/GravatarApp/AvatarPicker/AvatarUpload/ImagePlaygroundModifier.swift
new file mode 100644
index 00000000..e378436a
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/ImagePlaygroundModifier.swift
@@ -0,0 +1,41 @@
+import Foundation
+import SwiftUI
+
+struct ImagePlaygroundModifier: ViewModifier {
+    @Binding var isPresented: Bool
+    @State private var playgroundSelectedItem: ImagePickerItem?
+
+    let sourceImage: Image?
+    let onCompletion: (UIImage) -> Void
+    let onCancellation: (() -> Void)? = nil
+
+    func body(content: Content) -> some View {
+        content
+            .imagePlaygroundSheetIfAvailable(
+                isPresented: $isPresented,
+                sourceImage: sourceImage,
+                onCompletion: { url in
+                    if let image = UIImage(contentsOfFile: url.relativePath) {
+                        playgroundSelectedItem = ImagePickerItem(id: url.absoluteString, image: image)
+                    }
+                },
+                onCancellation: onCancellation
+            )
+            .sheet(item: $playgroundSelectedItem, content: { item in
+                imageEditor(with: item)
+            })
+    }
+
+    private func imageEditor(with item: ImagePickerItem) -> some View {
+        ImageEditor(
+            item: item,
+            onEditComplete: { image in
+                playgroundSelectedItem = nil
+                self.onCompletion(image)
+            },
+            onCancel: {
+                playgroundSelectedItem = nil
+            }
+        )
+    }
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/PhotosImagePicker.swift b/GravatarApp/AvatarPicker/AvatarUpload/PhotosImagePicker.swift
new file mode 100644
index 00000000..9731a76b
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/PhotosImagePicker.swift
@@ -0,0 +1,70 @@
+import PhotosUI
+import SwiftUI
+
+struct PhotosImagePicker: UIViewControllerRepresentable {
+    let onImageSelected: (ImagePickerItem) -> Void
+    let onCancel: () -> Void
+
+    @State private var pickedImage: ImagePickerItem? {
+        didSet {
+            if let pickedImage {
+                onImageSelected(pickedImage)
+            }
+        }
+    }
+
+    func makeUIViewController(context: Context) -> PHPickerViewController {
+        var config = PHPickerConfiguration()
+        config.filter = .images
+        config.selectionLimit = 1
+        let picker = PHPickerViewController(configuration: config)
+        picker.delegate = context.coordinator
+        return picker
+    }
+
+    func updateUIViewController(_: PHPickerViewController, context: Context) {
+        // No-op
+    }
+
+    func makeCoordinator() -> Coordinator {
+        Coordinator(self)
+    }
+
+    final class Coordinator: NSObject, PHPickerViewControllerDelegate {
+        let parent: PhotosImagePicker
+
+        init(_ parent: PhotosImagePicker) {
+            self.parent = parent
+        }
+
+        func picker(_: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
+            guard
+                let result = results.first,
+                result.itemProvider.canLoadObject(ofClass: UIImage.self)
+            else {
+                parent.onCancel()
+                return
+            }
+
+            Task {
+                let image = await result.itemProvider.loadUIImage()
+                let imageItem = ImagePickerItem(id: UUID().uuidString, image: image)
+                parent.pickedImage = imageItem
+            }
+        }
+    }
+}
+
+extension NSItemProvider {
+    fileprivate func loadUIImage() async -> UIImage {
+        await withCheckedContinuation { continuation in
+            loadObject(ofClass: UIImage.self) { itemReading, _ in
+                guard let image = itemReading as? UIImage else {
+                    return
+                }
+
+                continuation.resume(returning: image)
+            }
+        }
+    }
+}
diff --git a/GravatarApp/AvatarPicker/AvatarUpload/SystemImagePickerView.swift b/GravatarApp/AvatarPicker/AvatarUpload/SystemImagePickerView.swift
new file mode 100644
index 00000000..22ad3280
--- /dev/null
+++ b/GravatarApp/AvatarPicker/AvatarUpload/SystemImagePickerView.swift
@@ -0,0 +1,148 @@
+import ImagePlayground
+import PhotosUI
+import SwiftUI
+
+enum ImagePickerSource: CaseIterable, Identifiable {
+    case photoLibrary
+    case camera
+    case playground
+
+    static var allCases: [ImagePickerSource] {
+        var cases: [ImagePickerSource] = [.camera, .photoLibrary]
+        if #available(iOS 18.2, *) {
+            if EnvironmentValues().supportsImagePlayground {
+                cases.append(.playground)
+            }
+        }
+        return cases
+    }
+
+    var id: Int {
+        self.hashValue
+    }
+}
+
+struct ImagePicker<Label>: View where Label: View {
+    let sourceType: ImagePickerSource
+
+    @ViewBuilder var label: () -> Label
+
+    let onImageSelected: (UIImage) -> Void
+
+    @State private var imagePickerSelectedItem: ImagePickerItem?
+    @State private var presentPicker: Bool = false
+
+    var body: some View {
+        Button {
+            presentPicker = true
+        } label: {
+            label()
+        }
+        .modifier(ImagePlaygroundModifier(
+            isPresented: Binding(
+                get: { sourceType == .playground && presentPicker },
+                set: { presentPicker = $0 }
+            ),
+            sourceImage: nil,
+            onCompletion: { image in
+                onImageEdited(image)
+            }
+        ))
+        .sheet(
+            isPresented: Binding(get: {
+                sourceType != .playground && presentPicker
+            }, set: { presentPicker = $0 }),
+            content: {
+                // This allows to present different kind of pickers for different sources.
+                displayImagePicker(for: sourceType)
+                    .sheet(item: $imagePickerSelectedItem, content: { item in
+                        imageEditor(with: item)
+                    })
+            }
+        )
+    }
+
+    func imageEditor(with item: ImagePickerItem) -> some View {
+        ImageEditor(
+            item: item,
+            onEditComplete: { image in
+                onImageEdited(image)
+            },
+            onCancel: {
+                imagePickerSelectedItem = nil
+            }
+        )
+    }
+
+    private func onImageEdited(_ image: UIImage) {
+        imagePickerSelectedItem = nil
+        presentPicker = false
+        onImageSelected(image)
+    }
+
+    @ViewBuilder
+    private func displayImagePicker(for source: ImagePickerSource) -> some View {
+        switch source {
+        case .camera:
+            ZStack {
+                Color.black.ignoresSafeArea(edges: .all)
+                CameraImagePicker { item in
+                    pickerDidSelectImage(item)
+                }
+            }
+        case .photoLibrary:
+            PhotosImagePicker { item in
+                pickerDidSelectImage(item)
+            } onCancel: {
+                presentPicker = false
+            }.ignoresSafeArea()
+        case .playground:
+            EmptyView()
+        }
+    }
+
+    private func pickerDidSelectImage(_ item: ImagePickerItem) {
+        imagePickerSelectedItem = item
+    }
+}
+
+extension ImagePickerSource {
+    var iconName: String {
+        switch self {
+        case .camera:
+            "camera.fill"
+        case .photoLibrary:
+            "photo.on.rectangle.angled.fill"
+        case .playground:
+            "apple.image.playground.fill"
+        }
+    }
+
+    var localizedTitle: String {
+        switch self {
+        case .photoLibrary:
+            NSLocalizedString(
+                "SystemImagePickerView.Source.PhotoLibrary.title",
+                value: "Photos",
+                comment: "An option in a menu that display the user's Photo Library and allow them to choose a photo from it"
+            )
+        case .camera:
+            NSLocalizedString(
+                "SystemImagePickerView.Source.Camera.title",
+                value: "Camera",
+                comment: "An option in a menu that will display the camera for taking a picture"
+            )
+        case .playground:
+            NSLocalizedString(
+                "SystemImagePickerView.Source.Playground.title",
+                value: "AI",
+                comment: "An option to show the image playground"
+            )
+        }
+    }
+}
+
+struct ImagePickerItem: Identifiable, Sendable {
+    let id: String
+    let image: UIImage
+}
diff --git a/GravatarApp/AvatarPicker/Grid/AvatarGrid.swift b/GravatarApp/AvatarPicker/Grid/AvatarGrid.swift
index 2c430698..d584d440 100644
--- a/GravatarApp/AvatarPicker/Grid/AvatarGrid.swift
+++ b/GravatarApp/AvatarPicker/Grid/AvatarGrid.swift
@@ -9,8 +9,8 @@ extension CGFloat {
 struct AvatarGrid: View {
     @ObservedObject var grid: AvatarGridModel
 
-    let onAvatarActionTap: (AvatarImageModel, AvatarAction) -> Void
-    let onFailedUploadTapped: (FailedUploadInfo) -> Void
+    let onAvatarActionSelected: (AvatarImageModel, AvatarAction) -> Void
+    let avatarUploadErrorAction: (AvatarUploadErrorAction) -> Void
 
     var body: some View {
         let columns: [GridItem] = [GridItem(
@@ -23,11 +23,7 @@ struct AvatarGrid: View {
 
         LazyVGrid(columns: columns, spacing: .avatarSpacing) {
             ForEach(grid.avatars) { avatar in
-                Menu {
-                    menuItems(for: avatar)
-                } label: {
-                    avatarView(for: avatar, maxSize: .maxAvatarWidth, minSize: .minAvatarWidth)
-                }
+                avatarView(for: avatar, maxSize: .maxAvatarWidth, minSize: .minAvatarWidth)
             }
         }
     }
@@ -42,55 +38,31 @@ struct AvatarGrid: View {
             shouldSelect: {
                 grid.selectedAvatar?.id == avatar.id
             },
-            onFailedUploadTapped: onFailedUploadTapped,
-            onActionTap: { action in
-                onAvatarActionTap(avatar, action)
+            avatarUploadErrorAction: avatarUploadErrorAction,
+            onActionSelected: { action in
+                onAvatarActionSelected(avatar, action)
             }
         )
     }
 
-    @ViewBuilder
-    func menuItems(for avatar: AvatarImageModel) -> some View {
-        Button(role: .none) {
-            onAvatarActionTap(avatar, .delete)
-        } label: {
-            Label(
-                title: { Text(AvatarAction.select.localizedTitle) },
-                icon: { AvatarAction.select.icon }
-            )
-        }
-    }
-
     // MARK: - Helpers
-
-    func columsCount(for width: CGFloat) -> Int {
-        max(
-            Int((width + .avatarSpacing) / (.maxAvatarWidth + .avatarSpacing)),
-            1
-        )
-    }
-
-    func itemSize(for width: CGFloat, columnsCount: Int) -> CGFloat {
-        (width - (CGFloat(columnsCount - 1) * .avatarSpacing)) / CGFloat(columnsCount)
-    }
 }
 
 #Preview {
     let newAvatarModel: @Sendable (UIImage?) -> AvatarImageModel = { image in
         AvatarImageModel.preview_init(id: UUID().uuidString, source: .local(image: image ?? UIImage()))
     }
-    let initialAvatarCell = newAvatarModel(nil)
+    let selectedModel = newAvatarModel(nil)
     let grid = AvatarGridModel(
-        avatars: [initialAvatarCell]
+        avatars: [selectedModel, newAvatarModel(nil)]
     )
-    grid.selectAvatar(initialAvatarCell)
+    grid.selectAvatar(selectedModel)
 
     return VStack {
         AvatarGrid(grid: grid) { avatar, _ in
             grid.selectAvatar(withID: avatar.id)
-        } onFailedUploadTapped: { _ in
-        }
-        .padding()
+        } avatarUploadErrorAction: { _ in }
+            .padding()
         Button("Add avatar cell") {
             grid.append(newAvatarModel(nil))
         }
diff --git a/GravatarApp/Networking/HTTPStatus.swift b/GravatarApp/Networking/HTTPStatus.swift
index 5a1a17c6..437031c0 100644
--- a/GravatarApp/Networking/HTTPStatus.swift
+++ b/GravatarApp/Networking/HTTPStatus.swift
@@ -1,6 +1,3 @@
-import Foundation
-
-/// Some HTTP status codes we handle
 enum HTTPStatus: Int {
     case badRequest = 400
     case unauthorized = 401
diff --git a/GravatarAppTests/AvatarTests/AvatarPickerViewModelTests.swift b/GravatarAppTests/AvatarTests/AvatarPickerViewModelTests.swift
index c84ae6e2..eb672f16 100644
--- a/GravatarAppTests/AvatarTests/AvatarPickerViewModelTests.swift
+++ b/GravatarAppTests/AvatarTests/AvatarPickerViewModelTests.swift
@@ -209,12 +209,64 @@ final class AvatarPickerViewModelTests {
         let updatedAvatar = model.grid.avatars[0]
         #expect(updatedAvatar.altText == originalAltText, "Alt text should not have changed")
     }
-}
 
-enum HTTPStatus: Int {
-    case badRequest = 400
-    case unauthorized = 401
-    case forbidden = 403
-    case notFound = 404
-    case payloadTooLarge = 413
+    @Test("Test avatar upload")
+    func avatarUpload() async throws {
+        #expect(model.grid.avatars.count == 0)
+        let task = Task {
+            await model.upload(ImageHelper.testImage)
+        }
+
+        try await Task.sleep(for: .milliseconds(0.1)) // execute task
+        #expect(model.grid.avatars.count == 1)
+        #expect(model.grid.avatars.first?.state == .loading)
+
+        _ = await task.result
+
+        #expect(model.grid.selectedAvatar?.state == .loaded)
+    }
+
+    @Test("Test avatar upload failed")
+    func avatarUploadFailed() async throws {
+        let urlSession = URLSessionAvatarPickerMock(shouldSimulateNoNetworkConnection: true)
+        model = Self.createModel(session: urlSession)
+
+        #expect(model.grid.avatars.count == 0)
+
+        await model.upload(ImageHelper.testImage)
+
+        #expect(model.grid.avatars.count == 1)
+        let avatar = model.grid.avatars.first!
+
+        if case .error(let supportsRetry, let errorMessage) = avatar.state {
+            #expect(supportsRetry == true)
+            #expect(errorMessage.isEmpty == false)
+        } else {
+            Issue.record("Unexpected avatar state: \(avatar)")
+        }
+    }
+
+    @Test("Test avatar upload retry")
+    func avatarUploadRetry() async throws {
+        let urlSession = URLSessionAvatarPickerMock(shouldSimulateNoNetworkConnection: true)
+        model = Self.createModel(session: urlSession)
+
+        #expect(model.grid.avatars.count == 0)
+
+        await model.upload(ImageHelper.testImage)
+
+        #expect(model.grid.avatars.count == 1)
+        let avatar = model.grid.avatars.first!
+
+        switch avatar.state {
+        case .loaded, .loading: Issue.record("Unexpected avatar state: \(avatar)")
+        default: break // continue with error state
+        }
+
+        urlSession.shouldSimulateNoNetworkConnection = false
+
+        await model.retryUpload(of: avatar.id)
+
+        #expect(model.grid.selectedAvatar?.state == .loaded)
+    }
 }
diff --git a/GravatarAppTests/Helpers/URLSessionAvatarPickerMock.swift b/GravatarAppTests/Helpers/URLSessionAvatarPickerMock.swift
index 0cb31bb7..9394e377 100644
--- a/GravatarAppTests/Helpers/URLSessionAvatarPickerMock.swift
+++ b/GravatarAppTests/Helpers/URLSessionAvatarPickerMock.swift
@@ -5,7 +5,8 @@ import GravatarUI
 final class URLSessionAvatarPickerMock: URLSessionProtocol {
     static let internetLostErrorMessage: String = "The network connection was lost"
     let returnErrorCode: Int?
-    let shouldSimulateNoNetworkConnection: Bool
+
+    var shouldSimulateNoNetworkConnection: Bool
 
     init(returnErrorCode: Int? = nil, shouldSimulateNoNetworkConnection: Bool = false) {
         self.returnErrorCode = returnErrorCode
@@ -47,6 +48,13 @@ final class URLSessionAvatarPickerMock: URLSessionProtocol {
     }
 
     func upload(for request: URLRequest, from bodyData: Data) async throws -> (Data, URLResponse) {
+        if shouldSimulateNoNetworkConnection {
+            throw NSError(
+                domain: NSURLErrorDomain,
+                code: -1005,
+                userInfo: [NSLocalizedDescriptionKey: URLSessionAvatarPickerMock.internetLostErrorMessage]
+            )
+        }
         if let returnErrorCode {
             return (Data("".utf8), HTTPURLResponse.errorResponse(code: returnErrorCode))
         }