diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
index 4b17c4dee..397073ecc 100644
--- a/src/components/assets/Assets.vue
+++ b/src/components/assets/Assets.vue
@@ -1,6 +1,5 @@
 <template>
   <div v-if="xcmAssets.assets.length > 0 || !isLoading" class="wrapper--assets">
-    <div class="assets-page-bg" :style="{ backgroundImage: `url(${bg})` }" />
     <div class="container--assets">
       <div class="column--main">
         <register-banner v-if="isDappStakingV3" />
@@ -70,25 +69,25 @@
 <script lang="ts">
 import { isValidEvmAddress } from '@astar-network/astar-sdk-core';
 import Account from 'src/components/assets/Account.vue';
-import SideAds from 'src/components/assets/SideAds.vue';
-import AstarDomains from 'src/components/header/mobile/AstarDomains.vue';
+import AnchorLinks from 'src/components/assets/AnchorLinks.vue';
 import EvmAssetList from 'src/components/assets/EvmAssetList.vue';
+import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
+import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
+import SideAds from 'src/components/assets/SideAds.vue';
 import XcmNativeAssetList from 'src/components/assets/XcmNativeAssetList.vue';
 import YourProject from 'src/components/assets/YourProject.vue';
+import ZkAstr from 'src/components/assets/ZkAstr.vue';
+import AstarDomains from 'src/components/header/mobile/AstarDomains.vue';
 import { providerEndpoints } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { useAccount, useBalance, useDispatchGetDapps, useNetworkInfo } from 'src/hooks';
-import { useDappStaking, CombinedDappInfo, useDapps } from 'src/staking-v3';
+import { CombinedDappInfo, useDappStaking, useDapps } from 'src/staking-v3';
+import RegisterBanner from 'src/staking-v3/components/RegisterBanner.vue';
+import Staking from 'src/staking-v3/components/my-staking/Staking.vue';
 import { useStore } from 'src/store';
 import { EvmAssets, XcmAssets, XvmAssets } from 'src/store/assets/state';
 import { Asset } from 'src/v2/models';
 import { computed, defineComponent, onUnmounted, ref, watch, watchEffect } from 'vue';
-import Staking from 'src/staking-v3/components/my-staking/Staking.vue';
-import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
-import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
-import ZkAstr from 'src/components/assets/ZkAstr.vue';
-import AnchorLinks from 'src/components/assets/AnchorLinks.vue';
-import RegisterBanner from 'src/staking-v3/components/RegisterBanner.vue';
 
 export default defineComponent({
   components: {
@@ -212,27 +211,13 @@ export default defineComponent({
       window.removeEventListener(event, handler);
     });
 
-    const isDarkTheme = computed<boolean>(() => store.getters['general/theme'] === 'DARK');
-
-    const bg_img = {
-      light: require('/src/assets/img/assets_bg_light.webp'),
-      dark: require('/src/assets/img/assets_bg_dark_A.webp'),
-    };
-
-    const bg = computed<String>(() => {
-      if (isDarkTheme.value) {
-        return bg_img.dark;
-      }
-      return bg_img.light;
-    });
-
     const { allDapps } = useDapps();
     const ownDapps = computed<CombinedDappInfo[]>(() => {
       if (!allDapps.value) return [];
       return allDapps.value.filter((dapp) => dapp.chain.owner === currentAccount.value);
     });
 
-    const isDappOwner = computed<Boolean>(() => {
+    const isDappOwner = computed<boolean>(() => {
       if (ownDapps.value.length > 0) return true;
       return false;
     });
@@ -255,7 +240,6 @@ export default defineComponent({
       accountData,
       isModalXcmBridge,
       isLoading,
-      bg,
       isDappStakingV3,
       nativeTokenSymbol,
       isZkEvm,
diff --git a/src/components/assets/styles/assets.scss b/src/components/assets/styles/assets.scss
index d1897b933..995318941 100644
--- a/src/components/assets/styles/assets.scss
+++ b/src/components/assets/styles/assets.scss
@@ -11,23 +11,6 @@
   }
 }
 
-.assets-page-bg {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  z-index: -1;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  @media (orientation: landscape) {
-    height: 100vh;
-  }
-  @media (orientation: portrait) {
-    height: 100vh;
-  }
-}
-
 .container--assets {
   width: 100%;
   max-width: $container-max-width;
diff --git a/src/components/assets/transfer/styles/mobile-navigator.scss b/src/components/assets/transfer/styles/mobile-navigator.scss
index 17c494fbb..a845272db 100644
--- a/src/components/assets/transfer/styles/mobile-navigator.scss
+++ b/src/components/assets/transfer/styles/mobile-navigator.scss
@@ -1,7 +1,6 @@
 @import 'src/css/quasar.variables.scss';
 
 .wrapper--mobile-navigator {
-  background: white;
   margin-left: -16px;
   margin-right: -16px;
   margin-top: 16px;
@@ -37,9 +36,6 @@
 }
 
 .body--dark {
-  .wrapper--mobile-navigator {
-    background: $container-bg-dark;
-  }
   .circle--button {
     color: $gray-4;
     border: 1px solid $gray-4;
diff --git a/src/components/bridge/BridgeSelection.vue b/src/components/bridge/BridgeSelection.vue
index 589ca2433..e892d1c90 100644
--- a/src/components/bridge/BridgeSelection.vue
+++ b/src/components/bridge/BridgeSelection.vue
@@ -1,84 +1,110 @@
 <template>
   <div class="wrapper--bridge-selection">
-    <div class="container--selection">
-      <div class="column--selection">
-        <button :disabled="!isEnableEthBridge">
-          <component
-            :is="isEnableEthBridge ? 'router-link' : 'div'"
-            :to="buildEthereumBridgePageLink()"
-            class="button--bridge"
-          >
-            <div class="row--title">
-              <img class="img--logo" :src="require('src/assets/img/ethereum.png')" alt="ethereum" />
-              <span class="text--bridge-title">{{ $t('bridge.ethereumBridge.title') }}</span>
-            </div>
-            <div class="box--text-bridge">
-              <span class="text--bridge">
-                {{ $t('bridge.ethereumBridge.text', { l1: l1Name, l2: l2Name }) }}
-              </span>
-            </div>
-          </component>
-        </button>
-        <p class="text--bridge">
-          {{ $t('bridge.ethereumBridge.text2') }}
-          <a
-            href="https://docs.astar.network/docs/build/zkEVM/bridge-to-zkevm"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {{ $t('bridge.ethereumBridge.lean') }}
-          </a>
-        </p>
+    <div class="container--box">
+      <div class="container--title">
+        <span>{{ $t('bridge.selectBridge') }}</span>
       </div>
+      <div class="container--selection">
+        <div class="column--selection">
+          <button :disabled="!isEnableEthBridge">
+            <component
+              :is="isEnableEthBridge ? 'router-link' : 'div'"
+              :to="buildEthereumBridgePageLink()"
+              class="button--bridge"
+            >
+              <div class="row--logo-bg">
+                <div class="img--logo-bg">
+                  <img
+                    class="img--logo"
+                    :src="require('src/assets/img/ethereum.png')"
+                    alt="ethereum"
+                  />
+                </div>
+              </div>
+              <div class="row--bridge-title">
+                <span class="text--bridge-title">{{ $t('bridge.ethereumBridge.title') }}</span>
+                <div class="box--text-bridge">
+                  <span class="text--bridge">
+                    {{ $t('bridge.ethereumBridge.text', { l1: l1Name, l2: l2Name }) }}
+                  </span>
+                </div>
+              </div>
+            </component>
+          </button>
+          <p class="text--bridge-details">
+            {{ $t('bridge.ethereumBridge.text2') }}
+            <a
+              href="https://docs.astar.network/docs/build/zkEVM/bridge-to-zkevm"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ $t('bridge.ethereumBridge.lean') }}
+            </a>
+          </p>
+        </div>
 
-      <div class="column--selection">
-        <button :disabled="!isEnableAstrBridge">
-          <component
-            :is="isEnableAstrBridge ? 'router-link' : 'div'"
-            :to="buildEthereumBridgePageLink()"
-            class="button--bridge"
-          >
-            <div class="row--title">
-              <img
-                class="img--logo"
-                :src="require('src/assets/img/chain/astar.png')"
-                alt="ethereum"
-              />
-              <span class="text--bridge-title">{{ $t('bridge.astarBridge.title') }}</span>
-            </div>
-            <div class="box--text-bridge">
-              <span class="text--bridge">
-                {{
-                  $t('bridge.astarBridge.text', { substrateNetwork: substrateNetwork, l2: l2Name })
-                }}
-              </span>
-            </div>
-          </component>
-        </button>
-        <p class="text--bridge">{{ $t('bridge.astarBridge.text2') }}</p>
-      </div>
+        <div class="column--selection">
+          <button :disabled="!isEnableAstrBridge">
+            <component
+              :is="isEnableAstrBridge ? 'router-link' : 'div'"
+              :to="buildEthereumBridgePageLink()"
+              class="button--bridge"
+            >
+              <div class="row--logo-bg">
+                <div class="img--logo-bg">
+                  <img
+                    class="img--logo"
+                    :src="require('src/assets/img/chain/astar.png')"
+                    alt="astar-bridge"
+                  />
+                </div>
+              </div>
+              <div class="row--bridge-title">
+                <span class="text--bridge-title">{{ $t('bridge.astarBridge.title') }}</span>
+                <div class="box--text-bridge">
+                  <span class="text--bridge">
+                    {{
+                      $t('bridge.astarBridge.text', {
+                        substrateNetwork: substrateNetwork,
+                        l2: l2Name,
+                      })
+                    }}
+                  </span>
+                </div>
+              </div>
+            </component>
+          </button>
+          <p class="text--bridge-details">{{ $t('bridge.astarBridge.text2') }}</p>
+        </div>
 
-      <div class="column--selection">
-        <button>
-          <a
-            :href="cbridgeAppLink"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="button--bridge"
-          >
-            <div class="row--title">
-              <img
-                class="img--logo"
-                :src="require('src/assets/img/cbridge_logo.svg')"
-                alt="ethereum"
-              />
-              <span class="text--bridge-title">{{ $t('bridge.celetBridge.title') }}</span>
-            </div>
-            <span class="text--bridge">{{
-              $t('bridge.celetBridge.text', { cbridgeNetworkName: cbridgeNetworkName })
-            }}</span>
-          </a>
-        </button>
+        <div class="column--selection">
+          <button>
+            <a
+              :href="cbridgeAppLink"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="button--bridge"
+            >
+              <div class="row--logo-bg">
+                <div class="img--logo-bg">
+                  <img
+                    class="img--logo"
+                    :src="require('src/assets/img/cbridge_logo.svg')"
+                    alt="cbridge"
+                  />
+                </div>
+              </div>
+              <div class="row--bridge-title">
+                <span class="text--bridge-title">{{ $t('bridge.celetBridge.title') }}</span>
+                <div class="box--text-bridge">
+                  <span class="text--bridge">
+                    {{ $t('bridge.celetBridge.text', { cbridgeNetworkName: cbridgeNetworkName }) }}
+                  </span>
+                </div>
+              </div>
+            </a>
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/bridge/ethereum/L1History.vue b/src/components/bridge/ethereum/L1History.vue
index 9421a1a93..7397ae28f 100644
--- a/src/components/bridge/ethereum/L1History.vue
+++ b/src/components/bridge/ethereum/L1History.vue
@@ -134,7 +134,7 @@
     </div>
     <div v-else>
       <div v-if="isLoadingHistories">{{ $t('common.loading') }}</div>
-      <div v-else>{{ $t('bridge.noHistory') }}</div>
+      <div v-else>{{ $t('bridge.noTransactions') }}</div>
     </div>
   </div>
 </template>
diff --git a/src/components/bridge/styles/bridge-selection.scss b/src/components/bridge/styles/bridge-selection.scss
index 9c5a24992..5910ee196 100644
--- a/src/components/bridge/styles/bridge-selection.scss
+++ b/src/components/bridge/styles/bridge-selection.scss
@@ -3,60 +3,82 @@
 .wrapper--bridge-selection {
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
   height: 100%;
-  margin-top: 48px;
-  margin-bottom: 48px;
+  margin-top: 24px;
+  position: relative;
+  padding-left: 8px;
+  padding-right: 8px;
+  @media (min-width: $sm) {
+    align-items: center;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
   @media (min-width: $xl) {
     margin-top: 0px;
     margin-bottom: 0px;
   }
 }
 
+.container--title {
+  font-weight: 800;
+  font-size: 24px;
+  margin-bottom: 24px;
+  @media (min-width: $lg) {
+    margin-bottom: 50px;
+  }
+}
+
+.container--box {
+  @media (min-width: $xl) {
+    position: absolute;
+    right: -40px;
+    top: -36px;
+    height: calc(100vh - 98px);
+    padding-right: 168px;
+    padding-left: 48px;
+    padding-top: 58px;
+    box-shadow: 0px 2px 8px 0px #00000014;
+  }
+}
+
 .container--selection {
   display: flex;
   flex-direction: column;
   row-gap: 24px;
-  @media (min-width: $lg) {
+  width: 100%;
+  @media (min-width: $md) {
     flex-direction: row;
     column-gap: 16px;
   }
   @media (min-width: $xl) {
     flex-direction: row;
-    column-gap: 56px;
+    column-gap: 8px;
   }
 }
 
 .column--selection {
-  width: 260px;
-  @media (min-width: $lg) {
-    width: 254px;
+  width: 100%;
+  button {
+    width: 100%;
   }
-  @media (min-width: $xl) {
-    width: 300px;
+  @media (min-width: $sm) {
+    width: 232px;
   }
 }
 
 .button--bridge {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   border-radius: 16px;
-  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
   cursor: pointer;
   transition: all 0.3s ease 0s;
-  row-gap: 24px;
   padding: 16px;
-  height: 260px;
-  margin-bottom: 12px;
-  @media (min-width: $lg) {
-    height: 254px;
-  }
-  @media (min-width: $xl) {
-    height: 300px;
-  }
+  height: 232px;
+  margin-bottom: 16px;
+  border: 1px solid $gray-0;
+  width: 100%;
 }
 
 .column--selection button:not([disabled]) .button--bridge:hover {
@@ -76,28 +98,40 @@
   }
 }
 
+.row--logo-bg {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 24px;
+}
+
+.img--logo-bg {
+  height: 64px;
+  width: 64px;
+  background-color: $gray-0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+
 .img--logo {
   width: 32px;
   height: 32px;
-  @media (min-width: $lg) {
-    width: 30px;
-    height: 30px;
-  }
-  @media (min-width: $xl) {
-    width: 32px;
-    height: 32px;
-  }
+}
+
+.row--bridge-title {
+  text-align: left;
 }
 
 .text--bridge-title {
-  font-weight: 600;
-  font-size: 16px;
+  font-weight: 800;
+  font-size: 24px;
   color: $navy-1;
 }
 
 .text--bridge {
-  font-weight: 400;
-  font-size: 14px;
+  font-weight: 600;
+  font-size: 12px;
   color: $navy-1;
   a {
     color: $astar-blue;
@@ -107,18 +141,24 @@
   }
 }
 
-.box--text-bridge {
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
+.text--bridge-details {
+  font-weight: 600;
+  font-size: 14px;
+  color: #596381;
+  a {
+    color: $astar-blue;
+    &:hover {
+      color: lighten($astar-blue-dark, 10%);
+    }
+  }
 }
 
 .body--dark {
   .text--bridge-title,
   .text--bridge {
-    color: $gray-1;
+    color: $gray-0;
   }
-  .text--bridge {
+  .text--bridge-details {
     a {
       color: $astar-blue-dark;
       &:hover {
@@ -127,12 +167,24 @@
     }
   }
   .button--bridge {
-    border: 1px solid $gray-4;
-    background-color: $navy-2;
+    border: 1px solid $navy-3;
+    background-color: $navy-1;
+    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8);
+  }
+
+  .container--box {
+    @media (min-width: $xl) {
+      background: rgba(8, 16, 41, 0.7);
+      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.8);
+    }
   }
 
   .column--selection button:not([disabled]) .button--bridge:hover {
     border: 1px solid $astar-blue !important;
     transition: all 0.3s ease 0s;
   }
+
+  .img--logo-bg {
+    background-color: $navy-3;
+  }
 }
diff --git a/src/components/header/styles/modal-network-wallet.scss b/src/components/header/styles/modal-network-wallet.scss
index 1037204ab..067504cbe 100644
--- a/src/components/header/styles/modal-network-wallet.scss
+++ b/src/components/header/styles/modal-network-wallet.scss
@@ -181,7 +181,7 @@
 }
 
 .box--endpoints {
-  background: $gray-0;
+  background: $gray-1;
   border-radius: 8px;
   padding: 16px;
   display: flex;
@@ -244,7 +244,7 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  box-shadow: 0 0 0 2px white;
+  box-shadow: 0 0 0 2px $navy-1;
   -webkit-appearance: none;
   cursor: pointer;
   display: flex;
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index f6dbb2df9..8c601871f 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -961,11 +961,12 @@ export default {
     },
   },
   bridge: {
+    selectBridge: 'Select a Bridge',
     bridge: 'Bridge',
     history: 'Recent History',
     actionRequired: 'Action Required',
     claim: 'Claim',
-    noHistory: 'No histories found',
+    noTransactions: 'No transactions found',
     completed: 'Completed',
     inProgress: 'In Progress',
     approvalMaxAmount: 'Approve Max Amount (option)',
diff --git a/src/i18n/es/index.ts b/src/i18n/es/index.ts
index 49bf524f5..6f34c8620 100644
--- a/src/i18n/es/index.ts
+++ b/src/i18n/es/index.ts
@@ -692,7 +692,7 @@ export default {
     history: 'Historia reciente',
     actionRequired: 'Acción requerida',
     claim: 'Reclamar',
-    noHistory: 'No se ha encontrado historial',
+    noTransactions: 'No se encontraron transacciones',
     completed: 'Completado',
     inProgress: 'En progreso',
     approvalMaxAmount: 'Aprobar importe máximo (opcional)',
diff --git a/src/i18n/fr/index.ts b/src/i18n/fr/index.ts
index 599e2062d..19e3262c2 100644
--- a/src/i18n/fr/index.ts
+++ b/src/i18n/fr/index.ts
@@ -699,7 +699,7 @@ export default {
     history: 'Historique récent',
     actionRequired: 'Action requise',
     claim: 'Réclamer',
-    noHistory: 'Aucun historique trouvé',
+    noTransactions: 'Aucune transaction trouvé',
     completed: 'Terminé',
     inProgress: 'En cours',
     approvalMaxAmount: 'Approuver le montant maximum (option)',
diff --git a/src/i18n/ja/index.ts b/src/i18n/ja/index.ts
index 2e7571273..ae57005f3 100644
--- a/src/i18n/ja/index.ts
+++ b/src/i18n/ja/index.ts
@@ -698,7 +698,7 @@ export default {
     history: '最近の履歴',
     actionRequired: '必要なアクション',
     claim: '請求',
-    noHistory: '履歴が見つかりません',
+    noTransactions: 'トランザクションが見つかりませんでした',
     completed: '完了',
     inProgress: '進行中',
     approvalMaxAmount: '最高額の承認（オプション）',
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 9c335c13f..af51ce0c5 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -8,6 +8,8 @@
       <claim-warning-banner :network="currentNetworkIdx" />
       <main id="assets-top" class="wrapper--main">
         <div class="wrapper--components">
+          <div class="page-bg" :style="{ backgroundImage: `url(${bg})` }" />
+
           <slot />
         </div>
       </main>
@@ -50,11 +52,24 @@ export default defineComponent({
     useGasPrice(isFetchGas);
 
     const currentNetworkIdx = computed<number>(() => store.getters['general/networkIdx']);
+    const isDarkTheme = computed<boolean>(() => store.getters['general/theme'] === 'DARK');
+
+    const bg_img = {
+      light: require('/src/assets/img/assets_bg_light.webp'),
+      dark: require('/src/assets/img/assets_bg_dark_A.webp'),
+    };
 
+    const bg = computed<string>(() => {
+      if (isDarkTheme.value) {
+        return bg_img.dark;
+      }
+      return bg_img.light;
+    });
     return {
       width,
       screenSize,
       currentNetworkIdx,
+      bg,
     };
   },
 });
@@ -76,19 +91,21 @@ export default defineComponent({
 .wrapper--main {
   flex: 1;
   position: relative;
-  padding: 0 0 120px 0;
+
   &:focus {
     outline: 0;
   }
-  @media (min-width: $lg) {
-    padding-top: 36px;
-  }
 }
 
-.wrapper--components {
-  @media (min-width: $lg) {
-    padding: 0 40px;
-  }
+.page-bg {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .body--dark {
diff --git a/src/pages/AssetsPage.vue b/src/pages/AssetsPage.vue
index 029c2e0d5..4354f371f 100644
--- a/src/pages/AssetsPage.vue
+++ b/src/pages/AssetsPage.vue
@@ -53,11 +53,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 #assets-top {
   padding: 0 16px;
+  position: relative;
+  padding-bottom: 36px;
   @media (min-width: $sm) {
     padding-top: 16px;
   }
   @media (min-width: $lg) {
-    padding: 0;
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 36px;
   }
 }
 </style>
diff --git a/src/pages/BridgePage.vue b/src/pages/BridgePage.vue
index 329ad6c14..5710711c6 100644
--- a/src/pages/BridgePage.vue
+++ b/src/pages/BridgePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isReady" class="page--bridge">
+  <div v-if="isReady">
     <!-- Fixme: scroll to top when the app was routed from other page -->
     <router-view id="bridge-top" />
   </div>
@@ -18,20 +18,21 @@ export default defineComponent({
   setup() {
     useMeta(generateMeta(Path.Bridge));
     const { isReady } = usePageReady();
+
     return { isReady };
   },
 });
 </script>
 <style lang="scss" scoped>
 #bridge-top {
-  @media (min-width: $lg) {
-    padding: 0 16px;
+  padding: 0 16px;
+  @media (min-width: $sm) {
+    padding-top: 16px;
   }
-}
-
-.page--bridge {
   @media (min-width: $lg) {
-    height: calc(100vh - 96px - 36px - 120px);
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 36px;
   }
 }
 </style>
diff --git a/src/pages/DappStaking.vue b/src/pages/DappStaking.vue
index 495796c37..7eb8d1dfc 100644
--- a/src/pages/DappStaking.vue
+++ b/src/pages/DappStaking.vue
@@ -21,6 +21,15 @@ export default defineComponent({
 <style lang="scss">
 .wrapper--dapp-staking {
   height: 100%;
+  padding: 0 16px;
+  @media (min-width: $sm) {
+    padding-top: 16px;
+  }
+  @media (min-width: $lg) {
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 36px;
+  }
 }
 
 .dapps-staking-bg {
diff --git a/src/pages/DappStakingV3.vue b/src/pages/DappStakingV3.vue
index 9ce258373..5496c1891 100644
--- a/src/pages/DappStakingV3.vue
+++ b/src/pages/DappStakingV3.vue
@@ -16,3 +16,19 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
+.wrapper--dapp-staking {
+  padding: 0 16px;
+  @media (min-width: $sm) {
+    padding-top: 16px;
+  }
+  @media (min-width: $lg) {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 36px;
+  }
+}
+</style>
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index c3b6ac288..38bf4ef98 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -29,5 +29,13 @@ export default defineComponent({
 
 .wrapper--dashboard {
   padding: 0 16px;
+  @media (min-width: $sm) {
+    padding-top: 16px;
+  }
+  @media (min-width: $lg) {
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-top: 36px;
+  }
 }
 </style>