diff --git a/app/frontend.py b/app/frontend.py
index b38befc1..35954cb7 100644
--- a/app/frontend.py
+++ b/app/frontend.py
@@ -70,6 +70,7 @@ async def status_dashboard(request: Request):
         {
             "request": request, 
             "providers": providers,
+            "app_version": settings.version,  # Add app version to the context
             "debug_enabled": getattr(settings, 'debug', False),
             "last_check": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
         }
diff --git a/app/utils/config_validator.py b/app/utils/config_validator.py
index 6bc87ea3..767a96aa 100644
--- a/app/utils/config_validator.py
+++ b/app/utils/config_validator.py
@@ -137,125 +137,223 @@ def validate_storage_configs():
     
     return issues
 
+def mask_sensitive_value(value):
+    """Helper function to mask sensitive values consistently"""
+    if not value:
+        return "Not set"
+    
+    if isinstance(value, str):
+        if len(value) > 10:
+            visible_start = max(1, len(value) // 3)
+            visible_end = max(1, len(value) // 4)
+            return f"{value[:visible_start]}{'*' * (len(value) - visible_start - visible_end)}{value[-visible_end:]}"
+        else:
+            return f"{value[:2]}{'*' * (len(value) - 4)}{value[-2:]}" if len(value) > 4 else "****"
+    elif not isinstance(value, (bool, int, float)):
+        return "**Configured Value**"
+    return str(value)
+
 def get_provider_status():
     """Returns status information for all configured providers"""
     providers = {}
     
-    # Check Dropbox configuration
+    # Add Dropbox configuration - alphabetically ordered providers
     providers["Dropbox"] = {
         "name": "Dropbox", 
+        "icon": "dropbox",
         "configured": bool(getattr(settings, 'dropbox_app_key', None) and
                           getattr(settings, 'dropbox_app_secret', None) and
                           getattr(settings, 'dropbox_refresh_token', None)),
         "enabled": True,
+        "description": "Upload files to Dropbox cloud storage",
         "details": {
             "folder": getattr(settings, 'dropbox_folder', 'Not set'),
             "app_key": getattr(settings, 'dropbox_app_key', 'Not set'),
-            "app_secret": getattr(settings, 'dropbox_app_secret', None) and "Configured" or "Not set",
-            "refresh_token": getattr(settings, 'dropbox_refresh_token', None) and "Configured" or "Not set"
+            "app_secret": mask_sensitive_value(getattr(settings, 'dropbox_app_secret', None)),
+            "refresh_token": mask_sensitive_value(getattr(settings, 'dropbox_refresh_token', None))
         }
     }
     
-    # Check Paperless configuration
-    providers["Paperless-ngx"] = {
-        "name": "Paperless-ngx", 
-        "configured": bool(getattr(settings, 'paperless_host', None) and 
-                         getattr(settings, 'paperless_ngx_api_token', None)),
+    # Add Email configuration
+    providers["Email"] = {
+        "name": "Email", 
+        "icon": "mail",
+        "configured": bool(getattr(settings, 'email_host', None) and 
+                         getattr(settings, 'email_default_recipient', None)),
         "enabled": True,
+        "description": "Send documents via email",
         "details": {
-            "host": getattr(settings, 'paperless_host', 'Not set')
+            "host": getattr(settings, 'email_host', 'Not set'),
+            "port": getattr(settings, 'email_port', 'Not set'),
+            "username": getattr(settings, 'email_username', 'Not set'),
+            "password": mask_sensitive_value(getattr(settings, 'email_password', None)),
+            "use_tls": getattr(settings, 'email_use_tls', 'Not set'),
+            "sender": getattr(settings, 'email_sender', 'Not set'),
+            "default_recipient": getattr(settings, 'email_default_recipient', 'Not set')
         }
     }
     
-    # Check NextCloud configuration
-    providers["NextCloud"] = {
-        "name": "NextCloud", 
-        "configured": bool(getattr(settings, 'nextcloud_upload_url', None) and 
-                          getattr(settings, 'nextcloud_username', None) and 
-                          getattr(settings, 'nextcloud_password', None)),
+    # Add FTP configuration to providers
+    providers["FTP Storage"] = {
+        "name": "FTP Storage",
+        "icon": "ftp",
+        "configured": bool(getattr(settings, 'ftp_host', None) and
+                          getattr(settings, 'ftp_username', None) and
+                          getattr(settings, 'ftp_password', None)),
         "enabled": True,
+        "description": "Upload files to FTP server",
         "details": {
-            "url": getattr(settings, 'nextcloud_upload_url', 'Not set'),
-            "folder": getattr(settings, 'nextcloud_folder', 'Not set')
-        }
-    }
-    
-    # Check SFTP configuration
-    providers["SFTP Storage"] = {
-        "name": "SFTP Storage", 
-        "configured": bool(getattr(settings, 'sftp_host', None) and 
-                          getattr(settings, 'sftp_username', None) and 
-                          (getattr(settings, 'sftp_password', None) or 
-                           getattr(settings, 'sftp_private_key', None))),
-        "enabled": True,
-        "details": {
-            "host": getattr(settings, 'sftp_host', 'Not set'),
-            "folder": getattr(settings, 'sftp_folder', 'Not set')
-        }
-    }
-    
-    # Check S3 configuration
-    providers["S3 Storage"] = {
-        "name": "S3 Storage", 
-        "configured": bool(getattr(settings, 's3_bucket_name', None) and 
-                          getattr(settings, 'aws_access_key_id', None) and 
-                          getattr(settings, 'aws_secret_access_key', None)),
-        "enabled": True,
-        "details": {
-            "bucket": getattr(settings, 's3_bucket_name', 'Not set'),
-            "region": getattr(settings, 'aws_region', 'Not set')
+            "host": getattr(settings, 'ftp_host', 'Not set'),
+            "port": getattr(settings, 'ftp_port', 'Not set'),
+            "username": getattr(settings, 'ftp_username', 'Not set'),
+            "password": mask_sensitive_value(getattr(settings, 'ftp_password', None)),
+            "folder": getattr(settings, 'ftp_folder', 'Not set'),
+            "tls": getattr(settings, 'ftp_use_tls', True),
+            "allow_plaintext": getattr(settings, 'ftp_allow_plaintext', True)
         }
     }
     
     # Check Google Drive configuration
     providers["Google Drive"] = {
         "name": "Google Drive", 
+        "icon": "google",
         "configured": bool(getattr(settings, 'google_drive_credentials_json', None) and 
                           getattr(settings, 'google_drive_folder_id', None)),
         "enabled": True,
+        "description": "Store documents in Google Drive",
         "details": {
+            "credentials_json": mask_sensitive_value(getattr(settings, 'google_drive_credentials_json', None)),
             "folder_id": getattr(settings, 'google_drive_folder_id', 'Not set'),
             "delegate": getattr(settings, 'google_drive_delegate_to', 'Not set')
         }
     }
     
+    # Check NextCloud configuration
+    nextcloud_url = getattr(settings, 'nextcloud_upload_url', 'Not set')
+    # Extract base URL from WebDAV URL (remove the /remote.php part and everything after it)
+    if nextcloud_url != 'Not set' and '/remote.php' in nextcloud_url:
+        nextcloud_base_url = nextcloud_url.split('/remote.php')[0]
+    else:
+        nextcloud_base_url = nextcloud_url
+        
+    providers["NextCloud"] = {
+        "name": "NextCloud", 
+        "icon": "cloud",
+        "configured": bool(getattr(settings, 'nextcloud_upload_url', None) and 
+                          getattr(settings, 'nextcloud_username', None) and 
+                          getattr(settings, 'nextcloud_password', None)),
+        "enabled": True,
+        "description": "Store documents in NextCloud",
+        "details": {
+            "url": getattr(settings, 'nextcloud_upload_url', 'Not set'),
+            "base_url": nextcloud_base_url,
+            "username": getattr(settings, 'nextcloud_username', 'Not set'),
+            "password": mask_sensitive_value(getattr(settings, 'nextcloud_password', None)),
+            "folder": getattr(settings, 'nextcloud_folder', 'Not set')
+        }
+    }
+    
     # Check OneDrive configuration
     providers["OneDrive"] = {
         "name": "OneDrive", 
+        "icon": "microsoft",
         "configured": bool(getattr(settings, 'onedrive_client_id', None) and 
                           getattr(settings, 'onedrive_client_secret', None) and 
                           getattr(settings, 'onedrive_refresh_token', None)),
         "enabled": True,
+        "description": "Store documents in Microsoft OneDrive",
         "details": {
+            "client_id": getattr(settings, 'onedrive_client_id', 'Not set'),
+            "client_secret": mask_sensitive_value(getattr(settings, 'onedrive_client_secret', None)),
+            "tenant_id": getattr(settings, 'onedrive_tenant_id', 'Not set'),
+            "refresh_token": mask_sensitive_value(getattr(settings, 'onedrive_refresh_token', None)),
             "folder": getattr(settings, 'onedrive_folder_path', 'Not set')
         }
     }
+    
+    # Check Paperless configuration
+    providers["Paperless-ngx"] = {
+        "name": "Paperless-ngx", 
+        "icon": "file-text",
+        "configured": bool(getattr(settings, 'paperless_host', None) and 
+                         getattr(settings, 'paperless_ngx_api_token', None)),
+        "enabled": True,
+        "description": "Document management system for digital archives",
+        "details": {
+            "host": getattr(settings, 'paperless_host', 'Not set'),
+            "api_token": mask_sensitive_value(getattr(settings, 'paperless_ngx_api_token', None))
+        }
+    }
+    
+    # Check S3 configuration
+    providers["S3 Storage"] = {
+        "name": "S3 Storage",
+        "icon": "database",
+        "configured": bool(getattr(settings, 's3_bucket_name', None) and 
+                          getattr(settings, 'aws_access_key_id', None) and 
+                          getattr(settings, 'aws_secret_access_key', None)),
+        "enabled": True,
+        "description": "Store documents in S3-compatible object storage",
+        "details": {
+            "bucket": getattr(settings, 's3_bucket_name', 'Not set'),
+            "region": getattr(settings, 'aws_region', 'Not set'),
+            "access_key_id": getattr(settings, 'aws_access_key_id', 'Not set'),
+            "secret_access_key": mask_sensitive_value(getattr(settings, 'aws_secret_access_key', None)),
+            "folder_prefix": getattr(settings, 's3_folder_prefix', 'Not set'),
+            "storage_class": getattr(settings, 's3_storage_class', 'Not set'),
+            "acl": getattr(settings, 's3_acl', 'Not set')
+        }
+    }
+    
+    # Check SFTP configuration
+    providers["SFTP Storage"] = {
+        "name": "SFTP Storage", 
+        "icon": "server",
+        "configured": bool(getattr(settings, 'sftp_host', None) and 
+                          getattr(settings, 'sftp_username', None) and 
+                          (getattr(settings, 'sftp_password', None) or 
+                           getattr(settings, 'sftp_private_key', None))),
+        "enabled": True,
+        "description": "Upload files to SFTP server",
+        "details": {
+            "host": getattr(settings, 'sftp_host', 'Not set'),
+            "port": getattr(settings, 'sftp_port', 'Not set'),
+            "username": getattr(settings, 'sftp_username', 'Not set'),
+            "password": mask_sensitive_value(getattr(settings, 'sftp_password', None)),
+            "private_key": getattr(settings, 'sftp_private_key', 'Not set'),
+            "private_key_passphrase": mask_sensitive_value(getattr(settings, 'sftp_private_key_passphrase', None)),
+            "folder": getattr(settings, 'sftp_folder', 'Not set')
+        }
+    }
+
+    # Add Uptime Kuma configuration
+    providers["Uptime Kuma"] = {
+        "name": "Uptime Kuma",
+        "icon": "activity",
+        "configured": bool(getattr(settings, 'uptime_kuma_url', None)),
+        "enabled": True,
+        "description": "Server monitoring and status page",
+        "details": {
+            "url": getattr(settings, 'uptime_kuma_url', 'Not set'),
+            "ping_interval": getattr(settings, 'uptime_kuma_ping_interval', 'Not set')
+        }
+    }
 
     # Check WebDAV configuration
     providers["WebDAV"] = {
         "name": "WebDAV", 
+        "icon": "globe",
         "configured": bool(getattr(settings, 'webdav_url', None) and 
                           getattr(settings, 'webdav_username', None) and 
                           getattr(settings, 'webdav_password', None)),
         "enabled": True,
+        "description": "Store documents on WebDAV servers",
         "details": {
             "url": getattr(settings, 'webdav_url', 'Not set'),
-            "folder": getattr(settings, 'webdav_folder', 'Not set')
-        }
-    }
-
-    # Add FTP configuration to providers
-    providers["FTP Storage"] = {
-        "name": "FTP Storage",
-        "configured": bool(getattr(settings, 'ftp_host', None) and
-                          getattr(settings, 'ftp_username', None) and
-                          getattr(settings, 'ftp_password', None)),
-        "enabled": True,
-        "details": {
-            "host": getattr(settings, 'ftp_host', 'Not set'),
-            "folder": getattr(settings, 'ftp_folder', 'Not set'),
-            "tls": getattr(settings, 'ftp_use_tls', True),
-            "allow_plaintext": getattr(settings, 'ftp_allow_plaintext', True)
+            "username": getattr(settings, 'webdav_username', 'Not set'),
+            "password": mask_sensitive_value(getattr(settings, 'webdav_password', None)),
+            "folder": getattr(settings, 'webdav_folder', 'Not set'),
+            "verify_ssl": getattr(settings, 'webdav_verify_ssl', 'Not set')
         }
     }
     
@@ -270,7 +368,12 @@ def dump_all_settings():
             # Mask sensitive values in logs
             if key.lower().find('password') >= 0 or key.lower().find('secret') >= 0 or key.lower().find('token') >= 0 or key.lower().find('key') >= 0:
                 if value:
-                    value = "********" 
+                    if isinstance(value, str) and len(value) > 10:
+                        visible_start = max(1, len(value) // 3)
+                        visible_end = max(1, len(value) // 4)
+                        value = f"{value[:visible_start]}{'*' * (len(value) - visible_start - visible_end)}{value[-visible_end:]}"
+                    else:
+                        value = f"{value[:2]}{'*' * (len(value) - 4)}{value[-2:]}" if isinstance(value, str) and len(value) > 4 else "****"
             logger.info(f"{key}: {value}")
     logger.info("--- END OF SETTINGS DUMP ---")
 
@@ -439,17 +542,26 @@ def get_settings_for_display(show_values=False):
                 # List of patterns that indicate sensitive values
                 sensitive_patterns = [
                     'password', 'secret', 'token', 'api_key', 'private_key',
-                    'credentials', 'access_key', 'auth'
+                    'credentials', 'access_key', 'ai_key'
                 ]
                 
                 # Check if this is a sensitive value that should be masked
-                is_sensitive = any(pattern in key.lower() for pattern in sensitive_patterns)
+                is_sensitive = any(
+                    pattern in key.lower() for pattern in sensitive_patterns
+                )
+                
+                # Special handling for "auth" to avoid matching prefixes like "authentik"
+                if not is_sensitive and "auth" in key.lower():
+                    # Only mark as sensitive if "auth" is a standalone word or at the end
+                    # This avoids matching "authentik" as sensitive
+                    parts = key.lower().split('_')
+                    is_sensitive = any(part == "auth" for part in parts) or key.lower().endswith("auth")
                 
                 # Mask sensitive values regardless of debug mode
                 # Other values are only hidden if debug mode is off AND show_values is False
                 if (is_sensitive or not show_values) and value:
                     if is_sensitive:
-                        value = "********" 
+                        value = mask_sensitive_value(value)
                 
                 # Check if the setting is configured (has a non-None value)
                 # For boolean settings, consider them configured even if False
diff --git a/frontend/templates/base.html b/frontend/templates/base.html
index 0bfa04f0..9122034c 100644
--- a/frontend/templates/base.html
+++ b/frontend/templates/base.html
@@ -36,35 +36,6 @@
           <a href="/upload" class="text-gray-700 hover:text-gray-900">Upload</a>
           <a href="/files" class="text-gray-700 hover:text-gray-900">Files</a>
           <a href="/status" class="text-gray-700 hover:text-gray-900">Status</a>
-          
-          <!-- Integrations Dropdown -->
-          <div class="relative inline-block text-left" x-data="{ open: false }">
-            <button @click="open = !open" class="text-gray-700 hover:text-gray-900 inline-flex items-center">
-              Integrations
-              <svg class="ml-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-              </svg>
-            </button>
-
-            <div 
-              x-show="open" 
-              @click.away="open = false"
-              class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
-              x-transition:enter="transition ease-out duration-100"
-              x-transition:enter-start="transform opacity-0 scale-95"
-              x-transition:enter-end="transform opacity-100 scale-100"
-              x-transition:leave="transition ease-in duration-75"
-              x-transition:leave-start="transform opacity-100 scale-100"
-              x-transition:leave-end="transform opacity-0 scale-95"
-            >
-              <div class="py-1">
-                <a href="/onedrive-setup" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">OneDrive Setup</a>
-                <a href="/dropbox-setup" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">Dropbox Setup</a>
-                <!-- Add other integration setup links here -->
-              </div>
-            </div>
-          </div>
-
           <a href="/about" class="text-gray-700 hover:text-gray-900">About</a>
           
           <!-- Dynamic Auth Section -->
diff --git a/frontend/templates/onedrive.html b/frontend/templates/onedrive.html
index cdd8ff9f..d3d6d604 100644
--- a/frontend/templates/onedrive.html
+++ b/frontend/templates/onedrive.html
@@ -112,6 +112,12 @@
         <p class="text-xs text-gray-500 mt-1">Use "common" for personal accounts or your organization's Tenant ID for corporate accounts</p>
       </div>
       
+      <div>
+        <label for="folder-path" class="block text-sm font-medium text-gray-700">Folder Path (Optional)</label>
+        <input type="text" id="folder-path" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Documents/Uploads" value="{{ folder_path }}">
+        <p class="text-xs text-gray-500 mt-1">Enter the folder path where files should be uploaded (e.g., Documents/Uploads)</p>
+      </div>
+      
       <div>
         <button id="start-auth-flow" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
           Start Authentication Flow
@@ -203,6 +209,28 @@ ONEDRIVE_FOLDER_PATH={{ folder_path|default('Documents/Uploads', true) }}</code>
       Back to Status
     </a>
   </div>
+  
+  <!-- Result Modal -->
+  <div id="resultModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog">
+    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
+      <div class="mt-3 text-center">
+        <div id="modalIcon" class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
+          <!-- Icon will be injected by JS -->
+        </div>
+        <h3 id="modalTitle" class="text-lg leading-6 font-medium text-gray-900">Success</h3>
+        <div class="mt-2 px-7 py-3">
+          <p id="modalMessage" class="text-sm text-gray-500">
+            Operation completed successfully.
+          </p>
+        </div>
+        <div class="items-center px-4 py-3">
+          <button id="modalClose" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 {% endblock %}
 
@@ -216,25 +244,78 @@ document.addEventListener('DOMContentLoaded', function() {
   const tokenStatus = document.getElementById('token-status');
   const clientSecretInput = document.getElementById('client-secret');
   
+  // Modal elements
+  const resultModal = document.getElementById('resultModal');
+  const modalTitle = document.getElementById('modalTitle');
+  const modalMessage = document.getElementById('modalMessage');
+  const modalIcon = document.getElementById('modalIcon');
+  const modalClose = document.getElementById('modalClose');
+  
+  // Modal functions
+  function showModal(status, title, message) {
+    modalTitle.textContent = title;
+    modalMessage.textContent = message;
+    
+    // Set the appropriate icon
+    if (status === 'success') {
+      modalIcon.innerHTML = `
+        <svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+      `;
+      modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
+    } else {
+      modalIcon.innerHTML = `
+        <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      `;
+      modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4';
+    }
+    
+    resultModal.classList.remove('hidden');
+  }
+  
+  function hideModal() {
+    resultModal.classList.add('hidden');
+  }
+  
+  // Close modal when clicking the close button
+  modalClose.addEventListener('click', hideModal);
+  
+  // Close modal when clicking outside of it
+  resultModal.addEventListener('click', function(e) {
+    if (e.target === resultModal) {
+      hideModal();
+    }
+  });
+  
   // Start Authentication Flow button click
   startAuthFlowBtn.addEventListener('click', function() {
     const clientId = document.getElementById('client-id').value.trim();
     const clientSecret = clientSecretInput.value.trim();
     const redirectUri = window.location.origin + "/onedrive-callback";
     const tenantId = document.getElementById('tenant-id').value.trim() || 'common';
+    const folderPath = document.getElementById('folder-path') ? document.getElementById('folder-path').value.trim() : '';
 
     if (!clientId) {
-      alert('Please enter your Client ID');
+      showModal('error', 'Validation Error', 'Please enter your Client ID');
       return;
     }
     
     if (!clientSecret) {
-      alert('Please enter your Client Secret');
+      showModal('error', 'Validation Error', 'Please enter your Client Secret');
       return;
     }
 
-    // Save client secret to session storage temporarily
+    // Save all entered values to session storage temporarily
+    sessionStorage.setItem('onedrive_client_id', clientId);
     sessionStorage.setItem('onedrive_client_secret', clientSecret);
+    sessionStorage.setItem('onedrive_tenant_id', tenantId);
+    
+    if (folderPath) {
+      sessionStorage.setItem('onedrive_folder_path', folderPath);
+    }
 
     // Generate the authorization URL with .default scope
     const authUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize?client_id=${encodeURIComponent(clientId)}&response_type=code&redirect_uri=${encodeURIComponent(redirectUri)}&response_mode=query&scope=${encodeURIComponent('https://graph.microsoft.com/.default offline_access')}&prompt=consent`;
@@ -253,19 +334,25 @@ document.addEventListener('DOMContentLoaded', function() {
         .then(response => response.json())
         .then(data => {
           if (data.status === 'success') {
-            alert('Token is valid! Successfully connected to OneDrive.');
+            showModal('success', 'Token Valid', 'Successfully connected to OneDrive!');
           } else {
             if (data.message && data.message.includes('invalid_grant')) {
-              if (confirm('Your OneDrive token has expired or is invalid. Would you like to obtain a new token now?')) {
+              showModal('error', 'Token Invalid', 'Your OneDrive token has expired or is invalid. Please obtain a new token.');
+              // Give option to start new auth flow
+              modalClose.textContent = "Get New Token";
+              modalClose.addEventListener('click', function onGetNewToken() {
                 startAuthFlowBtn.click();
-              }
+                // Remove this special event handler after use
+                modalClose.removeEventListener('click', onGetNewToken);
+                modalClose.textContent = "Close";
+              }, { once: true });
             } else {
-              alert('Token validation failed: ' + data.message);
+              showModal('error', 'Token Test Failed', data.message);
             }
           }
         })
         .catch(error => {
-          alert('Error testing token: ' + error.message);
+          showModal('error', 'Connection Error', 'Error testing token: ' + error.message);
         })
         .finally(() => {
           testTokenBtn.innerHTML = 'Test Token';
@@ -277,9 +364,31 @@ document.addEventListener('DOMContentLoaded', function() {
   // Refresh Token button click
   if (refreshTokenBtn) {
     refreshTokenBtn.addEventListener('click', function() {
-      if (confirm('This will start a new authentication flow to obtain a fresh token from Microsoft. Continue?')) {
+      showModal('info', 'Confirm', 'This will start a new authentication flow to obtain a fresh token from Microsoft. Continue?');
+      modalClose.textContent = "Cancel";
+      
+      // Add a confirm button
+      const confirmBtn = document.createElement('button');
+      confirmBtn.className = 'ml-2 px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-300';
+      confirmBtn.textContent = 'Continue';
+      confirmBtn.addEventListener('click', function() {
+        hideModal();
         startAuthFlowBtn.click();
-      }
+      });
+      
+      // Add to modal
+      modalClose.parentNode.appendChild(confirmBtn);
+      
+      // Make sure to remove the confirm button when modal is closed
+      const removeConfirmBtn = function() {
+        if (confirmBtn.parentNode) {
+          confirmBtn.parentNode.removeChild(confirmBtn);
+        }
+        modalClose.textContent = "Close";
+        modalClose.removeEventListener('click', removeConfirmBtn);
+      };
+      
+      modalClose.addEventListener('click', removeConfirmBtn, { once: true });
     });
   }
   
@@ -300,16 +409,32 @@ document.addEventListener('DOMContentLoaded', function() {
         })
         .catch(err => {
           console.error('Failed to copy: ', err);
-          alert('Failed to copy text to clipboard');
+          showModal('error', 'Copy Failed', 'Failed to copy text to clipboard');
         });
     });
   }
   
-  // Try to retrieve client secret from session storage (if coming back from auth)
+  // Try to retrieve values from session storage (if coming back from auth or browser refresh)
   if (clientSecretInput && !clientSecretInput.value && sessionStorage.getItem('onedrive_client_secret')) {
     clientSecretInput.value = sessionStorage.getItem('onedrive_client_secret');
-    // Clear it after use
-    sessionStorage.removeItem('onedrive_client_secret');
+  }
+  
+  // Also check for client ID in session storage
+  const clientIdInput = document.getElementById('client-id');
+  if (clientIdInput && !clientIdInput.value && sessionStorage.getItem('onedrive_client_id')) {
+    clientIdInput.value = sessionStorage.getItem('onedrive_client_id');
+  }
+  
+  // Check for tenant ID in session storage
+  const tenantIdInput = document.getElementById('tenant-id');
+  if (tenantIdInput && !tenantIdInput.value && sessionStorage.getItem('onedrive_tenant_id')) {
+    tenantIdInput.value = sessionStorage.getItem('onedrive_tenant_id');
+  }
+  
+  // Check for folder path in session storage
+  const folderPathInput = document.getElementById('folder-path');
+  if (folderPathInput && !folderPathInput.value && sessionStorage.getItem('onedrive_folder_path')) {
+    folderPathInput.value = sessionStorage.getItem('onedrive_folder_path');
   }
   
   // If token is not configured but we have a client ID, show the token status section
diff --git a/frontend/templates/onedrive_callback.html b/frontend/templates/onedrive_callback.html
index 4f827487..468d2ba9 100644
--- a/frontend/templates/onedrive_callback.html
+++ b/frontend/templates/onedrive_callback.html
@@ -92,24 +92,34 @@
 <script>
 document.addEventListener('DOMContentLoaded', function() {
   const code = "{{ code }}";
-  const clientId = "{{ client_id_value }}";
+  
+  // Get credentials from session storage (these take precedence over server-provided values)
+  const clientId = sessionStorage.getItem('onedrive_client_id') || "{{ client_id_value }}";
+  const clientSecret = sessionStorage.getItem('onedrive_client_secret') || "{{ client_secret_value }}";
+  const tenantId = sessionStorage.getItem('onedrive_tenant_id') || "{{ tenant_id }}" || "common";
+  const folderPath = sessionStorage.getItem('onedrive_folder_path') || "";
+  
   const redirectUri = window.location.origin + "/onedrive-callback";
-  const tenantId = "{{ tenant_id }}";
   
   // Automatically exchange the code for a refresh token
   if (code) {
-    exchangeCode(code, clientId, redirectUri, tenantId);
+    if (!clientId || !clientSecret) {
+      showError("Missing Client ID or Client Secret. Please go back to the setup page and try again.");
+      return;
+    }
+    
+    exchangeCode(code, clientId, clientSecret, redirectUri, tenantId, folderPath);
   } else {
     showError("No authorization code was found in the URL");
   }
   
-  function exchangeCode(code, clientId, redirectUri, tenantId) {
+  function exchangeCode(code, clientId, clientSecret, redirectUri, tenantId, folderPath) {
     const formData = new FormData();
     formData.append('client_id', clientId);
-    formData.append('client_secret', "{{ client_secret_value }}");  // Use the pre-configured secret
+    formData.append('client_secret', clientSecret);
     formData.append('redirect_uri', redirectUri);
     formData.append('code', code);
-    formData.append('tenant_id', tenantId || 'common');
+    formData.append('tenant_id', tenantId);
     
     // Show more details in processing message
     document.getElementById('processing-message').innerHTML = 
@@ -134,9 +144,14 @@ document.addEventListener('DOMContentLoaded', function() {
         const updateFormData = new FormData();
         updateFormData.append('refresh_token', data.refresh_token);
         
-        // Use the existing clientId and tenantId if they were provided
-        if (clientId) updateFormData.append('client_id', clientId);
-        if (tenantId) updateFormData.append('tenant_id', tenantId);
+        // Use the values from session storage
+        updateFormData.append('client_id', clientId);
+        updateFormData.append('client_secret', clientSecret);
+        updateFormData.append('tenant_id', tenantId);
+        
+        if (folderPath) {
+          updateFormData.append('folder_path', folderPath);
+        }
         
         document.getElementById('processing-message').innerHTML = 
           '<p>Updating system settings with new token...</p>';
@@ -153,11 +168,18 @@ document.addEventListener('DOMContentLoaded', function() {
           return response.json();
         }).then(() => {
           // Show the success message and environment variables
-          showSuccess(data.refresh_token, clientId, tenantId);
+          showSuccess(data.refresh_token, clientId, clientSecret, tenantId, folderPath);
+          
           // In 10 seconds, redirect to status page (giving more time to copy)
           setTimeout(() => {
             window.location.href = '/status';
           }, 10000);
+          
+          // Clean up session storage
+          sessionStorage.removeItem('onedrive_client_id');
+          sessionStorage.removeItem('onedrive_client_secret');
+          sessionStorage.removeItem('onedrive_tenant_id');
+          sessionStorage.removeItem('onedrive_folder_path');
         });
       } else {
         throw new Error('No refresh token was received from the server');
@@ -174,7 +196,7 @@ document.addEventListener('DOMContentLoaded', function() {
     document.getElementById('error-message').innerText = message;
   }
   
-  function showSuccess(refreshToken, clientId, tenantId) {
+  function showSuccess(refreshToken, clientId, clientSecret, tenantId, folderPath) {
     document.getElementById('processing-message').classList.add('hidden');
     document.getElementById('success-container').classList.remove('hidden');
     
@@ -182,10 +204,10 @@ document.addEventListener('DOMContentLoaded', function() {
     const envVarsCode = document.querySelector('#env-vars code');
     if (envVarsCode) {
       envVarsCode.textContent = `ONEDRIVE_CLIENT_ID=${clientId}
-ONEDRIVE_CLIENT_SECRET={{ client_secret_value }}
+ONEDRIVE_CLIENT_SECRET=${clientSecret}
 ONEDRIVE_TENANT_ID=${tenantId || 'common'}
 ONEDRIVE_REFRESH_TOKEN=${refreshToken}
-ONEDRIVE_FOLDER_PATH=Documents/Uploads`;
+ONEDRIVE_FOLDER_PATH=${folderPath || 'Documents/Uploads'}`;
     }
     
     // Add copy functionality
diff --git a/frontend/templates/status_dashboard.html b/frontend/templates/status_dashboard.html
index bcf00494..d4672390 100644
--- a/frontend/templates/status_dashboard.html
+++ b/frontend/templates/status_dashboard.html
@@ -9,6 +9,7 @@
       This dashboard shows the status of all configured integrations and targets.
     </p>
     <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
+      <p><strong>App Version:</strong> {{ app_version }}</p>
       <p><strong>Debug Mode:</strong> {{ "Enabled" if debug_enabled else "Disabled" }}</p>
       {% if last_check %}
       <p><strong>Last Check:</strong> {{ last_check }}</p>
@@ -69,7 +70,17 @@
           <div class="px-4 py-5 sm:p-6">
             <p class="text-sm text-gray-500">{{ provider.description }}</p>
             
-            {% if provider.url and provider.configured %}
+            <!-- NextCloud or link to provider URL -->
+            {% if provider.configured and name == "NextCloud" %}
+              {% if provider.details and provider.details.url %}
+                {% set nextcloud_base_url = provider.details.url.split('/remote.php')[0] %}
+                <div class="mt-3">
+                  <a href="{{ nextcloud_base_url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-800">
+                    {{ nextcloud_base_url|truncate(30) }} <span aria-hidden="true">&rarr;</span>
+                  </a>
+                </div>
+              {% endif %}
+            {% elif provider.url and provider.configured %}
               <div class="mt-3">
                 <a href="{{ provider.url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-800">
                   {{ provider.url|truncate(30) }} <span aria-hidden="true">&rarr;</span>
@@ -77,22 +88,93 @@
               </div>
             {% endif %}
             
-            <div class="mt-4">
-              {% if provider.configured %}
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800">
-                  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
-                    <circle cx="4" cy="4" r="3" />
-                  </svg>
-                  Active
-                </span>
-              {% else %}
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-100 text-gray-800">
-                  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-gray-400" fill="currentColor" viewBox="0 0 8 8">
-                    <circle cx="4" cy="4" r="3" />
-                  </svg>
-                  Inactive
-                </span>
-              {% endif %}
+            <div class="mt-4 flex items-center justify-between">
+              <div>
+                {% if provider.configured %}
+                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800">
+                    <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
+                      <circle cx="4" cy="4" r="3" />
+                    </svg>
+                    Active
+                  </span>
+                {% else %}
+                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-100 text-gray-800">
+                    <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-gray-400" fill="currentColor" viewBox="0 0 8 8">
+                      <circle cx="4" cy="4" r="3" />
+                    </svg>
+                    Inactive
+                  </span>
+                {% endif %}
+              </div>
+              
+              <!-- Action buttons -->
+              <div class="flex space-x-2">
+                {% if provider.configured and provider.details %}
+                  <button 
+                    class="view-details-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    data-provider="{{ name }}"
+                    data-details="{{ provider.details|tojson|forceescape }}">
+                    View Details
+                  </button>
+                {% endif %}
+                
+                {% if name == "Dropbox" %}
+                  {% if provider.configured %}
+                    <button 
+                      class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                      data-provider="dropbox">
+                      Test Connection
+                    </button>
+                    <a href="/dropbox-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                      Manage
+                    </a>
+                  {% else %}
+                    <a href="/dropbox-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                      Configure Now
+                    </a>
+                  {% endif %}
+                {% elif name == "OneDrive" %}
+                  {% if provider.configured %}
+                    <button 
+                      class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                      data-provider="onedrive">
+                      Test Connection
+                    </button>
+                    <a href="/onedrive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                      Manage
+                    </a>
+                  {% else %}
+                    <a href="/onedrive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                      Configure Now
+                    </a>
+                  {% endif %}
+                {% elif provider.configured and name == "Paperless-ngx" %}
+                  <a href="{{ provider.details.host }}" target="_blank" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                    Open
+                  </a>
+                {% elif provider.configured and name == "NextCloud" %}
+                  {% if provider.details and provider.details.url %}
+                    {% set nextcloud_base_url = provider.details.url.split('/remote.php')[0] %}
+                    <a href="{{ nextcloud_base_url }}" target="_blank" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                      </svg>
+                      Open
+                    </a>
+                  {% endif %}
+                {% endif %}
+              </div>
             </div>
           </div>
         </div>
@@ -112,5 +194,256 @@
       </a>
     </div>
   </div>
+  
+  <!-- Result Modal -->
+  <div id="resultModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog">
+    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
+      <div class="mt-3 text-center">
+        <div id="modalIcon" class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
+          <!-- Icon will be injected by JS -->
+        </div>
+        <h3 id="modalTitle" class="text-lg leading-6 font-medium text-gray-900">Success</h3>
+        <div class="mt-2 px-7 py-3">
+          <p id="modalMessage" class="text-sm text-gray-500">
+            Operation completed successfully.
+          </p>
+        </div>
+        <div class="items-center px-4 py-3">
+          <button id="modalClose" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Details Modal -->
+  <div id="detailsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog">
+    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
+      <div class="absolute top-0 right-0 pt-4 pr-4">
+        <button type="button" id="closeDetailsModal" class="text-gray-400 hover:text-gray-500">
+          <span class="sr-only">Close</span>
+          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="mt-3">
+        <h3 id="detailsModalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-4">Provider Details</h3>
+        <div class="mt-4">
+          <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
+            <div id="detailsContent" class="col-span-2">
+              <!-- Details will be populated by JavaScript -->
+            </div>
+          </dl>
+        </div>
+        <div class="mt-6 flex justify-end">
+          <button type="button" id="closeDetailsBtn" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 {% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // Modal elements
+  const resultModal = document.getElementById('resultModal');
+  const modalTitle = document.getElementById('modalTitle');
+  const modalMessage = document.getElementById('modalMessage');
+  const modalIcon = document.getElementById('modalIcon');
+  const modalClose = document.getElementById('modalClose');
+  
+  // Details Modal elements
+  const detailsModal = document.getElementById('detailsModal');
+  const detailsModalTitle = document.getElementById('detailsModalTitle');
+  const detailsContent = document.getElementById('detailsContent');
+  const closeDetailsModal = document.getElementById('closeDetailsModal');
+  const closeDetailsBtn = document.getElementById('closeDetailsBtn');
+  
+  // Modal functions
+  function showModal(status, title, message) {
+    modalTitle.textContent = title;
+    modalMessage.textContent = message;
+    
+    // Set the appropriate icon
+    if (status === 'success') {
+      modalIcon.innerHTML = `
+        <svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+      `;
+      modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
+    } else {
+      modalIcon.innerHTML = `
+        <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      `;
+      modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4';
+    }
+    
+    resultModal.classList.remove('hidden');
+  }
+  
+  function hideModal() {
+    resultModal.classList.add('hidden');
+  }
+  
+  function showDetailsModal(providerName, details) {
+    detailsModalTitle.textContent = providerName + ' Configuration Details';
+    
+    // Clear previous content
+    detailsContent.innerHTML = '';
+    
+    // Create and populate the details list
+    if (details && Object.keys(details).length > 0) {
+      const table = document.createElement('table');
+      table.className = 'min-w-full divide-y divide-gray-200';
+      
+      const thead = document.createElement('thead');
+      thead.className = 'bg-gray-50';
+      thead.innerHTML = `
+        <tr>
+          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Setting</th>
+          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
+        </tr>
+      `;
+      
+      const tbody = document.createElement('tbody');
+      tbody.className = 'bg-white divide-y divide-gray-200';
+      
+      let count = 0;
+      for (const [key, value] of Object.entries(details)) {
+        const row = document.createElement('tr');
+        row.className = count % 2 === 0 ? 'bg-white' : 'bg-gray-50';
+        
+        const keyCell = document.createElement('td');
+        keyCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
+        keyCell.textContent = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
+        
+        const valueCell = document.createElement('td');
+        valueCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
+        
+        // Check if value contains sensitive information that should be masked
+        const sensitiveKeys = ['token', 'password', 'secret', 'key', 'credentials'];
+        const isSensitive = sensitiveKeys.some(sKey => key.toLowerCase().includes(sKey));
+        
+        if (isSensitive && value !== 'Not set' && value !== '') {
+          valueCell.textContent = value.slice(4) + '********' + value.slice(-4);
+          // For better readability, we can also use HTML to mask the middle part of the string
+          valueCell.innerHTML = value.slice(0, 4) + '<span class="text-gray-400">********</span>' + value.slice(-4); 
+        } else {
+          valueCell.textContent = value;
+        }
+        
+        row.appendChild(keyCell);
+        row.appendChild(valueCell);
+        tbody.appendChild(row);
+        count++;
+      }
+      
+      table.appendChild(thead);
+      table.appendChild(tbody);
+      detailsContent.appendChild(table);
+    } else {
+      detailsContent.innerHTML = '<p class="text-sm text-gray-500">No details available</p>';
+    }
+    
+    detailsModal.classList.remove('hidden');
+  }
+  
+  function hideDetailsModal() {
+    detailsModal.classList.add('hidden');
+  }
+  
+  // Close modal when clicking the close button
+  modalClose.addEventListener('click', hideModal);
+  
+  // Close modal when clicking outside of it
+  resultModal.addEventListener('click', function(e) {
+    if (e.target === resultModal) {
+      hideModal();
+    }
+  });
+  
+  // Close details modal
+  closeDetailsModal.addEventListener('click', hideDetailsModal);
+  closeDetailsBtn.addEventListener('click', hideDetailsModal);
+  
+  // Close details modal when clicking outside
+  detailsModal.addEventListener('click', function(e) {
+    if (e.target === detailsModal) {
+      hideDetailsModal();
+    }
+  });
+  
+  // View Details button handlers
+  const detailsButtons = document.querySelectorAll('.view-details-btn');
+  detailsButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      const providerName = this.getAttribute('data-provider');
+      let detailsData = {};
+      
+      try {
+        detailsData = JSON.parse(this.getAttribute('data-details'));
+      } catch (e) {
+        console.error('Error parsing details data:', e);
+      }
+      
+      showDetailsModal(providerName, detailsData);
+    });
+  });
+  
+  // Test provider connections
+  const testButtons = document.querySelectorAll('.test-provider-btn');
+  testButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      const provider = this.getAttribute('data-provider');
+      const originalText = this.textContent;
+      
+      this.innerHTML = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-indigo-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Testing...';
+      this.disabled = true;
+      
+      let endpoint = '';
+      if (provider === 'dropbox') {
+        endpoint = '/api/dropbox/test-token';
+      } else if (provider === 'onedrive') {
+        endpoint = '/api/onedrive/test-token';
+      }
+      
+      fetch(endpoint)
+        .then(response => response.json())
+        .then(data => {
+          if (data.status === 'success') {
+            showModal('success', 'Connection Test Successful', `${data.message} ${data.account ? 'as ' + data.account : ''}`);
+          } else {
+            if (data.needs_reauth) {
+              showModal('error', 'Authentication Required', 'Your token has expired or is invalid. Please reconfigure this connection.');
+              // Add option to go to config page
+              modalClose.textContent = "Configure Now";
+              modalClose.addEventListener('click', function redirectToConfig() {
+                window.location.href = `/${provider}-setup`;
+                modalClose.removeEventListener('click', redirectToConfig);
+              }, { once: true });
+            } else {
+              showModal('error', 'Connection Test Failed', data.message);
+            }
+          }
+        })
+        .catch(error => {
+          showModal('error', 'Connection Error', 'Error testing connection: ' + error.message);
+        })
+        .finally(() => {
+          this.textContent = originalText;
+          this.disabled = false;
+        });
+    });
+  });
+});
+</script>
+{% endblock %}