diff --git a/frontend/src/lib/components/widgets/boxlist.svelte b/frontend/src/lib/components/widgets/boxlist.svelte
index 7e4d17c..2add630 100644
--- a/frontend/src/lib/components/widgets/boxlist.svelte
+++ b/frontend/src/lib/components/widgets/boxlist.svelte
@@ -1,5 +1,14 @@
 <script lang="ts">
     export let col: Column
+
+    // A function to compare first names and sort the array
+    const sortByFirstName = (a, b) => {
+        const nameA = a.name.split(" ")[0] // Extracts the first name from "First Last"
+        const nameB = b.name.split(" ")[0]
+        return nameA.localeCompare(nameB)
+    }
+
+    col.boxList.boxes.sort(sortByFirstName) // Sorts the array in place
 </script>
 
 <div class="boxList">
@@ -14,7 +23,6 @@
     @import "../../assets/css/main.less";
 
     .boxList {
-     
         display: flex;
         flex-wrap: wrap;
         gap: 20px;
@@ -24,6 +32,5 @@
             color: @font-color-secondary;
             font-weight: bold;
         }
-   
     }
 </style>