diff --git a/docs/src/content/web-tutorials/web-01-user-interface.md b/docs/src/content/web-tutorials/web-01-user-interface.md
new file mode 100644
index 000000000..4e9c2df96
--- /dev/null
+++ b/docs/src/content/web-tutorials/web-01-user-interface.md
@@ -0,0 +1,17 @@
+---
+title: "User Interface"
+weight: 6
+menu:
+  web-tutorial:
+    weight: 2
+---
+
+# User Interface
+
+{{% video src="https://videos.mitmproxy.org/mitmweb-01-user-interface.webm" %}}
+<!--
+{{% video src="https://videos.mitmproxy.org/mitmweb-02-intercepting-traffic.webm" %}}
+{{% video src="https://videos.mitmproxy.org/mitmweb-03-analysing-flows.webm" %}}
+{{% video src="https://videos.mitmproxy.org/mitmweb-04-modifying-requests.webm" %}}
+{{% video src="https://videos.mitmproxy.org/mitmweb-05-replaying-flows.webm" %}}
+-->
\ No newline at end of file
diff --git a/docs/src/layouts/partials/sidebar.html b/docs/src/layouts/partials/sidebar.html
index e8b39a4ab..515e0ec62 100644
--- a/docs/src/layouts/partials/sidebar.html
+++ b/docs/src/layouts/partials/sidebar.html
@@ -8,9 +8,12 @@
     <p class="menu-label">Overview</p>
     {{ partial "sidemenu" (dict "ctx" . "menuname" "overview") }}
 
-    <p class="menu-label">Beginner Tutorial</p>
+    <p class="menu-label">Beginner Tutorial (CLI)</p>
     {{ partial "sidemenu" (dict "ctx" . "menuname" "mitmproxytutorial") }}
 
+    <p class="menu-label">Beginner Tutorial (Web)</p>
+    {{ partial "sidemenu" (dict "ctx" . "menuname" "web-tutorial") }}
+
     <p class="menu-label">Core concepts</p>
     {{ partial "sidemenu" (dict "ctx" . "menuname" "concepts") }}
 
diff --git a/docs/src/layouts/shortcodes/video.html b/docs/src/layouts/shortcodes/video.html
new file mode 100644
index 000000000..2054f6755
--- /dev/null
+++ b/docs/src/layouts/shortcodes/video.html
@@ -0,0 +1,3 @@
+<video controls width="100%" loop="false" autoplay>
+    <source src="{{ .Get "src" }}" type="video/webm" />
+</video>