Transfer repository from Gitlab

2025-10-29 17:40:28 +00:00 · 2022-02-03 10:06:44 -06:00
parent af2efbdbbd
commit 568cc243f0
177 changed files with 13300 additions and 0 deletions
--- a/mobile/lib/constants/hive_box.dart
+++ b/mobile/lib/constants/hive_box.dart
@@ -0,0 +1,11 @@
+// Access token
+const String userInfoBox = "immichBoxUserInfo"; // Box
+const String accessTokenKey = "immichBoxAccessTokenKey"; // Key 1
+const String deviceIdKey = 'immichBoxDeviceIdKey'; // Key 2
+
+// SERVER ENDPOINT
+const String serverEndpointKey = 'immichBoxServerEndpoint';
+
+// KEY
+const String hiveAllAsssetKey = "allAssets";
+const String hiveBackupProgressKey = "backupProgressAssets";
--- a/mobile/lib/main.dart
+++ b/mobile/lib/main.dart
@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/providers/app_state.provider.dart';
+import 'constants/hive_box.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+void main() async {
+  await Hive.initFlutter();
+  await Hive.openBox(userInfoBox);
+  // Hive.registerAdapter(ImmichBackUpAssetAdapter());
+  // Hive.deleteBoxFromDisk(hiveImmichBox);
+
+  runApp(const ProviderScope(child: ImmichApp()));
+}
+
+class ImmichApp extends ConsumerStatefulWidget {
+  const ImmichApp({Key? key}) : super(key: key);
+
+  @override
+  _ImmichAppState createState() => _ImmichAppState();
+}
+
+class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserver {
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    switch (state) {
+      case AppLifecycleState.resumed:
+        debugPrint("[APP STATE] resumed");
+        ref.read(appStateProvider.notifier).state = AppStateEnum.resumed;
+        break;
+      case AppLifecycleState.inactive:
+        debugPrint("[APP STATE] inactive");
+        ref.read(appStateProvider.notifier).state = AppStateEnum.inactive;
+        break;
+      case AppLifecycleState.paused:
+        debugPrint("[APP STATE] paused");
+        ref.read(appStateProvider.notifier).state = AppStateEnum.paused;
+        break;
+      case AppLifecycleState.detached:
+        debugPrint("[APP STATE] detached");
+        ref.read(appStateProvider.notifier).state = AppStateEnum.detached;
+        break;
+    }
+  }
+
+  Future<void> initApp() async {
+    // ! TOBE DELETE
+    // Simulate Sign In And Register/Get Device ID
+    // await ref.read(authenticationProvider.notifier).login();
+    // ref.read(backupProvider.notifier).getBackupInfo();
+    // WidgetsBinding.instance?.addObserver(this);
+  }
+
+  @override
+  initState() {
+    super.initState();
+    initApp().then((_) => debugPrint("App Init Completed"));
+  }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance?.removeObserver(this);
+    super.dispose();
+  }
+
+  final _immichRouter = AppRouter();
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      title: 'Immich',
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        primarySwatch: Colors.indigo,
+        textTheme: GoogleFonts.workSansTextTheme(
+          Theme.of(context).textTheme.apply(fontSizeFactor: 1.0),
+        ),
+        scaffoldBackgroundColor: const Color(0xFFf6f8fe),
+        appBarTheme: const AppBarTheme(
+          backgroundColor: Colors.white,
+          foregroundColor: Colors.indigo,
+          elevation: 1,
+          centerTitle: true,
+        ),
+      ),
+      routeInformationParser: _immichRouter.defaultRouteParser(),
+      routerDelegate: _immichRouter.delegate(),
+    );
+  }
+}
--- a/mobile/lib/module_template/models/store_model_here.txt
+++ b/mobile/lib/module_template/models/store_model_here.txt
--- a/mobile/lib/module_template/providers/store_providers_here.txt
+++ b/mobile/lib/module_template/providers/store_providers_here.txt
--- a/mobile/lib/module_template/services/store_services_here.txt
+++ b/mobile/lib/module_template/services/store_services_here.txt
--- a/mobile/lib/module_template/ui/store_ui_here.txt
+++ b/mobile/lib/module_template/ui/store_ui_here.txt
--- a/mobile/lib/module_template/views/store_views_here.txt
+++ b/mobile/lib/module_template/views/store_views_here.txt
--- a/mobile/lib/modules/home/models/get_all_asset_respose.model.dart
+++ b/mobile/lib/modules/home/models/get_all_asset_respose.model.dart
@@ -0,0 +1,113 @@
+import 'dart:convert';
+
+import 'package:flutter/foundation.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+
+class ImmichAssetGroupByDate {
+  final String date;
+  List<ImmichAsset> assets;
+  ImmichAssetGroupByDate({
+    required this.date,
+    required this.assets,
+  });
+
+  ImmichAssetGroupByDate copyWith({
+    String? date,
+    List<ImmichAsset>? assets,
+  }) {
+    return ImmichAssetGroupByDate(
+      date: date ?? this.date,
+      assets: assets ?? this.assets,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'date': date,
+      'assets': assets.map((x) => x.toMap()).toList(),
+    };
+  }
+
+  factory ImmichAssetGroupByDate.fromMap(Map<String, dynamic> map) {
+    return ImmichAssetGroupByDate(
+      date: map['date'] ?? '',
+      assets: List<ImmichAsset>.from(map['assets']?.map((x) => ImmichAsset.fromMap(x))),
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory ImmichAssetGroupByDate.fromJson(String source) => ImmichAssetGroupByDate.fromMap(json.decode(source));
+
+  @override
+  String toString() => 'ImmichAssetGroupByDate(date: $date, assets: $assets)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is ImmichAssetGroupByDate && other.date == date && listEquals(other.assets, assets);
+  }
+
+  @override
+  int get hashCode => date.hashCode ^ assets.hashCode;
+}
+
+class GetAllAssetResponse {
+  final int count;
+  final List<ImmichAssetGroupByDate> data;
+  final String nextPageKey;
+  GetAllAssetResponse({
+    required this.count,
+    required this.data,
+    required this.nextPageKey,
+  });
+
+  GetAllAssetResponse copyWith({
+    int? count,
+    List<ImmichAssetGroupByDate>? data,
+    String? nextPageKey,
+  }) {
+    return GetAllAssetResponse(
+      count: count ?? this.count,
+      data: data ?? this.data,
+      nextPageKey: nextPageKey ?? this.nextPageKey,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'count': count,
+      'data': data.map((x) => x.toMap()).toList(),
+      'nextPageKey': nextPageKey,
+    };
+  }
+
+  factory GetAllAssetResponse.fromMap(Map<String, dynamic> map) {
+    return GetAllAssetResponse(
+      count: map['count']?.toInt() ?? 0,
+      data: List<ImmichAssetGroupByDate>.from(map['data']?.map((x) => ImmichAssetGroupByDate.fromMap(x))),
+      nextPageKey: map['nextPageKey'] ?? '',
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory GetAllAssetResponse.fromJson(String source) => GetAllAssetResponse.fromMap(json.decode(source));
+
+  @override
+  String toString() => 'GetAllAssetResponse(count: $count, data: $data, nextPageKey: $nextPageKey)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is GetAllAssetResponse &&
+        other.count == count &&
+        listEquals(other.data, data) &&
+        other.nextPageKey == nextPageKey;
+  }
+
+  @override
+  int get hashCode => count.hashCode ^ data.hashCode ^ nextPageKey.hashCode;
+}
--- a/mobile/lib/modules/home/providers/asset.provider.dart
+++ b/mobile/lib/modules/home/providers/asset.provider.dart
@@ -0,0 +1,60 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
+import 'package:immich_mobile/modules/home/services/asset.service.dart';
+
+class AssetNotifier extends StateNotifier<List<ImmichAssetGroupByDate>> {
+  final imagePerPage = 100;
+  final AssetService _assetService = AssetService();
+
+  AssetNotifier() : super([]);
+  late String? nextPageKey = "";
+  bool isFetching = false;
+
+  getImmichAssets() async {
+    GetAllAssetResponse? res = await _assetService.getAllAsset();
+    nextPageKey = res?.nextPageKey;
+
+    if (res != null) {
+      for (var assets in res.data) {
+        state = [...state, assets];
+      }
+    }
+  }
+
+  getMoreAsset() async {
+    if (nextPageKey != null && !isFetching) {
+      isFetching = true;
+      GetAllAssetResponse? res = await _assetService.getMoreAsset(nextPageKey);
+
+      if (res != null) {
+        nextPageKey = res.nextPageKey;
+
+        List<ImmichAssetGroupByDate> previousState = state;
+        List<ImmichAssetGroupByDate> currentState = [];
+
+        for (var assets in res.data) {
+          currentState = [...currentState, assets];
+        }
+
+        if (previousState.last.date == currentState.first.date) {
+          previousState.last.assets = [...previousState.last.assets, ...currentState.first.assets];
+          state = [...previousState, ...currentState.sublist(1)];
+        } else {
+          state = [...previousState, ...currentState];
+        }
+      }
+
+      isFetching = false;
+    }
+  }
+
+  clearAllAsset() {
+    state = [];
+  }
+}
+
+final currentLocalPageProvider = StateProvider<int>((ref) => 0);
+
+final assetProvider = StateNotifierProvider<AssetNotifier, List<ImmichAssetGroupByDate>>((ref) {
+  return AssetNotifier();
+});
--- a/mobile/lib/modules/home/services/asset.service.dart
+++ b/mobile/lib/modules/home/services/asset.service.dart
@@ -0,0 +1,38 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
+import 'package:immich_mobile/shared/services/network.service.dart';
+
+class AssetService {
+  final NetworkService _networkService = NetworkService();
+
+  Future<GetAllAssetResponse?> getAllAsset() async {
+    var res = await _networkService.getRequest(url: "asset/all");
+    try {
+      Map<String, dynamic> decodedData = jsonDecode(res.toString());
+
+      GetAllAssetResponse result = GetAllAssetResponse.fromMap(decodedData);
+      return result;
+    } catch (e) {
+      debugPrint("Error getAllAsset  ${e.toString()}");
+    }
+  }
+
+  Future<GetAllAssetResponse?> getMoreAsset(String? nextPageKey) async {
+    try {
+      var res = await _networkService.getRequest(
+        url: "asset/all?nextPageKey=$nextPageKey",
+      );
+
+      Map<String, dynamic> decodedData = jsonDecode(res.toString());
+
+      GetAllAssetResponse result = GetAllAssetResponse.fromMap(decodedData);
+      if (result.count != 0) {
+        return result;
+      }
+    } catch (e) {
+      debugPrint("Error getAllAsset  ${e.toString()}");
+    }
+  }
+}
--- a/mobile/lib/modules/home/ui/image_grid.dart
+++ b/mobile/lib/modules/home/ui/image_grid.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/modules/home/ui/thumbnail_image.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+
+class ImageGrid extends StatelessWidget {
+  final List<ImmichAsset> assetGroup;
+
+  const ImageGrid({Key? key, required this.assetGroup}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverGrid(
+      gridDelegate:
+          const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 5.0, mainAxisSpacing: 5),
+      delegate: SliverChildBuilderDelegate(
+        (BuildContext context, int index) {
+          return GestureDetector(
+            onTap: () {},
+            child: ThumbnailImage(asset: assetGroup[index]),
+          );
+        },
+        childCount: assetGroup.length,
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/home/ui/immich_sliver_appbar.dart
+++ b/mobile/lib/modules/home/ui/immich_sliver_appbar.dart
@@ -0,0 +1,105 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/models/backup_state.model.dart';
+import 'package:immich_mobile/shared/providers/backup.provider.dart';
+
+class ImmichSliverAppBar extends ConsumerWidget {
+  const ImmichSliverAppBar({
+    Key? key,
+    required this.imageGridGroup,
+  }) : super(key: key);
+
+  final List<Widget> imageGridGroup;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final BackUpState _backupState = ref.watch(backupProvider);
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
+      sliver: SliverAppBar(
+        centerTitle: true,
+        floating: true,
+        pinned: false,
+        snap: false,
+        backgroundColor: Colors.grey[200],
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+        leading: Builder(
+          builder: (BuildContext context) {
+            return IconButton(
+              icon: const Icon(Icons.account_circle_rounded),
+              onPressed: () {
+                Scaffold.of(context).openDrawer();
+              },
+              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
+            );
+          },
+        ),
+        title: Text(
+          'IMMICH',
+          style: GoogleFonts.snowburstOne(
+            textStyle: TextStyle(
+              fontWeight: FontWeight.bold,
+              fontSize: 18,
+              color: Theme.of(context).primaryColor,
+            ),
+          ),
+        ),
+        actions: [
+          Stack(
+            alignment: AlignmentDirectional.center,
+            children: [
+              _backupState.backupProgress == BackUpProgressEnum.inProgress
+                  ? Positioned(
+                      top: 10,
+                      right: 12,
+                      child: SizedBox(
+                        height: 8,
+                        width: 8,
+                        child: CircularProgressIndicator(
+                          strokeWidth: 1,
+                          valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
+                        ),
+                      ),
+                    )
+                  : Container(),
+              IconButton(
+                icon: const Icon(Icons.backup_rounded),
+                tooltip: 'Backup Controller',
+                onPressed: () async {
+                  var onPop = await AutoRouter.of(context).push(const BackupControllerRoute());
+
+                  // Fetch new image
+                  if (onPop == true) {
+                    // Remove and force getting new widget again
+                    if (imageGridGroup.isNotEmpty) {
+                      ref.read(assetProvider.notifier).getMoreAsset();
+                    } else {
+                      ref.read(assetProvider.notifier).getImmichAssets();
+                    }
+                  }
+                },
+              ),
+              _backupState.backupProgress == BackUpProgressEnum.inProgress
+                  ? Positioned(
+                      bottom: 5,
+                      child: Text(
+                        _backupState.backingUpAssetCount.toString(),
+                        style: const TextStyle(fontSize: 9, fontWeight: FontWeight.bold),
+                      ),
+                    )
+                  : Container()
+            ],
+          ),
+        ],
+        systemOverlayStyle: SystemUiOverlayStyle.dark,
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/home/ui/profile_drawer.dart
+++ b/mobile/lib/modules/home/ui/profile_drawer.dart
@@ -0,0 +1,72 @@
+import 'package:auto_route/annotations.dart';
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/framework.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class ProfileDrawer extends ConsumerWidget {
+  const ProfileDrawer({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    AuthenticationState _authState = ref.watch(authenticationProvider);
+
+    return Drawer(
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(5),
+          bottomRight: Radius.circular(5),
+        ),
+      ),
+      child: ListView(
+        padding: EdgeInsets.zero,
+        children: [
+          DrawerHeader(
+            decoration: BoxDecoration(
+              color: Colors.grey[200],
+            ),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                const Image(
+                  image: AssetImage('assets/immich-logo-no-outline.png'),
+                  width: 50,
+                  filterQuality: FilterQuality.high,
+                ),
+                const Padding(padding: EdgeInsets.all(8)),
+                Text(
+                  _authState.userEmail,
+                  style: TextStyle(color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold),
+                )
+              ],
+            ),
+          ),
+          ListTile(
+            tileColor: Colors.grey[100],
+            leading: const Icon(
+              Icons.logout_rounded,
+              color: Colors.black54,
+            ),
+            title: const Text(
+              "Sign Out",
+              style: TextStyle(color: Colors.black54, fontSize: 14),
+            ),
+            onTap: () async {
+              bool res = await ref.read(authenticationProvider.notifier).logout();
+              ref.read(assetProvider.notifier).clearAllAsset();
+
+              if (res) {
+                AutoRouter.of(context).popUntilRoot();
+              }
+            },
+          )
+        ],
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/home/ui/thumbnail_image.dart
+++ b/mobile/lib/modules/home/ui/thumbnail_image.dart
@@ -0,0 +1,52 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:transparent_image/transparent_image.dart';
+
+class ThumbnailImage extends StatelessWidget {
+  final ImmichAsset asset;
+
+  const ThumbnailImage({Key? key, required this.asset}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var box = Hive.box(userInfoBox);
+    var thumbnailRequestUrl =
+        '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=true';
+
+    return GestureDetector(
+      onTap: () {
+        AutoRouter.of(context).push(
+          ImageViewerRoute(
+            imageUrl:
+                '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
+            heroTag: asset.id,
+            thumbnailUrl: thumbnailRequestUrl,
+          ),
+        );
+      },
+      onLongPress: () {},
+      child: Hero(
+        tag: asset.id,
+        child: CachedNetworkImage(
+          width: 300,
+          height: 300,
+          memCacheHeight: 250,
+          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) => const Icon(Icons.error),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/home/views/home_page.dart
+++ b/mobile/lib/modules/home/views/home_page.dart
@@ -0,0 +1,165 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
+import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
+import 'package:immich_mobile/shared/models/backup_state.model.dart';
+import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
+import 'package:immich_mobile/modules/home/ui/image_grid.dart';
+import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
+import 'package:immich_mobile/shared/providers/backup.provider.dart';
+import 'package:intl/intl.dart';
+
+class HomePage extends HookConsumerWidget {
+  const HomePage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final ValueNotifier<bool> _showBackToTopBtn = useState(false);
+    ScrollController _scrollController = useScrollController();
+    List<ImmichAssetGroupByDate> assetGroup = ref.watch(assetProvider);
+    BackUpState _backupState = ref.watch(backupProvider);
+    List<Widget> imageGridGroup = [];
+    List<GlobalKey> monthGroupKey = [];
+
+    _scrollControllerCallback() {
+      var endOfPage = _scrollController.position.maxScrollExtent;
+
+      if (_scrollController.offset >= endOfPage - (endOfPage * 0.1) && !_scrollController.position.outOfRange) {
+        ref.read(assetProvider.notifier).getMoreAsset();
+      }
+
+      if (_scrollController.offset >= 400) {
+        _showBackToTopBtn.value = true;
+      } else {
+        _showBackToTopBtn.value = false;
+      }
+    }
+
+    useEffect(() {
+      ref.read(assetProvider.notifier).getImmichAssets();
+
+      _scrollController.addListener(_scrollControllerCallback);
+
+      return () => _scrollController.removeListener(_scrollControllerCallback);
+    }, [_scrollController, key]);
+
+    Widget _buildBody() {
+      if (assetGroup.isNotEmpty) {
+        String lastGroupDate = assetGroup[0].date;
+
+        for (var group in assetGroup) {
+          var dateTitle = group.date;
+          var assetGroup = group.assets;
+
+          int? currentMonth = DateTime.tryParse(dateTitle)?.month;
+          int? previousMonth = DateTime.tryParse(lastGroupDate)?.month;
+
+          if ((currentMonth! - previousMonth!) != 0) {
+            var myKey = GlobalKey();
+            monthGroupKey.add(myKey);
+            // debugPrint("Group Key $myKey");
+
+            imageGridGroup.add(
+              SliverToBoxAdapter(
+                key: myKey,
+                child: Padding(
+                  padding: const EdgeInsets.only(left: 10.0, top: 32),
+                  child: Text(
+                    DateFormat('MMMM, y').format(
+                      DateTime.parse(dateTitle),
+                    ),
+                    style: TextStyle(
+                      fontSize: 24,
+                      fontWeight: FontWeight.bold,
+                      color: Theme.of(context).primaryColor,
+                    ),
+                  ),
+                ),
+              ),
+            );
+          }
+
+          imageGridGroup.add(
+            _buildDateGroupTitle(dateTitle),
+          );
+
+          imageGridGroup.add(ImageGrid(assetGroup: assetGroup));
+
+          lastGroupDate = dateTitle;
+        }
+
+        return SafeArea(
+          child: CustomScrollView(
+            controller: _scrollController,
+            slivers: [
+              ImmichSliverAppBar(imageGridGroup: imageGridGroup),
+              ...imageGridGroup,
+            ],
+          ),
+        );
+      } else {
+        return Container();
+      }
+    }
+
+    return Scaffold(
+      drawer: const ProfileDrawer(),
+      body: _buildBody(),
+      bottomNavigationBar: BottomAppBar(
+        child: IconButton(
+          onPressed: () {
+            if (monthGroupKey.isNotEmpty) {
+              var targetContext = monthGroupKey.last.currentContext;
+              if (targetContext != null) {
+                Scrollable.ensureVisible(
+                  targetContext,
+                  duration: const Duration(milliseconds: 400),
+                  curve: Curves.easeInOut,
+                );
+              }
+            }
+          },
+          icon: const Icon(Icons.ac_unit_outlined),
+        ),
+      ),
+      floatingActionButton: _showBackToTopBtn.value
+          ? FloatingActionButton.small(
+              enableFeedback: true,
+              backgroundColor: Theme.of(context).secondaryHeaderColor,
+              foregroundColor: Theme.of(context).primaryColor,
+              onPressed: () {
+                _scrollController.animateTo(0, duration: const Duration(seconds: 1), curve: Curves.easeOutExpo);
+              },
+              child: const Icon(Icons.keyboard_arrow_up_rounded),
+            )
+          : null,
+    );
+  }
+
+  SliverToBoxAdapter _buildDateGroupTitle(String dateTitle) {
+    var currentYear = DateTime.now().year;
+    var groupYear = DateTime.parse(dateTitle).year;
+    var formatDateTemplate = currentYear == groupYear ? 'E, MMM dd' : 'E, MMM dd, yyyy';
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.only(top: 24.0, bottom: 24.0, left: 3.0),
+        child: Row(
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(left: 8.0, bottom: 5.0, top: 5.0),
+              child: Text(
+                DateFormat(formatDateTemplate).format(DateTime.parse(dateTitle)),
+                style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.bold,
+                  color: Colors.black87,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/modules/login/models/authentication_state.model.dart
+++ b/mobile/lib/modules/login/models/authentication_state.model.dart
@@ -0,0 +1,93 @@
+import 'dart:convert';
+
+import 'package:immich_mobile/shared/models/device_info.model.dart';
+
+class AuthenticationState {
+  final String deviceId;
+  final String deviceType;
+  final String userId;
+  final String userEmail;
+  final bool isAuthenticated;
+  final DeviceInfoRemote deviceInfo;
+
+  AuthenticationState({
+    required this.deviceId,
+    required this.deviceType,
+    required this.userId,
+    required this.userEmail,
+    required this.isAuthenticated,
+    required this.deviceInfo,
+  });
+
+  AuthenticationState copyWith({
+    String? deviceId,
+    String? deviceType,
+    String? userId,
+    String? userEmail,
+    bool? isAuthenticated,
+    DeviceInfoRemote? deviceInfo,
+  }) {
+    return AuthenticationState(
+      deviceId: deviceId ?? this.deviceId,
+      deviceType: deviceType ?? this.deviceType,
+      userId: userId ?? this.userId,
+      userEmail: userEmail ?? this.userEmail,
+      isAuthenticated: isAuthenticated ?? this.isAuthenticated,
+      deviceInfo: deviceInfo ?? this.deviceInfo,
+    );
+  }
+
+  @override
+  String toString() {
+    return 'AuthenticationState(deviceId: $deviceId, deviceType: $deviceType, userId: $userId, userEmail: $userEmail, isAuthenticated: $isAuthenticated, deviceInfo: $deviceInfo)';
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'deviceId': deviceId,
+      'deviceType': deviceType,
+      'userId': userId,
+      'userEmail': userEmail,
+      'isAuthenticated': isAuthenticated,
+      'deviceInfo': deviceInfo.toMap(),
+    };
+  }
+
+  factory AuthenticationState.fromMap(Map<String, dynamic> map) {
+    return AuthenticationState(
+      deviceId: map['deviceId'] ?? '',
+      deviceType: map['deviceType'] ?? '',
+      userId: map['userId'] ?? '',
+      userEmail: map['userEmail'] ?? '',
+      isAuthenticated: map['isAuthenticated'] ?? false,
+      deviceInfo: DeviceInfoRemote.fromMap(map['deviceInfo']),
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory AuthenticationState.fromJson(String source) => AuthenticationState.fromMap(json.decode(source));
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is AuthenticationState &&
+        other.deviceId == deviceId &&
+        other.deviceType == deviceType &&
+        other.userId == userId &&
+        other.userEmail == userEmail &&
+        other.isAuthenticated == isAuthenticated &&
+        other.deviceInfo == deviceInfo;
+  }
+
+  @override
+  int get hashCode {
+    return deviceId.hashCode ^
+        deviceType.hashCode ^
+        userId.hashCode ^
+        userEmail.hashCode ^
+        isAuthenticated.hashCode ^
+        deviceInfo.hashCode;
+  }
+}
--- a/mobile/lib/modules/login/models/login_response.model.dart
+++ b/mobile/lib/modules/login/models/login_response.model.dart
@@ -0,0 +1,61 @@
+import 'dart:convert';
+
+class LogInReponse {
+  final String accessToken;
+  final String userId;
+  final String userEmail;
+
+  LogInReponse({
+    required this.accessToken,
+    required this.userId,
+    required this.userEmail,
+  });
+
+  LogInReponse copyWith({
+    String? accessToken,
+    String? userId,
+    String? userEmail,
+  }) {
+    return LogInReponse(
+      accessToken: accessToken ?? this.accessToken,
+      userId: userId ?? this.userId,
+      userEmail: userEmail ?? this.userEmail,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'accessToken': accessToken,
+      'userId': userId,
+      'userEmail': userEmail,
+    };
+  }
+
+  factory LogInReponse.fromMap(Map<String, dynamic> map) {
+    return LogInReponse(
+      accessToken: map['accessToken'] ?? '',
+      userId: map['userId'] ?? '',
+      userEmail: map['userEmail'] ?? '',
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory LogInReponse.fromJson(String source) => LogInReponse.fromMap(json.decode(source));
+
+  @override
+  String toString() => 'LogInReponse(accessToken: $accessToken, userId: $userId, userEmail: $userEmail)';
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is LogInReponse &&
+        other.accessToken == accessToken &&
+        other.userId == userId &&
+        other.userEmail == userEmail;
+  }
+
+  @override
+  int get hashCode => accessToken.hashCode ^ userId.hashCode ^ userEmail.hashCode;
+}
--- a/mobile/lib/modules/login/providers/authentication.provider.dart
+++ b/mobile/lib/modules/login/providers/authentication.provider.dart
@@ -0,0 +1,127 @@
+import 'package:dio/dio.dart';
+import 'package:flutter/material.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/login/models/authentication_state.model.dart';
+import 'package:immich_mobile/modules/login/models/login_response.model.dart';
+import 'package:immich_mobile/shared/services/backup.service.dart';
+import 'package:immich_mobile/shared/services/device_info.service.dart';
+import 'package:immich_mobile/shared/services/network.service.dart';
+import 'package:immich_mobile/shared/models/device_info.model.dart';
+import 'package:immich_mobile/utils/dio_http_interceptor.dart';
+
+class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
+  AuthenticationNotifier()
+      : super(
+          AuthenticationState(
+            deviceId: "",
+            deviceType: "",
+            isAuthenticated: false,
+            userId: "",
+            userEmail: "",
+            deviceInfo: DeviceInfoRemote(
+              id: 0,
+              userId: "",
+              deviceId: "",
+              deviceType: "",
+              notificationToken: "",
+              createdAt: "",
+              isAutoBackup: false,
+            ),
+          ),
+        );
+
+  final DeviceInfoService _deviceInfoService = DeviceInfoService();
+  final BackupService _backupService = BackupService();
+  final NetworkService _networkService = NetworkService();
+
+  Future<bool> login(String email, String password, String serverEndpoint) async {
+    // Store server endpoint to Hive and test endpoint
+    if (serverEndpoint[serverEndpoint.length - 1] == "/") {
+      var validUrl = serverEndpoint.substring(0, serverEndpoint.length - 1);
+      Hive.box(userInfoBox).put(serverEndpointKey, validUrl);
+    } else {
+      Hive.box(userInfoBox).put(serverEndpointKey, serverEndpoint);
+    }
+
+    bool isServerEndpointVerified = await _networkService.pingServer();
+    if (!isServerEndpointVerified) {
+      return false;
+    }
+
+    // Store device id to local storage
+    var deviceInfo = await _deviceInfoService.getDeviceInfo();
+    Hive.box(userInfoBox).put(deviceIdKey, deviceInfo["deviceId"]);
+
+    state = state.copyWith(
+      deviceId: deviceInfo["deviceId"],
+      deviceType: deviceInfo["deviceType"],
+    );
+
+    // Make sign-in request
+    try {
+      Response res = await _networkService.postRequest(url: 'auth/login', data: {'email': email, 'password': password});
+
+      var payload = LogInReponse.fromJson(res.toString());
+
+      Hive.box(userInfoBox).put(accessTokenKey, payload.accessToken);
+
+      state = state.copyWith(
+        isAuthenticated: true,
+        userId: payload.userId,
+        userEmail: payload.userEmail,
+      );
+    } catch (e) {
+      return false;
+    }
+
+    // Register device info
+    try {
+      Response res = await _networkService
+          .postRequest(url: 'device-info', data: {'deviceId': state.deviceId, 'deviceType': state.deviceType});
+
+      DeviceInfoRemote deviceInfo = DeviceInfoRemote.fromJson(res.toString());
+      state = state.copyWith(deviceInfo: deviceInfo);
+    } catch (e) {
+      debugPrint("ERROR Register Device Info: $e");
+    }
+
+    return true;
+  }
+
+  Future<bool> logout() async {
+    Hive.box(userInfoBox).delete(accessTokenKey);
+    state = AuthenticationState(
+      deviceId: "",
+      deviceType: "",
+      isAuthenticated: false,
+      userId: "",
+      userEmail: "",
+      deviceInfo: DeviceInfoRemote(
+        id: 0,
+        userId: "",
+        deviceId: "",
+        deviceType: "",
+        notificationToken: "",
+        createdAt: "",
+        isAutoBackup: false,
+      ),
+    );
+
+    return true;
+  }
+
+  setAutoBackup(bool backupState) async {
+    var deviceInfo = await _deviceInfoService.getDeviceInfo();
+    var deviceId = deviceInfo["deviceId"];
+    var deviceType = deviceInfo["deviceType"];
+
+    DeviceInfoRemote deviceInfoRemote = await _backupService.setAutoBackup(backupState, deviceId, deviceType);
+    state = state.copyWith(deviceInfo: deviceInfoRemote);
+  }
+}
+
+final authenticationProvider = StateNotifierProvider<AuthenticationNotifier, AuthenticationState>((ref) {
+  return AuthenticationNotifier();
+});
--- a/mobile/lib/modules/login/ui/login_form.dart
+++ b/mobile/lib/modules/login/ui/login_form.dart
@@ -0,0 +1,124 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+
+class LoginForm extends HookConsumerWidget {
+  const LoginForm({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final usernameController = useTextEditingController(text: 'testuser@email.com');
+    final passwordController = useTextEditingController(text: 'password');
+    final serverEndpointController = useTextEditingController(text: 'http://192.168.1.216');
+
+    return Center(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 300),
+        child: Wrap(
+          spacing: 32,
+          runSpacing: 32,
+          alignment: WrapAlignment.center,
+          children: [
+            const Image(
+              image: AssetImage('assets/immich-logo-no-outline.png'),
+              width: 128,
+              filterQuality: FilterQuality.high,
+            ),
+            Text(
+              'IMMICH',
+              style: GoogleFonts.snowburstOne(
+                  textStyle:
+                      TextStyle(fontWeight: FontWeight.bold, fontSize: 48, color: Theme.of(context).primaryColor)),
+            ),
+            EmailInput(controller: usernameController),
+            PasswordInput(controller: passwordController),
+            ServerEndpointInput(controller: serverEndpointController),
+            LoginButton(
+              emailController: usernameController,
+              passwordController: passwordController,
+              serverEndpointController: serverEndpointController,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class ServerEndpointInput extends StatelessWidget {
+  final TextEditingController controller;
+
+  const ServerEndpointInput({Key? key, required this.controller}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      controller: controller,
+      decoration: const InputDecoration(
+          labelText: 'Server Endpoint URL', border: OutlineInputBorder(), hintText: 'http://your-server-ip:port'),
+    );
+  }
+}
+
+class EmailInput extends StatelessWidget {
+  final TextEditingController controller;
+
+  const EmailInput({Key? key, required this.controller}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      controller: controller,
+      decoration:
+          const InputDecoration(labelText: 'email', border: OutlineInputBorder(), hintText: 'youremail@email.com'),
+    );
+  }
+}
+
+class PasswordInput extends StatelessWidget {
+  final TextEditingController controller;
+
+  const PasswordInput({Key? key, required this.controller}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      obscureText: true,
+      controller: controller,
+      decoration: const InputDecoration(labelText: 'Password', border: OutlineInputBorder(), hintText: 'password'),
+    );
+  }
+}
+
+class LoginButton extends ConsumerWidget {
+  final TextEditingController emailController;
+  final TextEditingController passwordController;
+  final TextEditingController serverEndpointController;
+
+  const LoginButton(
+      {Key? key,
+      required this.emailController,
+      required this.passwordController,
+      required this.serverEndpointController})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return ElevatedButton(
+        onPressed: () async {
+          var isAuthenicated = await ref
+              .read(authenticationProvider.notifier)
+              .login(emailController.text, passwordController.text, serverEndpointController.text);
+
+          if (isAuthenicated) {
+            AutoRouter.of(context).pushNamed("/home-page");
+          } else {
+            debugPrint("BAD LOGIN TRY AGAIN - Show UI Here");
+          }
+        },
+        child: const Text("Login"));
+  }
+}
--- a/mobile/lib/modules/login/views/login_page.dart
+++ b/mobile/lib/modules/login/views/login_page.dart
@@ -0,0 +1,16 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/modules/login/ui/login_form.dart';
+
+class LoginPage extends HookConsumerWidget {
+  const LoginPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return const Scaffold(
+      body: LoginForm(),
+    );
+  }
+}
--- a/mobile/lib/routing/auth_guard.dart
+++ b/mobile/lib/routing/auth_guard.dart
@@ -0,0 +1,22 @@
+import 'dart:convert';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:immich_mobile/shared/services/network.service.dart';
+
+class AuthGuard extends AutoRouteGuard {
+  final NetworkService _networkService = NetworkService();
+
+  @override
+  void onNavigation(NavigationResolver resolver, StackRouter router) async {
+    try {
+      var res = await _networkService.postRequest(url: 'auth/validateToken');
+      var jsonReponse = jsonDecode(res.toString());
+      if (jsonReponse['authStatus']) {
+        resolver.next(true);
+      }
+    } catch (e) {
+      router.removeUntil((route) => route.name == "LoginRoute");
+    }
+  }
+}
--- a/mobile/lib/routing/router.dart
+++ b/mobile/lib/routing/router.dart
@@ -0,0 +1,22 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/widgets.dart';
+import 'package:immich_mobile/modules/login/views/login_page.dart';
+import 'package:immich_mobile/modules/home/views/home_page.dart';
+import 'package:immich_mobile/routing/auth_guard.dart';
+import 'package:immich_mobile/shared/views/backup_controller_page.dart';
+import 'package:immich_mobile/shared/views/image_viewer_page.dart';
+
+part 'router.gr.dart';
+
+@MaterialAutoRouter(
+  replaceInRouteName: 'Page,Route',
+  routes: <AutoRoute>[
+    AutoRoute(page: LoginPage, initial: true),
+    AutoRoute(page: HomePage, guards: [AuthGuard]),
+    AutoRoute(page: BackupControllerPage, guards: [AuthGuard]),
+    AutoRoute(page: ImageViewerPage, guards: [AuthGuard]),
+  ],
+)
+class AppRouter extends _$AppRouter {
+  AppRouter() : super(authGuard: AuthGuard());
+}
--- a/mobile/lib/routing/router.gr.dart
+++ b/mobile/lib/routing/router.gr.dart
@@ -0,0 +1,122 @@
+// **************************************************************************
+// AutoRouteGenerator
+// **************************************************************************
+
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+// **************************************************************************
+// AutoRouteGenerator
+// **************************************************************************
+//
+// ignore_for_file: type=lint
+
+part of 'router.dart';
+
+class _$AppRouter extends RootStackRouter {
+  _$AppRouter(
+      {GlobalKey<NavigatorState>? navigatorKey, required this.authGuard})
+      : super(navigatorKey);
+
+  final AuthGuard authGuard;
+
+  @override
+  final Map<String, PageFactory> pagesMap = {
+    LoginRoute.name: (routeData) {
+      return MaterialPageX<dynamic>(
+          routeData: routeData, child: const LoginPage());
+    },
+    HomeRoute.name: (routeData) {
+      return MaterialPageX<dynamic>(
+          routeData: routeData, child: const HomePage());
+    },
+    BackupControllerRoute.name: (routeData) {
+      return MaterialPageX<dynamic>(
+          routeData: routeData, child: const BackupControllerPage());
+    },
+    ImageViewerRoute.name: (routeData) {
+      final args = routeData.argsAs<ImageViewerRouteArgs>();
+      return MaterialPageX<dynamic>(
+          routeData: routeData,
+          child: ImageViewerPage(
+              key: args.key,
+              imageUrl: args.imageUrl,
+              heroTag: args.heroTag,
+              thumbnailUrl: args.thumbnailUrl));
+    }
+  };
+
+  @override
+  List<RouteConfig> get routes => [
+        RouteConfig(LoginRoute.name, path: '/'),
+        RouteConfig(HomeRoute.name, path: '/home-page', guards: [authGuard]),
+        RouteConfig(BackupControllerRoute.name,
+            path: '/backup-controller-page', guards: [authGuard]),
+        RouteConfig(ImageViewerRoute.name,
+            path: '/image-viewer-page', guards: [authGuard])
+      ];
+}
+
+/// generated route for
+/// [LoginPage]
+class LoginRoute extends PageRouteInfo<void> {
+  const LoginRoute() : super(LoginRoute.name, path: '/');
+
+  static const String name = 'LoginRoute';
+}
+
+/// generated route for
+/// [HomePage]
+class HomeRoute extends PageRouteInfo<void> {
+  const HomeRoute() : super(HomeRoute.name, path: '/home-page');
+
+  static const String name = 'HomeRoute';
+}
+
+/// generated route for
+/// [BackupControllerPage]
+class BackupControllerRoute extends PageRouteInfo<void> {
+  const BackupControllerRoute()
+      : super(BackupControllerRoute.name, path: '/backup-controller-page');
+
+  static const String name = 'BackupControllerRoute';
+}
+
+/// generated route for
+/// [ImageViewerPage]
+class ImageViewerRoute extends PageRouteInfo<ImageViewerRouteArgs> {
+  ImageViewerRoute(
+      {Key? key,
+      required String imageUrl,
+      required String heroTag,
+      required String thumbnailUrl})
+      : super(ImageViewerRoute.name,
+            path: '/image-viewer-page',
+            args: ImageViewerRouteArgs(
+                key: key,
+                imageUrl: imageUrl,
+                heroTag: heroTag,
+                thumbnailUrl: thumbnailUrl));
+
+  static const String name = 'ImageViewerRoute';
+}
+
+class ImageViewerRouteArgs {
+  const ImageViewerRouteArgs(
+      {this.key,
+      required this.imageUrl,
+      required this.heroTag,
+      required this.thumbnailUrl});
+
+  final Key? key;
+
+  final String imageUrl;
+
+  final String heroTag;
+
+  final String thumbnailUrl;
+
+  @override
+  String toString() {
+    return 'ImageViewerRouteArgs{key: $key, imageUrl: $imageUrl, heroTag: $heroTag, thumbnailUrl: $thumbnailUrl}';
+  }
+}
--- a/mobile/lib/shared/models/backup_state.model.dart
+++ b/mobile/lib/shared/models/backup_state.model.dart
@@ -0,0 +1,77 @@
+import 'dart:convert';
+
+import 'package:dio/dio.dart';
+
+import 'package:immich_mobile/shared/models/server_info.model.dart';
+
+enum BackUpProgressEnum { idle, inProgress, done }
+
+class BackUpState {
+  final BackUpProgressEnum backupProgress;
+  final int totalAssetCount;
+  final int assetOnDatabase;
+  final int backingUpAssetCount;
+  final double progressInPercentage;
+  final CancelToken cancelToken;
+  final ServerInfo serverInfo;
+
+  BackUpState({
+    required this.backupProgress,
+    required this.totalAssetCount,
+    required this.assetOnDatabase,
+    required this.backingUpAssetCount,
+    required this.progressInPercentage,
+    required this.cancelToken,
+    required this.serverInfo,
+  });
+
+  BackUpState copyWith({
+    BackUpProgressEnum? backupProgress,
+    int? totalAssetCount,
+    int? assetOnDatabase,
+    int? backingUpAssetCount,
+    double? progressInPercentage,
+    CancelToken? cancelToken,
+    ServerInfo? serverInfo,
+  }) {
+    return BackUpState(
+      backupProgress: backupProgress ?? this.backupProgress,
+      totalAssetCount: totalAssetCount ?? this.totalAssetCount,
+      assetOnDatabase: assetOnDatabase ?? this.assetOnDatabase,
+      backingUpAssetCount: backingUpAssetCount ?? this.backingUpAssetCount,
+      progressInPercentage: progressInPercentage ?? this.progressInPercentage,
+      cancelToken: cancelToken ?? this.cancelToken,
+      serverInfo: serverInfo ?? this.serverInfo,
+    );
+  }
+
+  @override
+  String toString() {
+    return 'BackUpState(backupProgress: $backupProgress, totalAssetCount: $totalAssetCount, assetOnDatabase: $assetOnDatabase, backingUpAssetCount: $backingUpAssetCount, progressInPercentage: $progressInPercentage, cancelToken: $cancelToken, serverInfo: $serverInfo)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is BackUpState &&
+        other.backupProgress == backupProgress &&
+        other.totalAssetCount == totalAssetCount &&
+        other.assetOnDatabase == assetOnDatabase &&
+        other.backingUpAssetCount == backingUpAssetCount &&
+        other.progressInPercentage == progressInPercentage &&
+        other.cancelToken == cancelToken &&
+        other.serverInfo == serverInfo;
+  }
+
+  @override
+  int get hashCode {
+    return backupProgress.hashCode ^
+        totalAssetCount.hashCode ^
+        assetOnDatabase.hashCode ^
+        backingUpAssetCount.hashCode ^
+        progressInPercentage.hashCode ^
+        cancelToken.hashCode ^
+        serverInfo.hashCode;
+  }
+}
--- a/mobile/lib/shared/models/device_info.model.dart
+++ b/mobile/lib/shared/models/device_info.model.dart
@@ -0,0 +1,100 @@
+import 'dart:convert';
+import 'dart:ffi';
+
+class DeviceInfoRemote {
+  final int id;
+  final String userId;
+  final String deviceId;
+  final String deviceType;
+  final String notificationToken;
+  final String createdAt;
+  final bool isAutoBackup;
+
+  DeviceInfoRemote({
+    required this.id,
+    required this.userId,
+    required this.deviceId,
+    required this.deviceType,
+    required this.notificationToken,
+    required this.createdAt,
+    required this.isAutoBackup,
+  });
+
+  DeviceInfoRemote copyWith({
+    int? id,
+    String? userId,
+    String? deviceId,
+    String? deviceType,
+    String? notificationToken,
+    String? createdAt,
+    bool? isAutoBackup,
+  }) {
+    return DeviceInfoRemote(
+      id: id ?? this.id,
+      userId: userId ?? this.userId,
+      deviceId: deviceId ?? this.deviceId,
+      deviceType: deviceType ?? this.deviceType,
+      notificationToken: notificationToken ?? this.notificationToken,
+      createdAt: createdAt ?? this.createdAt,
+      isAutoBackup: isAutoBackup ?? this.isAutoBackup,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'id': id,
+      'userId': userId,
+      'deviceId': deviceId,
+      'deviceType': deviceType,
+      'notificationToken': notificationToken,
+      'createdAt': createdAt,
+      'isAutoBackup': isAutoBackup,
+    };
+  }
+
+  factory DeviceInfoRemote.fromMap(Map<String, dynamic> map) {
+    return DeviceInfoRemote(
+      id: map['id']?.toInt() ?? 0,
+      userId: map['userId'] ?? '',
+      deviceId: map['deviceId'] ?? '',
+      deviceType: map['deviceType'] ?? '',
+      notificationToken: map['notificationToken'] ?? '',
+      createdAt: map['createdAt'] ?? '',
+      isAutoBackup: map['isAutoBackup'] ?? false,
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory DeviceInfoRemote.fromJson(String source) => DeviceInfoRemote.fromMap(json.decode(source));
+
+  @override
+  String toString() {
+    return 'DeviceInfo(id: $id, userId: $userId, deviceId: $deviceId, deviceType: $deviceType, notificationToken: $notificationToken, createdAt: $createdAt, isAutoBackup: $isAutoBackup)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is DeviceInfoRemote &&
+        other.id == id &&
+        other.userId == userId &&
+        other.deviceId == deviceId &&
+        other.deviceType == deviceType &&
+        other.notificationToken == notificationToken &&
+        other.createdAt == createdAt &&
+        other.isAutoBackup == isAutoBackup;
+  }
+
+  @override
+  int get hashCode {
+    return id.hashCode ^
+        userId.hashCode ^
+        deviceId.hashCode ^
+        deviceType.hashCode ^
+        notificationToken.hashCode ^
+        createdAt.hashCode ^
+        isAutoBackup.hashCode;
+  }
+}
--- a/mobile/lib/shared/models/image_viewer_page_data.model.dart
+++ b/mobile/lib/shared/models/image_viewer_page_data.model.dart
@@ -0,0 +1,11 @@
+class ImageViewerPageData {
+  final String heroTag;
+  final String imageUrl;
+  final String thumbnailUrl;
+
+  ImageViewerPageData({
+    required this.heroTag,
+    required this.imageUrl,
+    required this.thumbnailUrl,
+  });
+}
--- a/mobile/lib/shared/models/immich_asset.model.dart
+++ b/mobile/lib/shared/models/immich_asset.model.dart
@@ -0,0 +1,131 @@
+import 'dart:convert';
+
+class ImmichAsset {
+  final String id;
+  final String deviceAssetId;
+  final String userId;
+  final String deviceId;
+  final String assetType;
+  final String localPath;
+  final String remotePath;
+  final String createdAt;
+  final String modifiedAt;
+  final bool isFavorite;
+  final String? description;
+
+  ImmichAsset({
+    required this.id,
+    required this.deviceAssetId,
+    required this.userId,
+    required this.deviceId,
+    required this.assetType,
+    required this.localPath,
+    required this.remotePath,
+    required this.createdAt,
+    required this.modifiedAt,
+    required this.isFavorite,
+    this.description,
+  });
+
+  ImmichAsset copyWith({
+    String? id,
+    String? deviceAssetId,
+    String? userId,
+    String? deviceId,
+    String? assetType,
+    String? localPath,
+    String? remotePath,
+    String? createdAt,
+    String? modifiedAt,
+    bool? isFavorite,
+    String? description,
+  }) {
+    return ImmichAsset(
+      id: id ?? this.id,
+      deviceAssetId: deviceAssetId ?? this.deviceAssetId,
+      userId: userId ?? this.userId,
+      deviceId: deviceId ?? this.deviceId,
+      assetType: assetType ?? this.assetType,
+      localPath: localPath ?? this.localPath,
+      remotePath: remotePath ?? this.remotePath,
+      createdAt: createdAt ?? this.createdAt,
+      modifiedAt: modifiedAt ?? this.modifiedAt,
+      isFavorite: isFavorite ?? this.isFavorite,
+      description: description ?? this.description,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'id': id,
+      'deviceAssetId': deviceAssetId,
+      'userId': userId,
+      'deviceId': deviceId,
+      'assetType': assetType,
+      'localPath': localPath,
+      'remotePath': remotePath,
+      'createdAt': createdAt,
+      'modifiedAt': modifiedAt,
+      'isFavorite': isFavorite,
+      'description': description,
+    };
+  }
+
+  factory ImmichAsset.fromMap(Map<String, dynamic> map) {
+    return ImmichAsset(
+      id: map['id'] ?? '',
+      deviceAssetId: map['deviceAssetId'] ?? '',
+      userId: map['userId'] ?? '',
+      deviceId: map['deviceId'] ?? '',
+      assetType: map['assetType'] ?? '',
+      localPath: map['localPath'] ?? '',
+      remotePath: map['remotePath'] ?? '',
+      createdAt: map['createdAt'] ?? '',
+      modifiedAt: map['modifiedAt'] ?? '',
+      isFavorite: map['isFavorite'] ?? false,
+      description: map['description'],
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory ImmichAsset.fromJson(String source) => ImmichAsset.fromMap(json.decode(source));
+
+  @override
+  String toString() {
+    return 'ImmichAsset(id: $id, deviceAssetId: $deviceAssetId, userId: $userId, deviceId: $deviceId, assetType: $assetType, localPath: $localPath, remotePath: $remotePath, createdAt: $createdAt, modifiedAt: $modifiedAt, isFavorite: $isFavorite, description: $description)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is ImmichAsset &&
+        other.id == id &&
+        other.deviceAssetId == deviceAssetId &&
+        other.userId == userId &&
+        other.deviceId == deviceId &&
+        other.assetType == assetType &&
+        other.localPath == localPath &&
+        other.remotePath == remotePath &&
+        other.createdAt == createdAt &&
+        other.modifiedAt == modifiedAt &&
+        other.isFavorite == isFavorite &&
+        other.description == description;
+  }
+
+  @override
+  int get hashCode {
+    return id.hashCode ^
+        deviceAssetId.hashCode ^
+        userId.hashCode ^
+        deviceId.hashCode ^
+        assetType.hashCode ^
+        localPath.hashCode ^
+        remotePath.hashCode ^
+        createdAt.hashCode ^
+        modifiedAt.hashCode ^
+        isFavorite.hashCode ^
+        description.hashCode;
+  }
+}
--- a/mobile/lib/shared/models/server_info.model.dart
+++ b/mobile/lib/shared/models/server_info.model.dart
@@ -0,0 +1,98 @@
+import 'dart:convert';
+
+class ServerInfo {
+  final String diskSize;
+  final String diskUse;
+  final String diskAvailable;
+  final int diskSizeRaw;
+  final int diskUseRaw;
+  final int diskAvailableRaw;
+  final double diskUsagePercentage;
+  ServerInfo({
+    required this.diskSize,
+    required this.diskUse,
+    required this.diskAvailable,
+    required this.diskSizeRaw,
+    required this.diskUseRaw,
+    required this.diskAvailableRaw,
+    required this.diskUsagePercentage,
+  });
+
+  ServerInfo copyWith({
+    String? diskSize,
+    String? diskUse,
+    String? diskAvailable,
+    int? diskSizeRaw,
+    int? diskUseRaw,
+    int? diskAvailableRaw,
+    double? diskUsagePercentage,
+  }) {
+    return ServerInfo(
+      diskSize: diskSize ?? this.diskSize,
+      diskUse: diskUse ?? this.diskUse,
+      diskAvailable: diskAvailable ?? this.diskAvailable,
+      diskSizeRaw: diskSizeRaw ?? this.diskSizeRaw,
+      diskUseRaw: diskUseRaw ?? this.diskUseRaw,
+      diskAvailableRaw: diskAvailableRaw ?? this.diskAvailableRaw,
+      diskUsagePercentage: diskUsagePercentage ?? this.diskUsagePercentage,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'diskSize': diskSize,
+      'diskUse': diskUse,
+      'diskAvailable': diskAvailable,
+      'diskSizeRaw': diskSizeRaw,
+      'diskUseRaw': diskUseRaw,
+      'diskAvailableRaw': diskAvailableRaw,
+      'diskUsagePercentage': diskUsagePercentage,
+    };
+  }
+
+  factory ServerInfo.fromMap(Map<String, dynamic> map) {
+    return ServerInfo(
+      diskSize: map['diskSize'] ?? '',
+      diskUse: map['diskUse'] ?? '',
+      diskAvailable: map['diskAvailable'] ?? '',
+      diskSizeRaw: map['diskSizeRaw']?.toInt() ?? 0,
+      diskUseRaw: map['diskUseRaw']?.toInt() ?? 0,
+      diskAvailableRaw: map['diskAvailableRaw']?.toInt() ?? 0,
+      diskUsagePercentage: map['diskUsagePercentage']?.toDouble() ?? 0.0,
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory ServerInfo.fromJson(String source) => ServerInfo.fromMap(json.decode(source));
+
+  @override
+  String toString() {
+    return 'ServerInfo(diskSize: $diskSize, diskUse: $diskUse, diskAvailable: $diskAvailable, diskSizeRaw: $diskSizeRaw, diskUseRaw: $diskUseRaw, diskAvailableRaw: $diskAvailableRaw, diskUsagePercentage: $diskUsagePercentage)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is ServerInfo &&
+        other.diskSize == diskSize &&
+        other.diskUse == diskUse &&
+        other.diskAvailable == diskAvailable &&
+        other.diskSizeRaw == diskSizeRaw &&
+        other.diskUseRaw == diskUseRaw &&
+        other.diskAvailableRaw == diskAvailableRaw &&
+        other.diskUsagePercentage == diskUsagePercentage;
+  }
+
+  @override
+  int get hashCode {
+    return diskSize.hashCode ^
+        diskUse.hashCode ^
+        diskAvailable.hashCode ^
+        diskSizeRaw.hashCode ^
+        diskUseRaw.hashCode ^
+        diskAvailableRaw.hashCode ^
+        diskUsagePercentage.hashCode;
+  }
+}
--- a/mobile/lib/shared/providers/app_state.provider.dart
+++ b/mobile/lib/shared/providers/app_state.provider.dart
@@ -0,0 +1,13 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+enum AppStateEnum {
+  active,
+  inactive,
+  paused,
+  resumed,
+  detached,
+}
+
+final appStateProvider = StateProvider<AppStateEnum>((ref) {
+  return AppStateEnum.active;
+});
--- a/mobile/lib/shared/providers/backup.provider.dart
+++ b/mobile/lib/shared/providers/backup.provider.dart
@@ -0,0 +1,137 @@
+import 'package:dio/dio.dart';
+import 'package:flutter/foundation.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/services/server_info.service.dart';
+import 'package:immich_mobile/shared/models/backup_state.model.dart';
+import 'package:immich_mobile/shared/models/server_info.model.dart';
+import 'package:immich_mobile/shared/services/backup.service.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+class BackupNotifier extends StateNotifier<BackUpState> {
+  BackupNotifier()
+      : super(
+          BackUpState(
+            backupProgress: BackUpProgressEnum.idle,
+            backingUpAssetCount: 0,
+            assetOnDatabase: 0,
+            totalAssetCount: 0,
+            progressInPercentage: 0,
+            cancelToken: CancelToken(),
+            serverInfo: ServerInfo(
+              diskAvailable: "0",
+              diskAvailableRaw: 0,
+              diskSize: "0",
+              diskSizeRaw: 0,
+              diskUsagePercentage: 0.0,
+              diskUse: "0",
+              diskUseRaw: 0,
+            ),
+          ),
+        );
+
+  final BackupService _backupService = BackupService();
+  final ServerInfoService _serverInfoService = ServerInfoService();
+
+  void getBackupInfo() async {
+    _updateServerInfo();
+
+    List<AssetPathEntity> list = await PhotoManager.getAssetPathList(onlyAll: true, type: RequestType.image);
+
+    if (list.isEmpty) {
+      debugPrint("No Asset On Device");
+      return;
+    }
+
+    int totalAsset = list[0].assetCount;
+    List<String> didBackupAsset = await _backupService.getDeviceBackupAsset();
+
+    state = state.copyWith(totalAssetCount: totalAsset, assetOnDatabase: didBackupAsset.length);
+  }
+
+  void startBackupProcess() async {
+    _updateServerInfo();
+
+    state = state.copyWith(backupProgress: BackUpProgressEnum.inProgress);
+
+    var authResult = await PhotoManager.requestPermissionExtend();
+    if (authResult.isAuth) {
+      await PhotoManager.clearFileCache();
+      // await PhotoManager.presentLimited();
+      // Gather assets info
+      List<AssetPathEntity> list =
+          await PhotoManager.getAssetPathList(hasAll: true, onlyAll: true, type: RequestType.image);
+
+      if (list.isEmpty) {
+        debugPrint("No Asset On Device - Abort Backup Process");
+        return;
+      }
+
+      int totalAsset = list[0].assetCount;
+      List<AssetEntity> currentAssets = await list[0].getAssetListRange(start: 0, end: totalAsset);
+
+      // Get device assets info from database
+      // Compare and find different assets that has not been backing up
+      // Backup those assets
+      List<String> backupAsset = await _backupService.getDeviceBackupAsset();
+
+      state = state.copyWith(totalAssetCount: totalAsset, assetOnDatabase: backupAsset.length);
+      // Remove item that has already been backed up
+      for (var backupAssetId in backupAsset) {
+        currentAssets.removeWhere((e) => e.id == backupAssetId);
+      }
+
+      if (currentAssets.isEmpty) {
+        state = state.copyWith(backupProgress: BackUpProgressEnum.idle);
+      }
+
+      state = state.copyWith(backingUpAssetCount: currentAssets.length);
+
+      // Perform Packup
+      state = state.copyWith(cancelToken: CancelToken());
+      _backupService.backupAsset(currentAssets, state.cancelToken, _onAssetUploaded, _onUploadProgress);
+    } else {
+      PhotoManager.openSetting();
+    }
+  }
+
+  void cancelBackup() {
+    state.cancelToken.cancel('Cancel Backup');
+    state = state.copyWith(backupProgress: BackUpProgressEnum.idle);
+  }
+
+  void _onAssetUploaded() {
+    state =
+        state.copyWith(backingUpAssetCount: state.backingUpAssetCount - 1, assetOnDatabase: state.assetOnDatabase + 1);
+
+    if (state.backingUpAssetCount == 0) {
+      state = state.copyWith(backupProgress: BackUpProgressEnum.done, progressInPercentage: 0.0);
+    }
+
+    _updateServerInfo();
+  }
+
+  void _onUploadProgress(int sent, int total) {
+    state = state.copyWith(progressInPercentage: (sent.toDouble() / total.toDouble() * 100));
+  }
+
+  void _updateServerInfo() async {
+    var serverInfo = await _serverInfoService.getServerInfo();
+
+    // Update server info
+    state = state.copyWith(
+      serverInfo: ServerInfo(
+        diskSize: serverInfo.diskSize,
+        diskUse: serverInfo.diskUse,
+        diskAvailable: serverInfo.diskAvailable,
+        diskSizeRaw: serverInfo.diskSizeRaw,
+        diskUseRaw: serverInfo.diskUseRaw,
+        diskAvailableRaw: serverInfo.diskAvailableRaw,
+        diskUsagePercentage: serverInfo.diskUsagePercentage,
+      ),
+    );
+  }
+}
+
+final backupProvider = StateNotifierProvider<BackupNotifier, BackUpState>((ref) {
+  return BackupNotifier();
+});
--- a/mobile/lib/shared/services/backup.service.dart
+++ b/mobile/lib/shared/services/backup.service.dart
@@ -0,0 +1,124 @@
+import 'dart:convert';
+import 'dart:io';
+
+import 'package:dio/dio.dart';
+import 'package:flutter/material.dart';
+import 'package:hive/hive.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/shared/services/network.service.dart';
+import 'package:immich_mobile/shared/models/device_info.model.dart';
+import 'package:immich_mobile/utils/dio_http_interceptor.dart';
+import 'package:immich_mobile/utils/files_helper.dart';
+import 'package:photo_manager/photo_manager.dart';
+import 'package:http_parser/http_parser.dart';
+import 'package:path/path.dart' as p;
+import 'package:exif/exif.dart';
+
+class BackupService {
+  final NetworkService _networkService = NetworkService();
+
+  Future<List<String>> getDeviceBackupAsset() async {
+    String deviceId = Hive.box(userInfoBox).get(deviceIdKey);
+
+    Response response = await _networkService.getRequest(url: "asset/$deviceId");
+    List<dynamic> result = jsonDecode(response.toString());
+
+    return result.cast<String>();
+  }
+
+  backupAsset(List<AssetEntity> assetList, CancelToken cancelToken, Function singleAssetDoneCb,
+      Function(int, int) uploadProgress) async {
+    var dio = Dio();
+    dio.interceptors.add(AuthenticatedRequestInterceptor());
+    String deviceId = Hive.box(userInfoBox).get(deviceIdKey);
+    String savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
+    File? file;
+
+    for (var entity in assetList) {
+      try {
+        file = await entity.file.timeout(const Duration(seconds: 5));
+
+        if (file != null) {
+          // reading exif
+          // var exifData = await readExifFromFile(file);
+
+          // for (String key in exifData.keys) {
+          //   debugPrint("- $key (${exifData[key]?.tagType}): ${exifData[key]}");
+          // }
+
+          // debugPrint("------------------");
+          String originalFileName = await entity.titleAsync;
+          String fileNameWithoutPath = originalFileName.toString().split(".")[0];
+          var fileExtension = p.extension(file.path);
+          LatLng coordinate = await entity.latlngAsync();
+          var mimeType = FileHelper.getMimeType(file.path);
+          var formData = FormData.fromMap({
+            'deviceAssetId': entity.id,
+            'deviceId': deviceId,
+            'assetType': _getAssetType(entity.type),
+            'createdAt': entity.createDateTime.toIso8601String(),
+            'modifiedAt': entity.modifiedDateTime.toIso8601String(),
+            'isFavorite': entity.isFavorite,
+            'fileExtension': fileExtension,
+            'lat': coordinate.latitude,
+            'lon': coordinate.longitude,
+            'files': [
+              await MultipartFile.fromFile(
+                file.path,
+                filename: fileNameWithoutPath,
+                contentType: MediaType(
+                  mimeType["type"],
+                  mimeType["subType"],
+                ),
+              ),
+            ]
+          });
+
+          Response res = await dio.post(
+            '$savedEndpoint/asset/upload',
+            data: formData,
+            cancelToken: cancelToken,
+            onSendProgress: (sent, total) => uploadProgress(sent, total),
+          );
+
+          if (res.statusCode == 201) {
+            singleAssetDoneCb();
+          }
+        }
+      } on DioError catch (e) {
+        debugPrint("DioError backupAsset: ${e.response}");
+        break;
+      } catch (e) {
+        debugPrint("ERROR backupAsset: ${e.toString()}");
+        continue;
+      } finally {
+        if (Platform.isIOS) {
+          file?.deleteSync();
+        }
+      }
+    }
+  }
+
+  String _getAssetType(AssetType assetType) {
+    switch (assetType) {
+      case AssetType.audio:
+        return "AUDIO";
+      case AssetType.image:
+        return "IMAGE";
+      case AssetType.video:
+        return "VIDEO";
+      case AssetType.other:
+        return "OTHER";
+    }
+  }
+
+  Future<DeviceInfoRemote> setAutoBackup(bool status, String deviceId, String deviceType) async {
+    var res = await _networkService.patchRequest(url: 'device-info', data: {
+      "isAutoBackup": status,
+      "deviceId": deviceId,
+      "deviceType": deviceType,
+    });
+
+    return DeviceInfoRemote.fromJson(res.toString());
+  }
+}
--- a/mobile/lib/shared/services/device_info.service.dart
+++ b/mobile/lib/shared/services/device_info.service.dart
@@ -0,0 +1,30 @@
+import 'package:device_info_plus/device_info_plus.dart';
+import 'package:flutter/material.dart';
+
+class DeviceInfoService {
+  Future<Map<String, dynamic>> getDeviceInfo() async {
+    // Get device info
+    DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
+    String? deviceId = "";
+    String deviceType = "";
+
+    try {
+      AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
+      deviceId = androidInfo.androidId;
+      deviceType = "ANDROID";
+    } catch (e) {
+      debugPrint("Not an android device");
+    }
+
+    try {
+      IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
+      deviceId = iosInfo.identifierForVendor;
+      deviceType = "IOS";
+      debugPrint("Device ID: $deviceId");
+    } catch (e) {
+      debugPrint("Not an ios device");
+    }
+
+    return {"deviceId": deviceId, "deviceType": deviceType};
+  }
+}
--- a/mobile/lib/shared/services/local_storage.service.dart
+++ b/mobile/lib/shared/services/local_storage.service.dart
@@ -0,0 +1,18 @@
+import 'package:hive/hive.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+
+class LocalStorageService {
+  late Box _box;
+
+  LocalStorageService() {
+    _box = Hive.box(userInfoBox);
+  }
+
+  T get<T>(String key) {
+    return _box.get(key);
+  }
+
+  put<T>(String key, T value) {
+    return _box.put(key, value);
+  }
+}
--- a/mobile/lib/shared/services/network.service.dart
+++ b/mobile/lib/shared/services/network.service.dart
@@ -0,0 +1,89 @@
+import 'dart:convert';
+
+import 'package:dio/dio.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:hive/hive.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+import 'package:immich_mobile/utils/dio_http_interceptor.dart';
+
+class NetworkService {
+  Future<dynamic> getRequest({required String url}) async {
+    try {
+      var dio = Dio();
+      dio.interceptors.add(AuthenticatedRequestInterceptor());
+
+      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
+      Response res = await dio.get('$savedEndpoint/$url');
+
+      if (res.statusCode == 200) {
+        return res;
+      }
+    } on DioError catch (e) {
+      debugPrint("DioError: ${e.response}");
+    } catch (e) {
+      debugPrint("ERROR getRequest: ${e.toString()}");
+    }
+  }
+
+  Future<dynamic> postRequest({required String url, dynamic data}) async {
+    try {
+      var dio = Dio();
+      dio.interceptors.add(AuthenticatedRequestInterceptor());
+
+      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
+      String validUrl = Uri.parse('$savedEndpoint/$url').toString();
+      Response res = await dio.post(validUrl, data: data);
+
+      return res;
+    } on DioError catch (e) {
+      debugPrint("DioError: ${e.response}");
+      return false;
+    } catch (e) {
+      debugPrint("ERROR BackupService: $e");
+    }
+  }
+
+  Future<dynamic> patchRequest({required String url, dynamic data}) async {
+    try {
+      var dio = Dio();
+      dio.interceptors.add(AuthenticatedRequestInterceptor());
+
+      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
+
+      String validUrl = Uri.parse('$savedEndpoint/$url').toString();
+      Response res = await dio.patch(validUrl, data: data);
+
+      return res;
+    } on DioError catch (e) {
+      debugPrint("DioError: ${e.response}");
+    } catch (e) {
+      debugPrint("ERROR BackupService: $e");
+    }
+  }
+
+  Future<bool> pingServer() async {
+    try {
+      var dio = Dio();
+
+      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
+
+      String validUrl = Uri.parse('$savedEndpoint/server-info/ping').toString();
+
+      debugPrint("pint server at url $validUrl");
+      Response res = await dio.get(validUrl);
+      var jsonRespsonse = jsonDecode(res.toString());
+
+      if (jsonRespsonse["res"] == "pong") {
+        return true;
+      } else {
+        return false;
+      }
+    } on DioError catch (e) {
+      debugPrint("[PING SERVER] DioError: ${e.response} - $e");
+      return false;
+    } catch (e) {
+      debugPrint("ERROR BackupService: $e");
+      return false;
+    }
+  }
+}
--- a/mobile/lib/shared/services/server_info.service.dart
+++ b/mobile/lib/shared/services/server_info.service.dart
@@ -0,0 +1,15 @@
+import 'dart:convert';
+
+import 'package:dio/dio.dart';
+import 'package:immich_mobile/shared/services/network.service.dart';
+import 'package:immich_mobile/shared/models/server_info.model.dart';
+
+class ServerInfoService {
+  final NetworkService _networkService = NetworkService();
+
+  Future<ServerInfo> getServerInfo() async {
+    Response response = await _networkService.getRequest(url: 'server-info');
+
+    return ServerInfo.fromJson(response.toString());
+  }
+}
--- a/mobile/lib/shared/views/backup_controller_page.dart
+++ b/mobile/lib/shared/views/backup_controller_page.dart
@@ -0,0 +1,232 @@
+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/login/models/authentication_state.model.dart';
+import 'package:immich_mobile/shared/models/backup_state.model.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/shared/providers/backup.provider.dart';
+import 'package:percent_indicator/linear_percent_indicator.dart';
+
+class BackupControllerPage extends HookConsumerWidget {
+  const BackupControllerPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    BackUpState _backupState = ref.watch(backupProvider);
+    AuthenticationState _authenticationState = ref.watch(authenticationProvider);
+
+    bool shouldBackup = _backupState.totalAssetCount - _backupState.assetOnDatabase == 0 ? false : true;
+
+    useEffect(() {
+      if (_backupState.backupProgress != BackUpProgressEnum.inProgress) {
+        ref.read(backupProvider.notifier).getBackupInfo();
+      }
+    }, []);
+
+    Widget _buildStorageInformation() {
+      return ListTile(
+        leading: Icon(
+          Icons.storage_rounded,
+          color: Theme.of(context).primaryColor,
+        ),
+        title: const Text(
+          "Server Storage",
+          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+        ),
+        subtitle: Padding(
+          padding: const EdgeInsets.only(top: 8.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              LinearPercentIndicator(
+                padding: const EdgeInsets.only(top: 8.0),
+                lineHeight: 5.0,
+                percent: _backupState.serverInfo.diskUsagePercentage / 100.0,
+                backgroundColor: Colors.grey,
+                progressColor: Theme.of(context).primaryColor,
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 12.0),
+                child: Text('${_backupState.serverInfo.diskUse} of ${_backupState.serverInfo.diskSize} used'),
+              ),
+            ],
+          ),
+        ),
+      );
+    }
+
+    ListTile _buildBackupController() {
+      var backUpOption = _authenticationState.deviceInfo.isAutoBackup ? "on" : "off";
+      var isAutoBackup = _authenticationState.deviceInfo.isAutoBackup;
+      var backupBtnText = _authenticationState.deviceInfo.isAutoBackup ? "off" : "on";
+      return ListTile(
+        isThreeLine: true,
+        leading: isAutoBackup
+            ? Icon(
+                Icons.cloud_done_rounded,
+                color: Theme.of(context).primaryColor,
+              )
+            : const Icon(Icons.cloud_off_rounded),
+        title: Text(
+          "Back up is $backUpOption",
+          style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+        ),
+        subtitle: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              !isAutoBackup
+                  ? const Text(
+                      "Turn on backup to automatically upload new assets to the server.",
+                      style: TextStyle(fontSize: 14),
+                    )
+                  : Container(),
+              OutlinedButton(
+                onPressed: () {
+                  isAutoBackup
+                      ? ref.watch(authenticationProvider.notifier).setAutoBackup(false)
+                      : ref.watch(authenticationProvider.notifier).setAutoBackup(true);
+                },
+                child: Text("Turn $backupBtnText Backup"),
+              )
+            ],
+          ),
+        ),
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text(
+          "Backup",
+          style: TextStyle(fontWeight: FontWeight.bold),
+        ),
+        leading: IconButton(
+            onPressed: () {
+              AutoRouter.of(context).pop(true);
+            },
+            icon: const Icon(Icons.arrow_back_ios_rounded)),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: ListView(
+          // crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const Padding(
+              padding: EdgeInsets.all(8.0),
+              child: Text(
+                "Backup Information",
+                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+              ),
+            ),
+            BackupInfoCard(
+              title: "Total",
+              subtitle: "All images and video on the device",
+              info: "${_backupState.totalAssetCount}",
+            ),
+            BackupInfoCard(
+              title: "Backup",
+              subtitle: "Images and videos of the device that are backup on server",
+              info: "${_backupState.assetOnDatabase}",
+            ),
+            BackupInfoCard(
+              title: "Remainder",
+              subtitle: "Images and videos that has not been backing up",
+              info: "${_backupState.totalAssetCount - _backupState.assetOnDatabase}",
+            ),
+            const Divider(),
+            _buildBackupController(),
+            const Divider(),
+            _buildStorageInformation(),
+            const Divider(),
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Text(
+                  "Asset that were being backup: ${_backupState.backingUpAssetCount} [${_backupState.progressInPercentage.toStringAsFixed(0)}%]"),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(left: 8.0),
+              child: Row(children: [
+                const Text("Backup Progress:"),
+                const Padding(padding: EdgeInsets.symmetric(horizontal: 2)),
+                _backupState.backupProgress == BackUpProgressEnum.inProgress
+                    ? const CircularProgressIndicator.adaptive()
+                    : const Text("Done"),
+              ]),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Container(
+                child: _backupState.backupProgress == BackUpProgressEnum.inProgress
+                    ? ElevatedButton(
+                        style: ElevatedButton.styleFrom(primary: Colors.red[300]),
+                        onPressed: () {
+                          ref.read(backupProvider.notifier).cancelBackup();
+                        },
+                        child: const Text("Cancel"),
+                      )
+                    : ElevatedButton(
+                        onPressed: shouldBackup
+                            ? () {
+                                ref.read(backupProvider.notifier).startBackupProcess();
+                              }
+                            : null,
+                        child: const Text("Start Backup"),
+                      ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class BackupInfoCard extends StatelessWidget {
+  final String title;
+  final String subtitle;
+  final String info;
+  const BackupInfoCard({Key? key, required this.title, required this.subtitle, required this.info}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(5), // if you need this
+        side: const BorderSide(
+          color: Colors.black12,
+          width: 1,
+        ),
+      ),
+      elevation: 0,
+      borderOnForeground: false,
+      child: ListTile(
+        minVerticalPadding: 15,
+        isThreeLine: true,
+        title: Text(
+          title,
+          style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+        ),
+        subtitle: Padding(
+          padding: const EdgeInsets.only(top: 8.0),
+          child: Text(
+            subtitle,
+            style: const TextStyle(color: Color(0xFF808080), fontSize: 12),
+          ),
+        ),
+        trailing: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              info,
+              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+            ),
+            const Text("assets"),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/shared/views/image_viewer_page.dart
+++ b/mobile/lib/shared/views/image_viewer_page.dart
@@ -0,0 +1,64 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:hive/hive.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+
+class ImageViewerPage extends StatelessWidget {
+  final String imageUrl;
+  final String heroTag;
+  final String thumbnailUrl;
+
+  const ImageViewerPage({Key? key, required this.imageUrl, required this.heroTag, required this.thumbnailUrl})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var box = Hive.box(userInfoBox);
+
+    return Scaffold(
+      backgroundColor: Colors.black,
+      appBar: AppBar(
+        toolbarHeight: 60,
+        backgroundColor: Colors.black,
+        leading: IconButton(
+            onPressed: () {
+              AutoRouter.of(context).pop();
+            },
+            icon: const Icon(Icons.arrow_back_ios)),
+      ),
+      body: Dismissible(
+        direction: DismissDirection.vertical,
+        onDismissed: (_) {
+          AutoRouter.of(context).pop();
+        },
+        key: Key(heroTag),
+        child: Center(
+          child: Hero(
+            tag: heroTag,
+            child: CachedNetworkImage(
+              fit: BoxFit.cover,
+              imageUrl: imageUrl,
+              httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+              fadeInDuration: const Duration(milliseconds: 250),
+              errorWidget: (context, url, error) => const Icon(Icons.error),
+              placeholder: (context, url) {
+                return CachedNetworkImage(
+                  fit: BoxFit.cover,
+                  imageUrl: thumbnailUrl,
+                  httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+                  placeholderFadeInDuration: const Duration(milliseconds: 0),
+                  progressIndicatorBuilder: (context, url, downloadProgress) => Transform.scale(
+                    scale: 0.2,
+                    child: CircularProgressIndicator(value: downloadProgress.progress),
+                  ),
+                  errorWidget: (context, url, error) => const Icon(Icons.error),
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/utils/dio_http_interceptor.dart
+++ b/mobile/lib/utils/dio_http_interceptor.dart
@@ -0,0 +1,17 @@
+import 'package:dio/dio.dart';
+import 'package:flutter/material.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:immich_mobile/constants/hive_box.dart';
+
+class AuthenticatedRequestInterceptor extends Interceptor {
+  @override
+  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
+    // debugPrint('REQUEST[${options.method}] => PATH: ${options.path}');
+
+    var box = Hive.box(userInfoBox);
+
+    options.headers["Authorization"] = "Bearer ${box.get(accessTokenKey)}";
+    options.responseType = ResponseType.plain;
+    return super.onRequest(options, handler);
+  }
+}
--- a/mobile/lib/utils/files_helper.dart
+++ b/mobile/lib/utils/files_helper.dart
@@ -0,0 +1,33 @@
+import 'package:path/path.dart' as p;
+
+class FileHelper {
+  static getMimeType(String filePath) {
+    var fileExtension = p.extension(filePath).split(".")[1];
+
+    switch (fileExtension) {
+      case 'gif':
+        return {"type": "image", "subType": "gif"};
+
+      case 'jpeg':
+        return {"type": "image", "subType": "jpeg"};
+
+      case 'jpg':
+        return {"type": "image", "subType": "jpeg"};
+
+      case 'png':
+        return {"type": "image", "subType": "png"};
+
+      case 'mov':
+        return {"type": "video", "subType": "quicktime"};
+
+      case 'mp4':
+        return {"type": "video", "subType": "mp4"};
+
+      case 'avi':
+        return {"type": "video", "subType": "x-msvideo"};
+
+      default:
+        return {"type": "unsupport", "subType": "unsupport"};
+    }
+  }
+}