diff --git a/examples/vibration-anomaly-detection/assets/app.js b/examples/vibration-anomaly-detection/assets/app.js
index f2d324b..81901cc 100644
--- a/examples/vibration-anomaly-detection/assets/app.js
+++ b/examples/vibration-anomaly-detection/assets/app.js
@@ -2,41 +2,333 @@
 //
 // SPDX-License-Identifier: MPL-2.0
 
-const fanLed = document.getElementById('fan-led');
-const fanText = document.getElementById('fan-text');
-let timeoutId;
+const canvas = document.getElementById('plot');
+const ctx = canvas.getContext('2d');
+const maxSamples = 200;
+const samples = [];
+let errorContainer;
+
+const recentAnomaliesElement = document.getElementById('recentClassifications');
+let anomalies = [];
+const MAX_RECENT_ANOMALIES = 5;
+
+let hasDataFromBackend = false; // New global flag
+
+const accelerometerDataDisplay = document.getElementById('accelerometer-data-display');
+const noAccelerometerDataPlaceholder = document.getElementById('no-accelerometer-data');
+
+function drawPlot() {
+  if (!hasDataFromBackend) return; // Only draw if we have data
+
+  const currentWidth = canvas.clientWidth;
+  const currentHeight = canvas.clientHeight;
+
+  if (canvas.width !== currentWidth || canvas.height !== currentHeight) {
+    canvas.width = currentWidth;
+    canvas.height = currentHeight;
+  }
+
+  // All grid lines (every 0.5) - same size
+  ctx.strokeStyle = '#31333F99';
+  ctx.lineWidth = 0.5;
+  ctx.beginPath();
+  for (let i=0; i<=8; i++){
+    const y = 10 + i*((currentHeight-20)/8);
+    ctx.moveTo(40,y);
+    ctx.lineTo(currentWidth,y);
+  }
+  ctx.stroke();
+
+  // Y-axis labels (-2.0 to 2.0 every 0.5)
+  ctx.fillStyle = '#666';
+  ctx.font = '400 14px Arial';
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'middle';
+
+  for (let i=0; i<=8; i++) {
+    const y = 10 + i*((currentHeight-20)/8);
+    const value = (2.0 - i * 0.5).toFixed(1);
+    ctx.fillText(value, 35, y);
+  }
+
+  // draw each series
+  function drawSeries(key, color) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    for (let i=0;i<samples.length;i++){
+      const s = samples[i];
+      const x = 40 + (i/(maxSamples-1))*(currentWidth-40);
+      const v = s[key];
+      const y = (currentHeight/2) - (v * ((currentHeight-20)/4));
+      if (i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
+    }
+    ctx.stroke();
+  }
+
+  drawSeries('x','#0068C9');
+  drawSeries('y','#FF9900');
+  drawSeries('z','#FF2B2B');
+}
+
+function pushSample(s){
+  samples.push(s);
+  if (samples.length>maxSamples) samples.shift();
+  if (!hasDataFromBackend) { // Check if this is the first data received
+    hasDataFromBackend = true;
+    renderAccelerometerData();
+  }
+  drawPlot();
+}
 
 /*
  * Socket initialization. We need it to communicate with the server
  */
 const socket = io(`http://${window.location.host}`); // Initialize socket.io connection
 
+const feedbackContentWrapper = document.getElementById('feedback-content-wrapper');
+let feedbackTimeout;
+
+// ... (existing code between)
+
 // Start the application
 document.addEventListener('DOMContentLoaded', () => {
     initSocketIO();
+    renderAccelerometerData(); // Initial render for accelerometer
+    renderAnomalies(); // Initial render for anomalies
+    updateFeedback(null); // Initial feedback state
+    initializeConfidenceSlider(); // Initialize the confidence slider
+
+    // Popover logic
+    document.querySelectorAll('.info-btn.confidence').forEach(img => {
+        const popover = img.nextElementSibling;
+        img.addEventListener('mouseenter', () => {
+            popover.style.display = 'block';
+        });
+        img.addEventListener('mouseleave', () => {
+            popover.style.display = 'none';
+        });
+    });
+
+    document.querySelectorAll('.info-btn.accelerometer-data').forEach(img => {
+        const popover = img.nextElementSibling;
+        img.addEventListener('mouseenter', () => {
+            popover.style.display = 'block';
+        });
+        img.addEventListener('mouseleave', () => {
+            popover.style.display = 'none';
+        });
+    });
 });
 
+function initializeConfidenceSlider() {
+    const confidenceSlider = document.getElementById('confidenceSlider');
+    const confidenceInput = document.getElementById('confidenceInput');
+    const confidenceResetButton = document.getElementById('confidenceResetButton');
+
+    confidenceSlider.addEventListener('input', updateConfidenceDisplay);
+    confidenceInput.addEventListener('input', handleConfidenceInputChange);
+    confidenceInput.addEventListener('blur', validateConfidenceInput);
+    updateConfidenceDisplay();
+
+    confidenceResetButton.addEventListener('click', (e) => {
+        if (e.target.classList.contains('reset-icon') || e.target.closest('.reset-icon')) {
+            resetConfidence();
+        }
+    });
+}
+
+function handleConfidenceInputChange() {
+    const confidenceInput = document.getElementById('confidenceInput');
+    const confidenceSlider = document.getElementById('confidenceSlider');
+
+    let value = parseInt(confidenceInput.value, 10);
+
+    if (isNaN(value)) value = 5;
+    if (value < 1) value = 1;
+    if (value > 10) value = 10;
+
+    confidenceSlider.value = value;
+    updateConfidenceDisplay();
+}
+
+function validateConfidenceInput() {
+    const confidenceInput = document.getElementById('confidenceInput');
+    let value = parseInt(confidenceInput.value, 10);
+
+    if (isNaN(value)) value = 5;
+    if (value < 1) value = 1;
+    if (value > 10) value = 10;
+
+    confidenceInput.value = value.toFixed(0);
+
+    handleConfidenceInputChange();
+}
+
+function updateConfidenceDisplay() {
+    const confidenceSlider = document.getElementById('confidenceSlider');
+    const confidenceInput = document.getElementById('confidenceInput');
+    const confidenceValueDisplay = document.getElementById('confidenceValueDisplay');
+    const sliderProgress = document.getElementById('sliderProgress');
+
+    const value = parseFloat(confidenceSlider.value);
+    socket.emit('override_th', value / 10); // Send scaled confidence to backend (0.1 to 1.0)
+    const percentage = (value - confidenceSlider.min) / (confidenceSlider.max - confidenceSlider.min) * 100;
+
+    const displayValue = value.toFixed(0);
+    confidenceValueDisplay.textContent = displayValue;
+
+    if (document.activeElement !== confidenceInput) {
+        confidenceInput.value = displayValue;
+    }
+
+    sliderProgress.style.width = percentage + '%';
+    confidenceValueDisplay.style.left = percentage + '%';
+}
+
+function resetConfidence() {
+    const confidenceSlider = document.getElementById('confidenceSlider');
+    const confidenceInput = document.getElementById('confidenceInput');
+
+    confidenceSlider.value = '5';
+    confidenceInput.value = '5';
+    updateConfidenceDisplay();
+}
+
 function initSocketIO() {
-    socket.on('fan_status_update', (message) => {
-        updateFanStatus(message);
+    socket.on('anomaly_detected', async (message) => {
+        if (!hasDataFromBackend) { // Check if this is the first data received
+            hasDataFromBackend = true;
+            renderAccelerometerData();
+        }
+        printAnomalies(message);
+        renderAnomalies();
+        try {
+            const parsedAnomaly = JSON.parse(message);
+            updateFeedback(parsedAnomaly.score); // Pass the anomaly score
+        } catch (e) {
+            console.error("Failed to parse anomaly message for feedback:", message, e);
+            updateFeedback(null); // Fallback to no anomaly feedback
+        }
+    });
+
+    socket.on('sample', (s) => {
+      pushSample(s);
+    });
+
+    socket.on('connect', () => {
+      if (errorContainer) {
+        errorContainer.style.display = 'none';
+        errorContainer.textContent = '';
+      }
+    });
+
+    socket.on('disconnect', () => {
+      errorContainer = document.getElementById('error-container');
+      if (errorContainer) {
+        errorContainer.textContent = 'Connection to the board lost. Please check the connection.';
+        errorContainer.style.display = 'block';
+      }
     });
 }
 
-// Function to update LED status in the UI
-function updateFanStatus(status) {
-    const isOn = status.anomaly;
+// ... (existing printAnomalies and renderAnomalies functions)
 
-	changeStatus(isOn);
-	
-	if (timeoutId) {
-      clearTimeout(timeoutId);
+function updateFeedback(anomalyScore = null) {
+    clearTimeout(feedbackTimeout); // Clear any existing timeout
+
+    if (!hasDataFromBackend) {
+        feedbackContentWrapper.innerHTML = `
+            <div class="feedback-content">
+                <img src="./img/no-data.png" alt="No Data">
+                <p class="feedback-text">No data</p>
+            </div>
+        `;
+        return;
     }
-	
-	// schedule reset
-	timeoutId = setTimeout(() => changeStatus(!isOn), 3000);	
+
+    if (anomalyScore !== null) { // Anomaly detected
+        feedbackContentWrapper.innerHTML = `
+            <div class="feedback-content">
+                <img src="./img/bad.svg" alt="Anomaly Detected">
+                <p class="feedback-text">Anomaly detected: ${anomalyScore.toFixed(2)}</p>
+            </div>
+        `;
+        feedbackTimeout = setTimeout(() => {
+            updateFeedback(null); // Reset after 3 seconds
+        }, 3000);
+    } else { // No anomaly or reset
+        feedbackContentWrapper.innerHTML = `
+            <div class="feedback-content">
+                <img src="./img/good.svg" alt="No Anomalies">
+                <p class="feedback-text">No anomalies</p>
+            </div>
+        `;
+    }
+}
+
+function printAnomalies(newAnomaly) {
+    anomalies.unshift(newAnomaly);
+    if (anomalies.length > MAX_RECENT_ANOMALIES) { anomalies.pop(); }
 }
 
-function changeStatus(isOn) {
-    fanLed.className = isOn ? 'led-on' : 'led-off';
-    fanText.textContent = isOn ? 'Anomaly detected' : 'No anomaly';
+function renderAnomalies() {
+    recentAnomaliesElement.innerHTML = ``; // Clear the list
+
+    if (anomalies.length === 0) {
+        recentAnomaliesElement.innerHTML = `
+            <div class="no-recent-anomalies">
+                <img src="./img/no-data.png">
+                <p>No recent anomalies</p>
+            </div>
+        `;
+        return;
+    }
+
+    anomalies.forEach((anomaly) => {
+        try {
+            const parsedAnomaly = JSON.parse(anomaly);
+
+            if (Object.keys(parsedAnomaly).length === 0) {
+                return; // Skip empty anomaly objects
+            }
+
+            const listItem = document.createElement('li');
+            listItem.className = 'anomaly-list-item';
+
+            const score = parsedAnomaly.score.toFixed(1);
+            const date = new Date(parsedAnomaly.timestamp);
+
+            const timeString = date.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+            const dateString = date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).replace(/ /g, ' ');
+
+            listItem.innerHTML = `
+                <span class="anomaly-score">${score}</span>
+                <span class="anomaly-text">Anomaly</span>
+                <span class="anomaly-time">${timeString} - ${dateString}</span>
+            `;
+
+            recentAnomaliesElement.appendChild(listItem);
+
+        } catch (e) {
+            console.error("Failed to parse anomaly data:", anomaly, e);
+            if(recentAnomaliesElement.getElementsByClassName('anomaly-error').length === 0) {
+                const errorRow = document.createElement('div');
+                errorRow.className = 'anomaly-error';
+                errorRow.textContent = `Error processing anomaly data. Check console for details.`;
+                recentAnomaliesElement.appendChild(errorRow);
+            }
+        }
+    });
+}
+
+function renderAccelerometerData() {
+    if (hasDataFromBackend) {
+        accelerometerDataDisplay.style.display = 'block';
+        noAccelerometerDataPlaceholder.style.display = 'none';
+        drawPlot();
+    } else {
+        accelerometerDataDisplay.style.display = 'none';
+        noAccelerometerDataPlaceholder.style.display = 'flex'; // Use flex for centering content
+    }
 }
diff --git a/examples/vibration-anomaly-detection/assets/fonts/Open Sans/OFL.txt b/examples/vibration-anomaly-detection/assets/fonts/Open Sans/OFL.txt
new file mode 100644
index 0000000..4fc6170
--- /dev/null
+++ b/examples/vibration-anomaly-detection/assets/fonts/Open Sans/OFL.txt	
@@ -0,0 +1,93 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/examples/vibration-anomaly-detection/assets/fonts/Open Sans/OpenSans-VariableFont_wdth,wght.ttf b/examples/vibration-anomaly-detection/assets/fonts/Open Sans/OpenSans-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..548c15f
Binary files /dev/null and b/examples/vibration-anomaly-detection/assets/fonts/Open Sans/OpenSans-VariableFont_wdth,wght.ttf differ
diff --git a/examples/vibration-anomaly-detection/assets/fonts/fonts.css b/examples/vibration-anomaly-detection/assets/fonts/fonts.css
new file mode 100644
index 0000000..cd34127
--- /dev/null
+++ b/examples/vibration-anomaly-detection/assets/fonts/fonts.css
@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: Copyright (C) ARDUINO SRL (http://www.arduino.cc)
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@font-face {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-display: swap;
+    src: url('RobotoMono-VariableFont_wght.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-display: swap;
+    src: url('Open Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
+}
diff --git a/examples/vibration-anomaly-detection/assets/img/bad.svg b/examples/vibration-anomaly-detection/assets/img/bad.svg
new file mode 100644
index 0000000..9f5f4c0
--- /dev/null
+++ b/examples/vibration-anomaly-detection/assets/img/bad.svg
@@ -0,0 +1,23 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.8215 56.3391C19.4221 56.3391 6.04504 48.5617 6.04504 31.496C6.04504 14.4303 19.4221 6.65302 31.8215 6.65302C38.71 6.65302 45.0652 8.91955 49.7761 13.0526C54.8869 17.5857 57.5979 23.9854 57.5979 31.496C57.5979 39.0067 54.8869 45.3619 49.7761 49.895C45.0652 54.0281 38.6655 56.3391 31.8215 56.3391Z" fill="url(#paint0_radial_3041_19029)"/>
+<path d="M53.1072 16.7383C55.4759 20.5603 56.7114 25.1111 56.7114 30.173C56.7114 37.6837 54.0005 44.0389 48.8896 48.572C44.1788 52.7051 37.7791 55.0161 30.935 55.0161C22.9088 55.0161 14.4915 51.7496 9.52283 44.8211C14.3048 52.6695 23.2999 56.3493 31.8239 56.3493C38.6679 56.3493 45.0676 54.0383 49.7785 49.9052C54.8893 45.3722 57.6003 39.017 57.6003 31.5063C57.6003 25.8444 56.0581 20.8136 53.1072 16.7383Z" fill="#EB8F00"/>
+<path d="M31.8233 56.3462C19.4239 56.3462 6.04688 48.5688 6.04688 31.5031C6.04688 14.4375 19.4239 6.66013 31.8233 6.66013C38.7118 6.66013 45.067 8.92666 49.7779 13.0598C54.8887 17.5928 57.5997 23.9925 57.5997 31.5031C57.5997 39.0138 54.8887 45.369 49.7779 49.9021C45.067 54.0352 38.6674 56.3462 31.8233 56.3462Z" fill="url(#paint1_linear_3041_19029)"/>
+<path d="M23.1108 25.7422C21.2487 25.7422 19.5554 27.3154 19.5554 29.9286C19.5554 32.5418 21.2487 34.1106 23.1108 34.1106C24.9774 34.1106 26.6662 32.5374 26.6662 29.9286C26.6662 27.3199 24.9951 25.7422 23.1108 25.7422Z" fill="#422B0D"/>
+<path d="M22.9552 27.4917C22.3241 27.1895 21.5642 27.4562 21.2575 28.0873C21.022 28.5806 21.1286 29.1716 21.5242 29.5538C22.1553 29.856 22.9152 29.5894 23.2219 28.9583C23.4574 28.465 23.3508 27.8739 22.9552 27.4917Z" fill="#896024"/>
+<path d="M40.1785 25.7422C38.3164 25.7422 36.6232 27.3154 36.6232 29.9286C36.6232 32.5418 38.3164 34.1106 40.1785 34.1106C42.0407 34.1106 43.7339 32.5374 43.7339 29.9286C43.7339 27.3199 42.0407 25.7422 40.1785 25.7422Z" fill="#422B0D"/>
+<path d="M40.0006 27.4917C39.3695 27.1895 38.6096 27.4562 38.3029 28.0873C38.0674 28.5806 38.1741 29.1716 38.5696 29.5538C39.2007 29.856 39.9606 29.5894 40.2673 28.9583C40.5028 28.465 40.3962 27.8739 40.0006 27.4917Z" fill="#896024"/>
+<path d="M26.9784 49.3305C25.4896 49.3305 24.1118 48.5572 23.3341 47.2862C22.5875 46.0551 22.6541 44.4908 23.5119 43.3308C25.4229 40.6643 28.3561 39.2422 32.0003 39.2422C35.6446 39.2422 38.5777 40.6643 40.4888 43.3308C41.3465 44.4908 41.4132 46.0551 40.6665 47.2862C39.8888 48.5572 38.5111 49.3305 37.0223 49.3305C36.5556 49.3261 36.089 49.2505 35.6446 49.1083C33.2758 48.3394 30.7248 48.3394 28.3561 49.1083C27.9116 49.2461 27.445 49.3216 26.9784 49.3305Z" fill="#422B0D"/>
+<path d="M40.6224 17.4719H40.5779C40.1291 17.5075 39.7335 17.1741 39.6935 16.7253C39.658 16.2764 39.9913 15.8809 40.4401 15.8409C41.2979 15.712 42.1734 15.7209 43.0311 15.8631C45.3554 16.2186 47.4576 17.4452 48.9064 19.2985C49.5685 20.1873 48.3997 21.0317 47.6664 20.3651C45.711 18.6363 43.2311 17.6186 40.6224 17.4719Z" fill="#422B0D"/>
+<path d="M23.4906 17.4753H23.5572C24.0105 17.4842 24.3794 17.1242 24.3883 16.6709C24.3972 16.262 24.095 15.9065 23.6905 15.8487C22.8328 15.7198 21.9573 15.7287 21.0996 15.8709C18.7708 16.222 16.6687 17.453 15.2199 19.3063C14.5621 20.1951 15.731 21.0395 16.4598 20.3729C18.4153 18.6485 20.8907 17.6264 23.4906 17.4753Z" fill="#422B0D"/>
+<defs>
+<radialGradient id="paint0_radial_3041_19029" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.8215 31.496) scale(25.3141 25.314)">
+<stop offset="0.5" stop-color="#FDE030"/>
+<stop offset="0.92" stop-color="#F7C02B"/>
+<stop offset="1" stop-color="#F4A223"/>
+</radialGradient>
+<linearGradient id="paint1_linear_3041_19029" x1="31.8233" y1="56.3462" x2="31.8233" y2="6.66013" gradientUnits="userSpaceOnUse">
+<stop offset="0.39" stop-color="#40C0E7" stop-opacity="0"/>
+<stop offset="1" stop-color="#5F7AFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/examples/vibration-anomaly-detection/assets/img/fan.png b/examples/vibration-anomaly-detection/assets/img/fan.png
deleted file mode 100644
index c8b0e6a..0000000
Binary files a/examples/vibration-anomaly-detection/assets/img/fan.png and /dev/null differ
diff --git a/examples/vibration-anomaly-detection/assets/img/good.svg b/examples/vibration-anomaly-detection/assets/img/good.svg
new file mode 100644
index 0000000..d96f98b
--- /dev/null
+++ b/examples/vibration-anomaly-detection/assets/img/good.svg
@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.8204 56.3462C19.421 56.3462 6.04395 48.5689 6.04395 31.5032C6.04395 14.4375 19.421 6.66016 31.8204 6.66016C38.7089 6.66016 45.0641 8.92669 49.775 13.0598C54.8858 17.5929 57.5968 23.9925 57.5968 31.5032C57.5968 39.0139 54.8858 45.369 49.775 49.9021C45.0641 54.0352 38.6644 56.3462 31.8204 56.3462Z" fill="url(#paint0_radial_3041_20951)"/>
+<path d="M53.1029 16.7383C55.4717 20.5603 56.7072 25.1111 56.7072 30.1731C56.7072 37.6837 53.9962 44.0389 48.8853 48.572C44.1745 52.7051 37.7748 55.0161 30.9307 55.0161C22.9045 55.0161 14.4872 51.7496 9.51855 44.8211C14.3005 52.6696 23.2956 56.3493 31.8196 56.3493C38.6637 56.3493 45.0633 54.0384 49.7742 49.9053C54.885 45.3722 57.596 39.017 57.596 31.5063C57.596 25.8444 56.0539 20.8136 53.1029 16.7383Z" fill="#EB8F00"/>
+<path d="M31.9996 48.4358C28.2043 48.4358 25.4978 45.6404 24.68 44.0894C24.3689 43.565 24.3111 42.925 24.5156 42.3517C24.64 42.0095 24.9689 41.7784 25.3333 41.7695C25.4578 41.774 25.5777 41.7962 25.6933 41.8406C27.6043 42.5917 29.2798 43.6805 32.0218 43.6805C34.7639 43.6805 36.4661 42.5917 38.3504 41.8406C38.466 41.7962 38.5859 41.7695 38.7104 41.7695C39.0704 41.7873 39.3815 42.014 39.5059 42.3517C39.7103 42.925 39.6526 43.565 39.3415 44.0894C38.5015 45.6404 35.795 48.4358 31.9996 48.4358Z" fill="#422B0D"/>
+<path d="M25.5608 27.7159L25.472 27.8048C25.4009 27.8848 25.3253 27.9603 25.2453 28.027L24.9387 28.2803C24.8098 28.3781 24.6631 28.4847 24.4942 28.5914C24.3254 28.6981 24.152 28.8003 23.9609 28.898C23.7654 28.9958 23.561 29.0803 23.3521 29.1514C23.1343 29.218 22.9121 29.2714 22.6854 29.3158C22.4543 29.3513 22.2232 29.3691 21.9877 29.3691H21.7788C21.6633 29.3691 21.6411 29.3691 21.5966 29.3691L21.2855 29.3291C21.0589 29.2847 20.8367 29.2314 20.6189 29.1647C20.4056 29.0847 20.2011 28.9914 20.0011 28.8847C19.81 28.7869 19.6323 28.6803 19.4678 28.5781C19.2056 28.4047 18.9612 28.2092 18.7301 27.9959L18.4501 27.7381L18.339 27.627C17.7701 27.107 16.9124 27.0759 16.308 27.5515C15.868 27.8892 15.7214 28.4936 15.9614 28.9958L16.028 29.1291C16.0858 29.258 16.1525 29.3825 16.2236 29.5025C16.6813 30.2669 17.3035 30.9201 18.0412 31.4223C18.3923 31.6668 18.7657 31.8756 19.1567 32.0445C19.5878 32.2356 20.0323 32.3823 20.49 32.4889C20.7344 32.5334 20.9611 32.5778 21.2589 32.6045C21.3966 32.6045 21.5566 32.6312 21.6277 32.6312H21.9744C22.4721 32.6223 22.9654 32.5734 23.4543 32.4756C23.912 32.369 24.3565 32.2223 24.7876 32.0312C25.1786 31.8623 25.552 31.6534 25.9031 31.409C26.4541 31.0357 26.943 30.5735 27.3474 30.0446L27.5607 29.7469L27.7385 29.4669C27.8052 29.3602 27.8629 29.2447 27.9118 29.1247L27.9607 29.0136C28.2274 28.3781 27.9252 27.6448 27.2896 27.3781C27.2452 27.3604 27.2008 27.3426 27.1563 27.3337C26.5963 27.1559 25.9786 27.3026 25.5608 27.7159Z" fill="#422B0D"/>
+<path d="M45.5599 27.7159L45.471 27.8048C45.3999 27.8848 45.3243 27.9603 45.2443 28.027L44.9377 28.2803C44.8088 28.3781 44.6621 28.4847 44.4933 28.5914C44.3244 28.6981 44.1511 28.8003 43.96 28.898C43.7644 28.9958 43.56 29.0803 43.3511 29.1514C43.1333 29.218 42.9111 29.2714 42.6845 29.3158C42.4534 29.3513 42.2223 29.3691 41.9867 29.3691H41.7778C41.6623 29.3691 41.6401 29.3691 41.5956 29.3691L41.2845 29.3291C41.0579 29.2847 40.8357 29.2314 40.6179 29.1647C40.4046 29.0847 40.2002 28.9914 40.0002 28.8847C39.8091 28.7869 39.6313 28.6803 39.4669 28.5781C39.2047 28.4047 38.9602 28.2092 38.7291 27.9959L38.4491 27.7381L38.338 27.627C37.7692 27.107 36.9114 27.0759 36.307 27.5515C35.8671 27.8892 35.7204 28.4936 35.9604 28.9958L36.027 29.1291C36.0848 29.258 36.1515 29.3825 36.2226 29.5025C36.6803 30.2669 37.3025 30.9201 38.0403 31.4223C38.3914 31.6668 38.7647 31.8756 39.1558 32.0445C39.5913 32.2356 40.0446 32.3867 40.5112 32.4889C40.7557 32.5334 40.9823 32.5778 41.2801 32.6045C41.4179 32.6045 41.5779 32.6312 41.649 32.6312H41.9956C42.4934 32.6223 42.9867 32.5734 43.4755 32.4756C43.9422 32.3734 44.3955 32.2223 44.831 32.0312C45.2221 31.8623 45.5954 31.6534 45.9465 31.409C46.4976 31.0357 46.9865 30.5735 47.3909 30.0446L47.6042 29.7469L47.782 29.4669C47.8486 29.3602 47.9064 29.2447 47.9553 29.1247L48.0042 29.0136C48.2708 28.3781 47.9686 27.6448 47.3331 27.3781C47.2887 27.3604 47.2442 27.3426 47.1998 27.3337C46.6265 27.1337 45.9865 27.2848 45.5599 27.7159Z" fill="#422B0D"/>
+<path d="M16.1854 22.7844C15.8743 23.1088 15.3543 23.1221 15.0299 22.8066C14.7365 22.5266 14.6965 22.0689 14.9321 21.74C15.4298 21.0289 16.0387 20.4023 16.7409 19.8868C18.603 18.4513 20.9362 17.7713 23.2783 17.9891C24.3805 18.1269 24.1672 19.5357 23.185 19.629C20.554 19.8379 18.083 20.9534 16.1854 22.7844Z" fill="#422B0D"/>
+<path d="M47.3253 22.7844C47.6364 23.1088 48.1564 23.1221 48.4808 22.8066C48.7741 22.5266 48.8141 22.0689 48.5785 21.74C48.0808 21.0289 47.4719 20.4023 46.7698 19.8868C44.9076 18.4513 42.5744 17.7713 40.2323 17.9891C39.1302 18.1269 39.3435 19.5357 40.3257 19.629C42.9566 19.8379 45.4276 20.9534 47.3253 22.7844Z" fill="#422B0D"/>
+<defs>
+<radialGradient id="paint0_radial_3041_20951" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.8204 31.5032) scale(25.3141 25.314)">
+<stop offset="0.5" stop-color="#FDE030"/>
+<stop offset="0.92" stop-color="#F7C02B"/>
+<stop offset="1" stop-color="#F4A223"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/examples/vibration-anomaly-detection/assets/img/info.svg b/examples/vibration-anomaly-detection/assets/img/info.svg
new file mode 100644
index 0000000..809cb3e
--- /dev/null
+++ b/examples/vibration-anomaly-detection/assets/img/info.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="9" viewBox="0 0 4 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.99791 2.49707C2.07457 2.49338 2.15071 2.51287 2.21569 2.55371C2.28068 2.59459 2.3313 2.65487 2.36119 2.72559C2.39107 2.7964 2.39876 2.87504 2.38268 2.9502L1.76744 6.85742L2.89244 5.95703C2.93018 5.92144 2.97542 5.89438 3.02428 5.87695C3.07309 5.85957 3.12494 5.85277 3.17662 5.85645C3.22842 5.86015 3.27913 5.87422 3.32506 5.89844C3.37095 5.92265 3.41093 5.95646 3.44322 5.99707C3.47554 6.03772 3.49933 6.08455 3.51256 6.13477C3.52573 6.18481 3.52837 6.23697 3.52037 6.28809C3.51229 6.33938 3.49372 6.38891 3.46569 6.43262C3.43766 6.47632 3.40053 6.51423 3.35729 6.54297L1.48229 8.04297C1.41639 8.09568 1.33426 8.12451 1.24987 8.125C1.19564 8.12557 1.14212 8.11398 1.09264 8.0918C1.04304 8.06954 0.998426 8.03712 0.962756 7.99609C0.927116 7.95509 0.900755 7.90667 0.885607 7.85449C0.870478 7.80232 0.866713 7.74707 0.874865 7.69336L1.48619 3.72656L0.736193 4.2998C0.696806 4.32934 0.652047 4.35106 0.604357 4.36328C0.556683 4.37548 0.50659 4.37805 0.457873 4.37109C0.409298 4.36409 0.36241 4.34727 0.320178 4.32227C0.277923 4.2972 0.24126 4.26392 0.211779 4.22461C0.182253 4.18523 0.160519 4.14046 0.148303 4.09277C0.136151 4.04522 0.133583 3.99586 0.14049 3.94727C0.147454 3.89851 0.163251 3.85097 0.188342 3.80859C0.213352 3.76638 0.246781 3.72968 0.285998 3.7002L1.786 2.5752C1.84677 2.52815 1.92114 2.50081 1.99791 2.49707ZM2.56237 0.25C2.87303 0.25 3.12487 0.50184 3.12487 0.8125C3.12487 1.12316 2.87303 1.375 2.56237 1.375C2.25183 1.37486 1.99987 1.12307 1.99987 0.8125C1.99987 0.501927 2.25183 0.250142 2.56237 0.25Z" fill="#2C353A"/>
+</svg>
diff --git a/examples/vibration-anomaly-detection/assets/img/no-data.png b/examples/vibration-anomaly-detection/assets/img/no-data.png
new file mode 100644
index 0000000..16cb547
Binary files /dev/null and b/examples/vibration-anomaly-detection/assets/img/no-data.png differ
diff --git a/examples/vibration-anomaly-detection/assets/img/reset.svg b/examples/vibration-anomaly-detection/assets/img/reset.svg
new file mode 100644
index 0000000..2ca50b3
--- /dev/null
+++ b/examples/vibration-anomaly-detection/assets/img/reset.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+  <path d="M18.75 9.50003C18.75 11.8207 17.8281 14.0463 16.1872 15.6872C14.5462 17.3282 12.3206 18.25 10 18.25C9.83424 18.25 9.67527 18.1842 9.55806 18.067C9.44085 17.9498 9.375 17.7908 9.375 17.625C9.375 17.4593 9.44085 17.3003 9.55806 17.1831C9.67527 17.0659 9.83424 17 10 17C11.715 16.9997 13.3781 16.4116 14.7121 15.3337C16.0461 14.2558 16.9704 12.7533 17.3309 11.0766C17.6914 9.39987 17.4664 7.65025 16.6933 6.11933C15.9203 4.58842 14.6459 3.36869 13.0825 2.66346C11.5192 1.95823 9.76141 1.81009 8.1021 2.24374C6.4428 2.67738 4.98224 3.66662 3.96386 5.04656C2.94549 6.42651 2.43081 8.11379 2.50563 9.82719C2.58044 11.5406 3.24022 13.1766 4.375 14.4625V11.375C4.375 11.2093 4.44085 11.0503 4.55806 10.9331C4.67527 10.8159 4.83424 10.75 5 10.75C5.16576 10.75 5.32473 10.8159 5.44194 10.9331C5.55915 11.0503 5.625 11.2093 5.625 11.375V15.75C5.625 15.9158 5.55915 16.0748 5.44194 16.192C5.32473 16.3092 5.16576 16.375 5 16.375H0.625C0.45924 16.375 0.300269 16.3092 0.183058 16.192C0.065848 16.0748 0 15.9158 0 15.75C0 15.5843 0.065848 15.4253 0.183058 15.3081C0.300269 15.1909 0.45924 15.125 0.625 15.125H3.3C2.39507 14.0477 1.76327 12.768 1.45819 11.3945C1.1531 10.021 1.18372 8.59423 1.54746 7.2351C1.9112 5.87596 2.59732 4.62458 3.54764 3.58707C4.49797 2.54955 5.68447 1.7565 7.00654 1.27517C8.32862 0.793831 9.74726 0.638403 11.1422 0.822063C12.5371 1.00572 13.8672 1.52305 15.0196 2.33019C16.172 3.13732 17.1128 4.21046 17.7622 5.45859C18.4116 6.70673 18.7505 8.09306 18.75 9.50003Z" fill="#2C353A"/>
+</svg>
\ No newline at end of file
diff --git a/examples/vibration-anomaly-detection/assets/index.html b/examples/vibration-anomaly-detection/assets/index.html
index 320c84f..173a4d7 100644
--- a/examples/vibration-anomaly-detection/assets/index.html
+++ b/examples/vibration-anomaly-detection/assets/index.html
@@ -9,28 +9,96 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fan Vibration Monitoring</title>
+    <title>Vibration Anomaly Detection</title>
     <link rel="icon" type="image/png" href="./img/favicon.png">
-    
+
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
     <div>
         <div class="header">
-            <h1 class="arduino-text">Fan Vibration Monitoring</h1>
+            <h1 class="arduino-text">Vibration Anomaly Detection</h1>
             <img class="arduino-logo" src="./img/RGB-Arduino-Logo_Color Inline Loop.svg" alt="Arduino Logo">
         </div>
 
+        <div class="main-content">
+            <div class="controls-section-left">
+                <div style="display: flex; align-items: center; gap: 8px; position: relative;">
+                    <div class="box-title" style="margin-bottom: 0;">Accelerometer Data (m/s<sup>2</sup>)</div>
+                    <img src="./img/info.svg" alt="Info" class="info-btn accelerometer-data"/>
+                    <div class="popover">Live visualization of raw accelerometer data (X, Y, Z axes) from the board's Movement module. Horizontal axis represents time; vertical axis shows acceleration in m/s<sup>2</sup></div>
+                </div>
+                <div id="accelerometer-data-display">
+                    <canvas id="plot"></canvas>
+                    <div class="legend">
+                        <div class="legend-item">
+                            <div class="legend-color" style="background-color: #0068C9;"></div>
+                            <span>X</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color" style="background-color: #FF9900;"></div>
+                            <span>Y</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color" style="background-color: #FF2B2B;"></div>
+                            <span>Z</span>
+                        </div>
+                    </div>
+                </div>
+                <div id="no-accelerometer-data" class="no-data-placeholder">
+                    <img src="./img/no-data.png" alt="No data">
+                    <p>No data</p>
+                </div>
+            </div>
+
+            <div class="right-column">
+                <div class="container container-right">
+                    <div class="controls-section">
+                        <div class="control-group">
+                            <div class="control-confidence">
+                                <div style="display: flex; align-items: center; gap: 8px; position: relative;">
+                                    <label id="confidence-label" for="confidenceSlider" class="box-title" style="margin-bottom: 0;">Set anomaly score</label>
+                                    <img src="./img/info.svg" alt="Info" class="info-btn confidence"/>
+                                    <div class="popover">It quantifies how far the current vibration is from the model's 'normal' clusters. <br />
+
+                                        Scores above your threshold are flagged as an anomaly.</div>
+                                </div>
+                                <button id="confidenceResetButton" class="btn-tertiary">
+                                    <input type="number" id="confidenceInput" class="confidence-input" min="1" max="10" step="1" value="5">
+                                    <img src="img/reset.svg" alt="Reset" class="reset-icon">
+                                </button>
+                            </div>
+                            <div class="slider-box">
+                                <span class="confidence-limits">1</span>
+                                <div class="slider-container">
+                                    <div class="slider-progress" id="sliderProgress"></div>
+                                    <div class="confidence-value-display" id="confidenceValueDisplay">5</div>
+                                    <input type="range" id="confidenceSlider" min="1" max="10" step="1" value="5">
+                                </div>
+                                <span class="confidence-limits">10</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="container container-right">
+                    <div id="feedback-section" class="feedback-section">
+                        <h2 class="recent-scans-title" style="margin: 0;">Feedback</h2>
+                        <div id="feedback-content-wrapper"></div>
+                    </div>
+                </div>
 
-        <div class="container">
-            <!-- LED Button with integrated text -->
-            <div class="led-container">
-				<img src="img/fan.png" height="300px" />
-                <div id="fan-led" class="led-off">
-                    <span id="fan-text">No anomaly</span>
+                <div class="container container-right">
+                    <div class="recent-detections-section">
+                        <div class="recent-scans-title-container">
+                            <h2 class="recent-scans-title">Recent Anomalies</h2>
+                        </div>
+                        <ul id="recentClassifications"></ul>
+                    </div>
                 </div>
             </div>
         </div>
+        <div id="error-container" class="error-message" style="display: none;"></div>
     </div>
 
     <script src="libs/socket.io.min.js"></script>
diff --git a/examples/vibration-anomaly-detection/assets/style.css b/examples/vibration-anomaly-detection/assets/style.css
index 9d37cdc..a4c41c9 100644
--- a/examples/vibration-anomaly-detection/assets/style.css
+++ b/examples/vibration-anomaly-detection/assets/style.css
@@ -4,20 +4,22 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-@import url("fonts/roboto-mono.css");
+@import url("fonts/fonts.css");
 
 /*
  * This CSS is used to center the various elements on the screen
  */
 * {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    background-color: #ECF1F1;
-    color: #2C353A;
+    background-color: #DAE3E3;
+    line-height: 1.6;
+    color: #343a40;
     padding: 24px 40px;
 }
 
@@ -25,18 +27,19 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 32px;
+    margin-bottom: 24px;
+    padding: 12px 0;
 }
 
 .arduino-text {
     color: #008184;
     font-family: "Roboto Mono", monospace;
     font-size: 20px;
-    font-weight: 600;
+    font-weight: 700;
     margin: 0;
     font-style: normal;
     line-height: 170%;
-    letter-spacing: 0.28px;
+    letter-spacing: 2.4px;
 }
 
 .arduino-logo {
@@ -44,84 +47,430 @@ body {
     width: auto;
 }
 
-.container {
-    text-align: center;
+.main-content {
+    display: flex;
+    gap: 30px;
+    align-items: stretch;
 }
 
 /*
- * LED Button styling
+ * Styles for specific components required by Anomaly Detection
  */
-.led-container {
+
+.legend {
     display: flex;
-    justify-content: center;
-    margin-bottom: 32px;
-    padding-top: 40px;
+    gap: 16px;
+    margin-top: 8px;
+    font-size: 14px;
 }
 
-#fan-led {
-    width: 128px;
-    height: 128px;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.3s ease;
+.legend-item {
     display: flex;
     align-items: center;
-    justify-content: center;
-    font-family: inherit;
-    font-weight: 600;
-    font-size: 14px;
-    text-align: center;
-    line-height: 1.2;
-    outline: none;
-    position: relative;
-    border: 2px solid #C9D2D2;
+    gap: 6px;
 }
 
-#fan-led.led-off {
-    background: #008184;
-    color: #ffffff;
-    box-shadow: 0 0 20px #008184, 0 0 40px #008184, 0 0 60px #008184;
-    border-color: #008184;
+.legend-color {
+    width: 12px;
+    height: 4px;
+    border-radius: 1px;
 }
 
-#fan-led.led-on {
-    background: #e00d0d;
-    color: #ffffff;
-    box-shadow: 0 0 20px #e00d0d, 0 0 40px #e00d0d, 0 0 60px #e00d0d;
-    border-color: #e00d0d;
+.controls-section-right {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
 }
 
-#fan-led:hover {
-    transform: scale(1.05);
+.box-title {
+    color: #2C353A;
+    font-family: "Roboto Mono";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 170%;
+    letter-spacing: 1.2px;
+    margin-bottom: 16px;
 }
 
-#fan-led:active {
-    transform: scale(0.95);
+.controls-section-left {
+    background: #ECF1F1;
+    padding: 16px;
+    border-radius: 8px;
+    min-width: 750px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
-.instruction-text {
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 160%;
-    letter-spacing: 0.12px;
+.right-column {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    width: 100%;
+    max-width: 550px;
+}
+
+.right-column .container:last-child {
+    flex-grow: 1;
+}
+
+.container-right {
+    background: #ECF1F1;
+    padding: 16px;
+    border-radius: 8px;
+}
+
+.error-message {
+    margin-top: 20px;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.recent-scans-title-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: space-between;
+}
+
+.recent-scans-title {
     color: #2C353A;
+    font-family: "Roboto Mono", monospace;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 170%;
+    letter-spacing: 1.2px;
+    margin: 0;
+}
+
+#recentClassifications {
+    list-style-type: none;
+    padding: 0;
+    flex: 1;
 }
 
 /*
  * Responsive design
  */
 @media (max-width: 768px) {
-    body {
-        padding: 12px 20px;
+    .main-content {
+        flex-direction: column;
+    }
+
+    .right-column {
+        max-width: 100%;
     }
 
     .arduino-text {
         font-size: 14px;
     }
 
+    .container {
+        padding: 15px;
+    }
+
+    .controls-section-left {
+        min-width: 330px;
+    }
+
     .arduino-logo {
-        height: 20px;
+        height: 16px;
         width: auto;
     }
-}
\ No newline at end of file
+
+}
+
+@media (max-width: 1024px) and (min-width: 769px) {
+    .controls-section-left {
+        min-width: 490px;
+    }
+}
+
+@media (max-width: 480px) {
+    .controls-section-left {
+        min-width: 170px;
+    }
+}
+
+.info-btn {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: #C9D2D2;
+    padding: 2px;
+    transition: background 0.2s;
+    position: relative;
+}
+
+.popover {
+    position: absolute;
+    left: 5%;
+    top: 70%;
+    margin-left: 8px;
+    display: none;
+    background: #fff;
+    padding: 16px 24px;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    z-index: 10;
+    width: 300px;
+    color: #2C353A;
+    font-weight: 100;
+    font-family: "Open Sans";
+    font-size: 12px;
+    line-height: 170%;
+    letter-spacing: 0.12px;
+}
+
+.popover.active {
+    display: block;
+}
+
+.no-recent-anomalies {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: #5D6A6B;
+    gap: 8px;
+    margin: auto;
+}
+
+.no-recent-anomalies p {
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%; /* 19.2px */
+    letter-spacing: 0.12px;
+}
+
+.feedback-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.feedback-text {
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%; /* 19.2px */
+    letter-spacing: 0.12px;
+}
+
+.no-data-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: #5D6A6B;
+    gap: 8px;
+    margin: auto;
+}
+
+.no-data-placeholder p {
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%; /* 19.2px */
+    letter-spacing: 0.12px;
+}
+
+.control-group {
+    position: relative;
+}
+
+.slider-box {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.control-confidence {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+}
+
+#confidenceSlider {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: #DAE3E3;
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+    position: relative;
+    margin: 20px 0 10px 0;
+}
+
+#confidenceSlider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #008184;
+    cursor: pointer;
+    position: relative;
+    bottom: 3px;
+    z-index: 2;
+}
+
+#confidenceSlider::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: #DAE3E3;
+}
+
+#confidenceSlider::-moz-range-track {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: #DAE3E3;
+    border: none;
+}
+
+.slider-container {
+    position: relative;
+    width: 100%;
+}
+
+.slider-progress {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    height: 6px;
+    background: #008184;
+    border-radius: 3px;
+    pointer-events: none;
+    z-index: 1;
+    transition: width 0.1s ease;
+}
+
+.confidence-value-display {
+    position: absolute;
+    top: -3px;
+    transform: translateX(-50%);
+    color: #008184;
+    padding: 2px 6px;
+    pointer-events: none;
+    z-index: 3;
+    white-space: nowrap;
+    transition: left 0.1s ease;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%;
+    letter-spacing: 0.12px;
+}
+
+.confidence-limits {
+    color: #2C353A;
+    font-family: "Open Sans";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%;
+    letter-spacing: 0.12px;
+    margin-top: 10px;
+}
+
+.btn-tertiary {
+    border-radius: 6px;
+    border: 1px solid #C9D2D2;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 4px 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 12px;
+    min-width: 50px;
+    height: 36px;
+}
+
+.confidence-input {
+    border: none;
+    background: transparent;
+    font-size: 12px;
+    font-weight: inherit;
+    color: inherit;
+    text-align: center;
+    width: 40px;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    cursor: text;
+}
+
+.confidence-input:focus {
+    background: rgba(0, 129, 132, 0.1);
+    border-radius: 2px;
+}
+
+.reset-icon {
+    width: 18px;
+    height: 18px;
+    opacity: 0.7;
+    transition: opacity 0.3s ease;
+    cursor: pointer;
+}
+
+.reset-icon svg path {
+    fill: black;
+}
+
+.btn-tertiary:hover .reset-icon {
+    opacity: 1;
+}
+
+.anomaly-list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #DAE3E3;
+}
+.anomaly-score {
+    font-weight: normal;
+    color: #2C353A;
+    font-size: 12px;
+}
+.anomaly-text {
+    color: #2C353A;
+    font-size: 12px;
+}
+.anomaly-time {
+    color: #2C353A;
+    font-size: 12px;
+}
+#accelerometer-data-display {
+    margin-top: 20px;
+}
+
+#plot {
+    width: 100%;
+    height: 250px;
+}
diff --git a/examples/vibration-anomaly-detection/python/main.py b/examples/vibration-anomaly-detection/python/main.py
index f79b877..bf6a6c1 100644
--- a/examples/vibration-anomaly-detection/python/main.py
+++ b/examples/vibration-anomaly-detection/python/main.py
@@ -2,6 +2,11 @@
 #
 # SPDX-License-Identifier: MPL-2.0
 
+import json
+import time
+import math
+import threading
+from datetime import datetime
 from arduino.app_utils import *
 from arduino.app_bricks.web_ui import WebUI
 from arduino.app_bricks.vibration_anomaly_detection import VibrationAnomalyDetection
@@ -10,8 +15,16 @@
 
 ui = WebUI()
 
+# --- Configuration Constant ---
+USE_FAKE_DATA = False # Set to True to use simulated data, False to use real sensor data via Bridge RPC
+# ------------------------------
+
 vibration_detection = VibrationAnomalyDetection(anomaly_detection_threshold=1.0)
 
+def on_override_th(value: float):
+    logger.info(f"Setting new anomaly threshold: {value}")
+    vibration_detection.anomaly_detection_threshold = value
+
 def get_fan_status(anomaly_detected: bool):
     return {
         "anomaly": anomaly_detected,
@@ -22,6 +35,11 @@ def get_fan_status(anomaly_detected: bool):
 # Register action to take after successful detection
 def on_detected_anomaly(anomaly_score: float, classification: dict):
     print(f"Detected anomaly. Score: {anomaly_score}")
+    anomaly_payload = {
+        "score": anomaly_score,
+        "timestamp": datetime.now().isoformat()
+    }
+    ui.send_message('anomaly_detected', json.dumps(anomaly_payload))
     ui.send_message('fan_status_update', get_fan_status(True))
 
 vibration_detection.on_anomaly(on_detected_anomaly)
@@ -34,6 +52,9 @@ def record_sensor_movement(x: float, y: float, z: float):
         y_ms2 = y * 9.81
         z_ms2 = z * 9.81
 
+        # Forward raw data to UI for plotting
+        ui.send_message('sample', {'x': x_ms2, 'y': y_ms2, 'z': z_ms2})
+
         # Forward samples to the vibration_detection brick
         vibration_detection.accumulate_samples((x_ms2, y_ms2, z_ms2))
 
@@ -41,13 +62,37 @@ def record_sensor_movement(x: float, y: float, z: float):
         logger.exception(f"record_sensor_movement: Error: {e}")
         print(f"record_sensor_movement: Error: {e}")
 
-# Register the Bridge RPC provider so the sketch can call into Python
-try:
-    logger.debug("Registering 'record_sensor_movement' Bridge provider")
-    Bridge.provide("record_sensor_movement", record_sensor_movement)
-    logger.debug("'record_sensor_movement' registered successfully")
-except RuntimeError:
-    logger.debug("'record_sensor_movement' already registered")
+if USE_FAKE_DATA:
+    # Faking sensor data for UI testing
+    def generate_fake_data():
+        logger.info("Starting fake data generation")
+        start_time = time.time()
+        while True:
+            current_time = time.time() - start_time
+            # Generate wave patterns for x, y, and z
+            x = 0.5 * math.sin(2 * math.pi * 0.5 * current_time)  # 0.5 Hz frequency
+            y = 0.3 * math.sin(2 * math.pi * 1.0 * current_time + (math.pi / 2))  # 1.0 Hz frequency, 90-degree phase shift
+            z = 0.8 * math.cos(2 * math.pi * 0.2 * current_time)  # 0.2 Hz frequency, using cosine
+
+            # Introduce a sudden anomaly occasionally
+            if int(current_time) % 20 == 0 and int(current_time) != 0:
+                x += 0.5 * math.sin(2 * math.pi * 10 * current_time) # high frequency noise
+                y += 0.5 * math.cos(2 * math.pi * 10 * current_time)
+
+            record_sensor_movement(x, y, z)
+            time.sleep(0.1)  # 10 Hz data rate
+
+    fake_data_thread = threading.Thread(target=generate_fake_data, daemon=True)
+    fake_data_thread.start()
+else:
+    # Register the Bridge RPC provider so the sketch can call into Python
+    try:
+        logger.debug("Registering 'record_sensor_movement' Bridge provider")
+        Bridge.provide("record_sensor_movement", record_sensor_movement)
+        logger.debug("'record_sensor_movement' registered successfully")
+    except RuntimeError:
+        logger.debug("'record_sensor_movement' already registered")
+
 
 # Let the App runtime manage bricks and run the web server
 App.run()
diff --git a/examples/vibration-anomaly-detection/sketch/sketch.ino b/examples/vibration-anomaly-detection/sketch/sketch.ino
index 47d24b5..a65cc2c 100644
--- a/examples/vibration-anomaly-detection/sketch/sketch.ino
+++ b/examples/vibration-anomaly-detection/sketch/sketch.ino
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 
 #include <Arduino_RouterBridge.h>
-#include <Modulino.h>
+#include <Arduino_Modulino.h>
 
 // Create a ModulinoMovement object
 ModulinoMovement movement;
diff --git a/examples/vibration-anomaly-detection/sketch/sketch.yaml b/examples/vibration-anomaly-detection/sketch/sketch.yaml
index fc88d11..a3d6ef3 100644
--- a/examples/vibration-anomaly-detection/sketch/sketch.yaml
+++ b/examples/vibration-anomaly-detection/sketch/sketch.yaml
@@ -8,7 +8,7 @@ profiles:
       - DebugLog (0.8.4)
       - ArxContainer (0.7.0)
       - ArxTypeTraits (0.3.1)
-      - Modulino (0.5.0)
+      - Arduino_Modulino (0.6.1)
       - Arduino_HS300x (1.0.0)
       - Arduino_LPS22HB (1.0.2)
       - Arduino_LSM6DSOX (1.1.2)