diff --git a/common.js b/common.js
index 8543f23..3eca47f 100644
--- a/common.js
+++ b/common.js
@@ -115,6 +115,13 @@ function update_position(position_index) {
     cursor.setLatLng(latlng);
     // Update info
     display_stats(paragliding_stats[position_index]);
+    // Update speed
+    gauge_data[0].value = paragliding_stats[position_index].speed;
+    Plotly.update('speed_gauge', gauge_data[0]);
+    // Update vario
+    vario_data[0].value = paragliding_stats[position_index].vertical_speed;
+    vario_data[0].delta.reference = paragliding_stats[(position_index==0 ? 0 : position_index-1)].vertical_speed;
+    Plotly.update('vario', vario_data[0]);
     // Update elevation
     let updt = {color: 'red'};
     elevation_graph.layout.shapes[0].x0=paragliding_stats[position_index].distance_total;
@@ -204,6 +211,57 @@ function update_globals_infos(flight) {
 /* =========================================================================================================== */
 /* ======================================== User Interface parameters ======================================== */
 /* =========================================================================================================== */
+// Speed gauge
+let gauge_data = [
+    {
+        domain: { x: [0, 1], y: [0, 1] },
+        value: 0,
+        title: { text: "Speed km/h", font: {size: 14} },
+        type: "indicator",
+        mode: "gauge+number",
+        gauge: {
+              axis: { range: [null, 60, 10] }
+        }
+    }
+];
+let gauge_layout = { width: 150, height: 150,
+                        margin: {
+                            autoexpand: true,
+                            b: 0,
+                            l: 25,
+                            pad: 500,
+                            r: 25,
+                            t: 0 
+                        },
+                        paper_bgcolor:"rgba(0, 0, 0, 0)",
+                        plot_bgcolor:"rgba(0, 0, 0, 0)",
+                    };
+// Vario digital display
+let vario_data = [
+    {
+        title: { text: "Vario", font: { size: 14 } },
+        type: "indicator",
+        mode: "number+delta",
+        value: 300,
+        number: { suffix: " m/s", font: { size: 20 } },
+        delta: { position: "down", reference: 320, font: { size: 20 } },
+        domain: { x: [0, 1], y: [0, 1] }
+    }
+];
+let vario_layout = {
+    width: 120,
+    height: 120,
+    margin: { 
+                autoexpand: 0,
+                b: 0,
+                l: 25,
+                pad: 500,
+                r: 25,
+                t: 0 
+            },
+    paper_bgcolor:"rgba(0, 0, 0, 0)",
+    plot_bgcolor:"rgba(0, 0, 0, 0)",
+};
 // Create map layers
 var GeoportailFrance_plan = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={format}&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', {
     attribution: '<a target="_blank" href="https://www.geoportail.gouv.fr/">Geoportail France</a>',
@@ -298,6 +356,8 @@ function refresh_map(flight) {
     document.getElementById('title').style.visibility = 'unset';
     document.getElementById('elevation').style.visibility = 'unset';
     document.getElementById('point_info').style.visibility = 'unset';
+    document.getElementById('speed_gauge').style.visibility = 'hidden';
+    document.getElementById('vario').style.visibility = 'hidden';
     document.getElementById('zoom_control').style.visibility = 'unset';
     document.getElementById('layer_control').style.visibility = 'unset';
     document.getElementById('control_buttons').style.visibility = 'unset';
@@ -305,7 +365,10 @@ function refresh_map(flight) {
     document.getElementById('play_stop_button').style.visibility = 'unset';
     document.getElementById('speed_button').style.visibility = 'unset';
     
-    
+    // Uncheck hidden objects
+    document.getElementById('chkbx_speed_gauge').checked = false;
+    document.getElementById('chkbx_vario').checked = false;
+
     // Create events for key press
     window.addEventListener("keypress", (k) => key_commands(k));
     
@@ -429,4 +492,8 @@ function refresh_map(flight) {
     elevation_graph.on('plotly_hover', function(data){
         update_position(data.points[0].pointIndex);
         });
+        // Create speed graph
+    Plotly.newPlot('speed_gauge', gauge_data, gauge_layout, { displayModeBar: false });
+    // Create Vario
+    Plotly.newPlot('vario', vario_data, vario_layout, { displayModeBar: false });
 }
\ No newline at end of file
diff --git a/index.css b/index.css
index 85b94e3..56165a8 100644
--- a/index.css
+++ b/index.css
@@ -140,6 +140,21 @@
     visibility: hidden;
 }
 
+#speed_gauge {
+    position: absolute;
+    bottom: 20vh;
+    z-index: 5;
+    cursor: move;
+}
+
+#vario {
+    position: absolute;
+    bottom: 20vh;
+    right: 0;
+    z-index: 5;
+    cursor: move;
+}
+
 #point_info {
     position: absolute;
     bottom: 0;
diff --git a/index.html b/index.html
index d3c0cfe..7c5c775 100644
--- a/index.html
+++ b/index.html
@@ -62,6 +62,8 @@
 				<label><input type="checkbox" id="chkbx_title" value="title" checked onclick='visibility_checkbox_action(this);'>Global infos</label><br>
 				<label><input type="checkbox" id="chkbx_elevation" value="elevation" checked onclick='visibility_checkbox_action(this);'>Elevation</label><br>			
 				<label><input type="checkbox" id="chkbx_text" value="point_info" checked onclick='visibility_checkbox_action(this);'>Global infos</label><br>
+				<label><input type="checkbox" id="chkbx_speed_gauge" value="speed_gauge" checked onclick='visibility_checkbox_action(this);'>Speed gauge</label><br>
+				<label><input type="checkbox" id="chkbx_vario" value="vario" checked onclick='visibility_checkbox_action(this);'>Variometer</label><br>
 				<label><input type="checkbox" id="chkbx_zoom_control" value="zoom_control" checked onclick='visibility_checkbox_action(this);'>Zoom control</label><br>
 				<label><input type="checkbox" id="chkbx_layer_control" value="layer_control" checked onclick='visibility_checkbox_action(this);'>Map layer control</label><br>
 				<label><input type="checkbox" id="chkbx_control_buttons" value="control_buttons" checked onclick='visibility_checkbox_action(this);'>Control buttons</label><br>
@@ -69,6 +71,8 @@
 		</div>
 		<div id="map"></div>
 		<div id="elevation" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
+		<div id="speed_gauge" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
+		<div id="vario" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
 		<div id="point_info" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)">
 				<div>duration&nbsp;</div><div id="point_info_time">__:__:__</div>
 				<div>elevation (gps)&nbsp;</div><div id="point_info_elevation_gps">----</div>