diff --git a/src/web/static/css/style.css b/src/web/static/css/style.css
index e9bd3e8..c4c5eb6 100644
--- a/src/web/static/css/style.css
+++ b/src/web/static/css/style.css
@@ -71,6 +71,8 @@ border-radius: 10px;
 box-shadow: 0 2px 20px #545454;
 }
 
+.about #wrap { max-width: 780px; } 
+
 #header {
 position: absolute;
 top: 0px;
diff --git a/src/web/static/images/diaappr.png b/src/web/static/images/diaappr.png
new file mode 100644
index 0000000..eaa1388
Binary files /dev/null and b/src/web/static/images/diaappr.png differ
diff --git a/src/web/templates/about.html b/src/web/templates/about.html
index 33b3ce6..affdbae 100644
--- a/src/web/templates/about.html
+++ b/src/web/templates/about.html
@@ -1,12 +1,21 @@
 $var title: About
 $var mod = 'about';
-$var cssfiles:
-$var jsfiles:
+$var cssfiles: static/css/facebox.css
+$var jsfiles: static/js/facebox.js
+
+<script type="text/javascript">
+    $$(document).ready(function() {
+        $$('a[rel*=facebox]').facebox({
+        loadingImage : '/static/images/loading.gif',
+        closeImage   : '/static/images/closelabel.png'
+        });
+    });
+</script>
 
 <div id="maincontent">
 <div class="innertube">
 
-<img style="float: right;" alt="AppRecommender logo" src="/static/images/logo.png" width="150px" />
+<a rel="facebox" href="/static/images/diaappr.png" title="AppRecommender Diagram"><img style="float: right; margin: 10px;" alt="AppRecommender Diagram" src="/static/images/diaappr.png" width="230px" /></a>
 
 <h1>About</h1>
 
--
libgit2 0.21.2