diff --git a/pagure/templates/api.html b/pagure/templates/api.html
new file mode 100644
index 0000000..c551144
--- /dev/null
+++ b/pagure/templates/api.html
@@ -0,0 +1,88 @@
+{% extends "master.html" %}
+
+{% block title %} API | pagure {% endblock %}
+
+{%block tag %}index{% endblock %}
+
+{% block content %}
+
+<h2>
+    Projects
+    <a name="projects" class="headerlink" title="Permalink to this headline" href="#projects">
+    <img src="{{ url_for('static', filename='link.png') }}" />
+    </a>
+</h2>
+<div class="accordion">
+{% for html in projects %}
+{{ html | InsertDiv | safe }}
+{% endfor %}
+</div>
+
+<h2>
+    Users
+    <a name="users" class="headerlink" title="Permalink to this headline" href="#users">
+    <img src="{{ url_for('static', filename='link.png') }}" />
+    </a>
+</h2>
+<div class="accordion">
+{% for html in users %}
+{{ html | InsertDiv | safe }}
+{% endfor %}
+</div>
+
+<h2>
+    Extras
+    <a name="extras" class="headerlink" title="Permalink to this headline" href="#extras">
+    <img src="{{ url_for('static', filename='link.png') }}" />
+    </a>
+</h2>
+
+<div class="accordion">
+{% for html in extras %}
+{{ html | InsertDiv |safe }}
+{% endfor %}
+</div>
+
+{% endblock %}
+
+{% block jscripts %}
+{{ super() }}
+<script type="text/javascript">
+
+    $(function(){
+        $('.accordion').accordion({
+            active: false,
+            collapsible: true,
+            heightStyle: "content",
+            create: function (event, ui) {
+                $(this).children('h3').each(function (i) {
+                    // set id here because jQuery UI sets them as "ui-accordion-#-header-#"
+                    this.id = this.textContent.toLowerCase().replace(/\s+/g, '_');
+                    // add the anchor
+                    $(this).before('<a class="accordion-link link" data-index="' + i +
+                     '" href="#' + this.id + '"></a>');
+                });
+                $(this).find('.accordion-link').click(function () {
+                    // the active option requires a numeric value (not a string, e.g. "1")
+                    this.accordion( "option", "active", $(this).data('index') );
+                    // uncomment out the return false below to prevent the header jump
+                    return false;
+                });
+            }
+        });
+
+        if (window.location.hash) {
+            $('.accordion').each(function(){
+                var hashId = null;
+                $(this).children('h3').each(function (i) {
+                    var txt = this.textContent.toLowerCase().replace(/\s+/g, '_');
+                    if ( txt === window.location.hash.slice(1) ) {
+                        hashId = i;
+                    }
+                });
+                $(this).accordion( "option", "active", hashId );
+            });
+        }
+    });
+</script>
+{% endblock %}