diff --git a/config.go b/config.go
index fe58be6..e33e554 100644
--- a/config.go
+++ b/config.go
@@ -12,10 +12,10 @@ import (
 
 // Config represents the top-level application configuration.
 type Config struct {
-	Server  ServerConfig   `yaml:"server"`
-	Storage StorageConfig  `yaml:"storage"`
-	Cameras []CameraConfig `yaml:"cameras"`
-	Go2RTC  Go2RTCConfig   `yaml:"go2rtc"`
+	Server  ServerConfig   `yaml:"server" json:"server"`
+	Storage StorageConfig  `yaml:"storage" json:"storage"`
+	Cameras []CameraConfig `yaml:"cameras" json:"cameras"`
+	Go2RTC  Go2RTCConfig   `yaml:"go2rtc" json:"go2rtc"`
 }
 
 // ServerConfig holds HTTP server settings.
@@ -33,17 +33,17 @@ type StorageConfig struct {
 
 // CameraConfig represents a single camera's configuration.
 type CameraConfig struct {
-	ID          string `yaml:"id"`
-	Name        string `yaml:"name"`
-	IP          string `yaml:"ip"`
-	Username    string `yaml:"username"`
-	Password    string `yaml:"password"`
-	ONVIFPort   int    `yaml:"onvif_port"`
-	RTSPMain    string `yaml:"rtsp_main"`
-	RTSPSub     string `yaml:"rtsp_sub"`
-	Description string `yaml:"description"`
-	Enabled     bool   `yaml:"enabled"`
-	Record      bool   `yaml:"record"`
+	ID          string `yaml:"id" json:"id"`
+	Name        string `yaml:"name" json:"name"`
+	IP          string `yaml:"ip" json:"ip"`
+	Username    string `yaml:"username" json:"username"`
+	Password    string `yaml:"password" json:"password"`
+	ONVIFPort   int    `yaml:"onvif_port" json:"onvif_port"`
+	RTSPMain    string `yaml:"rtsp_main" json:"rtsp_main"`
+	RTSPSub     string `yaml:"rtsp_sub" json:"rtsp_sub"`
+	Description string `yaml:"description" json:"description"`
+	Enabled     bool   `yaml:"enabled" json:"enabled"`
+	Record      bool   `yaml:"record" json:"record"`
 }
 
 // Go2RTCConfig holds go2rtc child process settings.
diff --git a/public/app.js b/public/app.js
index 0483931..2567b73 100644
--- a/public/app.js
+++ b/public/app.js
@@ -239,6 +239,9 @@ async function renderCameraCards() {
     container.innerHTML = cameras.map(c => `
         <div class="camera-card" data-id="${c.id}">
             <h3>📷 ${c.name || 'Unnamed'} <span style="font-size:11px;color:var(--text-muted)">${c.ip}</span></h3>
+            <input type="hidden" value="${escAttr(c.id)}" data-field="id">
+            <input type="hidden" value="${escAttr(c.ip)}" data-field="ip">
+            <input type="hidden" value="${c.onvif_port || 80}" data-field="onvif_port">
             <label>Name <input type="text" value="${escAttr(c.name)}" data-field="name"></label>
             <label>Description <textarea data-field="description">${escHtml(c.description)}</textarea></label>
             <label>RTSP Main <input type="text" value="${escAttr(c.rtsp_main)}" data-field="rtsp_main"></label>
@@ -313,11 +316,15 @@ document.getElementById('btn-save').addEventListener('click', async () => {
     const updatedCameras = [];
     cards.forEach(card => {
         const c = {};
+        // Collect hidden + visible fields.
         card.querySelectorAll('[data-field]').forEach(el => {
             const field = el.dataset.field;
             if (el.type === 'checkbox') c[field] = el.checked;
             else c[field] = el.value;
         });
+        // Ensure checkboxes default to true even if unchecked (hidden inputs override).
+        if (c.enabled === undefined) c.enabled = true;
+        if (c.record === undefined) c.record = true;
         updatedCameras.push(c);
     });