diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index 36052cb92b..80e9ef9d96 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -6,10 +6,12 @@
   import TaikoBanner from "../../components/TaikoBanner.svelte";
   import Transactions from "../../components/Transactions.svelte";
   let activeTab: string = "bridge";
+  let bridgeWidth;
+  let bridgeHeight;
 </script>
 
-<div class="container mx-auto max-w-fit text-center my-10">
-  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6">
+<div class="container mx-auto {activeTab === 'bridge' ? 'max-w-fit' : 'w-fit'} text-center my-10" style="{activeTab === 'bridge' ? '' : 'min-width: '+bridgeWidth+'px;'}" bind:clientWidth={bridgeWidth} bind:clientHeight={bridgeHeight}>
+  <div class="rounded-3xl border-2 border-zinc-800 border-solid p-2 md:p-6" style="{activeTab === 'bridge' && $transactions.length > 0 ? '' : 'min-height: '+bridgeHeight+'px;'}">
     <div class="tabs mb-4">
       <span
         class="tab tab-bordered {activeTab === 'bridge' ? 'tab-active' : ''}"