diff --git a/octoprint/static/js/ui.js b/octoprint/static/js/ui.js
index 9cd0979..1fe7aa8 100644
--- a/octoprint/static/js/ui.js
+++ b/octoprint/static/js/ui.js
@@ -452,6 +452,50 @@ function GcodeFilesViewModel() {
     var self = this;
 
     self.files = ko.observableArray([]);
+    self.pageSize = ko.observable(CONFIG_FILESPERPAGE);
+    self.currentPage = ko.observable(0);
+
+    self.paginatedFiles = ko.dependentObservable(function() {
+        if (self.files() == undefined) {
+            return [];
+        } else {
+            var from = Math.max(self.currentPage() * self.pageSize(), 0);
+            var to = Math.min(from + self.pageSize(), self.files().length);
+            return self.files().slice(from, to);
+        }
+    })
+    self.lastPage = ko.dependentObservable(function() {
+        return Math.ceil(self.files().length / self.pageSize()) - 1;
+    })
+    self.pages = ko.dependentObservable(function() {
+        var pages = [];
+        if (self.lastPage() < 7) {
+            for (var i = 0; i < self.lastPage() + 1; i++) {
+                pages.push({ number: i, text: i+1 });
+            }
+        } else {
+            pages.push({ number: 0, text: 1 });
+            if (self.currentPage() < 5) {
+                for (var i = 1; i < 5; i++) {
+                    pages.push({ number: i, text: i+1 });
+                }
+                pages.push({ number: -1, text: "…"});
+            } else if (self.currentPage() > self.lastPage() - 5) {
+                pages.push({ number: -1, text: "…"});
+                for (var i = self.lastPage() - 4; i < self.lastPage(); i++) {
+                    pages.push({ number: i, text: i+1 });
+                }
+            } else {
+                pages.push({ number: -1, text: "…"});
+                for (var i = self.currentPage() - 1; i <= self.currentPage() + 1; i++) {
+                    pages.push({ number: i, text: i+1 });
+                }
+                pages.push({ number: -1, text: "…"});
+            }
+            pages.push({ number: self.lastPage(), text: self.lastPage() + 1})
+        }
+        return pages;
+    })
 
     self.requestData = function() {
         $.ajax({
@@ -465,11 +509,17 @@ function GcodeFilesViewModel() {
     }
 
     self.fromResponse = function(response) {
-        self.files(response.files);
+        var sortedFiles = response.files;
+        sortedFiles.sort(function(a, b) {
+            if (a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) return -1;
+            if (a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase()) return 1;
+            return 0;
+        });
+
+        self.files(sortedFiles);
     }
 
-    self.loadFile = function() {
-        var filename = this.name;
+    self.loadFile = function(filename) {
         $.ajax({
             url: AJAX_BASEURL + "gcodefiles/load",
             type: "POST",
@@ -478,8 +528,7 @@ function GcodeFilesViewModel() {
         })
     }
 
-    self.removeFile = function() {
-        var filename = this.name;
+    self.removeFile = function(filename) {
         $.ajax({
             url: AJAX_BASEURL + "gcodefiles/delete",
             type: "POST",
@@ -488,6 +537,23 @@ function GcodeFilesViewModel() {
             success: self.fromResponse
         })
     }
+
+    self.changePage = function(newPage) {
+        if (newPage < 0 || newPage > self.lastPage())
+            return;
+        self.currentPage(newPage);
+    }
+    self.prevPage = function() {
+        if (self.currentPage() > 0) {
+            self.currentPage(self.currentPage() - 1);
+        }
+    }
+    self.nextPage = function() {
+        if (self.currentPage() < self.lastPage()) {
+            self.currentPage(self.currentPage() + 1);
+        }
+    }
+
 }
 
 function WebcamViewModel() {
diff --git a/octoprint/templates/index.html b/octoprint/templates/index.html
index 3dfd227..ef1cd16 100644
--- a/octoprint/templates/index.html
+++ b/octoprint/templates/index.html
@@ -11,6 +11,7 @@
 
         <script lang="javascript">
             var AJAX_BASEURL = '/ajax/';
+            var CONFIG_FILESPERPAGE = 5;
 
             var WEB_SOCKET_SWF_LOCATION = "{{ url_for('static', filename='js/WebSocketMain.swf') }}";
             var WEB_SOCKET_DEBUG = true;
@@ -85,14 +86,25 @@
                                             <th class="gcode_files_action">Action</th>
                                         </tr>
                                     </thead>
-                                    <tbody data-bind="foreach: files">
-                                        <tr data-bind="attr: {title: name}, event: {dblclick: $parent.loadFile}">
+                                    <tbody data-bind="foreach: paginatedFiles">
+                                        <tr data-bind="attr: {title: name}">
                                             <td class="gcode_files_name" data-bind="text: name"></td>
                                             <td class="gcode_files_size" data-bind="text: size"></td>
-                                            <td class="gcode_files_action"><a href="#" class="icon-trash" data-bind="click: $parent.removeFile"></a>&nbsp;|&nbsp;<a href="#" class="icon-folder-open" data-bind="click: $parent.loadFile"></a></td>
+                                            <td class="gcode_files_action"><a href="#" class="icon-trash" data-bind="click: function() { $root.removeFile($data.name); }"></a>&nbsp;|&nbsp;<a href="#" class="icon-folder-open" data-bind="click: function() { $root.loadFile($data.name); }"></a></td>
                                         </tr>
                                     </tbody>
                                 </table>
+                                <div class="pagination pagination-mini pagination-centered">
+                                    <ul>
+                                        <li data-bind="css: {disabled: currentPage() === 0}"><a href="#" data-bind="click: prevPage">«</a></li>
+                                    </ul>
+                                    <ul data-bind="foreach: pages">
+                                        <li data-bind="css: { active: $data.number === $root.currentPage(), disabled: $data.number === -1 }"><a href="#" data-bind="text: $data.text, click: function() { $root.changePage($data.number); }"></a></li>
+                                    </ul>
+                                    <ul>
+                                        <li data-bind="css: {disabled: currentPage() === lastPage()}"><a href="#" data-bind="click: nextPage">»</a></li>
+                                    </ul>
+                                </div>
                                 <span class="btn btn-primary btn-block fileinput-button" style="margin-bottom: 10px">
                                     <i class="icon-upload icon-white"></i>
                                     <span>Upload</span>
@@ -101,6 +113,9 @@
                                 <div id="gcode_upload_progress" class="progress" style="width: 100%;">
                                     <div class="bar" style="width: 0%"></div>
                                 </div>
+                                <div>
+                                    <small>Hint: You can also drag and drop files on this page to upload them.</small>
+                                </div>
                             </div>
                         </div>
                     </div>