diff --git a/app/controllers/crates.js b/app/controllers/crates.js
index ded68691137..5e8cc409387 100644
--- a/app/controllers/crates.js
+++ b/app/controllers/crates.js
@@ -4,7 +4,7 @@ import PaginationMixin from 'cargo/mixins/pagination';
 export default Ember.ArrayController.extend(PaginationMixin, {
     needs: ['application'],
     queryParams: ['letter', 'page', 'per_page', 'sort'],
-    letter: 'A',
+    letter: null,
     page: '1',
     per_page: 10,
     sort: 'alpha',
diff --git a/app/mixins/pagination.js b/app/mixins/pagination.js
index d67591ac280..a1405f16c63 100644
--- a/app/mixins/pagination.js
+++ b/app/mixins/pagination.js
@@ -1,14 +1,34 @@
 import Ember from 'ember';
 
+var VIEWABLE_PAGES = 9;
+
 export default Ember.Mixin.create({
+
+    // Gives page numbers to the surrounding 9 pages.
     pages: function() {
-        var availablePages = this.get('availablePages');
         var pages = [];
-        for (var i = 0; i < availablePages; i++) {
+        var currentPage = this.get('currentPage');
+        var availablePages = this.get('availablePages');
+        var lowerBound = 0;
+        var upperBound = 0;
+
+        // Always show the same number of pages even if we're
+        // at the beginning or at the end of the list.
+        if (availablePages - currentPage < Math.ceil(VIEWABLE_PAGES / 2)) {
+            lowerBound = Math.max(0, availablePages - VIEWABLE_PAGES);
+            upperBound = availablePages;
+        } else if (currentPage <= Math.ceil(VIEWABLE_PAGES / 2)) {
+            lowerBound = 0;
+            upperBound = Math.min(availablePages, VIEWABLE_PAGES);
+        } else {
+            lowerBound = currentPage - Math.ceil(VIEWABLE_PAGES / 2);
+            upperBound = currentPage + Math.floor(VIEWABLE_PAGES / 2);
+        }
+        for (var i = lowerBound; i < upperBound; i++) {
             pages.push(i + 1);
         }
         return pages;
-    }.property('availablePages'),
+    }.property('currentPage', 'availablePages'),
 
     currentPage: function() {
         return parseInt(this.get('selectedPage'), 10) || 1;
diff --git a/app/routes/crates.js b/app/routes/crates.js
index 65bea200769..52153078d99 100644
--- a/app/routes/crates.js
+++ b/app/routes/crates.js
@@ -8,6 +8,12 @@ export default Ember.Route.extend({
     },
 
     model: function(params) {
+        // The backend throws an error if the letter param is
+        // empty or null.
+        if(!params.letter) {
+            delete params.letter;
+        }
+
         return this.store.find('crate', params);
     },
 });
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 05320c38563..4a7d5da8967 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -19,7 +19,9 @@
     </div>
 
     <div class='nav'>
-        {{#link-to "crates"}}Browse All Crates{{/link-to}}
+        {{#link-to "crates" (query-params letter="null" page=1)}}
+            Browse All Crates
+        {{/link-to}}
         <span class="sep">|</span>
         {{#if session.currentUser}}
             <div class='dropdown-container'>
diff --git a/app/templates/crates.hbs b/app/templates/crates.hbs
index 21d24dee923..a7dd4fb85e3 100644
--- a/app/templates/crates.hbs
+++ b/app/templates/crates.hbs
@@ -3,7 +3,9 @@
         <img class='logo' src="/assets/crate.png"/>
         <h1>All Crates</h1>
     </div>
-    <h2>starting with '{{ letter }}'</h2>
+    {{#if letter}}
+        <h2>starting with '{{ letter }}'</h2>
+    {{/if}}
 </div>
 
 <div id='selection'>
@@ -12,7 +14,7 @@
             {{ this }}
         {{/link-to}}
     {{/each}}
-    {{view Ember.Select content=alphabet value=letter}}
+    {{view Ember.Select content=alphabet value=letter prompt="Filter by the letter..."}}
 </div>
 
 <div id='results'>
@@ -35,12 +37,12 @@
             </a>
             <ul {{bind-attr class='showSortBy:open :dropdown'}}>
                 <li>
-                    {{#link-to 'crates' (query-params sort="alpha")}}
+                    {{#link-to 'crates' (query-params page=1 sort="alpha")}}
                         Alphabetical
                     {{/link-to}}
                 </li>
                 <li>
-                    {{#link-to 'crates' (query-params sort="downloads")}}
+                    {{#link-to 'crates' (query-params page=1 sort="downloads")}}
                         Downloads
                     {{/link-to}}
                 </li>