--- a/default/event/attendance.html	Thu May 04 01:00:23 2017 +0200
+++ b/default/event/attendance.html	Thu May 04 01:00:29 2017 +0200
@@ -1,8 +1,8 @@
 {% import 'input/form.html' as form %}
-{% import 'input/field.html' as field %}
+{% import 'input/field.html' as field with context %}
 
-<div class="attendance">
-    <p class="poll_instructions">Please indicate if you plan to attend the event.</p>
+<div class="attendance box">
+    <p class="poll_instructions">Please indicate if you plan to attend the event:</p>
     {% call form.form() %}
         {{ field.meta("type", "attendance") }}
         {{ field.meta("service", event_service) }}
@@ -10,7 +10,11 @@
         <div class="attending">
             {{ field.choices("attend", ("yes", "no", "maybe"), checked=event.attend) }}
         </div>
-        {{ field.int("guests", label="how many people will come (including you)?", init=event.get("guests", 1)) }}
-        {{ field.submit() }}
+        <div class="guests">
+            {{ field.int("guests", label="How many people will come (including you)?", init=event.get("guests", 1)) }}
+        </div>
+        <div class="submit">
+            {{ field.submit() }}
+        </div>
     {% endcall %}
 </div>

--- a/default/event/invitation.html	Thu May 04 01:00:23 2017 +0200
+++ b/default/event/invitation.html	Thu May 04 01:00:29 2017 +0200
@@ -1,9 +1,12 @@
 {% extends 'base/base.html' %}
 
 {% block body %}
-<div class='invitation_header'>
+<div class='invitation_header box'>
     <h1>Welcome {{name}}</h1>
     <p class='instructions'>You have been invited to participate to an event</p>
+    {% if event.picture is defined %}
+        <p><img id='event_picture' src="{{event.picture}}"></p>
+    {% endif %}
 </div>
 
 {% include 'event/attendance.html' %}

--- a/default/static/event.css	Thu May 04 01:00:23 2017 +0200
+++ b/default/static/event.css	Thu May 04 01:00:29 2017 +0200
@@ -1,1 +1,81 @@
-@import 'blog.css'; /* needed as blog/articles.html is included %/
+@import 'blog.css'; /* needed as blog/articles.html is included */
+
+.invitation_header {
+    text-align: center;
+    font-variant: small-caps;
+    border: none;
+}
+
+.instructions {
+    font-style: italic;
+    margin: 0;
+}
+
+#event_picture {
+    max-width: 100%;
+    border-radius: 2em;
+}
+
+.attendance {
+    background-color: #9ca0a8;
+    padding: 0 0.3em;
+    max-width: 580px;
+    margin: 0 auto;
+    color: #3A3A3A;
+}
+
+.attending {
+    width: 5em;
+    margin: 0 auto;
+}
+
+.attending label {
+    /* display: inline; */
+    margin: 0.8em 0;
+}
+
+.guests label {
+    display: block;
+    margin: 1em 0;
+}
+
+.guests input {
+    width: 2.5em;
+    margin: 0 1em;
+}
+
+.poll_instructions {
+    font-weight: bold;
+    font-size: 0.9em;
+    font-size: 1.1em;
+    text-align: center;
+}
+
+.guests label{
+    text-align: center;
+    /* font-style: italic */
+}
+
+.guests input {
+    display: block;
+    margin: 0 auto;
+}
+
+.submit {
+    width: 15em;
+    margin: 0 auto;
+    padding: 1em 0;
+}
+
+.submit input {
+    width: 100%;
+}
+
+@media (min-width: 500px) {
+    .invitation_header {
+        width: 94%;
+        margin: 0 auto;
+        border: solid 1px;
+        border-color: #9ca0a8;
+    }
+}