diff --git a/packages/app/pubspec.lock b/packages/app/pubspec.lock
index 2a746c9ed0f..74d8ab140b1 100644
--- a/packages/app/pubspec.lock
+++ b/packages/app/pubspec.lock
@@ -1302,6 +1302,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.0"
+  watcher:
+    dependency: transitive
+    description:
+      name: watcher
+      sha256: "3d2ad6751b3c16cf07c7fca317a1413b3f26530319181b37e3b9039b84fc01d8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   web:
     dependency: transitive
     description:
diff --git a/packages/neon/neon_files/lib/blocs/files.dart b/packages/neon/neon_files/lib/blocs/files.dart
index 2898ce8f424..7de32d89093 100644
--- a/packages/neon/neon_files/lib/blocs/files.dart
+++ b/packages/neon/neon_files/lib/blocs/files.dart
@@ -3,8 +3,6 @@ part of '../neon_files.dart';
 abstract class FilesBlocEvents {
   void uploadFile(final List<String> path, final String localPath);
 
-  void syncFile(final List<String> path);
-
   void openFile(final List<String> path, final String etag, final String? mimeType);
 
   void delete(final List<String> path);
@@ -29,8 +27,8 @@ class FilesBloc extends InteractiveBloc implements FilesBlocEvents, FilesBlocSta
     this.options,
     this.account,
   ) {
-    options.uploadQueueParallelism.addListener(_uploadParalelismListener);
-    options.downloadQueueParallelism.addListener(_downloadParalelismListener);
+    options.uploadQueueParallelism.addListener(_uploadParallelismListener);
+    options.downloadQueueParallelism.addListener(_downloadParallelismListener);
   }
 
   final FilesAppSpecificOptions options;
@@ -46,13 +44,28 @@ class FilesBloc extends InteractiveBloc implements FilesBlocEvents, FilesBlocSta
     _downloadQueue.dispose();
     unawaited(tasks.close());
 
-    options.uploadQueueParallelism.removeListener(_uploadParalelismListener);
-    options.downloadQueueParallelism.removeListener(_downloadParalelismListener);
+    options.uploadQueueParallelism.removeListener(_uploadParallelismListener);
+    options.downloadQueueParallelism.removeListener(_downloadParallelismListener);
   }
 
   @override
   BehaviorSubject<List<FilesTask>> tasks = BehaviorSubject<List<FilesTask>>.seeded([]);
 
+  @override
+  Future refresh() async {
+    await browser.refresh();
+  }
+
+  @override
+  void removeFavorite(final List<String> path) {
+    wrapAction(
+      () async => account.client.webdav.proppatch(
+        path.join('/'),
+        set: WebDavProp(ocfavorite: 0),
+      ),
+    );
+  }
+
   @override
   void addFavorite(final List<String> path) {
     wrapAction(
@@ -100,21 +113,6 @@ class FilesBloc extends InteractiveBloc implements FilesBlocEvents, FilesBlocSta
     );
   }
 
-  @override
-  Future refresh() async {
-    await browser.refresh();
-  }
-
-  @override
-  void removeFavorite(final List<String> path) {
-    wrapAction(
-      () async => account.client.webdav.proppatch(
-        path.join('/'),
-        set: WebDavProp(ocfavorite: 0),
-      ),
-    );
-  }
-
   @override
   void rename(final List<String> path, final String name) {
     wrapAction(
@@ -125,27 +123,6 @@ class FilesBloc extends InteractiveBloc implements FilesBlocEvents, FilesBlocSta
     );
   }
 
-  @override
-  void syncFile(final List<String> path) {
-    wrapAction(
-      () async {
-        final file = File(
-          p.join(
-            await NeonPlatform.instance.userAccessibleAppDataPath,
-            account.humanReadableID,
-            'files',
-            path.join(Platform.pathSeparator),
-          ),
-        );
-        if (!file.parent.existsSync()) {
-          file.parent.createSync(recursive: true);
-        }
-        await _downloadFile(path, file);
-      },
-      disableTimeout: true,
-    );
-  }
-
   @override
   void uploadFile(final List<String> path, final String localPath) {
     wrapAction(
@@ -177,11 +154,11 @@ class FilesBloc extends InteractiveBloc implements FilesBlocEvents, FilesBlocSta
 
   FilesBrowserBloc getNewFilesBrowserBloc() => FilesBrowserBloc(options, account);
 
-  void _downloadParalelismListener() {
+  void _downloadParallelismListener() {
     _downloadQueue.parallel = options.downloadQueueParallelism.value;
   }
 
-  void _uploadParalelismListener() {
+  void _uploadParallelismListener() {
     _uploadQueue.parallel = options.uploadQueueParallelism.value;
   }
 }
diff --git a/packages/neon/neon_files/lib/models/file_details.dart b/packages/neon/neon_files/lib/models/file_details.dart
index c0d61b28bcf..5e0eb911370 100644
--- a/packages/neon/neon_files/lib/models/file_details.dart
+++ b/packages/neon/neon_files/lib/models/file_details.dart
@@ -15,8 +15,7 @@ class FileDetails {
 
   FileDetails.fromWebDav({
     required final WebDavFile file,
-    required final List<String> path,
-  })  : path = List.from(path)..add(file.name),
+  })  : path = file.path.split('/').where((final element) => element.isNotEmpty).toList(),
         isDirectory = file.isDirectory,
         size = file.size,
         etag = file.etag,
diff --git a/packages/neon/neon_files/lib/neon_files.dart b/packages/neon/neon_files/lib/neon_files.dart
index 3b41ab6328d..28de3ceb5dd 100644
--- a/packages/neon/neon_files/lib/neon_files.dart
+++ b/packages/neon/neon_files/lib/neon_files.dart
@@ -18,10 +18,13 @@ import 'package:neon/nextcloud.dart';
 import 'package:neon/platform.dart';
 import 'package:neon/settings.dart';
 import 'package:neon/sort_box.dart';
+import 'package:neon/sync.dart';
+import 'package:neon/theme.dart';
 import 'package:neon/utils.dart';
 import 'package:neon/widgets.dart';
 import 'package:neon_files/l10n/localizations.dart';
 import 'package:neon_files/routes.dart';
+import 'package:neon_files/sync/mapping.dart';
 import 'package:neon_files/widgets/file_list_tile.dart';
 import 'package:open_file/open_file.dart';
 import 'package:path/path.dart' as p;
@@ -40,9 +43,12 @@ part 'options.dart';
 part 'pages/details.dart';
 part 'pages/main.dart';
 part 'sort/files.dart';
+part 'sync/implementation.dart';
+part 'sync/sources.dart';
 part 'utils/task.dart';
 part 'widgets/browser_view.dart';
 part 'widgets/file_preview.dart';
+part 'widgets/file_tile.dart';
 
 class FilesApp extends AppImplementation<FilesBloc, FilesAppSpecificOptions> {
   FilesApp();
@@ -68,6 +74,9 @@ class FilesApp extends AppImplementation<FilesBloc, FilesAppSpecificOptions> {
   @override
   final Widget page = const FilesMainPage();
 
+  @override
+  final FilesSync syncImplementation = const FilesSync();
+
   @override
   final RouteBase route = $filesAppRoute;
 }
diff --git a/packages/neon/neon_files/lib/sync/implementation.dart b/packages/neon/neon_files/lib/sync/implementation.dart
new file mode 100644
index 00000000000..313a77abc0b
--- /dev/null
+++ b/packages/neon/neon_files/lib/sync/implementation.dart
@@ -0,0 +1,95 @@
+part of '../neon_files.dart';
+
+@immutable
+class FilesSync implements SyncImplementation<FilesSyncMapping, WebDavFile, FileSystemEntity> {
+  const FilesSync();
+
+  @override
+  String get appId => AppIDs.files;
+
+  @override
+  FilesSyncSources getSources(final Account account, final FilesSyncMapping mapping) => FilesSyncSources(
+        account.client,
+        mapping.remotePath,
+        mapping.localPath,
+      );
+
+  @override
+  Map<String, dynamic> serializeMapping(final FilesSyncMapping mapping) => mapping.toJson();
+
+  @override
+  FilesSyncMapping deserializeMapping(final Map<String, dynamic> json) => FilesSyncMapping.fromJson(json);
+
+  @override
+  Future<FilesSyncMapping?> addMapping(final BuildContext context, final Account account) async {
+    final accountsBloc = Provider.of<AccountsBloc>(context, listen: false);
+    final appsBloc = accountsBloc.getAppsBlocFor(account);
+    final filesBloc = appsBloc.getAppBlocByID(AppIDs.files)! as FilesBloc;
+    final filesBrowserBloc = filesBloc.getNewFilesBrowserBloc();
+
+    final remotePath = await showDialog<List<String>?>(
+      context: context,
+      builder: (final context) => FilesChooseFolderDialog(
+        bloc: filesBrowserBloc,
+        filesBloc: filesBloc,
+        originalPath: const [],
+      ),
+    );
+    filesBrowserBloc.dispose();
+    if (remotePath == null) {
+      return null;
+    }
+
+    final localPath = await FileUtils.pickDirectory();
+    // ignore: use_build_context_synchronously
+    if (localPath == null || !context.mounted) {
+      return null;
+    }
+
+    return FilesSyncMapping(
+      appId: AppIDs.files,
+      accountId: account.id,
+      remotePath: remotePath.join('/'),
+      localPath: localPath,
+      journal: SyncJournal(),
+    );
+  }
+
+  @override
+  String getMappingDisplayTitle(final FilesSyncMapping mapping) => mapping.remotePath;
+
+  @override
+  String getMappingDisplaySubtitle(final FilesSyncMapping mapping) => mapping.localPath;
+
+  @override
+  String getMappingId(final FilesSyncMapping mapping) =>
+      '${Uri.encodeComponent(mapping.remotePath)}-${Uri.encodeComponent(mapping.localPath)}';
+
+  @override
+  Widget getConflictDetailsLocal(final BuildContext context, final FileSystemEntity object) {
+    final stat = object.statSync();
+    return FilesFileTile(
+      showFullPath: true,
+      filesBloc: Provider.of<FilesBloc>(context, listen: false),
+      details: FileDetails(
+        path: object.path.split('/'),
+        isDirectory: object is Directory,
+        size: stat.size,
+        etag: '',
+        mimeType: '',
+        lastModified: stat.modified,
+        hasPreview: false,
+        isFavorite: false,
+      ),
+    );
+  }
+
+  @override
+  Widget getConflictDetailsRemote(final BuildContext context, final WebDavFile object) => FilesFileTile(
+        showFullPath: true,
+        filesBloc: Provider.of<FilesBloc>(context, listen: false),
+        details: FileDetails.fromWebDav(
+          file: object,
+        ),
+      );
+}
diff --git a/packages/neon/neon_files/lib/sync/mapping.dart b/packages/neon/neon_files/lib/sync/mapping.dart
new file mode 100644
index 00000000000..98cb464abe9
--- /dev/null
+++ b/packages/neon/neon_files/lib/sync/mapping.dart
@@ -0,0 +1,55 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:flutter/foundation.dart';
+import 'package:json_annotation/json_annotation.dart';
+import 'package:neon/nextcloud.dart';
+import 'package:neon/sync.dart';
+import 'package:watcher/watcher.dart';
+
+part 'mapping.g.dart';
+
+@JsonSerializable()
+class FilesSyncMapping implements SyncMapping<WebDavFile, FileSystemEntity> {
+  FilesSyncMapping({
+    required this.accountId,
+    required this.appId,
+    required this.journal,
+    required this.remotePath,
+    required this.localPath,
+  });
+
+  factory FilesSyncMapping.fromJson(final Map<String, dynamic> json) => _$FilesSyncMappingFromJson(json);
+  Map<String, dynamic> toJson() => _$FilesSyncMappingToJson(this);
+
+  @override
+  final String accountId;
+
+  @override
+  final String appId;
+
+  @override
+  final SyncJournal journal;
+
+  final String remotePath;
+
+  final String localPath;
+
+  StreamSubscription<WatchEvent>? _subscription;
+
+  @override
+  void watch(final Function() onUpdated) {
+    debugPrint('Watching file changes: $localPath');
+    _subscription ??= DirectoryWatcher(localPath).events.listen(
+      (final event) {
+        debugPrint('Registered file change: ${event.path} ${event.type}');
+        onUpdated();
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    unawaited(_subscription?.cancel());
+  }
+}
diff --git a/packages/neon/neon_files/lib/sync/mapping.g.dart b/packages/neon/neon_files/lib/sync/mapping.g.dart
new file mode 100644
index 00000000000..3b433671582
--- /dev/null
+++ b/packages/neon/neon_files/lib/sync/mapping.g.dart
@@ -0,0 +1,23 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'mapping.dart';
+
+// **************************************************************************
+// JsonSerializableGenerator
+// **************************************************************************
+
+FilesSyncMapping _$FilesSyncMappingFromJson(Map<String, dynamic> json) => FilesSyncMapping(
+      accountId: json['accountId'] as String,
+      appId: json['appId'] as String,
+      journal: SyncJournal.fromJson(json['journal'] as Map<String, dynamic>),
+      remotePath: json['remotePath'] as String,
+      localPath: json['localPath'] as String,
+    );
+
+Map<String, dynamic> _$FilesSyncMappingToJson(FilesSyncMapping instance) => <String, dynamic>{
+      'accountId': instance.accountId,
+      'appId': instance.appId,
+      'journal': instance.journal,
+      'remotePath': instance.remotePath,
+      'localPath': instance.localPath,
+    };
diff --git a/packages/neon/neon_files/lib/sync/sources.dart b/packages/neon/neon_files/lib/sync/sources.dart
new file mode 100644
index 00000000000..e3f813e740e
--- /dev/null
+++ b/packages/neon/neon_files/lib/sync/sources.dart
@@ -0,0 +1,161 @@
+part of '../neon_files.dart';
+
+class FilesSyncSources implements SyncSources<WebDavFile, FileSystemEntity> {
+  FilesSyncSources(
+    final NextcloudClient client,
+    final String webdavBaseDir,
+    final String ioBaseDir,
+  )   : sourceA = FilesSyncSourceWebDavFile(client, webdavBaseDir),
+        sourceB = FilesSyncSourceFileSystemEntity(client, ioBaseDir);
+
+  @override
+  final SyncSource<WebDavFile, FileSystemEntity> sourceA;
+
+  @override
+  final SyncSource<FileSystemEntity, WebDavFile> sourceB;
+
+  @override
+  SyncConflictSolution? findSolution(final SyncObject<WebDavFile> objectA, final SyncObject<FileSystemEntity> objectB) {
+    if (objectA.data.isDirectory && objectB.data is Directory) {
+      return SyncConflictSolution.overwriteA;
+    }
+
+    return null;
+  }
+}
+
+class FilesSyncSourceWebDavFile implements SyncSource<WebDavFile, FileSystemEntity> {
+  FilesSyncSourceWebDavFile(
+    this.client,
+    this.webdavBaseDir,
+  );
+
+  /// [NextcloudClient] used by the WebDAV part.
+  final NextcloudClient client;
+
+  /// Base directory on the WebDAV server.
+  final String webdavBaseDir;
+
+  final props = WebDavPropWithoutValues.fromBools(
+    davgetetag: true,
+    davgetlastmodified: true,
+    nchaspreview: true,
+    ocsize: true,
+    ocfavorite: true,
+  );
+
+  String _path(final SyncObject object) => [webdavBaseDir, object.id].join('/');
+
+  @override
+  Future<List<SyncObject<WebDavFile>>> listObjects() async => (await client.webdav.propfind(
+        webdavBaseDir,
+        prop: props,
+        depth: WebDavDepth.infinity,
+      ))
+          .toWebDavFiles()
+          .sublist(1)
+          .map(
+        (final file) {
+          var id = file.path;
+          if (webdavBaseDir.isNotEmpty) {
+            id = id.replaceFirst('/$webdavBaseDir', '');
+          }
+          id = id.replaceFirst('/', '');
+          if (id.endsWith('/')) {
+            id = id.substring(0, id.length - 1);
+          }
+
+          return (
+            id,
+            file,
+          );
+        },
+      ).toList();
+
+  @override
+  Future<String> getObjectETag(final SyncObject<WebDavFile> object) async =>
+      object.data.isDirectory ? '' : object.data.etag!;
+
+  @override
+  Future<SyncObject<WebDavFile>> writeObject(final SyncObject<FileSystemEntity> object) async {
+    if (object.data is File) {
+      await client.webdav.putFile(
+        object.data as File,
+        object.data.statSync(),
+        _path(object),
+      );
+    } else if (object.data is Directory) {
+      final parts = <String>[webdavBaseDir];
+      for (final part in object.id.split('/')) {
+        parts.add(part);
+        await client.webdav.mkcol(parts.join('/'));
+      }
+    } else {
+      throw Exception('Unable to sync FileSystemEntity of type ${object.data.runtimeType}');
+    }
+    return (
+      object.id,
+      (await client.webdav.propfind(
+        _path(object),
+        prop: props,
+        depth: WebDavDepth.zero,
+      ))
+          .toWebDavFiles()
+          .single,
+    );
+  }
+
+  @override
+  Future deleteObject(final SyncObject<WebDavFile> object) async => client.webdav.delete(_path(object));
+}
+
+class FilesSyncSourceFileSystemEntity implements SyncSource<FileSystemEntity, WebDavFile> {
+  FilesSyncSourceFileSystemEntity(
+    this.client,
+    this.ioBaseDir,
+  );
+
+  /// [NextcloudClient] used by the WebDAV part.
+  final NextcloudClient client;
+
+  /// Base directory on the local filesystem.
+  final String ioBaseDir;
+
+  @override
+  Future<List<SyncObject<FileSystemEntity>>> listObjects() async => Directory(ioBaseDir)
+      .listSync(recursive: true)
+      .map(
+        (final e) => (
+          p.relative(
+            e.path,
+            from: ioBaseDir,
+          ),
+          e,
+        ),
+      )
+      .toList();
+
+  @override
+  Future<String> getObjectETag(final SyncObject<FileSystemEntity> object) async =>
+      object.data is Directory ? '' : object.data.statSync().modified.millisecondsSinceEpoch.toString();
+
+  @override
+  Future<SyncObject<FileSystemEntity>> writeObject(final SyncObject<WebDavFile> object) async {
+    var path = object.data.path;
+    if (path.startsWith('/')) {
+      path = path.substring(1);
+    }
+    if (object.data.isDirectory) {
+      final dir = Directory(p.join(ioBaseDir, object.id))..createSync();
+      return (object.id, dir);
+    } else {
+      final file = File(p.join(ioBaseDir, object.id));
+      await client.webdav.getFile(path, file);
+      await file.setLastModified(object.data.lastModified!);
+      return (object.id, file);
+    }
+  }
+
+  @override
+  Future deleteObject(final SyncObject<FileSystemEntity> object) async => object.data.delete();
+}
diff --git a/packages/neon/neon_files/lib/widgets/actions.dart b/packages/neon/neon_files/lib/widgets/actions.dart
index 1e39ea4123a..78e0c380d26 100644
--- a/packages/neon/neon_files/lib/widgets/actions.dart
+++ b/packages/neon/neon_files/lib/widgets/actions.dart
@@ -1,4 +1,3 @@
-import 'package:filesize/filesize.dart';
 import 'package:flutter/material.dart';
 import 'package:neon/utils.dart';
 import 'package:neon_files/l10n/localizations.dart';
@@ -15,7 +14,6 @@ class FileActions extends StatelessWidget {
 
   Future<void> onSelected(final BuildContext context, final FilesFileAction action) async {
     final bloc = Provider.of<FilesBloc>(context, listen: false);
-    final browserBloc = bloc.browser;
     switch (action) {
       case FilesFileAction.toggleFavorite:
         if (details.isFavorite ?? false) {
@@ -83,23 +81,6 @@ class FileActions extends StatelessWidget {
         if (result != null) {
           bloc.copy(details.path, result..add(details.name));
         }
-      case FilesFileAction.sync:
-        if (!context.mounted) {
-          return;
-        }
-        final sizeWarning = browserBloc.options.downloadSizeWarning.value;
-        if (sizeWarning != null && details.size != null && details.size! > sizeWarning) {
-          if (!(await showConfirmationDialog(
-            context,
-            AppLocalizations.of(context).downloadConfirmSizeWarning(
-              filesize(sizeWarning),
-              filesize(details.size),
-            ),
-          ))) {
-            return;
-          }
-        }
-        bloc.syncFile(details.path);
       case FilesFileAction.delete:
         if (!context.mounted) {
           return;
@@ -144,13 +125,6 @@ class FileActions extends StatelessWidget {
             value: FilesFileAction.copy,
             child: Text(AppLocalizations.of(context).actionCopy),
           ),
-          // TODO: https://github.com/provokateurin/nextcloud-neon/issues/4
-          if (!details.isDirectory) ...[
-            PopupMenuItem(
-              value: FilesFileAction.sync,
-              child: Text(AppLocalizations.of(context).actionSync),
-            ),
-          ],
           PopupMenuItem(
             value: FilesFileAction.delete,
             child: Text(AppLocalizations.of(context).actionDelete),
@@ -166,6 +140,5 @@ enum FilesFileAction {
   rename,
   move,
   copy,
-  sync,
   delete,
 }
diff --git a/packages/neon/neon_files/lib/widgets/browser_view.dart b/packages/neon/neon_files/lib/widgets/browser_view.dart
index c0daa2003e0..0e4d8affdde 100644
--- a/packages/neon/neon_files/lib/widgets/browser_view.dart
+++ b/packages/neon/neon_files/lib/widgets/browser_view.dart
@@ -100,7 +100,6 @@ class _FilesBrowserViewState extends State<FilesBrowserView> {
                                           )
                                         : FileDetails.fromWebDav(
                                             file: file,
-                                            path: widget.bloc.path.value,
                                           );
 
                                     return FileListTile(
diff --git a/packages/neon/neon_files/lib/widgets/file_list_tile.dart b/packages/neon/neon_files/lib/widgets/file_list_tile.dart
index fb5aaf8502e..8a25e471b54 100644
--- a/packages/neon/neon_files/lib/widgets/file_list_tile.dart
+++ b/packages/neon/neon_files/lib/widgets/file_list_tile.dart
@@ -1,6 +1,7 @@
 import 'package:filesize/filesize.dart';
 import 'package:flutter/material.dart';
 import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
+import 'package:neon/theme.dart';
 import 'package:neon/utils.dart';
 import 'package:neon/widgets.dart';
 import 'package:neon_files/l10n/localizations.dart';
@@ -127,7 +128,7 @@ class _FileIcon extends StatelessWidget {
             child: Icon(
               Icons.star,
               size: 14,
-              color: Colors.yellow,
+              color: NcColors.starredColor,
             ),
           ),
         ],
diff --git a/packages/neon/neon_files/lib/widgets/file_tile.dart b/packages/neon/neon_files/lib/widgets/file_tile.dart
new file mode 100644
index 00000000000..8c5a5fed0db
--- /dev/null
+++ b/packages/neon/neon_files/lib/widgets/file_tile.dart
@@ -0,0 +1,94 @@
+part of '../neon_files.dart';
+
+class FilesFileTile extends StatelessWidget {
+  const FilesFileTile({
+    required this.filesBloc,
+    required this.details,
+    this.trailing,
+    this.onTap,
+    this.uploadProgress,
+    this.downloadProgress,
+    this.showFullPath = false,
+    super.key,
+  });
+
+  final FilesBloc filesBloc;
+  final FileDetails details;
+  final Widget? trailing;
+  final Function()? onTap;
+  final int? uploadProgress;
+  final int? downloadProgress;
+  final bool showFullPath;
+
+  @override
+  Widget build(final BuildContext context) {
+    Widget icon = Center(
+      child: uploadProgress != null || downloadProgress != null
+          ? Column(
+              children: [
+                Icon(
+                  uploadProgress != null ? MdiIcons.upload : MdiIcons.download,
+                  color: Theme.of(context).colorScheme.primary,
+                ),
+                LinearProgressIndicator(
+                  value: (uploadProgress ?? downloadProgress)! / 100,
+                ),
+              ],
+            )
+          : FilePreview(
+              bloc: filesBloc,
+              details: details,
+              withBackground: true,
+              borderRadius: const BorderRadius.all(Radius.circular(8)),
+            ),
+    );
+    if (details.isFavorite ?? false) {
+      icon = Stack(
+        children: [
+          icon,
+          const Align(
+            alignment: Alignment.bottomRight,
+            child: Icon(
+              Icons.star,
+              size: 14,
+              color: NcColors.starredColor,
+            ),
+          ),
+        ],
+      );
+    }
+
+    return ListTile(
+      onTap: onTap,
+      title: Text(
+        showFullPath ? details.path.join('/') : details.name,
+        overflow: TextOverflow.ellipsis,
+      ),
+      subtitle: Row(
+        children: [
+          if (details.lastModified != null) ...[
+            RelativeTime(
+              date: details.lastModified!,
+            ),
+          ],
+          if (details.size != null && details.size! > 0) ...[
+            const SizedBox(
+              width: 10,
+            ),
+            Text(
+              filesize(details.size, 1),
+              style: DefaultTextStyle.of(context).style.copyWith(
+                    color: Colors.grey,
+                  ),
+            ),
+          ],
+        ],
+      ),
+      leading: SizedBox.square(
+        dimension: 40,
+        child: icon,
+      ),
+      trailing: trailing,
+    );
+  }
+}
diff --git a/packages/neon/neon_files/pubspec.yaml b/packages/neon/neon_files/pubspec.yaml
index 3fec7e1a86c..335f2d70f46 100644
--- a/packages/neon/neon_files/pubspec.yaml
+++ b/packages/neon/neon_files/pubspec.yaml
@@ -19,6 +19,7 @@ dependencies:
   go_router: ^10.1.2
   image_picker: ^1.0.4
   intersperse: ^2.0.0
+  json_annotation: ^4.8.1
   material_design_icons_flutter: ^7.0.7296
   neon:
     git:
@@ -31,10 +32,12 @@ dependencies:
   queue: ^3.1.0+2
   rxdart: ^0.27.7
   share_plus: ^7.1.0
+  watcher: ^1.1.0
 
 dev_dependencies:
   build_runner: ^2.4.6
   go_router_builder: ^2.3.1
+  json_serializable: ^6.7.1
   neon_lints:
     git:
       url: https://github.com/nextcloud/neon