diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 148fd41..4a8a82c 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -41,9 +41,9 @@ jobs:
         if: github.event_name == 'push' && contains(github.ref, 'refs/tags/')
         uses: softprops/action-gh-release@v2
         with:
-          prerelease: true
           files: release/*
           generate_release_notes: true
           draft: true
+          prerelease: ${{ contains(github.ref, 'alpha') || contains(github.ref, 'beta') }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/data/index.html b/data/index.html
index 73f6cf5..3152d2f 100644
--- a/data/index.html
+++ b/data/index.html
@@ -4,10 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hyperk</title>
-  <link rel="stylesheet" href="/css/pico.min.css?v=1">
-  <link rel="stylesheet" href="/css/style.css?v=1">
-  <link rel="stylesheet" href="/css/settings.css?v=1">
-  <link id="favicon" rel="icon" type="image/png" href="/img/hyperk.png?v=1">
+  <link rel="stylesheet" href="/css/pico.min.css?v={{VERSION}}">
+  <link rel="stylesheet" href="/css/style.css?v={{VERSION}}">
+  <link rel="stylesheet" href="/css/settings.css?v={{VERSION}}">
+  <link id="favicon" rel="icon" type="image/png" href="/img/hyperk.png?v={{VERSION}}">
 </head>
 <body>
   <nav class="container-fluid">
diff --git a/data/ota.js b/data/ota.js
new file mode 100644
index 0000000..4397670
--- /dev/null
+++ b/data/ota.js
@@ -0,0 +1,214 @@
+// ota.js
+let otaFirmwareUrl = "";
+let otaSelectedFirmware = "";
+let localV = "";
+let remoteV = "";
+let updateCase = null;
+let isUpdating = false;
+let resolveConfirm;
+
+function customConfirm(msg) {
+    const modal = document.getElementById('confirm-modal');
+    document.getElementById('confirm-msg').innerText = msg;
+    modal.showModal();
+
+    return new Promise((resolve) => {
+        resolveConfirm = resolve;
+    });
+}
+
+window.onbeforeunload = function() {
+    if (isUpdating) return "Update in progress. Do not close this page!";
+};
+
+function closeConfirm(result) {
+    const modal = document.getElementById('confirm-modal');
+    modal.close();
+    resolveConfirm(result);
+}
+
+async function checkFirmwareUpdates() {
+    const statusArea = document.getElementById('ota_status_area');
+    const statusText = document.getElementById('ota_status_text');
+    const installBtn = document.getElementById('install_update_btn');
+    const progress = document.getElementById('ota_progress');
+    const channel = document.getElementById('ota_channel').value;
+    
+    if (!cfgBoardArchitecture) {
+        statusText.innerText = "❌ Error: Unknown build architecture. Cannot check for updates.";
+        return;
+    }
+
+    statusArea.style.display = 'block';
+    progress.style.display = 'none';
+    statusText.innerText = "Fetching releases...";
+    installBtn.style.display = 'none';
+
+    let releases;
+    try {
+        let res = await fetch("https://hyperk-github-releases-api-proxy.hyperhdr.workers.dev/");
+        if (!res.ok) throw new Error(`Worker status: ${res.status}`);                
+        console.log("✅ Data from Worker Proxy");
+        releases = await res.json();
+    } 
+    catch (err) {
+        console.warn("⚠️ Worker failed, falling back to GitHub API...", err);
+        try {
+            let res = await fetch("https://api.github.com/repos/awawa-dev/Hyperk/releases");
+            if (!res.ok) throw new Error(`GitHub API status: ${res.status}`);
+            releases = await res.json();
+        } catch (e) {
+            statusText.innerText = "❌ Failed to fetch releases.";
+            return;
+        }
+    }
+
+    const allowPreRelease = (channel === 'testing');
+    const validReleases = releases.filter(r => allowPreRelease || !r.prerelease);
+    
+    if (validReleases.length === 0) {
+        statusText.innerText = "No suitable releases found on this channel.";
+        return;
+    }
+
+    const latest = validReleases[0];
+    
+    let archSuffix = cfgBoardArchitecture.toLowerCase();
+
+    const expectedSuffix = `_${archSuffix}.bin`;
+    const asset = latest.assets.find(a => a.name.startsWith("OTA_") && a.name.endsWith(expectedSuffix));
+
+    if (!asset) {
+        statusText.innerHTML = `❌ No firmware for <strong>${cfgDeviceArchitecture}</strong> (${archSuffix}) in release ${latest.tag_name}.<br><small>Looking for: *${expectedSuffix}</small>`;
+        return;
+    } else {
+        otaSelectedFirmware = asset.name;
+        console.log(`ℹ️ Using firmware: ${otaSelectedFirmware}`);
+    }          
+
+    function compareVersions(v1, v2) {
+        if (v1 === v2 || !v1 || !v2 || v1 === "0.0.0" || v2 === "0.0.0") return 0;
+
+        const parse = v => {
+            const [ver, suf] = v.split('-', 2);
+            return { n: ver.split('.').map(Number), s: suf || "" };
+        };
+
+        const d1 = parse(v1), d2 = parse(v2);
+
+        for (let i = 0; i < 3; i++) {
+            const n1 = d1.n[i] || 0, n2 = d2.n[i] || 0;
+            if (n1 !== n2) return n1 > n2 ? 1 : -1;
+        }
+
+        if (!d1.s || !d2.s) return d1.s.localeCompare(d2.s) * -1;
+
+        return d1.s.localeCompare(d2.s, undefined, { numeric: true });
+    }
+
+    localV = typeof cfgDeviceVersion !== 'undefined' ? cfgDeviceVersion : "0.0.0";
+    remoteV = latest.tag_name;
+    updateCase = compareVersions(localV, remoteV);
+
+    if (updateCase === 0) {
+        statusText.innerHTML = `✔️ Up to date (<strong>${remoteV}</strong>)`;
+        installBtn.style.display = 'none';
+        statusArea.style.borderColor = "var(--pico-form-element-border-color)"; // Powrót do standardu
+        return;
+    }
+
+    statusArea.style.display = 'block';
+    statusArea.style.borderColor = "#eab308"; 
+
+    installBtn.style.display = 'block';
+    installBtn.style.backgroundColor = "#eab308";
+    installBtn.style.borderColor = "#eab308";
+    installBtn.style.color = "#111";
+
+    if (updateCase > 0) {
+        statusText.innerHTML = `⚠️ Available: <strong class="yperk">${remoteV}</strong><br><small class="yperk">Warning: This is a downgrade!</small>`;
+        installBtn.innerText = "Downgrade Firmware";
+    } else {
+        statusText.innerHTML = `🆕 New update available:<br><strong style="color: var(--pico-primary-background);">${remoteV}</strong>`;
+        installBtn.innerText = "Install Update";
+    }
+
+    const proxyBase = "https://hyperhdr-github-proxy.hyperhdr.workers.dev/?url=";
+    otaFirmwareUrl = proxyBase + encodeURIComponent(asset.browser_download_url);
+};   
+
+async function startOtaUpdate() {
+    if (!otaFirmwareUrl || !localV || !remoteV || updateCase === null) return;
+
+    const confirmed = await customConfirm(`Are you sure to ${(updateCase === 1) ? "downgrade" : "upgrade"} Hyperk ${localV} to: ${remoteV}?`);
+    if (!confirmed) return;
+
+    isUpdating = true;
+    
+    const statusText = document.getElementById('ota_status_text');
+    const progress = document.getElementById('ota_progress');
+    const installBtn = document.getElementById('install_update_btn');
+    const checkBtn = document.getElementById('check_update_btn');
+    const saveConfigBtn = document.querySelector('form[action="/save_config"] button[type="submit"]');
+
+    if (saveConfigBtn) saveConfigBtn.disabled = true;
+
+    installBtn.style.display = 'none';
+    checkBtn.disabled = true;
+    progress.style.display = 'block';
+    progress.value = 0;
+    statusText.innerText = "Downloading firmware...";
+
+    try {
+        const res = await fetch(otaFirmwareUrl);
+        if (!res.ok) throw new Error(`Proxy error: ${res.status} ${res.statusText}`);
+        const blob = await res.blob();
+        console.log(`ℹ️ Firmware size: ${blob.size} "bytes`);
+
+        statusText.innerText = "Uploading to device... DO NOT REBOOT.";
+
+        const formData = new FormData();
+        formData.append("update", blob, "firmware.bin");
+
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", "/ota", true);
+        xhr.setRequestHeader("hyperk-ota-firmware-size", blob.size);
+        xhr.setRequestHeader("hyperk-ota-firmware-name", otaSelectedFirmware);
+
+        xhr.upload.onprogress = (e) => {
+            if (e.lengthComputable) {
+                const percent = Math.round((e.loaded / e.total) * 100);
+                progress.value = percent;
+                statusText.innerText = `Flashing: ${percent}%`;
+            }
+        };
+
+        xhr.onload = () => {
+            if (xhr.status === 200) {
+                statusText.innerText = "✅ Update successful! Rebooting...";
+                showToast(true);
+            } else {
+                statusText.innerText = `❌ Flash failed: ${xhr.responseText || xhr.statusText}`;
+                progress.style.display = 'none';
+                checkBtn.disabled = false;
+            }
+        };
+
+        xhr.onerror = () => {
+            statusText.innerText = "❌ Network error during upload. Device might have rebooted unexpectedly.";
+            progress.style.display = 'none';
+            checkBtn.disabled = false;
+            if (saveConfigBtn) saveConfigBtn.disabled = false;
+        };
+
+        xhr.send(formData);
+
+    } catch (err) {
+        statusText.innerText = `❌ Error: ${err.message}`;
+        progress.style.display = 'none';
+        checkBtn.disabled = false;
+        if (saveConfigBtn) saveConfigBtn.disabled = false;
+    }
+
+    isUpdating = false;
+};
diff --git a/data/settings.html b/data/settings.html
index 73ccb33..fff4845 100644
--- a/data/settings.html
+++ b/data/settings.html
@@ -4,10 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Settings - Hyperk</title>
-  <link rel="stylesheet" href="/css/pico.min.css?v=1">
-  <link rel="stylesheet" href="/css/style.css?v=1">
-  <link rel="stylesheet" href="/css/settings.css?v=1">
-  <link id="favicon" rel="icon" type="image/png" href="/img/hyperk.png?v=1">
+  <link rel="stylesheet" href="/css/pico.min.css?v={{VERSION}}">
+  <link rel="stylesheet" href="/css/style.css?v={{VERSION}}">
+  <link rel="stylesheet" href="/css/settings.css?v={{VERSION}}">
+  <link id="favicon" rel="icon" type="image/png" href="/img/hyperk.png?v={{VERSION}}">
 </head>
 <body>
 
@@ -119,6 +119,40 @@ <h5>White channel calibration</h5>
         </div>
       </details>
 
+      <details id="ota_page" style="display: none;" ontoggle="loadSubScript(this, 'ota', null)">
+        <summary role="button" class="outline secondary">Firmware Update (OTA)</summary>
+        <div>
+          <div style="margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius); text-align: center; background: rgba(128, 128, 128, 0.05);">
+            <small style="display: block; color: var(--pico-muted-color); margin-bottom: 0.25rem;">Current Firmware</small>
+            <strong style="font-size: 1.25rem;" id="firmware_version_info">—</strong>
+          </div>
+
+          <div style="margin-bottom: 1.5rem;">
+            <label for="ota_channel" style="margin-bottom: 0.5rem; display: block;">Update Channel</label>
+            <div style="display: flex; gap: 0.5rem;">
+              <select id="ota_channel" style="margin-bottom: 0; flex: 1;">
+                <option value="stable">Stable</option>
+                <option value="testing">Testing</option>
+              </select>
+              <button type="button" id="check_update_btn" class="secondary outline"
+                      style="margin-bottom: 0; white-space: nowrap; width: auto; background-color: #2e7d32; border-color: #2e7d32; color: #fff;"
+                      onclick="checkFirmwareUpdates()">
+                Check
+              </button>
+            </div>
+          </div>
+          
+          <div id="ota_status_area" style="display: none; margin-top: 1.5rem; padding: 1.5rem 1rem; background: var(--card-sectionning-background-color); border: 1px solid #eab308; border-radius: var(--border-radius); text-align: center;">
+            <p id="ota_status_text" style="margin-bottom: 1rem; font-size: 1.1rem; font-weight: bold;">Checking...</p>
+            <progress id="ota_progress" value="0" max="100" style="display: none;"></progress>
+            
+            <button type="button" id="install_update_btn" style="display: none; margin-top: 0.5rem; background-color: #eab308; border-color: #eab308; color: #111; font-weight: bold; width: 100%;" onclick="startOtaUpdate()">
+              Install Update
+            </button>
+          </div>
+        </div>
+      </details>
+
       <button type="submit">Save Settings</button>
     </form>
   </main>
@@ -134,9 +168,45 @@ <h5>White channel calibration</h5>
       <span id="toast-msg">Your configuration has been saved successfully.</span>
     </div>
   </article>
+  <dialog id="confirm-modal">
+    <article>
+      <h3>⚠️ OTA Firmware Flash Procedure</h3>
+      <p id="confirm-msg">Are you sure you want to change version?</p>
+      <footer>
+        <button class="secondary outline" onclick="closeConfirm(false)">Cancel</button>
+        <button class="contrast" onclick="closeConfirm(true)">Yes, proceed</button>
+      </footer>
+    </article>
+  </dialog>
   <script>
       let scanInterval = 3500;
       let cfgDeviceArchitecture = "";
+      let cfgBoardArchitecture = ""
+      let cfgDeviceVersion = "";
+
+      const loadedScripts = {};
+      function loadSubScript(el, scriptName, initFunName) {
+          if (el.open && !loadedScripts[scriptName]) {
+              console.log(`Loading module: ${scriptName}`);
+              
+              const script = document.createElement('script');
+              script.src = `/${scriptName}.js?v={{VERSION}}`;
+              
+              script.onload = () => {
+                  loadedScripts[scriptName] = true;
+                  console.log(`✅ Loaded: ${scriptName} module`);
+                  if (initFunName && typeof window[initFunName] === 'function') {
+                      window[initFunName]();
+                  }
+              };
+
+              script.onerror = () => {
+                  console.error(`❌ Failed to load: ${scriptName}`);
+              };
+
+              document.head.appendChild(script);
+          }
+      }
 
       function setupPinValidator() {
           const hardwareLimits = {
@@ -156,7 +226,6 @@ <h5>White channel calibration</h5>
               return;
           }
 
-          // Re-add ARIA-live to clkLabel for better accessibility during dynamic updates
           els.clkLabel.setAttribute('aria-live', 'polite');
 
           const setField = (name, opts) => {
@@ -168,7 +237,6 @@ <h5>White channel calibration</h5>
 
               if ((old.tagName === 'SELECT') === isSel && old.dataset.sig === signature) return old;
 
-              // Remember focus state
               const wasFocused = (document.activeElement === old);
 
               const el = isSel ? document.createElement('select') : Object.assign(document.createElement('input'), {
@@ -181,7 +249,7 @@ <h5>White channel calibration</h5>
               if (isSel) {
                   opts.forEach(p => el.add(new Option(`GPIO ${p}`, p)));
                   el.value = opts.includes(parseInt(old.value)) ? old.value : opts[0];
-                  // If only one option, disable for clarity and add tooltip
+
                   if (opts.length === 1) { 
                       el.disabled = true;
                       el.title = "Only one valid GPIO for this mode/architecture"; 
@@ -193,7 +261,7 @@ <h5>White channel calibration</h5>
               old.replaceWith(el);
               el.addEventListener('change', updateUI); 
               
-              if (wasFocused) el.focus(); // Restore focus
+              if (wasFocused) el.focus();
               return el;
           };
 
@@ -243,7 +311,7 @@ <h5>White channel calibration</h5>
               title.innerHTML = "🔄 Rebooting...";
               icon.innerHTML = "⏳";
               msg.innerHTML = 'Device is restarting to apply changes...';
-              setTimeout(() => { location.reload(); }, 8000);
+              setTimeout(() => { location.reload(); }, 10000);
           } else {
               title.innerHTML = "💾 Saved";
               icon.innerHTML = "✔";
@@ -251,55 +319,7 @@ <h5>White channel calibration</h5>
           }
 
           t.classList.add('show');
-          setTimeout(() => { t.classList.remove('show'); }, isReboot ? 8000 : 3000);
-      }
-
-      async function scanWifi() {
-          const select = document.getElementById('ssid_select');
-          const customDiv = document.getElementById('custom_ssid_wrapper');
-
-          try {
-            const res = await fetch('/api/wifi_scan?t=' + Date.now());
-
-            if (res.status === 200) {
-                const nets = await res.json();
-
-                let html = '<option value="">-- Select network --</option>';
-
-                nets
-                  .sort((a, b) => b.rssi - a.rssi)
-                  .forEach(n => {
-                    const q = n.rssi > -50  ? 'excellent' :
-                              n.rssi > -60  ? 'very good' :
-                              n.rssi > -70  ? 'good'      :
-                              n.rssi > -80  ? 'fair'      :
-                                              'poor';
-                    html += `<option value="${n.ssid}">${n.ssid} (${n.rssi} dBm – ${q})</option>`;
-                  });
-
-                html += '<option value="CUSTOM">Custom SSID...</option>';
-
-                const prev = select.value;
-                select.innerHTML = html;
-
-                if (prev) select.value = prev;
-
-                scanInterval = 12000;
-            }
-            else if (res.status === 202) {
-                if (select.options[0]) {
-                  select.options[0].text = "Scanning...";
-                }
-                scanInterval = 4000;
-            }
-          }
-          catch (e) {
-              if (select.options[0]) {
-                select.options[0].text = "Connection lost";
-              }
-          }
-
-          setTimeout(scanWifi, scanInterval);
+          setTimeout(() => { t.classList.remove('show'); }, isReboot ? 10000 : 3000);
       }
 
       async function loadCurrentConfig() {
@@ -312,7 +332,22 @@ <h5>White channel calibration</h5>
               const archField = l["architecture"];              
               if (archField !== undefined){
                   cfgDeviceArchitecture = archField;                  
-              }              
+              }
+              
+              const boardField = l["board"];              
+              if (boardField !== undefined){
+                  cfgBoardArchitecture = boardField;                  
+              }
+              
+              const versionField = l["version"];              
+              if (versionField !== undefined){
+                  cfgDeviceVersion = versionField;                  
+              }
+              
+              const fwInfo = document.getElementById('firmware_version_info');
+              if (fwInfo) {
+                  fwInfo.innerHTML = `<strong>${cfgDeviceVersion || 'unknown'}</strong> <small style="opacity:0.75">(${cfgDeviceArchitecture || '—'})</small>`;
+              }
 
               const fields = ['type', 'dataPin', 'clockPin', 'numLeds', 'brightness', 'r', 'g', 'b', 'effect', 'extraMdnsTag', 'calGain', 'calRed', 'calGreen', 'calBlue'];
               fields.forEach(field => {
@@ -329,6 +364,9 @@ <h5>White channel calibration</h5>
 
               if (l["apMode"] === true) {
                   document.getElementById("wifi_configuration_page").style.display = "block";
+                  loadSubScript(this, 'wifi', "scanWifi");
+              } else {
+                  document.getElementById("ota_page").style.display = "block";           
               }
 
               toggleCalibration();
@@ -361,41 +399,6 @@ <h5>White channel calibration</h5>
           ledTypeSelect.addEventListener('change', toggleCalibration);
           
           loadCurrentConfig();
-          scanWifi();          
-      });
-
-      
-      document.querySelector('form[action="/save_wifi"]').addEventListener('submit', e => {
-          const select = document.getElementById('ssid_select');
-          const customInput = document.getElementById('ssid_custom');
-
-          if (select.value === 'CUSTOM' && !customInput.value.trim()) {
-              e.preventDefault();
-
-              let msg = document.getElementById('wifi-error-msg');
-              if (!msg) {
-                  msg = document.createElement('small');
-                  msg.id = 'wifi-error-msg';
-                  msg.className = 'form-error-msg';
-                  const container = document.querySelector('#wifi-section > div') || document.querySelector('#wifi-section');
-                  if (container) {
-                      container.appendChild(msg);
-                  }
-              }
-              msg.textContent = 'Custom SSID is required';
-              customInput.classList.add('error-active');
-              customInput.focus();              
-
-              setTimeout(() => { 
-                  if (msg) msg.textContent = '';
-                  customInput.classList.remove('error-active');
-              }, 5000);
-
-              return;
-          }
-
-          btn.setAttribute('aria-busy', 'true');
-          btn.disabled = true;
       });
 
       document.querySelector('form[action="/save_config"]').addEventListener('submit', async (e) => {
diff --git a/data/stats.html b/data/stats.html
index d1e6d96..25fceb6 100644
--- a/data/stats.html
+++ b/data/stats.html
@@ -4,10 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Stats - Hyperk</title>
-  <link rel="stylesheet" href="/css/pico.min.css?v=1">
-  <link rel="stylesheet" href="/css/style.css?v=1">
-  <link rel="stylesheet" href="/css/settings.css?v=1">
-  <link id="favicon" rel="icon" type="image/png" href="/img/hyperk.png?v=1">
+  <link rel="stylesheet" href="/css/pico.min.css?v={{VERSION}}">
+  <link rel="stylesheet" href="/css/style.css?v={{VERSION}}">
+  <link rel="stylesheet" href="/css/settings.css?v={{VERSION}}">
+  <link id="favicon" rel="icon" type="image/png" href="/img/hyperk.png?v={{VERSION}}">
 </head>
 <body>
   <nav class="container-fluid">
diff --git a/data/wifi.js b/data/wifi.js
new file mode 100644
index 0000000..d88106f
--- /dev/null
+++ b/data/wifi.js
@@ -0,0 +1,81 @@
+document.querySelector('form[action="/save_wifi"]').addEventListener('submit', e => {
+    const select = document.getElementById('ssid_select');
+    const customInput = document.getElementById('ssid_custom');
+
+    if (select.value === 'CUSTOM' && !customInput.value.trim()) {
+        e.preventDefault();
+
+        let msg = document.getElementById('wifi-error-msg');
+        if (!msg) {
+            msg = document.createElement('small');
+            msg.id = 'wifi-error-msg';
+            msg.className = 'form-error-msg';
+            const container = document.getElementById('custom_ssid_wrapper');
+            if (container) {
+                container.appendChild(msg);
+            }
+        }
+        msg.textContent = 'Custom SSID is required';
+        customInput.classList.add('error-active');
+        customInput.focus();              
+
+        setTimeout(() => { 
+            if (msg) msg.textContent = '';
+            customInput.classList.remove('error-active');
+        }, 5000);
+
+        return;
+    }
+
+    const f = e.target, btn = f.querySelector('button');
+    btn.setAttribute('aria-busy', 'true');
+    btn.disabled = true;
+});
+
+async function scanWifi() {
+    const select = document.getElementById('ssid_select');
+    const customDiv = document.getElementById('custom_ssid_wrapper');
+
+    try {
+    const res = await fetch('/api/wifi_scan?t=' + Date.now());
+
+    if (res.status === 200) {
+        const nets = await res.json();
+
+        let html = '<option value="">-- Select network --</option>';
+
+        nets
+            .sort((a, b) => b.rssi - a.rssi)
+            .forEach(n => {
+            const q = n.rssi > -50  ? 'excellent' :
+                        n.rssi > -60  ? 'very good' :
+                        n.rssi > -70  ? 'good'      :
+                        n.rssi > -80  ? 'fair'      :
+                                        'poor';
+            html += `<option value="${n.ssid}">${n.ssid} (${n.rssi} dBm – ${q})</option>`;
+            });
+
+        html += '<option value="CUSTOM">Custom SSID...</option>';
+
+        const prev = select.value;
+        select.innerHTML = html;
+
+        if (prev) select.value = prev;
+
+        scanInterval = 12000;
+    }
+    else if (res.status === 202) {
+        if (select.options[0]) {
+            select.options[0].text = "Scanning...";
+        }
+        scanInterval = 4000;
+    }
+    }
+    catch (e) {
+        if (select.options[0]) {
+        select.options[0].text = "Connection lost";
+        }
+    }
+
+    setTimeout(scanWifi, scanInterval);
+};
diff --git a/include/ota.h b/include/ota.h
new file mode 100644
index 0000000..5b25068
--- /dev/null
+++ b/include/ota.h
@@ -0,0 +1,7 @@
+// File: include/ota.h
+
+#pragma once
+
+#include <ESPAsyncWebServer.h>
+
+void otaUpdateHandler(AsyncWebServer &server);
\ No newline at end of file
diff --git a/platformio.ini b/platformio.ini
index 2383555..4210861 100644
--- a/platformio.ini
+++ b/platformio.ini
@@ -16,6 +16,7 @@ lib_deps =
 
 build_flags =
     -DAPP_NAME=\"Hyperk\"
+    -DPIO_ENV_NAME=\"${PIOENV}\"
     ; -DDEBUG_LOG ; enable debug log to serial port
 
 ; ==================================================
diff --git a/readme.md b/readme.md
index da731c3..1637071 100644
--- a/readme.md
+++ b/readme.md
@@ -7,6 +7,9 @@ Hyperk is a minimalist, high-performance uni-platform WiFi LED driver for ESP826
 The firmware can be flashed directly from your browser:
 **[hyperk.hyperhdr.org](https://hyperk.hyperhdr.org)**
 
+> [!TIP]
+> Once installed, you can also perform OTA updates directly through the local **Web GUI**.
+
 ---
 
 ## Supported Hardware
diff --git a/scripts/web_embedder.py b/scripts/web_embedder.py
index 44a223a..445faeb 100644
--- a/scripts/web_embedder.py
+++ b/scripts/web_embedder.py
@@ -1,5 +1,6 @@
 import os
 import gzip
+import urllib.parse
 Import("env")
 
 def embed_web_files():
@@ -10,8 +11,20 @@ def embed_web_files():
     if not os.path.exists(data_dir):
         print(f"[WebEmbedder] Error: {data_dir} directory not found!")
         return
+    
+    raw_v = "1.0.0" # fallback
+    cpp_defines = env.get("CPPDEFINES", []) 
+    for define in cpp_defines:
+        if isinstance(define, tuple) and define[0] == "APP_VERSION":
+            raw_v = define[1]
+            break
+        elif isinstance(define, str) and define.startswith("APP_VERSION="):
+            raw_v = define.split('=')[1]
+            break
+    clean_v = raw_v.replace('\\"', '').strip('"')
+    app_version = urllib.parse.quote(clean_v)
 
-    print(f"[WebEmbedder] Generating {output_file}...")
+    print(f"[WebEmbedder] Generating {output_file} (version = {app_version})...")
     
     files_data = []
     
@@ -49,8 +62,15 @@ def embed_web_files():
                 mime = MIME_TYPES.get(ext, "application/octet-stream")
                 
                 with open(full_path, "rb") as f_in:
+                    raw_data = f_in.read()
+
+                    # replace version
+                    if ext == ".html":
+                        content = raw_data.decode("utf-8").replace("{{VERSION}}", app_version)
+                        raw_data = content.encode("utf-8")
+
                     # Compress data with Gzip
-                    compressed = gzip.compress(f_in.read())
+                    compressed = gzip.compress(raw_data)
                     f.write(f"const uint8_t PAGE_{var_name}[] PROGMEM = {{ ")
                     f.write(", ".join([f"0x{b:02x}" for b in compressed]))
                     f.write(f" }};\n")
@@ -72,13 +92,9 @@ def embed_web_files():
         f.write(f"const WebResource webResources[] PROGMEM = {{\n")
         for file in files_data:
             f.write(f"  {{ \"{file['url']}\", {file['var']}, {file['len']}, \"{file['mime']}\" }},\n")
-            # Automatically map index.html to the root path "/"
-            if file['url'] == "/index.html":
-                f.write(f"  {{ \"/\", {file['var']}, {file['len']}, \"{file['mime']}\" }},\n")
         f.write("};\n\n")
         
-        # Calculate total count including the root mapping
-        total_count = len(files_data) + (1 if any(f['url'] == '/index.html' for f in files_data) else 0)
+        total_count = len(files_data)
         f.write(f"const uint16_t webResourcesCount = {total_count};\n\n")
         f.write("#endif\n")
     print(f"[WebEmbedder] Successfully created {output_file}")
diff --git a/src/ota.cpp b/src/ota.cpp
new file mode 100644
index 0000000..ea22dc5
--- /dev/null
+++ b/src/ota.cpp
@@ -0,0 +1,123 @@
+/* ota.cpp
+*
+*  MIT License
+*
+*  Copyright (c) 2026 awawa-dev
+*
+*  Project homesite: https://github.com/awawa-dev/Hyperk
+*
+*  Permission is hereby granted, free of charge, to any person obtaining a copy
+*  of this software and associated documentation files (the "Software"), to deal
+*  in the Software without restriction, including without limitation the rights
+*  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+*  copies of the Software, and to permit persons to whom the Software is
+*  furnished to do so, subject to the following conditions:
+*
+*  The above copyright notice and this permission notice shall be included in all
+*  copies or substantial portions of the Software.
+
+*  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+*  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+*  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+*  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+*  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+*  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+*  SOFTWARE.
+*/
+
+#include <Arduino.h>
+#if defined(ESP32)
+  #include <Update.h>
+#elif defined(ESP8266)
+  #include <Updater.h>
+#elif defined(ARDUINO_ARCH_RP2040)
+  #include <Updater.h>
+#endif
+#include "ota.h"
+#include "logger.h"
+#include "manager.h"
+#include "utils.h"
+
+namespace {
+    bool customValidationFailed = false;
+}
+
+void otaUpdateHandler(AsyncWebServer &server) {
+    server.on("/ota", HTTP_POST, [](AsyncWebServerRequest *request) {
+        bool error = Update.hasError() || customValidationFailed;
+        AsyncWebServerResponse *response = request->beginResponse(error ? 500 : 200, "text/plain", error ? "FAIL" : "OK");
+        response->addHeader("Connection", "close");
+        request->send(response);
+        
+        if (!error) {
+            Log::debug("OTA Update successful. Rebooting...");
+            managerScheduleReboot(1000);
+        }
+    }, [](AsyncWebServerRequest *request, String filename, size_t index, uint8_t *data, size_t len, bool final) {
+        if (!index) {
+            Log::debug("OTA Update Start: ", filename);
+
+            customValidationFailed = false;
+
+            if (request->hasHeader("hyperk-ota-firmware-name")) {
+                String firmwareName = request->getHeader("hyperk-ota-firmware-name")->value();
+                firmwareName.toLowerCase();
+                String expectedPlatform = String(PIO_ENV_NAME) + ".";
+                Log::debug("OTA firmware name: ", firmwareName, ", searching for: ", expectedPlatform, " tag");
+                if (firmwareName.indexOf(expectedPlatform) < 0)  {
+                    #ifdef ARDUINO_ARCH_ESP32
+                        Update.abort();
+                    #endif
+                    customValidationFailed = true;
+                    Log::debug("OTA incorrect firmware version");
+                    return;
+                 }
+            } else {
+                #ifdef ARDUINO_ARCH_ESP32
+                    Update.abort();
+                #endif
+                customValidationFailed = true;
+                Log::debug("OTA missing hyperk-ota-firmware-name header");
+                return;
+            }
+
+#if defined(ESP8266)
+            Update.runAsync(true);
+            size_t maxSpace = (ESP.getFreeSketchSpace() - 0x1000) & 0xFFFFF000;
+#elif defined(ARDUINO_ARCH_RP2040)    
+            size_t maxSpace = 0;
+#elif defined(ARDUINO_ARCH_ESP32)
+            size_t maxSpace = UPDATE_SIZE_UNKNOWN;
+#endif
+            if (request->hasHeader("hyperk-ota-firmware-size")) {
+                maxSpace = request->getHeader("hyperk-ota-firmware-size")->value().toInt();
+                Log::debug("OTA expected firmware size: ", maxSpace);
+            } else {
+                #ifdef ARDUINO_ARCH_ESP32
+                    Update.abort();
+                #endif
+                customValidationFailed = true;
+                Log::debug("OTA missing hyperk-ota-firmware-size header");
+                return;
+            }
+
+            if (!Update.begin(maxSpace, U_FLASH)) {
+                Update.printError(Serial);
+            }
+        }
+
+        if (!Update.hasError() && !customValidationFailed) {
+            if (Update.write(data, len) != len) {
+                Update.printError(Serial);
+            }
+        }
+
+        if (final) {
+            if (Update.end()) {
+                Log::debug("OTA Update Success: ", index + len, " bytes");
+            } else {
+                Update.printError(Serial);
+            }
+        }
+    });
+}
\ No newline at end of file
diff --git a/src/web_server.cpp b/src/web_server.cpp
index 9976e4b..9591adc 100644
--- a/src/web_server.cpp
+++ b/src/web_server.cpp
@@ -42,6 +42,7 @@
 #include "mdns_service.h"
 #include "web_resources.h"
 #include "uni_json_api.h"
+#include "ota.h"
 
 namespace {
     constexpr auto mime_application_json = "application/json";
@@ -52,8 +53,15 @@ namespace {
 void setupStaticHandlers(AsyncWebServer& server);
 
 void setupWebServer(AsyncWebServer& server) {
-
-    setupUniApiJsonHandler(server);
+    
+    if (isAPMode()){
+        server.on("/fwlink", HTTP_GET, [](AsyncWebServerRequest *request){ request->redirect("/"); });
+        server.on("/check_generate_204", HTTP_GET, [](AsyncWebServerRequest *request){ request->redirect("/"); });
+        server.on("/generate_204", HTTP_ANY, [](AsyncWebServerRequest *request){ request->redirect("/"); });
+    } else {
+        setupUniApiJsonHandler(server);
+        otaUpdateHandler(server);
+    }
 
     // Scan WiFi
     server.on("/api/wifi_scan", HTTP_GET, [](AsyncWebServerRequest *request) {
@@ -141,7 +149,7 @@ void setupWebServer(AsyncWebServer& server) {
             response->addHeader(F("Connection"), F("close"));
             request->send(response);
             Log::debug("WiFi Config saved. Rebooting in 2s...");
-            managerScheduleReboot(2000);
+            managerScheduleReboot(1000);
         }
     });
 
@@ -234,6 +242,8 @@ void setupWebServer(AsyncWebServer& server) {
         JsonObject led = doc["config"].to<JsonObject>();
         led["apMode"]       = isAPMode();
         led["architecture"] = getDeviceArch();
+        led["board"]        = String(PIO_ENV_NAME);
+        led["version"]      = APP_VERSION;
         
         led["type"]         = (int)cfg.led.type;
         led["dataPin"]      = cfg.led.dataPin;
@@ -294,12 +304,6 @@ void setupWebServer(AsyncWebServer& server) {
         }
     });
 
-    if (isAPMode()){
-        server.on("/fwlink", HTTP_GET, [](AsyncWebServerRequest *request){ request->redirect("/"); });
-        server.on("/check_generate_204", HTTP_GET, [](AsyncWebServerRequest *request){ request->redirect("/"); });
-        server.on("/generate_204", HTTP_ANY, [](AsyncWebServerRequest *request){ request->redirect("/"); });
-    };
-
     setupStaticHandlers(server);
 }
 
@@ -311,9 +315,9 @@ void sendEmbeddedFile(AsyncWebServerRequest *request, const uint8_t* content, ui
     {
         response->addHeader(F("Content-Encoding"), F("gzip"));
         response->addHeader(F("Connection"), F("close"));
-        if (strcmp(contentType, "text/css") == 0 || strcmp(contentType, "image/png") == 0) 
+        if (strcmp(contentType, "application/javascript") == 0 || strcmp(contentType, "text/css") == 0 || strcmp(contentType, "image/png") == 0) 
         {
-            response->addHeader(F("Cache-Control"), F("public, max-age=31536000"));
+            response->addHeader(F("Cache-Control"), F("public, max-age=31536000, immutable"));
         }
         request->send(response);
     }
@@ -331,7 +335,7 @@ void setupStaticHandlers(AsyncWebServer& server)
             currentUrl = webResources[i].url;
         #endif
 
-        server.on(currentUrl, HTTP_GET, [i](AsyncWebServerRequest *request)
+        auto handler = [i](AsyncWebServerRequest *request)
         {
             WebResource res;
             #if defined(ESP8266)
@@ -340,6 +344,13 @@ void setupStaticHandlers(AsyncWebServer& server)
                 res = webResources[i];
             #endif
             sendEmbeddedFile(request, res.data, res.len, res.mime);
-        });
+        };
+
+        server.on(currentUrl, HTTP_GET, handler);
+
+        if (strcmp(currentUrl, "/index.html") == 0) 
+        {
+            server.on("/", HTTP_GET, handler);
+        }
     }
 }
\ No newline at end of file
diff --git a/version b/version
index f063100..5f57b5f 100644
--- a/version
+++ b/version
@@ -1 +1 @@
-0.0.2-alpha.2
+0.0.2-alpha.3
