diff --git a/package.json b/package.json
index e05c4d04c..962fe8f1b 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "serverless-http": "^2.7.0",
     "store": "^2.0.12",
     "stream": "^0.0.2",
+    "swiper": "^11.0.3",
     "v-odometer": "^2.0.1",
     "validator": "^13.7.0",
     "vue-i18n": "^9.2.2",
diff --git a/public/images/ads/how_to_stake.webp b/public/images/ads/how_to_stake.webp
new file mode 100644
index 000000000..5425a3f3f
Binary files /dev/null and b/public/images/ads/how_to_stake.webp differ
diff --git a/public/images/ads/what_is_dapp_staking.webp b/public/images/ads/what_is_dapp_staking.webp
new file mode 100644
index 000000000..036477909
Binary files /dev/null and b/public/images/ads/what_is_dapp_staking.webp differ
diff --git a/public/images/dapp_promotions/algem.jpg b/public/images/dapp_promotions/algem.jpg
new file mode 100644
index 000000000..f4e837caa
Binary files /dev/null and b/public/images/dapp_promotions/algem.jpg differ
diff --git a/src/assets/img/dapps_staking_bg_dark.webp b/src/assets/img/dapps_staking_bg_dark.webp
new file mode 100644
index 000000000..46f0730a4
Binary files /dev/null and b/src/assets/img/dapps_staking_bg_dark.webp differ
diff --git a/src/assets/img/dapps_staking_bg_light.webp b/src/assets/img/dapps_staking_bg_light.webp
new file mode 100644
index 000000000..8cccddfe9
Binary files /dev/null and b/src/assets/img/dapps_staking_bg_light.webp differ
diff --git a/src/components/dapp-staking/StakingTop.vue b/src/components/dapp-staking/StakingTop.vue
index 43b73db30..80da710dd 100644
--- a/src/components/dapp-staking/StakingTop.vue
+++ b/src/components/dapp-staking/StakingTop.vue
@@ -24,6 +24,13 @@
       <dapp-list category="Utility" />
       <dapp-list category="Others" />
     </div>
+
+    <Teleport to="#staking-top-bg">
+      <div
+        class="dapps-staking-bg"
+        :style="{ backgroundImage: `url(${isDarkTheme ? bg_img.dark : bg_img.light})` }"
+      />
+    </Teleport>
   </div>
   <div v-else />
 </template>
@@ -94,7 +101,13 @@ export default defineComponent({
       store.dispatch('dapps/getTvl');
     });
 
-    return { isReady, isZkEvm };
+    const isDarkTheme = computed<boolean>(() => store.getters['general/theme'] === 'DARK');
+    const bg_img = {
+      light: require('/src/assets/img/dapps_staking_bg_light.webp'),
+      dark: require('/src/assets/img/dapps_staking_bg_dark.webp'),
+    };
+
+    return { isReady, isZkEvm, isDarkTheme, bg_img };
   },
 });
 </script>
diff --git a/src/components/dapp-staking/my-staking/AdsArea.vue b/src/components/dapp-staking/my-staking/AdsArea.vue
index 47fb3d92c..4303a47e7 100644
--- a/src/components/dapp-staking/my-staking/AdsArea.vue
+++ b/src/components/dapp-staking/my-staking/AdsArea.vue
@@ -1,13 +1,32 @@
 <template>
-  <div class="wrapper--cards">
-    <div v-for="(t, index) in items" :key="index" class="card" @click="goToLink(t.link)">
-      <div
-        class="wrapper--img"
-        :style="`background-image: url('${isShiden ? bg_img.shiden_hero : bg_img.astar_hero}')`"
-      ></div>
-      <div class="txt--subtitle">{{ t.subtitle }}</div>
-      <div class="txt--title">{{ t.title }}</div>
-    </div>
+  <div class="wrapper--ads-area">
+    <swiper
+      class="swiper--ads-area"
+      :slides-per-view="1.25"
+      :slides-per-group="1"
+      :space-between="24"
+      :navigation="true"
+      :parallax="true"
+      :modules="modules"
+      :breakpoints="{
+        '768': {
+          slidesPerView: 3,
+          slidesPerGroup: 3,
+        },
+      }"
+    >
+      <swiper-slide v-for="(t, index) in items" :key="index">
+        <div class="card--swiper" @click="goToLink(t.link)">
+          <img :src="t.img" class="card__img" />
+          <div class="card__bottom">
+            <div>
+              <div class="text--subtitle">{{ t.subtitle }}</div>
+              <div class="text--title">{{ t.title }}</div>
+            </div>
+          </div>
+        </div>
+      </swiper-slide>
+    </swiper>
   </div>
 </template>
 <script lang="ts">
@@ -16,7 +35,17 @@ import { useNetworkInfo } from 'src/hooks';
 import { endpointKey } from 'src/config/chainEndpoints';
 import adsData from 'src/data/ads.json';
 
+// Import Swiper
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { Navigation } from 'swiper/modules';
+
 export default defineComponent({
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
   setup() {
     const bg_img = {
       astar_hero: require('/src/assets/img/banner/banner-02-astar.png'),
@@ -25,87 +54,25 @@ export default defineComponent({
     const { currentNetworkIdx } = useNetworkInfo();
     const isShiden = computed(() => currentNetworkIdx.value === endpointKey.SHIDEN);
 
-    const items = adsData;
+    const items = adsData.map((item) => {
+      return {
+        ...item,
+        img: item.img === '' ? bg_img.astar_hero : item.img,
+      };
+    });
 
     const goToLink = (link: string) => {
       window.open(link, '_blank');
     };
 
     return {
+      modules: [Navigation],
       items,
-      bg_img,
-      isShiden,
       goToLink,
     };
   },
 });
 </script>
 <style lang="scss" scoped>
-@import 'src/css/quasar.variables.scss';
-.wrapper--cards {
-  display: grid;
-  grid-template-columns: auto auto auto;
-  gap: 16px;
-  justify-content: center;
-  padding: 0 16px;
-  margin-top: 48px;
-  margin-bottom: 48px;
-  @media (min-width: $md) {
-    justify-content: center;
-    gap: 24px;
-  }
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  justify-content: left;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-.card {
-  flex-basis: 30%;
-  cursor: pointer;
-
-  margin-bottom: 48px;
-  @media (min-width: $md) {
-    flex-basis: 0;
-  }
-  .wrapper--img {
-    background: rgb(110, 110, 110);
-    background-size: cover;
-    height: 200px;
-    border-radius: 6px;
-    width: 300px;
-    @media (min-width: $md) {
-      width: 100%;
-    }
-    @media (min-width: $xl) {
-      width: 310px;
-    }
-  }
-  .txt--subtitle {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 17px;
-    color: #b1b7c1;
-    margin-top: 16px;
-  }
-  .txt--title {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 18px;
-    color: $navy-1;
-    margin-top: 10px;
-  }
-  @media (max-width: $sm) {
-    margin-bottom: 40px;
-  }
-}
-.body--dark {
-  .card {
-    .txt--title {
-      color: $gray-1;
-    }
-  }
-}
+@import './styles/ads-area.scss';
 </style>
diff --git a/src/components/dapp-staking/my-staking/DynamicAdsArea.vue b/src/components/dapp-staking/my-staking/DynamicAdsArea.vue
index b8c4fd78a..9e83004f5 100644
--- a/src/components/dapp-staking/my-staking/DynamicAdsArea.vue
+++ b/src/components/dapp-staking/my-staking/DynamicAdsArea.vue
@@ -1,118 +1,120 @@
 <template>
-  <div class="wrapper">
-    <div class="wrapper-item news-area">
-      <news-area />
-    </div>
-    <div class="wrapper-item wrapper--banners" :class="isShiden && 'wrapper--shiden'">
-      <div
-        v-for="(t, index) in items"
-        :key="index"
-        class="card"
-        :style="
-          t.gradient
-            ? `background: linear-gradient(180deg, ${t.gradient[0]} 0%, ${t.gradient[1]} 100%)`
-            : ''
-        "
-        @click="goToLink(t.link)"
-      >
-        <div class="wrapper--img">
-          <q-img :src="sourceImg(t.img, index)" class="img--dapp" fit="contain" no-spinner />
-        </div>
-        <div class="card-info">
-          <div class="txt--category">{{ t.category }}</div>
-          <div class="txt--title">
-            {{
-              index === 0 ? $n(truncate(rewardsDeveloper, 0)) + ' ' + nativeTokenSymbol : t.title
-            }}
+  <div class="wrapper--ads-area">
+    <swiper
+      class="swiper--ads-area"
+      :slides-per-view="1.25"
+      :slides-per-group="1"
+      :space-between="16"
+      :navigation="true"
+      :parallax="true"
+      :modules="modules"
+      :breakpoints="{
+        '768': {
+          slidesPerView: 3.25,
+          slidesPerGroup: 3,
+          spaceBetween: 16,
+        },
+        '1024': {
+          slidesPerView: 3.25,
+          slidesPerGroup: 3,
+          spaceBetween: 24,
+        },
+        '1280': {
+          slidesPerView: 4.5,
+          slidesPerGroup: 4,
+          spaceBetween: 24,
+        },
+      }"
+    >
+      <swiper-slide v-for="(item, index) in combinedCampaigns" :key="index">
+        <div
+          class="card--swiper"
+          @click="item.link !== undefined ? goToLink(item.link) : goDappPageLink(item.address)"
+        >
+          <img :src="item.img" class="card__img" />
+          <div class="card__bottom">
+            <div>
+              <div
+                class="text--accent"
+                :class="item.link !== undefined ? 'featured' : 'new-listing'"
+              >
+                {{ item.link !== undefined ? 'FEATURED' : 'NEW LISTING' }}
+              </div>
+              <div class="text--name">{{ item.name }}</div>
+            </div>
+            <div class="text--description">{{ item.shortDescription }}</div>
           </div>
-          <div class="txt--subtitle">{{ t.subtitle }}</div>
         </div>
-      </div>
-    </div>
+      </swiper-slide>
+    </swiper>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watchEffect, computed } from 'vue';
-import { Struct } from '@polkadot/types';
-import { Perbill } from '@polkadot/types/interfaces';
-import { ethers } from 'ethers';
-import { $api } from 'src/boot/api';
-import { truncate } from '@astar-network/astar-sdk-core';
-import { endpointKey } from 'src/config/chainEndpoints';
-import { useNetworkInfo } from 'src/hooks';
-import NewsArea from './components/NewsArea.vue';
-import featuredData from 'src/data/featured_dapp.json';
+import { defineComponent } from 'vue';
+import { networkParam, Path } from 'src/router/routes';
+import { useRouter } from 'vue-router';
+import { useCampaign } from 'src/hooks';
 
-interface RewardDistributionConfig extends Struct {
-  readonly baseTreasuryPercent: Perbill;
-  readonly baseStakerPercent: Perbill;
-  readonly dappsPercent: Perbill;
-  readonly collatorsPercent: Perbill;
-  readonly adjustablePercent: Perbill;
-  readonly idealDappsStakingTvl: Perbill;
-}
+// Import Swiper
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { Navigation } from 'swiper/modules';
 
 export default defineComponent({
   components: {
-    NewsArea,
+    Swiper,
+    SwiperSlide,
   },
   setup() {
-    const items = featuredData;
-    const rewardsDeveloper = ref<number>(0);
-    const { nativeTokenSymbol, currentNetworkIdx } = useNetworkInfo();
-    const isShiden = computed(() => currentNetworkIdx.value === endpointKey.SHIDEN);
+    const router = useRouter();
+    const { combinedCampaigns } = useCampaign();
 
-    const goToLink = (link: string) => {
+    const goToLink = (link: string): void => {
       window.open(link, '_blank');
     };
 
-    const calcDeveloperRewards = async (): Promise<void> => {
-      try {
-        const api = $api!;
-        const [rewardsAllocation, rewardsAmount, blockPerEra] = await Promise.all([
-          api.query.blockReward.rewardDistributionConfigStorage<RewardDistributionConfig>(),
-          api.consts.blockReward.rewardAmount.toString(),
-          Number(api.consts.dappsStaking.blockPerEra.toString()),
-        ]);
-        const rewardsAmountPerEra = Number(ethers.utils.formatEther(rewardsAmount)) * blockPerEra;
-        const numAdjToPercentage = 0.000000001;
-        const dappsPercent = rewardsAllocation.dappsPercent.toNumber() * numAdjToPercentage;
-        rewardsDeveloper.value = rewardsAmountPerEra * dappsPercent;
-      } catch (error) {
-        console.error(error);
-      }
-    };
-
-    const sourceImg = (img: string, index: number) => {
-      if (index === 0) {
-        if (isShiden.value) {
-          return require('/src/assets/img/ic_sdn_farm.svg');
-        } else {
-          return require('/src/assets/img/ic_astar_farm.svg');
-        }
-      } else if (index === 1) {
-        return require('/src/assets/img/ic_algem_staking.svg');
-      } else if (index === 2) {
-        return require('/src/assets/img/ic_neurolanche.png');
-      } else {
-        return img;
-      }
+    const goDappPageLink = (address: string | undefined): void => {
+      const base = networkParam + Path.DappStaking + Path.Dapp;
+      const url = `${base}?dapp=${address?.toLowerCase()}`;
+      router.push(url);
     };
 
-    watchEffect(calcDeveloperRewards);
-
     return {
-      nativeTokenSymbol,
-      rewardsDeveloper,
-      truncate,
-      sourceImg,
-      items,
-      isShiden,
+      modules: [Navigation],
+      combinedCampaigns,
       goToLink,
+      goDappPageLink,
     };
   },
 });
 </script>
 <style lang="scss" scoped>
-@import './styles/dynamic-ads-area.scss';
+@import './styles/ads-area.scss';
+</style>
+
+<style lang="scss">
+.swiper--ads-area {
+  .swiper-button-prev,
+  .swiper-button-next {
+    color: white;
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: $navy-1;
+    &::after {
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+  .swiper-button-prev {
+    padding-right: 2px;
+  }
+  .swiper-button-next {
+    padding-left: 2px;
+  }
+  .swiper-button-disabled {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/dapp-staking/my-staking/MyRewards.vue b/src/components/dapp-staking/my-staking/MyRewards.vue
index aae52cdbc..8e5124e6e 100644
--- a/src/components/dapp-staking/my-staking/MyRewards.vue
+++ b/src/components/dapp-staking/my-staking/MyRewards.vue
@@ -138,6 +138,12 @@
       <q-icon name="warning" size="20px" class="q-mr-sm" />
       <div>{{ $t('dappStaking.cantClaimWihtoutError') }}</div>
     </div>
+    <!-- TODO: Add a link to the doc -->
+    <div v-if="isDappDeveloper" class="info--dapps-owners">
+      <span>{{ $t('new') }}</span>
+      {{ $t('myReward.dappsOwners') }}
+      <a href="#" target="_blank" rel="noopener noreferrer">{{ $t('myReward.dappsOwnersLink') }}</a>
+    </div>
   </div>
 </template>
 <script lang="ts">
diff --git a/src/components/dapp-staking/my-staking/OnChainData.vue b/src/components/dapp-staking/my-staking/OnChainData.vue
index 6a6e388cb..e945c1160 100644
--- a/src/components/dapp-staking/my-staking/OnChainData.vue
+++ b/src/components/dapp-staking/my-staking/OnChainData.vue
@@ -363,3 +363,9 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import './styles/on-chain-data.scss';
 </style>
+
+<style lang="scss">
+.body--dark .column--sort .q-icon {
+  color: $gray-1;
+}
+</style>
diff --git a/src/components/dapp-staking/my-staking/TopMetric.vue b/src/components/dapp-staking/my-staking/TopMetric.vue
index 3f69f43c8..b3bac13b5 100644
--- a/src/components/dapp-staking/my-staking/TopMetric.vue
+++ b/src/components/dapp-staking/my-staking/TopMetric.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="panel"
-    :style="`background-image: url('${isShiden ? hero_img.shiden_hero : hero_img.astar_hero}');`"
-  >
+  <div class="panel">
     <div class="wrapper--title">
       <div class="txt--title animate__animated animate__zoomInRight">
         {{ $t('topMetric.build2earn') }}
@@ -11,84 +8,90 @@
         {{ $t('topMetric.wayOfStaking') }}
       </div>
     </div>
+
     <div class="wrapper--cards">
-      <div class="card">
-        <p>
-          {{ $t('topMetric.tvlInDapps') }}
-        </p>
-        <div class="row--data">
-          <div v-if="!tvl" class="loading">
-            <q-skeleton type="rect" animation="fade" />
-          </div>
-          <div v-else class="column--tvl">
-            <div class="txt--tvl">
-              {{ formatNumber(tvl.tvlDefaultUnit, 2) }} {{ nativeTokenSymbol }}
+      <div class="cards">
+        <div class="card">
+          <p>
+            {{ $t('topMetric.tvlInDapps') }}
+          </p>
+          <div class="row--data">
+            <div v-if="!tvl" class="loading">
+              <q-skeleton type="rect" animation="fade" />
+            </div>
+            <div v-else class="column--tvl">
+              <div class="txt--tvl">
+                {{ formatNumber(tvl.tvlDefaultUnit, 2) }} {{ nativeTokenSymbol }}
+              </div>
+              <div>(${{ formatNumber(tvl.tvlUsd, 1) }})</div>
             </div>
-            <div>(${{ formatNumber(tvl.tvlUsd, 1) }})</div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <p>
-          {{ $t('topMetric.stakersRewards') }}
-        </p>
-        <div class="row--data">
-          <div v-if="!percentage" class="loading">
-            <q-skeleton type="rect" animation="fade" />
-          </div>
-          <div v-else class="value">
-            <div class="column--apr-apy">
-              <div :class="isApr ? 'button--active' : 'button--not-active'" @click="isApr = true">
-                <span> {{ $t('topMetric.apr') }}</span>
+        <div class="card">
+          <p>
+            {{ $t('topMetric.stakersRewards') }}
+          </p>
+          <div class="row--data">
+            <div v-if="!percentage" class="loading">
+              <q-skeleton type="rect" animation="fade" />
+            </div>
+            <div v-else class="value">
+              <div class="column--apr-apy">
+                <div :class="isApr ? 'button--active' : 'button--not-active'" @click="isApr = true">
+                  <span> {{ $t('topMetric.apr') }}</span>
+                </div>
+                <div
+                  :class="!isApr ? 'button--active' : 'button--not-active'"
+                  @click="isApr = false"
+                >
+                  <span> {{ $t('topMetric.apy') }}</span>
+                </div>
               </div>
-              <div :class="!isApr ? 'button--active' : 'button--not-active'" @click="isApr = false">
-                <span> {{ $t('topMetric.apy') }}</span>
+              <div>
+                <span>{{ percentage }}%</span>
               </div>
             </div>
-            <div>
-              <span>{{ percentage }}%</span>
-            </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <p>
-          {{ $t('topMetric.currentEra') }}
-        </p>
-        <div class="row--data">
-          <div v-if="!currentEra" class="loading">
-            <q-skeleton type="rect" animation="fade" />
-          </div>
-          <div v-else class="value">
-            <div class="row--era-info">
-              <div class="column--era-info">
-                <div>{{ currentEra.toString() }}</div>
-                <div v-if="etaNextEra" class="text--eta-next-era">
-                  {{ $t('topMetric.eraInfo', { eta: etaNextEra }) }}
+        <div class="card">
+          <p>
+            {{ $t('topMetric.currentEra') }}
+          </p>
+          <div class="row--data">
+            <div v-if="!currentEra" class="loading">
+              <q-skeleton type="rect" animation="fade" />
+            </div>
+            <div v-else class="value">
+              <div class="row--era-info">
+                <div class="column--era-info">
+                  <div>{{ currentEra.toString() }}</div>
+                  <div v-if="etaNextEra" class="text--eta-next-era">
+                    {{ $t('topMetric.eraInfo', { eta: etaNextEra }) }}
+                  </div>
+                </div>
+                <div v-if="etaNextEra && !isLoading" class="box-pie-chart">
+                  <pie-chart
+                    :percentage="progress"
+                    bold="3px"
+                    width="44px"
+                    color="#0085ff"
+                    font-size="11px"
+                  />
                 </div>
-              </div>
-              <div v-if="etaNextEra && !isLoading" class="box-pie-chart">
-                <pie-chart
-                  :percentage="progress"
-                  bold="3px"
-                  width="44px"
-                  color="#0085ff"
-                  font-size="11px"
-                />
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="card">
-        <p>
-          {{ $t('topMetric.totalDapps') }}
-        </p>
-        <div class="row--data">
-          <div v-if="!dappsCount" class="loading">
-            <q-skeleton type="rect" animation="fade" />
+        <div class="card">
+          <p>
+            {{ $t('topMetric.totalDapps') }}
+          </p>
+          <div class="row--data">
+            <div v-if="!dappsCount" class="loading">
+              <q-skeleton type="rect" animation="fade" />
+            </div>
+            <div v-else class="value">{{ dappsCount.toLocaleString() }}</div>
           </div>
-          <div v-else class="value">{{ dappsCount.toLocaleString() }}</div>
         </div>
       </div>
     </div>
diff --git a/src/components/dapp-staking/my-staking/components/CardList.vue b/src/components/dapp-staking/my-staking/components/CardList.vue
index 96bfcf62c..6160d5691 100644
--- a/src/components/dapp-staking/my-staking/components/CardList.vue
+++ b/src/components/dapp-staking/my-staking/components/CardList.vue
@@ -155,8 +155,7 @@ export default defineComponent({
     align-items: center;
   }
   .wrapper--img {
-    background: #fff;
-    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.05);
+    flex-shrink: 0;
     border-radius: 16px;
     width: 80px;
     height: 80px;
@@ -241,10 +240,6 @@ export default defineComponent({
 
 .body--dark {
   .card {
-    .wrapper--img {
-      background: transparent;
-    }
-
     .panel--right {
       .txt--title {
         color: $gray-1;
@@ -262,7 +257,10 @@ export default defineComponent({
     }
     @mixin hover {
       background: rgba(247, 247, 248, 0.03);
-      box-shadow: 0px 0px 24px 5px rgba(0, 0, 0, 0.15);
+      box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.1);
+      @media (min-width: $sm) {
+        box-shadow: 0px 0px 24px 5px rgba(0, 0, 0, 0.15);
+      }
     }
     &:hover {
       @include hover;
diff --git a/src/components/dapp-staking/my-staking/styles/ads-area.scss b/src/components/dapp-staking/my-staking/styles/ads-area.scss
new file mode 100644
index 000000000..177f68538
--- /dev/null
+++ b/src/components/dapp-staking/my-staking/styles/ads-area.scss
@@ -0,0 +1,115 @@
+@import 'src/css/quasar.variables.scss';
+
+.wrapper--ads-area {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 16px,
+    black calc(100% - 16px),
+    transparent
+  );
+  padding-top: 48px;
+  padding-bottom: 48px;
+  margin-left: -16px;
+  margin-right: -16px;
+  padding-left: 16px;
+  padding-right: 16px;
+  @media (min-width: $md) {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 48px,
+      black calc(100% - 48px),
+      transparent
+    );
+    margin-bottom: -48px;
+    margin-left: -48px;
+    margin-right: -48px;
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+}
+.swiper {
+  overflow: visible;
+  padding: 0 16px;
+  @media (min-width: $md) {
+    padding: 0;
+  }
+}
+.swiper-slide {
+  height: auto;
+}
+.card--swiper {
+  background: rgba(255, 255, 255, 0.5);
+  height: 100%;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  box-shadow: 0 0 16px 2px #00000014;
+  border-radius: 6px;
+  overflow: hidden;
+  &:hover {
+    background: rgba(255, 255, 255, 0.7);
+  }
+}
+.body--dark{
+  .card--swiper {
+    background: rgba(255, 255, 255, 0.1);
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+.card__img {
+  aspect-ratio: 16/9;
+  object-fit: cover;
+  width: 100%;
+}
+.card__bottom {
+  padding: 16px;
+  @media (min-width: $lg) {
+    padding: 16px 24px;
+  }
+}
+.text--accent {
+  font-size: 12px;
+  font-weight: 700;
+  &.featured {
+    color: $astar-blue-dark;
+  }
+  &.new-listing {
+    color: $astar-pink;
+  }
+}
+.text--name {
+  margin: 4px 0 16px 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: $navy-1;
+}
+.body--dark{
+  .text--name {
+    color: $gray-1;
+  }
+}
+.text--description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  color: $navy-1;
+}
+.text--title {
+  margin: 4px 0 16px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+.text--subtitle{
+  color: $gray-3;
+  font-weight: 600;
+}
+
+.body--dark {
+  .text--description {
+    color: $gray-1;
+  }
+}
diff --git a/src/components/dapp-staking/my-staking/styles/dynamic-ads-area.scss b/src/components/dapp-staking/my-staking/styles/dynamic-ads-area.scss
deleted file mode 100644
index 3b45c3983..000000000
--- a/src/components/dapp-staking/my-staking/styles/dynamic-ads-area.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-@import 'src/css/quasar.variables.scss';
-
-.wrapper {
-  display: block;
-  margin-top: 48px;
-  margin-bottom: 48px;
-  @media (min-width: $xl) {
-    display: flex;
-    gap: 16px;
-  }
-}
-.wrapper-item {
-  flex: 1 1 0px;
-  min-height: 211px;
-}
-
-.news-area {
-  padding: 0 16px;
-  margin-bottom: 40px;
-
-  @media (min-width: $md) {
-    padding: 0;
-    margin-bottom: 0px;
-  }
-}
-
-.wrapper--banners {
-  display: flex;
-  gap: 8px;
-  margin-top: 20px;
-  padding-left: 16px;
-  width: 100%;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  justify-content: left;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  @media (min-width: $md) {
-    padding: 0;
-    gap: 16px;
-  }
-  @media (min-width: $xl) {
-    margin-top: 0px;
-  }
-  .card {
-    flex-basis: 47%;
-    min-height: 127px;
-    min-width: 170px !important; // Ensures that min-width is at least 170px
-    cursor: pointer;
-    background: rgba(196, 196, 196, 0.1);
-    backdrop-filter: blur(50px);
-    border-radius: 6px;
-    min-width: 141px;
-    .wrapper--img {
-      display: flex;
-      justify-content: flex-end;
-      border-radius: 999px;
-      width: 72px;
-      height: 72px;
-      margin-top: 16px;
-      margin-right: 16px;
-      margin-left: auto;
-      .img--dapp {
-        max-width: 72px;
-        max-height: 72px;
-        border-radius: 999px;
-      }
-    }
-    .card-info {
-      padding-left: 16px;
-      padding-right: 16px;
-      padding-bottom: 16px;
-      margin-top: 6px;
-    }
-    .txt--category {
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 18px;
-      color: #fff;
-    }
-    .txt--title {
-      font-weight: 600;
-      font-size: 20px;
-      line-height: 24px;
-      color: #fff;
-      margin-top: 4px;
-      margin-bottom: 4px;
-    }
-    .txt--subtitle {
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 18px;
-      color: $gray-2;
-    }
-
-    @media (min-width: $md) {
-      min-width: max(170px, 191px);
-      flex-basis: 48%;
-    }
-
-    @media (min-width: $lg) {
-      min-width: 170px; // Adjust this value as necessary
-    }
-  }
-
-  .card:first-child {
-    background: linear-gradient(
-      122.29deg,
-      #e6007a -5.83%,
-      #703ac2 17.63%,
-      #0070eb 42.62%,
-      #0297fb 63.99%,
-      #0ae2ff 92.05%
-    );
-  }
-
-  @media (min-width: $xxl) {
-    gap: 24px;
-  }
-}
-
-.wrapper--shiden {
-  .card:first-child {
-    background: linear-gradient(
-      129.32deg,
-      #170d29 -4.43%,
-      #481e94 31.93%,
-      #6d2cae 74.44%,
-      #0a010d 133.31%
-    );
-  }
-}
diff --git a/src/components/dapp-staking/my-staking/styles/my-dapps.scss b/src/components/dapp-staking/my-staking/styles/my-dapps.scss
index be2503426..335e2326b 100644
--- a/src/components/dapp-staking/my-staking/styles/my-dapps.scss
+++ b/src/components/dapp-staking/my-staking/styles/my-dapps.scss
@@ -121,7 +121,7 @@ table {
 
 .body--dark {
   .table-container {
-    background: $container-bg-dark;
+    background: rgba(8, 16, 41, 0.5);
   }
 
   table {
diff --git a/src/components/dapp-staking/my-staking/styles/my-rewards.scss b/src/components/dapp-staking/my-staking/styles/my-rewards.scss
index c26813188..a4cac6e7f 100644
--- a/src/components/dapp-staking/my-staking/styles/my-rewards.scss
+++ b/src/components/dapp-staking/my-staking/styles/my-rewards.scss
@@ -26,12 +26,13 @@
   flex-direction: column;
   flex-basis: 24%;
   min-width: 200px;
-  background: $gray-1;
+  background: white;
   border-radius: 6px;
   min-width: 150px;
   padding: 24px 16px;
   flex-basis: 100%;
   width: 100%;
+  cursor: default;
   @media (min-width: $lg) {
     padding: 32px 24px;
     min-width: auto;
@@ -107,17 +108,13 @@
 
 .body--dark {
   .card {
-    background: $body-bg-dark;
-    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.15);
-
+    background: rgba(8, 16, 41, 0.5);
     p {
       color: $gray-3;
     }
-
     .row--title {
       color: $gray-3;
     }
-
     .value {
       color: $gray-1;
     }
@@ -145,3 +142,28 @@
     color: $gray-1;
   }
 }
+
+.info--dapps-owners {
+  border: solid 1px $astar-pink;
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin-top: 12px;
+  font-weight: 500;
+  background-color: rgba($astar-pink, 20%);
+  span {
+    background-color: $astar-pink;
+    color: white;
+    padding: 0 6px;
+    border-radius: 10px;
+    font-size: 12px;
+    line-height: 20px;
+    margin-right: 2px;
+    display: inline-block;
+  }
+  a {
+    color: $astar-pink;
+    &:hover {
+      color: lighten($astar-pink, 20%);
+    }
+  }
+}
diff --git a/src/components/dapp-staking/my-staking/styles/my-staking.scss b/src/components/dapp-staking/my-staking/styles/my-staking.scss
index 97dc9f335..651f6b495 100644
--- a/src/components/dapp-staking/my-staking/styles/my-staking.scss
+++ b/src/components/dapp-staking/my-staking/styles/my-staking.scss
@@ -22,7 +22,7 @@
 
 .staking-container {
   grid-template-columns: repeat(auto-fit, minmax(288px, max-content));
-  background: #fff;
+  background: #FFFFFF80;
   border-radius: 6px;
   padding: 18px 16px;
   box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.08);
@@ -54,6 +54,11 @@
     margin-top: 16px;
   }
 }
+.body--dark {
+  .text--transferable {
+    color: $gray-1;
+  }
+}
 
 .loading {
   display: inline-block;
@@ -128,8 +133,7 @@
     color: $gray-1;
   }
   .staking-container {
-    background: $container-bg-dark;
-    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.15);
+    background: rgba(255, 255, 255, 0.1);
   }
 
   .text--tab {
diff --git a/src/components/dapp-staking/my-staking/styles/on-chain-data.scss b/src/components/dapp-staking/my-staking/styles/on-chain-data.scss
index 07297f56b..497a9bd69 100644
--- a/src/components/dapp-staking/my-staking/styles/on-chain-data.scss
+++ b/src/components/dapp-staking/my-staking/styles/on-chain-data.scss
@@ -9,30 +9,19 @@
 }
 
 .box--data {
-  background: linear-gradient(
-    93.75deg,
-    #e6007a -8.23%,
-    #703ac2 16.47%,
-    #0070eb 51.42%,
-    #0297fb 95.48%,
-    #0ae2ff 114.61%
-  );
+  background-color: #ffffff80;
   border-radius: 6px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 32px 16px;
   gap: 16px;
+  box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.08);
 }
-
-.box--data-shiden {
-  background: linear-gradient(
-    129.32deg,
-    #170d29 -4.43%,
-    #481e94 31.93%,
-    #6d2cae 74.44%,
-    #0a010d 133.31%
-  ) !important;
+.body--dark {
+  .box--data {
+    background: rgba(255, 255, 255, 0.1);
+  }
 }
 
 .row--title {
@@ -42,13 +31,20 @@
 .text--name {
   font-size: 16px;
   font-weight: 600;
-  color: $gray-1;
+  color: $navy-1;
 }
 
 .text--value {
   font-size: 14px;
   font-weight: 600;
-  color: $gray-1;
+  color: $navy-1;
+}
+
+.body--dark {
+  .text--name,
+  .text--value {
+    color: $gray-1;
+  }
 }
 
 .text--title {
@@ -92,11 +88,17 @@
   gap: 8px;
   width: 200px;
   height: 40px;
-  background: rgba(255, 255, 255, 0.1);
+  background: #ffffff50;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
-  color: $gray-1;
+  color: $navy-1;
+}
+.body--dark {
+  .dropbox--sort {
+    background: rgba(255, 255, 255, 0.1);
+    color: $gray-1;
+  }
 }
 
 .dropbox--filter {
@@ -108,18 +110,24 @@
   padding: 8px 16px;
   gap: 8px;
   height: 40px;
-  background: rgba(255, 255, 255, 0.1);
+  background: #ffffff50;
   border-radius: 6px;
   width: 100%;
   margin-bottom: 16px;
   font-size: 14px;
   font-weight: 600;
-  color: $gray-1;
+  color: $navy-1;
   @media (min-width: $md) {
     margin-bottom: 0px;
     width: 200px;
   }
 }
+.body--dark {
+  .dropbox--filter {
+    background: rgba(255, 255, 255, 0.1);
+    color: $gray-1;
+  }
+}
 
 .img--logo {
   width: 24px;
@@ -229,19 +237,24 @@
   cursor: pointer;
   transition: all 0.2s ease-in;
   border-radius: 50%;
-  color: $gray-1;
+  color: $navy-1;
   &:hover {
     transition: all 0.2s ease-in;
     background: rgba(255, 255, 255, 0.2);
   }
 }
+.body--dark {
+  .icon--arrow {
+    color: $gray-1;
+  }
+}
 
 .icon--expand {
   margin-top: 6px;
 }
 
 .divider {
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid white;
   margin-top: 8px;
   margin-bottom: 8px;
 }
@@ -250,4 +263,7 @@
   .text--title {
     color: $gray-1;
   }
+  .divider {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
 }
diff --git a/src/components/dapp-staking/my-staking/styles/top-metric.scss b/src/components/dapp-staking/my-staking/styles/top-metric.scss
index 9899aa60a..2d869f0b0 100644
--- a/src/components/dapp-staking/my-staking/styles/top-metric.scss
+++ b/src/components/dapp-staking/my-staking/styles/top-metric.scss
@@ -2,30 +2,21 @@
 
 .panel {
   background-size: cover;
-  margin-bottom: 25px;
   padding-top: 55px;
-  padding-bottom: 24px;
   padding-left: 16px;
   padding-right: 16px;
-
   @media (min-width: $md) {
-    border-radius: 6px;
-  }
-
-  @media (min-width: $xxl) {
-    padding-left: 24px;
-    padding-right: 24px;
+    padding-right: 0;
+    padding-left: 0;
   }
 }
 
 .wrapper--title {
-  margin-left: 16px;
   margin-bottom: 32px;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
-  color: $gray-1;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  color: $navy-1;
 
   .txt--title {
     font-size: 40px;
@@ -38,28 +29,47 @@
     line-height: 27px;
   }
 }
+.body--dark {
+  .wrapper--title {
+    color: $gray-1;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  }
+}
 
 .wrapper--cards {
-  display: flex;
-  position: relative;
-  width: 100%;
-  max-width: 1295px;
-  flex-wrap: nowrap;
   overflow-x: auto;
-  overflow-y: hidden;
-  column-gap: 16px;
-  column-count: 4;
-
+  padding: 16px;
+  margin: -16px;
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 16px,
+    black calc(100% - 16px),
+    transparent
+  );
   &::-webkit-scrollbar {
     display: none;
   }
-
   @media (min-width: $md) {
-    justify-content: space-between;
+    padding: 48px;
+    margin: -48px;
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 48px,
+      black calc(100% - 48px),
+      transparent
+    );
   }
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  column-gap: 16px;
+  min-width: 1000px;
   @media (min-width: $xxl) {
     column-gap: 24px;
-    overflow-x: hidden;
   }
 }
 
@@ -74,12 +84,10 @@
   flex: none;
   height: 150px;
   padding: 36px 16px;
-  background: linear-gradient(180deg, rgba(25, 29, 31, 0) 4.17%, rgba(255, 255, 255, 0.3) 79.69%);
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
   border-radius: 6px;
-
+  background: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0 16px 2px #00000014;
   @media (min-width: $lg) {
-    flex-basis: 23.5%;
     padding: 36px 24px;
     height: 126px;
   }
@@ -90,7 +98,7 @@
     gap: 5px;
     font-weight: 600;
     font-size: 14px;
-    color: $gray-1;
+    color: $navy-1;
   }
 
   .row--data {
@@ -101,7 +109,7 @@
       font-weight: 600;
       font-size: 20px;
       line-height: 18px;
-      color: $gray-1;
+      color: $navy-1;
 
       .detail-value {
         font-size: 12px;
@@ -118,7 +126,7 @@
       display: block;
       font-weight: 600;
       font-size: 19px;
-      color: $gray-1;
+      color: $navy-1;
 
       .txt--tvl {
         white-space: nowrap;
@@ -201,7 +209,7 @@
 
   .button--active {
     padding-bottom: 6px;
-    border-bottom: 2px solid white;
+    border-bottom: 2px solid $navy-1;
     transition: all 0.3s ease 0s;
   }
 
@@ -262,7 +270,7 @@
 
   .button--active {
     padding-bottom: 6px;
-    border-bottom: 2px solid white;
+    border-bottom: 2px solid $navy-1;
     transition: all 0.3s ease 0s;
   }
 
@@ -283,3 +291,17 @@
     }
   }
 }
+
+.body--dark {
+  .card {
+    background: rgba(255, 255, 255, 0.1);
+    .button--active {
+      border-color: $gray-1;
+    }
+  }
+  .card p,
+  .row--data .value,
+  .row--data .column--tvl {
+    color: $gray-1;
+  }
+}
diff --git a/src/components/dapp-staking/my-staking/styles/unbonding-list.scss b/src/components/dapp-staking/my-staking/styles/unbonding-list.scss
index 51ddd234a..60f80b755 100644
--- a/src/components/dapp-staking/my-staking/styles/unbonding-list.scss
+++ b/src/components/dapp-staking/my-staking/styles/unbonding-list.scss
@@ -87,7 +87,7 @@ table {
 
 .body--dark {
   .table-container {
-    background: $container-bg-dark;
+    background: rgba(8, 16, 41, 0.5);
   }
 
   table {
diff --git a/src/components/dapp-staking/register/RegisterDapp.vue b/src/components/dapp-staking/register/RegisterDapp.vue
index 9463a0ff8..20d29b88a 100644
--- a/src/components/dapp-staking/register/RegisterDapp.vue
+++ b/src/components/dapp-staking/register/RegisterDapp.vue
@@ -2,8 +2,8 @@
   <div class="container--register">
     <back-to-page :text="$t('dappStaking.stakePage.backToDappList')" :link="Path.DappStaking" />
     <div class="wrapper--register-form">
-      <welcome-banner v-if="isNewDapp && !isMobileDevice" class="welcome" />
-      <desktop-only-banner v-if="isMobileDevice" class="welcome" />
+      <welcome-banner v-if="isNewDapp && !isMobileDevice" />
+      <desktop-only-banner v-if="isMobileDevice" />
       <q-form v-if="!isMobileDevice" ref="dappForm">
         <div style="display: flex; flex-direction: column">
           <q-input
@@ -70,13 +70,35 @@
           <tags :dapp="data" class="component" />
           <license :dapp="data" class="component" />
           <div class="button--container">
-            <astar-button class="button--submit" @click="handleSubmit">
+            <!-- <astar-button class="button--submit" @click="handleSubmit">
               {{ $t('dappStaking.modals.submit') }}
+            </astar-button> -->
+            <astar-button
+              class="button--submit"
+              @click="handleModalAddIntroduction({ isOpen: true })"
+            >
+              {{ $t('next') }}
             </astar-button>
           </div>
         </div>
       </q-form>
     </div>
+
+    <modal-add-introduction
+      :is-modal-add-introduction="isModalAddIntroduction"
+      :handle-modal-add-introduction="handleModalAddIntroduction"
+      :name="data.name"
+      :image="data.imagesContent[1]"
+      :handle-submit="handleSubmit"
+      :introduction-changed="introductionChanged"
+    />
+
+    <Teleport to="#staking-top-bg">
+      <div
+        class="dapps-staking-bg"
+        :style="{ backgroundImage: `url(${isDarkTheme ? bg_img.dark : bg_img.light})` }"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -113,6 +135,7 @@ import BackToPage from 'src/components/common/BackToPage.vue';
 import { useRouter } from 'vue-router';
 import { isMobileDevice } from 'src/hooks/helper/wallet';
 import DesktopOnlyBanner from './components/DesktopOnlyBanner.vue';
+import ModalAddIntroduction from './components/ModalAddIntroduction.vue';
 
 export default defineComponent({
   components: {
@@ -129,6 +152,7 @@ export default defineComponent({
     BackToPage,
     WelcomeBanner,
     DesktopOnlyBanner,
+    ModalAddIntroduction,
   },
   setup() {
     const initDeveloper = (): Developer => ({
@@ -260,6 +284,7 @@ export default defineComponent({
                 }))
               : [];
             data.description = registeredDapp.description;
+            data.shortDescription = registeredDapp.shortDescription;
             data.communities = registeredDapp.communities ?? [];
             data.contractType = registeredDapp.contractType ?? possibleContractTypes[2].value; // default to evm
             data.mainCategory =
@@ -319,6 +344,25 @@ export default defineComponent({
       { immediate: true }
     );
 
+    const isModalAddIntroduction = ref<boolean>(false);
+    const handleModalAddIntroduction = ({ isOpen }: { isOpen: boolean }): void => {
+      dappForm?.value?.validate().then(async (success: boolean) => {
+        if (success && validateCustomComponents()) {
+          isModalAddIntroduction.value = isOpen;
+        }
+      });
+    };
+
+    const introductionChanged = (introduction: string): void => {
+      data.shortDescription = introduction;
+    };
+
+    const isDarkTheme = computed<boolean>(() => store.getters['general/theme'] === 'DARK');
+    const bg_img = {
+      light: require('/src/assets/img/dapps_staking_bg_light.webp'),
+      dark: require('/src/assets/img/dapps_staking_bg_dark.webp'),
+    };
+
     return {
       data,
       isModalAddDeveloper,
@@ -330,10 +374,15 @@ export default defineComponent({
       Path,
       isNewDapp,
       isMobileDevice,
+      isModalAddIntroduction,
+      isDarkTheme,
+      bg_img,
+      handleModalAddIntroduction,
       updateDappLogo,
       isUrlValid,
       handleDappChanged,
       handleSubmit,
+      introductionChanged,
     };
   },
 });
@@ -372,6 +421,19 @@ export default defineComponent({
 </style>
 
 <style lang="scss">
+.q-field__native {
+  color: $navy-1 !important;
+}
+.body--dark {
+  .q-field__native {
+    color: $gray-1 !important;
+  }
+}
+.q-field__control {
+  background: rgba(255, 255, 255, 0.5);
+  box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.08);
+}
+
 .q-field--outlined:hover .q-field__control:before {
   border-color: $astar-blue;
 }
@@ -404,7 +466,7 @@ export default defineComponent({
 }
 
 .q-field--outlined.q-field--dark .q-field__control:before {
-  border-color: $navy-1;
+  border-color: $gray-5;
 }
 
 .q-field--outlined.q-field--dark .q-field__control {
@@ -412,10 +474,13 @@ export default defineComponent({
 }
 
 // readonly
-.q-field--outlined.q-field--readonly .q-field__control:before {
-  border-style: solid;
-  border-color: $gray-1;
-  background-color: $gray-1;
+.q-field--outlined.q-field--readonly .q-field__control {
+  box-shadow: none;
+  &:before {
+    border-style: solid;
+    border-color: white;
+    background-color: white;
+  }
 }
 
 .q-field--outlined.q-field--dark.q-field--readonly .q-field__control:before {
@@ -448,8 +513,4 @@ export default defineComponent({
 .button--container {
   margin-bottom: 20px;
 }
-
-.welcome {
-  margin-bottom: 30px;
-}
 </style>
diff --git a/src/components/dapp-staking/register/components/DappImages.vue b/src/components/dapp-staking/register/components/DappImages.vue
index f585eefff..dbe4e7fdf 100644
--- a/src/components/dapp-staking/register/components/DappImages.vue
+++ b/src/components/dapp-staking/register/components/DappImages.vue
@@ -7,7 +7,7 @@
       append
       max-file-size="1000000"
       accept="image/jpeg, .png"
-      :label="$t('dappStaking.modals.images', { size: '1 MB' })"
+      :label="$t('dappStaking.modals.images', { ratio: '16:9', size: '1 MB' })"
       class="component"
       lazy-rules="ondemand"
       :rules="[(v: File[]) => (v && v.length >= 5) || $t('dappStaking.modals.imagesRequired')]"
diff --git a/src/components/dapp-staking/register/components/Description.vue b/src/components/dapp-staking/register/components/Description.vue
index 89e9f1ece..365b8a7fe 100644
--- a/src/components/dapp-staking/register/components/Description.vue
+++ b/src/components/dapp-staking/register/components/Description.vue
@@ -70,8 +70,7 @@ export default defineComponent({
 }
 
 .preview {
-  margin-top: 18px;
-  height: 389px;
+  height: 416px;
 }
 
 .wrapper--tab {
@@ -79,3 +78,16 @@ export default defineComponent({
   justify-content: center;
 }
 </style>
+
+<style lang="scss">
+.wrapper--description {
+  .q-field__control {
+    background: none;
+    box-shadow: none;
+  }
+  .q-textarea .q-field__native,
+  .preview {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/components/dapp-staking/register/components/ItemsContainer.vue b/src/components/dapp-staking/register/components/ItemsContainer.vue
index c8f27d18d..7e23c276f 100644
--- a/src/components/dapp-staking/register/components/ItemsContainer.vue
+++ b/src/components/dapp-staking/register/components/ItemsContainer.vue
@@ -35,16 +35,21 @@ export default defineComponent({
 @use '../styles/register.scss';
 
 .items-container {
-  border: 1px solid $gray-2;
-  transition: background-color 0.5s;
-  transition: border-color 0.5s;
+  border: 1px solid transparent;
+  transition: border-color 0.3s;
   border-radius: 6px;
   padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.5);
+  box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.08);
+  &:hover {
+    border-color: $astar-blue;
+  }
 }
 
 .body--dark {
   .items-container {
-    border: 1px solid $gray-5;
+    background: $navy-1;
+    border-color: $gray-5;
   }
 }
 
diff --git a/src/components/dapp-staking/register/components/ModalAddIntroduction.vue b/src/components/dapp-staking/register/components/ModalAddIntroduction.vue
new file mode 100644
index 000000000..beed6c966
--- /dev/null
+++ b/src/components/dapp-staking/register/components/ModalAddIntroduction.vue
@@ -0,0 +1,140 @@
+<template>
+  <modal-wrapper
+    :is-modal-open="isModalAddIntroduction"
+    :title="$t('dappStaking.modals.introduction.title')"
+    :is-closing="isClosingModal"
+    :close-modal="closeModal"
+  >
+    <div class="wrapper--introduction">
+      <div>{{ $t('dappStaking.modals.introduction.promotionCard') }}</div>
+      <q-form ref="introductionForm" class="form--introduction">
+        <div class="card--swiper">
+          <img :src="image" class="card__img" />
+          <div class="card__bottom">
+            <div>
+              <div class="text--accent featured">FEATURED</div>
+              <div class="text--name">{{ name }}</div>
+            </div>
+            <div class="text--description">
+              {{
+                introduction === ''
+                  ? $t('dappStaking.modals.introduction.placeholder')
+                  : introduction
+              }}
+            </div>
+          </div>
+        </div>
+        <div>
+          <q-input
+            v-model="introduction"
+            outlined
+            :placeholder="$t('dappStaking.modals.introduction.placeholder')"
+            maxlength="65"
+          />
+          <div class="input--introduction__helper">
+            {{
+              $t('dappStaking.modals.introduction.characters', { characters: introduction.length })
+            }}
+          </div>
+        </div>
+
+        <astar-button class="button--submit" :disabled="!canSubmit()" @click="handleSubmit()">
+          {{ $t('dappStaking.modals.submit') }}
+        </astar-button>
+      </q-form>
+    </div>
+  </modal-wrapper>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue';
+import { fadeDuration } from '@astar-network/astar-ui';
+import { wait } from '@astar-network/astar-sdk-core';
+import ModalWrapper from 'src/components/common/ModalWrapper.vue';
+
+export default defineComponent({
+  components: {
+    ModalWrapper,
+  },
+  props: {
+    isModalAddIntroduction: {
+      type: Boolean,
+      required: true,
+    },
+    handleModalAddIntroduction: {
+      type: Function,
+      required: true,
+    },
+    introductionChanged: {
+      type: Function,
+      required: true,
+    },
+    handleSubmit: {
+      type: Function,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    image: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const isClosingModal = ref<boolean>(false);
+    const introduction = ref<string>('');
+
+    const closeModal = async (): Promise<void> => {
+      isClosingModal.value = true;
+
+      await wait(fadeDuration);
+      props.handleModalAddIntroduction({ isOpen: false });
+      isClosingModal.value = false;
+    };
+
+    const canSubmit = (): boolean => introduction.value.length >= 10;
+
+    watch([introduction], () => {
+      props.introductionChanged(introduction.value);
+    });
+
+    return {
+      isClosingModal,
+      introduction,
+      closeModal,
+      canSubmit,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../my-staking/styles/ads-area.scss';
+
+.card--swiper {
+  width: 270px;
+  margin: auto;
+  pointer-events: none;
+}
+.form--introduction {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin-top: 32px;
+}
+.input--introduction__helper {
+  color: $gray-3;
+  font-size: 12px;
+  margin-top: 8px;
+  text-align: right;
+}
+.button--submit {
+  width: 100%;
+  font-size: 22px;
+  font-weight: 600;
+  height: 44px;
+  align-self: center;
+}
+</style>
diff --git a/src/components/dapp-staking/register/styles/register.scss b/src/components/dapp-staking/register/styles/register.scss
index 92e483752..bbb12c63d 100644
--- a/src/components/dapp-staking/register/styles/register.scss
+++ b/src/components/dapp-staking/register/styles/register.scss
@@ -58,16 +58,15 @@
 }
 
 .banner--container {
-  background-image: url('assets/img/astar_hero.png');
-  background-repeat: no-repeat;
-  background-size: cover;
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 20px;
+  font-weight: 600;
+  font-size: 22px;
   line-height: 157.3%;
-  color: #f7f7f8;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  padding: 30px;
-  border-radius: 6px;
+  color: $navy-1;
+  max-width: 800px;
+  margin: 0 auto 40px auto;
+}
+.body--dark {
+  .banner--container {
+    color: $gray-1;
+  }
 }
diff --git a/src/components/header/modals/ModalConnectWallet.vue b/src/components/header/modals/ModalConnectWallet.vue
index b86796ec9..c20e26768 100644
--- a/src/components/header/modals/ModalConnectWallet.vue
+++ b/src/components/header/modals/ModalConnectWallet.vue
@@ -42,10 +42,10 @@
           <button
             v-for="(wallet, index) in nativeWallets"
             :key="index"
-            :disabled="isZkEvm"
+            :disabled="checkIsDisabledWallet(wallet.source) || isZkEvm"
             class="box__row--wallet box--hover--active"
             :class="currentWallet === wallet.source && 'border--active'"
-            @click="setSubstrateWalletModal(wallet.source)"
+            @click="!checkIsDisabledWallet(wallet.source) && setSubstrateWalletModal(wallet.source)"
           >
             <div class="box--img">
               <img :src="wallet.img" />
@@ -224,6 +224,13 @@ export default defineComponent({
       props.setCloseModal();
     };
 
+    const checkIsDisabledWallet = (source: SupportWallet): boolean => {
+      if (source === SupportWallet.Snap && window.location.origin === productionOrigin) {
+        return true;
+      }
+      return false;
+    };
+
     const nativeWallets = computed(() => {
       return supportWallets
         .map((it) => {
@@ -320,6 +327,7 @@ export default defineComponent({
       setEvmWalletModal,
       disconnectAccount,
       setPolkasafeModal,
+      checkIsDisabledWallet,
       setAccountUnificationModal,
       currentNetworkIdx,
       endpointKey,
diff --git a/src/components/sidenav/styles/sidebar-desktop.scss b/src/components/sidenav/styles/sidebar-desktop.scss
index 0bf65c9bc..df96e276b 100644
--- a/src/components/sidenav/styles/sidebar-desktop.scss
+++ b/src/components/sidenav/styles/sidebar-desktop.scss
@@ -29,6 +29,7 @@
   background: linear-gradient(140deg, #070c25 50%, #253585 80%, #3e2371 90%);
   display: flex;
   flex-direction: column;
+  z-index: 1;
 }
 
 .sidebar--height-decentralized {
diff --git a/src/components/sidenav/styles/sidebar-mobile.scss b/src/components/sidenav/styles/sidebar-mobile.scss
index e0b7d7bd8..2799133b8 100644
--- a/src/components/sidenav/styles/sidebar-mobile.scss
+++ b/src/components/sidenav/styles/sidebar-mobile.scss
@@ -7,6 +7,8 @@
   justify-content: space-between;
   height: 48px;
   background: $navy-2;
+  position: relative;
+  z-index: 1;
 }
 
 .tabs {
diff --git a/src/components/sidenav/styles/sidebar-option.scss b/src/components/sidenav/styles/sidebar-option.scss
index fae5fbaaf..7be137eb6 100644
--- a/src/components/sidenav/styles/sidebar-option.scss
+++ b/src/components/sidenav/styles/sidebar-option.scss
@@ -7,6 +7,8 @@
   box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.08);
   padding-top: 16px;
   overflow-x: hidden;
+  position: relative;
+  z-index: 1;
 }
 
 .q-expansion-item {
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 59419e5d2..0293a68fd 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -17,6 +17,7 @@ $modal-item-bg-dark: #141c34;
 
 $astar-blue: #0085ff;
 $astar-blue-dark: #05b6fd;
+$astar-pink: #E6007A;
 $shiden-purple: #770cff;
 $shiden-purple-dark: #a67cff;
 $warning-red: #ff5621;
diff --git a/src/data/ads.json b/src/data/ads.json
index 55e96a6b0..195047ac5 100644
--- a/src/data/ads.json
+++ b/src/data/ads.json
@@ -1,20 +1,20 @@
 [
   {
-    "img": "https://firebasestorage.googleapis.com/v0/b/astarnetwork-a4924.appspot.com/o/astar-dapps%2F0x1de7c3A07918fb4BE9159703e73D6e0b0736CaBC_rIb1fUz3_400x400%20(1).jpeg?alt=media&token=3832d94b-81bd-4e12-9d8b-96d83896ed3a",
+    "img": "/images/ads/what_is_dapp_staking.webp",
     "title": "What is dApp Staking",
     "subtitle": "Learn our unique solution",
     "link": "https://docs.astar.network/docs/build/dapp-staking/#what-is-dapp-staking"
   },
   {
-    "img": "https://firebasestorage.googleapis.com/v0/b/astarnetwork-a4924.appspot.com/o/astar-dapps%2F0x1de7c3A07918fb4BE9159703e73D6e0b0736CaBC_rIb1fUz3_400x400%20(1).jpeg?alt=media&token=3832d94b-81bd-4e12-9d8b-96d83896ed3a",
+    "img": "/images/ads/how_to_stake.webp",
     "title": "How to Stake?",
     "subtitle": "Step-by-step video tutorial",
-    "link": "https://www.youtube.com/watch?v=8KrUhu2rweA"
+    "link": "https://www.youtube.com/shorts/fEJsFwBGkaI"
   },
   {
-    "img": "https://firebasestorage.googleapis.com/v0/b/astarnetwork-a4924.appspot.com/o/astar-dapps%2F0x1de7c3A07918fb4BE9159703e73D6e0b0736CaBC_rIb1fUz3_400x400%20(1).jpeg?alt=media&token=3832d94b-81bd-4e12-9d8b-96d83896ed3a",
+    "img": "https://img.youtube.com/vi/9jkM_uYrqUw/maxresdefault.jpg",
     "title": "How to set up Polkadot Native Wallet",
     "subtitle": "Step-by-step video tutorial",
     "link": "https://www.youtube.com/watch?v=9jkM_uYrqUw"
   }
-]
\ No newline at end of file
+]
diff --git a/src/data/dapp_promotions.json b/src/data/dapp_promotions.json
new file mode 100644
index 000000000..fcc6513af
--- /dev/null
+++ b/src/data/dapp_promotions.json
@@ -0,0 +1,14 @@
+[
+  {
+    "name": "Algem - Liquid Staking",
+    "shortDescription": "Receive one liquid nASTR token for every ASTR token you stake. Then use nASTR to yield farm on the ecosystem to maximize your earnings.",
+    "link": "https://www.algem.io/",
+    "img": "images/dapp_promotions/algem.jpg"
+  },
+  {
+    "name": "ASTR token, value and utility",
+    "shortDescription": "How the ASTR Token Brings Utility and Value to the Astar Ecosystem",
+    "link": "https://astar.network/blog/how-the-astr-token-brings-utility-and-value-to-the-astar-39387",
+    "img": "https://ipfs.subsocial.network/ipfs/bafybeig2o6zjlnxnwgdv6xkcgu4w5tn7wdre26kimpc2w2ldrum66cotw4"
+  }
+]
diff --git a/src/hooks/dapps-staking/useCampaign.ts b/src/hooks/dapps-staking/useCampaign.ts
new file mode 100644
index 000000000..ae2d7a12f
--- /dev/null
+++ b/src/hooks/dapps-staking/useCampaign.ts
@@ -0,0 +1,45 @@
+import { computed } from 'vue';
+import { useStore } from 'src/store';
+import { Campaign, DappCombinedInfo } from 'src/v2/models';
+import dappPromotions from 'src/data/dapp_promotions.json';
+
+export function useCampaign() {
+  const dappsInCampaign = 5;
+  const store = useStore();
+
+  // Latest registered dApps.
+  const newListings = computed<Campaign[]>(() =>
+    (<DappCombinedInfo[]>store.getters['dapps/getAllDapps'])
+      .filter((x) => !!x.dapp)
+      .sort((x, y) => Number(y.dapp?.creationTime ?? 0) - Number(x.dapp?.creationTime ?? 0))
+      .splice(0, dappsInCampaign)
+      .map(
+        (x) =>
+          <Campaign>{
+            name: x.dapp?.name,
+            shortDescription: x.dapp?.shortDescription,
+            link: x.dapp?.url,
+            img: x.dapp?.imagesUrl ? x.dapp.imagesUrl[0] : 'images/noimage.png',
+            address: x.contract.address,
+          }
+      )
+  );
+
+  // Combine latest dApps with dApp promotions.
+  const combinedCampaigns = computed<Campaign[]>(() => {
+    const result: Campaign[] = [];
+    const minLen = Math.min(newListings.value.length, dappPromotions.length);
+
+    for (let i = 0; i < minLen; i++) {
+      result.push(newListings.value[i], dappPromotions[i]);
+    }
+    result.push(...newListings.value.slice(minLen), ...dappPromotions.slice(minLen));
+
+    return result;
+  });
+
+  return {
+    newListings,
+    combinedCampaigns,
+  };
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 6458890b0..ea1d4b0a8 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -32,6 +32,7 @@ export * from './dapps-staking/useStakingList';
 export * from './dapps-staking/useSignPayload';
 export * from './dapps-staking/useDappRedirect';
 export * from './dapps-staking/useDispatchGetDapps';
+export * from './dapps-staking/useCampaign';
 export * from './wallet/useWalletIcon';
 export * from './wallet/useEvmWallet';
 export * from './wallet/useLedger';
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index e16d6cd4d..23a324afa 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -289,6 +289,8 @@ export default {
       ledgerSPlus: 'Ledger Nano S Plus: 6 eras',
       ledgerS: 'Ledger Nano S: 2 eras',
     },
+    dappsOwners: 'dApps owners! We can now help to promote your campaign. Please check',
+    dappsOwnersLink: 'the details.',
   },
   dappStaking: {
     myStaking: 'My Staking',
@@ -386,13 +388,20 @@ export default {
         githubAccount: 'GitHub account',
         communityRequired: 'At least one community link is required.',
       },
+      introduction: {
+        title: 'One more thing!',
+        promotionCard:
+          'When you are listed, a promotion card will appear like this, please fill in the description within 65 characters.',
+        placeholder: 'Please add your introduction',
+        characters: '{characters} out of 65 characters',
+      },
       description: 'Description',
       markdown: 'Markdown',
       preview: 'Preview',
       addAccount: 'Add an account',
       addLogo: 'Add a logo image',
       addImage: 'Add an image',
-      images: 'Images (maximum upload file size: {size})',
+      images: 'Images (Recommended size {ratio} within {size})',
       imagesRequired: 'At least 4 images are required.',
       descriptionRequired: 'Tell the world something about your dApp.',
       contractTypeTitle: 'Is your project on',
diff --git a/src/pages/DappStaking.vue b/src/pages/DappStaking.vue
index 9ce258373..fc2f1a1b3 100644
--- a/src/pages/DappStaking.vue
+++ b/src/pages/DappStaking.vue
@@ -1,5 +1,6 @@
 <template>
   <div v-if="isReady" class="wrapper--dapp-staking">
+    <div id="staking-top-bg" />
     <div class="container--dapp-staking">
       <router-view />
     </div>
@@ -16,3 +17,16 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss">
+.dapps-staking-bg {
+  background-repeat: round;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  height: 100vh;
+  opacity: 0.8;
+}
+</style>
diff --git a/src/store/dapp-staking/actions.ts b/src/store/dapp-staking/actions.ts
index d7d95cbfa..1b0ee8dc9 100644
--- a/src/store/dapp-staking/actions.ts
+++ b/src/store/dapp-staking/actions.ts
@@ -155,6 +155,7 @@ const actions: ActionTree<State, StateInterface> = {
           images: getImagesInfo(parameters.dapp),
           developers: parameters.dapp.developers,
           description: parameters.dapp.description,
+          shortDescription: parameters.dapp.shortDescription,
           communities: parameters.dapp.communities,
           contractType: parameters.dapp.contractType,
           mainCategory: parameters.dapp.mainCategory,
diff --git a/src/v2/models/DappsStaking.ts b/src/v2/models/DappsStaking.ts
index eabd5d349..2aa5e19ee 100644
--- a/src/v2/models/DappsStaking.ts
+++ b/src/v2/models/DappsStaking.ts
@@ -59,3 +59,11 @@ export interface AccountLedger {
 export interface DappStakingConstants {
   maxEraStakeValues: number;
 }
+
+export interface Campaign {
+  name: string;
+  shortDescription: string;
+  link?: string;
+  img: string;
+  address?: string;
+}
diff --git a/src/v2/repositories/implementations/IdentityRepository.ts b/src/v2/repositories/implementations/IdentityRepository.ts
index 73c814a9a..8da1dc53a 100644
--- a/src/v2/repositories/implementations/IdentityRepository.ts
+++ b/src/v2/repositories/implementations/IdentityRepository.ts
@@ -31,6 +31,11 @@ export class IdentityRepository implements IIdentityRepository {
   public async getIdentity(address: string): Promise<IdentityData | undefined> {
     Guard.ThrowIfUndefined('address', address);
     const api = await this.api.getApi();
+
+    if (!api.query.identity) {
+      return undefined;
+    }
+
     const result = await api.query.identity.identityOf<Option<PalletIdentityRegistration>>(address);
 
     if (result.isNone) {
diff --git a/yarn.lock b/yarn.lock
index aacab3985..66a4178d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15306,6 +15306,11 @@ swarm-js@^0.1.40:
     tar "^4.0.2"
     xhr-request "^1.0.1"
 
+swiper@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.0.3.tgz#9c325154db2a4431f508b7e8e300621365eb4c3d"
+  integrity sha512-MyV9ooQsriAe2EibeamqewLjgCfSvl2xoyratl6S3ln5BXDL4BzlO6mxcbLMCzQL6Z60b/u0AS/nKrepL0+TAg==
+
 symbol-observable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"