diff --git a/assets/_variables.scss b/assets/_variables.scss
index 604598fa6..cc3bfa3ee 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -8,6 +8,7 @@
   --black-primary: #161617;
   --radius: 4px;
   --radius-2: 8px;
+  --slider-bg: #5E5E5E;
 }
 
 [trade-theme="default"] {
@@ -60,6 +61,8 @@
   --table-background: #212121;
   --dialog-background: #212121;
   --card-number: #161617;
+  --disabled-indicator: #C4C4C4;
+  --access-indicator: #66C167;
 
   // buttons
   --btn-default: #333333;
@@ -77,6 +80,7 @@
   --text-grey-thirdly: #bdbdbd;
   --text-dark: #888;
   --text-disable: #BEC6CB;
+  --text-transparent: rgba(242, 242, 242, 0.3);
 
   --card-shadow: 0px -0.5px 0px rgba(0, 0, 0, 0.2);
   --dropdown-shadow: 0px 12px 24px 0px rgba(18, 18, 18, 0.16);
@@ -90,6 +94,7 @@
   --active-row: #282828;
 
   --border-1: 1px solid rgba(60, 60, 67, 0.36);
+  --border-1-color: rgba(60, 60, 67, 0.36); 
   --border-2: 2px solid #3F3F3F;
 
   --selector-bg: #282828;
@@ -112,6 +117,8 @@
   --normal-card-shadow: #00000080;
 
   --cancel: #c4c4c4;
+
+  --select-color: #333333;
 }
 
 .theme-light {
@@ -132,6 +139,8 @@
   --dialog-background: #f5f5f9;
   --chart-actions-background: #d4d7dE;
   --card-number: #f0f0f0;
+  --disabled-indicator: #C4C4C4;
+  --access-indicator: #66C167;
 
   // buttons
   --btn-default: #E6E8EB;
@@ -141,14 +150,14 @@
   --hover: rgba(200, 200, 200, 0.5);
   --dark-btn-sm: #e0e0e0;
   --swap-tab-active: #e0e0e0;
-
   --text-default: #303133;
-  --text-theme: #fff; 
+  --text-theme: #fff;
   --text-contrast: #000;
   --text-secondary: #606266;
   --text-dark: #aaa;
   --text-grey-thirdly: #787878;
-  --text-disable: #303133;
+  --text-disable: #c4c4c4;
+  --text-transparent: rgba(0, 0, 0, 0.3);
 
   --border-color: #CDD0D6;
 
@@ -158,6 +167,7 @@
   --active-row: #c2deff;
 
   --border-1: 1px solid rgba(60, 60, 67, 0.36);
+  --border-1-color: rgba(60, 60, 67, 0.36); 
   --border-2: 2px solid #CDD0D6;
 
   --selector-bg: #dcdfe6;
@@ -178,5 +188,6 @@
   --cancel: #303133;
 
   --normal-card-shadow: #aaaaaa8a;
+  --select-color: #ffffff;
 }
 
diff --git a/assets/dark.css b/assets/dark.css
index 9f52b8479..b76922e52 100644
--- a/assets/dark.css
+++ b/assets/dark.css
@@ -6123,7 +6123,9 @@
 }
 
 .el-notification__content p {
-    margin: 0
+    margin: 0;
+    white-space: normal;
+    text-align: left;
 }
 
 .el-notification__icon {
@@ -6416,14 +6418,14 @@
 .el-tooltip__popper[x-placement^=bottom] .popper__arrow {
     top: -6px;
     border-top-width: 0;
-    border-bottom-color: #F2F2F2
+    border-bottom-color: #161617
 }
 
 .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after {
     top: 1px;
     margin-left: -5px;
     border-top-width: 0;
-    border-bottom-color: #F2F2F2
+    border-bottom-color: #161617
 }
 
 .el-tooltip__popper[x-placement^=right] {
@@ -11624,7 +11626,7 @@
 .el-popper .popper__arrow,
 .el-popper .popper__arrow::after {
     position: absolute;
-    display: block;
+    display: none !important;
     width: 0;
     height: 0;
     border-color: transparent;
@@ -12934,7 +12936,7 @@
 }
 
 .el-input.is-disabled .el-input__inner {
-    background-color: #000;
+    background-color: #212121;
     border-color: transparent;
     color: #C0C4CC;
     cursor: not-allowed
diff --git a/assets/icons/avatar.png b/assets/icons/avatar.png
new file mode 100644
index 000000000..b2192441a
Binary files /dev/null and b/assets/icons/avatar.png differ
diff --git a/assets/icons/matic.png b/assets/icons/matic.png
new file mode 100644
index 000000000..67367b41e
Binary files /dev/null and b/assets/icons/matic.png differ
diff --git a/assets/icons/pbtc.png b/assets/icons/pbtc.png
new file mode 100644
index 000000000..5c20008e3
Binary files /dev/null and b/assets/icons/pbtc.png differ
diff --git a/assets/icons/sol.png b/assets/icons/sol.png
new file mode 100644
index 000000000..d3dffebf0
Binary files /dev/null and b/assets/icons/sol.png differ
diff --git a/assets/icons/telos.png b/assets/icons/telos.png
index e496a20e5..e9cab767d 100644
Binary files a/assets/icons/telos.png and b/assets/icons/telos.png differ
diff --git a/assets/icons/usdc.png b/assets/icons/usdc.png
new file mode 100644
index 000000000..706f50a62
Binary files /dev/null and b/assets/icons/usdc.png differ
diff --git a/assets/icons/usdt.png b/assets/icons/usdt.png
new file mode 100644
index 000000000..aad00b358
Binary files /dev/null and b/assets/icons/usdt.png differ
diff --git a/assets/icons/ux.png b/assets/icons/ux.png
new file mode 100644
index 000000000..7db11dc6b
Binary files /dev/null and b/assets/icons/ux.png differ
diff --git a/assets/icons/wax.png b/assets/icons/wax.png
index df4251490..4f7b6b670 100644
Binary files a/assets/icons/wax.png and b/assets/icons/wax.png differ
diff --git a/assets/icons/weth.png b/assets/icons/weth.png
new file mode 100644
index 000000000..edb6b9450
Binary files /dev/null and b/assets/icons/weth.png differ
diff --git a/assets/light.css b/assets/light.css
index d5b17f75e..3ed277b46 100644
--- a/assets/light.css
+++ b/assets/light.css
@@ -6115,7 +6115,9 @@
 }
 
 .el-notification__content p {
-    margin: 0
+    margin: 0;
+    white-space: normal;
+    text-align: left;
 }
 
 .el-notification__icon {
@@ -11575,7 +11577,7 @@
 .el-popper .popper__arrow,
 .el-popper .popper__arrow::after {
     position: absolute;
-    display: block;
+    display: none !important;
     width: 0;
     height: 0;
     border-color: transparent;
@@ -11590,7 +11592,8 @@
 
 .el-popper .popper__arrow::after {
     content: " ";
-    border-width: 6px
+    border-width: 6px;
+    display: none !important;
 }
 
 .el-popper[x-placement^=top] {
diff --git a/assets/logos/wombat_dark.png b/assets/logos/wombat_dark.png
new file mode 100644
index 000000000..f5133807f
Binary files /dev/null and b/assets/logos/wombat_dark.png differ
diff --git a/assets/logos/wombat.png b/assets/logos/wombat_light.png
similarity index 100%
rename from assets/logos/wombat.png
rename to assets/logos/wombat_light.png
diff --git a/assets/main.scss b/assets/main.scss
index fa66a2925..e12609bb4 100755
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -23,6 +23,12 @@ body {
   transition: 0.3s;
 }
 
+body {
+  overflow-x: hidden;
+  overflow-y: visible;
+  height: 100vh;
+}
+
 .j-container {
   width: 100%;
   margin: auto;
@@ -834,6 +840,10 @@ a {
   color: var(--text-grey-thirdly) !important;
 }
 
+.color-green {
+  color: var(--main-green) !important;
+}
+
 .weight-700 {
   font-weight: 700;
 }
@@ -943,6 +953,19 @@ a {
 .gap-6 {
   gap: 6px;
 }
+.fs-14 {
+  font-size: 14px;
+}
+.fs-48 {
+  font-size: 48px;
+}
+.fs-24 {
+  font-size: 24px;
+}
+
+.br-4 {
+  border-radius: 4px;
+}
 
 .gap-8 {
   gap: 8px;
@@ -1030,6 +1053,9 @@ a {
   color: var(--text-contrast) !important;
 }
 
+.grey-border {
+  border: 1px solid var(--border-color);  
+}
 .active-border {
   border: 1px solid var(--main-green);
   height: fit-content;
@@ -1101,3 +1127,19 @@ a {
 .rot-90 {
   transform: rotate(90deg) !important;
 }
+
+.text-decoration-underline {
+  text-decoration: underline;
+}
+.gap-16 {
+  gap: 16px;
+}
+.gap-21 {
+  gap: 21px;
+}
+.gap-30 {
+  gap: 30px;
+}
+.gap-32 {
+  gap: 32px;
+}
diff --git a/assets/tokens/eos/tlos_eosio.token.png b/assets/tokens/eos/tlos_eosio.token.png
new file mode 100644
index 000000000..acfa036d4
Binary files /dev/null and b/assets/tokens/eos/tlos_eosio.token.png differ
diff --git a/assets/tokens/eos/utx-ibc.wt.ux.png b/assets/tokens/eos/utx_eosio.tocken.png
similarity index 100%
rename from assets/tokens/eos/utx-ibc.wt.ux.png
rename to assets/tokens/eos/utx_eosio.tocken.png
diff --git a/assets/tokens/eos/utx_ibc.wt.ux.png b/assets/tokens/eos/utx_ibc.wt.ux.png
new file mode 100644
index 000000000..d5ab29633
Binary files /dev/null and b/assets/tokens/eos/utx_ibc.wt.ux.png differ
diff --git a/assets/tokens/proton/fsh_fishtankdao.png b/assets/tokens/proton/fsh_fishtankdao.png
new file mode 100644
index 000000000..bebda9c90
Binary files /dev/null and b/assets/tokens/proton/fsh_fishtankdao.png differ
diff --git a/assets/tokens/telos/eos_eosio.token.png b/assets/tokens/telos/eos_eosio.token.png
new file mode 100755
index 000000000..f671fbc55
Binary files /dev/null and b/assets/tokens/telos/eos_eosio.token.png differ
diff --git a/assets/tokens/telos/eos_ibc.wt.eos.png b/assets/tokens/telos/eos_ibc.wt.eos.png
index 09a12b1d3..8cdf9bd48 100644
Binary files a/assets/tokens/telos/eos_ibc.wt.eos.png and b/assets/tokens/telos/eos_ibc.wt.eos.png differ
diff --git a/assets/tokens/wax/eos_eosio.token.png b/assets/tokens/wax/eos_eosio.token.png
new file mode 100755
index 000000000..f671fbc55
Binary files /dev/null and b/assets/tokens/wax/eos_eosio.token.png differ
diff --git a/assets/tokens/wax/eos_ibc.wt.eos.png b/assets/tokens/wax/eos_ibc.wt.eos.png
new file mode 100644
index 000000000..8cdf9bd48
Binary files /dev/null and b/assets/tokens/wax/eos_ibc.wt.eos.png differ
diff --git a/assets/tokens/wax/tlos_eosio.token.png b/assets/tokens/wax/tlos_eosio.token.png
new file mode 100644
index 000000000..acfa036d4
Binary files /dev/null and b/assets/tokens/wax/tlos_eosio.token.png differ
diff --git a/assets/tokens/wax/tlos_ibc.wt.tlos.png b/assets/tokens/wax/tlos_ibc.wt.tlos.png
new file mode 100644
index 000000000..acfa036d4
Binary files /dev/null and b/assets/tokens/wax/tlos_ibc.wt.tlos.png differ
diff --git a/assets/tokens/wax/utx_eosio.token.png b/assets/tokens/wax/utx_eosio.token.png
new file mode 100644
index 000000000..d5ab29633
Binary files /dev/null and b/assets/tokens/wax/utx_eosio.token.png differ
diff --git a/assets/tokens/wax/utx_ibc.wt.ux.png b/assets/tokens/wax/utx_ibc.wt.ux.png
new file mode 100644
index 000000000..d5ab29633
Binary files /dev/null and b/assets/tokens/wax/utx_ibc.wt.ux.png differ
diff --git a/components/AlcorButton.vue b/components/AlcorButton.vue
index f02586be2..7a0e42e02 100644
--- a/components/AlcorButton.vue
+++ b/components/AlcorButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    :class="['alcor-button', { flat, alternative, access, danger, outline, transparent, iconOnly, iconOnlyAlt, round, big, compact }]"
+    :class="['alcor-button', { flat, alternative, access, orange, danger, outline, transparent, iconOnly, iconOnlyAlt, round, big, compact }]"
     @click.prevent="$emit('click')"
     v-bind="$attrs">
     <div class="inner">
@@ -29,6 +29,10 @@ export default {
       default: false,
       type: Boolean
     },
+    orange: {
+      default: false,
+      type: Boolean
+    },
     outline: {
       default: false,
       type: Boolean
@@ -85,6 +89,9 @@ button {
   &.active {
     background: var(--hover);
   }
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .alcor-button .vs-icon {
@@ -95,7 +102,7 @@ button {
   background: transparent;
 }
 
-.alcor-button:hover {
+.alcor-button:hover:not([disabled]) {
   background: var(--hover);
 }
 
@@ -119,6 +126,23 @@ button {
   background: var(--btn-outline);
 }
 
+.alcor-button.orange {
+  background: linear-gradient(90deg, #854000 0%, #FF8A00 100%);
+  border: 1px solid #854000;
+}
+
+.alcor-button.orange:hover {
+  background: transparent;
+  border: 1px solid #FF8A00;
+  color: #FF8A00;
+}
+
+.alcor-button.orange:disabled {
+  background: transparent;
+  border: 1px solid #854000;
+  color: #854000;
+}
+
 .alcor-button.danger {
   background: var(--main-action-red);
   border: 1px solid var(--main-action-red);
diff --git a/components/AlcorContainer.vue b/components/AlcorContainer.vue
new file mode 100644
index 000000000..3f9e3d7e4
--- /dev/null
+++ b/components/AlcorContainer.vue
@@ -0,0 +1,12 @@
+<template lang="pug">
+#alcor-container.p-3
+  slot
+
+</template>
+
+<style lang="scss">
+#alcor-container {
+  background-color: var(--background-color-third);
+  border-radius: 8px;
+}
+</style>
diff --git a/components/AlcorLink.vue b/components/AlcorLink.vue
index 3ad2eadf3..8879eda35 100644
--- a/components/AlcorLink.vue
+++ b/components/AlcorLink.vue
@@ -48,7 +48,7 @@ button {
 .alcor-button {
   padding: 6px 10px;
   border-radius: var(--radius);
-  color: var(--text-default) !important;
+  color: var(--text-default);
   background: var(--btn-default);
   transition: all 0.3s;
   display: inline-block;
diff --git a/components/AlcorModal.vue b/components/AlcorModal.vue
index 8d28f9c96..3d4a68379 100644
--- a/components/AlcorModal.vue
+++ b/components/AlcorModal.vue
@@ -1,17 +1,15 @@
 <template lang="pug">
-el-dialog.alcor-modal-component(
+el-dialog#alcor-modal-component(
   :visible="visible"
   :before-close="close"
 )
-  slot [body slot]
+  slot
 </template>
 
 <script>
 import { mapState } from 'vuex'
 
 export default {
-  props: ['isVisible'],
-
   computed: {
     ...mapState('modal', ['visible'])
   },
@@ -25,8 +23,11 @@ export default {
 </script>
 
 <style lang="scss">
-.alcor-modal-component {
-  .el-dialog__header {
+#alcor-modal-component {
+
+  .el-dialog__header,
+  .el-dialog__body,
+  .el-dialog__footer {
     padding: 0;
   }
 
@@ -56,6 +57,10 @@ export default {
       }
     }
   }
+  .el-dialog__headerbtn {
+    top: 15px;
+    right: 15px;
+  }
 
   .el-dialog__close {
     font-weight: 800;
diff --git a/components/AlcorSelect.vue b/components/AlcorSelect.vue
new file mode 100644
index 000000000..8e516bd01
--- /dev/null
+++ b/components/AlcorSelect.vue
@@ -0,0 +1,72 @@
+<template lang="pug">
+el-select(
+  class="alcor-select"
+  popper-class="alcor-select___dropdown"
+  :value="value"
+  @change="value => { $emit('update:value', value); $emit('change', value); }"
+  v-bind="$attrs"
+)
+  template(#prefix)
+    slot(name="prefix" :value="value")
+  el-option(
+    v-for="option in options"
+    :key="option.value"
+    :label="option.label"
+    :value="option.value"
+    :disabled="option.disabled"
+  )
+    slot(name="option" :option="option")
+
+</template>
+
+<script>
+export default {
+  name: 'AlcorSelect',
+  props: ['options', 'value']
+}
+</script>
+
+<style lang="scss">
+.alcor-select {
+
+  & .el-input.is-focus .el-input__inner,
+  & .el-input.is-active .el-input__inner,
+  & .el-input__inner:focus,
+  &:hover .el-input__inner {
+    border-color: var(--main-green) !important;
+  }
+
+  & .el-input__inner,
+  & .el-input--prefix .el-input__inner {
+    background: var(--select-color);
+    border-radius: 4px;
+    padding-left: 35px;
+  }
+
+  & .el-input__prefix {
+    display: flex;
+    left: 12px;
+    align-items: center;
+  }
+
+}
+
+.alcor-select___dropdown {
+  border-radius: 4px !important;
+  margin-top: 4px !important;
+
+  & .el-scrollbar {
+    border-radius: 4px !important;
+  }
+
+  & .el-scrollbar__wrap {
+    background: var(--select-color);
+    overflow-x: hidden;
+  }
+
+  & .el-select-dropdown__item {
+    padding: 0 10px;
+  }
+
+}
+</style>
diff --git a/components/CompactTabs.vue b/components/CompactTabs.vue
new file mode 100644
index 000000000..aca932a5d
--- /dev/null
+++ b/components/CompactTabs.vue
@@ -0,0 +1,52 @@
+<template lang="pug">
+#compact-tabs-component.d-flex.w-100
+  .tab.pointer(
+    v-for="{ label, value } in tabs"
+    :class="{ active: value === active }"
+    @click="$emit('update:active', value)"
+  )
+    .p-2.d-flex.align-items-center.justify-content-center.gap-8
+      slot(name="tab" :tab="{ label, value }") {{ label }}
+</template>
+
+<script>
+export default {
+  props: ['tabs', 'active']
+}
+</script>
+
+<style scoped lang="scss">
+.tab {
+  -ms-flex: 1;
+  flex: 1;
+  border: var(--border-1);
+  border-left: 0;
+  position: relative;
+  color: var(--text-disable);
+
+  &:last-of-type {
+    border-right: 0;
+  }
+
+  &::after {
+    transition: all .3s;
+    opacity: 0;
+    transform: scale(0, 1);
+    content: '';
+    position: absolute;
+    display: block;
+    width: 100%;
+    border-bottom: 1px solid white;
+  }
+
+  &.active {
+    color: var(--text-default);
+  }
+
+  &.active::after {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+
+}
+</style>
diff --git a/components/LangOption.vue b/components/LangOption.vue
index 4d563b4a2..a4c329e40 100644
--- a/components/LangOption.vue
+++ b/components/LangOption.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="d-flex align-items-center lang-option" @click="changeLang" @touchstart="changeLang">
+  <div
+    class="d-flex align-items-center lang-option"
+    @click="changeLang"
+    @touchstart="changeLang"
+  >
     <icon :icon="icons[code]" />
     <span>{{ labels[code] }}</span>
   </div>
@@ -42,5 +46,6 @@ export default {
 .lang-option {
   gap: 8px;
   font-size: 12px;
+  width: 235px;
 }
 </style>
diff --git a/components/MarketRow.vue b/components/MarketRow.vue
index 37f71538f..0326a1f5a 100644
--- a/components/MarketRow.vue
+++ b/components/MarketRow.vue
@@ -44,7 +44,10 @@ export default {
   },
   methods: {
     redirect() {
-      this.$router.push({ name: `trade-index-id___${this.$i18n.locale}`, params: { id: this.item.slug } })
+      this.$router.push({
+        name: `trade-index-id___${this.$i18n.locale}`,
+        params: { id: this.item.slug }
+      })
     }
   }
 }
@@ -85,13 +88,13 @@ export default {
   text-align: right;
 }
 
-.wrapper.mobile>.last-price,
-.wrapper.mobile>.week-vol {
+.wrapper.mobile > .last-price,
+.wrapper.mobile > .week-vol {
   width: 33%;
 }
 
-.wrapper.mobile>.label,
-.wrapper.mobile>.promoted {
+.wrapper.mobile > .label,
+.wrapper.mobile > .promoted {
   width: 16%;
 }
 
@@ -126,7 +129,7 @@ export default {
 
 .name {
   display: flex;
-  gap: .3rem;
+  gap: 0.3rem;
   position: relative;
 }
 
@@ -135,8 +138,8 @@ export default {
 }
 
 .promo-label {
-  color: #1FC781;
-  border: 1px solid #66C167;
+  color: #1fc781;
+  border: 1px solid #66c167;
   border-radius: 4px;
   padding: 0 4px;
   position: absolute;
@@ -148,7 +151,7 @@ export default {
 }
 
 .last-price {
-  color: var(--main-green)
+  color: var(--main-green);
 }
 
 .last-price.down {
diff --git a/components/PoolRow.vue b/components/PoolRow.vue
new file mode 100644
index 000000000..ba2556e2c
--- /dev/null
+++ b/components/PoolRow.vue
@@ -0,0 +1,110 @@
+<template lang="pug">
+#pool-row-component.d-flex.align-items-center.p-3
+  .icons
+    pair-icons(
+      :token1="pool.input"
+      :token2="pool.output"
+    )
+  .d-flex.align-items-center.gap-10.name
+    .fs-14 {{ pool.input.symbol }} / {{ pool.output.symbol }}
+    .tag {{ pool.percent }}%
+  .range.d-flex.flex-column
+    .d-flex.align-items-center.gap-4
+      .indicator(:class="{ 'in-range': pool.inRange }")
+      .fs-10 {{ pool.inRange ? 'In Range': 'Out of Range' }}
+    .d-flex.align-items-center.gap-6
+      .fs-14.disable MIN
+      .fs-14.contrast {{ pool.min }}
+      i.el-icon-sort.rot
+      .fs-14.disable MAX
+      .fs-14.contrast {{ pool.max }}
+  .earning.d-flex.flex-column.gap-4
+    .d-flex.align-items-center.gap-4
+      token-image.token(:src='$tokenLogo(pool.input.symbol, pool.input.contract)')
+      .fs-12.earn.d-flex.gap-4(:class="{ red: pool.inputEarning < 0 }")
+        span {{ pool.inputEarning > 0 ? '+': '' }}{{ pool.inputEarning | commaFloat }}
+        span {{ pool.input.symbol }}
+    .d-flex.align-items-center.gap-4
+      token-image.token(:src='$tokenLogo(pool.output.symbol, pool.output.contract)')
+      .fs-12.earn.d-flex.gap-4(:class="{ red: pool.outputEarning < 0 }")
+        span {{ pool.outputEarning > 0 ? '+': '' }}{{ pool.outputEarning | commaFloat }}
+        span {{ pool.output.symbol }}
+  .actions.d-flex.gap-16
+    .action-link.manage Manage
+    .action-link.claim Claim
+
+</template>
+
+<script>
+import PairIcons from '~/components/PairIcons'
+import TokenImage from '~/components/elements/TokenImage'
+
+export default {
+  components: { PairIcons, TokenImage },
+  props: ['pool']
+}
+</script>
+
+<style lang="scss">
+#pool-row-component {
+  .rot {
+    transform: rotate(90deg);
+  }
+  .icons {
+    width: 50px;
+  }
+  .name {
+    width: 150px;
+  }
+  .range {
+    width: 200px;
+  }
+  .earning {
+    width: 150px;
+  }
+  .actions {
+    width: 150px;
+  }
+
+  .tag {
+    border: var(--border-1);
+    background: var(--bg-alter-2);
+    font-size: 10px;
+    line-height: 12px;
+    padding: 4px;
+    border-radius: 4px;
+  }
+  .indicator {
+    width: 8px;
+    height: 8px;
+
+    background: var(--disabled-indicator);
+    border-radius: 2px;
+
+    &.in-range {
+      background: var(--access-indicator);
+    }
+  }
+  .token {
+    width: 12px;
+    height: 12px;
+  }
+  .earn {
+    color: var(--main-green);
+    &.red {
+      color: var(--main-red);
+    }
+  }
+  .action-link {
+    text-decoration: underline;
+    cursor: pointer;
+    &.manage {
+      color: #80A1C5;
+    }
+    &.claim {
+      color: #66C167;
+    }
+  }
+
+}
+</style>
diff --git a/components/ThemeOption.vue b/components/ThemeOption.vue
index e99ad6a8c..7cb50af50 100644
--- a/components/ThemeOption.vue
+++ b/components/ThemeOption.vue
@@ -24,6 +24,7 @@ export default {
   gap: 8px;
   font-size: 12px;
   justify-content: space-between;
+  width: 235px;
 
   &__pickers {
     display: flex;
diff --git a/components/TokenOption.vue b/components/TokenOption.vue
new file mode 100644
index 000000000..1d861ed69
--- /dev/null
+++ b/components/TokenOption.vue
@@ -0,0 +1,20 @@
+<template lang="pug">
+.token-option(@click="changeToken") {{ token }}
+</template>
+
+<script>
+export default {
+  props: ['token'],
+  methods: {
+    changeToken() {
+      this.$emit('click', this.token)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.token-option {
+  width: 350px;
+}
+</style>
diff --git a/components/TokenSelect.vue b/components/TokenSelect.vue
new file mode 100644
index 000000000..8404e343a
--- /dev/null
+++ b/components/TokenSelect.vue
@@ -0,0 +1,161 @@
+<template lang="pug">
+element-select.token-select(:options="[1]" :disableList="true")
+  template(#preOptions v-show="visible")
+    el-input.search(v-model='search' placeholder="Search by name or contract")
+    recycle-scroller.scroller(:emit-update="true" class="scroller" :items="tokensFiltered" :item-size="42")
+      template(v-slot="{ item: token }")
+        .token.d-flex.justify-content-between.align-items-center.p-2(@click="changeSelected(token)" :class="{ active: isActiveToken(token) }")
+          .d-flex.gap-8.align-items-center
+            token-image(:src="$tokenLogo(token.symbol, token.contract)" height="24")
+            .fs-16.color-default {{ token.symbol }}
+            .text-muted.small {{ token.contract }}
+
+          .ml-auto(v-if="$store.state.user")
+            .text-muted {{ token.balance | commaFloat }}
+
+  template(#selected)
+    .d-flex.gap-8.align-items-center.pr-2
+      el-input.amount(v-model.number="amountValue" @blur="blur" type="number" :placeholder="0.0" :clearable="!disabled" :disabled="disabled")
+      token-image(:src='$tokenLogo(token.symbol, token.contract)' height="24")
+      .fs-24.color-default.text-nowrap {{ token.symbol }}
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import AlcorSelect from '~/components/AlcorSelect'
+import ElementSelect from '~/components/elements/ElementSelect'
+import TokenOption from '~/components/TokenOption'
+import TokenImage from '~/components/elements/TokenImage'
+
+export default {
+  components: {
+    ElementSelect,
+    AlcorSelect,
+    TokenOption,
+    TokenImage
+  },
+  props: ['token', 'amount', 'disabled'],
+  data: () => ({
+    search: ''
+  }),
+  computed: {
+    amountValue: {
+      get() {
+        return this.amount
+      },
+      set(value) {
+        this.$emit('update:amount', value)
+      }
+    },
+    //TODO mock tokens
+    ...mapGetters({
+      tokens0: 'swap/tokens0'
+    }),
+    //mock tokens
+    tokensFiltered() {
+      return this.tokens0
+        .filter((t) => {
+          const s = (t.symbol + '@' + t.contract).toLowerCase()
+          return s.includes(this.search.toLowerCase())
+        })
+        .map((t) => {
+          t.balance = this.$tokenBalance(t.symbol || t.currency, t.contract)
+          return t
+        })
+        .sort((a, b) => {
+          return a.balance == '0.0000' ? 1 : -1
+        })
+        .sort((a, b) =>
+          parseFloat(a.balance) < parseFloat(b.balance) ? 1 : -1
+        )
+    }
+  },
+  methods: {
+    blur() {
+      this.$emit(
+        'update:amount',
+        (+this.amount || 0).toFixed(this.token.precision)
+      )
+    },
+    isActiveToken(token) {
+      return (
+        this.token.contract == token.contract &&
+        this.token.symbol == token.symbol
+      )
+    },
+    changeSelected(token) {
+      this.$emit('update:token', token)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.token-select {
+  padding: 10px 16px !important;
+  border-radius: 4px !important;
+}
+.token-select,
+.el-popup-parent--hidden {
+
+  .scroller {
+    padding: 0px 10px;
+  }
+
+  .search {
+    width: 373px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    padding: 10px;
+    background: var(--background-color-base);
+
+    .el-input__inner {
+      background: var(--background-color-secondary);
+      font-size: 12px;
+      border-radius: 4px;
+    }
+  }
+
+  .amount {
+    .el-input__inner {
+      font-size: 18px;
+    }
+    &.is-disabled {
+      .el-input__inner {
+        background-color: var(--background-color-secondary);
+      }
+    }
+  }
+
+  .selected svg {
+    width: 10px;
+    height: 10px;
+  }
+  .selected svg[data-icon='dollar'] {
+    height: 40px;
+    width: 40px;
+  }
+
+  .el-dropdown-menu.element-options {
+    top: 60px;
+    padding: 0;
+    border-radius: 5px;
+    border: none;
+    max-height: 300px;
+  }
+
+  .el-input {
+    font-size: 16px;
+  }
+
+  .token {
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  .token:hover,
+  .token.active {
+    background: var(--background-color-secondary);
+  }
+}
+</style>
diff --git a/components/alcor-element/button/button-group.vue b/components/alcor-element/button/button-group.vue
new file mode 100644
index 000000000..cb245b227
--- /dev/null
+++ b/components/alcor-element/button/button-group.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="el-button-group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ElButtonGroup'
+}
+</script>
diff --git a/components/alcor-element/button/button.vue b/components/alcor-element/button/button.vue
new file mode 100644
index 000000000..2b35b8769
--- /dev/null
+++ b/components/alcor-element/button/button.vue
@@ -0,0 +1,239 @@
+<template>
+  <button
+    class="el-button"
+    @click="handleClick"
+    :disabled="buttonDisabled || loading"
+    :autofocus="autofocus"
+    :type="nativeType"
+    :class="[
+      type ? 'el-button--' + type : '',
+      buttonSize ? 'el-button--' + buttonSize : '',
+      {
+        'is-disabled': buttonDisabled,
+        'is-loading': loading,
+        'is-plain': plain,
+        'is-round': round,
+        'is-circle': circle
+      }
+    ]"
+  >
+    <i class="el-icon-loading" v-if="loading"></i>
+    <i :class="icon" v-if="icon && !loading"></i>
+    <span v-if="$slots.default"><slot></slot></span>
+  </button>
+</template>
+<script>
+export default {
+  name: 'ElButton',
+
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: String,
+    icon: {
+      type: String,
+      default: ''
+    },
+    nativeType: {
+      type: String,
+      default: 'button'
+    },
+    loading: Boolean,
+    disabled: Boolean,
+    plain: Boolean,
+    autofocus: Boolean,
+    round: Boolean,
+    circle: Boolean
+  },
+
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize
+    },
+    buttonSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
+    },
+    buttonDisabled() {
+      return this.$options.propsData.hasOwnProperty('disabled')
+        ? this.disabled
+        : (this.elForm || {}).disabled
+    }
+  },
+
+  methods: {
+    handleClick(evt) {
+      this.$emit('click', evt)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+button {
+  border: none;
+  font-family: 'Sans', sans-serif;
+  color: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.alcor-button {
+  padding: 6px 10px;
+  border-radius: var(--radius);
+  color: var(--text-default);
+  background: var(--btn-default);
+  transition: all 0.3s;
+  display: inline-block;
+
+  &.alternative {
+    background: var(--btn-alternative);
+  }
+
+  &.active {
+    background: var(--hover);
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.alcor-button .vs-icon {
+  margin: 0 2px;
+}
+
+.alcor-button.flat {
+  background: transparent;
+}
+
+.alcor-button:hover:not([disabled]) {
+  background: var(--hover);
+}
+
+.alcor-button.flat:hover {
+  box-shadow: none;
+}
+
+.alcor-button.round {
+  border-radius: 40px;
+  padding: 6px 14px;
+}
+
+.alcor-button.outline {
+  background: transparent;
+  border: 1px solid var(--main-action-green);
+  color: var(--main-action-green);
+}
+
+.alcor-button.outline:hover {
+  box-shadow: 0px 0px 30px 0px #54A05466 inset;
+  background: var(--btn-outline);
+}
+
+.alcor-button.orange {
+  background: linear-gradient(90deg, #854000 0%, #FF8A00 100%);
+  border: 1px solid #854000;
+}
+
+.alcor-button.orange:hover {
+  background: transparent;
+  border: 1px solid #FF8A00;
+  color: #FF8A00;
+}
+
+.alcor-button.orange:disabled {
+  background: transparent;
+  border: 1px solid #854000;
+  color: #854000;
+}
+
+.alcor-button.danger {
+  background: var(--main-action-red);
+  border: 1px solid var(--main-action-red);
+  color: var(--text-theme);
+}
+
+.alcor-button.danger:hover {
+  background: transparent;
+  color: var(--main-action-red);
+  border: 1px solid var(--main-action-red);
+}
+
+.alcor-button.danger:disabled {
+  background: var(--main-action-red);
+  border: 1px solid var(--main-action-red);
+  color: var(--text-theme);
+  filter: brightness(50%);
+  cursor: not-allowed;
+}
+
+.alcor-button.access {
+  background: var(--main-action-green);
+  border: 1px solid var(--main-action-green);
+  color: var(--text-theme);
+}
+
+.alcor-button.access:hover {
+  background: transparent;
+  color: var(--main-action-green);
+  border: 1px solid var(--main-action-green);
+}
+
+.alcor-button.access:disabled {
+  background: var(--main-action-green);
+  border: 1px solid var(--main-action-green);
+  color: var(--text-theme);
+  filter: brightness(50%);
+  cursor: not-allowed;
+}
+
+.alcor-button.compact {
+  padding: 4px 12px;
+}
+
+.alcor-button.big {
+  padding: 12px;
+  width: 135px;
+  border-radius: var(--radius-2);
+}
+
+.inner {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+}
+
+.iconOnly {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alcor-button.iconOnlyAlt {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/components/alcor-element/input/index.js b/components/alcor-element/input/index.js
new file mode 100644
index 000000000..0f2400ef6
--- /dev/null
+++ b/components/alcor-element/input/index.js
@@ -0,0 +1,8 @@
+import ElInput from './src/input'
+
+/* istanbul ignore next */
+ElInput.install = function(Vue) {
+  Vue.component(ElInput.name, ElInput)
+}
+
+export default ElInput
diff --git a/components/alcor-element/input/src/calcTextareaHeight.js b/components/alcor-element/input/src/calcTextareaHeight.js
new file mode 100644
index 000000000..d7872ec6c
--- /dev/null
+++ b/components/alcor-element/input/src/calcTextareaHeight.js
@@ -0,0 +1,103 @@
+let hiddenTextarea
+
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important
+`
+
+const CONTEXT_STYLE = [
+  'letter-spacing',
+  'line-height',
+  'padding-top',
+  'padding-bottom',
+  'font-family',
+  'font-weight',
+  'font-size',
+  'text-rendering',
+  'text-transform',
+  'width',
+  'text-indent',
+  'padding-left',
+  'padding-right',
+  'border-width',
+  'box-sizing'
+]
+
+function calculateNodeStyling(targetElement) {
+  const style = window.getComputedStyle(targetElement)
+
+  const boxSizing = style.getPropertyValue('box-sizing')
+
+  const paddingSize =
+    parseFloat(style.getPropertyValue('padding-bottom')) +
+    parseFloat(style.getPropertyValue('padding-top'))
+
+  const borderSize =
+    parseFloat(style.getPropertyValue('border-bottom-width')) +
+    parseFloat(style.getPropertyValue('border-top-width'))
+
+  const contextStyle = CONTEXT_STYLE.map(
+    (name) => `${name}:${style.getPropertyValue(name)}`
+  ).join(';')
+
+  return { contextStyle, paddingSize, borderSize, boxSizing }
+}
+
+export default function calcTextareaHeight(
+  targetElement,
+  minRows = 1,
+  maxRows = null
+) {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement('textarea')
+    document.body.appendChild(hiddenTextarea)
+  }
+
+  let {
+    paddingSize,
+    borderSize,
+    boxSizing,
+    contextStyle
+  } = calculateNodeStyling(targetElement)
+
+  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || ''
+
+  let height = hiddenTextarea.scrollHeight
+  const result = {}
+
+  if (boxSizing === 'border-box') {
+    height = height + borderSize
+  } else if (boxSizing === 'content-box') {
+    height = height - paddingSize
+  }
+
+  hiddenTextarea.value = ''
+  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize
+
+  if (minRows !== null) {
+    let minHeight = singleRowHeight * minRows
+    if (boxSizing === 'border-box') {
+      minHeight = minHeight + paddingSize + borderSize
+    }
+    height = Math.max(minHeight, height)
+    result.minHeight = `${minHeight}px`
+  }
+  if (maxRows !== null) {
+    let maxHeight = singleRowHeight * maxRows
+    if (boxSizing === 'border-box') {
+      maxHeight = maxHeight + paddingSize + borderSize
+    }
+    height = Math.min(maxHeight, height)
+  }
+  result.height = `${height}px`
+  hiddenTextarea.parentNode &&
+    hiddenTextarea.parentNode.removeChild(hiddenTextarea)
+  hiddenTextarea = null
+  return result
+}
diff --git a/components/alcor-element/input/src/input.vue b/components/alcor-element/input/src/input.vue
new file mode 100644
index 000000000..ba7678d8d
--- /dev/null
+++ b/components/alcor-element/input/src/input.vue
@@ -0,0 +1,462 @@
+<template>
+  <div
+    :class="[
+      type === 'textarea' ? 'el-textarea' : 'el-input',
+      inputSize ? 'el-input--' + inputSize : '',
+      {
+        'is-disabled': inputDisabled,
+        'is-exceed': inputExceed,
+        'el-input-group': $slots.prepend || $slots.append,
+        'el-input-group--append': $slots.append,
+        'el-input-group--prepend': $slots.prepend,
+        'el-input--prefix': $slots.prefix || prefixIcon,
+        'el-input--suffix':
+          $slots.suffix || suffixIcon || clearable || showPassword
+      }
+    ]"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <template v-if="type !== 'textarea'">
+      <!-- 前置元素 -->
+      <div class="el-input-group__prepend" v-if="$slots.prepend">
+        <slot name="prepend"></slot>
+      </div>
+      <input
+        :tabindex="tabindex"
+        v-if="type !== 'textarea'"
+        class="el-input__inner"
+        v-bind="$attrs"
+        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
+        :disabled="inputDisabled"
+        :readonly="readonly"
+        :autocomplete="autoComplete || autocomplete"
+        ref="input"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @change="handleChange"
+        :aria-label="label"
+      />
+      <!-- 前置内容 -->
+      <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
+        <slot name="prefix"></slot>
+        <i class="el-input__icon" v-if="prefixIcon" :class="prefixIcon"> </i>
+      </span>
+      <!-- 后置内容 -->
+      <span class="el-input__suffix" v-if="getSuffixVisible()">
+        <span class="el-input__suffix-inner">
+          <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
+            <slot name="suffix"></slot>
+            <i class="el-input__icon" v-if="suffixIcon" :class="suffixIcon">
+            </i>
+          </template>
+          <i
+            v-if="showClear"
+            class="el-input__icon el-icon-circle-close el-input__clear"
+            @mousedown.prevent
+            @click="clear"
+          ></i>
+          <i
+            v-if="showPwdVisible"
+            class="el-input__icon el-icon-view el-input__clear"
+            @click="handlePasswordVisible"
+          ></i>
+          <span v-if="isWordLimitVisible" class="el-input__count">
+            <span class="el-input__count-inner">
+              {{ textLength }}/{{ upperLimit }}
+            </span>
+          </span>
+        </span>
+        <i
+          class="el-input__icon"
+          v-if="validateState"
+          :class="['el-input__validateIcon', validateIcon]"
+        >
+        </i>
+      </span>
+      <!-- 后置元素 -->
+      <div class="el-input-group__append" v-if="$slots.append">
+        <slot name="append"></slot>
+      </div>
+    </template>
+    <textarea
+      v-else
+      :tabindex="tabindex"
+      class="el-textarea__inner"
+      @compositionstart="handleCompositionStart"
+      @compositionupdate="handleCompositionUpdate"
+      @compositionend="handleCompositionEnd"
+      @input="handleInput"
+      ref="textarea"
+      v-bind="$attrs"
+      :disabled="inputDisabled"
+      :readonly="readonly"
+      :autocomplete="autoComplete || autocomplete"
+      :style="textareaStyle"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      :aria-label="label"
+    >
+    </textarea>
+    <span
+      v-if="isWordLimitVisible && type === 'textarea'"
+      class="el-input__count"
+      >{{ textLength }}/{{ upperLimit }}</span
+    >
+  </div>
+</template>
+<script>
+import emitter from 'element-ui/lib/mixins/emitter'
+import Migrating from 'element-ui/lib/mixins/migrating'
+import calcTextareaHeight from './calcTextareaHeight'
+import merge from 'element-ui/lib/utils/merge'
+import { isKorean } from 'element-ui/lib/utils/shared'
+
+export default {
+  name: 'ElInput',
+
+  componentName: 'ElInput',
+
+  mixins: [emitter, Migrating],
+
+  inheritAttrs: false,
+
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      textareaCalcStyle: {},
+      hovering: false,
+      focused: false,
+      isComposing: false,
+      passwordVisible: false
+    }
+  },
+
+  props: {
+    value: [String, Number],
+    size: String,
+    resize: String,
+    form: String,
+    disabled: Boolean,
+    readonly: Boolean,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: false
+    },
+    autocomplete: {
+      type: String,
+      default: 'off'
+    },
+    /** @Deprecated in next major version */
+    autoComplete: {
+      type: String,
+      validator(val) {
+        process.env.NODE_ENV !== 'production' &&
+          console.warn(
+            "[Element Warn][Input]'auto-complete' property will be deprecated in next major version. please use 'autocomplete' instead."
+          )
+        return true
+      }
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    },
+    suffixIcon: String,
+    prefixIcon: String,
+    label: String,
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    showPassword: {
+      type: Boolean,
+      default: false
+    },
+    showWordLimit: {
+      type: Boolean,
+      default: false
+    },
+    tabindex: String
+  },
+
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize
+    },
+    validateState() {
+      return this.elFormItem ? this.elFormItem.validateState : ''
+    },
+    needStatusIcon() {
+      return this.elForm ? this.elForm.statusIcon : false
+    },
+    validateIcon() {
+      return {
+        validating: 'el-icon-loading',
+        success: 'el-icon-circle-check',
+        error: 'el-icon-circle-close'
+      }[this.validateState]
+    },
+    textareaStyle() {
+      return merge({}, this.textareaCalcStyle, { resize: this.resize })
+    },
+    inputSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
+    },
+    inputDisabled() {
+      return this.disabled || (this.elForm || {}).disabled
+    },
+    nativeInputValue() {
+      return this.value === null || this.value === undefined
+        ? ''
+        : String(this.value)
+    },
+    showClear() {
+      return (
+        this.clearable &&
+        !this.inputDisabled &&
+        !this.readonly &&
+        this.nativeInputValue &&
+        (this.focused || this.hovering)
+      )
+    },
+    showPwdVisible() {
+      return (
+        this.showPassword &&
+        !this.inputDisabled &&
+        !this.readonly &&
+        (!!this.nativeInputValue || this.focused)
+      )
+    },
+    isWordLimitVisible() {
+      return (
+        this.showWordLimit &&
+        this.$attrs.maxlength &&
+        (this.type === 'text' || this.type === 'textarea') &&
+        !this.inputDisabled &&
+        !this.readonly &&
+        !this.showPassword
+      )
+    },
+    upperLimit() {
+      return this.$attrs.maxlength
+    },
+    textLength() {
+      if (typeof this.value === 'number') {
+        return String(this.value).length
+      }
+
+      return (this.value || '').length
+    },
+    inputExceed() {
+      // show exceed style if length of initial value greater then maxlength
+      return this.isWordLimitVisible && this.textLength > this.upperLimit
+    }
+  },
+
+  watch: {
+    value(val) {
+      this.$nextTick(this.resizeTextarea)
+      if (this.validateEvent) {
+        this.dispatch('ElFormItem', 'el.form.change', [val])
+      }
+    },
+    // native input value is set explicitly
+    // do not use v-model / :value in template
+    // see: https://github.com/ElemeFE/element/issues/14521
+    nativeInputValue() {
+      this.setNativeInputValue()
+    },
+    // when change between <input> and <textarea>,
+    // update DOM dependent value and styles
+    // https://github.com/ElemeFE/element/issues/14857
+    type() {
+      this.$nextTick(() => {
+        this.setNativeInputValue()
+        this.resizeTextarea()
+        this.updateIconOffset()
+      })
+    }
+  },
+
+  methods: {
+    focus() {
+      this.getInput().focus()
+    },
+    blur() {
+      this.getInput().blur()
+    },
+    getMigratingConfig() {
+      return {
+        props: {
+          icon: 'icon is removed, use suffix-icon / prefix-icon instead.',
+          'on-icon-click': 'on-icon-click is removed.'
+        },
+        events: {
+          click: 'click is removed.'
+        }
+      }
+    },
+    handleBlur(event) {
+      this.focused = false
+      this.$emit('blur', event)
+      if (this.validateEvent) {
+        this.dispatch('ElFormItem', 'el.form.blur', [this.value])
+      }
+    },
+    select() {
+      this.getInput().select()
+    },
+    resizeTextarea() {
+      if (this.$isServer) return
+      const { autosize, type } = this
+      if (type !== 'textarea') return
+      if (!autosize) {
+        this.textareaCalcStyle = {
+          minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
+        }
+        return
+      }
+      const minRows = autosize.minRows
+      const maxRows = autosize.maxRows
+
+      this.textareaCalcStyle = calcTextareaHeight(
+        this.$refs.textarea,
+        minRows,
+        maxRows
+      )
+    },
+    setNativeInputValue() {
+      const input = this.getInput()
+      if (!input) return
+      if (input.value === this.nativeInputValue) return
+      input.value = this.nativeInputValue
+    },
+    handleFocus(event) {
+      this.focused = true
+      this.$emit('focus', event)
+    },
+    handleCompositionStart(event) {
+      this.$emit('compositionstart', event)
+      this.isComposing = true
+    },
+    handleCompositionUpdate(event) {
+      this.$emit('compositionupdate', event)
+      const text = event.target.value
+      const lastCharacter = text[text.length - 1] || ''
+      this.isComposing = !isKorean(lastCharacter)
+    },
+    handleCompositionEnd(event) {
+      this.$emit('compositionend', event)
+      if (this.isComposing) {
+        this.isComposing = false
+        this.handleInput(event)
+      }
+    },
+    handleInput(event) {
+      // should not emit input during composition
+      // see: https://github.com/ElemeFE/element/issues/10516
+      if (this.isComposing) return
+
+      // hack for https://github.com/ElemeFE/element/issues/8548
+      // should remove the following line when we don't support IE
+      if (event.target.value === this.nativeInputValue) return
+
+      this.$emit('input', event.target.value)
+
+      // ensure native input value is controlled
+      // see: https://github.com/ElemeFE/element/issues/12850
+      this.$nextTick(this.setNativeInputValue)
+    },
+    handleChange(event) {
+      this.$emit('change', event.target.value)
+    },
+    calcIconOffset(place) {
+      let elList = [].slice.call(
+        this.$el.querySelectorAll(`.el-input__${place}`) || []
+      )
+      if (!elList.length) return
+      let el = null
+      for (let i = 0; i < elList.length; i++) {
+        if (elList[i].parentNode === this.$el) {
+          el = elList[i]
+          break
+        }
+      }
+      if (!el) return
+      const pendantMap = {
+        suffix: 'append',
+        prefix: 'prepend'
+      }
+
+      const pendant = pendantMap[place]
+      if (this.$slots[pendant]) {
+        el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${
+          this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth
+        }px)`
+      } else {
+        el.removeAttribute('style')
+      }
+    },
+    updateIconOffset() {
+      this.calcIconOffset('prefix')
+      this.calcIconOffset('suffix')
+    },
+    clear() {
+      this.$emit('input', '')
+      this.$emit('change', '')
+      this.$emit('clear')
+    },
+    handlePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible
+      this.$nextTick(() => {
+        this.focus()
+      })
+    },
+    getInput() {
+      return this.$refs.input || this.$refs.textarea
+    },
+    getSuffixVisible() {
+      return (
+        this.$slots.suffix ||
+        this.suffixIcon ||
+        this.showClear ||
+        this.showPassword ||
+        this.isWordLimitVisible ||
+        (this.validateState && this.needStatusIcon)
+      )
+    }
+  },
+
+  created() {
+    this.$on('inputSelect', this.select)
+  },
+
+  mounted() {
+    this.setNativeInputValue()
+    this.resizeTextarea()
+    this.updateIconOffset()
+  },
+
+  updated() {
+    this.$nextTick(this.updateIconOffset)
+  }
+}
+</script>
diff --git a/components/alcor-element/scrollbar/index.js b/components/alcor-element/scrollbar/index.js
new file mode 100644
index 000000000..177c0a04b
--- /dev/null
+++ b/components/alcor-element/scrollbar/index.js
@@ -0,0 +1,8 @@
+import Scrollbar from './src/main'
+
+/* istanbul ignore next */
+Scrollbar.install = function(Vue) {
+  Vue.component(Scrollbar.name, Scrollbar)
+}
+
+export default Scrollbar
diff --git a/components/alcor-element/scrollbar/src/bar.js b/components/alcor-element/scrollbar/src/bar.js
new file mode 100644
index 000000000..b28de38f7
--- /dev/null
+++ b/components/alcor-element/scrollbar/src/bar.js
@@ -0,0 +1,106 @@
+import { on, off } from 'element-ui/lib/utils/dom'
+import { renderThumbStyle, BAR_MAP } from './util'
+
+/* istanbul ignore next */
+export default {
+  name: 'Bar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+
+  computed: {
+    bar() {
+      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal']
+    },
+
+    wrap() {
+      return this.$parent.wrap
+    }
+  },
+
+  render(h) {
+    const { size, move, bar } = this
+
+    return (
+      <div
+        class={['el-scrollbar__bar', 'is-' + bar.key]}
+        onMousedown={this.clickTrackHandler}
+      >
+        <div
+          ref="thumb"
+          class="el-scrollbar__thumb"
+          onMousedown={this.clickThumbHandler}
+          style={renderThumbStyle({ size, move, bar })}
+        ></div>
+      </div>
+    )
+  },
+
+  methods: {
+    clickThumbHandler(e) {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return
+      }
+      this.startDrag(e)
+      this[this.bar.axis] =
+        e.currentTarget[this.bar.offset] -
+        (e[this.bar.client] -
+          e.currentTarget.getBoundingClientRect()[this.bar.direction])
+    },
+
+    clickTrackHandler(e) {
+      const offset = Math.abs(
+        e.target.getBoundingClientRect()[this.bar.direction] -
+          e[this.bar.client]
+      )
+      const thumbHalf = this.$refs.thumb[this.bar.offset] / 2
+      const thumbPositionPercentage =
+        ((offset - thumbHalf) * 100) / this.$el[this.bar.offset]
+
+      this.wrap[this.bar.scroll] =
+        (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100
+    },
+
+    startDrag(e) {
+      e.stopImmediatePropagation()
+      this.cursorDown = true
+
+      on(document, 'mousemove', this.mouseMoveDocumentHandler)
+      on(document, 'mouseup', this.mouseUpDocumentHandler)
+      document.onselectstart = () => false
+    },
+
+    mouseMoveDocumentHandler(e) {
+      if (this.cursorDown === false) return
+      const prevPage = this[this.bar.axis]
+
+      if (!prevPage) return
+
+      const offset =
+        (this.$el.getBoundingClientRect()[this.bar.direction] -
+          e[this.bar.client]) *
+        -1
+      const thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage
+      const thumbPositionPercentage =
+        ((offset - thumbClickPosition) * 100) / this.$el[this.bar.offset]
+
+      this.wrap[this.bar.scroll] =
+        (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100
+    },
+
+    mouseUpDocumentHandler(e) {
+      this.cursorDown = false
+      this[this.bar.axis] = 0
+      off(document, 'mousemove', this.mouseMoveDocumentHandler)
+      document.onselectstart = null
+    }
+  },
+
+  destroyed() {
+    off(document, 'mouseup', this.mouseUpDocumentHandler)
+  }
+}
diff --git a/components/alcor-element/scrollbar/src/main.js b/components/alcor-element/scrollbar/src/main.js
new file mode 100644
index 000000000..4bc1f2dbd
--- /dev/null
+++ b/components/alcor-element/scrollbar/src/main.js
@@ -0,0 +1,138 @@
+// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
+
+import {
+  addResizeListener,
+  removeResizeListener
+} from 'element-ui/lib/utils/resize-event'
+import scrollbarWidth from 'element-ui/lib/utils/scrollbar-width'
+import { toObject } from 'element-ui/lib/utils/util'
+import Bar from './bar'
+
+/* istanbul ignore next */
+export default {
+  name: 'ElScrollbar',
+
+  components: { Bar },
+
+  props: {
+    native: Boolean,
+    wrapStyle: {},
+    wrapClass: {},
+    viewClass: {},
+    viewStyle: {},
+    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  data() {
+    return {
+      sizeWidth: '0',
+      sizeHeight: '0',
+      moveX: 0,
+      moveY: 0
+    }
+  },
+
+  computed: {
+    wrap() {
+      return this.$refs.wrap
+    }
+  },
+
+  render(h) {
+    let gutter = scrollbarWidth()
+    let style = this.wrapStyle
+
+    if (gutter) {
+      const gutterWith = `-${gutter}px`
+      const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`
+
+      if (Array.isArray(this.wrapStyle)) {
+        style = toObject(this.wrapStyle)
+        style.marginRight = style.marginBottom = gutterWith
+      } else if (typeof this.wrapStyle === 'string') {
+        style += gutterStyle
+      } else {
+        style = gutterStyle
+      }
+    }
+    const view = h(
+      this.tag,
+      {
+        class: ['el-scrollbar__view', this.viewClass],
+        style: this.viewStyle,
+        ref: 'resize'
+      },
+      this.$slots.default
+    )
+    const wrap = (
+      <div
+        ref="wrap"
+        style={style}
+        onScroll={this.handleScroll}
+        class={[
+          this.wrapClass,
+          'el-scrollbar__wrap',
+          gutter ? '' : 'el-scrollbar__wrap--hidden-default'
+        ]}
+      >
+        {[view]}
+      </div>
+    )
+    let nodes
+
+    if (!this.native) {
+      nodes = [
+        wrap,
+        <Bar move={this.moveX} size={this.sizeWidth}></Bar>,
+        <Bar vertical move={this.moveY} size={this.sizeHeight}></Bar>
+      ]
+    } else {
+      nodes = [
+        <div
+          ref="wrap"
+          class={[this.wrapClass, 'el-scrollbar__wrap']}
+          style={style}
+        >
+          {[view]}
+        </div>
+      ]
+    }
+    return h('div', { class: 'el-scrollbar' }, nodes)
+  },
+
+  methods: {
+    handleScroll() {
+      const wrap = this.wrap
+
+      this.moveY = (wrap.scrollTop * 100) / wrap.clientHeight
+      this.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth
+    },
+
+    update() {
+      let heightPercentage, widthPercentage
+      const wrap = this.wrap
+      if (!wrap) return
+
+      heightPercentage = (wrap.clientHeight * 100) / wrap.scrollHeight
+      widthPercentage = (wrap.clientWidth * 100) / wrap.scrollWidth
+
+      this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : ''
+      this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : ''
+    }
+  },
+
+  mounted() {
+    if (this.native) return
+    this.$nextTick(this.update)
+    !this.noresize && addResizeListener(this.$refs.resize, this.update)
+  },
+
+  beforeDestroy() {
+    if (this.native) return
+    !this.noresize && removeResizeListener(this.$refs.resize, this.update)
+  }
+}
diff --git a/components/alcor-element/scrollbar/src/util.js b/components/alcor-element/scrollbar/src/util.js
new file mode 100644
index 000000000..40f98a7f3
--- /dev/null
+++ b/components/alcor-element/scrollbar/src/util.js
@@ -0,0 +1,34 @@
+export const BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top'
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left'
+  }
+}
+
+export function renderThumbStyle({ move, size, bar }) {
+  const style = {}
+  const translate = `translate${bar.axis}(${move}%)`
+
+  style[bar.size] = size
+  style.transform = translate
+  style.msTransform = translate
+  style.webkitTransform = translate
+
+  return style
+}
diff --git a/components/alcor-element/select/navigation-mixin.js b/components/alcor-element/select/navigation-mixin.js
new file mode 100644
index 000000000..4800f525b
--- /dev/null
+++ b/components/alcor-element/select/navigation-mixin.js
@@ -0,0 +1,58 @@
+export default {
+  data() {
+    return {
+      hoverOption: -1
+    }
+  },
+
+  computed: {
+    optionsAllDisabled() {
+      return this.options
+        .filter((option) => option.visible)
+        .every((option) => option.disabled)
+    }
+  },
+
+  watch: {
+    hoverIndex(val) {
+      if (typeof val === 'number' && val > -1) {
+        this.hoverOption = this.options[val] || {}
+      }
+      this.options.forEach((option) => {
+        option.hover = this.hoverOption === option
+      })
+    }
+  },
+
+  methods: {
+    navigateOptions(direction) {
+      if (!this.visible) {
+        this.visible = true
+        return
+      }
+      if (this.options.length === 0 || this.filteredOptionsCount === 0) return
+      if (!this.optionsAllDisabled) {
+        if (direction === 'next') {
+          this.hoverIndex++
+          if (this.hoverIndex === this.options.length) {
+            this.hoverIndex = 0
+          }
+        } else if (direction === 'prev') {
+          this.hoverIndex--
+          if (this.hoverIndex < 0) {
+            this.hoverIndex = this.options.length - 1
+          }
+        }
+        const option = this.options[this.hoverIndex]
+        if (
+          option.disabled === true ||
+          option.groupDisabled === true ||
+          !option.visible
+        ) {
+          this.navigateOptions(direction)
+        }
+        this.$nextTick(() => this.scrollToOption(this.hoverOption))
+      }
+    }
+  }
+}
diff --git a/components/alcor-element/select/option-group.vue b/components/alcor-element/select/option-group.vue
new file mode 100644
index 000000000..6472b3a18
--- /dev/null
+++ b/components/alcor-element/select/option-group.vue
@@ -0,0 +1,61 @@
+<template>
+  <ul class="el-select-group__wrap" v-show="visible">
+    <li class="el-select-group__title">{{ label }}</li>
+    <li>
+      <ul class="el-select-group">
+        <slot></slot>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script type="text/babel">
+import Emitter from 'element-ui/lib/mixins/emitter'
+
+export default {
+  mixins: [Emitter],
+
+  name: 'ElOptionGroup',
+
+  componentName: 'ElOptionGroup',
+
+  props: {
+    label: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      visible: true
+    }
+  },
+
+  watch: {
+    disabled(val) {
+      this.broadcast('ElOption', 'handleGroupDisabled', val)
+    }
+  },
+
+  methods: {
+    queryChange() {
+      this.visible =
+        this.$children &&
+        Array.isArray(this.$children) &&
+        this.$children.some((option) => option.visible === true)
+    }
+  },
+
+  created() {
+    this.$on('queryChange', this.queryChange)
+  },
+
+  mounted() {
+    if (this.disabled) {
+      this.broadcast('ElOption', 'handleGroupDisabled', this.disabled)
+    }
+  }
+}
+</script>
diff --git a/components/alcor-element/select/option.vue b/components/alcor-element/select/option.vue
new file mode 100644
index 000000000..84ea92b4e
--- /dev/null
+++ b/components/alcor-element/select/option.vue
@@ -0,0 +1,188 @@
+<template>
+  <li
+    @mouseenter="hoverItem"
+    @click.stop="selectOptionClick"
+    class="el-select-dropdown__item"
+    v-show="visible"
+    :class="{
+      selected: itemSelected,
+      'is-disabled': disabled || groupDisabled || limitReached,
+      hover: hover
+    }"
+  >
+    <slot>
+      <span>{{ currentLabel }}</span>
+    </slot>
+  </li>
+</template>
+
+<script type="text/babel">
+import Emitter from 'element-ui/lib/mixins/emitter'
+import { getValueByPath, escapeRegexpString } from 'element-ui/lib/utils/util'
+
+export default {
+  mixins: [Emitter],
+
+  name: 'ElOption',
+
+  componentName: 'ElOption',
+
+  inject: ['select'],
+
+  props: {
+    value: {
+      required: true
+    },
+    label: [String, Number],
+    created: Boolean,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      index: -1,
+      groupDisabled: false,
+      visible: true,
+      hitState: false,
+      hover: false
+    }
+  },
+
+  computed: {
+    isObject() {
+      return (
+        Object.prototype.toString.call(this.value).toLowerCase() ===
+        '[object object]'
+      )
+    },
+
+    currentLabel() {
+      return this.label || (this.isObject ? '' : this.value)
+    },
+
+    currentValue() {
+      return this.value || this.label || ''
+    },
+
+    itemSelected() {
+      if (!this.select.multiple) {
+        return this.isEqual(this.value, this.select.value)
+      } else {
+        return this.contains(this.select.value, this.value)
+      }
+    },
+
+    limitReached() {
+      if (this.select.multiple) {
+        return (
+          !this.itemSelected &&
+          (this.select.value || []).length >= this.select.multipleLimit &&
+          this.select.multipleLimit > 0
+        )
+      } else {
+        return false
+      }
+    }
+  },
+
+  watch: {
+    currentLabel() {
+      if (!this.created && !this.select.remote)
+        this.dispatch('ElSelect', 'setSelected')
+    },
+    value(val, oldVal) {
+      const { remote, valueKey } = this.select
+      if (!this.created && !remote) {
+        if (
+          valueKey &&
+          typeof val === 'object' &&
+          typeof oldVal === 'object' &&
+          val[valueKey] === oldVal[valueKey]
+        ) {
+          return
+        }
+        this.dispatch('ElSelect', 'setSelected')
+      }
+    }
+  },
+
+  methods: {
+    isEqual(a, b) {
+      if (!this.isObject) {
+        return a === b
+      } else {
+        const valueKey = this.select.valueKey
+        return getValueByPath(a, valueKey) === getValueByPath(b, valueKey)
+      }
+    },
+
+    contains(arr = [], target) {
+      if (!this.isObject) {
+        return arr && arr.includes(target)
+      } else {
+        const valueKey = this.select.valueKey
+        return (
+          arr &&
+          arr.some((item) => {
+            return (
+              getValueByPath(item, valueKey) ===
+              getValueByPath(target, valueKey)
+            )
+          })
+        )
+      }
+    },
+
+    handleGroupDisabled(val) {
+      this.groupDisabled = val
+    },
+
+    hoverItem() {
+      if (!this.disabled && !this.groupDisabled) {
+        this.select.hoverIndex = this.select.options.indexOf(this)
+      }
+    },
+
+    selectOptionClick() {
+      if (this.disabled !== true && this.groupDisabled !== true) {
+        this.dispatch('ElSelect', 'handleOptionClick', [this, true])
+      }
+    },
+
+    queryChange(query) {
+      this.visible =
+        new RegExp(escapeRegexpString(query), 'i').test(this.currentLabel) ||
+        this.created
+      if (!this.visible) {
+        this.select.filteredOptionsCount--
+      }
+    }
+  },
+
+  created() {
+    this.select.options.push(this)
+    this.select.cachedOptions.push(this)
+    this.select.optionsCount++
+    this.select.filteredOptionsCount++
+
+    this.$on('queryChange', this.queryChange)
+    this.$on('handleGroupDisabled', this.handleGroupDisabled)
+  },
+
+  beforeDestroy() {
+    const { selected, multiple } = this.select
+    let selectedOptions = multiple ? selected : [selected]
+    let index = this.select.cachedOptions.indexOf(this)
+    let selectedIndex = selectedOptions.indexOf(this)
+
+    // if option is not selected, remove it from cache
+    if (index > -1 && selectedIndex < 0) {
+      this.select.cachedOptions.splice(index, 1)
+    }
+    this.select.onOptionDestroy(this.select.options.indexOf(this))
+  }
+}
+</script>
diff --git a/components/alcor-element/select/select-dropdown.vue b/components/alcor-element/select/select-dropdown.vue
new file mode 100644
index 000000000..c25d6c7f9
--- /dev/null
+++ b/components/alcor-element/select/select-dropdown.vue
@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="el-select-dropdown el-popper"
+    :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
+    :style="{ minWidth: minWidth }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script type="text/babel">
+import Popper from 'element-ui/lib/utils/vue-popper'
+
+export default {
+  name: 'ElSelectDropdown',
+
+  componentName: 'ElSelectDropdown',
+
+  mixins: [Popper],
+
+  props: {
+    placement: {
+      default: 'bottom-start'
+    },
+
+    boundariesPadding: {
+      default: 0
+    },
+
+    popperOptions: {
+      default() {
+        return {
+          gpuAcceleration: false
+        }
+      }
+    },
+
+    visibleArrow: {
+      default: true
+    },
+
+    appendToBody: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      minWidth: ''
+    }
+  },
+
+  computed: {
+    popperClass() {
+      return this.$parent.popperClass
+    }
+  },
+
+  watch: {
+    '$parent.inputWidth'() {
+      this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px'
+    }
+  },
+
+  mounted() {
+    this.referenceElm = this.$parent.$refs.reference.$el
+    this.$parent.popperElm = this.popperElm = this.$el
+    this.$on('updatePopper', () => {
+      if (this.$parent.visible) this.updatePopper()
+    })
+    this.$on('destroyPopper', this.destroyPopper)
+  }
+}
+</script>
diff --git a/components/alcor-element/select/select.vue b/components/alcor-element/select/select.vue
new file mode 100644
index 000000000..a401d1e77
--- /dev/null
+++ b/components/alcor-element/select/select.vue
@@ -0,0 +1,1050 @@
+<template>
+  <div
+    class="el-select"
+    :class="[selectSize ? 'el-select--' + selectSize : '']"
+    @click.stop="toggleMenu"
+    v-clickoutside="handleClose"
+  >
+    <div
+      class="el-select__tags"
+      v-if="multiple"
+      ref="tags"
+      :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }"
+    >
+      <span v-if="collapseTags && selected.length">
+        <el-tag
+          :closable="!selectDisabled"
+          :size="collapseTagSize"
+          :hit="selected[0].hitState"
+          type="info"
+          @close="deleteTag($event, selected[0])"
+          disable-transitions
+        >
+          <span class="el-select__tags-text">{{
+            selected[0].currentLabel
+          }}</span>
+        </el-tag>
+        <el-tag
+          v-if="selected.length > 1"
+          :closable="false"
+          :size="collapseTagSize"
+          type="info"
+          disable-transitions
+        >
+          <span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
+        </el-tag>
+      </span>
+      <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
+        <el-tag
+          v-for="item in selected"
+          :key="getValueKey(item)"
+          :closable="!selectDisabled"
+          :size="collapseTagSize"
+          :hit="item.hitState"
+          type="info"
+          @close="deleteTag($event, item)"
+          disable-transitions
+        >
+          <span class="el-select__tags-text">{{ item.currentLabel }}</span>
+        </el-tag>
+      </transition-group>
+
+      <input
+        type="text"
+        class="el-select__input"
+        :class="[selectSize ? `is-${selectSize}` : '']"
+        :disabled="selectDisabled"
+        :autocomplete="autoComplete || autocomplete"
+        @focus="handleFocus"
+        @blur="softFocus = false"
+        @keyup="managePlaceholder"
+        @keydown="resetInputState"
+        @keydown.down.prevent="handleNavigate('next')"
+        @keydown.up.prevent="handleNavigate('prev')"
+        @keydown.enter.prevent="selectOption"
+        @keydown.esc.stop.prevent="visible = false"
+        @keydown.delete="deletePrevTag"
+        @keydown.tab="visible = false"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
+        v-model="query"
+        @input="debouncedQueryChange"
+        v-if="filterable"
+        :style="{
+          'flex-grow': '1',
+          width: inputLength / (inputWidth - 32) + '%',
+          'max-width': inputWidth - 42 + 'px'
+        }"
+        ref="input"
+      />
+    </div>
+    <el-input
+      ref="reference"
+      v-model="selectedLabel"
+      type="text"
+      :placeholder="currentPlaceholder"
+      :name="name"
+      :id="id"
+      :autocomplete="autoComplete || autocomplete"
+      :size="selectSize"
+      :disabled="selectDisabled"
+      :readonly="readonly"
+      :validate-event="false"
+      :class="{ 'is-focus': visible }"
+      :tabindex="multiple && filterable ? '-1' : null"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="debouncedOnInputChange"
+      @keydown.native.down.stop.prevent="handleNavigate('next')"
+      @keydown.native.up.stop.prevent="handleNavigate('prev')"
+      @keydown.native.enter.prevent="selectOption"
+      @keydown.native.esc.stop.prevent="visible = false"
+      @keydown.native.tab="visible = false"
+      @compositionstart="handleComposition"
+      @compositionupdate="handleComposition"
+      @compositionend="handleComposition"
+      @mouseenter.native="inputHovering = true"
+      @mouseleave.native="inputHovering = false"
+    >
+      <template slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template slot="suffix">
+        <i
+          v-show="!showClose"
+          :class="[
+            'el-select__caret',
+            'el-input__icon',
+            'el-icon-' + iconClass
+          ]"
+        ></i>
+        <i
+          v-if="showClose"
+          class="el-select__caret el-input__icon el-icon-circle-close"
+          @click="handleClearClick"
+        ></i>
+      </template>
+    </el-input>
+    <transition
+      name="el-zoom-in-top"
+      @before-enter="handleMenuEnter"
+      @after-leave="doDestroy"
+    >
+      <el-select-menu
+        ref="popper"
+        :append-to-body="popperAppendToBody"
+        v-show="visible && emptyText !== false"
+      >
+        <el-scrollbar
+          tag="ul"
+          wrap-class="el-select-dropdown__wrap"
+          view-class="el-select-dropdown__list"
+          ref="scrollbar"
+          :class="{
+            'is-empty': !allowCreate && query && filteredOptionsCount === 0
+          }"
+          v-show="options.length > 0 && !loading"
+        >
+          <el-option :value="query" created v-if="showNewOption"> </el-option>
+          <slot></slot>
+        </el-scrollbar>
+        <template
+          v-if="
+            emptyText &&
+              (!allowCreate || loading || (allowCreate && options.length === 0))
+          "
+        >
+          <slot name="empty" v-if="$slots.empty"></slot>
+          <p class="el-select-dropdown__empty" v-else>
+            {{ emptyText }}
+          </p>
+        </template>
+      </el-select-menu>
+    </transition>
+  </div>
+</template>
+
+<script>
+import Emitter from 'element-ui/lib/mixins/emitter'
+import Focus from 'element-ui/lib/mixins/focus'
+import Locale from 'element-ui/lib/mixins/locale'
+
+
+
+import debounce from 'throttle-debounce/debounce'
+import Clickoutside from 'element-ui/lib/utils/clickoutside'
+import {
+  addResizeListener,
+  removeResizeListener
+} from 'element-ui/lib/utils/resize-event'
+import scrollIntoView from 'element-ui/lib/utils/scroll-into-view'
+import {
+  getValueByPath,
+  valueEquals,
+  isIE,
+  isEdge
+} from 'element-ui/lib/utils/util'
+import { isKorean } from 'element-ui/lib/utils/shared'
+
+import NavigationMixin from './navigation-mixin'
+import ElSelectMenu from './select-dropdown.vue'
+import ElOption from './option.vue'
+
+import ElTag from '~/components/alcor-element/tag'
+import ElInput from '~/components/alcor-element/input'
+import ElScrollbar from '~/components/alcor-element/scrollbar'
+
+export default {
+  name: 'AlcorSelect',
+  mixins: [Emitter, Locale, Focus('reference'), NavigationMixin],
+
+
+  componentName: 'ElSelect',
+
+  inject: {
+    elForm: {
+      default: ''
+    },
+
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  provide() {
+    return {
+      select: this
+    }
+  },
+
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize
+    },
+
+    readonly() {
+      return (
+        !this.filterable ||
+        this.multiple ||
+        (!isIE() && !isEdge() && !this.visible)
+      )
+    },
+
+    showClose() {
+      let hasValue = this.multiple
+        ? Array.isArray(this.value) && this.value.length > 0
+        : this.value !== undefined && this.value !== null && this.value !== ''
+      let criteria =
+        this.clearable && !this.selectDisabled && this.inputHovering && hasValue
+      return criteria
+    },
+
+    iconClass() {
+      return this.remote && this.filterable
+        ? ''
+        : this.visible
+          ? 'arrow-up is-reverse'
+          : 'arrow-up'
+    },
+
+    debounce() {
+      return this.remote ? 300 : 0
+    },
+
+    emptyText() {
+      if (this.loading) {
+        return this.loadingText || this.t('el.select.loading')
+      } else {
+        if (this.remote && this.query === '' && this.options.length === 0)
+          return false
+        if (
+          this.filterable &&
+          this.query &&
+          this.options.length > 0 &&
+          this.filteredOptionsCount === 0
+        ) {
+          return this.noMatchText || this.t('el.select.noMatch')
+        }
+        if (this.options.length === 0) {
+          return this.noDataText || this.t('el.select.noData')
+        }
+      }
+      return null
+    },
+
+    showNewOption() {
+      let hasExistingOption = this.options
+        .filter((option) => !option.created)
+        .some((option) => option.currentLabel === this.query)
+      return (
+        this.filterable &&
+        this.allowCreate &&
+        this.query !== '' &&
+        !hasExistingOption
+      )
+    },
+
+    selectSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
+    },
+
+    selectDisabled() {
+      return this.disabled || (this.elForm || {}).disabled
+    },
+
+    collapseTagSize() {
+      return ['small', 'mini'].includes(this.selectSize) ? 'mini' : 'small'
+    },
+    propPlaceholder() {
+      return typeof this.placeholder !== 'undefined'
+        ? this.placeholder
+        : this.t('el.select.placeholder')
+    }
+  },
+
+  components: {
+    ElInput,
+    ElSelectMenu,
+    ElOption,
+    ElTag,
+    ElScrollbar
+  },
+
+  directives: { Clickoutside },
+
+  props: {
+    name: String,
+    id: String,
+    value: {
+      required: true
+    },
+    autocomplete: {
+      type: String,
+      default: 'off'
+    },
+    /** @Deprecated in next major version */
+    autoComplete: {
+      type: String,
+      validator(val) {
+        process.env.NODE_ENV !== 'production' &&
+          console.warn(
+            "[Element Warn][Select]'auto-complete' property will be deprecated in next major version. please use 'autocomplete' instead."
+          )
+        return true
+      }
+    },
+    automaticDropdown: Boolean,
+    size: String,
+    disabled: Boolean,
+    clearable: Boolean,
+    filterable: Boolean,
+    allowCreate: Boolean,
+    loading: Boolean,
+    popperClass: String,
+    remote: Boolean,
+    loadingText: String,
+    noMatchText: String,
+    noDataText: String,
+    remoteMethod: Function,
+    filterMethod: Function,
+    multiple: Boolean,
+    multipleLimit: {
+      type: Number,
+      default: 0
+    },
+    placeholder: {
+      type: String,
+      required: false
+    },
+    defaultFirstOption: Boolean,
+    reserveKeyword: Boolean,
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    collapseTags: Boolean,
+    popperAppendToBody: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      options: [],
+      cachedOptions: [],
+      createdLabel: null,
+      createdSelected: false,
+      selected: this.multiple ? [] : {},
+      inputLength: 20,
+      inputWidth: 0,
+      initialInputHeight: 0,
+      cachedPlaceHolder: '',
+      optionsCount: 0,
+      filteredOptionsCount: 0,
+      visible: false,
+      softFocus: false,
+      selectedLabel: '',
+      hoverIndex: -1,
+      query: '',
+      previousQuery: null,
+      inputHovering: false,
+      currentPlaceholder: '',
+      menuVisibleOnFocus: false,
+      isOnComposition: false,
+      isSilentBlur: false
+    }
+  },
+
+  watch: {
+    selectDisabled() {
+      this.$nextTick(() => {
+        this.resetInputHeight()
+      })
+    },
+
+    propPlaceholder(val) {
+      this.cachedPlaceHolder = this.currentPlaceholder = val
+    },
+
+    value(val, oldVal) {
+      if (this.multiple) {
+        this.resetInputHeight()
+        if (
+          (val && val.length > 0) ||
+          (this.$refs.input && this.query !== '')
+        ) {
+          this.currentPlaceholder = ''
+        } else {
+          this.currentPlaceholder = this.cachedPlaceHolder
+        }
+        if (this.filterable && !this.reserveKeyword) {
+          this.query = ''
+          this.handleQueryChange(this.query)
+        }
+      }
+      this.setSelected()
+      if (this.filterable && !this.multiple) {
+        this.inputLength = 20
+      }
+      if (!valueEquals(val, oldVal)) {
+        this.dispatch('ElFormItem', 'el.form.change', val)
+      }
+    },
+
+    visible(val) {
+      if (!val) {
+        this.broadcast('ElSelectDropdown', 'destroyPopper')
+        if (this.$refs.input) {
+          this.$refs.input.blur()
+        }
+        this.query = ''
+        this.previousQuery = null
+        this.selectedLabel = ''
+        this.inputLength = 20
+        this.menuVisibleOnFocus = false
+        this.resetHoverIndex()
+        this.$nextTick(() => {
+          if (
+            this.$refs.input &&
+            this.$refs.input.value === '' &&
+            this.selected.length === 0
+          ) {
+            this.currentPlaceholder = this.cachedPlaceHolder
+          }
+        })
+        if (!this.multiple) {
+          if (this.selected) {
+            if (
+              this.filterable &&
+              this.allowCreate &&
+              this.createdSelected &&
+              this.createdLabel
+            ) {
+              this.selectedLabel = this.createdLabel
+            } else {
+              this.selectedLabel = this.selected.currentLabel
+            }
+            if (this.filterable) this.query = this.selectedLabel
+          }
+
+          if (this.filterable) {
+            this.currentPlaceholder = this.cachedPlaceHolder
+          }
+        }
+      } else {
+        this.broadcast('ElSelectDropdown', 'updatePopper')
+        if (this.filterable) {
+          this.query = this.remote ? '' : this.selectedLabel
+          this.handleQueryChange(this.query)
+          if (this.multiple) {
+            this.$refs.input.focus()
+          } else {
+            if (!this.remote) {
+              this.broadcast('ElOption', 'queryChange', '')
+              this.broadcast('ElOptionGroup', 'queryChange')
+            }
+
+            if (this.selectedLabel) {
+              this.currentPlaceholder = this.selectedLabel
+              this.selectedLabel = ''
+            }
+          }
+        }
+      }
+      this.$emit('visible-change', val)
+    },
+
+    options() {
+      if (this.$isServer) return
+      this.$nextTick(() => {
+        this.broadcast('ElSelectDropdown', 'updatePopper')
+      })
+      if (this.multiple) {
+        this.resetInputHeight()
+      }
+      let inputs = this.$el.querySelectorAll('input')
+      if ([].indexOf.call(inputs, document.activeElement) === -1) {
+        this.setSelected()
+      }
+      if (
+        this.defaultFirstOption &&
+        (this.filterable || this.remote) &&
+        this.filteredOptionsCount
+      ) {
+        this.checkDefaultFirstOption()
+      }
+    }
+  },
+
+  methods: {
+    handleNavigate(direction) {
+      if (this.isOnComposition) return
+
+      this.navigateOptions(direction)
+    },
+    handleComposition(event) {
+      const text = event.target.value
+      if (event.type === 'compositionend') {
+        this.isOnComposition = false
+        this.$nextTick((_) => this.handleQueryChange(text))
+      } else {
+        const lastCharacter = text[text.length - 1] || ''
+        this.isOnComposition = !isKorean(lastCharacter)
+      }
+    },
+    handleQueryChange(val) {
+      if (this.previousQuery === val || this.isOnComposition) return
+      if (
+        this.previousQuery === null &&
+        (typeof this.filterMethod === 'function' ||
+          typeof this.remoteMethod === 'function')
+      ) {
+        this.previousQuery = val
+        return
+      }
+      this.previousQuery = val
+      this.$nextTick(() => {
+        if (this.visible) this.broadcast('ElSelectDropdown', 'updatePopper')
+      })
+      this.hoverIndex = -1
+      if (this.multiple && this.filterable) {
+        this.$nextTick(() => {
+          const length = this.$refs.input.value.length * 15 + 20
+          this.inputLength = this.collapseTags ? Math.min(50, length) : length
+          this.managePlaceholder()
+          this.resetInputHeight()
+        })
+      }
+      if (this.remote && typeof this.remoteMethod === 'function') {
+        this.hoverIndex = -1
+        this.remoteMethod(val)
+      } else if (typeof this.filterMethod === 'function') {
+        this.filterMethod(val)
+        this.broadcast('ElOptionGroup', 'queryChange')
+      } else {
+        this.filteredOptionsCount = this.optionsCount
+        this.broadcast('ElOption', 'queryChange', val)
+        this.broadcast('ElOptionGroup', 'queryChange')
+      }
+      if (
+        this.defaultFirstOption &&
+        (this.filterable || this.remote) &&
+        this.filteredOptionsCount
+      ) {
+        this.checkDefaultFirstOption()
+      }
+    },
+
+    scrollToOption(option) {
+      const target =
+        Array.isArray(option) && option[0] ? option[0].$el : option.$el
+      if (this.$refs.popper && target) {
+        const menu = this.$refs.popper.$el.querySelector(
+          '.el-select-dropdown__wrap'
+        )
+        scrollIntoView(menu, target)
+      }
+      this.$refs.scrollbar && this.$refs.scrollbar.handleScroll()
+    },
+
+    handleMenuEnter() {
+      this.$nextTick(() => this.scrollToOption(this.selected))
+    },
+
+    emitChange(val) {
+      if (!valueEquals(this.value, val)) {
+        this.$emit('change', val)
+      }
+    },
+
+    getOption(value) {
+      let option
+      const isObject =
+        Object.prototype.toString.call(value).toLowerCase() ===
+        '[object object]'
+      const isNull =
+        Object.prototype.toString.call(value).toLowerCase() === '[object null]'
+      const isUndefined =
+        Object.prototype.toString.call(value).toLowerCase() ===
+        '[object undefined]'
+
+      for (let i = this.cachedOptions.length - 1; i >= 0; i--) {
+        const cachedOption = this.cachedOptions[i]
+        const isEqual = isObject
+          ? getValueByPath(cachedOption.value, this.valueKey) ===
+            getValueByPath(value, this.valueKey)
+          : cachedOption.value === value
+        if (isEqual) {
+          option = cachedOption
+          break
+        }
+      }
+      if (option) return option
+      const label = !isObject && !isNull && !isUndefined ? String(value) : ''
+      let newOption = {
+        value,
+        currentLabel: label
+      }
+      if (this.multiple) {
+        newOption.hitState = false
+      }
+      return newOption
+    },
+
+    setSelected() {
+      if (!this.multiple) {
+        let option = this.getOption(this.value)
+        if (option.created) {
+          this.createdLabel = option.currentLabel
+          this.createdSelected = true
+        } else {
+          this.createdSelected = false
+        }
+        this.selectedLabel = option.currentLabel
+        this.selected = option
+        if (this.filterable) this.query = this.selectedLabel
+        return
+      }
+      let result = []
+      if (Array.isArray(this.value)) {
+        this.value.forEach((value) => {
+          result.push(this.getOption(value))
+        })
+      }
+      this.selected = result
+      this.$nextTick(() => {
+        this.resetInputHeight()
+      })
+    },
+
+    handleFocus(event) {
+      if (!this.softFocus) {
+        if (this.automaticDropdown || this.filterable) {
+          if (this.filterable && !this.visible) {
+            this.menuVisibleOnFocus = true
+          }
+          this.visible = true
+        }
+        this.$emit('focus', event)
+      } else {
+        this.softFocus = false
+      }
+    },
+
+    blur() {
+      this.visible = false
+      this.$refs.reference.blur()
+    },
+
+    handleBlur(event) {
+      setTimeout(() => {
+        if (this.isSilentBlur) {
+          this.isSilentBlur = false
+        } else {
+          this.$emit('blur', event)
+        }
+      }, 50)
+      this.softFocus = false
+    },
+
+    handleClearClick(event) {
+      this.deleteSelected(event)
+    },
+
+    doDestroy() {
+      this.$refs.popper && this.$refs.popper.doDestroy()
+    },
+
+    handleClose() {
+      this.visible = false
+    },
+
+    toggleLastOptionHitState(hit) {
+      if (!Array.isArray(this.selected)) return
+      const option = this.selected[this.selected.length - 1]
+      if (!option) return
+
+      if (hit === true || hit === false) {
+        option.hitState = hit
+        return hit
+      }
+
+      option.hitState = !option.hitState
+      return option.hitState
+    },
+
+    deletePrevTag(e) {
+      if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) {
+        const value = this.value.slice()
+        value.pop()
+        this.$emit('input', value)
+        this.emitChange(value)
+      }
+    },
+
+    managePlaceholder() {
+      if (this.currentPlaceholder !== '') {
+        this.currentPlaceholder = this.$refs.input.value
+          ? ''
+          : this.cachedPlaceHolder
+      }
+    },
+
+    resetInputState(e) {
+      if (e.keyCode !== 8) this.toggleLastOptionHitState(false)
+      this.inputLength = this.$refs.input.value.length * 15 + 20
+      this.resetInputHeight()
+    },
+
+    resetInputHeight() {
+      if (this.collapseTags && !this.filterable) return
+      this.$nextTick(() => {
+        if (!this.$refs.reference) return
+        let inputChildNodes = this.$refs.reference.$el.childNodes
+        let input = [].filter.call(
+          inputChildNodes,
+          (item) => item.tagName === 'INPUT'
+        )[0]
+        const tags = this.$refs.tags
+        const tagsHeight = tags
+          ? Math.round(tags.getBoundingClientRect().height)
+          : 0
+        const sizeInMap = this.initialInputHeight || 40
+        input.style.height =
+          this.selected.length === 0
+            ? sizeInMap + 'px'
+            : Math.max(
+              tags ? tagsHeight + (tagsHeight > sizeInMap ? 6 : 0) : 0,
+              sizeInMap
+            ) + 'px'
+        if (this.visible && this.emptyText !== false) {
+          this.broadcast('ElSelectDropdown', 'updatePopper')
+        }
+      })
+    },
+
+    resetHoverIndex() {
+      setTimeout(() => {
+        if (!this.multiple) {
+          this.hoverIndex = this.options.indexOf(this.selected)
+        } else if (this.selected.length > 0) {
+          this.hoverIndex = Math.min.apply(
+            null,
+            this.selected.map((item) => this.options.indexOf(item))
+          )
+        } else {
+          this.hoverIndex = -1
+        }
+      }, 300)
+    },
+
+    handleOptionSelect(option, byClick) {
+      if (this.multiple) {
+        const value = (this.value || []).slice()
+        const optionIndex = this.getValueIndex(value, option.value)
+        if (optionIndex > -1) {
+          value.splice(optionIndex, 1)
+        } else if (
+          this.multipleLimit <= 0 ||
+          value.length < this.multipleLimit
+        ) {
+          value.push(option.value)
+        }
+        this.$emit('input', value)
+        this.emitChange(value)
+        if (option.created) {
+          this.query = ''
+          this.handleQueryChange('')
+          this.inputLength = 20
+        }
+        if (this.filterable) this.$refs.input.focus()
+      } else {
+        this.$emit('input', option.value)
+        this.emitChange(option.value)
+        this.visible = false
+      }
+      this.isSilentBlur = byClick
+      this.setSoftFocus()
+      if (this.visible) return
+      this.$nextTick(() => {
+        this.scrollToOption(option)
+      })
+    },
+
+    setSoftFocus() {
+      this.softFocus = true
+      const input = this.$refs.input || this.$refs.reference
+      if (input) {
+        input.focus()
+      }
+    },
+
+    getValueIndex(arr = [], value) {
+      const isObject =
+        Object.prototype.toString.call(value).toLowerCase() ===
+        '[object object]'
+      if (!isObject) {
+        return arr.indexOf(value)
+      } else {
+        const valueKey = this.valueKey
+        let index = -1
+        arr.some((item, i) => {
+          if (
+            getValueByPath(item, valueKey) === getValueByPath(value, valueKey)
+          ) {
+            index = i
+            return true
+          }
+          return false
+        })
+        return index
+      }
+    },
+
+    toggleMenu() {
+      if (!this.selectDisabled) {
+        if (this.menuVisibleOnFocus) {
+          this.menuVisibleOnFocus = false
+        } else {
+          this.visible = !this.visible
+        }
+        if (this.visible) {
+          ;(this.$refs.input || this.$refs.reference).focus()
+        }
+      }
+    },
+
+    selectOption() {
+      if (!this.visible) {
+        this.toggleMenu()
+      } else if (this.options[this.hoverIndex]) {
+        this.handleOptionSelect(this.options[this.hoverIndex])
+      }
+    },
+
+    deleteSelected(event) {
+      event.stopPropagation()
+      const value = this.multiple ? [] : ''
+      this.$emit('input', value)
+      this.emitChange(value)
+      this.visible = false
+      this.$emit('clear')
+    },
+
+    deleteTag(event, tag) {
+      let index = this.selected.indexOf(tag)
+      if (index > -1 && !this.selectDisabled) {
+        const value = this.value.slice()
+        value.splice(index, 1)
+        this.$emit('input', value)
+        this.emitChange(value)
+        this.$emit('remove-tag', tag.value)
+      }
+      event.stopPropagation()
+    },
+
+    onInputChange() {
+      if (this.filterable && this.query !== this.selectedLabel) {
+        this.query = this.selectedLabel
+        this.handleQueryChange(this.query)
+      }
+    },
+
+    onOptionDestroy(index) {
+      if (index > -1) {
+        this.optionsCount--
+        this.filteredOptionsCount--
+        this.options.splice(index, 1)
+      }
+    },
+
+    resetInputWidth() {
+      this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width
+    },
+
+    handleResize() {
+      this.resetInputWidth()
+      if (this.multiple) this.resetInputHeight()
+    },
+
+    checkDefaultFirstOption() {
+      this.hoverIndex = -1
+      // highlight the created option
+      let hasCreated = false
+      for (let i = this.options.length - 1; i >= 0; i--) {
+        if (this.options[i].created) {
+          hasCreated = true
+          this.hoverIndex = i
+          break
+        }
+      }
+      if (hasCreated) return
+      for (let i = 0; i !== this.options.length; ++i) {
+        const option = this.options[i]
+        if (this.query) {
+          // highlight first options that passes the filter
+          if (!option.disabled && !option.groupDisabled && option.visible) {
+            this.hoverIndex = i
+            break
+          }
+        } else if (option.itemSelected) {
+          // highlight currently selected option
+          this.hoverIndex = i
+          break
+        }
+      }
+    },
+
+    getValueKey(item) {
+      if (
+        Object.prototype.toString.call(item.value).toLowerCase() !==
+        '[object object]'
+      ) {
+        return item.value
+      } else {
+        return getValueByPath(item.value, this.valueKey)
+      }
+    }
+  },
+
+  created() {
+    this.cachedPlaceHolder = this.currentPlaceholder = this.propPlaceholder
+    if (this.multiple && !Array.isArray(this.value)) {
+      this.$emit('input', [])
+    }
+    if (!this.multiple && Array.isArray(this.value)) {
+      this.$emit('input', '')
+    }
+
+    this.debouncedOnInputChange = debounce(this.debounce, () => {
+      this.onInputChange()
+    })
+
+    this.debouncedQueryChange = debounce(this.debounce, (e) => {
+      this.handleQueryChange(e.target.value)
+    })
+
+    this.$on('handleOptionClick', this.handleOptionSelect)
+    this.$on('setSelected', this.setSelected)
+  },
+
+  mounted() {
+    if (this.multiple && Array.isArray(this.value) && this.value.length > 0) {
+      this.currentPlaceholder = ''
+    }
+    addResizeListener(this.$el, this.handleResize)
+
+    const reference = this.$refs.reference
+    if (reference && reference.$el) {
+      const sizeMap = {
+        medium: 36,
+        small: 32,
+        mini: 28
+      }
+      const input = reference.$el.querySelector('input')
+      this.initialInputHeight =
+        input.getBoundingClientRect().height || sizeMap[this.selectSize]
+    }
+    if (this.remote && this.multiple) {
+      this.resetInputHeight()
+    }
+    this.$nextTick(() => {
+      if (reference && reference.$el) {
+        this.inputWidth = reference.$el.getBoundingClientRect().width
+      }
+    })
+    this.setSelected()
+  },
+
+  beforeDestroy() {
+    if (this.$el && this.handleResize)
+      removeResizeListener(this.$el, this.handleResize)
+  }
+}
+</script>
+
+<style lang="scss">
+.el-select {
+  & .el-input.is-focus .el-input__inner,
+  & .el-input.is-active .el-input__inner,
+  & .el-input__inner:focus,
+  &:hover .el-input__inner {
+    border-color: var(--main-green) !important;
+  }
+
+  & .el-input__inner,
+  & .el-input--prefix .el-input__inner {
+    background: var(--select-color);
+    border-radius: 4px;
+    padding-left: 35px;
+  }
+
+  & .el-input__prefix {
+    display: flex;
+    left: 12px;
+    align-items: center;
+  }
+
+}
+
+.el-select___dropdown {
+  border-radius: 4px !important;
+  margin-top: 4px !important;
+
+  & .el-scrollbar {
+    border-radius: 4px !important;
+  }
+
+  & .el-scrollbar__wrap {
+    background: var(--select-color);
+    overflow-x: hidden;
+  }
+
+  & .el-select-dropdown__item {
+    padding: 0 10px;
+  }
+
+}
+</style>
diff --git a/components/alcor-element/tag/index.js b/components/alcor-element/tag/index.js
new file mode 100644
index 000000000..9de387cc0
--- /dev/null
+++ b/components/alcor-element/tag/index.js
@@ -0,0 +1,8 @@
+import ElTag from './src/tag'
+
+/* istanbul ignore next */
+ElTag.install = function(Vue) {
+  Vue.component(ElTag.name, ElTag)
+}
+
+export default ElTag
diff --git a/components/alcor-element/tag/src/tag.vue b/components/alcor-element/tag/src/tag.vue
new file mode 100644
index 000000000..d8437f97c
--- /dev/null
+++ b/components/alcor-element/tag/src/tag.vue
@@ -0,0 +1,66 @@
+<script>
+export default {
+  name: 'ElTag',
+  props: {
+    text: String,
+    closable: Boolean,
+    type: String,
+    hit: Boolean,
+    disableTransitions: Boolean,
+    color: String,
+    size: String,
+    effect: {
+      type: String,
+      default: 'light',
+      validator(val) {
+        return ['dark', 'light', 'plain'].includes(val)
+      }
+    }
+  },
+  methods: {
+    handleClose(event) {
+      event.stopPropagation()
+      this.$emit('close', event)
+    },
+    handleClick(event) {
+      this.$emit('click', event)
+    }
+  },
+  computed: {
+    tagSize() {
+      return this.size || (this.$ELEMENT || {}).size
+    }
+  },
+  render(h) {
+    const { type, tagSize, hit, effect } = this
+    const classes = [
+      'el-tag',
+      type ? `el-tag--${type}` : '',
+      tagSize ? `el-tag--${tagSize}` : '',
+      effect ? `el-tag--${effect}` : '',
+      hit && 'is-hit'
+    ]
+    const tagEl = (
+      <span
+        class={classes}
+        style={{ backgroundColor: this.color }}
+        on-click={this.handleClick}
+      >
+        {this.$slots.default}
+        {this.closable && (
+          <i
+            class="el-tag__close el-icon-close"
+            on-click={this.handleClose}
+          ></i>
+        )}
+      </span>
+    )
+
+    return this.disableTransitions ? (
+      tagEl
+    ) : (
+      <transition name="el-zoom-in-center">{tagEl}</transition>
+    )
+  }
+}
+</script>
diff --git a/components/bridge/BridgeForm.vue b/components/bridge/BridgeForm.vue
new file mode 100644
index 000000000..899840b18
--- /dev/null
+++ b/components/bridge/BridgeForm.vue
@@ -0,0 +1,650 @@
+<template lang="pug">
+  #bridge-form-component.form
+    .d-flex.justify-content-between
+      .d-flex.flex-column
+        .mb-3 Send from
+        alcor-select.network-select(
+          :options="fromNetworkOptions"
+          :value.sync="sourceName"
+          :disabled="inProgress"
+          placeholder="Choose Network"
+          filterable
+        )
+          template(#prefix="{ value }")
+            img(
+              v-if="value"
+              :src='require("~/assets/icons/" + value + ".png")',
+              height=18
+            )
+          template(#option="{ option }")
+            network-option( :network="option")
+
+      .d-flex.flex-column
+        .mb-3 Receive on
+        alcor-select.network-select(
+          :options="fromNetworkOptions"
+          :value.sync="destinationName"
+          :disabled="inProgress"
+          placeholder="Choose Network"
+          filterable
+        )
+          template(#prefix="{ value }")
+            img(
+              v-if="value"
+              :src='require("~/assets/icons/" + value + ".png")',
+              height=18
+            )
+          template(#option="{ option }")
+            network-option( :network="option")
+
+    .d-flex.justify-content-center.align-items-center.gap-30
+      i.el-icon-right
+      span To
+      i.el-icon-right
+
+    .d-flex.justify-content-between
+      alcor-button.connect-button(
+        :disabled="(!sourceName) || (inProgress && this.sourceWallet)"
+        @click="connectFromWallet"
+      )
+        .d-flex.justify-content-between.align-items-center.w-100(v-if="formData.sender")
+          .d-flex.align-items-center.gap-8
+            img(
+              :src='require("~/assets/icons/avatar.png")',
+              height=18
+            )
+            .fs-14 {{ formData.sender }}
+          .d-flex.align-items-center.gap-8(@click.stop="logout('sender')")
+            .fs-12 Logout
+            i.el-icon-right
+        .fs-14(v-else) Connect Wallet
+
+      alcor-button.connect-button(
+        :disabled="(!destinationName) || (inProgress && this.destinationWallet)"
+        @click="connectToWallet"
+      )
+        .d-flex.justify-content-between.align-items-center.w-100(v-if="formData.receiver")
+          .d-flex.align-items-center.gap-8
+            img(
+              :src='require("~/assets/icons/avatar.png")',
+              height=18
+            )
+            .fs-14 {{ formData.receiver }}
+          .d-flex.align-items-center.gap-8(@click.stop="logout('receiver')")
+            .fs-12 Logout
+            i.el-icon-right
+        .fs-14(v-else) Connect Wallet
+
+    .d-flex.justify-content-between.gap-32.mt-4
+      .amount-input
+        el-input(type="number" placeholder="Amount" v-model="formData.amount" :disabled="inProgress")
+        span.max-btn.pointer(@click="setMax") MAX
+
+      alcor-select-two.network-select(v-model="asset" value-key="symbol" @change="_setAsset" :disabled="inProgress && !!this.asset" placeholder="IBC Token" filterable)
+        template(slot="empty")
+          .small.muted.text-center Chose Send & Receive
+
+        template(slot="prefix" v-if="this.asset")
+          TokenImage(:src="$tokenLogo(asset.symbol, asset.sourceTokenContract)" height="20")
+
+        alcor-option-two(:value="asset" :label="asset.symbol" v-for="asset in availableAssets")
+          .d-flex.align-items-center.w-100
+            TokenImage(:src="$tokenLogo(asset.symbol, asset.sourceTokenContract)" height="25")
+            .ml-2 {{ asset.symbol}}
+
+    .d-flex.justify-content-center.mt-4
+      alcor-button.transfer-btn(v-if="!error" :disabled="!isValid || inProgress" access @click="transfer") Transfer and Prove
+      alcor-button.transfer-btn(v-else outline @click="transfer") Complete transfer
+
+      // dev
+      //alcor-button.transfer-btn(access @click="help") help
+      //alcor-button.transfer-btn(access @click="transfer") Transfer and Prove
+      //alcor-button.transfer-btn(outline @click="clear") clear
+
+    bridge-slider(v-if="inProgress" :steps="steps")
+
+    div(v-if="step === 4")
+      .d-flex.justify-content-center.mt-4
+        .fs-18 Success! Assets have been bridged!
+
+      .d-flex.justify-content-center.mt-4
+        alcor-button(outline v-if="sourceName" @click="openInNewTab(monitorTx(result.source, sourceName))")
+          img(:src='require(`~/assets/icons/${sourceName}.png`)' height=20)
+          | TX Link
+
+        alcor-button(outline v-if="destinationName" @click="openInNewTab(monitorTx(result.destination, destinationName))").ml-5
+          img(:src='require(`~/assets/icons/${destinationName}.png`)' height=20)
+          | TX Link
+</template>
+
+<script>
+// TODO Implement list of wallets
+import { mapGetters, mapState, mapMutations } from 'vuex'
+import { IBCTransfer } from '~/core/ibc.js'
+
+import AlcorSelectTwo from '~/components/alcor-element/select/select'
+import AlcorOptionTwo from '~/components/alcor-element/select/option'
+
+import AlcorSelect from '~/components/AlcorSelect.vue'
+import AlcorButton from '~/components/AlcorButton.vue'
+import NetworkOption from '~/components/bridge/NetworkOption'
+import BridgeSlider from '~/components/bridge/BridgeSlider'
+
+import TokenImage from '~/components/elements/TokenImage'
+
+export default {
+  components: {
+    AlcorSelect,
+    AlcorButton,
+    NetworkOption,
+    BridgeSlider,
+    TokenImage,
+    AlcorSelectTwo,
+    AlcorOptionTwo
+  },
+
+  data: () => ({
+    finished: false,
+
+    assetSelect: null,
+    progress: 0,
+
+    formData: {
+      amount: null,
+      sender: null,
+      receiver: null
+    },
+
+    sourceWallet: null,
+    destinationWallet: null,
+
+    fromNetworkOptions: [{
+      value: 'eos',
+      label: 'EOS'
+    },
+    //{
+    //  value: 'wax',
+    //  label: 'WAX'
+    //},
+    //{
+    //  value: 'proton',
+    //  label: 'Proton'
+    //},
+    {
+      value: 'telos',
+      label: 'Telos'
+    }, {
+      value: 'ux',
+      label: 'UX Network'
+    }]
+  }),
+
+  computed: {
+    ...mapGetters(['user', 'knownTokens']),
+
+    ...mapGetters({
+      source: 'ibcBridge/source',
+      destination: 'ibcBridge/destination',
+      availableAssets: 'ibcBridge/availableAssets'
+    }),
+
+    ...mapState('ibcBridge', [
+      'tx',
+      'packedTx',
+      'emitxferAction',
+      'error',
+      'result',
+      'proofs',
+      'step'
+    ]),
+
+    inProgress() {
+      return [0, 1, 2, 3].includes(this.step)
+    },
+
+    isFinished() {
+      return this.step === 4
+    },
+
+    steps() {
+      const { progress } = this
+
+      const status = this.error ? 'error' : 'active'
+
+      if (this.step === 0) {
+        return [
+          { id: 0, progress, label: 'Submitting source chain transfer', status, message: this.error },
+          { id: 1, progress, label: 'Waiting for transaction irreversibility', status: 'waiting' },
+          { id: 2, progress, label: 'Fetching proof for interchain transfer', status: 'waiting' },
+          { id: 3, progress, label: 'Submitting proof(s)', status: 'waiting' }
+        ]
+      }
+
+      if (this.step === 1) {
+        return [
+          { id: 0, progress, label: 'Submitting source chain transfer', status: 'success' },
+          { id: 1, progress, label: 'Waiting for transaction irreversibility', status, message: this.error },
+          { id: 2, progress, label: 'Fetching proof for interchain transfer', status: 'waiting' },
+          { id: 3, progress, label: 'Submitting proof(s)', status: 'waiting' }
+        ]
+      }
+
+      if (this.step === 2) {
+        return [
+          { id: 0, progress, label: 'Submitting source chain transfer', status: 'success' },
+          { id: 1, progress, label: 'Waiting for transaction irreversibility', status: 'success' },
+          { id: 2, progress, label: 'Fetching proof for interchain transfer', status, message: this.error },
+          { id: 3, progress, label: 'Submitting proof(s)', status: 'waiting' }
+        ]
+      }
+
+      if (this.step === 3) {
+        return [
+          { id: 0, progress, label: 'Submitting source chain transfer', status: 'success' },
+          { id: 1, progress, label: 'Waiting for transaction irreversibility', status: 'success' },
+          { id: 2, progress, label: 'Fetching proof for interchain transfer', status: 'success' },
+          { id: 3, progress, label: 'Submitting proof(s)', status, message: this.error }
+        ]
+      }
+
+      if (this.step === 4) {
+        return [
+          { id: 0, progress, label: 'Submitting source chain transfer', status: 'success' },
+          { id: 1, progress, label: 'Waiting for transaction irreversibility', status: 'success' },
+          { id: 2, progress, label: 'Fetching proof for interchain transfer', status: 'success' },
+          { id: 3, progress, label: 'Submitting proof(s)', status: 'success' }
+        ]
+      }
+
+      return []
+    },
+
+    asset: {
+      set (asset) {
+        return this.setAsset(asset)
+      },
+
+      get () {
+        return this.$store.state.ibcBridge.asset
+      }
+    },
+
+    sourceName: {
+      set (chain) {
+        return this.setSourceName(chain)
+      },
+
+      get () {
+        return this.$store.state.ibcBridge.sourceName
+      }
+    },
+
+    destinationName: {
+      set (chain) {
+        return this.setDestinationName(chain)
+      },
+
+      get () {
+        return this.$store.state.ibcBridge.destinationName
+      }
+    },
+
+    isValid() {
+      return Object.values(this.formData).every(Boolean) &&
+        this.destinationWallet && this.sourceWallet
+    }
+  },
+
+  watch: {
+    availableAssets() {
+      if (this.step === 4 || this.step === null) this.asset = null
+    },
+
+    sourceName() {
+      if (this.sourceName == this.destinationName) {
+        this.destinationName = null
+        if (this.step === 4 || this.step === null) this.asset = null
+      }
+    },
+
+    destinationName() {
+      if (this.destinationName == this.sourceName) {
+        this.sourceName = null
+        if (this.step === 4 || this.step === null) this.asset = null
+      }
+    }
+  },
+
+  mounted() {
+    // TODO source and destination by query params
+    if (this.inProgress && this.asset?.quantity) this.formData.amount = parseFloat(this.asset.quantity)
+    if (this.inProgress && !this.error) this.setError('Window was closed')
+  },
+
+  methods: {
+    ...mapMutations({
+      setSourceName: 'ibcBridge/setSourceName',
+      setDestinationName: 'ibcBridge/setDestinationName',
+      setStep: 'ibcBridge/setStep',
+      setTx: 'ibcBridge/setTx',
+      setPackedTx: 'ibcBridge/setPackedTx',
+      setError: 'ibcBridge/setError',
+      setProofs: 'ibcBridge/setProofs',
+      setResult: 'ibcBridge/setResult',
+      setAsset: 'ibcBridge/setAsset'
+    }),
+
+    clear() {
+      this.setTx(null)
+      this.setStep(null)
+      this.setError(null)
+      this.setSourceName(null)
+      this.setDestinationName(null)
+      this.setPackedTx(null)
+      this.setProofs(null)
+      this.setResult(null)
+      this.setAsset(null)
+    },
+
+    logout(data) {
+      if (this.inProgress) return
+
+      if (data == 'sender') this.sourceWallet.wallet.logout()
+      if (data == 'receiver') this.destinationWallet.wallet.logout()
+
+      this.formData[data] = null
+    },
+
+    reset() {
+      //this.finished = false
+
+      //this.result = {
+      //  source: '',
+      //  destination: ''
+      //}
+    },
+
+    updateProgress(value) {
+      this.progress = value
+    },
+
+    help() {
+      this.setStep(2)
+    },
+
+    async transfer() {
+      if (this.step === 4 || !this.step) {
+        if (!this.sourceName || !this.destinationName) return this.$notify({ type: 'info', title: 'IBC', message: 'Select chains' })
+        if (!this.sourceWallet || !this.destinationWallet) return this.$notify({ type: 'info', title: 'IBC', message: 'Connect wallets' })
+        if ((!this.formData.amount || parseFloat(this.formData.amount) <= 0) && !this.step) return this.$notify({ type: 'info', title: 'IBC', message: 'Select amount' })
+        if (!this.asset) return this.$notify({ type: 'info', title: 'IBC', message: 'Select IBC Token' })
+
+        this.setStep(0)
+        this.setResult(0)
+
+        try {
+          const { precision } = await this.getToken(
+            this.source.rpc,
+            this.asset.native
+              ? this.asset.nativeTokenContract
+              : this.asset.sourceTokenContract,
+            this.asset.symbol
+          )
+
+          this.asset.quantity = parseFloat(this.formData.amount).toFixed(precision) + ' ' + this.asset.symbol
+        } catch (e) {
+          this.setStep(null)
+          return this.$notify({ type: 'error', title: 'Error fetch tokens', message: e })
+        }
+      } else {
+        if ((this.step === 2 || this.step == 3) && !this.destinationWallet) {
+          const { status, e } = await this.connectToWallet()
+
+          if (!status) {
+            return this.setError(e.message)
+          }
+        }
+
+        this.setError(null)
+      }
+
+      const ibcTransfer = new IBCTransfer(this.source, this.destination, this.sourceWallet, this.destinationWallet, this.asset)
+
+      if (this.step === 0) {
+        try {
+          const signedTx = await ibcTransfer.signSourceTrx()
+
+          const { tx, packedTx, leap } = await ibcTransfer.sourceTransfer(signedTx) // TODO leap
+
+          // TODO Handle if no
+          //const emitxferAction = ibcTransfer.findEmitxferAction(tx)
+          //console.log('emitxferAction', emitxferAction)
+
+          this.setStep(1)
+          this.setTx(tx)
+          this.setPackedTx(packedTx)
+          this.setResult({ ...this.result, source: tx.transaction_id })
+          return this.transfer()
+        } catch (e) {
+          this.setStep(null)
+          return this.$notify({ type: 'warning', title: 'Sign transaction', message: e })
+        }
+      }
+
+      if (this.step === 1) {
+        let prog = 0
+        const progressInterval = setInterval(() => {
+          prog = Math.min(prog + 1, 100)
+          this.progress = prog
+        }, 1700)
+
+        try {
+          //throw new Error('test asdfasf 1')
+          const tx = await ibcTransfer.waitForLIB(this.source, this.tx, this.packedTx)
+          this.setTx(tx)
+          this.setStep(2)
+          console.log('clean error step 1')
+          if (this.error) this.setError(null)
+          return this.transfer()
+        } catch (e) {
+          this.setError(e.message)
+          return this.$notify({ type: 'error', title: 'Waiting for LIB', message: e })
+        } finally {
+          clearInterval(progressInterval)
+          this.updateProgress(0)
+        }
+      }
+
+      if (this.step === 2) {
+        try {
+          //throw new Error('test asdfasf 2')
+
+          const scheduleProofs = (await ibcTransfer.getScheduleProofs(this.tx)) || []
+          //throw new Error('test')
+          console.log('scheduleProofs', scheduleProofs)
+
+          const emitxferAction = ibcTransfer.findEmitxferAction(this.tx)
+          console.log('emitxferAction', emitxferAction)
+
+          const emitxferProof = await ibcTransfer.getProof({
+            type: 'heavyProof',
+            action: emitxferAction,
+            onProgress: this.updateProgress,
+            block_to_prove: this.tx.processed.block_num //block that includes the emitxfer action we want to prove
+          })
+
+          console.log('emitxferProof', emitxferProof)
+
+          console.log('setProofs', [...scheduleProofs, emitxferProof])
+          this.setProofs([...scheduleProofs, emitxferProof])
+          console.log('this.proofs', this.proofs)
+
+          this.setStep(3)
+          console.log('clean error step 2')
+          if (this.error) this.setError(null)
+          return this.transfer()
+        } catch (e) {
+          this.setError(e.message)
+          return this.$notify({ type: 'error', title: 'Fetching Proofs', message: e })
+        }
+      }
+
+      if (this.step === 3) {
+        try {
+          //throw new Error('test asdfasf 3')
+          console.log('this.proofs', this.proofs)
+          const { tx } = await ibcTransfer.submitProofs(this.proofs)
+          this.setResult({ ...this.result, destination: tx.transaction_id })
+          this.setStep(4)
+
+          console.log('clean error step 3')
+          if (this.error) this.setError(null)
+
+          this.asset = null
+          this.formData.amount = null
+        } catch (e) {
+          this.setError(e.message)
+          return this.$notify({ type: 'error', title: 'Submitting Destination Proofs ', message: e })
+        }
+      }
+    },
+
+    _setAsset(asset) {
+      this.asset = asset
+    },
+
+    async setMax() {
+      if (!this.sourceWallet) {
+        return this.$notify({ type: 'info', title: 'Connect wallet', message: 'Connect source wallet to set max amount' })
+      }
+
+      if (!this.asset) return this.$notify({ type: 'info', title: 'Select IBC Token', message: 'Select IBC token to set MAX amount' })
+
+      const contract = this.asset.native
+        ? this.asset.nativeTokenContract
+        : this.asset.sourceTokenContract
+
+      let balances
+      try {
+        const { data } = await this.$axios.get(`${this.source.lightapi}/api/balances/${this.source.name}/${this.sourceWallet.name}`)
+        balances = data.balances
+      } catch (e) {
+        return this.$notify({ type: 'warning', title: 'Fail Balance fetch', message: e.message })
+      }
+
+      const balance = balances.find(b => {
+        return b.currency === this.asset.symbol && b.contract === contract
+      })
+
+      if (!balance) return this.$notify({ type: 'warning', title: 'Set MAX', message: 'No balance found' })
+
+      this.formData.amount = balance.amount
+    },
+
+    makeError() {
+      this.steps[1].status = 'error'
+      this.steps[1].message = 'TX not approved'
+    },
+
+    async connectFromWallet() {
+      try {
+        const { wallet, name, authorization } = await this.$store.dispatch('chain/asyncLogin', {
+          chain: this.sourceName,
+          message: 'Connect Source Wallet'
+        })
+
+        this.formData.sender = name
+        this.sourceWallet = { wallet, name, authorization }
+      } catch (e) {
+        this.$notify({ type: 'warning', title: 'Wallet not connected', message: e })
+      }
+    },
+
+    async connectToWallet() {
+      // TODO Анкер не подрубается со второго раза
+      try {
+        const { wallet, name, authorization } = await this.$store.dispatch('chain/asyncLogin', {
+          chain: this.destinationName,
+          message: 'Connect Destination Wallet'
+        })
+
+        this.formData.receiver = name
+        this.destinationWallet = { wallet, name, authorization }
+        return { status: true }
+      } catch (e) {
+        this.$notify({ type: 'warning', title: 'Wallet not connected', message: e })
+        return { status: false, e }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form {
+  background: var(--background-color-base);
+  border: var(--border-1);
+  border-radius: 12px;
+  width: 720px;
+  margin: 0 auto;
+  padding: 32px;
+  z-index: 100;
+
+  .transfer-btn {
+    width: 312px;
+  }
+
+  .network-select,
+  .connect-button {
+    width: 226px;
+    height: 40px;
+  }
+
+  .choise-asset-btn {
+    width: 140px;
+
+    border: 1px solid var(--btn-default);
+
+    &:hover {
+      border-color: var(--main-green) !important;
+      background-color: var(--btn-default);
+    }
+
+  }
+}
+</style>
+
+<style lang="scss">
+.amount-input {
+  position: relative;
+  width: 100%;
+
+  &:hover .el-input__inner,
+  & .el-input__inner:active,
+  & .el-input__inner:focus {
+    border-color: var(--main-green) !important;
+  }
+
+  & .el-input__inner,
+  & .el-input-group__prepend {
+    border: 1px solid var(--select-color);
+    background: var(--select-color);
+  }
+
+  .max-btn {
+    position: absolute;
+    top: 6px;
+    left: 12px;
+    font-size: 14px;
+    background: var(--bg-alter-1);
+    border: var(--border-1);
+    border-radius: 2px;
+    color: var(--text-default);
+    padding: 2px 4px;
+  }
+
+  & .el-input__inner {
+    padding: 0 60px !important;
+  }
+}
+</style>
diff --git a/components/bridge/BridgeSlider.vue b/components/bridge/BridgeSlider.vue
new file mode 100644
index 000000000..08c206c09
--- /dev/null
+++ b/components/bridge/BridgeSlider.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+.d-flex.align-items-center.gap-16.slider.justify-content-center
+  .step.d-flex.align-items-center.gap-16(
+    v-for="{ id, progress, label, status, message } in steps"
+    :class="status"
+  )
+    .line(v-if="id")
+    .dot
+      .ellipse(v-if="status === 'active'")
+      .label.fs-12 {{ label }}
+      .progress-percent.fs-12(v-if="status === 'active'") {{ progress }}%
+      .message.fs-12(v-if="status === 'error' && message") {{ message }}
+
+</template>
+
+<script>
+export default {
+  props: ['steps'],
+
+  mounted() {
+    this.$watch(({ steps }) => steps.map(({ status }) => status), statuses => {
+      const errorIdx = statuses.findIndex(status => status === 'error')
+      if (errorIdx >= 0)
+        for (let i = 0; i < errorIdx; i++) {
+          this.steps[i].status = 'error'
+        }
+    }, { immediate: true })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg)
+  }
+}
+
+.slider {
+  height: 125px;
+}
+
+.step {
+  .line {
+    height: 2px;
+    width: 80px;
+    border-radius: 4px;
+  }
+
+  .ellipse {
+
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--main-green);
+    border-radius: 50%;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+
+    position: relative;
+    left: -5px;
+    top: -5px;
+
+    animation: rotate .5s linear infinite;
+  }
+
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    position: relative;
+
+    .label {
+      position: absolute;
+      top: 15px;
+      width: 88px;
+      left: -44px;
+      text-align: center;
+    }
+
+    .progress-percent {
+      position: absolute;
+      bottom: 15px;
+      width: 40px;
+
+      left: -20px;
+      text-align: center;
+    }
+
+    .message {
+      position: absolute;
+      bottom: 15px;
+      width: 300px;
+      left: -150px;
+      text-align: center;
+    }
+
+  }
+
+  &.waiting>* {
+    background: var(--slider-bg);
+    color: var(--text-disable);
+  }
+
+  &.success>*,
+  &.active>* {
+    background: var(--main-green);
+    color: var(--main-green);
+  }
+
+  &.error>* {
+    background: var(--main-red);
+    color: var(--main-red);
+  }
+
+}
+
+.dot {}
+</style>
diff --git a/components/bridge/Circle1.vue b/components/bridge/Circle1.vue
new file mode 100644
index 000000000..d88df5590
--- /dev/null
+++ b/components/bridge/Circle1.vue
@@ -0,0 +1,189 @@
+<template>
+  <!-- eslint-disable -->
+  <div class="circles">
+    <svg viewBox="0 0 100 100">
+      <defs data-v-e34="">
+        <linearGradient id="g1">
+          <stop stop-color="#949494" offset="0"></stop>
+          <stop stop-color="rgba(255, 255, 255, 0)" stop-opacity="0" offset="1"></stop>
+        </linearGradient>
+        <linearGradient id="g2">
+          <stop stop-color="rgba(255, 255, 255, 0)" offset="0"></stop>
+          <stop :stop-color="COLOR" offset="1"></stop>
+        </linearGradient>
+      </defs>
+      <g transform-origin="50% 50%" stroke-width=".6" fill="none" stroke-dashoffset="0" stroke-linecap="round"></g>
+    </svg>
+    <img id="logo" class="logo" src="~/assets/images/frame_logo.svg" alt="" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['color'],
+
+  data: () => ({
+    COLOR: 'white' // Dynamic prop for stroke color
+  }),
+
+  watch: {
+    color() {
+      if (!this.COLOR) {
+        this.COLOR = this.color
+      } else {
+        this.changeColor()
+      }
+    }
+  },
+
+  mounted() {
+    this.COLOR = this.color
+
+    setTimeout(() => { this.init() }, 500)
+  },
+
+  methods: {
+    changeColor(to) {
+      document.querySelectorAll('.circles .is-load').forEach(e => {
+        e.style.transition = 'opacity .2s linear'
+        e.style.opacity = 0
+
+        setTimeout(() => {
+          e.style.transition = 'opacity .8s linear'
+          e.style.opacity = 0.8
+          this.COLOR = this.color
+        }, 150)
+      })
+    },
+
+    init() {
+      document.getElementById('logo').classList.add('is-load')
+      document.querySelector('.circles g').innerHTML = this.generateCircle(20)
+      setTimeout(() => document.querySelector('.circles g').classList.add('is-load'), 10)
+    },
+
+    random(start, end) {
+      const t = Math.random()
+      return start * (1 - t) + end * t
+    },
+
+    generateCircle(total) {
+      return Array.from(Array(total), (_, i) => i + 1)
+        .map((i) => {
+          const r = 5 + (30 / total) * i
+          const dash = 15 + (30 / total) * i * 3
+          const delay = this.random(-100, 0)
+          const duration = this.random(20, 70)
+          return `
+          <circle 
+            style="--delay: ${delay}; --duration: ${duration}" 
+            cx="50" cy="50" r="${r}" stroke-dasharray="${dash}" 
+           />
+        `
+        })
+        .join('')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.circles {
+  svg {
+    width: 1200px;
+    height: 1200px;
+
+    @media only screen and (max-width: 640px) {
+      width: 500px;
+      height: 500px;
+    }
+  }
+
+  circle {
+    stroke: url(#g1);
+    animation-name: r;
+    transform-origin: 50% 50%;
+    animation-duration: calc(var(--duration) * 1s);
+    animation-delay: calc(var(--delay) * 1s);
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+
+    opacity: 0;
+    transition: opacity 6s;
+    -webkit-transition: opacity 6s;
+  }
+
+  circle:nth-child(even) {
+    stroke: url(#g2);
+    animation-direction: reverse;
+  }
+
+  @keyframes r {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  .is-load {
+    circle {
+      opacity: 1;
+    }
+  }
+}
+</style>
+
+<style scoped lang="scss">
+.circles {
+  position: absolute;
+  z-index: 0;
+
+  pointer-events: none;
+
+  @media only screen and (max-width: 640px) {
+    top: 25%;
+    left: -25%;
+  }
+}
+
+.logo {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+
+  height: 130px;
+  opacity: 0.3;
+
+  @media only screen and (max-width: 640px) {
+    left: 250px;
+    height: 50px;
+  }
+
+}
+
+.is-load {
+  transition: opacity 6s;
+  -webkit-transition: opacity 6s;
+
+  opacity: 0.6;
+
+  circle {
+    opacity: 0.8 !important;
+  }
+}
+
+@media only screen and (max-width: 1040px) {
+  .circles {
+    right: -40%;
+  }
+}
+
+@media only screen and (max-width: 840px) {
+  .circles {
+    right: 50%;
+    // top: 50%;
+    transform: translateX(50%);
+  }
+}
+</style>
diff --git a/components/bridge/Circle2.vue b/components/bridge/Circle2.vue
new file mode 100644
index 000000000..caba15e38
--- /dev/null
+++ b/components/bridge/Circle2.vue
@@ -0,0 +1,188 @@
+<template>
+  <!-- eslint-disable -->
+  <div class="circl">
+    <svg viewBox="0 0 100 100">
+      <defs data-v-e215fa34="">
+        <linearGradient id="a1">
+          <stop stop-color="#949494" offset="0"></stop>
+          <stop stop-color="rgba(255, 255, 255, 0)" stop-opacity="0" offset="1"></stop>
+        </linearGradient>
+        <linearGradient id="a2">
+          <stop stop-color="rgba(255, 255, 255, 0)" offset="0"></stop>
+          <stop :stop-color="COLOR" offset="1"></stop>
+        </linearGradient>
+      </defs>
+      <g transform-origin="50% 50%" stroke-width=".6" fill="none" stroke-dashoffset="0" stroke-linecap="round"></g>
+    </svg>
+    <img id="logo2" class="logo2" src="~/assets/images/frame_logo.svg" alt="" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['color', 'total'],
+
+  data: () => ({
+    COLOR: 'white' // Dynamic prop for stroke color
+  }),
+
+  watch: {
+    color() {
+      if (!this.COLOR) {
+        this.COLOR = this.color
+      } else {
+        this.changeColor()
+      }
+    }
+  },
+
+  mounted() {
+    this.COLOR = this.color
+    setTimeout(() => { this.init() }, 500)
+  },
+
+  methods: {
+    changeColor(to) {
+      document.querySelectorAll('.circl .is-load').forEach(e => {
+        e.style.transition = 'opacity .2s linear'
+        e.style.opacity = 0
+
+        setTimeout(() => {
+          e.style.transition = 'opacity .8s linear'
+          e.style.opacity = 0.8
+          this.COLOR = this.color
+        }, 150)
+      })
+    },
+
+    init() {
+      document.getElementById('logo2').classList.add('is-load')
+      document.querySelector('.circl g').innerHTML = this.generateCircle(20)
+      setTimeout(() => document.querySelector('.circl g').classList.add('is-load'), 10)
+    },
+
+    random(start, end) {
+      const t = Math.random()
+      return start * (1 - t) + end * t
+    },
+
+    generateCircle(total) {
+      return Array.from(Array(total), (_, i) => i + 1)
+        .map((i) => {
+          const r = 5 + (30 / total) * i
+          const dash = 15 + (30 / total) * i * 3
+          const delay = this.random(-100, 0)
+          const duration = this.random(20, 70)
+          return `
+          <circle 
+            style="--delay: ${delay}; --duration: ${duration}" 
+            cx="50" cy="50" r="${r}" stroke-dasharray="${dash}" 
+           />
+        `
+        })
+        .join('')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.circl {
+  svg {
+    width: 1200px;
+    height: 1200px;
+
+    @media only screen and (max-width: 640px) {
+      width: 500px;
+      height: 500px;
+    }
+  }
+
+  circle {
+    stroke: url(#a1);
+    animation-name: r;
+    transform-origin: 50% 50%;
+    animation-duration: calc(var(--duration) * 1s);
+    animation-delay: calc(var(--delay) * 1s);
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+
+    opacity: 0;
+    transition: opacity 6s;
+    -webkit-transition: opacity 6s;
+  }
+
+  circle:nth-child(even) {
+    stroke: url(#a2);
+    animation-direction: reverse;
+  }
+
+  @keyframes r {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  .is-load {
+    circle {
+      opacity: 1;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.circl {
+  position: absolute;
+  z-index: 0;
+
+  pointer-events: none;
+
+  @media only screen and (max-width: 640px) {
+    top: 25%;
+    left: -25%;
+  }
+}
+
+.logo2 {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+
+  height: 130px;
+  opacity: 0.3;
+
+  @media only screen and (max-width: 640px) {
+    left: 250px;
+    height: 50px;
+  }
+
+}
+
+.is-load {
+  transition: opacity 6s;
+  -webkit-transition: opacity 6s;
+
+  opacity: 0.6;
+
+  circle {
+    opacity: 0.8 !important;
+  }
+}
+
+@media only screen and (max-width: 1040px) {
+  .circl {
+    right: -40%;
+  }
+}
+
+@media only screen and (max-width: 840px) {
+  .circl {
+    right: 50%;
+    // top: 50%;
+    transform: translateX(50%);
+  }
+}
+</style>
diff --git a/components/bridge/CirclesBg.vue b/components/bridge/CirclesBg.vue
new file mode 100644
index 000000000..6838ea3eb
--- /dev/null
+++ b/components/bridge/CirclesBg.vue
@@ -0,0 +1,505 @@
+<template>
+  <svg
+    width="820"
+    height="657"
+    viewBox="0 0 700 657"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <g opacity="0.5">
+      <g filter="url(#filter0_f_3342_6969)">
+        <path
+          d="M332.278 281.185C414.526 242.131 392.648 287.543 371.428 315.131C381.527 303.816 399.139 287.974 388.79 315.131C375.853 349.077 483.43 340.025 508.281 373.647C533.133 407.27 517.473 412.443 434.748 413.736C352.023 415.029 398.322 398.864 332.278 418.585C266.234 438.306 286.32 411.473 236.957 352.957C187.595 294.44 229.468 330.003 332.278 281.185Z"
+          fill="#353535"
+        />
+      </g>
+      <g opacity="0.8">
+        <g clip-path="url(#clip0_3342_6969)">
+          <path
+            d="M283.238 354.843C298.482 393.735 342.401 412.919 381.335 397.691"
+            stroke="url(#paint0_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M260.296 88.7869C128.474 140.343 63.4509 288.884 115.063 420.564"
+            stroke="url(#paint1_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M284.474 229.703C338.416 191.453 413.186 204.126 451.478 258.01C489.77 311.894 477.083 386.583 423.141 424.833"
+            stroke="url(#paint2_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M376.476 277.465C383.571 280.662 389.903 285.329 395.054 291.157C400.204 296.985 404.055 303.841 406.351 311.269C408.647 318.697 409.335 326.528 408.37 334.242"
+            stroke="url(#paint3_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M373.565 307.462C378.81 312.612 381.82 319.613 381.948 326.958C382.075 334.303 379.309 341.404 374.246 346.732"
+            stroke="url(#paint4_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M353.734 89.7402C485.061 89.7402 591.523 196.087 591.523 327.271"
+            stroke="url(#paint5_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M433.986 191.372C509.122 235.646 534.102 332.381 489.78 407.436C445.459 482.491 348.619 507.444 273.482 463.17"
+            stroke="url(#paint6_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M243.929 262.569C208.156 323.147 228.318 401.223 288.962 436.957C349.605 472.691 427.766 452.551 463.539 391.974"
+            stroke="url(#paint7_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M445.328 172.122C359.518 121.559 248.922 150.057 198.304 235.774"
+            stroke="url(#paint8_linear_3342_6969)"
+            stroke-width="7.07495"
+            stroke-linecap="round"
+          />
+          <path
+            d="M385.509 273.463C355.759 255.934 317.416 265.813 299.868 295.531C282.319 325.248 292.209 363.55 321.959 381.079"
+            :stroke="stroke"
+            stroke-opacity="0.5"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M396.219 255.326C356.442 231.887 305.175 245.098 281.711 284.832C258.247 324.566 271.471 375.778 311.248 399.217"
+            stroke="url(#paint9_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M267.284 276.331C239.12 324.024 254.993 385.494 302.738 413.628C350.483 441.762 412.02 425.905 440.184 378.212"
+            stroke="url(#paint10_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M545.195 276.025C516.861 170.399 408.173 107.716 302.432 136.018C196.691 164.321 133.94 272.891 162.273 378.518"
+            :stroke="stroke"
+            stroke-opacity="0.5"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M545.195 276.025C516.861 170.399 408.173 107.716 302.432 136.018C196.691 164.321 133.94 272.891 162.273 378.518"
+            :stroke="stroke"
+            stroke-opacity="0.5"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M432.431 495.704C525.469 452.404 565.751 341.962 522.404 249.025C479.056 156.089 368.495 115.85 275.457 159.151"
+            stroke="url(#paint11_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M272.948 280.607C298.653 236.134 355.583 220.896 400.105 246.573C444.627 272.25 459.881 329.118 434.176 373.592"
+            stroke="url(#paint12_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M353.562 185.99C275.545 185.99 212.3 249.167 212.3 327.1C212.3 405.032 275.545 468.209 353.562 468.209"
+            stroke="url(#paint13_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M539.064 515.88C643.41 413.568 644.969 246.129 542.546 141.895"
+            :stroke="stroke"
+            stroke-opacity="0.5"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M251.817 280.465C225.951 336.666 250.592 403.172 306.854 429.01C363.116 454.848 429.694 430.234 455.56 374.033"
+            :stroke="stroke"
+            stroke-opacity="0.5"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M417.624 356.705C433.843 321.465 418.392 279.763 383.113 263.561"
+            :stroke="stroke"
+            stroke-opacity="0.5"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M314.16 327.422C314.148 349.349 331.933 367.134 353.884 367.146"
+            stroke="url(#paint14_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M416.615 464.894C492.685 430.164 526.167 340.41 491.399 264.422C456.632 188.435 366.78 154.989 290.711 189.719"
+            stroke="url(#paint15_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M558.302 386.294C590.863 273.436 525.671 155.579 412.69 123.053C299.71 90.5271 181.725 155.649 149.164 268.507"
+            stroke="url(#paint16_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M384.001 336.013C379.143 352.851 361.539 362.568 344.682 357.715C327.825 352.862 318.098 335.277 322.957 318.439"
+            stroke="url(#paint17_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M116.097 327.281C116.075 196.124 222.496 89.7821 353.795 89.76"
+            stroke="url(#paint18_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M187.477 327.364C187.492 419.081 261.937 493.42 353.753 493.404C445.569 493.389 519.989 419.025 519.973 327.308"
+            stroke="url(#paint19_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M399.647 260.904C363.388 236.01 313.515 245.594 288.253 282.31"
+            :stroke="stroke"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M607.899 199.433C538.111 61.1225 367.755 6.2872 227.399 76.9546C87.0418 147.622 29.8344 317.032 99.6224 455.342"
+            :stroke="stroke"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M429.344 217.716C369.576 176.682 287.369 192.48 245.728 253.001C204.088 313.522 218.783 395.847 278.551 436.881"
+            :stroke="stroke"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M396.857 143.366C497.159 166.931 559.084 268.37 535.17 369.936"
+            :stroke="stroke"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M353.734 269.178C365.755 269.178 377.481 272.899 387.298 279.829C397.115 286.759 404.541 296.558 408.554 307.877C412.567 319.196 412.971 331.479 409.708 343.036C406.446 354.594 399.679 364.858 390.337 372.415"
+            stroke="url(#paint20_linear_3342_6969)"
+            stroke-width="5"
+            stroke-linecap="round"
+          />
+        </g>
+      </g>
+      <rect width="90.8336" height="129.513" transform="matrix(-1 0 0 1 396.055 253.506)" fill="url(#pattern0)" />
+      <g opacity="0.95">
+        <path
+          opacity="0.95"
+          d="M350.466 392.877L401.936 342.711L350.466 245.848L299 342.711L350.466 392.877Z"
+          fill="#323232"
+          :stroke="stroke"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          opacity="0.95"
+          d="M299 342.713L350.47 327.58M356.564 354.275L401.936 342.713L356.564 354.275ZM299 342.713L343.777 354.275L299 342.713ZM350.466 392.878L367.949 278.752H332.987L350.466 392.878V392.878ZM401.936 342.713L350.47 327.58L401.936 342.713Z"
+          :stroke="stroke"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_f_3342_6969"
+        x="-83.7177"
+        y="-34"
+        width="902.763"
+        height="759"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_3342_6969" />
+      </filter>
+      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+        <use xlink:href="#image0_3342_6969" transform="translate(-0.00728572) scale(0.00225962 0.00158479)" />
+      </pattern>
+      <linearGradient
+        id="paint0_linear_3342_6969"
+        x1="346.087"
+        y1="411.477"
+        x2="318.538"
+        y2="341.037"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_3342_6969"
+        x1="234.405"
+        y1="373.889"
+        x2="141.129"
+        y2="135.393"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_3342_6969"
+        x1="451.478"
+        y1="258.01"
+        x2="353.878"
+        y2="327.368"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_3342_6969"
+        x1="408.794"
+        y1="305.854"
+        x2="376.476"
+        y2="305.854"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_3342_6969"
+        x1="381.952"
+        y1="327.097"
+        x2="373.565"
+        y2="327.097"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint5_linear_3342_6969"
+        x1="591.523"
+        y1="208.506"
+        x2="353.734"
+        y2="208.506"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint6_linear_3342_6969"
+        x1="489.78"
+        y1="407.436"
+        x2="353.81"
+        y2="327.142"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint7_linear_3342_6969"
+        x1="431.153"
+        y1="446.816"
+        x2="211.666"
+        y2="317.204"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint8_linear_3342_6969"
+        x1="399.502"
+        y1="249.724"
+        x2="244.217"
+        y2="158.024"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint9_linear_3342_6969"
+        x1="353.734"
+        y1="327.271"
+        x2="281.751"
+        y2="284.764"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint10_linear_3342_6969"
+        x1="414.686"
+        y1="421.39"
+        x2="241.883"
+        y2="319.345"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint11_linear_3342_6969"
+        x1="353.944"
+        y1="327.427"
+        x2="522.338"
+        y2="248.886"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint12_linear_3342_6969"
+        x1="457.447"
+        y1="333.328"
+        x2="296.307"
+        y2="240.193"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint13_linear_3342_6969"
+        x1="353.562"
+        y1="327.1"
+        x2="212.3"
+        y2="327.1"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1A1A1A" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint14_linear_3342_6969"
+        x1="334.033"
+        y1="327.433"
+        x2="334.011"
+        y2="367.136"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint15_linear_3342_6969"
+        x1="359.579"
+        y1="158.277"
+        x2="485.258"
+        y2="433.555"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint16_linear_3342_6969"
+        x1="353.733"
+        y1="327.4"
+        x2="412.572"
+        y2="123.019"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint17_linear_3342_6969"
+        x1="344.682"
+        y1="357.715"
+        x2="353.461"
+        y2="327.221"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint18_linear_3342_6969"
+        x1="234.926"
+        y1="89.78"
+        x2="234.966"
+        y2="327.261"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint19_linear_3342_6969"
+        x1="353.725"
+        y1="327.336"
+        x2="353.753"
+        y2="493.404"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint20_linear_3342_6969"
+        x1="411.891"
+        y1="320.796"
+        x2="353.734"
+        y2="320.796"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#2F2F2F" />
+        <stop offset="1" stop-color="#060606" stop-opacity="0" />
+      </linearGradient>
+      <clipPath id="clip0_3342_6969">
+        <rect
+          width="625"
+          height="669"
+          rx="20"
+          transform="matrix(-4.37114e-08 -1 -1 4.37114e-08 685 641)"
+          fill="white"
+        />
+      </clipPath>
+      <image
+        id="image0_3342_6969"
+        width="449"
+        height="631"
+        xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcEAAAJ3CAYAAADswOodAAAACXBIWXMAAC4jAAAuIwF4pT92AAAgAElEQVR4nO3d+3XcRrLH8cEe/29lYDuC1UZgKYLlzYCKYOUIbEfA3QikDCRHQDsCaiOgNgLKEeAeyDUUNJxHV6MfVdXfzzk+vg+ZGgIYFLpR/etpB6C5eZ6f7Xa7q91u97383e+nafrAmQAAhDbP8/U8zw/zU7dSHAEAiEcK4Dl3FEIAQDhLcTsxAjz0C2cfABDKPM83CQVwlkL5PWcfABDCUtQSC+DeG848ACCEpagpi+DMaBAA4N48z88zCuDiHWcfAOCaLH3I9YKzDwBwaSliGwrg4pYzDwBwaeMocI/RIADAl4SF8anuOfUAAFeW4lWoCC6uOfsAABcKjgL3GA0CAOyTeLSSo8C915x+AIBpS/ZnhQI4S5wa4doAAJsUIdm5CNcGCvobBxMoapmy1IzW/r3b7T4p/vy/GA0CAMzJCMm+l5Hja+V/R7g2AMCWjJDsx2UPGY00hGsDAGzIGQWuP3jGkgpGgwAAG5YdH5RF7Orwg8/zfKf8Gc85/QCArjJCso+GYpf6OQAANJMRkn0yELvkzwIAoKrSozdGgwAANzK6Oi++x8t4v0i4NgCgrVodnVs7TQEAqK7m2r4taw4BAKgqIyT7RvN5ZDSoySAlXBsAUF9GSHZWgcootIRrAwDqalWcWhVbAABMFiZGgwAAMzIaVjbtBp+5Sz3h2gCAsnotXSBcGwDQXc9lC4wGAQDdZMSZ3ZX8rMuuE8q/nzg1AEAZFoKtCdcGADRnJdSacG0AQHOWRmCMBgEAzVjrzCRcGwDQjMWuTMK1AQDVWV2fx2gQAFBVZjxas7V5y64UykJInBoAII31zE7CtQEAVXgpMIRrAwCK8zLVaH3KFgDgjLemE8K1AQDFeFx+QLg2AGAzr0sPGA0CADbLiCS7snLUl10rlJ+dODUMD4DwHk5NuDYAIFuEYGrCtQEAalE2rO298S8AwKFI3ZWEawMAkkXrrCRcGwCQLOIaO0aDAICLomZvEq4NADgreqEgXBsAcFL0IsFoEABwlDSPhC8QGYX+xsDHBgDUNFLjCOHaAIBHoy0hIFwbAPBonud3yqLgfvlAxmjwuYGPDQAoadSQacK1AQBDB0wTrg0AAxt9NDT67w8AQ2PTWd+bBgMAMtEh+RfCtQFgQKyV+4JwbQAYyDzPr5U3/dDr5HJGg8SpAYBD5GceR7g2AAyAm/1xPBwAQHDc6M/jAQEAAstoAHk90vUgDwk0DAFANCwFSMPSEQAIiGUA6RgNAkAgyw4Iypv60AvCM0aD7wx8bADAMQRF63HMACAAQqLzcNwAIABGNPk4dgDgGO+2tuFdKgA4RpfjdnTVAoBDrHcrg/WVAOAMySdlkbQDAI6QgVkWmasA4AQ37Dp4sAAAB7hZ18HDBQAYxw7pdbEjPwAYRjt/fTQcAYBBtPK3wdITADAoI+LrivOYZ57nO+WxJk4NAGoh7LktjjcAGELQc3sccwAwgFFJHxx3ADAgo1vxOeetjGXXDeWxpxsXAEqhU7EvOnIBoCPWrPXH2kwA6CAjHu2G81SejAaJUwOAVsixtIW8VgBoiJuuLTyUAEAj3HBt4sEEABqgEcMuGpUAoCJa8m1jyQoAVMQo0D5GgwBQQUZM1x3nob1ldw7leSJODQAuIbDZD84VABREWLMvnC8AKIhNXP1hk2MAKICOQ5/o5AWAAug29ItuXgDYgFGgb4wGASBTZjwao0Bjlt07lIWQODUAIIsyBrJeAUCJG2csPNAAgAJTaLEwtQ0AiWimiIkmJwBIQFt9XCx3AYAzGAXGxmgQAM4geDk+zjEAHEHo8hg4zwBwBCOEcXCuAWCFjVjHwgbJALBC1+B46AIGADoGh0UnMIDhSZIIo8BBZYwGX49+zAAEQqbk2MiIBTAsboDY8SAEYFTc/LDjYQjAiKQpghsfPst4ILrhyAFwi/Z4HKJBCsAQaI3HMSyVATCEeZ7fKW92jAIHkTEafD76MQPgCOHJOIfrA0BoBCfjEq4RACHxlI8UXCcAQlp2AlDe3HjfM6iM98ZXox8zAIbR+QcNOogBhMIaMGixlhRACEvyv/JmxigQWaNBUoVQysSRRAlyU1qmqrg5oYVfp2kiYxab/Y1DiEJeUwDR0L8YDaIEiiA2k5vRvziSaOiZPHgBmzAdis3k3R7NCujhh2maPnLkkYuRIDaR7k4KIHr5mSOPLSiC2IqbEHq6ZpkNtqAIIpskvTAKRG9svItsFEFswc0HFlwRro1cFEFkkZsONx5YwbQ8slAEkYubDix5wWgQOVgiATXJbsyNPPuw2+1+46jjhG83rP/7OE3TDxxYAFVlhGSvsSccTsrYY/AQjVpQYToUKnKT2dKSTjs7ztl6fTBNDxWKIJJJPNrWmwxFEOdsvT6WHSmIU0MyiiA0XpcoYjQw4IwfCxycnwnXRiqKIJIUDsnmBoVTSlwbhGsjGUUQqUpulfSco44TSl0bbLWEJBRBXCTZjCUbDv7OUcchieEr5RmJRkhBEUSK0h13PKHjmNLXBeHauIgiiLMqbZVEYwyOqXFdsGQCZ1EEcUluMsxZPKHjiO8qHJRrupFxDkUQJ2WEZH9S/FmKIA6lXhOa62zHaBDnUARxjvbm8R/Fn6VDFIdSr4klf/Z3xdEjXBsnUQRxVMYocLkp/Vvx52tMfcEpWc6Q2hizFMFflb8po0EcRRHEKdp3gT9N0/RJMVXFSBBrmuvhf9M0LQ9d7xX/zQvCtXEMRRBPZIRkv52m6YP8zx8u/Nk93gliTXM97K+xn5RHkNEgnqAI4hjtzWI9NfUx8b+hCGJNcz18vsamaVr+/Vbx333PaBDAWfM8/6Lcv+2rVA7lf0+zAj5b9plMvWjWR2xZajPP84PimnsgTg1rjATxKCMk+9ORBgVN1x6jQeylXgtfXV8yGtR0JROuja9QBLGmDcn+jzTDrLFWEDm2rBH8t/K6I1wbjyiC+EwSXLSjwCdLIlYNMikI0oY2OPu/h/8HeRDTjgZpkgHwxTzPbxTvVeZzDQbzPN8l/ow7TgHmeb5SXHdXpw7YPM/3ymuYmQgwEkRWSPbHaZrOdeWxVhAamuvg3LXFAnoAeiVHgTt9hyhP44PTXH+XjhSjQWgxEhycLFPQjAI/XBgF7hRrBXc0x0BxDaRcV9oF9FV2SQHghGZ9lri4tm/5M4qf9wvXytgU18ptyoGqcU0jLkaCA8sJyZbMxrNS/szKt6Ofh5Eplyr8kfjneDeIZBTBsd0of3vNzYXmGKQo1RTzSB7CtFstnew6BRDQ0tyinDJSvTtRTEk9cH2Na57n1zWmLSVOTeN+9HMxKkaC49oSkp0iddE8yR1j05z/5CAGwrWRiiI4oMytkjQdn4s/U/8gjQlD+zH1lz8S0XcJ7wYBfG1pRGiRuq/sEOUJfFCKdX1JnaGHMnZFoVt5MIwEx1MiJDsFawWRouQawWMI18ZZFMGBZG6V9CQkO4Vy+pQg7QEpg7P/l3OEMsO12WppIBTBsfzcaBS4l9rIwEhwTJrzrtmd5FDOaJBrEoikR8v4PM/vUv8yLrbxKN/XbVpPWntJEPxiJDiO2ksijnmy99spPHkP6bvUX1q5T+Wx//6t8r3iNdfkGCiCA5Cn6JJbJSX/HMWf5YYzntpNMYe0D3baRCUAFvUKFCZIG+coro2s5RHHEK6NQ4wEg6sVkp2CIG2cUik4OwUL6PEVimB8Pd4FrhGkjWOKB2enyAzXZjQIeLQk4yunfopNO+0RpI1jagVnp1BO0y/uOIlxMRKMTfti/1WFo5EcpE1Sx1CSO0M3rhF8QkaDmsav50T7xUURDKpRSHaK5CBtpkSHknyuNwY2nMK7QSAqCclODSbeq7JEgSBtHFM7ODvFsiBe+R0hTi0gRoIxvVaOAn+tNArcsVYQJ7ReI3jMT8qmm5+Zso+HIhhMy5DsFMrimry3HPxSNrpkBWenIFwbO4pgSK22StJgl3msVdlNPhNbLQ2OIhiIvNfTjAI/1hwFHvw9KWiMGYPmPNecDt2PBjVNMs9okgGMynjR36QRpeVuAbDP4u4iVhrJ0B4jwSDkS9kjJDuFZkqLqab4Us9x7anQNZZMDIoiGId2YXzpeLRzNO9ciKiKL/Uc135X/ShzqyVmLQALMmKgqq29OkXx2djMNDDl5s5Ndxbx8D1CeYwEY+gdkp0i9Smbdy2xac5v1aaYQ4Rrj4ki6FzPrZKU6BDFzlJn6Am8GxwMRdA/7fThT51+Y4K0sesZnJ1CHhDfK/6TF8T9+UYRdCwzJLv5jUVokj8YDcaVem4/NQhxOEX7oMho0DGKoG8e3gXuaYov7wXjSj23vR7W9lF/muVD3zMa9Isi6JQk2lvYKikVQdrYGQnOTqF+N8g0PtCIbJX0oGjlfrDwBaX1fGzKJQhNl0cco0w6MvGZocdI0CeLIdkpUrtSeaKOSXNee3QwHyJcewAUQWesbZWklHpDoTEmJs157f7QxlZLgEGed8MmSHtsFoOzL5FXD4RrB8ZI0JHMkGwro8AdQdrDsxicfVbGVks7lkz4QhH0xdOSiGMI0h6bueDsFJnh2owGgZKW6UHllMydxROg+PwEaQdiOTg7xTzPV8rv37vApzMURoJ+aLdK6hWPdglB2mMyG5ydYpqm98qO1SvCtYFCIm3xsny21F/CwMdFIcqmKJPFg62WYmIk6IP3d4FryU0PrLkK5VvFL2OmMWaNrZZioggaJ5mEmi/S+05bJaUiSHtMHoKzU2hfM/BuG9gi2hol5ZQSC4+DUMT8mZ9CzFirS7i2YYwEDcvcKslcU8EBzedjOjSO1HNp/frdsW4QaCAzJNtFR6Xid6KxIABvwdkp5nm+UfxObn6vETEStCsnJNvDU/RO0VzAMokYNOfR8vvstV8J146BImiQ85DsFKk3D4pgDJrzaLkp5hHh2nFQBG3yulVSqv+m/kGCtEP4e+ovMU2TyeURJ7DVElCaMl5qlu5RV18sZQTVlYGPjA2WCL/Ec20y6u+cpYNZ+X1lyQRwzgjt18ocVBoKnFOca5d5m2y15BvToYZkbpX01tvvqZzy+q7iR0Flyht+8jS5MSyZcIwiaIt2qsRqSHYKgrTH4Do4O4U8iGoe7K6JUwMOjBbOS5D2GCIEZ6cgXNsvRoJ2RArJTvFH6h+ko8615OBs45m3ZxGu7RdF0AD5Mmi+EL97vmEITWs5yyT8Sg7ODvC78m4QyDFidxlB2mOIFJydgnBtfxgJdhY0JDuFppGA6VC/Us+dp0Xy5zAadIYi2N9o7wI/Uybc/Fjxo6AS5TuvPyOcB3lA1Sxb+p7RIIal7Jxb3EQ6VooO0XsDHxdKy81dcW2HaRKR1CftDjDMdnTCSLCTzJDsEKPAFdYKxhZ+jeAxMhokXNsJimA/0UOyU/wv9Q8SpO2SJjg7TBEUhGs7QRHsQLo7I2+VlErTDMFo0J/UcxalKeZR5lZLNMlgDLRR/4Ug7dgU59ZlcHYKwrXtYyTY2Cgh2SkI0o5rkODsFCyZMI4i2N6QSyLOoDkmpiGbYg7JA6zm97tmNIiwMkJ23W0yqkWQdkyjBGenUG4iPROujbA0N/wRbg47/c2SJ2QnNO+9BzkefPeNYjq0kUFDslNo2sgpgn6knqtoy35O4d0gxrZMbfIk+BRB2jGNFpydImM0eGX/t/KPkWADssRBs9j77SCjwJ1yjRgdog7Iou/RgrNTvFL++VAxiVZRBNugI/QEZQoOqTE+aM5TiODsFIRrY0jKEOHFm9GOE0HasYwanJ1CwrU1uOYrYyRYkUwLaaY0llHRT+5+0e1YKxgLawRPkNGgZqbne9KS6qII1kVIdhpNkDat4/Yl7/8YMDg7BeHahlAEK8ncKiliSHYKTRMQNwP7Us/RKM1fX8kM16YzuhKKYD0/MwpMRnNMLKnnaNTrfZc5GuR1AHzg5bee4liF3XEgAnYGSUfTnA2MBOtgSYRe6noxpkNt05yfkdYIPkG4tg0UwcJkB3S2StJLnRqiMcY2zfkZeTp0T/sAzAJ62EZQbh6CtGMgOFuPe0ZfjAQLIiR7E820EEXQrtRzM+LSiFMI1+6IIlgW7wLzaW6KdIjalXpuKIJCHoQ1D8MvGA2WQxEsRBLfGQXmI0jbOYKzN+HdYCcUwXK0F6U2UT40WSOZ2ijBSNAmzXlJTgkagTwQaxrknhOuXQZFsAC5GDXvqd4OGhd1SerogHeCNmnOCyPBp3g32AFFcCOZAuJdYBkEaftGcPYGmVstEaeGvpSt/fPoKRnnKI8ljQHGaFr9Rz9WpywP1Ypd+Wf5swRIbMBIcANCsosjSNs3grM3Ily7PYrgNmyVVBZB2r4RnF0GWy3BvpyQbC7UyxTHkyBtQwjOLmt516e8vxCujbY08VCCduYE8zzfJR7PO/O/zECWdbKK78LV6McrhTw4a9AwloHp0AxysRGSXQdrBX3SnA+mQ9OwZAI2LVNxjALrIEjbJ4Kz68gYDfJwqMRIUEla8zXTOb8zClQhSNsngrPr0CZLEaeGutj2pK7leCmOLQ0WRijO2e3ox0qLe05djAQV2CqpCU2c1reOf88wlF3PxKXp8W6wIoqgjrYN+afeH9gbgrRdIji7InmQfq/4G17Qh4DilotKOSXBup1MiumfB5e/YDDKNW1M1WXIWZfs7pfshJFgOkKy20ltniB8wAbNeaAxJkNmuDajQZSRkd5Ah9YGBGn7QnB2GzIa1IRrk1KF7Uh1b0/ZIcrTbmeKtWx0hm7ErjXlMR16GSHZ7bFW0BfWCLZDuHZhFMEz2CqpD+Wu+3+P9Lt7o0wooTN0I7ZaQlMZIdlcbIUQpO0DwdntySsawrVRFy3JfWnyWUc+Tr0p31GxrrMQlmyVw3ToaSyJ6Ou/qX87T7ldfZf6l0/TRFpMIZJHrHltcM335DiK4BHSdq/pOvxASHZxNMf4QFNMP9pEKkaDSENgbX8EafugOEcsj6iAe9V2jAQPEJJtg/KYEqTdgbL1/o8wv7gthGtvRBF8ineBdhCkbRu7yXcmD4uaB8YXjAZxUkbH1TuOZj0EadtGcLYNS9et8r5FJ/sKI8GvaUeBbJVUV2o3IYkYfbCPoAHSdUu4diaKoJCLQtNl+FaZbAK9PxXnj5FGez+m/o1ECVbHu0HkywzJpi2/MoK0bSM425Zl9xrF92Wmq/ovjAT/khOSzSiwPtYK2sYaQVt+JVxbb/giSEi2XQRp20Vwtj2Ea+cZvgiyVZJ5qQ0VjATb0hxvmmLaYaslpCMk2z6CtG0iONsuwrWRLGOrJJovGuNmaxMPJ7ax1VK6YadD5aRritpHQrK70LwXZFqnndRjTVNMHyyZwHkZwbNsCNoBQdo2Kc4JyyM6UWxMvcda21Eob6x8kTtTnCfebTSgfJfOg0kn3OfSjDodSki2L6ndbnSItqE5znRSd0K4No5apjV5OvKFIG1bCM72I2M0eDfaMRpxJHij/POvKn0OpEsO0mbNUxPfKf4S1gh2JKNBTUPf89G64IcqgoRku6VJHGGZRH2px/gTwRIm0Cl6xmgjQd4F+qQZTfBesL7UY8wo0AB5kGerpROGKYLSpaa5Qf6bUaAZBGnbQnC2P9pw7ZtRXi0MUQQzQ7IZBRqhfBhJ3uMOespGF4KzjZDvEOHaR4wyEiQk27/UVm8aY+rSHF9Nez7qI1z7iPBFUOLR2CrJv9QvL40xdWmOLw+ShmRutUScmneEZMdAkLYNBGf7R7j210KPBAnJDkXTaciUaD2px5bOULtYMrESfTqUJRFxaKbWSCmpJ/XYMhVqlDzoa5rNrkfeasktwmPjUZxLgrQrIDg7Du6PX0QeCTIKjCf16ZWn1jo0x5U1goYRrv1FyCIoJ0tzwn6XiwK2pd5YaYypQ3NcKYL2Df9ucBd4JKgNyWYU6ANB2n0RnB1I5mgw3Obi4YqgLHHQPLG+ZRToBkHafRGcHY92lxztAMO8iCNB3gXGRZB2XwRnB0O4drAiuGz2yVZJoRGk3RfB2TGp3w3yusGg5aQsO4srWn4fOJH+0NLdh7KlnuURzigTmUKd40gjQUKyx5D6/paRYFma48k7dn+GDdcOUQQzt0oiJNun1C8qRbAszfHk4dKZzHDtEFstRRkJ/swocBj/Tf1FCdIu6u+pP2yaJhpjfMoZDfKw2ZsyymlxP/YR821Zp6Q41+HWNPUyz/Nd4jG/G/MIxbB0firvp+4jCiOMBFkSMRbNkyojwXKS1wh6+GVwHOHazizTXcqnFkaBAYz0lGoBwdljyRgNvvN8gLyPBLXpBdp0BNhEkHZbBGcPREaDmg7fq6jh2qaxFci4lnOZetJHP1YlKNeQcTMMYKT7q+eRIO8Cx/VH6m9OIEIR36b+EHJ4YxhpqyWXRVC6/jQH/D1fzlBojmmLppgx/aT8rcOFa5u1NLgoh+q8GwpEOVUTYkFvT4o4Ql45BLM0lynvte7Ctd2NBOUgE5I9Ns1ibKZDt0s9hiySjyf8xruuiqC83+Fd4OCUaT8/jn68tlC+5/nT3m+ALTK3WmL2pZaRk87xNUWHKGtDN1CuGaMzNKDoO/S4GQkSko0DrBVsgzWCg4seru1pOpStkrD2v9SjQZD2JprgbIpgXMNutWRCTkg2JyA2grTbIDgbe8u7PuV9mNjCUkZo04WOMjeWd8OZFMfYdX4k0kRcnmZ+OlQOoqaofZTsOwSm3LPuO64FPeUNLHmfR7gWbsmEh3eC2hQClkSMg+aYumiKwVcyt1rinXwuQrJxDkHadRGcjWOi3ZetjwRZGI9zCNKui+BsPBEtXNtsEZSDpjlwv/NFHA5B2nURnI1TwsepdZfRhcRNbjAEaddFcDbOWTqClfdok137JkeCmSHZhPeOhw7RSmT6mOBsnKPdasnkaNDqdCjvAnGRMhHI3EyBrHV8If9Ye2epOV4EZw8oM1ybNdyXZKQSsJHjwLwFaUvSzZsT0/23cv13X9JBcDZSSJqXJlybNK9zoqeVozxNmlCPwy83idcZ70+Wm8VNr8g35fII1mEOjN19CuJgQsviWjYZ7d1kNHed867lKJE1mEjF4KUQDiRyWAjSltHetRQqzTWc606KbLWiTnA2NBjAFJARkk3LO7oFacvfe6MoFrU8SPG9LvlQqPisBGdjP4gJF67dTM5WSYMcGiRoccOWL/m1PKy1GO3lupOn8uxuWHboQA5lM9XMVksrbJWELRRPoKpF3VIMXhsY7eV6kO/WlWaUqAwh4LuIR4wGM2SEsfIOAl8p1cQho71zSxi82y/BODtKJDgbuZTv6GfShpQ3ML50OGZLO/+GJQzenVyCYX3ZCWzzdk+fev7l8strngSWkOyXFT8SHJIpudT3Cy8lDuzH3W53xV6Dj97Lrhzv5Vim3JiWDax/aPT54IS3+3rvInir3CniJTtF4FDGl86KD7IlzffyPfC25IeHUhzl6d7+TY+/dPfl6V1zkN5TAHGClwDnT1L0fpMC8tUO3VLM/ynfCw+7ohCcjVOWcG1N/8Yy+zDWrAJdRCjJ8LKFrPgzJ+8qWauLk7x0/XeZDlW+w9nJVkmvKn4kOCRdjlcyerI0cnp8v3Y42sslRdTae8xPB78rm+vikQxcNGu6x3jHnBmPxigQlpcw3Oesx8u1Wr+o7cKrLWkJBsYhsyAa8cMXyJiDxmpa0NoN/87CDf/gwcDSlPDjgwEX/LjIhD7AAUGKSrswbLVPXyma0VmajBJ/MZhy03QXDNjBwGeFoTGOOdiFwZL9bg0up/dWeaetdrdIdV97FwzYYf0VWLPGGF6SYs3ocoCzSxi845ijF8vNkC2L4HIANC2wr6ZpelvxI6EhmUJcdzhamVL8uO9wnKbpvYHP04Q8lK7PhxUfpCAu3aasQwxEdv/RjPB+CPNQxFZJYzL8fmrm/dTX5D2steYjF+9hkWborZYyvlx0lDlkuFPxGArggYzFza2Z6MhFvowHYv/vjTO2SmJrDUcMr1m7hKaMA87OYdO1mShjyHrAVknxGF7CoLnWiPw6oBi937MEA7mGqglssBiD4RzLO3nn+Hl6TKZjU92Mfl7Xco7dagmGxYX66rxWtDHURuqEZPslF+qNsSf+BynE16euFcXNmAeuFeWN6ego2us1g/a8hGtvMnQnkENRFlYrploeRj/nazLST3XxXBCAgITrQ8PfigFGgfZFjNjSPGEOeMpPUkZb5ZwXovBweE3EHQ2SFWfTCGHLymuPJiyhaVYo8HcRio64WdKEZNsy2rY7yndb/t4zVKIYoRV9l8r2WGMLOWBiFNjfyFNPUvRTce0JxTF7V/lzsAvGQMINmmSag1FgY16WMLSi+HxVb+heWH1wYAnGGDIGTnaXNw3R9mrEqh3d2mjvXe9GA8Uowu/6o4KU63m73filWFtbgjGzBGO7EI2UhGTXddBybump+M7a3nCaEbGBj9ud8kncRNMI34dYQiypy5iKYxR4Ae9Hso9b1Xb/aCIsK2EJhn8Z585OFy8h2WXwDqTYcdQ8VQ7/xK7oHHYxe8M7cp9c1xFCsvONtoSh0THVfJmG7xDVXBMGPq4KSzB8cVlLGAXqGf1SPkT6Uip+76GDtJXB2e4fGFYPndZeMdyyBMNpPRlyk0QlpmfaI0g7TYngbK94/WCTq03YCck+jSUMfRGknaZ0cLZnLMGwwdVKA0Kyv6Bl2xb5nZOMdFwOKTtph3l3xfe5LxdrzpVPkHPEUSBPjnYRpJ2mZXC2Z8zstJUzGmx6DEYNyeYdgh8EaafpFZztGe/42zCdQz1SSDbdZD4pnySHXSahOEZsen0C3d51mB1sRR8Fsq4oDsWxHTJImx03ymPdb1kmB1yahgNhvq2a6Y2YCNI+z0twtle8PtlOjqFmMPJQdXYsUkg2WYPxEaR9nsfgbM/IAs5jaime562SaHkeD0Ha50UIzvaK+5GOieV4yvcHs4VRIEsYxkaQ9nnRgsMdz2UAABYzSURBVLM9YwnGeRmjwfLv+T0EmzIHj4PrgSDtMxTHhuURDdGjcFzXGmQ51JQlDLhwfaQaagkAS0j8YAnGX7rWIUujQJYwQIMg7eNGDs72bPQlGF1qkYW52NX0gLUTf+d1z71REKR9HMHZ/h0MCKy9/nlT4/VPl96UXl05LGFACcp1rSMFRHNcghllCUbTVQot12cctAxbsm8ZZrTnEEHaxxGcHduqSdDaEoz7rUswmq1Xz1ipP2sr/aot2NKTywNLGOIgSPs4grPHEu1emzEa1L/XrpHZxhIGtEYX5HGKY0JwdjARlmBUz7Au+RcQFYTeFNfEEKMe1k9izWv/RdVw7S0/nCUMsEbx/muIIG1lcDadoQPxtASj2mgwc0dfqweOJQwgSPsAwdlI4WEJhnKpz3xsen86/D/IH/LaIPBpt9u93+12fyz/nqbpk4HPhM5kpuLnxE/xj2maPkQ+Z7KWN+n99zRNT+4RGJM8EC3XzT93u53nh6Mfpmn6uP9fvln/f+T9mLcCuNywfpOiF/rmhWya62KEqfLU35HvEx7J/XX55xeZVlwK4o/yb0/fm+WB+NXR/4/BbqFjWMIAFRpBvqY4FiyPQBKjSzDOeRzJPo4E5QW41SUCH2Wa87dpmn438HngyHLNKF73fRf53CofHP+o+FEQiNyXP9+b5Rp7IdOmVmvKzW63e7k7mA5NfWfSyvrd3kcbHwmOLddQSgGIPrug+f343kFN7tdv5Z+drL/eT5ta+X4tI9cXj4OqjC0qaqgWugoQpP0XgrPRk7HNEL5M93ecx22y/QZAYPRfOA6wwsia8qtvZP62VRFiCQN6+Z/i732+f78RUOp3/RPfT9Qk19d7+afXEox/ftNwjna5qfxn+TdfLnSgafeP/F4w9XdjeQSa2i/BmOf5rRTDfzX4Ln7/TcIfKuWF/LNU/A9SFP+gKKIRTZMHRZCmGDSy6ib9Uf7d9Pv3jbSPf2q82PG5/PN5ewuKImpbOtYUyyR+jHhClI0umuljIJm8a94voWhe9A78th8J/qfzEgmKIlr4fT8bcUHUhhDN78V6XBSxKnr7kZ6VRsilrrz9XASnaVpicL4zFJlGUUQNqddN1G5lze/FdwxZDBe9teX6fvmklmTs1tvLrSThs44JyUbfPYHdNFCLrDW3uG/sMQ9HY9N2f40IX8n1bz1Ee99k87N83vUokWkcnKLtEI3WIUlnKIqQAch6tOfFfgT4eI0/6Q51VAjXKIpIoZnie75fvxRI8hpBriasrdbweSt6a08K4O5YEdz5LYRrFEU8MXKQNsHZ0JCitx7peW8WO1oAd6eK4O5LIfy0b05xjqKIvVGDtAnOxkkBi97acj3/36n9Zi/uGr3s27fb7Z5sSa/8ANZvKBTFQUhobtJ0TqRd1ZW767/kexDbwXZH1ovelnXsH452ga5cTIyZpumtjJ5yC+Hyl/8g7yOstsweGyn+JkWRJoFYPqQWwaXVO9BynG8Vf5ZrPpjeqSxKj4MS+Zy5tediAVSRndxz3a0T6Vfp4R52It7vZM9uFwGMupUQW0mNRbYsuu68Q0OqO6kFX33fStacYmp9KIoiWlHunRnhffhnct2muE34cTDm4B7qpehdnakJ9gpgyw9HUUQt8oSc6pcoJ0LxO295/49GnN0jLxa9g2vVbgHs9SGdDe0pisYpzmWIUZFy9Bum8EfirOjdy736OuNeb78AHnzY1CmWYx82u0BQFLGF4v3YfYQDrbyxEEVoxCqKLPV67WVd9LIbbpSxhodumxbA1Yd+vqEQPpQqCo6LYuR968zSZOQG+X01NxeuyU5GK3prG3Or+07hWymEB5/JU1EsfkHh4vUxVJA2wdk2yb3TQ9GrOpvlugDuWSyEB5+Pooj19XClOB9X3o+c4h3SnYGPG5bcJ19LQcm9X7bQ7BVOiAK4Z70QHnxWiuLA5FpN5b5RRPG7vjPwccNwVPTmHn0LoQrgnqdCePC5v3d0sVIUC1Acb9dLBkZdEtLD6uHaw32k656sIQvgntdCeOR3oCgGppgBcL1MQrk8wuuuMV04m1EysxF56AK4J0Uk96J4sPYehqIYj6YZwfMvr2wCYnnEGRGiyDofv2eaJq0jbgz8GunkF96yqNPsU6nDopic1jAKZXFwe9zk3Ccx8HFNiRZF1lPkenDWKL+4s6Jo+svSyihB2gRnp4scRWbguI5XAPdGPAAURftGCdImOPu0UaLIehq+AO6NfiAOiqJ1QxRFuSZTue2aVPyOvt63ZBo5laXDsaYArnFAvnD0RZwjF0XFMXA5SiI429V37SFSQxv3+xM4MMdRFPuIHqQ9YnA2UWT9cZ+/oMABCr+g12lRdHcTjR6kPUJwNlFktsj5oACmGGLBZCHOiqKZRbmXRA/Sjhic7azp7HakLdQiBKU0RyHMQ1EsdhxDB2lHCM4miswHCuAGFMLtKIp5ogdpK343M8HZRJH5QwEsgEJYjrO1T7OBIN9UrnZY8FLgnUaRud9eqxQKYEEUwjooiudFDdK2GpxNFFkcFMAKKIT1URS/FjVI20pwNlFkMVEAK9pYCN9x8eo4u0kVbzOPuoyg1/IPx1Fk7LiSSM4vBbAm5SLfQ3cUwnyjFcWoQdotg7OJIhsH9+aGONg2RC+KUYO0awZnE0U2Ju7JHXDQ7VkVRQ/dfBeLojJI20XIdOnfiSgycC/uiINvm7MW96M3yWjbDW0d3RJFhoPrIfQ9eDLwGS6SFu7c7s8Pu93u5TRNnxp+5GHJtNPy7uxH+bflaajlmvh9t9s9T/ycH6dp+qHB59pE+X15Kcdhfc4s37SW8/Xb8u9pmj4Y+DyhjXDvdVEEdxRCt5wVxYumaTL/nZHF7z8b+CglLEXvDyl6v/v/dfzgnmtQgWE5UyadOZs+PcZDMLiH+LxTiCIzQLl06BCvoWpikWYsDoui+cgsJyEIe0SRGUNoiQMUwrgOiqLFpgzzQdoGjtE5pLIYRgF0hEI4BoOdiqaDtJXB2S1Q9JygADpEIRyPgaJoepmEcnlEDaSyOEQBdIxCOLYeRdHyAd/Y0JCDouccBTAACiH2GhVFszf7jTe0FESRBUIBDKRAIaQlO6BKRdHstVJheQSpLAFJtN7wBTAcObFb2sObbS6KPgoVRbNB2gUKPUUvOO6TwXGCoZEZDm0ySFsZnL12S9EbA/fHQXCikcN7kLayM/QdrwDGwn1xMJxwaClGg/cWD64yVpACOBDuh6f9zeoH20qCW19KkGuONxTC4XxM/IWtdkVqPlfq7wrnJKTgVnZLyfFqmqa3XAdO8QSEVMo1duZGUpr3mgY+Lhrg/ofPClwIZrsBUY7ynZq5m4MigNzF5sDYRnJ4KYAXhJ0OXVumRqdp+sdut8sd0t+wLmYImr3PLE6Jpn4m9ngLTjp97zKnQJfr4x9MgQbFAlGco7gWTAVpK4Ozze+EgXwkaOEiCiFOUUwf3Vk6iLJLQyr27guKAqg3xHTooWmaXm2YGr2mEIaWOlVo7Wah+TxMhwYkBWx535uzZdXnbvppmnK76eERI0IcUnaImnkvqLmWDXxcFMYIMN+QI8E9RoQ4QrN+zlJzTOpnYX1gMIwAsdnWESE7ZsehXCZhpsFE8ZlZHhGIXK+MALGdBAjnuqMQxqG4BkwEaSuDs+kMDUIZk3fojv0g8USBi4pCGIC3IG3l6JXghwC4V6EaLi4o4sceLBws5SwGwdnOcY8qa+jGmGMkJeFV5n/++QU1F5l7qU0CVs6z5nPQAOGYRJnlNuR9kCYYlsjgMp62xuUtSJvg7DFwT0JzXHRj8hakTXB2fNyL6mE69IxCU6N0YPnjba0gawQDk2YmpkDRD2txxqM4v12DtAnOjo01zDCDWKKxeAnSJjg7LmIdYQ6FcBzLCC/1xPY8KMomHq4/JyiAMItCOAYvQdoEZ8dDAWyLxhglCZp9mbkdzTNplqEQ2uelOYammECkiOV2HL+VTQGA+hgRxuYlSFvxGVkeYRwjQLhToBASYWWY4lx2CdImODsGOY8UQPi0vA9SdBIe032xNY6zHqRNcLZ/UgC33D84r+ivwIVMITTIepA2wdm+cd9AKFzQ8SzTnIrz13xRsvXPh9O4X9hBd2ghEkv0ckNK/xsubHP+VHygHo1OyX8nsVl2yAPJ7YZr5pVEOgI2L3Ce8GKwHqRNcLY/3B/sYSRYGCPCUKyvFWSNoCOMADEUnvhiUJyvpqMtL+sY8Xi+6CLHeFj/45/VIG2Cs/1gPTGGRyH0y2qQNsHZPpAsBQgKoU9Wi42XXS5GRgH0gcaYRiTYNvel9jWFsBtNU0nLtXipfxdNMR1IAbvNvCY+yW7wuc11gF2MCH2x2oCi+Ewsj2iMESBwAYXQF2vnRjoNU9EZ2hAF0B+mQztgatSd1CnFVmsFNX8P06GNMAUKKCkDkA/dkQfZhrUgbYKz7VnW8W38LvfcmBnop8CXh0JYmbWgaoKzbeE7DGzEl8g2ayMv61s8jYTvLlAIXya7rAVpE5xtA9/ZGGiMMUKCcV9lfprPL+T5UlVjLUib4OzO5GEnt0HtgzTBsL0VcIinS5sU56Dq6Ivg7P74jgKV8SWzR/EermqQtjI4m87QwvhuxsN0qEEyNfpS1g5pLVOj9yy6LS71XNQ+7pqfz3RbQbI+N3cK9C1ToIAS6RN2WAnSJji7D1Ke4mIkaJikR+SOCJ9JswyFsAxNkkfNKa/Un03ySCFSxHK7ft9KQhSAXIwI+7PSkKL4DCyPKIARIGAEhbC/3jc/grPbogCOgelQJ5gaNaF3kDbB2Y0wBQoYxYiwn95xZQRnt8EIEDBOCuHdhi9q9WiviHoHVxOcXddyzDZ+r5iCBlop8IWlECr1HokRnF0P3yfAIb64bSk7RF+X/nCKaXA6QxX4Ho2NxhjHJH3i5YY1YW/4Aqtomk1qTEem/kyaYhLJtPHthqSfV5LwBKAXnmTbURzToqMxgrPL43sDBMIXug3Fe7n7kh9IGdxMZ+gFfF+wx3RoEEyNNpO6TrP0WkHNzyOk+QymQIHA5Ak3OWT5CNY5ndErSJvg7DIKrLO9inAcgPBY8FuHcj+/YjdMxdRd1f0MPSNoAhgMhbA8uZGmKtagovg73xk6XGZQAIFBUQjLa338CM7ehgKIc2iMCU6CfHNf4l9TCI9qHaRNcHYmKWC3mes2P8lu8OzNCHjHiLAcxTKJIk0qymYclkcIRoAAvkIhLENZlDYnx2iCs40cou4ogEjFdOhAZGr018zf+Fo6FNmdQLcOr8TNNPVnsD5QggV2u91d5hToB6ZAgeCU6SOHhi+ErYO0Cc5Ox7UNLUaCA5K0i9ydr5/LLvUj3yw0o4QSxyn1Zww9epERYO60/X4EyGgaGAVPzfkUx2nT6Izg7DRcywCycPPI0ypIm+Dsy7iGsQXToYNjajRbq7WCrBE8gylQAEXwNK3TKkib4OzTuGYBFCXh0Llrq+5HWlvVKkib4OzjNGsnj3hHAQRwFIuM07QK0tbc2Bsfgm4IfQBQFYUwTe0bL8HZT1EAURqNMXhC0jJeZiaQPJNmmREKYe3mGJpiVqSIXWf+528lMQkAkm86jAjPqB2kTXD2F4wAAXRBITxNWaTUo0HNjb/hr90cBRA1MR2Ks5gaPUtzTHKmRFP/m7Dr3JgCBWCCjAhT2/UPPcii5lBqB2mPHJy9LGHQTDcfwQ77AMqSG1NuIZyjFUI5HqlurPxs67jO0BLToUgm8VIvN+xW8CbSDUoZt6WdEtb8+T+VP9ssWcR+u2EfxlcSBQgAdfCk/kWtIO0Rg7O5rtADI0GoMSL8Sq21gkOtEWQECMAdntzrreWrvQbREq4j9MRIENkYEX5Wa5f5IXaTZwQIwL0C7exuuxtrBWkrfqbb4Gw5dvcZ18scddkNAMdGTfZQ/I5JBavVDhU9kUQEK5gORTGSzpE7NXXtuBCmTkmmTnFqpk3dTYdKAbtV/p57n2Q3eNfTwAACG21EWLqJJXJwNiNAAEMYqRCWDtKOGpxNAYRFTIeiisGmRjXr9FLW/6WuEXSzPpApUABDGmFEWDpIO1pwNiNAAENblkBk3gBned+WM3popmTYdbTgbIl/yy2A9xRAACEoszAP3TkohEVGb7W3Z2op+jkHAJXIN8VSQdpRgrMpgPCCxhg0I/FWuTt9P5dd6q3eHEsFabsPzpYkl9z3uR+kCSbsbvkABhdxlFBqbZ/34GxGgACQINrNUvku7+rMz0ndTcFcZygFEB4xHYouAk6NltplPrUb0tR0IVOgAJAhUgu94nMfDdL2GpwdfQkMAFQVZTH11qnMUlOqLY26cwgAFBWhEG5tavEWnE0BBICCvBfCrUHanoKzKYCIgsYYmCEByS8zmz6eSbNMz0K4NUjbRXC2FLHcXd3fSrg6AODETdbliFD5Tu9JY4viv+22PIIRIKJhJAhzHI8INVv9fLv+X5Qdkl22FGIECAANyYjwPnPU8dCjgzI3SNtycLbsbPEu8zzMHna7AACT5AacuvTgmNyRSxZFh+jD+ucvhU3xOzXrDPV2/AEtpkNhmqSIvNwwBfim8Y04tWnlcPpTMx3apDFGpmhvFSk2h15JMhAAYOsN2cOIJHetn7XgbEaAAGCMhxuz8t3e9eq/S333Wb0zlAKIkTAdCjecTI3mrhU0sUaQKVAAMM76SEXxOd7tDAVnMwIEACfkhp38Hq1xMUktJHfy568Un7vKsg8pxLkF8IECCAAdWEww0ayp2+mbaYqHAETZxQMAhmStEGqDtHsGZ1MAMToaY+CexHHlNmNcVyiE2uaYLk0xUsBulWsU9z7JbvBdItwAAAesjAi1QdqKP1tseQQjQAAIyFAhTP47FX+2SDMPBRAAArNQCDcUmXM2B2dTAAFgABsL4Tvl1kZPbFy+ccqm4GxZikEBBIARLGvXNhScuy2FcNk+aMPffcqWz9PtWAAAOul181c2vCTJPYIUQAAYWI8ioOwQTZHVGUoBBAA0LwayCL4kdcMOBRAA8KhDISxJtTyCAggAeKJlcdi4I8Oh5OBsCiAA4KQCRSJpqYAmSDtB6t+5pSGHAggAI2ixaLxkh2jKKbG4owYAwKjahXDjiHPt/tIRpAACANRqFsKCyyTOLo+gAAIAslUuhCWc7AylAAIANqtVCAsFaR8NzqYAAgCKqVEICwVpPwnOpgACAIorUAi/Ws9XKEj72ernPdu49IICCAA4TQrNloXu1/sfvkxlbvg5i4fVzyr2uQAAqF4IC3SI3lIAAQDNlSg8BYK031AAAQBdFCqEW9xQAAEA3RQohFuWSWz5bymAwAUTBwi4TDo0l/dzSUHWBryapuktpxY4jyIIJHJUCCmAAIA6Ni5UrylpdwsAADYxWAgpgACAdgwVQgogAKA9A4WQAggA6KdjIaQAAgD661AIKYAAADsaFkIKIADAngIxaZfcrbdWAgDAlIqFkAIIALCvQiGkAAIA/ChYCCmAAAB/ChRCCiAAwK8NhZACCADwL6MQUgABAHEsa/sSN8l9w2kHAISTUAgpgACAuKQQ3h4Uv6Uw/sJpB9piZ3mgE3nnt8SffZqm6QPnAWhst9v9P8HbrOtPvd6VAAAAAElFTkSuQmCC"
+      />
+    </defs>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: ['stroke']
+}
+</script>
diff --git a/components/bridge/NetworkOption.vue b/components/bridge/NetworkOption.vue
new file mode 100644
index 000000000..fb4f9412d
--- /dev/null
+++ b/components/bridge/NetworkOption.vue
@@ -0,0 +1,15 @@
+<template lang="pug">
+  .d-flex.align-items-center.gap-8
+    img(
+      :src='require("~/assets/icons/" + network.value + ".png")',
+      height=18
+    )
+    .ml-2 {{ network.label }}
+
+</template>
+
+<script>
+export default {
+  props: ['network']
+}
+</script>
diff --git a/components/elements/ElementSelect.vue b/components/elements/ElementSelect.vue
index bff682e9f..1be036356 100644
--- a/components/elements/ElementSelect.vue
+++ b/components/elements/ElementSelect.vue
@@ -5,7 +5,8 @@ el-dropdown.element-select(trigger="click")
       slot(name="selected")
     ChevronIcon
   el-dropdown-menu.element-options(slot="dropdown")
-    el-dropdown-item.element-item(v-for="option in options" :key="option")
+    slot(name="preOptions")
+    el-dropdown-item.element-item(v-if="!disableList" v-for="option in options" :key="option[keyField || 'id']")
       slot(name="option" :option="option")
 </template>
 
@@ -14,7 +15,7 @@ import ChevronIcon from '@/components/ChevronIcon'
 
 export default {
   components: { ChevronIcon },
-  props: ['options', 'selected']
+  props: ['options', 'selected', 'keyField', 'disableList']
 }
 </script>
 
@@ -55,7 +56,6 @@ export default {
 
   .element-item {
     cursor: pointer;
-    width: 260px;
     box-sizing: border-box;
     padding: 5px 10px;
     line-height: inherit;
diff --git a/components/elements/PleaseLoginButton.vue b/components/elements/PleaseLoginButton.vue
index 52c3fb517..87c6d9d1c 100644
--- a/components/elements/PleaseLoginButton.vue
+++ b/components/elements/PleaseLoginButton.vue
@@ -15,7 +15,7 @@ export default {
 
   methods: {
     login() {
-      this.$store.dispatch('modal/login')
+      this.$store.dispatch('chain/mainLogin')
     }
   }
 }
diff --git a/components/footer/Footer.vue b/components/footer/Footer.vue
index bc7350162..18fa5887f 100644
--- a/components/footer/Footer.vue
+++ b/components/footer/Footer.vue
@@ -27,7 +27,7 @@ footer(:class="{isMobile}").alcor-inner
         | Is very useful eosio chains explorer.
         br
         | It uses for show all deals history and token contracts.
-  span.bottom.muted © 2021 Alcor
+  span.bottom.muted © {{ new Date().getFullYear()  }} Alcor
   //- .mt-3
   //-   .row.mt-5
   //-     .col-lg-5(v-if="!isMobile")
diff --git a/components/landing/Promo.vue b/components/landing/Promo.vue
index 4841d4e23..0d11940ac 100644
--- a/components/landing/Promo.vue
+++ b/components/landing/Promo.vue
@@ -140,7 +140,6 @@ export default {
           ({ x: point.time, y: point.liquidity1.toFixed(6) })
         )
         this.series[0].data = newData
-        console.log(this.series, newData)
         this.options.colors = [COLORS[this.$colorMode.value][this.isRed ? 'down' : 'up']]
       }
     },
diff --git a/components/landing/Promoted.vue b/components/landing/Promoted.vue
index f5e6221fe..fd2be80b9 100644
--- a/components/landing/Promoted.vue
+++ b/components/landing/Promoted.vue
@@ -3,7 +3,7 @@
   SectionTitle.section-title {{ $t('Promotions') }}
 
   el-carousel(indicator-position="outside" arrow="never" :interval="7000")
-    el-carousel-item(v-for="promo in promoted" :key="promo")
+    el-carousel-item(v-for="promo in promoted" :key="promo.id")
       promo(:promo="promo")
 
   spacer
diff --git a/components/layout/ConnectNav.vue b/components/layout/ConnectNav.vue
index eed12b09c..9be33b5b0 100644
--- a/components/layout/ConnectNav.vue
+++ b/components/layout/ConnectNav.vue
@@ -12,7 +12,7 @@
           .d-item(@click='logout') {{ $t('Logout') }}
     AlcorButton.connect-button(
       v-else='',
-      @click='$store.dispatch("modal/login")'
+      @click='$store.dispatch("chain/mainLogin")'
     )
       | {{ $t('Connect Wallet') }}
 
diff --git a/components/layout/Settings.vue b/components/layout/Settings.vue
index 8f39b3f36..828b1578f 100644
--- a/components/layout/Settings.vue
+++ b/components/layout/Settings.vue
@@ -276,9 +276,9 @@ export default {
   methods: {
     setMarketLayout(value) {
       if (value === 'advanced')
-        document.querySelector('.full-width').classList.add('unlim-width')
+        document.querySelector('.main').classList.add('unlim-width')
       else
-        document.querySelector('.full-width').classList.remove('unlim-width')
+        document.querySelector('.main').classList.remove('unlim-width')
 
       this.$store.commit('market/setCurrentMarketLayout', value)
     },
diff --git a/components/layout/TopNav.vue b/components/layout/TopNav.vue
index 0195e2769..efa10cd6e 100644
--- a/components/layout/TopNav.vue
+++ b/components/layout/TopNav.vue
@@ -5,11 +5,11 @@ nav.nav(v-if='!isMobile')
       img.logo(
         v-if='$colorMode.value == "light"',
         src='~/assets/logos/alcorblack.svg',
-        height='44'
+        height='32'
       )
       img.logo(
         v-else='',
-        height='44',
+        height='32',
         src='~/assets/logos/alcorwhite.svg',
         alt=''
       )
@@ -20,7 +20,9 @@ nav.nav(v-if='!isMobile')
           flat,
           :class='{ active: isActive(item.index) }'
         )
-          | {{ $t(item.name) }}
+          span {{ $t(item.name) }}
+          new-badge.badge(v-if="item.new" width="44" height="32")
+
   .nav-side.nav-right
     ConnectNav
 .menu-and-menu-header(v-else)
@@ -50,7 +52,6 @@ nav.nav(v-if='!isMobile')
 
     settings.settings(v-if='showSetting', v-click-outside='onClickOutside')
 
-
     AlcorButton(@click='openMenu', :icon-only-alt='true')
       i.el-icon-more
     nav(:class='["menu", { menuActive }]')
@@ -81,6 +82,7 @@ import AlcorLink from '~/components/AlcorLink'
 import ConnectNav from '~/components/layout/ConnectNav'
 import ChainSelect from '~/components/elements/ChainSelect'
 import Settings from '~/components/layout/Settings'
+import NewBadge from '~/components/svg-icons/NewBadge.vue'
 
 export default {
   components: {
@@ -88,7 +90,8 @@ export default {
     AlcorButton,
     ConnectNav,
     ChainSelect,
-    Settings
+    Settings,
+    NewBadge
   },
 
   data() {
@@ -111,6 +114,7 @@ export default {
       }
 
       items.push({ index: '/markets', name: 'Markets' })
+      items.push({ index: '/bridge', name: 'Bridge', new: true })
 
       items.push({ index: '/otc', name: 'OTC' })
 
@@ -195,6 +199,18 @@ export default {
   .nav-side {
     display: flex;
     align-items: center;
+
+  }
+
+  .nav-left {
+    width: 100%;
+    max-width: 700px;
+  }
+
+  @media only screen and (max-width: 1300px) {
+    .nav-left {
+      max-width: 620px;
+    }
   }
 }
 
@@ -213,16 +229,26 @@ export default {
   padding: 0;
   margin-left: 14px;
   display: flex;
+  justify-content: space-around;
+  width: 100%;
 
   .item {
-    padding: 4px 14px;
+    padding: 4px 10px;
     margin-right: 4px;
     display: flex;
     align-items: center;
+    color: var(--text-disable);
+    position: relative;
+
+    .badge {
+      position: absolute;
+      bottom: 12px;
+      left: 42px;
+    }
 
     &.active {
       background: var(--btn-active);
-      color: var(--text-default) !important;
+      color: var(--text-contrast) !important;
     }
   }
 }
diff --git a/components/modals/AddLiquidity.vue b/components/modals/AddLiquidity.vue
new file mode 100644
index 000000000..79e298dca
--- /dev/null
+++ b/components/modals/AddLiquidity.vue
@@ -0,0 +1,95 @@
+<template lang="pug">
+.add-liquidity-component
+  .title.fs-18.fw-bold.d-flex.align-items-center.gap-10.mb-4
+    i.el-icon-circle-plus-outline
+    span Add Liquidity
+  .d-flex.justify-content-between.gap-32
+    .d-flex.flex-column.gap-8.left
+      .fs-14.disable Select Pair and deposit amounts
+      token-select(:token.sync='inputToken' :amount.sync="inputAmount")
+      .d-flex.justify-content-end Balance: 1,000 WAX
+
+      .fs-14.disable Select Pair and deposit amounts
+      token-select(:token.sync='outputToken' :amount.sync="outputAmount")
+      .d-flex.justify-content-end Balance: 1,000 WAX
+
+      .fs-14.disable Select Fee
+      .d-flex.gap-16
+        .fee.d-flex.flex-column.gap-16(v-for="({ value, desc, selectedPercent }, idx) in fees" @click="selectedFee = idx" :class="{ active: selectedFee == idx }")
+          .fs-24 {{ value }}
+          .fs-14.disable {{ desc }}
+          .d-flex.gap-4
+            span {{ selectedPercent }}
+            span Selected
+
+    .d-flex.flex-column.gap-16
+      .fs-14.disable Select Price Range
+      .d-flex.gap-8
+        .grey-border.d-flex.flex-column.gap-20.p-2.br-4
+          .fs-12.text-center Min Price
+          el-input-number(v-model="minPrice" :precision="2" :step="0.1" :max="100")
+          .fs-12.text-center BLK per WAX
+        .grey-border.d-flex.flex-column.gap-20.p-2.br-4
+          .fs-12.text-center Max Price
+          el-input-number(v-model="maxPrice" :precision="2" :step="0.1" :max="100")
+          .fs-12.text-center BLK per WAX
+      alcor-button.w-100(access big) Preview
+
+</template>
+
+<script>
+import TokenSelect from '~/components/TokenSelect'
+import AlcorButton from '~/components/AlcorButton'
+
+export default {
+  components: { TokenSelect, AlcorButton },
+
+  data: () => ({
+    minPrice: 2.20,
+    maxPrice: 12.421,
+    selectedFee: 0,
+    inputToken: {
+      symbol: 'BRWL',
+      contract: 'brawlertoken'
+    },
+    inputAmount: 100,
+    outputToken: {
+      symbol: 'BRWL',
+      contract: 'brawlertoken'
+    },
+    outputAmount: 100,
+    fees: [
+      { value: 0.05, desc: 'Best forvery high liquidity tokens', selectedPercent: 0 },
+      { value: 0.3, desc: 'Best for most pairs', selectedPercent: 44 },
+      { value: 1, desc: 'Best for low liqudity pairs', selectedPercent: 56 }
+    ]
+  })
+
+}
+</script>
+
+<style lang="scss">
+.add-liquidity-component {
+  .left {
+    width: 587px;
+  }
+
+  .fee {
+    width: 185px;
+    height: 156px;
+    padding: 16px 24px;
+    cursor: pointer;
+
+    background: rgba(60, 60, 67, 0.36);
+
+    border: 1px solid rgba(120, 120, 135, 0.36);
+    border-radius: 4px;
+
+    &.active {
+      border: 1px solid #67C23A;
+      background: #161617;
+    }
+  }
+}
+</style>
+
diff --git a/components/modals/Assets.vue b/components/modals/Assets.vue
new file mode 100644
index 000000000..74f942213
--- /dev/null
+++ b/components/modals/Assets.vue
@@ -0,0 +1,97 @@
+<template lang="pug">
+#assets-modal-component
+  .header
+    .text-center.p-3 Select an asset to bridge
+  compact-tabs(:tabs="tabs" :active.sync="tab")
+    template(#tab="{ tab: { label, value } }")
+      .d-flex.align-items-center.gap-8(v-if="value === 'owned'")
+        i.el-icon-wallet
+        .fs-14 {{ label }}
+      .fs-14(v-else) {{ label }}
+  .body
+    el-input.search-input(prefix-icon="el-icon-search" v-model='search', size='small', placeholder='Search')
+    hr.separator
+    .d-flex.flex-column.gap-21
+      .d-flex.align-items-center.gap-8.pointer(
+        v-for="{ label, value, coin, disabled } in filteredAssets"
+        :class="{ disabled }"
+        @click="selectAsset(value)"
+      )
+        img(
+          :src='require("~/assets/icons/" + value + ".png")',
+          height=16
+        )
+        span {{ label }} ({{ coin }})
+        el-tooltip.op1(v-if="disabled" content="Right Center prompts info" placement="bottom")
+          i.el-icon-question
+
+    hr.separator
+    .text-center.color-green.pointer Request new token
+
+</template>
+
+<script>
+import AlcorModal from '~/components/AlcorModal.vue'
+import CompactTabs from '~/components/CompactTabs.vue'
+
+export default {
+  components: { AlcorModal, CompactTabs },
+  data: () => ({
+    search: '',
+    tab: 'all',
+    tabs: [
+      { label: 'Owned', value: 'owned' },
+      { label: 'All', value: 'all' }
+    ],
+    assets: [
+      { label: 'Tether', value: 'usdt', coin: 'USDT' },
+      { label: 'WAX', value: 'wax', coin: 'WAXP' },
+      { label: 'EOS', value: 'eos', coin: 'EOS' },
+      { label: 'Solana', value: 'sol', coin: 'SOL' },
+      { label: 'MATIC', value: 'matic', coin: 'MATIC' },
+      { label: 'pTokens BTC', value: 'pbtc', coin: 'pBTC' },
+      { label: 'Circle USD', value: 'usdc', coin: 'USDC' },
+      { label: 'Wrapped Ether', value: 'weth', coin: 'WETH', disabled: true }
+    ]
+  }),
+  computed: {
+    filteredAssets() {
+      return this.assets.filter(asset => Object.values(asset).join().includes(this.search))
+    }
+  },
+  methods: {
+    selectAsset(v) {
+      this.$store.commit('setSelectedAsset', v)
+      this.$store.dispatch('modal/closeModal')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.search-input {
+  width: 288px !important;
+
+  & .el-input__inner {
+    border: 1px solid var(--select-color);
+    background: var(--select-color) !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+#assets-modal-component {
+  .body {
+    padding: 16px;
+  }
+
+  .separator {
+    background-color: var(--border-1-color);
+  }
+
+  .disabled>*:not(.op1) {
+    opacity: 0.35;
+  }
+
+}
+</style>
diff --git a/components/modals/Login.vue b/components/modals/Login.vue
index 1b77e12da..773f93ad7 100644
--- a/components/modals/Login.vue
+++ b/components/modals/Login.vue
@@ -1,116 +1,130 @@
 <template lang="pug">
-div
-  .title.fs-18.fw-bold.d-flex.align-items-center.gap-10.mb-3 Select Wallet
-  .items
-    .item(v-for='wallet in wallets')
-      AlcorButton.button(@click='login(wallet.id)', alternative)
-        img.mr-2(:src='wallet.logo', height='30')
-        span {{ wallet.name }}
-  .divider
-    span.line
-    .text {{ $t("Don't have any wallet yet") }} ?
-    span.line
-  .footer-actions
-  .items(v-if='wallets.length > 0')
-    .item
-      AlcorButton.button(alternative, @click='openInNewTab(wallets[0].create)')
-        img.mr-2(:src='wallets[0].logo', height='30')
-        span {{ $t('Get') }} {{ $t(wallets[0].name) }}
-    .item
-      AlcorButton.button(alternative, @click='openInNewTab(wallets[1].create)')
-        img.mr-2(:src='wallets[1].logo', height='30')
-        span {{ $t('Get') }} {{ $t(wallets[1].name) }}
+#assets-modal-component.login-modal
+  .header
+    //.lead {{ loginContext }}
+    .text-center(v-if="loginContext && loginContext.message") {{ loginContext.message }}
+      .fs-20 {{ loginContext.chain}}
+    .text-center.p-3(v-else) Select wallet
+  .body.row(v-loading='loading')
+    .items
+      .item(v-for='wallet in wallets')
+        AlcorButton.button(@click='login(wallet.id)', alternative)
+          img.mr-2(:src='wallet.logo', height='30')
+          span {{ wallet.name }}
+    .divider
+      span.line
+      .text {{ $t("Don't have any wallet yet") }} ?
+      span.line
+    .footer-actions
+    .items(v-if='wallets.length > 0')
+      .item
+        AlcorButton.button(alternative, @click='openInNewTab(wallets[0].create)')
+          img.mr-2(:src='wallets[0].logo', height='30')
+          span {{ $t('Get') }} {{ $t(wallets[0].name) }}
+      .item
+        AlcorButton.button(alternative, @click='openInNewTab(wallets[1].create)')
+          img.mr-2(:src='wallets[1].logo', height='30')
+          span {{ $t('Get') }} {{ $t(wallets[1].name) }}
 </template>
 
 <script>
+// TODO Добавить открытие кошельков под разные чейны
 import { captureException } from '@sentry/browser'
 import { mapState } from 'vuex'
 import AlcorButton from '@/components/AlcorButton'
+import AlcorModal from '~/components/AlcorModal.vue'
 
 export default {
   components: {
-    AlcorButton
+    AlcorButton,
+    AlcorModal
   },
   data() {
     return {
-      loading: false,
-
-      wallets: []
+      loading: false
     }
   },
 
   computed: {
-    ...mapState(['user', 'network'])
-  },
+    ...mapState(['user', 'network']),
+    ...mapState('chain', ['loginContext']),
+
+    wallets() {
+      const chain = this.loginContext ? this.loginContext.chain : this.network.name
+
+      const wallets = [
+        {
+          id: 'anchor',
+          name: 'Anchor',
+          logo: require('@/assets/logos/anchor.svg'),
+          create: 'https://greymass.com/en/anchor/'
+        },
+        {
+          id: 'scatter',
+          name: 'Scatter / TP / Starteos',
+          logo: require('@/assets/logos/scatter.svg'),
+          create:
+            'https://github.com/GetScatter/ScatterDesktop/releases/tag/11.0.1'
+        },
+        {
+          name: 'SimplEOS',
+          logo: require('@/assets/logos/simpleos.svg')
+        },
+        //{ name: 'Lynx', logo: require('@/assets/logos/lynx.svg') },
+        { name: 'Ledger', logo: require('@/assets/logos/ledger.svg') }
+      ]
+
+      if (chain == 'telos') {
+        wallets.push({
+          id: 'wombat',
+          name: '',
+          logo: require(`@/assets/logos/wombat_${this.$colorMode.value}.png`)
+        })
+      }
 
-  mounted() {
-    console.log('login mounted')
-
-    const wallets = [
-      {
-        id: 'anchor',
-        name: 'Anchor',
-        logo: require('@/assets/logos/anchor.svg'),
-        create: 'https://greymass.com/en/anchor/'
-      },
-      {
-        id: 'scatter',
-        name: 'Scatter / TP / Starteos',
-        logo: require('@/assets/logos/scatter.svg'),
-        create:
-          'https://github.com/GetScatter/ScatterDesktop/releases/tag/11.0.1'
-      },
-      {
-        name: 'SimplEOS',
-        logo: require('@/assets/logos/simpleos.svg')
-      },
-      { name: 'Lynx', logo: require('@/assets/logos/lynx.svg') },
-      { name: 'Ledger', logo: require('@/assets/logos/ledger.svg') }
-    ]
-
-    if (this.network.name == 'eos') {
-      wallets.push({
-        id: 'scatter',
-        name: '',
-        logo: require('@/assets/logos/wombat.png')
-      })
-      wallets.push({
-        name: 'Keycat',
-        logo: require('@/assets/logos/keycat.svg')
-      })
-    }
+      if (chain == 'eos') {
+        wallets.push({
+          id: 'wombat',
+          name: '',
+          logo: require(`@/assets/logos/wombat_${this.$colorMode.value}.png`)
+        })
+        wallets.push({
+          name: 'Keycat',
+          logo: require('@/assets/logos/keycat.svg')
+        })
+      }
 
-    if (this.network.name == 'wax') {
-      wallets.unshift({
-        id: 'wcw',
-        name: 'Wax Cloud Wallet',
-        logo: require('@/assets/logos/wax.svg'),
-        index: 'wax',
-        create: 'https://all-access.wax.io/'
-      })
-      wallets.push({
-        id: 'scatter',
-        name: '',
-        logo: require('@/assets/logos/wombat.png')
-      })
-    }
+      if (chain == 'wax') {
+        wallets.unshift({
+          id: 'wcw',
+          name: 'Wax Cloud Wallet',
+          logo: require('@/assets/logos/wax.svg'),
+          index: 'wax',
+          create: 'https://all-access.wax.io/'
+        })
+        wallets.push({
+          id: 'wombat',
+          name: '',
+          logo: require(`@/assets/logos/wombat_${this.$colorMode.value}.png`)
+        })
+      }
 
-    if (this.network.name == 'proton') {
-      wallets.unshift({
-        id: 'proton',
-        name: 'Proton',
-        logo: require('@/assets/icons/proton.png'),
-        create: 'https://www.protonchain.com/wallet/'
-      })
-    }
+      if (this.network.name == 'proton' || this.$store.state.chain.loginContext?.chain == 'proton') {
+        wallets.unshift({
+          id: 'proton',
+          name: 'Proton',
+          logo: require('@/assets/icons/proton.png'),
+          create: 'https://www.protonchain.com/wallet/'
+        })
+      }
 
-    this.wallets = wallets
+      return wallets
+    }
   },
 
   methods: {
     async login(provider) {
       this.loading = true
-
       try {
         await this.$store.dispatch('chain/login', provider)
         this.$store.dispatch('modal/closeModal')
@@ -123,6 +137,7 @@ export default {
         })
       } finally {
         this.loading = false
+        this.$store.state.modal.context = null
       }
     }
   }
@@ -130,6 +145,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.login-modal {
+  max-width: 650px;
+  .body {
+    padding: 15px;
+  }
+}
+
 .items {
   display: flex;
   flex-wrap: wrap;
diff --git a/components/modals/ModalsDialog.vue b/components/modals/ModalsDialog.vue
index 8a023b802..4f6e4548f 100644
--- a/components/modals/ModalsDialog.vue
+++ b/components/modals/ModalsDialog.vue
@@ -17,8 +17,10 @@ import MakeBid from '~/components/modals/MakeBid'
 import Transfer from '~/components/modals/Transfer'
 import RemoveFriend from '~/components/modals/RemoveFriend'
 import AddFriend from '~/components/modals/AddFriend'
+import AddLiquidity from '~/components/modals/AddLiquidity'
 import Trade from '~/components/modals/Trade'
 import BlockUser from '~/components/modals/BlockUser'
+import Assets from '~/components/modals/Assets'
 import AlcorModal from '~/components/AlcorModal.vue'
 
 export default {
@@ -34,8 +36,10 @@ export default {
     Transfer,
     RemoveFriend,
     AddFriend,
+    AddLiquidity,
     Trade,
     BlockUser,
+    Assets,
     AlcorModal
   },
 
diff --git a/components/modals/Transfer.vue b/components/modals/Transfer.vue
index 6e12cf73e..a0d056ab7 100644
--- a/components/modals/Transfer.vue
+++ b/components/modals/Transfer.vue
@@ -121,6 +121,7 @@ export default {
     },
     context() {
       this.reciever = this.context.name
+      this.setOptions()
     }
   },
   mounted() {
@@ -138,7 +139,7 @@ export default {
     },
     setOptions() {
       this.reciever = this.context.reciever
-      this.context.transferAssets && this.transferAssets.push(...this.context.transferAssets)
+      this.transferAssets = this.context.transferAssets
     },
     transfer() {
       this.transferNft({ memo: this.memo, reciever: this.reciever, asset_ids: this.transferAssets.map(({ asset_id }) => asset_id) })
diff --git a/components/nft_markets/DetailWithCardPanel.vue b/components/nft_markets/DetailWithCardPanel.vue
index 981bb3cd1..e1e73ef5c 100644
--- a/components/nft_markets/DetailWithCardPanel.vue
+++ b/components/nft_markets/DetailWithCardPanel.vue
@@ -19,7 +19,7 @@
             .color-wax {{ price + " WAX" }}
             .color-action (${{ $systemToUSD(price) }})
         .d-flex.flex-column
-          .fs-14.disable {{ $t('Date') }]
+          .fs-14.disable {{ $t('Date') }}
           span {{ +data.assets[0].transferred_at_time | moment("MM/DD/YYYY HH:mm a") }}
 
       .d-flex.flex-column.gap-16
@@ -31,7 +31,7 @@
             .color-danger {{ data.assets[0].template.issued_supply - data.assets[0].template_mint }}
             img(src='~/assets/images/fire.svg')
         .d-flex.flex-column
-          .fs-14.disable {{ $t('Temlate ID') }]
+          .fs-14.disable {{ $t('Temlate ID') }}
           .color-action {{ "#" + data.assets[0].template.template_id }}
         .d-flex.flex-column
           .fs-14.disable {{ $t('Propertise') }}
diff --git a/components/svg-icons/NewBadge.vue b/components/svg-icons/NewBadge.vue
new file mode 100644
index 000000000..2098bd071
--- /dev/null
+++ b/components/svg-icons/NewBadge.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg width="27" height="12" viewBox="0 0 27 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10.7351 3.16797V8.5H10.0247L7.34033 4.38745V8.5H6.63354V3.16797H7.34033L10.0356 7.2915V3.16797H10.7351ZM13.5293 8.57324C13.2534 8.57324 13.0032 8.52686 12.7786 8.43408C12.5564 8.33887 12.3647 8.20581 12.2036 8.03491C12.0449 7.86401 11.9229 7.66138 11.8374 7.427C11.752 7.19263 11.7092 6.93628 11.7092 6.65796V6.50415C11.7092 6.18188 11.7568 5.89502 11.8521 5.64355C11.9473 5.38965 12.0767 5.1748 12.2402 4.99902C12.4038 4.82324 12.5894 4.69019 12.7969 4.59985C13.0044 4.50952 13.2192 4.46436 13.4414 4.46436C13.7246 4.46436 13.9688 4.51318 14.1738 4.61084C14.3813 4.7085 14.551 4.84521 14.6829 5.021C14.8147 5.19434 14.9124 5.39941 14.9758 5.63623C15.0393 5.87061 15.071 6.12695 15.071 6.40527V6.70923H12.1121V6.15625H14.3936V6.10498C14.3838 5.9292 14.3472 5.7583 14.2837 5.59229C14.2227 5.42627 14.125 5.28955 13.9907 5.18213C13.8564 5.07471 13.6733 5.021 13.4414 5.021C13.2876 5.021 13.146 5.05396 13.0166 5.11987C12.8872 5.18335 12.7761 5.27856 12.6833 5.40552C12.5906 5.53247 12.5186 5.6875 12.4673 5.87061C12.416 6.05371 12.3904 6.26489 12.3904 6.50415V6.65796C12.3904 6.84595 12.416 7.02295 12.4673 7.18896C12.521 7.35254 12.5979 7.49658 12.698 7.62109C12.8005 7.74561 12.9238 7.84326 13.0679 7.91406C13.2144 7.98486 13.3804 8.02026 13.5659 8.02026C13.8052 8.02026 14.0078 7.97144 14.1738 7.87378C14.3398 7.77612 14.4851 7.64551 14.6096 7.48193L15.0198 7.80786C14.9343 7.93726 14.8257 8.06055 14.6938 8.17773C14.562 8.29492 14.3997 8.39014 14.2068 8.46338C14.0164 8.53662 13.7905 8.57324 13.5293 8.57324ZM16.8655 7.79688L17.8835 4.5376H18.3303L18.2424 5.18579L17.2061 8.5H16.7703L16.8655 7.79688ZM16.1807 4.5376L17.0486 7.8335L17.1108 8.5H16.6531L15.5032 4.5376H16.1807ZM19.3044 7.80786L20.1321 4.5376H20.8059L19.656 8.5H19.2019L19.3044 7.80786ZM18.4292 4.5376L19.4253 7.74194L19.5388 8.5H19.1067L18.041 5.17847L17.9531 4.5376H18.4292Z"
+      fill="#1FC781"
+    />
+    <rect
+      x="0.375"
+      y="-0.375"
+      width="26.25"
+      height="11.25"
+      rx="5.625"
+      transform="matrix(1 0 0 -1 0 11.25)"
+      stroke="#1FC781"
+      stroke-width="0.75"
+    />
+  </svg>
+</template>
diff --git a/components/swap/AddLiquidity.vue b/components/swap/AddLiquidity.vue
index 765c7cf58..3defc6449 100644
--- a/components/swap/AddLiquidity.vue
+++ b/components/swap/AddLiquidity.vue
@@ -238,11 +238,6 @@ export default {
       this.amount1 = amount1.to_string().split(' ')[0]
     },
 
-    async open() {
-      if (!(await this.$store.dispatch('chain/asyncLogin'))) return
-      this.amountChange()
-    },
-
     amountChange() {
       this.amount1 = (parseFloat(this.amount1) || 0).toFixed(
         this.poolOne.quantity.symbol.precision()
diff --git a/components/swap/SelectToken.vue b/components/swap/SelectToken.vue
index 0068c41d4..184b64fe0 100644
--- a/components/swap/SelectToken.vue
+++ b/components/swap/SelectToken.vue
@@ -55,7 +55,7 @@ import TokenImage from '~/components/elements/TokenImage'
 
 export default {
   components: {
-    TokenImage,
+    TokenImage
   },
 
   props: {
@@ -118,15 +118,21 @@ export default {
     },
 
     tokensFiltered() {
-      return this.tokens.filter((t) => {
-        const s = (t.symbol + '@' + t.contract).toLowerCase()
-        return s.includes(this.search.toLowerCase())
-      }).map(t => {
-        t.balance = this.$tokenBalance(t.symbol || t.currency, t.contract)
-        return t
-      }).sort((a, b) => {
-        return a.balance == '0.0000' ? 1 : -1
-      }).sort((a, b) => parseFloat(a.balance) < parseFloat(b.balance) ? 1 : -1)
+      return this.tokens
+        .filter((t) => {
+          const s = (t.symbol + '@' + t.contract).toLowerCase()
+          return s.includes(this.search.toLowerCase())
+        })
+        .map((t) => {
+          t.balance = this.$tokenBalance(t.symbol || t.currency, t.contract)
+          return t
+        })
+        .sort((a, b) => {
+          return a.balance == '0.0000' ? 1 : -1
+        })
+        .sort((a, b) =>
+          parseFloat(a.balance) < parseFloat(b.balance) ? 1 : -1
+        )
     }
   },
 
diff --git a/components/swap/SwapTabs.vue b/components/swap/SwapTabs.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/trade/DesktopTrade.vue b/components/trade/DesktopTrade.vue
index 9885ede58..5b7e0bd21 100644
--- a/components/trade/DesktopTrade.vue
+++ b/components/trade/DesktopTrade.vue
@@ -290,7 +290,7 @@ export default {
   watch: {
     '$store.state.market.markets_layout'() {
       if (this.current_market_layout != 'advanced') {
-        document.querySelector('.full-width').classList.add('unlim-width')
+        document.querySelector('.main').classList.add('unlim-width')
         return
       }
       this.layouts = this.$store.state.market.markets_layout
@@ -317,7 +317,7 @@ export default {
 
   mounted() {
     if (this.$store.state.market.current_market_layout === 'advanced') {
-      document.querySelector('.full-width').classList.add('unlim-width')
+      document.querySelector('.main').classList.add('unlim-width')
     }
 
     //if (this.markets_timesale_tab == null) this.markets_timesale_tab = 0
diff --git a/components/trade/MarketTrade.vue b/components/trade/MarketTrade.vue
index 034282991..23aef7648 100755
--- a/components/trade/MarketTrade.vue
+++ b/components/trade/MarketTrade.vue
@@ -121,6 +121,6 @@ export default {
 }
 
 .red {
-  color: var(--color-primary)
+  color: var(--main-red)
 }
 </style>
diff --git a/components/trade/MyOrders.vue b/components/trade/MyOrders.vue
index 9568556f1..70167fe2b 100755
--- a/components/trade/MyOrders.vue
+++ b/components/trade/MyOrders.vue
@@ -4,7 +4,7 @@
 el-table.my-orders(:data='filledPositions' :empty-text='$t("No open orders")' v-if="isMobile" max-height="350")
   template(slot="empty")
     span(v-if="user") {{ $t('No open orders') }}
-    el-button(v-else type="default" @click='$store.dispatch("modal/login")') {{ $t('Connect Wallet') }}
+    el-button(v-else type="default" @click='$store.dispatch("chain/mainLogin")') {{ $t('Connect Wallet') }}
 
   el-table-column(:label='$t("Type")' width="50")
     template(slot-scope='{ row }')
@@ -33,7 +33,7 @@ el-table.my-orders(:data='filledPositions' :empty-text='$t("No open orders")' v-
 el-table.my-orders(:data='filledPositions' :empty-text='$t("No open orders")' v-else)
   template(slot="empty")
     span(v-if="user") {{ $t('No open orders') }}
-    el-button(v-else type="default" @click='$store.dispatch("modal/login")') {{ $t('Connect Wallet') }}
+    el-button(v-else type="default" @click='$store.dispatch("chain/mainLogin")') {{ $t('Connect Wallet') }}
 
   el-table-column(:label='$t("Time")', width='110')
     template(slot-scope='scope')
@@ -88,7 +88,7 @@ export default {
       user: 'user',
       allOrders: 'wallet/allOrders',
     }),
-    ...mapGetters(['network', 'userOrders']),
+    ...mapGetters(['userOrders']),
     ...mapState('market', ['asks', 'bids', 'id', 'base_token', 'quote_token']),
 
     orders() {
diff --git a/components/trade/TimeSaleModal.vue b/components/trade/TimeSaleModal.vue
index 0eccb853e..82c36e893 100644
--- a/components/trade/TimeSaleModal.vue
+++ b/components/trade/TimeSaleModal.vue
@@ -195,8 +195,3 @@ export default {
 }
 </script>
 
-<style>
-.el-scrollbar__wrap {
-  margin-bottom: -15px !important;
-}
-</style>
diff --git a/components/wallet/TokenTransfer.vue b/components/wallet/TokenTransfer.vue
index 0ac6b70f6..5d51acd27 100644
--- a/components/wallet/TokenTransfer.vue
+++ b/components/wallet/TokenTransfer.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
 .ibc-withdraw
-  el-button(type="text" plain size="mini" icon="el-icon-s-promotion" @click="open").hover-opacity Transfer
 
   el-dialog(title="Token transfer", :visible.sync="visible" width="25%" v-if="user").text-left
     el-alert(v-if="token.contract == 'bosibc.io'" type="warning" show-icon title="This is IBC token!")
       span {{ $t("Before transferring to exchange, you have to withdraw it to it's original chain using BOS IBC Transfer button") }} !
 
+    h1 sdafdsfdf
     el-form(ref="form" :model="form" label-position="left" :rules="rules")
       el-form-item.mt-1(prop="address")
         template(slot="label")
@@ -150,8 +150,7 @@ export default {
       )
     },
 
-    async open() {
-      if (!(await this.$store.dispatch('chain/asyncLogin'))) return
+    open() {
       this.visible = true
     },
 
@@ -184,7 +183,7 @@ export default {
         this.visible = false
 
         this.$alert(
-          `<a href="${this.network.monitor}/tx/${r.transaction_id}" target="_blank">Transaction id</a>`,
+          `<a class="pointer" href="${this.monitorTx(r.transaction_id)}" target="_blank">Transaction id</a>`,
           'Transaction complete!',
           {
             dangerouslyUseHTMLString: true,
diff --git a/components/wallet/Validators.vue b/components/wallet/Validators.vue
index 39fa2fd2f..96ebbf0a1 100644
--- a/components/wallet/Validators.vue
+++ b/components/wallet/Validators.vue
@@ -81,11 +81,18 @@ export default {
 
   async mounted() {
     const network = this.$store.state.network.name
-    const { data } = await this.$axios.get(
-      `https://www.api.bloks.io/${network}/producers?pageNum=1&perPage=50`
-    )
-    console.log(data)
-    this.list = data.producers
+    let url = `https://www.api.bloks.io/${network}/producers?pageNum=1&perPage=50`
+
+    if (network == 'eos') {
+      url = url.replace('eos/', '')
+    }
+
+    try {
+      const { data } = await this.$axios.get(url)
+      this.list = data.producers
+    } catch (e) {
+      this.$notify({ title: 'Producer fetch error', message: e, type: 'error' })
+    }
   }
 }
 </script>
diff --git a/components/wallet/WithdrawPopup.vue b/components/wallet/WithdrawPopup.vue
index a64fefe88..fa30748c0 100644
--- a/components/wallet/WithdrawPopup.vue
+++ b/components/wallet/WithdrawPopup.vue
@@ -183,9 +183,8 @@ export default {
         this.visible = false
 
         const txid = r.transaction_id || r.transaction.id.toString()
-
         this.$alert(
-          `<a href="${this.network.monitor}/tx/${txid}" target="_blank">Transaction id</a>`,
+          `<a class="pointer" href="${this.monitorTx(txid)}" target="_blank">Transaction id</a>`,
           'Transaction complete!',
           {
             dangerouslyUseHTMLString: true,
diff --git a/components/wallet/a.vue b/components/wallet/a.vue
deleted file mode 100644
index 3bbcc5481..000000000
--- a/components/wallet/a.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template lang="pug">
-  el-dialog(title="Token transfer", :visible.sync="visible" width="25%" v-if="user").text-left
-    el-alert(v-if="token.contract == 'bosibc.io'" type="warning" show-icon title="This is IBC token!")
-      span Before transferring to exchange, you have to withdraw it to it's original chain using BOS IBC Transfer button!
-
-    el-form(ref="form" :model="form" label-position="left" :rules="rules")
-      el-form-item.mt-1(prop="address")
-        template(slot="label")
-          b Receiver
-        el-input(v-model="form.address" placeholder="address..").w-100
-
-      el-form-item(prop="amount")
-        span
-          b Amount
-
-          br
-
-          span Balance
-            el-button(type="text" @click="fullAmount").ml-1  {{ tokenBalance }}
-
-        el-input(type="number" v-model="form.amount" clearable @change="amountChange").w-100
-          span(slot="suffix").mr-1 {{ this.token.currency }}
-
-        b Memo
-        el-input(type="text" v-model="form.memo" clearable placeholder="message").w-100
-
-      el-form-item.mt-1
-        span.dialog-footer.mb-4
-          el-button(type='primary' @click="submit" :disabled="!form.amount || !addressValid" :loading="loading").w-100
-            | Transfer {{ token.currency }} to {{ form.address }}
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import { captureException } from '@sentry/browser'
-
-import config from '~/config'
-import TokenImage from '~/components/elements/TokenImage'
-
-export default {
-  components: {
-    TokenImage
-  },
-
-  props: {
-    token: {
-      type: Object,
-      default: () => {
-        return {
-          precision: 4,
-          currency: 'EOS',
-          contract: 'eosio.token'
-        }
-      }
-    }
-  },
-
-  data() {
-    return {
-      visible: false,
-
-      form: {
-        address: '',
-        amount: 0.0,
-        memo: ''
-      },
-
-      addressValid: false,
-
-      chain_select: null,
-      chain: {},
-
-      loading: false,
-
-      rules: {
-        address: {
-          trigger: 'blur',
-          validator: async (rule, value, callback) => {
-            try {
-              this.loading = true
-              await this.$rpc.get_account(value)
-              this.addressValid = true
-              callback()
-            } catch (e) {
-              this.addressValid = false
-              callback(new Error('Account does not exist!'))
-            } finally {
-              this.loading = false
-            }
-          }
-        }
-      }
-    }
-  },
-
-  computed: {
-    ...mapState(['user', 'network']),
-
-    networks() {
-      return Object.values(config.networks)
-    },
-
-    chains() {
-      return ['eos', 'bos', 'telos', 'wax'].filter(
-        (c) => c != this.network.name
-      )
-    },
-
-    tokenBalance() {
-      if (!this.user || !this.user.balances || !this.token.currency)
-        return '0.0000'
-
-      const balance = this.user.balances.filter((b) => {
-        return (
-          b.currency === this.token.currency &&
-          b.contract === this.token.contract
-        )
-      })[0]
-
-      if (balance) return `${balance.amount} ${balance.currency}`
-      else
-        return Number(0).toFixed(this.token.precision) + ` ${this.token.name}`
-    }
-  },
-
-  methods: {
-    openPopup({ token }) {
-      this.token = token
-      this.visible = true
-    },
-    closePopup() {
-      this.visible = false
-    },
-
-    fullAmount() {
-      console.log(this.token)
-      this.form.amount = (
-        parseFloat(this.tokenBalance.split(' ')[0]) || 0
-      ).toFixed(parseFloat(this.token.decimals))
-    },
-
-    setChain(name) {
-      this.chain = config.networks[name]
-      this.form.address = ''
-      this.$refs.form.resetFields()
-    },
-
-    amountChange() {
-      this.form.amount = (parseFloat(this.form.amount) || 0).toFixed(
-        this.token.decimals
-      )
-    },
-
-    async open() {
-      if (!(await this.$store.dispatch('chain/asyncLogin'))) return
-      this.visible = true
-    },
-
-    async submit() {
-      if (this.token.contract == 'bosibc.io') {
-        await this.$confirm(
-          'Make sure you not send tokens to an Exchange, this is NOT original token, before transfer, you have to withdraw it to original chain',
-          'IBC Token aert',
-          {
-            confirmButtonText: 'Yes, i understand',
-            cancelButtonText: 'Cancel',
-            type: 'warning'
-          }
-        )
-      }
-
-      const quantity = this.form.amount + ' ' + this.token.currency
-
-      const loading = this.$loading({ lock: true, text: 'Wait for wallet' })
-      try {
-        const r = await this.$store.dispatch('chain/transfer', {
-          to: this.form.address,
-          contract: this.token.contract,
-          actor: this.user.name,
-          quantity,
-          memo: this.form.memo
-        })
-        this.$store.dispatch('loadUserBalances')
-
-        this.visible = false
-
-        this.$alert(
-          `<a href="${this.network.monitor}/tx/${r.transaction_id}" target="_blank">Transaction id</a>`,
-          'Transaction complete!',
-          {
-            dangerouslyUseHTMLString: true,
-            confirmButtonText: 'OK',
-            callback: (action) => {
-              this.$notify({ title: 'Token transfered!', type: 'success' })
-            }
-          }
-        )
-      } catch (e) {
-        captureException(e)
-        this.$notify({
-          title: 'Transfer error',
-          message: e.message,
-          type: 'error'
-        })
-        console.log(e)
-      } finally {
-        loading.close()
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.upperinput {
-  text-transform: uppercase;
-}
-.upperinput:placeholder-shown {
-  text-transform: none;
-}
-
-.ibc-withdraw .el-dialog__body {
-  padding: 0px 20px 5px 20px;
-}
-</style>
diff --git a/core/ibc.js b/core/ibc.js
new file mode 100644
index 000000000..8a7156005
--- /dev/null
+++ b/core/ibc.js
@@ -0,0 +1,429 @@
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+const arrayToHex = (data) => {
+  let result = ''
+  for (const x of data) result += ('00' + x.toString(16)).slice(-2)
+  return result.toUpperCase()
+}
+
+export class IBCTransfer {
+  emitxferAction = null
+
+  constructor(source, destination, sourceWallet, destinationWallet, asset) {
+    this.source = source
+    this.destination = destination
+    this.asset = asset
+    this.sourceWallet = sourceWallet
+    this.destinationWallet = destinationWallet
+  }
+
+  getTransferAction({ wrapLockContract, quantity, nativeTokenContract }) {
+    return {
+      account: nativeTokenContract,
+      name: 'transfer',
+      authorization: [this.sourceWallet.authorization],
+      data: {
+        from: this.sourceWallet.name,
+        to: wrapLockContract,
+        quantity,
+        memo: this.destinationWallet.name
+      }
+    }
+  }
+
+  getRetireAction({ sourceTokenContract, quantity }) {
+    return {
+      account: sourceTokenContract,
+      name: 'retire',
+      authorization: [this.sourceWallet.authorization],
+      data: {
+        owner: this.sourceWallet.name,
+        quantity,
+        beneficiary: this.destinationWallet.name
+      }
+    }
+  }
+
+  async submitProofs(destinationActions) {
+    console.log('destinationActions', destinationActions)
+    const signedDestinationTx = await this.destinationWallet.wallet.transact({
+      actions: destinationActions
+    }, { broadcast: false, expireSeconds: 360, blocksBehind: 3 })
+    console.log('signedDestinationTx', signedDestinationTx)
+
+    return await this.submitTx(signedDestinationTx, this.destination, 6)
+  }
+
+  async signSourceTrx() {
+    const sourceActions = this.asset.native
+      ? [this.getTransferAction(this.asset)]
+      : [this.getRetireAction(this.asset)]
+
+    const signedTx = await this.sourceWallet.wallet.transact(
+      { actions: sourceActions },
+      { broadcast: false, expireSeconds: 360, blocksBehind: 3 }
+    )
+
+    return signedTx
+  }
+
+  findEmitxferAction(tx) {
+    let emitxferAction = tx.processed.action_traces.find(
+      (r) => r.act.name === 'emitxfer'
+    ) //if flattened traces (using send_transaction)
+
+    if (!emitxferAction) {
+      //if api returns inline traces within action_trace (using push_transaction) shouldnt be used now
+      const lockActionTrace = tx.processed.action_traces.find(
+        (r) => r.act.name === 'transfer' || r.act.name === 'retire'
+      )
+      emitxferAction = lockActionTrace.inline_traces.find(
+        (r) => r.act.name === 'emitxfer'
+      )
+      console.log("!!!!!!!!!!!!!!!Shouldn't happen!!!!!!!!!!!!!!!!")
+    }
+
+    return emitxferAction
+  }
+
+  async sourceTransfer(signedTx) {
+    const { tx, packedTx, leap } = await this.submitTx(signedTx, this.source)
+    return { tx, packedTx, leap }
+  }
+
+  async submitTx(signedTx, chain, retry_trx_num_blocks = null) {
+    const leap = chain.version && chain.version >= 3
+
+    if (leap) {
+      //use send transaction2 if available
+      // TODO make work for leap
+
+      let obj = {
+        signatures: signedTx.signatures,
+        compression: signedTx.compression || false,
+        packed_trx: arrayToHex(signedTx.resolved.serializedTransaction),
+        packed_context_free_data: null
+      }
+
+      obj = {
+        transaction: obj,
+        return_failure_trace: false,
+        retry_trx: true,
+        retry_trx_num_blocks //if not specified, it defaults to LIB
+      }
+
+      return await chain.rpc.send_transaction2(obj)
+    }
+
+    const packedTx = {
+      signatures: signedTx.signatures,
+      serializedTransaction: signedTx.resolved
+        ? signedTx.resolved.serializedTransaction
+        : signedTx.serializedTransaction
+    }
+
+    const tx = await chain.rpc.send_transaction(packedTx)
+
+    return { tx, packedTx, leap }
+
+    //return await this.pushGurantee(chain, tx, retry_trx_num_blocks) // if waiting for lib
+  }
+
+  async waitForLIB(chain, _tx, packedTx, retry_trx_num_blocks) {
+    let tx = JSON.parse(JSON.stringify(_tx))
+
+    const transaction_id = tx.processed.id
+    let finished = false
+    let delay = 500
+    while (!finished) {
+      await sleep(delay)
+      delay *= 1.1
+      delay = Math.min(delay, 5000)
+
+      try {
+        console.log('check block')
+        const block = await chain.rpc.get_block(tx.processed.block_num)
+
+        const txFound = block.transactions.find(
+          (r) => r.trx.id === transaction_id
+        )
+
+        if (txFound) {
+          //if tx is in block, check relation to retry_trx_num_blocks
+          const headInfo = await chain.rpc.get_info()
+
+          console.log('Blocks passed: ~' + (headInfo.head_block_num - tx.processed.block_num) + '/330', 'LIB: ' + headInfo.last_irreversible_block_num)
+
+          if (
+            (!retry_trx_num_blocks &&
+              headInfo.last_irreversible_block_num >= tx.processed.block_num) || // passed lib
+            (retry_trx_num_blocks &&
+              headInfo.head_block_num - tx.processed.block_num >=
+                retry_trx_num_blocks) // passed blocks specified
+          )
+            finished = true
+        } else if (!txFound) {
+          //if tx is not in block, resubmit packed tx
+          try {
+            tx = await chain.rpc.send_transaction(packedTx)
+            console.log('after dublicate', tx)
+
+            console.log(
+              'tx not found in block (fork/stale block), resubmitted tx',
+              tx
+            )
+          } catch (ex) {
+            //handle duplicate tx error, in case it auto got included in next block than reported, check next block and so on
+            console.log(ex)
+            //TODO verify exception is duplicate tx error
+            tx.processed.block_num++
+            console.log(
+              'exception resubmitting duplicate tx, incremented block number to find tx',
+              tx.processed.block_num
+            )
+          }
+        }
+      } catch (ex) {
+        console.log('lost internet, retrying', ex)
+      }
+    } // end of while
+    if (retry_trx_num_blocks) return tx //return tx if we dont need to worry about correct global action
+
+    return new Promise((resolve, reject) => {
+      const ws = new WebSocket(this.source.ibc.proofSocket)
+      ws.addEventListener('open', (event) =>
+        ws.send(
+          JSON.stringify({
+            type: 'getBlockActions',
+            block_to_prove: tx.processed.block_num
+          })
+        )
+      )
+
+      ws.addEventListener('message', (event) => {
+        const res = JSON.parse(event.data)
+        console.log('res', res)
+        const firhoseTx = res.txs.find((r) =>
+          r.find((s) => s.transactionId === transaction_id)
+        )
+        console.log('firhoseTx', firhoseTx)
+        const firehoseEmitxfer = firhoseTx.find(
+          (r) => r.action.name === 'emitxfer'
+        )
+        console.log('firehoseEmitxfer', firehoseEmitxfer)
+        const emitxferAction = tx.processed.action_traces.find(
+          (r) => r.act.name === 'emitxfer'
+        )
+        console.log(
+          'api emitxferAction receipt',
+          JSON.parse(JSON.stringify(emitxferAction.receipt))
+        )
+
+        emitxferAction.receipt = firehoseEmitxfer.receipt
+        const auth_sequence = []
+        for (const auth of emitxferAction.receipt.auth_sequence)
+          auth_sequence.push([auth.account, auth.sequence])
+        emitxferAction.receipt.auth_sequence = auth_sequence
+        console.log('bp emitxferAction receipt', firehoseEmitxfer.receipt)
+        resolve(tx)
+      })
+    })
+  }
+
+  getProof({ type = 'heavyProof', block_to_prove, action, onProgress }) {
+    console.log('get proof txID: ', action.trx_id)
+    return new Promise((resolve) => {
+      //initialize socket to proof server
+      const ws = new WebSocket(this.source.ibc.proofSocket)
+      ws.addEventListener('open', (event) => {
+        // connected to websocket server
+        const query = { type, block_to_prove }
+        if (action) query.action_receipt = action.receipt
+        ws.send(JSON.stringify(query))
+      })
+
+      //messages from websocket server
+      ws.addEventListener('message', (event) => {
+        const res = JSON.parse(event.data)
+        //log non-progress messages from ibc server
+        if (res.type !== 'progress')
+          console.log('Received message from ibc proof server', res)
+        if (res.type == 'progress') {
+          onProgress(res.progress)
+          console.log('progress', res.progress)
+        }
+
+        if (res.type !== 'proof') return
+
+        ws.close()
+
+        //handle issue/withdraw if proving transfer/retire 's emitxfer action, else submit block proof to bridge directly (for schedules)
+        const actionToSubmit = {
+          authorization: [this.destinationWallet.authorization],
+          name: !action
+            ? 'checkproofd'
+            : this.asset.native
+              ? 'issuea'
+              : 'withdrawa',
+          account: !action
+            ? this.destination.ibc.bridgeContract
+            : this.asset.native
+              ? this.asset.pairedWrapTokenContract
+              : this.asset.wrapLockContract,
+          data: { ...res.proof, prover: this.destinationWallet.name }
+        }
+
+        console.log('actionToSubmit', actionToSubmit)
+
+        //if proving an action, add action and formatted receipt to actionproof object
+        if (action) {
+          const auth_sequence = []
+
+          console.log('1')
+          for (const authSequence of action.receipt.auth_sequence)
+            auth_sequence.push({
+              account: authSequence[0],
+              sequence: authSequence[1]
+            })
+
+          console.log('2')
+          actionToSubmit.data.actionproof = {
+            ...res.proof.actionproof,
+            action: {
+              account: action.act.account,
+              name: action.act.name,
+              authorization: action.act.authorization,
+              data: action.act.hex_data
+            },
+            receipt: { ...action.receipt, auth_sequence }
+          }
+        }
+        console.log('3')
+        resolve(actionToSubmit)
+      })
+    })
+  }
+
+  async getScheduleProofs(transferBlock) {
+    async function getProducerScheduleBlock(blocknum) {
+      try {
+        let header = await this.source.rpc.get_block(blocknum)
+        const target_schedule = header.schedule_version
+
+        let min_block = 2
+        //fetch last proved block to use as min block for schedule change search
+        const lastBlockProved = await this.destination.rpc.get_table_rows({
+          code: this.destination.ibc.bridgeContract,
+          table: 'lastproofs',
+          scope: this.source.ibc.name,
+          limit: 1,
+          reverse: true,
+          show_payer: false
+        })
+
+        if (lastBlockProved && lastBlockProved.rows[0])
+          min_block = lastBlockProved.rows[0].block_height
+
+        let max_block = blocknum
+
+        //detect active schedule change
+        while (max_block - min_block > 1) {
+          blocknum = Math.round((max_block + min_block) / 2)
+          try {
+            header = await this.source.rpc.get_block(blocknum)
+            if (header.schedule_version < target_schedule) min_block = blocknum
+            else max_block = blocknum
+          } catch (ex) {
+            console.log('Internet connection lost, retrying')
+          }
+        }
+
+        if (blocknum > 337) blocknum -= 337
+
+        //search before active schedule change for new_producer_schedule
+        while (
+          blocknum < max_block &&
+          !('new_producer_schedule' in header) &&
+          !header.new_producers
+        ) {
+          try {
+            header = await this.source.rpc.get_block(blocknum)
+            blocknum++
+          } catch (ex) {
+            console.log('Internet connection lost, retrying')
+          }
+        }
+
+        blocknum = header.block_num
+        return blocknum
+      } catch (ex) {
+        console.log('getProducerScheduleBlock ex', ex)
+        return null
+      }
+    }
+
+    const proofs = []
+    const bridgeScheduleData = await this.destination.rpc.get_table_rows({
+      code: this.destination.ibc.bridgeContract,
+      table: 'schedules',
+      scope: this.source.ibc.name,
+      limit: 1,
+      reverse: true,
+      show_payer: false
+    })
+
+    console.log('bridgeScheduleData', bridgeScheduleData)
+
+    let last_proven_schedule_version = 0
+    // if (bridgeScheduleData.rows.length > 0) last_proven_schedule_version = bridgeScheduleData.rows[0].producer_schedule.version;
+    if (bridgeScheduleData.rows.length > 0)
+      last_proven_schedule_version = bridgeScheduleData.rows[0].version
+    if (!last_proven_schedule_version)
+      return console.log('No Schedule Found in Contract!')
+
+    console.log('Last proved source schedule:', last_proven_schedule_version)
+
+    const schedule = await this.source.rpc.get_producer_schedule()
+
+    let schedule_version = parseInt(schedule.active.version)
+    console.log('Source active schedule:', schedule_version)
+    console.log('Pending schedule:', schedule.pending ? 'True' : 'False')
+
+    const head = (await this.source.rpc.get_info()).head_block_num
+
+    let schedule_block = head + 0
+
+    console.log('head', head)
+
+    while (schedule_version > last_proven_schedule_version) {
+      const block_num = await getProducerScheduleBlock(schedule_block)
+      if (!block_num) return //should never occur
+
+      const proof = await this.getProof({ block_to_prove: block_num })
+      schedule_version =
+        proof.data.blockproof.blocktoprove.block.header.schedule_version
+      schedule_block = block_num
+      proofs.unshift(proof)
+    }
+
+    // check for pending schedule and prove pending schedule if found;
+    if (schedule.pending) {
+      let newPendingBlockHeader = null
+      let currentBlock = transferBlock + 0
+
+      while (!newPendingBlockHeader) {
+        const bHeader = await this.source.rpc.get_block(currentBlock)
+        if (bHeader.new_producer_schedule) newPendingBlockHeader = bHeader
+        else currentBlock--
+      }
+
+      const pendingProof = await this.getProof({
+        block_to_prove: newPendingBlockHeader.block_num
+      })
+
+      proofs.push(pendingProof) //push pending after proving active
+    }
+
+    return proofs
+  }
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 32950a8d9..b72b85fb7 100755
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,12 +1,12 @@
 <template lang="pug">
-.alcor-inner(:class="{ 'full-width': fullWidth }")
-  top-nav(:class="{ 'alcor-inner': $route.name == `index___${$i18n.locale}` }")
+.unlim-width
+  top-nav.px-3.py-2
 
   AlcorLoading
   ResourcesModal
   ModalsDialog
 
-  .main
+  .main(:class="{ 'alcor-inner': !fullWidth , 'unlim-width': fullWidth }")
     nuxt
   FooterBlock
 </template>
@@ -164,7 +164,6 @@ export default {
 .full-width {
   max-width: 1920px;
   padding: 0px;
-  overflow-x: hidden;
 
   .nav {
     padding: 12px 20px;
diff --git a/locales/it.js b/locales/it.js
index d80d1ae39..2e2594145 100644
--- a/locales/it.js
+++ b/locales/it.js
@@ -37,7 +37,7 @@ export default {
   '24H Vol.': 'Vol. 24H',
   '24H': '24H',
   '7D Volume': 'Volume 7G',
-  '7D Change': 'Cambiamento 7G',
+  '7D Change': 'Var. 7G',
   'The OTC contract was changed(updated)!': 'Il contratto OTC è stato modificato (aggiornato)!',
   Orders: 'Ordini',
   Order: 'Ordine',
@@ -440,7 +440,7 @@ export default {
   'Token promotion': 'Promozione del Token',
   OTC: 'OTC',
   Wallet: 'Wallet',
-  Docs: 'Documentazione',
+  Docs: 'Docs',
   'Top Volume': 'Migliori Volumi',
   'Top Gainers': 'Migliori Guadagni',
   'New Listings': 'Nuovi Listings',
@@ -498,7 +498,7 @@ export default {
   'Fully Diluted Market Cap': 'Capitalizzazione di mercato completamente diluita',
   'The market cap if the max supply was in circulation': 'La capitalizzazione di mercato se la supply massima era in circolazione',
   'Fully-diluted market cap (FDMC) = price x max supply. If max supply is null, FDMC = price x total supply. if max supply and total supply are infinite or not available, fully-diluted market cap shows - -': 'Capitalizzazione di mercato completamente diluita (FDMC) = prezzo x supply massima. Se la supply massima è nulla, FDMC = prezzo x offerta totale. se la supply massima e la supply totale sono infinite o non disponibili, la capitalizzazione di mercato completamente diluita mostra - -',
-  "The total market value of a cryptocurrency's circulating supply.It is analogous to the free - float capitalization in the stock market": "Il valore di mercato totale della supply circolante di una criptovaluta. È analogo alla capitalizzazione free - float nel mercato azionario",
+  "The total market value of a cryptocurrency's circulating supply.It is analogous to the free - float capitalization in the stock market": "Il valore di mercato totale della supply circolante di una criptovaluta. È analogo alla capitalizzazione del flottante libero nel mercato azionario",
   'Market Cap = Current Price x Circulating Supply': 'Market Cap = Prezzo corrente x supply circolante',
   'Market Cap': 'Market Cap',
   'Volume 24h': 'Volume 24ore',
diff --git a/mixins/trade.js b/mixins/trade.js
index 4a12af99c..9947d83ca 100644
--- a/mixins/trade.js
+++ b/mixins/trade.js
@@ -101,6 +101,13 @@ export const trade = {
     },
 
     async actionOrder(trade, bid) {
+      if (!this.$store.state.user?.name) {
+        // TODO replace with please login button
+        try {
+          if (!await this.$store.dispatch('chain/mainLogin', null, { root: true })) return
+        } catch (e) { return }
+      }
+
       if (trade !== 'market' && (parseFloat(this.price_bid) == 0 || this.price_bid == null || isNaN(this.price_bid))) {
         this.$notify({ title: 'Place order', message: 'Specify the price', type: 'error' })
         return
diff --git a/package.json b/package.json
index 70cf4923f..f4778943c 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "cookie-universal-nuxt": "^2.2.2",
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
-    "element-ui": "^2.15.8",
+    "element-ui": "^2.15.12",
     "eos-common": "^0.8.0",
     "eosjs": "^22.1.0",
     "express": "^4.17.1",
diff --git a/pages/bridge.vue b/pages/bridge.vue
new file mode 100644
index 000000000..ee516a455
--- /dev/null
+++ b/pages/bridge.vue
@@ -0,0 +1,96 @@
+<template lang="pug">
+#bridge-page.d-flex.align-items-center.flex-column.gap-16.mt-5
+  .greet
+    h1.fs-48 Alcor IBC Bridge
+    .fs-24 Bridge assets from different chains
+
+  client-only
+    bridge-form.mt-4
+
+    circle1(:color="sourceColor" total="20").circle1
+    circle2(:color="destinationColor" total="20").circle2
+</template>
+
+<script>
+import BridgeForm from '~/components/bridge/BridgeForm.vue'
+import CirclesBg from '~/components/bridge/CirclesBg.vue'
+import Circle1 from '~/components/bridge/Circle1.vue'
+import Circle2 from '~/components/bridge/Circle2.vue'
+
+const DEFAULT_COLOR = '#525252'
+
+export default {
+  components: { BridgeForm, CirclesBg, Circle1, Circle2 },
+
+  data: () => ({
+    colors: [
+      { value: 'eos', color: '#fff' },
+      { value: 'proton', color: '#7c30ff' },
+      { value: 'telos', color: '#571aff' },
+      { value: 'ux', color: '#00e5e5' }
+    ]
+  }),
+
+  computed: {
+    sourceColor() {
+      const { color } = this.colors.find(c => c.value == this.$store.state.ibcBridge.sourceName) || {}
+      return color || DEFAULT_COLOR
+    },
+
+    destinationColor() {
+      const { color } = this.colors.find(c => c.value == this.$store.state.ibcBridge.destinationName) || {}
+      return color || DEFAULT_COLOR
+    }
+  },
+
+  head() {
+    return {
+      title: 'Alcor | IBC Bridge',
+
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'Bridge Antelope assets trustlessly, with no fee!'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.greet {
+  z-index: 100
+}
+#bridge-page {
+  position: relative;
+}
+.circle1 {
+  height: 1200px;
+  width: 1200px;
+
+  top: -350px;
+  left: -650px;
+}
+
+.circle2 {
+  height: 1200px;
+  width: 1200px;
+
+  top: -350px;
+  right: -650px;
+}
+
+.bg {
+  position: absolute;
+  top: 50px;
+  left: 0px;
+}
+
+.bg2 {
+  position: absolute;
+  top: 50px;
+  right: 0px;
+}
+</style>
diff --git a/pages/markets/index.vue b/pages/markets/index.vue
index 3aa74f27d..091ac0fce 100644
--- a/pages/markets/index.vue
+++ b/pages/markets/index.vue
@@ -97,7 +97,7 @@ export default {
     },
 
     newListings() {
-      return this.markets.slice(-3)
+      return this.markets.slice(0, 3)
     },
 
     topGainers() {
diff --git a/pages/new_market.vue b/pages/new_market.vue
index f2e366e29..2dba7d007 100755
--- a/pages/new_market.vue
+++ b/pages/new_market.vue
@@ -7,7 +7,7 @@
 
         br
 
-        p {{ $t('By selecting a token from the list below, you will be offered to sign a transaction that instantly opens a new market that will immediately be ready for placing orders') }}.
+        span {{ $t('By selecting a token from the list below, you will be offered to sign a transaction that instantly opens a new market that will immediately be ready for placing orders') }}.
           br
           | {{ $t('This happens on smart contract, without the participation of third parties') }}.
 
diff --git a/pages/nft-market/createnft.vue b/pages/nft-market/createnft.vue
index ec750de85..a3dba902e 100644
--- a/pages/nft-market/createnft.vue
+++ b/pages/nft-market/createnft.vue
@@ -31,7 +31,7 @@
       :data='item'
     )
 .d-flex.justify-content-center.p-3(v-else)
-  el-button(type="default" @click='$store.dispatch("modal/login")') {{ $t('Connect Wallet') }}
+  el-button(type="default" @click='$store.dispatch("chain/mainLogin")') {{ $t('Connect Wallet') }}
 
 </template>
 
diff --git a/pages/swap2.vue b/pages/swap2.vue
new file mode 100644
index 000000000..bf5a518f4
--- /dev/null
+++ b/pages/swap2.vue
@@ -0,0 +1,133 @@
+<template lang="pug">
+.d-flex.gap-32.w-100.mt-3
+  alcor-container.pool-form.d-flex.flex-column.gap-32
+    alcor-tabs.swap-tabs.mt-2(:links="true" :tabs="tabs")
+
+    .d-flex.flex-column.gap-10
+      .d-flex.flex-column.gap-8
+        .d-flex.flex-row.justify-content-between.align-items-center
+          .fs-12.text-muted {{ $t("Sell") }}
+          el-button(v-if="user && user.balances" type="text" size="mini" @click="inputAmount = parseFloat(inputBalance)").ml-auto
+            .d-flex.gap-4.fs-12
+              .text-decoration-underline {{ inputBalance | commaFloat }}
+              .fs-12 {{ inputToken.symbol }}
+              i.el-icon-wallet.ml-1
+
+        token-select(:token.sync='inputToken' :amount.sync="inputAmount")
+
+      i.el-icon-bottom.pointer.text-center.fs-24
+
+      .d-flex.flex-column.gap-8
+        .d-flex.flex-row.justify-content-between.align-items-center
+          .fs-12.text-muted {{ $t('Buy (Estimated)') }}
+          .d-flex.align-items-center.gap-4.fs-12(v-if="user && user.balances")
+            .text-decoration-underline {{ outputBalance | commaFloat }}
+            .fs-12 {{ outputToken.symbol }}
+            i.el-icon-wallet.ml-1
+
+        token-select(:token.sync='outputToken' :amount.sync="outputAmount" disabled)
+
+    alcor-button.w-100(big access disabled) Swap
+
+  nuxt-child
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import AlcorTabs from '~/components/AlcorTabs'
+import AlcorContainer from '~/components/AlcorContainer'
+import AlcorButton from '~/components/AlcorButton'
+import TokenSelect from '~/components/TokenSelect'
+
+export default {
+  components: {
+    AlcorTabs,
+    AlcorContainer,
+    TokenSelect,
+    AlcorButton
+  },
+  data: () => ({
+    inputToken: {
+      symbol: 'BRWL',
+      contract: 'brawlertoken'
+    },
+    inputAmount: 100,
+    outputToken: {
+      symbol: 'BRWL',
+      contract: 'brawlertoken'
+    },
+    outputAmount: 100,
+
+    tabs: [
+      {
+        label: 'Swap',
+        route: { path: '/swap2/swap-tokens' }
+      },
+      {
+        label: 'Manage Liquidity',
+        route: { path: '/swap2/manage-liquidity' }
+      }
+    ]
+  }),
+  computed: {
+    ...mapGetters(['user']),
+    inputBalance() {
+      return (
+        this.user.balances.find(
+          (b) =>
+            b.currency === this.inputToken.symbol &&
+            b.contract == this.inputToken.contract
+        )?.amount || (0).toFixed(4)
+      )
+    },
+    outputBalance() {
+      return (
+        this.user.balances.find(
+          (b) =>
+            b.currency === this.outputToken.symbol &&
+            b.contract == this.outputToken.contract
+        )?.amount || (0).toFixed(4)
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.pool-form {
+  width: min-content;
+  height: 500px;
+
+  .swap-tabs {
+    gap: 0px;
+    background: var(--btn-alternative);
+    padding: 8px;
+    border-radius: 4px;
+    width: 370px;
+
+    .alcor-tab-link {
+      width: 50%;
+      text-align: center;
+      border: none;
+      border-radius: 4px;
+
+      & .inner {
+        padding: 6px;
+      }
+
+      &::after {
+        display: none;
+      }
+
+      &.active {
+        border: none;
+        background: var(--btn-active);
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/swap2/manage-liquidity.vue b/pages/swap2/manage-liquidity.vue
new file mode 100644
index 000000000..b50ba7c37
--- /dev/null
+++ b/pages/swap2/manage-liquidity.vue
@@ -0,0 +1,220 @@
+<template lang="pug">
+#manage-liquidity.w-100
+  .d-flex.justify-content-between
+    h3.fs-28 LP Positions
+    .d-flex.gap-16
+      alcor-button
+        i.el-icon-info
+        span Info
+      alcor-button
+        i.el-icon-data-line
+        span Stats
+      alcor-button(orange)
+        i.el-icon-arrow-right
+        span Migrate
+      alcor-button(access @click="openAddLiqidityModal")
+        i.el-icon-circle-plus-outline
+        span New Position
+  .d-flex.justify-content-between.align-items-center.mt-2
+    .w-33
+      el-input(v-model='search' prefix-icon="el-icon-search" :placeholder="$t('Search by token name')" clearable)
+    el-checkbox(v-model='showClosed') {{ $t('show closed positions') }}
+
+  virtual-table.mt-2(:table="virtualTableData")
+    template(#row="{ item }")
+      pool-row(:pool="item")
+
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import AlcorButton from '~/components/AlcorButton'
+import VirtualTable from '~/components/VirtualTable'
+import PoolRow from '~/components/PoolRow'
+
+export default {
+  components: { AlcorButton, VirtualTable, PoolRow },
+  data: () => ({
+    search: '',
+    showClosed: false,
+    pools: [
+      {
+        id: 1,
+        input: {
+          symbol: 'BRWL',
+          contract: 'brawlertoken'
+        },
+        output: {
+          symbol: 'TLM',
+          contract: 'alien.worlds'
+        },
+        min: 4.52,
+        max: 12.512,
+        inRange: true,
+        inputEarning: 552,
+        outputEarning: -21,
+        percent: 1
+      },
+      {
+        id: 2,
+        input: {
+          symbol: 'BRWL',
+          contract: 'brawlertoken'
+        },
+        output: {
+          symbol: 'TLM',
+          contract: 'alien.worlds'
+        },
+        min: 4.52,
+        max: 12.512,
+        inRange: false,
+        inputEarning: -552,
+        outputEarning: 21,
+        percent: 1
+      },
+      {
+        id: 3,
+        input: {
+          symbol: 'BRWL',
+          contract: 'brawlertoken'
+        },
+        output: {
+          symbol: 'TLM',
+          contract: 'alien.worlds'
+        },
+        min: 4.52,
+        max: 12.512,
+        inRange: false,
+        inputEarning: -552,
+        outputEarning: 21,
+        percent: 1
+      },
+      {
+        id: 4,
+        input: {
+          symbol: 'BRWL',
+          contract: 'brawlertoken'
+        },
+        output: {
+          symbol: 'TLM',
+          contract: 'alien.worlds'
+        },
+        min: 4.52,
+        max: 12.512,
+        inRange: false,
+        inputEarning: -552,
+        outputEarning: 21,
+        percent: 1
+      },
+      {
+        id: 5,
+        input: {
+          symbol: 'BRWL',
+          contract: 'brawlertoken'
+        },
+        output: {
+          symbol: 'TLM',
+          contract: 'alien.worlds'
+        },
+        min: 4.52,
+        max: 12.512,
+        inRange: false,
+        inputEarning: -552,
+        outputEarning: 21,
+        percent: 1
+      },
+      {
+        id: 6,
+        input: {
+          symbol: 'BRWL',
+          contract: 'brawlertoken'
+        },
+        output: {
+          symbol: 'TLM',
+          contract: 'alien.worlds'
+        },
+        min: 4.52,
+        max: 12.512,
+        inRange: false,
+        inputEarning: -552,
+        outputEarning: 21,
+        percent: 1
+      },
+      {
+        id: 7,
+        input: {
+          symbol: 'BRWL',
+          contract: 'brawlertoken'
+        },
+        output: {
+          symbol: 'TLM',
+          contract: 'alien.worlds'
+        },
+        min: 4.52,
+        max: 12.512,
+        inRange: false,
+        inputEarning: -552,
+        outputEarning: 21,
+        percent: 1
+      },
+      {
+        id: 8,
+        input: {
+          symbol: 'BRWL',
+          contract: 'brawlertoken'
+        },
+        output: {
+          symbol: 'TLM',
+          contract: 'alien.worlds'
+        },
+        min: 4.52,
+        max: 12.512,
+        inRange: false,
+        inputEarning: -552,
+        outputEarning: 21,
+        percent: 1
+      }
+
+    ]
+  }),
+  computed: {
+    virtualTableData() {
+      const header = [
+        {
+          label: 'Assets in Position',
+          value: 'input.symbol',
+          width: '150px',
+          sortable: true
+        },
+        {
+          label: 'Range',
+          value: 'min',
+          width: '200px'
+        },
+        {
+          label: 'Earnings',
+          value: 'inputEarning',
+          width: '130px'
+        },
+        {
+          label: 'Action',
+          width: '150px'
+        }
+      ]
+
+      const data = this.pools
+
+      const itemSize = 75
+      const pageMode = true
+
+      return { pageMode, itemSize, header, data }
+    }
+  },
+  methods: {
+    ...mapActions('modal', ['addLiquidity']),
+    openAddLiqidityModal() {
+      this.addLiquidity()
+    }
+  }
+}
+</script>
diff --git a/pages/swap2/swap-tokens.vue b/pages/swap2/swap-tokens.vue
new file mode 100644
index 000000000..43e36f662
--- /dev/null
+++ b/pages/swap2/swap-tokens.vue
@@ -0,0 +1,36 @@
+<template lang="pug">
+#swap-tokens
+  .header
+    //.pair-container(v-if="current")
+      .left
+        PairIcons(
+          :token1="{symbol: current.pool1.quantity.symbol.code().to_string(), contract: current.pool1.contract}"
+          :token2="{symbol: current.pool2.quantity.symbol.code().to_string(), contract: current.pool2.contract}"
+        )
+        .name-container
+          .names(v-if="!isReverted") {{ current.pool1.quantity.symbol.code().to_string() }}/{{ current.pool2.quantity.symbol.code().to_string() }}
+          .names(v-else) {{ current.pool2.quantity.symbol.code().to_string() }}/{{ current.pool1.quantity.symbol.code().to_string() }}
+
+          .detail.muted {{ $t('Liquidity') }} alcor.dex
+            .right
+              AlcorButton.eol(@click="openInNewTab('https://docs.alcor.exchange/liquidity-pools/understanding-returns')") {{ $t('Earn On Liquidity') }}
+
+  chart(:tab="chart_tab" :period="period")
+
+</template>
+
+<script>
+import Chart from '~/components/swap/Chart.vue'
+import PairIcons from '~/components/PairIcons'
+
+export default {
+  components: {
+    Chart,
+    PairIcons
+  },
+  data: () => ({
+    chart_tab: 'Price',
+    period: '7D'
+  })
+}
+</script>
diff --git a/pages/test.vue b/pages/test.vue
index 0dbb2a298..105f03b78 100644
--- a/pages/test.vue
+++ b/pages/test.vue
@@ -1,9 +1,22 @@
 <template lang="pug">
   div
+    el-button(@click="test") Test
 </template>
 
 <script>
 export default {
-  layout: 'test'
+  layout: 'test',
+
+  created() {
+    //this.$store.dispatch('ibcBridge/fetchTokens')
+  },
+
+  methods: {
+    async test() {
+
+      //console.log('R', r)
+    }
+  }
 }
+
 </script>
diff --git a/pages/wallet.vue b/pages/wallet.vue
index b83c20a97..9c6fe14d6 100644
--- a/pages/wallet.vue
+++ b/pages/wallet.vue
@@ -1,12 +1,12 @@
 <template lang="pug">
-.wallet-layout
+.wallet-layout(v-if="user")
   WalletAccount
   WalletHeader.mt-3
   WalletTabBar.mt-3
-  .content(v-if="user")
+  .content
     nuxt-child
-  .d-flex.justify-content-center.p-3(v-else)
-    el-button(type="default" @click='$store.dispatch("modal/login")') {{ $t('Connect Wallet') }}
+.d-flex.justify-content-center.p-3(v-else)
+  el-button(type="default" @click='$store.dispatch("chain/mainLogin")') {{ $t('Connect Wallet') }}
 </template>
 
 <script>
diff --git a/pages/wallet/tokens.vue b/pages/wallet/tokens.vue
index 19355dc11..b772ecf91 100644
--- a/pages/wallet/tokens.vue
+++ b/pages/wallet/tokens.vue
@@ -50,9 +50,7 @@ export default {
         },
         {
           label: 'Available',
-          value: 'amount',
-          width: '215px',
-          sortable: true
+          width: '215px'
         },
         {
           label: 'Actions',
diff --git a/plugins/global.js b/plugins/global.js
index 16a4c59d5..c432b31ed 100644
--- a/plugins/global.js
+++ b/plugins/global.js
@@ -1,11 +1,8 @@
 import fetch from 'node-fetch'
 import { io } from 'socket.io-client'
-import { isEmpty } from 'lodash'
 
 import { JsonRpc } from 'eosjs'
-import { shuffleArray } from '../utils'
-
-import { JsonRpc as JsonRpcMultiEnds } from '~/assets/libs/eosjs-jsonrpc'
+import { getMultyEndRpc } from '../utils/eosjs'
 
 import config from '~/config'
 import * as fundamentals from '~/assets/fundamentals'
@@ -47,12 +44,9 @@ export default ({ app: { store: { state, commit }, $axios }, req }, inject) => {
         ? 'localhost:7002' : state.baseUrl, { transports: ['websocket'] }
     )
 
-    const all_nodes = Object.keys(state.network.client_nodes)
-    shuffleArray(all_nodes)
-    all_nodes.sort((a, b) => a.includes('alcor') ? -1 : 1)
-
-    const rpc = new JsonRpcMultiEnds(all_nodes, { fetch })
+    const rpc = getMultyEndRpc(Object.keys(state.network.client_nodes))
 
+    // TODO
     // Trying to implement node selection. (anchorLink is not use jsonrpc from eosjs so not possible for now)
     //if (isEmpty(state.settings.rpc_nodes)) commit('settings/setRpcNodes', state.network.client_nodes)
 
diff --git a/plugins/localStorage.js b/plugins/localStorage.js
index c30c2c0d9..d2256c483 100644
--- a/plugins/localStorage.js
+++ b/plugins/localStorage.js
@@ -15,7 +15,10 @@ export default ({ store }) => {
 
       'settings.sideMaretsTab', 'settings.favMarkets', 'settings.twChart',
       'settings.hideOtherPairs', 'settings.timesAndSales', 'settings.rpc_nodes',
-      'settings.markets_timesale_tab'
+      'settings.markets_timesale_tab',
+
+      'ibcBridge.step', 'ibcBridge.tx', 'ibcBridge.packedTx', 'ibcBridge.error', 'ibcBridge.result',
+      'ibcBridge.sourceName', 'ibcBridge.destinationName', 'ibcBridge.proofs', 'ibcBridge.asset'
     ]
   })(store)
 }
diff --git a/plugins/mixins.js b/plugins/mixins.js
index 0d82c3bcc..a73d9cb6f 100755
--- a/plugins/mixins.js
+++ b/plugins/mixins.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 import { asset } from 'eos-common'
+import { networks } from '~/config'
 
 Vue.mixin({
   data() {
@@ -26,6 +27,21 @@ Vue.mixin({
   },
 
   methods: {
+    async getToken(rpc, code, scope) {
+      console.log('code', code, 'scope', scope)
+      const { rows: [row] } = await rpc.get_table_rows({ code, scope, table: 'stat', limit: 1 })
+
+      const decimal = row.max_supply.split('.')
+      const [symbol, desimal_s] = decimal[1].split(' ')
+
+      return {
+        id: row,
+        contract: code,
+        symbol,
+        precision: symbol.length
+      }
+    },
+
     inputToAsset(input, precision) {
       return asset((parseFloat(input) || 0).toFixed(precision) + ' XXX')
     },
@@ -34,9 +50,14 @@ Vue.mixin({
       return (parseFloat(value) || 0).toFixed(precision)
     },
 
-    monitorTx(tx) {
-      const network = this.$store.state.network
-      return `${network.monitor}/transaction/${tx}?tab=traces&${network.monitor_params}`
+    monitorTx(tx, network = null) {
+      network = network ? networks[network] : this.$store.state.network
+
+      let url = network.monitor + '/transaction/' + tx
+      if (['eos', 'wax', 'telos'].includes(network.name)) url += '?tab=traces&' + network.monitor_params
+      if (['ux'].includes(network.name)) url = url.replace('transaction', 'tx')
+
+      return url
     },
 
     monitorAccount(account) {
diff --git a/plugins/startapp.js b/plugins/startapp.js
index a9e3a43cd..78f74d9f3 100755
--- a/plugins/startapp.js
+++ b/plugins/startapp.js
@@ -15,6 +15,7 @@ export default ({ app: { store, $axios } }, inject) => {
     store.dispatch('market/init')
     store.dispatch('wallet/init')
     store.dispatch('settings/init')
+    store.dispatch('ibcBridge/init')
 
     if (process.env.isDev) {
       //const VConsole = require('vconsole')
diff --git a/plugins/transit/ProtonProvider.js b/plugins/transit/ProtonProvider.js
deleted file mode 100644
index 65e0b59af..000000000
--- a/plugins/transit/ProtonProvider.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ConnectWallet } from '@proton/web-sdk'
-
-class ProtonProvider {
-  id = 'proton'
-
-  meta = {
-    name: 'Proton Web SDK',
-    shortName: 'Proton Web SDK',
-    description: 'Use Proton Wallet to sign transactions'
-  }
-
-  link = null
-  session = null
-  sessionId = null
-  sessionProvider = null
-
-  signatureProvider = {
-    getAvailableKeys: () => {
-      if (!this.sessionProvider) {
-        throw new Error('Not logged in')
-      }
-      return this.sessionProvider.getAvailableKeys()
-    },
-    sign: (args) => {
-      if (!this.sessionProvider) {
-        throw new Error('Not logged in')
-      }
-      return this.sessionProvider.sign(args)
-    }
-  }
-
-  constructor(appName, options) {
-    //this.link = link
-    //this.sessionId = sessionId
-
-    this.appName = appName
-    this.options = options
-  }
-
-  async connect() {}
-  async disconnect() {}
-
-  async login(sessionId) {
-    const { link, session } = await ConnectWallet({
-      linkOptions: {
-        endpoints: ['https://proton.greymass.com']
-      },
-      transportOptions: {
-        requestAccount: this.options.requestAccount, /* Optional: Your proton account */
-        requestStatus: true
-      },
-      selectorOptions: {
-        appName: 'Alcor Exchange',
-        appLogo: 'https://wax.alcor.exchange/android-chrome-192x192.svg',
-
-        customStyleOptions: {
-          modalBackgroundColor: '#F4F7FA',
-          logoBackgroundColor: 'white',
-          isLogoRound: true,
-          optionBackgroundColor: 'white',
-          optionFontColor: 'black',
-          primaryFontColor: 'black',
-          secondaryFontColor: '#6B727F',
-          linkColor: '#752EEB'
-        },
-
-        walletType: 'proton'
-      }
-    })
-
-    this.link = link
-    this.session = session
-    this.sessionProvider = session.makeSignatureProvider()
-
-    return {
-      accountName: session.auth.actor,
-      permission: session.auth.permission,
-      publicKey: session.publicKey
-    }
-  }
-
-  async logout(accountName, permission) {
-    //if (accountName && permission) {
-    //  await this.link.removeSession(this.sessionId, {
-    //    actor: accountName,
-    //    permission
-    //  })
-    //}
-  }
-}
-
-export default function makeProvider(appName, options) {
-  return function(network) {
-    return new ProtonProvider(appName, options)
-  }
-}
diff --git a/plugins/transit/Scatter.js b/plugins/transit/Scatter.js
deleted file mode 100644
index d268c3feb..000000000
--- a/plugins/transit/Scatter.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import { Api } from 'eosjs'
-
-
-import ScatterJS from 'scatterjs-core'
-import ScatterEOS from 'scatterjs-plugin-eosjs2'
-//import ScatterEOS from '~/assets/libs/scatter-plugin2'
-
-let scatter_plugin = null
-let scatter_api = null
-
-const getScatter = () => scatter_api || scatter_plugin
-
-let accountPublickey
-let signatureProvider
-
-ScatterJS.plugins(new ScatterEOS())
-
-if (typeof window !== 'undefined' || typeof document !== 'undefined') {
-  document.addEventListener('scatterLoaded', () => {
-    console.log('scatter connect in hook')
-    scatter_plugin = window.scatter
-  })
-}
-
-// TODO: Ability to pass Scatter options
-export function scatterWalletProvider() {
-  return function makeWalletProvider(network) {
-    async function connect(appName) {
-      //return new Promise((resolve, reject) => {
-      //  let tries = 0
-
-      //  function checkConnect() {
-      //    if (scatter) return resolve(true)
-
-      //    tries++
-
-      //    if (tries > 5) return reject('Cannot connect to ScatterPocket wallet provider')
-
-      //    setTimeout(() => {
-      //      checkConnect()
-      //    }, 1000)
-      //  }
-
-      //  checkConnect()
-      //})
-
-      const scatter = getScatter()
-      if (scatter && await scatter.isConnected()) return true
-
-      const connected = await ScatterJS.scatter.connect(appName, { network })
-
-      if (connected) {
-        scatter_api = ScatterJS.scatter
-        return true
-      } else {
-        throw new Error('Cannot connect to Scatter')
-      }
-    }
-
-    function discover(discoveryOptions) {
-      // console.log('in scatter discover.');
-      return new Promise((resolve, reject) => {
-        const discoveryInfo = {
-          keys: [],
-          note: 'Scatter does not support discovery'
-        }
-
-        resolve(discoveryInfo)
-      })
-    }
-
-    function disconnect() {
-      const scatter = getScatter()
-      try {
-        //scatter.disconnect()
-      } catch {
-        console.log('fail disconnect, try forgetIdentity... scatter: ', scatter)
-        scatter.forgetIdentity()
-      }
-
-      return Promise.resolve(true)
-    }
-
-    // Authentication
-
-    async function login(accountName) {
-      const scatter = getScatter()
-      try {
-        await scatter.checkLogin()
-      } catch (e) {
-        console.log('check login err', e)
-      }
-
-      try {
-        // Useful for testnets to provide a convenient means for the end use to quickly add
-        // the required network configuration to their Scatter seamlessly while logging in.
-        await scatter.suggestNetwork({ ...network, blockchain: 'eos' })
-
-        const identity = await scatter.getIdentity({
-          accounts: [{ ...network, blockchain: 'eos' }]
-        })
-
-        if (!identity) {
-          return Promise.reject('No identity obtained from Scatter')
-        }
-
-        const account =
-          (identity &&
-            identity.accounts &&
-            identity.accounts.find((x) => x.blockchain === 'eos')) || undefined
-
-        if (!account) {
-          return Promise.reject(
-            'No account data obtained from Scatter identity'
-          )
-        }
-
-        accountPublickey = account.publicKey
-
-        return {
-          accountName: account.name,
-          permission: account.authority,
-          publicKey: accountPublickey
-        }
-      } catch (error) {
-        console.log('[scatter]', error)
-        return Promise.reject(error)
-      }
-    }
-
-    function logout(accountName) {
-      const scatter = getScatter()
-
-      try {
-        return scatter.logout()
-      } catch {
-        return scatter.forgetIdentity()
-      }
-    }
-
-    function signArbitrary(data, userMessage) {
-      const scatter = getScatter()
-
-      return scatter.getArbitrarySignature(accountPublickey, data, userMessage)
-    }
-
-    const walletProvider = {
-      id: 'scatter',
-      meta: {
-        name: 'Scatter Desktop',
-        shortName: 'Scatter',
-        description:
-          'Scatter Desktop application that keeps your private keys secure'
-      },
-      signatureProvider: {
-        getAvailableKeys() {
-          return [accountPublickey]
-        },
-
-        sign(signatureProviderArgs) {
-          const scatter = getScatter()
-
-          if (!signatureProvider) {
-            if ('eosHook' in scatter) {
-              console.log('sing using eosHook...', scatter)
-              console.log(2)
-              signatureProvider = scatter.eosHook({ ...network, blockchain: 'eos' }, null, true)
-            } else {
-              console.log('sing using eos object (old way)...')
-              const jNetwork = ScatterJS.Network.fromJson({ ...network, blockchain: 'eos' })
-              const rpc = new JsonRpc(jNetwork.fullhost())
-              const eos = scatter.eos(jNetwork, Api, { rpc })
-
-              signatureProvider = eos.signatureProvider
-            }
-          }
-
-          return signatureProvider.sign(signatureProviderArgs)
-        }
-      },
-      getEosApi() {
-        if (scatter_api) {
-          return undefined
-        } else if (scatter_plugin) {
-          const jNetwork = ScatterJS.Network.fromJson({ ...network, blockchain: 'eos' })
-          const rpc = new JsonRpc(jNetwork.fullhost())
-          return scatter_plugin.eos(jNetwork, Api, { rpc })
-        } else {
-          return undefined
-        }
-      },
-      connect,
-      discover,
-      disconnect,
-      login,
-      logout,
-      signArbitrary
-    }
-
-    return walletProvider
-  }
-}
-
-export default scatterWalletProvider
diff --git a/plugins/wallets/Anchor.js b/plugins/wallets/Anchor.js
index b1f4d30f2..afeef4468 100644
--- a/plugins/wallets/Anchor.js
+++ b/plugins/wallets/Anchor.js
@@ -12,6 +12,7 @@ class WalletBase {
 }
 
 export default class AnchoWallet extends WalletBase {
+  name = 'anchor'
   link = null
   session = null
 
@@ -55,9 +56,10 @@ export default class AnchoWallet extends WalletBase {
 
     if (session) {
       this.session = session
-      const { actor, permission } = session.auth
+      const { auth: { actor, permission }, chainId: { hexString } } = session
 
       return {
+        chainId: hexString,
         name: actor.toString(),
         authorization: { actor: actor.toString(), permission: permission.toString() }
       }
@@ -79,7 +81,7 @@ export default class AnchoWallet extends WalletBase {
     }
   }
 
-  transact(actions) {
-    return this.session.transact({ actions })
+  transact(...args) {
+    return this.session.transact(...args)
   }
 }
diff --git a/plugins/wallets/Proton.js b/plugins/wallets/Proton.js
index 844a619ec..c28f9c995 100644
--- a/plugins/wallets/Proton.js
+++ b/plugins/wallets/Proton.js
@@ -12,6 +12,7 @@ class WalletBase {
 }
 
 export default class AnchoWallet extends WalletBase {
+  name = 'proton'
   link = null
   session = null
 
@@ -90,7 +91,7 @@ export default class AnchoWallet extends WalletBase {
     this.session = undefined
   }
 
-  transact(actions) {
-    return this.session.transact({ actions })
+  transact(...args) {
+    return this.session.transact(...args)
   }
 }
diff --git a/plugins/wallets/Scatter.js b/plugins/wallets/Scatter.js
index b547cfb0f..0a4536554 100644
--- a/plugins/wallets/Scatter.js
+++ b/plugins/wallets/Scatter.js
@@ -5,6 +5,14 @@ import ScatterJS from '@scatterjs/core'
 //import ScatterJS from 'scatterjs-core'
 //import ScatterEOS from 'scatterjs-plugin-eosjs2'
 
+if (typeof window !== 'undefined' || typeof document !== 'undefined') {
+  document.addEventListener('scatterLoaded', () => {
+    this.scatter_plugin = window.scatter
+    ScatterJS.plugins(new ScatterEOS())
+    console.log('scatter connected!!!')
+  })
+}
+
 class WalletBase {
   network = null
 
@@ -14,117 +22,56 @@ class WalletBase {
 }
 
 export default class WCWWallet extends WalletBase {
-  scatter_plugin = null
-  scatter_api = null
-
-  getScatter = () => this.scatter_api || this.scatter_plugin
-
-  accountPublickey = null
-  signatureProvider = null
+  name = 'scatter'
 
   constructor(network, rpc) {
     super(network)
     this.rpc = rpc
 
     ScatterJS.plugins(new ScatterEOS())
-
-    if (typeof window !== 'undefined' || typeof document !== 'undefined') {
-      document.addEventListener('scatterLoaded', () => {
-        console.log('scatter connect in hook')
-        this.scatter_plugin = window.scatter
-      })
-    }
-
-    this.connect()
   }
 
   async connect() {
-    const scatter = this.getScatter()
-    if (scatter && await scatter.isConnected()) return true
-
-    const connected = await ScatterJS.scatter.connect('Alcor Exchange', { network: this.network })
+    let connected = false
 
-    if (connected) {
-      this.scatter_api = ScatterJS.scatter
-      return true
-    } else {
-      console.log('Cannot connect to Scatter...')
+    try {
+      connected = await ScatterJS.scatter.connect('Alcor Exchange', { network: this.network })
+    } catch (e) {
     }
+
+    if (connected) return
+    throw new Error('No scatter wallet found')
   }
 
   async checkLogin() {
   }
 
   async login() {
-    const scatter = this.getScatter()
-    try {
-      await scatter.checkLogin()
-    } catch (e) {
-      console.log('check login err', e)
-    }
-
     try {
-      // Useful for testnets to provide a convenient means for the end use to quickly add
-      // the required network configuration to their Scatter seamlessly while logging in.
-      await scatter.suggestNetwork({ ...this.network, blockchain: 'eos' })
+      await this.connect()
+      const result = await ScatterJS.login()
 
-      const identity = await scatter.getIdentity({
-        accounts: [{ ...this.network, blockchain: 'eos' }]
-      })
-
-      if (!identity) {
-        return Promise.reject('No identity obtained from Scatter')
-      }
-
-      const account =
-        (identity &&
-          identity.accounts &&
-          identity.accounts.find((x) => x.blockchain === 'eos')) || undefined
-
-      if (!account) {
-        return Promise.reject(
-          'No account data obtained from Scatter identity'
-        )
-      }
-
-      this.accountPublickey = account.publicKey
+      const { accounts: [{ authority, name }] } = await ScatterJS.login()
 
       return {
-        name: account.name,
-        authorization: { actor: account.name, permission: account.authority }
+        name,
+        authorization: { actor: name, permission: authority }
       }
     } catch (error) {
       console.log('[scatter]', error)
-      return Promise.reject(error)
+      return Promise.reject(error.message)
     }
   }
 
-  logout() {
-    const scatter = this.getScatter()
-
-    try {
-      return scatter.logout()
-    } catch {
-      return scatter.forgetIdentity()
-    }
+  async logout() {
+    await ScatterJS.logout()
   }
 
-  transact(actions) {
-    const scatter = this.getScatter()
-    let eos
-
-    if ('eosHook' in scatter) {
-      console.log('sing using eosHook...', scatter)
-      const network = ScatterJS.Network.fromJson({ ...this.network, blockchain: 'eos' })
-      const rpc = new JsonRpc(network.fullhost())
-      eos = ScatterJS.eos(network, Api, { rpc })
-    } else {
-      console.log('sing using eos object (old way)...')
-      const jNetwork = ScatterJS.Network.fromJson({ ...this.network, blockchain: 'eos' })
-      const rpc = new JsonRpc(jNetwork.fullhost())
-      eos = scatter.eos(jNetwork, Api, { rpc })
-    }
+  transact(...args) {
+    const network = ScatterJS.Network.fromJson({ ...this.network, blockchain: 'eos' })
+    const rpc = new JsonRpc(network.fullhost())
+    const eos = ScatterJS.eos(network, Api, { rpc })
 
-    return eos.transact({ actions }, { blocksBehind: 3, expireSeconds: 1200 })
+    return eos.transact(...args)
   }
 }
diff --git a/plugins/wallets/WCW.js b/plugins/wallets/WCW.js
index c6639bf54..773dfdbfb 100644
--- a/plugins/wallets/WCW.js
+++ b/plugins/wallets/WCW.js
@@ -11,6 +11,7 @@ class WalletBase {
 }
 
 export default class WCWWallet extends WalletBase {
+  name = 'wcw'
   wax = null
 
   constructor(network, rpc) {
@@ -23,11 +24,12 @@ export default class WCWWallet extends WalletBase {
 
   async checkLogin() {
     const isAutoLoginAvailable = await this.wax.isAutoLoginAvailable()
-    console.log('check wax autoLogin')
+    console.log('check wax autoLogin', isAutoLoginAvailable)
 
     if (isAutoLoginAvailable) {
       console.log('wcw auto logined')
       return {
+        chainId: '1064487b3cd1a897ce03ae5b6a865651747e2e152090f99c1d19d44e01aea5a4', //WCW is only for wax so we hardcode that
         name: this.wax.user.account,
         authorization: {
           actor: this.wax.user.account, permission: 'active'
@@ -49,7 +51,7 @@ export default class WCWWallet extends WalletBase {
     }
   }
 
-  transact(actions) {
-    return this.wax.api.transact({ actions }, { blocksBehind: 3, expireSeconds: 1200 })
+  transact(...args) {
+    return this.wax.api.transact(...args)
   }
 }
diff --git a/plugins/wallets/Wombat.js b/plugins/wallets/Wombat.js
new file mode 100644
index 000000000..6afef8c5e
--- /dev/null
+++ b/plugins/wallets/Wombat.js
@@ -0,0 +1,67 @@
+import { JsonRpc, Api } from 'eosjs'
+
+import ScatterEOS from '@scatterjs/eosjs2'
+import ScatterJS from '@scatterjs/core'
+//import ScatterJS from 'scatterjs-core'
+//import ScatterEOS from 'scatterjs-plugin-eosjs2'
+
+class WalletBase {
+  network = null
+
+  constructor(network) {
+    this.network = network
+  }
+}
+
+export default class Wombat extends WalletBase {
+  name = 'wombat'
+
+  constructor(network, rpc) {
+    super(network)
+    this.rpc = rpc
+
+    ScatterJS.plugins(new ScatterEOS())
+  }
+
+  async connect() {
+    let connected = false
+
+    try {
+      connected = await ScatterJS.scatter.connect('Alcor Exchange', { network: this.network })
+    } catch (e) {
+    }
+
+    if (connected) return
+    throw new Error('No wombat wallet found')
+  }
+
+  async checkLogin() {
+  }
+
+  async login() {
+    try {
+      await this.connect()
+      const { accounts: [{ authority, name }] } = await ScatterJS.login()
+
+      return {
+        name,
+        authorization: { actor: name, permission: authority }
+      }
+    } catch (error) {
+      console.log('[wombat]', error)
+      return Promise.reject(error.message)
+    }
+  }
+
+  async logout() {
+    await ScatterJS.logout()
+  }
+
+  transact(...args) {
+    const network = ScatterJS.Network.fromJson({ ...this.network, blockchain: 'eos' })
+    const rpc = new JsonRpc(network.fullhost())
+    const eos = ScatterJS.eos(network, Api, { rpc })
+
+    return eos.transact(...args)
+  }
+}
diff --git a/store/chain.js b/store/chain.js
index 19465b83b..a059ae69c 100755
--- a/store/chain.js
+++ b/store/chain.js
@@ -1,52 +1,58 @@
+import { getMultyEndRpc } from '../utils/eosjs'
+
+import config from '~/config'
+
 import WCW from '~/plugins/wallets/WCW'
 import AnchoWallet from '~/plugins/wallets/Anchor'
 import ProtonWallet from '~/plugins/wallets/Proton'
 import ScatterWallet from '~/plugins/wallets/Scatter'
+import WombatWallet from '~/plugins/wallets/Wombat'
 
 export const state = () => ({
   loginPromise: null,
+  wallet: {},
   wallets: {},
 
   payForUser: false,
-  currentWallet: 'anchor',
-  lastWallet: null
+  lastWallet: null,
+  loginContext: null
 })
 
 export const mutations = {
+  setWallet: (state, wallet) => state.wallet = wallet,
   setWallets: (state, value) => (state.wallets = value),
   setLoginPromise: (state, value) => (state.loginPromise = value),
   setPayForUser: (state, value) => (state.payForUser = value),
-  setCurrentWallet: (state, value) => (state.currentWallet = value),
-  setLastWallet: (state, value) => (state.lastWallet = value)
+  setLastWallet: (state, value) => (state.lastWallet = value),
+  setLoginContext: (state, value) => state.loginContext = value
 }
 
 export const actions = {
   init({ state, commit, dispatch, rootState, rootGetters, getters }) {
-    const { network } = rootState
-
     const wallets = {
-      anchor: new AnchoWallet(network, this.$rpc),
-      scatter: new ScatterWallet(network, this.$rpc)
+      anchor: AnchoWallet,
+      scatter: ScatterWallet,
+      wcw: WCW,
+      proton: ProtonWallet,
+      wombat: WombatWallet
     }
 
-    if (network.name == 'wax') wallets.wcw = new WCW(network, this.$rpc)
-    if (network.name == 'proton')
-      wallets.proton = new ProtonWallet(network, this.$rpc)
-
     commit('setWallets', wallets)
 
     if (state.lastWallet) {
-      commit('setCurrentWallet', state.lastWallet)
+      commit('setWallet', new state.wallets[state.lastWallet](rootState.network, this.$rpc))
       dispatch('autoLogin')
     }
   },
 
-  async autoLogin({ state, dispatch, commit, getters }) {
+  async autoLogin({ state, rootState, dispatch, commit, getters }) {
+    // TODO Check correct chain
     console.log('try autoLogin..')
-    const loginned = await getters.wallet.checkLogin()
+    const loginned = await state.wallet.checkLogin()
     if (loginned) {
       console.log('YES. autoLogining...')
-      const { name, authorization } = loginned
+      const { name, authorization, chainId } = loginned
+      if (chainId !== rootState.network.chainId) return console.log('autoLogin chain mismatch')
       commit('setUser', { name, authorization }, { root: true })
       dispatch('afterLoginHook')
 
@@ -80,7 +86,7 @@ export const actions = {
 
   logout({ state, dispatch, commit, getters, rootState }) {
     console.log('logout..')
-    getters.wallet.logout()
+    state.wallet.logout()
     commit('setLastWallet', null)
     this.$socket.emit('unsubscribe', {
       room: 'account',
@@ -94,20 +100,37 @@ export const actions = {
     commit('setUserOrders', [], { root: true })
   },
 
-  async login({ state, commit, dispatch, getters, rootState }, wallet_name) {
-    console.log('login..')
-    commit('setCurrentWallet', wallet_name)
-    const wasAutoLoginned = await dispatch('autoLogin')
-    if (wasAutoLoginned) return commit('setLastWallet', wallet_name)
+  async mainLogin({ commit, dispatch }) {
+    try {
+      const { wallet, name, authorization } = await dispatch('asyncLogin')
 
-    const { name, authorization } = await getters.wallet.login()
-    commit('setUser', { name, authorization }, { root: true })
-    dispatch('afterLoginHook')
+      commit('setWallet', wallet)
 
-    commit('setLastWallet', wallet_name)
+      const wasAutoLoginned = await dispatch('autoLogin')
+      if (wasAutoLoginned) return commit('setLastWallet', wallet.name)
 
-    //if (state.loginPromise) state.loginPromise.resolve(true)
-    //if (state.loginPromise) state.loginPromise.resolve(false)
+      commit('setUser', { name, authorization }, { root: true })
+      dispatch('afterLoginHook')
+
+      commit('setLastWallet', wallet.name)
+
+      return wallet
+    } catch (e) {
+      this._vm.$notify({ type: 'warning', title: 'Wallet connect', message: e })
+    }
+  },
+
+  async login({ state, commit, dispatch, getters, rootState }, wallet_name) {
+    const network = state.loginContext?.chain ? config.networks[state.loginContext.chain] : rootState.network
+
+    const wallet = new state.wallets[wallet_name](network, getMultyEndRpc(Object.keys(network.client_nodes)))
+
+    try {
+      const { name, authorization } = await wallet.login()
+      state.loginPromise.resolve({ wallet, name, authorization })
+    } catch (e) {
+      state.loginPromise.reject(e)
+    }
   },
 
   transfer({ dispatch, rootState }, { contract, actor, quantity, memo, to }) {
@@ -143,15 +166,21 @@ export const actions = {
     return r
   },
 
-  asyncLogin({ rootState, commit, dispatch }) {
-    if (rootState.user) return Promise.resolve(true)
+  async asyncLogin({ rootState, commit, dispatch }, context) {
+    if (context) commit('setLoginContext', context)
 
     const loginPromise = new Promise((resolve, reject) => {
       commit('setLoginPromise', { resolve, reject })
       dispatch('modal/login', null, { root: true })
     })
 
-    return loginPromise
+    try {
+      return await loginPromise
+    } catch (e) {
+      throw new Error(e)
+    } finally {
+      if (context) commit('setLoginContext', null)
+    }
   },
 
   async generateGiftLink({ rootState, dispatch }, { memo, asset_ids }) {
@@ -584,7 +613,7 @@ export const actions = {
     { state, rootState, dispatch, getters, commit },
     actions
   ) {
-    if (actions && actions[0].name != 'delegatebw' && state.currentWallet != 'wcw') {
+    if (actions && actions[0].name != 'delegatebw' && state.lastWallet != 'wcw') {
       await dispatch('resources/showIfNeeded', undefined, { root: true })
     }
 
@@ -595,7 +624,20 @@ export const actions = {
     )
 
     try {
-      return await getters.wallet.transact(actions)
+      const signedTx = await state.wallet.transact(
+        { actions },
+        { broadcast: false, expireSeconds: 360, blocksBehind: 3 }
+      )
+
+      // TODO Manage leap soon
+      const packedTx = {
+        signatures: signedTx.signatures,
+        serializedTransaction: signedTx.resolved
+          ? signedTx.resolved.serializedTransaction
+          : signedTx.serializedTransaction
+      }
+
+      return await this.$rpc.send_transaction(packedTx)
     } catch (e) {
       throw e
     } finally {
@@ -608,7 +650,5 @@ export const actions = {
 export const getters = {
   chainName(state, getters, rootState) {
     return rootState.network.name
-  },
-
-  wallet: (state, getters) => state.wallets[state.currentWallet]
+  }
 }
diff --git a/store/ibcBridge.js b/store/ibcBridge.js
new file mode 100644
index 000000000..4eea2475d
--- /dev/null
+++ b/store/ibcBridge.js
@@ -0,0 +1,190 @@
+import { SymbolCode } from 'eos-common'
+import { getMultyEndRpc } from '../utils/eosjs'
+import { IBC_NETWORKS } from '~/config'
+import { nameToUint64 } from '~/utils'
+
+export const state = () => ({
+  pairs: [],
+  loading: true,
+  chains: [],
+
+  step: null,
+  tx: null,
+  packedTx: null,
+  error: null,
+  proofs: null,
+  asset: null,
+
+  result: {},
+
+  sourceName: null,
+  destinationName: null
+})
+
+export const mutations = {
+  setLoading: (state, value) => state.loading,
+  setChains: (state, chains) => state.chains = chains,
+  setDestinationName: (state, chain) => state.destinationName = chain,
+  setSourceName: (state, chain) => state.sourceName = chain,
+  setStep: (state, chain) => state.step = chain,
+  setTx: (state, tx) => state.tx = tx,
+  setPackedTx: (state, tx) => state.packedTx = tx,
+  setError: (state, error) => state.error = error,
+  setResult: (state, result) => state.result = result,
+  setProofs: (state, result) => state.proofs = result,
+  setAsset: (state, asset) => state.asset = asset
+}
+
+export const actions = {
+  init({ state, commit, dispatch, rootState, rootGetters, getters }) {
+    const chains = IBC_NETWORKS
+
+    for (const chain of chains) {
+      chain.session = null
+      chain.symbols = null
+      chain.auth = null
+      chain.wrapLockContracts = []
+
+      chain.rpc = getMultyEndRpc(Object.keys(chain.client_nodes))
+    }
+
+    commit('setChains', chains)
+    dispatch('fetchTokens')
+  },
+
+  async fetchTokens({ state, commit }) {
+    const promises = []
+    const tokenPromises = []
+    const groupedResults = []
+    const allWraplockContracts = []
+
+    const { chains } = state
+
+    for (const chain of chains) {
+      chain.session = null
+      chain.symbols = null
+      chain.auth = null
+      chain.wrapLockContracts = []
+
+      chain.rpc = getMultyEndRpc(Object.keys(chain.client_nodes))
+    }
+
+    let sourceName, destinationName, tokenRow, fetchProgress = 0, progressInterval
+
+    for (const chain of chains) for (const wrapLockContract of chain.ibc.wrapLockContractsArray) {
+      allWraplockContracts.push(wrapLockContract)
+
+      promises.push(
+        chain.rpc.get_table_rows({ code: wrapLockContract, scope: wrapLockContract, table: 'global' }),
+        chain.rpc.get_table_rows({ code: wrapLockContract, scope: wrapLockContract, table: 'contractmap' })
+      )
+    }
+
+    const initialResults = (await Promise.all(promises)).map(r => r.rows)
+    while (initialResults.length) groupedResults.push(initialResults.splice(0, 2))
+
+    for (const result of groupedResults) {
+      const global = result[0][0]
+      const contractMaps = result[1]
+
+      for (const map of contractMaps) {
+        const chain = chains.find(c => c.chainId === global.chain_id)
+        if (!chain) continue
+        tokenPromises.push(chain.rpc.get_table_by_scope({ code: map.native_token_contract, table: 'stat' }))
+      }
+    }
+
+    const tokenResults = await Promise.all(tokenPromises)
+
+    let tokenResultsIndex = 0
+
+    for (const result of groupedResults) {
+      const global = result[0][0]
+      const contractMaps = result[1]
+
+      for (const map of contractMaps) {
+        const chain = chains.find(c => c.chainId === global.chain_id)
+        const pairedChain = chains.find(c => c.chainId === global.paired_chain_id)
+
+        if (!chain) continue
+
+        const symbolsres = tokenResults[tokenResultsIndex]
+
+        const symbols = symbolsres.rows.map(r => new SymbolCode(Number(nameToUint64(r.scope))).toString())
+
+        console.log(`${chain.name} -> ${pairedChain.name} tokens: ${symbols}`)
+        chain.wrapLockContracts.push({
+          chain_id: global.chain_id,
+          wrapLockContract: allWraplockContracts[tokenResultsIndex],
+          nativeTokenContract: map.native_token_contract,
+          pairedChainId: global.paired_chain_id,
+          pairedWrapTokenContract: map.paired_wraptoken_contract,
+          symbols
+        })
+
+        tokenResultsIndex++
+      }
+    }
+
+    commit('setChains', chains)
+  }
+}
+
+export const getters = {
+  availableAssets(state, getters, rootState) {
+    if (!getters.source || !getters.destination) return []
+
+    //if (sourceName === destinationName || !destinationName){
+    //  destinationChain = chains.find(c=>c.name !== sourceName);
+    //  $("#destinationChain").val(destinationChain.name);
+    //}
+
+    let id = 1, nativeList = [], wrappedList = []
+
+    for (const row of getters.source.wrapLockContracts.filter(r => r.pairedChainId == getters.destination.chainId)) {
+      for (const symbol of row.symbols) {
+        nativeList.push({
+          ...row,
+          id,
+          symbol,
+          sourceTokenContract: row.nativeTokenContract,
+          destinationTokenContract: row.pairedWrapTokenContract,
+          native: true
+        })
+
+        id++
+      }
+    }
+
+    nativeList = nativeList.sort((a, b) => (a.symbol > b.symbol ? 1 : -1))
+
+    id = 1000
+
+    for (const row of getters.destination.wrapLockContracts.filter(r => r.pairedChainId == getters.source.chainId)) {
+      for (const symbol of row.symbols) {
+        wrappedList.push({
+          ...row,
+          id,
+          symbol,
+          sourceTokenContract: row.pairedWrapTokenContract,
+          destinationTokenContract: row.nativeTokenContract,
+          native: false
+        })
+
+        id++
+      }
+    }
+
+    wrappedList = wrappedList.sort((a, b) => (a.symbol > b.symbol ? 1 : -1))
+
+    return [...nativeList, ...wrappedList]
+  },
+
+  source(state) {
+    return state.chains.find(c => c.name == state.sourceName)
+  },
+
+  destination(state) {
+    return state.chains.find(c => c.name == state.destinationName)
+  }
+}
diff --git a/store/index.js b/store/index.js
index b21e2f964..6e1c3f578 100755
--- a/store/index.js
+++ b/store/index.js
@@ -72,7 +72,7 @@ export const mutations = {
   setUserOrders: (state, orders) => state.userOrders = orders,
   setUserOrdersLoading: (state, loading) => state.userOrdersLoading = loading,
   setLihgHistoryBlock: (state, block) => state.lihgHistoryBlock = block,
-  setBlockNum: (state, block) => state.blockNum = block,
+  setBlockNum: (state, block) => state.blockNum = block
 }
 
 // Move to notifications module (nee create it)
diff --git a/store/market.js b/store/market.js
index fdd0c82d2..033f6e217 100755
--- a/store/market.js
+++ b/store/market.js
@@ -514,9 +514,8 @@ export const actions = {
   },
 
   async fetchBuy({ state, dispatch, rootState }, trade) {
-    if (!await dispatch('chain/asyncLogin', null, { root: true })) return
-
     const { user, network } = rootState
+
     let amount = null
     let total = null
 
@@ -583,8 +582,6 @@ export const actions = {
   },
 
   async fetchSell({ state, dispatch, rootState }, trade) {
-    if (!await dispatch('chain/asyncLogin', null, { root: true })) return
-
     const { user } = rootState
     const amount = parseFloat(state.amount_sell).toFixed(state.quote_token.symbol.precision)
     let total = null
diff --git a/store/modal.js b/store/modal.js
index e689e5dfe..3b7cdf1bf 100644
--- a/store/modal.js
+++ b/store/modal.js
@@ -11,9 +11,22 @@ export const mutations = {
 }
 
 export const actions = {
-  login({ commit }) {
+  login({ commit }, context) {
     commit('setCurrent', 'login')
     commit('setVisible', true)
+    context && commit('setModalContext', context)
+  },
+
+  addLiquidity({ commit }, context) {
+    commit('setCurrent', 'add-liquidity')
+    commit('setVisible', true)
+    context && commit('setModalContext', context)
+  },
+
+  assets({ commit }, context) {
+    commit('setCurrent', 'assets')
+    commit('setVisible', true)
+    context && commit('setModalContext', context)
   },
 
   buy({ commit }, context) {
@@ -90,5 +103,6 @@ export const actions = {
 
   closeModal({ commit }) {
     commit('setVisible', false)
+    //commit('setModalContext', null)
   }
 }
diff --git a/utils/eosjs.js b/utils/eosjs.js
index ee2c9d5b2..452166ccf 100644
--- a/utils/eosjs.js
+++ b/utils/eosjs.js
@@ -1,5 +1,17 @@
 const MAX_PAGINATION_FETCHES = 5
 
+import { shuffleArray } from './index'
+import { JsonRpc as JsonRpcMultiEnds } from '~/assets/libs/eosjs-jsonrpc'
+
+
+export function getMultyEndRpc(nodes) {
+  shuffleArray(nodes)
+  nodes.sort((a, b) => a.includes('alcor') ? -1 : 1)
+  const rpc = new JsonRpcMultiEnds(nodes, { fetch })
+
+  return rpc
+}
+
 export const fetchAllRows =
   async (rpc, options, indexName = 'id') => {
     const mergedOptions = {
diff --git a/utils/index.js b/utils/index.js
index fdf74447e..f283122e5 100755
--- a/utils/index.js
+++ b/utils/index.js
@@ -17,6 +17,17 @@ export const isToday = (someDate) => {
     someDate.getFullYear() == today.getFullYear()
 }
 
+export const toName = value => {
+  let v = Big.asUintN(64, value), result = ''
+
+  while (v > 0) {
+    const c = v & Big('0xff')
+    result += String.fromCharCode(Number(c.toString()))
+    v >>= 8n
+  }
+  return result
+}
+
 export const nameToUint64 = (name) => {
   const ser = new Serialize.SerialBuffer()
   ser.pushName(name)
diff --git a/yarn.lock b/yarn.lock
index ea2a6a763..af622c005 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4979,10 +4979,10 @@ element-resize-detector@^1.2.1:
   dependencies:
     batch-processor "1.0.0"
 
-element-ui@^2.15.8:
-  version "2.15.9"
-  resolved "https://registry.npmjs.org/element-ui/-/element-ui-2.15.9.tgz"
-  integrity sha512-dx45nQLt4Hn87/Z9eRr3ex6KFZbxlFAwEU3QoW3wA5EsYftvHTyL9Pq7VnXXD7hu1Eiaup2jcs6kp+/VSFmXuA==
+element-ui@^2.15.12:
+  version "2.15.12"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.12.tgz#fdde927a54078b17a85541ff7c0f0dad32488b8e"
+  integrity sha512-Y5FMT2BPOindU2GkDEQ5ZKUVxDawKONRNMh2eL3uBx1FOtvUJ+L6IxXLVsNxq4WnaX/UnVNgWXebl7DobygZMg==
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"