diff --git a/src/components/OrderBook.vue b/src/components/OrderBook.vue
index 240a528..e76543e 100644
--- a/src/components/OrderBook.vue
+++ b/src/components/OrderBook.vue
@@ -37,7 +37,7 @@
         <div v-for="(ask, index) in asksWithCumulativeTotal" :key="index" class="order-item">
           <div class="order-progress">
             <HorizontalProgressBar
-              :max="maxAsksTotal"
+              :max="maxOrderBookTotal"
               :value="ask.total"
               :fillStyle="{ backgroundColor: '#e89595' }"
               :trackStyle="{ backgroundColor: 'transparent' }"
@@ -57,7 +57,7 @@
         >
           <div class="order-progress">
             <HorizontalProgressBar
-              :max="maxBidsTotal"
+              :max="maxOrderBookTotal"
               :value="bid.total"
               :fillStyle="{ backgroundColor: '#7acc7a' }"
               :trackStyle="{ backgroundColor: 'transparent' }"
@@ -284,17 +284,12 @@ const bidsWithCumulativeTotal = computed(() => {
   // Reverse to display in descending order
 })
 
-// Calculate max total from cumulative totals
-const maxAsksTotal = computed(() => {
+// Shared max total from both asks and bids cumulative totals (for progress bar scale)
+const maxOrderBookTotal = computed(() => {
   const askTotals = asksWithCumulativeTotal.value.map((item) => item.cumulativeTotal)
-  const allTotals = [...askTotals]
-  return Math.max(...allTotals)
-})
-
-const maxBidsTotal = computed(() => {
   const bidTotals = bidsWithCumulativeTotal.value.map((item) => item.cumulativeTotal)
-  const allTotals = [...bidTotals]
-  return Math.max(...allTotals)
+  const allTotals = [...askTotals, ...bidTotals]
+  return allTotals.length ? Math.max(...allTotals) : 0
 })
 </script>