1 files changed, 40 insertions, 4 deletions

diff --git a/templates/issues/device.html b/templates/issues/device.html
index def5b8b..66830d3 100644
--- a/templates/issues/device.html
+++ b/templates/issues/device.html
@@ -1,7 +1,43 @@
-{% extends "issues/index.html" %}
+{% extends "issues/warranty.html" %}
+{% load i18n %}
 
 {% block main %}
-    {% for k, v in models.items %}
-        <a href="{% url 'issues-choose_device' k %}">{{ v.name }}</a>
-    {% endfor %}
+<h2>{% trans "Choose Your Device" %}</h2>
+<p>Help text..</p>
+<div class="devices">
+    <div class="row">
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'mac' %}">
+                <img src="{{ STATIC_URL }}img/products/mac.png"/>
+                <div>{% trans "Mac" %}</div>
+            </a>
+        </div>
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'ipod' %}">
+                <img src="{{ STATIC_URL }}img/products/ipod.png"/>
+                <div>{% trans "iPod" %}</div>
+            </a>
+        </div>
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'iphone' %}">
+                <img src="{{ STATIC_URL }}img/products/iphone.png"/>
+                <div>{% trans "iPhone" %}</div>
+            </a>
+        </div>
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'ipad' %}">
+                <img src="{{ STATIC_URL }}img/products/ipad.png"/>
+                <div>{% trans "iPad" %}</div>
+            </a>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'other' %}">
+                <img src="{{ STATIC_URL }}img/products/other.png"/>
+                <div>{% trans "Other" %}</div>
+            </a>
+        </div>
+    </div>
+</div>
 {% endblock main %}