diff --git a/templates/devices.html b/templates/devices.html
index 6a53f00..7d39d2f 100644
--- a/templates/devices.html
+++ b/templates/devices.html
@@ -1,29 +1,39 @@
-<div class="flex justify-center">
-    <div class="relative overflow-x-auto">
-        <table class="lg:w-1/4 sm:w-full text-sm text-left text-gray-500 dark:text-gray-400">
-            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                <tr>
-                    <th scope="col" class="px-6 py-3">
-                        Name
-                    </th>
-                    <th scope="col" class="px-6 py-3">
-                        Status
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for d in devices %}
-                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 cursor-pointer"
-                    hx-get="{{ url_for('device', device_id=d['id']) }}" hx-push-url="true" hx-target="#container">
-                    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                        {{d['name']}}
-                    </th>
-                    <td class="px-6 py-4">
-                        {{d['is_active']}}
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+<div class="w-full max-w-screen-xl mx-auto p-6">
+    <div class="relative overflow-hidden mb-8 bg-white">
+        <div class="p-4 bg-grey-lighter py-8">
+            <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
+                <div class="sm:flex sm:items-center px-2 py-4">
+                    <div class="flex-grow">
+                        <h3 class="font-normal px-2 py-3 leading-tight">Devices</h3>
+                        <div class="w-full">
+                            {% for d in devices %}
+                            <div class="flex cursor-pointer my-1 hover:bg-blue-lightest rounded"
+                                hx-get="{{ url_for('device', device_id=d['id']) }}" hx-push-url="true"
+                                hx-target="#container">
+                                <div class="w-8 h-10 text-center py-1">
+                                    <p
+                                        class="text-3xl p-0 {{ 'text-green-dark' if d['is_active']=='yes' else 'text-grey-dark'}}">
+                                        &bull;</p>
+                                </div>
+                                <div class="w-4/5 h-10 py-3 px-1">
+                                    <p class="hover:text-blue-dark">{{d['name']}}</p>
+                                </div>
+                                <div class="w-1/5 h-10 text-right p-3">
+                                    <p class="text-sm text-grey-dark">0</p>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+                <div class="sm:flex bg-grey-light sm:items-center px-2 py-4">
+                    <div class="flex-grow text-right">
+                        <button class="bg-blue hover:bg-blue-dark text-white py-2 px-4 rounded">
+                            Add New
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
\ No newline at end of file