diff --git a/docs/content/01_introduction/getting-started.md b/docs/content/01_introduction/getting-started.md
old mode 100644
new mode 100755
index 789cbd9c..cd07e80a
--- 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
new file mode 100644
index 00000000..51609ba1
Binary files /dev/null and b/docs/content/images/modeldiagram1.jpg differ
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
index 2ed48632..8dad5b21 100644
--- 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,
             },
           },
           {