diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
index c8c5af0e1..fd58b7fb4 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
@@ -23,7 +23,7 @@ export type Transaction = {
 };
 
 const columnHelper = createColumnHelper<Transaction>();
-const columns = (hyperdrive: Hyperdrive) => [
+const getColumns = (hyperdrive: Hyperdrive) => [
   columnHelper.accessor("type", {
     enableSorting: false,
     enableColumnFilter: true,
@@ -69,7 +69,7 @@ export function TransactionTable({
 }): JSX.Element {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const tableInstance = useReactTable({
-    columns: columns(hyperdrive),
+    columns: getColumns(hyperdrive),
     data: transactionData || [],
     state: {
       columnFilters,
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
index f8f19070d..4584d14e5 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
@@ -2,14 +2,14 @@ import { ReactElement } from "react";
 import { Modal } from "src/ui/base/components/Modal/Modal";
 import { MarketsTable } from "src/ui/markets/MarketsTable/MarketsTable";
 
-const MARKETS_MODAL_KEY = "MARKETS_MODAL";
+export const MARKETS_MODAL_KEY = "MARKETS_MODAL";
 
 export function AllMarketsBreadcrumb(): ReactElement {
   return (
     <Modal
-      className={"w-[90vw] max-w-[90vw] p-0 md:w-[70vw] md:max-w-[70vw] md:p-4"}
+      className={"w-[50vw] max-w-[70vw]"}
       modalId={MARKETS_MODAL_KEY}
-      modalContent={<MarketsModalContent />}
+      modalContent={<MarketsTable />}
     >
       {({ showModal }) => (
         <label
@@ -23,13 +23,3 @@ export function AllMarketsBreadcrumb(): ReactElement {
     </Modal>
   );
 }
-
-function MarketsModalContent() {
-  return (
-    <div className="flex max-h-[70vh] flex-col items-center overflow-auto rounded p-1 md:p-4">
-      <h3 className="mb-4 font-lato">Markets</h3>
-
-      <MarketsTable />
-    </div>
-  );
-}
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
index d9a90676e..a96688c8a 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
@@ -1,126 +1,139 @@
-import uniqBy from "lodash.uniqby";
-import { ReactElement, useMemo, useState } from "react";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ReactElement } from "react";
+import { useNavigate } from "react-router-dom";
 import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
 import { useAppConfig } from "src/ui/appconfig/useAppConfig";
-import {
-  Row,
-  SortableGridTable,
-} from "src/ui/base/components/tables/SortableGridTable";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
+import { MARKETS_MODAL_KEY } from "src/ui/markets/MarketSelect/AllMarketsBreadcrumb";
 import {
   MarketTableRowData,
   useMarketRowData,
 } from "src/ui/markets/MarketsTable/useMarketRowData";
 import { YieldSourceLabel } from "src/ui/markets/YieldSourceLabel/YieldSourceLabel";
-import { usePublicClient } from "wagmi";
 
-const ALL_PROTOCOLS_KEY = "All Markets";
-const ALL_TERM_LENGTHS_KEY = 0;
+const columnHelper = createColumnHelper<MarketTableRowData>();
+
+function getColumns() {
+  return [
+    columnHelper.accessor("market.name", {
+      header: "Name",
+      cell: ({ getValue, row }) => {
+        const marketName = getValue();
+        return (
+          <span key="name" className="font-bold">
+            <p>{marketName}</p>
+            <YieldSourceLabel yieldSource={row.original.yieldSource} />
+          </span>
+        );
+      },
+    }),
+    columnHelper.accessor("market.termLengthMS", {
+      header: "Term",
+      cell: ({ getValue }) => {
+        const termLength = getValue();
+        return (
+          <p key="term" className="font-semibold">
+            {convertMillisecondsToDays(termLength)} days
+          </p>
+        );
+      },
+    }),
+    columnHelper.accessor("liquidity", {
+      header: "Liquidity",
+      cell: ({ getValue, row }) => {
+        const liquidity = getValue();
+        return (
+          <span
+            key="liquidity"
+            className="flex flex-row items-center justify-start font-semibold"
+          >
+            <img
+              className="mr-1 h-4"
+              src={row.original.market.baseToken.iconUrl}
+            />
+            {formatBalance({
+              balance: liquidity,
+              decimals: row.original.market.baseToken.decimals,
+              places: 0,
+            })}
+          </span>
+        );
+      },
+    }),
+    columnHelper.accessor("longAPR", {
+      header: "Fixed Rate",
+      cell: ({ getValue }) => {
+        const fixedRate = getValue();
+        return <span key="fixed-rate">{fixedRate}%</span>;
+      },
+    }),
+  ];
+}
 
 export function MarketsTable(): ReactElement {
   const { appConfig: config } = useAppConfig();
-  const publicClient = usePublicClient();
-
-  const allProtocols = config?.hyperdrives.map(
-    (market) => config?.yieldSources[market.yieldSource],
-  );
-  const protocols = uniqBy(allProtocols, (protocol) => protocol.name);
-  const allTermLengths = config?.hyperdrives.map(
-    (market) => market.termLengthMS,
-  );
-  const termLengths = uniqBy(allTermLengths, (termLength) => termLength);
-
-  const [protocolFilter, setSelectedProtocolFilter] =
-    useState<string>(ALL_PROTOCOLS_KEY);
-  const [termLengthFilter, setSelectedTermLengthFilter] =
-    useState<number>(ALL_TERM_LENGTHS_KEY);
-
+  const navigate = useNavigate();
   // TODO: no loading state for now
-  const { data: marketsRowData = [], status: marketRowDataStatus } =
-    useMarketRowData(config?.hyperdrives);
-
-  const filteredMarkets = useMemo(() => {
-    const marketFilteredByTermLength = termLengthFilter
-      ? marketsRowData.filter(
-          (marketRowData) =>
-            marketRowData.market.termLengthMS === termLengthFilter,
-        )
-      : marketsRowData;
-
-    if (protocolFilter !== ALL_PROTOCOLS_KEY) {
-      return marketFilteredByTermLength.filter(
-        (marketRowData) => marketRowData.market.yieldSource === protocolFilter,
-      );
-    }
-
-    return marketFilteredByTermLength;
-  }, [marketsRowData, protocolFilter, termLengthFilter]);
+  const { data: marketsRowData = [] } = useMarketRowData(config?.hyperdrives);
+  const tableInstance = useReactTable({
+    columns: getColumns(),
+    data: marketsRowData || [],
+    getCoreRowModel: getCoreRowModel(),
+  });
 
   return (
-    <div className="flex flex-col space-y-8 overflow-x-auto rounded-sm bg-base-300">
-      {/* Markets sortable table */}
-      <div>
-        <SortableGridTable
-          headingRowClassName="grid-cols-auto bg-base-300 bg-opacity-100"
-          bodyRowClassName="grid-cols-auto bg-transparent text-base-content"
-          cols={[
-            {
-              cell: "Name",
-              sortKey: "name",
-            },
-            {
-              cell: "Term Length",
-              sortKey: "termLength",
-            },
-            {
-              cell: "Liquidity",
-              sortKey: "liquidity",
-            },
-            {
-              cell: "Fixed Rate",
-              sortKey: "longAPR",
-            },
-          ]}
-          rows={filteredMarkets.map((marketRowData) =>
-            createMarketRow(marketRowData),
-          )}
-          showSkeleton={marketRowDataStatus === "loading"}
-        />
-      </div>
+    <div className="flex max-h-96 flex-col items-center overflow-y-scroll">
+      <h3 className="mb-4 font-lato">Markets</h3>
+      <table className="daisy-table-zebra daisy-table daisy-table-lg">
+        <thead>
+          {tableInstance.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {tableInstance.getRowModel().rows.map((row) => {
+            return (
+              <tr
+                key={row.id}
+                className="daisy-hover h-16 cursor-pointer grid-cols-4 items-center"
+                onClick={() => {
+                  navigate(`/trade/${row.original.market}`);
+                  (window as any)[MARKETS_MODAL_KEY].close();
+                }}
+              >
+                <>
+                  {row.getVisibleCells().map((cell) => {
+                    return (
+                      <td key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    );
+                  })}
+                </>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
     </div>
   );
 }
-
-function createMarketRow({
-  market,
-  yieldSource,
-  liquidity,
-}: MarketTableRowData): Row {
-  return {
-    href: `/trade/${market.address}`,
-    cells: [
-      <span key="name" className="font-bold">
-        <p>{market.name}</p>
-        <YieldSourceLabel yieldSource={yieldSource} />
-      </span>,
-      <p key="term" className="font-semibold">
-        {convertMillisecondsToDays(market.termLengthMS)} days
-      </p>,
-
-      <span
-        key="liquidity"
-        className="flex flex-row items-center justify-start font-semibold"
-      >
-        <img className="mr-1 h-4" src={market.baseToken.iconUrl} />
-        {formatBalance({
-          balance: liquidity,
-          decimals: market.baseToken.decimals,
-          places: 0,
-        })}
-      </span>,
-      <span key="apy" className="font-semibold">
-        1.25%
-      </span>,
-    ],
-  };
-}
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
index f2dc6f65a..9138892e8 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
@@ -18,7 +18,7 @@ interface ClosedShortsTableProps {
 }
 
 const columnHelper = createColumnHelper<ClosedShort>();
-const columns = (hyperdrive: Hyperdrive) => [
+const getColumns = (hyperdrive: Hyperdrive) => [
   columnHelper.display({
     header: `ID`,
     cell: ({ row }) => <span>{Number(row.original.maturity)}</span>,
@@ -79,7 +79,7 @@ export function ClosedShortsTable({
     enabled: queryEnabled,
   });
   const tableInstance = useReactTable({
-    columns: columns(hyperdrive),
+    columns: getColumns(hyperdrive),
     data: closedShorts || [],
     getCoreRowModel: getCoreRowModel(),
   });
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
index a2c020946..2a5b4151e 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
@@ -23,7 +23,7 @@ import { usePreviewCloseShort } from "src/ui/hyperdrive/shorts/hooks/usePreviewC
 import { useAccount } from "wagmi";
 
 const columnHelper = createColumnHelper<OpenShort>();
-const columns = (hyperdrive: Hyperdrive) => [
+const getColumns = (hyperdrive: Hyperdrive) => [
   columnHelper.accessor("bondAmount", {
     header: `Size (hy${hyperdrive.baseToken.symbol})`,
     cell: (bondAmount) => {
@@ -70,7 +70,7 @@ function CurrentValueCell({
   const currentValue =
     baseAmountOut &&
     formatBalance({
-      balance: row.original.bondAmount - baseAmountOut,
+      balance: baseAmountOut,
       decimals: hyperdrive.baseToken.decimals,
     });
   const profitLossClass = baseAmountOut
@@ -111,7 +111,7 @@ export function OpenShortsTable({
     enabled: queryEnabled,
   });
   const tableInstance = useReactTable({
-    columns: columns(hyperdrive),
+    columns: getColumns(hyperdrive),
     data: shorts || [],
     getCoreRowModel: getCoreRowModel(),
   });