diff --git a/ui/src/Client.svelte b/ui/src/Client.svelte
index a23b4b4..f446b5c 100644
--- a/ui/src/Client.svelte
+++ b/ui/src/Client.svelte
@@ -7,14 +7,24 @@
   let dev = client[1];
 </script>
 
-<div>
-  <h4>{client.Name}</h4>
-  <dl>
-    <dt>IP</dt><dd>{dev.IP}</dd>
-    <dt>PrivateKey</dt><dd>{dev.PrivateKey}</dd>
-    <dt>PublicKey</dt><dd>{dev.PublicKey}</dd>
-  </dl>
-<a href="/client/{clientId}" use:link role="button" class="btn btn-primary material-icons">
-    edit
-</a>
+<style>
+.card {
+  margin: 1em 0;
+}
+</style>
+
+<div class="card">
+  <div class="card-body">
+    <h4 class="card-title">{client.Name}</h4>
+    <dl class="row">
+      <dt class="col-sm-2">IP</dt>
+      <dd class="col-sm-10">{dev.IP}</dd>
+      <dt class="col-sm-2">Public Key</dt>
+      <dd class="col-sm-10">{dev.PublicKey}</dd>
+    </dl>
+
+  <a href="/client/{clientId}/config" role="button" class="btn btn-primary">Download Config</a>
+  <a href="/client/{clientId}" use:link role="button" class="btn btn-primary material-icons float-right">edit</a>
+  </div>
+
 </div>
diff --git a/ui/src/Clients.svelte b/ui/src/Clients.svelte
index bf38154..8ddca4d 100644
--- a/ui/src/Clients.svelte
+++ b/ui/src/Clients.svelte
@@ -15,7 +15,7 @@
 
 <h2>My Clients</h2>
 
-<ul>
+<ul class="list-unstyled">
 	{#each clients as dev}
     <li><Client client={dev}/></li>
   {/each}