diff --git a/ennstatus/static/css/ennstatus.css b/ennstatus/static/css/ennstatus.css
--- a/ennstatus/static/css/ennstatus.css
+++ b/ennstatus/static/css/ennstatus.css
@@ -105,3 +105,57 @@ h1, h2, h3, h4 {
     -moz-border-radius: 6px 0 6px 6px;
     border-radius: 6px 0 6px 6px;
 }
+
+/* fancy bootstrap checkboxes */
+
+.form-group input[type="checkbox"] {
+    display: none;
+}
+
+.form-group input[type="checkbox"] + .btn-group > label span {
+    width: 20px;
+}
+
+.form-group input[type="checkbox"] + .btn-group > label span:first-child {
+    display: none;
+}
+
+.form-group input[type="checkbox"] + .btn-group > label span:last-child {
+    display: inline-block;
+}
+
+.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
+    display: inline-block;
+}
+
+.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
+    display: none;
+}
+
+.form-group input[type="radio"] {
+    display: none;
+}
+
+.form-group input[type="radio"] + .btn-group > label span {
+    width: 20px;
+}
+
+.form-group input[type="radio"] + .btn-group > label span:first-child {
+    display: none;
+}
+
+.form-group input[type="radio"] + .btn-group > label span:last-child {
+    display: inline-block;
+}
+
+.form-group input[type="radio"]:checked + .btn-group > label span:first-child {
+    display: inline-block;
+}
+
+.form-group input[type="radio"]:checked + .btn-group > label span:last-child {
+    display: none;
+}
+
+.checkbox label, .radio label {
+    padding-left: 12px;
+}
diff --git a/ennstatus/templates/root/membership.html b/ennstatus/templates/root/membership.html
--- a/ennstatus/templates/root/membership.html
+++ b/ennstatus/templates/root/membership.html
@@ -23,9 +23,16 @@
         <div class="col-lg-10">
         {% for field in form.membership %}
           <div class="radio">
-            <label>
-              {{ field() }} {{ field.label.text }}
-            </label>
+            {{ field() }}
+            <div class="btn-group">
+              <label class="btn btn-success" for="{{ field.id }}">
+                <span class="glyphicon glyphicon-plus"></span>
+                <span class="glyphicon glyphicon-minus"></span>
+              </label>
+              <label class="btn btn-default" for="{{ field.id }}">
+                {{ field.label.text }}
+              </label>
+            </div> 
           </div>
         {% endfor %}
         </div>
@@ -40,9 +47,14 @@
       <div class="form-group">
         <label class="control-label col-lg-2">Double membership</label>
         <div class="col-lg-10">
-          <div class="checkbox">
-            <label>
-              {{ form.c3l() }} {{ form.c3l.label.text|safe }}
+          {{ form.c3l() }}
+          <div class="btn-group">
+            <label class="btn btn-success" for="c3l">
+              <span class="glyphicon glyphicon-plus"></span>
+              <span class="glyphicon glyphicon-minus"></span>
+            </label>
+            <label class="btn btn-default" for="c3l">
+              {{ form.c3l.label.text|safe }}
             </label>
           </div>
         </div>