diff --git a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/+page.vue b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/+page.vue
index 5c293218..ac85977c 100644
--- a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/+page.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/+page.vue
@@ -343,11 +343,11 @@ const flux = reactive({
     <div class="w-full bg-white dark:bg-slate-800 shadow-md rounded">
       <XTable :columns="flux.colspanCols" :rows="flux.colspanRows">
         <template #spanable>
-          <tr>
-            <td colspan="2" class="px-6 py-3">Sum:</td>
-            <td class="px-6 py-3">108</td>
-            <td></td>
-          </tr>
+          <XTable.Row>
+            <XTable.Cell colspan="2">Sum:</XTable.Cell>
+            <XTable.Cell>108</XTable.Cell>
+            <XTable.Cell />
+          </XTable.Row>
         </template>
       </XTable>
     </div>
diff --git a/ui/src/components/table/Table.vue b/ui/src/components/table/Table.vue
index 65a60dd8..4bec93d7 100644
--- a/ui/src/components/table/Table.vue
+++ b/ui/src/components/table/Table.vue
@@ -305,15 +305,15 @@ watchEffect(
                 <template v-if="typeof col.sortable === 'boolean' ? col.sortable : true">
                   <div
                     v-if="flux.sortField === col.key && flux.sortDirection === 'desc'"
-                    class="i-ph-sort-descending-bold size-5"
+                    class="i-tabler-sort-descending size-5"
                   ></div>
 
                   <div
                     v-else-if="flux.sortField === col.key && flux.sortDirection === 'asc'"
-                    class="i-ph-sort-ascending-bold size-5"
+                    class="i-tabler-sort-ascending size-5"
                   ></div>
 
-                  <div v-else class="i-flowbite-sort-outline size-5"></div>
+                  <div v-else class="i-tabler-arrows-sort size-5"></div>
                 </template>
               </div>
             </Column>
diff --git a/ui/src/utilities/static-table/staticTable.ts b/ui/src/utilities/static-table/staticTable.ts
index dff61334..a242320a 100644
--- a/ui/src/utilities/static-table/staticTable.ts
+++ b/ui/src/utilities/static-table/staticTable.ts
@@ -1,5 +1,5 @@
 import chunk from 'lodash/chunk';
-import sortBy from 'lodash/sortBy';
+import orderBy from 'lodash/orderBy';
 
 export default <T extends Record<string, any>>(
   rows: T[],
@@ -10,11 +10,11 @@ export default <T extends Record<string, any>>(
   let arr = [...rows];
 
   if (control.field && control.direction === 'asc') {
-    arr = sortBy(arr, (item) => item[control.field]);
+    arr = orderBy(arr, control.field, 'asc');
   }
 
   if (control.field && control.direction === 'desc') {
-    arr = sortBy(arr, (item) => item[control.field]).reverse();
+    arr = orderBy(arr, control.field, 'desc');
   }
 
   const chunked = chunk(arr, control.rows);