diff --git a/src/components/header/AccountButton.vue b/src/components/header/AccountButton.vue
index 0f86483ff..c97494e59 100644
--- a/src/components/header/AccountButton.vue
+++ b/src/components/header/AccountButton.vue
@@ -1,12 +1,9 @@
 <template>
   <div>
-    <button type="button" class="btn--account" :class="screenSize.sm > width && 'm-btn--account'">
-      <astar-icon-base class="iconbase" stroke="currentColor" icon-name="wallet">
-        <astar-icon-wallet />
-      </astar-icon-base>
-      <img class="icon" width="16" :src="iconWallet" :class="multisig && 'img--polkasafe'" />
+    <button type="button" class="btn--account">
+      <img class="icon" width="24" :src="iconWallet" :class="multisig && 'img--polkasafe'" />
       <template v-if="width >= screenSize.sm">
-        <span class="text--address">
+        <span>
           {{ getShortenAddress(account, 4) }}
         </span>
       </template>
@@ -48,93 +45,25 @@ export default defineComponent({
 
 .btn--account {
   display: flex;
-  height: 32px;
-  flex-direction: row;
   align-items: center;
-  padding: 8px 16px 8px 12px;
-  border-radius: 16px;
-  transition: all 0.3s ease 0s;
-  background: transparent;
-  color: #fff;
-  border: 1px solid $gray-4;
-
-  @media (min-width: $lg) {
-    border: 1px solid $navy-3;
-  }
-
+  height: 32px;
+  color: white;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 12px;
+  border-radius: 20px;
+  padding: 0;
+  transition: all 0.2s ease;
+  border: solid 1px transparent;
+  margin-right: 8px;
   &:hover {
-    background: $astar-blue !important;
-    border: 1px solid transparent;
-    .iconbase {
-      color: $gray-1;
-    }
-    @media (min-width: $lg) {
-      background: transparent !important;
-      border: 1px solid $gray-4;
-      .iconbase {
-        color: $gray-5;
-      }
-    }
-  }
-}
-
-.iconbase {
-  color: $gray-3;
-  width: rem(22);
-  height: rem(22);
-  transition: all 0.3s ease 0s;
-  @media (min-width: $lg) {
-    color: $navy-3;
-  }
-}
-
-.m-btn--account {
-  background: transparent;
-  box-shadow: none;
-  padding: 8px;
-  transition: all 0.3s ease 0s;
-  color: $gray-3;
-  border: 1px solid $gray-4;
-  @media (min-width: $lg) {
-    border: 1px solid $navy-3;
-  }
-}
-
-.icon {
-  margin: 0 6px;
-}
-
-.text--address {
-  font-weight: 400;
-  font-size: 14px;
-  color: $gray-1;
-  @media (min-width: $lg) {
-    color: $navy-1;
-  }
-}
-
-.body--dark {
-  .btn--account {
-    border: 1px solid $gray-4;
-    &:hover {
-      background: $astar-blue !important;
-      border: 1px solid transparent;
-      .iconbase {
-        color: $gray-1;
-      }
-    }
-  }
-
-  .iconbase {
-    color: $gray-3;
+    color: $astar-blue-dark;
+    border-color: $astar-blue-dark;
   }
-
-  .m-btn--account {
-    border: 1px solid $gray-4;
-  }
-
-  .text--address {
-    color: $gray-1;
+  @media (min-width: $sm) {
+    height: 40px;
+    padding: 0 16px 0 12px;
+    margin-right: 0;
   }
 }
 </style>
diff --git a/src/components/header/ConnectButton.vue b/src/components/header/ConnectButton.vue
index caae54b79..b1b9aa090 100644
--- a/src/components/header/ConnectButton.vue
+++ b/src/components/header/ConnectButton.vue
@@ -1,13 +1,8 @@
 <template>
-  <button type="button" :class="width >= screenSize.sm ? 'btn--connect' : 'm-btn--connect'">
+  <button type="button" class="btn--connect">
     <astar-icon-base class="iconbase" stroke="currentColor">
       <slot />
     </astar-icon-base>
-    <template v-if="width >= screenSize.sm">
-      <span class="text--connect">
-        {{ $t('connect') }}
-      </span>
-    </template>
   </button>
 </template>
 
@@ -32,113 +27,33 @@ export default defineComponent({
 @import 'src/css/utils.scss';
 
 .btn--connect {
-  display: flex;
-  height: 32px;
-  color: $navy-1;
-  flex-direction: row;
-  align-items: center;
-  padding: 8px 16px 8px 16px;
-  background: transparent;
-  border-radius: 16px;
-  margin-left: 8px;
-  transition: all 0.3s ease 0s;
-  border: 1px solid $gray-4;
-
-  @media (min-width: $lg) {
-    border: 1px solid $navy-3;
-  }
-
-  @media (min-width: $sm) {
-    margin-left: 16px;
-  }
-}
-.btn--connect:hover {
-  background: $astar-blue !important;
-  border: 1px solid transparent;
-  .iconbase {
-    color: $gray-1;
-  }
-  @media (min-width: $lg) {
-    background: transparent !important;
-    border: 1px solid $gray-4;
-    .iconbase {
-      color: $gray-5;
-    }
-  }
-}
-
-.m-btn--connect {
-  padding-left: 10px;
+  color: white;
   width: 32px;
   height: 32px;
-  background: transparent;
-  border: 1px solid $gray-4;
   border-radius: 16px;
-  margin-left: 16px;
-  transition: all 0.3s ease 0s;
-  @media (min-width: $lg) {
-    border: 1px solid $navy-3;
+  border: solid 1px white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease;
+  margin-right: 8px;
+  &:hover {
+    color: $astar-blue-dark;
+    border-color: $astar-blue-dark;
   }
-}
-.m-btn--connect:hover {
-  background: $astar-blue;
-  border: 1px solid transparent;
   @media (min-width: $lg) {
-    background: #fff;
-  }
-  .iconbase {
-    color: $gray-1;
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
   }
 }
-.iconbase {
-  color: $gray-4;
-  width: rem(20);
-  height: rem(20);
-  margin-left: -4px;
-  margin-right: 4px;
-  transition: all 0.3s ease 0s;
-}
 
-.text--connect {
-  font-weight: 400;
-  font-size: 14px;
-  color: $gray-1;
+.iconbase {
+  width: 18px;
+  height: 18px;
   @media (min-width: $lg) {
-    color: $navy-1;
-  }
-}
-
-.body--dark {
-  .btn--connect {
-    background: transparent;
-    color: #fff;
-    border: 1px solid $gray-4;
-  }
-  .btn--connect:hover {
-    background: $astar-blue !important;
-    border: 1px solid transparent;
-    .iconbase {
-      color: $gray-1;
-    }
-  }
-  .iconbase {
-    color: $gray-3;
-  }
-
-  .m-btn--connect {
-    background: transparent;
-    color: $gray-3;
-    border: 1px solid $gray-4;
-  }
-  .m-btn--connect:hover {
-    background: $astar-blue;
-    border: 1px solid transparent;
-    .iconbase {
-      color: $gray-1;
-    }
-  }
-  .text--connect {
-    color: $gray-1;
+    width: 20px;
+    height: 20px;
   }
 }
 </style>
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 1d76fe937..33c2bc1dc 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -4,12 +4,14 @@
       <template #left>
         <div class="icon"><logo /></div>
       </template>
-      <trouble-help />
-      <template v-if="!currentAccount">
+      <div v-if="!currentAccount">
         <connect-button :class="isLoading && 'cursor--disabled'" @click="openSelectModal">
           <astar-icon-wallet />
         </connect-button>
-      </template>
+        <q-tooltip>
+          <span class="text--tooltip">{{ $t('wallet.connectWallet') }}</span>
+        </q-tooltip>
+      </div>
       <template v-else>
         <account-button
           :account="currentAccount"
@@ -18,6 +20,7 @@
         />
       </template>
       <network-button @show-network="clickNetworkBtn" />
+      <trouble-help />
     </header-comp>
 
     <!-- Modals -->
@@ -235,14 +238,13 @@ export default defineComponent({
 @import 'src/css/quasar.variables.scss';
 .wrapper {
   z-index: 100;
-  background-color: $navy-2;
   @media (min-width: $lg) {
+    border-left: solid 1px $navy-3;
     width: 100%;
     position: absolute;
     top: 0;
     left: 224px;
     padding-right: 224px;
-    background-color: transparent;
   }
 }
 
diff --git a/src/components/header/HeaderComp.vue b/src/components/header/HeaderComp.vue
index 7432dbdb9..cdbc6441b 100644
--- a/src/components/header/HeaderComp.vue
+++ b/src/components/header/HeaderComp.vue
@@ -47,13 +47,13 @@ export default defineComponent({
   overflow: hidden;
   display: flex;
   justify-content: space-between;
-  background: #0e101d;
+  background: $navy-1;
   mix-blend-mode: normal;
   backdrop-filter: blur(200px);
   height: 4rem;
   padding-left: 16px;
   padding-right: 16px;
-  border-bottom: 1px solid transparent !important;
+  border-bottom: 5px solid transparent !important;
   border-image: linear-gradient(
     121.48deg,
     #e6007a -5.77%,
@@ -63,13 +63,9 @@ export default defineComponent({
     #0ae2ff 74.93%
   );
   border-image-slice: 1;
-  @media (min-width: $lg) {
-    background: rgba(247, 247, 248, 0.8);
-  }
   @media (min-width: $lg) {
     padding: 40px 40px 25px 40px;
     height: 6rem;
-    background: #fff;
   }
 }
 
@@ -79,7 +75,7 @@ export default defineComponent({
   align-items: center;
   font-weight: 590;
   font-size: 1.625rem;
-  color: $navy-1;
+  color: white;
   padding: 0rem;
 }
 
@@ -89,29 +85,4 @@ export default defineComponent({
   align-items: center;
   padding: 0rem;
 }
-
-.body--dark {
-  .header {
-    background: rgba(8, 15, 46, 0.4);
-    backdrop-filter: blur(200px);
-    border-bottom: 1px solid !important;
-    border-image: linear-gradient(
-      90deg,
-      #e6007a -4%,
-      #e6007a -3.88%,
-      #703ac2 17.01%,
-      #0070eb 42.25%,
-      #0297fb 73.9%,
-      #0ae2ff 97.42%
-    );
-    border-image-slice: 1;
-  }
-
-  .header-left {
-    color: $gray-1;
-    @media (min-width: $lg) {
-      padding: 0px;
-    }
-  }
-}
 </style>
diff --git a/src/components/header/NetworkButton.vue b/src/components/header/NetworkButton.vue
index 7ccf836c3..a8c70a17c 100644
--- a/src/components/header/NetworkButton.vue
+++ b/src/components/header/NetworkButton.vue
@@ -1,26 +1,22 @@
 <template>
   <div>
-    <connect-button v-if="isNotSelectedEndpoint" @click="showNetworkModal">
-      <astar-icon-network />
-    </connect-button>
+    <div v-if="isNotSelectedEndpoint">
+      <connect-button @click="showNetworkModal">
+        <astar-icon-network />
+      </connect-button>
+      <q-tooltip>
+        <span class="text--tooltip">{{ $t('assets.transferPage.selectChain') }}</span>
+      </q-tooltip>
+    </div>
     <template v-else>
       <meta-update-button
         v-if="isNeedUpdate(isLatestChain, extensionCount)"
         @updated-meta="isLatestChain = true"
       />
-      <button
-        v-else
-        type="button"
-        class="btn--network"
-        :class="screenSize.sm > width && 'm-btn--network'"
-        @click="showNetworkModal"
-      >
-        <astar-icon-base class="iconbase" stroke="currentColor" icon-name="network">
-          <astar-icon-network />
-        </astar-icon-base>
-        <img v-show="currentLogo" class="icon" width="16" :src="currentLogo" />
+      <button v-else type="button" class="btn--network" @click="showNetworkModal">
+        <img v-show="currentLogo" class="icon" width="24" :src="currentLogo" />
         <div class="column--network-name">
-          <template v-if="width >= screenSize.md">
+          <template v-if="width >= screenSize.sm">
             <span class="text--network">
               {{ currentNetworkName.replace('Network', '') }}
             </span>
@@ -90,135 +86,24 @@ export default defineComponent({
 
 .btn--network {
   display: flex;
-  height: 32px;
-  flex-direction: row;
   align-items: center;
-  padding: 8px 16px 8px 12px;
-  border-radius: 16px;
-  margin-left: 8px;
-  transition: all 0.3s ease 0s;
-  background: transparent;
-  color: #fff;
-  border: 1px solid $gray-4;
-
-  @media (min-width: $lg) {
-    border: 1px solid $navy-3;
-  }
-
-  @media (min-width: $sm) {
-    margin-left: 16px;
-  }
-
+  height: 32px;
+  color: white;
+  font-weight: 600;
+  font-size: 16px;
+  border-radius: 20px;
+  padding: 0;
+  transition: all 0.2s ease;
+  border: solid 1px transparent;
+  margin-right: 8px;
   &:hover {
-    background: $astar-blue !important;
-    border: 1px solid transparent;
-    .iconbase {
-      color: $gray-1;
-    }
-    .divider {
-      border-left: 1px solid $gray-1;
-    }
-    @media (min-width: $lg) {
-      background: transparent !important;
-      border: 1px solid $gray-4;
-      .iconbase {
-        color: $gray-5;
-      }
-      .divider {
-        border-left: 1px solid $navy-3;
-      }
-    }
+    color: $astar-blue-dark;
+    border-color: $astar-blue-dark;
   }
-}
-
-.divider {
-  border-left: 1px solid $gray-3;
-  margin: 0 8px;
-  height: 22px;
-  transition: all 0.3s ease 0s;
-  @media (min-width: $lg) {
-    border-left: 1px solid $navy-3;
-  }
-}
-
-.iconbase {
-  color: $gray-3;
-  width: rem(22);
-  height: rem(22);
-  transition: all 0.3s ease 0s;
-  @media (min-width: $lg) {
-    color: $navy-3;
-  }
-}
-
-.icon {
-  margin-left: 8px;
   @media (min-width: $sm) {
-    margin-right: 8px;
-  }
-}
-
-.m-btn--network {
-  background: transparent;
-  border: 1px solid $gray-4;
-  box-shadow: none;
-  padding: 8px;
-
-  @media (min-width: $lg) {
-    border: 1px solid $navy-3;
-  }
-
-  .divider {
-    margin: 0 8px;
-    border-left-color: $gray-4;
-    @media (min-width: $lg) {
-      border-left-color: $navy-3;
-    }
-  }
-}
-
-.column--network-name {
-  margin-top: -1px;
-}
-
-.text--network {
-  font-weight: 400;
-  font-size: 14px;
-  color: $gray-1;
-  @media (min-width: $lg) {
-    color: $navy-1;
-  }
-}
-
-.body--dark {
-  .btn--network {
-    border: 1px solid $gray-4;
-    &:hover {
-      background: $astar-blue !important;
-      border: 1px solid transparent;
-      .iconbase {
-        color: $gray-1;
-      }
-      .divider {
-        border-left: 1px solid $gray-1;
-      }
-    }
-  }
-
-  .iconbase {
-    color: $gray-3;
-  }
-
-  .m-btn--network {
-    border: 1px solid $gray-4;
-  }
-
-  .divider {
-    border-left: 1px solid $gray-4;
-  }
-
-  .text--network {
-    color: $gray-1;
+    height: 40px;
+    padding: 0 16px 0 12px;
+    gap: 8px;
   }
 }
 </style>
diff --git a/src/components/header/TroubleHelp.vue b/src/components/header/TroubleHelp.vue
index 0c856e90e..23e0a7550 100644
--- a/src/components/header/TroubleHelp.vue
+++ b/src/components/header/TroubleHelp.vue
@@ -1,16 +1,24 @@
 <template>
-  <div class="wrapper--trouble-help">
-    <button
-      type="button"
-      :class="width >= screenSize.sm ? 'btn--help' : 'm-btn--help'"
-      @click="setShowModal(true)"
-    >
+  <div>
+    <button type="button" class="btn--help" @click="setShowModal(true)">
       <div class="icon--help">
-        <astar-icon-help size="20" />
+        <!-- TODO: will move icon to the AstarUI -->
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15.1836 6.40348C15.1836 5.44838 14.8677 4.68126 14.2357 4.10212C13.6037 3.52299 12.7695 3.23343 11.7331 3.23343C11.0769 3.23343 10.4953 3.36875 9.98808 3.6394C9.48089 3.91007 9.04307 4.31755 8.6746 4.86183C8.45736 5.17177 8.16708 5.35492 7.80376 5.41127C7.44045 5.46763 7.12301 5.37791 6.85146 5.14212C6.65033 4.96563 6.53546 4.74429 6.50684 4.4781C6.47821 4.2119 6.5395 3.95943 6.6907 3.72067C7.27202 2.83232 7.99095 2.15678 8.8475 1.69407C9.70405 1.23136 10.6659 1 11.7331 1C13.4374 1 14.8247 1.49312 15.8948 2.47935C16.9649 3.46557 17.5 4.74988 17.5 6.33231C17.5 7.17022 17.3224 7.93806 16.9671 8.63583C16.6119 9.33362 16.0064 10.0844 15.1505 10.8882C14.349 11.6223 13.8022 12.2182 13.5101 12.6757C13.218 13.1332 13.0484 13.6475 13.0014 14.2185C12.9545 14.5477 12.8194 14.822 12.5963 15.0415C12.3732 15.261 12.1045 15.3708 11.7904 15.3708C11.4763 15.3708 11.2076 15.2621 10.9845 15.0449C10.7614 14.8276 10.6498 14.5603 10.6498 14.2429C10.6498 13.4688 10.8249 12.761 11.175 12.1195C11.5251 11.4781 12.1112 10.7881 12.9333 10.0496C13.8111 9.27098 14.4056 8.6214 14.7168 8.10085C15.028 7.5803 15.1836 7.01451 15.1836 6.40348ZM11.7331 22C11.2649 22 10.8616 21.8291 10.5232 21.4872C10.1848 21.1454 10.0157 20.7379 10.0157 20.2649C10.0157 19.7918 10.1848 19.3843 10.5232 19.0425C10.8616 18.7006 11.2649 18.5297 11.7331 18.5297C12.2014 18.5297 12.6047 18.7006 12.9431 19.0425C13.2814 19.3843 13.4506 19.7918 13.4506 20.2649C13.4506 20.7379 13.2814 21.1454 12.9431 21.4872C12.6047 21.8291 12.2014 22 11.7331 22Z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
-      <template v-if="width >= screenSize.sm">
-        {{ $t('help') }}
-      </template>
+      <q-tooltip>
+        <span class="text--tooltip">{{ $t('help') }}</span>
+      </q-tooltip>
     </button>
     <modal-connection-trouble v-if="showModal" :set-is-open="setShowModal" :show="showModal" />
   </div>
@@ -43,114 +51,33 @@ export default defineComponent({
 @import 'src/css/quasar.variables.scss';
 @import 'src/css/utils.scss';
 
-.wrapper--trouble-help {
-  margin-right: 8px;
-  @media (min-width: $lg) {
-    margin-right: 16px;
-  }
-}
-
 .btn--help {
-  display: flex;
-  height: 32px;
-  flex-direction: row;
-  align-items: center;
-  padding: 8px 16px 8px 16px;
-  background: transparent;
-  border-radius: 16px;
-  margin-left: 8px;
-  transition: all 0.3s ease 0s;
-  color: #fff;
-  border: 1px solid $gray-4;
-
-  @media (min-width: $lg) {
-    color: $navy-1;
-    border: 1px solid $navy-3;
-  }
-}
-.btn--help:hover {
-  background: $astar-blue;
-  border: 1px solid transparent;
-  .icon--help {
-    color: $gray-1;
-  }
-
-  @media (min-width: $lg) {
-    background: #fff;
-    border: 1px solid $gray-4;
-    .icon--help {
-      color: $navy-1;
-    }
-  }
-}
-
-.m-btn--help {
-  padding-left: 10px;
   width: 32px;
   height: 32px;
-  border: 1px solid $navy-3;
-  border-radius: 16px;
-  margin-left: 16px;
-  transition: all 0.3s ease 0s;
-
-  background: transparent;
-  color: $gray-3;
-  border: 1px solid $gray-4;
-
-  @media (min-width: $lg) {
-    border: 1px solid $navy-3;
-  }
-}
-
-.m-btn--help:hover {
-  background: $astar-blue;
-  border: 1px solid transparent;
-  .icon--help {
-    color: $gray-1;
+  color: white;
+  border: solid 1px white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 14px;
+  transition: all 0.2s ease;
+  &:hover {
+    color: $astar-blue-dark;
+    border-color: $astar-blue-dark;
   }
   @media (min-width: $lg) {
-    background: #fff;
+    width: 40px;
+    height: 40px;
+    border-radius: 16px;
   }
 }
-
 .icon--help {
-  margin-right: 4px;
-  transition: all 0.3s ease 0s;
-  color: $gray-3;
-  margin-left: -6px;
-  margin-top: -1px;
-  @media (min-width: $lg) {
-    color: $navy-3;
-  }
-}
-
-.body--dark {
-  .btn--help {
-    background: transparent;
-    color: #fff;
-    border: 1px solid $gray-4;
-  }
-  .btn--help:hover {
-    background: $astar-blue;
-    border: 1px solid transparent;
-    .icon--help {
-      color: $gray-1;
-    }
-  }
-  .icon--help {
-    color: $gray-3;
-  }
-
-  .m-btn--help {
-    background: transparent;
-    color: $gray-3;
-    border: 1px solid $gray-4;
-  }
-  .m-btn--help:hover {
-    background: $astar-blue;
-    border: 1px solid transparent;
-    .icon--help {
-      color: $gray-1;
+  svg {
+    width: 18px;
+    height: 18px;
+    @media (min-width: $lg) {
+      width: 20px;
+      height: 20px;
     }
   }
 }
diff --git a/src/router/utils/index.ts b/src/router/utils/index.ts
index a876a3ef8..e765cd2af 100644
--- a/src/router/utils/index.ts
+++ b/src/router/utils/index.ts
@@ -8,7 +8,7 @@ export const getHeaderName = (path: string): string => {
   } else if (path.includes('transfer')) {
     return 'Transfer Assets';
   } else if (path.includes('assets')) {
-    return 'Assets';
+    return 'Your Assets';
   } else if (path.includes('stake')) {
     return 'Stake';
   } else if (path.includes('dapp-staking')) {