diff --git a/sass/_extra.scss b/sass/_extra.scss
index 172239bb..997bf7d8 100644
--- a/sass/_extra.scss
+++ b/sass/_extra.scss
@@ -78,6 +78,10 @@ ul.ui.list li::before {
     margin-left: 0.5em;
 }
 
+#sort-menu {
+    margin-bottom: 1em;
+}
+
 @media only screen and (max-width: 991px) {
     .masthead .ui.menu a.item {
         display: none;
diff --git a/sass/_semantic.scss b/sass/_semantic.scss
index a8a7134f..289b906e 100644
--- a/sass/_semantic.scss
+++ b/sass/_semantic.scss
@@ -31,7 +31,7 @@
 // @import 'semantic/accordion';
 // @import 'semantic/checkbox';
 // @import 'semantic/dimmer';
-// @import 'semantic/dropdown';
+@import 'semantic/dropdown';
 //@import 'semantic/embed';
 //@import 'semantic/video';
 // @import 'semantic/modal';
diff --git a/static/assets/js/sortCrates.js b/static/assets/js/sortCrates.js
new file mode 100644
index 00000000..534a3e3b
--- /dev/null
+++ b/static/assets/js/sortCrates.js
@@ -0,0 +1,42 @@
+function sortCrates(attribute, numeric, ascending) {
+    var section = $("#crates-section .cards");
+    var cards = section.children(".card");
+
+    var default_value = numeric ? 0 : "";
+
+    cards.sort(function (a, b) {
+        var aAttr = a.getAttribute(attribute) || default_value;
+        var bAttr = b.getAttribute(attribute) || default_value;
+
+        if (numeric) {
+            aAttr = parseInt(aAttr);
+            bAttr = parseInt(bAttr);
+        } else {
+            aAttr = aAttr.toUpperCase();
+            bAttr = bAttr.toUpperCase();
+        }
+
+        if (aAttr > bAttr) {
+            return ascending ? 1 : -1;
+        } else if (aAttr < bAttr) {
+            return ascending ? -1 : 1;
+        } else {
+            return 0;
+        }
+    });
+
+    cards.detach().appendTo(section);
+}
+
+$(document).ready(function () {
+    var sortDropdown = $("#sort-menu");
+
+    sortDropdown.dropdown({
+        onChange: function (value, text, selected) {
+            var type = selected[0].getAttribute("data-type");
+            var order = selected[0].getAttribute("data-order");
+
+            sortCrates(value, type == "num", order == "asc");
+        },
+    });
+});
diff --git a/templates/categories/macros.html b/templates/categories/macros.html
index cb6ca57f..a1a334d3 100644
--- a/templates/categories/macros.html
+++ b/templates/categories/macros.html
@@ -82,7 +82,7 @@
     {% endif %}
 {% endif %}
 
-<li class="ui card{% if archived %} archived{% endif %}">
+<li class="ui card{% if archived %} archived{% endif %}" data-name="{{ name }}"{% if downloads %} data-downloads="{{ downloads }}"{%endif%}{% if recent_downloads %} data-recent="{{ recent_downloads }}"{% endif %}{% if license %} data-license="{{ license }}"{% endif %}{% if stars %} data-stars="{{ stars }}"{% endif %}{% if last_activity %} data-activity="{{ last_activity }}"{% endif %}>
     {% if item.image %}
          {% if primary_url %}
             <a class="image" href="{{ primary_url }}">
diff --git a/templates/categories/page.html b/templates/categories/page.html
index 2f1b8b47..4ad71cdb 100644
--- a/templates/categories/page.html
+++ b/templates/categories/page.html
@@ -48,7 +48,7 @@ <h1 class="ui center aligned icon header">
     {% endif %}
 {% endfor %}
 
-<section>
+<section id="crates-section">
     <h2 class="ui horizontal divider small header">
         <a href="#{{ section.extra.plural | slugify }}" id="{{ section.extra.plural | slugify }}">
             <i class="list icon big" aria-hidden="true"></i>
@@ -58,6 +58,24 @@ <h2 class="ui horizontal divider small header">
 
     <div class="ui vertical stripe">
         <div class="ui container">
+            <div id="sort-menu" class="ui dropdown icon selection">
+                <i class="sort amount down icon" aria-hidden="true"></i>
+                <span class="text">Sort by A-Z</span>
+                <i class="dropdown icon" aria-hidden="true"></i>
+
+                <ul class="menu">
+                    <li class="item" data-value="data-name" data-order="asc">Sort by A-Z</li>
+                    <li class="item" data-value="data-name">Sort by Z-A</li>
+                    
+                    {% if section.extra.plural == "crates" %}
+                        <li class="item" data-value="data-downloads" data-type="num">Sort by Downloads</li>
+                        <li class="item" data-value="data-recent" data-type="num">Sort by Recent Downloads</li>
+                        <li class="item" data-value="data-stars" data-type="num">Sort by Stars</li>
+                        <li class="item" data-value="data-activity">Sort by Last Activity</li>
+                    {% endif %}
+                </ul>
+            </div>
+
             <ul class="ui stackable cards nolist {{ columns }}">
                 {% for item in crates %}
                     {{ category_macros::info(item=item, section=section) }}
@@ -115,4 +133,9 @@ <h2 class="ui horizontal divider small header">
         </div>
     </div>
 </section>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
+
+{% block footer %}
+    <script src="/assets/semantic/js/dropdown.min.js"></script>
+    <script src="/assets/js/sortCrates.js"></script>
+{% endblock %}
\ No newline at end of file