diff --git a/README.md b/README.md
index 630f606..6f4ebb9 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,12 @@ This is a simple rails app for distributing wedding information and managing the
 
 ![Screenshot of the home page](docs/homepage_big.jpg)
 
+## How does it work?
+
+Here's a map of all the flows through the app, from the home page to the RSVP flow and also some of the separate admin interface. [Click here to expand the image.](docs/wedding_flow.jpg) And [here is a higher resolution PDF version](docs/wedding_flow.pdf).
+
+![Flow chart showing the application states.](docs/wedding_flow.jpg)
+
 ## Development
 
 ### Initial Setup
diff --git a/docs/index.html b/docs/index.html
index 3d2e8b7..b579f6a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,10 +4,24 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <title></title>
-  <meta name="description" content="">
+  <title>A Rails App for your Wedding - jdlm.info</title>
+  <meta name="description" content="Here's a simple rails app for distributing wedding information and managing the guest list. You're probably going to build your own anyway (like me!) but this may be a useful place to start.">
+  <meta content="jdlm.info" property="og:site_name">
+  <meta content="A Rails App for your Wedding - jdlm.info" property="og:title">
+  <meta content="article" property="og:type">
+  <meta content="http://jdlm.info/wedding/" property="og:url">
+  <meta content="2018-10-28T12:00:00+00:00" property="article:published_time">
+  <meta content="http://jdlm.info/" property="article:author">
+  <meta content="http://jdlm.info/wedding/wedding_flow_thumbnail.jpg" property="og:image">
+
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <style>
+  .jumbotron {
+    background-image: linear-gradient(rgba(227, 242, 245, 0.5), rgba(227, 242, 245, 0.7)), url("./wedding_flow_thumbnail.jpg");
+    background-size: cover;
+  }
+  </style>
 </head>
 
 <body>
@@ -58,7 +72,7 @@
         </p>
         <p class="text-center">
           <a href="./wedding_flow.jpg">
-            <img src="./wedding_flow.jpg" class="img-fluid">
+            <img src="./wedding_flow_thumbnail.jpg" class="img-fluid">
           </a>
         </p>
         <p>This diagram was produced in <a href="https://realtimeboard.com/">Realtime Board</a>.
diff --git a/docs/wedding_flow_thumbnail.jpg b/docs/wedding_flow_thumbnail.jpg
new file mode 100644
index 0000000..8a4a61b
Binary files /dev/null and b/docs/wedding_flow_thumbnail.jpg differ
