diff --git a/static/css/main.css b/static/css/main.css
index b193bfd..7cf1e4e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -10,3 +10,33 @@ html, body, div, p, span {
   color: #3d4a5c;
   font-family: 'Calibri', 'Myriad Pro', 'Lucida Grande', 'Lucida Sans', Verdana, sans-serif;
 }
+
+label.option-group {
+  width: 100px;
+  display: inline-block;
+  border: 1px solid lightgrey;
+  margin: 0;
+  padding: 0;
+}
+
+label.option-group > img {
+  display: block;
+  margin: 10px auto;
+  height: 50px;
+}
+
+label.option-group > span {
+  display: block;
+  text-align: center;
+  padding: 10px
+}
+
+label.option-group > input {
+  display:none;
+}
+
+label.option-group > input:checked ~ span {
+  font-weight: bolder;
+  background-color: lightgrey;
+}
+
diff --git a/templates/versioning.html b/templates/versioning.html
index 7b5663d..055592f 100644
--- a/templates/versioning.html
+++ b/templates/versioning.html
@@ -8,9 +8,11 @@
   tempor incididunt ut labore et dolore magna aliqua.
 
   <h3>What version control system do you use?</h3>
-  {% for item in range(20) %}
-    {{ loop.index }}
-  {% endfor %}
+  {% for item in range(20) %}<label class="option-group">
+    <img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png">
+    <input type="radio" value="git" name="vcs">
+    <span>git</span>
+  </label>{% endfor %}
 {% endblock %}
 
 {% block links %}