diff --git a/cmd/pkgserver/index.go b/cmd/pkgserver/index.go
index 154f03a..9d2c5c8 100644
--- a/cmd/pkgserver/index.go
+++ b/cmd/pkgserver/index.go
@@ -1,6 +1,7 @@
 package main
 
 import (
+	"cmp"
 	"errors"
 	"slices"
 	"strings"
@@ -14,6 +15,8 @@ const (
 	declarationDescending
 	nameAscending
 	nameDescending
+	sizeAscending
+	sizeDescending
 
 	sortOrderEnd = iota - 1
 )
@@ -91,5 +94,12 @@ func (index *packageIndex) populate(cache *pkg.Cache, report *rosa.Report) (err
 	index.sorts[nameDescending] = index.sorts[nameAscending]
 	slices.Reverse(index.sorts[nameDescending][:])
 
+	index.sorts[sizeAscending] = work
+	slices.SortFunc(index.sorts[sizeAscending][:], func(a, b *metadata) int {
+		return cmp.Compare(a.Size, b.Size)
+	})
+	index.sorts[sizeDescending] = index.sorts[sizeAscending]
+	slices.Reverse(index.sorts[sizeDescending][:])
+
 	return
 }
diff --git a/cmd/pkgserver/ui/index.html b/cmd/pkgserver/ui/index.html
index 3cd13a6..ec21a5f 100644
--- a/cmd/pkgserver/ui/index.html
+++ b/cmd/pkgserver/ui/index.html
@@ -16,15 +16,17 @@
 <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">
     <option value="10">10</option>
-    <option value="25">25</option>
+    <option value="20">20</option>
+    <option value="30">30</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>
+    <option value="4">Size (ascending)</option>
+    <option value="5">Size (descending)</option>
 </select></span>
 </body>
 <footer>
diff --git a/cmd/pkgserver/ui/static/index.js b/cmd/pkgserver/ui/static/index.js
index cc98b13..6a64e8c 100644
--- a/cmd/pkgserver/ui/static/index.js
+++ b/cmd/pkgserver/ui/static/index.js
@@ -1,5 +1,6 @@
 class PackageIndexEntry {
     name;
+    size;
     description;
     website;
     version;
@@ -7,6 +8,7 @@ class PackageIndexEntry {
 }
 function toHTML(entry) {
     let v = entry.version != null ? `<span>${escapeHtml(entry.version)}</span>` : "";
+    let s = entry.size != null ? `<p>Size: ${toByteSizeString(entry.size)} (${entry.size})</p>` : "";
     let d = entry.description != null ? `<p>${escapeHtml(entry.description)}</p>` : "";
     let w = entry.website != null ? `<a href="${encodeURI(entry.website)}">Website</a>` : "";
     let r = entry.report ? `Log (<a href=\"${encodeURI('/api/v1/status/' + entry.name)}\">View</a> | <a href=\"${encodeURI('/status/' + entry.name)}\">Download</a>)` : "";
@@ -14,11 +16,25 @@ function toHTML(entry) {
     row.innerHTML = `<td>
             <h2>${escapeHtml(entry.name)} ${v}</h2>
             ${d}
+            ${s}
             ${w}
             ${r}
         </td>`;
     return row;
 }
+function toByteSizeString(bytes) {
+    if (bytes < 1024)
+        return `${bytes}B`;
+    if (bytes < Math.pow(1024, 2))
+        return `${(bytes / 1024).toFixed(2)}kiB`;
+    if (bytes < Math.pow(1024, 3))
+        return `${(bytes / Math.pow(1024, 2)).toFixed(2)}MiB`;
+    if (bytes < Math.pow(1024, 4))
+        return `${(bytes / Math.pow(1024, 3)).toFixed(2)}GiB`;
+    if (bytes < Math.pow(1024, 5))
+        return `${(bytes / Math.pow(1024, 4)).toFixed(2)}TiB`;
+    return "not only is it big, it's large";
+}
 const API_VERSION = 1;
 const ENDPOINT = `/api/v${API_VERSION}`;
 class InfoPayload {
diff --git a/cmd/pkgserver/ui/static/index.ts b/cmd/pkgserver/ui/static/index.ts
index 889812a..18bbbfa 100644
--- a/cmd/pkgserver/ui/static/index.ts
+++ b/cmd/pkgserver/ui/static/index.ts
@@ -1,25 +1,37 @@
 class PackageIndexEntry {
     name: string
+    size: number | null
     description: string | null
     website: string | null
     version: string | null
     report:  boolean
 }
 function toHTML(entry: PackageIndexEntry): HTMLTableRowElement {
-    let v = entry.version != null ? `<span>${escapeHtml(entry.version)}</span>` : ""
-    let d = entry.description != null ? `<p>${escapeHtml(entry.description)}</p>` : ""
-    let w = entry.website != null ? `<a href="${encodeURI(entry.website)}">Website</a>` : ""
+    let v = entry.version !== null ? `<span>${escapeHtml(entry.version)}</span>` : ""
+    let s = entry.size !== null ? `<p>Size: ${toByteSizeString(entry.size)} (${entry.size})</p>` : ""
+    let d = entry.description !== null ? `<p>${escapeHtml(entry.description)}</p>` : ""
+    let w = entry.website !== null ? `<a href="${encodeURI(entry.website)}">Website</a>` : ""
     let r = entry.report ? `Log (<a href=\"${encodeURI('/api/v1/status/' + entry.name)}\">View</a> | <a href=\"${encodeURI('/status/' + entry.name)}\">Download</a>)` : ""
     let row = <HTMLTableRowElement>(document.createElement('tr'))
     row.innerHTML = `<td>
             <h2>${escapeHtml(entry.name)} ${v}</h2>
             ${d}
+            ${s}
             ${w}
             ${r}
         </td>`
     return row
 }
 
+function toByteSizeString(bytes: number): string {
+    if(bytes < 1024) return `${bytes}B`
+    if(bytes < Math.pow(1024, 2)) return `${(bytes/1024).toFixed(2)}kiB`
+    if(bytes < Math.pow(1024, 3)) return `${(bytes/Math.pow(1024, 2)).toFixed(2)}MiB`
+    if(bytes < Math.pow(1024, 4)) return `${(bytes/Math.pow(1024, 3)).toFixed(2)}GiB`
+    if(bytes < Math.pow(1024, 5)) return `${(bytes/Math.pow(1024, 4)).toFixed(2)}TiB`
+    return "not only is it big, it's large"
+}
+
 const API_VERSION = 1
 const ENDPOINT = `/api/v${API_VERSION}`
 class InfoPayload {