diff --git a/README.md b/README.md
index a39c103e60..c5503eafc7 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,8 @@ Let's go over an example: creating an image generation UI around [DALL·E](https
 
 Here is the complete code to create this. This is all done in one Python file!
 
+
+  
 ```python
 import reflex as rx
 import openai
@@ -108,6 +110,7 @@ class State(rx.State):
         self.image_url = response.data[0].url
         self.processing, self.complete = False, True
 
+
 def index():
     return rx.center(
         rx.vstack(
@@ -132,14 +135,22 @@ def index():
         height="100vh",
     )
 
-
 # Add state and page to the app.
 app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
+
+
+
+
 ## Let's break this down.
 
+<div align="center">
+<img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
+</div>
+
+
 ### **Reflex UI**
 
 Let's start with the UI.
diff --git a/docs/images/dalle_colored_code_example.png b/docs/images/dalle_colored_code_example.png
new file mode 100644
index 0000000000..c6f7689745
Binary files /dev/null and b/docs/images/dalle_colored_code_example.png differ