diff --git a/app.py b/app.py
index 72f177e..8b8a5f7 100644
--- a/app.py
+++ b/app.py
@@ -261,6 +261,14 @@ def make_overview_rows(box: Box):
     return rows
 
 
+def box_sort_key(box: Box):
+    return (
+        (box.slot_prefix or "").upper(),
+        box.start_number if box.start_number is not None else 0,
+        box.name or "",
+    )
+
+
 def render_box_page(box: Box, error: str = "", notice: str = ""):
     slots = slot_data_for_box(box)
     bag_rows = bag_rows_for_box(box) if box.box_type == "bag" else []
@@ -278,7 +286,8 @@ def render_box_page(box: Box, error: str = "", notice: str = ""):
 
 @app.route("/")
 def index():
-    boxes = Box.query.order_by(Box.id.asc()).all()
+    boxes = Box.query.all()
+    boxes.sort(key=box_sort_key)
     groups = {key: [] for key in BOX_TYPES.keys()}
 
     for box in boxes:
diff --git a/static/css/style.css b/static/css/style.css
index 75c777d..161d067 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -72,8 +72,9 @@ body {
 
 .box-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-template-columns: repeat(auto-fill, 300px);
     gap: 14px;
+    justify-content: start;
 }
 
 .group-panel {
@@ -118,6 +119,11 @@ body {
     box-shadow: 0 3px 12px rgba(17, 32, 49, 0.05);
 }
 
+.box-card {
+    width: 300px;
+    min-height: 260px;
+}
+
 .box-card h3 {
     margin: 0 0 6px;
 }
@@ -280,6 +286,15 @@ td {
         align-items: flex-start;
     }
 
+    .box-list {
+        grid-template-columns: 1fr;
+    }
+
+    .box-card {
+        width: 100%;
+        min-height: auto;
+    }
+
     .slot-grid,
     .slot-grid-14,
     .slot-grid-bag {