diff --git a/package-lock.json b/package-lock.json
index c40efb685..67c2f6f0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,6 +80,7 @@
         "react-router-dom": "^5.2.0",
         "react-share": "^4.2.0",
         "react-syntax-highlighter": "^15.4.3",
+        "react-table": "^7.8.0",
         "react-table-6": "^6.11.0",
         "react-tagsinput": "^3.19.0",
         "redux": "^4.1.2",
@@ -11036,6 +11037,19 @@
         "react": ">= 0.14.0"
       }
     },
+    "node_modules/react-table": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz",
+      "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0"
+      }
+    },
     "node_modules/react-table-6": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/react-table-6/-/react-table-6-6.11.0.tgz",
diff --git a/package.json b/package.json
index 3a104f89d..3b23bc9c2 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "react-router-dom": "^5.2.0",
     "react-share": "^4.2.0",
     "react-syntax-highlighter": "^15.4.3",
+    "react-table": "^7.8.0",
     "react-table-6": "^6.11.0",
     "react-tagsinput": "^3.19.0",
     "redux": "^4.1.2",
diff --git a/src/components/PaginationControl/PaginationControl.jsx b/src/components/PaginationControl/PaginationControl.jsx
new file mode 100644
index 000000000..dcc0bf6ea
--- /dev/null
+++ b/src/components/PaginationControl/PaginationControl.jsx
@@ -0,0 +1,75 @@
+export default function PaginationControl({
+  currentPage,
+  totalPages,
+  pageSize,
+  gotoPage,
+  setPageSize,
+}) {
+  const canPreviousPage = currentPage > 0;
+  const canNextPage = currentPage < totalPages - 1;
+
+  const previousPage = () => gotoPage(Math.max(currentPage - 1, 0));
+  const nextPage = () => gotoPage(Math.min(currentPage + 1, totalPages - 1));
+
+  return (
+    <div className="mr-mx-auto mr-flex mr-items-center mr-gap-3 mr-text-white">
+      <button
+        className="mr-button mr-button--small"
+        onClick={() => gotoPage(0)}
+        disabled={!canPreviousPage}
+      >
+        {"<< First"}
+      </button>
+      <button
+        className="mr-button mr-button--small"
+        onClick={() => previousPage()}
+        disabled={!canPreviousPage}
+      >
+        {"< Previous"}
+      </button>
+      <span>
+        {"Page "}
+        <input
+          className="mr-input mr-px-1 mr-py-0 mr-w-16"
+          type="number"
+          min={1}
+          max={totalPages}
+          defaultValue={currentPage + 1}
+          onChange={(e) => gotoPage(e.target.value ? Number(e.target.value) - 1 : 0)}
+        />
+        {" of "}
+        {totalPages}
+      </span>
+      <button
+        className="mr-button mr-button--small"
+        onClick={() => nextPage()}
+        disabled={!canNextPage}
+      >
+        {"Next >"}
+      </button>
+      <button
+        className="mr-button mr-button--small"
+        onClick={() => gotoPage(totalPages - 1)}
+        disabled={!canNextPage}
+      >
+        {"Last >>"}
+      </button>
+
+      {setPageSize && (
+        <select
+          className="mr-select mr-px-3"
+          value={pageSize}
+          onChange={(e) => {
+            setPageSize(Number(e.target.value));
+          }}
+        >
+          {[25, 50, 100].map((pageSize) => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize} per page
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/Sent/Sent.jsx b/src/pages/Sent/Sent.jsx
index 36d7d9ffa..ad87a8b91 100644
--- a/src/pages/Sent/Sent.jsx
+++ b/src/pages/Sent/Sent.jsx
@@ -1,20 +1,19 @@
 import { useEffect, useState } from "react";
 import { FormattedDate, FormattedTime, injectIntl } from "react-intl";
 import { Link } from "react-router-dom";
-import ReactTable from "react-table-6";
+import { usePagination, useSortBy, useTable } from "react-table";
 import WithCurrentUser from "../../components/HOCs/WithCurrentUser/WithCurrentUser";
-import { intlTableProps } from "../../components/IntlTable/IntlTable";
+import PaginationControl from "../../components/PaginationControl/PaginationControl";
 import CommentType from "../../services/Comment/CommentType";
 import HeaderSent from "./HeaderSent";
-import Notification from "./Notification";
 import { useSentComments } from "./SentCommentsHooks";
 
-const defaultSorted = {
+const DEFAULT_SORT_CRITERIA = {
   id: "created",
   desc: true,
 };
 
-const defaultPagination = {
+const DEFAULT_PAGINATION = {
   page: 0,
   pageSize: 25,
 };
@@ -22,9 +21,30 @@ const defaultPagination = {
 const Sent = (props) => {
   const [commentType, setCommentType] = useState(CommentType.TASK);
   const comments = useSentComments(commentType);
-  const [sortCriteria, setSortCriteria] = useState(defaultSorted);
-  const [pagination, setPagination] = useState(defaultPagination);
-  const [selectedComment, setSelectedComment] = useState(null);
+  const [sortCriteria, setSortCriteria] = useState(DEFAULT_SORT_CRITERIA);
+  const [pagination, setPagination] = useState(DEFAULT_PAGINATION);
+
+  const data = comments.data;
+  const columns = commentType === CommentType.TASK ? TASK_COLUMNS : CHALLENGE_COLUMNS;
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: { sortBy },
+  } = useTable(
+    {
+      data,
+      columns,
+      manualPagination: true,
+      manualSortBy: true,
+      pageCount: comments.count,
+    },
+    useSortBy,
+    usePagination,
+  );
 
   useEffect(() => {
     comments.fetch(props.user?.id, sortCriteria, pagination);
@@ -37,13 +57,19 @@ const Sent = (props) => {
     pagination.pageSize,
   ]);
 
+  useEffect(() => {
+    if (sortBy && sortBy[0]) setSortCriteria(sortBy[0]);
+  }, [sortBy]);
+
   const resetTable = () => {
-    setSortCriteria(defaultSorted);
-    setPagination(defaultPagination);
+    setSortCriteria(DEFAULT_SORT_CRITERIA);
+    setPagination(DEFAULT_PAGINATION);
   };
 
+  const totalPages = Math.ceil(comments.count / pagination.pageSize);
+
   return (
-    <div className="mr-bg-gradient-r-green-dark-blue mr-px-6 mr-py-8 md:mr-py-12 mr-flex mr-justify-center mr-items-center">
+    <div className="mr-bg-gradient-r-green-dark-blue mr-px-6 mr-py-8 md:mr-py-12 mr-flex mr-flex-col mr-justify-center mr-items-center">
       <section className="mr-flex-grow mr-w-full mr-bg-black-15 mr-p-4 md:mr-p-8 mr-rounded">
         <HeaderSent
           commentType={commentType}
@@ -53,64 +79,57 @@ const Sent = (props) => {
             resetTable();
           }}
         />
-        <ReactTable
-          data={comments.data}
-          columns={
-            commentType === CommentType.TASK
-              ? taskColumns({ setSelectedComment })
-              : challengeColumns({ setSelectedComment })
-          }
-          defaultPageSize={defaultPagination.pageSize}
-          defaultSorted={[defaultSorted]}
-          minRows={1}
-          manual
-          sorted={[sortCriteria]}
-          multiSort={false}
-          noDataText={"no data"}
-          loading={comments.loading}
-          pageSize={pagination.pageSize}
-          pages={Math.ceil(comments.count / pagination.pageSize)}
-          onSortedChange={(criteria) => {
-            setSortCriteria(criteria[0]);
-          }}
-          onPageChange={(page) => setPagination({ ...pagination, page })}
-          onPageSizeChange={(pageSize) => setPagination({ ...pagination, pageSize })}
-          page={pagination.page}
-          getTrProps={() => {
-            const styles = {};
-            return { style: styles };
-          }}
-          {...intlTableProps(props.intl)}
-        >
-          {(state, makeTable) => {
-            return makeTable();
-          }}
-        </ReactTable>
+
+        <table className="mr-text-white mr-links-green-lighter" {...getTableProps()}>
+          <thead>
+            {headerGroups.map((headerGroup) => (
+              <tr {...headerGroup.getHeaderGroupProps()}>
+                {headerGroup.headers.map((column) => (
+                  <th className="mr-px-2" {...column.getHeaderProps(column.getSortByToggleProps())}>
+                    {column.render("Header")}
+                    {column.isSorted ? (column.isSortedDesc ? " ▼" : " ▲") : ""}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+
+          <tbody {...getTableBodyProps()}>
+            {rows.map((row) => {
+              prepareRow(row);
+              return (
+                <tr className="mr-border-y mr-border-white-10" {...row.getRowProps()}>
+                  {row.cells.map((cell) => {
+                    return (
+                      <td className="mr-px-2" {...cell.getCellProps()}>
+                        {cell.render("Cell")}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
       </section>
 
-      {selectedComment && (
-        <Notification
-          onClose={() => setSelectedComment(null)}
-          id={selectedComment.id}
-          text={selectedComment.text}
-          type={selectedComment.type}
-        />
-      )}
+      <PaginationControl
+        currentPage={pagination.page}
+        totalPages={totalPages}
+        pageSize={pagination.pageSize}
+        gotoPage={(page) => setPagination({ ...pagination, page })}
+        setPageSize={(pageSize) => setPagination({ ...pagination, pageSize })}
+      />
     </div>
   );
 };
 
-const taskColumns = ({ setSelectedComment }) => [
+const TASK_COLUMNS = [
   {
     id: "task_id",
     Header: "Task ID",
     accessor: "taskId",
-    Cell: ({ value }) => (
-      <Link to={`task/${value}`} target="_blank" rel="noopener noreferrer">
-        {value}
-      </Link>
-    ),
-    maxWidth: 100,
+    Cell: ({ value }) => <Link to={`task/${value}`}>{value}</Link>,
     sortable: true,
     resizable: false,
   },
@@ -119,11 +138,10 @@ const taskColumns = ({ setSelectedComment }) => [
     Header: "Date",
     accessor: "created",
     Cell: ({ value }) => (
-      <>
+      <div className="mr-whitespace-nowrap">
         <FormattedDate value={value} /> <FormattedTime value={value} />
-      </>
+      </div>
     ),
-    maxWidth: 200,
     sortable: true,
     resizable: false,
   },
@@ -131,40 +149,20 @@ const taskColumns = ({ setSelectedComment }) => [
     id: "comment",
     Header: "Comment",
     accessor: "comment",
-    Cell: ({ value, row }) => {
-      return (
-        <button
-          className="mr-text-green-light hover:mr-text-white"
-          onClick={() =>
-            setSelectedComment({ id: row.task_id, text: value, type: CommentType.TASK })
-          }
-          style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}
-        >
-          {value}
-        </button>
-      );
-    },
+    Cell: ({ value }) => <p>{value}</p>,
     sortable: true,
     resizable: false,
   },
 ];
 
-const challengeColumns = ({ setSelectedComment }) => [
+const CHALLENGE_COLUMNS = [
   {
     id: "challenge_name",
     Header: "Challenge",
     accessor: "challengeName",
-    Cell: ({ value, original }) => {
-      return (
-        <Link
-          to={`browse/challenges/${original.challengeId}?tab=conversation`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {value}
-        </Link>
-      );
-    },
+    Cell: ({ value, original }) => (
+      <Link to={`browse/challenges/${original.challengeId}?tab=conversation`}>{value}</Link>
+    ),
     maxWidth: 200,
     sortable: true,
     resizable: false,
@@ -174,9 +172,9 @@ const challengeColumns = ({ setSelectedComment }) => [
     Header: "Date",
     accessor: "created",
     Cell: ({ value }) => (
-      <>
+      <div className="mr-whitespace-nowrap">
         <FormattedDate value={value} /> <FormattedTime value={value} />
-      </>
+      </div>
     ),
     maxWidth: 200,
     sortable: true,
@@ -186,23 +184,7 @@ const challengeColumns = ({ setSelectedComment }) => [
     id: "comment",
     Header: "Comment",
     accessor: "comment",
-    Cell: ({ value, original }) => {
-      return (
-        <button
-          className="mr-text-green-light hover:mr-text-white"
-          onClick={() =>
-            setSelectedComment({
-              id: original.challengeId,
-              text: value,
-              type: CommentType.CHALLENGE,
-            })
-          }
-          style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap" }}
-        >
-          {value}
-        </button>
-      );
-    },
+    Cell: ({ value }) => <p>{value}</p>,
     sortable: true,
     resizable: false,
   },
diff --git a/src/styles/vendor/react-table.css b/src/styles/vendor/react-table.css
index 1844ffad8..59f93e296 100644
--- a/src/styles/vendor/react-table.css
+++ b/src/styles/vendor/react-table.css
@@ -3,21 +3,20 @@
 .ReactTable {
   @apply mr-border-none mr-text-white;
 
-  .rt-table {
+  table {
     @apply mr-mb-3;
   }
 
-  .rt-thead {
+  thead {
     &.-header {
       @apply mr-shadow-none mr-border-b mr-border-white-15;
     }
 
-    .rt-tr {
+    tr {
       @apply mr-text-left;
     }
 
-    .rt-th,
-    .rt-tb {
+    th {
       @apply mr-outline-none mr-border-none mr-p-4 mr-text-white mr-text-xs mr-font-medium mr-uppercase mr-tracking-wide;
       line-height: 1rem;
 
@@ -33,7 +32,7 @@
     &.-filters {
       @apply mr-border-none;
 
-      .rt-th {
+      th {
         @apply mr-border-none mr-pb-0 mr-pt-4;
       }
 
@@ -47,16 +46,16 @@
     }
   }
 
-  .rt-td {
+  td {
     @apply mr-p-3 mr-text-sm;
   }
 
-  .rt-tbody {
+  tbody {
     .rt-tr-group {
       @apply mr-border-white-15;
     }
 
-    .rt-td {
+    td {
       @apply mr-border-r-0 mr-p-4 mr-leading-normal;
     }
   }