Implement album feature on mobile (#420)

* Refactor sharing to album * Added library page in the bottom navigation bar * Refactor SharedAlbumService to album service * Refactor apiProvider to its file * Added image grid * render album thumbnail * Using the wrap to render thumbnail and album info better * Navigate to album viewer * After deletion, navigate to the respective page of the shared and non-shared album * Correctly remove album in local state * Refactor create album page * Implemented create non-shared album
2025-10-29 17:40:28 +00:00 · 2022-08-03 00:04:34 -05:00
parent 0e85b0fd8f
commit e8d1f89a47
42 changed files with 521 additions and 154 deletions
--- a/mobile/lib/modules/album/models/album_viewer_page_state.model.dart
+++ b/mobile/lib/modules/album/models/album_viewer_page_state.model.dart
@@ -0,0 +1,57 @@
+import 'dart:convert';
+
+class AlbumViewerPageState {
+  final bool isEditAlbum;
+  final String editTitleText;
+  AlbumViewerPageState({
+    required this.isEditAlbum,
+    required this.editTitleText,
+  });
+
+  AlbumViewerPageState copyWith({
+    bool? isEditAlbum,
+    String? editTitleText,
+  }) {
+    return AlbumViewerPageState(
+      isEditAlbum: isEditAlbum ?? this.isEditAlbum,
+      editTitleText: editTitleText ?? this.editTitleText,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    final result = <String, dynamic>{};
+
+    result.addAll({'isEditAlbum': isEditAlbum});
+    result.addAll({'editTitleText': editTitleText});
+
+    return result;
+  }
+
+  factory AlbumViewerPageState.fromMap(Map<String, dynamic> map) {
+    return AlbumViewerPageState(
+      isEditAlbum: map['isEditAlbum'] ?? false,
+      editTitleText: map['editTitleText'] ?? '',
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory AlbumViewerPageState.fromJson(String source) =>
+      AlbumViewerPageState.fromMap(json.decode(source));
+
+  @override
+  String toString() =>
+      'AlbumViewerPageState(isEditAlbum: $isEditAlbum, editTitleText: $editTitleText)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is AlbumViewerPageState &&
+        other.isEditAlbum == isEditAlbum &&
+        other.editTitleText == editTitleText;
+  }
+
+  @override
+  int get hashCode => isEditAlbum.hashCode ^ editTitleText.hashCode;
+}
--- a/mobile/lib/modules/album/models/asset_selection_page_result.model.dart
+++ b/mobile/lib/modules/album/models/asset_selection_page_result.model.dart
@@ -0,0 +1,49 @@
+import 'package:collection/collection.dart';
+
+import 'package:openapi/api.dart';
+
+class AssetSelectionPageResult {
+  final Set<AssetResponseDto> selectedNewAsset;
+  final Set<AssetResponseDto> selectedAdditionalAsset;
+  final bool isAlbumExist;
+
+  AssetSelectionPageResult({
+    required this.selectedNewAsset,
+    required this.selectedAdditionalAsset,
+    required this.isAlbumExist,
+  });
+
+  AssetSelectionPageResult copyWith({
+    Set<AssetResponseDto>? selectedNewAsset,
+    Set<AssetResponseDto>? selectedAdditionalAsset,
+    bool? isAlbumExist,
+  }) {
+    return AssetSelectionPageResult(
+      selectedNewAsset: selectedNewAsset ?? this.selectedNewAsset,
+      selectedAdditionalAsset:
+          selectedAdditionalAsset ?? this.selectedAdditionalAsset,
+      isAlbumExist: isAlbumExist ?? this.isAlbumExist,
+    );
+  }
+
+  @override
+  String toString() =>
+      'AssetSelectionPageResult(selectedNewAsset: $selectedNewAsset, selectedAdditionalAsset: $selectedAdditionalAsset, isAlbumExist: $isAlbumExist)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    final setEquals = const DeepCollectionEquality().equals;
+
+    return other is AssetSelectionPageResult &&
+        setEquals(other.selectedNewAsset, selectedNewAsset) &&
+        setEquals(other.selectedAdditionalAsset, selectedAdditionalAsset) &&
+        other.isAlbumExist == isAlbumExist;
+  }
+
+  @override
+  int get hashCode =>
+      selectedNewAsset.hashCode ^
+      selectedAdditionalAsset.hashCode ^
+      isAlbumExist.hashCode;
+}
--- a/mobile/lib/modules/album/models/asset_selection_state.model.dart
+++ b/mobile/lib/modules/album/models/asset_selection_state.model.dart
@@ -0,0 +1,78 @@
+import 'package:collection/collection.dart';
+
+import 'package:openapi/api.dart';
+
+class AssetSelectionState {
+  final Set<String> selectedMonths;
+  final Set<AssetResponseDto> selectedNewAssetsForAlbum;
+  final Set<AssetResponseDto> selectedAdditionalAssetsForAlbum;
+  final Set<AssetResponseDto> selectedAssetsInAlbumViewer;
+  final bool isMultiselectEnable;
+
+  /// Indicate the asset selection page is navigated from existing album
+  final bool isAlbumExist;
+  AssetSelectionState({
+    required this.selectedMonths,
+    required this.selectedNewAssetsForAlbum,
+    required this.selectedAdditionalAssetsForAlbum,
+    required this.selectedAssetsInAlbumViewer,
+    required this.isMultiselectEnable,
+    required this.isAlbumExist,
+  });
+
+  AssetSelectionState copyWith({
+    Set<String>? selectedMonths,
+    Set<AssetResponseDto>? selectedNewAssetsForAlbum,
+    Set<AssetResponseDto>? selectedAdditionalAssetsForAlbum,
+    Set<AssetResponseDto>? selectedAssetsInAlbumViewer,
+    bool? isMultiselectEnable,
+    bool? isAlbumExist,
+  }) {
+    return AssetSelectionState(
+      selectedMonths: selectedMonths ?? this.selectedMonths,
+      selectedNewAssetsForAlbum:
+          selectedNewAssetsForAlbum ?? this.selectedNewAssetsForAlbum,
+      selectedAdditionalAssetsForAlbum: selectedAdditionalAssetsForAlbum ??
+          this.selectedAdditionalAssetsForAlbum,
+      selectedAssetsInAlbumViewer:
+          selectedAssetsInAlbumViewer ?? this.selectedAssetsInAlbumViewer,
+      isMultiselectEnable: isMultiselectEnable ?? this.isMultiselectEnable,
+      isAlbumExist: isAlbumExist ?? this.isAlbumExist,
+    );
+  }
+
+  @override
+  String toString() {
+    return 'AssetSelectionState(selectedMonths: $selectedMonths, selectedNewAssetsForAlbum: $selectedNewAssetsForAlbum, selectedAdditionalAssetsForAlbum: $selectedAdditionalAssetsForAlbum, selectedAssetsInAlbumViewer: $selectedAssetsInAlbumViewer, isMultiselectEnable: $isMultiselectEnable, isAlbumExist: $isAlbumExist)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    final setEquals = const DeepCollectionEquality().equals;
+
+    return other is AssetSelectionState &&
+        setEquals(other.selectedMonths, selectedMonths) &&
+        setEquals(other.selectedNewAssetsForAlbum, selectedNewAssetsForAlbum) &&
+        setEquals(
+          other.selectedAdditionalAssetsForAlbum,
+          selectedAdditionalAssetsForAlbum,
+        ) &&
+        setEquals(
+          other.selectedAssetsInAlbumViewer,
+          selectedAssetsInAlbumViewer,
+        ) &&
+        other.isMultiselectEnable == isMultiselectEnable &&
+        other.isAlbumExist == isAlbumExist;
+  }
+
+  @override
+  int get hashCode {
+    return selectedMonths.hashCode ^
+        selectedNewAssetsForAlbum.hashCode ^
+        selectedAdditionalAssetsForAlbum.hashCode ^
+        selectedAssetsInAlbumViewer.hashCode ^
+        isMultiselectEnable.hashCode ^
+        isAlbumExist.hashCode;
+  }
+}
--- a/mobile/lib/modules/album/providers/album.provider.dart
+++ b/mobile/lib/modules/album/providers/album.provider.dart
@@ -0,0 +1,38 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/services/album.service.dart';
+import 'package:openapi/api.dart';
+
+class AlbumNotifier extends StateNotifier<List<AlbumResponseDto>> {
+  AlbumNotifier(this._albumService) : super([]);
+  final AlbumService _albumService;
+
+  getAllAlbums() async {
+    List<AlbumResponseDto>? albums =
+        await _albumService.getAlbums(isShared: false);
+
+    if (albums != null) {
+      state = albums;
+    }
+  }
+
+  deleteAlbum(String albumId) {
+    state = state.where((album) => album.id != albumId).toList();
+  }
+
+  Future<AlbumResponseDto?> createAlbum(
+      String albumTitle, Set<AssetResponseDto> assets) async {
+    AlbumResponseDto? album =
+        await _albumService.createAlbum(albumTitle, assets, []);
+
+    if (album != null) {
+      state = [...state, album];
+      return album;
+    }
+    return null;
+  }
+}
+
+final albumProvider =
+    StateNotifierProvider<AlbumNotifier, List<AlbumResponseDto>>((ref) {
+  return AlbumNotifier(ref.watch(albumServiceProvider));
+});
--- a/mobile/lib/modules/album/providers/album_title.provider.dart
+++ b/mobile/lib/modules/album/providers/album_title.provider.dart
@@ -0,0 +1,17 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class AlbumTitleNotifier extends StateNotifier<String> {
+  AlbumTitleNotifier() : super("");
+
+  setAlbumTitle(String title) {
+    state = title;
+  }
+
+  clearAlbumTitle() {
+    state = "";
+  }
+}
+
+final albumTitleProvider = StateNotifierProvider<AlbumTitleNotifier, String>(
+  (ref) => AlbumTitleNotifier(),
+);
--- a/mobile/lib/modules/album/providers/album_viewer.provider.dart
+++ b/mobile/lib/modules/album/providers/album_viewer.provider.dart
@@ -0,0 +1,57 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/models/album_viewer_page_state.model.dart';
+import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
+import 'package:immich_mobile/modules/album/services/album.service.dart';
+
+class AlbumViewerNotifier extends StateNotifier<AlbumViewerPageState> {
+  AlbumViewerNotifier(this.ref)
+      : super(AlbumViewerPageState(editTitleText: "", isEditAlbum: false));
+
+  final Ref ref;
+
+  void enableEditAlbum() {
+    state = state.copyWith(isEditAlbum: true);
+  }
+
+  void disableEditAlbum() {
+    state = state.copyWith(isEditAlbum: false);
+  }
+
+  void setEditTitleText(String newTitle) {
+    state = state.copyWith(editTitleText: newTitle);
+  }
+
+  void remoteEditTitleText() {
+    state = state.copyWith(editTitleText: "");
+  }
+
+  void resetState() {
+    state = state.copyWith(editTitleText: "", isEditAlbum: false);
+  }
+
+  Future<bool> changeAlbumTitle(
+    String albumId,
+    String ownerId,
+    String newAlbumTitle,
+  ) async {
+    AlbumService service = ref.watch(albumServiceProvider);
+
+    bool isSuccess =
+        await service.changeTitleAlbum(albumId, ownerId, newAlbumTitle);
+
+    if (isSuccess) {
+      state = state.copyWith(editTitleText: "", isEditAlbum: false);
+      ref.read(sharedAlbumProvider.notifier).getAllSharedAlbums();
+
+      return true;
+    }
+
+    state = state.copyWith(editTitleText: "", isEditAlbum: false);
+    return false;
+  }
+}
+
+final albumViewerProvider =
+    StateNotifierProvider<AlbumViewerNotifier, AlbumViewerPageState>((ref) {
+  return AlbumViewerNotifier(ref);
+});
--- a/mobile/lib/modules/album/providers/asset_selection.provider.dart
+++ b/mobile/lib/modules/album/providers/asset_selection.provider.dart
@@ -0,0 +1,135 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/models/asset_selection_state.model.dart';
+
+import 'package:openapi/api.dart';
+
+class AssetSelectionNotifier extends StateNotifier<AssetSelectionState> {
+  AssetSelectionNotifier()
+      : super(
+          AssetSelectionState(
+            selectedNewAssetsForAlbum: {},
+            selectedMonths: {},
+            selectedAdditionalAssetsForAlbum: {},
+            selectedAssetsInAlbumViewer: {},
+            isAlbumExist: false,
+            isMultiselectEnable: false,
+          ),
+        );
+
+  void setIsAlbumExist(bool isAlbumExist) {
+    state = state.copyWith(isAlbumExist: isAlbumExist);
+  }
+
+  void removeAssetsInMonth(
+    String removedMonth,
+    List<AssetResponseDto> assetsInMonth,
+  ) {
+    Set<AssetResponseDto> currentAssetList = state.selectedNewAssetsForAlbum;
+    Set<String> currentMonthList = state.selectedMonths;
+
+    currentMonthList
+        .removeWhere((selectedMonth) => selectedMonth == removedMonth);
+
+    for (AssetResponseDto asset in assetsInMonth) {
+      currentAssetList.removeWhere((e) => e.id == asset.id);
+    }
+
+    state = state.copyWith(
+      selectedNewAssetsForAlbum: currentAssetList,
+      selectedMonths: currentMonthList,
+    );
+  }
+
+  void addAdditionalAssets(List<AssetResponseDto> assets) {
+    state = state.copyWith(
+      selectedAdditionalAssetsForAlbum: {
+        ...state.selectedAdditionalAssetsForAlbum,
+        ...assets
+      },
+    );
+  }
+
+  void addAllAssetsInMonth(String month, List<AssetResponseDto> assetsInMonth) {
+    state = state.copyWith(
+      selectedMonths: {...state.selectedMonths, month},
+      selectedNewAssetsForAlbum: {
+        ...state.selectedNewAssetsForAlbum,
+        ...assetsInMonth
+      },
+    );
+  }
+
+  void addNewAssets(List<AssetResponseDto> assets) {
+    state = state.copyWith(
+      selectedNewAssetsForAlbum: {
+        ...state.selectedNewAssetsForAlbum,
+        ...assets
+      },
+    );
+  }
+
+  void removeSelectedNewAssets(List<AssetResponseDto> assets) {
+    Set<AssetResponseDto> currentList = state.selectedNewAssetsForAlbum;
+
+    for (AssetResponseDto asset in assets) {
+      currentList.removeWhere((e) => e.id == asset.id);
+    }
+
+    state = state.copyWith(selectedNewAssetsForAlbum: currentList);
+  }
+
+  void removeSelectedAdditionalAssets(List<AssetResponseDto> assets) {
+    Set<AssetResponseDto> currentList = state.selectedAdditionalAssetsForAlbum;
+
+    for (AssetResponseDto asset in assets) {
+      currentList.removeWhere((e) => e.id == asset.id);
+    }
+
+    state = state.copyWith(selectedAdditionalAssetsForAlbum: currentList);
+  }
+
+  void removeAll() {
+    state = state.copyWith(
+      selectedNewAssetsForAlbum: {},
+      selectedMonths: {},
+      selectedAdditionalAssetsForAlbum: {},
+      selectedAssetsInAlbumViewer: {},
+      isAlbumExist: false,
+    );
+  }
+
+  void enableMultiselection() {
+    state = state.copyWith(isMultiselectEnable: true);
+  }
+
+  void disableMultiselection() {
+    state = state.copyWith(
+      isMultiselectEnable: false,
+      selectedAssetsInAlbumViewer: {},
+    );
+  }
+
+  void addAssetsInAlbumViewer(List<AssetResponseDto> assets) {
+    state = state.copyWith(
+      selectedAssetsInAlbumViewer: {
+        ...state.selectedAssetsInAlbumViewer,
+        ...assets
+      },
+    );
+  }
+
+  void removeAssetsInAlbumViewer(List<AssetResponseDto> assets) {
+    Set<AssetResponseDto> currentList = state.selectedAssetsInAlbumViewer;
+
+    for (AssetResponseDto asset in assets) {
+      currentList.removeWhere((e) => e.id == asset.id);
+    }
+
+    state = state.copyWith(selectedAssetsInAlbumViewer: currentList);
+  }
+}
+
+final assetSelectionProvider =
+    StateNotifierProvider<AssetSelectionNotifier, AssetSelectionState>((ref) {
+  return AssetSelectionNotifier();
+});
--- a/mobile/lib/modules/album/providers/shared_album.provider.dart
+++ b/mobile/lib/modules/album/providers/shared_album.provider.dart
@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/services/album.service.dart';
+import 'package:openapi/api.dart';
+
+class SharedAlbumNotifier extends StateNotifier<List<AlbumResponseDto>> {
+  SharedAlbumNotifier(this._sharedAlbumService) : super([]);
+
+  final AlbumService _sharedAlbumService;
+
+  Future<AlbumResponseDto?> createSharedAlbum(
+    String albumName,
+    Set<AssetResponseDto> assets,
+    List<String> sharedUserIds,
+  ) async {
+    try {
+      var newAlbum = await _sharedAlbumService.createAlbum(
+        albumName,
+        assets,
+        sharedUserIds,
+      );
+
+      if (newAlbum != null) {
+        state = [...state, newAlbum];
+      }
+
+      return newAlbum;
+    } catch (e) {
+      debugPrint("Error createSharedAlbum  ${e.toString()}");
+
+      return null;
+    }
+  }
+
+  getAllSharedAlbums() async {
+    List<AlbumResponseDto>? sharedAlbums =
+        await _sharedAlbumService.getAlbums(isShared: true);
+
+    if (sharedAlbums != null) {
+      state = sharedAlbums;
+    }
+  }
+
+  deleteAlbum(String albumId) async {
+    state = state.where((album) => album.id != albumId).toList();
+  }
+
+  Future<bool> leaveAlbum(String albumId) async {
+    var res = await _sharedAlbumService.leaveAlbum(albumId);
+
+    if (res) {
+      state = state.where((album) => album.id != albumId).toList();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  Future<bool> removeAssetFromAlbum(
+    String albumId,
+    List<String> assetIds,
+  ) async {
+    var res = await _sharedAlbumService.removeAssetFromAlbum(albumId, assetIds);
+
+    if (res) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+}
+
+final sharedAlbumProvider =
+    StateNotifierProvider<SharedAlbumNotifier, List<AlbumResponseDto>>((ref) {
+  return SharedAlbumNotifier(ref.watch(albumServiceProvider));
+});
+
+final sharedAlbumDetailProvider = FutureProvider.autoDispose
+    .family<AlbumResponseDto?, String>((ref, albumId) async {
+  final AlbumService sharedAlbumService = ref.watch(albumServiceProvider);
+
+  return await sharedAlbumService.getAlbumDetail(albumId);
+});
--- a/mobile/lib/modules/album/providers/suggested_shared_users.provider.dart
+++ b/mobile/lib/modules/album/providers/suggested_shared_users.provider.dart
@@ -0,0 +1,10 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/services/user.service.dart';
+import 'package:openapi/api.dart';
+
+final suggestedSharedUsersProvider =
+    FutureProvider.autoDispose<List<UserResponseDto>>((ref) async {
+  UserService userService = ref.watch(userServiceProvider);
+
+  return await userService.getAllUsersInfo(isAll: false) ?? [];
+});
--- a/mobile/lib/modules/album/services/album.service.dart
+++ b/mobile/lib/modules/album/services/album.service.dart
@@ -0,0 +1,148 @@
+import 'dart:async';
+
+import 'package:flutter/foundation.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/providers/api.provider.dart';
+import 'package:immich_mobile/shared/services/api.service.dart';
+import 'package:openapi/api.dart';
+
+final albumServiceProvider = Provider(
+  (ref) => AlbumService(
+    ref.watch(apiServiceProvider),
+  ),
+);
+
+class AlbumService {
+  final ApiService _apiService;
+
+  AlbumService(this._apiService);
+
+  Future<List<AlbumResponseDto>?> getAlbums({required bool isShared}) async {
+    try {
+      return await _apiService.albumApi
+          .getAllAlbums(shared: isShared ? isShared : null);
+    } catch (e) {
+      debugPrint("Error getAllSharedAlbum  ${e.toString()}");
+      return null;
+    }
+  }
+
+  Future<AlbumResponseDto?> createAlbum(
+    String albumName,
+    Set<AssetResponseDto> assets,
+    List<String> sharedUserIds,
+  ) async {
+    try {
+      return await _apiService.albumApi.createAlbum(
+        CreateAlbumDto(
+          albumName: albumName,
+          assetIds: assets.map((asset) => asset.id).toList(),
+          sharedWithUserIds: sharedUserIds,
+        ),
+      );
+    } catch (e) {
+      debugPrint("Error createSharedAlbum  ${e.toString()}");
+      return null;
+    }
+  }
+
+  Future<AlbumResponseDto?> getAlbumDetail(String albumId) async {
+    try {
+      return await _apiService.albumApi.getAlbumInfo(albumId);
+    } catch (e) {
+      debugPrint('Error [getAlbumDetail] ${e.toString()}');
+      return null;
+    }
+  }
+
+  Future<bool> addAdditionalAssetToAlbum(
+    Set<AssetResponseDto> assets,
+    String albumId,
+  ) async {
+    try {
+      var result = await _apiService.albumApi.addAssetsToAlbum(
+        albumId,
+        AddAssetsDto(assetIds: assets.map((asset) => asset.id).toList()),
+      );
+      return result != null;
+    } catch (e) {
+      debugPrint("Error addAdditionalAssetToAlbum  ${e.toString()}");
+      return false;
+    }
+  }
+
+  Future<bool> addAdditionalUserToAlbum(
+    List<String> sharedUserIds,
+    String albumId,
+  ) async {
+    try {
+      var result = await _apiService.albumApi.addUsersToAlbum(
+        albumId,
+        AddUsersDto(sharedUserIds: sharedUserIds),
+      );
+
+      return result != null;
+    } catch (e) {
+      debugPrint("Error addAdditionalUserToAlbum  ${e.toString()}");
+      return false;
+    }
+  }
+
+  Future<bool> deleteAlbum(String albumId) async {
+    try {
+      await _apiService.albumApi.deleteAlbum(albumId);
+      return true;
+    } catch (e) {
+      debugPrint("Error deleteAlbum  ${e.toString()}");
+      return false;
+    }
+  }
+
+  Future<bool> leaveAlbum(String albumId) async {
+    try {
+      await _apiService.albumApi.removeUserFromAlbum(albumId, "me");
+
+      return true;
+    } catch (e) {
+      debugPrint("Error deleteAlbum  ${e.toString()}");
+      return false;
+    }
+  }
+
+  Future<bool> removeAssetFromAlbum(
+    String albumId,
+    List<String> assetIds,
+  ) async {
+    try {
+      await _apiService.albumApi.removeAssetFromAlbum(
+        albumId,
+        RemoveAssetsDto(assetIds: assetIds),
+      );
+
+      return true;
+    } catch (e) {
+      debugPrint("Error deleteAlbum  ${e.toString()}");
+      return false;
+    }
+  }
+
+  Future<bool> changeTitleAlbum(
+    String albumId,
+    String ownerId,
+    String newAlbumTitle,
+  ) async {
+    try {
+      await _apiService.albumApi.updateAlbumInfo(
+        albumId,
+        UpdateAlbumDto(
+          albumName: newAlbumTitle,
+        ),
+      );
+
+      return true;
+    } catch (e) {
+      debugPrint("Error deleteAlbum  ${e.toString()}");
+      return false;
+    }
+  }
+}
--- a/mobile/lib/modules/album/ui/album_action_outlined_button.dart
+++ b/mobile/lib/modules/album/ui/album_action_outlined_button.dart
@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class AlbumActionOutlinedButton extends StatelessWidget {
+  final VoidCallback? onPressed;
+  final String labelText;
+  final IconData iconData;
+
+  const AlbumActionOutlinedButton({
+    Key? key,
+    this.onPressed,
+    required this.labelText,
+    required this.iconData,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(right: 8.0),
+      child: OutlinedButton.icon(
+        style: OutlinedButton.styleFrom(
+          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(25),
+          ),
+          side: const BorderSide(
+            width: 1,
+            color: Color.fromARGB(255, 215, 215, 215),
+          ),
+        ),
+        icon: Icon(iconData, size: 15),
+        label: Text(
+          labelText,
+          style: const TextStyle(
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+            color: Colors.black87,
+          ),
+        ),
+        onPressed: onPressed,
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/album_thumbnail_card.dart
+++ b/mobile/lib/modules/album/ui/album_thumbnail_card.dart
@@ -0,0 +1,77 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hive/hive.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:openapi/api.dart';
+import 'package:transparent_image/transparent_image.dart';
+
+class AlbumThumbnailCard extends StatelessWidget {
+  const AlbumThumbnailCard({Key? key, required this.album}) : super(key: key);
+
+  final AlbumResponseDto album;
+
+  @override
+  Widget build(BuildContext context) {
+    var box = Hive.box(userInfoBox);
+
+    return GestureDetector(
+      onTap: () {
+        AutoRouter.of(context).push(AlbumViewerRoute(albumId: album.id));
+      },
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: 32.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(8),
+              child: FadeInImage(
+                width: MediaQuery.of(context).size.width / 2 - 18,
+                height: MediaQuery.of(context).size.width / 2 - 18,
+                fit: BoxFit.cover,
+                placeholder: MemoryImage(kTransparentImage),
+                image: NetworkImage(
+                  '${box.get(serverEndpointKey)}/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG',
+                  headers: {
+                    "Authorization": "Bearer ${box.get(accessTokenKey)}"
+                  },
+                ),
+                fadeInDuration: const Duration(milliseconds: 200),
+                fadeOutDuration: const Duration(milliseconds: 200),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: Text(
+                album.albumName,
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                  fontSize: 12,
+                ),
+              ),
+            ),
+            Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  '${album.assets.length} item${album.assets.length > 1 ? 's' : ''}',
+                  style: const TextStyle(
+                    fontSize: 10,
+                  ),
+                ),
+                if (album.shared)
+                  const Text(
+                    ' · Shared',
+                    style: TextStyle(
+                      fontSize: 10,
+                    ),
+                  )
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/album_title_text_field.dart
+++ b/mobile/lib/modules/album/ui/album_title_text_field.dart
@@ -0,0 +1,73 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/album_title.provider.dart';
+
+class AlbumTitleTextField extends ConsumerWidget {
+  const AlbumTitleTextField({
+    Key? key,
+    required this.isAlbumTitleEmpty,
+    required this.albumTitleTextFieldFocusNode,
+    required this.albumTitleController,
+    required this.isAlbumTitleTextFieldFocus,
+  }) : super(key: key);
+
+  final ValueNotifier<bool> isAlbumTitleEmpty;
+  final FocusNode albumTitleTextFieldFocusNode;
+  final TextEditingController albumTitleController;
+  final ValueNotifier<bool> isAlbumTitleTextFieldFocus;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return TextField(
+      onChanged: (v) {
+        if (v.isEmpty) {
+          isAlbumTitleEmpty.value = true;
+        } else {
+          isAlbumTitleEmpty.value = false;
+        }
+
+        ref.watch(albumTitleProvider.notifier).setAlbumTitle(v);
+      },
+      focusNode: albumTitleTextFieldFocusNode,
+      style: TextStyle(
+        fontSize: 28,
+        color: Colors.grey[700],
+        fontWeight: FontWeight.bold,
+      ),
+      controller: albumTitleController,
+      onTap: () {
+        isAlbumTitleTextFieldFocus.value = true;
+
+        if (albumTitleController.text == 'Untitled') {
+          albumTitleController.clear();
+        }
+      },
+      decoration: InputDecoration(
+        contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+        suffixIcon: !isAlbumTitleEmpty.value && isAlbumTitleTextFieldFocus.value
+            ? IconButton(
+                onPressed: () {
+                  albumTitleController.clear();
+                  isAlbumTitleEmpty.value = true;
+                },
+                icon: const Icon(Icons.cancel_rounded),
+                splashRadius: 10,
+              )
+            : null,
+        enabledBorder: OutlineInputBorder(
+          borderSide: const BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: const BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        hintText: 'share_add_title'.tr(),
+        focusColor: Colors.grey[300],
+        fillColor: Colors.grey[200],
+        filled: isAlbumTitleTextFieldFocus.value,
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/album_viewer_appbar.dart
+++ b/mobile/lib/modules/album/ui/album_viewer_appbar.dart
@@ -0,0 +1,225 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/immich_colors.dart';
+import 'package:immich_mobile/modules/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/album/providers/album_viewer.provider.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
+import 'package:immich_mobile/modules/album/services/album.service.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/ui/immich_toast.dart';
+import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
+import 'package:openapi/api.dart';
+
+class AlbumViewerAppbar extends HookConsumerWidget with PreferredSizeWidget {
+  const AlbumViewerAppbar({
+    Key? key,
+    required this.albumInfo,
+    required this.userId,
+    required this.albumId,
+  }) : super(key: key);
+
+  final AlbumResponseDto albumInfo;
+  final String userId;
+  final String albumId;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isMultiSelectionEnable =
+        ref.watch(assetSelectionProvider).isMultiselectEnable;
+    final selectedAssetsInAlbum =
+        ref.watch(assetSelectionProvider).selectedAssetsInAlbumViewer;
+    final newAlbumTitle = ref.watch(albumViewerProvider).editTitleText;
+    final isEditAlbum = ref.watch(albumViewerProvider).isEditAlbum;
+
+    void _onDeleteAlbumPressed(String albumId) async {
+      ImmichLoadingOverlayController.appLoader.show();
+
+      bool isSuccess =
+          await ref.watch(albumServiceProvider).deleteAlbum(albumId);
+
+      if (isSuccess) {
+        if (albumInfo.shared) {
+          ref.watch(sharedAlbumProvider.notifier).deleteAlbum(albumId);
+          AutoRouter.of(context)
+              .navigate(const TabControllerRoute(children: [SharingRoute()]));
+        } else {
+          ref.watch(albumProvider.notifier).deleteAlbum(albumId);
+          AutoRouter.of(context)
+              .navigate(const TabControllerRoute(children: [LibraryRoute()]));
+        }
+      } else {
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_delete".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+
+      ImmichLoadingOverlayController.appLoader.hide();
+    }
+
+    void _onLeaveAlbumPressed(String albumId) async {
+      ImmichLoadingOverlayController.appLoader.show();
+
+      bool isSuccess =
+          await ref.watch(sharedAlbumProvider.notifier).leaveAlbum(albumId);
+
+      if (isSuccess) {
+        AutoRouter.of(context)
+            .navigate(const TabControllerRoute(children: [SharingRoute()]));
+      } else {
+        Navigator.pop(context);
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_leave".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+
+      ImmichLoadingOverlayController.appLoader.hide();
+    }
+
+    void _onRemoveFromAlbumPressed(String albumId) async {
+      ImmichLoadingOverlayController.appLoader.show();
+
+      bool isSuccess =
+          await ref.watch(sharedAlbumProvider.notifier).removeAssetFromAlbum(
+                albumId,
+                selectedAssetsInAlbum.map((a) => a.id).toList(),
+              );
+
+      if (isSuccess) {
+        Navigator.pop(context);
+        ref.watch(assetSelectionProvider.notifier).disableMultiselection();
+        ref.refresh(sharedAlbumDetailProvider(albumId));
+      } else {
+        Navigator.pop(context);
+        ImmichToast.show(
+          context: context,
+          msg: "album_viewer_appbar_share_err_remove".tr(),
+          toastType: ToastType.error,
+          gravity: ToastGravity.BOTTOM,
+        );
+      }
+
+      ImmichLoadingOverlayController.appLoader.hide();
+    }
+
+    _buildBottomSheetActionButton() {
+      if (isMultiSelectionEnable) {
+        if (albumInfo.ownerId == userId) {
+          return ListTile(
+            leading: const Icon(Icons.delete_sweep_rounded),
+            title: const Text(
+              'album_viewer_appbar_share_remove',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ).tr(),
+            onTap: () => _onRemoveFromAlbumPressed(albumId),
+          );
+        } else {
+          return const SizedBox();
+        }
+      } else {
+        if (albumInfo.ownerId == userId) {
+          return ListTile(
+            leading: const Icon(Icons.delete_forever_rounded),
+            title: const Text(
+              'album_viewer_appbar_share_delete',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ).tr(),
+            onTap: () => _onDeleteAlbumPressed(albumId),
+          );
+        } else {
+          return ListTile(
+            leading: const Icon(Icons.person_remove_rounded),
+            title: const Text(
+              'album_viewer_appbar_share_leave',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ).tr(),
+            onTap: () => _onLeaveAlbumPressed(albumId),
+          );
+        }
+      }
+    }
+
+    void _buildBottomSheet() {
+      showModalBottomSheet(
+        backgroundColor: immichBackgroundColor,
+        isScrollControlled: false,
+        context: context,
+        builder: (context) {
+          return SafeArea(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                _buildBottomSheetActionButton(),
+              ],
+            ),
+          );
+        },
+      );
+    }
+
+    _buildLeadingButton() {
+      if (isMultiSelectionEnable) {
+        return IconButton(
+          onPressed: () => ref
+              .watch(assetSelectionProvider.notifier)
+              .disableMultiselection(),
+          icon: const Icon(Icons.close_rounded),
+          splashRadius: 25,
+        );
+      } else if (isEditAlbum) {
+        return IconButton(
+          onPressed: () async {
+            bool isSuccess = await ref
+                .watch(albumViewerProvider.notifier)
+                .changeAlbumTitle(albumId, userId, newAlbumTitle);
+
+            if (!isSuccess) {
+              ImmichToast.show(
+                context: context,
+                msg: "album_viewer_appbar_share_err_title".tr(),
+                gravity: ToastGravity.BOTTOM,
+                toastType: ToastType.error,
+              );
+            }
+          },
+          icon: const Icon(Icons.check_rounded),
+          splashRadius: 25,
+        );
+      } else {
+        return IconButton(
+          onPressed: () async => await AutoRouter.of(context).pop(),
+          icon: const Icon(Icons.arrow_back_ios_rounded),
+          splashRadius: 25,
+        );
+      }
+    }
+
+    return AppBar(
+      elevation: 0,
+      leading: _buildLeadingButton(),
+      title: isMultiSelectionEnable
+          ? Text('${selectedAssetsInAlbum.length}')
+          : null,
+      centerTitle: false,
+      actions: [
+        IconButton(
+          splashRadius: 25,
+          onPressed: _buildBottomSheet,
+          icon: const Icon(Icons.more_horiz_rounded),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}
--- a/mobile/lib/modules/album/ui/album_viewer_editable_title.dart
+++ b/mobile/lib/modules/album/ui/album_viewer_editable_title.dart
@@ -0,0 +1,87 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/album_viewer.provider.dart';
+import 'package:openapi/api.dart';
+
+class AlbumViewerEditableTitle extends HookConsumerWidget {
+  final AlbumResponseDto albumInfo;
+  final FocusNode titleFocusNode;
+  const AlbumViewerEditableTitle({
+    Key? key,
+    required this.albumInfo,
+    required this.titleFocusNode,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final titleTextEditController =
+        useTextEditingController(text: albumInfo.albumName);
+
+    void onFocusModeChange() {
+      if (!titleFocusNode.hasFocus && titleTextEditController.text.isEmpty) {
+        ref.watch(albumViewerProvider.notifier).setEditTitleText("Untitled");
+        titleTextEditController.text = "Untitled";
+      }
+    }
+
+    useEffect(
+      () {
+        titleFocusNode.addListener(onFocusModeChange);
+        return () {
+          titleFocusNode.removeListener(onFocusModeChange);
+        };
+      },
+      [],
+    );
+
+    return TextField(
+      onChanged: (value) {
+        if (value.isEmpty) {
+        } else {
+          ref.watch(albumViewerProvider.notifier).setEditTitleText(value);
+        }
+      },
+      focusNode: titleFocusNode,
+      style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+      controller: titleTextEditController,
+      onTap: () {
+        FocusScope.of(context).requestFocus(titleFocusNode);
+
+        ref
+            .watch(albumViewerProvider.notifier)
+            .setEditTitleText(albumInfo.albumName);
+        ref.watch(albumViewerProvider.notifier).enableEditAlbum();
+
+        if (titleTextEditController.text == 'Untitled') {
+          titleTextEditController.clear();
+        }
+      },
+      decoration: InputDecoration(
+        contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+        suffixIcon: titleFocusNode.hasFocus
+            ? IconButton(
+                onPressed: () {
+                  titleTextEditController.clear();
+                },
+                icon: const Icon(Icons.cancel_rounded),
+                splashRadius: 10,
+              )
+            : null,
+        enabledBorder: OutlineInputBorder(
+          borderSide: const BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: const BorderSide(color: Colors.transparent),
+          borderRadius: BorderRadius.circular(10),
+        ),
+        focusColor: Colors.grey[300],
+        fillColor: Colors.grey[200],
+        filled: titleFocusNode.hasFocus,
+        hintText: 'share_add_title'.tr(),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/album_viewer_thumbnail.dart
+++ b/mobile/lib/modules/album/ui/album_viewer_thumbnail.dart
@@ -0,0 +1,184 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:openapi/api.dart';
+
+class AlbumViewerThumbnail extends HookConsumerWidget {
+  final AssetResponseDto asset;
+
+  const AlbumViewerThumbnail({Key? key, required this.asset}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final cacheKey = useState(1);
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl =
+        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
+    var deviceId = ref.watch(authenticationProvider).deviceId;
+    final selectedAssetsInAlbumViewer =
+        ref.watch(assetSelectionProvider).selectedAssetsInAlbumViewer;
+    final isMultiSelectionEnable =
+        ref.watch(assetSelectionProvider).isMultiselectEnable;
+
+    _viewAsset() {
+      if (asset.type == AssetTypeEnum.IMAGE) {
+        AutoRouter.of(context).push(
+          ImageViewerRoute(
+            imageUrl:
+                '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
+            heroTag: asset.id,
+            thumbnailUrl: thumbnailRequestUrl,
+            asset: asset,
+          ),
+        );
+      } else {
+        AutoRouter.of(context).push(
+          VideoViewerRoute(
+            videoUrl:
+                '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
+            asset: asset,
+          ),
+        );
+      }
+    }
+
+    BoxBorder drawBorderColor() {
+      if (selectedAssetsInAlbumViewer.contains(asset)) {
+        return Border.all(
+          color: Theme.of(context).primaryColorLight,
+          width: 10,
+        );
+      } else {
+        return const Border();
+      }
+    }
+
+    _enableMultiSelection() {
+      ref.watch(assetSelectionProvider.notifier).enableMultiselection();
+      ref
+          .watch(assetSelectionProvider.notifier)
+          .addAssetsInAlbumViewer([asset]);
+    }
+
+    _disableMultiSelection() {
+      ref.watch(assetSelectionProvider.notifier).disableMultiselection();
+    }
+
+    _buildVideoLabel() {
+      return Positioned(
+        top: 5,
+        right: 5,
+        child: Row(
+          children: [
+            Text(
+              asset.duration.toString().substring(0, 7),
+              style: const TextStyle(
+                color: Colors.white,
+                fontSize: 10,
+              ),
+            ),
+            const Icon(
+              Icons.play_circle_outline_rounded,
+              color: Colors.white,
+            ),
+          ],
+        ),
+      );
+    }
+
+    _buildAssetStoreLocationIcon() {
+      return Positioned(
+        right: 10,
+        bottom: 5,
+        child: Icon(
+          (deviceId != asset.deviceId)
+              ? Icons.cloud_done_outlined
+              : Icons.photo_library_rounded,
+          color: Colors.white,
+          size: 18,
+        ),
+      );
+    }
+
+    _buildAssetSelectionIcon() {
+      bool isSelected = selectedAssetsInAlbumViewer.contains(asset);
+
+      return Positioned(
+        left: 10,
+        top: 5,
+        child: isSelected
+            ? Icon(
+                Icons.check_circle_rounded,
+                color: Theme.of(context).primaryColor,
+              )
+            : const Icon(
+                Icons.check_circle_outline_rounded,
+                color: Colors.white,
+              ),
+      );
+    }
+
+    _buildThumbnailImage() {
+      return Container(
+        decoration: BoxDecoration(border: drawBorderColor()),
+        child: CachedNetworkImage(
+          cacheKey: "${asset.id}-${cacheKey.value}",
+          width: 300,
+          height: 300,
+          memCacheHeight: 200,
+          fit: BoxFit.cover,
+          imageUrl: thumbnailRequestUrl,
+          httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+          fadeInDuration: const Duration(milliseconds: 250),
+          progressIndicatorBuilder: (context, url, downloadProgress) =>
+              Transform.scale(
+            scale: 0.2,
+            child: CircularProgressIndicator(value: downloadProgress.progress),
+          ),
+          errorWidget: (context, url, error) {
+            return Icon(
+              Icons.image_not_supported_outlined,
+              color: Theme.of(context).primaryColor,
+            );
+          },
+        ),
+      );
+    }
+
+    _handleSelectionGesture() {
+      if (selectedAssetsInAlbumViewer.contains(asset)) {
+        ref
+            .watch(assetSelectionProvider.notifier)
+            .removeAssetsInAlbumViewer([asset]);
+
+        if (selectedAssetsInAlbumViewer.isEmpty) {
+          _disableMultiSelection();
+        }
+      } else {
+        ref
+            .watch(assetSelectionProvider.notifier)
+            .addAssetsInAlbumViewer([asset]);
+      }
+    }
+
+    return GestureDetector(
+      onTap: isMultiSelectionEnable ? _handleSelectionGesture : _viewAsset,
+      onLongPress: _enableMultiSelection,
+      child: Stack(
+        children: [
+          _buildThumbnailImage(),
+          _buildAssetStoreLocationIcon(),
+          if (asset.type != AssetTypeEnum.IMAGE) _buildVideoLabel(),
+          if (isMultiSelectionEnable) _buildAssetSelectionIcon(),
+        ],
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/asset_grid_by_month.dart
+++ b/mobile/lib/modules/album/ui/asset_grid_by_month.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/ui/selection_thumbnail_image.dart';
+import 'package:openapi/api.dart';
+
+class AssetGridByMonth extends HookConsumerWidget {
+  final List<AssetResponseDto> assetGroup;
+  const AssetGridByMonth({Key? key, required this.assetGroup})
+      : super(key: key);
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SliverGrid(
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 4,
+        crossAxisSpacing: 5.0,
+        mainAxisSpacing: 5,
+      ),
+      delegate: SliverChildBuilderDelegate(
+        (BuildContext context, int index) {
+          return SelectionThumbnailImage(asset: assetGroup[index]);
+        },
+        childCount: assetGroup.length,
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/month_group_title.dart
+++ b/mobile/lib/modules/album/ui/month_group_title.dart
@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:openapi/api.dart';
+
+class MonthGroupTitle extends HookConsumerWidget {
+  final String month;
+  final List<AssetResponseDto> assetGroup;
+
+  const MonthGroupTitle({
+    Key? key,
+    required this.month,
+    required this.assetGroup,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final selectedDateGroup = ref.watch(assetSelectionProvider).selectedMonths;
+    final selectedAssets =
+        ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum;
+    final isAlbumExist = ref.watch(assetSelectionProvider).isAlbumExist;
+
+    _handleTitleIconClick() {
+      HapticFeedback.heavyImpact();
+
+      if (isAlbumExist) {
+        if (selectedDateGroup.contains(month)) {
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .removeAssetsInMonth(month, []);
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .removeSelectedAdditionalAssets(assetGroup);
+        } else {
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .addAllAssetsInMonth(month, []);
+
+          // Deep clone assetGroup
+          var assetGroupWithNewItems = [...assetGroup];
+
+          for (var selectedAsset in selectedAssets) {
+            assetGroupWithNewItems.removeWhere((a) => a.id == selectedAsset.id);
+          }
+
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .addAdditionalAssets(assetGroupWithNewItems);
+        }
+      } else {
+        if (selectedDateGroup.contains(month)) {
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .removeAssetsInMonth(month, assetGroup);
+        } else {
+          ref
+              .watch(assetSelectionProvider.notifier)
+              .addAllAssetsInMonth(month, assetGroup);
+        }
+      }
+    }
+
+    _getSimplifiedMonth() {
+      var monthAndYear = month.split(',');
+      var yearText = monthAndYear[1].trim();
+      var monthText = monthAndYear[0].trim();
+      var currentYear = DateTime.now().year.toString();
+
+      if (yearText == currentYear) {
+        return monthText;
+      } else {
+        return month;
+      }
+    }
+
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.only(
+          top: 29.0,
+          bottom: 29.0,
+          left: 14.0,
+          right: 8.0,
+        ),
+        child: Row(
+          children: [
+            GestureDetector(
+              onTap: _handleTitleIconClick,
+              child: selectedDateGroup.contains(month)
+                  ? Icon(
+                      Icons.check_circle_rounded,
+                      color: Theme.of(context).primaryColor,
+                    )
+                  : const Icon(
+                      Icons.circle_outlined,
+                      color: Colors.grey,
+                    ),
+            ),
+            GestureDetector(
+              onTap: _handleTitleIconClick,
+              child: Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Text(
+                  _getSimplifiedMonth(),
+                  style: TextStyle(
+                    fontSize: 24,
+                    color: Theme.of(context).primaryColor,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/selection_thumbnail_image.dart
+++ b/mobile/lib/modules/album/ui/selection_thumbnail_image.dart
@@ -0,0 +1,171 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:openapi/api.dart';
+
+class SelectionThumbnailImage extends HookConsumerWidget {
+  final AssetResponseDto asset;
+
+  const SelectionThumbnailImage({Key? key, required this.asset})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final cacheKey = useState(1);
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl =
+        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
+    var selectedAsset =
+        ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum;
+    var newAssetsForAlbum =
+        ref.watch(assetSelectionProvider).selectedAdditionalAssetsForAlbum;
+    var isAlbumExist = ref.watch(assetSelectionProvider).isAlbumExist;
+
+    Widget _buildSelectionIcon(AssetResponseDto asset) {
+      var isSelected = selectedAsset.map((item) => item.id).contains(asset.id);
+      var isNewlySelected =
+          newAssetsForAlbum.map((item) => item.id).contains(asset.id);
+
+      if (isSelected && !isAlbumExist) {
+        return Icon(
+          Icons.check_circle,
+          color: Theme.of(context).primaryColor,
+        );
+      } else if (isSelected && isAlbumExist) {
+        return const Icon(
+          Icons.check_circle,
+          color: Color.fromARGB(255, 233, 233, 233),
+        );
+      } else if (isNewlySelected && isAlbumExist) {
+        return Icon(
+          Icons.check_circle,
+          color: Theme.of(context).primaryColor,
+        );
+      } else {
+        return const Icon(
+          Icons.circle_outlined,
+          color: Colors.white,
+        );
+      }
+    }
+
+    BoxBorder drawBorderColor() {
+      var isSelected = selectedAsset.map((item) => item.id).contains(asset.id);
+      var isNewlySelected =
+          newAssetsForAlbum.map((item) => item.id).contains(asset.id);
+
+      if (isSelected && !isAlbumExist) {
+        return Border.all(
+          color: Theme.of(context).primaryColorLight,
+          width: 10,
+        );
+      } else if (isSelected && isAlbumExist) {
+        return Border.all(
+          color: const Color.fromARGB(255, 190, 190, 190),
+          width: 10,
+        );
+      } else if (isNewlySelected && isAlbumExist) {
+        return Border.all(
+          color: Theme.of(context).primaryColorLight,
+          width: 10,
+        );
+      }
+      return const Border();
+    }
+
+    return GestureDetector(
+      onTap: () {
+        var isSelected =
+            selectedAsset.map((item) => item.id).contains(asset.id);
+        var isNewlySelected =
+            newAssetsForAlbum.map((item) => item.id).contains(asset.id);
+
+        if (isAlbumExist) {
+          // Operation for existing album
+          if (!isSelected) {
+            if (isNewlySelected) {
+              ref
+                  .watch(assetSelectionProvider.notifier)
+                  .removeSelectedAdditionalAssets([asset]);
+            } else {
+              ref
+                  .watch(assetSelectionProvider.notifier)
+                  .addAdditionalAssets([asset]);
+            }
+          }
+        } else {
+          // Operation for new album
+          if (isSelected) {
+            ref
+                .watch(assetSelectionProvider.notifier)
+                .removeSelectedNewAssets([asset]);
+          } else {
+            ref.watch(assetSelectionProvider.notifier).addNewAssets([asset]);
+          }
+        }
+      },
+      child: Stack(
+        children: [
+          Container(
+            decoration: BoxDecoration(border: drawBorderColor()),
+            child: CachedNetworkImage(
+              cacheKey: "${asset.id}-${cacheKey.value}",
+              width: 150,
+              height: 150,
+              memCacheHeight: asset.type == AssetTypeEnum.IMAGE ? 150 : 150,
+              fit: BoxFit.cover,
+              imageUrl: thumbnailRequestUrl,
+              httpHeaders: {
+                "Authorization": "Bearer ${box.get(accessTokenKey)}"
+              },
+              fadeInDuration: const Duration(milliseconds: 250),
+              progressIndicatorBuilder: (context, url, downloadProgress) =>
+                  Transform.scale(
+                scale: 0.2,
+                child:
+                    CircularProgressIndicator(value: downloadProgress.progress),
+              ),
+              errorWidget: (context, url, error) {
+                return Icon(
+                  Icons.image_not_supported_outlined,
+                  color: Theme.of(context).primaryColor,
+                );
+              },
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(3.0),
+            child: Align(
+              alignment: Alignment.topLeft,
+              child: _buildSelectionIcon(asset),
+            ),
+          ),
+          if (asset.type != AssetTypeEnum.IMAGE)
+            Positioned(
+              bottom: 5,
+              right: 5,
+              child: Row(
+                children: [
+                  Text(
+                    asset.duration.substring(0, 7),
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 10,
+                    ),
+                  ),
+                  const Icon(
+                    Icons.play_circle_outline_rounded,
+                    color: Colors.white,
+                  ),
+                ],
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/shared_album_thumbnail_image.dart
+++ b/mobile/lib/modules/album/ui/shared_album_thumbnail_image.dart
@@ -0,0 +1,55 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:openapi/api.dart';
+
+class SharedAlbumThumbnailImage extends HookConsumerWidget {
+  final AssetResponseDto asset;
+
+  const SharedAlbumThumbnailImage({Key? key, required this.asset})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final cacheKey = useState(1);
+
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl =
+        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
+
+    return GestureDetector(
+      onTap: () {
+        // debugPrint("View ${asset.id}");
+      },
+      child: Stack(
+        children: [
+          CachedNetworkImage(
+            cacheKey: "${asset.id}-${cacheKey.value}",
+            width: 500,
+            height: 500,
+            memCacheHeight: 500,
+            fit: BoxFit.cover,
+            imageUrl: thumbnailRequestUrl,
+            httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+            fadeInDuration: const Duration(milliseconds: 250),
+            progressIndicatorBuilder: (context, url, downloadProgress) =>
+                Transform.scale(
+              scale: 0.2,
+              child:
+                  CircularProgressIndicator(value: downloadProgress.progress),
+            ),
+            errorWidget: (context, url, error) {
+              return Icon(
+                Icons.image_not_supported_outlined,
+                color: Theme.of(context).primaryColor,
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/ui/sharing_sliver_appbar.dart
+++ b/mobile/lib/modules/album/ui/sharing_sliver_appbar.dart
@@ -0,0 +1,90 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class SharingSliverAppBar extends StatelessWidget {
+  const SharingSliverAppBar({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverAppBar(
+      centerTitle: true,
+      floating: false,
+      pinned: true,
+      snap: false,
+      automaticallyImplyLeading: false,
+      title: Text(
+        'IMMICH',
+        style: TextStyle(
+          fontFamily: 'SnowburstOne',
+          fontWeight: FontWeight.bold,
+          fontSize: 22,
+          color: Theme.of(context).primaryColor,
+        ),
+      ),
+      bottom: PreferredSize(
+        preferredSize: const Size.fromHeight(50.0),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 12.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.only(right: 4.0),
+                  child: TextButton.icon(
+                    style: ButtonStyle(
+                      backgroundColor: MaterialStateProperty.all(
+                        Theme.of(context).primaryColor.withAlpha(20),
+                      ),
+                      // foregroundColor: MaterialStateProperty.all(Colors.white),
+                    ),
+                    onPressed: () {
+                      AutoRouter.of(context)
+                          .push(CreateAlbumRoute(isSharedAlbum: true));
+                    },
+                    icon: const Icon(
+                      Icons.photo_album_outlined,
+                      size: 20,
+                    ),
+                    label: const Text(
+                      "sharing_silver_appbar_create_shared_album",
+                      style:
+                          TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
+                    ).tr(),
+                  ),
+                ),
+              ),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.only(left: 4.0),
+                  child: TextButton.icon(
+                    style: ButtonStyle(
+                      backgroundColor: MaterialStateProperty.all(
+                        Theme.of(context).primaryColor.withAlpha(20),
+                      ),
+                      // foregroundColor: MaterialStateProperty.all(Colors.white),
+                    ),
+                    onPressed: null,
+                    icon: const Icon(
+                      Icons.swap_horizontal_circle_outlined,
+                      size: 20,
+                    ),
+                    label: const Text(
+                      "sharing_silver_appbar_share_partner",
+                      style:
+                          TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
+                    ).tr(),
+                  ),
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/views/album_viewer_page.dart
+++ b/mobile/lib/modules/album/views/album_viewer_page.dart
@@ -0,0 +1,297 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/immich_colors.dart';
+import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/modules/album/models/asset_selection_page_result.model.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
+import 'package:immich_mobile/modules/album/services/album.service.dart';
+import 'package:immich_mobile/modules/album/ui/album_action_outlined_button.dart';
+import 'package:immich_mobile/modules/album/ui/album_viewer_appbar.dart';
+import 'package:immich_mobile/modules/album/ui/album_viewer_editable_title.dart';
+import 'package:immich_mobile/modules/album/ui/album_viewer_thumbnail.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:immich_mobile/shared/ui/immich_sliver_persistent_app_bar_delegate.dart';
+import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
+import 'package:openapi/api.dart';
+
+class AlbumViewerPage extends HookConsumerWidget {
+  final String albumId;
+
+  const AlbumViewerPage({Key? key, required this.albumId}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    FocusNode titleFocusNode = useFocusNode();
+    ScrollController scrollController = useScrollController();
+
+    AsyncValue<AlbumResponseDto?> albumInfo =
+        ref.watch(sharedAlbumDetailProvider(albumId));
+
+    final userId = ref.watch(authenticationProvider).userId;
+
+    /// Find out if the assets in album exist on the device
+    /// If they exist, add to selected asset state to show they are already selected.
+    void _onAddPhotosPressed(AlbumResponseDto albumInfo) async {
+      if (albumInfo.assets.isNotEmpty == true) {
+        ref
+            .watch(assetSelectionProvider.notifier)
+            .addNewAssets(albumInfo.assets.toList());
+      }
+
+      ref.watch(assetSelectionProvider.notifier).setIsAlbumExist(true);
+
+      AssetSelectionPageResult? returnPayload = await AutoRouter.of(context)
+          .push<AssetSelectionPageResult?>(const AssetSelectionRoute());
+
+      if (returnPayload != null) {
+        // Check if there is new assets add
+        if (returnPayload.selectedAdditionalAsset.isNotEmpty) {
+          ImmichLoadingOverlayController.appLoader.show();
+
+          var isSuccess =
+              await ref.watch(albumServiceProvider).addAdditionalAssetToAlbum(
+                    returnPayload.selectedAdditionalAsset,
+                    albumId,
+                  );
+
+          if (isSuccess) {
+            ref.refresh(sharedAlbumDetailProvider(albumId));
+          }
+
+          ImmichLoadingOverlayController.appLoader.hide();
+        }
+
+        ref.watch(assetSelectionProvider.notifier).removeAll();
+      } else {
+        ref.watch(assetSelectionProvider.notifier).removeAll();
+      }
+    }
+
+    void _onAddUsersPressed(AlbumResponseDto albumInfo) async {
+      List<String>? sharedUserIds =
+          await AutoRouter.of(context).push<List<String>?>(
+        SelectAdditionalUserForSharingRoute(albumInfo: albumInfo),
+      );
+
+      if (sharedUserIds != null) {
+        ImmichLoadingOverlayController.appLoader.show();
+
+        var isSuccess = await ref
+            .watch(albumServiceProvider)
+            .addAdditionalUserToAlbum(sharedUserIds, albumId);
+
+        if (isSuccess) {
+          ref.refresh(sharedAlbumDetailProvider(albumId));
+        }
+
+        ImmichLoadingOverlayController.appLoader.hide();
+      }
+    }
+
+    Widget _buildTitle(AlbumResponseDto albumInfo) {
+      return Padding(
+        padding: const EdgeInsets.only(left: 8, right: 8, top: 16),
+        child: userId == albumInfo.ownerId
+            ? AlbumViewerEditableTitle(
+                albumInfo: albumInfo,
+                titleFocusNode: titleFocusNode,
+              )
+            : Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Text(
+                  albumInfo.albumName,
+                  style: const TextStyle(
+                    fontSize: 24,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+      );
+    }
+
+    Widget _buildAlbumDateRange(AlbumResponseDto albumInfo) {
+      String startDate = "";
+      DateTime parsedStartDate =
+          DateTime.parse(albumInfo.assets.first.createdAt);
+      DateTime parsedEndDate = DateTime.parse(
+        albumInfo.assets.last.createdAt,
+      ); //Need default.
+
+      if (parsedStartDate.year == parsedEndDate.year) {
+        startDate = DateFormat('LLL d').format(parsedStartDate);
+      } else {
+        startDate = DateFormat('LLL d, y').format(parsedStartDate);
+      }
+
+      String endDate = DateFormat('LLL d, y').format(parsedEndDate);
+
+      return Padding(
+        padding: EdgeInsets.only(
+          left: 16.0,
+          top: 8.0,
+          bottom: albumInfo.shared ? 0.0 : 8.0,
+        ),
+        child: Text(
+          "$startDate-$endDate",
+          style: const TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.bold,
+            color: Colors.grey,
+          ),
+        ),
+      );
+    }
+
+    Widget _buildHeader(AlbumResponseDto albumInfo) {
+      return SliverToBoxAdapter(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _buildTitle(albumInfo),
+            if (albumInfo.assets.isNotEmpty == true)
+              _buildAlbumDateRange(albumInfo),
+            if (albumInfo.shared)
+              SizedBox(
+                height: 60,
+                child: ListView.builder(
+                  padding: const EdgeInsets.only(left: 16),
+                  scrollDirection: Axis.horizontal,
+                  itemBuilder: ((context, index) {
+                    return Padding(
+                      padding: const EdgeInsets.only(right: 8.0),
+                      child: CircleAvatar(
+                        backgroundColor: Colors.grey[300],
+                        radius: 18,
+                        child: Padding(
+                          padding: const EdgeInsets.all(2.0),
+                          child: ClipRRect(
+                            borderRadius: BorderRadius.circular(50.0),
+                            child: Image.asset(
+                              'assets/immich-logo-no-outline.png',
+                            ),
+                          ),
+                        ),
+                      ),
+                    );
+                  }),
+                  itemCount: albumInfo.sharedUsers.length,
+                ),
+              )
+          ],
+        ),
+      );
+    }
+
+    Widget _buildImageGrid(AlbumResponseDto albumInfo) {
+      if (albumInfo.assets.isNotEmpty) {
+        return SliverPadding(
+          padding: const EdgeInsets.only(top: 10.0),
+          sliver: SliverGrid(
+            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 3,
+              crossAxisSpacing: 5.0,
+              mainAxisSpacing: 5,
+            ),
+            delegate: SliverChildBuilderDelegate(
+              (BuildContext context, int index) {
+                return AlbumViewerThumbnail(asset: albumInfo.assets[index]);
+              },
+              childCount: albumInfo.assets.length,
+            ),
+          ),
+        );
+      }
+      return const SliverToBoxAdapter();
+    }
+
+    Widget _buildControlButton(AlbumResponseDto albumInfo) {
+      return Padding(
+        padding: const EdgeInsets.only(left: 16.0, top: 8, bottom: 8),
+        child: SizedBox(
+          height: 40,
+          child: ListView(
+            scrollDirection: Axis.horizontal,
+            children: [
+              AlbumActionOutlinedButton(
+                iconData: Icons.add_photo_alternate_outlined,
+                onPressed: () => _onAddPhotosPressed(albumInfo),
+                labelText: "share_add_photos".tr(),
+              ),
+              if (userId == albumInfo.ownerId)
+                AlbumActionOutlinedButton(
+                  iconData: Icons.person_add_alt_rounded,
+                  onPressed: () => _onAddUsersPressed(albumInfo),
+                  labelText: "album_viewer_page_share_add_users".tr(),
+                ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    Widget _buildBody(AlbumResponseDto albumInfo) {
+      return GestureDetector(
+        onTap: () {
+          titleFocusNode.unfocus();
+        },
+        child: DraggableScrollbar.semicircle(
+          backgroundColor: Theme.of(context).primaryColor,
+          controller: scrollController,
+          heightScrollThumb: 48.0,
+          child: CustomScrollView(
+            controller: scrollController,
+            slivers: [
+              _buildHeader(albumInfo),
+              SliverPersistentHeader(
+                pinned: true,
+                delegate: ImmichSliverPersistentAppBarDelegate(
+                  minHeight: 50,
+                  maxHeight: 50,
+                  child: Container(
+                    color: immichBackgroundColor,
+                    child: _buildControlButton(albumInfo),
+                  ),
+                ),
+              ),
+              _buildImageGrid(albumInfo)
+            ],
+          ),
+        ),
+      );
+    }
+
+    return Scaffold(
+      appBar: albumInfo.when(
+        data: (AlbumResponseDto? data) {
+          if (data != null) {
+            return AlbumViewerAppbar(
+              albumInfo: data,
+              userId: userId,
+              albumId: albumId,
+            );
+          }
+          return null;
+        },
+        error: (e, _) => null,
+        loading: () => null,
+      ),
+      body: albumInfo.when(
+        data: (albumInfo) => albumInfo != null
+            ? _buildBody(albumInfo)
+            : const Center(
+                child: CircularProgressIndicator(),
+              ),
+        error: (e, _) => Center(child: Text("Error loading album info $e")),
+        loading: () => const Center(
+          child: ImmichLoadingIndicator(),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/views/asset_selection_page.dart
+++ b/mobile/lib/modules/album/views/asset_selection_page.dart
@@ -0,0 +1,100 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/models/asset_selection_page_result.model.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:immich_mobile/modules/album/ui/asset_grid_by_month.dart';
+import 'package:immich_mobile/modules/album/ui/month_group_title.dart';
+import 'package:immich_mobile/shared/providers/asset.provider.dart';
+import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
+
+class AssetSelectionPage extends HookConsumerWidget {
+  const AssetSelectionPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    ScrollController scrollController = useScrollController();
+    var assetGroupMonthYear = ref.watch(assetGroupByMonthYearProvider);
+    final selectedAssets =
+        ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum;
+    final newAssetsForAlbum =
+        ref.watch(assetSelectionProvider).selectedAdditionalAssetsForAlbum;
+    final isAlbumExist = ref.watch(assetSelectionProvider).isAlbumExist;
+
+    List<Widget> imageGridGroup = [];
+
+    String _buildAssetCountText() {
+      if (isAlbumExist) {
+        return (selectedAssets.length + newAssetsForAlbum.length).toString();
+      } else {
+        return selectedAssets.length.toString();
+      }
+    }
+
+    Widget _buildBody() {
+      assetGroupMonthYear.forEach((monthYear, assetGroup) {
+        imageGridGroup
+            .add(MonthGroupTitle(month: monthYear, assetGroup: assetGroup));
+        imageGridGroup.add(AssetGridByMonth(assetGroup: assetGroup));
+      });
+
+      return Stack(
+        children: [
+          DraggableScrollbar.semicircle(
+            backgroundColor: Theme.of(context).primaryColor,
+            controller: scrollController,
+            heightScrollThumb: 48.0,
+            child: CustomScrollView(
+              controller: scrollController,
+              slivers: [...imageGridGroup],
+            ),
+          ),
+        ],
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        elevation: 0,
+        leading: IconButton(
+          icon: const Icon(Icons.close_rounded),
+          onPressed: () {
+            ref.watch(assetSelectionProvider.notifier).removeAll();
+            AutoRouter.of(context).pop(null);
+          },
+        ),
+        title: selectedAssets.isEmpty
+            ? const Text(
+                'share_add_photos',
+                style: TextStyle(fontSize: 18),
+              ).tr()
+            : Text(
+                _buildAssetCountText(),
+                style: const TextStyle(fontSize: 18),
+              ),
+        centerTitle: false,
+        actions: [
+          if ((!isAlbumExist && selectedAssets.isNotEmpty) ||
+              (isAlbumExist && newAssetsForAlbum.isNotEmpty))
+            TextButton(
+              onPressed: () {
+                var payload = AssetSelectionPageResult(
+                  isAlbumExist: isAlbumExist,
+                  selectedAdditionalAsset: newAssetsForAlbum,
+                  selectedNewAsset: selectedAssets,
+                );
+                AutoRouter.of(context).pop(payload);
+              },
+              child: const Text(
+                "share_add",
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ).tr(),
+            ),
+        ],
+      ),
+      body: _buildBody(),
+    );
+  }
+}
--- a/mobile/lib/modules/album/views/create_album_page.dart
+++ b/mobile/lib/modules/album/views/create_album_page.dart
@@ -0,0 +1,258 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/models/asset_selection_page_result.model.dart';
+import 'package:immich_mobile/modules/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/album/providers/album_title.provider.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:immich_mobile/modules/album/ui/album_action_outlined_button.dart';
+import 'package:immich_mobile/modules/album/ui/album_title_text_field.dart';
+import 'package:immich_mobile/modules/album/ui/shared_album_thumbnail_image.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+// ignore: must_be_immutable
+class CreateAlbumPage extends HookConsumerWidget {
+  bool isSharedAlbum;
+
+  CreateAlbumPage({Key? key, required this.isSharedAlbum}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albumTitleController =
+        useTextEditingController.fromValue(TextEditingValue.empty);
+    final albumTitleTextFieldFocusNode = useFocusNode();
+    final isAlbumTitleTextFieldFocus = useState(false);
+    final isAlbumTitleEmpty = useState(true);
+    final selectedAssets =
+        ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum;
+
+    _showSelectUserPage() {
+      AutoRouter.of(context).push(const SelectUserForSharingRoute());
+    }
+
+    void _onBackgroundTapped() {
+      albumTitleTextFieldFocusNode.unfocus();
+      isAlbumTitleTextFieldFocus.value = false;
+
+      if (albumTitleController.text.isEmpty) {
+        albumTitleController.text = 'Untitled';
+        ref.watch(albumTitleProvider.notifier).setAlbumTitle('Untitled');
+      }
+    }
+
+    _onSelectPhotosButtonPressed() async {
+      ref.watch(assetSelectionProvider.notifier).setIsAlbumExist(false);
+
+      AssetSelectionPageResult? selectedAsset = await AutoRouter.of(context)
+          .push<AssetSelectionPageResult?>(const AssetSelectionRoute());
+
+      if (selectedAsset == null) {
+        ref.watch(assetSelectionProvider.notifier).removeAll();
+      }
+    }
+
+    _buildTitleInputField() {
+      return Padding(
+        padding: const EdgeInsets.only(
+          right: 10,
+          left: 10,
+        ),
+        child: AlbumTitleTextField(
+          isAlbumTitleEmpty: isAlbumTitleEmpty,
+          albumTitleTextFieldFocusNode: albumTitleTextFieldFocusNode,
+          albumTitleController: albumTitleController,
+          isAlbumTitleTextFieldFocus: isAlbumTitleTextFieldFocus,
+        ),
+      );
+    }
+
+    _buildTitle() {
+      if (selectedAssets.isEmpty) {
+        return SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.only(top: 200, left: 18),
+            child: const Text(
+              'create_shared_album_page_share_add_assets',
+              style: TextStyle(fontSize: 12),
+            ).tr(),
+          ),
+        );
+      }
+
+      return const SliverToBoxAdapter();
+    }
+
+    _buildSelectPhotosButton() {
+      if (selectedAssets.isEmpty) {
+        return SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.only(top: 16, left: 18, right: 18),
+            child: OutlinedButton.icon(
+              style: OutlinedButton.styleFrom(
+                alignment: Alignment.centerLeft,
+                padding:
+                    const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
+                side: const BorderSide(
+                  color: Color.fromARGB(255, 206, 206, 206),
+                ),
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(5),
+                ),
+              ),
+              onPressed: _onSelectPhotosButtonPressed,
+              icon: const Icon(Icons.add_rounded),
+              label: Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Text(
+                  'create_shared_album_page_share_select_photos',
+                  style: TextStyle(
+                    fontSize: 16,
+                    color: Colors.grey[700],
+                    fontWeight: FontWeight.bold,
+                  ),
+                ).tr(),
+              ),
+            ),
+          ),
+        );
+      }
+
+      return const SliverToBoxAdapter();
+    }
+
+    _buildControlButton() {
+      return Padding(
+        padding: const EdgeInsets.only(left: 12.0, top: 16, bottom: 16),
+        child: SizedBox(
+          height: 30,
+          child: ListView(
+            scrollDirection: Axis.horizontal,
+            children: [
+              AlbumActionOutlinedButton(
+                iconData: Icons.add_photo_alternate_outlined,
+                onPressed: _onSelectPhotosButtonPressed,
+                labelText: "share_add_photos".tr(),
+              ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    _buildSelectedImageGrid() {
+      if (selectedAssets.isNotEmpty) {
+        return SliverPadding(
+          padding: const EdgeInsets.only(top: 16),
+          sliver: SliverGrid(
+            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 3,
+              crossAxisSpacing: 5.0,
+              mainAxisSpacing: 5,
+            ),
+            delegate: SliverChildBuilderDelegate(
+              (BuildContext context, int index) {
+                return GestureDetector(
+                  onTap: _onBackgroundTapped,
+                  child: SharedAlbumThumbnailImage(
+                    asset: selectedAssets.toList()[index],
+                  ),
+                );
+              },
+              childCount: selectedAssets.length,
+            ),
+          ),
+        );
+      }
+
+      return const SliverToBoxAdapter();
+    }
+
+    _createNonSharedAlbum() async {
+      var newAlbum = await ref.watch(albumProvider.notifier).createAlbum(
+            ref.watch(albumTitleProvider),
+            ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum,
+          );
+
+      if (newAlbum != null) {
+        ref.watch(albumProvider.notifier).getAllAlbums();
+        ref.watch(assetSelectionProvider.notifier).removeAll();
+        ref.watch(albumTitleProvider.notifier).clearAlbumTitle();
+
+        AutoRouter.of(context).replace(AlbumViewerRoute(albumId: newAlbum.id));
+      }
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        elevation: 0,
+        centerTitle: false,
+        leading: IconButton(
+          onPressed: () {
+            ref.watch(assetSelectionProvider.notifier).removeAll();
+            AutoRouter.of(context).pop();
+          },
+          icon: const Icon(Icons.close_rounded),
+        ),
+        title: const Text(
+          'share_create_album',
+          style: TextStyle(color: Colors.black),
+        ).tr(),
+        actions: [
+          if (isSharedAlbum)
+            TextButton(
+              onPressed: albumTitleController.text.isNotEmpty
+                  ? _showSelectUserPage
+                  : null,
+              child: Text(
+                'create_shared_album_page_share'.tr(),
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          if (!isSharedAlbum)
+            TextButton(
+              onPressed: albumTitleController.text.isNotEmpty &&
+                      selectedAssets.isNotEmpty
+                  ? _createNonSharedAlbum
+                  : null,
+              child: Text(
+                'create_shared_album_page_create'.tr(),
+                style: const TextStyle(
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+        ],
+      ),
+      body: GestureDetector(
+        onTap: _onBackgroundTapped,
+        child: CustomScrollView(
+          slivers: [
+            SliverAppBar(
+              elevation: 5,
+              automaticallyImplyLeading: false,
+              // leading: Container(),
+              pinned: true,
+              floating: false,
+              bottom: PreferredSize(
+                preferredSize: const Size.fromHeight(66.0),
+                child: Column(
+                  children: [
+                    _buildTitleInputField(),
+                    if (selectedAssets.isNotEmpty) _buildControlButton(),
+                  ],
+                ),
+              ),
+            ),
+            _buildTitle(),
+            _buildSelectPhotosButton(),
+            _buildSelectedImageGrid(),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/views/library_page.dart
+++ b/mobile/lib/modules/album/views/library_page.dart
@@ -0,0 +1,116 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/album.provider.dart';
+import 'package:immich_mobile/modules/album/ui/album_thumbnail_card.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class LibraryPage extends HookConsumerWidget {
+  const LibraryPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final albums = ref.watch(albumProvider);
+
+    useEffect(
+      () {
+        ref.read(albumProvider.notifier).getAllAlbums();
+        return null;
+      },
+      [],
+    );
+
+    Widget _buildAppBar() {
+      return SliverAppBar(
+        centerTitle: true,
+        floating: true,
+        pinned: false,
+        snap: false,
+        automaticallyImplyLeading: false,
+        title: Text(
+          'IMMICH',
+          style: TextStyle(
+            fontFamily: 'SnowburstOne',
+            fontWeight: FontWeight.bold,
+            fontSize: 22,
+            color: Theme.of(context).primaryColor,
+          ),
+        ),
+      );
+    }
+
+    Widget _buildCreateAlbumButton() {
+      return GestureDetector(
+        onTap: () {
+          AutoRouter.of(context).push(CreateAlbumRoute(isSharedAlbum: false));
+        },
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Container(
+              width: MediaQuery.of(context).size.width / 2 - 18,
+              height: MediaQuery.of(context).size.width / 2 - 18,
+              decoration: BoxDecoration(
+                border: Border.all(
+                  color: Colors.grey,
+                ),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: Center(
+                child: Icon(
+                  Icons.add_rounded,
+                  size: 28,
+                  color: Theme.of(context).primaryColor,
+                ),
+              ),
+            ),
+            const Padding(
+              padding: EdgeInsets.only(top: 8.0),
+              child: Text(
+                "New album",
+                style: TextStyle(
+                  fontSize: 12,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            )
+          ],
+        ),
+      );
+    }
+
+    return Scaffold(
+      body: CustomScrollView(
+        slivers: [
+          _buildAppBar(),
+          const SliverToBoxAdapter(
+            child: Padding(
+              padding: EdgeInsets.all(12.0),
+              child: Text(
+                "Albums",
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ),
+            ),
+          ),
+          SliverPadding(
+            padding: const EdgeInsets.only(left: 12.0, right: 12, bottom: 50),
+            sliver: SliverToBoxAdapter(
+              child: Wrap(
+                spacing: 12,
+                children: [
+                  _buildCreateAlbumButton(),
+                  for (var album in albums)
+                    AlbumThumbnailCard(
+                      album: album,
+                    ),
+                ],
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/views/select_additional_user_for_sharing_page.dart
+++ b/mobile/lib/modules/album/views/select_additional_user_for_sharing_page.dart
@@ -0,0 +1,159 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/suggested_shared_users.provider.dart';
+import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:openapi/api.dart';
+
+class SelectAdditionalUserForSharingPage extends HookConsumerWidget {
+  final AlbumResponseDto albumInfo;
+
+  const SelectAdditionalUserForSharingPage({Key? key, required this.albumInfo})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    AsyncValue<List<UserResponseDto>> suggestedShareUsers =
+        ref.watch(suggestedSharedUsersProvider);
+    final sharedUsersList = useState<Set<UserResponseDto>>({});
+
+    _addNewUsersHandler() {
+      AutoRouter.of(context)
+          .pop(sharedUsersList.value.map((e) => e.id).toList());
+    }
+
+    _buildTileIcon(UserResponseDto user) {
+      if (sharedUsersList.value.contains(user)) {
+        return CircleAvatar(
+          backgroundColor: Theme.of(context).primaryColor,
+          child: const Icon(
+            Icons.check_rounded,
+            size: 25,
+          ),
+        );
+      } else {
+        return CircleAvatar(
+          backgroundImage:
+              const AssetImage('assets/immich-logo-no-outline.png'),
+          backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
+        );
+      }
+    }
+
+    _buildUserList(List<UserResponseDto> users) {
+      List<Widget> usersChip = [];
+
+      for (var user in sharedUsersList.value) {
+        usersChip.add(
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: Chip(
+              backgroundColor: Theme.of(context).primaryColor.withOpacity(0.15),
+              label: Text(
+                user.email,
+                style: const TextStyle(
+                  fontSize: 12,
+                  color: Colors.black87,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          ),
+        );
+      }
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Wrap(
+            children: [...usersChip],
+          ),
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Text(
+              'select_additional_user_for_sharing_page_suggestions'.tr(),
+              style: const TextStyle(
+                fontSize: 14,
+                color: Colors.grey,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          ListView.builder(
+            shrinkWrap: true,
+            itemBuilder: ((context, index) {
+              return ListTile(
+                leading: _buildTileIcon(users[index]),
+                title: Text(
+                  users[index].email,
+                  style: const TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                onTap: () {
+                  if (sharedUsersList.value.contains(users[index])) {
+                    sharedUsersList.value = sharedUsersList.value
+                        .where(
+                          (selectedUser) => selectedUser.id != users[index].id,
+                        )
+                        .toSet();
+                  } else {
+                    sharedUsersList.value = {
+                      ...sharedUsersList.value,
+                      users[index]
+                    };
+                  }
+                },
+              );
+            }),
+            itemCount: users.length,
+          ),
+        ],
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text(
+          'share_invite',
+          style: TextStyle(color: Colors.black),
+        ).tr(),
+        elevation: 0,
+        centerTitle: false,
+        leading: IconButton(
+          icon: const Icon(Icons.close_rounded),
+          onPressed: () {
+            AutoRouter.of(context).pop(null);
+          },
+        ),
+        actions: [
+          TextButton(
+            onPressed:
+                sharedUsersList.value.isEmpty ? null : _addNewUsersHandler,
+            child: const Text(
+              "share_add",
+              style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+            ).tr(),
+          )
+        ],
+      ),
+      body: suggestedShareUsers.when(
+        data: (users) {
+          for (var sharedUsers in albumInfo.sharedUsers) {
+            users.removeWhere(
+              (u) => u.id == sharedUsers.id || u.id == albumInfo.ownerId,
+            );
+          }
+
+          return _buildUserList(users);
+        },
+        error: (e, _) => Text("Error loading suggested users $e"),
+        loading: () => const Center(
+          child: ImmichLoadingIndicator(),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/views/select_user_for_sharing_page.dart
+++ b/mobile/lib/modules/album/views/select_user_for_sharing_page.dart
@@ -0,0 +1,173 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/album/providers/album_title.provider.dart';
+import 'package:immich_mobile/modules/album/providers/asset_selection.provider.dart';
+import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
+import 'package:immich_mobile/modules/album/providers/suggested_shared_users.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
+import 'package:openapi/api.dart';
+
+class SelectUserForSharingPage extends HookConsumerWidget {
+  const SelectUserForSharingPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final sharedUsersList = useState<Set<UserResponseDto>>({});
+    AsyncValue<List<UserResponseDto>> suggestedShareUsers =
+        ref.watch(suggestedSharedUsersProvider);
+
+    _createSharedAlbum() async {
+      var newAlbum =
+          await ref.watch(sharedAlbumProvider.notifier).createSharedAlbum(
+                ref.watch(albumTitleProvider),
+                ref.watch(assetSelectionProvider).selectedNewAssetsForAlbum,
+                sharedUsersList.value.map((userInfo) => userInfo.id).toList(),
+              );
+
+      if (newAlbum != null) {
+        await ref.watch(sharedAlbumProvider.notifier).getAllSharedAlbums();
+        ref.watch(assetSelectionProvider.notifier).removeAll();
+        ref.watch(albumTitleProvider.notifier).clearAlbumTitle();
+
+        AutoRouter.of(context)
+            .navigate(const TabControllerRoute(children: [SharingRoute()]));
+      }
+
+      ScaffoldMessenger(
+        child: SnackBar(
+          content: const Text('select_user_for_sharing_page_err_album').tr(),
+        ),
+      );
+    }
+
+    _buildTileIcon(UserResponseDto user) {
+      if (sharedUsersList.value.contains(user)) {
+        return CircleAvatar(
+          backgroundColor: Theme.of(context).primaryColor,
+          child: const Icon(
+            Icons.check_rounded,
+            size: 25,
+          ),
+        );
+      } else {
+        return CircleAvatar(
+          backgroundImage:
+              const AssetImage('assets/immich-logo-no-outline.png'),
+          backgroundColor: Theme.of(context).primaryColor.withAlpha(50),
+        );
+      }
+    }
+
+    _buildUserList(List<UserResponseDto> users) {
+      List<Widget> usersChip = [];
+
+      for (var user in sharedUsersList.value) {
+        usersChip.add(
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: Chip(
+              backgroundColor: Theme.of(context).primaryColor.withOpacity(0.15),
+              label: Text(
+                user.email,
+                style: const TextStyle(
+                  fontSize: 12,
+                  color: Colors.black87,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          ),
+        );
+      }
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Wrap(
+            children: [...usersChip],
+          ),
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: const Text(
+              'select_user_for_sharing_page_share_suggestions',
+              style: TextStyle(
+                fontSize: 14,
+                color: Colors.grey,
+                fontWeight: FontWeight.bold,
+              ),
+            ).tr(),
+          ),
+          ListView.builder(
+            shrinkWrap: true,
+            itemBuilder: ((context, index) {
+              return ListTile(
+                leading: _buildTileIcon(users[index]),
+                title: Text(
+                  users[index].email,
+                  style: const TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                onTap: () {
+                  if (sharedUsersList.value.contains(users[index])) {
+                    sharedUsersList.value = sharedUsersList.value
+                        .where(
+                          (selectedUser) => selectedUser.id != users[index].id,
+                        )
+                        .toSet();
+                  } else {
+                    sharedUsersList.value = {
+                      ...sharedUsersList.value,
+                      users[index]
+                    };
+                  }
+                },
+              );
+            }),
+            itemCount: users.length,
+          ),
+        ],
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text(
+          'share_invite',
+          style: TextStyle(color: Colors.black),
+        ).tr(),
+        elevation: 0,
+        centerTitle: false,
+        leading: IconButton(
+          icon: const Icon(Icons.close_rounded),
+          onPressed: () async {
+            AutoRouter.of(context).pop();
+          },
+        ),
+        actions: [
+          TextButton(
+            onPressed:
+                sharedUsersList.value.isEmpty ? null : _createSharedAlbum,
+            child: const Text(
+              "share_create_album",
+              style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+            ).tr(),
+          )
+        ],
+      ),
+      body: suggestedShareUsers.when(
+        data: (users) {
+          return _buildUserList(users);
+        },
+        error: (e, _) => Text("Error loading suggested users $e"),
+        loading: () => const Center(
+          child: ImmichLoadingIndicator(),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/album/views/sharing_page.dart
+++ b/mobile/lib/modules/album/views/sharing_page.dart
@@ -0,0 +1,156 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hive/hive.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
+import 'package:immich_mobile/modules/album/ui/sharing_sliver_appbar.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:openapi/api.dart';
+import 'package:transparent_image/transparent_image.dart';
+
+class SharingPage extends HookConsumerWidget {
+  const SharingPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl = '${box.get(serverEndpointKey)}/asset/thumbnail';
+    final List<AlbumResponseDto> sharedAlbums = ref.watch(sharedAlbumProvider);
+
+    useEffect(
+      () {
+        ref.read(sharedAlbumProvider.notifier).getAllSharedAlbums();
+        return null;
+      },
+      [],
+    );
+
+    _buildAlbumList() {
+      return SliverList(
+        delegate: SliverChildBuilderDelegate(
+          (BuildContext context, int index) {
+            String thumbnailUrl = sharedAlbums[index].albumThumbnailAssetId !=
+                    null
+                ? "$thumbnailRequestUrl/${sharedAlbums[index].albumThumbnailAssetId}"
+                : "https://images.unsplash.com/photo-1612178537253-bccd437b730e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Ymxhbmt8ZW58MHx8MHx8&auto=format&fit=crop&w=700&q=60";
+
+            return ListTile(
+              contentPadding:
+                  const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
+              leading: ClipRRect(
+                borderRadius: BorderRadius.circular(8),
+                child: FadeInImage(
+                  width: 60,
+                  height: 60,
+                  fit: BoxFit.cover,
+                  placeholder: MemoryImage(kTransparentImage),
+                  image: NetworkImage(
+                    thumbnailUrl,
+                    headers: {
+                      "Authorization": "Bearer ${box.get(accessTokenKey)}"
+                    },
+                  ),
+                  fadeInDuration: const Duration(milliseconds: 200),
+                  fadeOutDuration: const Duration(milliseconds: 200),
+                ),
+              ),
+              title: Text(
+                sharedAlbums[index].albumName,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                  color: Colors.grey.shade800,
+                ),
+              ),
+              onTap: () {
+                AutoRouter.of(context)
+                    .push(AlbumViewerRoute(albumId: sharedAlbums[index].id));
+              },
+            );
+          },
+          childCount: sharedAlbums.length,
+        ),
+      );
+    }
+
+    _buildEmptyListIndication() {
+      return SliverToBoxAdapter(
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Card(
+            elevation: 0,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(10), // if you need this
+              side: const BorderSide(
+                color: Colors.black12,
+                width: 1,
+              ),
+            ),
+            color: Colors.transparent,
+            child: Padding(
+              padding: const EdgeInsets.all(18.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.only(left: 5.0, bottom: 5),
+                    child: Icon(
+                      Icons.offline_share_outlined,
+                      size: 50,
+                      color: Theme.of(context).primaryColor.withAlpha(200),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Text(
+                      'sharing_page_empty_list',
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: Theme.of(context).primaryColor,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ).tr(),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Text(
+                      'sharing_page_description',
+                      style: TextStyle(fontSize: 12, color: Colors.grey[700]),
+                    ).tr(),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    return Scaffold(
+      body: CustomScrollView(
+        slivers: [
+          const SharingSliverAppBar(),
+          SliverPadding(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+            sliver: SliverToBoxAdapter(
+              child: const Text(
+                "sharing_page_album",
+                style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                ),
+              ).tr(),
+            ),
+          ),
+          sharedAlbums.isNotEmpty
+              ? _buildAlbumList()
+              : _buildEmptyListIndication()
+        ],
+      ),
+    );
+  }
+}