diff --git a/source/_lovelace/grid-markdown b/source/_lovelace/grid.markdown
similarity index 91%
rename from source/_lovelace/grid-markdown
rename to source/_lovelace/grid.markdown
index 3a0c4361353..24d4fcaeca2 100644
--- a/source/_lovelace/grid-markdown
+++ b/source/_lovelace/grid.markdown
@@ -1,11 +1,16 @@
 ---
 title: "Grid Card"
-sidebar_label: Grid Card
+sidebar_label: Grid
 description: "The Grid card allows you to show multiple cards in a grid."
 ---
 
 The Grid card allows you to show multiple cards in a grid. It will first fill the columns, automatically adding new rows as needed.
 
+<p class='img'>
+  <img src='/images/lovelace/lovelace_grid.png' alt='Screenshot of the grid card'>
+  Screenshot of the Grid card.
+</p>
+
 To add the Grid card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then **Edit Dashboard**. Click the plus button in the bottom right corner and select **Grid Card** from the card picker.
 
 {% configuration %}
diff --git a/source/images/lovelace/lovelace_grid.png b/source/images/lovelace/lovelace_grid.png
new file mode 100644
index 00000000000..d6e767dbd0a
Binary files /dev/null and b/source/images/lovelace/lovelace_grid.png differ