diff --git a/web/static/app.js b/web/static/app.js
index 1608855..1ac33e2 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -271,4 +271,64 @@ function renderEvents(events) {
 
 // Filter listeners
 document.getElementById('image-filter').addEventListener('change', loadImages);
-document.getElementById('event-filter').addEventListener('change', loadEvents);
\ No newline at end of file
+document.getElementById('event-filter').addEventListener('change', loadEvents);
+
+// Settings
+function openSettingsModal() {
+    loadSettingsForm();
+    document.getElementById('settings-modal').classList.add('active');
+}
+
+function closeSettingsModal() {
+    document.getElementById('settings-modal').classList.remove('active');
+}
+
+function loadSettingsForm() {
+    fetch(API_BASE + '/api/config')
+        .then(function(res) { return res.json(); })
+        .then(function(config) {
+            document.getElementById('setting-images-dir').value = config.images_dir || '';
+            document.getElementById('setting-interval').value = config.capture_interval || 60;
+            document.getElementById('setting-camera-index').value = config.camera_index || 0;
+            document.getElementById('setting-auto-analyze').checked = config.auto_analyze !== false;
+            document.getElementById('setting-display-limit').value = config.display_limit || 20;
+            document.getElementById('setting-refresh-interval').value = config.refresh_interval || 5;
+            document.getElementById('setting-api-url').value = config.vision_api_url || '';
+            document.getElementById('setting-api-key').value = config.vision_api_key || '';
+            document.getElementById('setting-model').value = config.vision_model || '';
+        })
+        .catch(function(e) { console.error('Load settings failed:', e); });
+}
+
+function saveSettings() {
+    var settings = {
+        images_dir: document.getElementById('setting-images-dir').value,
+        capture_interval: parseInt(document.getElementById('setting-interval').value),
+        camera_index: parseInt(document.getElementById('setting-camera-index').value),
+        auto_analyze: document.getElementById('setting-auto-analyze').checked,
+        display_limit: parseInt(document.getElementById('setting-display-limit').value),
+        refresh_interval: parseInt(document.getElementById('setting-refresh-interval').value),
+        vision_api_url: document.getElementById('setting-api-url').value,
+        vision_api_key: document.getElementById('setting-api-key').value,
+        vision_model: document.getElementById('setting-model').value
+    };
+    
+    fetch(API_BASE + '/api/config', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(settings)
+    })
+        .then(function(res) { return res.json(); })
+        .then(function(data) {
+            if (data.success) {
+                alert('Settings saved!');
+                closeSettingsModal();
+                refreshAll();
+            }
+        })
+        .catch(function(e) { alert('Error: ' + e.message); });
+}
+
+function browseImagesDir() {
+    alert('Please enter the path manually.\nExample: D:\\vision-images\nImages will be saved to date subfolders automatically.');
+}
\ No newline at end of file