diff --git a/htdocs/index.html b/htdocs/index.html
index 6c076574..38a59bf3 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -43,9 +43,6 @@
 <div id="webrx-page-container">
     ${header}
     <div class="openwebrx-waterfall-container">
-        <div id="openwebrx-spectrum-container">
-            <canvas id="openwebrx-spectrum-canvas" width="0" height="0"></canvas>
-        </div>
         <div id="openwebrx-frequency-container">
             <div id="openwebrx-bookmarks-container" style="z-index:2;">
                 <div class="openwebrx-button openwebrx-round-button openwebrx-tune-button" style="position:absolute;top:30%;left:0;z-index:3;" title="Tune down" onclick="tuneBySteps(-1);">
@@ -58,6 +55,9 @@
             <div id="openwebrx-scale-container" style="z-index:1;">
                 <canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
             </div>
+            <div id="openwebrx-spectrum-container">
+                <canvas id="openwebrx-spectrum-canvas" width="0" height="0"></canvas>
+            </div>
         </div>
         <div id="webrx-canvas-background">
             <div id="webrx-canvas-container">
diff --git a/htdocs/lib/Spectrum.js b/htdocs/lib/Spectrum.js
index 421b3c26..f1113634 100644
--- a/htdocs/lib/Spectrum.js
+++ b/htdocs/lib/Spectrum.js
@@ -1,9 +1,27 @@
-function Spectrum(id) {
-    this.el  = document.getElementById(id);
-    this.ctx = this.el.getContext("2d");
+function Spectrum(el) {
+    this.el   = el;
+    this.data = [];
+    this.ctx  = this.el.getContext("2d");
+    this.min  = 0;
+    this.max  = 0;
+
+    this.ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
 }
 
-Spectrum.prototype.draw = function(data) {
+Spectrum.prototype.update = function(data) {
+    for(var j=0; j<data.length; ++j) {
+        this.data[j] = j>=this.data.length || data[j]>this.data[j]?
+            data[j] : this.data[j] + (data[j] - this.data[j]) / 10.0;
+    }
+
+//    this.min = Math.min(...data);
+    this.min = waterfall_min_level;
+    this.max = Math.max(...data);
+};
+
+Spectrum.prototype.draw = function() {
+    if (this.el.clientHeight == 0) return;
+
     var vis_freq    = get_visible_freq_range();
     var vis_center  = vis_freq.center;
     var vis_start   = 0.5 - (center_freq - vis_freq.start) / bandwidth;
@@ -12,30 +30,25 @@ Spectrum.prototype.draw = function(data) {
     var data_start  = Math.round(fft_size * vis_start);
     var data_end    = Math.round(fft_size * vis_end);
     var data_width  = data_end - data_start;
-    var data_height = Math.abs(waterfall_min_level - waterfall_max_level);
-    var spec_width  = window.screen.width;
-    var spec_height = 100;
+    var data_height = Math.abs(this.max - this.min);
+    var spec_width  = this.el.clientWidth;
+    var spec_height = this.el.clientHeight;
 
-    ctx.clearRect(0, 0, spec_width,spec_height);
+    this.ctx.clearRect(0, 0, spec_width, spec_height);
 
-    if(spec_width > data_width)
-    {
+    if(spec_width < data_width) {
         var x_ratio = data_width / spec_width;
         var y_ratio = spec_height / data_height;
-        for(var x=0; x<spec_width; x++)
-        {
-            var y = data[data_start + j * x_ratio] * y_ratio;
-            ctx.drawRect(x, 0, x+1, y);
+        for(var x=0; x<spec_width; x++) {
+            var y = (this.data[data_start + ((x * x_ratio) | 0)] - this.min) * y_ratio;
+            this.ctx.fillRect(x, spec_height, 1, -y);
         }
-    }
-    else
-    {
+    } else {
         var x_ratio = spec_width / data_width;
         var y_ratio = spec_height / data_height;
-        for(var x=0; x<data_width; x++)
-        {
-            var y = data[data_start + j] * y_ratio;
-            ctx.drawRect(x * x_ratio, 0, (x+1) * x_ratio, y);
+        for(var x=0; x<data_width; x++) {
+            var y = (this.data[data_start + x] - this.min) * y_ratio;
+            this.ctx.fillRect(x * x_ratio, spec_height, x_ratio, -y);
         }
     }
 };
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 5dff4374..231697a3 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -1430,6 +1430,8 @@ function waterfall_add(data) {
     if (!waterfall_setup_done) return;
     var w = fft_size;
 
+    if (spectrum != null) spectrum.update(data);
+
     if (waterfall_measure_minmax_now) {
         var levels = waterfall_measure_minmax_do(data);
         waterfall_measure_minmax_now = false;
@@ -1514,6 +1516,7 @@ function openwebrx_init() {
     open_websocket();
     secondary_demod_init();
     digimodes_init();
+    spectrum_init();
     initPanels();
     $('#openwebrx-panel-receiver').demodulatorPanel();
     window.addEventListener("resize", openwebrx_resize);
@@ -1652,6 +1655,16 @@ function initPanels() {
     });
 }
 
+function spectrum_init() {
+    var canvas = document.getElementById('openwebrx-spectrum-canvas');
+
+    canvas.width  = window.innerWidth;
+    canvas.height = 50;
+
+    spectrum = new Spectrum(canvas);
+    setInterval(function() { spectrum.draw(); }, 100);
+}
+
 /*
   _____  _       _                     _
  |  __ \(_)     (_)                   | |
diff --git a/owrx/controllers/assets.py b/owrx/controllers/assets.py
index 514e7479..65a47cbf 100644
--- a/owrx/controllers/assets.py
+++ b/owrx/controllers/assets.py
@@ -137,6 +137,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
             "lib/Js8Threads.js",
             "lib/Modes.js",
             "lib/MetaPanel.js",
+            "lib/Spectrum.js",
         ],
         "map.js": [
             "lib/jquery-3.2.1.min.js",