diff --git a/public/images/docs/diagrams/my-app-visual.dark.png b/public/images/docs/diagrams/my-app-visual.dark.png
new file mode 100644
index 00000000000..7923333bd0e
Binary files /dev/null and b/public/images/docs/diagrams/my-app-visual.dark.png differ
diff --git a/public/images/docs/diagrams/my-app-visual.png b/public/images/docs/diagrams/my-app-visual.png
new file mode 100644
index 00000000000..7923333bd0e
Binary files /dev/null and b/public/images/docs/diagrams/my-app-visual.png differ
diff --git a/public/images/docs/diagrams/my-button-visual.dark.png b/public/images/docs/diagrams/my-button-visual.dark.png
new file mode 100644
index 00000000000..84d42178e90
Binary files /dev/null and b/public/images/docs/diagrams/my-button-visual.dark.png differ
diff --git a/public/images/docs/diagrams/my-button-visual.png b/public/images/docs/diagrams/my-button-visual.png
new file mode 100644
index 00000000000..84d42178e90
Binary files /dev/null and b/public/images/docs/diagrams/my-button-visual.png differ
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index ab1d12afb52..de5ccef58ac 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -32,9 +32,17 @@ function MyButton() {
   );
 }
 ```
-
 Now that you've declared `MyButton`, you can nest it into another component:
 
+<Diagram
+  name="my-button-visual"
+  height={265}
+  width={650}
+  alt="Diagram showing how MyApp nests the MyButton component and how MyButton renders a button."
+>
+  How nesting works: MyApp includes MyButton, which renders the button the user sees.
+</Diagram>
+
 ```js {5}
 export default function MyApp() {
   return (
@@ -45,6 +53,14 @@ export default function MyApp() {
   );
 }
 ```
+<Diagram
+  name="my-app-visual"
+  height={250}
+  width={650}
+  alt="Diagram showing how MyButton returns a button and React displays the result on the screen."
+>
+  How MyButton works: you call MyButton, it returns a button, and React displays the result.
+</Diagram>
 
 Notice that `<MyButton />` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.
 
@@ -61,6 +77,7 @@ function MyButton() {
   );
 }
 
+
 export default function MyApp() {
   return (
     <div>