diff --git a/src/components/bridge/ethereum/L1Bridge.vue b/src/components/bridge/ethereum/L1Bridge.vue
index 0d2225972..b66e7cf79 100644
--- a/src/components/bridge/ethereum/L1Bridge.vue
+++ b/src/components/bridge/ethereum/L1Bridge.vue
@@ -134,6 +134,15 @@
         <span class="color--white"> {{ $t(errMsg) }}</span>
       </div>
 
+      <div v-if="fromChainName === EthBridgeNetworkName.AstarZk" class="row--box-error">
+        <span class="color--white">
+          {{ $t('bridge.warningHighTraffic') }}
+          <a class="color--white text-underline" @click="setHighTrafficModalOpen(true)">
+            {{ $t('bridge.warningHighTrafficMore') }}
+          </a>
+        </span>
+      </div>
+
       <div class="container--warning">
         <ul>
           <li>{{ $t('bridge.warning32blocks') }}</li>
@@ -158,13 +167,21 @@
         </astar-button>
       </div>
     </div>
+
+    <modal-bridge-high-traffic
+      v-if="isHighTrafficModalOpen"
+      :set-is-open="setHighTrafficModalOpen"
+      :show="isHighTrafficModalOpen"
+    />
   </div>
 </template>
+
 <script lang="ts">
 import { wait } from '@astar-network/astar-sdk-core';
 import { isHex } from '@polkadot/util';
 import TokenBalance from 'src/components/common/TokenBalance.vue';
-import { useAccount, useNetworkInfo } from 'src/hooks';
+import ModalBridgeHighTraffic from 'src/components/common/ModalBridgeHighTraffic.vue';
+import { useAccount } from 'src/hooks';
 import { EthBridgeNetworkName, ZkToken, zkBridgeIcon } from 'src/modules/zk-evm-bridge';
 import { useStore } from 'src/store';
 import { PropType, defineComponent, watch, ref, computed } from 'vue';
@@ -174,6 +191,7 @@ export default defineComponent({
   components: {
     TokenBalance,
     [Jazzicon.name]: Jazzicon,
+    ModalBridgeHighTraffic,
   },
   props: {
     fetchUserHistory: {
@@ -255,11 +273,15 @@ export default defineComponent({
   },
   setup(props) {
     const { currentAccount } = useAccount();
-    const { isZkyoto } = useNetworkInfo();
     const store = useStore();
     const isHandling = ref<boolean>(false);
     const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
     const isEnabledWithdrawal = computed<boolean>(() => true);
+    const isHighTrafficModalOpen = ref<boolean>(false);
+
+    const setHighTrafficModalOpen = (value: boolean): void => {
+      isHighTrafficModalOpen.value = value;
+    };
 
     const bridge = async (): Promise<void> => {
       isHandling.value = true;
@@ -307,6 +329,8 @@ export default defineComponent({
       isEnabledWithdrawal,
       bridge,
       approve,
+      isHighTrafficModalOpen,
+      setHighTrafficModalOpen,
     };
   },
 });
diff --git a/src/components/bridge/ethereum/styles/l1-bridge.scss b/src/components/bridge/ethereum/styles/l1-bridge.scss
index 2e3aa56cb..3a26d785e 100644
--- a/src/components/bridge/ethereum/styles/l1-bridge.scss
+++ b/src/components/bridge/ethereum/styles/l1-bridge.scss
@@ -256,3 +256,8 @@
     border-color: $gray-3;
   }
 }
+
+.text-underline {
+  text-decoration: underline;
+  cursor: pointer;
+}
diff --git a/src/components/common/ModalBridgeHighTraffic.vue b/src/components/common/ModalBridgeHighTraffic.vue
new file mode 100644
index 000000000..3144bf073
--- /dev/null
+++ b/src/components/common/ModalBridgeHighTraffic.vue
@@ -0,0 +1,69 @@
+<template>
+  <modal-wrapper
+    :is-modal-open="show"
+    title=""
+    :is-closing="isClosingModal"
+    :close-modal="closeModal"
+    class-name="highest-z-index"
+  >
+    <div class="wrapper--modal-bridge-high-traffic">
+      <div class="row--description">
+        <span class="text--md">
+          {{ $t('bridge.modals.highTraffic.text1') }}
+        </span>
+        <span class="text--md">
+          {{ $t('bridge.modals.highTraffic.text2') }}
+        </span>
+      </div>
+      <div class="bottoms--modal-bridge-high-traffic">
+        <button @click="closeModal">{{ $t('bridge.modals.highTraffic.understood') }}</button>
+      </div>
+    </div>
+  </modal-wrapper>
+</template>
+
+<script lang="ts">
+import { truncate, wait } from '@astar-network/astar-sdk-core';
+import { fadeDuration } from '@astar-network/astar-ui';
+import ModalWrapper from 'src/components/common/ModalWrapper.vue';
+import { useBreakpoints } from 'src/hooks';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { ModalWrapper },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    setIsOpen: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    const isClosingModal = ref<boolean>(false);
+    const closeModal = async (): Promise<void> => {
+      isClosingModal.value = true;
+      await wait(fadeDuration);
+      props.setIsOpen(false);
+      isClosingModal.value = false;
+    };
+
+    const { width, screenSize } = useBreakpoints();
+
+    return {
+      width,
+      screenSize,
+      close,
+      truncate,
+      closeModal,
+      isClosingModal,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'src/components/common/styles/modal-bridge-high-traffic.scss';
+</style>
diff --git a/src/components/common/styles/modal-bridge-high-traffic.scss b/src/components/common/styles/modal-bridge-high-traffic.scss
new file mode 100644
index 000000000..0cec2f2ec
--- /dev/null
+++ b/src/components/common/styles/modal-bridge-high-traffic.scss
@@ -0,0 +1,59 @@
+@import 'src/css/quasar.variables.scss';
+
+.wrapper--modal-bridge-high-traffic {
+  display: flex;
+  flex-direction: column;
+  padding: 0 14px;
+  padding-bottom: 36px;
+  width: 100%;
+  @media (min-width: $lg) {
+    padding: 0;
+    padding-bottom: 0px;
+    max-width: 480px;
+  }
+}
+
+.row--description {
+  display: flex;
+  flex-direction: column;
+  gap: 21px; // the line height of the text
+
+  margin-bottom: 34px;
+  padding: 0 16px;
+
+  @media (min-width: $sm) {
+    padding: 0;
+  }
+}
+
+.bottoms--modal-bridge-high-traffic {
+  width: 100%;
+
+  & > button {
+    width: 100%;
+    padding: 14px 0px;
+    border-radius: 50px;
+    background-color: $astar-blue;
+    color: $white;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: -0.2px;
+  }
+}
+
+.text--button {
+  font-weight: 600;
+  font-size: 14px;
+  color: $gray-1;
+}
+
+.body--dark {
+  .text--tips-title {
+    color: $gray-1;
+  }
+  .container--tips {
+    border: 1px solid $gray-3;
+  }
+}
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 582e13d23..9ec16355b 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -90,7 +90,7 @@ export default {
     connectedInvalidNetwork: 'Please connect to the correct network in your wallet',
     attention: 'Attention',
     testnetSwitchWarning:
-      'We are switching our Astar zkEVM testnet to zKyoto on 25th March. We recommend you to move your test tokens to Sepolia. zKyoto network will be closed soon.',
+      'We have switched our zkEVM testnet to zKyoto from zKatana. zKatana will no longer available.',
   },
   toast: {
     transactionFailed: 'Transaction failed with error: {message}',
@@ -1032,6 +1032,18 @@ export default {
     warning2steps:
       'Bridging to L1 (Ethereum) involves 2 steps, and it requires users to make a claim on the L1 network (available in Recent History)',
     gelatoApiError: 'Bridge UI is not available, please try again later',
+    warningHighTraffic:
+      'High bridge traffic may delay withdrawal transactions up to 10 hours. We appreciate your patience.',
+    warningHighTrafficMore: '(read more)',
+    modals: {
+      highTraffic: {
+        text1:
+          'We are currently experiencing unusually high traffic on our canonical bridge, leading to longer than usual processing times for withdrawal. Your transaction may take up to 10 hours to complete. We understand how valuable your time is and are working diligently to resolve this congestion by scaling the infrastructure.',
+        text2:
+          'For urgent transactions, you might consider scheduling them during off-peak hours or exploring alternative 3rd party bridge partners. We appreciate your patience and understanding as we strive to enhance your experience. Thank you for your continued support.',
+        understood: 'Understood',
+      },
+    },
     tokenInfo: {
       invalidTokenAddress: 'Invalid token address',
       tokenAddress: '{network} token address',