diff --git a/qml/README.md b/qml/README.md
index c057e5d..0a7ff45 100644
--- a/qml/README.md
+++ b/qml/README.md
@@ -2,3 +2,4 @@
 
 1. [Introduction](articles/1.Introduction.md)
 2. [Basic Extension](articles/2.Basic_extension.md) - [Extension](extensions/qml_tutorial_2/)
+3. [Adding a button to the toolbar](articles/3.Adding_a_button_to_the_toolbar.md) - [Extension](extensions/qml_tutorial_3/)
diff --git a/qml/articles/3.Adding_a_button_to_the_toolbar.md b/qml/articles/3.Adding_a_button_to_the_toolbar.md
index 4b932ec..2cc6b43 100644
--- a/qml/articles/3.Adding_a_button_to_the_toolbar.md
+++ b/qml/articles/3.Adding_a_button_to_the_toolbar.md
@@ -67,10 +67,13 @@ detection and maybe some other things as well, I did not try that
 though.
 
 
-## Code
+## Example
 The example code will add a button to main toolbar and statusbar. When
 user clicks on the button the small white rectangle will show up and the
 number displayed on the badge will increase.
 
+![Toolbar button with badge and empty popup](../images/tutorial3/toolbar_button_with_badge_and_popup.png)
+
+### Code
 The code for this example can be found at
 [extensions/qml_tutorial_3](../extensions/qml_tutorial_3)
diff --git a/qml/images/tutorial3/toolbar_button_with_badge_and_popup.png b/qml/images/tutorial3/toolbar_button_with_badge_and_popup.png
new file mode 100644
index 0000000..142d2f5
Binary files /dev/null and b/qml/images/tutorial3/toolbar_button_with_badge_and_popup.png differ