diff --git a/components/images/web_server/number-slider-popup-input-field.png b/components/images/web_server/number-slider-popup-input-field.png
new file mode 100644
index 0000000000..d694a024f7
Binary files /dev/null and b/components/images/web_server/number-slider-popup-input-field.png differ
diff --git a/components/images/web_server/number-slider-popup.png b/components/images/web_server/number-slider-popup.png
new file mode 100644
index 0000000000..2db20fb930
Binary files /dev/null and b/components/images/web_server/number-slider-popup.png differ
diff --git a/components/images/web_server/sensor-history-graph.png b/components/images/web_server/sensor-history-graph.png
new file mode 100644
index 0000000000..03e22e8b53
Binary files /dev/null and b/components/images/web_server/sensor-history-graph.png differ
diff --git a/components/images/web_server/tab-header-expand-cloapsed.png b/components/images/web_server/tab-header-expand-cloapsed.png
new file mode 100644
index 0000000000..2249933f63
Binary files /dev/null and b/components/images/web_server/tab-header-expand-cloapsed.png differ
diff --git a/components/images/web_server/tab-header-expand-controls-expanded.png b/components/images/web_server/tab-header-expand-controls-expanded.png
new file mode 100644
index 0000000000..f37b5b5d02
Binary files /dev/null and b/components/images/web_server/tab-header-expand-controls-expanded.png differ
diff --git a/components/images/web_server/tab-header-expand-logs-expanded.png b/components/images/web_server/tab-header-expand-logs-expanded.png
new file mode 100644
index 0000000000..22d98d4d85
Binary files /dev/null and b/components/images/web_server/tab-header-expand-logs-expanded.png differ
diff --git a/components/web_server.rst b/components/web_server.rst
index 2017ca752b..198d49c81a 100644
--- a/components/web_server.rst
+++ b/components/web_server.rst
@@ -140,8 +140,62 @@ V2 embeds the css within the js file so is not required, however you could inclu
       js_url: ""
       version: 2
 
+
 Copy https://oi.esphome.io/v2/www.js to a V2 folder in your yaml folder.
 
+
+.. _config-webserver-version-3-options:
+
+Version 3 features
+---------------------------
+
+Number in slider mode
+*********************
+.. figure:: /components/images/web_server/number-slider-popup.png
+    :align: left
+    :width: 100.0%
+
+
+You can change the value by moving the slider.
+If you wish to enter a precise number you can click and hold the current value. A popup input field will appear where you can enter a number and confirm your input by pressing the enter key.
+
+.. figure:: /components/images/web_server/number-slider-popup-input-field.png
+    :align: left
+    :width: 100.0%
+
+
+Expand Controls and Logs
+************************
+.. figure:: /components/images/web_server/tab-header-expand-cloapsed.png
+    :align: left
+    :width: 100.0%
+
+
+By double-clicking on any group header you can expand the controls to fill up the whole screen.
+You can do the same for the logs.
+
+.. figure:: /components/images/web_server/tab-header-expand-controls-expanded.png
+    :align: center
+    :width: 100.0%
+
+    Expanded Controls
+
+
+.. figure:: /components/images/web_server/tab-header-expand-logs-expanded.png
+    :align: center
+    :width: 100.0%
+
+    Expanded Logs
+
+
+Sensor value graph
+******************
+.. figure:: /components/images/web_server/sensor-history-graph.png
+    :align: left
+    :width: 100.0%
+
+By clicking on any sensor it will expand a graph with the historical values for that sensor.
+
 .. _config-webserver-sorting:
 
 Entity sorting