diff --git a/client/src/index.css b/client/src/index.css
index 5f0d551..5cb5846 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -372,6 +372,10 @@ th {
   .table-wrap thead {
     display: none;
   }
+  .table-wrap tbody,
+  .table-wrap tfoot {
+    display: block;
+  }
   .table-wrap tr {
     display: flex;
     flex-direction: column;
@@ -394,6 +398,9 @@ th {
     padding-top: 0.5rem;
     border-top: 1px solid var(--border);
   }
+  .table-wrap td.bar-cell {
+    display: none;
+  }
 }
 
 .inventory-card-mobile {
diff --git a/client/src/pages/Reports.jsx b/client/src/pages/Reports.jsx
index 87e5950..42f0ecb 100644
--- a/client/src/pages/Reports.jsx
+++ b/client/src/pages/Reports.jsx
@@ -106,17 +106,17 @@ export default function Reports() {
                 <tbody>
                   {data.salesByProduct.map((row) => (
                     <tr key={row.product_name}>
-                      <td>{row.product_name}</td>
-                      <td>{row.units_sold}</td>
-                      <td>${Number(row.revenue).toFixed(2)}</td>
+                      <td data-label="Product">{row.product_name}</td>
+                      <td data-label="Units sold">{row.units_sold}</td>
+                      <td data-label="Revenue">${Number(row.revenue).toFixed(2)}</td>
                     </tr>
                   ))}
                 </tbody>
                 <tfoot>
                   <tr style={{ fontWeight: 600 }}>
-                    <td>Total</td>
-                    <td>{data.salesByProduct.reduce((s, r) => s + r.units_sold, 0)}</td>
-                    <td>${data.salesByProduct.reduce((s, r) => s + r.revenue, 0).toFixed(2)}</td>
+                    <td data-label="Product">Total</td>
+                    <td data-label="Units sold">{data.salesByProduct.reduce((s, r) => s + r.units_sold, 0)}</td>
+                    <td data-label="Revenue">${data.salesByProduct.reduce((s, r) => s + r.revenue, 0).toFixed(2)}</td>
                   </tr>
                 </tfoot>
               </table>
@@ -138,9 +138,9 @@ export default function Reports() {
                 <tbody>
                   {data.topCustomers.map((row) => (
                     <tr key={row.customer_name}>
-                      <td>{row.customer_name}</td>
-                      <td>{row.order_count}</td>
-                      <td>${Number(row.total_spent).toFixed(2)}</td>
+                      <td data-label="Customer">{row.customer_name}</td>
+                      <td data-label="Orders">{row.order_count}</td>
+                      <td data-label="Total spent">${Number(row.total_spent).toFixed(2)}</td>
                     </tr>
                   ))}
                   {data.topCustomers.length === 0 && (
@@ -169,10 +169,10 @@ export default function Reports() {
                     const maxRevenue = Math.max(...data.revenueOverTime.map((r) => r.revenue), 1);
                     return data.revenueOverTime.map((row) => (
                       <tr key={row.date}>
-                        <td>{row.date}</td>
-                        <td>{row.order_count}</td>
-                        <td>${Number(row.revenue).toFixed(2)}</td>
-                        <td>
+                        <td data-label="Date">{row.date}</td>
+                        <td data-label="Orders">{row.order_count}</td>
+                        <td data-label="Revenue">${Number(row.revenue).toFixed(2)}</td>
+                        <td className="bar-cell">
                           <div style={{
                             height: 18,
                             width: `${(row.revenue / maxRevenue) * 100}%`,
@@ -232,8 +232,8 @@ export default function Reports() {
                       <tbody>
                         {data.orderStatusBreakdown.map((row) => (
                           <tr key={row.status}>
-                            <td style={{ textTransform: 'capitalize' }}>{row.status}</td>
-                            <td>{row.count}</td>
+                            <td data-label="Status" style={{ textTransform: 'capitalize' }}>{row.status}</td>
+                            <td data-label="Count">{row.count}</td>
                           </tr>
                         ))}
                         {data.orderStatusBreakdown.length === 0 && (
@@ -266,14 +266,14 @@ export default function Reports() {
                     const lowStock = row.low_stock_threshold > 0 && row.current_stock <= row.low_stock_threshold;
                     return (
                       <tr key={row.product_name} style={lowStock ? { backgroundColor: 'rgba(229, 62, 62, 0.1)' } : undefined}>
-                        <td>{row.product_name}</td>
-                        <td style={lowStock ? { color: 'var(--danger, #e53e3e)', fontWeight: 600 } : undefined}>
+                        <td data-label="Product">{row.product_name}</td>
+                        <td data-label="Current stock" style={lowStock ? { color: 'var(--danger, #e53e3e)', fontWeight: 600 } : undefined}>
                           {row.current_stock}
                           {lowStock && ' (low)'}
                         </td>
-                        <td>{row.total_restocked}</td>
-                        <td>{row.total_sold}</td>
-                        <td>{row.restock_count}</td>
+                        <td data-label="Total restocked">{row.total_restocked}</td>
+                        <td data-label="Total sold">{row.total_sold}</td>
+                        <td data-label="Restock count">{row.restock_count}</td>
                       </tr>
                     );
                   })}