diff --git a/src/v2/components/Applications/Table/index.jsx b/src/v2/components/Applications/Table/index.jsx
index e039f7cb..969fc947 100644
--- a/src/v2/components/Applications/Table/index.jsx
+++ b/src/v2/components/Applications/Table/index.jsx
@@ -1,37 +1,35 @@
 // @flow
 
 import React from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@material-ui/core';
+import {TableCell, TableRow} from '@material-ui/core';
 import cn from 'classnames';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
-import HelpLink from 'v2/components/HelpLink';
 import TypeLabel from 'v2/components/UI/TypeLabel';
+import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+
 import useStyles from './styles';
 
-const tHeads: TableHeadProps[] = [
+const fields: TableHeadProps[] = [
   {
+    label: 'Application Id',
     name: 'Application Id',
     text: '',
     term: '',
   },
   {
+    label: 'Type',
     name: 'type',
     text: '',
     term: '',
   },
   {
+    label: 'Time',
     name: 'time',
     text: '',
     term: '',
@@ -56,16 +54,15 @@ const ApplicationsTable = ({
   const renderRow = application => {
     return (
       <TableRow hover key={application.programId}>
-        <TableCell align="center">
-          <Link
-            to={`/applications/${application.programId}`}
-            className={classes.name}
-          >
+        <TableCell>
+          <Link to={`/applications/${application.programId}`}>
             {application.programId}
           </Link>
         </TableCell>
         <TableCell>
-          TODO <TypeLabel type="other" label="other" />
+          <div>
+            <TypeLabel type="other" label="TODO" />
+          </div>
         </TableCell>
         <TableCell title={application.timestamp}>
           {asTime(application.timestamp)}
@@ -99,28 +96,10 @@ const ApplicationsTable = ({
     );
   };
 
-  const renderTH = ({name, width, ...rest}: TableHeadProps) => (
-    <TableCell key={name} width={width}>
-      {name}
-      <HelpLink {...rest} />
-    </TableCell>
-  );
-
   return (
     <div className={classes.root}>
       {showTable ? (
-        <Table>
-          <TableHead className={classes.head}>
-            <TableRow>{map(renderTH)(tHeads)}</TableRow>
-          </TableHead>
-          <TableBody
-            classes={{
-              root: classes.body,
-            }}
-          >
-            {map(renderRow)(applications)}
-          </TableBody>
-        </Table>
+        <Table fields={fields} renderRow={renderRow} data={applications} />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
           {map(renderCard)(applications)}
diff --git a/src/v2/components/Blocks/Table/index.jsx b/src/v2/components/Blocks/Table/index.jsx
index ca5edfd3..a5645ca5 100644
--- a/src/v2/components/Blocks/Table/index.jsx
+++ b/src/v2/components/Blocks/Table/index.jsx
@@ -1,59 +1,56 @@
 // @flow
 
 import React from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@material-ui/core';
+import {TableCell, TableRow} from '@material-ui/core';
 import cn from 'classnames';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
-
+import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
-import HelpLink from 'v2/components/HelpLink';
 import ValidatorName from 'v2/components/UI/ValidatorName';
+
 import useStyles from './styles';
 
-const tHeads: TableHeadProps[] = [
+const fields: TableHeadProps[] = [
   {
+    label: 'Blocks',
     name: 'blocks',
     text: '',
     term: '',
   },
   {
+    label: 'slot',
     name: 'slot',
     text: '',
     term: '',
   },
   {
+    label: 'time',
     name: 'time',
     text: '',
     term: '',
   },
   {
+    label: 'transactions',
     name: 'transactions',
     text: '',
     term: '',
-    width: 190,
   },
   {
+    label: 'confidence',
     name: 'confidence',
     text: '',
     term: '',
-    width: 165,
   },
   {
+    label: 'leader',
     name: 'leader',
     text: '',
     term: '',
-    width: 240,
   },
 ];
 
@@ -76,14 +73,12 @@ const BlocksTable = ({
     return (
       <TableRow hover key={block.id}>
         <TableCell align="center">
-          <Link to={`/blocks/${block.id}`} className={classes.name}>
-            <div>{block.id}</div>
-          </Link>
+          <Link to={`/blocks/${block.id}`}>{block.id}</Link>
         </TableCell>
-        <TableCell>{block.slot}</TableCell>
-        <TableCell title={block.timestamp}>{asTime(block.timestamp)}</TableCell>
-        <TableCell>TODO</TableCell>
-        <TableCell>TODO</TableCell>
+        <TableCell width={100}>{block.slot}</TableCell>
+        <TableCell width={140}>{asTime(block.timestamp)}</TableCell>
+        <TableCell width={200}>TODO</TableCell>
+        <TableCell width={140}>TODO</TableCell>
         <TableCell>
           <ValidatorName pubkey={block.leader} name={block.leader} avatar="" />
         </TableCell>
@@ -128,28 +123,10 @@ const BlocksTable = ({
     );
   };
 
-  const renderTH = ({name, width, ...rest}: TableHeadProps) => (
-    <TableCell key={name} width={width}>
-      {name}
-      <HelpLink {...rest} />
-    </TableCell>
-  );
-
   return (
     <div className={classes.root}>
       {showTable ? (
-        <Table>
-          <TableHead className={classes.head}>
-            <TableRow>{map(renderTH)(tHeads)}</TableRow>
-          </TableHead>
-          <TableBody
-            classes={{
-              root: classes.body,
-            }}
-          >
-            {map(renderRow)(blocks)}
-          </TableBody>
-        </Table>
+        <Table fields={fields} data={blocks} renderRow={renderRow} />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
           {map(renderCard)(blocks)}
diff --git a/src/v2/components/Blocks/Table/styles.js b/src/v2/components/Blocks/Table/styles.js
index 8cff6763..94176fd9 100644
--- a/src/v2/components/Blocks/Table/styles.js
+++ b/src/v2/components/Blocks/Table/styles.js
@@ -10,35 +10,6 @@ export default makeStyles(theme => ({
       marginBottom: 50,
     },
   },
-  head: {
-    border: '1px solid #979797',
-    '& th': {
-      textTransform: 'uppercase',
-      fontSize: 15,
-      letterSpacing: 2,
-      fontWeight: 'bold',
-      borderBottom: 'none',
-      paddingRight: 16,
-      '&:first-child': {
-        paddingLeft: 40,
-      },
-    },
-  },
-  body: {
-    '& td': {
-      fontSize: 15,
-      paddingTop: 18,
-      paddingBottom: 18,
-      maxWidth: 0,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      paddingRight: 16,
-      '&:first-child': {
-        paddingLeft: 40,
-      },
-    },
-  },
   list: {
     width: '100%',
   },
@@ -83,15 +54,4 @@ export default makeStyles(theme => ({
     letterSpacing: 2,
     fontWeight: 'bold',
   },
-  leader: {
-    display: 'flex',
-    alignItems: 'center',
-    color: getColor('main')(theme),
-    '& div': {
-      marginLeft: 5,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-  },
 }));
diff --git a/src/v2/components/TourDeSol/Table/index.jsx b/src/v2/components/TourDeSol/Table/index.jsx
index 0c21ce45..7159252e 100644
--- a/src/v2/components/TourDeSol/Table/index.jsx
+++ b/src/v2/components/TourDeSol/Table/index.jsx
@@ -1,26 +1,45 @@
 // @flow
 
 import React from 'react';
-import {
-  Typography,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Grid,
-} from '@material-ui/core';
+import {Typography, TableCell, TableRow, Grid} from '@material-ui/core';
 import cn from 'classnames';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
+import Table from 'v2/components/UI/Table';
+import HelpLink from 'v2/components/HelpLink';
 import ValidatorName from 'v2/components/UI/ValidatorName';
-
-import HelpLink from '../../HelpLink';
 import useStyles from './styles';
 
+const fields = [
+  {
+    label: 'ranking',
+    name: 'ranking',
+    text: '',
+    term: '',
+  },
+  {
+    label: 'name',
+    name: 'name',
+    text: '',
+    term: '',
+  },
+  {
+    label: 'Staked sol',
+    name: 'staked_sol',
+    text: '',
+    term: '',
+  },
+  {
+    label: 'Uptime',
+    name: 'uptime',
+    text: '',
+    term: '',
+  },
+];
+
 const ValidatorsTable = ({
   activeValidators,
   separate,
@@ -36,12 +55,12 @@ const ValidatorsTable = ({
     const {name, pubkey, avatarUrl, activatedStake, uptimePercent, rank} = row;
     return (
       <TableRow hover key={pubkey}>
-        <TableCell>{rank}</TableCell>
+        <TableCell width={150}>{rank}</TableCell>
         <TableCell>
           <ValidatorName pubkey={pubkey} name={name} avatar={avatarUrl} />
         </TableCell>
-        <TableCell>{activatedStake.toFixed(8)}</TableCell>
-        <TableCell>{uptimePercent}%</TableCell>
+        <TableCell width={200}>{activatedStake.toFixed(8)}</TableCell>
+        <TableCell width={150}>{uptimePercent}%</TableCell>
       </TableRow>
     );
   };
@@ -84,23 +103,7 @@ const ValidatorsTable = ({
         )}
       </div>
       {showTable ? (
-        <Table>
-          <TableHead className={classes.head}>
-            <TableRow>
-              <TableCell width={100}>Ranking</TableCell>
-              <TableCell>Name</TableCell>
-              <TableCell width={150}>Staked SOL</TableCell>
-              <TableCell width={110}>Uptime</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody
-            classes={{
-              root: classes.body,
-            }}
-          >
-            {map(renderRow)(activeValidators)}
-          </TableBody>
-        </Table>
+        <Table fields={fields} renderRow={renderRow} data={activeValidators} />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
           {map(renderCard)(activeValidators)}
diff --git a/src/v2/components/TourDeSol/Table/styles.js b/src/v2/components/TourDeSol/Table/styles.js
index c52545ea..d04ad3ab 100644
--- a/src/v2/components/TourDeSol/Table/styles.js
+++ b/src/v2/components/TourDeSol/Table/styles.js
@@ -13,29 +13,6 @@ export default makeStyles(theme => ({
       marginBottom: 50,
     },
   },
-  head: {
-    border: '1px solid #979797',
-    '& th': {
-      textTransform: 'uppercase',
-      fontSize: 15,
-      letterSpacing: 2,
-      paddingRight: 5,
-      fontWeight: 'bold',
-      borderBottom: 'none',
-    },
-  },
-  body: {
-    '& td': {
-      fontSize: 15,
-      paddingTop: 18,
-      paddingBottom: 18,
-      paddingRight: 5,
-      maxWidth: 0,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-  },
   header: {
     display: 'flex',
     alignItems: 'baseline',
@@ -56,23 +33,6 @@ export default makeStyles(theme => ({
     fontSize: 15,
     textDecoration: 'none',
   },
-  name: {
-    display: 'flex',
-    alignItems: 'center',
-    color: getColor('main')(theme),
-    textDecoration: 'none',
-    '& div': {
-      '&:first-child': {
-        marginRight: 22,
-      },
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-    [theme.breakpoints.down('sm')]: {
-      marginBottom: 22,
-    },
-  },
   list: {
     display: 'flex',
     width: '100%',
diff --git a/src/v2/components/Transactions/Table/index.jsx b/src/v2/components/Transactions/Table/index.jsx
index 384f4187..292e54ad 100644
--- a/src/v2/components/Transactions/Table/index.jsx
+++ b/src/v2/components/Transactions/Table/index.jsx
@@ -1,53 +1,53 @@
 // @flow
 
 import React from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from '@material-ui/core';
+import {TableCell, TableRow} from '@material-ui/core';
 import cn from 'classnames';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import {useTheme} from '@material-ui/core/styles';
 import {observer} from 'mobx-react-lite';
 import {Link} from 'react-router-dom';
 import {map} from 'lodash/fp';
-import HelpLink from 'v2/components/HelpLink';
 import TypeLabel from 'v2/components/UI/TypeLabel';
+import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 
 import useStyles from './styles';
 
-const tHeads: TableHeadProps[] = [
+const fields: TableHeadProps[] = [
   {
-    name: 'hash',
+    id: 'hash',
+    label: 'hash',
     text: '',
     term: '',
   },
   {
+    label: 'block',
     name: 'block',
     text: '',
     term: '',
   },
   {
+    label: 'time',
     name: 'time',
     text: '',
     term: '',
   },
   {
+    label: 'application id',
     name: 'application id',
     text: '',
     term: '',
   },
   {
+    label: 'type',
     name: 'type',
     text: '',
     term: '',
   },
   {
+    label: 'confirmations',
     name: 'confirmations',
     text: '',
     term: '',
@@ -72,20 +72,16 @@ const TransactionsTable = ({
   const renderRow = transaction => {
     return (
       <TableRow hover key={transaction.id}>
-        <TableCell align="center">
-          <Link to={`/transactions/${transaction.id}`} className={classes.name}>
-            {transaction.id}
-          </Link>
+        <TableCell>
+          <Link to={`/transactions/${transaction.id}`}>{transaction.id}</Link>
         </TableCell>
         <TableCell>
-          <Link to={`/blocks/${transaction.blockId}`} className={classes.name}>
+          <Link to={`/blocks/${transaction.blockId}`}>
             {transaction.blockId}
           </Link>
         </TableCell>
-        <TableCell title={transaction.timestamp}>
-          {asTime(transaction.timestamp)}
-        </TableCell>
-        <TableCell>
+        <TableCell width={135}>{asTime(transaction.timestamp)}</TableCell>
+        <TableCell width={230}>
           <Link
             to={`/applications/${transaction.instructions[0].programId}`}
             className={classes.name}
@@ -93,10 +89,12 @@ const TransactionsTable = ({
             {transaction.instructions[0].programId}
           </Link>
         </TableCell>
-        <TableCell>
-          TODO <TypeLabel type="loader" label="loader" />
+        <TableCell width={110}>
+          <div>
+            <TypeLabel type="loader" label="TODO" />
+          </div>
         </TableCell>
-        <TableCell>TODO</TableCell>
+        <TableCell width={200}>TODO</TableCell>
       </TableRow>
     );
   };
@@ -151,28 +149,10 @@ const TransactionsTable = ({
     );
   };
 
-  const renderTH = ({name, ...rest}: TableHeadProps) => (
-    <TableCell key={name}>
-      {name}
-      <HelpLink {...rest} />
-    </TableCell>
-  );
-
   return (
     <div className={classes.root}>
       {showTable ? (
-        <Table>
-          <TableHead className={classes.head}>
-            <TableRow>{map(renderTH)(tHeads)}</TableRow>
-          </TableHead>
-          <TableBody
-            classes={{
-              root: classes.body,
-            }}
-          >
-            {map(renderRow)(transactions)}
-          </TableBody>
-        </Table>
+        <Table fields={fields} renderRow={renderRow} data={transactions} />
       ) : (
         <div className={cn(classes.list, separate && classes.vertical)}>
           {map(renderCard)(transactions)}
diff --git a/src/v2/components/Transactions/Table/styles.js b/src/v2/components/Transactions/Table/styles.js
index a895378b..8fc66346 100644
--- a/src/v2/components/Transactions/Table/styles.js
+++ b/src/v2/components/Transactions/Table/styles.js
@@ -10,28 +10,6 @@ export default makeStyles(theme => ({
       marginBottom: 50,
     },
   },
-  head: {
-    border: '1px solid #979797',
-    '& th': {
-      textTransform: 'uppercase',
-      fontSize: 15,
-      letterSpacing: 2,
-      fontWeight: 'bold',
-      borderBottom: 'none',
-      whiteSpace: 'nowrap',
-    },
-  },
-  body: {
-    '& td': {
-      fontSize: 15,
-      paddingTop: 18,
-      paddingBottom: 18,
-      maxWidth: 0,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-  },
   name: {
     display: 'flex',
     alignItems: 'center',
diff --git a/src/v2/components/UI/Table/index.jsx b/src/v2/components/UI/Table/index.jsx
index cf69f534..1c281556 100644
--- a/src/v2/components/UI/Table/index.jsx
+++ b/src/v2/components/UI/Table/index.jsx
@@ -42,9 +42,10 @@ function getSorting(order, orderBy) {
 
 const EnhancedTableHead = props => {
   const classes = useStyles();
-  const {fields, order, orderBy, onRequestSort, text, term} = props;
+  const {fields, order, orderBy, onRequestSort, sortable} = props;
 
   const createSortHandler = property => event => {
+    if (!sortable) return;
     onRequestSort(event, property);
   };
 
@@ -60,12 +61,13 @@ const EnhancedTableHead = props => {
               sortDirection={orderBy === headCell.id ? order : false}
             >
               <TableSortLabel
+                hideSortIcon={!sortable}
                 active={orderBy === headCell.id}
                 direction={order}
                 onClick={createSortHandler(headCell.id)}
               >
                 {headCell.label}
-                <HelpLink text={text} term={term} />
+                <HelpLink text={headCell.text} term={headCell.term} />
               </TableSortLabel>
             </TableCell>
           ),
@@ -78,7 +80,7 @@ const EnhancedTableHead = props => {
 
 const EnhancedTable = props => {
   const classes = useStyles();
-  const {data = [], fields, renderRow, initialSort = 'name'} = props;
+  const {data = [], fields, renderRow, initialSort = ''} = props;
   const [order, setOrder] = useState('asc');
   const [orderBy, setOrderBy] = React.useState(initialSort);
   const handleRequestSort = (event, property) => {
@@ -90,6 +92,7 @@ const EnhancedTable = props => {
   return (
     <Table className={classes.root}>
       <EnhancedTableHead
+        sortable={Boolean(initialSort)}
         classes={classes}
         order={order}
         orderBy={orderBy}
@@ -103,6 +106,4 @@ const EnhancedTable = props => {
   );
 };
 
-EnhancedTable.propTypes = {};
-
 export default EnhancedTable;
diff --git a/src/v2/components/UI/Table/styles.js b/src/v2/components/UI/Table/styles.js
index 4ff30c05..3c634146 100644
--- a/src/v2/components/UI/Table/styles.js
+++ b/src/v2/components/UI/Table/styles.js
@@ -16,6 +16,11 @@ export default makeStyles(() => ({
       maxWidth: 1,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
+      '& > *': {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: 'block',
+      },
     },
   },
 }));
diff --git a/src/v2/components/Validators/Table/index.jsx b/src/v2/components/Validators/Table/index.jsx
index 44f15298..e1419ab2 100644
--- a/src/v2/components/Validators/Table/index.jsx
+++ b/src/v2/components/Validators/Table/index.jsx
@@ -14,6 +14,8 @@ import Table from 'v2/components/UI/Table';
 import {LAMPORT_SOL_RATIO} from 'v2/constants';
 import Socket from 'v2/stores/socket';
 import Loader from 'v2/components/UI/Loader';
+import HelpLink from 'v2/components/HelpLink';
+
 import ValidatorName from 'v2/components/UI/ValidatorName';
 import useStyles from './styles';
 
@@ -122,9 +124,8 @@ const ValidatorsTable = ({separate}: {separate: boolean}) => {
       {!separate && (
         <div className={classes.header}>
           <Typography>Validators</Typography>
-          <Typography variant="h5">
-            {activeValidators.length + inactiveValidators.length}
-          </Typography>
+          <HelpLink text="" term="" />
+          <Typography variant="h5">{allValidators.length}</Typography>
           <Link to="/validators/all" className={classes.link}>
             See all &gt;
           </Link>
diff --git a/src/v2/components/Validators/Table/styles.js b/src/v2/components/Validators/Table/styles.js
index b6ea6c7a..6712426e 100644
--- a/src/v2/components/Validators/Table/styles.js
+++ b/src/v2/components/Validators/Table/styles.js
@@ -32,9 +32,9 @@ export default makeStyles(theme => ({
   },
   header: {
     display: 'flex',
-    alignItems: 'baseline',
+    alignItems: 'center',
     flexWrap: 'wrap',
-    '& *:first-child': {
+    '& *:nth-child(2)': {
       marginRight: 35,
     },
     marginBottom: 23,