diff --git a/website/public/locales/en/leaderboard.json b/website/public/locales/en/leaderboard.json
index c2dd0832..d1d7ed92 100644
--- a/website/public/locales/en/leaderboard.json
+++ b/website/public/locales/en/leaderboard.json
@@ -7,5 +7,6 @@
   "rank": "Rank",
   "score": "Score",
   "user": "User",
-  "weekly": "Weekly"
+  "weekly": "Weekly",
+  "prompt_tasks": "Prompt Tasks"
 }
diff --git a/website/src/components/DataTable.tsx b/website/src/components/DataTable.tsx
index 466393eb..d29a2813 100644
--- a/website/src/components/DataTable.tsx
+++ b/website/src/components/DataTable.tsx
@@ -1,8 +1,6 @@
 import {
   Box,
   Button,
-  Card,
-  CardBody,
   Flex,
   FormControl,
   FormLabel,
@@ -49,6 +47,7 @@ export type DataTableProps<T> = {
   onFilterChange?: (items: FilterItem[]) => void;
   disableNext?: boolean;
   disablePrevious?: boolean;
+  disablePagination?: boolean;
 };
 
 export const DataTable = <T,>({
@@ -61,6 +60,7 @@ export const DataTable = <T,>({
   onFilterChange,
   disableNext,
   disablePrevious,
+  disablePagination,
 }: DataTableProps<T>) => {
   const { getHeaderGroups, getRowModel } = useReactTable<T>({
     data,
@@ -79,8 +79,8 @@ export const DataTable = <T,>({
     onFilterChange(newValues);
   };
   return (
-    <Card>
-      <CardBody>
+    <>
+      {disablePagination && (
         <Flex mb="2">
           <Button onClick={onPreviousClick} disabled={disablePrevious}>
             Previous
@@ -90,42 +90,42 @@ export const DataTable = <T,>({
             Next
           </Button>
         </Flex>
-        <TableContainer>
-          <Table variant="simple">
-            <TableCaption>{caption}</TableCaption>
-            <Thead>
-              {getHeaderGroups().map((headerGroup) => (
-                <Tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <Th key={header.id}>
-                      <Box display="flex" alignItems="center">
-                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                        {(header.column.columnDef as DataTableColumnDef<T>).filterable && (
-                          <FilterModal
-                            value={filterValues.find((value) => value.id === header.id)?.value ?? ""}
-                            onChange={(value) => handleFilterChange({ id: header.id, value })}
-                            label={flexRender(header.column.columnDef.header, header.getContext())}
-                          ></FilterModal>
-                        )}
-                      </Box>
-                    </Th>
-                  ))}
-                </Tr>
-              ))}
-            </Thead>
-            <Tbody>
-              {getRowModel().rows.map((row) => (
-                <Tr key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
-                    <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
-                  ))}
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </TableContainer>
-      </CardBody>
-    </Card>
+      )}
+      <TableContainer>
+        <Table variant="simple">
+          <TableCaption>{caption}</TableCaption>
+          <Thead>
+            {getHeaderGroups().map((headerGroup) => (
+              <Tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <Th key={header.id}>
+                    <Box display="flex" alignItems="center">
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                      {(header.column.columnDef as DataTableColumnDef<T>).filterable && (
+                        <FilterModal
+                          value={filterValues.find((value) => value.id === header.id)?.value ?? ""}
+                          onChange={(value) => handleFilterChange({ id: header.id, value })}
+                          label={flexRender(header.column.columnDef.header, header.getContext())}
+                        ></FilterModal>
+                      )}
+                    </Box>
+                  </Th>
+                ))}
+              </Tr>
+            ))}
+          </Thead>
+          <Tbody>
+            {getRowModel().rows.map((row) => (
+              <Tr key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </>
   );
 };
 
diff --git a/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx b/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx
index 7886784a..a65b7c2a 100644
--- a/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx
+++ b/website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx
@@ -1,90 +1,61 @@
-import { Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
+import { CircularProgress } from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
 import { useTranslation } from "next-i18next";
 import React, { useMemo } from "react";
-import { useTable } from "react-table";
 import { get } from "src/lib/api";
-import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
+import { LeaderboardEntity, LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
 import useSWRImmutable from "swr/immutable";
 
-const getColumns = (t) => [
-  {
-    Header: t("rank"),
-    accessor: "rank",
-    style: { width: "90px" },
-  },
-  {
-    Header: t("score"),
-    accessor: "leader_score",
-    style: { width: "90px" },
-  },
-  {
-    Header: t("user"),
-    accessor: "display_name",
-  },
-];
+import { DataTable } from "../DataTable";
+
+const columnHelper = createColumnHelper<LeaderboardEntity>();
 
 /**
  * Presents a grid of leaderboard entries with more detailed information.
  */
 const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame }) => {
-  const { t } = useTranslation(["leaderboard", "common"]);
-  const { data: reply } = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
+  const { t } = useTranslation("leaderboard");
+  const {
+    data: reply,
+    isLoading,
+    error,
+  } = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
     revalidateOnMount: true,
   });
 
-  const columns = useMemo(() => getColumns(t), [t]);
-
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
-    columns,
-    data: reply?.leaderboard ?? [],
-  });
-
-  const backgroundColor = useColorModeValue("white", "gray.800");
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("rank", {
+        header: t("rank"),
+      }),
+      columnHelper.accessor("display_name", {
+        header: t("user"),
+      }),
+      columnHelper.accessor("leader_score", {
+        header: t("score"),
+      }),
+      columnHelper.accessor("prompts", {
+        header: t("pro"),
+      }),
+    ],
+    [t]
+  );
 
   const lastUpdated = useMemo(() => {
     const val = new Date(reply?.last_updated);
     return t("last_updated_at", { val, formatParams: { val: { dateStyle: "full", timeStyle: "short" } } });
   }, [t, reply?.last_updated]);
+  console.log(reply, isLoading);
 
-  if (!reply) {
-    return null;
+  if (isLoading) {
+    return <CircularProgress isIndeterminate></CircularProgress>;
   }
 
-  return (
-    <TableContainer>
-      <Table {...getTableProps()}>
-        <Thead bg={backgroundColor}>
-          {headerGroups.map((headerGroup, idx) => (
-            <Tr key={idx} {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column) => (
-                <Th {...column.getHeaderProps([{ style: column.style }])} key={column.id}>
-                  {column.render("Header")}
-                </Th>
-              ))}
-            </Tr>
-          ))}
-        </Thead>
+  if (error) {
+    return <span>Unable to load leaderboard</span>;
+  }
 
-        <Tbody {...getTableBodyProps()}>
-          {rows.map((row) => {
-            prepareRow(row);
-            return (
-              <Tr key={row.id} {...row.getRowProps()}>
-                {row.cells.map((cell, idx) => {
-                  return (
-                    <Td key={row.id + idx} {...cell.getCellProps([{ style: cell.column.style }])}>
-                      {cell.render("Cell")}
-                    </Td>
-                  );
-                })}
-              </Tr>
-            );
-          })}
-        </Tbody>
-      </Table>
-      <Text p="2">{lastUpdated}</Text>
-    </TableContainer>
-  );
+  return <DataTable data={reply?.leaderboard || []} columns={columns} caption={lastUpdated}></DataTable>;
 };
 
 export { LeaderboardGridCell };
diff --git a/website/src/pages/leaderboard.tsx b/website/src/pages/leaderboard.tsx
index e413366f..052c94ad 100644
--- a/website/src/pages/leaderboard.tsx
+++ b/website/src/pages/leaderboard.tsx
@@ -1,4 +1,4 @@
-import { Box, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import { Box, Card, CardBody, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 import Head from "next/head";
 import { useTranslation } from "next-i18next";
 import { getDashboardLayout } from "src/components/Layout";
@@ -18,29 +18,33 @@ const Leaderboard = () => {
         <Heading fontSize="2xl" fontWeight="bold" pb="4">
           {t("leaderboard")}
         </Heading>
-        <Tabs isFitted isLazy>
-          <TabList>
-            <Tab>{t("daily")}</Tab>
-            <Tab>{t("weekly")}</Tab>
-            <Tab>{t("monthly")}</Tab>
-            <Tab>{t("overall")}</Tab>
-          </TabList>
+        <Card>
+          <CardBody>
+            <Tabs isFitted isLazy>
+              <TabList mb="4">
+                <Tab>{t("daily")}</Tab>
+                <Tab>{t("weekly")}</Tab>
+                <Tab>{t("monthly")}</Tab>
+                <Tab>{t("overall")}</Tab>
+              </TabList>
 
-          <TabPanels>
-            <TabPanel p="0">
-              <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
-            </TabPanel>
-            <TabPanel p="0">
-              <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.week} />
-            </TabPanel>
-            <TabPanel p="0">
-              <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.month} />
-            </TabPanel>
-            <TabPanel p="0">
-              <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.total} />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
+              <TabPanels>
+                <TabPanel p="0">
+                  <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
+                </TabPanel>
+                <TabPanel p="0">
+                  <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.week} />
+                </TabPanel>
+                <TabPanel p="0">
+                  <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.month} />
+                </TabPanel>
+                <TabPanel p="0">
+                  <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.total} />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </CardBody>
+        </Card>
       </Box>
     </>
   );