diff --git a/source/_posts/2024-04-03-release-20244.markdown b/source/_posts/2024-04-03-release-20244.markdown
index eb9edb9d2fe..94c8b8ecd3b 100644
--- a/source/_posts/2024-04-03-release-20244.markdown
+++ b/source/_posts/2024-04-03-release-20244.markdown
@@ -212,7 +212,7 @@ structured, the better it can help you. Especially when it comes to future
 features like generating dashboards, voice commands, and maybe even
 AI-related features.
 
-__TODO: Screenshot show areas page with floors.__
+<img class="no-shadow" src='/images/blog/2024-04/floors.png' alt='Screenshots showing areas settings page, which now also shows the areas grouped by floor.'>
 
 You can use floors in your {% term automations %} and {% term scripts %} as a
 target for your actions or control them with your voice. For example, you can
@@ -222,6 +222,8 @@ turn off all the lights on the downstairs floor when you go to bed or ask
 For our power users, you can even use [floors in your templates](/docs/configuration/templating/#floors)
 to create the most advanced and creative automations.
 
+{% my areas badge %}
+
 ### Labels: Tag everything any way you want
 
 {% term Floors %} and {% term areas %} are great for representing your actual
diff --git a/source/images/blog/2024-04/floors.png b/source/images/blog/2024-04/floors.png
new file mode 100644
index 00000000000..749ceb77a66
Binary files /dev/null and b/source/images/blog/2024-04/floors.png differ