diff --git a/docs/lovelace_custom_card.md b/docs/lovelace_custom_card.md
index 6343d52e..cc7d746e 100644
--- a/docs/lovelace_custom_card.md
+++ b/docs/lovelace_custom_card.md
@@ -100,6 +100,8 @@ views:
 
 Resources to load in Lovelace can be imported as a JS script, an HTML import or as a JS module import. Below is an example of a custom card using JS modules that does all the fancy things.
 
+![Screenshot of the wired card](/img/en/frontend/lovelace-ui-custom-card-screenshot.png)
+
 Create a new file in your Home Assistant config dir as `<config>/www/wired-cards.js` and put in the following contents:
 
 ```js
diff --git a/website/static/img/en/frontend/lovelace-ui-custom-card-screenshot.png b/website/static/img/en/frontend/lovelace-ui-custom-card-screenshot.png
new file mode 100644
index 00000000..cd027fe6
Binary files /dev/null and b/website/static/img/en/frontend/lovelace-ui-custom-card-screenshot.png differ