diff --git a/cmd/pkgserver/ui/index.html b/cmd/pkgserver/ui/index.html
index 3b5cc4c..3cd13a6 100644
--- a/cmd/pkgserver/ui/index.html
+++ b/cmd/pkgserver/ui/index.html
@@ -14,12 +14,18 @@
 </table>
 <p>Showing entries <span id="entry-counter"></span>.</p>
 <span class="bottom-nav"><a href="javascript:prevPage()">&laquo; Previous</a> <span id="page-number">1</span> <a href="javascript:nextPage()">Next &raquo;</a></span>
-<span><label for="count">Entries per page:</label><select name="count" id="count">
+<span><label for="count">Entries per page: </label><select name="count" id="count">
     <option value="10">10</option>
     <option value="25">25</option>
     <option value="50">50</option>
     <option value="100">100</option>
 </select></span>
+<span><label for="sort">Sort by: </label><select name="sort" id="sort">
+    <option value="0">Definition (ascending)</option>
+    <option value="1">Definition (descending)</option>
+    <option value="2">Name (ascending)</option>
+    <option value="3">Name (descending)</option>
+</select></span>
 </body>
 <footer>
     <p>&copy;<a href="https://hakurei.app/">Hakurei</a> (<span id="hakurei-version">unknown</span>). Licensed under the MIT license.</p>
diff --git a/cmd/pkgserver/ui/static/index.js b/cmd/pkgserver/ui/static/index.js
index 92ca877..cc98b13 100644
--- a/cmd/pkgserver/ui/static/index.js
+++ b/cmd/pkgserver/ui/static/index.js
@@ -27,8 +27,8 @@ class InfoPayload {
 }
 async function infoRequest() {
     const res = await fetch(`${ENDPOINT}/info`);
-    const res_1 = await res.json();
-    return res_1;
+    const payload = await res.json();
+    return payload;
 }
 class GetPayload {
     count;
@@ -43,36 +43,27 @@ var SortOrders;
 })(SortOrders || (SortOrders = {}));
 async function getRequest(limit, index, sort) {
     const res = await fetch(`${ENDPOINT}/get?limit=${limit}&index=${index}&sort=${sort.valueOf()}`);
-    const res_1 = await res.json();
-    return res_1;
+    const payload = await res.json();
+    return payload;
 }
 class State {
     entriesPerPage = 10;
-    currentPage = 1;
     entryIndex = 0;
     maxEntries = 0;
+    sort = SortOrders.DeclarationAscending;
     getEntriesPerPage() {
         return this.entriesPerPage;
     }
     setEntriesPerPage(entriesPerPage) {
         this.entriesPerPage = entriesPerPage;
-        if (this.currentPage > this.getMaxPage()) {
-            this.setCurrentPage(this.getMaxPage());
-        }
-    }
-    getCurrentPage() {
-        return this.currentPage;
-    }
-    setCurrentPage(page) {
-        this.currentPage = page;
-        this.setEntryIndex((this.getCurrentPage() - 1) * this.getEntriesPerPage());
-        document.getElementById("page-number").innerText = String(this.getCurrentPage());
+        this.setEntryIndex(Math.floor(this.getEntryIndex() / entriesPerPage) * entriesPerPage);
     }
     getEntryIndex() {
         return this.entryIndex;
     }
     setEntryIndex(entryIndex) {
         this.entryIndex = entryIndex;
+        this.updatePage();
         this.updateRange();
         this.updateListings();
     }
@@ -82,15 +73,23 @@ class State {
     setMaxEntries(max) {
         this.maxEntries = max;
     }
-    getMaxPage() {
-        return Math.ceil(this.getMaxEntries() / this.getEntriesPerPage());
+    getSortOrder() {
+        return this.sort;
+    }
+    setSortOrder(sortOrder) {
+        this.sort = sortOrder;
+        this.setEntryIndex(0);
+    }
+    updatePage() {
+        let page = Math.ceil(((this.getEntryIndex() + this.getEntriesPerPage()) - 1) / this.getEntriesPerPage());
+        document.getElementById("page-number").innerText = String(page);
     }
     updateRange() {
         let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries());
         document.getElementById("entry-counter").innerText = `${this.getEntryIndex() + 1}-${max} of ${this.getMaxEntries()}`;
     }
     updateListings() {
-        getRequest(this.getEntriesPerPage(), this.entryIndex, 0)
+        getRequest(this.getEntriesPerPage(), this.getEntryIndex(), this.getSortOrder())
             .then(res => {
             let table = document.getElementById("pkg-list");
             table.innerHTML = '';
@@ -102,16 +101,12 @@ class State {
 }
 let STATE;
 function prevPage() {
-    let current = STATE.getCurrentPage();
-    if (current > 1) {
-        STATE.setCurrentPage(STATE.getCurrentPage() - 1);
-    }
+    let index = STATE.getEntryIndex();
+    STATE.setEntryIndex(Math.max(0, index - STATE.getEntriesPerPage()));
 }
 function nextPage() {
-    let current = STATE.getCurrentPage();
-    if (current < STATE.getMaxPage()) {
-        STATE.setCurrentPage(STATE.getCurrentPage() + 1);
-    }
+    let index = STATE.getEntryIndex();
+    STATE.setEntryIndex(Math.min((Math.ceil(STATE.getMaxEntries() / STATE.getEntriesPerPage()) * STATE.getEntriesPerPage()) - STATE.getEntriesPerPage(), index + STATE.getEntriesPerPage()));
 }
 function escapeHtml(str) {
     return str
@@ -133,4 +128,7 @@ document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("count").addEventListener("change", (event) => {
         STATE.setEntriesPerPage(parseInt(event.target.value));
     });
+    document.getElementById("sort").addEventListener("change", (event) => {
+        STATE.setSortOrder(parseInt(event.target.value));
+    });
 });
diff --git a/cmd/pkgserver/ui/static/index.ts b/cmd/pkgserver/ui/static/index.ts
index 18019bc..889812a 100644
--- a/cmd/pkgserver/ui/static/index.ts
+++ b/cmd/pkgserver/ui/static/index.ts
@@ -29,8 +29,8 @@ class InfoPayload {
 
 async function infoRequest(): Promise<InfoPayload> {
     const res = await fetch(`${ENDPOINT}/info`)
-    const res_1 = await res.json()
-    return res_1 as InfoPayload
+    const payload = await res.json()
+    return payload as InfoPayload
 }
 class GetPayload {
     count: number
@@ -45,36 +45,28 @@ enum SortOrders {
 }
 async function getRequest(limit: number, index: number, sort: SortOrders): Promise<GetPayload> {
     const res = await fetch(`${ENDPOINT}/get?limit=${limit}&index=${index}&sort=${sort.valueOf()}`)
-    const res_1 = await res.json()
-    return res_1 as GetPayload
+    const payload = await res.json()
+    return payload as GetPayload
 }
 class State {
     entriesPerPage: number = 10
-    currentPage: number = 1
     entryIndex: number = 0
     maxEntries: number = 0
+    sort: SortOrders = SortOrders.DeclarationAscending
+
     getEntriesPerPage(): number {
         return this.entriesPerPage
     }
     setEntriesPerPage(entriesPerPage: number) {
         this.entriesPerPage = entriesPerPage
-        if (this.currentPage > this.getMaxPage()) {
-            this.setCurrentPage(this.getMaxPage())
-        }
-    }
-    getCurrentPage(): number {
-        return this.currentPage
-    }
-    setCurrentPage(page: number) {
-        this.currentPage = page
-        this.setEntryIndex((this.getCurrentPage() - 1) * this.getEntriesPerPage())
-        document.getElementById("page-number").innerText = String(this.getCurrentPage())
+        this.setEntryIndex(Math.floor(this.getEntryIndex() / entriesPerPage) * entriesPerPage)
     }
     getEntryIndex(): number {
         return this.entryIndex
     }
     setEntryIndex(entryIndex: number) {
         this.entryIndex = entryIndex
+        this.updatePage()
         this.updateRange()
         this.updateListings()
     }
@@ -84,15 +76,23 @@ class State {
     setMaxEntries(max: number) {
         this.maxEntries = max
     }
-    getMaxPage(): number {
-        return Math.ceil(this.getMaxEntries() / this.getEntriesPerPage())
+    getSortOrder(): SortOrders {
+        return this.sort
+    }
+    setSortOrder(sortOrder: SortOrders) {
+        this.sort = sortOrder
+        this.setEntryIndex(0)
+    }
+    updatePage() {
+        let page = Math.ceil(((this.getEntryIndex() + this.getEntriesPerPage()) - 1) / this.getEntriesPerPage())
+        document.getElementById("page-number").innerText = String(page)
     }
     updateRange() {
         let max = Math.min(this.getEntryIndex() + this.getEntriesPerPage(), this.getMaxEntries())
         document.getElementById("entry-counter").innerText = `${this.getEntryIndex() + 1}-${max} of ${this.getMaxEntries()}`
     }
     updateListings() {
-        getRequest(this.getEntriesPerPage(), this.entryIndex, 0)
+        getRequest(this.getEntriesPerPage(), this.getEntryIndex(), this.getSortOrder())
             .then(res => {
                 let table = document.getElementById("pkg-list")
                 table.innerHTML = ''
@@ -107,16 +107,12 @@ class State {
 let STATE: State
 
 function prevPage() {
-    let current = STATE.getCurrentPage()
-    if (current > 1) {
-        STATE.setCurrentPage(STATE.getCurrentPage() - 1)
-    }
+    let index = STATE.getEntryIndex()
+    STATE.setEntryIndex(Math.max(0, index - STATE.getEntriesPerPage()))
 }
 function nextPage() {
-    let current = STATE.getCurrentPage()
-    if (current < STATE.getMaxPage()) {
-        STATE.setCurrentPage(STATE.getCurrentPage() + 1)
-    }
+    let index = STATE.getEntryIndex()
+    STATE.setEntryIndex(Math.min((Math.ceil(STATE.getMaxEntries() / STATE.getEntriesPerPage()) * STATE.getEntriesPerPage()) - STATE.getEntriesPerPage(), index + STATE.getEntriesPerPage()))
 }
 
 function escapeHtml(str: string): string {
@@ -141,4 +137,7 @@ document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("count").addEventListener("change", (event) => {
         STATE.setEntriesPerPage(parseInt((event.target as HTMLSelectElement).value))
     })
+    document.getElementById("sort").addEventListener("change", (event) => {
+        STATE.setSortOrder(parseInt((event.target as HTMLSelectElement).value))
+    })
 })
\ No newline at end of file