diff --git a/jsapp/js/bemComponents.ts b/jsapp/js/bemComponents.ts
index 1d31b80773..9bbf52c331 100644
--- a/jsapp/js/bemComponents.ts
+++ b/jsapp/js/bemComponents.ts
@@ -179,15 +179,6 @@ bem.KDrawer__primaryIcons = makeBem(bem.KDrawer, 'primary-icons', 'nav');
 bem.KDrawer__secondaryIcons = makeBem(bem.KDrawer, 'secondary-icons', 'nav');
 bem.KDrawer__sidebar = makeBem(bem.KDrawer, 'sidebar', 'aside');
 
-bem.SimpleTable = makeBem(null, 'simple-table', 'table');
-bem.SimpleTable__header = makeBem(bem.SimpleTable, 'header', 'thead');
-bem.SimpleTable__body = makeBem(bem.SimpleTable, 'body', 'tbody');
-bem.SimpleTable__footer = makeBem(bem.SimpleTable, 'footer', 'tfoot');
-bem.SimpleTable__row = makeBem(bem.SimpleTable, 'row', 'tr');
-// NOTE: messageRow needs a __cell with colspan set
-bem.SimpleTable__messageRow = makeBem(bem.SimpleTable, 'message-row', 'tr');
-bem.SimpleTable__cell = makeBem(bem.SimpleTable, 'cell', 'td');
-
 bem.tagSelect = makeBem(null, 'tag-select');
 bem.collectionFilter = makeBem(null, 'collection-filter');
 
diff --git a/jsapp/js/components/common/SimpleTable.module.scss b/jsapp/js/components/common/SimpleTable.module.scss
new file mode 100644
index 0000000000..2c804a8de3
--- /dev/null
+++ b/jsapp/js/components/common/SimpleTable.module.scss
@@ -0,0 +1,25 @@
+// We need bigger specificity in each selector to ensure we do overwrite default
+// styles
+
+table.SimpleTableRoot {
+  background-color: var(--mantine-color-gray-9);
+  border-collapse: separate;
+  border-radius: var(--mantine-radius-md);
+}
+
+thead.SimpleTableThead {
+  background-color: var(--mantine-color-gray-8);
+}
+
+th.SimpleTableTh {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-gray-2);
+  font-weight: 400;
+}
+
+td.SimpleTableTd {
+  font-size: var(--mantine-font-size-md);
+  border-top-width: 1px;
+  border-top-color: var(--mantine-color-gray-7);
+  border-top-style: solid;
+}
diff --git a/jsapp/js/components/common/SimpleTable.stories.tsx b/jsapp/js/components/common/SimpleTable.stories.tsx
new file mode 100644
index 0000000000..176c2d78b7
--- /dev/null
+++ b/jsapp/js/components/common/SimpleTable.stories.tsx
@@ -0,0 +1,46 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import SimpleTable from './SimpleTable';
+
+const meta: Meta<React.ComponentProps<typeof SimpleTable>> = {
+  title: 'common/SimpleTable',
+  component: SimpleTable,
+  argTypes: {},
+  args: {},
+  render: ({...args}) => (
+    <SimpleTable
+      {...args}
+      head={['Element position', 'Atomic mass', 'Symbol', 'Element name']}
+      body={
+        [
+          [6, 12.011, 'C', 'Carbon'],
+          [7, 14.007, 'N', 'Nitrogen'],
+          [39, 88.906, 'Y', 'Yttrium'],
+          [56, 137.33, 'Ba', 'Barium'],
+          [
+            'n/a',
+            'n/a',
+            '??',
+            (
+              <div key='test'>
+                This is just a DIV. It has a button and an input:
+                <br/><br/>
+                <button>button</button>
+                <br/><br/>
+                <input type='email'/>
+                <br/><br/>
+                It shows you can have any <code>React.ReactNode</code> here.
+              </div>
+            ),
+          ],
+          [58, 140.12, 'Ce', 'Cerium'],
+        ]
+      }
+    />
+  ),
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof SimpleTable> = {
+  args: {},
+};
diff --git a/jsapp/js/components/common/SimpleTable.tsx b/jsapp/js/components/common/SimpleTable.tsx
new file mode 100644
index 0000000000..4680131556
--- /dev/null
+++ b/jsapp/js/components/common/SimpleTable.tsx
@@ -0,0 +1,47 @@
+import {Table, type MantineStyleProps, type TableData} from '@mantine/core';
+import styles from './SimpleTable.module.scss';
+
+interface SimpleTableProps extends MantineStyleProps {
+  head: TableData['head'];
+  body: TableData['body'];
+  /**
+   * Passing minimum width enables contextual horizontal scrollbar (i.e. without
+   * it the table will never display scrollbar - regardless of how small
+   * the screen is).
+   */
+  minWidth?: number;
+}
+
+/**
+ * A wrapper component for `Table` from `@mantine/core`. It requires column
+ * headings, column data, and has optional minimum width. You can pass all
+ * standard Mantine style props down to the inner `Table`.
+ */
+export default function SimpleTable(
+  {head, body, minWidth, ...styleProps}: SimpleTableProps
+) {
+  const table = (
+    <Table
+      {...styleProps}
+      classNames={{
+        table: styles.SimpleTableRoot,
+        thead: styles.SimpleTableThead,
+        th: styles.SimpleTableTh,
+        td: styles.SimpleTableTd,
+      }}
+      data={{head: head, body: body}}
+      horizontalSpacing='sm'
+      verticalSpacing='sm'
+    />
+  );
+
+  if (minWidth) {
+    return (
+      <Table.ScrollContainer minWidth={minWidth} type='native'>
+        {table}
+      </Table.ScrollContainer>
+    );
+  }
+
+  return table;
+}
diff --git a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
index 86a8e668f4..644ef28c15 100644
--- a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
+++ b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
@@ -15,8 +15,9 @@ import bem from 'js/bem';
 import {actions} from 'js/actions';
 import TextBox from 'js/components/common/textBox';
 import Button from 'js/components/common/button';
+import SimpleTable from 'js/components/common/SimpleTable';
+import {Text} from '@mantine/core';
 import envStore from 'js/envStore';
-import './bulkEditSubmissionsForm.scss';
 
 // we need a text to display when we need to say "this question has no answer"
 const EMPTY_VALUE_LABEL = t('n/d');
@@ -226,62 +227,6 @@ class BulkEditSubmissionsForm extends React.Component {
     return EXCLUDED_TYPES.includes(questionType);
   }
 
-  renderRow(questionData, itemIndex) {
-    let question = questionData;
-    if (typeof questionData.refIndex !== 'undefined') {
-      question = questionData.item;
-    }
-
-    let modifiers = [];
-    // we don't support bulk editing questions from repeat groups yet
-    // we display them but disabled
-    if (question.hasRepeatParent) {
-      modifiers.push('bulk-edit-row-disabled');
-    }
-
-    return (
-      <bem.SimpleTable__row key={itemIndex} m={modifiers}>
-        <bem.SimpleTable__cell>
-          {renderQuestionTypeIcon(question.type)}
-        </bem.SimpleTable__cell>
-
-        <bem.SimpleTable__cell dir='auto'>
-          {question.parents.length > 0 &&
-            <small>{question.parents.join(' / ') + ' /'}</small>
-          }
-
-          <div>
-            {question.isRequired && <strong title={t('Required')}>*&nbsp;</strong>}
-            {question.label}
-          </div>
-        </bem.SimpleTable__cell>
-
-        <bem.SimpleTable__cell>
-          {question.hasRepeatParent &&
-            <em>{t('Editing responses from repeat group questions is not possible yet.')}</em>
-          }
-          {!question.hasRepeatParent &&
-            this.renderRowDataValues(question.name, question.selectedData)
-          }
-        </bem.SimpleTable__cell>
-
-        <bem.SimpleTable__cell>
-          <Button
-            type='secondary'
-            size='m'
-            onClick={() => {
-              if (!this.isEditDisabled(question.type)) {
-                this.selectQuestion(question);
-              }
-            }}
-            isDisabled={this.isEditDisabled(question.type)}
-            label={t('Edit')}
-          />
-        </bem.SimpleTable__cell>
-      </bem.SimpleTable__row>
-    );
-  }
-
   /**
    * A wrapper function that handles all quirks for displaying the question data
    * to users
@@ -318,6 +263,74 @@ class BulkEditSubmissionsForm extends React.Component {
     }
   }
 
+  getFiltersRow() {
+    return [
+      '',
+      <TextBox
+        key='filter-by-name'
+        value={this.state.filterByName}
+        onChange={this.onFilterByNameChange}
+        placeholder={t('Type to filter')}
+      />,
+      <TextBox
+        key='filter-by-value'
+        value={this.state.filterByValue}
+        onChange={this.onFilterByValueChange}
+        placeholder={t('Type to filter')}
+      />,
+      '',
+    ];
+  }
+
+  getRows(data) {
+    return data.map((questionData) => {
+      let question = questionData;
+      if (typeof questionData.refIndex !== 'undefined') {
+        question = questionData.item;
+      }
+
+      return [
+        renderQuestionTypeIcon(question.type),
+        <>
+          {question.parents.length > 0 &&
+            <small>{question.parents.join(' / ') + ' /'}</small>
+          }
+
+          <div>
+            {question.isRequired && <strong title={t('Required')}>*&nbsp;</strong>}
+            {question.label}
+          </div>
+        </>,
+        <>
+          {question.hasRepeatParent &&
+            <em>{t('Editing responses from repeat group questions is not possible yet.')}</em>
+          }
+          {!question.hasRepeatParent &&
+            this.renderRowDataValues(question.name, question.selectedData)
+          }
+        </>,
+        <Text key='action-button' ta='right'>
+          <Button
+            type='secondary'
+            size='m'
+            onClick={() => {
+              if (!this.isEditDisabled(question.type)) {
+                this.selectQuestion(question);
+              }
+            }}
+            isDisabled={
+              this.isEditDisabled(question.type) ||
+              // we don't support bulk editing questions from repeat groups yet
+              // we display them but disabled
+              question.hasRepeatParent
+            }
+            label={t('Edit')}
+          />
+        </Text>,
+      ];
+    });
+  }
+
   renderList() {
     const displayData = this.getDisplayData();
 
@@ -344,53 +357,16 @@ class BulkEditSubmissionsForm extends React.Component {
           {t('Updated responses')}
         </bem.FormModal__item>
 
-        <bem.SimpleTable m='bulk-edit-list'>
-          <bem.SimpleTable__header>
-            <bem.SimpleTable__row>
-              <bem.SimpleTable__cell>
-                {t('Type')}
-              </bem.SimpleTable__cell>
-
-              <bem.SimpleTable__cell>
-                {t('Question')}
-              </bem.SimpleTable__cell>
-
-              <bem.SimpleTable__cell>
-                {t('Response')}
-              </bem.SimpleTable__cell>
-
-              <bem.SimpleTable__cell>
-                {t('Action')}
-              </bem.SimpleTable__cell>
-            </bem.SimpleTable__row>
-
-            <bem.SimpleTable__row>
-              <bem.SimpleTable__cell/>
-
-              <bem.SimpleTable__cell>
-                <TextBox
-                  value={this.state.filterByName}
-                  onChange={this.onFilterByNameChange}
-                  placeholder={t('Type to filter')}
-                />
-              </bem.SimpleTable__cell>
-
-              <bem.SimpleTable__cell>
-                <TextBox
-                  value={this.state.filterByValue}
-                  onChange={this.onFilterByValueChange}
-                  placeholder={t('Type to filter')}
-                />
-              </bem.SimpleTable__cell>
-
-              <bem.SimpleTable__cell/>
-            </bem.SimpleTable__row>
-          </bem.SimpleTable__header>
-
-          <bem.SimpleTable__body>
-            {finalData.map(this.renderRow)}
-          </bem.SimpleTable__body>
-        </bem.SimpleTable>
+        <SimpleTable
+          head={[
+            t('Type'),
+            t('Question'),
+            t('Response'),
+            <Text key='action-button' ta='right'>{t('Action')}</Text>,
+          ]}
+          body={[this.getFiltersRow(), ...this.getRows(finalData)]}
+          minWidth={600}
+        />
 
         <bem.Modal__footer>
           <Button
@@ -498,7 +474,10 @@ class BulkEditRowForm extends React.Component {
   }
 
   /**
-   * @returns {object[]} an ordered list of unique responses with frequency data
+   * @returns {[][]} an ordered list of unique responses with frequency data.
+   * Each data item (an array) has:
+   * [0] {string|null} - the unique response value
+   * [1] {number} - the total count for this unique response
    */
   getUniqueResponses() {
     let uniqueResponses = new Map();
@@ -514,38 +493,34 @@ class BulkEditRowForm extends React.Component {
     return uniqueResponses;
   }
 
-  /**
-   * @param {string|null} data[0] - the unique response value
-   * @param {number} data[1] - the total count for this unique response
-   */
-  renderResponseRow(data) {
-    const count = data[1];
-    const response = data[0];
-
-    let responseLabel = response;
-    let responseValue = response;
-    if (response === undefined) {
-      responseLabel = EMPTY_VALUE_LABEL;
-      responseValue = EMPTY_VALUE;
-    }
+  getRows() {
+    return Array.from(this.getUniqueResponses()).map((data) => {
+      const count = data[1];
+      const response = data[0];
 
-    const percentage = (count / this.props.originalData.length * 100).toFixed(2);
+      let responseLabel = response;
+      let responseValue = response;
+      if (response === undefined) {
+        responseLabel = EMPTY_VALUE_LABEL;
+        responseValue = EMPTY_VALUE;
+      }
 
-    return (
-      <bem.SimpleTable__row key={responseLabel}>
-        <bem.SimpleTable__cell>{responseLabel}</bem.SimpleTable__cell>
-        <bem.SimpleTable__cell>{count}</bem.SimpleTable__cell>
-        <bem.SimpleTable__cell>{percentage}</bem.SimpleTable__cell>
-        <bem.SimpleTable__cell>
+      const percentage = (count / this.props.originalData.length * 100).toFixed(2);
+
+      return [
+        responseLabel,
+        count,
+        percentage,
+        <Text key='action-button' ta='right'>
           <Button
             type='secondary'
             size='m'
             onClick={this.onChange.bind(this, responseValue)}
             label={t('Select')}
           />
-        </bem.SimpleTable__cell>
-      </bem.SimpleTable__row>
-    );
+        </Text>,
+      ];
+    });
   }
 
   render() {
@@ -575,23 +550,17 @@ class BulkEditRowForm extends React.Component {
           </bem.FormView__cell>
         </bem.FormView__cell>
 
-        <bem.SimpleTable m='bulk-edit-responses'>
-          <bem.SimpleTable__header>
-            <bem.SimpleTable__row>
-              <bem.SimpleTable__cell>{t('Response value')}</bem.SimpleTable__cell>
-
-              <bem.SimpleTable__cell>{t('Frequency')}</bem.SimpleTable__cell>
-
-              <bem.SimpleTable__cell>{t('Percentage')}</bem.SimpleTable__cell>
-
-              <bem.SimpleTable__cell>{t('Action')}</bem.SimpleTable__cell>
-            </bem.SimpleTable__row>
-          </bem.SimpleTable__header>
-
-          <bem.SimpleTable__body>
-            {Array.from(this.getUniqueResponses()).map(this.renderResponseRow)}
-          </bem.SimpleTable__body>
-        </bem.SimpleTable>
+        <SimpleTable
+          mt='lg'
+          head={[
+            t('Response value'),
+            t('Frequency'),
+            t('Percentage'),
+            <Text key='action-button' ta='right'>{t('Action')}</Text>,
+          ]}
+          body={this.getRows()}
+          minWidth={600}
+        />
       </React.Fragment>
     );
   }
diff --git a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.scss b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.scss
deleted file mode 100644
index ec954a19a7..0000000000
--- a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.simple-table.simple-table--bulk-edit-list {
-  // first column with icons
-  .simple-table__cell:nth-child(1) {
-    text-align: center;
-  }
-
-  // blue dot in response column
-  .simple-table__body .simple-table__cell:nth-child(3) {
-    position: relative;
-
-    .blue-response-dot {
-      position: absolute;
-      top: calc(50% - 3px);
-      left: -3px;
-    }
-  }
-
-  .simple-table__row--bulk-edit-row-disabled {
-    opacity: 0.5;
-
-    // hide action buttons
-    .simple-table__cell:nth-child(4) {
-      visibility: hidden;
-    }
-  }
-}
-
-.simple-table.simple-table--bulk-edit-list,
-.simple-table.simple-table--bulk-edit-responses {
-  // last column with actions
-  .simple-table__cell:last-child {
-    text-align: right;
-  }
-}
-
-.simple-table.simple-table--bulk-edit-responses {
-  margin-top: 20px;
-}
diff --git a/jsapp/js/components/projectDownloads/projectExportsList.es6 b/jsapp/js/components/projectDownloads/projectExportsList.es6
index b020b029ac..879dc5987b 100644
--- a/jsapp/js/components/projectDownloads/projectExportsList.es6
+++ b/jsapp/js/components/projectDownloads/projectExportsList.es6
@@ -16,6 +16,8 @@ import exportsStore from 'js/components/projectDownloads/exportsStore';
 import ExportFetcher from 'js/components/projectDownloads/exportFetcher';
 import {userCan} from 'js/components/permissions/utils';
 import Button from 'js/components/common/button';
+import SimpleTable from 'js/components/common/SimpleTable';
+import {Text, Flex} from '@mantine/core';
 
 /**
  * Component that displays all available downloads (for logged in user only).
@@ -186,30 +188,26 @@ export default class ProjectExportsList extends React.Component {
     return languageDisplay;
   }
 
-  renderRow(exportData) {
-    return (
-      <bem.SimpleTable__row key={exportData.uid}>
-        <bem.SimpleTable__cell>
-          {EXPORT_TYPES[exportData.data.type]?.label}
-        </bem.SimpleTable__cell>
-
-        <bem.SimpleTable__cell>
-          {formatTime(exportData.date_created)}
-        </bem.SimpleTable__cell>
-
-        <bem.SimpleTable__cell>
-          {this.renderLanguage(exportData.data.lang)}
-        </bem.SimpleTable__cell>
-
-        <bem.SimpleTable__cell m='text-center'>
+  getRows() {
+    return this.state.rows.map((exportData) => (
+      [
+        EXPORT_TYPES[exportData.data.type]?.label,
+        formatTime(exportData.date_created),
+        this.renderLanguage(exportData.data.lang),
+        <Text key='include-groups' ta='center'>
           {this.renderBooleanAnswer(exportData.data.hierarchy_in_labels)}
-        </bem.SimpleTable__cell>
-
-        <bem.SimpleTable__cell m='text-center'>
+        </Text>,
+        <Text key='multiple-versions' ta='center'>
           {this.renderBooleanAnswer(exportData.data.fields_from_all_versions)}
-        </bem.SimpleTable__cell>
-
-        <bem.SimpleTable__cell className='export-list-buttons'>
+        </Text>,
+        <Flex
+          gap='xs'
+          justify='flex-end'
+          align='center'
+          direction='row'
+          wrap='nowrap'
+          key='buttons'
+        >
           {exportData.status === EXPORT_STATUSES.complete &&
             <Button
               type='secondary'
@@ -243,9 +241,9 @@ export default class ProjectExportsList extends React.Component {
               onClick={this.deleteExport.bind(this, exportData.uid)}
             />
           }
-        </bem.SimpleTable__cell>
-      </bem.SimpleTable__row>
-    );
+        </Flex>
+      ]
+    ));
   }
 
   render() {
@@ -271,44 +269,18 @@ export default class ProjectExportsList extends React.Component {
             {t('Exports')}
           </bem.FormView__cell>
 
-          <bem.SimpleTable m='project-exports'>
-            <bem.SimpleTable__header>
-              <bem.SimpleTable__row>
-                <bem.SimpleTable__cell>
-                  {t('Type')}
-                </bem.SimpleTable__cell>
-
-                <bem.SimpleTable__cell>
-                  {t('Created')}
-                </bem.SimpleTable__cell>
-
-                <bem.SimpleTable__cell>
-                  {t('Language')}
-                </bem.SimpleTable__cell>
-
-                <bem.SimpleTable__cell m='text-center'>
-                  {t('Include Groups')}
-                </bem.SimpleTable__cell>
-
-                <bem.SimpleTable__cell m='text-center'>
-                  {t('Multiple Versions')}
-                </bem.SimpleTable__cell>
-
-                <bem.SimpleTable__cell/>
-              </bem.SimpleTable__row>
-            </bem.SimpleTable__header>
-
-            <bem.SimpleTable__body>
-              {this.state.rows.map(this.renderRow)}
-              {this.state.rows.length === 0 &&
-                <bem.SimpleTable__messageRow>
-                  <bem.SimpleTable__cell colSpan='6'>
-                    {t('There is nothing to download yet.')}
-                  </bem.SimpleTable__cell>
-                </bem.SimpleTable__messageRow>
-              }
-            </bem.SimpleTable__body>
-          </bem.SimpleTable>
+          <SimpleTable
+            head={[
+              t('Type'),
+              t('Created'),
+              t('Language'),
+              <Text key='include-groups' ta='center'>{t('Include Groups')}</Text>,
+              <Text key='multiple-versions' ta='center'>{t('Multiple Versions')}</Text>,
+              '',
+            ]}
+            body={this.getRows()}
+            minWidth={600}
+          />
         </React.Fragment>
       );
     }
diff --git a/jsapp/js/components/submissions/submissionDataTable.tsx b/jsapp/js/components/submissions/submissionDataTable.tsx
index b11a3222bf..93ad68d05e 100644
--- a/jsapp/js/components/submissions/submissionDataTable.tsx
+++ b/jsapp/js/components/submissions/submissionDataTable.tsx
@@ -33,6 +33,7 @@ import type {
 import AudioPlayer from 'js/components/common/audioPlayer';
 import {goToProcessing} from 'js/components/processing/routes.utils';
 import {PROCESSING_QUESTION_TYPES} from 'js/components/processing/processingUtils';
+import SimpleTable from 'js/components/common/SimpleTable';
 
 bem.SubmissionDataTable = makeBem(null, 'submission-data-table');
 bem.SubmissionDataTable__row = makeBem(bem.SubmissionDataTable, 'row');
@@ -235,50 +236,19 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
   renderPointsData(data: string) {
     const pointsArray: string[][] = data.split(';').map((pointString) => pointString.split(' '));
 
-    return(
-      <bem.SimpleTable>
-        <bem.SimpleTable__header>
-          <bem.SimpleTable__row>
-            <bem.SimpleTable__cell>
-              {t('Point')}
-            </bem.SimpleTable__cell>
-            <bem.SimpleTable__cell>
-              {t('latitude (x.y °):')}
-            </bem.SimpleTable__cell>
-            <bem.SimpleTable__cell>
-              {t('longitude (x.y °):')}
-            </bem.SimpleTable__cell>
-            <bem.SimpleTable__cell>
-              {t('altitude (m):')}
-            </bem.SimpleTable__cell>
-            <bem.SimpleTable__cell>
-              {t('accuracy (m):')}
-            </bem.SimpleTable__cell>
-          </bem.SimpleTable__row>
-        </bem.SimpleTable__header>
-
-        <bem.SimpleTable__body>
-          {pointsArray.map((pointArray, pointIndex) => (
-            <bem.SimpleTable__row key={pointIndex}>
-              <bem.SimpleTable__cell>
-                P<sub>{pointIndex + 1}</sub>
-              </bem.SimpleTable__cell>
-              <bem.SimpleTable__cell>
-                {pointArray[0]}
-              </bem.SimpleTable__cell>
-              <bem.SimpleTable__cell>
-                {pointArray[1]}
-              </bem.SimpleTable__cell>
-              <bem.SimpleTable__cell>
-                {pointArray[2]}
-              </bem.SimpleTable__cell>
-              <bem.SimpleTable__cell>
-                {pointArray[3]}
-              </bem.SimpleTable__cell>
-            </bem.SimpleTable__row>
-          ))}
-        </bem.SimpleTable__body>
-      </bem.SimpleTable>
+    return (
+      <SimpleTable
+        head={[
+          t('Point'),
+          t('latitude (x.y °):'),
+          t('longitude (x.y °):'),
+          t('altitude (m):'),
+          t('accuracy (m):'),
+        ]}
+        body={pointsArray.map((pointArray, pointIndex) => (
+          [<>P<sub>{pointIndex + 1}</sub></>, ...pointArray]
+        ))}
+      />
     );
   }
 
diff --git a/jsapp/js/theme/kobo/Table.ts b/jsapp/js/theme/kobo/Table.ts
new file mode 100644
index 0000000000..8cc2685f8c
--- /dev/null
+++ b/jsapp/js/theme/kobo/Table.ts
@@ -0,0 +1,18 @@
+import {Table} from '@mantine/core';
+
+export const TableThemeKobo = Table.extend({
+  defaultProps: {
+    withTableBorder: true,
+    // Disabled default row borders, because `borderCollapse` override broke
+    // them, and they will be added in some custom way.
+    withRowBorders: false,
+    captionSide: 'top',
+  },
+  vars: (theme) => {
+    return {
+      table: {
+        '--table-border-color': theme.colors.gray[7],
+      },
+    };
+  },
+});
diff --git a/jsapp/js/theme/kobo/index.ts b/jsapp/js/theme/kobo/index.ts
index a0e6b0422e..fdc0c786a3 100644
--- a/jsapp/js/theme/kobo/index.ts
+++ b/jsapp/js/theme/kobo/index.ts
@@ -1,5 +1,6 @@
 import {createTheme, rem} from '@mantine/core';
 import {ButtonThemeKobo} from './Button';
+import {TableThemeKobo} from './Table';
 import {TooltipThemeKobo} from './Tooltip';
 
 export const themeKobo = createTheme({
@@ -87,5 +88,6 @@ export const themeKobo = createTheme({
   components: {
     Button: ButtonThemeKobo,
     Tooltip: TooltipThemeKobo,
+    Table: TableThemeKobo,
   },
 });
diff --git a/jsapp/scss/components/_kobo.project-downloads.scss b/jsapp/scss/components/_kobo.project-downloads.scss
index bb7a2b9952..f4d892b855 100644
--- a/jsapp/scss/components/_kobo.project-downloads.scss
+++ b/jsapp/scss/components/_kobo.project-downloads.scss
@@ -194,21 +194,6 @@
     }
   }
 
-  .simple-table.simple-table--project-exports {
-    // __row selector to not include __message-row
-    .simple-table__row .simple-table__cell {
-      &:last-child() {
-        text-align: right;
-      }
-    }
-
-    .export-list-buttons {
-      @include mixins.centerRowFlex;
-      justify-content: flex-end;
-      gap: 5px;
-    }
-  }
-
   .animate-processing {
     animation: processing 1.5s infinite;
   }
diff --git a/jsapp/scss/components/_kobo.simple-table.scss b/jsapp/scss/components/_kobo.simple-table.scss
deleted file mode 100644
index c13236b517..0000000000
--- a/jsapp/scss/components/_kobo.simple-table.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@use 'scss/colors';
-
-/*
- * Use as:
- * <bem.SimpleTable>
- *   <bem.SimpleTable__header>
- *     <bem.SimpleTable__row>
- *       <bem.SimpleTable__cell>
- *   <bem.SimpleTable__body>
- *     <bem.SimpleTable__row>
- *       <bem.SimpleTable__cell>
- *   <bem.SimpleTable__footer>
- *     <bem.SimpleTable__row>
- *       <bem.SimpleTable__cell>
- *
- * <bem.SimpleTable__messageRow>
- */
-.simple-table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-.simple-table__cell {
-  padding: 10px;
-  background-color: colors.$kobo-white;
-
-  &.simple-table__cell--align-top {
-    vertical-align: top;
-  }
-
-  &.simple-table__cell--text-right {
-    text-align: right;
-  }
-
-  &.simple-table__cell--text-center {
-    text-align: center;
-  }
-}
-
-.simple-table__body {
-  .simple-table__cell {
-    border-bottom: 1px solid colors.$kobo-gray-200;
-  }
-}
-
-.simple-table__message-row {
-  .simple-table__cell {
-    padding: 20px;
-    text-align: center;
-  }
-}
-
-.simple-table__header {
-  .simple-table__row:nth-child(1) {
-    .simple-table__cell {
-      background-color: colors.$kobo-gray-200;
-      border-bottom: 2px solid colors.$kobo-gray-300;
-      font-weight: 600;
-    }
-  }
-}
diff --git a/jsapp/scss/main.scss b/jsapp/scss/main.scss
index 335348810e..f6e1e9c7b7 100644
--- a/jsapp/scss/main.scss
+++ b/jsapp/scss/main.scss
@@ -41,7 +41,6 @@
 @import "./components/kobo.project-downloads";
 @import "./components/kobo.service-row";
 @import "./components/kobo.empty-content";
-@import "./components/kobo.simple-table";
 @import "./components/kobo.background-audio-player";
 @import "./components/kobo.dropzone";
 @import './components/kobo.table-meta';