prodo-dev · sunirmehta · Sep 30, 2019 · Sep 30, 2019
diff --git a/docs/content/01_introduction/getting-started.md b/docs/content/01_introduction/getting-started.md
@@ -43,6 +43,13 @@ The typical workflow in developing a Prodo app is to
 2. **Define your actions as simple functions mutating the state of your model**
 3. **Use functional React components to render the model in its current state**
 
+<br/><br/>
+The diagram below gives you an overview of how Prodo's architecture works. We will go through each of the steps in more detail in the following sections.
+
+![Architecture diagram](../images/modeldiagram1.jpg "Architecture diagram")
+
+<br/><br/>
+
 ## Specifying the Model
 
 The [model](/basics/model) holds all of the types used in your actions and components

diff --git a/docs/content/images/modeldiagram1.jpg b/docs/content/images/modeldiagram1.jpg
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -51,7 +51,7 @@ module.exports = {
           {
             resolve: `gatsby-remark-images`,
             options: {
-              maxWidth: 590,
+              maxWidth: 1024,
             },
           },
           {