diff --git a/src/pages/visualizer/OrderDepthTable.tsx b/src/pages/visualizer/OrderDepthTable.tsx
index 86ce6f0..5c29abd 100644
--- a/src/pages/visualizer/OrderDepthTable.tsx
+++ b/src/pages/visualizer/OrderDepthTable.tsx
@@ -23,11 +23,11 @@ export function OrderDepthTable({ orderDepth }: OrderDepthTableProps): ReactNode
     const price = askPrices[i];
 
     if (i > 0 && askPrices[i - 1] - price > 1) {
-      rows.push(<OrderDepthTableSpreadRow key={`${price}-spread`} spread={askPrices[i - 1] - price} />);
+      rows.push(<OrderDepthTableSpreadRow key={`${price}-ask-spread`} spread={askPrices[i - 1] - price} />);
     }
 
     rows.push(
-      <Table.Tr key={price}>
+      <Table.Tr key={`${price}-ask`}>
         <Table.Td></Table.Td>
         <Table.Td style={{ textAlign: 'center' }}>{formatNumber(price)}</Table.Td>
         <Table.Td style={{ backgroundColor: getAskColor(0.1) }}>
@@ -37,7 +37,7 @@ export function OrderDepthTable({ orderDepth }: OrderDepthTableProps): ReactNode
     );
   }
 
-  if (askPrices.length > 0 && bidPrices.length > 0) {
+  if (askPrices.length > 0 && bidPrices.length > 0 && askPrices[askPrices.length - 1] !== bidPrices[0]) {
     rows.push(<OrderDepthTableSpreadRow key="spread" spread={askPrices[askPrices.length - 1] - bidPrices[0]} />);
   }
 
@@ -45,11 +45,11 @@ export function OrderDepthTable({ orderDepth }: OrderDepthTableProps): ReactNode
     const price = bidPrices[i];
 
     if (i > 0 && bidPrices[i - 1] - price > 1) {
-      rows.push(<OrderDepthTableSpreadRow key={`${price}-spread`} spread={bidPrices[i - 1] - price} />);
+      rows.push(<OrderDepthTableSpreadRow key={`${price}-bid-spread`} spread={bidPrices[i - 1] - price} />);
     }
 
     rows.push(
-      <Table.Tr key={price}>
+      <Table.Tr key={`${price}-bid`}>
         <Table.Td style={{ backgroundColor: getBidColor(0.1), textAlign: 'right' }}>
           {formatNumber(orderDepth.buyOrders[price])}
         </Table.Td>