diff --git a/App_Resources/cardwallet/Android/src/main/res/values/material3_styles.xml b/App_Resources/cardwallet/Android/src/main/res/values/material3_styles.xml
index 649f08089..5ddd77208 100644
--- a/App_Resources/cardwallet/Android/src/main/res/values/material3_styles.xml
+++ b/App_Resources/cardwallet/Android/src/main/res/values/material3_styles.xml
@@ -5,9 +5,9 @@
 
     <!-- override buttons style to use material3 -->
     <style name="UnelevatedButton.Custom" parent="@style/Widget.Material3.Button.UnelevatedButton">
-        <item name="android:padding">0dp</item>
-        <item name="android:minWidth">88dp</item>
+       <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
@@ -15,36 +15,36 @@
     </style>
     <style name="UnelevatedButton.Custom.Icon"
         parent="@style/Widget.Material3.Button.TonalButton.Icon">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="TextButton.Custom.Icon" parent="@style/Widget.Material3.Button.TextButton.Icon">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="TextButton.Custom" parent="@style/Widget.Material3.Button.TextButton">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="OutlinedButton.Custom" parent="@style/Widget.Material3.Button.OutlinedButton">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
@@ -52,27 +52,27 @@
     </style>
     <style name="OutlinedButton.Custom.Icon"
         parent="@style/Widget.Material3.Button.OutlinedButton.Icon">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="Button.Custom" parent="@style/Widget.Material3.Button">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="Button.Custom.Icon" parent="@style/Widget.Material3.Button.Icon">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
@@ -106,4 +106,8 @@
     <style name="TextInputLayout.Outlined"
         parent="@style/Widget.Material3.TextInputLayout.OutlinedBox">
     </style>
+    <style name="LinearProgress"
+        parent="@style/Widget.Material3.LinearProgressIndicator">
+        <item name="trackCornerRadius">2dp</item>
+  </style>
 </resources>
\ No newline at end of file
diff --git a/App_Resources/documentscanner/Android/src/main/res/values/material3_styles.xml b/App_Resources/documentscanner/Android/src/main/res/values/material3_styles.xml
index 82bbcd5b1..5ddd77208 100644
--- a/App_Resources/documentscanner/Android/src/main/res/values/material3_styles.xml
+++ b/App_Resources/documentscanner/Android/src/main/res/values/material3_styles.xml
@@ -5,9 +5,9 @@
 
     <!-- override buttons style to use material3 -->
     <style name="UnelevatedButton.Custom" parent="@style/Widget.Material3.Button.UnelevatedButton">
-        <item name="android:padding">0dp</item>
-        <item name="android:minWidth">88dp</item>
+       <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
@@ -15,36 +15,36 @@
     </style>
     <style name="UnelevatedButton.Custom.Icon"
         parent="@style/Widget.Material3.Button.TonalButton.Icon">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="TextButton.Custom.Icon" parent="@style/Widget.Material3.Button.TextButton.Icon">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="TextButton.Custom" parent="@style/Widget.Material3.Button.TextButton">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="OutlinedButton.Custom" parent="@style/Widget.Material3.Button.OutlinedButton">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
@@ -52,27 +52,27 @@
     </style>
     <style name="OutlinedButton.Custom.Icon"
         parent="@style/Widget.Material3.Button.OutlinedButton.Icon">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="Button.Custom" parent="@style/Widget.Material3.Button">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
         <item name="android:insetBottom">0dp</item>
     </style>
     <style name="Button.Custom.Icon" parent="@style/Widget.Material3.Button.Icon">
-        <item name="android:padding">0dp</item>
         <item name="android:minWidth">88dp</item>
         <item name="android:minHeight">36dp</item>
+        <!-- <item name="android:padding">0dp</item> -->
         <item name="android:insetLeft">0dp</item>
         <item name="android:insetRight">0dp</item>
         <item name="android:insetTop">0dp</item>
diff --git a/CLOUD_SYNC_SETUP.md b/CLOUD_SYNC_SETUP.md
new file mode 100644
index 000000000..59ede4ec7
--- /dev/null
+++ b/CLOUD_SYNC_SETUP.md
@@ -0,0 +1,261 @@
+# Google Drive and OneDrive Sync Services - Setup Guide
+
+## Overview
+
+This document explains how to set up and use the new Google Drive and OneDrive sync services that have been added to the Document Scanner app.
+
+## ⚠️ Important: OAuth Credentials Required
+
+The sync services use OAuth 2.0 authentication to securely access your cloud storage. Due to security best practices, OAuth client credentials **cannot** be included in the open-source repository. You must create your own OAuth applications with Google and Microsoft to use these features.
+
+## Setting Up Google Drive Sync
+
+### Step 1: Create Google Cloud Project
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com/)
+2. Create a new project or select an existing one
+3. In the sidebar, navigate to **APIs & Services** > **Library**
+4. Search for "Google Drive API" and enable it
+
+### Step 2: Configure OAuth Consent Screen
+
+1. Navigate to **APIs & Services** > **OAuth consent screen**
+2. Choose **External** user type (unless you have a Google Workspace account)
+3. Fill in the required information:
+   - App name: "Document Scanner" (or your app name)
+   - User support email: Your email
+   - Developer contact information: Your email
+4. Add the required scope: `https://www.googleapis.com/auth/drive.file`
+5. Save and continue
+
+### Step 3: Create OAuth 2.0 Credentials
+
+#### For Android:
+1. Navigate to **APIs & Services** > **Credentials**
+2. Click **Create Credentials** > **OAuth client ID**
+3. Select **Android** as the application type
+4. Enter the package name: `com.akylas.documentscanner` (or your package name)
+5. Get your SHA-1 certificate fingerprint:
+   ```bash
+   keytool -list -v -keystore path/to/your/keystore -alias your-key-alias
+   ```
+6. Copy the OAuth client ID
+
+#### For iOS:
+1. Create credentials with **iOS** as the application type
+2. Enter your Bundle ID
+3. Copy the OAuth client ID
+
+### Step 4: Update the Code
+
+Edit `app/services/sync/GoogleDrive.ts`:
+
+```typescript
+export const GOOGLE_DRIVE_PROVIDER: OAuthProvider = {
+    name: 'Google Drive',
+    config: {
+        authUrl: 'https://accounts.google.com/o/oauth2/v2/auth',
+        tokenUrl: 'https://oauth2.googleapis.com/token',
+        clientId: 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com', // Replace this
+        redirectUri: 'com.akylas.documentscanner.oauth:/oauth2redirect',
+        scope: 'https://www.googleapis.com/auth/drive.file',
+        responseType: 'code'
+    }
+};
+```
+
+Replace `YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com` with your actual client ID.
+
+## Setting Up OneDrive Sync
+
+### Step 1: Register Application in Azure
+
+1. Go to the [Azure Portal](https://portal.azure.com/)
+2. Navigate to **Azure Active Directory** > **App registrations**
+3. Click **New registration**
+4. Enter application details:
+   - Name: "Document Scanner" (or your app name)
+   - Supported account types: Choose appropriate option (usually "Accounts in any organizational directory and personal Microsoft accounts")
+5. Click **Register**
+
+### Step 2: Configure Authentication
+
+1. In your app registration, go to **Authentication**
+2. Click **Add a platform**
+3. For Android:
+   - Select **Android**
+   - Enter package name: `com.akylas.documentscanner`
+   - Enter signature hash
+4. For iOS:
+   - Select **iOS / macOS**
+   - Enter Bundle ID
+5. Add redirect URI: `com.akylas.documentscanner.oauth:/oauth2redirect`
+6. Save changes
+
+### Step 3: Configure API Permissions
+
+1. Go to **API permissions**
+2. Click **Add a permission** > **Microsoft Graph**
+3. Select **Delegated permissions**
+4. Add these permissions:
+   - `Files.ReadWrite`
+   - `offline_access`
+5. Click **Add permissions**
+
+### Step 4: Get Client ID
+
+1. Go to **Overview** tab
+2. Copy the **Application (client) ID**
+
+### Step 5: Update the Code
+
+Edit `app/services/sync/OneDrive.ts`:
+
+```typescript
+export const ONEDRIVE_PROVIDER: OAuthProvider = {
+    name: 'OneDrive',
+    config: {
+        authUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
+        tokenUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
+        clientId: 'YOUR_ONEDRIVE_CLIENT_ID', // Replace this
+        redirectUri: 'com.akylas.documentscanner.oauth:/oauth2redirect',
+        scope: 'files.readwrite offline_access',
+        responseType: 'code'
+    }
+};
+```
+
+Replace `YOUR_ONEDRIVE_CLIENT_ID` with your actual client ID.
+
+## Using the Sync Services
+
+### Adding a Sync Service
+
+1. Open the app and go to **Settings** > **Sync**
+2. Tap the **Add** button (+)
+3. Select your desired service type:
+   - **Google Drive** (Data, Image, or PDF)
+   - **OneDrive** (Data, Image, or PDF)
+4. Configure the service:
+   - Tap **Authenticate** to log in with your account
+   - Set the remote folder path (default: "DocumentScanner")
+   - Choose a color for identification
+   - Enable/disable auto-sync
+5. Tap **Save**
+
+### Sync Types Explained
+
+- **Data Sync**: Syncs document metadata and folder structures
+- **Image Sync**: Syncs document images (pages)
+- **PDF Sync**: Syncs exported PDF files
+
+You can enable multiple sync types simultaneously for comprehensive backup.
+
+### Manual Sync
+
+To manually trigger a sync:
+1. Go to **Settings** > **Sync**
+2. Tap on the configured sync service
+3. Use the sync options in the menu
+
+### Auto-Sync
+
+When enabled, changes are automatically synced when:
+- A document is created or modified
+- Pages are added or removed
+- The app is online and connected
+
+## Troubleshooting
+
+### "OAuth error: invalid_client"
+- Verify your client ID is correctly configured
+- Ensure the redirect URI matches exactly
+- Check that the app signature/bundle ID is correct
+
+### "Authentication cancelled"
+- User cancelled the login process
+- Try authenticating again
+
+### "Permission denied" or "Access denied"
+- Ensure you granted the necessary permissions in your OAuth app
+- For Google Drive: Check that the Drive API is enabled
+- For OneDrive: Verify the Microsoft Graph permissions are added
+
+### Files not syncing
+- Check internet connectivity
+- Verify the OAuth tokens haven't expired (they auto-refresh if possible)
+- Check the remote folder path is correct
+- Review app logs for errors
+
+### Token expired
+- Tokens automatically refresh using the refresh token
+- If refresh fails, re-authenticate from settings
+
+## Security Considerations
+
+### OAuth 2.0 with PKCE
+- The implementation uses OAuth 2.0 with PKCE (Proof Key for Code Exchange) for enhanced security
+- This prevents authorization code interception attacks
+
+### Token Storage
+- Access tokens are stored in ApplicationSettings
+- On iOS: Encrypted in keychain
+- On Android: Stored in SharedPreferences (consider using encrypted shared preferences for production)
+
+### Permissions
+- Google Drive: Only accesses files created by the app (`drive.file` scope)
+- OneDrive: Only accesses user's files with explicit permission
+
+## Limitations
+
+1. **File Size**: Current implementation uses simple upload. Files over 4MB may fail on OneDrive. Consider implementing resumable uploads for production.
+
+2. **Rate Limiting**: No rate limiting implemented. API quota may be exceeded with heavy usage.
+
+3. **Offline Support**: Limited offline capability. Requires network connection for sync operations.
+
+4. **Conflict Resolution**: Basic conflict handling. Newer files overwrite older ones.
+
+## Development Notes
+
+### Testing
+
+Before deploying, test:
+- Authentication flow on Android and iOS
+- File upload/download operations
+- Folder creation and navigation
+- Token refresh after expiration
+- Network error handling
+- Multiple document sync
+- Large file handling
+
+### Production Considerations
+
+For production deployment:
+
+1. **Implement Resumable Uploads**: For files larger than 4MB, implement resumable upload APIs
+2. **Add Rate Limiting**: Implement exponential backoff and retry logic
+3. **Improve Token Storage**: Use encrypted storage for sensitive tokens
+4. **Add Conflict Resolution UI**: Let users choose how to handle conflicts
+5. **Implement Batch Operations**: Improve performance with batch API calls
+6. **Add Quota Monitoring**: Monitor API usage and warn users
+7. **Error Recovery**: Implement robust error recovery and offline queue
+
+## Support
+
+For issues or questions:
+1. Check the logs (enable DEV_LOG in the code)
+2. Review the OAuth provider's documentation
+3. Check API quotas and limits
+4. Open an issue on the repository with details
+
+## Additional Resources
+
+- [Google Drive API Documentation](https://developers.google.com/drive/api/v3/about-sdk)
+- [Microsoft Graph Files API](https://docs.microsoft.com/en-us/graph/api/resources/onedrive)
+- [OAuth 2.0 with PKCE](https://oauth.net/2/pkce/)
+- [NativeScript WebView Plugin](https://docs.nativescript.org/plugins/webview)
+
+## License
+
+This implementation is part of the Document Scanner project and follows the same license (MIT).
diff --git a/app.webpack.config.js b/app.webpack.config.js
index 1ae381ad5..e47b4cce0 100644
--- a/app.webpack.config.js
+++ b/app.webpack.config.js
@@ -244,6 +244,10 @@ module.exports = (env, params = {}) => {
         SENTRY_ENABLED: !!sentry,
         NO_CONSOLE: noconsole,
         MDI_FONT_FAMILY: `"${midFontFamily}"`,
+        GOOGLE_OAUTH_CLIENT_ID: `"${process.env.GOOGLE_OAUTH_CLIENT_ID}"`,
+        GOOGLE_OAUTH_CLIENT_SECRET: `"${process.env.GOOGLE_OAUTH_CLIENT_SECRET}"`,
+        ONEDRIVE_OAUTH_CLIENT_ID: `"${process.env.ONEDRIVE_OAUTH_CLIENT_ID}"`,
+        ONEDRIVE_OAUTH_CLIENT_SECRET: `"${process.env.ONEDRIVE_OAUTH_CLIENT_SECRET}"`,
         SENTRY_DSN: `"${process.env.SENTRY_DSN}"`,
         SENTRY_PREFIX: `"${!!sentry ? process.env.SENTRY_PREFIX : ''}"`,
         GIT_URL: `"${package.repository}"`,
diff --git a/app/app.common.scss b/app/app.common.scss
index 89801193d..5f945d062 100644
--- a/app/app.common.scss
+++ b/app/app.common.scss
@@ -64,6 +64,7 @@ checkbox {
 }
 
 
+
 mdbutton[variant=flat],
 mdbutton[variant=contained] {
     background-color: var(--colorPrimary);
diff --git a/app/components/OAuthWebViewModal.svelte b/app/components/OAuthWebViewModal.svelte
new file mode 100644
index 000000000..aedb285f8
--- /dev/null
+++ b/app/components/OAuthWebViewModal.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { AWebView } from '@nativescript-community/ui-webview';
+    import { Page } from '@nativescript/core';
+    import { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
+    import { closeModal } from '@shared/utils/svelte/ui';
+    import { onMount } from 'svelte';
+    import CActionBar from './common/CActionBar.svelte';
+    import { lc } from '~/helpers/locale';
+    import { colors, windowInset } from '~/variables';
+
+    $: ({ colorOnSurfaceVariant } = $colors);
+
+    export let url: string;
+    export let redirectUri: string;
+
+    let page: NativeViewElementNode<Page>;
+    let webView: NativeViewElementNode<AWebView>;
+    let loading = true;
+
+    function onCancel() {
+        closeModal({ cancelled: true });
+    }
+
+    function onLoadStarted(args) {
+        const loadUrl = args.url;
+        DEV_LOG && console.log('OAuth WebView: Load started:', loadUrl);
+
+        // Check if this is the redirect URI
+        if (loadUrl && loadUrl.startsWith(redirectUri)) {
+            DEV_LOG && console.log('OAuth WebView: Redirect detected:', loadUrl);
+            // Cancel the navigation and close with the URL
+            args.object.stopLoading();
+            closeModal({ url: loadUrl });
+        }
+    }
+
+    function onLoadFinished(args) {
+        loading = false;
+        DEV_LOG && console.log('OAuth WebView: Load finished:', args.url);
+    }
+
+    onMount(() => {
+        DEV_LOG && console.log('OAuth WebView: Mounting with URL:', url);
+    });
+</script>
+
+<page bind:this={page} id="oauthwebview" actionBarHidden={true}>
+    <gridlayout class="pageContent" rows="auto,*">
+        <gridlayout row={1} android:marginBottom={$windowInset.bottom}>
+            <awebview
+                bind:this={webView}
+                src={url}
+                userAgent="Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Mobile Safari/537.36"
+                on:loadFinished={onLoadFinished}
+                on:loadStarted={onLoadStarted} />
+            <activityindicator busy={loading} visibility={loading ? 'visible' : 'collapse'} />
+        </gridlayout>
+        <CActionBar canGoBack={false} modalWindow={true} title={lc('authentication')}>
+            <mdbutton text={lc('cancel')} variant="text" verticalAlignment="middle" on:tap={onCancel} />
+        </CActionBar>
+    </gridlayout>
+</page>
diff --git a/app/components/settings/FolderPDFSyncSettings.svelte b/app/components/settings/FolderPDFSyncSettings.svelte
deleted file mode 100644
index 54c7fc487..000000000
--- a/app/components/settings/FolderPDFSyncSettings.svelte
+++ /dev/null
@@ -1,380 +0,0 @@
-<script lang="ts">
-    import { CheckBox } from '@nativescript-community/ui-checkbox';
-    import { Label } from '@nativescript-community/ui-label';
-    import { prompt } from '@nativescript-community/ui-material-dialogs';
-    import { TextField, TextFieldProperties } from '@nativescript-community/ui-material-textfield';
-    import { ApplicationSettings, Color, ObservableArray, View } from '@nativescript/core';
-    import { showError } from '@shared/utils/showError';
-    import { closeModal } from '@shared/utils/svelte/ui';
-    import { Template } from '@nativescript-community/svelte-native/components';
-    import { get, writable } from 'svelte/store';
-    import { l, lc } from '~/helpers/locale';
-    import { getPDFDefaultExportOptions } from '~/services/pdf/PDFCanvas';
-    import { LocalFolderPDFSyncServiceOptions } from '~/services/sync/LocalFolderPDFSyncService';
-    import { SERVICES_SYNC_COLOR } from '~/services/sync/types';
-    import { ALERT_OPTION_MAX_HEIGHT, FILENAME_DATE_FORMAT, FILENAME_USE_DOCUMENT_NAME, SETTINGS_FILE_NAME_FORMAT, SETTINGS_FILE_NAME_USE_DOCUMENT_NAME } from '~/utils/constants';
-    import { checkOrDownloadOCRLanguages, createView, getNameFormatHTMLArgs, openLink, pickColor, requestNotificationPermission, showAlertOptionSelect, showSliderPopover } from '~/utils/ui';
-    import { colors, windowInset } from '~/variables';
-    import CActionBar from '../common/CActionBar.svelte';
-    import FolderTextView from '../common/FolderTextView.svelte';
-    import ListItemAutoSize from '../common/ListItemAutoSize.svelte';
-    import OcrSettingsBottomSheet from '../ocr/OCRSettingsBottomSheet.svelte';
-    import PdfSyncSettingsView from './PDFSyncSettingsView.svelte';
-    // technique for only specific properties to get updated on store change
-    $: ({ colorOnSurfaceVariant, colorOutline, colorPrimary } = $colors);
-
-    const tMargin = '4 10 4 10';
-    const pdfExportSettings = getPDFDefaultExportOptions();
-    export let data: LocalFolderPDFSyncServiceOptions = {} as any;
-    const store = writable(
-        Object.assign(
-            {
-                exportOptions: pdfExportSettings,
-                autoSync: false,
-                enabled: true,
-                OCREnabled: false,
-                useFoldersStructure: false,
-                OCRDataType: 'best',
-                OCRLanguages: [],
-                fileNameFormat: ApplicationSettings.getString(SETTINGS_FILE_NAME_FORMAT, FILENAME_DATE_FORMAT),
-                useDocumentName: ApplicationSettings.getBoolean(SETTINGS_FILE_NAME_USE_DOCUMENT_NAME, FILENAME_USE_DOCUMENT_NAME),
-                color: SERVICES_SYNC_COLOR['folder_pdf'] as string | Color
-            },
-            data
-        )
-    );
-    DEV_LOG && console.log('FolderImageSyncSettings', JSON.stringify(data), JSON.stringify(get(store)));
-    // let folderPathName = data.folderPathName;
-    const variant = 'outline';
-
-    async function save() {
-        const result = get(store);
-        DEV_LOG && console.log('save', JSON.stringify(result));
-        if (result.localFolderPath) {
-            if (__ANDROID__) {
-                await requestNotificationPermission();
-            }
-            if (result.OCREnabled && result.OCRLanguages.length) {
-                await checkOrDownloadOCRLanguages({
-                    dataType: result.OCRDataType,
-                    languages: result.OCRLanguages,
-                    shouldConfirm: false
-                });
-            }
-            closeModal(result);
-        } else {
-            showError(lc('missing_export_folder'), { showAsSnack: true });
-        }
-    }
-
-    const items = new ObservableArray([
-        {
-            type: 'color'
-        },
-        {
-            type: 'switch',
-            id: 'enabled',
-            title: lc('enabled'),
-            value: $store.enabled
-        },
-        {
-            id: 'selectFolder',
-            type: 'selectFolder',
-            text: $store.localFolderPath
-        },
-        {
-            type: 'switch',
-            id: 'autoSync',
-            title: lc('auto_sync'),
-            description: lc('local_auto_sync_desc'),
-            value: $store.autoSync
-        },
-        {
-            type: 'switch',
-            id: 'useDocumentName',
-            title: lc('filename_use_document_name'),
-            value: $store.useDocumentName
-        },
-        {
-            id: 'setting',
-            key: 'fileNameFormat',
-            useHTML: true,
-            title: lc('filename_date_format'),
-            description: lc('filename_date_format_desc'),
-            full_description: lc('filename_date_format_fulldesc', ...getNameFormatHTMLArgs()),
-            onLinkTap: ({ link }) => {
-                openLink(link);
-            },
-            valueType: 'string',
-            textFieldProperties: {
-                autocapitalizationType: 'none',
-                autocorrect: false
-            } as TextFieldProperties,
-            rightValue: () => $store.fileNameFormat,
-            type: 'prompt'
-        },
-        {
-            type: 'switch',
-            id: 'useFoldersStructure',
-            title: lc('use_folder_structure'),
-            description: lc('use_folder_structure_desc'),
-            value: $store.useFoldersStructure
-        },
-        {
-            type: 'sectionheader',
-            title: lc('pdf_settings')
-        },
-        {
-            type: 'pdfoptions'
-        },
-        {
-            type: 'sectionheader',
-            title: lc('ocr_settings')
-        },
-        {
-            type: 'switch',
-            id: 'OCREnabled',
-            title: lc('ocr_enabled'),
-            value: $store.OCREnabled
-        },
-        {
-            type: 'ocroptions'
-        }
-    ]);
-
-    function getTitle(item) {
-        return item.title;
-    }
-    function getDescription(item) {
-        return typeof item.description === 'function' ? item.description(item) : item.description;
-    }
-    function updateItem(item, key = 'id') {
-        const index = items.findIndex((it) => it[key] === item[key]);
-        if (index !== -1) {
-            items.setItem(index, item);
-        }
-    }
-
-    let checkboxTapTimer;
-    function clearCheckboxTimer() {
-        if (checkboxTapTimer) {
-            clearTimeout(checkboxTapTimer);
-            checkboxTapTimer = null;
-        }
-    }
-    let ignoreNextOnCheckBoxChange = false;
-    async function onCheckBox(item, event, pdfOption?: string) {
-        if (ignoreNextOnCheckBoxChange || item.value === event.value) {
-            return;
-        }
-        const value = event.value;
-        item.value = value;
-        clearCheckboxTimer();
-        try {
-            ignoreNextOnCheckBoxChange = true;
-            if (pdfOption) {
-                $store.exportOptions[pdfOption] = value;
-            } else {
-                $store[item.key || item.id] = value;
-            }
-        } catch (error) {
-            showError(error);
-        } finally {
-            ignoreNextOnCheckBoxChange = false;
-        }
-    }
-    async function onTap(item, event) {
-        try {
-            if (item.type === 'checkbox' || item.type === 'switch') {
-                // we dont want duplicate events so let s timeout and see if we clicking diretly on the checkbox
-                const checkboxView: CheckBox = ((event.object as View).parent as View).getViewById('checkbox');
-                clearCheckboxTimer();
-                checkboxTapTimer = setTimeout(() => {
-                    checkboxView.checked = !checkboxView.checked;
-                }, 10);
-                return;
-            }
-            switch (item.id) {
-                case 'store_setting':
-                case 'setting': {
-                    if (item.type === 'prompt') {
-                        const result = await prompt({
-                            title: getTitle(item),
-                            message: item.useHTML ? item.description : item.full_description || item.description,
-                            okButtonText: l('save'),
-                            cancelButtonText: l('cancel'),
-                            autoFocus: true,
-                            textFieldProperties: item.textFieldProperties,
-                            defaultText: (typeof item.rightValue === 'function' ? item.rightValue() : item.default) + '',
-                            view: item.useHTML
-                                ? createView(
-                                      Label,
-                                      {
-                                          padding: '10 20 0 20',
-                                          textWrap: true,
-                                          color: colorOnSurfaceVariant as any,
-                                          html: item.full_description || item.description
-                                      },
-                                      item.onLinkTap
-                                          ? {
-                                                linkTap: item.onLinkTap
-                                            }
-                                          : undefined
-                                  )
-                                : undefined
-                        });
-                        DEV_LOG && console.log('prompt result', item.key, item.valueType, result);
-                        if (result && !!result.result && result.text.length > 0) {
-                            if (item.valueType === 'string') {
-                                $store[item.key] = result.text;
-                            } else {
-                                $store[item.key] = parseInt(result.text, 10);
-                            }
-                            updateItem(item);
-                        }
-                    } else if (item.type === 'slider') {
-                        DEV_LOG && console.log('showSlidersPopover', event.object, item.currentValue());
-                        await showSliderPopover({
-                            anchor: event.object,
-                            value: item.currentValue(),
-                            ...item,
-                            onChange(value) {
-                                if (item.transformValue) {
-                                    value = item.transformValue(value, item);
-                                } else {
-                                    value = Math.round(value / item.step) * item.step;
-                                }
-                                if (item.valueType === 'string') {
-                                    $store[item.key] = value + '';
-                                } else {
-                                    $store[item.key] = value;
-                                }
-                                updateItem(item);
-                            }
-                        });
-                    } else {
-                        const result = await showAlertOptionSelect(
-                            {
-                                height: Math.min(item.values.length * 56, ALERT_OPTION_MAX_HEIGHT),
-                                rowHeight: item.autoSizeListItem ? undefined : 56,
-                                ...item,
-                                options: item.values.map((k) => ({
-                                    name: k.title || k.name,
-                                    data: k.value,
-                                    boxType: 'circle',
-                                    type: 'checkbox',
-                                    value: (item.currentValue?.() ?? item.currentValue) === k.value
-                                }))
-                            },
-                            {
-                                title: item.title,
-                                message: item.full_description
-                            }
-                        );
-                        DEV_LOG && console.log('result?.data', result?.data);
-                        if (result?.data !== undefined) {
-                            if (item.onResult) {
-                                item.onResult(result.data);
-                            } else {
-                                if (item.valueType === 'string') {
-                                    $store[item.key] = result?.data;
-                                } else {
-                                    $store[item.key] = parseInt(result?.data, 10);
-                                }
-                            }
-                            updateItem(item);
-                        }
-                    }
-
-                    break;
-                }
-            }
-        } catch (err) {
-            showError(err);
-        }
-    }
-    function selectTemplate(item, index, items) {
-        if (item.type) {
-            if (item.type === 'prompt' || item.type === 'slider') {
-                return 'default';
-            }
-            return item.type;
-        }
-        if (item.icon) {
-            return 'leftIcon';
-        }
-        return 'default';
-    }
-
-    async function changeColor(item, event) {
-        try {
-            const newColor = await pickColor($store.color, { anchor: event.object });
-            if (newColor) {
-                $store.color = newColor.hex;
-                updateItem(item, 'type');
-            }
-        } catch (error) {
-            showError(error);
-        }
-    }
-
-    function onTextChange(e) {
-        if (e.object.text) {
-            (e.object as TextField).setSelection(e.object.text.length);
-        }
-    }
-    async function onFolderSelect(item, event) {
-        item.text = $store.localFolderPath = event.text;
-        updateItem(item);
-    }
-</script>
-
-<page actionBarHidden={true}>
-    <gridlayout class="pageContent" rows="auto,*">
-        <collectionview ios:autoReloadItemOnLayout={true} itemTemplateSelector={selectTemplate} {items} row={1} android:paddingBottom={$windowInset.bottom}>
-            <Template key="color" let:item>
-                <ListItemAutoSize fontSize={20} subtitle={lc('sync_service_color_desc')} title={lc('color')} on:tap={(e) => changeColor(item, e)}>
-                    <absolutelayout backgroundColor={$store.color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} marginLeft={10} width={40} />
-                </ListItemAutoSize>
-            </Template>
-            <Template key="textfield" let:item>
-                <gridlayout columns="*" margin={tMargin} row={3} rows="auto" on:tap={(e) => item.onTap(item, e)} prop:rightDrawer>
-                    <textfield isUserInteractionEnabled={false} text={item.text} {variant} {...item.textFieldProperties} on:loaded={onTextChange} />
-                    <mdbutton
-                        class="icon-btn"
-                        color={colorOnSurfaceVariant}
-                        horizontalAlignment="right"
-                        isUserInteractionEnabled={false}
-                        text={item.icon}
-                        variant="text"
-                        verticalAlignment="middle"
-                        visibility={item.icon ? 'visible' : 'hidden'} />
-                </gridlayout>
-            </Template>
-            <Template key="switch" let:item>
-                <ListItemAutoSize leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
-                    <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
-                </ListItemAutoSize>
-            </Template>
-            <Template key="pdfoptions" let:item>
-                <PdfSyncSettingsView {store} on:uppdate={() => updateItem({ type: 'pdfoptions' }, 'type')} />
-            </Template>
-            <Template key="selectFolder" let:item>
-                <FolderTextView text={item.text} on:folder={(e) => onFolderSelect(item, e)} />
-            </Template>
-            <Template let:item>
-                <ListItemAutoSize rightValue={item.rightValue} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)} />
-            </Template>
-            <Template key="sectionheader" let:item>
-                <label class="sectionHeader" text={item.title} />
-            </Template>
-            <Template key="ocroptions">
-                <OcrSettingsBottomSheet onlySettings={true} bind:dataType={$store.OCRDataType} bind:languages={$store.OCRLanguages} />
-            </Template>
-        </collectionview>
-        <CActionBar canGoBack modalWindow={true} title={lc('pdf_sync_settings')}>
-            <mdbutton text={lc('save')} variant="text" verticalAlignment="middle" on:tap={save} />
-            <!-- <mdbutton class="actionBarButton" text={lc('save')} variant="text" on:tap={save} /> -->
-        </CActionBar>
-    </gridlayout>
-</page>
diff --git a/app/components/settings/Settings.svelte b/app/components/settings/Settings.svelte
index 02e07edc6..4dea52d28 100644
--- a/app/components/settings/Settings.svelte
+++ b/app/components/settings/Settings.svelte
@@ -1416,7 +1416,7 @@
                 case 'data_sync':
                 case 'image_sync':
                 case 'pdf_sync':
-                    const component = (await import('~/components/settings/SyncListSettings.svelte')).default;
+                    const component = (await import('~/components/settings/sync/SyncListSettings.svelte')).default;
                     navigate({
                         page: component,
                         props: {
diff --git a/app/components/settings/WebdavDataSyncSettings.svelte b/app/components/settings/WebdavDataSyncSettings.svelte
deleted file mode 100644
index ba3bb31d0..000000000
--- a/app/components/settings/WebdavDataSyncSettings.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-    import { CheckBox } from '@nativescript-community/ui-checkbox';
-    import { Color, View } from '@nativescript/core';
-    import { get, writable } from 'svelte/store';
-    import { lc } from '~/helpers/locale';
-    import { SERVICES_SYNC_COLOR } from '~/services/sync/types';
-    import { WebdavDataSyncOptions } from '~/services/sync/WebdavDataSyncService';
-    import { showError } from '@shared/utils/showError';
-    import { closeModal } from '@shared/utils/svelte/ui';
-    import { pickColor, requestNotificationPermission } from '~/utils/ui';
-    import { colors, windowInset } from '~/variables';
-    import CActionBar from '../common/CActionBar.svelte';
-    import ListItemAutoSize from '../common/ListItemAutoSize.svelte';
-    import WebdavSettingsView from './WebdavSettingsView.svelte';
-    // technique for only specific properties to get updated on store change
-    $: ({ colorError, colorOnError, colorOnSurfaceVariant, colorOutline, colorPrimary, colorSecondary } = $colors);
-
-    export let data: WebdavDataSyncOptions = null;
-    const store = writable(Object.assign({ autoSync: false, enabled: true, color: SERVICES_SYNC_COLOR['webdav_data'] as string | Color }, data));
-
-    let webdavView: WebdavSettingsView;
-
-    async function save() {
-        if (await webdavView?.validateSave()) {
-            if (__ANDROID__) {
-                await requestNotificationPermission();
-            }
-            const result = get(store);
-            closeModal(result);
-            // WebdavDataSyncService.saveData({ username, password, remoteURL, remoteFolder, authType, token });
-            // closeBottomSheet(true);
-        }
-    }
-
-    let checkboxTapTimer;
-    function clearCheckboxTimer() {
-        if (checkboxTapTimer) {
-            clearTimeout(checkboxTapTimer);
-            checkboxTapTimer = null;
-        }
-    }
-    let ignoreNextOnCheckBoxChange = false;
-    async function onCheckBox(event, onUpdate) {
-        if (ignoreNextOnCheckBoxChange) {
-            return;
-        }
-        const value = event.value;
-        clearCheckboxTimer();
-        try {
-            ignoreNextOnCheckBoxChange = true;
-            onUpdate(event);
-        } catch (error) {
-            showError(error);
-        } finally {
-            ignoreNextOnCheckBoxChange = false;
-        }
-    }
-    function unCheckBoxItemTap(event) {
-        // we dont want duplicate events so let s timeout and see if we clicking diretly on the checkbox
-        const checkboxView: CheckBox = ((event.object as View).parent as View).getViewById('checkbox');
-        clearCheckboxTimer();
-        checkboxTapTimer = setTimeout(() => {
-            checkboxView.checked = !checkboxView.checked;
-        }, 10);
-    }
-
-    async function changeColor(event) {
-        try {
-            const newColor = await pickColor($store.color, { anchor: event.object });
-            if (newColor) {
-                $store.color = newColor.hex;
-            }
-        } catch (error) {
-            showError(error);
-        }
-    }
-</script>
-
-<page id="webdavsyncsettings" actionBarHidden={true}>
-    <gridlayout class="pageContent" rows="auto,*">
-        <scrollview row={1}>
-            <stacklayout android:paddingBottom={$windowInset.bottom}>
-                <ListItemAutoSize fontSize={20} subtitle={lc('sync_service_color_desc')} title={lc('color')} on:tap={changeColor}>
-                    <absolutelayout backgroundColor={$store.color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} marginLeft={10} width={40} />
-                </ListItemAutoSize>
-                <ListItemAutoSize fontSize={20} title={lc('enabled')} on:tap={unCheckBoxItemTap}>
-                    <switch
-                        id="checkbox"
-                        checked={$store.enabled}
-                        col={1}
-                        marginLeft={10}
-                        verticalAlignment="center"
-                        on:checkedChange={(e) =>
-                            onCheckBox(e, (e) => {
-                                $store.enabled = e.value;
-                            })} />
-                </ListItemAutoSize>
-                <ListItemAutoSize fontSize={20} subtitle={lc('remote_data_auto_sync')} title={lc('auto_sync')} on:tap={unCheckBoxItemTap}>
-                    <switch
-                        id="checkbox"
-                        checked={$store.autoSync}
-                        col={1}
-                        marginLeft={10}
-                        verticalAlignment="center"
-                        on:checkedChange={(e) =>
-                            onCheckBox(e, (e) => {
-                                $store.autoSync = e.value;
-                            })} />
-                </ListItemAutoSize>
-                <WebdavSettingsView bind:this={webdavView} {store} />
-            </stacklayout>
-        </scrollview>
-        <CActionBar canGoBack modalWindow={true} title={lc('webdav_config')}>
-            <mdbutton text={lc('save')} variant="text" verticalAlignment="middle" on:tap={save} />
-            <!-- <mdbutton class="actionBarButton" text={lc('save')} variant="text" on:tap={save} /> -->
-        </CActionBar>
-    </gridlayout>
-</page>
diff --git a/app/components/settings/WebdavImageSyncSettings.svelte b/app/components/settings/WebdavImageSyncSettings.svelte
deleted file mode 100644
index be3bc6627..000000000
--- a/app/components/settings/WebdavImageSyncSettings.svelte
+++ /dev/null
@@ -1,366 +0,0 @@
-<script lang="ts">
-    import { CheckBox } from '@nativescript-community/ui-checkbox';
-    import { CollectionView } from '@nativescript-community/ui-collectionview';
-    import { pickFolder } from '@nativescript-community/ui-document-picker';
-    import { Label } from '@nativescript-community/ui-label';
-    import { prompt } from '@nativescript-community/ui-material-dialogs';
-    import { TextFieldProperties } from '@nativescript-community/ui-material-textfield';
-    import { ApplicationSettings, Color, ObservableArray, Page, Utils, View } from '@nativescript/core';
-    import { Template } from '@nativescript-community/svelte-native/components';
-    import { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
-    import { get, writable } from 'svelte/store';
-    import { l, lc } from '~/helpers/locale';
-    import { getPDFDefaultExportOptions } from '~/services/pdf/PDFCanvas';
-    import { SERVICES_SYNC_COLOR } from '~/services/sync/types';
-    import { WebdavImageSyncServiceOptions } from '~/services/sync/WebdavImageSyncService';
-    import { ALERT_OPTION_MAX_HEIGHT, ANDROID_CONTENT, FILENAME_DATE_FORMAT, SEPARATOR, SETTINGS_FILE_NAME_FORMAT, getImageExportSettings } from '~/utils/constants';
-    import { showError } from '@shared/utils/showError';
-    import { closeModal } from '@shared/utils/svelte/ui';
-    import { createView, getNameFormatHTMLArgs, openLink, pickColor, requestNotificationPermission, showAlertOptionSelect, showSliderPopover, showSnack } from '~/utils/ui';
-    import { colors, windowInset } from '~/variables';
-    import CActionBar from '../common/CActionBar.svelte';
-    import ListItemAutoSize from '../common/ListItemAutoSize.svelte';
-    import WebdavSettingsView from './WebdavSettingsView.svelte';
-    // technique for only specific properties to get updated on store change
-    let { colorOnSurfaceVariant, colorOutline, colorPrimary } = $colors;
-    $: ({ colorOnSurfaceVariant, colorOutline, colorPrimary } = $colors);
-
-    let page: NativeViewElementNode<Page>;
-    const imageExportSettings = getImageExportSettings();
-    const pdfExportSettings = getPDFDefaultExportOptions();
-    export let data: WebdavImageSyncServiceOptions = null;
-
-    let collectionView: NativeViewElementNode<CollectionView>;
-    const store = writable(
-        Object.assign(
-            {
-                exportOptions: pdfExportSettings,
-                ...imageExportSettings,
-                autoSync: false,
-                useFoldersStructure: false,
-                enabled: true,
-                fileNameFormat: ApplicationSettings.getString(SETTINGS_FILE_NAME_FORMAT, FILENAME_DATE_FORMAT),
-                color: SERVICES_SYNC_COLOR['folder_image'] as string | Color
-            },
-            data
-        )
-    );
-    DEV_LOG && console.log('FolderImageSyncSettings', JSON.stringify(data), JSON.stringify(get(store)));
-    // let folderPathName = data.folderPathName;
-    const variant = 'outline';
-
-    let webdavView: WebdavSettingsView;
-
-    async function save() {
-        if (await webdavView?.validateSave()) {
-            if (__ANDROID__) {
-                await requestNotificationPermission();
-            }
-            const result = get(store);
-            closeModal(result);
-        } else {
-            showSnack({
-                message: lc('need_fill_fields'),
-                view: page.nativeView
-            });
-        }
-    }
-
-    const items = new ObservableArray([
-        {
-            type: 'color'
-        },
-        {
-            type: 'switch',
-            id: 'enabled',
-            title: lc('enabled'),
-            value: $store.enabled
-        },
-        {
-            type: 'header',
-            title: lc('webdav_config')
-        },
-        {
-            type: 'webdav'
-        },
-        {
-            type: 'switch',
-            id: 'autoSync',
-            title: lc('auto_sync'),
-            description: lc('local_auto_sync_desc'),
-            value: $store.autoSync
-        },
-        {
-            id: 'setting',
-            key: 'fileNameFormat',
-            useHTML: true,
-            title: lc('filename_date_format'),
-            description: lc('filename_date_format_desc'),
-            full_description: lc('filename_date_format_fulldesc', ...getNameFormatHTMLArgs()),
-            onLinkTap: ({ link }) => {
-                openLink(link);
-            },
-            valueType: 'string',
-            textFieldProperties: {
-                autocapitalizationType: 'none',
-                autocorrect: false
-            } as TextFieldProperties,
-            rightValue: () => $store.fileNameFormat,
-            type: 'prompt'
-        },
-        {
-            type: 'switch',
-            id: 'useFoldersStructure',
-            title: lc('use_folder_structure'),
-            description: lc('use_folder_structure_desc'),
-            value: $store.useFoldersStructure
-        },
-        {
-            id: 'setting',
-            key: 'imageFormat',
-            title: lc('image_format'),
-            currentValue: () => $store.imageFormat,
-            description: lc('image_format_desc'),
-            rightValue: () => ($store.imageFormat || imageExportSettings.imageFormat).toUpperCase(),
-            valueType: 'string',
-            values: [
-                { value: null, title: lc('default_value') },
-                { value: 'jpg', title: 'JPEG' },
-                { value: 'png', title: 'PNG' }
-            ]
-        },
-        {
-            id: 'setting',
-            key: 'imageQuality',
-            min: 10,
-            max: 100,
-            step: 1,
-            formatter: (value) => value.toFixed(),
-            title: lc('image_quality'),
-            description: lc('image_quality_desc'),
-            type: 'slider',
-            rightValue: () => $store.imageQuality,
-            currentValue: () => $store.imageQuality
-        }
-    ]);
-
-    function getTitle(item) {
-        return item.title;
-    }
-    function getDescription(item) {
-        return typeof item.description === 'function' ? item.description(item) : item.description;
-    }
-    function updateItem(item, key = 'key') {
-        const index = items.findIndex((it) => it[key] === item[key]);
-        if (index !== -1) {
-            items.setItem(index, item);
-        }
-    }
-
-    let checkboxTapTimer;
-    function clearCheckboxTimer() {
-        if (checkboxTapTimer) {
-            clearTimeout(checkboxTapTimer);
-            checkboxTapTimer = null;
-        }
-    }
-    let ignoreNextOnCheckBoxChange = false;
-    async function onCheckBox(item, event) {
-        if (ignoreNextOnCheckBoxChange || item.value === event.value) {
-            return;
-        }
-        const value = event.value;
-        item.value = value;
-        clearCheckboxTimer();
-        try {
-            ignoreNextOnCheckBoxChange = true;
-            $store[item.key || item.id] = value;
-        } catch (error) {
-            showError(error);
-        } finally {
-            ignoreNextOnCheckBoxChange = false;
-        }
-    }
-    async function onTap(item, event) {
-        try {
-            if (item.type === 'checkbox' || item.type === 'switch') {
-                // we dont want duplicate events so let s timeout and see if we clicking diretly on the checkbox
-                const checkboxView: CheckBox = ((event.object as View).parent as View).getViewById('checkbox');
-                clearCheckboxTimer();
-                checkboxTapTimer = setTimeout(() => {
-                    checkboxView.checked = !checkboxView.checked;
-                }, 10);
-                return;
-            }
-            switch (item.id) {
-                case 'store_setting':
-                case 'setting': {
-                    if (item.type === 'prompt') {
-                        const result = await prompt({
-                            title: getTitle(item),
-                            message: item.useHTML ? item.description : item.full_description || item.description,
-                            okButtonText: l('save'),
-                            cancelButtonText: l('cancel'),
-                            autoFocus: true,
-                            textFieldProperties: item.textFieldProperties,
-                            defaultText: (typeof item.rightValue === 'function' ? item.rightValue() : item.default) + '',
-                            view: item.useHTML
-                                ? createView(
-                                      Label,
-                                      {
-                                          padding: '10 20 0 20',
-                                          textWrap: true,
-                                          color: colorOnSurfaceVariant as any,
-                                          html: item.full_description || item.description
-                                      },
-                                      item.onLinkTap
-                                          ? {
-                                                linkTap: item.onLinkTap
-                                            }
-                                          : undefined
-                                  )
-                                : undefined
-                        });
-                        DEV_LOG && console.log('prompt result', item.key, item.valueType, result);
-                        if (result && !!result.result && result.text.length > 0) {
-                            if (item.valueType === 'string') {
-                                $store[item.key] = result.text;
-                            } else {
-                                $store[item.key] = parseInt(result.text, 10);
-                            }
-                            updateItem(item);
-                        }
-                    } else if (item.type === 'slider') {
-                        DEV_LOG && console.log('showSlidersPopover', event.object, item.currentValue());
-                        await showSliderPopover({
-                            anchor: event.object,
-                            value: item.currentValue(),
-                            ...item,
-                            onChange(value) {
-                                if (item.transformValue) {
-                                    value = item.transformValue(value, item);
-                                } else {
-                                    value = Math.round(value / item.step) * item.step;
-                                }
-                                if (item.valueType === 'string') {
-                                    $store[item.key] = value + '';
-                                } else {
-                                    $store[item.key] = value;
-                                }
-                                updateItem(item);
-                            }
-                        });
-                    } else {
-                        const result = await showAlertOptionSelect(
-                            {
-                                height: Math.min(item.values.length * 56, ALERT_OPTION_MAX_HEIGHT),
-                                rowHeight: item.autoSizeListItem ? undefined : 56,
-                                ...item,
-                                options: item.values.map((k) => ({
-                                    name: k.title || k.name,
-                                    data: k.value,
-                                    boxType: 'circle',
-                                    type: 'checkbox',
-                                    value: (item.currentValue?.() ?? item.currentValue) === k.value
-                                }))
-                            },
-                            {
-                                title: item.title,
-                                message: item.full_description
-                            }
-                        );
-                        DEV_LOG && console.log('result?.data', result?.data);
-                        if (result?.data !== undefined) {
-                            if (item.onResult) {
-                                item.onResult(result.data);
-                            } else {
-                                if (item.valueType === 'string') {
-                                    $store[item.key] = result?.data;
-                                } else {
-                                    $store[item.key] = parseInt(result?.data, 10);
-                                }
-                            }
-                            updateItem(item);
-                        }
-                    }
-
-                    break;
-                }
-            }
-        } catch (err) {
-            showError(err);
-        }
-    }
-    function selectTemplate(item, index, items) {
-        if (item.type) {
-            if (item.type === 'prompt' || item.type === 'slider') {
-                return 'default';
-            }
-            return item.type;
-        }
-        if (item.icon) {
-            return 'leftIcon';
-        }
-        return 'default';
-    }
-
-    async function changeColor(item, event) {
-        try {
-            const newColor = await pickColor($store.color, { anchor: event.object });
-            if (newColor) {
-                $store.color = newColor.hex;
-                updateItem(item, 'type');
-            }
-            updateItem(item, 'type');
-        } catch (error) {
-            showError(error);
-        }
-    }
-    // store.subscribe(() => {
-    //     updateItem({ type: 'webdav' }, 'type');
-    // });
-</script>
-
-<page bind:this={page} actionBarHidden={true}>
-    <gridlayout class="pageContent" rows="auto,*">
-        <collectionview bind:this={collectionView} itemTemplateSelector={selectTemplate} {items} row={1} android:paddingBottom={$windowInset.bottom}>
-            <Template key="color" let:item>
-                <ListItemAutoSize fontSize={20} subtitle={lc('sync_service_color_desc')} title={lc('color')} on:tap={(e) => changeColor(item, e)}>
-                    <absolutelayout backgroundColor={$store.color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} marginLeft={10} width={40} />
-                </ListItemAutoSize>
-            </Template>
-            <Template key="header" let:item>
-                <label class="sectionHeader" text={item.title} />
-            </Template>
-            <Template key="webdav" let:item>
-                <WebdavSettingsView bind:this={webdavView} {store} />
-            </Template>
-            <Template key="textfield" let:item>
-                <gridlayout columns="*" margin={5} row={3} rows="auto" on:tap={(e) => item.onTap(item, e)}>
-                    <textfield text={item.text} {variant} {...item.textFieldProperties} />
-                    <mdbutton
-                        class="icon-btn"
-                        color={colorOnSurfaceVariant}
-                        horizontalAlignment="right"
-                        text={item.icon}
-                        variant="text"
-                        verticalAlignment="middle"
-                        visibility={item.icon ? 'visible' : 'hidden'} />
-                </gridlayout>
-            </Template>
-            <Template key="switch" let:item>
-                <ListItemAutoSize fontSize={20} leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
-                    <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
-                </ListItemAutoSize>
-            </Template>
-            <Template let:item>
-                <ListItemAutoSize fontSize={20} rightValue={item.rightValue} showBottomLine={false} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
-                </ListItemAutoSize>
-            </Template>
-        </collectionview>
-        <CActionBar canGoBack modalWindow={true} title={lc('image_sync_settings')}>
-            <mdbutton text={lc('save')} variant="text" verticalAlignment="middle" on:tap={save} />
-            <!-- <mdbutton class="actionBarButton" text={lc('save')} variant="text" on:tap={save} /> -->
-        </CActionBar>
-    </gridlayout>
-</page>
diff --git a/app/components/settings/WebdavPDFSyncSettings.svelte b/app/components/settings/WebdavPDFSyncSettings.svelte
deleted file mode 100644
index e211bdd34..000000000
--- a/app/components/settings/WebdavPDFSyncSettings.svelte
+++ /dev/null
@@ -1,425 +0,0 @@
-<script lang="ts">
-    import { showError } from '@shared/utils/showError';
-    import { l, lc } from '~/helpers/locale';
-
-    import { CheckBox } from '@nativescript-community/ui-checkbox';
-    import { CollectionView } from '@nativescript-community/ui-collectionview';
-    import { Label } from '@nativescript-community/ui-label';
-    import { prompt } from '@nativescript-community/ui-material-dialogs';
-    import { TextFieldProperties } from '@nativescript-community/ui-material-textfield';
-    import { ApplicationSettings, Color, ObservableArray, Page, View } from '@nativescript/core';
-    import { closeModal } from '@shared/utils/svelte/ui';
-    import { createView } from '@shared/utils/ui';
-    import { Template } from '@nativescript-community/svelte-native/components';
-    import { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
-    import { get, writable } from 'svelte/store';
-    import { getPDFDefaultExportOptions } from '~/services/pdf/PDFCanvas';
-    import { SERVICES_SYNC_COLOR } from '~/services/sync/types';
-    import { WebdavPDFSyncServiceOptions } from '~/services/sync/WebdavPDFSyncService';
-    import { ALERT_OPTION_MAX_HEIGHT, FILENAME_DATE_FORMAT, FILENAME_USE_DOCUMENT_NAME, SETTINGS_FILE_NAME_FORMAT, SETTINGS_FILE_NAME_USE_DOCUMENT_NAME } from '~/utils/constants';
-    import { checkOrDownloadOCRLanguages, getNameFormatHTMLArgs, openLink, pickColor, requestNotificationPermission, showAlertOptionSelect, showSliderPopover, showSnack } from '~/utils/ui';
-    import { colors, windowInset } from '~/variables';
-    import CActionBar from '../common/CActionBar.svelte';
-    import ListItemAutoSize from '../common/ListItemAutoSize.svelte';
-    import OcrSettingsBottomSheet from '../ocr/OCRSettingsBottomSheet.svelte';
-    import PdfSyncSettingsView from './PDFSyncSettingsView.svelte';
-    import WebdavSettingsView from './WebdavSettingsView.svelte';
-    // technique for only specific properties to get updated on store change
-    let { colorOnSurfaceVariant, colorOutline, colorPrimary } = $colors;
-    $: ({ colorOnSurfaceVariant, colorOutline, colorPrimary } = $colors);
-
-    const tMargin = '4 10 4 10';
-    let page: NativeViewElementNode<Page>;
-    let collectionView: NativeViewElementNode<CollectionView>;
-
-    const pdfExportSettings = getPDFDefaultExportOptions();
-    export let data: WebdavPDFSyncServiceOptions = null;
-    const store = writable(
-        Object.assign(
-            {
-                exportOptions: pdfExportSettings,
-                autoSync: false,
-                enabled: true,
-                OCREnabled: false,
-                useFoldersStructure: false,
-                OCRDataType: 'best',
-                OCRLanguages: [],
-                fileNameFormat: ApplicationSettings.getString(SETTINGS_FILE_NAME_FORMAT, FILENAME_DATE_FORMAT),
-                useDocumentName: ApplicationSettings.getBoolean(SETTINGS_FILE_NAME_USE_DOCUMENT_NAME, FILENAME_USE_DOCUMENT_NAME),
-
-                color: SERVICES_SYNC_COLOR['webdav_data'] as string | Color
-            },
-            data
-        )
-    );
-    const variant = 'outline';
-
-    let webdavView: WebdavSettingsView;
-
-    async function save() {
-        if (await webdavView?.validateSave()) {
-            const result = get(store);
-            if (__ANDROID__) {
-                await requestNotificationPermission();
-            }
-            if (result.OCREnabled && result.OCRLanguages.length) {
-                await checkOrDownloadOCRLanguages({
-                    dataType: result.OCRDataType,
-                    languages: result.OCRLanguages,
-                    shouldConfirm: false
-                });
-            }
-            closeModal(result);
-        } else {
-            showSnack({
-                message: lc('need_fill_fields'),
-                view: page.nativeView
-            });
-        }
-    }
-
-    const items = new ObservableArray([
-        {
-            type: 'color'
-        },
-        {
-            type: 'switch',
-            id: 'enabled',
-            title: lc('enabled'),
-            value: $store.enabled
-        },
-        {
-            type: 'header',
-            title: lc('webdav_config')
-        },
-        {
-            type: 'webdav'
-        },
-        {
-            type: 'switch',
-            id: 'autoSync',
-            title: lc('auto_sync'),
-            description: lc('local_auto_sync_desc'),
-            value: $store.autoSync
-        },
-        {
-            id: 'setting',
-            key: 'fileNameFormat',
-            useHTML: true,
-            title: lc('filename_date_format'),
-            description: lc('filename_date_format_desc'),
-            full_description: lc('filename_date_format_fulldesc', ...getNameFormatHTMLArgs()),
-            onLinkTap: ({ link }) => {
-                openLink(link);
-            },
-            valueType: 'string',
-            textFieldProperties: {
-                autocapitalizationType: 'none',
-                autocorrect: false
-            } as TextFieldProperties,
-            rightValue: () => $store.fileNameFormat,
-            type: 'prompt'
-        },
-        {
-            type: 'switch',
-            id: 'useFoldersStructure',
-            title: lc('use_folder_structure'),
-            description: lc('use_folder_structure_desc'),
-            value: $store.useFoldersStructure
-        },
-        {
-            type: 'header',
-            title: lc('pdf_export_settings')
-        },
-        {
-            type: 'pdf_export_settings'
-        },
-        {
-            type: 'header',
-            title: lc('ocr_settings')
-        },
-        {
-            type: 'switch',
-            id: 'OCREnabled',
-            title: lc('ocr_enabled'),
-            description: lc('ocr_enabled_desc'),
-            value: $store.OCREnabled
-        },
-        {
-            type: 'ocr_settings'
-        }
-    ]);
-
-    function getTitle(item) {
-        return item.title;
-    }
-    function getDescription(item) {
-        return typeof item.description === 'function' ? item.description(item) : item.description;
-    }
-    function updateItem(item, key = 'key') {
-        const index = items.findIndex((it) => it[key] === item[key]);
-        if (index !== -1) {
-            items.setItem(index, item);
-        }
-    }
-
-    let checkboxTapTimer;
-    function clearCheckboxTimer() {
-        if (checkboxTapTimer) {
-            clearTimeout(checkboxTapTimer);
-            checkboxTapTimer = null;
-        }
-    }
-    let ignoreNextOnCheckBoxChange = false;
-    async function onCheckBox(item, event) {
-        if (ignoreNextOnCheckBoxChange || item.value === event.value) {
-            return;
-        }
-        const value = event.value;
-        item.value = value;
-        clearCheckboxTimer();
-        try {
-            ignoreNextOnCheckBoxChange = true;
-            $store[item.key || item.id] = value;
-        } catch (error) {
-            showError(error);
-        } finally {
-            ignoreNextOnCheckBoxChange = false;
-        }
-    }
-    async function onTap(item, event) {
-        try {
-            if (item.type === 'checkbox' || item.type === 'switch') {
-                // we dont want duplicate events so let s timeout and see if we clicking diretly on the checkbox
-                const checkboxView: CheckBox = ((event.object as View).parent as View).getViewById('checkbox');
-                clearCheckboxTimer();
-                checkboxTapTimer = setTimeout(() => {
-                    checkboxView.checked = !checkboxView.checked;
-                }, 10);
-                return;
-            }
-            switch (item.id) {
-                case 'store_setting':
-                case 'setting': {
-                    if (item.type === 'prompt') {
-                        const result = await prompt({
-                            title: getTitle(item),
-                            message: item.useHTML ? item.description : item.full_description || item.description,
-                            okButtonText: l('save'),
-                            cancelButtonText: l('cancel'),
-                            autoFocus: true,
-                            textFieldProperties: item.textFieldProperties,
-                            defaultText: (typeof item.rightValue === 'function' ? item.rightValue() : item.default) + '',
-                            view: item.useHTML
-                                ? createView(
-                                      Label,
-                                      {
-                                          padding: '10 20 0 20',
-                                          textWrap: true,
-                                          color: colorOnSurfaceVariant as any,
-                                          html: item.full_description || item.description
-                                      },
-                                      item.onLinkTap
-                                          ? {
-                                                linkTap: item.onLinkTap
-                                            }
-                                          : undefined
-                                  )
-                                : undefined
-                        });
-                        DEV_LOG && console.log('prompt result', item.key, item.valueType, result);
-                        if (result && !!result.result && result.text.length > 0) {
-                            if (item.valueType === 'string') {
-                                $store[item.key] = result.text;
-                            } else {
-                                $store[item.key] = parseInt(result.text, 10);
-                            }
-                            updateItem(item);
-                        }
-                    } else if (item.type === 'slider') {
-                        DEV_LOG && console.log('showSlidersPopover', event.object, item.currentValue());
-                        await showSliderPopover({
-                            anchor: event.object,
-                            value: item.currentValue(),
-                            ...item,
-                            onChange(value) {
-                                if (item.transformValue) {
-                                    value = item.transformValue(value, item);
-                                } else {
-                                    value = Math.round(value / item.step) * item.step;
-                                }
-                                if (item.valueType === 'string') {
-                                    $store[item.key] = value + '';
-                                } else {
-                                    $store[item.key] = value;
-                                }
-                                updateItem(item);
-                            }
-                        });
-                    } else {
-                        const result = await showAlertOptionSelect(
-                            {
-                                height: Math.min(item.values.length * 56, ALERT_OPTION_MAX_HEIGHT),
-                                rowHeight: item.autoSizeListItem ? undefined : 56,
-                                ...item,
-                                options: item.values.map((k) => ({
-                                    name: k.title || k.name,
-                                    data: k.value,
-                                    boxType: 'circle',
-                                    type: 'checkbox',
-                                    value: (item.currentValue?.() ?? item.currentValue) === k.value
-                                }))
-                            },
-                            {
-                                title: item.title,
-                                message: item.full_description
-                            }
-                        );
-                        DEV_LOG && console.log('result?.data', result?.data);
-                        if (result?.data !== undefined) {
-                            if (item.onResult) {
-                                item.onResult(result.data);
-                            } else {
-                                if (item.valueType === 'string') {
-                                    $store[item.key] = result?.data;
-                                } else {
-                                    $store[item.key] = parseInt(result?.data, 10);
-                                }
-                            }
-                            updateItem(item);
-                        }
-                    }
-
-                    break;
-                }
-            }
-        } catch (err) {
-            showError(err);
-        }
-    }
-
-    function selectTemplate(item, index, items) {
-        if (item.type) {
-            if (item.type === 'prompt' || item.type === 'slider') {
-                return 'default';
-            }
-            return item.type;
-        }
-        if (item.icon) {
-            return 'leftIcon';
-        }
-        return 'default';
-    }
-
-    async function changeColor(item, event) {
-        try {
-            const newColor = await pickColor($store.color, { anchor: event.object });
-            if (newColor) {
-                $store.color = newColor.hex;
-                updateItem(item, 'type');
-            }
-            updateItem(item, 'type');
-        } catch (error) {
-            showError(error);
-        }
-    }
-</script>
-
-<page bind:this={page} id="webdavsyncsettings" actionBarHidden={true}>
-    <gridlayout class="pageContent" rows="auto,*">
-        <collectionview bind:this={collectionView} itemTemplateSelector={selectTemplate} {items} row={1} android:paddingBottom={$windowInset.bottom}>
-            <Template key="color" let:item>
-                <ListItemAutoSize fontSize={20} subtitle={lc('sync_service_color_desc')} title={lc('color')} on:tap={(e) => changeColor(item, e)}>
-                    <absolutelayout backgroundColor={$store.color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} marginLeft={10} width={40} />
-                </ListItemAutoSize>
-            </Template>
-            <Template key="header" let:item>
-                <label class="sectionHeader" text={item.title} />
-            </Template>
-            <Template key="webdav" let:item>
-                <WebdavSettingsView bind:this={webdavView} {store} />
-            </Template>
-            <Template key="pdf_export_settings" let:item>
-                <PdfSyncSettingsView {store} />
-            </Template>
-            <Template key="ocr_settings" let:item>
-                <OcrSettingsBottomSheet onlySettings={true} bind:dataType={$store.OCRDataType} bind:languages={$store.OCRLanguages} />
-            </Template>
-            <Template key="textfield" let:item>
-                <gridlayout columns="*" margin={tMargin} row={3} rows="auto" on:tap={(e) => item.onTap(item, e)}>
-                    <textfield text={item.text} {variant} {...item.textFieldProperties} />
-                    <mdbutton
-                        class="icon-btn"
-                        color={colorOnSurfaceVariant}
-                        horizontalAlignment="right"
-                        text={item.icon}
-                        variant="text"
-                        verticalAlignment="middle"
-                        visibility={item.icon ? 'visible' : 'hidden'} />
-                </gridlayout>
-            </Template>
-            <Template key="switch" let:item>
-                <ListItemAutoSize fontSize={20} leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
-                    <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
-                </ListItemAutoSize>
-            </Template>
-            <Template let:item>
-                <ListItemAutoSize fontSize={20} rightValue={item.rightValue} showBottomLine={false} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
-                </ListItemAutoSize>
-            </Template>
-        </collectionview>
-        <!-- <scrollview row={1}>
-            <stacklayout android:paddingBottom={$windowInset.bottom}>
-                <ListItemAutoSize fontSize={20} subtitle={lc('sync_service_color_desc')} title={lc('color')} on:tap={changeColor}>
-                    <absolutelayout backgroundColor={$store.color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} marginLeft={10} width={40} />
-                </ListItemAutoSize>
-                <ListItemAutoSize fontSize={20} title={lc('enabled')} on:tap={unCheckBoxItemTap}>
-                    <switch
-                        id="checkbox"
-                        checked={$store.enabled}
-                        col={1}
-                        marginLeft={10}
-                        on:checkedChange={(e) =>
-                            onCheckBox(e, (e) => {
-                                $store.enabled = e.value;
-                            })}
-                        ios:backgroundColor={colorPrimary} />
-                </ListItemAutoSize>
-                <ListItemAutoSize fontSize={20} subtitle={lc('remote_data_auto_sync')} title={lc('auto_sync')} on:tap={unCheckBoxItemTap}>
-                    <switch
-                        id="checkbox"
-                        checked={$store.autoSync}
-                        col={1}
-                        marginLeft={10}
-                        on:checkedChange={(e) =>
-                            onCheckBox(e, (e) => {
-                                $store.autoSync = e.value;
-                            })}
-                        ios:backgroundColor={colorPrimary} />
-                </ListItemAutoSize>
-                <label class="sectionHeader" text={lc('webdav_config')} />
-                <WebdavSettingsView bind:this={webdavView} {store} />
-                <label class="sectionHeader" text={lc('pdf_export_settings')} />
-                <PdfSyncSettingsView {store} />
-                <label class="sectionHeader" text={lc('ocr_settings')} />
-                <ListItemAutoSize fontSize={20} subtitle={lc('ocr_enabled_desc')} title={lc('ocr_enabled')} on:tap={unCheckBoxItemTap}>
-                    <switch
-                        id="checkbox"
-                        checked={$store.OCREnabled}
-                        col={1}
-                        marginLeft={10}
-                        on:checkedChange={(e) =>
-                            onCheckBox(e, (e) => {
-                                $store.OCREnabled = e.value;
-                            })}
-                        ios:backgroundColor={colorPrimary} />
-                </ListItemAutoSize>
-                <OcrSettingsBottomSheet onlySettings={true} bind:dataType={$store.OCRDataType} bind:languages={$store.OCRLanguages} />
-            </stacklayout>
-        </scrollview> -->
-        <CActionBar canGoBack modalWindow={true} title={lc('webdav_config')}>
-            <mdbutton text={lc('save')} variant="text" verticalAlignment="middle" on:tap={save} />
-            <!-- <mdbutton class="actionBarButton" text={lc('save')} variant="text" on:tap={save} /> -->
-        </CActionBar>
-    </gridlayout>
-</page>
diff --git a/app/components/settings/sync/DataSyncSettings.svelte b/app/components/settings/sync/DataSyncSettings.svelte
new file mode 100644
index 000000000..4485103da
--- /dev/null
+++ b/app/components/settings/sync/DataSyncSettings.svelte
@@ -0,0 +1,91 @@
+<script context="module" lang="ts">
+    import { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
+    import { Color, ObservableArray, Page } from '@nativescript/core';
+    import { closeModal } from '@shared/utils/svelte/ui';
+    import { get, writable } from 'svelte/store';
+    import CActionBar from '~/components/common/CActionBar.svelte';
+    import SyncSettingsCollectionView from '~/components/settings/sync/SyncSettingsCollectionView.svelte';
+    import { lc } from '~/helpers/locale';
+    import { BasePDFSyncServiceOptions } from '~/services/sync/BasePDFSyncService';
+    import { SERVICES_SYNC_COLOR, SYNC_TYPES } from '~/services/sync/types';
+    import { checkOrDownloadOCRLanguages, requestNotificationPermission, showSnack } from '~/utils/ui';
+</script>
+
+<script lang="ts">
+    let page: NativeViewElementNode<Page>;
+
+    export let data: BasePDFSyncServiceOptions = {} as any;
+    export let serviceType: SYNC_TYPES;
+    export let store = writable<BasePDFSyncServiceOptions>(
+        Object.assign(
+            {
+                autoSync: false,
+                enabled: true,
+                color: SERVICES_SYNC_COLOR[serviceType] as string | Color,
+                remoteFolder: CARD_APP ? 'OSSCardWallet' : 'OSSDocumentScanner'
+            },
+            data
+        )
+    );
+
+    export let validateSave: () => Promise<boolean> = async () => true;
+    export let onSaveError: Function = () =>
+        showSnack({
+            message: lc('need_fill_fields'),
+            view: page.nativeView
+        });
+
+    async function save() {
+        const result = get(store);
+        DEV_LOG && console.log('save', JSON.stringify(result));
+        if (await validateSave()) {
+            if (__ANDROID__) {
+                await requestNotificationPermission();
+            }
+            if (result.OCREnabled && result.OCRLanguages.length) {
+                await checkOrDownloadOCRLanguages({
+                    dataType: result.OCRDataType,
+                    languages: result.OCRLanguages,
+                    shouldConfirm: false
+                });
+            }
+            closeModal(result);
+        } else {
+            onSaveError();
+        }
+    }
+    export let topItems = [];
+    export let updateItem;
+
+    const items = new ObservableArray([
+        {
+            type: 'color'
+        },
+        {
+            type: 'switch',
+            id: 'enabled',
+            title: lc('enabled'),
+            value: $store.enabled
+        },
+        {
+            type: 'switch',
+            id: 'autoSync',
+            title: lc('auto_sync'),
+            description: lc('local_auto_sync_desc'),
+            value: $store.autoSync
+        },
+        ...topItems
+    ]);
+</script>
+
+<page bind:this={page} actionBarHidden={true} {...$$restProps}>
+    <gridlayout class="pageContent" rows="auto,*">
+        <SyncSettingsCollectionView {items} row={1} bind:store bind:updateItem>
+            <slot />
+        </SyncSettingsCollectionView>
+
+        <CActionBar canGoBack modalWindow={true} title={lc('data_sync_settings')}>
+            <mdbutton text={lc('save')} variant="text" verticalAlignment="middle" on:tap={save} />
+        </CActionBar>
+    </gridlayout>
+</page>
diff --git a/app/components/settings/sync/ImageSyncSettings.svelte b/app/components/settings/sync/ImageSyncSettings.svelte
new file mode 100644
index 000000000..c69ef5f0c
--- /dev/null
+++ b/app/components/settings/sync/ImageSyncSettings.svelte
@@ -0,0 +1,140 @@
+<script context="module" lang="ts">
+    import { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
+    import { TextFieldProperties } from '@nativescript-community/ui-material-textfield';
+    import { ApplicationSettings, Color, ObservableArray, Page } from '@nativescript/core';
+    import { closeModal } from '@shared/utils/svelte/ui';
+    import { get, writable } from 'svelte/store';
+    import CActionBar from '~/components/common/CActionBar.svelte';
+    import SyncSettingsCollectionView from '~/components/settings/sync/SyncSettingsCollectionView.svelte';
+    import { lc } from '~/helpers/locale';
+    import { BaseImageSyncServiceOptions } from '~/services/sync/BaseImageSyncService';
+    import { SERVICES_SYNC_COLOR, SYNC_TYPES } from '~/services/sync/types';
+    import { FILENAME_DATE_FORMAT, SETTINGS_FILE_NAME_FORMAT, getImageExportSettings } from '~/utils/constants';
+    import { getNameFormatHTMLArgs, openLink, requestNotificationPermission, showSnack } from '~/utils/ui';
+</script>
+
+<script lang="ts">
+    let page: NativeViewElementNode<Page>;
+
+    const imageExportSettings = getImageExportSettings();
+    export let data: BaseImageSyncServiceOptions = {} as any;
+
+    export let serviceType: SYNC_TYPES;
+    export let validateSave: () => Promise<boolean> = async () => true;
+    export let onSaveError: Function = () =>
+        showSnack({
+            message: lc('need_fill_fields'),
+            view: page.nativeView
+        });
+    export let store = writable<BaseImageSyncServiceOptions>(
+        Object.assign(
+            {
+                ...imageExportSettings,
+                autoSync: false,
+                useFoldersStructure: false,
+                enabled: true,
+                fileNameFormat: ApplicationSettings.getString(SETTINGS_FILE_NAME_FORMAT, FILENAME_DATE_FORMAT),
+                color: SERVICES_SYNC_COLOR[serviceType] as string | Color
+            },
+            data
+        )
+    );
+
+    async function save() {
+        const result = get(store);
+
+        if (await validateSave()) {
+            if (__ANDROID__) {
+                await requestNotificationPermission();
+            }
+            closeModal(result);
+        } else {
+            onSaveError();
+        }
+    }
+    export let topItems = [];
+    export let updateItem;
+
+    const items = new ObservableArray([
+        {
+            type: 'color'
+        },
+        {
+            type: 'switch',
+            id: 'enabled',
+            title: lc('enabled'),
+            value: $store.enabled
+        },
+        {
+            type: 'switch',
+            id: 'autoSync',
+            title: lc('auto_sync'),
+            description: lc('local_auto_sync_desc'),
+            value: $store.autoSync
+        },
+        ...topItems,
+        {
+            id: 'setting',
+            key: 'fileNameFormat',
+            useHTML: true,
+            title: lc('filename_date_format'),
+            description: lc('filename_date_format_desc'),
+            full_description: lc('filename_date_format_fulldesc', ...getNameFormatHTMLArgs()),
+            onLinkTap: ({ link }) => {
+                openLink(link);
+            },
+            valueType: 'string',
+            textFieldProperties: {
+                autocapitalizationType: 'none',
+                autocorrect: false
+            } as TextFieldProperties,
+            rightValue: () => $store.fileNameFormat,
+            type: 'prompt'
+        },
+        {
+            type: 'switch',
+            id: 'useFoldersStructure',
+            title: lc('use_folder_structure'),
+            description: lc('use_folder_structure_desc'),
+            value: $store.useFoldersStructure
+        },
+        {
+            id: 'setting',
+            key: 'imageFormat',
+            title: lc('image_format'),
+            currentValue: () => $store.imageFormat,
+            description: lc('image_format_desc'),
+            rightValue: () => ($store.imageFormat || imageExportSettings.imageFormat).toUpperCase(),
+            valueType: 'string',
+            values: [
+                { value: null, title: lc('default_value') },
+                { value: 'jpg', title: 'JPEG' },
+                { value: 'png', title: 'PNG' }
+            ]
+        },
+        {
+            id: 'setting',
+            key: 'imageQuality',
+            min: 10,
+            max: 100,
+            step: 1,
+            title: lc('image_quality'),
+            description: lc('image_quality_desc'),
+            type: 'slider',
+            rightValue: () => $store.imageQuality,
+            currentValue: () => $store.imageQuality
+        }
+    ]);
+</script>
+
+<page bind:this={page} actionBarHidden={true} {...$$restProps}>
+    <gridlayout class="pageContent" rows="auto,*">
+        <SyncSettingsCollectionView {items} row={1} bind:store bind:updateItem>
+            <slot />
+        </SyncSettingsCollectionView>
+
+        <CActionBar canGoBack modalWindow={true} title={lc('image_sync_settings')}>
+            <mdbutton text={lc('save')} variant="text" verticalAlignment="middle" on:tap={save} />
+        </CActionBar>
+    </gridlayout>
+</page>
diff --git a/app/components/settings/sync/OAuthSettingsView.svelte b/app/components/settings/sync/OAuthSettingsView.svelte
new file mode 100644
index 000000000..457432032
--- /dev/null
+++ b/app/components/settings/sync/OAuthSettingsView.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    import { SilentError } from '@akylas/nativescript-app-utils/error';
+    import { showError } from '@shared/utils/showError';
+    import { Writable } from 'svelte/store';
+    import RemoteFolderTextField from '~/components/common/RemoteFolderTextField.svelte';
+    import { lc } from '~/helpers/locale';
+    import { OAuthProvider, OAuthTokens } from '~/services/sync/OAuthHelper';
+    import { performOAuthFlow } from '~/services/sync/OAuthHelperUI';
+    import { colors } from '~/variables';
+
+    $: ({ colorError, colorOnError, colorOnSurfaceVariant, colorSecondary } = $colors);
+
+    const variant = 'outline';
+
+    export let store: Writable<any>;
+    export let provider: OAuthProvider;
+    export let testConnection: (tokens: OAuthTokens) => Promise<boolean>;
+
+    let authenticating = false;
+    let testing = false;
+    let testConnectionSuccess = 0;
+    let isAuthenticated = false;
+
+    $: {
+        // Check if we have tokens
+        isAuthenticated = !!$store.accessToken;
+    }
+
+    async function authenticate() {
+        try {
+            authenticating = true;
+            const tokens = await performOAuthFlow(provider);
+
+            $store.accessToken = tokens.accessToken;
+            $store.refreshToken = tokens.refreshToken;
+            $store.expiresAt = tokens.expiresAt;
+
+            isAuthenticated = true;
+            testConnectionSuccess = 1;
+        } catch (error) {
+            showError(error);
+            testConnectionSuccess = -1;
+        } finally {
+            authenticating = false;
+        }
+    }
+
+    async function testConnectionAction() {
+        try {
+            if (!$store.accessToken) {
+                throw new SilentError(lc('not_authenticated'));
+            }
+            testing = true;
+            const tokens: OAuthTokens = {
+                accessToken: $store.accessToken,
+                refreshToken: $store.refreshToken,
+                expiresAt: $store.expiresAt
+            };
+            const result = await testConnection(tokens);
+            testConnectionSuccess = result ? 1 : -1;
+        } catch (error) {
+            showError(error);
+            testConnectionSuccess = -1;
+        } finally {
+            testing = false;
+        }
+    }
+
+    export async function validateSave() {
+        if (!$store.accessToken) {
+            throw new SilentError(lc('not_authenticated'));
+        }
+        if (!$store.remoteFolder?.length) {
+            throw new SilentError(lc('missing_remote_folder'));
+        }
+        return true;
+    }
+</script>
+
+<stacklayout>
+    <gridlayout columns="*,auto" rows="auto">
+        <label color={colorOnSurfaceVariant} fontSize={13} padding="0 16 0 16" text={isAuthenticated ? lc('authenticated') : lc('not_authenticated')} textWrap={true} verticalAlignment="center" />
+        <mdbutton
+            col={1}
+            margin="0 16 0 0"
+            text={lc(isAuthenticated ? 're_authenticate' : 'authenticate')}
+            variant={isAuthenticated ? 'outline' : 'contained'}
+            verticalAlignment="center"
+            on:tap={authenticate} />
+    </gridlayout>
+
+    <gridlayout columns="auto,auto,*" margin="10 16" visibility={isAuthenticated ? 'visible' : 'collapsed'}>
+        <label text={lc('connection_status')} verticalAlignment="center" />
+        <label
+            class="mdi"
+            col={1}
+            color={testConnectionSuccess > 0 ? 'green' : colorError}
+            fontSize={24}
+            text={testConnectionSuccess > 0 ? 'mdi-check-circle' : 'mdi-alert-circle'}
+            verticalAlignment="center"
+            visibility={testConnectionSuccess !== 0 ? 'visible' : 'collapse'} />
+        <mdbutton col={2} horizontalAlignment="right" text={lc('test_connection')} variant="outline" on:tap={testConnectionAction} />
+    </gridlayout>
+    <RemoteFolderTextField hint={lc('remote_folder')} margin="5 4" text={$store.remoteFolder} {variant} on:textChange={(e) => ($store.remoteFolder = e['value'])} />
+</stacklayout>
diff --git a/app/components/settings/sync/PDFSyncSettings.svelte b/app/components/settings/sync/PDFSyncSettings.svelte
new file mode 100644
index 000000000..c2eee8bd3
--- /dev/null
+++ b/app/components/settings/sync/PDFSyncSettings.svelte
@@ -0,0 +1,157 @@
+<script context="module" lang="ts">
+    import { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
+    import { TextFieldProperties } from '@nativescript-community/ui-material-textfield';
+    import { ApplicationSettings, Color, ObservableArray, Page } from '@nativescript/core';
+    import { closeModal } from '@shared/utils/svelte/ui';
+    import { get, writable } from 'svelte/store';
+    import CActionBar from '~/components/common/CActionBar.svelte';
+    import SyncSettingsCollectionView from '~/components/settings/sync/SyncSettingsCollectionView.svelte';
+    import { lc } from '~/helpers/locale';
+    import { getPDFDefaultExportOptions } from '~/services/pdf/PDFCanvas';
+    import { BasePDFSyncServiceOptions } from '~/services/sync/BasePDFSyncService';
+    import { SERVICES_SYNC_COLOR, SYNC_TYPES } from '~/services/sync/types';
+    import { FILENAME_DATE_FORMAT, FILENAME_USE_DOCUMENT_NAME, SETTINGS_FILE_NAME_FORMAT, SETTINGS_FILE_NAME_USE_DOCUMENT_NAME } from '~/utils/constants';
+    import { checkOrDownloadOCRLanguages, getNameFormatHTMLArgs, openLink, requestNotificationPermission, showSnack } from '~/utils/ui';
+</script>
+
+<script lang="ts">
+    // technique for only specific properties to get updated on store change
+    let page: NativeViewElementNode<Page>;
+
+    const pdfExportSettings = getPDFDefaultExportOptions();
+    export let data: BasePDFSyncServiceOptions = {} as any;
+    export let serviceType: SYNC_TYPES;
+
+    export let store = writable<BasePDFSyncServiceOptions>(
+        Object.assign(
+            {
+                exportOptions: pdfExportSettings,
+                autoSync: false,
+                enabled: true,
+                OCREnabled: false,
+                useFoldersStructure: false,
+                OCRDataType: 'best',
+                OCRLanguages: [],
+                fileNameFormat: ApplicationSettings.getString(SETTINGS_FILE_NAME_FORMAT, FILENAME_DATE_FORMAT),
+                useDocumentName: ApplicationSettings.getBoolean(SETTINGS_FILE_NAME_USE_DOCUMENT_NAME, FILENAME_USE_DOCUMENT_NAME),
+                color: SERVICES_SYNC_COLOR[serviceType] as string | Color
+            },
+            data
+        )
+    );
+
+    export let validateSave: () => Promise<boolean> = async () => true;
+    export let onSaveError: Function = () =>
+        showSnack({
+            message: lc('need_fill_fields'),
+            view: page.nativeView
+        });
+    // let folderPathName = data.folderPathName;
+    const variant = 'outline';
+
+    async function save() {
+        const result = get(store);
+        DEV_LOG && console.log('save', JSON.stringify(result));
+        if (await validateSave()) {
+            if (__ANDROID__) {
+                await requestNotificationPermission();
+            }
+            if (result.OCREnabled && result.OCRLanguages.length) {
+                await checkOrDownloadOCRLanguages({
+                    dataType: result.OCRDataType,
+                    languages: result.OCRLanguages,
+                    shouldConfirm: false
+                });
+            }
+            closeModal(result);
+        } else {
+            onSaveError();
+        }
+    }
+    export let topItems = [];
+    export let updateItem;
+
+    const items = new ObservableArray([
+        {
+            type: 'color'
+        },
+        {
+            type: 'switch',
+            id: 'enabled',
+            title: lc('enabled'),
+            value: $store.enabled
+        },
+        {
+            type: 'switch',
+            id: 'autoSync',
+            title: lc('auto_sync'),
+            description: lc('local_auto_sync_desc'),
+            value: $store.autoSync
+        },
+        ...topItems,
+        {
+            type: 'switch',
+            id: 'useDocumentName',
+            title: lc('filename_use_document_name'),
+            value: $store.useDocumentName
+        },
+        {
+            id: 'setting',
+            key: 'fileNameFormat',
+            useHTML: true,
+            title: lc('filename_date_format'),
+            description: lc('filename_date_format_desc'),
+            full_description: lc('filename_date_format_fulldesc', ...getNameFormatHTMLArgs()),
+            onLinkTap: ({ link }) => {
+                openLink(link);
+            },
+            valueType: 'string',
+            textFieldProperties: {
+                autocapitalizationType: 'none',
+                autocorrect: false
+            } as TextFieldProperties,
+            rightValue: () => $store.fileNameFormat,
+            type: 'prompt'
+        },
+        {
+            type: 'switch',
+            id: 'useFoldersStructure',
+            title: lc('use_folder_structure'),
+            description: lc('use_folder_structure_desc'),
+            value: $store.useFoldersStructure
+        },
+        {
+            type: 'sectionheader',
+            title: lc('pdf_settings')
+        },
+        {
+            type: 'pdfoptions'
+        },
+        {
+            type: 'sectionheader',
+            title: lc('ocr_settings')
+        },
+        {
+            type: 'switch',
+            id: 'OCREnabled',
+            title: lc('ocr_enabled'),
+            value: $store.OCREnabled
+        },
+        {
+            type: 'ocroptions'
+        }
+    ]);
+</script>
+
+<page bind:this={page} actionBarHidden={true} {...$$restProps}>
+    <gridlayout class="pageContent" rows="auto,*">
+        <SyncSettingsCollectionView {items} row={1} bind:store bind:updateItem>
+            <slot />
+        </SyncSettingsCollectionView>
+
+        <CActionBar canGoBack modalWindow={true} title={lc('pdf_sync_settings')}>
+            <mdbutton text={lc('save')} variant="text" verticalAlignment="middle" on:tap={save} />
+            <!-- <mdbutton class="actionBarButton" text={lc('save')} variant="text" on:tap={save} /> -->
+        </CActionBar>
+    </gridlayout>
+</page>
diff --git a/app/components/settings/PDFSyncSettingsView.svelte b/app/components/settings/sync/PDFSyncSettingsView.svelte
similarity index 85%
rename from app/components/settings/PDFSyncSettingsView.svelte
rename to app/components/settings/sync/PDFSyncSettingsView.svelte
index a7e157452..5a1a915a6 100644
--- a/app/components/settings/PDFSyncSettingsView.svelte
+++ b/app/components/settings/sync/PDFSyncSettingsView.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { VerticalPosition } from '@nativescript-community/ui-popover';
-    import { Screen } from '@nativescript/core';
     import { showError } from '@shared/utils/showError';
     import { createEventDispatcher } from '@shared/utils/svelte/ui';
     import { Writable } from 'svelte/store';
@@ -11,7 +10,7 @@
     import { screenWidthDips } from '~/variables';
     const dispatch = createEventDispatcher();
 
-    export let store: Writable<{ exportOptions: PDFExportBaseOptions }>;
+    export let store: Writable<{ exportOptions?: PDFExportBaseOptions }>;
     export let variant = 'outline';
 
     const tWidth = (screenWidthDips - 29) / 2;
@@ -92,7 +91,7 @@
     <textfield
         editable={false}
         hint={lc('orientation')}
-        margin={'0 4 5 0'}
+        margin="0 4 5 0"
         text={PDF_OPTIONS['orientation'][$store.exportOptions.orientation].name}
         {variant}
         width={tWidth}
@@ -100,37 +99,23 @@
     <textfield
         editable={false}
         hint={lc('paper_size')}
-        margin={'0 0 5 4'}
+        margin="0 0 5 4"
         text={PDF_OPTIONS['paper_size'][$store.exportOptions.paper_size].name}
         {variant}
         width={tWidth}
         on:tap={(e) => selectPDFOption('paper_size', e)} />
 
-    <textfield
-        editable={false}
-        hint={lc('color')}
-        margin={'5 4 5 0'}
-        text={PDF_OPTIONS['color'][$store.exportOptions.color].name}
-        {variant}
-        width={tWidth}
-        on:tap={(e) => selectPDFOption('color', e)} />
+    <textfield editable={false} hint={lc('color')} margin="5 4 5 0" text={PDF_OPTIONS['color'][$store.exportOptions.color].name} {variant} width={tWidth} on:tap={(e) => selectPDFOption('color', e)} />
     <textfield
         editable={false}
         hint={lc('items_per_page')}
-        margin={'5 0 5 4'}
+        margin="5 0 5 4"
         text={PDF_OPTIONS['items_per_page'][$store.exportOptions.items_per_page].name}
         {variant}
         width={tWidth}
         on:tap={(e) => selectPDFOption('items_per_page', e, parseInt)} />
-    <textfield
-        editable={false}
-        hint={lc('page_padding')}
-        margin={'5 4 5 0'}
-        text={$store.exportOptions.page_padding}
-        {variant}
-        width={tWidth}
-        on:tap={(e) => selectSilderPDFOption('page_padding', e)} />
-    <stacklayout margin={'5 0 5 4'} orientation="horizontal" width={tWidth}>
+    <textfield editable={false} hint={lc('page_padding')} margin="5 4 5 0" text={$store.exportOptions.page_padding} {variant} width={tWidth} on:tap={(e) => selectSilderPDFOption('page_padding', e)} />
+    <stacklayout margin="5 0 5 4" orientation="horizontal" width={tWidth}>
         <checkbox id="checkbox" checked={$store.exportOptions.draw_ocr_text} verticalAlignment="center" on:checkedChange={(e) => updatePDFOption('draw_ocr_text', e.value)} ios:margin={14} />
         <label fontSize={14} text={lc('draw_ocr_text')} textWrap={true} verticalAlignment="center" on:tap={(e) => onCheckBox(e, 'draw_ocr_text')} />
     </stacklayout>
@@ -138,7 +123,7 @@
         autocapitalizationType="none"
         autocorrect={false}
         hint={lc('optional_pdf_password')}
-        margin={'5 0 5 0'}
+        margin="5 0 5 0"
         placeholder={lc('password')}
         placeholderColor="gray"
         returnKeyType="done"
diff --git a/app/components/settings/SyncListSettings.svelte b/app/components/settings/sync/SyncListSettings.svelte
similarity index 58%
rename from app/components/settings/SyncListSettings.svelte
rename to app/components/settings/sync/SyncListSettings.svelte
index 2a3d49d9e..4f05d63ad 100644
--- a/app/components/settings/SyncListSettings.svelte
+++ b/app/components/settings/sync/SyncListSettings.svelte
@@ -12,15 +12,70 @@
     import { SERVICES_SYNC_TITLES, syncService } from '~/services/sync';
     import { LocalFolderImageSyncServiceOptions } from '~/services/sync/LocalFolderImageSyncService';
     import { LocalFolderPDFSyncServiceOptions } from '~/services/sync/LocalFolderPDFSyncService';
-    import { createWebdavConfig } from '~/services/sync/Webdav';
+    import { WebdavSyncOptions, createWebdavConfig } from '~/services/sync/Webdav';
     import { WebdavDataSyncOptions } from '~/services/sync/WebdavDataSyncService';
     import { WebdavImageSyncServiceOptions } from '~/services/sync/WebdavImageSyncService';
     import { WebdavPDFSyncServiceOptions } from '~/services/sync/WebdavPDFSyncService';
-    import { SERVICES_SYNC_COLOR, SYNC_TYPES } from '~/services/sync/types';
+    import { SERVICES_SYNC_COLOR, SYNC_TYPES, SyncTypes } from '~/services/sync/types';
     import { ALERT_OPTION_MAX_HEIGHT } from '~/utils/constants';
     import { getDirectoryName, hideLoading, requestNotificationPermission, requestStoragePermission, showAlertOptionSelect } from '~/utils/ui';
     import { colors, windowInset } from '~/variables';
+    import { GoogleDriveDataSyncOptions } from '~/services/sync/GoogleDriveDataSyncService';
     type Item = (WebdavDataSyncOptions | LocalFolderImageSyncServiceOptions | LocalFolderPDFSyncServiceOptions) & { id?: number; type: SYNC_TYPES; title?: string; description?: string };
+
+    import type FolderImageSyncSettings__SvelteComponent_ from '~/components/settings/sync/local/FolderImageSyncSettings.svelte';
+    import type FolderPDFSyncSettings__SvelteComponent_ from '~/components/settings/sync/local/FolderPDFSyncSettings.svelte';
+    import type WebdavImageSyncSettings__SvelteComponent_ from '~/components/settings/sync/webdav/WebdavImageSyncSettings.svelte';
+    import type WebdavPDFSyncSettings__SvelteComponent_ from '~/components/settings/sync/webdav/WebdavPDFSyncSettings.svelte';
+    import type WebdavDataSyncSettings__SvelteComponent_ from '~/components/settings/sync/webdav/WebdavDataSyncSettings.svelte';
+    import type OneDriveDataSyncSettings__SvelteComponent_ from '~/components/settings/sync/onedrive/OneDriveDataSyncSettings.svelte';
+    import type OneDrivePDFSyncSettings__SvelteComponent_ from '~/components/settings/sync/onedrive/OneDrivePDFSyncSettings.svelte';
+    import type OneDriveImageSyncSettings__SvelteComponent_ from '~/components/settings/sync/onedrive/OneDriveImageSyncSettings.svelte';
+    import type GoogleDriveImageSyncSettings__SvelteComponent_ from '~/components/settings/sync/gdrive/GoogleDriveImageSyncSettings.svelte';
+    import type GoogleDrivePDFSyncSettings__SvelteComponent_ from '~/components/settings/sync/gdrive/GoogleDrivePDFSyncSettings.svelte';
+    import type GoogleDriveDataSyncSettings__SvelteComponent_ from '~/components/settings/sync/gdrive/GoogleDriveDataSyncSettings.svelte';
+    import { BaseDataSyncServiceOptions } from '~/services/sync/BaseDataSyncService';
+    import { GoogleDriveSyncOptions } from '~/services/sync/GoogleDrive';
+    import { OneDriveSyncOptions } from '~/services/sync/OneDrive';
+    interface SettingsComponentReturnType {
+        [SyncTypes.folder_image]: typeof FolderImageSyncSettings__SvelteComponent_;
+        [SyncTypes.folder_pdf]: typeof FolderPDFSyncSettings__SvelteComponent_;
+        [SyncTypes.webdav_data]: typeof WebdavDataSyncSettings__SvelteComponent_;
+        [SyncTypes.webdav_image]: typeof WebdavImageSyncSettings__SvelteComponent_;
+        [SyncTypes.webdav_pdf]: typeof WebdavPDFSyncSettings__SvelteComponent_;
+        [SyncTypes.onedrive_data]: typeof OneDriveDataSyncSettings__SvelteComponent_;
+        [SyncTypes.onedrive_image]: typeof OneDriveImageSyncSettings__SvelteComponent_;
+        [SyncTypes.onedrive_pdf]: typeof OneDrivePDFSyncSettings__SvelteComponent_;
+        [SyncTypes.gdrive_data]: typeof GoogleDriveDataSyncSettings__SvelteComponent_;
+        [SyncTypes.gdrive_image]: typeof GoogleDriveImageSyncSettings__SvelteComponent_;
+        [SyncTypes.gdrive_pdf]: typeof GoogleDrivePDFSyncSettings__SvelteComponent_;
+    }
+    async function getSettingsComponent<T extends SyncTypes>(syncType: T): Promise<SettingsComponentReturnType[T]> {
+        switch (syncType) {
+            case SyncTypes.folder_image:
+                return (await import('~/components/settings/sync/local/FolderImageSyncSettings.svelte')).default as any;
+            case 'folder_pdf':
+                return (await import('~/components/settings/sync/local/FolderPDFSyncSettings.svelte')).default as any;
+            case 'webdav_data':
+                return (await import('~/components/settings/sync/webdav/WebdavDataSyncSettings.svelte')).default as any;
+            case 'webdav_image':
+                return (await import('~/components/settings/sync/webdav/WebdavImageSyncSettings.svelte')).default as any;
+            case 'webdav_pdf':
+                return (await import('~/components/settings/sync/webdav/WebdavPDFSyncSettings.svelte')).default as any;
+            case 'onedrive_data':
+                return (await import('~/components/settings/sync/onedrive/OneDriveDataSyncSettings.svelte')).default as any;
+            case 'onedrive_image':
+                return (await import('~/components/settings/sync/onedrive/OneDriveImageSyncSettings.svelte')).default as any;
+            case 'onedrive_pdf':
+                return (await import('~/components/settings/sync/onedrive/OneDrivePDFSyncSettings.svelte')).default as any;
+            case 'gdrive_data':
+                return (await import('~/components/settings/sync/gdrive/GoogleDriveDataSyncSettings.svelte')).default as any;
+            case 'gdrive_image':
+                return (await import('~/components/settings/sync/gdrive/GoogleDriveImageSyncSettings.svelte')).default as any;
+            case 'gdrive_pdf':
+                return (await import('~/components/settings/sync/gdrive/GoogleDrivePDFSyncSettings.svelte')).default as any;
+        }
+    }
 </script>
 
 <script lang="ts">
@@ -68,8 +123,11 @@
             DEV_LOG && console.log('SyncListSettings', 'onItemTap', item);
             let configToUpdate;
             switch (item.type) {
-                case 'webdav_data': {
-                    const page = (await import('~/components/settings/WebdavDataSyncSettings.svelte')).default;
+                case SyncTypes.webdav_data:
+                case SyncTypes.webdav_image:
+                case SyncTypes.webdav_pdf: {
+                    const type = item.type as SyncTypes.webdav_data | SyncTypes.webdav_image | SyncTypes.webdav_pdf;
+                    const page = await getSettingsComponent(type);
                     const result: WebdavDataSyncOptions = await showModal({
                         page,
                         fullscreen: true,
@@ -82,41 +140,32 @@
                     }
                     break;
                 }
-                case 'webdav_pdf': {
-                    const page = (await import('~/components/settings/WebdavPDFSyncSettings.svelte')).default;
-                    const result: WebdavPDFSyncServiceOptions = await showModal({
-                        page,
-                        fullscreen: true,
-                        props: {
-                            data: item as WebdavPDFSyncServiceOptions
-                        }
-                    });
-                    if (result) {
-                        configToUpdate = createWebdavConfig(result);
-                    }
-                    break;
-                }
-                case 'webdav_image': {
-                    const page = (await import('~/components/settings/WebdavImageSyncSettings.svelte')).default;
-                    const result: WebdavImageSyncServiceOptions = await showModal({
+                case SyncTypes.folder_image:
+                case SyncTypes.folder_pdf: {
+                    const type = item.type as SyncTypes.folder_image | SyncTypes.folder_pdf;
+                    const page = await getSettingsComponent(type);
+                    const result: LocalFolderPDFSyncServiceOptions = await showModal({
                         page,
                         fullscreen: true,
                         props: {
-                            data: item as WebdavImageSyncServiceOptions
+                            data: item as LocalFolderPDFSyncServiceOptions
                         }
                     });
                     if (result) {
-                        configToUpdate = createWebdavConfig(result);
+                        configToUpdate = result;
                     }
                     break;
                 }
-                case 'folder_image': {
-                    const page = (await import('~/components/settings/FolderImageSyncSettings.svelte')).default;
-                    const result: LocalFolderImageSyncServiceOptions = await showModal({
+                case SyncTypes.gdrive_data:
+                case SyncTypes.gdrive_pdf:
+                case SyncTypes.gdrive_image: {
+                    const type = item.type as SyncTypes.gdrive_data | SyncTypes.gdrive_pdf | SyncTypes.gdrive_image;
+                    const page = await getSettingsComponent(type);
+                    const result: BaseDataSyncServiceOptions & GoogleDriveSyncOptions = await showModal({
                         page,
                         fullscreen: true,
                         props: {
-                            data: item as LocalFolderImageSyncServiceOptions
+                            data: item as BaseDataSyncServiceOptions & GoogleDriveSyncOptions
                         }
                     });
                     if (result) {
@@ -124,13 +173,16 @@
                     }
                     break;
                 }
-                case 'folder_pdf': {
-                    const page = (await import('~/components/settings/FolderPDFSyncSettings.svelte')).default;
-                    const result: LocalFolderPDFSyncServiceOptions = await showModal({
+                case SyncTypes.onedrive_data:
+                case SyncTypes.onedrive_image:
+                case SyncTypes.onedrive_pdf: {
+                    const type = item.type as SyncTypes.onedrive_data | SyncTypes.onedrive_image | SyncTypes.onedrive_pdf;
+                    const page = await getSettingsComponent(type);
+                    const result: BaseDataSyncServiceOptions & OneDriveSyncOptions = await showModal({
                         page,
                         fullscreen: true,
                         props: {
-                            data: item as LocalFolderPDFSyncServiceOptions
+                            data: item as BaseDataSyncServiceOptions & OneDriveSyncOptions
                         }
                     });
                     if (result) {
@@ -163,6 +215,7 @@
             showError(err);
         }
     }
+
     async function onTap(item, event) {
         try {
             // DEV_LOG && console.log('SyncListSettings', 'onItemTap', item);
@@ -191,10 +244,13 @@
                         if (__ANDROID__) {
                             await requestNotificationPermission();
                         }
-                        switch (selection?.data) {
-                            case 'webdav_data': {
-                                const page = (await import('~/components/settings/WebdavDataSyncSettings.svelte')).default;
-                                const result: WebdavDataSyncOptions = await showModal({
+                        switch (selection?.data as SyncTypes) {
+                            case SyncTypes.webdav_data:
+                            case SyncTypes.webdav_image:
+                            case SyncTypes.webdav_pdf: {
+                                const type = selection?.data as SyncTypes.webdav_data | SyncTypes.webdav_image | SyncTypes.webdav_pdf;
+                                const page = await getSettingsComponent(type);
+                                const result: BaseDataSyncServiceOptions & WebdavSyncOptions = await showModal({
                                     page,
                                     fullscreen: true,
                                     props: {
@@ -206,9 +262,12 @@
                                 }
                                 break;
                             }
-                            case 'webdav_pdf': {
-                                const page = (await import('~/components/settings/WebdavPDFSyncSettings.svelte')).default;
-                                const result: WebdavPDFSyncServiceOptions = await showModal({
+
+                            case SyncTypes.folder_image:
+                            case SyncTypes.folder_pdf: {
+                                const type = selection?.data as SyncTypes.folder_image | SyncTypes.folder_pdf;
+                                const page = await getSettingsComponent(type);
+                                const result: LocalFolderPDFSyncServiceOptions = await showModal({
                                     page,
                                     fullscreen: true,
                                     props: {
@@ -216,13 +275,16 @@
                                     }
                                 });
                                 if (result) {
-                                    configToAdd = createWebdavConfig(result);
+                                    configToAdd = result;
                                 }
                                 break;
                             }
-                            case 'webdav_image': {
-                                const page = (await import('~/components/settings/WebdavImageSyncSettings.svelte')).default;
-                                const result: WebdavImageSyncServiceOptions = await showModal({
+                            case SyncTypes.gdrive_data:
+                            case SyncTypes.gdrive_pdf:
+                            case SyncTypes.gdrive_image: {
+                                const type = selection?.data as SyncTypes.gdrive_data | SyncTypes.gdrive_pdf | SyncTypes.gdrive_image;
+                                const page = await getSettingsComponent(type);
+                                const result: BaseDataSyncServiceOptions & GoogleDriveSyncOptions = await showModal({
                                     page,
                                     fullscreen: true,
                                     props: {
@@ -230,44 +292,31 @@
                                     }
                                 });
                                 if (result) {
-                                    configToAdd = createWebdavConfig(result);
+                                    configToAdd = result;
                                 }
                                 break;
                             }
-                            case 'folder_image': {
-                                if (__ANDROID__) {
-                                    await requestStoragePermission();
-                                }
-                                const page = (await import('~/components/settings/FolderImageSyncSettings.svelte')).default;
-                                const result = await showModal({
+                            case SyncTypes.onedrive_data:
+                            case SyncTypes.onedrive_image:
+                            case SyncTypes.onedrive_pdf: {
+                                const type = selection?.data as SyncTypes.onedrive_data | SyncTypes.onedrive_image | SyncTypes.onedrive_pdf;
+                                const page = await getSettingsComponent(type);
+                                const result: BaseDataSyncServiceOptions & OneDriveSyncOptions = await showModal({
                                     page,
                                     fullscreen: true,
                                     props: {
                                         data
                                     }
                                 });
-                                configToAdd = result;
-                                break;
-                            }
-
-                            case 'folder_pdf': {
-                                if (__ANDROID__) {
-                                    await requestStoragePermission();
+                                if (result) {
+                                    configToAdd = result;
                                 }
-                                const page = (await import('~/components/settings/FolderPDFSyncSettings.svelte')).default;
-                                const result = await showModal({
-                                    page,
-                                    fullscreen: true,
-                                    props: {
-                                        data
-                                    }
-                                });
-                                configToAdd = result;
                                 break;
                             }
                         }
                         if (configToAdd) {
                             const data = syncService.addService(selection?.data, configToAdd);
+                            DEV_LOG && console.log('adding item', data);
                             items.push(data);
                         }
                     }
@@ -288,6 +337,14 @@
     function getTitle(item: Item) {
         const result = SERVICES_SYNC_TITLES[item.type] + ': ';
         switch (item.type) {
+            case 'gdrive_data':
+            case 'gdrive_pdf':
+            case 'gdrive_image':
+                return 'Google Drive';
+            case 'onedrive_data':
+            case 'onedrive_pdf':
+            case 'onedrive_image':
+                return 'OneDrive';
             case 'webdav_data':
             case 'webdav_pdf':
             case 'webdav_image':
@@ -306,6 +363,8 @@
     function getDescription(item: Item) {
         switch (item.type) {
             case 'webdav_data':
+            case 'gdrive_data':
+            case 'onedrive_data':
                 return (item as WebdavDataSyncOptions).remoteFolder;
             // case 'folder_image':
             //     return (item as LocalFolderImageSyncServiceOptions).localFolderPath;
diff --git a/app/components/settings/FolderImageSyncSettings.svelte b/app/components/settings/sync/SyncSettingsCollectionView.svelte
similarity index 53%
rename from app/components/settings/FolderImageSyncSettings.svelte
rename to app/components/settings/sync/SyncSettingsCollectionView.svelte
index 3e7058f01..284c34ec4 100644
--- a/app/components/settings/FolderImageSyncSettings.svelte
+++ b/app/components/settings/sync/SyncSettingsCollectionView.svelte
@@ -1,134 +1,31 @@
-<script lang="ts">
+<script context="module" lang="ts">
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
     import { CheckBox } from '@nativescript-community/ui-checkbox';
     import { CollectionView } from '@nativescript-community/ui-collectionview';
     import { Label } from '@nativescript-community/ui-label';
     import { prompt } from '@nativescript-community/ui-material-dialogs';
-    import { TextField, TextFieldProperties } from '@nativescript-community/ui-material-textfield';
-    import { ApplicationSettings, Color, ObservableArray, View } from '@nativescript/core';
-    import { Template } from '@nativescript-community/svelte-native/components';
-    import { NativeViewElementNode } from '@nativescript-community/svelte-native/dom';
-    import { get, writable } from 'svelte/store';
-    import { l, lc } from '~/helpers/locale';
-    import { LocalFolderImageSyncServiceOptions } from '~/services/sync/LocalFolderImageSyncService';
-    import { SERVICES_SYNC_COLOR } from '~/services/sync/types';
-    import { ALERT_OPTION_MAX_HEIGHT, FILENAME_DATE_FORMAT, SETTINGS_FILE_NAME_FORMAT, getImageExportSettings } from '~/utils/constants';
+    import { TextField } from '@nativescript-community/ui-material-textfield';
+    import { ObservableArray, View } from '@nativescript/core';
     import { showError } from '@shared/utils/showError';
-    import { closeModal } from '@shared/utils/svelte/ui';
-    import { createView, getNameFormatHTMLArgs, openLink, pickColor, requestNotificationPermission, showAlertOptionSelect, showSliderPopover } from '~/utils/ui';
+    import { Writable } from 'svelte/store';
+    import ListItemAutoSize from '~/components/common/ListItemAutoSize.svelte';
+    import { l, lc } from '~/helpers/locale';
+    import { ALERT_OPTION_MAX_HEIGHT } from '~/utils/constants';
+    import { createView, pickColor, showAlertOptionSelect, showSliderPopover } from '~/utils/ui';
     import { colors, windowInset } from '~/variables';
-    import CActionBar from '../common/CActionBar.svelte';
-    import ListItemAutoSize from '../common/ListItemAutoSize.svelte';
-    import FolderTextView from '../common/FolderTextView.svelte';
+</script>
+
+<script lang="ts">
     // technique for only specific properties to get updated on store change
-    $: ({ colorError, colorOnError, colorOnSurfaceVariant, colorOutline, colorPrimary, colorSecondary } = $colors);
+    $: ({ colorOnSurfaceVariant, colorOutline } = $colors);
 
-    const imageExportSettings = getImageExportSettings();
-    export let data: LocalFolderImageSyncServiceOptions = {} as any;
     let collectionView: NativeViewElementNode<CollectionView>;
-    const store = writable(
-        Object.assign(
-            {
-                ...imageExportSettings,
-                autoSync: false,
-                useFoldersStructure: false,
-                enabled: true,
-                fileNameFormat: ApplicationSettings.getString(SETTINGS_FILE_NAME_FORMAT, FILENAME_DATE_FORMAT),
-                color: SERVICES_SYNC_COLOR['folder_image'] as string | Color
-            },
-            data
-        )
-    );
-    DEV_LOG && console.log('FolderImageSyncSettings', JSON.stringify(data), JSON.stringify(get(store)));
+    export let store: Writable<any>;
     // let folderPathName = data.folderPathName;
     const variant = 'outline';
 
-    async function save() {
-        const result = get(store);
-
-        if (result.localFolderPath) {
-            if (__ANDROID__) {
-                await requestNotificationPermission();
-            }
-            closeModal(result);
-        } else {
-            showError(lc('missing_export_folder'), { showAsSnack: true });
-        }
-    }
-
-    const items = new ObservableArray([
-        {
-            type: 'color'
-        },
-        {
-            type: 'switch',
-            id: 'enabled',
-            title: lc('enabled'),
-            value: $store.enabled
-        },
-        {
-            id: 'selectFolder',
-            type: 'selectFolder',
-            text: $store.localFolderPath
-        },
-        {
-            type: 'switch',
-            id: 'autoSync',
-            title: lc('auto_sync'),
-            description: lc('local_auto_sync_desc'),
-            value: $store.autoSync
-        },
-        {
-            id: 'setting',
-            key: 'fileNameFormat',
-            useHTML: true,
-            title: lc('filename_date_format'),
-            description: lc('filename_date_format_desc'),
-            full_description: lc('filename_date_format_fulldesc', ...getNameFormatHTMLArgs()),
-            onLinkTap: ({ link }) => {
-                openLink(link);
-            },
-            valueType: 'string',
-            textFieldProperties: {
-                autocapitalizationType: 'none',
-                autocorrect: false
-            } as TextFieldProperties,
-            rightValue: () => $store.fileNameFormat,
-            type: 'prompt'
-        },
-        {
-            type: 'switch',
-            id: 'useFoldersStructure',
-            title: lc('use_folder_structure'),
-            description: lc('use_folder_structure_desc'),
-            value: $store.useFoldersStructure
-        },
-        {
-            id: 'setting',
-            key: 'imageFormat',
-            title: lc('image_format'),
-            currentValue: () => $store.imageFormat,
-            description: lc('image_format_desc'),
-            rightValue: () => ($store.imageFormat || imageExportSettings.imageFormat).toUpperCase(),
-            valueType: 'string',
-            values: [
-                { value: null, title: lc('default_value') },
-                { value: 'jpg', title: 'JPEG' },
-                { value: 'png', title: 'PNG' }
-            ]
-        },
-        {
-            id: 'setting',
-            key: 'imageQuality',
-            min: 10,
-            max: 100,
-            step: 1,
-            title: lc('image_quality'),
-            description: lc('image_quality_desc'),
-            type: 'slider',
-            rightValue: () => $store.imageQuality,
-            currentValue: () => $store.imageQuality
-        }
-    ]);
+    export let items: ObservableArray<any>;
 
     function getTitle(item) {
         return item.title;
@@ -136,7 +33,7 @@
     function getDescription(item) {
         return typeof item.description === 'function' ? item.description(item) : item.description;
     }
-    function updateItem(item, key = 'id') {
+    export function updateItem(item, key = 'id') {
         const index = items.findIndex((it) => it[key] === item[key]);
         if (index !== -1) {
             items.setItem(index, item);
@@ -307,50 +204,43 @@
         }
     }
 
-    async function onFolderSelect(item, event) {
-        item.text = $store.localFolderPath = event.text;
-        updateItem(item);
-    }
+    // async function onFolderSelect(item, event) {
+    //     item.text = $store.localFolderPath = event.text;
+    //     updateItem(item);
+    // }
 </script>
 
-<page actionBarHidden={true}>
-    <gridlayout class="pageContent" rows="auto,*">
-        <collectionview bind:this={collectionView} ios:autoReloadItemOnLayout={true} itemTemplateSelector={selectTemplate} {items} row={1} android:paddingBottom={$windowInset.bottom}>
-            <Template key="color" let:item>
-                <ListItemAutoSize fontSize={20} subtitle={lc('sync_service_color_desc')} title={lc('color')} on:tap={(event) => changeColor(item, event)}>
-                    <absolutelayout backgroundColor={$store.color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} marginLeft={10} width={40} />
-                </ListItemAutoSize>
-            </Template>
-            <Template key="textfield" let:item>
-                <gridlayout columns="*" margin={5} row={3} rows="auto" on:tap={(e) => item.onTap(item, e)}>
-                    <textfield isUserInteractionEnabled={false} text={item.text} {variant} {...item.textFieldProperties} on:loaded={onTextChange} />
-                    <mdbutton
-                        class="icon-btn"
-                        color={colorOnSurfaceVariant}
-                        horizontalAlignment="right"
-                        isUserInteractionEnabled={false}
-                        text={item.icon}
-                        variant="text"
-                        verticalAlignment="middle"
-                        visibility={item.icon ? 'visible' : 'hidden'} />
-                </gridlayout>
-            </Template>
-            <Template key="switch" let:item>
-                <ListItemAutoSize fontSize={20} leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
-                    <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
-                </ListItemAutoSize>
-            </Template>
-            <Template let:item>
-                <ListItemAutoSize fontSize={20} rightValue={item.rightValue} showBottomLine={false} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
-                </ListItemAutoSize>
-            </Template>
-            <Template key="selectFolder" let:item>
-                <FolderTextView text={item.text} on:folder={(e) => onFolderSelect(item, e)} />
-            </Template>
-        </collectionview>
-        <CActionBar canGoBack modalWindow={true} title={lc('image_sync_settings')}>
-            <mdbutton text={lc('save')} variant="text" verticalAlignment="middle" on:tap={save} />
-            <!-- <mdbutton class="actionBarButton" text={lc('save')} variant="text" on:tap={save} /> -->
-        </CActionBar>
-    </gridlayout>
-</page>
+<collectionview bind:this={collectionView} ios:autoReloadItemOnLayout={true} itemTemplateSelector={selectTemplate} {items} android:paddingBottom={$windowInset.bottom} {...$$restProps}>
+    <Template key="header" let:item>
+        <label class="sectionHeader" text={item.title} />
+    </Template>
+    <Template key="color" let:item>
+        <ListItemAutoSize fontSize={20} subtitle={lc('sync_service_color_desc')} title={lc('color')} on:tap={(event) => changeColor(item, event)}>
+            <absolutelayout backgroundColor={$store.color} borderColor={colorOutline} borderRadius="50%" borderWidth={2} col={1} height={40} marginLeft={10} width={40} />
+        </ListItemAutoSize>
+    </Template>
+    <Template key="textfield" let:item>
+        <gridlayout columns="*" margin={5} row={3} rows="auto" on:tap={(e) => item.onTap(item, e)}>
+            <textfield isUserInteractionEnabled={false} text={item.text} {variant} {...item.textFieldProperties} on:loaded={onTextChange} />
+            <mdbutton
+                class="icon-btn"
+                color={colorOnSurfaceVariant}
+                horizontalAlignment="right"
+                isUserInteractionEnabled={false}
+                text={item.icon}
+                variant="text"
+                verticalAlignment="middle"
+                visibility={item.icon ? 'visible' : 'hidden'} />
+        </gridlayout>
+    </Template>
+    <Template key="switch" let:item>
+        <ListItemAutoSize fontSize={20} leftIcon={item.icon} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
+            <switch id="checkbox" checked={item.value} col={1} marginLeft={10} verticalAlignment="center" on:checkedChange={(e) => onCheckBox(item, e)} />
+        </ListItemAutoSize>
+    </Template>
+    <Template let:item>
+        <ListItemAutoSize fontSize={20} rightValue={item.rightValue} showBottomLine={false} subtitle={getDescription(item)} title={getTitle(item)} on:tap={(event) => onTap(item, event)}>
+        </ListItemAutoSize>
+    </Template>
+    <slot />
+</collectionview>
diff --git a/app/components/settings/sync/gdrive/GoogleDriveDataSyncSettings.svelte b/app/components/settings/sync/gdrive/GoogleDriveDataSyncSettings.svelte
new file mode 100644
index 000000000..59b026866
--- /dev/null
+++ b/app/components/settings/sync/gdrive/GoogleDriveDataSyncSettings.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { lc } from '@nativescript-community/l';
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import DataSyncSettings from '~/components/settings/sync/DataSyncSettings.svelte';
+    import OAuthSettingsView from '~/components/settings/sync/OAuthSettingsView.svelte';
+    import { GOOGLE_DRIVE_PROVIDER, testGoogleDriveConnection } from '~/services/sync/GoogleDrive';
+    import { GoogleDriveDataSyncOptions } from '~/services/sync/GoogleDriveDataSyncService';
+
+    export let data: GoogleDriveDataSyncOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<GoogleDriveDataSyncOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('authentication')
+        },
+        {
+            type: 'oauth'
+        }
+    ];
+    let oauthView: OAuthSettingsView;
+
+    async function validateSave() {
+        return oauthView?.validateSave();
+    }
+</script>
+
+<DataSyncSettings {data} serviceType="gdrive_data" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="oauth" let:item>
+        <OAuthSettingsView bind:this={oauthView} provider={GOOGLE_DRIVE_PROVIDER} {store} testConnection={testGoogleDriveConnection} />
+    </Template>
+</DataSyncSettings>
diff --git a/app/components/settings/sync/gdrive/GoogleDriveImageSyncSettings.svelte b/app/components/settings/sync/gdrive/GoogleDriveImageSyncSettings.svelte
new file mode 100644
index 000000000..3dfc12d08
--- /dev/null
+++ b/app/components/settings/sync/gdrive/GoogleDriveImageSyncSettings.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { lc } from '@nativescript-community/l';
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import ImageSyncSettings from '~/components/settings/sync/ImageSyncSettings.svelte';
+    import OAuthSettingsView from '~/components/settings/sync/OAuthSettingsView.svelte';
+    import { GOOGLE_DRIVE_PROVIDER, testGoogleDriveConnection } from '~/services/sync/GoogleDrive';
+    import { GoogleDriveImageSyncServiceOptions } from '~/services/sync/GoogleDriveImageSyncService';
+
+    export let data: GoogleDriveImageSyncServiceOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<GoogleDriveImageSyncServiceOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('authentication')
+        },
+        {
+            type: 'oauth'
+        }
+    ];
+    let oauthView: OAuthSettingsView;
+
+    async function validateSave() {
+        return oauthView?.validateSave();
+    }
+</script>
+
+<ImageSyncSettings {data} serviceType="gdrive_image" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="oauth" let:item>
+        <OAuthSettingsView bind:this={oauthView} provider={GOOGLE_DRIVE_PROVIDER} {store} testConnection={testGoogleDriveConnection} />
+    </Template>
+</ImageSyncSettings>
diff --git a/app/components/settings/sync/gdrive/GoogleDrivePDFSyncSettings.svelte b/app/components/settings/sync/gdrive/GoogleDrivePDFSyncSettings.svelte
new file mode 100644
index 000000000..954b45ab5
--- /dev/null
+++ b/app/components/settings/sync/gdrive/GoogleDrivePDFSyncSettings.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { lc } from '@nativescript-community/l';
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import OAuthSettingsView from '~/components/settings/sync/OAuthSettingsView.svelte';
+    import PDFSyncSettings from '~/components/settings/sync/PDFSyncSettings.svelte';
+    import { GOOGLE_DRIVE_PROVIDER, testGoogleDriveConnection } from '~/services/sync/GoogleDrive';
+    import { GoogleDrivePDFSyncServiceOptions } from '~/services/sync/GoogleDrivePDFSyncService';
+
+    export let data: GoogleDrivePDFSyncServiceOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<GoogleDrivePDFSyncServiceOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('authentication')
+        },
+        {
+            type: 'oauth'
+        }
+    ];
+    let oauthView: OAuthSettingsView;
+
+    async function validateSave() {
+        return oauthView?.validateSave();
+    }
+</script>
+
+<PDFSyncSettings {data} serviceType="gdrive_pdf" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="oauth" let:item>
+        <OAuthSettingsView bind:this={oauthView} provider={GOOGLE_DRIVE_PROVIDER} {store} testConnection={testGoogleDriveConnection} />
+    </Template>
+</PDFSyncSettings>
diff --git a/app/components/settings/sync/local/FolderImageSyncSettings.svelte b/app/components/settings/sync/local/FolderImageSyncSettings.svelte
new file mode 100644
index 000000000..85efe1cf6
--- /dev/null
+++ b/app/components/settings/sync/local/FolderImageSyncSettings.svelte
@@ -0,0 +1,44 @@
+<script context="module" lang="ts">
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { showError } from '@shared/utils/showError';
+    import { Writable, get } from 'svelte/store';
+    import ImageSyncSettings from '~/components/settings/sync/ImageSyncSettings.svelte';
+    import { lc } from '~/helpers/locale';
+    import { LocalFolderImageSyncServiceOptions } from '~/services/sync/LocalFolderImageSyncService';
+    import FolderTextView from '~/components/common/FolderTextView.svelte';
+</script>
+
+<script lang="ts">
+    export let data: LocalFolderImageSyncServiceOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<LocalFolderImageSyncServiceOptions>;
+
+    const topItems = [
+        {
+            id: 'selectFolder',
+            type: 'selectFolder',
+            text: $store.localFolderPath
+        }
+    ];
+
+    async function validateSave() {
+        const result = get(store);
+
+        return !!result.localFolderPath;
+    }
+    async function onSaveError() {
+        showError(lc('missing_export_folder'), { showAsSnack: true });
+    }
+
+    async function onFolderSelect(item, event) {
+        item.text = $store.localFolderPath = event.text;
+        updateItem(item);
+    }
+</script>
+
+<ImageSyncSettings {data} {onSaveError} serviceType="folder_image" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="selectFolder" let:item>
+        <FolderTextView text={item.text} on:folder={(e) => onFolderSelect(item, e)} />
+    </Template>
+</ImageSyncSettings>
diff --git a/app/components/settings/sync/local/FolderPDFSyncSettings.svelte b/app/components/settings/sync/local/FolderPDFSyncSettings.svelte
new file mode 100644
index 000000000..c927e6b20
--- /dev/null
+++ b/app/components/settings/sync/local/FolderPDFSyncSettings.svelte
@@ -0,0 +1,44 @@
+<script context="module" lang="ts">
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { showError } from '@shared/utils/showError';
+    import { Writable, get } from 'svelte/store';
+    import FolderTextView from '~/components/common/FolderTextView.svelte';
+    import PDFSyncSettings from '~/components/settings/sync/PDFSyncSettings.svelte';
+    import { lc } from '~/helpers/locale';
+    import { LocalFolderPDFSyncServiceOptions } from '~/services/sync/LocalFolderPDFSyncService';
+</script>
+
+<script lang="ts">
+    export let data: LocalFolderPDFSyncServiceOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<LocalFolderPDFSyncServiceOptions>;
+
+    const topItems = [
+        {
+            id: 'selectFolder',
+            type: 'selectFolder',
+            text: $store.localFolderPath
+        }
+    ];
+
+    async function validateSave() {
+        const result = get(store);
+
+        return !!result.localFolderPath;
+    }
+    async function onSaveError() {
+        showError(lc('missing_export_folder'), { showAsSnack: true });
+    }
+
+    async function onFolderSelect(item, event) {
+        item.text = $store.localFolderPath = event.text;
+        updateItem(item);
+    }
+</script>
+
+<PDFSyncSettings {data} {onSaveError} serviceType="folder_pdf" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="selectFolder" let:item>
+        <FolderTextView text={item.text} on:folder={(e) => onFolderSelect(item, e)} />
+    </Template>
+</PDFSyncSettings>
diff --git a/app/components/settings/sync/onedrive/OneDriveDataSyncSettings.svelte b/app/components/settings/sync/onedrive/OneDriveDataSyncSettings.svelte
new file mode 100644
index 000000000..975a65b7a
--- /dev/null
+++ b/app/components/settings/sync/onedrive/OneDriveDataSyncSettings.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { lc } from '@nativescript-community/l';
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import DataSyncSettings from '~/components/settings/sync/DataSyncSettings.svelte';
+    import OAuthSettingsView from '~/components/settings/sync/OAuthSettingsView.svelte';
+    import { ONEDRIVE_PROVIDER, testOneDriveConnection } from '~/services/sync/OneDrive';
+    import { OneDriveDataSyncOptions } from '~/services/sync/OneDriveDataSyncService';
+
+    export let data: OneDriveDataSyncOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<OneDriveDataSyncOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('authentication')
+        },
+        {
+            type: 'oauth'
+        }
+    ];
+    let oauthView: OAuthSettingsView;
+
+    async function validateSave() {
+        return oauthView?.validateSave();
+    }
+</script>
+
+<DataSyncSettings {data} serviceType="onedrive_data" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="oauth" let:item>
+        <OAuthSettingsView bind:this={oauthView} provider={ONEDRIVE_PROVIDER} {store} testConnection={testOneDriveConnection} />
+    </Template>
+</DataSyncSettings>
diff --git a/app/components/settings/sync/onedrive/OneDriveImageSyncSettings.svelte b/app/components/settings/sync/onedrive/OneDriveImageSyncSettings.svelte
new file mode 100644
index 000000000..0522aac49
--- /dev/null
+++ b/app/components/settings/sync/onedrive/OneDriveImageSyncSettings.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { lc } from '@nativescript-community/l';
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import ImageSyncSettings from '~/components/settings/sync/ImageSyncSettings.svelte';
+    import OAuthSettingsView from '~/components/settings/sync/OAuthSettingsView.svelte';
+    import { ONEDRIVE_PROVIDER, testOneDriveConnection } from '~/services/sync/OneDrive';
+    import { OneDriveImageSyncServiceOptions } from '~/services/sync/OneDriveImageSyncService';
+
+    export let data: OneDriveImageSyncServiceOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<OneDriveImageSyncServiceOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('authentication')
+        },
+        {
+            type: 'oauth'
+        }
+    ];
+    let oauthView: OAuthSettingsView;
+
+    async function validateSave() {
+        return oauthView?.validateSave();
+    }
+</script>
+
+<ImageSyncSettings {data} serviceType="onedrive_image" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="oauth" let:item>
+        <OAuthSettingsView bind:this={oauthView} provider={ONEDRIVE_PROVIDER} {store} testConnection={testOneDriveConnection} />
+    </Template>
+</ImageSyncSettings>
diff --git a/app/components/settings/sync/onedrive/OneDrivePDFSyncSettings.svelte b/app/components/settings/sync/onedrive/OneDrivePDFSyncSettings.svelte
new file mode 100644
index 000000000..6ce721ce8
--- /dev/null
+++ b/app/components/settings/sync/onedrive/OneDrivePDFSyncSettings.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { lc } from '@nativescript-community/l';
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import OAuthSettingsView from '~/components/settings/sync/OAuthSettingsView.svelte';
+    import PDFSyncSettings from '~/components/settings/sync/PDFSyncSettings.svelte';
+    import { ONEDRIVE_PROVIDER, testOneDriveConnection } from '~/services/sync/OneDrive';
+    import { OneDrivePDFSyncServiceOptions } from '~/services/sync/OneDrivePDFSyncService';
+
+    export let data: OneDrivePDFSyncServiceOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<OneDrivePDFSyncServiceOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('authentication')
+        },
+        {
+            type: 'oauth'
+        }
+    ];
+    let oauthView: OAuthSettingsView;
+
+    async function validateSave() {
+        return oauthView?.validateSave();
+    }
+</script>
+
+<PDFSyncSettings {data} serviceType="onedrive_pdf" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="oauth" let:item>
+        <OAuthSettingsView bind:this={oauthView} provider={ONEDRIVE_PROVIDER} {store} testConnection={testOneDriveConnection} />
+    </Template>
+</PDFSyncSettings>
diff --git a/app/components/settings/sync/utils.ts b/app/components/settings/sync/utils.ts
new file mode 100644
index 000000000..5be0a37a7
--- /dev/null
+++ b/app/components/settings/sync/utils.ts
@@ -0,0 +1,52 @@
+import { SyncTypes } from '~/services/sync/types';
+import type FolderImageSyncSettings__SvelteComponent_ from '~/components/settings/sync/local/FolderImageSyncSettings.svelte';
+import type FolderPDFSyncSettings__SvelteComponent_ from '~/components/settings/sync/local/FolderPDFSyncSettings.svelte';
+import type WebdavImageSyncSettings__SvelteComponent_ from '~/components/settings/sync/webdav/WebdavImageSyncSettings.svelte';
+import type WebdavPDFSyncSettings__SvelteComponent_ from '~/components/settings/sync/webdav/WebdavPDFSyncSettings.svelte';
+import type WebdavDataSyncSettings__SvelteComponent_ from '~/components/settings/sync/webdav/WebdavDataSyncSettings.svelte';
+import type OneDriveDataSyncSettings__SvelteComponent_ from '~/components/settings/sync/onedrive/OneDriveDataSyncSettings.svelte';
+import type OneDrivePDFSyncSettings__SvelteComponent_ from '~/components/settings/sync/onedrive/OneDrivePDFSyncSettings.svelte';
+import type OneDriveImageSyncSettings__SvelteComponent_ from '~/components/settings/sync/onedrive/OneDriveImageSyncSettings.svelte';
+import type GoogleDriveImageSyncSettings__SvelteComponent_ from '~/components/settings/sync/gdrive/GoogleDriveImageSyncSettings.svelte';
+import type GoogleDrivePDFSyncSettings__SvelteComponent_ from '~/components/settings/sync/gdrive/GoogleDrivePDFSyncSettings.svelte';
+import type GoogleDriveDataSyncSettings__SvelteComponent_ from '~/components/settings/sync/gdrive/GoogleDriveDataSyncSettings.svelte';
+
+interface SettingsComponentReturnType {
+        [SyncTypes.folder_image]: typeof FolderImageSyncSettings__SvelteComponent_;
+        [SyncTypes.folder_pdf]: typeof FolderPDFSyncSettings__SvelteComponent_;
+        [SyncTypes.webdav_data]: typeof WebdavDataSyncSettings__SvelteComponent_;
+        [SyncTypes.webdav_image]: typeof WebdavImageSyncSettings__SvelteComponent_;
+        [SyncTypes.webdav_pdf]: typeof WebdavPDFSyncSettings__SvelteComponent_;
+        [SyncTypes.onedrive_data]: typeof OneDriveDataSyncSettings__SvelteComponent_;
+        [SyncTypes.onedrive_image]: typeof OneDriveImageSyncSettings__SvelteComponent_;
+        [SyncTypes.onedrive_pdf]: typeof OneDrivePDFSyncSettings__SvelteComponent_;
+        [SyncTypes.gdrive_data]: typeof GoogleDriveDataSyncSettings__SvelteComponent_;
+        [SyncTypes.gdrive_image]: typeof GoogleDriveImageSyncSettings__SvelteComponent_;
+        [SyncTypes.gdrive_pdf]: typeof GoogleDrivePDFSyncSettings__SvelteComponent_;
+    }
+    async function getSettingsComponent<T extends SyncTypes>(syncType: T): Promise<SettingsComponentReturnType[T]> {
+        switch (syncType) {
+            case SyncTypes.folder_image:
+                return (await import('~/components/settings/sync/local/FolderImageSyncSettings.svelte')).default as any;
+            case 'folder_pdf':
+                return (await import('~/components/settings/sync/local/FolderPDFSyncSettings.svelte')).default;
+            case 'webdav_data':
+                return (await import('~/components/settings/sync/webdav/WebdavDataSyncSettings.svelte')).default;
+            case 'webdav_image':
+                return (await import('~/components/settings/sync/webdav/WebdavImageSyncSettings.svelte')).default;
+            case 'webdav_pdf':
+                return (await import('~/components/settings/sync/webdav/WebdavPDFSyncSettings.svelte')).default;
+            case 'onedrive_data':
+                return (await import('~/components/settings/sync/onedrive/OneDriveDataSyncSettings.svelte')).default;
+            case 'onedrive_image':
+                return (await import('~/components/settings/sync/onedrive/OneDriveImageSyncSettings.svelte')).default;
+            case 'onedrive_pdf':
+                return (await import('~/components/settings/sync/onedrive/OneDrivePDFSyncSettings.svelte')).default;
+            case 'gdrive_data':
+                return (await import('~/components/settings/sync/gdrive/GoogleDriveDataSyncSettings.svelte')).default;
+            case 'gdrive_image':
+                return (await import('~/components/settings/sync/gdrive/GoogleDriveImageSyncSettings.svelte')).default;
+            case 'gdrive_pdf':
+                return (await import('~/components/settings/sync/gdrive/GoogleDrivePDFSyncSettings.svelte')).default;
+        }
+    }
\ No newline at end of file
diff --git a/app/components/settings/sync/webdav/WebdavDataSyncSettings.svelte b/app/components/settings/sync/webdav/WebdavDataSyncSettings.svelte
new file mode 100644
index 000000000..64d15fea9
--- /dev/null
+++ b/app/components/settings/sync/webdav/WebdavDataSyncSettings.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import DataSyncSettings from '~/components/settings/sync/DataSyncSettings.svelte';
+    import WebdavSettingsView from '~/components/settings/sync/webdav/WebdavSettingsView.svelte';
+    import { lc } from '~/helpers/locale';
+    import { WebdavDataSyncOptions } from '~/services/sync/WebdavDataSyncService';
+
+    export let data: WebdavDataSyncOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<WebdavDataSyncOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('webdav_config')
+        },
+        {
+            type: 'webdav'
+        }
+    ];
+    let webdavView: WebdavSettingsView;
+
+    async function validateSave() {
+        return webdavView?.validateSave();
+    }
+</script>
+
+<DataSyncSettings {data} serviceType="webdav_data" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="webdav" let:item>
+        <WebdavSettingsView bind:this={webdavView} {store} />
+    </Template>
+</DataSyncSettings>
diff --git a/app/components/settings/sync/webdav/WebdavImageSyncSettings.svelte b/app/components/settings/sync/webdav/WebdavImageSyncSettings.svelte
new file mode 100644
index 000000000..0e3c5ac50
--- /dev/null
+++ b/app/components/settings/sync/webdav/WebdavImageSyncSettings.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import ImageSyncSettings from '~/components/settings/sync/ImageSyncSettings.svelte';
+    import WebdavSettingsView from '~/components/settings/sync/webdav/WebdavSettingsView.svelte';
+    import { lc } from '~/helpers/locale';
+    import { WebdavImageSyncServiceOptions } from '~/services/sync/WebdavImageSyncService';
+
+    export let data: WebdavImageSyncServiceOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<WebdavImageSyncServiceOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('webdav_config')
+        },
+        {
+            type: 'webdav'
+        }
+    ];
+    let webdavView: WebdavSettingsView;
+
+    async function validateSave() {
+        return webdavView?.validateSave();
+    }
+</script>
+
+<ImageSyncSettings {data} serviceType="webdav_image" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="webdav" let:item>
+        <WebdavSettingsView bind:this={webdavView} {store} />
+    </Template>
+</ImageSyncSettings>
diff --git a/app/components/settings/sync/webdav/WebdavPDFSyncSettings.svelte b/app/components/settings/sync/webdav/WebdavPDFSyncSettings.svelte
new file mode 100644
index 000000000..a5bad8ec0
--- /dev/null
+++ b/app/components/settings/sync/webdav/WebdavPDFSyncSettings.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { Template } from '@nativescript-community/svelte-native/components';
+    import { Writable } from 'svelte/store';
+    import PDFSyncSettings from '~/components/settings/sync/PDFSyncSettings.svelte';
+    import WebdavSettingsView from '~/components/settings/sync/webdav/WebdavSettingsView.svelte';
+    import { lc } from '~/helpers/locale';
+    import { WebdavPDFSyncServiceOptions } from '~/services/sync/WebdavPDFSyncService';
+
+    export let data: WebdavPDFSyncServiceOptions = {} as any;
+
+    let updateItem;
+    let store: Writable<WebdavPDFSyncServiceOptions>;
+
+    const topItems = [
+        {
+            type: 'header',
+            title: lc('webdav_config')
+        },
+        {
+            type: 'webdav'
+        }
+    ];
+    let webdavView: WebdavSettingsView;
+
+    async function validateSave() {
+        return webdavView?.validateSave();
+    }
+</script>
+
+<PDFSyncSettings {data} serviceType="webdav_pdf" {topItems} {validateSave} bind:updateItem bind:store>
+    <Template key="webdav" let:item>
+        <WebdavSettingsView bind:this={webdavView} {store} />
+    </Template>
+</PDFSyncSettings>
diff --git a/app/components/settings/WebdavSettingsView.svelte b/app/components/settings/sync/webdav/WebdavSettingsView.svelte
similarity index 98%
rename from app/components/settings/WebdavSettingsView.svelte
rename to app/components/settings/sync/webdav/WebdavSettingsView.svelte
index 7d1d22fd4..4c7763161 100644
--- a/app/components/settings/WebdavSettingsView.svelte
+++ b/app/components/settings/sync/webdav/WebdavSettingsView.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
+    import { showError } from '@shared/utils/showError';
     import { Writable, get } from 'svelte/store';
     import { lc } from '~/helpers/locale';
     import { WebdavSyncOptions, testWebdavConnection } from '~/services/sync/Webdav';
-    import { showError } from '@shared/utils/showError';
 
+    import { SilentError } from '@akylas/nativescript-app-utils/error';
+    import RemoteFolderTextField from '~/components/common/RemoteFolderTextField.svelte';
     import { showPopoverMenu } from '~/utils/ui';
     import { colors } from '~/variables';
     import { AuthType } from '~/webdav';
-    import RemoteFolderTextField from '../common/RemoteFolderTextField.svelte';
-    import { SilentError } from '@akylas/nativescript-app-utils/error';
 
     $: ({ colorError, colorOnError, colorOnSurfaceVariant, colorSecondary } = $colors);
 
diff --git a/app/i18n/en.json b/app/i18n/en.json
index 825375564..4978648fe 100644
--- a/app/i18n/en.json
+++ b/app/i18n/en.json
@@ -44,7 +44,7 @@
   "aspect_fit": "aspect fit",
   "aspect_ratio": "aspect ratio",
   "authenticate_security": "authenticate to access the application",
-  "authentication": "auth",
+  "authentication": "authentication",
   "auto": "auto",
   "auto_black": "Use true black for auto-dark theme",
   "auto_scan": "discover and add documents automatically",
@@ -469,5 +469,11 @@
   "syncing": "Syncing: %1$s",
   "notification_permission_needed": "notification permission is neded for sync services",
   "select_documents_to_import": "select documents to import pages from",
-  "not_enough_space": "It seems there is not enough space left to take a picture and save it"
+  "not_enough_space": "It seems there is not enough space left to take a picture and save it",
+  "connection_status": "connection status",
+  "data_sync_settings": "data sync settings",
+  "test_connection": "test connection",
+  "authenticated": "authenticated",
+  "not_authenticated": "not authenticated",
+  "missing_remote_folder": "missing remote folder"
 }
diff --git a/app/services/api.ts b/app/services/api.ts
index 034d9a9fa..667a820e7 100644
--- a/app/services/api.ts
+++ b/app/services/api.ts
@@ -3,6 +3,7 @@ import { Application, ApplicationEventData } from '@nativescript/core';
 import { connectionType, getConnectionType, startMonitoring, stopMonitoring } from '@nativescript/core/connectivity';
 import { EventData, Observable } from '@nativescript/core/data/observable';
 import { HTTPError, NoNetworkError, wrapNativeHttpException } from '@akylas/nativescript-app-utils/error';
+import { logRequestAsCurl } from '@shared/utils/curlify';
 
 export type HTTPSOptions = https.HttpsRequestOptions;
 export type { Headers } from '@nativescript-community/https';
@@ -18,6 +19,7 @@ export interface NetworkConnectionStateEventData extends EventData {
 
 export interface HttpRequestOptions extends HTTPSOptions {
     queryParams?: object;
+    destinationFilePath?: string;
 }
 
 export function queryString(params, location) {
@@ -156,19 +158,81 @@ async function handleRequestRetry(requestParams: HttpRequestOptions, retry = 0)
         requestParams
     });
 }
-async function handleRequestResponse<T>(response: https.HttpsResponse<https.HttpsResponseLegacy<T>>, requestParams: HttpRequestOptions, requestStartTime, retry): Promise<T> {
-    const statusCode = response.statusCode;
-    let content: T;
-    try {
-        content = await response.content.toJSONAsync();
-    } catch (err) {
-        console.error(err, err.stack);
+function getRequestHeaders(requestParams?: HttpRequestOptions) {
+    const headers = requestParams?.headers ?? {};
+    if (!headers['Content-Type']) {
+        headers['Content-Type'] = 'application/json';
+    }
+
+    return headers;
+}
+
+export interface RequestResponse<T = any> {
+    response: https.HttpsResponse<https.HttpsResponseLegacy<T>>;
+    requestParams: HttpRequestOptions;
+    requestStartTime: number;
+    retry: number;
+    statusCode: number;
+    json: () => Promise<T>;
+    text: () => Promise<string>;
+    binary: () => Promise<BufferLike>;
+    file: (destinationFilePath: string) => Promise<File>;
+}
+
+export async function request<T = any>(requestParams: HttpRequestOptions, retry = 0): Promise<RequestResponse<T>> {
+    if (!networkService.connected) {
+        throw new NoNetworkError();
+    }
+    if (requestParams.queryParams) {
+        requestParams.url = queryString(requestParams.queryParams, requestParams.url);
+        delete requestParams.queryParams;
+    }
+    requestParams.headers = getRequestHeaders(requestParams);
+
+    const requestStartTime = Date.now();
+    if (__DEV__) {
+        DEV_LOG && console.log(requestParams.url, JSON.stringify(requestParams));
+        // logRequestAsCurl(requestParams.url, requestParams as any);
     }
-    if (!content) {
-        content = (await response.content.toStringAsync()) as any;
+    try {
+        const response = await https.request<T>(requestParams);
+        return {
+            statusCode: response.statusCode,
+            response,
+            requestParams,
+            requestStartTime,
+            retry,
+            json: async () => handleRequestResponse<T>(response, requestParams, 'json'),
+            text: async () => handleRequestResponse(response, requestParams, 'text'),
+            binary: async () => handleRequestResponse(response, requestParams, 'binary'),
+            file: async (destinationFilePath: string) => handleRequestResponse(response, { ...requestParams, destinationFilePath }, 'file')
+        };
+    } catch (error) {
+        throw wrapNativeHttpException(error, requestParams);
     }
-    const isJSON = typeof content === 'object' || Array.isArray(content);
+}
+export type BufferLike = Buffer | ArrayBuffer;
+export type ResponseData<V extends 'binary' | 'text' | 'json' | 'file' = 'json', W = any> = V extends 'file' ? File : V extends 'text' ? string : V extends 'json' ? W : BufferLike;
+
+export async function handleRequestResponse<U = any, V extends 'binary' | 'text' | 'json' | 'file' = 'json'>(
+    response: https.HttpsResponse<https.HttpsResponseLegacy<U>>,
+    httpOptions?: HttpRequestOptions,
+    format?: V
+): Promise<ResponseData<V, U>> {
+    format = format || ('json' as any);
+    const statusCode = response.statusCode;
+
     if (Math.round(statusCode / 100) !== 2) {
+        let content: U;
+        try {
+            content = await response.content.toJSONAsync();
+        } catch (err) {
+            console.error(err, err.stack);
+        }
+        if (!content) {
+            content = (await response.content.toStringAsync()) as any;
+        }
+        const isJSON = typeof content === 'object' || Array.isArray(content);
         let jsonReturn;
         if (isJSON) {
             jsonReturn = content;
@@ -177,7 +241,7 @@ async function handleRequestResponse<T>(response: https.HttpsResponse<https.Http
             throw new HTTPError({
                 statusCode,
                 message: match ? match[1] : content.toString(),
-                requestParams
+                requestParams: httpOptions
             });
         }
         if (jsonReturn) {
@@ -191,36 +255,25 @@ async function handleRequestResponse<T>(response: https.HttpsResponse<https.Http
             throw new HTTPError({
                 statusCode: error.code || statusCode,
                 message: error.error_description || error.form || error.message || error.error || error,
-                requestParams
+                requestParams: httpOptions
             });
         }
     }
-    return content as any as T;
-}
-function getRequestHeaders(requestParams?: HttpRequestOptions) {
-    const headers = requestParams?.headers ?? {};
-    if (!headers['Content-Type']) {
-        headers['Content-Type'] = 'application/json';
-    }
-
-    return headers;
-}
-export async function request<T = any>(requestParams: HttpRequestOptions, retry = 0) {
-    if (!networkService.connected) {
-        throw new NoNetworkError();
-    }
-    if (requestParams.queryParams) {
-        requestParams.url = queryString(requestParams.queryParams, requestParams.url);
-        delete requestParams.queryParams;
-    }
-    requestParams.headers = getRequestHeaders(requestParams);
-
-    const requestStartTime = Date.now();
-    DEV_LOG && console.log('request', requestParams);
-    try {
-        const response = await https.request<T>(requestParams);
-        return handleRequestResponse<T>(response, requestParams, requestStartTime, retry);
-    } catch (error) {
-        throw wrapNativeHttpException(error, requestParams);
+    let body;
+    switch (format) {
+        case 'binary':
+            body = await response.content.toArrayBufferAsync();
+            break;
+        case 'text':
+            body = await response.content.toStringAsync();
+            break;
+        case 'file':
+            body = await response.content.toFile(httpOptions.destinationFilePath);
+            break;
+        case 'json':
+        default:
+            body = await response.content.toJSONAsync();
+            break;
     }
+    return body;
 }
diff --git a/app/services/sync.ts b/app/services/sync.ts
index bb8e1e37a..86c19890b 100644
--- a/app/services/sync.ts
+++ b/app/services/sync.ts
@@ -57,7 +57,13 @@ export const SERVICES_SYNC_TITLES: { [key in SYNC_TYPES]: string } = {
     webdav_pdf: lc('webdav_server'),
     webdav_data: lc('webdav_server'),
     folder_image: lc('local_folder'),
-    folder_pdf: lc('local_folder')
+    folder_pdf: lc('local_folder'),
+    gdrive_image: 'Google Drive',
+    gdrive_pdf: 'Google Drive',
+    gdrive_data: 'Google Drive',
+    onedrive_image: 'OneDrive',
+    onedrive_pdf: 'OneDrive',
+    onedrive_data: 'OneDrive'
 };
 
 export interface SyncStateEventData extends EventData {
diff --git a/app/services/sync/BaseDataSyncService.ts b/app/services/sync/BaseDataSyncService.ts
index 988dcdbb9..dab6b878c 100644
--- a/app/services/sync/BaseDataSyncService.ts
+++ b/app/services/sync/BaseDataSyncService.ts
@@ -1,28 +1,185 @@
-import { Folder } from '@nativescript/core';
-import { DocFolder, OCRDocument } from '~/models/OCRDocument';
-import { FileStat } from '~/webdav';
+import { Folder, path } from '@nativescript/core';
+import { DB_VERSION, DocFolder, OCRDocument, OCRPage, getDocumentsService } from '~/models/OCRDocument';
+import { FileStat, GetFileContentsOptions } from '~/webdav';
 import { BaseSyncService, BaseSyncServiceOptions } from './BaseSyncService';
+import { SilentError } from '@akylas/nativescript-app-utils/error';
+import { lc } from '@nativescript-community/l';
+import { basename } from '~/utils/path';
+import { DOCUMENT_DATA_FILENAME, VALID_MARKER_FILENAME } from '~/utils/constants';
+import { ResponseData, ResponseDataDetailed } from '~/services/sync/interfaces';
 
 export type BaseDataSyncServiceOptions = BaseSyncServiceOptions;
 
 export abstract class BaseDataSyncService extends BaseSyncService {
     allowToRemoveOnRemote: boolean = true;
+
+    remoteFolder = '';
     abstract ensureRemoteFolder(): Promise<void>;
     abstract getRemoteFolderDirectories(folderStr: string): Promise<FileStat[]>;
     abstract sendFolderToRemote(folder: Folder, remotePath: string): Promise<any>;
 
-    abstract removeDocumentFromRemote(remotePath: string): Promise<any>;
-    abstract importFolderFromRemote(remotePath: string, folder: Folder, ignores?: string[]): Promise<any>;
-    abstract addDocumentToRemote(document: OCRDocument): Promise<any>;
-    abstract importDocumentFromRemote(data: FileStat): Promise<{ doc: OCRDocument; folder: DocFolder }>;
     abstract fileExists(filename: string): Promise<boolean>;
     abstract getFileFromRemote(filename: string, document?: OCRDocument): Promise<any>;
     abstract putFileContents(relativePath: string, localFilePath: string, options?): Promise<any>;
     abstract putFileContentsFromData(relativePath: string, data: string, options?): Promise<any>;
     abstract deleteFile(relativePath: string): Promise<any>;
 
-    // Methods for .valid marker file
-    abstract createValidMarker(documentId: string): Promise<void>;
-    abstract hasValidMarker(documentId: string): Promise<boolean>;
-    abstract removeValidMarker(documentId: string): Promise<void>;
+    abstract getFileContents<V extends 'binary' | 'text' | 'file' = 'binary'>(filePath: string, options?: GetFileContentsOptions & { format?: V }): Promise<ResponseData<V>>;
+
+    async importFolderFromRemote(remoteRelativePath: string, folder: Folder, ignores?: string[]) {
+        if (!folder?.path) {
+            throw new Error('importFolderFromRemote missing folder');
+        }
+        DEV_LOG && console.log('importFolderFromRemote', remoteRelativePath, folder.path, ignores);
+        const remoteDocuments = await this.getRemoteFolderDirectories(remoteRelativePath);
+        for (let index = 0; index < remoteDocuments.length; index++) {
+            const remoteDocument = remoteDocuments[index];
+            if (ignores?.indexOf(remoteDocument.basename) >= 0) {
+                continue;
+            }
+            if (remoteDocument.type === 'directory') {
+                await this.importFolderFromRemote(path.join(remoteRelativePath, remoteDocument.basename), folder.getFolder(remoteDocument.basename));
+            } else {
+                await this.getFileContents(path.join(this.remoteFolder, remoteRelativePath, remoteDocument.basename), {
+                    format: 'file',
+                    destinationFilePath: path.join(folder.path, remoteDocument.basename)
+                });
+            }
+        }
+    }
+
+    async importDocumentFromRemote(data: FileStat) {
+        const hasValid = await this.hasValidMarker(data.basename);
+        // for now we ignore hasValidMarker or otherwise we would not "import" legacy documents
+
+        let remoteData: string;
+        try {
+            remoteData = await this.getFileContents(path.join(data.filename, DOCUMENT_DATA_FILENAME), {
+                format: 'text'
+            });
+        } catch (error) {
+            // Has .valid but no data.json - corrupt, skip it
+            DEV_LOG && console.warn('importDocumentFromRemote: corrupt remote document (has .valid but no data.json)', data.basename);
+            return;
+        }
+
+        const dataJSON: OCRDocument & { pages: OCRPage[]; db_version?: number } = JSON.parse(remoteData);
+        const { db_version, folders, pages, ...docProps } = dataJSON;
+        if (db_version > DB_VERSION) {
+            throw new SilentError(lc('document_need_updated_app', docProps.name));
+        }
+        let docId = docProps.id;
+        let pageIds = [];
+        let docDataFolder: Folder;
+        try {
+            DEV_LOG && console.log('importDocumentFromRemote creating document', JSON.stringify(docProps), JSON.stringify(folders));
+            await getDocumentsService().documentRepository.delete({ id: docId } as any);
+            const doc = await getDocumentsService().documentRepository.createDocument({ ...docProps, folders, _synced: 0 });
+            docId = doc.id;
+            docDataFolder = getDocumentsService().dataFolder.getFolder(docId);
+            pages.forEach((page) => {
+                const pageDataFolder = docDataFolder.getFolder(page.id);
+                page.sourceImagePath = path.join(pageDataFolder.path, basename(page.sourceImagePath));
+                page.imagePath = path.join(pageDataFolder.path, basename(page.imagePath));
+            });
+            pageIds = pages.map((p) => p.id);
+            await this.importFolderFromRemote(data.basename, docDataFolder, [DOCUMENT_DATA_FILENAME, VALID_MARKER_FILENAME]);
+            await doc.addPages(pages, true, true);
+
+            let folder: DocFolder;
+            if (folders) {
+                const actualFolders = await Promise.all(folders.map((folderId) => getDocumentsService().folderRepository.get(folderId)));
+                // in this case we only add folders which actually already exists in db. Means they have to be synced before
+                for (let index = 0; index < actualFolders.length; index++) {
+                    folder = actualFolders[index];
+                    doc.setFolder({ folderId: folder.id });
+                }
+            }
+            if (!hasValid) {
+                await this.createValidMarker(doc.id);
+            }
+
+            return { doc, folder };
+        } catch (error) {
+            console.error('error while adding remote doc, let s remove it', docId, pageIds, error, error.stack);
+            // there was an error while creating the doc. remove it so that we can try again later
+            try {
+                // await timeout(1000);
+                if (docId) {
+                    await getDocumentsService().documentRepository.delete({ id: docId } as any);
+                    await Promise.all(pageIds.map((p) => getDocumentsService().pageRepository.delete({ id: p.id } as any)));
+                }
+                if (docDataFolder && Folder.exists(docDataFolder.path)) {
+                    await docDataFolder.remove();
+                }
+            } catch (error2) {
+                console.error('error while removing failed sync documennt', error2, error2.stack);
+            }
+            throw error;
+        }
+    }
+
+    async addDocumentToRemote(document: OCRDocument) {
+        DEV_LOG && console.log('addDocumentToWebdav', this.remoteFolder, document.id, document.pages);
+        const docFolder = getDocumentsService().dataFolder.getFolder(document.id);
+
+        // Remove existing .valid marker if it exists (to mark as invalid during sync)
+        try {
+            await this.removeValidMarker(document.id);
+        } catch (error) {
+            // Ignore errors - folder might not exist yet
+        }
+
+        await this.sendFolderToRemote(docFolder, document.id);
+        await this.putFileContentsFromData(path.join(this.remoteFolder, document.id, DOCUMENT_DATA_FILENAME), document.toString());
+
+        // Create .valid marker after successful sync
+        await this.createValidMarker(document.id);
+
+        // mark the document as synced
+        // DEV_LOG && console.log('addDocumentToWebdav done saving synced state', document.id, document.pages);
+    }
+
+    // .valid marker file methods for safer sync
+    async createValidMarker(documentId: string): Promise<void> {
+        const validPath = path.join(this.remoteFolder, documentId, VALID_MARKER_FILENAME);
+        await this.putFileContentsFromData(validPath, `${__APP_ID__}.${__APP_VERSION__}.${__APP_BUILD_NUMBER__}`, { overwrite: true });
+    }
+
+    async hasValidMarker(documentId: string): Promise<boolean> {
+        const validPath = path.join(documentId, VALID_MARKER_FILENAME);
+        return this.fileExists(validPath);
+    }
+
+    async removeValidMarker(documentId: string): Promise<void> {
+        const validPath = path.join(this.remoteFolder, documentId, VALID_MARKER_FILENAME);
+        try {
+            await this.deleteFile(validPath);
+        } catch (error) {
+            // Ignore if .valid doesn't exist
+            if (error.statusCode !== 404) {
+                throw error;
+            }
+        }
+    }
+    async removeDocumentFromRemote(remoteRelativePath: string) {
+        const remoteDocPath = path.join(this.remoteFolder, remoteRelativePath);
+        DEV_LOG && console.log('removeDocumentFromWebdav', remoteDocPath);
+        return this.deleteFile(remoteDocPath);
+        // const remoteDocuments = (await this.getRemoteFolderDirectories(remotePath)) as FileStat[];
+        // for (let index = 0; index < remoteDocuments.length; index++) {
+        //     const remoteDocument = remoteDocuments[index];
+        //     if (ignores?.indexOf(remoteDocument.basename) >= 0) {
+        //         continue;
+        //     }
+        //     if (remoteDocument.type === 'directory') {
+        //         await this.importFolderFromWebdav(path.join(remotePath, remoteDocument.basename), folder.getFolder(remoteDocument.basename));
+        //     } else {
+        //         await this.client.getFileContents(path.join(remotePath, remoteDocument.basename), {
+        //             format: 'file',
+        //             destinationFilePath: path.join(folder.path, remoteDocument.basename)
+        //         });
+        //     }
+        // }
+    }
 }
diff --git a/app/services/sync/BasePDFSyncService.ts b/app/services/sync/BasePDFSyncService.ts
index b8bccb8fa..baab074fa 100644
--- a/app/services/sync/BasePDFSyncService.ts
+++ b/app/services/sync/BasePDFSyncService.ts
@@ -11,6 +11,7 @@ export interface BasePDFSyncServiceOptions extends BaseSyncServiceOptions {
     OCREnabled?: boolean;
     OCRDataType?: string;
     OCRLanguages?: string[];
+    useDocumentName?: boolean;
 
     useFoldersStructure?: boolean;
 }
diff --git a/app/services/sync/CLOUD_SYNC_README.md b/app/services/sync/CLOUD_SYNC_README.md
new file mode 100644
index 000000000..41db73921
--- /dev/null
+++ b/app/services/sync/CLOUD_SYNC_README.md
@@ -0,0 +1,152 @@
+# Google Drive and OneDrive Sync Services
+
+## Overview
+
+This implementation adds Google Drive and OneDrive as sync service providers for the Document Scanner app. The implementation uses OAuth 2.0 authentication with PKCE through an in-app browser modal for security.
+
+## Important: OAuth Configuration Required
+
+**Before these services can be used, you must configure OAuth credentials:**
+
+### Google Drive Setup
+
+1. Go to [Google Cloud Console](https://console.cloud.google.com/)
+2. Create a new project or select an existing one
+3. Enable the Google Drive API
+4. Create OAuth 2.0 credentials (type: Android/iOS app)
+5. Add the redirect URI: `com.akylas.documentscanner.oauth:/oauth2redirect`
+6. Update the `clientId` in `app/services/sync/GoogleDrive.ts`:
+   ```typescript
+   clientId: 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com',
+   ```
+
+### OneDrive Setup
+
+1. Go to [Azure Portal](https://portal.azure.com/)
+2. Register a new application in Azure AD
+3. Add a redirect URI: `com.akylas.documentscanner.oauth:/oauth2redirect`
+4. Grant permissions: `Files.ReadWrite`, `offline_access`
+5. Update the `clientId` in `app/services/sync/OneDrive.ts`:
+   ```typescript
+   clientId: 'YOUR_ONEDRIVE_CLIENT_ID',
+   ```
+
+## Architecture
+
+The implementation follows the existing sync service pattern:
+
+- **Base OAuth Helper** (`OAuthHelper.ts`): Handles OAuth 2.0 flows with PKCE
+- **Provider APIs** (`GoogleDrive.ts`, `OneDrive.ts`): API wrappers for each cloud service
+- **Sync Services**: Three sync services per provider (Data, Image, PDF)
+  - Data: Syncs document metadata and structure
+  - Image: Syncs document images
+  - PDF: Syncs exported PDFs
+
+## Features
+
+- ✅ OAuth 2.0 with PKCE for security
+- ✅ Token refresh handling
+- ✅ In-app browser authentication
+- ✅ TypeScript only with minimal dependencies
+- ✅ Follows existing sync service patterns
+- ✅ Supports folder structures
+- ✅ .valid marker for safe sync
+
+## Known Limitations
+
+1. **OAuth Credentials**: Users must configure their own OAuth credentials (cannot be bundled in open-source app)
+2. **Large File Uploads**: Current implementation uses simple upload (< 4MB for OneDrive). For larger files, implement resumable uploads.
+3. **Rate Limiting**: No rate limiting or retry logic implemented yet
+4. **Batch Operations**: Files are uploaded/downloaded sequentially. Could be optimized with batch operations.
+5. **Offline Support**: Limited offline support - requires network connection
+
+## Usage
+
+### Configuring a Google Drive Sync Service
+
+1. Go to Settings > Sync
+2. Tap "Add Sync Service"
+3. Select "Google Drive"
+4. Choose sync type (Data, Image, or PDF)
+5. Tap "Authenticate" to log in with Google
+6. Configure remote folder path
+7. Enable auto-sync if desired
+
+### Configuring a OneDrive Sync Service
+
+Same process as Google Drive, but select "OneDrive" instead.
+
+## Testing
+
+Before deploying to production, thoroughly test:
+
+1. Authentication flow on both Android and iOS
+2. File uploads and downloads
+3. Folder creation and navigation
+4. Token refresh after expiration
+5. Error handling for network issues
+6. Sync with multiple documents
+7. Conflict resolution
+
+## Security Considerations
+
+1. **OAuth Tokens**: Stored in ApplicationSettings (encrypted on iOS, less secure on Android)
+2. **PKCE**: Implemented for additional security
+3. **Token Refresh**: Automatic refresh before expiration
+4. **Redirect URI**: Must match exactly in OAuth configuration
+
+## Future Improvements
+
+- [ ] Implement resumable uploads for large files
+- [ ] Add rate limiting and exponential backoff
+- [ ] Implement batch operations for better performance
+- [ ] Add conflict resolution UI
+- [ ] Support shared folders
+- [ ] Add quota monitoring
+- [ ] Implement offline queue for sync operations
+- [ ] Add sync progress indicators per file
+- [ ] Support for other cloud providers (Dropbox, Box, etc.)
+
+## Dependencies
+
+Uses only existing dependencies:
+- `@akylas/nativescript-inappbrowser`: For OAuth flow
+- `@nativescript-community/https`: For API requests
+- NativeScript core modules
+
+## Troubleshooting
+
+### Authentication Fails
+
+- Verify OAuth credentials are correctly configured
+- Check redirect URI matches exactly
+- Ensure API permissions are granted
+- Check network connectivity
+
+### Files Not Syncing
+
+- Check token expiration and refresh
+- Verify remote folder exists
+- Check file permissions
+- Review logs for API errors
+
+### Token Expired
+
+Tokens automatically refresh if refresh token is available. If refresh fails:
+- Re-authenticate from settings
+- Check OAuth credentials validity
+
+## Contributing
+
+When extending these sync services:
+
+1. Follow the existing pattern from WebDAV services
+2. Implement all abstract methods from base classes
+3. Add proper error handling
+4. Include DEV_LOG statements for debugging
+5. Update this README with any changes
+6. Test thoroughly on both platforms
+
+## License
+
+Same as the main project (MIT License)
diff --git a/app/services/sync/GoogleDrive.ts b/app/services/sync/GoogleDrive.ts
new file mode 100644
index 000000000..23f792794
--- /dev/null
+++ b/app/services/sync/GoogleDrive.ts
@@ -0,0 +1,213 @@
+import { File } from '@nativescript/core';
+import { HttpRequestOptions, request } from '~/services/api';
+import { BufferLike } from '~/services/sync/interfaces';
+import { GetFileContentsOptions, ResponseData } from '~/webdav';
+import { OAuthProvider, OAuthTokens, isTokenExpired, refreshAccessToken } from './OAuthHelper';
+
+/**
+ * Google Drive API configuration
+ */
+export const GOOGLE_DRIVE_PROVIDER: OAuthProvider = {
+    name: 'Google Drive',
+    config: {
+        authUrl: 'https://accounts.google.com/o/oauth2/v2/auth',
+        tokenUrl: 'https://oauth2.googleapis.com/token',
+        // This is a placeholder client ID - users should configure their own
+        clientId: GOOGLE_OAUTH_CLIENT_ID,
+        clientSecret: GOOGLE_OAUTH_CLIENT_SECRET,
+        redirectUri: 'http://localhost/oauth2redirect',
+        scope: 'https://www.googleapis.com/auth/drive.file',
+        responseType: 'code'
+    }
+};
+
+export interface GoogleDriveSyncOptions {
+    remoteFolder?: string;
+    accessToken?: string;
+    refreshToken?: string;
+    expiresAt?: number;
+}
+
+/**
+ * Google Drive file metadata
+ */
+export interface GoogleDriveFile {
+    id: string;
+    name: string;
+    mimeType: string;
+    size?: number;
+    modifiedTime?: string;
+    parents?: string[];
+}
+
+/**
+ * Make an authenticated request to Google Drive API
+ */
+export async function makeGoogleDriveRequest<T = any>(
+    tokens: OAuthTokens,
+    endpoint: string,
+    options: {
+        method?: string;
+        body?: any;
+        headers?: Record<string, string>;
+    } = {}
+) {
+    const { body, headers = {}, method = 'GET' } = options;
+
+    // Check if token needs refresh
+    // DEV_LOG && console.log('expiresAt', tokens.expiresAt, isTokenExpired(tokens.expiresAt), tokens.refreshToken);
+    if (isTokenExpired(tokens.expiresAt) && tokens.refreshToken) {
+        const newTokens = await refreshAccessToken(GOOGLE_DRIVE_PROVIDER, tokens.refreshToken);
+        Object.assign(tokens, newTokens);
+    }
+
+    const url = endpoint.startsWith('http') ? endpoint : `https://www.googleapis.com/drive/v3${endpoint}`;
+    const requestOptions = {
+        url,
+        method,
+        headers: {
+            Authorization: `Bearer ${tokens.accessToken}`,
+            ...headers
+        },
+        responseOnMainThread: false,
+        body
+    } as HttpRequestOptions;
+    return request<T>(requestOptions);
+}
+
+/**
+ * Get or create a folder by name
+ */
+export async function getOrCreateFolder(tokens: OAuthTokens, folderName: string, parentId: string = 'root'): Promise<string> {
+    // Search for existing folder
+    const searchQuery = `name='${folderName}' and '${parentId}' in parents and mimeType='application/vnd.google-apps.folder' and trashed=false`;
+    const searchResponse = await getGoogleDriveRequestContents<{ files: GoogleDriveFile[] }>(tokens, `/files?q=${encodeURIComponent(searchQuery)}&fields=files(id,name)`);
+
+    if (searchResponse.files && searchResponse.files.length > 0) {
+        return searchResponse.files[0].id;
+    }
+
+    // Create folder if not found
+    const createResponse = await getGoogleDriveRequestContents<GoogleDriveFile>(tokens, '/files', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            name: folderName,
+            mimeType: 'application/vnd.google-apps.folder',
+            parents: [parentId]
+        })
+    });
+
+    return createResponse.id;
+}
+
+/**
+ * List files in a folder
+ */
+export async function listFiles(tokens: OAuthTokens, folderId: string): Promise<GoogleDriveFile[]> {
+    const query = `'${folderId}' in parents and trashed=false`;
+    const response = await getGoogleDriveRequestContents<{ files: GoogleDriveFile[] }>(tokens, `/files?q=${encodeURIComponent(query)}&fields=files(id,name,mimeType,size,modifiedTime,parents)`);
+
+    return response.files || [];
+}
+
+/**
+ * Upload a file to Google Drive
+ */
+export async function uploadFile(tokens: OAuthTokens, fileName: string, content: string | BufferLike | File, mimeType: string, parentId: string): Promise<string> {
+    // Create file metadata
+    const metadata = {
+        name: fileName,
+        parents: [parentId]
+    };
+
+    const response = await getGoogleDriveRequestContents<GoogleDriveFile>(tokens, 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
+        method: 'POST',
+        headers: {
+            'Content-Type': `multipart/form-data`
+        },
+        body: [
+            {
+                parameterName: 'metadata',
+                contentType: 'application/json; charset=UTF-8',
+                fileName,
+                data: JSON.stringify(metadata)
+            },
+            {
+                parameterName: 'file',
+                contentType: mimeType,
+                fileName,
+                data: content
+            }
+        ]
+    });
+
+    return response.id;
+}
+
+export async function getGoogleDriveRequestContents<U = any, V extends 'binary' | 'text' | 'json' | 'file' = 'json'>(
+    tokens: OAuthTokens,
+    fileId: string,
+    httpOptions?: {
+        method?: string;
+        body?: any;
+        headers?: Record<string, string>;
+    },
+    options: GetFileContentsOptions & { format?: V } = {}
+) {
+    const { format = 'json' } = options;
+    const response = await makeGoogleDriveRequest(tokens, fileId, httpOptions);
+    switch (format) {
+        case 'binary':
+            return response.binary();
+        case 'text':
+            return response.text();
+        case 'file':
+            return response.file(options.destinationFilePath);
+        case 'json':
+        default:
+            return response.json();
+    }
+}
+/**
+ * Download file content
+ */
+export async function downloadFile<U = any, V extends 'binary' | 'text' | 'json' | 'file' = 'json'>(
+    tokens: OAuthTokens,
+    fileId: string,
+    options: GetFileContentsOptions & { format?: V } = {}
+): Promise<ResponseData<V, U>> {
+    return getGoogleDriveRequestContents<U, V>(tokens, `/files/${fileId}?alt=media`, undefined, options);
+}
+
+/**
+ * Delete a file
+ */
+export async function deleteFile(tokens: OAuthTokens, fileId: string): Promise<void> {
+    await makeGoogleDriveRequest(tokens, `/files/${fileId}`, { method: 'DELETE' });
+}
+
+/**
+ * Check if a file exists
+ */
+export async function fileExists(tokens: OAuthTokens, fileName: string, parentId: string): Promise<boolean> {
+    const query = `name='${fileName}' and '${parentId}' in parents and trashed=false`;
+    const response = await getGoogleDriveRequestContents<{ files: GoogleDriveFile[] }>(tokens, `/files?q=${encodeURIComponent(query)}&fields=files(id)`);
+
+    return response.files && response.files.length > 0;
+}
+
+/**
+ * Test Google Drive connection
+ */
+export async function testGoogleDriveConnection(tokens: OAuthTokens): Promise<boolean> {
+    try {
+        await makeGoogleDriveRequest(tokens, '/about?fields=user');
+        return true;
+    } catch (error) {
+        DEV_LOG && console.error('Google Drive connection test failed:', error);
+        return false;
+    }
+}
diff --git a/app/services/sync/GoogleDriveDataSyncService.ts b/app/services/sync/GoogleDriveDataSyncService.ts
new file mode 100644
index 000000000..8cd87004c
--- /dev/null
+++ b/app/services/sync/GoogleDriveDataSyncService.ts
@@ -0,0 +1,211 @@
+import { File, Folder, path } from '@nativescript/core';
+import { type OCRDocument } from '~/models/OCRDocument';
+import { networkService } from '~/services/api';
+import { DocumentEvents } from '~/services/documents';
+import { BaseDataSyncService, BaseDataSyncServiceOptions } from '~/services/sync/BaseDataSyncService';
+import { SERVICES_SYNC_MASK } from '~/services/sync/types';
+import { basename } from '~/utils/path';
+import { FileStat, GetFileContentsOptions, ResponseData } from '~/webdav';
+import { GoogleDriveSyncOptions, deleteFile, downloadFile, getGoogleDriveRequestContents, getOrCreateFolder, listFiles, uploadFile } from './GoogleDrive';
+import { OAuthTokens } from './OAuthHelper';
+
+export interface GoogleDriveDataSyncOptions extends BaseDataSyncServiceOptions, GoogleDriveSyncOptions {}
+
+export class GoogleDriveDataSyncService extends BaseDataSyncService {
+    shouldSync(force?: boolean, event?: DocumentEvents) {
+        return (force || (event && this.autoSync)) && networkService.connected;
+    }
+    static type = 'gdrive_data';
+    type = GoogleDriveDataSyncService.type;
+    syncMask = SERVICES_SYNC_MASK[GoogleDriveDataSyncService.type];
+    remoteFolder: string;
+    remoteFolderId: string; // Google Drive folder ID
+    accessToken: string;
+    refreshToken: string;
+    expiresAt: number;
+
+    private get tokens(): OAuthTokens {
+        return {
+            accessToken: this.accessToken,
+            refreshToken: this.refreshToken,
+            expiresAt: this.expiresAt
+        };
+    }
+
+    stop() {}
+
+    static start(config?: { id: number; [k: string]: any }) {
+        if (config) {
+            const service = GoogleDriveDataSyncService.getOrCreateInstance();
+            Object.assign(service, config);
+            // DEV_LOG && console.log('GoogleDriveDataSyncService', 'start', JSON.stringify(config), service.autoSync);
+            return service;
+        }
+    }
+
+    override async ensureRemoteFolder() {
+        // DEV_LOG && console.log('ensureRemoteFolder', this.remoteFolder);
+        if (!this.remoteFolderId) {
+            this.remoteFolderId = await getOrCreateFolder(this.tokens, this.remoteFolder || 'DocumentScanner');
+        }
+    }
+
+    override async getRemoteFolderDirectories(relativePath: string): Promise<FileStat[]> {
+        const items = await this.getFiles(relativePath);
+
+        // Convert Google Drive items to FileStat format
+        return items.map(
+            (item) =>
+                ({
+                    filename: path.join(relativePath || '', item.name),
+                    basename: item.name,
+                    lastmod: item.modifiedTime || new Date().toISOString(),
+                    size: parseInt((item.size || 0) + '', 10),
+                    type: item.mimeType === 'application/vnd.google-apps.folder' ? 'directory' : 'file',
+                    mime: item.mimeType
+                }) as FileStat
+        );
+    }
+
+    async createDirectory(remotePath: string, recursive = true) {
+        const pathParts = remotePath.split('/').filter((p) => p);
+        if (pathParts[0] === this.remoteFolder) {
+            pathParts.shift();
+        }
+        let targetFolderId = this.remoteFolderId;
+
+        for (const part of pathParts) {
+            const files = await listFiles(this.tokens, targetFolderId);
+            const folderItem = files.find((f) => f.name === part && f.mimeType === 'application/vnd.google-apps.folder');
+
+            if (!folderItem) {
+                // Create folder
+                const folderId = await getOrCreateFolder(this.tokens, part, targetFolderId);
+                targetFolderId = folderId;
+            } else {
+                targetFolderId = folderItem.id;
+            }
+        }
+        return targetFolderId;
+    }
+
+    override async sendFolderToRemote(folder: Folder, remoteRelativePath: string) {
+        // DEV_LOG && console.log('sendFolderToGDrive', folder.path, remoteRelativePath);
+
+        // Get or create the target folder
+        let targetFolderId = this.remoteFolderId;
+
+        targetFolderId = await this.createDirectory(remoteRelativePath, false);
+
+        // Upload files
+        const entities = await folder.getEntities();
+        for (let index = 0; index < entities.length; index++) {
+            const entity = entities[index];
+            // DEV_LOG && console.log('sendFolderToGDrive entity', entity.name, entity.path);
+            if (entity instanceof File) {
+                await uploadFile(this.tokens, entity.name, entity, 'application/octet-stream', targetFolderId);
+            } else {
+                // Recursively upload subdirectory
+                await this.sendFolderToRemote(Folder.fromPath(entity.path), path.join(remoteRelativePath, entity.name));
+            }
+        }
+    }
+
+    override async fileExists(filename: string) {
+        // const parts = filename.split('/').filter((p) => p);
+        // const fileName = parts.pop();
+
+        // let folderId = this.remoteFolderId;
+        // // Navigate to parent folder
+        // for (const part of parts) {
+        //     const files = await listFiles(this.tokens, folderId);
+        //     const folder = files.find((f) => f.name === part && f.mimeType === 'application/vnd.google-apps.folder');
+        //     if (!folder) {
+        //         return false;
+        //     }
+        //     folderId = folder.id;
+        // }
+        return (await this.getFileId(filename)) !== undefined;
+    }
+
+    override async getFileFromRemote(filename: string, document?: OCRDocument) {
+        const remoteDocPath = document ? path.join(this.remoteFolder, document.id) : this.remoteFolder;
+        const fullPath = path.join(remoteDocPath, filename);
+
+        const fileId = await this.getFileId(fullPath);
+        if (!fileId) {
+            throw new Error(`File not found: ${fullPath}`);
+        }
+
+        const result = await downloadFile(this.tokens, fileId, { format: 'text' });
+        // DEV_LOG && console.log('getFileFromRemote', result);
+        return result;
+    }
+
+    override async putFileContents(relativePath: string, localFilePath: string, options?) {
+        const folderId = await this.createDirectory(relativePath, true);
+        const file = File.fromPath(localFilePath);
+        // const content = await File.fromPath(localFilePath).readText();
+        await uploadFile(this.tokens, file.name, file, 'application/octet-stream', folderId);
+        // return this.putFileContentsFromData(relativePath, content, options);
+    }
+
+    override async putFileContentsFromData(relativePath: string, data: string, options?) {
+        const parts = relativePath.split('/').filter((p) => p);
+        const fileName = parts.pop();
+
+        const parentPath = parts.join('/');
+        const folderId = await this.createDirectory(parentPath, true);
+        // DEV_LOG && console.log('putFileContentsFromData', relativePath, folderId, data);
+        await uploadFile(this.tokens, fileName, data, 'application/octet-stream', folderId);
+    }
+
+    async getFiles(relativePath: string) {
+        let folderId = this.remoteFolderId;
+        if (relativePath) {
+            // Navigate to subdirectory
+            const parts = relativePath.split('/').filter((p) => p);
+            if (parts[0] === this.remoteFolder) {
+                parts.shift();
+            }
+            for (const part of parts) {
+                const files = await listFiles(this.tokens, folderId);
+                const folder = files.find((f) => f.name === part && f.mimeType === 'application/vnd.google-apps.folder');
+                if (folder) {
+                    folderId = folder.id;
+                } else {
+                    // Folder doesn't exist
+                    return [];
+                }
+            }
+        }
+
+        return listFiles(this.tokens, folderId);
+    }
+    async getFileId(relativePath: string) {
+        const parts = relativePath.split('/').filter((p) => p);
+        const fileName = parts.pop();
+
+        const parentPath = parts.join('/');
+
+        const files = await this.getFiles(parentPath);
+        const file = files.find((f) => f.name === fileName);
+        // DEV_LOG && console.log('getFileId', relativePath, files, file);
+        return file?.id;
+    }
+
+    override async deleteFile(relativePath: string) {
+        const fileId = await this.getFileId(relativePath);
+        if (fileId) {
+            return deleteFile(this.tokens, fileId);
+        }
+    }
+
+    override async getFileContents<V extends 'binary' | 'text' | 'file' | 'json' = 'json'>(filePath: string, options?: GetFileContentsOptions & { format?: V }): Promise<ResponseData<V>> {
+        const fileId = await this.getFileId(filePath);
+        if (fileId) {
+            return getGoogleDriveRequestContents(this.tokens, fileId, undefined, options);
+        }
+        throw new Error(`file not found: ${filePath}`);
+    }
+}
diff --git a/app/services/sync/GoogleDriveImageSyncService.ts b/app/services/sync/GoogleDriveImageSyncService.ts
new file mode 100644
index 000000000..b567cb51e
--- /dev/null
+++ b/app/services/sync/GoogleDriveImageSyncService.ts
@@ -0,0 +1,113 @@
+import { File, ImageSource, knownFolders, path } from '@nativescript/core';
+import { saveImage } from '~/utils/utils';
+import { FileStat } from '~/webdav';
+import { networkService } from '../api';
+import { DocumentEvents } from '../documents';
+import { BaseImageSyncService, BaseImageSyncServiceOptions } from './BaseImageSyncService';
+import { SERVICES_SYNC_MASK } from './types';
+import type { DocFolder } from '~/models/OCRDocument';
+import { GoogleDriveSyncOptions, getOrCreateFolder, listFiles, uploadFile } from './GoogleDrive';
+import { OAuthTokens } from './OAuthHelper';
+
+export interface GoogleDriveImageSyncServiceOptions extends BaseImageSyncServiceOptions, GoogleDriveSyncOptions {}
+
+export class GoogleDriveImageSyncService extends BaseImageSyncService {
+    shouldSync(force?: boolean, event?: DocumentEvents) {
+        return (force || (event && this.autoSync)) && networkService.connected;
+    }
+    static type = 'gdrive_image';
+    type = GoogleDriveImageSyncService.type;
+    syncMask = SERVICES_SYNC_MASK[GoogleDriveImageSyncService.type];
+    remoteFolder: string;
+    remoteFolderId: string;
+    accessToken: string;
+    refreshToken: string;
+    expiresAt: number;
+
+    private get tokens(): OAuthTokens {
+        return {
+            accessToken: this.accessToken,
+            refreshToken: this.refreshToken,
+            expiresAt: this.expiresAt
+        };
+    }
+
+    static start(config?: { id: number; [k: string]: any }) {
+        if (config) {
+            const service = GoogleDriveImageSyncService.getOrCreateInstance();
+            Object.assign(service, config);
+            // DEV_LOG && console.log('GoogleDriveImageSyncService', 'start', JSON.stringify(config), service.autoSync);
+            return service;
+        }
+    }
+
+    override stop() {}
+
+    override async ensureRemoteFolder(remoteFolder = this.remoteFolder) {
+        if (!this.remoteFolderId) {
+            this.remoteFolderId = await getOrCreateFolder(this.tokens, remoteFolder || 'DocumentScanner');
+        } else if (remoteFolder !== this.remoteFolder) {
+            // Navigate to or create subfolder
+            await getOrCreateFolder(this.tokens, remoteFolder, this.remoteFolderId);
+        }
+    }
+
+    override async getRemoteFolderFiles(relativePath: string): Promise<FileStat[]> {
+        let folderId = this.remoteFolderId;
+
+        if (relativePath) {
+            const parts = relativePath.split('/').filter((p) => p);
+            for (const part of parts) {
+                const files = await listFiles(this.tokens, folderId);
+                const folder = files.find((f) => f.name === part && f.mimeType === 'application/vnd.google-apps.folder');
+                if (!folder) {
+                    return [];
+                }
+                folderId = folder.id;
+            }
+        }
+
+        const items = await listFiles(this.tokens, folderId);
+
+        return items
+            .filter((item) => item.mimeType !== 'application/vnd.google-apps.folder')
+            .map((item) => ({
+                filename: path.join(relativePath || '', item.name),
+                basename: item.name,
+                lastmod: item.modifiedTime || new Date().toISOString(),
+                size: parseInt((item.size || 0) + '', 10),
+                type: 'file' as const,
+                mime: item.mimeType
+            }));
+    }
+
+    override async writeImage(imageSource: ImageSource, fileName: string, imageFormat: 'png' | 'jpeg' | 'jpg', imageQuality: number, overwrite: boolean, docFolder?: DocFolder) {
+        const temp = knownFolders.temp().path;
+        await saveImage(imageSource, {
+            exportDirectory: temp,
+            fileName,
+            imageFormat,
+            imageQuality,
+            overwrite
+        });
+        const localFilePath = path.join(temp, fileName);
+
+        let targetFolderId = this.remoteFolderId;
+        if (docFolder) {
+            targetFolderId = await getOrCreateFolder(this.tokens, docFolder.name, this.remoteFolderId);
+        }
+
+        const file = File.fromPath(localFilePath);
+        const mimeType = imageFormat === 'png' ? 'image/png' : 'image/jpeg';
+        // DEV_LOG && console.warn('writeImage', fileName, localFilePath, File.exists(localFilePath));
+
+        await uploadFile(this.tokens, fileName, file, mimeType, targetFolderId);
+
+        // Clean up temp file
+        try {
+            file.remove();
+        } catch (e) {
+            // Ignore cleanup errors
+        }
+    }
+}
diff --git a/app/services/sync/GoogleDrivePDFSyncService.ts b/app/services/sync/GoogleDrivePDFSyncService.ts
new file mode 100644
index 000000000..795f359ab
--- /dev/null
+++ b/app/services/sync/GoogleDrivePDFSyncService.ts
@@ -0,0 +1,124 @@
+import { File, Screen, knownFolders, path } from '@nativescript/core';
+import { wrapNativeException } from '@nativescript/core/utils';
+import { generatePDFASync } from 'plugin-nativeprocessor';
+import type { DocFolder, OCRDocument } from '~/models/OCRDocument';
+import PDFExportCanvas from '~/services/pdf/PDFExportCanvas';
+import { PDF_EXT } from '~/utils/constants';
+import { getPageColorMatrix } from '~/utils/matrix';
+import { FileStat } from '~/webdav';
+import { networkService } from '../api';
+import { DocumentEvents } from '../documents';
+import { BasePDFSyncService, BasePDFSyncServiceOptions } from './BasePDFSyncService';
+import { GoogleDriveSyncOptions, getOrCreateFolder, listFiles, uploadFile } from './GoogleDrive';
+import { OAuthTokens } from './OAuthHelper';
+import { SERVICES_SYNC_MASK } from './types';
+
+export interface GoogleDrivePDFSyncServiceOptions extends BasePDFSyncServiceOptions, GoogleDriveSyncOptions {}
+
+export class GoogleDrivePDFSyncService extends BasePDFSyncService {
+    shouldSync(force?: boolean, event?: DocumentEvents) {
+        return (force || (event && this.autoSync)) && networkService.connected;
+    }
+    static type = 'gdrive_pdf';
+    type = GoogleDrivePDFSyncService.type;
+    syncMask = SERVICES_SYNC_MASK[GoogleDrivePDFSyncService.type];
+    remoteFolder: string;
+    remoteFolderId: string;
+    accessToken: string;
+    refreshToken: string;
+    expiresAt: number;
+
+    private get tokens(): OAuthTokens {
+        return {
+            accessToken: this.accessToken,
+            refreshToken: this.refreshToken,
+            expiresAt: this.expiresAt
+        };
+    }
+
+    static start(config?: { id: number; [k: string]: any }) {
+        if (config) {
+            const service = GoogleDrivePDFSyncService.getOrCreateInstance();
+            Object.assign(service, config);
+            // DEV_LOG && console.log('GoogleDrivePDFSyncService', 'start', JSON.stringify(config), service.autoSync);
+            return service;
+        }
+    }
+
+    override stop() {}
+
+    override async ensureRemoteFolder(remoteFolder = this.remoteFolder) {
+        if (!this.remoteFolderId) {
+            this.remoteFolderId = await getOrCreateFolder(this.tokens, remoteFolder || 'DocumentScanner');
+        } else if (remoteFolder !== this.remoteFolder) {
+            await getOrCreateFolder(this.tokens, remoteFolder, this.remoteFolderId);
+        }
+    }
+
+    override async getRemoteFolderFiles(relativePath: string): Promise<FileStat[]> {
+        let folderId = this.remoteFolderId;
+
+        if (relativePath) {
+            const parts = relativePath.split('/').filter((p) => p);
+            for (const part of parts) {
+                const files = await listFiles(this.tokens, folderId);
+                const folder = files.find((f) => f.name === part && f.mimeType === 'application/vnd.google-apps.folder');
+                if (!folder) {
+                    return [];
+                }
+                folderId = folder.id;
+            }
+        }
+
+        const items = await listFiles(this.tokens, folderId);
+
+        return items
+            .filter((item) => item.mimeType === 'application/pdf' || item.name.endsWith('.pdf'))
+            .map((item) => ({
+                filename: path.join(relativePath || '', item.name),
+                basename: item.name,
+                lastmod: item.modifiedTime || new Date().toISOString(),
+                size: parseInt((item.size || 0) + '', 10),
+                type: 'file' as const,
+                mime: 'application/pdf'
+            }));
+    }
+
+    override async writePDF(document: OCRDocument, fileName: string, docFolder?: DocFolder) {
+        const pages = document.pages;
+        if (!pages || pages.length === 0) {
+            return;
+        }
+        if (!fileName.endsWith(PDF_EXT)) {
+            fileName += PDF_EXT;
+        }
+        const temp = knownFolders.temp().path;
+
+        if (__ANDROID__) {
+            const exportOptions = this.exportOptions;
+            const black_white = exportOptions.color === 'black_white';
+            const options = JSON.stringify({
+                overwrite: true,
+                // page_padding: Utils.layout.toDevicePixels(pdfCanvas.options.page_padding),
+                text_scale: Screen.mainScreen.scale * 1.4,
+                pages: pages.map((p) => ({ ...p, colorMatrix: getPageColorMatrix(p, black_white ? 'grayscale' : undefined) })),
+                ...exportOptions
+            });
+            await generatePDFASync(temp, fileName, options, wrapNativeException);
+        } else {
+            const exporter = new PDFExportCanvas();
+            await exporter.export({ pages: pages.map((page) => ({ page, document })), folder: temp, filename: fileName, compress: true, options: this.exportOptions });
+        }
+        const localFilePath = path.join(temp, fileName);
+        // let destinationPath = this.remoteFolder;
+        // if (docFolder) {
+        //     destinationPath = path.join(destinationPath, docFolder.name);
+        //     await this.ensureRemoteFolder(destinationPath);
+        // }
+        let targetFolderId = this.remoteFolderId;
+        if (docFolder) {
+            targetFolderId = await getOrCreateFolder(this.tokens, docFolder.name, this.remoteFolderId);
+        }
+        await uploadFile(this.tokens, fileName, File.fromPath(localFilePath), 'application/pdf', targetFolderId);
+    }
+}
diff --git a/app/services/sync/OAuthHelper.ts b/app/services/sync/OAuthHelper.ts
new file mode 100644
index 000000000..0d0b99df1
--- /dev/null
+++ b/app/services/sync/OAuthHelper.ts
@@ -0,0 +1,173 @@
+import { ApplicationSettings } from '@nativescript/core';
+import { request } from '~/services/api';
+
+export interface OAuthConfig {
+    authUrl: string;
+    tokenUrl: string;
+    clientId: string;
+    clientSecret?: string;
+    redirectUri: string;
+    scope: string;
+    prompt?: string;
+    responseType?: string;
+}
+
+export interface OAuthTokens {
+    accessToken: string;
+    refreshToken?: string;
+    expiresAt?: number;
+    tokenType?: string;
+}
+
+export interface OAuthProvider {
+    name: string;
+    config: OAuthConfig;
+}
+
+/**
+ * Exchanges authorization code for access and refresh tokens
+ */
+export async function exchangeCodeForTokens(provider: OAuthProvider, code: string, codeVerifier: string): Promise<OAuthTokens> {
+    const { clientId, clientSecret, redirectUri, tokenUrl } = provider.config;
+
+    const data = await (
+        await request({
+            url: tokenUrl,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body: {
+                grant_type: 'authorization_code',
+                code,
+                client_id: clientId,
+                client_secret: clientSecret,
+                redirect_uri: redirectUri,
+                code_verifier: codeVerifier
+            }
+        })
+    ).json();
+    if (data.error) {
+        throw new Error(data.error_description);
+    }
+
+    DEV_LOG &&
+        console.log(
+            'tokenUrl',
+            tokenUrl,
+            JSON.stringify({
+                grant_type: 'authorization_code',
+                code,
+                client_id: clientId,
+                redirect_uri: redirectUri,
+                code_verifier: codeVerifier
+            }),
+            data
+        );
+
+    return {
+        accessToken: data.access_token,
+        refreshToken: data.refresh_token,
+        expiresAt: data.expires_in ? Date.now() + data.expires_in * 1000 : undefined,
+        tokenType: data.token_type || 'Bearer'
+    };
+}
+
+/**
+ * Refreshes an expired access token
+ */
+export async function refreshAccessToken(provider: OAuthProvider, refreshToken: string): Promise<OAuthTokens> {
+    const { clientId, clientSecret, tokenUrl } = provider.config;
+
+    const body = {
+        grant_type: 'refresh_token',
+        refresh_token: refreshToken,
+        client_secret: clientSecret,
+        client_id: clientId
+    };
+
+    const data = await (
+        await request({
+            url: tokenUrl,
+            method: 'POST',
+            responseOnMainThread: false,
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body
+        })
+    ).json();
+
+    return {
+        accessToken: data.access_token,
+        refreshToken: data.refresh_token || refreshToken, // Keep old refresh token if not provided
+        expiresAt: data.expires_in ? Date.now() + data.expires_in * 1000 : undefined,
+        tokenType: data.token_type || 'Bearer'
+    };
+}
+
+/**
+ * Checks if a token is expired or about to expire
+ */
+export function isTokenExpired(expiresAt?: number, bufferSeconds: number = 300): boolean {
+    if (!expiresAt) {
+        return false; // Assume valid if no expiry time
+    }
+    return Date.now() >= expiresAt - bufferSeconds * 1000;
+}
+
+/**
+ * Generate a random code verifier for PKCE
+ */
+export function generateCodeVerifier(): string {
+    return generateRandomString(128);
+}
+
+/**
+ * Generate a random string for state/verifier
+ */
+export function generateRandomString(length: number): string {
+    const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+    let result = '';
+    const randomValues = new Uint8Array(length);
+
+    // Generate random values
+    for (let i = 0; i < length; i++) {
+        randomValues[i] = Math.floor(Math.random() * 256);
+    }
+
+    for (let i = 0; i < length; i++) {
+        result += charset[randomValues[i] % charset.length];
+    }
+
+    return result;
+}
+
+/**
+ * Store OAuth tokens securely
+ */
+export function storeTokens(serviceType: string, tokens: OAuthTokens): void {
+    ApplicationSettings.setString(`${serviceType}_oauth_tokens`, JSON.stringify(tokens));
+}
+
+/**
+ * Retrieve stored OAuth tokens
+ */
+export function getStoredTokens(serviceType: string): OAuthTokens | null {
+    const stored = ApplicationSettings.getString(`${serviceType}_oauth_tokens`);
+    if (!stored) {
+        return null;
+    }
+    try {
+        return JSON.parse(stored);
+    } catch (e) {
+        return null;
+    }
+}
+
+/**
+ * Clear stored OAuth tokens
+ */
+export function clearTokens(serviceType: string): void {
+    ApplicationSettings.remove(`${serviceType}_oauth_tokens`);
+}
diff --git a/app/services/sync/OAuthHelperUI.ts b/app/services/sync/OAuthHelperUI.ts
new file mode 100644
index 000000000..c2eb530b1
--- /dev/null
+++ b/app/services/sync/OAuthHelperUI.ts
@@ -0,0 +1,88 @@
+import { showModal } from '@shared/utils/svelte/ui';
+import { ApplicationSettings } from '@nativescript/core';
+import { lc } from '~/helpers/locale';
+import { SilentError } from '@akylas/nativescript-app-utils/error';
+import { queryString } from '~/services/api';
+import { toBase64 } from '~/webdav/tools/encode';
+import { generateCodeChallenge } from '~/utils/utils';
+import { request } from '@nativescript-community/https';
+import { OAuthProvider, OAuthTokens, exchangeCodeForTokens, generateCodeVerifier, generateRandomString } from '~/services/sync/OAuthHelper';
+
+/**
+ * Performs OAuth 2.0 authentication flow using a modal webview
+ * @param provider OAuth provider configuration
+ * @returns OAuth tokens
+ */
+export async function performOAuthFlow(provider: OAuthProvider): Promise<OAuthTokens> {
+    const { authUrl, redirectUri, responseType = 'code' } = provider.config;
+
+    try {
+        // Build authorization URL with PKCE for security
+        const codeVerifier = generateCodeVerifier();
+        const codeChallenge = generateCodeChallenge(codeVerifier);
+        const state = generateRandomString(32);
+
+        const params = {
+            client_id: provider.config.clientId,
+            redirect_uri: redirectUri,
+            response_type: responseType,
+            scope: provider.config.scope,
+            access_type: 'offline',
+            prompt: provider.config.prompt ?? 'consent',
+            state,
+            code_challenge: codeChallenge,
+            code_challenge_method: 'S256'
+        };
+
+        const authUrlWithParams = queryString(params, authUrl);
+
+        DEV_LOG && console.log('OAuth: Opening auth URL:', authUrlWithParams);
+
+        // Open modal webview for authentication
+        const OAuthWebViewModal = (await import('~/components/OAuthWebViewModal.svelte')).default;
+        const result: { url?: string; cancelled?: boolean } = await showModal({
+            page: OAuthWebViewModal,
+            fullscreen: true,
+            props: {
+                url: authUrlWithParams,
+                redirectUri
+            }
+        });
+
+        if (!result) {
+            return;
+        }
+
+        if (result?.cancelled) {
+            throw new SilentError(lc('authentication_cancelled'));
+        }
+
+        // Parse the callback URL
+        const url = new URL(result.url);
+        const urlParams = new URLSearchParams(url.search);
+
+        const returnedState = urlParams.get('state');
+        if (returnedState !== state) {
+            throw new Error('State parameter mismatch - potential CSRF attack');
+        }
+
+        const code = urlParams.get('code');
+        const error = urlParams.get('error');
+
+        if (error) {
+            throw new Error(`OAuth error: ${error} - ${urlParams.get('error_description')}`);
+        }
+
+        if (!code) {
+            throw new Error('No authorization code received');
+        }
+
+        // Exchange authorization code for tokens
+        const tokens = await exchangeCodeForTokens(provider, code, codeVerifier);
+
+        return tokens;
+    } catch (error) {
+        DEV_LOG && console.error('OAuth flow error:', error);
+        throw error;
+    }
+}
diff --git a/app/services/sync/OneDrive.ts b/app/services/sync/OneDrive.ts
new file mode 100644
index 000000000..4875a8438
--- /dev/null
+++ b/app/services/sync/OneDrive.ts
@@ -0,0 +1,239 @@
+import { File } from '@nativescript/core';
+import { HttpRequestOptions, request } from '~/services/api';
+import { ResponseData } from '~/services/sync/interfaces';
+import { GetFileContentsOptions } from '~/webdav';
+import { OAuthProvider, OAuthTokens, isTokenExpired, refreshAccessToken } from './OAuthHelper';
+
+/**
+ * OneDrive API configuration
+ */
+export const ONEDRIVE_PROVIDER: OAuthProvider = {
+    name: 'OneDrive',
+    config: {
+        authUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
+        tokenUrl: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
+        // This is a placeholder client ID - users should configure their own
+        clientId: ONEDRIVE_OAUTH_CLIENT_ID,
+        clientSecret: ONEDRIVE_OAUTH_CLIENT_SECRET,
+        redirectUri: 'http://localhost/oauth2redirect',
+        scope: 'files.readwrite offline_access',
+        responseType: 'code',
+        prompt: 'select_account'
+    }
+};
+
+export interface OneDriveSyncOptions {
+    remoteFolder?: string;
+    accessToken?: string;
+    refreshToken?: string;
+    expiresAt?: number;
+}
+
+/**
+ * OneDrive item metadata
+ */
+export interface OneDriveItem {
+    id: string;
+    name: string;
+    size?: number;
+    lastModifiedDateTime?: string;
+    folder?: {
+        childCount: number;
+    };
+    file?: {
+        mimeType: string;
+    };
+    parentReference?: {
+        id: string;
+        path: string;
+    };
+}
+
+/**
+ * Make an authenticated request to OneDrive API
+ */
+export async function makeOneDriveRequest<T = any>(
+    tokens: OAuthTokens,
+    endpoint: string,
+    options: {
+        method?: string;
+        body?: any;
+        headers?: Record<string, string>;
+    } = {}
+) {
+    const { body, headers = {}, method = 'GET' } = options;
+
+    // Check if token needs refresh
+    if (isTokenExpired(tokens.expiresAt) && tokens.refreshToken) {
+        const newTokens = await refreshAccessToken(ONEDRIVE_PROVIDER, tokens.refreshToken);
+        Object.assign(tokens, newTokens);
+    }
+
+    const url = endpoint.startsWith('http') ? endpoint : `https://graph.microsoft.com/v1.0/me/drive${endpoint}`;
+
+    const requestOptions = {
+        url,
+        method,
+        headers: {
+            Authorization: `Bearer ${tokens.accessToken}`,
+            ...headers
+        },
+        responseOnMainThread: false,
+        body
+    } as HttpRequestOptions;
+    return request<T>(requestOptions);
+}
+
+export async function getOneDriveRequestContents<U = any, V extends 'binary' | 'text' | 'json' | 'file' = 'json'>(
+    tokens: OAuthTokens,
+    fileId: string,
+    httpOptions?: {
+        method?: string;
+        body?: any;
+        headers?: Record<string, string>;
+    },
+    options: GetFileContentsOptions & { format?: V } = {}
+) {
+    const { format = 'json' } = options;
+    const response = await makeOneDriveRequest(tokens, fileId, httpOptions);
+    switch (format) {
+        case 'binary':
+            return response.binary();
+        case 'text':
+            return response.text();
+        case 'file':
+            return response.file(options.destinationFilePath);
+        case 'json':
+        default:
+            return response.json();
+    }
+}
+
+/**
+ * Get or create a folder by path
+ */
+export async function getOrCreateFolder(tokens: OAuthTokens, folderPath: string): Promise<string> {
+    const parts = folderPath.split('/').filter((p) => p);
+    let currentId = 'root';
+
+    for (const part of parts) {
+        try {
+            // Try to get the folder
+            const response = await getOneDriveRequestContents<OneDriveItem>(tokens, `/items/${currentId}:/${part}`);
+            currentId = response.id;
+        } catch (error) {
+            // Folder doesn't exist, create it
+            const response = await getOneDriveRequestContents<OneDriveItem>(tokens, `/items/${currentId}/children`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    name: part,
+                    folder: {},
+                    '@microsoft.graph.conflictBehavior': 'fail'
+                })
+            });
+            currentId = response.id;
+        }
+    }
+
+    return currentId;
+}
+
+/**
+ * List items in a folder
+ */
+export async function listItems(tokens: OAuthTokens, folderId: string): Promise<OneDriveItem[]> {
+    const response = await getOneDriveRequestContents<{ value: OneDriveItem[] }>(tokens, `/items/${folderId}/children`);
+
+    return response.value || [];
+}
+
+/**
+ * Upload a file to OneDrive
+ */
+export async function uploadFile(tokens: OAuthTokens, fileName: string, content: string | ArrayBuffer | File, parentId: string): Promise<string> {
+    // DEV_LOG && console.log('uploadFile', fileName, parentId);
+    const response = await getOneDriveRequestContents<OneDriveItem>(tokens, `/items/${parentId}:/${fileName}:/content`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/octet-stream'
+        },
+        body: content
+    });
+
+    return response.id;
+}
+
+export async function downloadFile<U = any, V extends 'binary' | 'text' | 'json' | 'file' = 'json'>(tokens: OAuthTokens, fileId: string, options: GetFileContentsOptions & { format?: V } = {}) {
+    const response = await getOneDriveRequestContents<{ '@microsoft.graph.downloadUrl': string }>(tokens, `/items/${fileId}`);
+
+    // Download from the temporary download URL
+    const downloadResponse = await request<string>({
+        url: response['@microsoft.graph.downloadUrl'],
+        responseOnMainThread: false,
+        method: 'GET'
+    });
+
+    const { format = 'json' } = options;
+    switch (format) {
+        case 'binary':
+            return downloadResponse.binary();
+        case 'text':
+            return downloadResponse.text();
+        case 'file':
+            return downloadResponse.file(options.destinationFilePath);
+        case 'json':
+        default:
+            return downloadResponse.json();
+    }
+}
+
+/**
+ * Delete a file or folder
+ */
+export async function deleteItem(tokens: OAuthTokens, itemId: string): Promise<void> {
+    await makeOneDriveRequest(tokens, `/items/${itemId}`, { method: 'DELETE' });
+}
+
+/**
+ * Check if a file exists
+ */
+export async function itemExists(tokens: OAuthTokens, itemName: string, parentId: string): Promise<boolean> {
+    try {
+        await makeOneDriveRequest(tokens, `/items/${parentId}:/${itemName}`);
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
+
+/**
+ * Get item by path
+ */
+export async function getItemByPath(tokens: OAuthTokens, path: string, parentId: string = 'root', remoteFolder?: string): Promise<OneDriveItem | null> {
+    try {
+        const startPath = `${remoteFolder}/`;
+        if (remoteFolder && path.startsWith(startPath)) {
+            path = path.slice(startPath.length);
+        }
+        const result = await getOneDriveRequestContents<OneDriveItem>(tokens, `/items/${parentId}:/${path}`);
+        return result;
+    } catch (error) {
+        return null;
+    }
+}
+
+/**
+ * Test OneDrive connection
+ */
+export async function testOneDriveConnection(tokens: OAuthTokens): Promise<boolean> {
+    try {
+        await makeOneDriveRequest(tokens, '/');
+        return true;
+    } catch (error) {
+        DEV_LOG && console.error('OneDrive connection test failed:', error);
+        return false;
+    }
+}
diff --git a/app/services/sync/OneDriveDataSyncService.ts b/app/services/sync/OneDriveDataSyncService.ts
new file mode 100644
index 000000000..017f3db10
--- /dev/null
+++ b/app/services/sync/OneDriveDataSyncService.ts
@@ -0,0 +1,160 @@
+import { File, Folder, path } from '@nativescript/core';
+import { type OCRDocument } from '~/models/OCRDocument';
+import { networkService } from '~/services/api';
+import { DocumentEvents } from '~/services/documents';
+import { BaseDataSyncService, BaseDataSyncServiceOptions } from '~/services/sync/BaseDataSyncService';
+import { SERVICES_SYNC_MASK } from '~/services/sync/types';
+import { FileStat, GetFileContentsOptions, ResponseData } from '~/webdav';
+import { OAuthTokens } from './OAuthHelper';
+import { OneDriveSyncOptions, deleteItem, downloadFile, getItemByPath, getOneDriveRequestContents, getOrCreateFolder, listItems, uploadFile } from './OneDrive';
+
+export interface OneDriveDataSyncOptions extends BaseDataSyncServiceOptions, OneDriveSyncOptions {}
+
+/**
+ * OneDrive Data Sync Service
+ * Syncs document data and folder structures to OneDrive
+ */
+export class OneDriveDataSyncService extends BaseDataSyncService {
+    shouldSync(force?: boolean, event?: DocumentEvents) {
+        return (force || (event && this.autoSync)) && networkService.connected;
+    }
+    static type = 'onedrive_data';
+    type = OneDriveDataSyncService.type;
+    syncMask = SERVICES_SYNC_MASK[OneDriveDataSyncService.type];
+    remoteFolder: string;
+    remoteFolderId: string;
+    accessToken: string;
+    refreshToken: string;
+    expiresAt: number;
+
+    private get tokens(): OAuthTokens {
+        return {
+            accessToken: this.accessToken,
+            refreshToken: this.refreshToken,
+            expiresAt: this.expiresAt
+        };
+    }
+
+    stop() {}
+
+    static start(config?: { id: number; [k: string]: any }) {
+        if (config) {
+            const service = OneDriveDataSyncService.getOrCreateInstance();
+            Object.assign(service, config);
+            // DEV_LOG && console.log('OneDriveDataSyncService', 'start', JSON.stringify(config), service.autoSync);
+            return service;
+        }
+    }
+
+    override async ensureRemoteFolder() {
+        // DEV_LOG && console.log('ensureRemoteFolder', this.remoteFolder);
+        if (!this.remoteFolderId) {
+            this.remoteFolderId = await getOrCreateFolder(this.tokens, this.remoteFolder);
+        }
+    }
+    getItemByPath(path: string) {
+        return getItemByPath(this.tokens, path, this.remoteFolderId, this.remoteFolder);
+    }
+    override async getRemoteFolderDirectories(relativePath: string): Promise<FileStat[]> {
+        const item = relativePath ? await this.getItemByPath(relativePath) : { id: this.remoteFolderId };
+
+        if (!item) {
+            return [];
+        }
+
+        const items = await listItems(this.tokens, item.id);
+
+        return items.map(
+            (item) =>
+                ({
+                    filename: path.join(relativePath || '', item.name),
+                    basename: item.name,
+                    lastmod: item.lastModifiedDateTime || new Date().toISOString(),
+                    size: item.size || 0,
+                    type: item.folder ? 'directory' : 'file',
+                    mime: item.file?.mimeType
+                }) as FileStat
+        );
+    }
+
+    override async sendFolderToRemote(folder: Folder, remoteRelativePath: string) {
+        const remotePath = path.join(this.remoteFolder, remoteRelativePath);
+        // Get or create target folder
+        const targetItem = await this.getItemByPath(remotePath);
+        // DEV_LOG && console.warn('sendFolderToOneDrive', folder.path, remotePath, this.remoteFolderId, targetItem?.id);
+        const targetFolderId = targetItem?.id || (await getOrCreateFolder(this.tokens, remotePath));
+
+        const entities = await folder.getEntities();
+        for (let index = 0; index < entities.length; index++) {
+            const entity = entities[index];
+            if (entity instanceof File) {
+                await uploadFile(this.tokens, entity.name, entity, targetFolderId);
+            } else {
+                await this.sendFolderToRemote(Folder.fromPath(entity.path), path.join(remoteRelativePath, entity.name));
+            }
+        }
+    }
+
+    override async fileExists(filename: string) {
+        const item = await this.getItemByPath(filename);
+        return !!item;
+    }
+
+    override async getFileFromRemote(filename: string, document?: OCRDocument) {
+        const remoteDocPath = document ? path.join(this.remoteFolder, document.id) : this.remoteFolder;
+        const fullPath = path.join(remoteDocPath, filename);
+        // DEV_LOG && console.log('getFileFromRemote', fullPath, remoteDocPath, this.remoteFolderId);
+        const item = await this.getItemByPath(fullPath);
+
+        if (!item) {
+            throw new Error(`File not found: ${fullPath}`);
+        }
+
+        const result = await downloadFile(this.tokens, item.id, { format: 'text' });
+        return result;
+    }
+
+    override async putFileContents(relativePath: string, localFilePath: string, options?) {
+        // const content = await File.fromPath(localFilePath).readText();
+        // return this.putFileContentsFromData(relativePath, content, options);
+        // DEV_LOG && console.log('putFileContents', relativePath, localFilePath);
+
+        const parts = relativePath.split('/').filter((p) => p);
+        const fileName = parts.pop();
+
+        const parentPath = parts.join('/');
+        const parentItem = parentPath ? await this.getItemByPath(parentPath) : { id: this.remoteFolderId };
+
+        const parentId = parentItem?.id || (await getOrCreateFolder(this.tokens, parentPath));
+        const file = File.fromPath(localFilePath);
+
+        await uploadFile(this.tokens, file.name, file, parentId);
+    }
+
+    override async putFileContentsFromData(relativePath: string, data: string, options?) {
+        // DEV_LOG && console.log('putFileContentsFromData', relativePath);
+        const parts = relativePath.split('/').filter((p) => p);
+        const fileName = parts.pop();
+
+        const parentPath = parts.join('/');
+        const parentItem = parentPath ? await this.getItemByPath(parentPath) : { id: this.remoteFolderId };
+
+        const parentId = parentItem?.id || (await getOrCreateFolder(this.tokens, parentPath));
+        await uploadFile(this.tokens, fileName, data, parentId);
+    }
+
+    override async deleteFile(relativePath: string) {
+        const item = await this.getItemByPath(relativePath);
+        if (item) {
+            await deleteItem(this.tokens, item.id);
+        }
+    }
+    override async getFileContents<V extends 'binary' | 'text' | 'file' | 'json' = 'json'>(filePath: string, options?: GetFileContentsOptions & { format?: V }): Promise<ResponseData<V>> {
+        const item = await this.getItemByPath(filePath);
+
+        if (!item) {
+            throw new Error(`File not found: ${filePath}`);
+        }
+        return getOneDriveRequestContents(this.tokens, item.id, undefined, options);
+    }
+}
diff --git a/app/services/sync/OneDriveImageSyncService.ts b/app/services/sync/OneDriveImageSyncService.ts
new file mode 100644
index 000000000..ab1234e37
--- /dev/null
+++ b/app/services/sync/OneDriveImageSyncService.ts
@@ -0,0 +1,105 @@
+import { File, ImageSource, knownFolders, path } from '@nativescript/core';
+import { saveImage } from '~/utils/utils';
+import { FileStat } from '~/webdav';
+import { networkService } from '../api';
+import { DocumentEvents } from '../documents';
+import { BaseImageSyncService, BaseImageSyncServiceOptions } from './BaseImageSyncService';
+import { SERVICES_SYNC_MASK } from './types';
+import type { DocFolder } from '~/models/OCRDocument';
+import { OneDriveSyncOptions, getItemByPath, getOrCreateFolder, listItems, uploadFile } from './OneDrive';
+import { OAuthTokens } from './OAuthHelper';
+
+export interface OneDriveImageSyncServiceOptions extends BaseImageSyncServiceOptions, OneDriveSyncOptions {}
+
+export class OneDriveImageSyncService extends BaseImageSyncService {
+    shouldSync(force?: boolean, event?: DocumentEvents) {
+        return (force || (event && this.autoSync)) && networkService.connected;
+    }
+    static type = 'onedrive_image';
+    type = OneDriveImageSyncService.type;
+    syncMask = SERVICES_SYNC_MASK[OneDriveImageSyncService.type];
+    remoteFolder: string;
+    remoteFolderId: string;
+    accessToken: string;
+    refreshToken: string;
+    expiresAt: number;
+
+    private get tokens(): OAuthTokens {
+        return {
+            accessToken: this.accessToken,
+            refreshToken: this.refreshToken,
+            expiresAt: this.expiresAt
+        };
+    }
+
+    static start(config?: { id: number; [k: string]: any }) {
+        if (config) {
+            const service = OneDriveImageSyncService.getOrCreateInstance();
+            Object.assign(service, config);
+            // DEV_LOG && console.log('OneDriveImageSyncService', 'start', JSON.stringify(config), service.autoSync);
+            return service;
+        }
+    }
+
+    override stop() {}
+
+    override async ensureRemoteFolder(remoteFolder = this.remoteFolder) {
+        if (!this.remoteFolderId) {
+            this.remoteFolderId = await getOrCreateFolder(this.tokens, remoteFolder);
+        }
+    }
+
+    getItemByPath(path: string) {
+        return getItemByPath(this.tokens, path, this.remoteFolderId, this.remoteFolder);
+    }
+    override async getRemoteFolderFiles(relativePath: string): Promise<FileStat[]> {
+        const item = relativePath ? await this.getItemByPath(relativePath) : { id: this.remoteFolderId };
+
+        if (!item) {
+            return [];
+        }
+
+        const items = await listItems(this.tokens, item.id);
+
+        return items
+            .filter((item) => !item.folder)
+            .map((item) => ({
+                filename: path.join(relativePath || '', item.name),
+                basename: item.name,
+                lastmod: item.lastModifiedDateTime || new Date().toISOString(),
+                size: item.size || 0,
+                type: 'file' as const,
+                mime: item.file?.mimeType
+            }));
+    }
+
+    override async writeImage(imageSource: ImageSource, fileName: string, imageFormat: 'png' | 'jpeg' | 'jpg', imageQuality: number, overwrite: boolean, docFolder?: DocFolder) {
+        const temp = knownFolders.temp().path;
+        await saveImage(imageSource, {
+            exportDirectory: temp,
+            fileName,
+            imageFormat,
+            imageQuality,
+            overwrite
+        });
+        const localFilePath = path.join(temp, fileName);
+
+        let targetFolderId = this.remoteFolderId;
+        if (docFolder) {
+            const folderPath = docFolder.name;
+            const folderItem = await this.getItemByPath(folderPath);
+            targetFolderId = folderItem?.id || (await getOrCreateFolder(this.tokens, folderPath));
+        }
+
+        const file = File.fromPath(localFilePath);
+        // const content = await file.readText('base64');
+        // DEV_LOG && console.warn('writeImage', fileName, localFilePath, File.exists(localFilePath));
+        await uploadFile(this.tokens, fileName, file, targetFolderId);
+
+        try {
+            file.remove();
+        } catch (e) {
+            // Ignore cleanup errors
+        }
+    }
+}
diff --git a/app/services/sync/OneDrivePDFSyncService.ts b/app/services/sync/OneDrivePDFSyncService.ts
new file mode 100644
index 000000000..8db48da0a
--- /dev/null
+++ b/app/services/sync/OneDrivePDFSyncService.ts
@@ -0,0 +1,119 @@
+import { File, Screen, knownFolders, path } from '@nativescript/core';
+import { wrapNativeException } from '@nativescript/core/utils';
+import { generatePDFASync } from 'plugin-nativeprocessor';
+import type { DocFolder, OCRDocument } from '~/models/OCRDocument';
+import PDFExportCanvas from '~/services/pdf/PDFExportCanvas';
+import { PDF_EXT } from '~/utils/constants';
+import { getPageColorMatrix } from '~/utils/matrix';
+import { FileStat } from '~/webdav';
+import { networkService } from '../api';
+import { DocumentEvents } from '../documents';
+import { BasePDFSyncService, BasePDFSyncServiceOptions } from './BasePDFSyncService';
+import { OAuthTokens } from './OAuthHelper';
+import { OneDriveSyncOptions, getItemByPath, getOrCreateFolder, listItems, uploadFile } from './OneDrive';
+import { SERVICES_SYNC_MASK } from './types';
+
+export interface OneDrivePDFSyncServiceOptions extends BasePDFSyncServiceOptions, OneDriveSyncOptions {}
+
+export class OneDrivePDFSyncService extends BasePDFSyncService {
+    shouldSync(force?: boolean, event?: DocumentEvents) {
+        return (force || (event && this.autoSync)) && networkService.connected;
+    }
+    static type = 'onedrive_pdf';
+    type = OneDrivePDFSyncService.type;
+    syncMask = SERVICES_SYNC_MASK[OneDrivePDFSyncService.type];
+    remoteFolder: string;
+    remoteFolderId: string;
+    accessToken: string;
+    refreshToken: string;
+    expiresAt: number;
+
+    private get tokens(): OAuthTokens {
+        return {
+            accessToken: this.accessToken,
+            refreshToken: this.refreshToken,
+            expiresAt: this.expiresAt
+        };
+    }
+
+    static start(config?: { id: number; [k: string]: any }) {
+        if (config) {
+            const service = OneDrivePDFSyncService.getOrCreateInstance();
+            Object.assign(service, config);
+            // DEV_LOG && console.log('OneDrivePDFSyncService', 'start', JSON.stringify(config), service.autoSync);
+            return service;
+        }
+    }
+
+    override stop() {}
+
+    override async ensureRemoteFolder(remoteFolder = this.remoteFolder) {
+        if (!this.remoteFolderId) {
+            this.remoteFolderId = await getOrCreateFolder(this.tokens, remoteFolder);
+        }
+    }
+
+    override async getRemoteFolderFiles(relativePath: string): Promise<FileStat[]> {
+        const item = relativePath ? await this.getItemByPath(relativePath) : { id: this.remoteFolderId };
+
+        if (!item) {
+            return [];
+        }
+
+        const items = await listItems(this.tokens, item.id);
+
+        return items
+            .filter((item) => !item.folder && item.name.endsWith('.pdf'))
+            .map((item) => ({
+                filename: path.join(relativePath || '', item.name),
+                basename: item.name,
+                lastmod: item.lastModifiedDateTime || new Date().toISOString(),
+                size: item.size || 0,
+                type: 'file' as const,
+                mime: 'application/pdf'
+            }));
+    }
+
+    getItemByPath(path: string) {
+        return getItemByPath(this.tokens, path, this.remoteFolderId, this.remoteFolder);
+    }
+    override async writePDF(document: OCRDocument, fileName: string, docFolder?: DocFolder) {
+        const pages = document.pages;
+        if (!pages || pages.length === 0) {
+            return;
+        }
+        if (!fileName.endsWith(PDF_EXT)) {
+            fileName += PDF_EXT;
+        }
+        const temp = knownFolders.temp().path;
+
+        if (__ANDROID__) {
+            const exportOptions = this.exportOptions;
+            const black_white = exportOptions.color === 'black_white';
+            const options = JSON.stringify({
+                overwrite: true,
+                // page_padding: Utils.layout.toDevicePixels(pdfCanvas.options.page_padding),
+                text_scale: Screen.mainScreen.scale * 1.4,
+                pages: pages.map((p) => ({ ...p, colorMatrix: getPageColorMatrix(p, black_white ? 'grayscale' : undefined) })),
+                ...exportOptions
+            });
+            await generatePDFASync(temp, fileName, options, wrapNativeException);
+        } else {
+            const exporter = new PDFExportCanvas();
+            await exporter.export({ pages: pages.map((page) => ({ page, document })), folder: temp, filename: fileName, compress: true, options: this.exportOptions });
+        }
+        const localFilePath = path.join(temp, fileName);
+        // let destinationPath = this.remoteFolder;
+        // if (docFolder) {
+        //     destinationPath = path.join(destinationPath, docFolder.name);
+        //     await this.ensureRemoteFolder(destinationPath);
+        // }
+        let targetFolderId = this.remoteFolderId;
+        if (docFolder) {
+            const folderPath = docFolder.name;
+            const folderItem = await this.getItemByPath(folderPath);
+            targetFolderId = folderItem?.id || (await getOrCreateFolder(this.tokens, folderPath));
+        }
+        await uploadFile(this.tokens, fileName, File.fromPath(localFilePath), targetFolderId);
+    }
+}
diff --git a/app/services/sync/WebdavDataSyncService.ts b/app/services/sync/WebdavDataSyncService.ts
index 91331765c..ad9c3582a 100644
--- a/app/services/sync/WebdavDataSyncService.ts
+++ b/app/services/sync/WebdavDataSyncService.ts
@@ -1,15 +1,11 @@
 import { File, Folder, path } from '@nativescript/core';
-import { DB_VERSION, DocFolder, type OCRDocument, type OCRPage, getDocumentsService } from '~/models/OCRDocument';
-import { DocumentEvents, DocumentsService } from '~/services/documents';
-import { BaseDataSyncService, BaseDataSyncServiceOptions } from '~/services/sync/BaseDataSyncService';
-import { AuthType, FileStat, WebDAVClient, createClient } from '~/webdav';
-import { basename } from '~/webdav/tools/path';
-import { lc } from '@nativescript-community/l';
+import { type OCRDocument } from '~/models/OCRDocument';
 import { networkService } from '~/services/api';
+import { DocumentEvents } from '~/services/documents';
+import { BaseDataSyncService, BaseDataSyncServiceOptions } from '~/services/sync/BaseDataSyncService';
 import { WebdavSyncOptions } from '~/services/sync/Webdav';
 import { SERVICES_SYNC_MASK } from '~/services/sync/types';
-import { DOCUMENT_DATA_FILENAME, VALID_MARKER_FILENAME } from '~/utils/constants';
-import { SilentError } from '@akylas/nativescript-app-utils/error';
+import { AuthType, FileStat, GetFileContentsOptions, ResponseData, ResponseDataDetailed, WebDAVClient, createClient } from '~/webdav';
 
 export interface WebdavDataSyncOptions extends BaseDataSyncServiceOptions, WebdavSyncOptions {}
 
@@ -22,7 +18,6 @@ export class WebdavDataSyncService extends BaseDataSyncService {
     syncMask = SERVICES_SYNC_MASK[WebdavDataSyncService.type];
     remoteURL;
     username;
-    remoteFolder;
     authType;
     client: WebDAVClient;
     token;
@@ -56,6 +51,10 @@ export class WebdavDataSyncService extends BaseDataSyncService {
         return this.client.getDirectoryContents(path.join(this.remoteFolder, relativePath), { includeSelf: false, details: false }) as Promise<FileStat[]>;
     }
 
+    override getFileContents<V extends 'binary' | 'text' | 'file' | 'json' = 'json'>(filePath: string, options?: GetFileContentsOptions & { format?: V }): Promise<ResponseData<V>> {
+        return this.client.getFileContents(filePath, options);
+    }
+
     override async sendFolderToRemote(folder: Folder, remoteRelativePath: string) {
         const remotePath = path.join(this.remoteFolder, remoteRelativePath);
         DEV_LOG && console.log('sendFolderToWebDav', folder.path, remotePath);
@@ -71,7 +70,7 @@ export class WebdavDataSyncService extends BaseDataSyncService {
         for (let index = 0; index < entities.length; index++) {
             const entity = entities[index];
             if (entity instanceof File) {
-                await this.client.putFileContents(path.join(remotePath, entity.name), File.fromPath(entity.path));
+                await this.putFileContents(path.join(remotePath, entity.name), entity.path);
             } else {
                 await this.sendFolderToRemote(Folder.fromPath(entity.path), path.join(remoteRelativePath, entity.name));
             }
@@ -90,139 +89,6 @@ export class WebdavDataSyncService extends BaseDataSyncService {
         return result;
     }
 
-    override async removeDocumentFromRemote(remoteRelativePath: string) {
-        const remoteDocPath = path.join(this.remoteFolder, remoteRelativePath);
-        DEV_LOG && console.log('removeDocumentFromWebdav', remoteDocPath);
-        return this.client.deleteFile(remoteDocPath);
-        // const remoteDocuments = (await this.getRemoteFolderDirectories(remotePath)) as FileStat[];
-        // for (let index = 0; index < remoteDocuments.length; index++) {
-        //     const remoteDocument = remoteDocuments[index];
-        //     if (ignores?.indexOf(remoteDocument.basename) >= 0) {
-        //         continue;
-        //     }
-        //     if (remoteDocument.type === 'directory') {
-        //         await this.importFolderFromWebdav(path.join(remotePath, remoteDocument.basename), folder.getFolder(remoteDocument.basename));
-        //     } else {
-        //         await this.client.getFileContents(path.join(remotePath, remoteDocument.basename), {
-        //             format: 'file',
-        //             destinationFilePath: path.join(folder.path, remoteDocument.basename)
-        //         });
-        //     }
-        // }
-    }
-    override async importFolderFromRemote(remoteRelativePath: string, folder: Folder, ignores?: string[]) {
-        if (!folder?.path) {
-            throw new Error('importFolderFromRemote missing folder');
-        }
-        DEV_LOG && console.log('importFolderFromRemote', remoteRelativePath, folder.path, ignores);
-        const remoteDocuments = await this.getRemoteFolderDirectories(remoteRelativePath);
-        for (let index = 0; index < remoteDocuments.length; index++) {
-            const remoteDocument = remoteDocuments[index];
-            if (ignores?.indexOf(remoteDocument.basename) >= 0) {
-                continue;
-            }
-            if (remoteDocument.type === 'directory') {
-                await this.importFolderFromRemote(path.join(remoteRelativePath, remoteDocument.basename), folder.getFolder(remoteDocument.basename));
-            } else {
-                await this.client.getFileContents(path.join(this.remoteFolder, remoteRelativePath, remoteDocument.basename), {
-                    format: 'file',
-                    destinationFilePath: path.join(folder.path, remoteDocument.basename)
-                });
-            }
-        }
-    }
-    override async addDocumentToRemote(document: OCRDocument) {
-        DEV_LOG && console.log('addDocumentToWebdav', this.remoteFolder, document.id, document.pages);
-        const docFolder = getDocumentsService().dataFolder.getFolder(document.id);
-
-        // Remove existing .valid marker if it exists (to mark as invalid during sync)
-        try {
-            await this.removeValidMarker(document.id);
-        } catch (error) {
-            // Ignore errors - folder might not exist yet
-        }
-
-        await this.sendFolderToRemote(docFolder, document.id);
-        await this.client.putFileContents(path.join(this.remoteFolder, document.id, DOCUMENT_DATA_FILENAME), document.toString());
-
-        // Create .valid marker after successful sync
-        await this.createValidMarker(document.id);
-
-        // mark the document as synced
-        // DEV_LOG && console.log('addDocumentToWebdav done saving synced state', document.id, document.pages);
-    }
-
-    override async importDocumentFromRemote(data: FileStat) {
-        const hasValid = await this.hasValidMarker(data.basename);
-        // for now we ignore hasValidMarker or otherwise we would not "import" legacy documents
-
-        let remoteData: string;
-        try {
-            remoteData = await this.client.getFileContents(path.join(data.filename, DOCUMENT_DATA_FILENAME), {
-                format: 'text'
-            });
-        } catch (error) {
-            // Has .valid but no data.json - corrupt, skip it
-            DEV_LOG && console.warn('importDocumentFromRemote: corrupt remote document (has .valid but no data.json)', data.basename);
-            return;
-        }
-
-        const dataJSON: OCRDocument & { pages: OCRPage[]; db_version?: number } = JSON.parse(remoteData);
-        const { db_version, folders, pages, ...docProps } = dataJSON;
-        if (db_version > DB_VERSION) {
-            throw new SilentError(lc('document_need_updated_app', docProps.name));
-        }
-        let docId = docProps.id;
-        let pageIds = [];
-        let docDataFolder: Folder;
-        try {
-            DEV_LOG && console.log('importDocumentFromRemote creating document', JSON.stringify(docProps), JSON.stringify(folders));
-            await getDocumentsService().documentRepository.delete({ id: docId } as any);
-            const doc = await getDocumentsService().documentRepository.createDocument({ ...docProps, folders, _synced: 0 });
-            docId = doc.id;
-            docDataFolder = getDocumentsService().dataFolder.getFolder(docId);
-            pages.forEach((page) => {
-                const pageDataFolder = docDataFolder.getFolder(page.id);
-                page.sourceImagePath = path.join(pageDataFolder.path, basename(page.sourceImagePath));
-                page.imagePath = path.join(pageDataFolder.path, basename(page.imagePath));
-            });
-            pageIds = pages.map((p) => p.id);
-            await this.importFolderFromRemote(data.basename, docDataFolder, [DOCUMENT_DATA_FILENAME, VALID_MARKER_FILENAME]);
-            await doc.addPages(pages, true, true);
-
-            let folder: DocFolder;
-            if (folders) {
-                const actualFolders = await Promise.all(folders.map((folderId) => getDocumentsService().folderRepository.get(folderId)));
-                // in this case we only add folders which actually already exists in db. Means they have to be synced before
-                for (let index = 0; index < actualFolders.length; index++) {
-                    folder = actualFolders[index];
-                    doc.setFolder({ folderId: folder.id });
-                }
-            }
-            if (!hasValid) {
-                await this.createValidMarker(doc.id);
-            }
-
-            return { doc, folder };
-        } catch (error) {
-            console.error('error while adding remote doc, let s remove it', docId, pageIds, error, error.stack);
-            // there was an error while creating the doc. remove it so that we can try again later
-            try {
-                // await timeout(1000);
-                if (docId) {
-                    await getDocumentsService().documentRepository.delete({ id: docId } as any);
-                    await Promise.all(pageIds.map((p) => getDocumentsService().pageRepository.delete({ id: p.id } as any)));
-                }
-                if (docDataFolder && Folder.exists(docDataFolder.path)) {
-                    await docDataFolder.remove();
-                }
-            } catch (error2) {
-                console.error('error while removing failed sync documennt', error2, error2.stack);
-            }
-            throw error;
-        }
-    }
-
     override async putFileContents(relativePath: string, localFilePath: string, options?) {
         return this.client.putFileContents(path.join(this.remoteFolder, relativePath), File.fromPath(localFilePath), options);
     }
@@ -232,27 +98,4 @@ export class WebdavDataSyncService extends BaseDataSyncService {
     override async deleteFile(relativePath: string) {
         return this.client.deleteFile(path.join(this.remoteFolder, relativePath));
     }
-
-    // .valid marker file methods for safer sync
-    override async createValidMarker(documentId: string): Promise<void> {
-        const validPath = path.join(this.remoteFolder, documentId, VALID_MARKER_FILENAME);
-        await this.client.putFileContents(validPath, `${__APP_ID__}.${__APP_VERSION__}.${__APP_BUILD_NUMBER__}`, { overwrite: true });
-    }
-
-    override async hasValidMarker(documentId: string): Promise<boolean> {
-        const validPath = path.join(this.remoteFolder, documentId, VALID_MARKER_FILENAME);
-        return this.client.exists(validPath);
-    }
-
-    override async removeValidMarker(documentId: string): Promise<void> {
-        const validPath = path.join(this.remoteFolder, documentId, VALID_MARKER_FILENAME);
-        try {
-            await this.client.deleteFile(validPath);
-        } catch (error) {
-            // Ignore if .valid doesn't exist
-            if (error.statusCode !== 404) {
-                throw error;
-            }
-        }
-    }
 }
diff --git a/app/services/sync/interfaces.d.ts b/app/services/sync/interfaces.d.ts
new file mode 100644
index 000000000..36550aea7
--- /dev/null
+++ b/app/services/sync/interfaces.d.ts
@@ -0,0 +1,12 @@
+import { Headers } from '@nativescript-community/https';
+
+export type BufferLike = Buffer | ArrayBuffer;
+export type ResponseData<V extends 'binary' | 'text' | 'json' | 'file' = 'json', W = any> = V extends 'file' ? File : V extends 'text' ? string : V extends 'json' ? W : BufferLike;
+export interface ResponseDataDetailed<T> {
+    data: T;
+    headers: Headers;
+    status: number;
+    statusText: string;
+}
+export type ResponseData = string | Buffer | ArrayBuffer | object | any[];
+export type Response<T = any> = HttpsResponse<HttpsResponseLegacy<T>>;
diff --git a/app/services/sync/types.ts b/app/services/sync/types.ts
index 1188f5353..dcba78c67 100644
--- a/app/services/sync/types.ts
+++ b/app/services/sync/types.ts
@@ -1,19 +1,45 @@
 import { type BaseSyncService } from '~/services/sync/BaseSyncService';
 
-export type SYNC_TYPES = 'webdav_data' | 'folder_image' | 'folder_pdf' | 'webdav_image' | 'webdav_pdf';
+export enum SyncTypes {
+    webdav_data = 'webdav_data',
+    folder_image = 'folder_image',
+    folder_pdf = 'folder_pdf',
+    webdav_image = 'webdav_image',
+    webdav_pdf = 'webdav_pdf',
+    gdrive_data = 'gdrive_data',
+    gdrive_image = 'gdrive_image',
+    gdrive_pdf = 'gdrive_pdf',
+    onedrive_data = 'onedrive_data',
+    onedrive_image = 'onedrive_image',
+    onedrive_pdf = 'onedrive_pdf'
+}
+
+export type SYNC_TYPES = keyof typeof SyncTypes;
 export const SERVICES_SYNC_MASK: { [key in SYNC_TYPES]: number } = {
     webdav_data: 1 << 2,
     folder_image: 1 << 3,
     folder_pdf: 1 << 4,
     webdav_image: 1 << 5,
-    webdav_pdf: 1 << 6
+    webdav_pdf: 1 << 6,
+    gdrive_data: 1 << 7,
+    gdrive_image: 1 << 8,
+    gdrive_pdf: 1 << 9,
+    onedrive_data: 1 << 10,
+    onedrive_image: 1 << 11,
+    onedrive_pdf: 1 << 12
 };
 export const SERVICES_SYNC_COLOR: { [key in SYNC_TYPES]: string } = {
     webdav_pdf: '#8293CE',
     webdav_image: '#C2EF1F',
     webdav_data: '#BC768B',
     folder_image: '#C18F4E',
-    folder_pdf: '#4CA49D'
+    folder_pdf: '#4CA49D',
+    gdrive_data: '#4285F4',
+    gdrive_image: '#34A853',
+    gdrive_pdf: '#FBBC05',
+    onedrive_data: '#0078D4',
+    onedrive_image: '#50E6FF',
+    onedrive_pdf: '#00BCF2'
 };
 
 export enum SyncType {
diff --git a/app/utils/utils.android.ts b/app/utils/utils.android.ts
index 99cc2f8ca..759a65f58 100644
--- a/app/utils/utils.android.ts
+++ b/app/utils/utils.android.ts
@@ -167,5 +167,8 @@ export function testGetContent() {
 }
 
 export function checkAvailableStorage(sizeBytes: number) {
-    return AndroidSharedUtils.checkAvailableStorage(sizeBytes)
-}
\ No newline at end of file
+    return com.akylas.documentscanner.AndroidSharedUtils.Companion.checkAvailableStorage(sizeBytes);
+}
+export function generateCodeChallenge(str: string): string {
+    return com.akylas.documentscanner.AndroidSharedUtils.Companion.generateCodeChallenge(str);
+}
diff --git a/app/utils/utils.ios.ts b/app/utils/utils.ios.ts
index cbbd21143..9a504c6f5 100644
--- a/app/utils/utils.ios.ts
+++ b/app/utils/utils.ios.ts
@@ -94,4 +94,8 @@ export function hasManagePermission() {
 }
 export function checkAvailableStorage(sizeBytes: number) {
     return IOSSharedUtils.checkAvailableStorage(sizeBytes)
+}
+
+export function generateCodeChallenge(str: string): string {
+    return IOSSharedUtils.generateCodeChallenge(str);
 }
\ No newline at end of file
diff --git a/app/webdav/factory.ts b/app/webdav/factory.ts
index bf2e2ffab..b4cd9d493 100644
--- a/app/webdav/factory.ts
+++ b/app/webdav/factory.ts
@@ -1,16 +1,23 @@
+import { File } from '@nativescript/core';
+import { SEPARATOR } from '~/utils/constants';
 import { setupAuth } from './auth/index';
 import { copyFile } from './operations/copyFile';
 import { createDirectory } from './operations/createDirectory';
 import { customRequest } from './operations/customRequest';
 import { deleteFile } from './operations/deleteFile';
 import { exists } from './operations/exists';
-import { lock, unlock } from './operations/lock';
 import { getQuota } from './operations/getQuota';
-import { getStat } from './operations/stat';
-import { getSearch } from './operations/search';
+import { lock, unlock } from './operations/lock';
 import { moveFile } from './operations/moveFile';
-import { getFileUploadLink, putFileContents } from './operations/putFileContents';
-import { File, path } from '@nativescript/core';
+import { putFileContents } from './operations/putFileContents';
+import { getSearch } from './operations/search';
+import { getStat } from './operations/stat';
+import { prepareRequestOptions, request } from './request';
+import { handleResponseCode, processResponsePayload } from './response';
+import { parseXML, prepareFileFromProps } from './tools/dav';
+import { fromBase64 } from './tools/encode';
+import { encodePath, join, normalisePath } from './tools/path';
+import { normaliseHREF } from './tools/url';
 import {
     AuthType,
     BufferLike,
@@ -24,7 +31,7 @@ import {
     LockOptions,
     PutFileContentsOptions,
     RequestOptions,
-    ResponseDataDetailed,
+    ResponseData,
     SearchOptions,
     StatOptions,
     // WebDAVClient,
@@ -32,18 +39,10 @@ import {
     WebDAVClientOptions,
     WebDAVMethodOptions
 } from './types';
-import { prepareRequestOptions, request } from './request';
-import { encodePath, join, makePathAbsolute, normalisePath } from './tools/path';
-import { normaliseHREF } from './tools/url';
-import { handleResponseCode, processResponsePayload } from './response';
-import { parseXML, prepareFileFromProps } from './tools/dav';
-import { HttpsResponse, HttpsResponseLegacy } from '@nativescript-community/https';
-import { fromBase64 } from './tools/encode';
-import { SEPARATOR } from '~/utils/constants';
 
 const DEFAULT_CONTACT_HREF = 'mail:contact@akylas.fr';
 
-async function _getFileContentsBuffer(context: WebDAVClientContext, filePath: string, options: GetFileContentsOptions = {}): Promise<HttpsResponse<HttpsResponseLegacy<any>>> {
+async function _getFileContentsBuffer<T = any>(context: WebDAVClientContext, filePath: string, options: GetFileContentsOptions = {}) {
     const requestOptions = prepareRequestOptions(
         {
             url: filePath.startsWith('http') ? filePath : join(context.remoteURL, encodePath(filePath)),
@@ -52,7 +51,7 @@ async function _getFileContentsBuffer(context: WebDAVClientContext, filePath: st
         context,
         options
     );
-    const response = await request(requestOptions);
+    const response = await request<T>(requestOptions);
     await handleResponseCode(context, response, requestOptions);
     return response;
 }
@@ -114,7 +113,7 @@ export class WebDAVClient {
         );
         const response = await request(requestOptions);
         await handleResponseCode(context, response, requestOptions);
-        const responseData = await response.content.toStringAsync();
+        const responseData = await response.text();
         if (!responseData) {
             throw new Error('Failed parsing directory contents: Empty response');
         }
@@ -127,29 +126,28 @@ export class WebDAVClient {
         // }
         return processResponsePayload(response, files, options.details);
     }
-    async getFileContents<U extends boolean = false, V extends 'binary' | 'text' | 'file' = 'binary'>(
-        filePath: string,
-        options: GetFileContentsOptions & { details?: U; format?: V } = {}
-    ): Promise<U extends true ? ResponseDataDetailed<Response<V>> : Response<V>> {
+    async getFileContents<V extends 'binary' | 'text' | 'file' | 'json' = 'json'>(filePath: string, options: GetFileContentsOptions & { format?: V } = {}): Promise<ResponseData<V>> {
         const context = this.context;
-        const { format = 'binary' } = options;
+        const { format = 'json' } = options;
         const response = await _getFileContentsBuffer(context, filePath, options);
         let body;
         switch (format) {
             case 'binary':
-                body = await response.content.toArrayBufferAsync();
+                body = await response.binary();
                 break;
             case 'text':
-                body = await response.content.toStringAsync();
+                body = await response.text();
                 break;
             case 'file':
-                body = await response.content.toFile(options.destinationFilePath);
+                body = await response.file(options.destinationFilePath);
                 break;
+            case 'json':
             default:
-                throw new Error(`Invalid output format: ${format}`);
+                body = await response.json();
+                break;
         }
         // DEV_LOG && console.log('getFileContents', format, body);
-        return processResponsePayload(response, body, options.details);
+        return processResponsePayload(response, body, false);
     }
     async getFileDownloadLink(filePath: string) {
         const context = this.context;
diff --git a/app/webdav/operations/copyFile.ts b/app/webdav/operations/copyFile.ts
index 86de82095..73614f429 100644
--- a/app/webdav/operations/copyFile.ts
+++ b/app/webdav/operations/copyFile.ts
@@ -1,8 +1,7 @@
-import { encodePath, join } from '../tools/path';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode } from '../response';
+import { encodePath, join } from '../tools/path';
 import { WebDAVClientContext, WebDAVMethodOptions } from '../types';
-import { path } from '@nativescript/core';
 
 export async function copyFile(context: WebDAVClientContext, filename: string, destination: string, options: WebDAVMethodOptions = {}) {
     const requestOptions = prepareRequestOptions(
diff --git a/app/webdav/operations/createDirectory.ts b/app/webdav/operations/createDirectory.ts
index e7d09b252..da4d74237 100644
--- a/app/webdav/operations/createDirectory.ts
+++ b/app/webdav/operations/createDirectory.ts
@@ -1,11 +1,10 @@
-import { encodePath, getAllDirectories, join, makePathAbsolute, normalisePath } from '../tools/path';
+import { HTTPError } from '@akylas/nativescript-app-utils/error';
+import { SEPARATOR } from '~/utils/constants';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode } from '../response';
-import { getStat } from './stat';
+import { encodePath, getAllDirectories, join, makePathAbsolute, normalisePath } from '../tools/path';
 import { CreateDirectoryOptions, FileStat, WebDAVClientContext } from '../types';
-import { path } from '@nativescript/core';
-import { HTTPError } from '@akylas/nativescript-app-utils/error';
-import { SEPARATOR } from '~/utils/constants';
+import { getStat } from './stat';
 
 export async function createDirectory(context: WebDAVClientContext, dirPath: string, options: CreateDirectoryOptions = {}) {
     if (options.recursive === true) return createDirectoryRecursively(context, dirPath, options);
diff --git a/app/webdav/operations/customRequest.ts b/app/webdav/operations/customRequest.ts
index e5b70d226..500c7a092 100644
--- a/app/webdav/operations/customRequest.ts
+++ b/app/webdav/operations/customRequest.ts
@@ -1,8 +1,7 @@
-import { encodePath, join } from '../tools/path';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode } from '../response';
+import { encodePath, join } from '../tools/path';
 import { RequestOptions, Response, WebDAVClientContext } from '../types';
-import { path } from '@nativescript/core';
 
 export async function customRequest(context: WebDAVClientContext, remotePath: string, requestOptions: RequestOptions): Promise<Response> {
     if (!requestOptions.url) {
diff --git a/app/webdav/operations/deleteFile.ts b/app/webdav/operations/deleteFile.ts
index 1b8f94bfe..d6db96fad 100644
--- a/app/webdav/operations/deleteFile.ts
+++ b/app/webdav/operations/deleteFile.ts
@@ -1,8 +1,7 @@
-import { encodePath, join } from '../tools/path';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode } from '../response';
+import { encodePath, join } from '../tools/path';
 import { WebDAVClientContext, WebDAVMethodOptions } from '../types';
-import { path } from '@nativescript/core';
 
 export async function deleteFile(context: WebDAVClientContext, filename: string, options: WebDAVMethodOptions = {}) {
     const requestOptions = prepareRequestOptions(
diff --git a/app/webdav/operations/exists.ts b/app/webdav/operations/exists.ts
index a5e2762c2..16ffcd6b8 100644
--- a/app/webdav/operations/exists.ts
+++ b/app/webdav/operations/exists.ts
@@ -1,5 +1,5 @@
-import { getStat } from './stat';
 import { WebDAVClientContext, WebDAVMethodOptions } from '../types';
+import { getStat } from './stat';
 
 export async function exists(context: WebDAVClientContext, remotePath: string, options: WebDAVMethodOptions = {}): Promise<boolean> {
     try {
diff --git a/app/webdav/operations/getQuota.ts b/app/webdav/operations/getQuota.ts
index 96fe0d886..f4c7bac96 100644
--- a/app/webdav/operations/getQuota.ts
+++ b/app/webdav/operations/getQuota.ts
@@ -2,10 +2,9 @@ import { SEPARATOR } from '~/utils/constants';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode, processResponsePayload } from '../response';
 import { parseXML } from '../tools/dav';
+import { join } from '../tools/path';
 import { parseQuota } from '../tools/quota';
 import { DiskQuota, GetQuotaOptions, ResponseDataDetailed, WebDAVClientContext } from '../types';
-import { path } from '@nativescript/core';
-import { join } from '../tools/path';
 
 export async function getQuota(context: WebDAVClientContext, options: GetQuotaOptions = {}): Promise<DiskQuota | null | ResponseDataDetailed<DiskQuota | null>> {
     const pathStr = options.path || SEPARATOR;
@@ -23,7 +22,7 @@ export async function getQuota(context: WebDAVClientContext, options: GetQuotaOp
     );
     const response = await request(requestOptions);
     await handleResponseCode(context, response, requestOptions);
-    const responseData = await response.content.toStringAsync();
+    const responseData = await response.text();
     const result = await parseXML(responseData);
     const quota = parseQuota(result);
     return processResponsePayload(response, quota, options.details);
diff --git a/app/webdav/operations/lock.ts b/app/webdav/operations/lock.ts
index cf90869c6..ae4270037 100644
--- a/app/webdav/operations/lock.ts
+++ b/app/webdav/operations/lock.ts
@@ -1,10 +1,9 @@
 import nestedProp from 'nested-property';
-import { encodePath, join } from '../tools/path';
-import { generateLockXML, parseGenericResponse } from '../tools/xml';
 import { prepareRequestOptions, request } from '../request';
 import { createErrorFromResponse, handleResponseCode } from '../response';
+import { encodePath, join } from '../tools/path';
+import { generateLockXML, parseGenericResponse } from '../tools/xml';
 import { Headers, LockOptions, LockResponse, WebDAVClientContext, WebDAVMethodOptions } from '../types';
-import { path } from '@nativescript/core';
 
 const DEFAULT_TIMEOUT = 'Infinite, Second-4100000000';
 
@@ -29,7 +28,7 @@ export async function lock(context: WebDAVClientContext, pathStr: string, option
     );
     const response = await request(requestOptions);
     await handleResponseCode(context, response, requestOptions);
-    const responseData = await response.content.toStringAsync();
+    const responseData = await response.text();
     const lockPayload = parseGenericResponse(responseData);
     const token = nestedProp.get(lockPayload, 'prop.lockdiscovery.activelock.locktoken.href');
     const serverTimeout = nestedProp.get(lockPayload, 'prop.lockdiscovery.activelock.timeout');
diff --git a/app/webdav/operations/moveFile.ts b/app/webdav/operations/moveFile.ts
index 3f61eb062..d5b8c8911 100644
--- a/app/webdav/operations/moveFile.ts
+++ b/app/webdav/operations/moveFile.ts
@@ -1,8 +1,7 @@
-import { encodePath, join } from '../tools/path';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode } from '../response';
+import { encodePath, join } from '../tools/path';
 import { WebDAVClientContext, WebDAVMethodOptions } from '../types';
-import { path } from '@nativescript/core';
 
 export async function moveFile(context: WebDAVClientContext, filename: string, destination: string, options: WebDAVMethodOptions = {}) {
     const requestOptions = prepareRequestOptions(
diff --git a/app/webdav/operations/putFileContents.ts b/app/webdav/operations/putFileContents.ts
index cb96c90b0..1c20b91e4 100644
--- a/app/webdav/operations/putFileContents.ts
+++ b/app/webdav/operations/putFileContents.ts
@@ -1,5 +1,5 @@
-import { File } from '@nativescript/core';
 import { HTTPError } from '@akylas/nativescript-app-utils/error';
+import { File } from '@nativescript/core';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode } from '../response';
 import { fromBase64 } from '../tools/encode';
diff --git a/app/webdav/operations/search.ts b/app/webdav/operations/search.ts
index c01c1e97c..40ff36f83 100644
--- a/app/webdav/operations/search.ts
+++ b/app/webdav/operations/search.ts
@@ -1,9 +1,8 @@
-import { parseSearch, parseXML } from '../tools/dav';
-import { encodePath, join } from '../tools/path';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode, processResponsePayload } from '../response';
+import { parseSearch, parseXML } from '../tools/dav';
+import { encodePath, join } from '../tools/path';
 import { ResponseDataDetailed, SearchOptions, SearchResult, WebDAVClientContext } from '../types';
-import { path } from '@nativescript/core';
 
 export async function getSearch(context: WebDAVClientContext, searchArbiter: string, options: SearchOptions = {}): Promise<SearchResult | ResponseDataDetailed<SearchResult>> {
     const { details: isDetailed = false } = options;
@@ -22,7 +21,7 @@ export async function getSearch(context: WebDAVClientContext, searchArbiter: str
     );
     const response = await request(requestOptions);
     await handleResponseCode(context, response, requestOptions);
-    const responseText = await response.content.toStringAsync();
+    const responseText = await response.text();
     const responseData = await parseXML(responseText);
     const results = parseSearch(responseData, searchArbiter, isDetailed);
     return processResponsePayload(response, results, isDetailed);
diff --git a/app/webdav/operations/stat.ts b/app/webdav/operations/stat.ts
index e37fab126..ded1fa1dc 100644
--- a/app/webdav/operations/stat.ts
+++ b/app/webdav/operations/stat.ts
@@ -1,9 +1,8 @@
-import { parseStat, parseXML } from '../tools/dav';
-import { encodePath, join } from '../tools/path';
 import { prepareRequestOptions, request } from '../request';
 import { handleResponseCode, processResponsePayload } from '../response';
+import { parseStat, parseXML } from '../tools/dav';
+import { encodePath, join } from '../tools/path';
 import { FileStat, ResponseDataDetailed, StatOptions, WebDAVClientContext } from '../types';
-import { path } from '@nativescript/core';
 
 export async function getStat(context: WebDAVClientContext, filename: string, options: StatOptions = {}): Promise<FileStat | ResponseDataDetailed<FileStat>> {
     const { details: isDetailed = false } = options;
@@ -21,7 +20,7 @@ export async function getStat(context: WebDAVClientContext, filename: string, op
     );
     const response = await request(requestOptions);
     await handleResponseCode(context, response, requestOptions);
-    const responseData = await response.content.toStringAsync();
+    const responseData = await response.text();
     const result = await parseXML(responseData);
     const stat = parseStat(result, filename, isDetailed);
     return processResponsePayload(response, stat, isDetailed);
diff --git a/app/webdav/request.ts b/app/webdav/request.ts
index a5b0362b9..ee0f37f47 100644
--- a/app/webdav/request.ts
+++ b/app/webdav/request.ts
@@ -1,5 +1,4 @@
-import { HttpsResponse, HttpsResponseLegacy, request } from '@nativescript-community/https';
-import { wrapNativeHttpException } from '~/services/api';
+import { request } from '~/services/api';
 import { generateDigestAuthHeader, parseDigestAuth } from './auth/digest';
 import { mergeHeaders } from './tools/headers';
 import { RequestOptions, RequestOptionsWithState, WebDAVClientContext, WebDAVMethodOptions } from './types';
@@ -15,21 +14,10 @@ export function prepareRequestOptions(requestOptions: RequestOptions | RequestOp
     return finalOptions;
 }
 
-async function _request<T = any>(requestOptions: RequestOptionsWithState) {
-    DEV_LOG && console.log('webdav request', JSON.stringify(requestOptions));
-    try {
-        const response = await request<T>({ ...requestOptions, body: requestOptions.data as any });
-        // DEV_LOG && console.log('webdavRequest response', response.statusCode, requestOptions.url);
-        return response;
-    } catch (error) {
-        DEV_LOG && console.error('webdavRequest error', error, error.stack);
-        throw wrapNativeHttpException(error, requestOptions);
-    }
-}
-async function webdavRequest<T>(requestOptions: RequestOptionsWithState): Promise<HttpsResponse<HttpsResponseLegacy<T>>> {
+async function webdavRequest<T = any>(requestOptions: RequestOptionsWithState) {
     // Client not configured for digest authentication
     if (!requestOptions._digest) {
-        return _request(requestOptions);
+        return request<T>(requestOptions);
     }
     // Remove client's digest authentication object from request options
     const _digest = requestOptions._digest;
@@ -40,13 +28,13 @@ async function webdavRequest<T>(requestOptions: RequestOptionsWithState): Promis
         requestOptions.headers.Authorization = generateDigestAuthHeader(requestOptions, _digest);
     }
     // Perform digest request + check
-    const response = await _request(requestOptions);
+    const response = await request<T>(requestOptions);
     if (response.statusCode === 401) {
         _digest.hasDigestAuth = parseDigestAuth(response, _digest);
         if (_digest.hasDigestAuth) {
             requestOptions.headers = requestOptions.headers || {};
             requestOptions.headers.Authorization = generateDigestAuthHeader(requestOptions, _digest);
-            const response2 = await _request(requestOptions);
+            const response2 = await request<T>(requestOptions);
             if (response2.statusCode === 401) {
                 _digest.hasDigestAuth = false;
             } else {
diff --git a/app/webdav/response.ts b/app/webdav/response.ts
index 755fb8cae..420fd2712 100644
--- a/app/webdav/response.ts
+++ b/app/webdav/response.ts
@@ -2,9 +2,10 @@ import { HTTPError } from '@akylas/nativescript-app-utils/error';
 import { parseRawXML } from './tools/dav';
 import { Response, ResponseDataDetailed, WebDAVClientContext } from './types';
 import { lc } from '@nativescript-community/l';
+import { RequestResponse } from '~/services/api';
 
-export async function createErrorFromResponse(response: Response, requestParams, prefix: string = '') {
-    const serverResponse = await response.content.toStringAsync();
+export async function createErrorFromResponse(response: RequestResponse, requestParams, prefix: string = '') {
+    const serverResponse = await response.text();
     const result = await parseRawXML(serverResponse);
 
     let error = result.error?.message;
@@ -19,7 +20,7 @@ export async function createErrorFromResponse(response: Response, requestParams,
     });
 }
 
-export async function handleResponseCode(context: WebDAVClientContext, response: Response, requestOptions) {
+export async function handleResponseCode<T = any>(context: WebDAVClientContext, response: RequestResponse<T>, requestOptions) {
     const { statusCode } = response;
     // if (statusCode === 401 && context.digest) return response;
     if (statusCode >= 400) {
@@ -44,14 +45,15 @@ export async function handleResponseCode(context: WebDAVClientContext, response:
  * @returns The response data, or a detailed response object
  *  if required
  */
-export function processResponsePayload<T, U extends boolean = false>(response: Response, data: T, isDetailed?: U): U extends true ? ResponseDataDetailed<T> : T {
+export function processResponsePayload<T, U extends boolean = false>(response: RequestResponse<T>, data: T, isDetailed?: U): U extends true ? ResponseDataDetailed<T> : T {
+    const httpResponse = response.response;
     return (
         isDetailed === true
             ? {
                   data,
-                  headers: response.headers,
+                  headers: httpResponse.headers,
                   status: response.statusCode,
-                  statusText: response.reason
+                  statusText: httpResponse.reason
               }
             : data
     ) as U extends true ? ResponseDataDetailed<T> : T;
diff --git a/app/webdav/types.ts b/app/webdav/types.ts
index 0b721f6d5..02bad8746 100644
--- a/app/webdav/types.ts
+++ b/app/webdav/types.ts
@@ -2,6 +2,8 @@ import { HttpsResponse, HttpsResponseLegacy } from '@nativescript-community/http
 import { File } from '@nativescript/core';
 import type { HTTPSOptions, Headers } from '~/services/api';
 
+export type * from '~/services/sync/interfaces';
+
 export type AuthHeader = string;
 export type { Headers };
 
@@ -140,7 +142,7 @@ export interface GetDirectoryContentsOptions extends WebDAVMethodOptions {
 
 export interface GetFileContentsOptions extends WebDAVMethodOptions {
     details?: boolean;
-    format?: 'binary' | 'text' | 'file';
+    format?: 'binary' | 'text' | 'file' | 'json';
     destinationFilePath?: string;
     onDownloadProgress?: ProgressEventCallback;
 }
@@ -191,21 +193,10 @@ export interface RequestOptions extends HTTPSOptions {
     // withCredentials?: boolean;
 }
 
-export type Response<T = any> = HttpsResponse<HttpsResponseLegacy<T>>;
-
 export interface RequestOptionsWithState extends RequestOptions {
     _digest?: DigestContext;
 }
 
-export type ResponseData = string | Buffer | ArrayBuffer | object | any[];
-
-export interface ResponseDataDetailed<T> {
-    data: T;
-    headers: Headers;
-    status: number;
-    statusText: string;
-}
-
 export type ResponseStatusValidator = (status: number) => boolean;
 
 export interface StatOptions extends WebDAVMethodOptions {
diff --git a/app/workers/SyncWorker.ts b/app/workers/SyncWorker.ts
index 8f87f5729..a0dd40e19 100644
--- a/app/workers/SyncWorker.ts
+++ b/app/workers/SyncWorker.ts
@@ -16,6 +16,12 @@ import { LocalFolderPDFSyncService } from '~/services/sync/LocalFolderPDFSyncSer
 import { type WebdavDataSyncOptions, WebdavDataSyncService } from '~/services/sync/WebdavDataSyncService';
 import { WebdavImageSyncService } from '~/services/sync/WebdavImageSyncService';
 import { WebdavPDFSyncService } from '~/services/sync/WebdavPDFSyncService';
+import { GoogleDriveDataSyncService } from '~/services/sync/GoogleDriveDataSyncService';
+import { GoogleDriveImageSyncService } from '~/services/sync/GoogleDriveImageSyncService';
+import { GoogleDrivePDFSyncService } from '~/services/sync/GoogleDrivePDFSyncService';
+import { OneDriveDataSyncService } from '~/services/sync/OneDriveDataSyncService';
+import { OneDriveImageSyncService } from '~/services/sync/OneDriveImageSyncService';
+import { OneDrivePDFSyncService } from '~/services/sync/OneDrivePDFSyncService';
 import { SYNC_TYPES, SyncType, getRemoteDeleteDocumentSettingsKey } from '~/services/sync/types';
 import { SyncNotificationManager } from '~/workers/SyncNotificationManager';
 import {
@@ -48,7 +54,13 @@ export const SERVICES_TYPE_MAP: { [key in SYNC_TYPES]: typeof BaseSyncService }
     webdav_pdf: WebdavPDFSyncService,
     webdav_image: WebdavImageSyncService,
     folder_image: LocalFolderImageSyncService,
-    folder_pdf: LocalFolderPDFSyncService
+    folder_pdf: LocalFolderPDFSyncService,
+    gdrive_data: GoogleDriveDataSyncService,
+    gdrive_image: GoogleDriveImageSyncService,
+    gdrive_pdf: GoogleDrivePDFSyncService,
+    onedrive_data: OneDriveDataSyncService,
+    onedrive_image: OneDriveImageSyncService,
+    onedrive_pdf: OneDrivePDFSyncService
 };
 
 const TAG = '[SyncWorker]';
diff --git a/package.json b/package.json
index 7d2632753..f0b8ad0be 100644
--- a/package.json
+++ b/package.json
@@ -47,11 +47,11 @@
         "@nativescript-community/css-theme": "1.2.14",
         "@nativescript-community/extendedinfo": "1.3.1",
         "@nativescript-community/gesturehandler": "2.0.43",
-        "@nativescript-community/https": "4.1.27",
-        "@nativescript-community/l": "4.3.10",
+        "@nativescript-community/https": "4.1.29",
+        "@nativescript-community/l": "4.3.11",
         "@nativescript-community/licenses": "2.0.9",
         "@nativescript-community/md5": "1.0.5",
-        "@nativescript-community/perms": "3.0.4",
+        "@nativescript-community/perms": "3.0.11",
         "@nativescript-community/preferences": "1.3.2",
         "@nativescript-community/sentry": "4.6.45",
         "@nativescript-community/sqlite": "3.5.1",
@@ -62,37 +62,37 @@
         "@nativescript-community/ui-canvas": "4.6.46",
         "@nativescript-community/ui-canvaslabel": "1.2.49",
         "@nativescript-community/ui-checkbox": "2.0.18",
-        "@nativescript-community/ui-collectionview": "6.0.17",
-        "@nativescript-community/ui-collectionview-swipemenu": "6.0.17",
+        "@nativescript-community/ui-collectionview": "6.0.18",
+        "@nativescript-community/ui-collectionview-swipemenu": "6.0.18",
         "@nativescript-community/ui-document-picker": "1.1.29",
-        "@nativescript-community/ui-image": "4.6.8",
-        "@nativescript-community/ui-image-colorfilter": "4.6.8",
+        "@nativescript-community/ui-image": "4.6.12",
+        "@nativescript-community/ui-image-colorfilter": "4.6.12",
         "@nativescript-community/ui-label": "1.3.42",
         "@nativescript-community/ui-lottie": "~5.0.11",
-        "@nativescript-community/ui-material-activityindicator": "7.2.78",
-        "@nativescript-community/ui-material-bottomsheet": "7.2.78",
-        "@nativescript-community/ui-material-button": "7.2.78",
-        "@nativescript-community/ui-material-dialogs": "7.2.78",
-        "@nativescript-community/ui-material-progress": "7.2.78",
-        "@nativescript-community/ui-material-slider": "7.2.78",
-        "@nativescript-community/ui-material-snackbar": "7.2.78",
-        "@nativescript-community/ui-material-switch": "7.2.78",
-        "@nativescript-community/ui-material-tabs": "7.2.78",
-        "@nativescript-community/ui-material-textfield": "7.2.78",
-        "@nativescript-community/ui-material-textview": "7.2.78",
+        "@nativescript-community/ui-material-activityindicator": "7.2.79",
+        "@nativescript-community/ui-material-bottomsheet": "7.2.79",
+        "@nativescript-community/ui-material-button": "7.2.79",
+        "@nativescript-community/ui-material-dialogs": "7.2.79",
+        "@nativescript-community/ui-material-progress": "7.2.79",
+        "@nativescript-community/ui-material-slider": "7.2.79",
+        "@nativescript-community/ui-material-snackbar": "7.2.79",
+        "@nativescript-community/ui-material-switch": "7.2.79",
+        "@nativescript-community/ui-material-tabs": "7.2.79",
+        "@nativescript-community/ui-material-textfield": "7.2.79",
+        "@nativescript-community/ui-material-textview": "7.2.79",
         "@nativescript-community/ui-pager": "14.1.34",
         "@nativescript-community/ui-pager-indicator": "14.1.34",
         "@nativescript-community/ui-popover": "0.1.22",
         "@nativescript-community/ui-share-file": "1.3.3",
         "@nativescript-community/ui-svg": "0.2.18",
         "@nativescript-community/ui-webview": "1.6.0",
-        "@nativescript-community/ui-zoomimage": "4.6.8",
+        "@nativescript-community/ui-zoomimage": "4.6.12",
         "@nativescript/biometrics": "1.3.1",
         "@nativescript/datetimepicker": "3.0.0",
         "@nativescript/imagepicker": "5.0.0",
         "buffer": "^6.0.3",
         "dayjs": "1.11.19",
-        "fast-xml-parser": "4.5.3",
+        "fast-xml-parser": "4.5.5",
         "filesize": "10.1.6",
         "helpful-decorators": "2.1.0",
         "make-error": "1.3.6",
diff --git a/plugin-nativeprocessor/platforms/android/java/com/akylas/documentscanner/utils/FileUtils.kt b/plugin-nativeprocessor/platforms/android/java/com/akylas/documentscanner/utils/FileUtils.kt
index 46798eed3..55faf2865 100644
--- a/plugin-nativeprocessor/platforms/android/java/com/akylas/documentscanner/utils/FileUtils.kt
+++ b/plugin-nativeprocessor/platforms/android/java/com/akylas/documentscanner/utils/FileUtils.kt
@@ -68,5 +68,5 @@ class FileUtils {
 
             return outDoc.uri.toString()
         }
-}
+    }
 }
\ No newline at end of file
diff --git a/plugin-shared/platforms/android/java/com/akylas/documentscanner/AndroidSharedUtils.kt b/plugin-shared/platforms/android/java/com/akylas/documentscanner/AndroidSharedUtils.kt
index fd42299f4..fd9550da5 100644
--- a/plugin-shared/platforms/android/java/com/akylas/documentscanner/AndroidSharedUtils.kt
+++ b/plugin-shared/platforms/android/java/com/akylas/documentscanner/AndroidSharedUtils.kt
@@ -1,39 +1,57 @@
+package com.akylas.documentscanner
+
 import android.os.Environment
 import android.os.StatFs
 
-object AndroidSharedUtils {
-
-    /**
-     * Returns available storage space in bytes.
-     *
-     * @param useExternal If true, checks external storage; otherwise internal storage.
-     */
-    fun availableStorageSpaceInBytes(useExternal: Boolean = false): Long {
-        return try {
-            val path = if (useExternal) {
-                Environment.getExternalStorageDirectory()
-            } else {
-                Environment.getDataDirectory()
+import java.security.MessageDigest
+import java.util.Base64
+
+class AndroidSharedUtils {
+    companion object {
+
+        /**
+         * Returns available storage space in bytes.
+         *
+         * @param useExternal If true, checks external storage; otherwise internal storage.
+         */
+        fun availableStorageSpaceInBytes(useExternal: Boolean = false): Long {
+            return try {
+                val path = if (useExternal) {
+                    Environment.getExternalStorageDirectory()
+                } else {
+                    Environment.getDataDirectory()
+                }
+
+                val stat = StatFs(path.path)
+                stat.availableBytes
+            } catch (e: Exception) {
+                e.printStackTrace()
+                0L
             }
+        }
 
-            val stat = StatFs(path.path)
-            stat.availableBytes
-        } catch (e: Exception) {
-            e.printStackTrace()
-            0L
+        /**
+         * Checks if available storage is greater than given size.
+         *
+         * @param sizeBytes Required free space in bytes
+         * @param useExternal If true, checks external storage; otherwise internal storage
+         */
+        fun checkAvailableStorage(
+            sizeBytes: Long,
+            useExternal: Boolean = false
+        ): Boolean {
+            return availableStorageSpaceInBytes(useExternal) > sizeBytes
+        }
+
+        fun generateCodeChallenge(codeVerifier: String): String {
+            // SHA-256 hash
+            val digest = MessageDigest.getInstance("SHA-256")
+                .digest(codeVerifier.toByteArray(Charsets.UTF_8))
+
+            // Base64 URL-safe encoding (no padding)
+            return Base64.getUrlEncoder()
+                .withoutPadding()
+                .encodeToString(digest)
+        }
         }
-    }
-
-    /**
-     * Checks if available storage is greater than given size.
-     *
-     * @param sizeBytes Required free space in bytes
-     * @param useExternal If true, checks external storage; otherwise internal storage
-     */
-    fun checkAvailableStorage(
-        sizeBytes: Long,
-        useExternal: Boolean = false
-    ): Boolean {
-        return availableStorageSpaceInBytes(useExternal) > sizeBytes
-    }
 }
\ No newline at end of file
diff --git a/plugin-shared/platforms/android/native-api-usage.json b/plugin-shared/platforms/android/native-api-usage.json
index 1ab3df710..6aa0f3592 100644
--- a/plugin-shared/platforms/android/native-api-usage.json
+++ b/plugin-shared/platforms/android/native-api-usage.json
@@ -1,5 +1,7 @@
 {
     "uses": [
+        "com.akylas.documentscanner:AndroidSharedUtils",
+        "com.akylas.documentscanner:AndroidSharedUtils.Companion",
         "android.graphics:Bitmap.CompressFormat",
         "android.view:OrientationEventListener",
         "com.google.android.material.color:DynamicColors",
diff --git a/plugin-shared/platforms/ios/src/IOSSharedUtils.swift b/plugin-shared/platforms/ios/src/IOSSharedUtils.swift
index 740ae0dec..c9dc6682d 100644
--- a/plugin-shared/platforms/ios/src/IOSSharedUtils.swift
+++ b/plugin-shared/platforms/ios/src/IOSSharedUtils.swift
@@ -1,6 +1,7 @@
 
 import Foundation
 import AVFoundation
+import CryptoKit
 
 // MARK: - FileManager
 
@@ -23,7 +24,6 @@ extension FileManager {
         }
         return 0
     }
-
 }
 
 
@@ -33,4 +33,26 @@ class IOSSharedUtils : NSObject {
     static func checkAvailableStorage(_ sizeBytes: UInt64) {
         return FileManager.availableStorageSpaceInBytes() > sizeBytes
     }
+
+    static func generateCodeChallenge(_ codeVerifier: String) -> String {
+        // Convert string to Data
+        let data = Data(codeVerifier.utf8)
+
+        // SHA-256 hash
+        let hash = SHA256.hash(data: data)
+
+        // Convert to Data
+        let hashData = Data(hash)
+
+        // Base64 encode
+        let base64 = hashData.base64EncodedString()
+
+        // Convert to Base64 URL-safe (no padding)
+        let base64url = base64
+            .replacingOccurrences(of: "=", with: "")
+            .replacingOccurrences(of: "+", with: "-")
+            .replacingOccurrences(of: "/", with: "_")
+
+        return base64url
+    }
 }
\ No newline at end of file
diff --git a/tools b/tools
index b7c083ff0..b14ce12f1 160000
--- a/tools
+++ b/tools
@@ -1 +1 @@
-Subproject commit b7c083ff0c2d5acff443410c52d6709b0e65bff1
+Subproject commit b14ce12f113dec8dcb2fb1ad8cf26119584d5f43
diff --git a/typings/references.d.ts b/typings/references.d.ts
index 29efd200d..0eabeae25 100644
--- a/typings/references.d.ts
+++ b/typings/references.d.ts
@@ -16,3 +16,7 @@
 declare const START_ON_CAM: boolean;
 declare const CARD_APP: boolean;
 declare const MDI_FONT_FAMILY: string;
+declare const GOOGLE_OAUTH_CLIENT_ID: string;
+declare const GOOGLE_OAUTH_CLIENT_SECRET: string;
+declare const ONEDRIVE_OAUTH_CLIENT_ID: string;
+declare const ONEDRIVE_OAUTH_CLIENT_SECRET: string;
diff --git a/yarn.lock b/yarn.lock
index b97e81f20..174a6fe6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27,7 +27,7 @@ __metadata:
 
 "@akylas/nativescript-app-tools@file:tools::locator=root-workspace-0b6124%40workspace%3A.":
   version: 1.0.0
-  resolution: "@akylas/nativescript-app-tools@file:tools#tools::hash=d9f62e&locator=root-workspace-0b6124%40workspace%3A."
+  resolution: "@akylas/nativescript-app-tools@file:tools#tools::hash=4e6274&locator=root-workspace-0b6124%40workspace%3A."
   dependencies:
     "@dotenvx/dotenvx": "npm:1.51.4"
     "@nativescript-community/fontmin": "npm:0.9.11"
@@ -81,7 +81,7 @@ __metadata:
     typescript: "npm:5.9.3"
     typescript-eslint: "npm:8.53.0"
     webpack-bundle-analyzer: "npm:4.10.2"
-  checksum: 10/c444838873b59a58fa1fdfe0f0918b35b874c7c7b57e5eea46ebfd677e74ad49e45ef4a7fb70d342ce3b1fbb3648c086e1d56232800c7b3800ff64b21c456bb8
+  checksum: 10/00bfa60a656506d22cb0087cafe5906bbc0bde591e9201363f52ba4dd7e81514c7831bfd494f1afe92ea6f14bd69a3a2ba916cfe95eabdc188af3b5c21c024c3
   languageName: node
   linkType: hard
 
@@ -1038,6 +1038,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nativescript-community/https@npm:4.1.29":
+  version: 4.1.29
+  resolution: "@nativescript-community/https@npm:4.1.29"
+  checksum: 10/5ddcd2f94534309bffdf27526af8170606db33509745298abdd822858580f646aa4830576a47e7009680b9034d358f9a7dba1c739bb44bb0c462334ffd36af4d
+  languageName: node
+  linkType: hard
+
 "@nativescript-community/l@npm:4.3.10":
   version: 4.3.10
   resolution: "@nativescript-community/l@npm:4.3.10"
@@ -1051,6 +1058,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nativescript-community/l@npm:4.3.11":
+  version: 4.3.11
+  resolution: "@nativescript-community/l@npm:4.3.11"
+  dependencies:
+    "@nativescript/hook": "npm:~2.0.0"
+    mkdirp: "npm:^1.0.4"
+    shorthash: "npm:0.0.2"
+    simple-plist: "npm:^1.1.1"
+    sprintf-js: "npm:^1.1.2"
+  checksum: 10/8e41b69daffe236c22d6f86d40950e3245990ec16263803db4cd2d219da021c75a581e5241117f4a5770db3dc922cb71f0a7facc33b9556bc02d86b8ef7f13fe
+  languageName: node
+  linkType: hard
+
 "@nativescript-community/licenses@npm:2.0.9":
   version: 2.0.9
   resolution: "@nativescript-community/licenses@npm:2.0.9"
@@ -1075,10 +1095,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nativescript-community/perms@npm:3.0.4":
-  version: 3.0.4
-  resolution: "@nativescript-community/perms@npm:3.0.4"
-  checksum: 10/11e64f6fa79a115e920e9a00567effeef6cae84c4e48dd597b24bd0517f8c9bb9269e30bada3f569520670d75a07733e8c452d4955012b3b1701d7c0a2f48ca5
+"@nativescript-community/perms@npm:3.0.11":
+  version: 3.0.11
+  resolution: "@nativescript-community/perms@npm:3.0.11"
+  checksum: 10/c38616a5fa0ea8bc1e27bdfab12bdd1a011711d6018a1462e4af70e425b956f992dceda7a7fa5906dbc857a130821a5eab2efd210c8d5ed1570aa6234390ebcb
   languageName: node
   linkType: hard
 
@@ -1216,23 +1236,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-collectionview-swipemenu@npm:6.0.17":
-  version: 6.0.17
-  resolution: "@nativescript-community/ui-collectionview-swipemenu@npm:6.0.17"
+"@nativescript-community/ui-collectionview-swipemenu@npm:6.0.18":
+  version: 6.0.18
+  resolution: "@nativescript-community/ui-collectionview-swipemenu@npm:6.0.18"
   dependencies:
     "@nativescript-community/class-mixins": "npm:^1.0.0"
-    "@nativescript-community/ui-collectionview": "npm:^6.0.17"
+    "@nativescript-community/ui-collectionview": "npm:^6.0.18"
     "@nativescript-community/ui-drawer": "npm:^0.1.31"
-  checksum: 10/904a87d04adae1663bf8855f1eac75853ad5cccfee10175755b29616fd9bf2b5f7946c1ef5ce9fed4797492b3a115521f18c6e495a69b6b40d763a3fabbc1ecb
+  checksum: 10/429ba46b2309c81a9b2ace018124ae64b9613a5fd25719fc41aa874627c8850660e2da4a20af202812e0a7ad1f1f7156884c5211f39d92caa22fd2bc17509add
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-collectionview@npm:6.0.17, @nativescript-community/ui-collectionview@npm:^6.0.17":
-  version: 6.0.17
-  resolution: "@nativescript-community/ui-collectionview@npm:6.0.17"
+"@nativescript-community/ui-collectionview@npm:6.0.18, @nativescript-community/ui-collectionview@npm:^6.0.18":
+  version: 6.0.18
+  resolution: "@nativescript-community/ui-collectionview@npm:6.0.18"
   dependencies:
     "@nativescript-community/arraybuffers": "npm:^1.1.5"
-  checksum: 10/f046c656d63fbc62e9262403e979f7c1621691a78c2c649ac87061a81c59405d61cb544054a6c1cdf51dc3fdfb8d4f54e0776e2b55b28cf54838fc3fce62cc1f
+  checksum: 10/7f80f364ca8d17d7eb2adfd5d961ce8166baaeff4b6c4699dc7d8602efe5102b81bfd1e95d710ca43efdf26e86e8716838889703c246f4386ccd335fe82c2dcb
   languageName: node
   linkType: hard
 
@@ -1254,19 +1274,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-image-colorfilter@npm:4.6.8":
-  version: 4.6.8
-  resolution: "@nativescript-community/ui-image-colorfilter@npm:4.6.8"
+"@nativescript-community/ui-image-colorfilter@npm:4.6.12":
+  version: 4.6.12
+  resolution: "@nativescript-community/ui-image-colorfilter@npm:4.6.12"
   dependencies:
-    "@nativescript-community/ui-image": "npm:^4.6.8"
-  checksum: 10/61d5e0b7894c8841f5d1d0ac4d98457e0acd88468d91b3e25368e2762cc481eed79e66d44b994f3b831a302d84ce30312f0f5a4a8a5ff78a34132fbe5a90766b
+    "@nativescript-community/ui-image": "npm:^4.6.12"
+  checksum: 10/c5e98dcf01210fced60bfdc65d6e2fe5af8aba81edbd1ea0457aaba57fd3a1146dfb027a1232300628bb3fddf493b2297095ce18f483d020a82c5997fcbcfaac
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-image@npm:4.6.8, @nativescript-community/ui-image@npm:^4.6.8":
-  version: 4.6.8
-  resolution: "@nativescript-community/ui-image@npm:4.6.8"
-  checksum: 10/f7f223c083170549095f2f8759a0d8bc9a8eca3f13fe7375c87f8b403a6c99e1b7845ac84ce04aa723ee75366bc75f6809f67291a285de53ba316246caf488c9
+"@nativescript-community/ui-image@npm:4.6.12, @nativescript-community/ui-image@npm:^4.6.12":
+  version: 4.6.12
+  resolution: "@nativescript-community/ui-image@npm:4.6.12"
+  checksum: 10/0c665010be90e80e901a094c221df75bc7c438dea2bebf00298d651d715f535c8524f7e3ef36c9cf76fc0ab28c17865e5358851bd4ab9a36499324fda70e64ac
   languageName: node
   linkType: hard
 
@@ -1286,123 +1306,123 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-activityindicator@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-activityindicator@npm:7.2.78"
+"@nativescript-community/ui-material-activityindicator@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-activityindicator@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/4fbade1a080d3a27934de8dbff48547ba99246a125e8ceacfce07e136633b755e5a1d7a2008bfbeda0e1fdb7b94ac3e591808c497cef85b99ee7b95b286ceac6
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/bbb80e99412def37feba041aa1861c9d1474fc3cc7e327958dc9125f32f4a4f5471c4a59da7b7a62f9d472866ba8c84ea8b09e638143a5e5be54849cbe2c48dc
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-bottomsheet@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-bottomsheet@npm:7.2.78"
+"@nativescript-community/ui-material-bottomsheet@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-bottomsheet@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/cece8a5c1b82fedd70a8ea4722ec7d026686387d62890333c01b7b83f7a2d297c25bd5c604afa24fa0dbdd111521e034136946afc17f1636d035830778322b4f
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/526f0710b1da8e54248a231f5d7d0bf8e234d2baeebe7dafc173bc320933d8cdd02f92eff8055ad390646480481b9679b3659e1b1d163f9ae1316eac85dede2a
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-button@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-button@npm:7.2.78"
+"@nativescript-community/ui-material-button@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-button@npm:7.2.79"
   dependencies:
     "@nativescript-community/text": "npm:^1.5.2"
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/e28d66741eb2d4cfaf2e2e0e67119b60667f3b2eaeb32bb9e919ec37fcf9cf87b7b289a1eb4bce7aa0a12c343df23be002575c3dfbaad15497d1a4d98ee222a0
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/8ad6ec51c02c03864d4997bfe4f1fda3d522c1832a71bedc44fbdbf8188e15eb78ac32bc101d3cf982770127e97451a89ab46f835940a650ea0c4e3d349bd192
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-core-tabs@npm:^7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-core-tabs@npm:7.2.78"
+"@nativescript-community/ui-material-core-tabs@npm:^7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-core-tabs@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/13801009a30d5139728cfd71a4020b1c5db4518defd80948dc1aecaca51a6ef40e1d4fd26f0cef59028602c81a7d1b2935b72818ab32ad31ca370e22fedc65b5
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/b9d421f592270002d4048b6c553f5c8d5caa06e5ea6b1cf85c8da468f0a2d389ed7a18406e6cb4f6bd0ffe24851a14206e05999ba6aa3b0860330f0eb70f1df7
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-core@npm:^7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-core@npm:7.2.78"
-  checksum: 10/079f32b9fd7100d856d7fbcf067d724614af7e6f9e7dab0a3ff71075026dd50fa934ca52395b3df29ffcb69b77f2fddaa1d44941571d9a99c1869cd55cb844d3
+"@nativescript-community/ui-material-core@npm:^7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-core@npm:7.2.79"
+  checksum: 10/d2c103068bd48f367751085a4a41036883fecd7bde01df2849dac2978dc57d932b544cfdb7fe7b4e8d063c4263875d5126ec6735e8fa05c38fe26ab878ec21d3
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-dialogs@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-dialogs@npm:7.2.78"
+"@nativescript-community/ui-material-dialogs@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-dialogs@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-    "@nativescript-community/ui-material-textfield": "npm:^7.2.78"
-  checksum: 10/7a3515f8acdb399c91999945d5dda11590ad3147af16a6eaf3688006aa41dcf5cd76d1503fea9272889989cd66477989d58328562ec4d84db6e1a6403e378831
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+    "@nativescript-community/ui-material-textfield": "npm:^7.2.79"
+  checksum: 10/7ec255f8e895fee0daf76c4c8353181e9f929a2a8eaffceb79802dd209f88d034f705bf7a4140b5891323f9c30bcf9e06cb4242c9781fa294b21a133cc70913a
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-progress@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-progress@npm:7.2.78"
+"@nativescript-community/ui-material-progress@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-progress@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/d13c96df0c62e10b55a136b7a3ba05d4d13d116f1c5590f724c81c588255f7e3453b48d9d6ba5a8140a35152d787aff0e9ef5b062d3e91da959232383e83edbf
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/8a6816e2221cbd868c0e2bcf8dfdb79b775b1cd443378aaf51aac857b717e7a416f5968397fb9aa26dbcc29aee1209d82fcd9801674e4bfa6ae7fd65520e7406
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-slider@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-slider@npm:7.2.78"
+"@nativescript-community/ui-material-slider@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-slider@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/cceecacc1404f1dd2cbb4514c5ba15357692c768433598f8ad5e0006d730e30aaa7bbd16d99830f7f589ca79361ac0b4a1586d4f9f897ca1067571e7d97ff2ab
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/1c6b831c969009bf4ef9a5b7b33a536ca62865ce660b108c3116323340b2974496bc49571d19ae18db0148d01d949bbd79f26c6c920354aa5e5c12bec0036249
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-snackbar@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-snackbar@npm:7.2.78"
+"@nativescript-community/ui-material-snackbar@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-snackbar@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/cefea1c0ca1023563d2562b4450448b4ad92fdf82c49b9080f5c03efc103f56c6adb4e26aef264e8f741a16adb2deb7e421eaef5efac2fc6e00eab599a35fede
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/6243d9101faffb125c3cb475a205f30bd221ada3592616312c03d8ed1eade17be4cb36847236736c8c1b3d98dd7dd0bf828643c38076690888932452ba974531
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-switch@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-switch@npm:7.2.78"
+"@nativescript-community/ui-material-switch@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-switch@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/4b06a3caa3bf1102ca3402f4cfdf3ea7a272c47c85cfb7fa8e7a6838d1e88f69e6c8aff98780f09057ddd659f4e67289c7f330da55fef23737011edf194bbaff
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/eed60489e29fb32025b14f54826fad85837a0861843420ae0f1bfaaf584f24447230a74f4cb9d473390799928f28ffbbc7680e2a47560a748bfe85a66d2be10c
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-tabs@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-tabs@npm:7.2.78"
+"@nativescript-community/ui-material-tabs@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-tabs@npm:7.2.79"
   dependencies:
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-    "@nativescript-community/ui-material-core-tabs": "npm:^7.2.78"
-  checksum: 10/a3aa5d0ad526d5534e36c6b208aee3be95d688bb74a1a1f4dc9a05dbac16299e4338dd71e7d861de43a30192b2550c7b0764e51d549529387f609b6bbd9ad3b8
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+    "@nativescript-community/ui-material-core-tabs": "npm:^7.2.79"
+  checksum: 10/ba4bbea8f620a5dc8bff06f9a479b57844f71f050b9e46e1178b841f299ac9b537da051f5c0c8d85b6fc8645f7335c27ba693d45ce154198a12402d78f47aa59
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-textfield@npm:7.2.78, @nativescript-community/ui-material-textfield@npm:^7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-textfield@npm:7.2.78"
+"@nativescript-community/ui-material-textfield@npm:7.2.79, @nativescript-community/ui-material-textfield@npm:^7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-textfield@npm:7.2.79"
   dependencies:
     "@nativescript-community/text": "npm:^1.5.33"
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/e4df86d3c930384bf566048d6afdc36fff91963dfadb957f835a155078b485718f8856c0742ff04bbe6139cc2138a1608051bb03adbd22d6bcb130115d330a87
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/c070c6956d325e023e9155da5ed39a7c9833aca38f4e77c00e65b83149455a67aeb0c1126cbec10cf6fab9d6b738e399382d075bbfc61b244670e38e52d78e6a
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-material-textview@npm:7.2.78":
-  version: 7.2.78
-  resolution: "@nativescript-community/ui-material-textview@npm:7.2.78"
+"@nativescript-community/ui-material-textview@npm:7.2.79":
+  version: 7.2.79
+  resolution: "@nativescript-community/ui-material-textview@npm:7.2.79"
   dependencies:
     "@nativescript-community/text": "npm:^1.5.33"
-    "@nativescript-community/ui-material-core": "npm:^7.2.78"
-  checksum: 10/4da65fec963a266e8644f3a537fa2d3d8db61860e46ba9d2fd5791f54655406e0560e2692981d3918584488fc5e601ba636c89951d00e5cafc410242898bd06e
+    "@nativescript-community/ui-material-core": "npm:^7.2.79"
+  checksum: 10/52e3b3a0953c4071ea0d9e19591a150353333879e851efab2fbebd063015cd5035e3c1a8b029145d3ab4323299398df709d167354f1cdad3370c07d93fc24bd8
   languageName: node
   linkType: hard
 
@@ -1452,12 +1472,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nativescript-community/ui-zoomimage@npm:4.6.8":
-  version: 4.6.8
-  resolution: "@nativescript-community/ui-zoomimage@npm:4.6.8"
+"@nativescript-community/ui-zoomimage@npm:4.6.12":
+  version: 4.6.12
+  resolution: "@nativescript-community/ui-zoomimage@npm:4.6.12"
   dependencies:
-    "@nativescript-community/ui-image": "npm:^4.6.8"
-  checksum: 10/a50d0cf39a8876c16103f1ee9ca8bfbed5d3a7aef2a568f3f87645771af9b346b8253946d5aad1987fea9b88d442dc4422230e48768373d7dbc063d3d0207aa9
+    "@nativescript-community/ui-image": "npm:^4.6.12"
+  checksum: 10/25beef7110235228493566a8104ac72ab9d3594fdb8fa153671e77b07b63a077eadc7eef2e3a94d37b0b4e2b49ed1acc7c42a2de14ba64e23b89df3de8b4cef9
   languageName: node
   linkType: hard
 
@@ -6230,14 +6250,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-xml-parser@npm:4.5.3":
-  version: 4.5.3
-  resolution: "fast-xml-parser@npm:4.5.3"
+"fast-xml-parser@npm:4.5.5":
+  version: 4.5.5
+  resolution: "fast-xml-parser@npm:4.5.5"
   dependencies:
-    strnum: "npm:^1.1.1"
+    strnum: "npm:^1.0.5"
   bin:
     fxparser: src/cli/cli.js
-  checksum: 10/ca22bf9d65c10b8447c1034c13403e90ecee210e2b3852690df3d8a42b8a46ec655fae7356096abd98a15b89ddaf11878587b1773e0c3be4cbc2ac4af4c7bf95
+  checksum: 10/4820da92160724be9c8cc8df6f0c7bd6c9c3bcd0396ed88cedd28eebd0bf0553bc0899cbad4ba615c6fd9f21e410a7723123c416974f52390721720cadf3c455
   languageName: node
   linkType: hard
 
@@ -10348,11 +10368,11 @@ __metadata:
     "@nativescript-community/css-theme": "npm:1.2.14"
     "@nativescript-community/extendedinfo": "npm:1.3.1"
     "@nativescript-community/gesturehandler": "npm:2.0.43"
-    "@nativescript-community/https": "npm:4.1.27"
-    "@nativescript-community/l": "npm:4.3.10"
+    "@nativescript-community/https": "npm:4.1.29"
+    "@nativescript-community/l": "npm:4.3.11"
     "@nativescript-community/licenses": "npm:2.0.9"
     "@nativescript-community/md5": "npm:1.0.5"
-    "@nativescript-community/perms": "npm:3.0.4"
+    "@nativescript-community/perms": "npm:3.0.11"
     "@nativescript-community/preferences": "npm:1.3.2"
     "@nativescript-community/sentry": "npm:4.6.45"
     "@nativescript-community/sqlite": "npm:3.5.1"
@@ -10363,38 +10383,38 @@ __metadata:
     "@nativescript-community/ui-canvas": "npm:4.6.46"
     "@nativescript-community/ui-canvaslabel": "npm:1.2.49"
     "@nativescript-community/ui-checkbox": "npm:2.0.18"
-    "@nativescript-community/ui-collectionview": "npm:6.0.17"
-    "@nativescript-community/ui-collectionview-swipemenu": "npm:6.0.17"
+    "@nativescript-community/ui-collectionview": "npm:6.0.18"
+    "@nativescript-community/ui-collectionview-swipemenu": "npm:6.0.18"
     "@nativescript-community/ui-document-picker": "npm:1.1.29"
-    "@nativescript-community/ui-image": "npm:4.6.8"
-    "@nativescript-community/ui-image-colorfilter": "npm:4.6.8"
+    "@nativescript-community/ui-image": "npm:4.6.12"
+    "@nativescript-community/ui-image-colorfilter": "npm:4.6.12"
     "@nativescript-community/ui-label": "npm:1.3.42"
     "@nativescript-community/ui-lottie": "npm:~5.0.11"
-    "@nativescript-community/ui-material-activityindicator": "npm:7.2.78"
-    "@nativescript-community/ui-material-bottomsheet": "npm:7.2.78"
-    "@nativescript-community/ui-material-button": "npm:7.2.78"
-    "@nativescript-community/ui-material-dialogs": "npm:7.2.78"
-    "@nativescript-community/ui-material-progress": "npm:7.2.78"
-    "@nativescript-community/ui-material-slider": "npm:7.2.78"
-    "@nativescript-community/ui-material-snackbar": "npm:7.2.78"
-    "@nativescript-community/ui-material-switch": "npm:7.2.78"
-    "@nativescript-community/ui-material-tabs": "npm:7.2.78"
-    "@nativescript-community/ui-material-textfield": "npm:7.2.78"
-    "@nativescript-community/ui-material-textview": "npm:7.2.78"
+    "@nativescript-community/ui-material-activityindicator": "npm:7.2.79"
+    "@nativescript-community/ui-material-bottomsheet": "npm:7.2.79"
+    "@nativescript-community/ui-material-button": "npm:7.2.79"
+    "@nativescript-community/ui-material-dialogs": "npm:7.2.79"
+    "@nativescript-community/ui-material-progress": "npm:7.2.79"
+    "@nativescript-community/ui-material-slider": "npm:7.2.79"
+    "@nativescript-community/ui-material-snackbar": "npm:7.2.79"
+    "@nativescript-community/ui-material-switch": "npm:7.2.79"
+    "@nativescript-community/ui-material-tabs": "npm:7.2.79"
+    "@nativescript-community/ui-material-textfield": "npm:7.2.79"
+    "@nativescript-community/ui-material-textview": "npm:7.2.79"
     "@nativescript-community/ui-pager": "npm:14.1.34"
     "@nativescript-community/ui-pager-indicator": "npm:14.1.34"
     "@nativescript-community/ui-popover": "npm:0.1.22"
     "@nativescript-community/ui-share-file": "npm:1.3.3"
     "@nativescript-community/ui-svg": "npm:0.2.18"
     "@nativescript-community/ui-webview": "npm:1.6.0"
-    "@nativescript-community/ui-zoomimage": "npm:4.6.8"
+    "@nativescript-community/ui-zoomimage": "npm:4.6.12"
     "@nativescript/biometrics": "npm:1.3.1"
     "@nativescript/core": "npm:8.9.9"
     "@nativescript/datetimepicker": "npm:3.0.0"
     "@nativescript/imagepicker": "npm:5.0.0"
     buffer: "npm:^6.0.3"
     dayjs: "npm:1.11.19"
-    fast-xml-parser: "npm:4.5.3"
+    fast-xml-parser: "npm:4.5.5"
     filesize: "npm:10.1.6"
     helpful-decorators: "npm:2.1.0"
     make-error: "npm:1.3.6"
@@ -11227,7 +11247,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strnum@npm:^1.1.1":
+"strnum@npm:^1.0.5":
   version: 1.1.2
   resolution: "strnum@npm:1.1.2"
   checksum: 10/ccd6297a1fdaf0fc8ea0ea904acdae76878d49a4b0d98a70155df4bc081fd88eac5ec99fb150f3d1d1af065c1898d38420705259ba6c39aa850c671bcd54e35d