diff --git a/LICENSE b/LICENSE
index 7a4a3ea24..b79d12ac1 100644
--- a/LICENSE
+++ b/LICENSE
@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2021 Soramitsu Co Ltd
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
diff --git a/package.json b/package.json
index 612db9bd6..70b65f6a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "Apache-2.0",
   "private": true,
   "author": "Stefan Popov <popov@soramitsu.co.jp>",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^1.2.0",
-    "@soramitsu/soramitsu-js-ui": "^0.7.13",
-    "@soramitsu/soraneo-wallet-web": "^0.6.5",
+    "@soramitsu/soramitsu-js-ui": "^0.8.2",
+    "@soramitsu/soraneo-wallet-web": "^0.7.3",
     "@walletconnect/web3-provider": "^1.3.3",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
diff --git a/src/App.vue b/src/App.vue
index 83a52af40..47a5c76cf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,7 @@
             <div class="account">
               <div class="account-name">{{ accountInfo }}</div>
               <div class="account-icon">
-                <s-icon v-if="!accountConnected" name="wallet" size="20" />
+                <s-icon v-if="!accountConnected" name="finance-wallet-24" />
                 <div v-else class="account-avatar"/>
               </div>
             </div>
@@ -82,7 +82,7 @@
             </li>
             <sidebar-item-content
               :title="t(`footerMenu.help`)"
-              icon="icon-info"
+              icon="notifications-info-24"
               tag="li"
               class="el-menu-item menu-item--small"
               @click.native="openHelpDialog"
@@ -241,30 +241,6 @@ export default class App extends Mixins(TransactionMixin, LoadingMixin) {
 </script>
 
 <style lang="scss">
-@font-face {
-  font-family: "SoraB";
-  src: url("~@/assets/fonts/Sora-Bold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraEB";
-  src: url("~@/assets/fonts/Sora-ExtraBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraSB";
-  src: url("~@/assets/fonts/Sora-SemiBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Sora";
-  src: url("~@/assets/fonts/Sora-Regular.otf");
-  font-weight: normal;
-  font-style: normal;
-}
 html {
   overflow-y: hidden;
   font-size: var(--s-font-size-small);
diff --git a/src/assets/fonts/Sora-Bold.otf b/src/assets/fonts/Sora-Bold.otf
deleted file mode 100644
index 4c255d541..000000000
Binary files a/src/assets/fonts/Sora-Bold.otf and /dev/null differ
diff --git a/src/assets/fonts/Sora-ExtraBold.otf b/src/assets/fonts/Sora-ExtraBold.otf
deleted file mode 100644
index 7d4a2ef80..000000000
Binary files a/src/assets/fonts/Sora-ExtraBold.otf and /dev/null differ
diff --git a/src/assets/fonts/Sora-Regular.otf b/src/assets/fonts/Sora-Regular.otf
deleted file mode 100644
index 0825bbb40..000000000
Binary files a/src/assets/fonts/Sora-Regular.otf and /dev/null differ
diff --git a/src/assets/fonts/Sora-SemiBold.otf b/src/assets/fonts/Sora-SemiBold.otf
deleted file mode 100644
index 34b384b50..000000000
Binary files a/src/assets/fonts/Sora-SemiBold.otf and /dev/null differ
diff --git a/src/assets/img/icon-circle-plus--hover.svg b/src/assets/img/icon-circle-plus--hover.svg
deleted file mode 100644
index 90d64f9d1..000000000
--- a/src/assets/img/icon-circle-plus--hover.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C6.42487 23 1.5 18.0751 1.5 12C1.5 5.92487 6.42487 1 12.5 1C18.5751 1 23.5 5.92487 23.5 12C23.5 18.0751 18.5751 23 12.5 23ZM12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21ZM17.5 11H13.5V7H11.5V11H7.5V13H11.5V17H13.5V13H17.5V11Z" fill="#D0021B"/>
-</svg>
diff --git a/src/assets/img/icon-circle-plus.svg b/src/assets/img/icon-circle-plus.svg
deleted file mode 100644
index 64ea5e0c6..000000000
--- a/src/assets/img/icon-circle-plus.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C6.42487 23 1.5 18.0751 1.5 12C1.5 5.92487 6.42487 1 12.5 1C18.5751 1 23.5 5.92487 23.5 12C23.5 18.0751 18.5751 23 12.5 23ZM12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21ZM17.5 11H13.5V7H11.5V11H7.5V13H11.5V17H13.5V13H17.5V11Z" fill="#26262D"/>
-</svg>
diff --git a/src/components/BrandedTooltip.vue b/src/components/BrandedTooltip.vue
index 888e6b1ee..7193ac593 100644
--- a/src/components/BrandedTooltip.vue
+++ b/src/components/BrandedTooltip.vue
@@ -23,19 +23,41 @@ export default {}
 $tooltip-padding-top: $inner-spacing-mini * 0.5;
 $tooltip-padding-bottom: $inner-spacing-mini * 0.75;
 
-.el-tooltip__popper.is-light.info-tooltip {
+.el-tooltip__popper.is-light.s-border-radius-small /* .info-tooltip TODO: use it everywhere */ {
   max-width: 236px;
   padding: $tooltip-padding-top $inner-spacing-mini $tooltip-padding-bottom;
   line-height: $s-line-height-base;
   background-color: var(--s-color-brand-day);
   color: var(--s-color-utility-body);
-
   .popper__arrow {
     border-bottom-color: var(--s-color-brand-day);
-
-    &:after {
+    &::after {
       border-bottom-color: inherit;
     }
   }
+  &[x-placement^="top"] .popper__arrow {
+    border-top-color: var(--s-color-brand-day);
+    &::after {
+      border-top-color: inherit;
+    }
+  }
+  &[x-placement^="bottom"] .popper__arrow {
+    border-bottom-color: var(--s-color-brand-day);
+    &::after {
+      border-top-color: inherit;
+    }
+  }
+  &[x-placement^="right"] .popper__arrow {
+    border-right-color: var(--s-color-brand-day);
+    &::after {
+      border-right-color: inherit;
+    }
+  }
+  &[x-placement^="left"] .popper__arrow {
+    border-left-color: var(--s-color-brand-day);
+    &::after {
+      border-left-color: inherit;
+    }
+  }
 }
 </style>
diff --git a/src/components/ConfirmBridgeTransactionDialog.vue b/src/components/ConfirmBridgeTransactionDialog.vue
index 2200ec5b7..ab928f837 100644
--- a/src/components/ConfirmBridgeTransactionDialog.vue
+++ b/src/components/ConfirmBridgeTransactionDialog.vue
@@ -11,7 +11,7 @@
           {{ formatAssetSymbol(asset.symbol) }}
         </div>
       </div>
-      <s-icon class="icon-divider" name="arrow-bottom-rounded" size="medium" />
+      <s-icon class="icon-divider" name="arrows-arrow-bottom-24" />
       <div class="tokens-info-container">
         <span class="token-value">{{ amount }}</span>
         <div v-if="asset" class="token token-ethereum">
diff --git a/src/components/ConfirmRemoveLiquidity.vue b/src/components/ConfirmRemoveLiquidity.vue
index 5e12cd3cc..cf7ce205d 100644
--- a/src/components/ConfirmRemoveLiquidity.vue
+++ b/src/components/ConfirmRemoveLiquidity.vue
@@ -6,7 +6,7 @@
     <div class="tokens">
       <div class="tokens-info-container">
         <span class="token-value">{{ formattedFromValue }}</span>
-        <s-icon class="icon-divider" name="plus-rounded" size="medium" />
+        <s-icon class="icon-divider" name="plus-16" />
         <span class="token-value">{{ formattedToValue }}</span>
       </div>
       <div class="tokens-info-container">
diff --git a/src/components/ConfirmSwap.vue b/src/components/ConfirmSwap.vue
index acaa690cc..eb690e3e0 100644
--- a/src/components/ConfirmSwap.vue
+++ b/src/components/ConfirmSwap.vue
@@ -12,7 +12,7 @@
           {{ tokenFrom.symbol }}
         </div>
       </div>
-      <s-icon class="icon-divider" name="arrow-bottom-rounded" size="medium" />
+      <s-icon class="icon-divider" name="arrows-arrow-bottom-24" />
       <div class="tokens-info-container">
         <span class="token-value">{{ formattedToValue }}</span>
         <div v-if="tokenTo" class="token">
@@ -126,7 +126,7 @@ export default class ConfirmSwap extends Mixins(TransactionMixin, DialogMixin, N
   .transaction-number {
     color: var(--s-color-base-content-primary);
     font-feature-settings: $s-font-feature-settings-common;
-    @include font-weight(600);
+    font-weight: 600;
     word-break: break-all;
   }
 }
diff --git a/src/components/GenericPageHeader.vue b/src/components/GenericPageHeader.vue
index 01a6e2e1f..e5c97181c 100644
--- a/src/components/GenericPageHeader.vue
+++ b/src/components/GenericPageHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="headerClasses">
-    <s-button v-if="hasButtonBack" type="action" size="medium" icon="chevron-left-rounded" @click="handleBack" />
+    <s-button v-if="hasButtonBack" type="action" size="medium" icon="arrows-chevron-left-rounded-24" @click="handleBack" />
     <h3 class="page-header-title">{{ title }}</h3>
     <branded-tooltip
       v-if="!!tooltip"
@@ -9,7 +9,7 @@
       :content="tooltip"
       :placement="tooltipPlacement"
     >
-      <s-icon name="info" size="16" />
+      <s-icon name="info-16" />
     </branded-tooltip>
     <slot />
   </div>
@@ -96,7 +96,7 @@ $title-padding: calc(#{var(--s-size-small)} + #{$inner-spacing-small});
       }
     }
   }
-  &-tooltip .s-icon-info {
+  &-tooltip .s-icon-info-16 {
     margin-top: auto;
     margin-bottom: auto;
     margin-left: $inner-spacing-mini;
diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
index 3602de518..891f51f34 100644
--- a/src/components/HelpDialog.vue
+++ b/src/components/HelpDialog.vue
@@ -11,7 +11,7 @@
           target="_blank"
         >
           <span>{{ link.title }}</span>
-          <s-icon name="external-link" size="16" />
+          <s-icon name="external-link-16" />
         </a>
         <s-divider v-if="index !== links.length - 1" class="help-links-item_divider" />
       </div>
diff --git a/src/components/InfoCard.vue b/src/components/InfoCard.vue
index cf8df80ec..8abc5d2ab 100644
--- a/src/components/InfoCard.vue
+++ b/src/components/InfoCard.vue
@@ -20,7 +20,7 @@ export default class InfoCard extends Mixins(TranslationMixin) {
   &__title {
     line-height: $s-line-height-big;
     color: var(--s-color-base-content-primary);
-    @include font-weight(600);
+    font-weight: 600;
   }
   &__data {
     display: flex;
diff --git a/src/components/InfoLine.vue b/src/components/InfoLine.vue
index 7b682097e..0b59e91a7 100644
--- a/src/components/InfoLine.vue
+++ b/src/components/InfoLine.vue
@@ -2,7 +2,7 @@
   <div class="info-line">
     <span class="info-line-label">{{ label }}</span>
     <s-tooltip v-if="tooltipContent" :class="tooltipClasses" popper-class="info-tooltip info-tooltip--info-line" border-radius="mini" :content="tooltipContent" theme="light" placement="right-start" animation="none" :show-arrow="false">
-      <s-icon name="info" size="16" />
+      <s-icon name="info-16" />
     </s-tooltip>
     <span class="info-line-value">{{ value }}<span v-if="assetSymbol" class="asset-symbol">{{ ' ' + assetSymbol }}</span></span>
     <slot />
diff --git a/src/components/ResultDialog.vue b/src/components/ResultDialog.vue
index 6af53d7a7..2abc5d0cf 100644
--- a/src/components/ResultDialog.vue
+++ b/src/components/ResultDialog.vue
@@ -11,7 +11,7 @@
       <!-- This link was hidden due to PSS-205 task. We'll return it back later.  -->
       <!-- <s-icon name="external-link" @click="handleTransactionInfo" /> -->
       <!-- Add correct icons and add functionality -->
-      <!-- <s-icon name="arrow-bottom-rounded" /> -->
+      <!-- <s-icon name="arrows-arrow-bottom-24" /> -->
     </div>
     <s-divider />
     <template #footer>
@@ -72,13 +72,13 @@ $transactionIconSize: 68px;
     letter-spacing: $s-letter-spacing-type;
     background-color: var(--s-color-base-background);
     border-radius: var(--s-border-radius-mini);
-    @include font-weight(700);
+    font-weight: 700;
     white-space: nowrap;
   }
   &-info {
     margin-right: $inner-spacing-mini;
     font-feature-settings: $s-font-feature-settings-common;
-    @include font-weight(600);
+    font-weight: 600;
   }
   .s-icon-external-link {
     cursor: pointer;
diff --git a/src/components/SelectRegisteredAsset.vue b/src/components/SelectRegisteredAsset.vue
index 3205987e5..09a4166b2 100644
--- a/src/components/SelectRegisteredAsset.vue
+++ b/src/components/SelectRegisteredAsset.vue
@@ -13,9 +13,11 @@
         size="medium"
         border-radius="mini"
         @focus="handleSearchFocus"
-      />
-      <!-- TODO: Change the icon -->
-      <s-button class="s-button--clear" icon="circle-x" @click="handleClearSearch" />
+      >
+        <template #suffix>
+          <s-button class="s-button--clear" icon="clear-X-16" @click="handleClearSearch" />
+        </template>
+      </s-input>
     </s-form-item>
     <!-- TODO: Move each tab to separate component -->
     <s-tabs v-model="tabValue" class="s-tabs--exchange" type="rounded" @click="handleTabClick">
@@ -197,7 +199,7 @@ export default class SelectRegisteredAsset extends Mixins(TranslationMixin, Dial
       return assets.filter(asset =>
         (KnownAssets.get(asset.address) && this.t(`assetNames.${asset.symbol}`).toLowerCase().includes(query)) ||
         `${asset.symbol}`.toLowerCase().includes(query) ||
-        `${asset[this.addressSymbol]}`.toLowerCase().includes(query)
+        `${asset[this.addressSymbol]}`.toLowerCase() === query
       )
     }
 
@@ -301,7 +303,6 @@ $tabs-item-height: $tabs-container-height - $tabs-container-padding * 2;
       padding: $inner-spacing-mini 0 $inner-spacing-big !important;
     }
   }
-  @include search-item-unscoped;
   .s-tabs.s-tabs--exchange {
     &#{$tabs-class} {
       #{$tabs-class}__header {
@@ -328,7 +329,7 @@ $tabs-item-height: $tabs-container-height - $tabs-container-padding * 2;
           width: 50%;
           line-height: $tabs-item-height;
           font-feature-settings: $s-font-feature-settings-title;
-          @include font-weight(700, true);
+          font-weight: 700 !important;
           text-align: center;
           &:hover {
             background-color: var(--s-color-base-background-hover);
@@ -368,7 +369,6 @@ $select-asset-horizontal-spacing: $inner-spacing-big;
   width: calc(100% - 2 * #{$select-asset-horizontal-spacing});
 }
 .asset-search {
-  // TODO: Fix input styles (paddings and icon position)
   margin-bottom: $inner-spacing-medium;
 }
 .asset-item {
@@ -383,7 +383,7 @@ $select-asset-horizontal-spacing: $inner-spacing-big;
   }
   &__name, &__balance {
     font-size: var(--s-font-size-small);
-    @include font-weight(600);
+    font-weight: 600;
   }
   &__balance {
     white-space: nowrap;
@@ -397,7 +397,7 @@ $select-asset-horizontal-spacing: $inner-spacing-big;
   font-size: $s-heading3-caps-font-size;
   line-height: $s-line-height-base;
   letter-spacing: $s-letter-spacing-type;
-  @include font-weight(700, true);
+  font-weight: 700 !important;
   font-feature-settings: $s-font-feature-settings-type;
   text-transform: uppercase;
   .asset-list + & {
diff --git a/src/components/SelectToken.vue b/src/components/SelectToken.vue
index 12c9202b3..7f37fe0ba 100644
--- a/src/components/SelectToken.vue
+++ b/src/components/SelectToken.vue
@@ -12,8 +12,11 @@
         prefix="el-icon-search"
         size="medium"
         border-radius="mini"
-      />
-      <s-button class="s-button--clear" icon="circle-x" @click="handleClearSearch" />
+      >
+        <template #suffix>
+          <s-button class="s-button--clear" icon="clear-X-16" @click="handleClearSearch" />
+        </template>
+      </s-input>
     </div>
     <div v-if="filteredTokens && filteredTokens.length > 0" class="token-list">
       <div v-for="token in filteredTokens" @click="selectToken(token)" :key="token.address" class="token-item">
@@ -118,7 +121,7 @@ export default class SelectToken extends Mixins(TranslationMixin, DialogMixin, L
       return this.assetsList.filter(t =>
         (KnownAssets.get(t.address) && this.t(`assetNames.${t.symbol}`).toLowerCase().includes(query)) ||
         t.symbol?.toLowerCase?.()?.includes?.(query) ||
-        t.address?.toLowerCase?.()?.includes?.(query)
+        t.address?.toLowerCase?.() === query
       )
     }
 
@@ -178,8 +181,6 @@ export default class SelectToken extends Mixins(TranslationMixin, DialogMixin, L
 
 <style lang="scss">
 .token-select {
-  @include search-item-unscoped('token-select__search');
-
   .el-dialog {
     overflow: hidden;
     &__body {
@@ -232,10 +233,10 @@ $token-item-height: 71px;
     white-space: nowrap;
     font-size: var(--s-font-size-small);
     margin-bottom: $inner-spacing-mini;
-    @include font-weight(600);
+    font-weight: 600;
   }
   &__amount {
-    @include font-weight(600);
+    font-weight: 600;
   }
 
   .token-logo {
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 99a944c82..f541479b4 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -10,7 +10,7 @@
               :content="t('dexSettings.slippageToleranceHint')"
               placement="right-start"
             >
-              <s-icon class="header-hint" name="info" size="12" />
+              <s-icon class="header-hint" name="info-16" size="12px" />
             </branded-tooltip>
           </div>
           <s-tabs type="rounded" :value="String(slippageTolerance)" @click="selectSlippageTolerance">
@@ -38,7 +38,7 @@
         <div class="header">
           {{ t('dexSettings.transactionDeadline') }}
           <s-tooltip popper-class="info-tooltip" border-radius="mini" :content="t('dexSettings.transactionDeadlineHint')" theme="light" placement="right-start" animation="none" :show-arrow="false">
-            <s-icon class="header-hint" name="info" />
+            <s-icon class="header-hint" name="info-16" />
           </s-tooltip>
         </div>
         <div class="value">
@@ -153,7 +153,7 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
 .settings .slippage-tolerance .s-tabs .el-tabs__item {
   font-size: var(--s-font-size-mini);
   font-feature-settings: $s-font-feature-settings-common;
-  @include font-weight(600, true);
+  font-weight: 600 !important;
 }
 .slippage-tolerance-custom_input.s-input {
   min-height: var(--s-size-small);
@@ -201,7 +201,7 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
     font-size: $s-font-size-settings;
     line-height: $s-line-height-base;
     letter-spacing: $s-letter-spacing-type;
-    @include font-weight(700);
+    font-weight: 700;
     &-hint {
       margin-left: $inner-spacing-mini / 2;
       cursor: pointer;
@@ -217,7 +217,7 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
       border-radius: var(--s-border-radius-mini);
       font-size: var(--s-font-size-mini);
       text-align: center;
-      @include font-weight(700);
+      font-weight: 700;
       &_label {
         color: var(--s-color-base-content-tertiary);
       }
diff --git a/src/components/SwapInfo.vue b/src/components/SwapInfo.vue
index b6c5afc6d..8dc16b678 100644
--- a/src/components/SwapInfo.vue
+++ b/src/components/SwapInfo.vue
@@ -4,7 +4,7 @@
       <div v-if="showPrice" class="swap-info">
         <span>{{ t('exchange.price') }}</span>
         <span class="swap-info-value">{{ priceValue }}</span>
-        <s-button class="el-button--switch-price" type="action" size="small" icon="swap" @click="handleSwitchPrice" />
+        <s-button class="el-button--switch-price" type="action" size="small" icon="arrows-swap-24" @click="handleSwitchPrice" />
       </div>
       <div v-if="showSlippageTolerance && connected" class="swap-info swap-info--slippage-tolerance">
         <span>{{ t('swap.slippageTolerance') }}</span>
@@ -17,21 +17,21 @@
     <template v-else>
       <div class="swap-info swap-info--min-received">
         <s-tooltip v-if="showTooltips" class="swap-info-icon" popper-class="info-tooltip info-tooltip--swap" border-radius="mini" :content="t('swap.minReceivedTooltip')" theme="light" placement="right-start" animation="none" :show-arrow="false">
-          <s-icon name="info" size="16" />
+          <s-icon name="info-16" />
         </s-tooltip>
         <span>{{ t(`swap.${isExchangeB ? 'maxSold' : 'minReceived'}`) }}</span>
         <span class="swap-info-value">{{ formattedMinMaxReceived }}<span class="asset-title">{{ getAssetSymbolText }}</span></span>
       </div>
       <!-- <div class="swap-info">
         <s-tooltip v-if="showTooltips" class="swap-info-icon" popper-class="info-tooltip info-tooltip--swap" border-radius="mini" :content="t('swap.priceImpactTooltip')" theme="light" placement="right-start" animation="none" :show-arrow="false">
-          <s-icon name="info" size="16" />
+          <s-icon name="info-16" />
         </s-tooltip>
         <span>{{ t('swap.priceImpact') }}</span>
         <span :class="'swap-info-value ' + priceImpactClass">{{ priceImpact }}%</span>
       </div> -->
       <div class="swap-info">
         <s-tooltip v-if="showTooltips" class="swap-info-icon" popper-class="info-tooltip info-tooltip--swap" border-radius="mini" :content="t('swap.liquidityProviderFeeTooltip', { liquidityProviderFee: 0.3})" theme="light" placement="right-start" animation="none" :show-arrow="false">
-          <s-icon name="info" size="16" />
+          <s-icon name="info-16" />
         </s-tooltip>
         <span>{{ t('swap.liquidityProviderFee') }}</span>
         <span class="swap-info-value">{{ formattedLiquidityProviderFee }}<span class="asset-title">{{ xorSymbol }}</span></span>
@@ -39,7 +39,7 @@
       <!-- TODO 4 alexnatalia: Show if logged in and have info about Network Fee -->
       <div v-if="connected" class="swap-info">
         <s-tooltip v-if="showTooltips" class="swap-info-icon" popper-class="info-tooltip info-tooltip--swap" border-radius="mini" :content="t('swap.networkFeeTooltip')" theme="light" placement="right-start" animation="none" :show-arrow="false">
-          <s-icon name="info" size="16" />
+          <s-icon name="info-16" />
         </s-tooltip>
         <span>{{ t('swap.networkFee') }}</span>
         <span class="swap-info-value">{{ formattedNetworkFee }}<span class="asset-title">{{ xorSymbol }}</span></span>
@@ -157,6 +157,7 @@ export default class SwapInfo extends Mixins(TranslationMixin, NumberFormatterMi
   &.s-action.s-small i {
     margin-top: 0;
     margin-left: 0;
+    font-size: 16px !important;
   }
 }
 </style>
diff --git a/src/consts/index.ts b/src/consts/index.ts
index e95d7ed89..1bc0f39be 100644
--- a/src/consts/index.ts
+++ b/src/consts/index.ts
@@ -63,15 +63,15 @@ interface SidebarMenuItemLink extends SidebarMenuItem {
 
 const MainMenu: Array<SidebarMenuItem> = [
   {
-    icon: 'change-positions',
+    icon: 'arrows-swap-90-24',
     title: PageNames.Swap
   },
   {
-    icon: 'drop',
+    icon: 'basic-drop-24',
     title: PageNames.Pool
   },
   {
-    icon: '',
+    icon: 'grid-block-distribute-vertically-24',
     title: PageNames.Bridge
   },
   {
@@ -83,37 +83,37 @@ const MainMenu: Array<SidebarMenuItem> = [
 
 const AccountMenu: Array<SidebarMenuItem> = [
   {
-    icon: 'wallet',
+    icon: 'finance-wallet-24',
     title: PageNames.Wallet
   },
   {
-    icon: 'circle-star',
+    icon: 'basic-circle-star-24',
     title: PageNames.Rewards
   }
 ]
 
 const OtherPagesMenu: Array<SidebarMenuItem> = [
   {
-    icon: '',
+    icon: 'file-file-text-24',
     title: PageNames.About
   }
 ]
 
 export const SocialNetworkLinks: Array<SidebarMenuItemLink> = [
   {
-    icon: '',
+    icon: 'symbols-twitter-24',
     title: 'twitter',
     href: 'https://twitter.com/sora_xor'
   },
   {
-    icon: '',
+    icon: 'symbols-telegram-24',
     title: 'telegram',
     href: 'https://t.me/sora_xor'
   }
 ]
 
 export const FaucetLink: SidebarMenuItemLink = {
-  icon: '',
+  icon: 'software-terminal-24',
   title: 'faucet'
 }
 
@@ -136,10 +136,10 @@ export enum Topics {
 }
 
 export const AboutTopics = [
-  { title: Topics.SwapTokens, icon: 'swap' },
-  { title: Topics.PassiveEarning, icon: 'earn' },
-  { title: Topics.AddLiquidity, icon: 'liquidity' },
-  { title: Topics.PriceFeeds, icon: 'build' }
+  { title: Topics.SwapTokens, icon: 'arrows-swap-24' },
+  { title: Topics.PassiveEarning, icon: 'basic-bar-chart-24' },
+  { title: Topics.AddLiquidity, icon: 'basic-drop-24' },
+  { title: Topics.PriceFeeds, icon: 'software-terminal-24' }
 ]
 
 export enum LogoSize {
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index ed7ce8ecb..ba48bc886 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,2 +1,2 @@
-import './soramitsuUI'
 import './wallet'
+import './soramitsuUI'
diff --git a/src/plugins/soramitsuUI.ts b/src/plugins/soramitsuUI.ts
index 23a9fddd3..b35ffd077 100644
--- a/src/plugins/soramitsuUI.ts
+++ b/src/plugins/soramitsuUI.ts
@@ -1,6 +1,7 @@
 import Vue from 'vue'
-import SoramitsuElements, { Message, MessageBox, Notification } from '@soramitsu/soramitsu-js-ui'
+import SoramitsuElements, { Message, MessageBox, Notification, setTheme } from '@soramitsu/soramitsu-js-ui'
 import '@soramitsu/soramitsu-js-ui/lib/styles'
+
 import store from '@/store'
 
 Vue.use(SoramitsuElements, { store })
@@ -17,7 +18,7 @@ Vue.prototype.$notify = ({ message, type }) => {
   })
   const elements = Array.from(document.getElementsByClassName('el-notification'))
   const current = elements[elements.length - 1]
-  const appContent = document.getElementsByClassName('app-content').item(0) as Element
+  const appContent = document.getElementsByClassName('app-main').item(0) as Element
   appContent.appendChild(current)
   const el = document.createElement('div')
   el.className = 'loader'
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index c0d16da6a..c928fe5f3 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -7,26 +7,6 @@
   }
 }
 
-@mixin font-weight($fontWeight: 400, $important: false) {
-  @if $fontWeight == 400 and $important == false {
-    font-family: "Sora", sans-serif;
-  } @else if $fontWeight == 400 and $important == true {
-    font-family: "Sora", sans-serif !important;
-  } @else if $fontWeight == 500 and $important == false {
-    font-family: "SoraSB", sans-serif;
-  } @else if $fontWeight == 500 and $important == true {
-    font-family: "SoraSB", sans-serif !important;
-  } @else if $fontWeight == 600 and $important == false {
-    font-family: "SoraB", sans-serif;
-  } @else if $fontWeight == 600 and $important == true {
-    font-family: "SoraB", sans-serif !important;
-  } @else if $fontWeight == 700 and $important == false {
-    font-family: "SoraEB", sans-serif;
-  } @else if $fontWeight == 700 and $important == true {
-    font-family: "SoraEB", sans-serif !important;
-  }
-}
-
 @mixin token-styles {
   .token {
     display: flex;
@@ -116,7 +96,7 @@
     }
     .input-title {
       align-items: baseline;
-      font-family: "SoraB", sans-serif !important;
+      font-family: "Sora", sans-serif !important;
       margin-right: $inner-spacing-mini;
     }
     @include token-styles;
@@ -136,7 +116,7 @@
     &--empty-token,
     &--choose-token {
       font-feature-settings: $s-font-feature-settings-title;
-      @include font-weight(700, true);
+      font-weight: 700 !important;
     }
     &--max,
     &--empty-token {
@@ -188,7 +168,7 @@
     margin-top: $marginTop;
     width: 100%;
     &:not(:disabled) {
-      @include font-weight(600, true);
+      font-weight: 600 !important;
     }
   }
 }
@@ -257,15 +237,13 @@
   }
 }
 
-@mixin search-item ($class: 'el-form-item--search', $clearRightPosition: $inner-spacing-big) {
-  $button-clear-font-size: var(--s-icon-font-size-mini);
+@mixin search-item ($class: 'el-form-item--search') {
   .#{$class} {
     margin-bottom: 0;
     position: relative;
     .s-button--clear {
-      right: $clearRightPosition;
-      position: absolute;
-      top: 0;
+      width: 32px;
+      margin-right: -8px;
       padding: 0;
       background-color: transparent;
       border-radius: 0;
@@ -274,20 +252,6 @@
   }
 }
 
-@mixin search-item-unscoped ($class: 'el-form-item--search') {
-  $button-clear-font-size: var(--s-icon-font-size-mini);
-  .#{$class} {
-    .s-button--clear {
-      width: calc(#{$inner-spacing-small * 2} + var(--s-icon-font-size-mini));
-      // TODO: Ask hover/active colors
-      .s-icon-circle-x {
-        margin-right: 0;
-        font-size: $button-clear-font-size;
-      }
-    }
-  }
-}
-
 @mixin ethereum-logo-styles {
   .token-logo {
     filter: grayscale(1);
@@ -368,7 +332,7 @@
 
 // TODO 4 alexnatalia: Check these styles later
 @mixin button-styles {
-  @include font-weight(600, true);
+  font-weight: 600 !important;
   font-size: $s-font-size-button;
   line-height: $s-line-height-small;
   letter-spacing: $s-letter-spacing-small;
diff --git a/src/views/About.vue b/src/views/About.vue
index 34f5db355..c93a103cf 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -104,7 +104,7 @@ $logo-width: 140px;
         font-size: var(--s-heading5-font-size);
         font-feature-settings: $s-font-feature-settings-title;
         letter-spacing: $s-letter-spacing-mini;
-        @include font-weight(600);
+        font-weight: 600;
       }
       .web3-logo {
         margin-left: auto;
@@ -146,7 +146,7 @@ $logo-width: 140px;
         justify-content: space-between;
         line-height: $s-line-height-small;
         font-feature-settings: $s-font-feature-settings-card-title;
-        @include font-weight(600, true);
+        font-weight: 600;
         i {
           color: var(--s-color-theme-accent);
           margin-bottom: $inner-spacing-small;
@@ -186,7 +186,7 @@ $logo-width: 140px;
       }
       .terms .title {
         font-size: var(--s-heading3-font-size);
-        @include font-weight;
+        font-weight: 400;
         max-width: 75%;
         width: 100%;
       }
diff --git a/src/views/AddLiquidity.vue b/src/views/AddLiquidity.vue
index 4a68b9cde..633dca833 100644
--- a/src/views/AddLiquidity.vue
+++ b/src/views/AddLiquidity.vue
@@ -7,7 +7,7 @@
     >
       <div class="input-container">
         <div class="input-line">
-          <div class="input-title">{{ t('createPair.deposit') }}</div>
+          <div class="input-title p4">{{ t('createPair.deposit') }}</div>
           <div v-if="connected && firstToken" class="token-balance">
             <span class="token-balance-title">{{ t('createPair.balance') }}</span>
             <span class="token-balance-value">{{ getTokenBalance(firstToken) }}</span>
@@ -35,10 +35,10 @@
           </div>
         </div>
       </div>
-      <s-icon class="icon-divider" name="plus-rounded" size="medium" />
+      <s-icon class="icon-divider" name="plus-16" />
       <div :class="computedClasses">
         <div class="input-line">
-          <div class="input-title">
+          <div class="input-title p4">
             <span>{{ t('createPair.deposit') }}</span>
           </div>
           <div v-if="connected && secondToken" class="token-balance">
@@ -66,7 +66,7 @@
               type="tertiary"
               size="small"
               border-radius="medium"
-              :icon="!secondAddress ? 'chevron-bottom-rounded' : undefined"
+              :icon="!secondAddress ? 'chevron-down-rounded-16' : undefined"
               icon-position="right"
               @click="!secondAddress ? openSelectSecondTokenDialog() : undefined"
             >
@@ -74,7 +74,7 @@
               {{ secondToken.symbol }}
             </s-button>
           </div>
-          <s-button v-else class="el-button--empty-token" type="tertiary" size="small" border-radius="mini" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectSecondTokenDialog">
+          <s-button v-else class="el-button--empty-token" type="tertiary" size="small" border-radius="mini" icon="chevron-down-rounded-16" icon-position="right" @click="openSelectSecondTokenDialog">
             {{ t('exchange.chooseToken') }}
           </s-button>
         </div>
diff --git a/src/views/Bridge.vue b/src/views/Bridge.vue
index a45f597b0..82439f377 100644
--- a/src/views/Bridge.vue
+++ b/src/views/Bridge.vue
@@ -7,12 +7,11 @@
     >
       <s-card class="bridge-content" border-radius="medium" shadow="never">
         <generic-page-header class="header--bridge" :title="t('bridge.title')" :tooltip="t('bridge.info')" tooltip-placement="bottom">
-          <!-- TODO: Add appropriate icon -->
           <s-button
             v-if="areNetworksConnected"
             class="el-button--history"
             type="action"
-            icon="time"
+            icon="connection-broadcasting-24"
             size="medium"
             @click="handleViewTransactionsHistory"
           />
@@ -47,12 +46,12 @@
               <s-button v-if="isMaxAvailable" class="s-button--max" type="tertiary" size="small" border-radius="mini" @click="handleMaxValue">
                 {{ t('bridge.max') }}
               </s-button>
-              <s-button class="s-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectAssetDialog">
+              <s-button class="s-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-down-rounded-16" icon-position="right" @click="openSelectAssetDialog">
                 <token-logo :token="asset" size="small" />
                 {{ formatAssetSymbol(asset.symbol, !isSoraToEthereum) }}
               </s-button>
             </div>
-            <s-button v-else class="s-button--empty-token" type="tertiary" size="small" border-radius="medium" icon="chevron-bottom-rounded" icon-position="right" :disabled="!areNetworksConnected" @click="openSelectAssetDialog">
+            <s-button v-else class="s-button--empty-token" type="tertiary" size="small" border-radius="medium" icon="chevron-down-rounded-16" icon-position="right" :disabled="!areNetworksConnected" @click="openSelectAssetDialog">
               {{ t('bridge.chooseToken') }}
             </s-button>
           </div>
@@ -68,7 +67,7 @@
             {{ t('bridge.connectWallet') }}
           </s-button>
         </s-card>
-        <s-button class="s-button--switch" type="action" icon="change-positions" @click="handleSwitchItems" />
+        <s-button class="s-button--switch" type="action" icon="arrows-swap-90-24" @click="handleSwitchItems" />
         <s-card :class="!isSoraToEthereum ? 'bridge-item' : 'bridge-item bridge-item--ethereum'" border-radius="mini" shadow="never">
           <div class="bridge-item-header">
             <div class="bridge-item-title">
@@ -838,7 +837,7 @@ $bridge-input-color: var(--s-color-base-content-tertiary);
       height: var(--s-size-mini);
     }
     &--empty-token {
-      @include font-weight(600, true);
+      font-weight: 600;
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
       &:not(.is-disabled) {
@@ -853,7 +852,7 @@ $bridge-input-color: var(--s-color-base-content-tertiary);
     }
     &--max,
     &--choose-token {
-      @include font-weight(700, true);
+      font-weight: 700;
     }
     &--choose-token {
       margin-left: 0;
diff --git a/src/views/BridgeTransaction.vue b/src/views/BridgeTransaction.vue
index f24417e75..2712794ef 100644
--- a/src/views/BridgeTransaction.vue
+++ b/src/views/BridgeTransaction.vue
@@ -4,7 +4,7 @@
       v-if="isInitRequestCompleted"
       class="s-button--view-transactions-history"
       type="link"
-      icon="arrow-left"
+      icon="arrows-arrow-left-24"
       icon-position="left"
       @click="handleViewTransactionsHistory"
     >
@@ -28,14 +28,14 @@
             </template>
             <div v-if="transactionFromHash" :class="hashContainerClasses(!isSoraToEthereum)">
               <s-input :placeholder="t('bridgeTransaction.transactionHash')" :value="formatAddress(transactionFromHash)" readonly />
-              <s-button class="s-button--hash-copy" size="medium" type="link" icon="copy" @click="handleCopyTransactionHash(transactionFromHash)" />
+              <s-button class="s-button--hash-copy" size="medium" type="link" icon="copy-16" @click="handleCopyTransactionHash(transactionFromHash)" />
               <!-- TODO: Add work with Polkascan -->
               <s-dropdown
                 v-if="!isSoraToEthereum"
                 class="s-dropdown--hash-menu"
                 borderRadius="mini"
                 type="ellipsis"
-                icon="more-vertical"
+                icon="basic-more-vertical-24"
                 placement="bottom-end"
                 @select="handleOpenEtherscan"
               >
@@ -82,13 +82,13 @@
             </template>
             <div v-if="isTransactionStep2 && transactionToHash" :class="hashContainerClasses(isSoraToEthereum)">
               <s-input :placeholder="t('bridgeTransaction.transactionHash')" :value="formatAddress(transactionToHash)" readonly />
-              <s-button class="s-button--hash-copy" size="medium" type="link" icon="copy" @click="handleCopyTransactionHash(transactionToHash)" />
+              <s-button class="s-button--hash-copy" size="medium" type="link" icon="copy-16" @click="handleCopyTransactionHash(transactionToHash)" />
               <s-dropdown
                 v-if="isSoraToEthereum"
                 class="s-dropdown--hash-menu"
                 borderRadius="mini"
                 type="ellipsis"
-                icon="more-vertical"
+                icon="basic-more-vertical-24"
                 placement="bottom-end"
                 @select="handleOpenEtherscan"
               >
@@ -132,6 +132,7 @@
       v-if="isInitRequestCompleted && isTransferCompleted"
       class="s-button--create-transaction"
       type="link"
+      icon="basic-circle-plus-24"
       @click="handleCreateTransaction"
     >
       {{ t('bridgeTransaction.newTransaction') }}
@@ -558,31 +559,6 @@ $collapse-header-height: calc(#{$basic-spacing * 4} + #{$collapse-header-title-h
 .transaction {
   &-container {
     @include bridge-container;
-    .s-button--create-transaction {
-      span {
-        position: relative;
-        padding-left: $inner-spacing-mini * 4;
-        &:before {
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          margin-top: auto;
-          margin-bottom: auto;
-          display: block;
-          height: var(--s-size-mini);
-          width: var(--s-size-mini);
-          content: '';
-          background: url("~@/assets/img/icon-circle-plus.svg") center 100% no-repeat;
-        }
-      }
-      &:hover,
-      &:active {
-        span:before {
-          background-image: url("~@/assets/img/icon-circle-plus--hover.svg");
-        }
-      }
-    }
   }
   &-content {
     .el-card__body {
@@ -690,7 +666,7 @@ $collapse-header-height: calc(#{$basic-spacing * 4} + #{$collapse-header-title-h
       }
       &--view-transactions-history,
       &--create-transaction {
-        @include font-weight(700, true);
+        font-weight: 700;
       }
       &--view-transactions-history {
         line-height: $s-line-height-medium;
@@ -702,7 +678,7 @@ $collapse-header-height: calc(#{$basic-spacing * 4} + #{$collapse-header-title-h
     @include bridge-content;
     .el-button {
       margin-top: $basic-spacing;
-      @include font-weight(600, true);
+      font-weight: 600;
     }
   }
   &-hash-container {
@@ -741,7 +717,7 @@ $collapse-header-height: calc(#{$basic-spacing * 4} + #{$collapse-header-title-h
   &-details {
     margin-bottom: $inner-spacing-mini;
     font-feature-settings: $s-font-feature-settings-title;
-    @include font-weight(700, true);
+    font-weight: 700;
     line-height: $s-line-height-medium;
   }
 }
@@ -756,7 +732,7 @@ $collapse-header-height: calc(#{$basic-spacing * 4} + #{$collapse-header-title-h
       padding-right: $inner-spacing-mini;
       padding-left: $inner-spacing-mini;
       font-feature-settings: $s-font-feature-settings-type;
-      @include font-weight(700, true);
+      font-weight: 700;
       letter-spacing: $s-letter-spacing-type;
       text-transform: uppercase;
     }
diff --git a/src/views/BridgeTransactionsHistory.vue b/src/views/BridgeTransactionsHistory.vue
index 4dee02613..ef7f9456e 100644
--- a/src/views/BridgeTransactionsHistory.vue
+++ b/src/views/BridgeTransactionsHistory.vue
@@ -10,7 +10,7 @@
           <s-button
             class="base-title_settings"
             type="action"
-            icon="trash"
+            icon="basic-trash-24"
             size="medium"
             :disabled="!hasHistory"
             @click="handleClearHistory"
@@ -28,9 +28,11 @@
             prefix="el-icon-search"
             size="medium"
             border-radius="mini"
-          />
-          <!-- TODO: Change the icon -->
-          <s-button class="s-button--clear" icon="circle-x" @click="handleResetSearch" />
+          >
+            <template #suffix>
+              <s-button class="s-button--clear" icon="clear-X-16" @click="handleResetSearch" />
+            </template>
+          </s-input>
         </s-form-item>
         <div class="history-items">
           <template v-if="hasHistory">
@@ -246,7 +248,6 @@ $history-search-class: 'history--search';
   }
 }
 
-@include search-item-unscoped($history-search-class);
 .#{$history-search-class} {
   .el-input__inner {
     padding-right: var(--s-size-medium);
@@ -284,7 +285,7 @@ $history-item-top-border-height: 1px;
     @include empty-search;
   }
 }
-@include search-item('history--search', 0);
+@include search-item('history--search');
 .history-item {
   display: flex;
   margin-right: -#{$history-item-horizontal-space};
diff --git a/src/views/CreatePair.vue b/src/views/CreatePair.vue
index 61f540e53..5f9e1f75f 100644
--- a/src/views/CreatePair.vue
+++ b/src/views/CreatePair.vue
@@ -7,7 +7,7 @@
     >
       <div class="input-container">
         <div class="input-line">
-          <div class="input-title">{{ t('createPair.deposit') }}</div>
+          <div class="input-title p4">{{ t('createPair.deposit') }}</div>
           <div v-if="connected && firstToken" class="token-balance">
             <span class="token-balance-title">{{ t('createPair.balance') }}</span>
             <span class="token-balance-value">{{ getTokenBalance(firstToken) }}</span>
@@ -35,10 +35,10 @@
           </div>
         </div>
       </div>
-      <s-icon class="icon-divider" name="plus-rounded" size="medium" />
+      <s-icon class="icon-divider" name="plus-16" />
       <div class="input-container">
         <div class="input-line">
-          <div class="input-title">
+          <div class="input-title p4">
             <span>{{ t('createPair.deposit') }}</span>
           </div>
           <div v-if="connected && secondToken" class="token-balance">
@@ -61,12 +61,12 @@
             <s-button v-if="isAvailable && isSecondMaxButtonAvailable" class="el-button--max" type="tertiary" size="small" border-radius="mini" @click="handleMaxValue(secondToken, setSecondTokenValue)">
               {{ t('exchange.max') }}
             </s-button>
-            <s-button class="el-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectSecondTokenDialog">
+            <s-button class="el-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-down-rounded-16" icon-position="right" @click="openSelectSecondTokenDialog">
               <token-logo :token="secondToken" size="small" />
               {{ secondToken.symbol }}
             </s-button>
           </div>
-          <s-button v-else class="el-button--empty-token" type="tertiary" size="small" border-radius="mini" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectSecondTokenDialog">
+          <s-button v-else class="el-button--empty-token" type="tertiary" size="small" border-radius="mini" icon="chevron-down-rounded-16" icon-position="right" @click="openSelectSecondTokenDialog">
             {{ t('exchange.chooseToken') }}
           </s-button>
         </div>
diff --git a/src/views/Pool.vue b/src/views/Pool.vue
index c79413625..f29defab8 100644
--- a/src/views/Pool.vue
+++ b/src/views/Pool.vue
@@ -4,7 +4,7 @@
       <s-button
         class="el-button--settings"
         type="action"
-        icon="settings"
+        icon="basic-settings-24"
         size="medium"
         @click="openSettingsDialog"
       />
@@ -323,7 +323,7 @@ $pair-icon-height: 36px;
         padding-right: $inner-spacing-small;
         font-feature-settings: $s-font-feature-settings-title;
         width: auto;
-        @include font-weight(700);
+        font-weight: 700;
         + .el-button {
           margin-left: $inner-spacing-mini;
         }
diff --git a/src/views/RemoveLiquidity.vue b/src/views/RemoveLiquidity.vue
index 04da95a84..cea1f289e 100644
--- a/src/views/RemoveLiquidity.vue
+++ b/src/views/RemoveLiquidity.vue
@@ -24,7 +24,7 @@
       </info-card>
       <div class="input-container">
         <div class="input-line">
-          <div class="input-title">{{ t('removeLiquidity.input') }}</div>
+          <div class="input-title p4">{{ t('removeLiquidity.input') }}</div>
           <div v-if="isWalletConnected && liquidity" class="token-balance">
             <span class="token-balance-title">{{ t('createPair.balance') }}</span>
             <span class="token-balance-value">{{ getTokenBalance(liquidity) }}</span>
@@ -56,11 +56,11 @@
         </div>
       </div>
 
-      <s-icon class="icon-divider" name="arrow-bottom" size="medium" />
+      <s-icon class="icon-divider" name="arrows-arrow-bottom-24" />
 
       <div class="input-container">
         <div class="input-line">
-          <div class="input-title">{{ t('removeLiquidity.output') }}</div>
+          <div class="input-title p4">{{ t('removeLiquidity.output') }}</div>
           <div v-if="isWalletConnected && liquidity" class="token-balance">-</div>
         </div>
         <div class="input-line">
@@ -84,11 +84,11 @@
         </div>
       </div>
 
-      <s-icon class="icon-divider" name="plus-rounded" size="medium" />
+      <s-icon class="icon-divider" name="plus-16" />
 
       <div class="input-container">
         <div class="input-line">
-          <div class="input-title">{{ t('removeLiquidity.output') }}</div>
+          <div class="input-title p4">{{ t('removeLiquidity.output') }}</div>
           <div v-if="isWalletConnected && liquidity" class="token-balance">-</div>
         </div>
         <div class="input-line">
diff --git a/src/views/Swap.vue b/src/views/Swap.vue
index 68c28bea0..cca1b45c6 100644
--- a/src/views/Swap.vue
+++ b/src/views/Swap.vue
@@ -4,14 +4,14 @@
       <s-button
         class="el-button--settings"
         type="action"
-        icon="settings"
+        icon="basic-settings-24"
         size="medium"
         @click="openSettingsDialog"
       />
     </generic-page-header>
     <div class="input-container">
       <div class="input-line">
-        <div class="input-title">
+        <div class="input-title p4">
           <span>{{ t('exchange.from') }}</span>
           <span :class="`input-title-estimated ${(areTokensSelected && !isZeroToAmount && isExchangeB) ? 'input-title-estimated--show' : ''}`">
             ({{ t('swap.estimated') }})
@@ -36,20 +36,20 @@
           <s-button v-if="isMaxSwapAvailable" class="el-button--max" type="tertiary" size="small" border-radius="mini" @click="handleMaxValue">
             {{ t('exchange.max') }}
           </s-button>
-          <s-button class="el-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectTokenDialog(true)">
+          <s-button class="el-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-down-rounded-16" icon-position="right" @click="openSelectTokenDialog(true)">
             <token-logo :token="tokenFrom" size="small" />
             {{ tokenFrom.symbol }}
           </s-button>
         </div>
-        <s-button v-else class="el-button--empty-token" type="tertiary" size="small" border-radius="mini" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectTokenDialog(true)">
+        <s-button v-else class="el-button--empty-token" type="tertiary" size="small" border-radius="mini" icon="chevron-down-rounded-16" icon-position="right" @click="openSelectTokenDialog(true)">
           {{ t('exchange.chooseToken') }}
         </s-button>
       </div>
     </div>
-    <s-button class="el-button--switch-tokens" type="action" icon="change-positions" :disabled="!areTokensSelected || isRecountingProcess" @click="handleSwitchTokens" />
+    <s-button class="el-button--switch-tokens" type="action" icon="arrows-swap-90-24" :disabled="!areTokensSelected || isRecountingProcess" @click="handleSwitchTokens" />
     <div class="input-container">
       <div class="input-line">
-        <div class="input-title">
+        <div class="input-title p4">
           <span>{{ t('exchange.to') }}</span>
           <span :class="`input-title-estimated ${(areTokensSelected && !isZeroFromAmount && !isExchangeB) ? 'input-title-estimated--show' : ''}`">
             ({{ t('swap.estimated') }})
@@ -71,12 +71,12 @@
           />
         </s-form-item>
         <div v-if="tokenTo" class="token">
-          <s-button class="el-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectTokenDialog(false)">
+          <s-button class="el-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-down-rounded-16" icon-position="right" @click="openSelectTokenDialog(false)">
             <token-logo :token="tokenTo" size="small" />
             {{ tokenTo.symbol }}
           </s-button>
         </div>
-        <s-button v-else class="el-button--empty-token" type="tertiary" size="small" border-radius="mini" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectTokenDialog(false)">
+        <s-button v-else class="el-button--empty-token" type="tertiary" size="small" border-radius="mini" icon="chevron-down-rounded-16" icon-position="right" @click="openSelectTokenDialog(false)">
           {{ t('exchange.chooseToken') }}
         </s-button>
       </div>
@@ -475,7 +475,7 @@ export default class Swap extends Mixins(TranslationMixin, LoadingMixin, NumberF
   .input-title-estimated {
     margin-left: $inner-spacing-mini / 2;
     font-size: var(--s-font-size-mini);
-    @include font-weight;
+    font-weight: 400;
     opacity: 0;
     &--show {
       opacity: 1;
diff --git a/yarn.lock b/yarn.lock
index 220998f99..fec14d6f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2521,7 +2521,7 @@
     "@polkadot/types" "^4.1.1"
     "@sora-substrate/type-definitions" "^0.6.9"
 
-"@sora-substrate/util@^0.6.8":
+"@sora-substrate/util@^0.6.9":
   version "0.6.9"
   resolved "https://registry.yarnpkg.com/@sora-substrate/util/-/util-0.6.9.tgz#3c77db0815544483a880785ad9dca9711a4d61a0"
   integrity sha512-AP76+nYn0sL4mTdcBgqvPui8/ZmGNl8pqGwDDWBPw4wRLUyk9ILV7KXETF+nb43HwkKlvVoaPuIc21ZoqXrzpw==
@@ -2532,25 +2532,10 @@
     crypto-js "^4.0.0"
     lodash "^4.17.15"
 
-"@soramitsu/soramitsu-js-ui@^0.7.1":
-  version "0.7.14"
-  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soramitsu-js-ui/-/soramitsu-js-ui-0.7.14.tgz#2cfbaccbc08f865538eec385112fe88a59ab91da"
-  integrity sha512-IzfuckZMPSg3+K58nDVvcYA3ej/LPSKpm98DPUchXCq0BUw6uFL/mfsVpQE50EgX4IhVgQlOZ7/IszBIeUbgQg==
-  dependencies:
-    core-js "^3.6.4"
-    element-ui "^2.13.2"
-    lodash "^4.17.15"
-    v-jsoneditor "^1.4.1"
-    vue "^2.6.11"
-    vue-class-component "^7.2.3"
-    vue-property-decorator "^8.4.1"
-    vuex "^3.1.3"
-    vuex-class "^0.3.2"
-
-"@soramitsu/soramitsu-js-ui@^0.7.13":
-  version "0.7.13"
-  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soramitsu-js-ui/-/soramitsu-js-ui-0.7.13.tgz#63fcaeaf48f8441d026812bc16bd400e1a50b3eb"
-  integrity sha512-E6dRUkKSQDudojUpm/T4YlUGJXisTUZH9gLsTNJ93NDRRMAKRdohlKB7KE3LOsM/qT2quoKR1jCsLax5PdpNGA==
+"@soramitsu/soramitsu-js-ui@^0.8.2":
+  version "0.8.2"
+  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soramitsu-js-ui/-/soramitsu-js-ui-0.8.2.tgz#a52406f6586ed979ee0a749a12ab6a80678f91f3"
+  integrity sha512-6hn4qQmLie6Iaz4hacLA9qiJE7wA/QX9Ynch49Nn/6Hl4RT1gh0iAsup1RsnKqC7CC5bomNx19madyyP9b8qfg==
   dependencies:
     core-js "^3.6.4"
     element-ui "^2.13.2"
@@ -2562,14 +2547,14 @@
     vuex "^3.1.3"
     vuex-class "^0.3.2"
 
-"@soramitsu/soraneo-wallet-web@^0.6.5":
-  version "0.6.5"
-  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soraneo-wallet-web/-/soraneo-wallet-web-0.6.5.tgz#47c7499db4e3c935ea210bf1ea3b96e902c0cdfd"
-  integrity sha512-8o5ja3G/Jm+JNJE+/GyMQxRn0CIuVvEupKM0I06k8GiVo+dW975fhdzeE8+4xZM7f2biyAjEXs4e5gDeiYzXeQ==
+"@soramitsu/soraneo-wallet-web@^0.7.3":
+  version "0.7.3"
+  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soraneo-wallet-web/-/soraneo-wallet-web-0.7.3.tgz#6c38467230f5e0c75811d389ca55c2f7a4ae6e3e"
+  integrity sha512-EPZ97O3/udOXfyzmC87b6OOi0KtDswqWB8rNXJDcqkUp54TV1DHnsICP/198cwAD3RxOK5yhEJuTXqU9v7Br3g==
   dependencies:
     "@polkadot/extension-dapp" "^0.35.0-beta.35"
-    "@sora-substrate/util" "^0.6.8"
-    "@soramitsu/soramitsu-js-ui" "^0.7.1"
+    "@sora-substrate/util" "^0.6.9"
+    "@soramitsu/soramitsu-js-ui" "^0.8.2"
     axios "^0.19.2"
     core-js "^3.6.4"
     lodash "^4.17.15"