diff --git a/static/icon-map.js b/static/icon-map.js
index 87f899b..7edfd6d 100644
--- a/static/icon-map.js
+++ b/static/icon-map.js
@@ -34,5 +34,10 @@ const iconMap = {
         '29.97': { src: 'assets/timeturner_2997.png', tooltip: '29.97 frames per second' },
         '30.00': { src: 'assets/timeturner_30.png', tooltip: '30.00 frames per second' },
         'default': { src: 'assets/timeturner_25.png', tooltip: 'Unknown frame rate' }
+    },
+    lockRatio: {
+        'good': { src: 'assets/timeturner_lockratio_green.png', tooltip: 'Lock ratio is 100%.' },
+        'average': { src: 'assets/timeturner_lockratio_orange.png', tooltip: 'Lock ratio is 90% or higher.' },
+        'bad': { src: 'assets/timeturner_lockratio_red.png', tooltip: 'Lock ratio is below 90%.' }
     }
 };
diff --git a/static/index.html b/static/index.html
index 3a5f91f..4362a86 100644
--- a/static/index.html
+++ b/static/index.html
@@ -26,7 +26,7 @@
                 <p id="ltc-timecode">--:--:--:--</p>
                 <p id="ltc-status">--</p>
                 <p><span id="frame-rate">-- fps</span></p>
-                <p>Lock Ratio: <span id="lock-ratio">--</span>%</p>
+                <p><span id="lock-ratio">Lock Ratio: --%</span></p>
             </div>
 
             <!-- System Clock & Sync -->
diff --git a/static/script.js b/static/script.js
index 3c63cb7..f0e07ad 100644
--- a/static/script.js
+++ b/static/script.js
@@ -90,7 +90,18 @@ document.addEventListener('DOMContentLoaded', () => {
         const frameRateIconInfo = iconMap.frameRate[frameRate] || iconMap.frameRate.default;
         statusElements.frameRate.innerHTML = `<img src="${frameRateIconInfo.src}" class="status-icon" alt="" title="${frameRateIconInfo.tooltip}"><span>${frameRate} fps</span>`;
 
-        statusElements.lockRatio.textContent = data.lock_ratio.toFixed(2);
+        const lockRatio = data.lock_ratio;
+        let lockRatioCategory;
+        if (lockRatio === 100) {
+            lockRatioCategory = 'good';
+        } else if (lockRatio >= 90) {
+            lockRatioCategory = 'average';
+        } else {
+            lockRatioCategory = 'bad';
+        }
+        const lockRatioIconInfo = iconMap.lockRatio[lockRatioCategory];
+        const lockRatioText = `Lock Ratio: ${lockRatio.toFixed(2)}%`;
+        statusElements.lockRatio.innerHTML = `<img src="${lockRatioIconInfo.src}" class="status-icon" alt="" title="${lockRatioIconInfo.tooltip}"><span>${lockRatioText}</span>`;
         statusElements.systemClock.textContent = data.system_clock;
         statusElements.systemDate.textContent = data.system_date;
 
diff --git a/static/style.css b/static/style.css
index 994454b..ddfdf8f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -99,7 +99,7 @@ button:hover {
     color: #555;
 }
 
-#ltc-status, #ntp-active, #sync-status, #jitter-status, #delta-status, #frame-rate {
+#ltc-status, #ntp-active, #sync-status, #jitter-status, #delta-status, #frame-rate, #lock-ratio {
     display: inline-flex;
     align-items: center;
     gap: 0.5em;