diff --git a/compass/public/assets/map.css b/compass/public/assets/map.css
index 398df61..5b08fbe 100644
--- a/compass/public/assets/map.css
+++ b/compass/public/assets/map.css
@@ -15,8 +15,8 @@ html, body {
   right: 10px;
   border: 3px #888 solid;
   background: white;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: 12px;
+  line-height: 18px;
 }
 #calendar #controls {
   position: absolute;
@@ -25,7 +25,7 @@ html, body {
   background: white;
 }
 #calendar .scroll {
-  overflow: scroll;      
+  overflow: scroll;
   height: 100%;
 }
 
diff --git a/compass/public/assets/styles.css b/compass/public/assets/styles.css
index ca246bd..c010fb6 100644
--- a/compass/public/assets/styles.css
+++ b/compass/public/assets/styles.css
@@ -43,6 +43,9 @@
   margin: 60px auto 0 auto;
   padding: 0 10px;
 }
+.dashboard .show-api-endpoint {
+  font-weight: normal;
+}
 
 .databases {
   list-style-type: none;
@@ -70,7 +73,6 @@
   margin-bottom: 4px;
 }
 
-
 .users {
   list-style-type: none;
   margin: 0;
@@ -84,9 +86,12 @@
 }
 .users .remove-user {
   left: -18px;
-  margin-top: -6px;
   text-decoration: none;
   font-size: 22px;
   position: absolute;
   padding-right: 12px;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/compass/resources/views/layouts/map.blade.php b/compass/resources/views/layouts/map.blade.php
index 24624f0..f419f66 100644
--- a/compass/resources/views/layouts/map.blade.php
+++ b/compass/resources/views/layouts/map.blade.php
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Compass</title>
-    <link rel="stylesheet" href="/assets/pure-min.css">
+    <link rel="stylesheet" href="/assets/semantic/semantic.min.css">
     <link rel="stylesheet" href="/assets/font-awesome-4.4.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="/assets/styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -24,4 +24,4 @@
     <script src="/assets/battery.js"></script>
     <script src="/assets/map.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/compass/resources/views/layouts/master.blade.php b/compass/resources/views/layouts/master.blade.php
index 23a8f0a..00f7104 100644
--- a/compass/resources/views/layouts/master.blade.php
+++ b/compass/resources/views/layouts/master.blade.php
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Compass</title>
-    <link rel="stylesheet" href="/assets/pure-min.css">
+    <link rel="stylesheet" href="/assets/semantic/semantic.min.css">
     <link rel="stylesheet" href="/assets/font-awesome-4.4.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="/assets/styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -14,4 +14,4 @@
     @yield('content')
 
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/compass/resources/views/settings.blade.php b/compass/resources/views/settings.blade.php
index 25e7d06..665c299 100644
--- a/compass/resources/views/settings.blade.php
+++ b/compass/resources/views/settings.blade.php
@@ -6,21 +6,28 @@
 
 <div class="dashboard">
 
-  <h2>Database</h2>
-
-  <div class="panel">
-    <h3>Read Token</h3>
-    <div class="token"><code>{{ $database->read_token }}</code></div>
-  </div>
-
-  @if ($database->created_by == session('user_id'))
-  <div class="panel">
-    <h3>Write Token</h3>
-    <div class="token"><code>{{ $database->write_token }}</code></div>
-  </div>
-  @endif
-
-  <div class="panel">
+  <h2>Database: {{ $database->name }}</h2>
+
+  <form class="ui form">
+    <div class="field">
+      <label>Read Token</label>
+      <input readonly="" value="{{ $database->read_token }}">
+    </div>
+
+    @if ($database->created_by == session('user_id'))
+    <div class="field">
+      <label>Write Token <a href="#" class="show-api-endpoint">(show API endpoint)</a></label>
+      <input readonly="" value="{{ $database->write_token }}">
+    </div>
+
+    <div class="api-endpoint field hidden">
+      <label>API Endpoint</label>
+      <input type="text" readonly value="{{ env('BASE_URL') }}api/input?token={{ $database->write_token }}">
+    </div>
+    @endif
+  </form>
+
+  <div style="margin-top: 20px;">
     <h3>Users with Access</h3>
 
     <ul class="users">
@@ -38,9 +45,11 @@
           <div class="error">{{ session('create-error') }}</div>
         @endif
         <span class="create {{ session('create-error') ? '' : 'hidden' }}">
-          <form action="/settings/{{ $database->name }}" method="post" class="pure-form">
-            <input type="url" name="add_user" value="{{ session('add-user-url') }}" placeholder="github or indieauth url">
-            <button type="submit" class="pure-button pure-button-primary">Add User</button>
+          <form action="/settings/{{ $database->name }}" method="post">
+            <div class="ui action input">
+              <input type="url" name="add_user" value="{{ session('add-user-url') }}" placeholder="github or indieauth url">
+              <button type="submit" class="ui button primary">Add User</button>
+            </div>
           </form>
         </span>
       </li>
@@ -50,21 +59,23 @@
 
   <br><br>
 
-  <h2>Micropub Export</h2>
+  <h2>Realtime Micropub Export</h2>
 
   <p>Enter a Micropub endpoint and token below and any trips that are written to this database will be sent to the endpoint as well.</p>
 
   <div class="panel">
-    <form action="/settings/{{ $database->name }}" method="post" class="pure-form pure-form-stacked">
-      <fieldset>
+    <form action="/settings/{{ $database->name }}" method="post" class="ui form">
+      <div class="field">
         <label for="micropub_endpoint">Micropub Endpoint</label>
         <input name="micropub_endpoint" type="url" placeholder="http://example.com/micropub" class="pure-input-1" value="{{ $database->micropub_endpoint }}">
+      </div>
 
+      <div class="field">
         <label for="micropub_token">Access Token</label>
         <input name="micropub_token" type="text" placeholder="" class="pure-input-1" value="{{ $database->micropub_token }}">
+      </div>
 
-        <button type="submit" class="pure-button pure-button-primary">Save</button>
-      </fieldset>
+      <button type="submit" class="ui button primary">Save</button>
     </form>
   </div>
 
@@ -85,6 +96,9 @@ jQuery(function($){
     });
     return false;
   });
+  $(".show-api-endpoint").click(function(){
+    $(".api-endpoint").removeClass("hidden");
+  });
 });
 </script>
 @endsection
