1 files changed, 21 insertions, 16 deletions
diff --git a/frontend/src/pages/System/Status/table.tsx b/frontend/src/pages/System/Status/table.tsx
index 3b8a87e8a..7dad6757f 100644
--- a/frontend/src/pages/System/Status/table.tsx
+++ b/frontend/src/pages/System/Status/table.tsx
@@ -1,30 +1,35 @@
-import { SimpleTable } from "@/components";
-import { useTableStyles } from "@/styles";
-import { Text } from "@mantine/core";
 import { FunctionComponent, useMemo } from "react";
-import { Column } from "react-table";
+import { Text } from "@mantine/core";
+import { ColumnDef } from "@tanstack/react-table";
+import SimpleTable from "@/components/tables/SimpleTable";
 
 interface Props {
-  health: readonly System.Health[];
+  health: System.Health[];
 }
 
 const Table: FunctionComponent<Props> = ({ health }) => {
-  const columns: Column<System.Health>[] = useMemo<Column<System.Health>[]>(
+  const columns = useMemo<ColumnDef<System.Health>[]>(
     () => [
       {
-        Header: "Object",
-        accessor: "object",
-        Cell: ({ value }) => {
-          const { classes } = useTableStyles();
-          return <Text className={classes.noWrap}>{value}</Text>;
+        header: "Object",
+        accessorKey: "object",
+        cell: ({
+          row: {
+            original: { object },
+          },
+        }) => {
+          return <Text className="table-no-wrap">{object}</Text>;
         },
       },
       {
-        Header: "Issue",
-        accessor: "issue",
-        Cell: ({ value }) => {
-          const { classes } = useTableStyles();
-          return <Text className={classes.primary}>{value}</Text>;
+        header: "Issue",
+        accessorKey: "issue",
+        cell: ({
+          row: {
+            original: { issue },
+          },
+        }) => {
+          return <Text className="table-primary">{issue}</Text>;
         },
       },
     ],