diff --git a/README.md b/README.md
index c4cba8f..0e7d27b 100644
--- a/README.md
+++ b/README.md
@@ -40,10 +40,9 @@ Certain values can be set via environment variables, using the `-e` parameter on
 * __SUBSCRIPTION_SCAN_PLAYLIST_END__: Maximum playlist/channel entries to fetch per subscription check (newest-first). Defaults to `50`.
 * __SUBSCRIPTION_MAX_SEEN_IDS__: Cap on stored video IDs per subscription to limit state file growth. Defaults to `50000`.
 * __CLEAR_COMPLETED_AFTER__: Number of seconds after which completed (and failed) downloads are automatically removed from the "Completed" list. Defaults to `0` (disabled).
-* __HASHARR_ENABLED__: If `true`, call hasharr when a download completes. Defaults to `false`.
-* __HASHARR_URL__: Base URL for hasharr service (for example `http://hasharr:9995`). Defaults to `http://hasharr:9995`.
-* __HASHARR_SERVICE_ID__: Hash service profile ID to call at `POST /api/hash-service/{id}`. Defaults to `1`.
-* __HASHARR_TIMEOUT_SEC__: Timeout (seconds) for hasharr callback requests. Defaults to `20`.
+* __WEBSERVICE_ENABLED__: If `true`, call a webhook endpoint when a download completes. Defaults to `false`.
+* __WEBSERVICE_ENDPOINT__: Full webhook URL to call (for example `"http://localhost:9876/api/web-service/"`). Defaults to `"http://localhost:9876/api/web-service/"`.
+* __WEBSERVICE_TIMEOUT_SEC__: Timeout (seconds) for webhook requests. Defaults to `20`.
 
 ### 📁 Storage & Directories
 
@@ -93,29 +92,39 @@ The project's Wiki contains examples of useful configurations contributed by use
 * [YTDL_OPTIONS Cookbook](https://github.com/alexta69/metube/wiki/YTDL_OPTIONS-Cookbook)
 * [OUTPUT_TEMPLATE Cookbook](https://github.com/alexta69/metube/wiki/OUTPUT_TEMPLATE-Cookbook)
 
-## hasharr integration
+## Webhook integration
 
-MeTube can call hasharr after download completion to perform pHash matching and action policy.
+MeTube can call a generic webhook endpoint after download completion. The payload is fixed JSON so any consumer can implement it.
 
 ### Runtime API endpoints
 
-- `GET /hasharr-settings` -> current effective integration settings
-- `POST /hasharr-settings` -> update runtime settings
+- `GET /webhook-settings` -> current effective integration settings
+- `POST /webhook-settings` -> update runtime settings
+- `POST /webhook-settings/test` -> send test payload and return endpoint response
+
+Settings saved via `POST /webhook-settings` are written to `{STATE_DIR}/webhook_settings.json` and reloaded on startup, so they survive container restarts. If this file is present, it overrides the `WEBSERVICE_*` environment defaults for the running process.
 
 Example:
 
 ```json
 {
   "enabled": true,
-  "url": "http://hasharr:9995",
-  "service_id": 1,
+  "endpoint": "http://localhost:9876/api/web-service/",
   "timeout_sec": 20
 }
 ```
 
-When enabled, MeTube posts each completed output file to:
+When enabled, MeTube posts each completed output file to `POST {WEBSERVICE_ENDPOINT}` with:
 
-`POST {HASHARR_URL}/api/hash-service/{HASHARR_SERVICE_ID}`
+```json
+{
+  "filePath": "/downloads/example.mp4",
+  "source": "metube",
+  "jobId": "optional-job-id"
+}
+```
+
+The test route posts the same shape with an empty `filePath`.
 
 ## 🍪 Using browser cookies
 
diff --git a/app/main.py b/app/main.py
index 487da82..2965972 100644
--- a/app/main.py
+++ b/app/main.py
@@ -20,6 +20,7 @@ from watchfiles import DefaultFilter, Change, awatch
 
 from ytdl import DownloadQueueNotifier, DownloadQueue, Download
 from subscriptions import SubscriptionManager, SubscriptionNotifier, SubscriptionInfo
+from state_store import AtomicJsonStore
 from yt_dlp.version import __version__ as yt_dlp_version
 
 log = logging.getLogger('main')
@@ -70,13 +71,12 @@ class Config:
         'MAX_CONCURRENT_DOWNLOADS': '3',
         'LOGLEVEL': 'INFO',
         'ENABLE_ACCESSLOG': 'false',
-        'HASHARR_ENABLED': 'false',
-        'HASHARR_URL': 'http://hasharr:9995',
-        'HASHARR_SERVICE_ID': '1',
-        'HASHARR_TIMEOUT_SEC': '20',
+        'WEBSERVICE_ENABLED': 'false',
+        'WEBSERVICE_ENDPOINT': 'http://localhost:9876/api/web-service/',
+        'WEBSERVICE_TIMEOUT_SEC': '20',
     }
 
-    _BOOLEAN = ('DOWNLOAD_DIRS_INDEXABLE', 'CUSTOM_DIRS', 'CREATE_CUSTOM_DIRS', 'DELETE_FILE_ON_TRASHCAN', 'HTTPS', 'ENABLE_ACCESSLOG', 'HASHARR_ENABLED')
+    _BOOLEAN = ('DOWNLOAD_DIRS_INDEXABLE', 'CUSTOM_DIRS', 'CREATE_CUSTOM_DIRS', 'DELETE_FILE_ON_TRASHCAN', 'HTTPS', 'ENABLE_ACCESSLOG', 'WEBSERVICE_ENABLED')
 
     def __init__(self):
         for k, v in self._DEFAULTS.items():
@@ -124,10 +124,9 @@ class Config:
         'PUBLIC_HOST_URL',
         'PUBLIC_HOST_AUDIO_URL',
         'DEFAULT_OPTION_PLAYLIST_ITEM_LIMIT',
-        'HASHARR_ENABLED',
-        'HASHARR_URL',
-        'HASHARR_SERVICE_ID',
-        'HASHARR_TIMEOUT_SEC',
+        'WEBSERVICE_ENABLED',
+        'WEBSERVICE_ENDPOINT',
+        'WEBSERVICE_TIMEOUT_SEC',
         'SUBSCRIPTION_DEFAULT_CHECK_INTERVAL',
     )
 
@@ -171,6 +170,43 @@ class Config:
         return (True, '')
 
 config = Config()
+
+_webhook_settings_store = AtomicJsonStore(
+    os.path.join(config.STATE_DIR, 'webhook_settings.json'),
+    kind='webhook_settings',
+)
+
+
+def _load_persisted_webhook_settings() -> None:
+    """Apply webhook endpoint settings saved under STATE_DIR (survives container restarts)."""
+    payload = _webhook_settings_store.load()
+    if not payload:
+        return
+    try:
+        if 'endpoint' in payload:
+            ep = str(payload['endpoint'] or '').strip()
+            if ep:
+                config.WEBSERVICE_ENDPOINT = ep
+        if 'timeout_sec' in payload:
+            ts = int(payload['timeout_sec'])
+            if ts > 0:
+                config.WEBSERVICE_TIMEOUT_SEC = ts
+        if 'enabled' in payload:
+            config.WEBSERVICE_ENABLED = bool(payload['enabled'])
+    except (TypeError, ValueError) as exc:
+        log.warning('Ignoring invalid persisted webhook settings: %s', exc)
+
+
+def _save_persisted_webhook_settings() -> None:
+    _webhook_settings_store.save({
+        'enabled': bool(config.WEBSERVICE_ENABLED),
+        'endpoint': str(config.WEBSERVICE_ENDPOINT),
+        'timeout_sec': int(config.WEBSERVICE_TIMEOUT_SEC),
+    })
+
+
+_load_persisted_webhook_settings()
+
 # Align root logger level with Config (keeps a single source of truth).
 # This re-applies the log level after Config loads, in case LOGLEVEL was
 # overridden by config file settings or differs from the environment variable.
@@ -693,92 +729,91 @@ async def history(request):
     log.info("Sending download history")
     return web.Response(text=serializer.encode(history))
 
-@routes.get(config.URL_PREFIX + 'hasharr-settings')
-async def get_hasharr_settings(request):
+@routes.get(config.URL_PREFIX + 'webhook-settings')
+async def get_webhook_settings(request):
     return web.Response(text=serializer.encode({
-        'enabled': bool(config.HASHARR_ENABLED),
-        'url': str(config.HASHARR_URL),
-        'service_id': int(config.HASHARR_SERVICE_ID),
-        'timeout_sec': int(config.HASHARR_TIMEOUT_SEC),
+        'enabled': bool(config.WEBSERVICE_ENABLED),
+        'endpoint': str(config.WEBSERVICE_ENDPOINT),
+        'timeout_sec': int(config.WEBSERVICE_TIMEOUT_SEC),
     }), content_type='application/json')
 
-@routes.post(config.URL_PREFIX + 'hasharr-settings')
-async def set_hasharr_settings(request):
+@routes.post(config.URL_PREFIX + 'webhook-settings')
+async def set_webhook_settings(request):
     post = await _read_json_request(request)
-    enabled = bool(post.get('enabled', config.HASHARR_ENABLED))
-    url = str(post.get('url', config.HASHARR_URL)).strip()
-    service_id = int(post.get('service_id', config.HASHARR_SERVICE_ID))
-    timeout_sec = int(post.get('timeout_sec', config.HASHARR_TIMEOUT_SEC))
-    if not url:
-        raise web.HTTPBadRequest(reason='url is required')
-    if service_id <= 0:
-        raise web.HTTPBadRequest(reason='service_id must be > 0')
+    enabled = bool(post.get('enabled', config.WEBSERVICE_ENABLED))
+    endpoint = str(post.get('endpoint', config.WEBSERVICE_ENDPOINT)).strip()
+    timeout_sec = int(post.get('timeout_sec', config.WEBSERVICE_TIMEOUT_SEC))
+    if not endpoint:
+        raise web.HTTPBadRequest(reason='endpoint is required')
     if timeout_sec <= 0:
         raise web.HTTPBadRequest(reason='timeout_sec must be > 0')
-    config.HASHARR_ENABLED = enabled
-    config.HASHARR_URL = url
-    config.HASHARR_SERVICE_ID = service_id
-    config.HASHARR_TIMEOUT_SEC = timeout_sec
+    config.WEBSERVICE_ENABLED = enabled
+    config.WEBSERVICE_ENDPOINT = endpoint
+    config.WEBSERVICE_TIMEOUT_SEC = timeout_sec
+    try:
+        _save_persisted_webhook_settings()
+    except OSError as exc:
+        log.exception('Failed to persist webhook settings to %s', _webhook_settings_store.path)
+        raise web.HTTPInternalServerError(reason=f'could not persist webhook settings: {exc}') from exc
     return web.Response(text=serializer.encode({'status': 'ok'}), content_type='application/json')
 
-@routes.post(config.URL_PREFIX + 'hasharr-settings/test')
-async def test_hasharr_settings(request):
+@routes.post(config.URL_PREFIX + 'webhook-settings/test')
+async def test_webhook_settings(request):
     post = await _read_json_request(request)
-    url = str(post.get('url', config.HASHARR_URL)).strip()
-    service_id = int(post.get('service_id', config.HASHARR_SERVICE_ID))
-    timeout_sec = int(post.get('timeout_sec', config.HASHARR_TIMEOUT_SEC))
-    if not url:
-        raise web.HTTPBadRequest(reason='url is required')
-    if service_id <= 0:
-        raise web.HTTPBadRequest(reason='service_id must be > 0')
+    endpoint = str(post.get('endpoint', config.WEBSERVICE_ENDPOINT)).strip()
+    timeout_sec = int(post.get('timeout_sec', config.WEBSERVICE_TIMEOUT_SEC))
+    if not endpoint:
+        raise web.HTTPBadRequest(reason='endpoint is required')
     if timeout_sec <= 0:
         raise web.HTTPBadRequest(reason='timeout_sec must be > 0')
 
-    base_url = url.rstrip('/')
-    profile_url = f"{base_url}/v1/hash-service-profiles/{service_id}"
+    payload = {
+        'filePath': '',
+        'source': 'metube',
+        'jobId': '',
+    }
+    body = json.dumps(payload).encode('utf-8')
 
-    def _fetch_profile():
-        req = urlrequest.Request(profile_url, method='GET')
+    def _call_endpoint():
+        req = urlrequest.Request(endpoint, data=body, headers={'Content-Type': 'application/json'}, method='POST')
         with urlrequest.urlopen(req, timeout=timeout_sec) as resp:
-            body = resp.read().decode('utf-8', errors='replace')
-            return resp.status, body
+            raw = resp.read().decode('utf-8', errors='replace')
+            return resp.status, raw
 
     try:
-        status, body = await asyncio.get_running_loop().run_in_executor(None, _fetch_profile)
-        if status != 200:
-            return web.json_response({
-                'status': 'error',
-                'reachable': True,
-                'valid_service_id': False,
-                'message': f'hasharr responded with status {status}',
-            }, status=502)
-        profile = json.loads(body)
+        status, raw = await asyncio.get_running_loop().run_in_executor(None, _call_endpoint)
+        if not raw:
+            response_obj = {}
+        else:
+            try:
+                response_obj = json.loads(raw)
+            except json.JSONDecodeError:
+                response_obj = {'raw': raw}
         return web.json_response({
             'status': 'ok',
-            'reachable': True,
-            'valid_service_id': True,
-            'profile': profile,
+            'message': f'Endpoint returned HTTP {status}.',
+            'status_code': status,
+            'response': response_obj,
         })
     except urlerror.HTTPError as exc:
-        if exc.code == 404:
-            return web.json_response({
-                'status': 'ok',
-                'reachable': True,
-                'valid_service_id': False,
-                'message': f'Service ID {service_id} was not found in hasharr.',
-            })
+        raw = exc.read().decode('utf-8', errors='replace')
+        if not raw:
+            response_obj = {}
+        else:
+            try:
+                response_obj = json.loads(raw)
+            except json.JSONDecodeError:
+                response_obj = {'raw': raw}
         return web.json_response({
             'status': 'error',
-            'reachable': True,
-            'valid_service_id': False,
-            'message': f'hasharr returned HTTP {exc.code}',
+            'message': f'Endpoint returned HTTP {exc.code}.',
+            'status_code': int(exc.code),
+            'response': response_obj,
         }, status=502)
     except Exception as exc:
         return web.json_response({
             'status': 'error',
-            'reachable': False,
-            'valid_service_id': False,
-            'message': f'Could not reach hasharr: {exc}',
+            'message': f'Could not reach endpoint: {exc}',
         }, status=502)
 
 @sio.event
@@ -911,6 +946,8 @@ app.router.add_route('OPTIONS', config.URL_PREFIX + 'subscriptions/delete', add_
 app.router.add_route('OPTIONS', config.URL_PREFIX + 'subscriptions/check', add_cors)
 app.router.add_route('OPTIONS', config.URL_PREFIX + 'upload-cookies', add_cors)
 app.router.add_route('OPTIONS', config.URL_PREFIX + 'delete-cookies', add_cors)
+app.router.add_route('OPTIONS', config.URL_PREFIX + 'webhook-settings', add_cors)
+app.router.add_route('OPTIONS', config.URL_PREFIX + 'webhook-settings/test', add_cors)
 
 async def on_prepare(request, response):
     if 'Origin' in request.headers:
diff --git a/app/ytdl.py b/app/ytdl.py
index 910e5aa..ef287ae 100644
--- a/app/ytdl.py
+++ b/app/ytdl.py
@@ -766,7 +766,7 @@ class DownloadQueue:
             else:
                 self.done.put(download)
                 asyncio.create_task(self.notifier.completed(download.info))
-                asyncio.create_task(self._notify_hasharr(download.info))
+                asyncio.create_task(self._notify_webhook(download.info))
                 try:
                     clear_after = int(self.config.CLEAR_COMPLETED_AFTER)
                 except ValueError:
@@ -776,12 +776,13 @@ class DownloadQueue:
                     task = asyncio.create_task(self.__auto_clear_after_delay(download.info.url, clear_after))
                     task.add_done_callback(lambda t: log.error(f'Auto-clear task failed: {t.exception()}') if not t.cancelled() and t.exception() else None)
 
-    async def _notify_hasharr(self, info):
-        if not getattr(self.config, 'HASHARR_ENABLED', False):
+    async def _notify_webhook(self, info):
+        if not getattr(self.config, 'WEBSERVICE_ENABLED', False):
+            return
+        endpoint = str(getattr(self.config, 'WEBSERVICE_ENDPOINT', '')).strip()
+        timeout_sec = int(getattr(self.config, 'WEBSERVICE_TIMEOUT_SEC', 20))
+        if not endpoint:
             return
-        base_url = str(getattr(self.config, 'HASHARR_URL', 'http://hasharr:9995')).rstrip('/')
-        service_id = int(getattr(self.config, 'HASHARR_SERVICE_ID', 1))
-        timeout_sec = int(getattr(self.config, 'HASHARR_TIMEOUT_SEC', 20))
         files = []
         if getattr(info, 'filename', None):
             files.append(info.filename)
@@ -811,7 +812,7 @@ class DownloadQueue:
             }
             data = json.dumps(payload).encode('utf-8')
             req = urlrequest.Request(
-                f"{base_url}/api/hash-service/{service_id}",
+                endpoint,
                 data=data,
                 headers={"Content-Type": "application/json"},
                 method="POST",
@@ -822,9 +823,9 @@ class DownloadQueue:
         for rel_name in dedup:
             try:
                 status = await asyncio.get_running_loop().run_in_executor(None, _post_one, rel_name)
-                log.info(f"hasharr callback status={status} file={rel_name}")
+                log.info(f"webhook callback status={status} file={rel_name}")
             except Exception as exc:
-                log.warning(f"hasharr callback failed for {rel_name}: {exc}")
+                log.warning(f"webhook callback failed for {rel_name}: {exc}")
 
     async def __auto_clear_after_delay(self, url, delay_seconds):
         await asyncio.sleep(delay_seconds)
diff --git a/ui/src/app/app.html b/ui/src/app/app.html
index d04b225..ebb01fc 100644
--- a/ui/src/app/app.html
+++ b/ui/src/app/app.html
@@ -6,34 +6,34 @@
     </a>
     <div class="download-metrics">
       @if (activeDownloads > 0) {
-        <div class="metric">
-          <fa-icon [icon]="faDownload" class="text-primary" />
-          <span>{{activeDownloads}} downloading</span>
-        </div>
+      <div class="metric">
+        <fa-icon [icon]="faDownload" class="text-primary" />
+        <span>{{activeDownloads}} downloading</span>
+      </div>
       }
       @if (queuedDownloads > 0) {
-        <div class="metric">
-          <fa-icon [icon]="faClock" class="text-warning" />
-          <span>{{queuedDownloads}} queued</span>
-        </div>
+      <div class="metric">
+        <fa-icon [icon]="faClock" class="text-warning" />
+        <span>{{queuedDownloads}} queued</span>
+      </div>
       }
       @if (completedDownloads > 0) {
-        <div class="metric">
-          <fa-icon [icon]="faCheck" class="text-success" />
-          <span>{{completedDownloads}} completed</span>
-        </div>
+      <div class="metric">
+        <fa-icon [icon]="faCheck" class="text-success" />
+        <span>{{completedDownloads}} completed</span>
+      </div>
       }
       @if (failedDownloads > 0) {
-        <div class="metric">
-          <fa-icon [icon]="faTimesCircle" class="text-danger" />
-          <span>{{failedDownloads}} failed</span>
-        </div>
+      <div class="metric">
+        <fa-icon [icon]="faTimesCircle" class="text-danger" />
+        <span>{{failedDownloads}} failed</span>
+      </div>
       }
       @if ((totalSpeed | speed) !== '') {
-        <div class="metric">
-          <fa-icon [icon]="faTachometerAlt" class="text-info" />
-          <span>{{totalSpeed | speed }}</span>
-        </div>
+      <div class="metric">
+        <fa-icon [icon]="faTachometerAlt" class="text-info" />
+        <span>{{totalSpeed | speed }}</span>
+      </div>
       }
     </div>
     <!--
@@ -49,33 +49,31 @@
     </div>
     -->
     <div class="navbar-nav ms-auto">
+      <button type="button" class="btn btn-link nav-link py-2 px-0 px-sm-2" aria-label="Open settings"
+        title="UI settings" (click)="openSettingsModal()">
+        <fa-icon [icon]="faGear" />
+      </button>
       <div class="nav-item dropdown" ngbDropdown placement="bottom-end">
         <button class="btn btn-link nav-link py-2 px-0 px-sm-2 dropdown-toggle d-flex align-items-center"
-          id="theme-select"
-          type="button"
-          aria-expanded="false"
-          ngbDropdownToggle>
+          id="theme-select" type="button" aria-expanded="false" ngbDropdownToggle>
           @if(activeTheme){
           <fa-icon [icon]="activeTheme.icon" />
           }
         </button>
         <ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="theme-select" ngbDropdownMenu>
           @for (theme of themes; track theme) {
-            <li>
-              <button type="button" class="dropdown-item d-flex align-items-center"
-              [class.active]="activeTheme === theme"
-              ngbDropdownItem
-              (click)="themeChanged(theme)">
-                <span class="me-2 opacity-50">
-                  <fa-icon [icon]="theme.icon" />
-                </span>
-                {{ theme.displayName }}
-                <span class="ms-auto"
-                [class.d-none]="activeTheme !== theme">
+          <li>
+            <button type="button" class="dropdown-item d-flex align-items-center" [class.active]="activeTheme === theme"
+              ngbDropdownItem (click)="themeChanged(theme)">
+              <span class="me-2 opacity-50">
+                <fa-icon [icon]="theme.icon" />
+              </span>
+              {{ theme.displayName }}
+              <span class="ms-auto" [class.d-none]="activeTheme !== theme">
                 <fa-icon [icon]="faCheck" />
-                </span>
-              </button>
-            </li>
+              </span>
+            </button>
+          </li>
           }
         </ul>
       </div>
@@ -91,52 +89,43 @@
         <div class="col">
           <ng-template #urlBarActions>
             @if (addInProgress && cancelRequested) {
-              <button class="btn btn-warning btn-lg px-3" type="button" disabled>
-                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
-                Canceling...
-              </button>
+            <button class="btn btn-warning btn-lg px-3" type="button" disabled>
+              <span class="spinner-border spinner-border-sm me-1" role="status"></span>
+              Canceling...
+            </button>
             } @else if (addInProgress) {
-              <button class="btn btn-secondary btn-lg px-3 add-progress-btn" type="button" disabled>
-                <span class="spinner-border spinner-border-sm me-2" role="status"></span>
-                Adding...
-              </button>
-              <button class="btn btn-outline-danger btn-lg px-3 add-cancel-btn"
-                type="button"
-                (click)="cancelAdding()"
-                aria-label="Cancel adding URL"
-                title="Cancel adding URL">
-                <fa-icon [icon]="faTimesCircle" class="me-1" /> Cancel
-              </button>
+            <button class="btn btn-secondary btn-lg px-3 add-progress-btn" type="button" disabled>
+              <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+              Adding...
+            </button>
+            <button class="btn btn-outline-danger btn-lg px-3 add-cancel-btn" type="button" (click)="cancelAdding()"
+              aria-label="Cancel adding URL" title="Cancel adding URL">
+              <fa-icon [icon]="faTimesCircle" class="me-1" /> Cancel
+            </button>
             } @else if (subscribeInProgress) {
-              <button class="btn btn-primary btn-lg px-4" type="button" disabled>
-                Download
-              </button>
-              <button class="btn btn-outline-secondary btn-lg px-3" type="button" disabled>
-                <span class="spinner-border spinner-border-sm me-2" role="status"></span>
-                Subscribing...
-              </button>
+            <button class="btn btn-primary btn-lg px-4" type="button" disabled>
+              Download
+            </button>
+            <button class="btn btn-outline-secondary btn-lg px-3" type="button" disabled>
+              <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+              Subscribing...
+            </button>
             } @else {
-              <button class="btn btn-primary btn-lg px-4" type="submit"
-                (click)="addDownload()"
-                [disabled]="downloads.loading">
-                Download
-              </button>
-              <button class="btn btn-outline-secondary btn-lg px-3" type="button"
-                (click)="addSubscription()"
-                [disabled]="downloads.loading">
-                Subscribe
-              </button>
+            <button class="btn btn-primary btn-lg px-4" type="submit" (click)="addDownload()"
+              [disabled]="downloads.loading">
+              Download
+            </button>
+            <button class="btn btn-outline-secondary btn-lg px-3" type="button" (click)="addSubscription()"
+              [disabled]="downloads.loading">
+              Subscribe
+            </button>
             }
           </ng-template>
 
           <!-- Narrow viewports: full-width field, then Bootstrap btn-group (no faux input-group strip) -->
           <div class="vstack gap-2 d-md-none">
-            <input type="text"
-              autocomplete="off"
-              spellcheck="false"
-              class="form-control form-control-lg"
-              placeholder="Enter video, channel, or playlist URL"
-              [(ngModel)]="addUrl"
+            <input type="text" autocomplete="off" spellcheck="false" class="form-control form-control-lg"
+              placeholder="Enter video, channel, or playlist URL" [(ngModel)]="addUrl"
               [ngModelOptions]="{standalone: true}"
               [disabled]="addInProgress || subscribeInProgress || downloads.loading">
             <div class="btn-group w-100" role="group" aria-label="Download or subscribe">
@@ -146,12 +135,8 @@
 
           <!-- md and up: standard input-group so Bootstrap handles fused borders -->
           <div class="input-group input-group-lg shadow-sm d-none d-md-flex">
-            <input type="text"
-              autocomplete="off"
-              spellcheck="false"
-              class="form-control form-control-lg"
-              placeholder="Enter video, channel, or playlist URL"
-              [(ngModel)]="addUrl"
+            <input type="text" autocomplete="off" spellcheck="false" class="form-control form-control-lg"
+              placeholder="Enter video, channel, or playlist URL" [(ngModel)]="addUrl"
               [ngModelOptions]="{standalone: true}"
               [disabled]="addInProgress || subscribeInProgress || downloads.loading">
             <ng-container [ngTemplateOutlet]="urlBarActions" />
@@ -162,205 +147,162 @@
       <!-- Options Row -->
       <div class="row mb-3 g-3">
         @if (downloadType === 'video') {
-          <div class="col-md-3">
-            <div class="input-group">
-              <span class="input-group-text">Type</span>
-              <select class="form-select"
-                name="downloadType"
-                [(ngModel)]="downloadType"
-                (change)="downloadTypeChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                @for (type of downloadTypes; track type.id) {
-                  <option [ngValue]="type.id">{{ type.text }}</option>
-                }
-              </select>
-            </div>
+        <div class="col-md-3">
+          <div class="input-group">
+            <span class="input-group-text">Type</span>
+            <select class="form-select" name="downloadType" [(ngModel)]="downloadType" (change)="downloadTypeChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+              @for (type of downloadTypes; track type.id) {
+              <option [ngValue]="type.id">{{ type.text }}</option>
+              }
+            </select>
           </div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <span class="input-group-text">Codec</span>
-              <select class="form-select"
-                name="codec"
-                [(ngModel)]="codec"
-                (change)="codecChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                @for (vc of videoCodecs; track vc.id) {
-                  <option [ngValue]="vc.id">{{ vc.text }}</option>
-                }
-              </select>
-            </div>
+        </div>
+        <div class="col-md-3">
+          <div class="input-group">
+            <span class="input-group-text">Codec</span>
+            <select class="form-select" name="codec" [(ngModel)]="codec" (change)="codecChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+              @for (vc of videoCodecs; track vc.id) {
+              <option [ngValue]="vc.id">{{ vc.text }}</option>
+              }
+            </select>
           </div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <span class="input-group-text">Format</span>
-              <select class="form-select"
-                name="format"
-                [(ngModel)]="format"
-                (change)="formatChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                @for (f of formatOptions; track f.id) {
-                  <option [ngValue]="f.id">{{ f.text }}</option>
-                }
-              </select>
-            </div>
+        </div>
+        <div class="col-md-3">
+          <div class="input-group">
+            <span class="input-group-text">Format</span>
+            <select class="form-select" name="format" [(ngModel)]="format" (change)="formatChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+              @for (f of formatOptions; track f.id) {
+              <option [ngValue]="f.id">{{ f.text }}</option>
+              }
+            </select>
           </div>
-          <div class="col-md-3">
-            <div class="input-group">
-              <span class="input-group-text">Quality</span>
-              <select class="form-select"
-                name="quality"
-                [(ngModel)]="quality"
-                (change)="qualityChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading || !showQualitySelector()">
-                @for (q of qualities; track q.id) {
-                  <option [ngValue]="q.id">{{ q.text }}</option>
-                }
-              </select>
-            </div>
+        </div>
+        <div class="col-md-3">
+          <div class="input-group">
+            <span class="input-group-text">Quality</span>
+            <select class="form-select" name="quality" [(ngModel)]="quality" (change)="qualityChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading || !showQualitySelector()">
+              @for (q of qualities; track q.id) {
+              <option [ngValue]="q.id">{{ q.text }}</option>
+              }
+            </select>
           </div>
+        </div>
         } @else if (downloadType === 'audio') {
-          <div class="col-md-4">
-            <div class="input-group">
-              <span class="input-group-text">Type</span>
-              <select class="form-select"
-                name="downloadType"
-                [(ngModel)]="downloadType"
-                (change)="downloadTypeChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                @for (type of downloadTypes; track type.id) {
-                  <option [ngValue]="type.id">{{ type.text }}</option>
-                }
-              </select>
-            </div>
+        <div class="col-md-4">
+          <div class="input-group">
+            <span class="input-group-text">Type</span>
+            <select class="form-select" name="downloadType" [(ngModel)]="downloadType" (change)="downloadTypeChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+              @for (type of downloadTypes; track type.id) {
+              <option [ngValue]="type.id">{{ type.text }}</option>
+              }
+            </select>
           </div>
-          <div class="col-md-4">
-            <div class="input-group">
-              <span class="input-group-text">Format</span>
-              <select class="form-select"
-                name="format"
-                [(ngModel)]="format"
-                (change)="formatChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                @for (f of formatOptions; track f.id) {
-                  <option [ngValue]="f.id">{{ f.text }}</option>
-                }
-              </select>
-            </div>
+        </div>
+        <div class="col-md-4">
+          <div class="input-group">
+            <span class="input-group-text">Format</span>
+            <select class="form-select" name="format" [(ngModel)]="format" (change)="formatChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+              @for (f of formatOptions; track f.id) {
+              <option [ngValue]="f.id">{{ f.text }}</option>
+              }
+            </select>
           </div>
-          <div class="col-md-4">
-            <div class="input-group">
-              <span class="input-group-text">Quality</span>
-              <select class="form-select"
-                name="quality"
-                [(ngModel)]="quality"
-                (change)="qualityChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                @for (q of qualities; track q.id) {
-                  <option [ngValue]="q.id">{{ q.text }}</option>
-                }
-              </select>
-            </div>
+        </div>
+        <div class="col-md-4">
+          <div class="input-group">
+            <span class="input-group-text">Quality</span>
+            <select class="form-select" name="quality" [(ngModel)]="quality" (change)="qualityChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+              @for (q of qualities; track q.id) {
+              <option [ngValue]="q.id">{{ q.text }}</option>
+              }
+            </select>
           </div>
+        </div>
         } @else if (downloadType === 'captions') {
-          <!-- 4× col-md-3 is too tight at ~768px (long addons wrap the 4th field); 2×2 md–lg, one row lg+ -->
-          <div class="col-12 col-md-6 col-lg-3">
-            <div class="input-group">
-              <span class="input-group-text">Type</span>
-              <select class="form-select"
-                name="downloadType"
-                [(ngModel)]="downloadType"
-                (change)="downloadTypeChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                @for (type of downloadTypes; track type.id) {
-                  <option [ngValue]="type.id">{{ type.text }}</option>
-                }
-              </select>
-            </div>
+        <!-- 4× col-md-3 is too tight at ~768px (long addons wrap the 4th field); 2×2 md–lg, one row lg+ -->
+        <div class="col-12 col-md-6 col-lg-3">
+          <div class="input-group">
+            <span class="input-group-text">Type</span>
+            <select class="form-select" name="downloadType" [(ngModel)]="downloadType" (change)="downloadTypeChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+              @for (type of downloadTypes; track type.id) {
+              <option [ngValue]="type.id">{{ type.text }}</option>
+              }
+            </select>
           </div>
-          <div class="col-12 col-md-6 col-lg-3">
-            <div class="input-group">
-              <span class="input-group-text">Format</span>
-              <select class="form-select"
-                name="format"
-                [(ngModel)]="format"
-                (change)="formatChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading"
-                ngbTooltip="Subtitle output format for captions mode">
-                @for (f of formatOptions; track f.id) {
-                  <option [ngValue]="f.id">{{ f.text }}</option>
-                }
-              </select>
-            </div>
+        </div>
+        <div class="col-12 col-md-6 col-lg-3">
+          <div class="input-group">
+            <span class="input-group-text">Format</span>
+            <select class="form-select" name="format" [(ngModel)]="format" (change)="formatChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading"
+              ngbTooltip="Subtitle output format for captions mode">
+              @for (f of formatOptions; track f.id) {
+              <option [ngValue]="f.id">{{ f.text }}</option>
+              }
+            </select>
           </div>
-          <div class="col-12 col-md-6 col-lg-3">
-            <div class="input-group">
-              <span class="input-group-text">Language</span>
-              <input class="form-control"
-                type="text"
-                list="subtitleLanguageOptions"
-                name="subtitleLanguage"
-                [(ngModel)]="subtitleLanguage"
-                (change)="subtitleLanguageChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading"
-                placeholder="e.g. en, es, zh-Hans"
-                ngbTooltip="Subtitle language (you can type any language code)">
-              <datalist id="subtitleLanguageOptions">
-                @for (lang of subtitleLanguages; track lang.id) {
-                  <option [value]="lang.id">{{ lang.text }}</option>
-                }
-              </datalist>
-            </div>
+        </div>
+        <div class="col-12 col-md-6 col-lg-3">
+          <div class="input-group">
+            <span class="input-group-text">Language</span>
+            <input class="form-control" type="text" list="subtitleLanguageOptions" name="subtitleLanguage"
+              [(ngModel)]="subtitleLanguage" (change)="subtitleLanguageChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading" placeholder="e.g. en, es, zh-Hans"
+              ngbTooltip="Subtitle language (you can type any language code)">
+            <datalist id="subtitleLanguageOptions">
+              @for (lang of subtitleLanguages; track lang.id) {
+              <option [value]="lang.id">{{ lang.text }}</option>
+              }
+            </datalist>
           </div>
-          <div class="col-12 col-md-6 col-lg-3">
-            <div class="input-group">
-              <span class="input-group-text">Subtitle Source</span>
-              <select class="form-select"
-                name="subtitleMode"
-                [(ngModel)]="subtitleMode"
-                (change)="subtitleModeChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading"
-                ngbTooltip="Choose manual, auto, or fallback preference for captions mode">
-                @for (mode of subtitleModes; track mode.id) {
-                  <option [ngValue]="mode.id">{{ mode.text }}</option>
-                }
-              </select>
-            </div>
+        </div>
+        <div class="col-12 col-md-6 col-lg-3">
+          <div class="input-group">
+            <span class="input-group-text">Subtitle Source</span>
+            <select class="form-select" name="subtitleMode" [(ngModel)]="subtitleMode" (change)="subtitleModeChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading"
+              ngbTooltip="Choose manual, auto, or fallback preference for captions mode">
+              @for (mode of subtitleModes; track mode.id) {
+              <option [ngValue]="mode.id">{{ mode.text }}</option>
+              }
+            </select>
           </div>
+        </div>
         } @else {
-          <div class="col-md-6">
-            <div class="input-group">
-              <span class="input-group-text">Type</span>
-              <select class="form-select"
-                name="downloadType"
-                [(ngModel)]="downloadType"
-                (change)="downloadTypeChanged()"
-                [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                @for (type of downloadTypes; track type.id) {
-                  <option [ngValue]="type.id">{{ type.text }}</option>
-                }
-              </select>
-            </div>
+        <div class="col-md-6">
+          <div class="input-group">
+            <span class="input-group-text">Type</span>
+            <select class="form-select" name="downloadType" [(ngModel)]="downloadType" (change)="downloadTypeChanged()"
+              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+              @for (type of downloadTypes; track type.id) {
+              <option [ngValue]="type.id">{{ type.text }}</option>
+              }
+            </select>
           </div>
-          <div class="col-md-6">
-            <div class="input-group">
-              <span class="input-group-text">Format</span>
-              <input class="form-control" value="JPG" disabled>
-            </div>
+        </div>
+        <div class="col-md-6">
+          <div class="input-group">
+            <span class="input-group-text">Format</span>
+            <input class="form-control" value="JPG" disabled>
           </div>
+        </div>
         }
       </div>
 
       <div class="row mb-3 g-3">
         <div class="col-12 text-start">
-          <button type="button"
-            class="btn btn-link p-0 text-decoration-none"
-            (click)="toggleAdvanced()"
-            [attr.aria-expanded]="isAdvancedOpen"
-            aria-controls="advancedOptions">
+          <button type="button" class="btn btn-link p-0 text-decoration-none" (click)="toggleAdvanced()"
+            [attr.aria-expanded]="isAdvancedOpen" aria-controls="advancedOptions">
             Advanced Options
-            <fa-icon
-              [icon]="isAdvancedOpen ? faChevronDown : faChevronRight"
-              class="ms-1" />
+            <fa-icon [icon]="isAdvancedOpen ? faChevronDown : faChevronRight" class="ms-1" />
           </button>
         </div>
       </div>
@@ -375,10 +317,7 @@
                 <div class="col-md-6">
                   <div class="input-group">
                     <span class="input-group-text">Auto Start</span>
-                    <select class="form-select"
-                      name="autoStart"
-                      [(ngModel)]="autoStart"
-                      (change)="autoStartChanged()"
+                    <select class="form-select" name="autoStart" [(ngModel)]="autoStart" (change)="autoStartChanged()"
                       [disabled]="addInProgress || subscribeInProgress || downloads.loading"
                       ngbTooltip="Automatically start downloads when added">
                       <option [ngValue]="true">Yes</option>
@@ -390,30 +329,19 @@
                   <div class="input-group">
                     <span class="input-group-text">Download Folder</span>
                     @if (customDirs$ | async; as customDirs) {
-                    <ng-select [items]="customDirs"
-                      placeholder="Default"
-                      [addTag]="allowCustomDir.bind(this)"
-                      addTagText="Create directory"
-                      bindLabel="folder"
-                      [(ngModel)]="folder"
-                      [disabled]="addInProgress || subscribeInProgress || downloads.loading"
-                      [virtualScroll]="true"
-                      [clearable]="true"
-                      [loading]="downloads.loading"
-                      [searchable]="true"
-                      [closeOnSelect]="true"
+                    <ng-select [items]="customDirs" placeholder="Default" [addTag]="allowCustomDir.bind(this)"
+                      addTagText="Create directory" bindLabel="folder" [(ngModel)]="folder"
+                      [disabled]="addInProgress || subscribeInProgress || downloads.loading" [virtualScroll]="true"
+                      [clearable]="true" [loading]="downloads.loading" [searchable]="true" [closeOnSelect]="true"
                       ngbTooltip="Choose where to save downloads. Type to create a new folder." />
-                  }
+                    }
                   </div>
 
                 </div>
                 <div class="col-md-6">
                   <div class="input-group">
                     <span class="input-group-text">Custom Name Prefix</span>
-                    <input type="text"
-                      class="form-control"
-                      placeholder="Default"
-                      name="customNamePrefix"
+                    <input type="text" class="form-control" placeholder="Default" name="customNamePrefix"
                       [(ngModel)]="customNamePrefix"
                       [disabled]="addInProgress || subscribeInProgress || downloads.loading"
                       ngbTooltip="Add a prefix to downloaded filenames">
@@ -422,13 +350,8 @@
                 <div class="col-md-6">
                   <div class="input-group">
                     <span class="input-group-text">Items Limit</span>
-                    <input type="number"
-                      min="0"
-                      class="form-control"
-                      placeholder="Default"
-                      name="playlistItemLimit"
-                      (keydown)="isNumber($event)"
-                      [(ngModel)]="playlistItemLimit"
+                    <input type="number" min="0" class="form-control" placeholder="Default" name="playlistItemLimit"
+                      (keydown)="isNumber($event)" [(ngModel)]="playlistItemLimit"
                       [disabled]="addInProgress || subscribeInProgress || downloads.loading"
                       ngbTooltip="Maximum number of items to download from a playlist or channel (0 = no limit)">
                   </div>
@@ -436,12 +359,8 @@
                 <div class="col-md-6">
                   <div class="input-group">
                     <span class="input-group-text">Subscription Check (min)</span>
-                    <input type="number"
-                      min="1"
-                      class="form-control"
-                      name="checkIntervalMinutes"
-                      (keydown)="isNumber($event)"
-                      [(ngModel)]="checkIntervalMinutes"
+                    <input type="number" min="1" class="form-control" name="checkIntervalMinutes"
+                      (keydown)="isNumber($event)" [(ngModel)]="checkIntervalMinutes"
                       (ngModelChange)="checkIntervalChanged()"
                       [disabled]="addInProgress || subscribeInProgress || downloads.loading"
                       ngbTooltip="How often to poll subscriptions for new videos">
@@ -463,7 +382,8 @@
                       <div class="input-group">
                         <span class="input-group-text">Template</span>
                         <input type="text" class="form-control" name="chapterTemplate" [(ngModel)]="chapterTemplate"
-                          (change)="chapterTemplateChanged()" [disabled]="addInProgress || subscribeInProgress || downloads.loading"
+                          (change)="chapterTemplateChanged()"
+                          [disabled]="addInProgress || subscribeInProgress || downloads.loading"
                           ngbTooltip="Output template for chapter files">
                       </div>
                     </div>
@@ -476,118 +396,128 @@
               <div class="row">
                 <div class="col-12">
                   <hr class="my-3">
-                  <div class="row g-3 mb-3 hasharr-integration">
+                  <div class="row g-3 mb-3 webhook-integration">
                     <div class="col-12">
-                      <div class="action-group-label">Hasharr Integration</div>
+                      <div class="action-group-label">Webhook Integration</div>
                     </div>
-                    <div class="col-12 col-md-3 d-flex align-items-center">
-                      <div class="form-check form-switch mb-0">
-                        <input class="form-check-input" type="checkbox" role="switch" id="hasharrEnabled"
-                          name="hasharrEnabled" [(ngModel)]="hasharrEnabled"
-                          [disabled]="addInProgress || downloads.loading">
-                        <label class="form-check-label" for="hasharrEnabled">Enabled</label>
-                      </div>
-                    </div>
-                    <div class="col-12 col-md-5">
-                      <div class="input-group">
-                        <span class="input-group-text">Hasharr URL</span>
-                        <input type="text"
-                          class="form-control"
-                          placeholder="http://hasharr:9995"
-                          name="hasharrUrl"
-                          [(ngModel)]="hasharrUrl"
-                          [disabled]="addInProgress || downloads.loading">
-                      </div>
-                    </div>
-                    <div class="col-6 col-md-2">
-                      <div class="input-group">
-                        <span class="input-group-text">Service ID</span>
-                        <input type="number"
-                          min="1"
-                          class="form-control"
-                          name="hasharrServiceID"
-                          [(ngModel)]="hasharrServiceID"
-                          [disabled]="addInProgress || downloads.loading">
-                      </div>
-                    </div>
-                    <div class="col-6 col-md-2">
-                      <div class="input-group">
-                        <span class="input-group-text">Timeout</span>
-                        <input type="number"
-                          min="1"
-                          class="form-control"
-                          name="hasharrTimeoutSec"
-                          [(ngModel)]="hasharrTimeoutSec"
-                          [disabled]="addInProgress || downloads.loading">
+                    <div class="col-12">
+                      <div class="webhook-control-row">
+                        <div class="webhook-control-enabled d-flex align-items-center">
+                          <div class="form-check form-switch mb-0">
+                            <input class="form-check-input" type="checkbox" role="switch" id="webhookEnabled"
+                              name="webhookEnabled" [(ngModel)]="webhookEnabled"
+                              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+                            <label class="form-check-label" for="webhookEnabled">Enabled</label>
+                          </div>
+                        </div>
+                        <div class="webhook-control-endpoint">
+                          <div class="input-group">
+                            <span class="input-group-text">Endpoint</span>
+                            <input type="text" class="form-control" placeholder="http://localhost:9995/api/hash-service/1"
+                              name="webhookEndpoint" [(ngModel)]="webhookEndpoint"
+                              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+                          </div>
+                        </div>
+                        <div class="webhook-control-timeout">
+                          <div class="input-group webhook-timeout-group">
+                            <span class="input-group-text">Timeout</span>
+                            <input type="number" min="1" class="form-control webhook-timeout-input" name="webhookTimeoutSec"
+                              [(ngModel)]="webhookTimeoutSec"
+                              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+                          </div>
+                        </div>
                       </div>
                     </div>
                     <div class="col-12 col-md-7">
-                      <div class="hasharr-action-row">
-                        <button type="button" class="btn btn-secondary" (click)="saveHasharrSettings()">
-                          Save Hasharr Settings
+                      <div class="webhook-action-row">
+                        <button type="button" class="btn btn-secondary" (click)="saveWebhookSettings()">
+                          Save Webhook
                         </button>
-                        <button type="button" class="btn btn-outline-secondary" (click)="testHasharrService()">
+                        <button type="button" class="btn btn-outline-secondary" (click)="testWebhookService()">
                           Test Service
                         </button>
                       </div>
                     </div>
                     <div class="col-12 col-md-5">
-                      <div class="hasharr-status-block">
-                        @if (hasharrSettingsStatus) {
-                          <small class="text-muted d-block">{{ hasharrSettingsStatus }}</small>
+                      <div class="webhook-status-block">
+                        @if (webhookSettingsStatus) {
+                        <small class="text-muted d-block">{{ webhookSettingsStatus }}</small>
                         }
-                        @if (hasharrTestStatus) {
-                          <small class="text-muted d-block">{{ hasharrTestStatus }}</small>
+                        @if (webhookTestStatus) {
+                        <small class="text-muted d-block">{{ webhookTestStatus }}</small>
                         }
                       </div>
                     </div>
-                    @if (hasharrTestProfile) {
-                      <div class="col-12">
-                        <div class="small text-muted hasharr-profile-result">
-                          <div><strong>Profile Name:</strong> {{ hasharrTestProfile['name'] }}</div>
-                          <div><strong>Enabled:</strong> {{ hasharrTestProfile['enabled'] }}</div>
-                          <div><strong>Apply Actions:</strong> {{ hasharrTestProfile['applyActions'] }}</div>
-                          <div><strong>Stash Index:</strong> {{ hasharrTestProfile['stashIndex'] }}</div>
-                          <div><strong>Max Time Delta:</strong> {{ hasharrTestProfile['maxTimeDelta'] }}</div>
-                          <div><strong>Max Distance:</strong> {{ hasharrTestProfile['maxDistance'] }}</div>
-                        </div>
+                    @if (webhookTestResponsePretty) {
+                    <div class="col-12">
+                      <div class="webhook-response-view-toggle">
+                        <button
+                          type="button"
+                          class="btn btn-sm"
+                          [class.btn-secondary]="webhookTestViewMode === 'pretty'"
+                          [class.btn-outline-secondary]="webhookTestViewMode !== 'pretty'"
+                          (click)="setWebhookTestViewMode('pretty')">
+                          Pretty
+                        </button>
+                        <button
+                          type="button"
+                          class="btn btn-sm"
+                          [class.btn-secondary]="webhookTestViewMode === 'raw'"
+                          [class.btn-outline-secondary]="webhookTestViewMode !== 'raw'"
+                          (click)="setWebhookTestViewMode('raw')">
+                          Raw
+                        </button>
                       </div>
+
+                      @if (webhookTestViewMode === 'pretty') {
+                      <div class="webhook-response-block webhook-response-pretty">
+                        <table class="table table-sm table-borderless mb-0">
+                          <tbody>
+                            @for (entry of webhookTestResponseEntries; track entry.key) {
+                            <tr>
+                              <th scope="row">{{ entry.key }}:</th>
+                              <td>{{ entry.value }}</td>
+                            </tr>
+                            }
+                          </tbody>
+                        </table>
+                      </div>
+                      } @else {
+                      <pre class="webhook-response-block">{{ webhookTestResponseRaw }}</pre>
+                      }
+                    </div>
                     }
                   </div>
                   <div class="row g-3">
                     <div class="col-md-4">
                       <div class="action-group-label">Cookies</div>
                       <input type="file" id="cookie-upload" class="d-none" accept=".txt"
-                        (change)="onCookieFileSelect($event)"
-                        [disabled]="cookieUploadInProgress || addInProgress">
+                        (change)="onCookieFileSelect($event)" [disabled]="cookieUploadInProgress || addInProgress">
                       <div class="btn-group w-100" role="group">
                         <label class="btn mb-0"
                           [class]="hasCookies ? 'btn cookie-active-btn mb-0' : 'btn cookie-btn mb-0'"
-                          [class.disabled]="cookieUploadInProgress || addInProgress"
-                          for="cookie-upload"
+                          [class.disabled]="cookieUploadInProgress || addInProgress" for="cookie-upload"
                           ngbTooltip="Upload a cookies.txt file for authenticated downloads">
                           @if (cookieUploadInProgress) {
-                            <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+                          <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                           } @else {
-                            <fa-icon [icon]="faUpload" class="me-2" />
+                          <fa-icon [icon]="faUpload" class="me-2" />
                           }
                           {{ hasCookies ? 'Replace Cookies' : 'Upload Cookies' }}
                         </label>
                         @if (hasCookies) {
-                          <button type="button" class="btn btn-outline-danger"
-                            (click)="deleteCookies()"
-                            [disabled]="cookieUploadInProgress || addInProgress"
-                            ngbTooltip="Remove uploaded cookies">
-                            <fa-icon [icon]="faTrashAlt" />
-                          </button>
+                        <button type="button" class="btn btn-outline-danger" (click)="deleteCookies()"
+                          [disabled]="cookieUploadInProgress || addInProgress" ngbTooltip="Remove uploaded cookies">
+                          <fa-icon [icon]="faTrashAlt" />
+                        </button>
                         }
                       </div>
                       <div class="cookie-status" [class.active]="hasCookies">
                         @if (hasCookies) {
-                          <fa-icon [icon]="faCheckCircle" class="me-1" />
-                          Cookies active
+                        <fa-icon [icon]="faCheckCircle" class="me-1" />
+                        Cookies active
                         } @else {
-                          No cookies configured
+                        No cookies configured
                         }
                       </div>
                     </div>
@@ -595,25 +525,19 @@
                       <div class="action-group-label">Bulk Actions</div>
                       <div class="row g-2">
                         <div class="col-4">
-                          <button type="button"
-                            class="btn btn-secondary w-100"
-                            (click)="openBatchImportModal()">
+                          <button type="button" class="btn btn-secondary w-100" (click)="openBatchImportModal()">
                             <fa-icon [icon]="faFileImport" class="me-2" />
                             Import URLs
                           </button>
                         </div>
                         <div class="col-4">
-                          <button type="button"
-                            class="btn btn-secondary w-100"
-                            (click)="exportBatchUrls('all')">
+                          <button type="button" class="btn btn-secondary w-100" (click)="exportBatchUrls('all')">
                             <fa-icon [icon]="faFileExport" class="me-2" />
                             Export URLs
                           </button>
                         </div>
                         <div class="col-4">
-                          <button type="button"
-                            class="btn btn-secondary w-100"
-                            (click)="copyBatchUrls('all')">
+                          <button type="button" class="btn btn-secondary w-100" (click)="copyBatchUrls('all')">
                             <fa-icon [icon]="faCopy" class="me-2" />
                             Copy URLs
                           </button>
@@ -631,11 +555,8 @@
   </form>
 
   <!-- Batch Import Modal -->
-  <div class="modal fade" tabindex="-1" role="dialog"
-  aria-modal="true"
-  aria-labelledby="batch-import-modal-title"
-  [class.show]="batchImportModalOpen"
-  [style.display]="batchImportModalOpen ? 'block' : 'none'">
+  <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="batch-import-modal-title"
+    [class.show]="batchImportModalOpen" [style.display]="batchImportModalOpen ? 'block' : 'none'">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -644,18 +565,18 @@
         </div>
         <div class="modal-body">
           <textarea id="batch-import-textarea" [(ngModel)]="batchImportText" class="form-control" rows="6"
-          placeholder="Paste one video URL per line"></textarea>
+            placeholder="Paste one video URL per line"></textarea>
           <div class="mt-2">
             @if (batchImportStatus) {
-              <small>{{ batchImportStatus }}</small>
+            <small>{{ batchImportStatus }}</small>
             }
           </div>
         </div>
         <div class="modal-footer">
           @if (importInProgress) {
-            <button type="button" class="btn btn-danger me-auto" (click)="cancelBatchImport()">
-              Cancel Import
-            </button>
+          <button type="button" class="btn btn-danger me-auto" (click)="cancelBatchImport()">
+            Cancel Import
+          </button>
           }
           <button type="button" class="btn btn-secondary" (click)="closeBatchImportModal()">Close</button>
           <button type="button" class="btn btn-primary" (click)="startBatchImport()" [disabled]="importInProgress">
@@ -666,23 +587,60 @@
     </div>
   </div>
 
+  <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="ui-settings-modal-title"
+    [class.show]="settingsModalOpen" [style.display]="settingsModalOpen ? 'block' : 'none'">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 id="ui-settings-modal-title" class="modal-title">UI Refresh Settings</h5>
+          <button type="button" class="btn-close" aria-label="Close" (click)="closeSettingsModal()"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row g-3">
+            <div class="col-12">
+              <div class="input-group">
+                <span class="input-group-text">Focused Refresh (ms)</span>
+                <input type="number" min="500" max="10000" class="form-control" [(ngModel)]="focusedRefreshMs"
+                  [ngModelOptions]="{standalone: true}">
+              </div>
+            </div>
+            <div class="col-12">
+              <div class="input-group">
+                <span class="input-group-text">Background Refresh (ms)</span>
+                <input type="number" min="2000" max="120000" class="form-control" [(ngModel)]="backgroundRefreshMs"
+                  [ngModelOptions]="{standalone: true}">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" (click)="closeSettingsModal()">Cancel</button>
+          <button type="button" class="btn btn-primary" (click)="saveRefreshSettings()">Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
 
   @if (downloads.loading) {
-    <div class="alert alert-info" role="alert">
-      Connecting to server...
-    </div>
+  <div class="alert alert-info" role="alert">
+    Connecting to server...
+  </div>
   }
   <div class="metube-section-header">Downloading</div>
   <div class="px-2 py-3 border-bottom">
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #queueDelSelected (click)="delSelectedDownloads('queue')"><fa-icon [icon]="faTrashAlt" />&nbsp; Cancel selected</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #queueDownloadSelected (click)="startSelectedDownloads('queue')"><fa-icon [icon]="faDownload" />&nbsp; Download selected</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #queueDelSelected
+      (click)="delSelectedDownloads('queue')"><fa-icon [icon]="faTrashAlt" />&nbsp; Cancel selected</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #queueDownloadSelected
+      (click)="startSelectedDownloads('queue')"><fa-icon [icon]="faDownload" />&nbsp; Download selected</button>
   </div>
   <div class="overflow-auto">
     <table class="table">
       <thead>
         <tr>
           <th scope="col" style="width: 1rem;">
-            <app-select-all-checkbox #queueMasterCheckboxRef [id]="'queue'" [list]="downloads.queue" (changed)="queueSelectionChanged($event)" />
+            <app-select-all-checkbox #queueMasterCheckboxRef [id]="'queue'" [list]="downloads.queue"
+              (changed)="queueSelectionChanged($event)" />
           </th>
           <th scope="col">Video</th>
           <th scope="col" style="width: 8rem;">Speed</th>
@@ -692,29 +650,37 @@
       </thead>
       <tbody>
         @for (download of downloads.queue | keyvalue: asIsOrder; track download.value.id) {
-          <tr [class.disabled]='download.value.deleting'>
-            <td>
-              <app-item-checkbox [id]="download.key" [master]="queueMasterCheckboxRef" [checkable]="download.value" />
-            </td>
-            <td title="{{ download.value.filename }}">
-              <div class="d-flex flex-column flex-sm-row align-items-center row-gap-2 column-gap-3">
-                <div>{{ download.value.title }} </div>
-                <ngb-progressbar height="1.5rem" [showValue]="download.value.status !== 'preparing'" [striped]="download.value.status === 'preparing'" [animated]="download.value.status === 'preparing'" type="success"
-                [value]="download.value.status === 'preparing' ? 100 : download.value.percent" class="download-progressbar" />
-              </div>
-            </td>
-            <td>{{ download.value.speed | speed }}</td>
-            <td>{{ download.value.eta | eta }}</td>
-            <td>
-              <div class="d-flex">
-                @if (download.value.status === 'pending') {
-                  <button type="button" class="btn btn-link" [attr.aria-label]="'Start download for ' + download.value.title" (click)="downloadItemByKey(download.key)"><fa-icon [icon]="faDownload" /></button>
-                }
-                <button type="button" class="btn btn-link" [attr.aria-label]="'Remove ' + download.value.title + ' from queue'" (click)="delDownload('queue', download.key)"><fa-icon [icon]="faTrashAlt" /></button>
-                <a href="{{download.value.url}}" target="_blank" class="btn btn-link" [attr.aria-label]="'Open source URL for ' + download.value.title"><fa-icon [icon]="faExternalLinkAlt" /></a>
-              </div>
-            </td>
-          </tr>
+        <tr [class.disabled]='download.value.deleting'>
+          <td>
+            <app-item-checkbox [id]="download.key" [master]="queueMasterCheckboxRef" [checkable]="download.value" />
+          </td>
+          <td title="{{ download.value.filename }}">
+            <div class="d-flex flex-column flex-sm-row align-items-center row-gap-2 column-gap-3">
+              <div>{{ download.value.title }} </div>
+              <ngb-progressbar height="1.5rem" [showValue]="download.value.status !== 'preparing'"
+                [striped]="download.value.status === 'preparing'" [animated]="download.value.status === 'preparing'"
+                type="success" [value]="download.value.status === 'preparing' ? 100 : download.value.percent"
+                class="download-progressbar" />
+            </div>
+          </td>
+          <td>{{ download.value.speed | speed }}</td>
+          <td>{{ download.value.eta | eta }}</td>
+          <td>
+            <div class="d-flex">
+              @if (download.value.status === 'pending') {
+              <button type="button" class="btn btn-link"
+                [attr.aria-label]="'Start download for ' + download.value.title"
+                (click)="downloadItemByKey(download.key)"><fa-icon [icon]="faDownload" /></button>
+              }
+              <button type="button" class="btn btn-link"
+                [attr.aria-label]="'Remove ' + download.value.title + ' from queue'"
+                (click)="delDownload('queue', download.key)"><fa-icon [icon]="faTrashAlt" /></button>
+              <a href="{{download.value.url}}" target="_blank" class="btn btn-link"
+                [attr.aria-label]="'Open source URL for ' + download.value.title"><fa-icon
+                  [icon]="faExternalLinkAlt" /></a>
+            </div>
+          </td>
+        </tr>
         }
       </tbody>
     </table>
@@ -722,19 +688,28 @@
 
   <div class="metube-section-header">Completed</div>
   <div class="px-2 py-3 border-bottom">
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" (click)="toggleSortOrder()" ngbTooltip="{{ sortAscending ? 'Oldest first' : 'Newest first' }}"><fa-icon [icon]="sortAscending ? faSortAmountUp : faSortAmountDown" />&nbsp; {{ sortAscending ? 'Oldest first' : 'Newest first' }}</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneDelSelected (click)="delSelectedDownloads('done')"><fa-icon [icon]="faTrashAlt" />&nbsp; Clear selected</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" [disabled]="!hasCompletedDone" (click)="clearCompletedDownloads()"><fa-icon [icon]="faCheckCircle" />&nbsp; Clear completed</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" [disabled]="!hasFailedDone" (click)="clearFailedDownloads()"><fa-icon [icon]="faTimesCircle" />&nbsp; Clear failed</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" [disabled]="!hasFailedDone" (click)="retryFailedDownloads()"><fa-icon [icon]="faRedoAlt" />&nbsp; Retry failed</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneDownloadSelected (click)="downloadSelectedFiles()"><fa-icon [icon]="faDownload" />&nbsp; Download Selected</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" (click)="toggleSortOrder()"
+      ngbTooltip="{{ sortAscending ? 'Oldest first' : 'Newest first' }}"><fa-icon
+        [icon]="sortAscending ? faSortAmountUp : faSortAmountDown" />&nbsp; {{ sortAscending ? 'Oldest first' : 'Newest
+      first' }}</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneDelSelected
+      (click)="delSelectedDownloads('done')"><fa-icon [icon]="faTrashAlt" />&nbsp; Clear selected</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" [disabled]="!hasCompletedDone"
+      (click)="clearCompletedDownloads()"><fa-icon [icon]="faCheckCircle" />&nbsp; Clear completed</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" [disabled]="!hasFailedDone"
+      (click)="clearFailedDownloads()"><fa-icon [icon]="faTimesCircle" />&nbsp; Clear failed</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" [disabled]="!hasFailedDone"
+      (click)="retryFailedDownloads()"><fa-icon [icon]="faRedoAlt" />&nbsp; Retry failed</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneDownloadSelected
+      (click)="downloadSelectedFiles()"><fa-icon [icon]="faDownload" />&nbsp; Download Selected</button>
   </div>
   <div class="overflow-auto">
     <table class="table">
       <thead>
         <tr>
           <th scope="col" style="width: 1rem;">
-            <app-select-all-checkbox #doneMasterCheckboxRef [id]="'done'" [list]="downloads.done" (changed)="doneSelectionChanged($event)" />
+            <app-select-all-checkbox #doneMasterCheckboxRef [id]="'done'" [list]="downloads.done"
+              (changed)="doneSelectionChanged($event)" />
           </th>
           <th scope="col">Video</th>
           <th scope="col">Type</th>
@@ -747,105 +722,110 @@
       </thead>
       <tbody>
         @for (entry of cachedSortedDone; track entry[1].id) {
-          <tr [class.disabled]='entry[1].deleting'>
-            <td>
-              <app-item-checkbox [id]="entry[0]" [master]="doneMasterCheckboxRef" [checkable]="entry[1]" />
-            </td>
-            <td>
-              <div style="display: inline-block; width: 1.5rem;">
-                @if (entry[1].status === 'finished') {
-                  <fa-icon [icon]="faCheckCircle" class="text-success" />
-                }
-                @if (entry[1].status === 'error') {
-                  <button type="button" class="btn btn-link p-0"
-                    (click)="toggleErrorDetail(entry[0])"
-                    [attr.aria-label]="'Toggle error details for ' + entry[1].title"
-                    [attr.aria-expanded]="isErrorExpanded(entry[0])">
-                    <fa-icon [icon]="faTimesCircle" class="text-danger" />
-                  </button>
-                }
-              </div>
-              <span ngbTooltip="{{buildResultItemTooltip(entry[1])}}">@if (!!entry[1].filename) {
-                <a href="{{buildDownloadLink(entry[1])}}" target="_blank">{{ entry[1].title }}</a>
+        <tr [class.disabled]='entry[1].deleting'>
+          <td>
+            <app-item-checkbox [id]="entry[0]" [master]="doneMasterCheckboxRef" [checkable]="entry[1]" />
+          </td>
+          <td>
+            <div style="display: inline-block; width: 1.5rem;">
+              @if (entry[1].status === 'finished') {
+              <fa-icon [icon]="faCheckCircle" class="text-success" />
+              }
+              @if (entry[1].status === 'error') {
+              <button type="button" class="btn btn-link p-0" (click)="toggleErrorDetail(entry[0])"
+                [attr.aria-label]="'Toggle error details for ' + entry[1].title"
+                [attr.aria-expanded]="isErrorExpanded(entry[0])">
+                <fa-icon [icon]="faTimesCircle" class="text-danger" />
+              </button>
+              }
+            </div>
+            <span ngbTooltip="{{buildResultItemTooltip(entry[1])}}">@if (!!entry[1].filename) {
+              <a href="{{buildDownloadLink(entry[1])}}" target="_blank">{{ entry[1].title }}</a>
               } @else {
-                @if (entry[1].status === 'error') {
-                  <button type="button" class="btn btn-link p-0 text-start align-baseline" (click)="toggleErrorDetail(entry[0])">
-                    {{entry[1].title}}
-                    @if (!isErrorExpanded(entry[0])) {
-                      <small class="text-danger ms-2">
-                        <fa-icon [icon]="faChevronRight" size="xs" class="me-1" />Click for details
-                      </small>
-                    }
-                  </button>
-                } @else {
-                  <span>{{entry[1].title}}</span>
+              @if (entry[1].status === 'error') {
+              <button type="button" class="btn btn-link p-0 text-start align-baseline"
+                (click)="toggleErrorDetail(entry[0])">
+                {{entry[1].title}}
+                @if (!isErrorExpanded(entry[0])) {
+                <small class="text-danger ms-2">
+                  <fa-icon [icon]="faChevronRight" size="xs" class="me-1" />Click for details
+                </small>
                 }
+              </button>
+              } @else {
+              <span>{{entry[1].title}}</span>
+              }
               }</span>
-              @if (entry[1].status === 'error' && isErrorExpanded(entry[0])) {
-                <div class="alert alert-danger py-2 px-3 mt-2 mb-0 small" style="border-left: 4px solid var(--bs-danger);">
-                  <div class="d-flex justify-content-between align-items-start">
-                    <div class="flex-grow-1">
-                      @if (entry[1].msg) {
-                        <div class="mb-1"><strong>Message:</strong> {{entry[1].msg}}</div>
-                      }
-                      @if (entry[1].error) {
-                        <div class="mb-1"><strong>Error:</strong> {{entry[1].error}}</div>
-                      }
-                      <div class="text-muted" style="word-break: break-all;"><strong>URL:</strong> {{entry[1].url}}</div>
-                    </div>
-                    <button type="button" class="btn btn-sm btn-outline-danger ms-2 flex-shrink-0"
-                      (click)="copyErrorMessage(entry[0], entry[1]); $event.stopPropagation()"
-                      ngbTooltip="Copy error details to clipboard">
-                      @if (lastCopiedErrorId === entry[0]) {
-                        <span class="text-success">Copied!</span>
-                      } @else {
-                        <fa-icon [icon]="faCopy" />
-                      }
-                    </button>
-                  </div>
+            @if (entry[1].status === 'error' && isErrorExpanded(entry[0])) {
+            <div class="alert alert-danger py-2 px-3 mt-2 mb-0 small" style="border-left: 4px solid var(--bs-danger);">
+              <div class="d-flex justify-content-between align-items-start">
+                <div class="flex-grow-1">
+                  @if (entry[1].msg) {
+                  <div class="mb-1"><strong>Message:</strong> {{entry[1].msg}}</div>
+                  }
+                  @if (entry[1].error) {
+                  <div class="mb-1"><strong>Error:</strong> {{entry[1].error}}</div>
+                  }
+                  <div class="text-muted" style="word-break: break-all;"><strong>URL:</strong> {{entry[1].url}}</div>
                 </div>
-              }
-            </td>
-            <td class="text-nowrap">
-              {{ downloadTypeLabel(entry[1]) }}
-            </td>
-            <td class="text-nowrap">
-              {{ formatQualityLabel(entry[1]) }}
-            </td>
-            <td class="text-nowrap">
-              {{ formatCodecLabel(entry[1]) }}
-            </td>
-            <td>
-              @if (entry[1].size) {
-                <span>{{ entry[1].size | fileSize }}</span>
-              }
-            </td>
-            <td class="text-nowrap">
-              @if (entry[1].timestamp) {
-                <span>{{ entry[1].timestamp / 1000000 | date:'yyyy-MM-dd HH:mm' }}</span>
-              }
-            </td>
-            <td>
-              <div class="d-flex">
-                @if (entry[1].status === 'error') {
-                  <button type="button" class="btn btn-link" [attr.aria-label]="'Retry download for ' + entry[1].title" (click)="retryDownload(entry[0], entry[1])"><fa-icon [icon]="faRedoAlt" /></button>
-                }
-                @if (entry[1].filename) {
-                  <a href="{{buildDownloadLink(entry[1])}}" download class="btn btn-link" [attr.aria-label]="'Download result file for ' + entry[1].title"><fa-icon [icon]="faDownload" /></a>
-                }
-                <a href="{{entry[1].url}}" target="_blank" class="btn btn-link" [attr.aria-label]="'Open source URL for ' + entry[1].title"><fa-icon [icon]="faExternalLinkAlt" /></a>
-                <button type="button" class="btn btn-link" [attr.aria-label]="'Delete completed item ' + entry[1].title" (click)="delDownload('done', entry[0])"><fa-icon [icon]="faTrashAlt" /></button>
+                <button type="button" class="btn btn-sm btn-outline-danger ms-2 flex-shrink-0"
+                  (click)="copyErrorMessage(entry[0], entry[1]); $event.stopPropagation()"
+                  ngbTooltip="Copy error details to clipboard">
+                  @if (lastCopiedErrorId === entry[0]) {
+                  <span class="text-success">Copied!</span>
+                  } @else {
+                  <fa-icon [icon]="faCopy" />
+                  }
+                </button>
               </div>
-            </td>
-          </tr>
+            </div>
+            }
+          </td>
+          <td class="text-nowrap">
+            {{ downloadTypeLabel(entry[1]) }}
+          </td>
+          <td class="text-nowrap">
+            {{ formatQualityLabel(entry[1]) }}
+          </td>
+          <td class="text-nowrap">
+            {{ formatCodecLabel(entry[1]) }}
+          </td>
+          <td>
+            @if (entry[1].size) {
+            <span>{{ entry[1].size | fileSize }}</span>
+            }
+          </td>
+          <td class="text-nowrap">
+            @if (entry[1].timestamp) {
+            <span>{{ entry[1].timestamp / 1000000 | date:'yyyy-MM-dd HH:mm' }}</span>
+            }
+          </td>
+          <td>
+            <div class="d-flex">
+              @if (entry[1].status === 'error') {
+              <button type="button" class="btn btn-link" [attr.aria-label]="'Retry download for ' + entry[1].title"
+                (click)="retryDownload(entry[0], entry[1])"><fa-icon [icon]="faRedoAlt" /></button>
+              }
+              @if (entry[1].filename) {
+              <a href="{{buildDownloadLink(entry[1])}}" download class="btn btn-link"
+                [attr.aria-label]="'Download result file for ' + entry[1].title"><fa-icon [icon]="faDownload" /></a>
+              }
+              <a href="{{entry[1].url}}" target="_blank" class="btn btn-link"
+                [attr.aria-label]="'Open source URL for ' + entry[1].title"><fa-icon [icon]="faExternalLinkAlt" /></a>
+              <button type="button" class="btn btn-link" [attr.aria-label]="'Delete completed item ' + entry[1].title"
+                (click)="delDownload('done', entry[0])"><fa-icon [icon]="faTrashAlt" /></button>
+            </div>
+          </td>
+        </tr>
         @if (entry[1].chapter_files && entry[1].chapter_files.length > 0) {
-          @for (chapterFile of entry[1].chapter_files; track chapterFile.filename) {
-            <tr [class.disabled]='entry[1].deleting'>
-              <td></td>
-              <td>
-                <div style="padding-left: 2rem;">
+        @for (chapterFile of entry[1].chapter_files; track chapterFile.filename) {
+        <tr [class.disabled]='entry[1].deleting'>
+          <td></td>
+          <td>
+            <div style="padding-left: 2rem;">
               <fa-icon [icon]="faCheckCircle" class="text-success me-2" />
-              <a href="{{buildChapterDownloadLink(entry[1], chapterFile.filename)}}" target="_blank" [attr.aria-label]="'Open chapter file ' + getChapterFileName(chapterFile.filename)">{{
+              <a href="{{buildChapterDownloadLink(entry[1], chapterFile.filename)}}" target="_blank"
+                [attr.aria-label]="'Open chapter file ' + getChapterFileName(chapterFile.filename)">{{
                 getChapterFileName(chapterFile.filename) }}</a>
             </div>
           </td>
@@ -860,14 +840,15 @@
           <td></td>
           <td>
             <div class="d-flex">
-              <a href="{{buildChapterDownloadLink(entry[1], chapterFile.filename)}}" download [attr.aria-label]="'Download chapter file ' + getChapterFileName(chapterFile.filename)"
+              <a href="{{buildChapterDownloadLink(entry[1], chapterFile.filename)}}" download
+                [attr.aria-label]="'Download chapter file ' + getChapterFileName(chapterFile.filename)"
                 class="btn btn-link"><fa-icon [icon]="faDownload" /></a>
             </div>
           </td>
         </tr>
         }
-      }
-    }
+        }
+        }
       </tbody>
     </table>
   </div>
@@ -875,29 +856,26 @@
   <div class="metube-section-header">Subscriptions</div>
   <div class="px-2 py-3 border-bottom">
     @if (checkingAllSubscriptions) {
-      <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled>
-        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Check all now
-      </button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled>
+      <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Check all now
+    </button>
     } @else {
-      <button type="button" class="btn btn-link text-decoration-none px-0 me-4"
-        (click)="checkAllSubscriptions()"
-        [disabled]="downloads.loading || cachedSubs.length === 0 || checkingSelectedSubscriptions">
-        <fa-icon [icon]="faRedoAlt" />&nbsp; Check all now
-      </button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" (click)="checkAllSubscriptions()"
+      [disabled]="downloads.loading || cachedSubs.length === 0 || checkingSelectedSubscriptions">
+      <fa-icon [icon]="faRedoAlt" />&nbsp; Check all now
+    </button>
     }
     @if (checkingSelectedSubscriptions) {
-      <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled>
-        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Check selected
-      </button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled>
+      <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Check selected
+    </button>
     } @else {
-      <button type="button" class="btn btn-link text-decoration-none px-0 me-4"
-        (click)="checkSelectedSubscriptions()"
-        [disabled]="downloads.loading || selectedSubscriptionIds.size === 0 || checkingAllSubscriptions">
-        <fa-icon [icon]="faRedoAlt" />&nbsp; Check selected
-      </button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" (click)="checkSelectedSubscriptions()"
+      [disabled]="downloads.loading || selectedSubscriptionIds.size === 0 || checkingAllSubscriptions">
+      <fa-icon [icon]="faRedoAlt" />&nbsp; Check selected
+    </button>
     }
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4"
-      (click)="deleteSelectedSubscriptions()"
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" (click)="deleteSelectedSubscriptions()"
       [disabled]="downloads.loading || selectedSubscriptionIds.size === 0">
       <fa-icon [icon]="faTrashAlt" />&nbsp; Delete selected
     </button>
@@ -907,10 +885,8 @@
       <thead>
         <tr>
           <th scope="col" style="width: 1rem;">
-            <input type="checkbox" class="form-check-input"
-              [checked]="allSubsSelected()"
-              (change)="toggleSubMaster($event)"
-              [disabled]="downloads.loading || cachedSubs.length === 0"
+            <input type="checkbox" class="form-check-input" [checked]="allSubsSelected()"
+              (change)="toggleSubMaster($event)" [disabled]="downloads.loading || cachedSubs.length === 0"
               aria-label="Select all subscriptions" />
           </th>
           <th scope="col">Name</th>
@@ -923,71 +899,61 @@
       </thead>
       <tbody>
         @for (entry of cachedSubs; track entry[0]) {
-          <tr>
-            <td>
-              <input type="checkbox" class="form-check-input"
-                [checked]="isSubSelected(entry[0])"
-                (change)="toggleSubSelected(entry[0])"
+        <tr>
+          <td>
+            <input type="checkbox" class="form-check-input" [checked]="isSubSelected(entry[0])"
+              (change)="toggleSubSelected(entry[0])" [disabled]="downloads.loading"
+              [attr.aria-label]="'Select subscription ' + entry[1].name" />
+          </td>
+          <td>{{ entry[1].name }}</td>
+          <td class="text-break"><a [href]="entry[1].url" target="_blank" rel="noopener">{{ entry[1].url }}</a></td>
+          <td>{{ entry[1].check_interval_minutes }}</td>
+          <td class="text-nowrap">
+            @if (entry[1].last_checked !== null) {
+            <span>{{ entry[1].last_checked! * 1000 | date:'yyyy-MM-dd HH:mm:ss' }}</span>
+            } @else {
+            <span class="text-muted">—</span>
+            }
+          </td>
+          <td>
+            @if (entry[1].error) {
+            <span class="text-danger small">{{ entry[1].error }}</span>
+            } @else if (entry[1].enabled) {
+            <span class="text-success">Active</span>
+            } @else {
+            <span class="text-secondary">Paused</span>
+            }
+          </td>
+          <td>
+            <div class="d-flex flex-wrap gap-1">
+              @if (isSubscriptionChecking(entry[0])) {
+              <button type="button" class="btn btn-link btn-sm p-0 me-2" disabled
+                [attr.aria-label]="'Checking ' + entry[1].name" ngbTooltip="Checking now">
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+              </button>
+              } @else {
+              <button type="button" class="btn btn-link btn-sm p-0 me-2" (click)="checkSubscriptionNow(entry[0])"
+                [disabled]="downloads.loading" [attr.aria-label]="'Check now ' + entry[1].name" ngbTooltip="Check now">
+                <fa-icon [icon]="faRedoAlt" />
+              </button>
+              }
+              <button type="button" class="btn btn-link btn-sm p-0 me-2" (click)="toggleSubscriptionEnabled(entry[1])"
                 [disabled]="downloads.loading"
-                [attr.aria-label]="'Select subscription ' + entry[1].name" />
-            </td>
-            <td>{{ entry[1].name }}</td>
-            <td class="text-break"><a [href]="entry[1].url" target="_blank" rel="noopener">{{ entry[1].url }}</a></td>
-            <td>{{ entry[1].check_interval_minutes }}</td>
-            <td class="text-nowrap">
-              @if (entry[1].last_checked !== null) {
-                <span>{{ entry[1].last_checked! * 1000 | date:'yyyy-MM-dd HH:mm:ss' }}</span>
-              } @else {
-                <span class="text-muted">—</span>
-              }
-            </td>
-            <td>
-              @if (entry[1].error) {
-                <span class="text-danger small">{{ entry[1].error }}</span>
-              } @else if (entry[1].enabled) {
-                <span class="text-success">Active</span>
-              } @else {
-                <span class="text-secondary">Paused</span>
-              }
-            </td>
-            <td>
-              <div class="d-flex flex-wrap gap-1">
-                @if (isSubscriptionChecking(entry[0])) {
-                  <button type="button" class="btn btn-link btn-sm p-0 me-2"
-                    disabled
-                    [attr.aria-label]="'Checking ' + entry[1].name"
-                    ngbTooltip="Checking now">
-                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                  </button>
+                [attr.aria-label]="(entry[1].enabled ? 'Pause ' : 'Resume ') + entry[1].name"
+                [ngbTooltip]="entry[1].enabled ? 'Pause' : 'Resume'">
+                @if (entry[1].enabled) {
+                <fa-icon [icon]="faPause" />
                 } @else {
-                  <button type="button" class="btn btn-link btn-sm p-0 me-2"
-                    (click)="checkSubscriptionNow(entry[0])"
-                    [disabled]="downloads.loading"
-                    [attr.aria-label]="'Check now ' + entry[1].name"
-                    ngbTooltip="Check now">
-                    <fa-icon [icon]="faRedoAlt" />
-                  </button>
+                <fa-icon [icon]="faPlay" />
                 }
-                <button type="button" class="btn btn-link btn-sm p-0 me-2"
-                  (click)="toggleSubscriptionEnabled(entry[1])"
-                  [disabled]="downloads.loading"
-                  [attr.aria-label]="(entry[1].enabled ? 'Pause ' : 'Resume ') + entry[1].name"
-                  [ngbTooltip]="entry[1].enabled ? 'Pause' : 'Resume'">
-                  @if (entry[1].enabled) {
-                    <fa-icon [icon]="faPause" />
-                  } @else {
-                    <fa-icon [icon]="faPlay" />
-                  }
-                </button>
-                <button type="button" class="btn btn-link btn-sm p-0 text-danger"
-                  (click)="deleteSubscription(entry[0])"
-                  [disabled]="downloads.loading"
-                  [attr.aria-label]="'Delete subscription ' + entry[1].name">
-                  <fa-icon [icon]="faTrashAlt" />
-                </button>
-              </div>
-            </td>
-          </tr>
+              </button>
+              <button type="button" class="btn btn-link btn-sm p-0 text-danger" (click)="deleteSubscription(entry[0])"
+                [disabled]="downloads.loading" [attr.aria-label]="'Delete subscription ' + entry[1].name">
+                <fa-icon [icon]="faTrashAlt" />
+              </button>
+            </div>
+          </td>
+        </tr>
         }
       </tbody>
     </table>
@@ -997,31 +963,31 @@
 <footer class="footer navbar-dark bg-dark py-3 mt-5">
   <div class="container text-center">
     @if (ytDlpVersion && metubeVersion) {
-      <div class="footer-content">
-        <div class="version-item">
-          <span class="version-label">yt-dlp</span>
-          <span class="version-value">{{ytDlpVersion}}</span>
-        </div>
-        <div class="version-separator"></div>
-        <div class="version-item">
-          <span class="version-label">MeTube</span>
-          <span class="version-value">{{metubeVersion}}</span>
-        </div>
-        <div class="version-separator"></div>
-        @if (ytDlpOptionsUpdateTime) {
-          <div class="version-item">
-            <span class="version-label">yt-dlp-options</span>
-            <span class="version-value">{{ytDlpOptionsUpdateTime}}</span>
-          </div>
-        }
-        @if (ytDlpOptionsUpdateTime) {
-          <div class="version-separator"></div>
-        }
-        <a href="https://github.com/alexta69/metube" target="_blank" class="github-link">
-          <fa-icon [icon]="faGithub" />
-          <span>GitHub</span>
-        </a>
+    <div class="footer-content">
+      <div class="version-item">
+        <span class="version-label">yt-dlp</span>
+        <span class="version-value">{{ytDlpVersion}}</span>
       </div>
+      <div class="version-separator"></div>
+      <div class="version-item">
+        <span class="version-label">MeTube</span>
+        <span class="version-value">{{metubeVersion}}</span>
+      </div>
+      <div class="version-separator"></div>
+      @if (ytDlpOptionsUpdateTime) {
+      <div class="version-item">
+        <span class="version-label">yt-dlp-options</span>
+        <span class="version-value">{{ytDlpOptionsUpdateTime}}</span>
+      </div>
+      }
+      @if (ytDlpOptionsUpdateTime) {
+      <div class="version-separator"></div>
+      }
+      <a href="https://github.com/alexta69/metube" target="_blank" class="github-link">
+        <fa-icon [icon]="faGithub" />
+        <span>GitHub</span>
+      </a>
+    </div>
     }
   </div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/ui/src/app/app.sass b/ui/src/app/app.sass
index dd729c3..daa73b1 100644
--- a/ui/src/app/app.sass
+++ b/ui/src/app/app.sass
@@ -197,25 +197,86 @@ main
   &.active
     color: var(--bs-success-text-emphasis)
 
-.hasharr-integration
+.webhook-integration
   .input-group
     margin-bottom: 0
 
-.hasharr-action-row
+  .webhook-control-row
+    display: grid
+    row-gap: 0.75rem
+
+  .webhook-control-endpoint
+    min-width: 0
+
+  .webhook-timeout-group
+    flex-wrap: nowrap
+
+  .webhook-timeout-input
+    width: 3.4em
+    min-width: 3.4em
+    max-width: 3.4em
+    flex: 0 0 3.4em
+
+@media (min-width: 768px)
+  .webhook-integration
+    .webhook-control-row
+      grid-template-columns: 150px minmax(0, 1fr) 200px
+      column-gap: 0.125rem
+
+    .webhook-control-endpoint
+      margin-left: -10px
+
+    .webhook-timeout-group
+      justify-content: flex-start
+
+    .webhook-timeout-input
+      width: 65px
+      min-width: 65px
+      max-width: 65px
+      flex: 0 0 65px
+
+.webhook-action-row
   display: flex
   flex-wrap: wrap
   gap: 0.5rem
 
-.hasharr-status-block
+.webhook-status-block
   min-height: 2.5rem
   display: flex
   flex-direction: column
   justify-content: center
   text-align: left
 
-.hasharr-profile-result
+.webhook-response-block
   margin-top: 0.25rem
   padding: 0.5rem 0.75rem
   border: 1px solid var(--bs-border-color)
   border-radius: 0.375rem
   background: var(--bs-tertiary-bg)
+  white-space: pre-wrap
+  word-break: break-word
+
+.webhook-response-view-toggle
+  display: inline-flex
+  gap: 0.35rem
+  margin-top: 0.25rem
+
+.webhook-response-pretty
+  table
+    margin: 0
+
+  th,
+  td
+    padding: 0
+    border: 0
+    vertical-align: top
+    line-height: 1.5
+
+  th
+    width: 170px
+    font-weight: 700
+    color: var(--bs-emphasis-color)
+
+  td
+    font-weight: 400
+    color: var(--bs-emphasis-color)
diff --git a/ui/src/app/app.ts b/ui/src/app/app.ts
index d8c99f6..898d560 100644
--- a/ui/src/app/app.ts
+++ b/ui/src/app/app.ts
@@ -7,10 +7,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgSelectModule } from '@ng-select/ng-select';  
-import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight, faChevronDown, faUpload, faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
+import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight, faChevronDown, faUpload, faPause, faPlay, faGear } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
-import { AddDownloadPayload, DownloadsService, HasharrSettings, HasharrServiceTestResponse } from './services/downloads.service';
+import { AddDownloadPayload, DownloadsService, WebhookSettings, WebhookTestResponse } from './services/downloads.service';
 import { SubscriptionsService } from './services/subscriptions.service';
 import { SubscriptionRow } from './interfaces/subscription';
 import { Themes } from './theme';
@@ -107,13 +107,18 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
   ytDlpVersion: string | null = null;
   metubeVersion: string | null = null;
   isAdvancedOpen = false;
-  hasharrEnabled = false;
-  hasharrUrl = 'http://hasharr:9995';
-  hasharrServiceID = 1;
-  hasharrTimeoutSec = 20;
-  hasharrSettingsStatus = '';
-  hasharrTestStatus = '';
-  hasharrTestProfile: Record<string, unknown> | null = null;
+  webhookEnabled = false;
+  webhookEndpoint = 'http://localhost:9876/api/web-service/';
+  webhookTimeoutSec = 20;
+  webhookSettingsStatus = '';
+  webhookTestStatus = '';
+  webhookTestViewMode: 'pretty' | 'raw' = 'pretty';
+  webhookTestResponseEntries: Array<{ key: string; value: string }> = [];
+  webhookTestResponsePretty = '';
+  webhookTestResponseRaw = '';
+  settingsModalOpen = false;
+  focusedRefreshMs = 3000;
+  backgroundRefreshMs = 30000;
   sortAscending = false;
   expandedErrors: Set<string> = new Set<string>();
   cachedSortedDone: [string, Download][] = [];
@@ -129,6 +134,8 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
   }> = {};
   private readonly selectionCookiePrefix = 'metube_selection_';
   private readonly settingsCookieExpiryDays = 3650;
+  private readonly focusedRefreshCookie = 'metube_focused_refresh_ms';
+  private readonly backgroundRefreshCookie = 'metube_background_refresh_ms';
   private lastFocusedElement: HTMLElement | null = null;
   private colorSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
   private onColorSchemeChanged = () => {
@@ -176,6 +183,7 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
   faUpload = faUpload;
   faPause = faPause;
   faPlay = faPlay;
+  faGear = faGear;
   subtitleLanguages = [
     { id: 'en', text: 'English' },
     { id: 'ar', text: 'Arabic' },
@@ -263,6 +271,15 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
     if (!Number.isNaN(ci) && ci >= 1) {
       this.checkIntervalMinutes = ci;
     }
+    const focusedCookie = parseInt(this.cookieService.get(this.focusedRefreshCookie) || '', 10);
+    if (!Number.isNaN(focusedCookie)) {
+      this.focusedRefreshMs = this.clampRefreshMs(focusedCookie, 500, 10000);
+    }
+    const backgroundCookie = parseInt(this.cookieService.get(this.backgroundRefreshCookie) || '', 10);
+    if (!Number.isNaN(backgroundCookie)) {
+      this.backgroundRefreshMs = this.clampRefreshMs(backgroundCookie, 2000, 120000);
+    }
+    this.downloads.setRefreshCadence(this.focusedRefreshMs, this.backgroundRefreshMs);
     this.activeTheme = this.getPreferredTheme(this.cookieService);
 
     // Subscribe to download updates
@@ -298,7 +315,7 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
       this.cdr.markForCheck();
     });
     this.getConfiguration();
-    this.loadHasharrSettings();
+    this.loadWebhookSettings();
     this.getYtdlOptionsUpdateTime();
     this.customDirs$ = this.getMatchingCustomDir();
     this.setTheme(this.activeTheme!);
@@ -306,94 +323,117 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
     this.colorSchemeMediaQuery.addEventListener('change', this.onColorSchemeChanged);
   }
 
-  loadHasharrSettings() {
-    this.downloads.getHasharrSettings().pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+  loadWebhookSettings() {
+    this.downloads.getWebhookSettings().pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
       next: (data) => {
         if (!data || typeof data !== 'object' || ('status' in data && data.status === 'error')) {
-          this.hasharrSettingsStatus = 'Unable to load hasharr settings.';
+          this.webhookSettingsStatus = 'Unable to load webhook settings.';
           this.cdr.markForCheck();
           return;
         }
-        const settings = data as HasharrSettings;
-        this.hasharrEnabled = !!settings.enabled;
-        this.hasharrUrl = String(settings.url || 'http://hasharr:9995');
-        this.hasharrServiceID = Math.max(1, Number(settings.service_id || 1));
-        this.hasharrTimeoutSec = Math.max(1, Number(settings.timeout_sec || 20));
-        this.hasharrSettingsStatus = '';
+        const settings = data as WebhookSettings;
+        this.webhookEnabled = !!settings.enabled;
+        this.webhookEndpoint = String(settings.endpoint || 'http://localhost:9876/api/web-service/');
+        this.webhookTimeoutSec = Math.max(1, Number(settings.timeout_sec || 20));
+        this.webhookSettingsStatus = '';
         this.cdr.markForCheck();
       },
       error: () => {
-        this.hasharrSettingsStatus = 'Unable to load hasharr settings.';
+        this.webhookSettingsStatus = 'Unable to load webhook settings.';
         this.cdr.markForCheck();
       },
     });
   }
 
-  saveHasharrSettings() {
-    const payload: HasharrSettings = {
-      enabled: !!this.hasharrEnabled,
-      url: String(this.hasharrUrl || '').trim(),
-      service_id: Math.max(1, Number(this.hasharrServiceID || 1)),
-      timeout_sec: Math.max(1, Number(this.hasharrTimeoutSec || 20)),
+  saveWebhookSettings() {
+    const payload: WebhookSettings = {
+      enabled: !!this.webhookEnabled,
+      endpoint: String(this.webhookEndpoint || '').trim(),
+      timeout_sec: Math.max(1, Number(this.webhookTimeoutSec || 20)),
     };
-    if (!payload.url) {
-      this.hasharrSettingsStatus = 'Hasharr URL is required.';
+    if (!payload.endpoint) {
+      this.webhookSettingsStatus = 'Endpoint is required.';
       this.cdr.markForCheck();
       return;
     }
-    this.downloads.saveHasharrSettings(payload).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+    this.downloads.saveWebhookSettings(payload).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
       next: (out) => {
         if (out && typeof out === 'object' && 'status' in out && out.status === 'ok') {
-          this.hasharrSettingsStatus = 'Hasharr settings saved.';
+          this.webhookSettingsStatus = 'Webhook settings saved.';
         } else {
-          this.hasharrSettingsStatus = 'Failed to save hasharr settings.';
+          this.webhookSettingsStatus = 'Failed to save webhook settings.';
         }
         this.cdr.markForCheck();
       },
       error: () => {
-        this.hasharrSettingsStatus = 'Failed to save hasharr settings.';
+        this.webhookSettingsStatus = 'Failed to save webhook settings.';
         this.cdr.markForCheck();
       },
     });
   }
 
-  testHasharrService() {
-    this.hasharrTestStatus = 'Testing hasharr service...';
-    this.hasharrTestProfile = null;
+  testWebhookService() {
+    this.webhookTestStatus = 'Testing webhook endpoint...';
+    this.webhookTestViewMode = 'pretty';
+    this.webhookTestResponseEntries = [];
+    this.webhookTestResponseRaw = '';
+    this.webhookTestResponsePretty = '';
     this.cdr.markForCheck();
-    this.downloads.testHasharrSettings({
-      url: String(this.hasharrUrl || '').trim(),
-      service_id: Math.max(1, Number(this.hasharrServiceID || 1)),
-      timeout_sec: Math.max(1, Number(this.hasharrTimeoutSec || 20)),
+    this.downloads.testWebhookSettings({
+      endpoint: String(this.webhookEndpoint || '').trim(),
+      timeout_sec: Math.max(1, Number(this.webhookTimeoutSec || 20)),
     }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
       next: (resp) => {
-        if (!resp || typeof resp !== 'object' || ('status' in resp && resp.status === 'error')) {
-          this.hasharrTestStatus = 'Hasharr test failed.';
-          this.hasharrTestProfile = null;
+        if (!resp || typeof resp !== 'object') {
+          this.webhookTestStatus = 'Webhook test failed.';
+          this.webhookTestResponsePretty = '';
           this.cdr.markForCheck();
           return;
         }
-        const result = resp as HasharrServiceTestResponse;
-        if (result.valid_service_id) {
-          this.hasharrTestStatus = 'Hasharr reachable. Service ID is valid.';
-          this.hasharrTestProfile = result.profile || null;
-        } else if (result.reachable) {
-          this.hasharrTestStatus = result.message || 'Hasharr reachable, but service ID is not valid.';
-          this.hasharrTestProfile = null;
-        } else {
-          this.hasharrTestStatus = result.message || 'Could not reach hasharr.';
-          this.hasharrTestProfile = null;
-        }
+        const result = resp as WebhookTestResponse;
+        const display = result.response ?? result;
+        this.webhookTestStatus = result.message || (result.status === 'ok' ? 'Webhook test succeeded.' : 'Webhook test completed with errors.');
+        this.webhookTestResponseRaw = JSON.stringify(display, null, 2);
+        this.webhookTestResponsePretty = this.webhookTestResponseRaw;
+        this.webhookTestResponseEntries = this.toWebhookResponseEntries(display);
         this.cdr.markForCheck();
       },
       error: () => {
-        this.hasharrTestStatus = 'Hasharr test failed.';
-        this.hasharrTestProfile = null;
+        this.webhookTestStatus = 'Webhook test failed.';
+        this.webhookTestResponseEntries = [];
+        this.webhookTestResponseRaw = '';
+        this.webhookTestResponsePretty = '';
         this.cdr.markForCheck();
       },
     });
   }
 
+  setWebhookTestViewMode(mode: 'pretty' | 'raw') {
+    this.webhookTestViewMode = mode;
+  }
+
+  private toWebhookResponseEntries(value: unknown): Array<{ key: string; value: string }> {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+      return [{ key: 'value', value: this.stringifyWebhookValue(value) }];
+    }
+    const obj = value as Record<string, unknown>;
+    return Object.entries(obj).map(([key, entryValue]) => ({
+      key,
+      value: this.stringifyWebhookValue(entryValue),
+    }));
+  }
+
+  private stringifyWebhookValue(value: unknown): string {
+    if (value === null || value === undefined) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+
   ngAfterViewInit() {
     this.downloads.queueChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
       this.queueMasterCheckbox()?.selectionChanged();
@@ -414,6 +454,31 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
     this.colorSchemeMediaQuery.removeEventListener('change', this.onColorSchemeChanged);
   }
 
+  openSettingsModal(): void {
+    this.lastFocusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    this.settingsModalOpen = true;
+  }
+
+  closeSettingsModal(): void {
+    this.settingsModalOpen = false;
+    this.lastFocusedElement?.focus();
+  }
+
+  saveRefreshSettings(): void {
+    this.focusedRefreshMs = this.clampRefreshMs(this.focusedRefreshMs, 500, 10000);
+    this.backgroundRefreshMs = this.clampRefreshMs(this.backgroundRefreshMs, 2000, 120000);
+    this.downloads.setRefreshCadence(this.focusedRefreshMs, this.backgroundRefreshMs);
+    this.cookieService.set(this.focusedRefreshCookie, String(this.focusedRefreshMs), { expires: this.settingsCookieExpiryDays });
+    this.cookieService.set(this.backgroundRefreshCookie, String(this.backgroundRefreshMs), { expires: this.settingsCookieExpiryDays });
+    this.closeSettingsModal();
+  }
+
+  private clampRefreshMs(value: number, min: number, max: number): number {
+    const normalized = Number(value);
+    if (Number.isNaN(normalized)) return min;
+    return Math.min(max, Math.max(min, Math.round(normalized)));
+  }
+
   // workaround to allow fetching of Map values in the order they were inserted
   //  https://github.com/angular/angular/issues/31420
     
diff --git a/ui/src/app/services/downloads.service.ts b/ui/src/app/services/downloads.service.ts
index e414921..8f079cb 100644
--- a/ui/src/app/services/downloads.service.ts
+++ b/ui/src/app/services/downloads.service.ts
@@ -6,19 +6,17 @@ import { MeTubeSocket } from './metube-socket.service';
 import { Download, Status, State } from '../interfaces';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-export interface HasharrSettings {
+export interface WebhookSettings {
   enabled: boolean;
-  url: string;
-  service_id: number;
+  endpoint: string;
   timeout_sec: number;
 }
 
-export interface HasharrServiceTestResponse {
+export interface WebhookTestResponse {
   status: string;
-  reachable: boolean;
-  valid_service_id: boolean;
   message?: string;
-  profile?: Record<string, unknown>;
+  response?: unknown;
+  status_code?: number;
 }
 
 export interface AddDownloadPayload {
@@ -52,8 +50,8 @@ export class DownloadsService {
   configurationChanged = new Subject<Record<string, unknown>>();
   updated = new Subject<void>();
   private updateRefreshScheduled = false;
-  private readonly foregroundRefreshMs = 3000;
-  private readonly backgroundRefreshMs = 30000;
+  private foregroundRefreshMs = 3000;
+  private backgroundRefreshMs = 30000;
 
   configuration: Record<string, unknown> = {};
   customDirs: Record<string, string[]> = {};
@@ -157,6 +155,11 @@ export class DownloadsService {
     setTimeout(() => flush(), delay);
   }
 
+  setRefreshCadence(focusedMs: number, backgroundMs: number) {
+    this.foregroundRefreshMs = focusedMs;
+    this.backgroundRefreshMs = backgroundMs;
+  }
+
   handleHTTPError(error: HttpErrorResponse) {
     const msg = error.error instanceof ErrorEvent
       ? error.error.message
@@ -240,20 +243,20 @@ export class DownloadsService {
     );
   }
 
-  getHasharrSettings() {
-    return this.http.get<HasharrSettings>('hasharr-settings').pipe(
+  getWebhookSettings() {
+    return this.http.get<WebhookSettings>('webhook-settings').pipe(
       catchError(this.handleHTTPError)
     );
   }
 
-  saveHasharrSettings(settings: HasharrSettings) {
-    return this.http.post<{ status: string; msg?: string }>('hasharr-settings', settings).pipe(
+  saveWebhookSettings(settings: WebhookSettings) {
+    return this.http.post<{ status: string; msg?: string }>('webhook-settings', settings).pipe(
       catchError(this.handleHTTPError)
     );
   }
 
-  testHasharrSettings(settings: Pick<HasharrSettings, 'url' | 'service_id' | 'timeout_sec'>) {
-    return this.http.post<HasharrServiceTestResponse>('hasharr-settings/test', settings).pipe(
+  testWebhookSettings(settings: Pick<WebhookSettings, 'endpoint' | 'timeout_sec'>) {
+    return this.http.post<WebhookTestResponse>('webhook-settings/test', settings).pipe(
       catchError(this.handleHTTPError)
     );
   }