diff --git a/static/icon-map.js b/static/icon-map.js
index da5cd34..f5b7553 100644
--- a/static/icon-map.js
+++ b/static/icon-map.js
@@ -26,5 +26,13 @@ const iconMap = {
         'good': { src: 'assets/timeturner_delta_green.png', tooltip: 'Clock delta is 0ms.' },
         'average': { src: 'assets/timeturner_delta_orange.png', tooltip: 'Clock delta is less than 10ms.' },
         'bad': { src: 'assets/timeturner_delta_red.png', tooltip: 'Clock delta is 10ms or greater.' }
+    },
+    frameRate: {
+        '23.98': { src: 'assets/timeturner_fps_2398.png', tooltip: '23.98 frames per second' },
+        '24.00': { src: 'assets/timeturner_fps_2400.png', tooltip: '24.00 frames per second' },
+        '25.00': { src: 'assets/timeturner_fps_2500.png', tooltip: '25.00 frames per second' },
+        '29.97': { src: 'assets/timeturner_fps_2997.png', tooltip: '29.97 frames per second' },
+        '30.00': { src: 'assets/timeturner_fps_3000.png', tooltip: '30.00 frames per second' },
+        'default': { src: 'assets/timeturner_fps_unknown.png', tooltip: 'Unknown frame rate' }
     }
 };
diff --git a/static/index.html b/static/index.html
index ec358d2..3a5f91f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -25,7 +25,7 @@
                 <h2>LTC Status</h2>
                 <p id="ltc-timecode">--:--:--:--</p>
                 <p id="ltc-status">--</p>
-                <p id="frame-rate">-- fps</p>
+                <p><span id="frame-rate">-- fps</span></p>
                 <p>Lock Ratio: <span id="lock-ratio">--</span>%</p>
             </div>
 
diff --git a/static/script.js b/static/script.js
index 3d01ea6..3c63cb7 100644
--- a/static/script.js
+++ b/static/script.js
@@ -85,7 +85,11 @@ document.addEventListener('DOMContentLoaded', () => {
         statusElements.ltcStatus.innerHTML = `<img src="${ltcIconInfo.src}" class="status-icon" alt="" title="${ltcIconInfo.tooltip}"><span>${ltcStatus}</span>`;
         statusElements.ltcStatus.className = ltcStatus.toLowerCase();
         statusElements.ltcTimecode.textContent = data.ltc_timecode;
-        statusElements.frameRate.textContent = data.frame_rate;
+
+        const frameRate = data.frame_rate || 'unknown';
+        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);
         statusElements.systemClock.textContent = data.system_clock;
         statusElements.systemDate.textContent = data.system_date;
diff --git a/static/style.css b/static/style.css
index 9745fd4..994454b 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 {
+#ltc-status, #ntp-active, #sync-status, #jitter-status, #delta-status, #frame-rate {
     display: inline-flex;
     align-items: center;
     gap: 0.5em;