diff --git a/README.md b/README.md
index 86fe5ab..4b906ba 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,9 @@ this plugin creates the concept of graduated outages where at predefined times b
 an outage and after, different levels of warning and access can be provided to students
 and testers letting them know what is about to happen and why.
 
+<img alt="Default" src="https://cdn.rawgit.com/CatalystIT-AU/moodle-auth_outage/master/docs/default.svg" width="520">
+
+<img alt="Manager" src="https://cdn.rawgit.com/CatalystIT-AU/moodle-auth_outage/master/docs/manager.svg" width="520">
 
 Change Log
 ----------
diff --git a/docs/default.svg b/docs/default.svg
new file mode 100644
index 0000000..2f40cc1
--- /dev/null
+++ b/docs/default.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="520" height="100" style="font-family: Arial; text-anchor: middle;">
+  <text x="260" y="40" style="font-family: Arial;">Default moodle outages are black and white</text>
+  <rect x="10"  y="50" height="50" width="200" style="stroke:#000; fill: #eee;"/><text x="110" y="80">Open</text>
+  <rect x="210" y="50" height="50" width="100" style="stroke:#000; fill: #333;"/><text x="260" y="80" fill="white">Maint</text>
+  <rect x="310" y="50" height="50" width="200" style="stroke:#000; fill: #eee;"/><text x="410" y="80">Open</text>
+</svg>
diff --git a/docs/manager.svg b/docs/manager.svg
new file mode 100644
index 0000000..a3dbae0
--- /dev/null
+++ b/docs/manager.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="520" height="100" style="font-family: Arial; text-anchor: middle;">
+  <text x="260" y="40" style="font-family: Arial;">Outage manager blurs the boundaries</text>
+  <rect x="10"  y="50" height="50" width="150" style="stroke:#000; fill: #eee;"   /><text x="90"  y="80">Open</text>
+  <rect x="160" y="50" height="50" width="50"  style="stroke:#000; fill: #ff7c00;"/><text x="185" y="80">Warn</text>
+  <rect x="210" y="50" height="50" width="100" style="stroke:#000; fill: #800080;"/><text x="260" y="80" fill=white>Maint</text>
+  <rect x="310" y="50" height="50" width="50"  style="stroke:#000; fill: #e00;"   /><text x="335" y="80" fill=white>Test</text>
+  <rect x="360" y="50" height="50" width="20"  style="stroke:#000; fill: #090;"   /><text x="370" y="80" fill=white>✓</text>
+  <rect x="380" y="50" height="50" width="130" style="stroke:#000; fill: #eee;"   /><text x="445" y="80">Open</text>
+</svg>