diff --git a/src/App.vue b/src/App.vue
index 0169a3851..74e9e22e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,6 +28,12 @@
     </transition>
     <notification-stack />
 
+    <modal-onboarding
+      v-if="showOnboardingModal"
+      :set-is-open="setShowOnboardingModal"
+      :show="showOnboardingModal"
+    />
+
     <modal-disclaimer
       v-if="showDisclaimerModal"
       :set-is-open="setShowDisclaimerModal"
@@ -53,6 +59,7 @@ import ModalLoading from 'components/common/ModalLoading.vue';
 import AlertBox from 'components/common/AlertBox.vue';
 import CookiePolicy from 'components/common/CookiePolicy.vue';
 import ModalDisclaimer from 'components/common/ModalDisclaimer.vue';
+import ModalOnboarding from 'src/staking-v3/components/ModalOnboarding.vue';
 import NotificationStack from './components/common/Notification/NotificationStack.vue';
 import 'animate.css';
 import {
@@ -86,6 +93,7 @@ export default defineComponent({
     CookiePolicy,
     ModalDisclaimer,
     NotificationStack,
+    ModalOnboarding,
     ModalDecommission,
   },
   setup() {
@@ -129,6 +137,21 @@ export default defineComponent({
       showDisclaimerModal.value = isOpen;
     };
 
+    // dApp staking onboarding modal
+    const showOnboardingModal = ref<boolean>(false);
+    if (
+      !localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING) &&
+      isDappStakingV3.value
+    ) {
+      setTimeout(() => {
+        showOnboardingModal.value = true;
+      }, 2000);
+    }
+
+    const setShowOnboardingModal = (isOpen: boolean): void => {
+      showOnboardingModal.value = isOpen;
+    };
+
     const setShowDecommissionModal = (isOpen: boolean): void => {
       showDecommissionModal.value = isOpen;
     };
@@ -253,6 +276,8 @@ export default defineComponent({
       showDisclaimerModal,
       showDecommissionModal,
       setShowDisclaimerModal,
+      showOnboardingModal,
+      setShowOnboardingModal,
       setShowDecommissionModal,
     };
   },
diff --git a/src/config/localStorage.ts b/src/config/localStorage.ts
index 7a80f6db9..2d1c07d29 100644
--- a/src/config/localStorage.ts
+++ b/src/config/localStorage.ts
@@ -20,6 +20,7 @@ export enum LOCAL_STORAGE {
   THEME_COLOR = 'themeColor',
   IS_LEDGER = 'isLedger',
   MULTISIG = 'multisig',
+  CLOSE_DAPP_STAKING_V3_ONBOARDING = 'closeDappStakingV3Onboarding',
   DECOMMISSION = 'decommission',
 }
 
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 6edd5e184..590973cc6 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -903,6 +903,19 @@ export default {
     registerNow: 'Register now',
     willUnstakeAll:
       'The operation will unstake all of your staked tokens because the minimum staking amount is {amount} tokens.',
+    onboarding: {
+      introducing: 'Introducing',
+      innovativeWayOfStaking: 'Innovative way of staking',
+      receiveStakerRewards: 'Receive Staker Rewards by voting your favourite projects',
+      earnBonusByVoting: 'Earn bonus by Voting on time',
+      receiveBonusRrewards: 'Receive bonus rewards being royal stakers',
+      remember: 'Remember',
+      stakingResetsEveryPeriod:
+        'Staking resets every period - It is requires to make votes every period.',
+      goToDappStakingAndVoteToday: 'Go to dApp Staking and Vote today',
+      whatIsDappStaking: 'What is dApp Staking?',
+      usersGuides: 'Users Guides',
+    },
     loyalStakerWarningAmount:
       'You will loose eligibility for bonus reward at the end of current period if you unstake more than {amount} tokens.',
     loyalStakerWarning:
diff --git a/src/staking-v3/components/ErrorPanel.vue b/src/staking-v3/components/ErrorPanel.vue
index 22753656c..32e97ed21 100644
--- a/src/staking-v3/components/ErrorPanel.vue
+++ b/src/staking-v3/components/ErrorPanel.vue
@@ -26,4 +26,4 @@ export default defineComponent({
   font-size: 14px;
   font-weight: 500;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/staking-v3/components/ModalOnboarding.vue b/src/staking-v3/components/ModalOnboarding.vue
new file mode 100644
index 000000000..e534d9c91
--- /dev/null
+++ b/src/staking-v3/components/ModalOnboarding.vue
@@ -0,0 +1,187 @@
+<template>
+  <astar-default-modal
+    v-if="show"
+    :show="show"
+    :is-closing="isClosingModal"
+    :width="580"
+    :class="'highest-z-index wrapper--modal-onboarding'"
+    @close="closeModal"
+  >
+    <div class="modal__top">
+      <div class="title--onboarding">
+        {{ $t('stakingV3.onboarding.introducing') }}<br />
+        <span>{{ $t('stakingV3.title') }}</span>
+      </div>
+    </div>
+    <div class="modal__bottom">
+      <div class="modal__bottom-inner">
+        <swiper
+          :pagination="true"
+          :navigation="true"
+          :modules="modules"
+          class="swiper--modal-onboarding"
+        >
+          <swiper-slide>
+            <div class="text--title">
+              {{ $t('stakingV3.onboarding.innovativeWayOfStaking') }}
+            </div>
+            <div class="text--description">
+              {{ $t('stakingV3.onboarding.receiveStakerRewards') }}
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="text--title">
+              {{ $t('stakingV3.onboarding.earnBonusByVoting') }}
+            </div>
+            <div class="text--description">
+              {{ $t('stakingV3.onboarding.receiveBonusRrewards') }}
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="text--title text--yellow">
+              {{ $t('stakingV3.onboarding.remember') }}
+            </div>
+            <div class="text--description">
+              {{ $t('stakingV3.onboarding.stakingResetsEveryPeriod') }}
+            </div>
+          </swiper-slide>
+          <swiper-slide>
+            <div class="text--title">
+              <router-link :to="RoutePath.DappStaking" @click="closeModal">
+                <span>{{ $t('stakingV3.onboarding.goToDappStakingAndVoteToday') }}</span>
+                <astar-icon-arrow-right />
+              </router-link>
+            </div>
+            <div class="text--links">
+              <a :href="docsUrl.learnDappStaking" target="_blank" rel="noopener noreferrer">
+                <span>{{ $t('stakingV3.onboarding.whatIsDappStaking') }}</span>
+                <astar-icon-arrow-right />
+              </a>
+              <a :href="docsUrl.dappStakingForStakers" target="_blank" rel="noopener noreferrer">
+                <span>{{ $t('stakingV3.onboarding.usersGuides') }}</span>
+                <astar-icon-arrow-right />
+              </a>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+      <div class="bg--modal-onboarding">
+        <img :src="require('/src/staking-v3/assets/leaderboard_bg.webp')" alt="" />
+      </div>
+    </div>
+  </astar-default-modal>
+</template>
+
+<script lang="ts">
+import { wait } from '@astar-network/astar-sdk-core';
+import { fadeDuration } from '@astar-network/astar-ui';
+import { defineComponent, ref } from 'vue';
+import { LOCAL_STORAGE } from 'src/config/localStorage';
+import { Path as RoutePath } from 'src/router/routes';
+
+// Import Swiper
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import { Navigation, Pagination } from 'swiper/modules';
+import { docsUrl } from 'src/links';
+
+export default defineComponent({
+  components: { Swiper, SwiperSlide },
+  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;
+      localStorage.setItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING, 'true');
+    };
+
+    if (localStorage.getItem(LOCAL_STORAGE.CLOSE_DAPP_STAKING_V3_ONBOARDING)) {
+      closeModal();
+    }
+
+    return {
+      isClosingModal,
+      modules: [Navigation, Pagination],
+      RoutePath,
+      docsUrl,
+      closeModal,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use './styles/modal-onboarding.scss';
+</style>
+
+<style lang="scss">
+.body--dark {
+  .wrapper--modal-onboarding {
+    .modal-content {
+      background-color: white !important;
+    }
+  }
+}
+.swiper--modal-onboarding {
+  .swiper-button-prev,
+  .swiper-button-next {
+    margin: 0;
+    width: 40px;
+    height: 40px;
+    top: inherit;
+    bottom: 0;
+    display: block;
+    text-align: center;
+    background-color: $astar-blue;
+    border-radius: 9999px;
+    z-index: 9999;
+    transition: all 0.2s ease;
+    &:hover {
+      background-color: lighten($astar-blue, 10%);
+    }
+    &::after {
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 40px;
+      color: white;
+    }
+  }
+  .swiper-button-prev {
+    left: 0;
+  }
+  .swiper-button-next {
+    right: 0;
+  }
+  .swiper-button-disabled {
+    display: none;
+  }
+  .swiper-pagination {
+    height: 40px;
+    margin-top: 40px;
+    position: relative;
+    top: inherit;
+    bottom: inherit;
+    line-height: 40px;
+    .swiper-pagination-bullet {
+      background-color: $gray-2;
+      &.swiper-pagination-bullet-active {
+        background-color: $astar-blue;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/staking-v3/components/styles/modal-onboarding.scss b/src/staking-v3/components/styles/modal-onboarding.scss
new file mode 100644
index 000000000..cec4b6815
--- /dev/null
+++ b/src/staking-v3/components/styles/modal-onboarding.scss
@@ -0,0 +1,139 @@
+@import 'src/css/quasar.variables.scss';
+
+.modal__top {
+  margin: -60px 0 20px 0;
+}
+
+.title--onboarding {
+  font-size: 28px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 1.25;
+  padding: 0 40px;
+  @media (min-width: $sm) {
+    font-size: 40px;
+    padding: 0;
+  }
+  span {
+    font-weight: 900;
+  }
+}
+
+.modal__bottom {
+  position: relative;
+  padding: 40px;
+  overflow: hidden;
+  background-color: $navy-1;
+  border-radius: 0 0 6px 6px;
+  @media (min-width: $sm) {
+    margin: 0 -40px -40px -40px;
+  }
+}
+
+.modal__bottom-inner {
+  position: relative;
+  z-index: 1;
+  color: $gray-2;
+  padding-top: 40px;
+  @media (min-width: $sm) {
+    padding-top: 60px;
+  }
+}
+
+.swiper--modal-onboarding {
+  width: 100%;
+}
+
+.swiper-slide {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  @media (min-width: $sm) {
+    gap: 24px;
+  }
+}
+
+.text--title {
+  color: white;
+  font-size: 28px;
+  font-style: italic;
+  font-weight: 700;
+  max-width: 300px;
+  line-height: 1.15;
+  @media (min-width: $sm) {
+    font-size: 40px;
+    max-width: 420px;
+  }
+  a {
+    transition: all 0.2s ease;
+    color: #0ae2ff;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    &:hover {
+      color: lighten(#0ae2ff, 25%);
+    }
+    svg {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.text--yellow {
+  color: #f0cd5f;
+}
+
+.text--description {
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 200;
+  max-width: 300px;
+  @media (min-width: $sm) {
+    max-width: 420px;
+    font-size: 24px;
+  }
+}
+
+.text--links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  a {
+    transition: all 0.2s ease;
+    color: white;
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 500;
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    @media (min-width: $sm) {
+      font-size: 16px;
+    }
+    &:hover {
+      color: #0ae2ff;
+    }
+    svg {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.bg--modal-onboarding {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.body--dark{
+  .title--onboarding {
+    color: $navy-1;
+  }
+}