diff --git a/apps/ex_nvr_web/assets/js/app.js b/apps/ex_nvr_web/assets/js/app.js
index 1e4a7b51..d6246614 100644
--- a/apps/ex_nvr_web/assets/js/app.js
+++ b/apps/ex_nvr_web/assets/js/app.js
@@ -116,6 +116,8 @@ function initDarkMode() {
 
 startStreaming = (src, poster_url) => {
     var video = document.getElementById("live-video")
+    var infoBox = document.getElementById("stream-info");
+    
     if (video != null && Hls.isSupported()) {
         if (window.hls) {
             window.hls.destroy()
@@ -130,6 +132,31 @@ startStreaming = (src, poster_url) => {
         })
         window.hls.loadSource(src)
         window.hls.attachMedia(video)
+
+        window.hls.on(Hls.Events.LEVEL_LOADED, (event, data) => {
+            const { level, stats } = data;
+            const levelInfo = window.hls.levels[level];
+
+            infoBox.innerHTML = `
+                <p class="font-bold text-xs">Bandwith Estimate: ${convertBitrate(window.hls.bandwidthEstimate)}</p>
+                <p class="font-bold text-xs">Bitrate: ${convertBitrate(levelInfo.bitrate)}</p>
+                <p class="font-bold text-xs">Avg.Bitrate: ${convertBitrate(levelInfo.averageBitrate)}</p>
+                <p class="font-bold text-xs">Resolution: ${levelInfo.width}x${levelInfo.height}</p>
+                <p class="font-bold text-xs">Codecs: ${levelInfo.attrs.CODECS}</p>
+                `;
+            infoBox.innerHTML = infoHtml;
+        });
+    }
+}
+
+function convertBitrate(bitRate) {
+    const mbpsFactor = 1000 * 1000
+    
+    let bitRateMbps = (bitRate / mbpsFactor)
+    if (bitRateMbps < 1) {
+        return `${(bitRateMbps * 1000).toFixed(2)} Kbps`
+    } else {
+        return `${bitRateMbps.toFixed(2)} Mbps`
     }
 }
 
diff --git a/apps/ex_nvr_web/lib/ex_nvr_web/live/dashboard_live.ex b/apps/ex_nvr_web/lib/ex_nvr_web/live/dashboard_live.ex
index 859ca757..663c1a0e 100644
--- a/apps/ex_nvr_web/lib/ex_nvr_web/live/dashboard_live.ex
+++ b/apps/ex_nvr_web/lib/ex_nvr_web/live/dashboard_live.ex
@@ -94,6 +94,18 @@ defmodule ExNVRWeb.DashboardLive do
             >
               <.icon name="hero-camera" />
             </div>
+            <button
+              id="toggle-info"
+              class="absolute top-10 right-1 rounded-sm bg-zinc-900 py-1 px-2 text-sm text-white dark:bg-gray-700 dark:bg-opacity-80 hover:cursor-pointer"
+              phx-click={JS.toggle(to: "#stream-info")}
+            >
+              <.icon name="hero-information-circle" />
+            </button>
+            <div
+              id="stream-info"
+              class="absolute top-1 left-1 z-50 text-white bg-black bg-opacity-50 px-2 py-1 hidden"
+            >
+            </div>
           </div>
           <div
             :if={not @live_view_enabled?}