diff --git a/frontend/src/lib/components/SettingsPanel.svelte b/frontend/src/lib/components/SettingsPanel.svelte
index 0a2c71f..71d3d43 100644
--- a/frontend/src/lib/components/SettingsPanel.svelte
+++ b/frontend/src/lib/components/SettingsPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { DEFAULT_CONFIG, TIMING, API } from '../constants.js';
+  import { TIMING, API } from '../constants.js';
   import { handleError } from '../errorHandler.js';
   import EyeIndicator from './visual/EyeIndicator.svelte';
   import AlignmentIndicator from './visual/AlignmentIndicator.svelte';
@@ -15,8 +15,7 @@
   let saveMessage = $state(null);
   let activeTab = $state('face');
 
-  // Config state - initialized from DEFAULT_CONFIG, then loaded from API
-  let config = $state(JSON.parse(JSON.stringify(DEFAULT_CONFIG)));
+  let config = $state(null);
 
   async function loadConfig() {
     loading = true;
@@ -108,8 +107,14 @@
     }
   }
 
-  function resetToDefaults() {
-    config = JSON.parse(JSON.stringify(DEFAULT_CONFIG));
+  async function resetToDefaults() {
+    try {
+      const res = await fetch(API.configDefaults);
+      if (!res.ok) throw res;
+      config = await res.json();
+    } catch (e) {
+      error = await handleError('Failed to load defaults', e);
+    }
   }
 
   function toggle() {
diff --git a/frontend/src/lib/constants.js b/frontend/src/lib/constants.js
index 5718cd6..c974ff9 100644
--- a/frontend/src/lib/constants.js
+++ b/frontend/src/lib/constants.js
@@ -22,6 +22,7 @@ export const API = {
   cancel: '/api/cancel',
   output: '/api/output',
   config: '/api/config',
+  configDefaults: '/api/config/defaults',
   ws: '/api/ws',
 };
 
@@ -45,58 +46,3 @@ export const JOB_STATUS = {
   error: 'error',
 };
 
-// ===== Default Configuration =====
-// Must match backend defaults in config.rs
-export const DEFAULT_CONFIG = {
-  processing: {
-    max_workers: 4,
-    use_preview: true,
-    face_resolution: {
-      enabled: true,
-      min_size: 80,
-    },
-    blur: {
-      enabled: false,
-      min_sharpness: 15.0,
-    },
-    brightness: {
-      enabled: false,
-      min_brightness: 0.1,
-      max_brightness: 0.95,
-    },
-    head_pose: {
-      enabled: true,
-      max_yaw: 35.0,
-      max_pitch: 35.0,
-    },
-    eye_filter: {
-      enabled: false,
-      min_ear: 0.2,
-    },
-    output: {
-      size: 512,
-      keep_intermediates: false,
-    },
-    alignment: {
-      eye_distance: 0.3,
-    },
-    timestamp: {
-      enabled: false,
-      position: 'bottom_left',
-      year: true,
-      month: false,
-      day: false,
-    },
-    time_interval: {
-      enabled: false,
-      max_photos: 1,
-      time_range: 'day',
-    },
-  },
-  video: {
-    enabled: true,
-    framerate: 15,
-    codec: 'libx264',
-    crf: 23,
-  },
-};
diff --git a/src/web/handlers/config.rs b/src/web/handlers/config.rs
index bf8a1d7..34b7d0b 100644
--- a/src/web/handlers/config.rs
+++ b/src/web/handlers/config.rs
@@ -26,6 +26,14 @@ pub async fn get_config(State(state): State<AppState>) -> Json<ConfigResponse> {
     })
 }
 
+/// Get default configuration values.
+pub async fn get_config_defaults() -> Json<ConfigResponse> {
+    Json(ConfigResponse {
+        processing: ProcessingConfig::default(),
+        video: VideoConfig::default(),
+    })
+}
+
 /// Configuration update request.
 ///
 /// Uses the same nested structure as the config itself for consistency.
diff --git a/src/web/handlers/mod.rs b/src/web/handlers/mod.rs
index b869a22..8c04fa5 100644
--- a/src/web/handlers/mod.rs
+++ b/src/web/handlers/mod.rs
@@ -27,7 +27,7 @@ use tower_http::services::ServeDir;
 use tower_http::set_header::SetResponseHeaderLayer;
 
 // Re-export handler functions for use in router
-use config::{get_config, update_config};
+use config::{get_config, get_config_defaults, update_config};
 use health::{check_connection, health_check};
 use output::{
     cleanup_all_output, cleanup_output_folder, compile_folder_video, delete_images_bulk,
@@ -95,6 +95,7 @@ pub fn create_router(state: AppState) -> Router {
         )
         .route("/api/config", get(get_config))
         .route("/api/config", put(update_config))
+        .route("/api/config/defaults", get(get_config_defaults))
         // Serve output files (video, images) — no-cache so browsers revalidate
         // after reprocessing (filenames stay the same across runs)
         .nest_service(