diff --git a/package.json b/package.json
index b7bb210de..42158ed56 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@soramitsu/soramitsu-js-ui": "^0.6.7",
-    "@soramitsu/soraneo-wallet-web": "^0.2.7",
+    "@soramitsu/soraneo-wallet-web": "^0.2.9",
     "axios": "^0.19.2",
     "bignumber.js": "^9.0.1",
     "core-js": "^3.6.4",
diff --git a/src/App.vue b/src/App.vue
index cb1da3a5b..790dbe8ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,7 @@
           {{ t(`mainMenu.${item}`) }}
         </s-menu-item>
       </s-menu>
-      <s-button class="polkaswap-logo" type="link" @click="goTo(PageNames.About)" />
+      <s-button class="polkaswap-logo" type="link" @click="goTo(PageNames.Exchange)" />
       <div class="buttons">
         <s-button class="wallet" type="action" icon="wallet" rounded :disabled="loading" @click="goTo(PageNames.Wallet)" />
         <s-button type="action" icon="settings" rounded @click="openSettingsDialog" />
@@ -28,7 +28,10 @@
         <!-- <s-button type="action" icon="search" rounded /> -->
       </div>
     </header>
-    <div class="app-content"><router-view /></div>
+    <div class="app-content">
+      <!-- TODO 4 alexnatalia: We should have this loader only for appropriate pages. Play with it a bit more -->
+      <router-view v-loading="loading" />
+    </div>
     <settings :visible.sync="showSettings" />
   </div>
 </template>
@@ -235,7 +238,6 @@ $menu-height: 65px;
     font-size: var(--s-heading4-font-size);
     letter-spacing: $s-letter-spacing-small;
     font-feature-settings: $s-font-feature-settings-title;
-    &,
     &.is-active:hover {
       color: var(--s-color-theme-accent-hover) !important;
     }
diff --git a/src/components/ConfirmRemoveLiquidity.vue b/src/components/ConfirmRemoveLiquidity.vue
index cbe52a6fd..791a1711a 100644
--- a/src/components/ConfirmRemoveLiquidity.vue
+++ b/src/components/ConfirmRemoveLiquidity.vue
@@ -73,15 +73,15 @@ export default class ConfirmSwap extends Mixins(TranslationMixin, DialogMixin) {
   formatNumber = formatNumber
 
   get formattedFromValue (): string {
-    return formatNumber(this.firstTokenAmount, 4)
+    return formatNumber(this.firstTokenAmount)
   }
 
   get formattedToValue (): string {
-    return formatNumber(this.secondTokenAmount, 4)
+    return formatNumber(this.secondTokenAmount)
   }
 
   get formattedLiquidityValue (): string {
-    return formatNumber(this.liquidityAmount, 4)
+    return formatNumber(this.liquidityAmount)
   }
 
   handleConfirmRemoveLiquidity (): void {
diff --git a/src/components/ConfirmSwap.vue b/src/components/ConfirmSwap.vue
index 9daabffaa..f092b758e 100644
--- a/src/components/ConfirmSwap.vue
+++ b/src/components/ConfirmSwap.vue
@@ -41,6 +41,7 @@ import DialogBase from '@/components/DialogBase.vue'
 import { formatNumber } from '@/utils'
 import { lazyComponent } from '@/router'
 import { Components } from '@/consts'
+import { dexApi } from '@soramitsu/soraneo-wallet-web'
 
 @Component({
   components: {
@@ -56,11 +57,11 @@ export default class ConfirmSwap extends Mixins(TranslationMixin, DialogMixin) {
   @Getter toValue!: number
 
   get formattedFromValue (): string {
-    return formatNumber(this.fromValue, 4)
+    return formatNumber(this.fromValue)
   }
 
   get formattedToValue (): string {
-    return formatNumber(this.toValue, 4)
+    return formatNumber(this.toValue)
   }
 
   handleConfirmSwap (): void {
diff --git a/src/components/Pool.vue b/src/components/Pool.vue
index 766c5d95a..a27a348e2 100644
--- a/src/components/Pool.vue
+++ b/src/components/Pool.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="el-form--pool">
     <!-- TODO: Add appropriate tooltip -->
-    <generic-header class="header--pool" :has-button-back="false" :title="t('pool.yourLiquidity')" :tooltip="t('pool.loremIpsum')" />
+    <generic-header class="header--pool" :has-button-back="false" :title="t('pool.yourLiquidity')" :tooltip="t('pool.description')" />
     <p v-if="!connected" class="pool-info-container">
       {{ t('pool.connectToWallet') }}
     </p>
     <p v-else-if="!liquidities || !liquidities.length" class="pool-info-container">
       {{ t('pool.liquidityNotFound') }}
     </p>
+    <!-- TODO 4 alexnatalia: Whole pool area should be clickable -->
     <s-collapse v-else class="pool-list" :borders="true">
       <s-collapse-item v-for="liquidity of liquidities" :key="liquidity.id" :name="liquidity.id" class="pool-info-container">
         <template #title>
@@ -83,7 +84,7 @@ export default class Pool extends Mixins(TranslationMixin) {
 
   get pairValue (): string {
     // TODO: Play with Pair value
-    return formatNumber(10.00000171, 4)
+    return formatNumber(10.00000171)
   }
 
   handleAddLiquidity (): void {
diff --git a/src/components/SelectToken.vue b/src/components/SelectToken.vue
index 6b5fd3d5b..9837b9bb0 100644
--- a/src/components/SelectToken.vue
+++ b/src/components/SelectToken.vue
@@ -17,13 +17,8 @@
         <s-col>
           <s-row flex justify="start" align="middle">
             <token-logo :token="token" />
-            <div>
-              <div v-if="checkAsset(token.symbol)" class="token-item__name">
-                {{ t(`assetNames.${token.symbol}`) }} ({{ token.symbol }})
-              </div>
-              <div v-else class="token-item__name">
-                {{ token.symbol }}
-              </div>
+            <div class="token-item__name">
+              {{ getTokenName(token.symbol) }}
             </div>
           </s-row>
         </s-col>
@@ -40,17 +35,16 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
-import { KnownAssets, KnownSymbols } from '@sora-substrate/util'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import DialogMixin from '@/components/mixins/DialogMixin'
+import LoadingMixin from '@/components/mixins/LoadingMixin'
 import DialogBase from '@/components/DialogBase.vue'
 import { Token } from '@/types'
 import { LogoSize, Components } from '@/consts'
 import { lazyComponent } from '@/router'
-import LoadingMixin from './mixins/LoadingMixin'
 
 const namespace = 'assets'
 
@@ -64,21 +58,26 @@ export default class SelectToken extends Mixins(TranslationMixin, DialogMixin, L
   query = ''
   selectedToken: Token | null = null
 
+  @Prop({ default: () => null, type: Object }) readonly asset!: Token
+
   @Getter('assets', { namespace }) assets!: Array<Token>
   @Action('getAssets', { namespace }) getAssets
 
+  get assetsList (): Array<Token> {
+    return this.asset ? this.assets.filter(asset => asset.symbol !== this.asset.symbol) : this.assets
+  }
+
   get filteredTokens (): Array<Token> {
     if (this.query) {
       const query = this.query.toLowerCase().trim()
-      return this.assets.filter(t =>
-        // add recieve token name from i18t
-        // t.name.toLowerCase().includes(query) ||
+      return this.assetsList.filter(t =>
+        this.t(`assetNames.${t.symbol}`).toLowerCase().includes(query) ||
         t.symbol.toLowerCase().includes(query) ||
         t.address.toLowerCase().includes(query)
       )
     }
 
-    return this.assets
+    return this.assetsList
   }
 
   created (): void {
@@ -93,8 +92,11 @@ export default class SelectToken extends Mixins(TranslationMixin, DialogMixin, L
     this.isVisible = false
   }
 
-  checkAsset (symbol: string): boolean {
-    return !!KnownSymbols[symbol]
+  getTokenName (tokenSymbol: string): string {
+    if (this.te(`assetNames.${tokenSymbol}`)) {
+      return `${this.t(`assetNames.${tokenSymbol}`)} (${tokenSymbol})`
+    }
+    return tokenSymbol
   }
 }
 </script>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 2e2972b90..69b3b38f1 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -6,7 +6,7 @@
   >
     <div class="settings-content">
       <s-divider />
-      <div class="slippage-tolerance s-flex">
+      <div :class="slippageToleranceClasses">
         <div class="slippage-tolerance-default">
           <div class="header">
             {{ t('settings.slippageTolerance') }}
@@ -33,9 +33,11 @@
             size="small"
           />
         </div>
+        <div v-if="slippageToleranceValidation" class="slippage-tolerance_validation">{{ t(`settings.slippageToleranceValidation.${slippageToleranceValidation}`) }}</div>
       </div>
       <s-divider />
-      <div class="transaction-deadline">
+      <!-- TODO: We'll play with this field at the next iteration of development -->
+      <!-- <div class="transaction-deadline">
         <div class="header">
           {{ t('settings.transactionDeadline') }}
           <s-tooltip popper-class="info-tooltip" border-radius="mini" :content="t('settings.transactionDeadlineHint')" theme="light" placement="right-start" animation="none" :show-arrow="false">
@@ -47,14 +49,9 @@
           <s-slider class="value-slider" :value="transactionDeadline" :showTooltip="false" @change="handleSetTransactionDeadline" />
         </div>
       </div>
-      <s-divider />
+      <s-divider /> -->
       <div class="node-address">
-        <div class="header">
-          {{ t('settings.nodeAddress') }}
-          <s-tooltip popper-class="info-tooltip" border-radius="mini" :content="t('settings.nodeAddressHint')" theme="light" placement="right-start" animation="none" :show-arrow="false">
-            <s-icon class="header-hint" name="info" />
-          </s-tooltip>
-        </div>
+        <div class="header">{{ t('settings.nodeAddress') }}</div>
         <div class="value">
           <div class="value-container">
             <span class="value-container_label">{{ t('settings.ip') }}: </span>{{ nodeAddress.ip }}
@@ -88,6 +85,11 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
     1
   ]
 
+  readonly slippageToleranceExtremeValues = {
+    min: 0.01,
+    max: 10
+  }
+
   @Getter slippageTolerance!: number
   @Getter transactionDeadline!: number
   @Getter nodeAddress!: { ip: string; port: number }
@@ -103,6 +105,30 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
     this.setSlippageTolerance({ value })
   }
 
+  get slippageToleranceClasses (): string {
+    const defaultClass = 'slippage-tolerance'
+    const classes = [defaultClass, 's-flex']
+
+    if (this.slippageToleranceValidation) {
+      classes.push(`${defaultClass}--${this.slippageToleranceValidation === 'frontrun' ? 'warning' : this.slippageToleranceValidation}`)
+    }
+
+    return classes.join(' ')
+  }
+
+  get slippageToleranceValidation (): string {
+    if (+this.model >= this.slippageToleranceExtremeValues.min && +this.model < 0.1) {
+      return 'warning'
+    }
+    if (+this.model >= 5 && +this.model <= this.slippageToleranceExtremeValues.max) {
+      return 'frontrun'
+    }
+    if (+this.model < this.slippageToleranceExtremeValues.min || +this.model > this.slippageToleranceExtremeValues.max) {
+      return 'error'
+    }
+    return ''
+  }
+
   selectSlippageTolerance ({ name }): void {
     this.setSlippageTolerance({ value: name })
   }
@@ -127,6 +153,19 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
   .el-dialog .el-dialog__body {
     padding-bottom: $inner-spacing-big;
   }
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .slippage-tolerance--error .el-input__inner {
+    &,
+    &:focus {
+      border-color: var(--s-color-status-error);
+    }
+  }
+  // TODO: remove after UI Lib fix
+  .s-placeholder {
+    display: none;
+  }
 }
 </style>
 
@@ -170,12 +209,34 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
   }
 }
 .slippage-tolerance {
+  flex-wrap: wrap;
   &-default {
     flex: 2;
   }
   &-custom {
     flex: 1;
   }
+  &_validation {
+    margin-top: $inner-spacing-mini;
+    width: 100%;
+    font-size: var(--s-font-size-mini);
+    line-height: $s-line-height-big;
+  }
+  &--warning {
+    color: var(--s-color-status-warning)
+  }
+  &--error {
+    color: var(--s-color-status-error)
+  }
+  + .s-divider-secondary {
+    margin-top: $inner-spacing-big;
+  }
+  &--warning,
+  &--error {
+    + .s-divider-secondary {
+      margin-top: $inner-spacing-medium;
+    }
+  }
 }
 @include vertical-divider('el-divider');
 </style>
diff --git a/src/components/Swap.vue b/src/components/Swap.vue
index bebe128b8..14af68beb 100644
--- a/src/components/Swap.vue
+++ b/src/components/Swap.vue
@@ -7,7 +7,7 @@
     <div class="input-container">
       <div class="input-line">
         <div class="input-title">{{ t('exchange.from') }}</div>
-        <div v-if="connected && tokenFrom" class="token-balance">
+        <div v-if="connected && tokenFrom && tokenFrom.balance" class="token-balance">
           <span class="token-balance-title">{{ t('exchange.balance') }}</span>
           <span class="token-balance-value">{{ getTokenBalance(tokenFrom) }}</span>
         </div>
@@ -18,13 +18,14 @@
             v-model="formModel.from"
             v-float="formModel.from"
             class="s-input--token-value"
-            :placeholder="inputPlaceholder"
+            :placeholder="isFieldFromFocused ? '' : inputPlaceholder"
             @change="handleChangeFieldFrom"
+            @focus="handleFocusFieldFrom"
             @blur="handleBlurFieldFrom"
           />
         </s-form-item>
         <div v-if="tokenFrom" class="token">
-          <s-button v-if="connected && areTokensSelected" class="el-button--max" type="tertiary" size="small" border-radius="mini" @click="handleMaxFromValue">
+          <s-button v-if="connected && areTokensSelected" class="el-button--max" type="tertiary" size="small" border-radius="mini" :disabled="this.formModel.from === this.tokenFrom.balance" @click="handleMaxValue(true)">
             {{ 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)">
@@ -37,14 +38,14 @@
         </s-button>
       </div>
     </div>
-    <s-button class="el-button--switch-tokens" type="action" icon="change-positions" @click="handleSwitchTokens" />
+    <s-button class="el-button--switch-tokens" type="action" icon="change-positions" :disabled="!areTokensSelected" @click="handleSwitchTokens" />
     <div class="input-container">
       <div class="input-line">
         <div class="input-title">
           <span>{{ t('exchange.to') }}</span>
-          <span v-if="tokenTo" class="input-title-estimated">({{ t('swap.estimated') }})</span>
+          <span v-if="connected && areTokensSelected" class="input-title-estimated">({{ t('swap.estimated') }})</span>
         </div>
-        <div v-if="connected && tokenTo" class="token-balance">
+        <div v-if="connected && tokenTo && tokenTo.balance" class="token-balance">
           <span class="token-balance-title">{{ t('exchange.balance') }}</span>
           <span class="token-balance-value">{{ getTokenBalance(tokenTo) }}</span>
         </div>
@@ -55,12 +56,16 @@
             v-model="formModel.to"
             v-float="formModel.to"
             class="s-input--token-value"
-            :placeholder="inputPlaceholder"
+            :placeholder="isFieldToFocused ? '' : inputPlaceholder"
             @change="handleChangeFieldTo"
+            @focus="handleFocusFieldTo"
             @blur="handleBlurFieldTo"
           />
         </s-form-item>
         <div v-if="tokenTo" class="token">
+          <s-button v-if="connected && areTokensSelected" class="el-button--max" type="tertiary" size="small" border-radius="mini" :disabled="this.formModel.to === this.tokenTo.balance" @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">
             <token-logo :token="tokenTo" size="small" />
             {{ tokenTo.symbol }}
@@ -71,14 +76,17 @@
         </s-button>
       </div>
     </div>
-    <swap-info v-if="areTokensSelected" :show-price="true" :show-slippage-tolerance="true" />
+    <swap-info v-if="connected && areTokensSelected" :show-price="true" :show-slippage-tolerance="true" />
     <s-button v-if="!connected" type="primary" @click="handleConnectWallet">
       {{ t('swap.connectWallet') }}
     </s-button>
     <s-button v-else type="primary" :disabled="!areTokensSelected || isEmptyBalance || isInsufficientBalance" @click="handleConfirmSwap">
-      <template v-if="isEmptyBalance">
+      <template v-if="isEmptyBalance && !isInsufficientAmount">
         {{ t('swap.enterAmount') }}
       </template>
+      <template v-else-if="isInsufficientAmount">
+        {{ t('swap.insufficientAmount', { tokenSymbol: insufficientAmountTokenSymbol }) }}
+      </template>
       <template v-else-if="isInsufficientBalance">
         {{ t('swap.insufficientBalance', { tokenSymbol: tokenFrom.symbol }) }}
       </template>
@@ -86,11 +94,10 @@
         {{ t('exchange.Swap') }}
       </template>
     </s-button>
-    <swap-info v-if="areTokensSelected" />
-    <select-token :visible.sync="showSelectTokenDialog" @select="selectToken" />
-
+    <swap-info v-if="connected && areTokensSelected && +formModel.from !== 0" />
+    <select-token :visible.sync="showSelectTokenDialog" :asset="isTokenFromSelected ? tokenTo : tokenFrom" @select="selectToken" />
     <confirm-swap :visible.sync="showConfirmSwapDialog" @confirm="confirmSwap" />
-    <result-dialog :visible.sync="isSwapConfirmed" :type="t('exchange.Swap')" :message="resultMessage" />
+    <result-dialog :visible.sync="isSwapConfirmed" :type="t('exchange.Swap')" :message="resultMessage" @close="swapNotify(resultMessage)" />
   </s-form>
 </template>
 
@@ -98,9 +105,12 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 import TranslationMixin from '@/components/mixins/TranslationMixin'
+import LoadingMixin from '@/components/mixins/LoadingMixin'
 import { formatNumber, isWalletConnected } from '@/utils'
 import router, { lazyComponent } from '@/router'
 import { Components, PageNames } from '@/consts'
+import { dexApi } from '@soramitsu/soraneo-wallet-web'
+import { KnownSymbols } from '@sora-substrate/util'
 
 @Component({
   components: {
@@ -111,16 +121,21 @@ import { Components, PageNames } from '@/consts'
     ResultDialog: lazyComponent(Components.ResultDialog)
   }
 })
-export default class Swap extends Mixins(TranslationMixin) {
+export default class Swap extends Mixins(TranslationMixin, LoadingMixin) {
   @Getter tokenFrom!: any
   @Getter tokenTo!: any
   @Getter fromValue!: number
   @Getter toValue!: number
+  @Getter slippageTolerance!: number
   @Action setTokenFrom
   @Action setTokenTo
   @Action setFromValue
   @Action setToValue
   @Action setTokenFromPrice
+  @Action setPrice
+  @Action setPriceReversed
+  @Action setMinMaxReceived
+  @Action setLiquidityProviderFee
 
   inputPlaceholder: string = formatNumber(0, 2)
   isFieldFromFocused = false
@@ -129,6 +144,9 @@ export default class Swap extends Mixins(TranslationMixin) {
   showSelectTokenDialog = false
   showConfirmSwapDialog = false
   isSwapConfirmed = false
+  defaultTokenSymbol = KnownSymbols.XOR
+  isInsufficientAmount = false
+  insufficientAmountTokenSymbol = ''
 
   formModel = {
     from: formatNumber(0, 1),
@@ -140,7 +158,7 @@ export default class Swap extends Mixins(TranslationMixin) {
   }
 
   get areTokensSelected (): boolean {
-    return this.tokenFrom && this.tokenTo
+    return !!(this.tokenFrom && this.tokenTo)
   }
 
   get isEmptyBalance (): boolean {
@@ -149,7 +167,7 @@ export default class Swap extends Mixins(TranslationMixin) {
 
   get isInsufficientBalance (): boolean {
     if (this.areTokensSelected) {
-      return +this.formModel.from > this.tokenFrom.balance
+      return +this.formModel.from > +this.tokenFrom.balance
     }
     return true
   }
@@ -161,6 +179,34 @@ export default class Swap extends Mixins(TranslationMixin) {
     })
   }
 
+  async created () {
+    if (this.connected) {
+      if (this.tokenFrom === null || this.tokenFrom === undefined) {
+        // Set default token
+        // TODO 4 alexnatalia: This is just a temporary way to fix the default token setting
+        await new Promise(resolve => setTimeout((resolve) => {
+          this.setTokenFrom({ isWalletConnected: this.connected, tokenSymbol: this.defaultTokenSymbol })
+        }, 1500))
+      } else if (this.tokenFrom.balance === undefined) {
+        // Reset tokenFrom after connection to the wallet
+        this.setTokenFrom({ isWalletConnected: this.connected, tokenSymbol: this.tokenFrom.symbol })
+      }
+      // Reset tokenTo after connection to the wallet
+      if (this.tokenTo !== null && this.tokenTo.balance === undefined) {
+        this.setTokenTo({ isWalletConnected: this.connected, tokenSymbol: this.tokenTo.symbol })
+      }
+    } else {
+      // Set default tokenFrom or remove account info of token if user logout the wallet
+      if (this.tokenFrom === null || this.tokenFrom.balance !== undefined) {
+        this.setTokenFrom({ isWalletConnected: this.connected, tokenSymbol: this.defaultTokenSymbol })
+      }
+      // Remove account info of tokenTo if user logout the wallet
+      if (this.tokenTo !== null && this.tokenTo.balance !== undefined) {
+        this.setTokenTo({ isWalletConnected: this.connected, tokenSymbol: this.tokenTo.symbol })
+      }
+    }
+  }
+
   getSwapValue (token: any, tokenValue: number): string {
     return token ? `${tokenValue} ${token.symbol}` : ''
   }
@@ -172,56 +218,136 @@ export default class Swap extends Mixins(TranslationMixin) {
     return ''
   }
 
-  handleChangeFieldFrom (): void {
+  async handleChangeFieldFrom (): Promise<any> {
     if (!this.isFieldToFocused) {
       this.isFieldFromFocused = true
-      if (!this.areTokensSelected || +this.formModel.from === 0) {
+      if (!this.connected || !this.areTokensSelected || +this.formModel.from === 0) {
         this.formModel.to = formatNumber(0, 1)
       } else {
-        this.formModel.to = formatNumber(+this.formModel.from * this.tokenFrom.price / this.tokenTo.price, 4)
+        try {
+          const swapResult = await dexApi.getSwapResult(this.tokenFrom.address, this.tokenTo.address, this.formModel.from)
+          this.formModel.to = swapResult.amount
+          this.setLiquidityProviderFee(swapResult.fee)
+          const minMaxReceived = await dexApi.getMinMaxReceived(this.tokenFrom.address, this.tokenTo.address, swapResult.amount, this.slippageTolerance)
+          this.setMinMaxReceived(minMaxReceived)
+          this.getPrice()
+          if (this.isInsufficientAmount) {
+            this.isInsufficientAmount = false
+          }
+        } catch (error) {
+          this.formModel.to = formatNumber(0, 1)
+          if (!this.checkInsufficientAmount(this.tokenFrom.symbol, error.message)) {
+            throw error
+          }
+        }
       }
       this.setToValue(this.formModel.to)
     }
     this.setFromValue(this.formModel.from)
   }
 
-  handleChangeFieldTo (): void {
+  async handleChangeFieldTo (): Promise<any> {
     if (!this.isFieldFromFocused) {
       this.isFieldToFocused = true
-      if (!this.areTokensSelected || +this.formModel.to === 0) {
+      if (!this.connected || !this.areTokensSelected || +this.formModel.to === 0) {
         this.formModel.from = formatNumber(0, 1)
       } else {
-        this.formModel.from = formatNumber(+this.formModel.to * this.tokenTo.price / this.tokenFrom.price, 4)
+        try {
+          const swapResult = await dexApi.getSwapResult(this.tokenFrom.address, this.tokenTo.address, this.formModel.to)
+          this.formModel.from = swapResult.amount
+          this.setLiquidityProviderFee(swapResult.fee)
+          const minMaxReceived = await dexApi.getMinMaxReceived(this.tokenFrom.address, this.tokenTo.address, swapResult.amount, this.slippageTolerance)
+          this.setMinMaxReceived(minMaxReceived)
+          this.getPrice()
+          if (this.isInsufficientAmount) {
+            this.isInsufficientAmount = false
+          }
+        } catch (error) {
+          this.formModel.from = formatNumber(0, 1)
+          if (!this.checkInsufficientAmount(this.tokenTo.symbol, error.message)) {
+            throw error
+          }
+        }
       }
       this.setFromValue(this.formModel.from)
     }
     this.setToValue(this.formModel.to)
   }
 
+  async getPrice (): Promise<void> {
+    try {
+      const price = await dexApi.divideAssets(this.tokenFrom.address, this.tokenTo.address, this.formModel.from, this.formModel.to)
+      this.setPrice(price)
+      const priceReversed = await dexApi.divideAssets(this.tokenFrom.address, this.tokenTo.address, this.formModel.from, this.formModel.to, true)
+      this.setPriceReversed(priceReversed)
+    } catch (error) {
+      throw new Error(error)
+    }
+  }
+
+  checkInsufficientAmount (tokenSymbol: string, errorMessage): boolean {
+    if (errorMessage.indexOf('invalid string input for fixed point number') !== -1) {
+      this.isInsufficientAmount = true
+      this.insufficientAmountTokenSymbol = tokenSymbol
+      this.setPrice(0)
+      this.setPriceReversed(0)
+    }
+    return this.isInsufficientAmount
+  }
+
+  initPrice (): void {
+    this.setTokenFromPrice(true)
+    this.setPrice(formatNumber(0))
+    this.setPriceReversed(formatNumber(0))
+  }
+
   handleBlurFieldFrom (): void {
     this.isFieldFromFocused = false
+    if (this.formModel.from === '' || +this.formModel.from === 0) {
+      this.formModel.from = formatNumber(0, 1)
+    }
+  }
+
+  handleFocusFieldFrom (): void {
+    this.isFieldFromFocused = true
+    if (+this.formModel.from === 0) {
+      this.formModel.from = ''
+    }
   }
 
   handleBlurFieldTo (): void {
     this.isFieldToFocused = false
+    if (this.formModel.to === '' || +this.formModel.to === 0) {
+      this.formModel.to = formatNumber(0, 1)
+    }
+  }
+
+  handleFocusFieldTo (): void {
+    this.isFieldToFocused = true
+    if (+this.formModel.to === 0) {
+      this.formModel.to = ''
+    }
   }
 
   handleSwitchTokens (): void {
     const currentTokenFrom = this.tokenFrom
-    const currentFieldFromValue = this.formModel.from
-    this.isFieldFromFocused = true
-    this.isFieldToFocused = true
-    this.setTokenFrom(this.tokenTo)
-    this.setTokenTo(currentTokenFrom)
-    this.formModel.from = this.formModel.to
-    this.formModel.to = currentFieldFromValue
+    this.setTokenFrom({ isWalletConnected: this.connected, tokenSymbol: this.tokenTo.symbol })
+    this.setTokenTo({ isWalletConnected: this.connected, tokenSymbol: currentTokenFrom.symbol })
+    this.formModel.from = formatNumber(0, 1)
+    this.formModel.to = formatNumber(0, 1)
     this.isFieldFromFocused = false
     this.isFieldToFocused = false
-    this.setTokenFromPrice(true)
+    this.initPrice()
   }
 
-  handleMaxFromValue (): void {
-    this.formModel.from = this.tokenFrom.balance
+  handleMaxValue (isTokenFrom: boolean): void {
+    this.isFieldFromFocused = false
+    this.isFieldToFocused = false
+    if (isTokenFrom) {
+      this.formModel.from = this.tokenFrom.balance
+    } else {
+      this.formModel.to = this.tokenTo.balance
+    }
   }
 
   handleConnectWallet (): void {
@@ -238,11 +364,14 @@ export default class Swap extends Mixins(TranslationMixin) {
   selectToken (token: any): void {
     if (token) {
       if (this.isTokenFromSelected) {
-        this.setTokenFrom(token)
+        this.setTokenFrom({ isWalletConnected: this.connected, tokenSymbol: token.symbol })
         this.isTokenFromSelected = false
+        this.formModel.from = formatNumber(0, 1)
       } else {
-        this.setTokenTo(token)
+        this.setTokenTo({ isWalletConnected: this.connected, tokenSymbol: token.symbol })
+        this.formModel.to = formatNumber(0, 1)
       }
+      this.initPrice()
     }
   }
 
@@ -250,16 +379,24 @@ export default class Swap extends Mixins(TranslationMixin) {
     this.showConfirmSwapDialog = true
   }
 
-  confirmSwap (isSwapConfirmed: boolean): void {
+  async confirmSwap (isSwapConfirmed: boolean): Promise<any> {
     this.isSwapConfirmed = isSwapConfirmed
+    if (isSwapConfirmed) {
+      await dexApi.swap(this.tokenFrom.address, this.tokenTo.address, this.fromValue.toString(), this.toValue.toString(), this.slippageTolerance)
+    }
   }
 
-  submitSwap (message: string): void {
+  async swapNotify (message: string): Promise<void> {
     this.$notify({
       message: message,
       title: this.t('exchange.Swap'),
       type: 'success'
     })
+    try {
+      await dexApi.updateAccountAssets()
+    } catch (error) {
+      throw new Error(error)
+    }
   }
 }
 </script>
diff --git a/src/components/SwapInfo.vue b/src/components/SwapInfo.vue
index ddbad2a1f..3fa161016 100644
--- a/src/components/SwapInfo.vue
+++ b/src/components/SwapInfo.vue
@@ -3,7 +3,7 @@
     <template v-if="showPrice || showSlippageTolerance">
       <div v-if="showPrice" class="swap-info">
         <span>{{ t('exchange.price') }}</span>
-        <span class="swap-info-value">{{ price }}</span>
+        <span class="swap-info-value">{{ priceValue }}</span>
         <s-button class="el-button--switch-price" type="action" size="small" icon="swap" @click="handleSwitchPrice" />
       </div>
       <div v-if="showSlippageTolerance" class="swap-info swap-info--slippage-tolerance">
@@ -19,15 +19,16 @@
         <span>{{ t('swap.minReceived') }}</span>
         <span class="swap-info-value">{{ minReceived }}</span>
       </div>
-      <div class="swap-info">
+      <!-- TODO: Hid for first iteration of development -->
+      <!-- <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-tooltip>
         <span>{{ t('swap.priceImpact') }}</span>
         <span :class="'swap-info-value ' + priceImpactClass">{{ priceImpact }}%</span>
-      </div>
+      </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 })" theme="light" placement="right-start" animation="none" :show-arrow="false">
+        <s-tooltip v-if="showTooltips" class="swap-info-icon" popper-class="info-tooltip info-tooltip--swap" border-radius="mini" :content="t('swap.liquidityProviderFeeTooltip', { liquidityProviderFee: formatNumber(0.3, 1)})" theme="light" placement="right-start" animation="none" :show-arrow="false">
           <s-icon name="info" size="16" />
         </s-tooltip>
         <span>{{ t('swap.liquidityProviderFee') }}</span>
@@ -42,31 +43,35 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import { formatNumber } from '@/utils'
+import { KnownSymbols } from '@sora-substrate/util'
 
 @Component
 export default class SwapInfo extends Mixins(TranslationMixin) {
   @Getter tokenFrom!: any
   @Getter tokenTo!: any
-  @Getter toValue!: number
   @Getter isTokenFromPrice!: boolean
   @Getter slippageTolerance!: number
-  @Getter liquidityProviderFee!: number
+  @Getter minMaxReceived!: string
+  @Getter price!: string
+  @Getter priceReversed!: string
+  @Getter liquidityProviderFee!: string
   @Action setTokenFromPrice
 
   @Prop({ default: false, type: Boolean }) readonly showPrice!: boolean
   @Prop({ default: true, type: Boolean }) readonly showTooltips!: boolean
   @Prop({ default: false, type: Boolean }) readonly showSlippageTolerance!: boolean
 
-  get price (): string {
+  formatNumber = formatNumber
+
+  get priceValue (): string {
     if (this.isTokenFromPrice) {
-      return formatNumber(this.tokenFrom.price / this.tokenTo.price, 4) + ` ${this.tokenFrom.symbol + ' / ' + this.tokenTo.symbol}`
+      return `${formatNumber(this.price)} ${this.tokenFrom.symbol} / ${this.tokenTo.symbol}`
     }
-    return formatNumber(this.tokenTo.price / this.tokenFrom.price, 4) + ` ${this.tokenTo.symbol + ' / ' + this.tokenFrom.symbol}`
+    return `${formatNumber(this.priceReversed)} ${this.tokenTo.symbol} / ${this.tokenFrom.symbol}`
   }
 
   get minReceived (): string {
-    // TODO: Generate value from tokenFromValue
-    return this.tokenFrom ? `${formatNumber(this.toValue, 4)} ${this.tokenTo.symbol}` : ''
+    return `${formatNumber(this.minMaxReceived)} ${this.tokenTo ? this.tokenTo.symbol : ''}`
   }
 
   get priceImpact (): string {
@@ -85,8 +90,7 @@ export default class SwapInfo extends Mixins(TranslationMixin) {
   }
 
   get liquidityProviderFeeValue (): string {
-    // TODO: Generate liquidity provider fee
-    return this.tokenFrom ? `${formatNumber(0.0006245, 4)} ${this.tokenTo.symbol}` : ''
+    return `${formatNumber(this.liquidityProviderFee)} ${KnownSymbols.XOR}`
   }
 
   handleSwitchPrice (): void {
diff --git a/src/components/TokenLogo.vue b/src/components/TokenLogo.vue
index 0a46f02fa..17537486e 100644
--- a/src/components/TokenLogo.vue
+++ b/src/components/TokenLogo.vue
@@ -4,13 +4,14 @@
 
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { KnownSymbols } from '@sora-substrate/util'
+
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import { Token } from '@/types'
 import { LogoSize } from '@/consts'
 
-const tokens = [
-  'XOR', 'KSM'
-]
+// TODO 4 alexnatalia: Update Token Icons
+
 @Component
 export default class TokenLogo extends Mixins(TranslationMixin) {
   // TODO 4 alexnatalia: Think one more time about tokenSymbol
@@ -24,7 +25,7 @@ export default class TokenLogo extends Mixins(TranslationMixin) {
 
     if (this.tokenSymbol) {
       classes.push(`${tokenLogoClass}--${this.tokenSymbol.toLowerCase()}`)
-    } else if (this.token && tokens.includes(this.token.symbol)) {
+    } else if (this.token && !!KnownSymbols[this.token.symbol]) {
       classes.push(`${tokenLogoClass}--${this.token.symbol.toLowerCase()}`)
     }
 
diff --git a/src/components/mixins/TranslationMixin.ts b/src/components/mixins/TranslationMixin.ts
index 81be7c01e..6f404e794 100644
--- a/src/components/mixins/TranslationMixin.ts
+++ b/src/components/mixins/TranslationMixin.ts
@@ -9,4 +9,8 @@ export default class TranslationMixin extends Vue {
   tc (key: string, choice?: number, values?: any): string {
     return this.$root.$tc(key, choice, values)
   }
+
+  te (key: string): boolean {
+    return this.$root.$te(key)
+  }
 }
diff --git a/src/consts/index.ts b/src/consts/index.ts
index b463e2972..a14a51504 100644
--- a/src/consts/index.ts
+++ b/src/consts/index.ts
@@ -31,8 +31,8 @@ export enum Components {
 
 // TODO: Some items are hidden because we don't have Stats and Support pages right now
 export const MainMenu = [
-  PageNames.About,
-  PageNames.Exchange
+  PageNames.Exchange,
+  PageNames.About
   // PageNames.Stats,
   // PageNames.Support
 ]
diff --git a/src/lang/en/index.ts b/src/lang/en/index.ts
index 0bbee16b9..6cb53dd05 100644
--- a/src/lang/en/index.ts
+++ b/src/lang/en/index.ts
@@ -11,10 +11,10 @@ export default {
     [KnownSymbols.PSWAP]: 'Polkaswap'
   },
   pageTitle: {
-    [PageNames.About]: 'About',
     [PageNames.Exchange]: 'Exchange',
     [PageNames.Swap]: 'Swap',
     [PageNames.Pool]: 'Pool',
+    [PageNames.About]: 'About',
     [PageNames.Stats]: 'Stats',
     [PageNames.Support]: 'Support',
     [PageNames.Wallet]: 'Wallet',
@@ -24,19 +24,19 @@ export default {
     [PageNames.RemoveLiquidity]: 'Remove Liquidity'
   },
   mainMenu: {
-    [PageNames.About]: 'About',
     [PageNames.Exchange]: 'Exchange',
+    [PageNames.About]: 'About',
     [PageNames.Stats]: 'Stats',
     [PageNames.Support]: 'Support',
     [PageNames.CreatePair]: 'Create Pair'
   },
   about: {
-    polkaswapText: 'Polkaswap — automated token exchange. Swap any token on SoraNet, add liquidity, create exchanges, earn through passive market making, build decentralized price feeds.',
+    polkaswapText: 'Polkaswap - decentralised token exchange for Polkadot ecosystem. Swap any token on SoraNet, add liquidity, create exchanges, earn through passive market making, build decentralized price feeds.',
     openExchange: 'Open exchange',
     mediumLink: 'Medium',
     githubLink: 'Github',
     [Topics.SwapTokens]: {
-      title: 'Swap any token on Ethereum',
+      title: 'Swap tokens on Sora network and other bridged networks',
       text: 'Use Polkaswap exchange or integrate into your project using the SDK'
     },
     [Topics.PassiveEarning]: {
@@ -45,7 +45,7 @@ export default {
     },
     [Topics.AddLiquidity]: {
       title: 'Add liquidity for any project',
-      text: 'Add liquidity or create an exchange for any ERC20 token'
+      text: 'Add liquidity or create new pairs'
     },
     [Topics.PriceFeeds]: {
       title: 'Build decentralized price feeds',
@@ -77,6 +77,7 @@ export default {
     liquidityProviderFeeTooltip: 'A portion of each trade ({liquidityProviderFee}%) goes to liquidity providers as a protocol incentive.',
     enterAmount: 'Enter an amount',
     insufficientBalance: 'Insufficient {tokenSymbol} balance',
+    insufficientAmount: 'Insufficient {tokenSymbol} amount',
     confirmSwap: 'Confirm swap',
     swapOutputMessage: 'Output is estimated. You will receive at least {transactionValue} or the transaction will revert.',
     transactionMessage: '{tokenFromValue} for {tokenToValue}'
@@ -91,7 +92,7 @@ export default {
     pooledToken: '{tokenSymbol} Pooled:',
     pairTokens: '{pair} Pool Tokens:',
     poolShare: 'Your pool share',
-    loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    description: 'When you add liquidity, you are given pool tokens representing your position. These tokens automaticaly earn fees proportional to your share of the pool, and can be redeemed at any time.'
   },
   selectToken: {
     title: 'Select a token',
@@ -117,6 +118,7 @@ export default {
     ok: 'OK',
     transactionMessage: '{firstToken} and {secondToken}',
     description: 'When you add liquidity, you are awarded with token pair specific PSWAP tokens that represent your pool share.',
+    loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
     firstLiquidityProvider: 'You are the first liquidity provider',
     firstLiquidityProviderInfo: 'The ratio of tokens you add will set the price of this pool.<br/>Once you are happy with the rate click supply to review.'
   },
@@ -129,7 +131,7 @@ export default {
   },
   addLiquidity: {
     title: 'Add liquidity',
-    description: 'When you add liquidity, you are awarded with token pair specific Pool Tokens that represent your pool share.'
+    description: 'When you add liquidity, you are given pool tokens representing your position. These tokens automaticaly earn fees proportional to your share of the pool, and can be redeemed at any time.'
   },
   removeLiquidity: {
     title: 'Remove liquidity',
@@ -149,11 +151,15 @@ export default {
     title: 'Settings',
     slippageTolerance: 'SLIPPAGE TOLERANCE',
     slippageToleranceHint: 'Your transaction will revert if the price changes unfavorably by more than this percentage.',
+    slippageToleranceValidation: {
+      warning: 'Your transaction may fail',
+      frontrun: 'Your transaction may be frontrun',
+      error: 'Enter a valid slippage percentage'
+    },
     custom: 'CUSTOM',
     transactionDeadline: 'TRANSACTION DEADLINE',
-    transactionDeadlineHint: 'TODO',
+    transactionDeadlineHint: 'Transaction will be cancelled if it is pending for more than this long.',
     nodeAddress: 'NODE ADDRESS',
-    nodeAddressHint: 'TODO',
     ip: 'IP',
     port: 'PORT',
     min: 'MIN'
diff --git a/src/router/index.ts b/src/router/index.ts
index 545edf182..abf39ae02 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,12 +11,7 @@ export const lazyView = (name: string) => () => import(`@/views/${name}.vue`)
 const routes: Array<RouteConfig> = [
   {
     path: '/',
-    redirect: '/about'
-  },
-  {
-    path: '/about',
-    name: PageNames.About,
-    component: lazyView(PageNames.About)
+    redirect: '/exchange'
   },
   {
     path: '/exchange',
@@ -39,6 +34,11 @@ const routes: Array<RouteConfig> = [
       }
     ]
   },
+  {
+    path: '/about',
+    name: PageNames.About,
+    component: lazyView(PageNames.About)
+  },
   {
     path: '/exchange/wallet',
     name: PageNames.Wallet,
diff --git a/src/store/assets.ts b/src/store/assets.ts
index 6f5bdf83e..d0902d617 100644
--- a/src/store/assets.ts
+++ b/src/store/assets.ts
@@ -2,8 +2,8 @@ import map from 'lodash/fp/map'
 import flatMap from 'lodash/fp/flatMap'
 import fromPairs from 'lodash/fp/fromPairs'
 import flow from 'lodash/fp/flow'
-import { dexApi } from '@soramitsu/soraneo-wallet-web'
 import { Asset } from '@sora-substrate/util'
+import { dexApi } from '@soramitsu/soraneo-wallet-web'
 
 const types = flow(
   flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),
diff --git a/src/store/index.ts b/src/store/index.ts
index 9667a900f..4a7d8b90f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -13,7 +13,7 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules,
-  strict: process.env.NODE_ENV !== 'production'
+  strict: false
 })
 
 export default store
diff --git a/src/store/swap.ts b/src/store/swap.ts
index 86f0a720d..f711ac85d 100644
--- a/src/store/swap.ts
+++ b/src/store/swap.ts
@@ -3,37 +3,39 @@ import flatMap from 'lodash/fp/flatMap'
 import fromPairs from 'lodash/fp/fromPairs'
 import flow from 'lodash/fp/flow'
 import concat from 'lodash/fp/concat'
+import { dexApi } from '@soramitsu/soraneo-wallet-web'
+import { KnownAssets, Asset, AccountAsset } from '@sora-substrate/util'
 
 const types = flow(
   flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),
   concat([
-    'GET_TOKEN_FROM',
-    'GET_TOKEN_TO',
     'GET_FROM_VALUE',
     'GET_TO_VALUE',
     'GET_TOKEN_FROM_PRICE',
+    'GET_PRICE',
+    'GET_PRICE_REVERSED',
+    'GET_MIN_MAX_RECEIVED',
+    'GET_LIQUIDITY_PROVIDER_FEE',
     'GET_SWAP_CONFIRM'
   ]),
   map(x => [x, x]),
   fromPairs
-)([])
+)([
+  'GET_TOKEN_FROM',
+  'GET_TOKEN_TO'
+])
 
-// TODO 4 alexnatalia: Get XOR token in another way
 function initialState () {
   return {
-    tokenFrom: {
-      name: 'Sora',
-      symbol: 'XOR',
-      address: '1f9840a85d5af5bf1d1762f925bdaddc4201f984',
-      balance: 10000,
-      price: 55.10,
-      priceChange: 12
-    },
+    tokenFrom: null,
     tokenTo: null,
     fromValue: 0,
     toValue: 0,
     isTokenFromPrice: true,
-    liquidityProviderFee: 0.3
+    price: '',
+    priceReversed: '',
+    minMaxReceived: '',
+    liquidityProviderFee: ''
   }
 }
 
@@ -55,17 +57,38 @@ const getters = {
   isTokenFromPrice (state) {
     return state.isTokenFromPrice
   },
+  price (state) {
+    return state.price
+  },
+  priceReversed (state) {
+    return state.priceReversed
+  },
+  minMaxReceived (state) {
+    return state.minMaxReceived
+  },
   liquidityProviderFee (state) {
     return state.liquidityProviderFee
   }
 }
 
 const mutations = {
-  [types.GET_TOKEN_FROM] (state, tokenFrom: any) {
-    state.tokenFrom = tokenFrom
+  [types.GET_TOKEN_FROM_REQUEST] (state) {
+    state.tokenFrom = null
+  },
+  [types.GET_TOKEN_FROM_SUCCESS] (state, token: Asset | AccountAsset | null) {
+    state.tokenFrom = token
   },
-  [types.GET_TOKEN_TO] (state, tokenTo: any) {
-    state.tokenTo = tokenTo
+  [types.GET_TOKEN_FROM_FAILURE] (state) {
+    state.tokenFrom = null
+  },
+  [types.GET_TOKEN_TO_REQUEST] (state) {
+    state.tokenTo = null
+  },
+  [types.GET_TOKEN_TO_SUCCESS] (state, token: Asset | AccountAsset | null) {
+    state.tokenTo = token
+  },
+  [types.GET_TOKEN_TO_FAILURE] (state) {
+    state.tokenTo = null
   },
   [types.GET_FROM_VALUE] (state, fromValue: string | number) {
     state.fromValue = fromValue
@@ -75,15 +98,65 @@ const mutations = {
   },
   [types.GET_TOKEN_FROM_PRICE] (state, isTokenFromPrice: boolean) {
     state.isTokenFromPrice = isTokenFromPrice
+  },
+  [types.GET_PRICE] (state, price: string | number) {
+    state.price = price
+  },
+  [types.GET_PRICE_REVERSED] (state, priceReversed: string | number) {
+    state.priceReversed = priceReversed
+  },
+  [types.GET_MIN_MAX_RECEIVED] (state, minMaxReceived: string) {
+    state.minMaxReceived = minMaxReceived
+  },
+  [types.GET_LIQUIDITY_PROVIDER_FEE] (state, liquidityProviderFee: string) {
+    state.liquidityProviderFee = liquidityProviderFee
   }
 }
 
 const actions = {
-  setTokenFrom ({ commit }, token: any) {
-    commit(types.GET_TOKEN_FROM, token)
+  async setTokenFrom ({ commit }, payload) {
+    if (payload.isWalletConnected) {
+      commit(types.GET_TOKEN_FROM_REQUEST)
+      try {
+        const token = KnownAssets.get(payload.tokenSymbol)
+        if (token) {
+          let tokenFrom = await dexApi.accountAssets.find(asset => asset.address === token.address)
+          if (!tokenFrom) {
+            tokenFrom = { ...token, balance: '0', usdBalance: '0' }
+          }
+          commit(types.GET_TOKEN_FROM_SUCCESS, tokenFrom)
+        } else {
+          throw new Error(`There is no ${payload.tokenSymbol} asset`)
+        }
+      } catch (error) {
+        commit(types.GET_TOKEN_FROM_FAILURE)
+        throw error
+      }
+    } else {
+      commit(types.GET_TOKEN_FROM_SUCCESS, KnownAssets.get(payload.tokenSymbol))
+    }
   },
-  setTokenTo ({ commit }, token: any) {
-    commit(types.GET_TOKEN_TO, token)
+  async setTokenTo ({ commit }, payload) {
+    if (payload.isWalletConnected) {
+      commit(types.GET_TOKEN_TO_REQUEST)
+      try {
+        const token = KnownAssets.get(payload.tokenSymbol)
+        if (token) {
+          let tokenTo = await dexApi.accountAssets.find(asset => asset.address === token.address)
+          if (!tokenTo) {
+            tokenTo = { ...token, balance: '0', usdBalance: '0' }
+          }
+          commit(types.GET_TOKEN_TO_SUCCESS, tokenTo)
+        } else {
+          throw new Error(`There is no ${payload.tokenSymbol} asset`)
+        }
+      } catch (error) {
+        commit(types.GET_TOKEN_TO_FAILURE)
+        throw error
+      }
+    } else {
+      commit(types.GET_TOKEN_TO_SUCCESS, KnownAssets.get(payload.tokenSymbol))
+    }
   },
   setFromValue ({ commit }, fromValue: string | number) {
     commit(types.GET_FROM_VALUE, fromValue)
@@ -93,6 +166,18 @@ const actions = {
   },
   setTokenFromPrice ({ commit }, isTokenFromPrice: boolean) {
     commit(types.GET_TOKEN_FROM_PRICE, isTokenFromPrice)
+  },
+  setPrice ({ commit }, price: string | number) {
+    commit(types.GET_PRICE, price)
+  },
+  setPriceReversed ({ commit }, priceReversed: string | number) {
+    commit(types.GET_PRICE_REVERSED, priceReversed)
+  },
+  setMinMaxReceived ({ commit }, minMaxReceived: string) {
+    commit(types.GET_MIN_MAX_RECEIVED, minMaxReceived)
+  },
+  setLiquidityProviderFee ({ commit }, liquidityProviderFee: string) {
+    commit(types.GET_LIQUIDITY_PROVIDER_FEE, liquidityProviderFee)
   }
 }
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3bbb2e4a9..1cf027c92 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,7 +2,7 @@ import { dexApi } from '@soramitsu/soraneo-wallet-web'
 
 import storage from './storage'
 
-export const formatNumber = (value: string | number, decimalLendth: number): string => {
+export const formatNumber = (value: string | number, decimalLendth?: number): string => {
   const valueNumber = +value
   return valueNumber.toFixed(decimalLendth || 4)
 }
@@ -15,6 +15,14 @@ export const getTokenIconClasses = (symbol: string) => {
   return cssClass
 }
 
-export const isWalletConnected = () => !!(storage.get('address') && storage.get('name') && storage.get('password'))
+export const isWalletConnected = () => {
+  const isExternal = Boolean(storage.get('isExternal'))
+  const address = storage.get('address')
+  return !!(
+    isExternal
+      ? address
+      : address && storage.get('name') && storage.get('password')
+  )
+}
 
 export const isApiConnected = () => dexApi?.api?.isConnected
diff --git a/src/views/About.vue b/src/views/About.vue
index c62d5bdca..a6f86735c 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -137,7 +137,7 @@ $logo-width: 140px;
       height: 140px;
       background-color: var(--s-color-base-background);
       border-color: transparent;
-      color: var(--s-color-base-content-tertiary);
+      color: var(--s-color-base-content-secondary);
       letter-spacing: $s-letter-spacing-medium;
       font-feature-settings: $s-font-feature-settings-card-body;
       .title {
diff --git a/src/views/CreatePair.vue b/src/views/CreatePair.vue
index 279e55cd1..ec82f5cb0 100644
--- a/src/views/CreatePair.vue
+++ b/src/views/CreatePair.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <!-- TODO: Add appropriate tooltip -->
-    <generic-header :title="t('createPair.title')" :tooltip="t('pool.loremIpsum')" />
+    <generic-header :title="t('createPair.title')" :tooltip="t('createPair.loremIpsum')" />
     <s-form
       v-model="formModel"
       class="el-form--actions"
diff --git a/src/views/Wallet.vue b/src/views/Wallet.vue
index 842ce6ed2..52606e0d6 100644
--- a/src/views/Wallet.vue
+++ b/src/views/Wallet.vue
@@ -11,6 +11,7 @@ import { Action } from 'vuex-class'
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import router from '@/router'
 import { PageNames } from '@/consts'
+import { isWalletConnected } from '@/utils'
 
 @Component
 export default class Wallet extends Mixins(TranslationMixin) {
@@ -20,8 +21,8 @@ export default class Wallet extends Mixins(TranslationMixin) {
     router.push({ name: PageNames.Swap })
   }
 
-  handleSwap (token: any): void {
-    this.setTokenFrom(token)
+  async handleSwap (token: any): Promise<void> {
+    await this.setTokenFrom({ isWalletConnected: isWalletConnected(), tokenSymbol: token.symbol })
     router.push({ name: PageNames.Swap })
   }
 }
diff --git a/yarn.lock b/yarn.lock
index e2bf67a15..ff3a49e51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1597,6 +1597,23 @@
     eventemitter3 "^4.0.7"
     rxjs "^6.6.3"
 
+"@polkadot/extension-dapp@^0.35.0-beta.35":
+  version "0.35.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/extension-dapp/-/extension-dapp-0.35.1.tgz#d94f2ce497dba85302a248c895e2f055c2ec2509"
+  integrity sha512-lwBcqAvMCJAS14BxOitP5elr9rcKzW85AtEWgcBtMRmO8u8TncJzXM3W/Sz3UCNOBVpgEKJbEsgV9/FOqxCqHw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@polkadot/extension-inject" "^0.35.1"
+    "@polkadot/util" "^4.2.1"
+    "@polkadot/util-crypto" "^4.2.1"
+
+"@polkadot/extension-inject@^0.35.1":
+  version "0.35.1"
+  resolved "https://registry.yarnpkg.com/@polkadot/extension-inject/-/extension-inject-0.35.1.tgz#fdacb090b140e0f66bd0530a867b70e882f9be84"
+  integrity sha512-O2wp5JHo6jZvT9mQV3YVrCNHgUPBeoG7ZGMWE/612Y5P5SvS5cyOR1cKG35LrcXCmCc9bqM11wsHPl5raMXk2w==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@polkadot/keyring@^3.6.1":
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/@polkadot/keyring/-/keyring-3.7.1.tgz#91c17ed9824d6ed3f909ab43565f8e34bfbe321c"
@@ -1902,39 +1919,39 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
-"@sora-substrate/api-derive@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@sora-substrate/api-derive/-/api-derive-0.2.3.tgz#7479e771a63ee71714b41c6c82ab6715130214d2"
-  integrity sha512-ErryJEKPagZhwwTBhB7I/FEsYlgH36gaUiLmL4/xplqqPKf4Aze5XowH/kN8kyoL+z6cpWN/d+HyaeNbrrkJ8Q==
+"@sora-substrate/api-derive@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@sora-substrate/api-derive/-/api-derive-0.2.5.tgz#b26fa01f33b3aec6732778f5340ef3bd103da835"
+  integrity sha512-uG9SUZYWqsG2NMj37c5bLv4ReHNnKlo5wsHmxZlI2g8t0oh0wyMWd/nxq3HVeKCnKxN5ZZKUHlwOem2ETdLJWg==
   dependencies:
     "@babel/runtime" "^7.10.2"
     "@polkadot/api-derive" "^2.1.2-8"
-    "@sora-substrate/types" "^0.2.3"
+    "@sora-substrate/types" "^0.2.5"
     rxjs "^6.5.5"
 
-"@sora-substrate/api@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@sora-substrate/api/-/api-0.2.3.tgz#e9e15487d354127b13b1ca631ae3bf346aa44246"
-  integrity sha512-DutYromD63XN3aogluE5ePiZcI1WR5gco/3JFU3ijE8FYPLL/3SyfVVhKEZMOPuQ8ztcimKUpi890l+Sm1AGvg==
+"@sora-substrate/api@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@sora-substrate/api/-/api-0.2.5.tgz#6af7ad9f6ed317d943c24bbc8076fe063f0ab1c7"
+  integrity sha512-KbApNbbfjoIW0DG4MElDGsXxiv14OQZdXnPCys9nxA66YV6qafgRO7rEZYsETZuE9qjGpdArV+nNQV9EZ3102w==
   dependencies:
     "@babel/runtime" "^7.10.2"
     "@open-web3/orml-api-derive" "^0.6.0-beta.26"
     "@polkadot/api" "^2.1.2-8"
     "@polkadot/rpc-core" "^2.1.2-8"
-    "@sora-substrate/api-derive" "^0.2.3"
-    "@sora-substrate/types" "^0.2.3"
+    "@sora-substrate/api-derive" "^0.2.5"
+    "@sora-substrate/types" "^0.2.5"
 
-"@sora-substrate/type-definitions@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@sora-substrate/type-definitions/-/type-definitions-0.2.3.tgz#4350ff3f6292811eb0ca460be04dbef1e4560481"
-  integrity sha512-UWZ5uNSKyBmVFyjIIZF2Cm3hCEzYh+1UT5HMIZqQxC6Pl6ARKnqm3vG+6jYVLuxmr5xleY5/e56Ba+mj7YrQlw==
+"@sora-substrate/type-definitions@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@sora-substrate/type-definitions/-/type-definitions-0.2.5.tgz#9fede507271f21d75f7ec6aa72960087182f445d"
+  integrity sha512-RXa+i8tVnWq7/XfQFWzeuYWxHNc8s5lTJ0GonrWzf5YJkkVZ25c8c10wciIZAkAbko/rbJ1BzrkE2ahAEDcvzQ==
   dependencies:
     "@open-web3/orml-type-definitions" "^0.6.0-beta.26"
 
-"@sora-substrate/types@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@sora-substrate/types/-/types-0.2.3.tgz#43392a39fcf37da17e0b82a5db965a82889790c3"
-  integrity sha512-p2XEYP1/waSoUWZydLhfoMwFvZVVXRfVmuHMWLITzx6xDYtXltU1yJ76UCjPvX0qjxvMN66TRyId6lbonRgtWA==
+"@sora-substrate/types@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@sora-substrate/types/-/types-0.2.5.tgz#a09470ba9268a1b999dca6081de8a6465e7a2e0e"
+  integrity sha512-anezGmhVwufTQtpUVHAJdmRK2GOM4wEBVyIRO1u+siyO2jM6QuIEFNSvp3KFpG/rL6HsgGC7qfm1O9Qiqsh5GA==
   dependencies:
     "@babel/runtime" "^7.10.2"
     "@open-web3/api-mobx" "^0.6.0-beta.26"
@@ -1942,15 +1959,15 @@
     "@polkadot/api" "^2.1.2-8"
     "@polkadot/typegen" "^2.1.2-8"
     "@polkadot/types" "^2.1.2-8"
-    "@sora-substrate/type-definitions" "^0.2.3"
+    "@sora-substrate/type-definitions" "^0.2.5"
 
-"@sora-substrate/util@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@sora-substrate/util/-/util-0.2.3.tgz#63e478f1af11d76fcbc55d1f2860fe42bbf418ed"
-  integrity sha512-eC7XjEzrvUexTNMoN0MOfUcFSlScc88uIVUSKZxq4x8x2ujpnkSUZMThI/c/caWoWY0behn8xOduNVl9ouzZpQ==
+"@sora-substrate/util@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@sora-substrate/util/-/util-0.2.5.tgz#ddd89d9de5c8abd176261ab8cb0f563e478d730b"
+  integrity sha512-kkbRezcdbRcCWZbvdcobiYT3qvS/4j9xrsBZGNL8EPVXuv/DQOU3Hh2wj3yyJHlTuimlAh4OjZ0GCo3DUrzjkQ==
   dependencies:
     "@polkadot/ui-keyring" "^0.61.1"
-    "@sora-substrate/api" "^0.2.3"
+    "@sora-substrate/api" "^0.2.5"
     bignumber.js "^9.0.1"
     crypto-js "^4.0.0"
     lodash "^4.17.15"
@@ -1970,12 +1987,13 @@
     vuex "^3.1.3"
     vuex-class "^0.3.2"
 
-"@soramitsu/soraneo-wallet-web@^0.2.7":
-  version "0.2.7"
-  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soraneo-wallet-web/-/soraneo-wallet-web-0.2.7.tgz#26640654adb851acd1d1545f2bbd9dc75aa12dc0"
-  integrity sha512-uhHa4qlQa1Mw0JeXp1xlRD1OnWLrWg6T1jI68nsjQBZhq5fSTIsWdmWhi6iEgQ9dmLueU0r0Zbxl/Zoy1oZmXw==
+"@soramitsu/soraneo-wallet-web@^0.2.9":
+  version "0.2.9"
+  resolved "https://nexus.iroha.tech/repository/npm-group/@soramitsu/soraneo-wallet-web/-/soraneo-wallet-web-0.2.9.tgz#a4524cb8799af180f27e93ead26794bf4485fff3"
+  integrity sha512-3lZPyQ8fw9f0QycbtNKszfPverRff1V1xhV0czq83YirBOW/xU+oW3Dx22AEjt2/m+QuxI99oeUq7yXV15q1sw==
   dependencies:
-    "@sora-substrate/util" "^0.2.3"
+    "@polkadot/extension-dapp" "^0.35.0-beta.35"
+    "@sora-substrate/util" "^0.2.5"
     "@soramitsu/soramitsu-js-ui" "^0.6.7"
     axios "^0.19.2"
     core-js "^3.6.4"