diff --git a/developer_manual/design/layout.rst b/developer_manual/design/layout.rst
index ecd7d45afff..9004511c672 100644
--- a/developer_manual/design/layout.rst
+++ b/developer_manual/design/layout.rst
@@ -10,8 +10,8 @@ While deciding how you want your app to look, there are a number of factors to c
 * Responsiveness for different browsers, browser sizes and devices
 * Typical interface patterns in other similar apps in the market
 
-The `content Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers?id=content>`_ wraps your entire app. While the arrangement of components in your app is dependent on what your app does, most Nextcloud apps typically have 3 levels of hierarchy. Some commonly used layouts are:
-
+The `content Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppContent?id=ncappcontent-1>`_ wraps your entire app. While the arrangement of components in your app is dependent on what your app does, most Nextcloud apps typically have 3 levels of hierarchy. Some commonly used layouts are:
+`Penpot empty template <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=2783d7ad-98f2-804a-8002-750c2585d4f1&section=interactions&index=5&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
 
 * Navigation → content → sidebar (and a couple of variations of it, e.g. without the sidebar)
 * Navigation → list → content
@@ -19,6 +19,7 @@ The `content Vue component <https://nextcloud-vue-components.netlify.app/#/Compo
 Navigation → Content → Sidebar
 ------------------------------
 
+`Penpot Files layout <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=2783d7ad-98f2-804a-8002-750c2585d4f1&section=interactions&index=3&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
 
 .. image:: ../images/files-layout.png
    :alt: Files layout
@@ -47,6 +48,7 @@ Typically, a sidebar is used to show more information about an item. Sometimes t
 Special case: list in navigation
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
+`Penpot Talk layout <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=2783d7ad-98f2-804a-8002-750c2585d4f1&section=interactions&index=0&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
 
 .. image:: ../images/talk-layout.png
    :alt: Talk layout
diff --git a/developer_manual/images/activity-layout.png b/developer_manual/images/activity-layout.png
index 696386e3dce..e5d80117079 100644
Binary files a/developer_manual/images/activity-layout.png and b/developer_manual/images/activity-layout.png differ
diff --git a/developer_manual/images/files-layout.png b/developer_manual/images/files-layout.png
index 3d7a7789922..c4fc9c40b43 100644
Binary files a/developer_manual/images/files-layout.png and b/developer_manual/images/files-layout.png differ
diff --git a/developer_manual/images/mail-layout.png b/developer_manual/images/mail-layout.png
index cd8e0ed5fd6..5071344208a 100644
Binary files a/developer_manual/images/mail-layout.png and b/developer_manual/images/mail-layout.png differ
diff --git a/developer_manual/images/talk-layout.png b/developer_manual/images/talk-layout.png
index 3cab0abf999..277b562affd 100644
Binary files a/developer_manual/images/talk-layout.png and b/developer_manual/images/talk-layout.png differ