diff --git a/app/views/api/playground.html.erb b/app/views/api/playground.html.erb
index b0744d6..c953da6 100644
--- a/app/views/api/playground.html.erb
+++ b/app/views/api/playground.html.erb
@@ -16,11 +16,17 @@ end.flatten.compact.sort{|a,b| a[:path]=='/api/v1/login' ? -1:1}.to_json %>;
 </script>
 
 <form id="api-form">
-  <label>Endpoint: <select name="endpoint" onchange="playground.selEndpoint()"></select></label> &nbsp;
-  <label>Token: <input id="api-token" size="32" style="font-family:monospace"></label>
+  <label id="endpoint">Endpoint:
+    <select name="endpoint" onchange="playground.selEndpoint()"></select>
+  </label>
+  <label id="api-token">Token:
+    <%= tag :input, size: 32, placeholder: _('Use the login endpoint') %>
+  </label>
 </form>
-<button onclick="playground.addFormParam()"><%=_('Add parameter')%></button>
-<button onclick="playground.run()" style="font-weight:bold">&nbsp; <%=_('Run')%> &nbsp;</button>
-<pre id="api-response"></pre>
+<div id="playground-ctrl">
+  <button onclick="playground.addFormParam()"><%=_('Add parameter')%></button>
+  <button onclick="playground.run()" style="font-weight:bold">&nbsp; <%=_('Run')%> &nbsp;</button>
+</div>
+<pre id="api-response" class="empty"></pre>
 
 <script src="/javascripts/api-playground.js"></script>
diff --git a/public/javascripts/api-playground.js b/public/javascripts/api-playground.js
index c7bbe18..1199237 100644
--- a/public/javascripts/api-playground.js
+++ b/public/javascripts/api-playground.js
@@ -6,11 +6,11 @@ for (var endpoint,i=0; endpoint=endpoints[i]; i++) {
 var playground = {
 
   getToken: function() {
-    return jQuery('#api-token').val();
+    return jQuery('#api-token input').val();
   },
 
   setToken: function(token) {
-    jQuery('#api-token').val(token);
+    jQuery('#api-token input').val(token);
   },
 
   getEndpoint: function() {
@@ -39,8 +39,8 @@ var playground = {
   addFormParam: function(name) {
     if (!name) name = '';
     jQuery('<div class="api-param">'+
-    '<label>name: <input name="name[]" value="'+name+'"></label> &nbsp; '+
-    '<label>value: <input name="value[]"></label>'+
+    '<label class="param-nane">name: <input name="name[]" value="'+name+'"></label>'+
+    '<label class="param-value">value: <input name="value[]"></label>'+
     '</div>').appendTo('#api-form');
   },
 
@@ -54,7 +54,7 @@ var playground = {
     if ( endpoint.path != '/api/v1/login' ) {
       data.private_token = this.getToken();
     }
-    jQuery('#api-response').empty();
+    jQuery('#api-response').empty()[0].className = 'empty';
     var url = endpoint.path;
     var pathParameters = endpoint.path.match(/:[^/]+/g);
     if ( pathParameters ) {
@@ -68,16 +68,18 @@ var playground = {
       method: endpoint.method,
       data: data,
       success: function(data, textStatus, jqXHR) {
-        jQuery('#api-response').text( JSON.stringify(data, null, '  ') );
+        jQuery('#api-response').text(
+          JSON.stringify(data, null, '  ')
+        )[0].className = 'full';
         if ( endpoint.path == '/api/v1/login' ) {
-          playground.setToken(data.private_token);
+          playground.setToken(data.private_token)
         }
       },
       error: function(jqXHR, textStatus, errorThrown) {
         jQuery('#api-response').html(
           '<h2>'+textStatus+'</h2>' +
           'Request to '+url+' fail.\n\n' + errorThrown
-        );
+        )[0].className = 'fail';
       }
     });
   }
diff --git a/public/stylesheets/api-playground.scss b/public/stylesheets/api-playground.scss
new file mode 100644
index 0000000..4743808
--- /dev/null
+++ b/public/stylesheets/api-playground.scss
@@ -0,0 +1,42 @@
+.action-api-playground {
+
+   #api-token {
+     margin-left: 10px;
+     
+     input {
+       font-family: monospace;
+     }
+   }
+
+   .api-param {
+     margin: 5px 0;
+
+     .param-value {
+       margin-left: 10px;
+     }
+   }
+
+   #playground-ctrl {
+     * {
+       vertical-align: middle;
+     }
+   }
+
+   #api-response {
+     color: #000;
+     border: 1px solid rgba(0,0,0,0.3);
+     padding: 10px 15px;
+     box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
+     &.empty {
+       border: none;
+       Xbox-shadow: none;
+     }
+     &.full {
+       background: #E0E8EF;
+     }
+     &.fail {
+       background: #EDD;
+     }
+   }
+
+}
diff --git a/public/stylesheets/application.scss b/public/stylesheets/application.scss
index ad00fbf..f446b8b 100644
--- a/public/stylesheets/application.scss
+++ b/public/stylesheets/application.scss
@@ -16,6 +16,8 @@
  *= require search
  */
 
+@import "api-playground";
+
 /* browser fixes */
 
 img:-moz-broken {
--
libgit2 0.21.2