diff --git a/apps/showcase/doc/designer/DashboardDoc.vue b/apps/showcase/doc/designer/DashboardDoc.vue
index 19129231c..52ef860e4 100644
--- a/apps/showcase/doc/designer/DashboardDoc.vue
+++ b/apps/showcase/doc/designer/DashboardDoc.vue
@@ -5,4 +5,7 @@
             A theme can be renamed, duplicated and downloaded using the <i class="pi pi-ellipsis-h !text-sm"></i> button.
         </p>
     </DocSectionText>
+    <div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
+        <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-dashboard.png" class="w-full" />
+    </div>
 </template>
diff --git a/apps/showcase/doc/designer/MigrationAssistantDoc.vue b/apps/showcase/doc/designer/MigrationAssistantDoc.vue
index 22e71c905..ca30b8c3b 100644
--- a/apps/showcase/doc/designer/MigrationAssistantDoc.vue
+++ b/apps/showcase/doc/designer/MigrationAssistantDoc.vue
@@ -6,5 +6,8 @@
             backup and run a preview before the migration. Depending on the result, you may choose to proceed with the migration process. In case there are missing tokens, your theme would receive them with placeholder values so it is recommended to
             take a note of them before migration and then visit the components to replace the placeholder values with actual values of your choice. These types of newly added tokens would be highlighed in Editor.
         </p>
+        <div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
+            <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-migration.png" class="w-full" />
+        </div>
     </DocSectionText>
 </template>
diff --git a/apps/showcase/doc/designer/createtheme/FigmaDoc.vue b/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
index f83300f97..3245b9a43 100644
--- a/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
+++ b/apps/showcase/doc/designer/createtheme/FigmaDoc.vue
@@ -6,5 +6,8 @@
             UI Kit version is older, the transformation process marks the missing tokens and recommends an auto migration via the migration assistant. This is an automated workflow and eliminates the manual design to code during the handoff process.
             If you have UI designers in your team, the recommended approach is using Figma for the actual design process and utilizing the designer for transformation, preview and download purposes.
         </p>
+        <div class="w-full sm:w-[48rem] pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
+            <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
+        </div>
     </DocSectionText>
 </template>
diff --git a/apps/showcase/doc/designer/editor/TypographyDoc.vue b/apps/showcase/doc/designer/editor/TypographyDoc.vue
index 4e58fdb6d..77e19ae88 100644
--- a/apps/showcase/doc/designer/editor/TypographyDoc.vue
+++ b/apps/showcase/doc/designer/editor/TypographyDoc.vue
@@ -4,5 +4,8 @@
             The components are not opinionated about the typography. Important properties such as the font family, font size, and line-height do not have design tokens since they can be inherited from the document. For preview purposes, the
             <i>settings</i> tab displays options to customize the base font and the font family of the document. These values are not available in the generated theme and need to be applied to your application at the document level.
         </p>
+        <div class="w-full sm:w-[48rem] px-8 pt-8 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface">
+            <img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-editor.png" class="w-full" />
+        </div>
     </DocSectionText>
 </template>