diff --git a/components/header/Banner.vue b/components/header/Banner.vue
new file mode 100644
index 000000000..63a323a90
--- /dev/null
+++ b/components/header/Banner.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="banner max-w-[100vw] md:max-w-[700px]">
+    <swiper
+      :spaceBetween="30"
+      :centeredSlides="true"
+      :autoplay="{
+        delay: 2500,
+        disableOnInteraction: false,
+      }"
+      :pagination="{
+        clickable: true,
+      }"
+      :navigation="true"
+      :modules="modules"
+      class="mySwiper"
+    >
+      <swiper-slide>
+        <!-- <div>
+          <img src="/img/banner.svg" class="m-auto hidden md:block" />
+          <img src="/img/mobile.svg" class="m-auto block md:hidden" />
+        </div> -->
+
+        <a href="https://app.zklink.io/" target="\_blank">
+          <img src="/img/banner.svg" className="bannerImg" />
+          <img src="/img/mobile.svg" className="mobileImg" />
+        </a>
+      </swiper-slide>
+      <swiper-slide>
+        <a href="https://zklink.io/merge" target="\_blank">
+          <img src="/img/portal-banner.png" className="bannerImg" />
+          <img src="/img/portal-banner-mobile.png" className="mobileImg" />
+        </a>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+<script>
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+// Import Swiper styles
+import "swiper/css";
+
+// import "swiper/css/pagination";
+// import "swiper/css/navigation";
+
+// import required modules
+import { Autoplay, Pagination, Navigation } from "swiper/modules";
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  setup() {
+    return {
+      modules: [Autoplay, Pagination, Navigation],
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+/* @import "swiper/css"; */
+.banner {
+  margin: 0 auto;
+  overflow: auto;
+  width: 100%;
+  text-align: center;
+  a {
+    display: block;
+    width: 100%;
+    min-width: 0px;
+    max-width: 700px;
+  }
+  .bannerImg {
+    display: block;
+    width: 100%;
+    height: 80px;
+  }
+  .mobileImg {
+    display: none;
+  }
+  @media screen and (max-width: 640px) {
+    .bannerImg {
+      display: none;
+    }
+    .mobileImg {
+      display: none;
+      display: block;
+      width: 100%;
+      height: 80px;
+    }
+  }
+}
+</style>
diff --git a/components/header/Header.vue b/components/header/Header.vue
index e0fde6d37..3240384e7 100644
--- a/components/header/Header.vue
+++ b/components/header/Header.vue
@@ -75,7 +75,10 @@
         <CommonButton class="hamburger-icon" @click="mobileMainNavigationOpened = true">
           <Bars3Icon class="h-6 w-6" aria-hidden="true" />
           <transition v-bind="TransitionOpacity()">
-            <CommonBadge v-if="withdrawalsAvailableForClaiming && withdrawalsAvailableForClaiming.length" class="action-available-badge">
+            <CommonBadge
+              v-if="withdrawalsAvailableForClaiming && withdrawalsAvailableForClaiming.length"
+              class="action-available-badge"
+            >
               {{ withdrawalsAvailableForClaiming.length }}
             </CommonBadge>
           </transition>
@@ -103,7 +106,7 @@
       <div>Note: Withdrawals will be enabled before 04/13/2024</div>
     </div> -->
     <div className="banner" v-if="!route.query.s || route.query.s !== 'okx'">
-      <a href="https://app.zklink.io/" target="\_blank">
+      <!-- <a href="https://app.zklink.io/" target="\_blank">
         <img
           src="/img/banner.svg"
           alt=""
@@ -114,7 +117,8 @@
           alt=""
           className="mobileImg"
         />
-      </a>
+      </a> -->
+      <banner />
     </div>
   </div>
 </template>
@@ -138,6 +142,7 @@ import { useRoute } from "#imports";
 import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
 import useNetworks from "@/composables/useNetworks";
+import Banner from "./Banner.vue";
 const { defaultNetwork, isMainnet } = useNetworks();
 
 const route = useRoute();
@@ -217,28 +222,28 @@ const isShowFaucet = computed(() => defaultNetwork.id === 810182);
     height: 18px;
   }
 }
-.banner{
+.banner {
   width: 100%;
   text-align: center;
-  a{
+  a {
     display: inline-block;
     width: 100%;
     min-width: 0px;
     max-width: 700px;
   }
-  .bannerImg{
+  .bannerImg {
     display: inline-block;
     width: 100%;
     height: 80px;
   }
-  .mobileImg{
+  .mobileImg {
     display: none;
   }
   @media screen and (max-width: 640px) {
-    .bannerImg{
+    .bannerImg {
       display: none;
     }
-    .mobileImg{
+    .mobileImg {
       display: none;
       display: inline-block;
       width: 100%;
diff --git a/package-lock.json b/package-lock.json
index 2dd2b8ebc..1123cad6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "ofetch": "^1.3.3",
         "pinia": "^2.0.33",
         "sass": "^1.57.1",
+        "swiper": "^11.1.0",
         "ts-node": "^10.0.0",
         "typescript": "^4.3.5",
         "viem": "^2.9.5",
@@ -25656,6 +25657,24 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.0.tgz",
+      "integrity": "sha512-Pm78CgU7Wvg+w/MgIL/1NwMSLgx0XqFof25EnVyX8iZFCYJv5CppH7LHkBj43qW2k5Cp3Iz7FcdBxrox7XX2AQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
diff --git a/package.json b/package.json
index 3c4ddc0df..9b4dbece9 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "ofetch": "^1.3.3",
     "pinia": "^2.0.33",
     "sass": "^1.57.1",
+    "swiper": "^11.1.0",
     "ts-node": "^10.0.0",
     "typescript": "^4.3.5",
     "viem": "^2.9.5",
diff --git a/public/img/portal-banner-mobile.png b/public/img/portal-banner-mobile.png
new file mode 100644
index 000000000..f4c9e7db5
Binary files /dev/null and b/public/img/portal-banner-mobile.png differ
diff --git a/public/img/portal-banner.png b/public/img/portal-banner.png
new file mode 100644
index 000000000..2b13742c2
Binary files /dev/null and b/public/img/portal-banner.png differ