diff --git a/media/css/style.css b/media/css/style.css
index 478b7dc..3fa869d 100644
--- a/media/css/style.css
+++ b/media/css/style.css
@@ -994,18 +994,6 @@ body.static div#disqus_thread div#dsq-content {
   margin-top: 23px;
 }
 
-body.api-contest a.aea {
-  border-top: 1px solid #ADA278;
-  float: right;
-  margin: -30px 0 0 20px;
-  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
-}
-body.api-contest a.aea img {
-  display: block;
-}
-
 body.editing header.main, body.editing header.sub {
   display: none;
 }
@@ -1165,3 +1153,48 @@ body.search div.static-box form input.search-query {
 body.search div.static-box form button {
   padding: 4px 16px 4px;
 }
+
+body.api section.main div.inner section.snipts article.snipt div.container header h1 a {
+  white-space: normal;
+}
+body.api section.main div.inner section.snipts article.snipt div.container section.code {
+  height: auto;
+}
+body.api section.main aside.api-info {
+  float: right;
+  margin-top: 30px;
+  width: 190px;
+}
+body.api section.main aside.api-info div.api-inner {
+  background: rgba(153, 208, 218, 0.3);
+  font: normal 11px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
+  margin: 0 0 30px 15px;
+  padding: 10px;
+  -webkit-background-clip: padding-box;
+  -webkit-border-radius: 8px;
+  -moz-background-clip: padding-box;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  background-clip: padding-box;
+}
+body.api section.main aside.api-info div.api-inner h5 {
+  margin-bottom: 5px;
+}
+body.api section.main aside.api-info div.api-inner ul {
+  margin: 0;
+}
+body.api section.main aside.api-info div.api-inner ul li {
+  margin: 2px 0;
+  list-style-type: none;
+}
+body.api section.main aside.api-info div.api-inner ul li input {
+  margin-bottom: 0;
+  margin-top: 5px;
+  width: 145px;
+}
+body.api section.main aside.main {
+  padding-top: 0;
+}
+body.api section.main aside.main nav.footer {
+  margin-top: 0;
+}
diff --git a/media/css/style.scss b/media/css/style.scss
index c747c75..24f3e9a 100644
--- a/media/css/style.scss
+++ b/media/css/style.scss
@@ -1122,18 +1122,6 @@ body.static {
         }
     }
 }
-body.api-contest {
-    a.aea {
-        border-top: 1px solid #ADA278;
-        float: right;
-        margin: -30px 0 0 20px;
-        @include box-shadow(3px, 3px, 10px, rgba(0, 0, 0, .2));
-
-        img {
-            display: block;
-        }
-    }
-}
 body.editing {
     header.main, header.sub {
         display: none;
@@ -1305,3 +1293,63 @@ body.search {
         }
     }
 }
+body.api {
+    section.main {
+        div.inner {
+            section.snipts {
+                article.snipt {
+                    div.container {
+                        header {
+                            h1 {
+                                a {
+                                    white-space: normal;
+                                }
+                            }
+                        }
+                        section.code {
+                            height: auto;
+                        }
+                    }
+                }
+            }
+        }
+        aside.api-info {
+            float: right;
+            margin-top: 30px;
+            width: 190px;
+
+            div.api-inner {
+                background: rgba(#99D0DA, .3);
+                font: normal 11px $Helvetica;
+                margin: 0 0 30px 15px;
+                padding: 10px;
+                @include border-radius(8px);
+
+                h5 {
+                    margin-bottom: 5px;
+                }
+                ul {
+                    margin: 0;
+
+                    li {
+                        margin: 2px 0;
+                        list-style-type: none;
+
+                        input {
+                            margin-bottom: 0;
+                            margin-top: 5px;
+                            width: 145px;
+                        }
+                    }
+                }
+            }
+        }
+        aside.main {
+            padding-top: 0;
+
+            nav.footer {
+                margin-top: 0;
+            }
+        }
+    }
+}
diff --git a/snipts/templates/snipts/detail.html b/snipts/templates/snipts/detail.html
index 2c4f9fe..bc3ec0d 100644
--- a/snipts/templates/snipts/detail.html
+++ b/snipts/templates/snipts/detail.html
@@ -2,7 +2,7 @@
 
 {% block page-title %}/ {% if snipt.title %}{{ snipt.title }}{% else %}Untitled{% endif %} / {{ user.username }} - {{ block.super }}{% endblock %}
 {% block html-class %}detail{% endblock %}
-{% block body-class %}detail{% endblock %}
+{% block body-class %}{% if request.path == '/api/' %}api{% else %}detail{% endif %}{% endblock %}
 
 {% block js %}
         {{ block.super }}
@@ -14,7 +14,21 @@
     <li><span class="prompt">/</span> <a href="{{ snipt.get_absolute_url }}">{{ snipt.title }}</a></li>
 {% endblock %}
 
-{% block aside %}{% endblock %}
+{% block aside %}
+    {% if request.path == '/api/' %}
+        <aside class="api-info">
+            <div class="api-inner">
+                <h5>Your API credentials:</h5>
+                <ul>
+                    <li>Username: <strong>{{ request.user.username }}</strong></li>
+                    <li>User ID: <strong>{{ request.user.id }}</strong></li>
+                    <li>API Key: <br /><input type="text" value="{{ request.user.api_key.key }}" /></li>
+                </ul>
+            </div>
+        </aside>
+        {{ block.super }}
+    {% endif %}
+{% endblock %}
 
 {% block content %}
     <section class="snipts" id="snipts">