diff --git a/package.json b/package.json
index 15ca867..4e2531b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pontem/liquidswap-widget",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "homepage": "https://github.com/pontem-network/liquidswap-widget#readme",
   "description": "LiquidSwap widget as custom web component",
   "files": [
@@ -49,7 +49,7 @@
   "dependencies": {
     "@metamask/jazzicon": "2.0.0",
     "@pontem/aptos-wallet-adapter": "0.7.2",
-    "@pontem/coins-registry": "2.1.44",
+    "@pontem/coins-registry": "2.1.64",
     "@pontem/liquidswap-sdk": "0.6.1",
     "@tsconfig/recommended": "1.0.2",
     "@types/lodash": "4.14.182",
diff --git a/src/App.ce.vue b/src/App.ce.vue
index 89f1a05..8a6eeb7 100644
--- a/src/App.ce.vue
+++ b/src/App.ce.vue
@@ -22,14 +22,20 @@ const props = defineProps<{
   dataNetwork?: string; // { name?: string; chainId?: string } as JSON
   dataTransaction?: string; // { status: 'pending' | 'success' | 'error' | 'rejected'; hash: string | null } as JSON
 }>();
+
 // initialize stores
 (async () => {
   const tokensStore = useTokensStore();
-  await tokensStore.fetchCoinsList();
   const poolsStore = usePoolsStore();
-  await poolsStore.fetchPoolsList();
-  useStore();
+
+  await Promise.all([
+    tokensStore.fetchCoinsData(),
+    poolsStore.fetchPoolsList()
+  ]).catch((err) => {
+    console.error('Error during stores initialization', err);
+  })
 })();
+
 const mainStore = useStore();
 
 function checkNativeWallet (){
diff --git a/src/Swap/SwapContainer.vue b/src/Swap/SwapContainer.vue
index 997ac9d..f63b2cb 100644
--- a/src/Swap/SwapContainer.vue
+++ b/src/Swap/SwapContainer.vue
@@ -124,6 +124,7 @@
           <img class="full_version__img" src="./../assets/expand.svg" />
           <span>liquidswap.com</span>
         </a>
+        <span class="full_version__app">version {{ versionApp }}</span>
       </div>
     </div>
     <TxSettingsDialog
@@ -133,7 +134,6 @@
       :to-token="swapStore.toCurrency.token"
       :from-token="swapStore.fromCurrency.token"
     />
-    <PriceImpactWarningDialog />
   </div>
 </template>
 
@@ -177,6 +177,7 @@ const swapStore = useSwapStore();
 
 const requireUpdateInput = ref<TokenFiledType>();
 
+const versionApp = computed(() => process.env.VERSION);
 const { account } = mainStore;
 const version = computed(() => swapStore.version);
 const { fromCurrency, toCurrency } = storeToRefs(swapStore);
diff --git a/src/Swap/SwapInput.vue b/src/Swap/SwapInput.vue
index febd38e..378f017 100644
--- a/src/Swap/SwapInput.vue
+++ b/src/Swap/SwapInput.vue
@@ -58,7 +58,7 @@
             </template>
             <ToolTip
                 v-else
-                position="bottom-left"
+                position="bottom-right"
                 :tooltipText="'This token is not registered in your account. Before swap, you must register this token.'"
                 class="token-tooltip"
             >
@@ -76,6 +76,8 @@
     ref="dialog"
     v-model:actionToken="state.token"
     v-model:secondaryToken="secondaryToken.token"
+    :mode="mode"
+    :view="'select-token'"
   />
   <UnverifiedTokenDialog ref="cautionAlert" />
 </template>
diff --git a/src/Swap/styles/inputLabelTemplate.scss b/src/Swap/styles/inputLabelTemplate.scss
index 5dc4724..b962910 100644
--- a/src/Swap/styles/inputLabelTemplate.scss
+++ b/src/Swap/styles/inputLabelTemplate.scss
@@ -1,58 +1,60 @@
-.input-label {
-  display: flex;
-  flex-direction: row;
-
-  padding: 0 1rem 1rem;
-  font-size: 15px;
-  height: 38px;
-
-  &__right {
-    margin-left: auto;
-  }
-
-  &__both {
+.swap__container {
+  .input-label {
     display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
+    flex-direction: row;
 
-  &__text_secondary {
-    color: var(--text-color-secondary);
-    font-weight: 700;
+    padding: 0 1rem 1rem;
     font-size: 15px;
-  }
+    height: 38px;
 
-  &__text_loaded {
-    opacity: 0;
-    animation: fade 0.75s forwards;
-  }
+    &__right {
+      margin-left: auto;
+    }
 
-  &__tooltip-title {
-    color: var(--text-color);
-    cursor: pointer;
-  }
+    &__both {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
 
-  @keyframes fade {
-    0% {
+    &__text_secondary {
+      color: var(--ls-text-color-secondary);
+      font-weight: 700;
+      font-size: 15px;
+    }
+
+    &__text_loaded {
       opacity: 0;
+      animation: fade 0.75s forwards;
     }
-    100% {
-      opacity: 1;
+
+    &__tooltip-title {
+      color: var(--ls-text-color);
+      cursor: pointer;
+    }
+
+    @keyframes fade {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
     }
   }
-}
 
-.input-label__tooltip .p-tooltip-text {
-  width: 270px;
-  background-color: #03031c !important;
-  font-size: 13px !important;
-  border-radius: 12px !important;
-  padding: 16px;
-}
+  .input-label__tooltip .p-tooltip-text {
+    width: 270px;
+    background-color: #03031c !important;
+    font-size: 13px !important;
+    border-radius: 12px !important;
+    padding: 16px;
+  }
 
-.-green {
-  color: var(--green-500);
+  .-green {
+    color: var(--ls-green-500);
+  }
+  .-red {
+    color: var(--ls-red-500);
+  }
 }
-.-red {
-  color: var(--red-500);
-}
\ No newline at end of file
diff --git a/src/Swap/styles/swapContainer.scss b/src/Swap/styles/swapContainer.scss
index 407b82e..7efe77a 100644
--- a/src/Swap/styles/swapContainer.scss
+++ b/src/Swap/styles/swapContainer.scss
@@ -1,54 +1,216 @@
-.curve-warning {
-  .p-inline-message-icon {
-    display: none;
-  }
-}
-.btn-config {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  width: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .config-icon {
-    display: block;
-    width: 100%;
-    transition: 0.25s;
-    stroke: var(--text-color);
-
-    @media screen and (max-width: 768px) {
-      width: 20px;
-      height: 20px;
+.swap__container {
+  max-width: 480px;
+  flex-direction: column;
+
+  .curve-warning {
+    .p-inline-message-icon {
+      display: none;
     }
   }
 
-  &:hover {
+  .btn-config {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     .config-icon {
-      stroke: var(--primary-color);
+      display: block;
+      width: 100%;
+      transition: 0.25s;
+      stroke: var(--ls-text-color);
+
+      @media screen and (max-width: 768px) {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    &:hover {
+      .config-icon {
+        stroke: var(--ls-primary-color);
+      }
     }
   }
-}
 
-.container {
-  max-width: 480px;
-  flex-direction: column;
-}
+  .swap-container,
+  .carousel-container {
+    max-width: 480px;
+    border-radius: 24px;
+    min-height: 200px;
+    color: white;
+    background: var(--ls-surface-card);
+    box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
+    rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
+    margin-bottom: 20px;
+  }
 
-.swap-container,
-.carousel-container {
-  max-width: 480px;
-  border-radius: 24px;
-  min-height: 200px;
-  color: white;
-  background: var(--surface-card);
-  box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
-  rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
-  margin-bottom: 20px;
+  .carousel-heading {
+    font-size: 20px;
+    font-weight: 500;
+  }
+  .carousel-header {
+    padding: 40px 50px 0px 50px;
+  }
+  .carousel-close-container {
+    position: relative;
+  }
+  .carousel-close {
+    position: absolute;
+    right: -40px;
+    top: -30px;
+    background: none;
+    border: none;
+    width: 2.62rem;
+    height: 2.62rem;
+    margin: 0.18rem;
+    color: #d4c4ed;
+    &:hover {
+      background: none;
+      border: none;
+      color: white;
+      background: #24243a;
+      border-radius: 50%;
+    }
+  }
+
+  .swap,
+  .carousel {
+    &__header {
+      padding: 1rem 1.25rem 0.5rem;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > div:last-child {
+        margin-left: auto;
+      }
+
+      .slippage-input {
+        text-decoration: underline;
+        text-decoration-style: dotted;
+      }
+    }
+
+    &__anchor {
+      height: 1px;
+      max-width: 1px;
+      margin-left: 120px;
+    }
+
+    &__row {
+      padding: 0 8px 8px;
+
+      &--no-padding {
+        padding: 0;
+      }
+
+      &--extra-padding {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+    }
+
+    &__button {
+      width: 100%;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 0;
+      height: 54px;
+      font-size: 1.1rem;
+      font-weight: 500;
+      background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
+      z-index: 0!important;
+
+      &_warning {
+        background: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
+      }
+
+      &_alert {
+        background: linear-gradient(89.82deg, #d75050 0.08%, #c62828 99.85%);
+      }
+
+      transition: all .25s ease-in-out;
+
+      &:enabled:hover {
+        background: linear-gradient(90deg, #8d6ad5, #6f42ca);
+        color: white;
+      }
+    }
+
+    &__toggle {
+      position: absolute;
+      padding: 4px;
+      border-radius: 12px;
+      height: 32px;
+      width: 32px;
+      margin-top: -18px;
+      margin-bottom: -18px;
+      left: calc(50% - 16px);
+      background-color: #24243a;
+      border: 6px solid var(--ls-surface-card);
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      i {
+        font-size: 12px;
+        color: var(--ls-surface-400);
+      }
+    }
+  }
+
+  .full_version {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 24px;
+    padding-bottom: 8px;
+    font-size: 13px;
+    line-height: 18px;
+    letter-spacing: -0.5px;
+
+    &__header {
+      color: white;
+      opacity: 0.8;
+      margin: 0 0 8px;
+    }
+
+    &__description {
+      color: #9594AA;
+      padding: 0 60px;
+      margin: 0;
+      text-align: center;
+    }
+
+    &__link {
+      margin-top: 15px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #D4C4ED;
+      font-weight: 800;
+
+      img {
+        margin-right: 10px;
+      }
+    }
+
+    &__app {
+      color: #9594AA;
+    }
+  }
 }
 
-.container .swap-container-wallet {
+.swap__container .swap-container-wallet {
   @media (max-width: 400px) {
     background: transparent;
     position: relative;
@@ -92,166 +254,3 @@
     }
   }
 }
-
-.carousel-heading {
-  font-size: 20px;
-  font-weight: 500;
-}
-.carousel-header {
-  padding: 40px 50px 0px 50px;
-}
-.carousel-close-container {
-  position: relative;
-}
-.carousel-close {
-  position: absolute;
-  right: -40px;
-  top: -30px;
-  background: none;
-  border: none;
-  width: 2.62rem;
-  height: 2.62rem;
-  margin: 0.18rem;
-  color: #d4c4ed;
-  &:hover {
-    background: none;
-    border: none;
-    color: white;
-    background: #24243a;
-    border-radius: 50%;
-  }
-}
-
-.swap,
-.carousel {
-  &__header {
-    padding: 1rem 1.25rem 0.5rem;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    & > div:last-child {
-      margin-left: auto;
-    }
-
-    .slippage-input {
-      text-decoration: underline;
-      text-decoration-style: dotted;
-    }
-  }
-
-  &__anchor {
-    height: 1px;
-    max-width: 1px;
-    margin-left: 120px;
-  }
-
-  &__row {
-    padding: 0 8px 8px;
-
-    &--no-padding {
-      padding: 0;
-    }
-
-    &--extra-padding {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-  }
-
-  &__button {
-    width: 100%;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    height: 54px;
-    font-size: 1.1rem;
-    font-weight: 500;
-    background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
-    z-index: 0!important;
-
-    &_warning {
-      background: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
-    }
-
-    &_alert {
-      background: linear-gradient(89.82deg, #d75050 0.08%, #c62828 99.85%);
-    }
-
-    transition: all .25s ease-in-out;
-
-    &:enabled:hover {
-      background: linear-gradient(90deg, #8d6ad5, #6f42ca);
-      color: white;
-    }
-  }
-
-  &__toggle {
-    position: absolute;
-    padding: 4px;
-    border-radius: 12px;
-    height: 32px;
-    width: 32px;
-    margin-top: -18px;
-    margin-bottom: -18px;
-    left: calc(50% - 16px);
-    background-color: #24243a;
-    border: 6px solid var(--surface-card);
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    i {
-      font-size: 12px;
-      color: var(--surface-400);
-    }
-  }
-}
-
-.full_version {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-top: 24px;
-  padding-bottom: 8px;
-
-  &__header {
-    font-size: 13px;
-    letter-spacing: -0.5px;
-    line-height: 15px;
-    color: white;
-    opacity: 0.8;
-    margin: 0 0 8px;
-  }
-
-  &__description {
-    color: #9594AA;
-    font-size: 13px;
-    line-height: 18px;
-    letter-spacing: -0.5px;
-    padding: 0 60px;
-    margin: 0;
-    text-align: center;
-  }
-
-  &__link {
-    margin-top: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #D4C4ED;
-    font-weight: 800;
-    font-size: 13px;
-    line-height: 15px;
-    letter-spacing: -0.5px;
-
-    img {
-      margin-right: 10px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/Swap/styles/swapInfo.scss b/src/Swap/styles/swapInfo.scss
index 2190f79..df68088 100644
--- a/src/Swap/styles/swapInfo.scss
+++ b/src/Swap/styles/swapInfo.scss
@@ -1,118 +1,120 @@
-.swap-info__info {
-  margin: 8px 0 8px;
+.swap__container {
+  .swap-info__info {
+    margin: 8px 0 8px;
 
-  .list__item {
-    &:not(:last-child) {
-      margin-bottom: 8px;
+    .list__item {
+      &:not(:last-child) {
+        margin-bottom: 8px;
+      }
     }
   }
-}
 
-.swap-info {
-  &__price-impact-wrapper {
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 15px;
-    line-height: 18px;
-    padding: 8px;
-    border-radius: 7px;
-    color: white;
-
-    &_success {
-      background-color: var(--accent-success);
-    }
+  .swap-info {
+    &__price-impact-wrapper {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+      font-size: 15px;
+      line-height: 18px;
+      padding: 8px;
+      border-radius: 7px;
+      color: white;
+
+      &_success {
+        background-color: var(--ls-accent-success);
+      }
 
-    &_warning {
-      background-color: var(--accent-warning);
-    }
+      &_warning {
+        background-color: var(--ls-accent-warning);
+      }
 
-    &_alert {
-      background-color: var(--accent-error);
+      &_alert {
+        background-color: var(--ls-accent-error);
+      }
     }
   }
-}
 
-.swap-info-tab {
-  .p-accordion-tab {
-    margin-bottom: 0;
+  .swap-info-tab {
+    .p-accordion-tab {
+      margin-bottom: 0;
+
+      &.p-accordion-tab-active {
+        .p-accordion-header-link {
+          background: #24243a !important;
+        }
+      }
 
-    &.p-accordion-tab-active {
       .p-accordion-header-link {
-        background: #24243a !important;
+        width: 100%;
+        background: transparent !important;
+        border: 0;
+        min-height: 40px;
+        box-shadow: none !important;
+        padding: 0;
+        border-radius: 0;
+
+        &:focus {
+          box-shadow: none !important;
+        }
+
+        .p-accordion-toggle-icon {
+          display: none;
+        }
+      }
+
+      .p-accordion-content {
+        margin-top: 8px;
+        background: transparent !important;
+        padding: 0;
+        border: none;
       }
     }
 
-    .p-accordion-header-link {
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       width: 100%;
-      background: transparent !important;
-      border: 0;
-      min-height: 40px;
-      box-shadow: none !important;
-      padding: 0;
-      border-radius: 0;
-
-      &:focus {
-        box-shadow: none !important;
+      padding: 0 16px;
+
+      span:first-child {
+        font-size: 13px;
+        font-weight: 500 !important;
       }
 
-      .p-accordion-toggle-icon {
-        display: none;
+      span:last-child {
+        padding-right: 5px;
       }
     }
-
-    .p-accordion-content {
-      margin-top: 8px;
-      background: transparent !important;
-      padding: 0;
-      border: none;
+    .p-accordion-header-action {
+      display: flex;
+      &:hover {
+        cursor: pointer;
+      }
     }
   }
 
-  &__header {
+  .list {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+    flex-direction: column;
+    row-gap: 8px;
     padding: 0 16px;
 
-    span:first-child {
-      font-size: 13px;
-      font-weight: 500 !important;
-    }
-
-    span:last-child {
-      padding-right: 5px;
-    }
-  }
-  .p-accordion-header-action {
-    display: flex;
-    &:hover {
-      cursor: pointer;
+    &--bottom-border {
+      border-bottom: 1px solid #2d2942;
+      padding-bottom: 8px;
     }
-  }
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-  padding: 0 16px;
 
-  &--bottom-border {
-    border-bottom: 1px solid #2d2942;
-    padding-bottom: 8px;
-  }
-
-  &__item {
-    display: flex;
-    font-weight: 400;
-    font-size: 14px;
-    align-items: center;
+    &__item {
+      display: flex;
+      font-weight: 400;
+      font-size: 14px;
+      align-items: center;
 
-    span:last-child {
-      margin-left: auto;
-      text-align: right;
+      span:last-child {
+        margin-left: auto;
+        text-align: right;
+      }
     }
   }
 }
diff --git a/src/Swap/styles/swapInput.scss b/src/Swap/styles/swapInput.scss
index 47c99fc..7aa176c 100644
--- a/src/Swap/styles/swapInput.scss
+++ b/src/Swap/styles/swapInput.scss
@@ -1,139 +1,141 @@
-.swap-input {
-  border: 1px solid transparent;
-  background-color: #31314e;
-  border-radius: 12px;
+.swap__container {
+  .swap-input {
+    border: 1px solid transparent;
+    background-color: #31314e;
+    border-radius: 12px;
 
-  &:hover {
-    border: 1px solid rgba(#e5e4fa, 0.15);
+    &:hover {
+      border: 1px solid rgba(#e5e4fa, 0.15);
+    }
   }
-}
-
-.insufficient-reserves {
-  border: 1px solid rgba(#e74c3c, 1) !important;
-}
-
-.input-label {
-  display: flex;
-  flex-direction: row;
 
-  padding: 0 1rem 1rem;
-  font-size: 15px;
-  height: 38px;
-
-  &__right {
-    margin-left: auto;
+  .insufficient-reserves {
+    border: 1px solid rgba(#e74c3c, 1) !important;
   }
 
-  &__both {
+  .input-label {
     display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
+    flex-direction: row;
 
-  &__text_secondary {
-    color: var(--text-color-secondary);
-    font-weight: 700;
+    padding: 0 1rem 1rem;
     font-size: 15px;
-  }
+    height: 38px;
 
-  &__text_loaded {
-    opacity: 0;
-    animation: fade 0.75s forwards;
-  }
+    &__right {
+      margin-left: auto;
+    }
 
-  &_empty {
-    display: none;
-  }
+    &__both {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
 
-  &__tooltip-title {
-    color: var(--text-color);
-    cursor: pointer;
-  }
+    &__text_secondary {
+      color: var(--ls-text-color-secondary);
+      font-weight: 700;
+      font-size: 15px;
+    }
 
-  @keyframes fade {
-    0% {
+    &__text_loaded {
       opacity: 0;
+      animation: fade 0.75s forwards;
     }
-    100% {
-      opacity: 1;
-    }
-  }
-}
 
-.currency-input {
-  padding: 0 1rem 0 0;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: space-between;
-
-  &__input {
-    position: relative;
-    font-weight: 500;
-    outline: none;
-    border: none;
-    flex: 1 1 auto;
-    font-size: 28px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    appearance: textfield;
-    -webkit-appearance: none;
-  }
-
-  &__select {
-    // .currency-input__select
-    font-size: 16px;
-    height: 3rem;
-    padding: 0 12px;
-    box-shadow: rgb(0 0 0 / 8%) 0 6px 10px;
-    background: linear-gradient(90deg, #016875 0%, #04b78a 100%);
-    border: none;
-    border-radius: 12px;
-    color: white;
+    &_empty {
+      display: none;
+    }
 
-    &:hover {
-      background: linear-gradient(90deg, #015c68 0%, #04a57d 100%);
-      color: white;
+    &__tooltip-title {
+      color: var(--ls-text-color);
+      cursor: pointer;
     }
 
-    span {
-      white-space: nowrap;
-      font-weight: normal !important;
+    @keyframes fade {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
     }
+  }
+
+  .currency-input {
+    padding: 0 1rem 0 0;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
 
-    img {
-      width: 24px;
-      height: 24px;
+    &__input {
+      position: relative;
+      font-weight: 500;
+      outline: none;
+      border: none;
+      flex: 1 1 auto;
+      font-size: 28px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      appearance: textfield;
+      -webkit-appearance: none;
     }
 
-    &.is-selected {
-      color: var(--surface-0) !important;
-      background: #1c1c33 !important;
-      border-color: transparent !important;
+    &__select {
+      // .currency-input__select
+      font-size: 16px;
+      height: 3rem;
+      padding: 0 12px;
+      box-shadow: rgb(0 0 0 / 8%) 0 6px 10px;
+      background: linear-gradient(90deg, #016875 0%, #04b78a 100%);
+      border: none;
+      border-radius: 12px;
+      color: white;
 
       &:hover {
-        background: #16162a !important;
+        background: linear-gradient(90deg, #015c68 0%, #04a57d 100%);
+        color: white;
       }
-    }
 
-    .pi {
-      margin-left: auto;
+      span {
+        white-space: nowrap;
+        font-weight: normal !important;
+      }
+
+      img {
+        width: 24px;
+        height: 24px;
+      }
+
+      &.is-selected {
+        color: var(--ls-surface-0) !important;
+        background: #1c1c33 !important;
+        border-color: transparent !important;
+
+        &:hover {
+          background: #16162a !important;
+        }
+      }
+
+      .pi {
+        margin-left: auto;
+      }
     }
   }
-}
 
-.input-style {
-  background: transparent;
-  padding: 1rem;
+  .input-style {
+    background: transparent;
+    padding: 1rem;
 
-  &:hover {
-    border: none;
-  }
-  &:active {
-    border: none;
-  }
-  &:focus {
-    border: none;
+    &:hover {
+      border: none;
+    }
+    &:active {
+      border: none;
+    }
+    &:focus {
+      border: none;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/pools/dropdown.svg b/src/assets/pools/dropdown.svg
new file mode 100644
index 0000000..5c22ac7
--- /dev/null
+++ b/src/assets/pools/dropdown.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L5 5L10 0L0 0Z" fill="#E5E4FA"/>
+</svg>
diff --git a/src/components/ButtonToken/buttonToken.scss b/src/components/ButtonToken/buttonToken.scss
index b4228ba..c13ade3 100644
--- a/src/components/ButtonToken/buttonToken.scss
+++ b/src/components/ButtonToken/buttonToken.scss
@@ -1,56 +1,58 @@
-.button-token {
-  min-width: 140px;
-  font-size: 15px;
-  height: 3rem;
-  padding: 0 12px;
-  box-shadow: rgb(0 0 0 / 8%) 0 6px 10px;
-  background: linear-gradient(90deg, #016875 0%, #04b78a 100%);
-  border: none;
-  border-radius: 12px!important;
-  color: white;
-
-  &:hover {
-    background: linear-gradient(90deg, #015c68 0%, #04a57d 100%) !important;
+.swap__container {
+  .button-token {
+    min-width: 140px;
+    font-size: 15px;
+    height: 3rem;
+    padding: 0 12px;
+    box-shadow: rgb(0 0 0 / 8%) 0 6px 10px;
+    background: linear-gradient(90deg, #016875 0%, #04b78a 100%)!important;
+    border: none;
+    border-radius: 12px!important;
     color: white;
-  }
 
-  span {
-    white-space: nowrap;
-    font-weight: normal !important;
-  }
+    &:hover {
+      background: linear-gradient(90deg, #015c68 0%, #04a57d 100%) !important;
+      color: white;
+    }
 
-  img, .img {
-    width: 24px;
-    height: 24px;
-    margin-right: 0.5rem;
-  }
+    span {
+      white-space: nowrap;
+      font-weight: normal !important;
+    }
+
+    img, .img {
+      width: 24px;
+      height: 24px;
+      margin-right: 0.5rem;
+    }
 
-  &.is-selected {
-    color: var(--surface-0) !important;
-    background: #1c1c33 !important;
-    border-color: transparent !important;
+    &.is-selected {
+      color: var(--ls-surface-0) !important;
+      background: #1c1c33 !important;
+      border-color: transparent !important;
 
-    &:hover {
-      background: #16162a !important;
+      &:hover {
+        background: #16162a !important;
+      }
     }
   }
-}
 
-.token-title {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: column;
-  margin-right: auto;
+  .token-title {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    margin-right: auto;
 
-  .token-name {
-    font-size: 15px;
-  }
+    .token-name {
+      font-size: 15px;
+    }
 
-  > .token-provider {
-    color: #9594aa;
-    font-weight: 500;
-    font-size: 11px;
-    line-height: 12px;
+    > .token-provider {
+      color: #9594aa;
+      font-weight: 500;
+      font-size: 11px;
+      line-height: 12px;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/ConnectWalletDialog/connectWalletDialog.scss b/src/components/ConnectWalletDialog/connectWalletDialog.scss
index 786f52b..0bbb3e0 100644
--- a/src/components/ConnectWalletDialog/connectWalletDialog.scss
+++ b/src/components/ConnectWalletDialog/connectWalletDialog.scss
@@ -1,141 +1,143 @@
-.text {
-  margin-top: 0;
-  color: rgba(251, 250, 255, 0.6);
-}
+.p-dialog-mask.p-component-overlay{
+  .text {
+    margin-top: 0;
+    color: rgba(251, 250, 255, 0.6);
+  }
 
-.image-link {
-  display: block;
-}
+  .image-link {
+    display: block;
+  }
 
-.help {
-  color: transparentize(#e5e4fa, 0.6);
-  font-size: 13px;
-  font-weight: 500;
+  .help {
+    color: transparentize(#e5e4fa, 0.6);
+    font-size: 13px;
+    font-weight: 500;
 
-  a {
-    color: transparentize(#e5e4fa, 0.2);
+    a {
+      color: transparentize(#e5e4fa, 0.2);
 
-    &:hover {
-      text-decoration: underline;
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
-}
 
-.modal__title {
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: 600;
-  text-align: center;
-  width: 100%;
-  margin: 0 0 0 16px;
-}
-
-.connect__wrapper {
-  .connect {
-    width: min-content;
-    margin: 0;
-    border-radius: 12px;
-    background-color: #28253e;
-    min-height: 64px;
-    font-size: 17px;
+  .modal__title {
+    font-size: 20px;
     line-height: 24px;
     font-weight: 600;
-    animation: fade ease-in-out 0.15s;
-    &:hover {
-      background-color: #33284f;
+    text-align: center;
+    width: 100%;
+    margin: 0 0 0 16px;
+  }
+
+  .connect__wrapper {
+    .connect {
+      width: min-content;
+      margin: 0;
+      border-radius: 12px;
+      background-color: #28253e;
+      min-height: 64px;
+      font-size: 17px;
+      line-height: 24px;
+      font-weight: 600;
+      animation: fade ease-in-out 0.15s;
+      &:hover {
+        background-color: #33284f;
+        border: none;
+        outline: none;
+        color: white;
+      }
+      &:focus {
+        box-shadow: 0 0 0 2px #1c2127, 0 0 0 2px rgb(196 181 253 / 70%) inset,
+        0 1px 2px 0 rgb(0 0 0 / 0%);
+      }
       border: none;
       outline: none;
-      color: white;
-    }
-    &:focus {
-      box-shadow: 0 0 0 2px #1c2127, 0 0 0 2px rgb(196 181 253 / 70%) inset,
-      0 1px 2px 0 rgb(0 0 0 / 0%);
-    }
-    border: none;
-    outline: none;
-    &__description {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-      align-items: center;
-    }
-    &__title {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-    &__caption {
-      font-size: 13px;
-      line-height: 24px;
-      color: #9594aa;
-      font-weight: 400;
-      text-align: left;
-      display: flex;
-      align-items: center;
-    }
-    &__badge {
-      width: 109px;
-    }
-    &__wallet-image {
-      display: flex;
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-    }
-    &__auditor {
-      width: 82px;
-      margin-left: 0.25em;
+      &__description {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        align-items: center;
+      }
+      &__title {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      &__caption {
+        font-size: 13px;
+        line-height: 24px;
+        color: #9594aa;
+        font-weight: 400;
+        text-align: left;
+        display: flex;
+        align-items: center;
+      }
+      &__badge {
+        width: 109px;
+      }
+      &__wallet-image {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+      }
+      &__auditor {
+        width: 82px;
+        margin-left: 0.25em;
+      }
     }
   }
-}
 
-.connect-dialog {
-  align-items: flex-start;
-}
-
-.divider {
-  opacity: 0.15;
-  border-bottom: 1px solid var(--text-color);
-  margin: 0 -24px 24px;
-}
+  .connect-dialog {
+    align-items: flex-start;
+  }
 
-.store__link {
-  display: flex;
-  margin-bottom: 24px;
-}
+  .divider {
+    opacity: 0.15;
+    border-bottom: 1px solid var(--ls-text-color);
+    margin: 0 -24px 24px;
+  }
 
-.wallet-logo {
-  height: 36px;
-  width: auto;
-}
+  .store__link {
+    display: flex;
+    margin-bottom: 24px;
+  }
 
-.chevron {
-  border-radius: 50px;
-  height: 36px;
-  width: 36px;
-  background-color: #3e3e52;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .wallet-logo {
+    height: 36px;
+    width: auto;
+  }
 
-.other-wallets__button:focus {
-  box-shadow: none;
-}
+  .chevron {
+    border-radius: 50px;
+    height: 36px;
+    width: 36px;
+    background-color: #3e3e52;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.block--scrollable {
-  overflow-y: auto;
-  height: 100%;
-  max-height: calc(100vh - 451px);
-}
+  .other-wallets__button:focus {
+    box-shadow: none;
+  }
 
-@keyframes fade {
-  0% {
-    opacity: 0;
-    transform: translate(0, -50%);
+  .block--scrollable {
+    overflow-y: auto;
+    height: 100%;
+    max-height: calc(100vh - 451px);
   }
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
+
+  @keyframes fade {
+    0% {
+      opacity: 0;
+      transform: translate(0, -50%);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/ContractSwitch/contractSwitch.scss b/src/components/ContractSwitch/contractSwitch.scss
index c747f2e..e82e3d5 100644
--- a/src/components/ContractSwitch/contractSwitch.scss
+++ b/src/components/ContractSwitch/contractSwitch.scss
@@ -1,75 +1,77 @@
-.list__pool-version-row {
-  padding: 0 8px;
-  font-size: 15px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  color: #9594aa;
+.swap__container {
+  .list__pool-version-row {
+    padding: 0 8px;
+    font-size: 15px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: #9594aa;
 
-  .version-icon {
-    padding: 0.5rem 0;
-  }
+    .version-icon {
+      padding: 0.5rem 0;
+    }
 
-  .p-selectbutton .p-button {
-  height: 32px;
-  font-weight: 600;
-  font-size: 15px;
-  line-height: 22px;
-  background-color: #24243a;
-  width: 48px;
-  padding: 4px 8px;
-  justify-content: center;
-  border: none;
+    .p-selectbutton .p-button {
+      height: 32px;
+      font-weight: 600;
+      font-size: 15px;
+      line-height: 22px;
+      background-color: #24243a;
+      width: 48px;
+      padding: 4px 8px;
+      justify-content: center;
+      border: none;
 
-    &:hover {
-      color: var(--text-color);
-      border-color: #303046;
-      background: #303046;
-    }
+      &:hover {
+        color: var(--ls-text-color);
+        border-color: #303046;
+        background: #303046;
+      }
 
-    &.p-highlight {
-      color: var(--text-color);
-      background-color: #4a495e;
-      border-color: #4a495e;
-    }
+      &.p-highlight {
+        color: var(--ls-text-color);
+        background-color: #4a495e;
+        border-color: #4a495e;
+      }
 
-    &:not(.p-disabled):not(.p-highlight):hover {
-      background-color: #303046;
+      &:not(.p-disabled):not(.p-highlight):hover {
+        background-color: #303046;
+      }
     }
-  }
 
-  .p-buttonset {
-    .p-button:first-of-type {
-      border-top-left-radius: 8px;
-      border-bottom-left-radius: 8px;
-      margin-right: 2px;
-    }
-    .p-button:last-of-type {
-      border-top-right-radius: 8px;
-      border-bottom-right-radius: 8px;
+    .p-buttonset {
+      .p-button:first-of-type {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+        margin-right: 2px;
+      }
+      .p-button:last-of-type {
+        border-top-right-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
     }
   }
-}
 
-.info-circle {
-  display: block;
-  color: #9594aa;
-  cursor: pointer;
-  margin-left: 4px;
-  padding-top: 2px;
-
-  &_mobile {
-    display: none;
+  .info-circle {
+    display: block;
     color: #9594aa;
     cursor: pointer;
     margin-left: 4px;
+    padding-top: 2px;
 
-    @media screen and (max-width: 768px) {
-      display: block;
+    &_mobile {
+      display: none;
+      color: #9594aa;
+      cursor: pointer;
+      margin-left: 4px;
+
+      @media screen and (max-width: 768px) {
+        display: block;
+      }
     }
-  }
 
-  @media screen and (max-width: 768px) {
-    display: none;
+    @media screen and (max-width: 768px) {
+      display: none;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/CopyNotification/copyNotification.scss b/src/components/CopyNotification/copyNotification.scss
index 7670161..d3cbae2 100644
--- a/src/components/CopyNotification/copyNotification.scss
+++ b/src/components/CopyNotification/copyNotification.scss
@@ -22,18 +22,3 @@
     margin: 0;
   }
 }
-
-@keyframes in-out {
-  0% {
-    opacity: 0;
-  }
-  25% {
-    opacity: 1;
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
\ No newline at end of file
diff --git a/src/components/CurveInfo/curveInfo.scss b/src/components/CurveInfo/curveInfo.scss
index 1cf9875..03d0df4 100644
--- a/src/components/CurveInfo/curveInfo.scss
+++ b/src/components/CurveInfo/curveInfo.scss
@@ -1,47 +1,49 @@
-.label {
-  display: flex;
-  align-items: center;
-}
-
-.label-text {
-  font-family: var(--font-family);
-  font-style: normal;
-  font-weight: 500;
-  font-size: 15px;
-  line-height: 120%;
-  color: #9594aa;
-}
+.swap__container {
+  .label {
+    display: flex;
+    align-items: center;
+  }
 
-.curve-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0px 8px;
+  .label-text {
+    font-family: var(--ls-font-family);
+    font-style: normal;
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 120%;
+    color: #9594aa;
+  }
 
-  &__curve {
+  .curve-container {
     display: flex;
     flex-direction: row;
-    justify-content: end;
-    align-items: center;
-    width: 50%;
-    cursor: pointer;
-    transition: all 0.5s linear;
+    justify-content: space-between;
+    padding: 0px 8px;
 
-    &.busy {
-      cursor: default;
-      opacity: 0.5;
-    }
+    &__curve {
+      display: flex;
+      flex-direction: row;
+      justify-content: end;
+      align-items: center;
+      width: 50%;
+      cursor: pointer;
+      transition: all 0.5s linear;
 
-    p {
-      @extend .label-text;
-      margin-block: 0rem;
-      margin-left: 5px;
-      margin-right: 6px;
-      color: #ffffff;
-    }
+      &.busy {
+        cursor: default;
+        opacity: 0.5;
+      }
+
+      p {
+        @extend .label-text;
+        margin-block: 0rem;
+        margin-left: 5px;
+        margin-right: 6px;
+        color: #ffffff;
+      }
 
-    i {
-      opacity: 0.5;
+      i {
+        opacity: 0.5;
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/CurveSwitch/curveSwitch.scss b/src/components/CurveSwitch/curveSwitch.scss
index 9217c81..858ac39 100644
--- a/src/components/CurveSwitch/curveSwitch.scss
+++ b/src/components/CurveSwitch/curveSwitch.scss
@@ -1,49 +1,51 @@
-.stable-switch-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 8px;
-  gap: 4px;
-  background: #272742;
-  border-radius: 57px;
-  width: 100%;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-    border-radius: 20px;
-  }
-
-  &__switch {
+.swap__container {
+  .stable-switch-container {
     display: flex;
     flex-direction: row;
-    justify-content: center;
     align-items: center;
-    padding: 4px 10px;
-    gap: 8px;
+    padding: 8px;
+    gap: 4px;
+    background: #272742;
+    border-radius: 57px;
     width: 100%;
-    cursor: pointer;
-    transition: all 0.5s linear;
-    &.busy {
-      cursor: default;
-      opacity: 0.5;
-    }
 
-    p {
-      font-family: var(--font-family);
-      font-style: normal;
-      font-weight: 500;
-      font-size: 15px;
-      line-height: 120%;
-      color: #ffffff;
-      margin-block: 0rem;
+    @media (max-width: 768px) {
+      flex-direction: column;
+      border-radius: 20px;
     }
-    i {
-      opacity: 0.5;
+
+    &__switch {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 4px 10px;
+      gap: 8px;
+      width: 100%;
+      cursor: pointer;
+      transition: all 0.5s linear;
+      &.busy {
+        cursor: default;
+        opacity: 0.5;
+      }
+
+      p {
+        font-family: var(--ls-font-family);
+        font-style: normal;
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 120%;
+        color: #ffffff;
+        margin-block: 0rem;
+      }
+      i {
+        opacity: 0.5;
+      }
     }
   }
-}
 
-.isSelected {
-  background: #4d4d70;
-  border-radius: 57px;
-}
\ No newline at end of file
+  .isSelected {
+    background: #4d4d70;
+    border-radius: 57px;
+  }
+}
diff --git a/src/components/DialogHeader/dialogHeader.scss b/src/components/DialogHeader/dialogHeader.scss
index 8a0a360..df74c03 100644
--- a/src/components/DialogHeader/dialogHeader.scss
+++ b/src/components/DialogHeader/dialogHeader.scss
@@ -1,9 +1,11 @@
-.dialog-step__title--position {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-}
+.p-dialog-mask.p-component-overlay {
+  .dialog-step__title--position {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+  }
 
-.dialog-step__back-btn-placeholder {
-  width: 22px;
-}
\ No newline at end of file
+  .dialog-step__back-btn-placeholder {
+    width: 22px;
+  }
+}
diff --git a/src/components/FrontrunOverlay/frontRunOverlay.scss b/src/components/FrontrunOverlay/frontRunOverlay.scss
index 6728102..2e76a1f 100644
--- a/src/components/FrontrunOverlay/frontRunOverlay.scss
+++ b/src/components/FrontrunOverlay/frontRunOverlay.scss
@@ -1,98 +1,100 @@
-.frontrun-settings-overlay {
-  max-width: 300px;
-  margin-top: 16px;
+.p-dialog-mask.p-component-overlay {
+  .frontrun-settings-overlay {
+    max-width: 300px;
+    margin-top: 16px;
 
-  &__title {
-    display: flex;
-    flex-direction: row;
-    grid-gap: 12px;
-    font-size: 1rem;
-    color: var(--surface-200);
-    font-weight: 500;
-  }
+    &__title {
+      display: flex;
+      flex-direction: row;
+      grid-gap: 12px;
+      font-size: 1rem;
+      color: var(--ls-surface-200);
+      font-weight: 500;
+    }
 
-  &__divider {
-    border-bottom: 1px solid #303035;
-    margin: 0 -20px;
-  }
+    &__divider {
+      border-bottom: 1px solid #303035;
+      margin: 0 -20px;
+    }
 
-  &__content {
-    display: flex;
-    padding-top: 12px;
-  }
+    &__content {
+      display: flex;
+      padding-top: 12px;
+    }
 
-  &__label {
-    display: flex;
-    flex-direction: column;
-    width: 80%;
-    margin-left: 8px;
-  }
+    &__label {
+      display: flex;
+      flex-direction: column;
+      width: 80%;
+      margin-left: 8px;
+    }
 
-  &__label-title {
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 24px;
-    margin: 0;
-  }
+    &__label-title {
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 24px;
+      margin: 0;
+    }
 
-  &__label-subtitle {
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 24px;
-    margin-top: 0;
-    color: var(--text-color-secondary);
-  }
+    &__label-subtitle {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 24px;
+      margin-top: 0;
+      color: var(--ls-text-color-secondary);
+    }
 
-  &__footer-label {
-    display: block;
-    width: fit-content;
-    margin-left: auto;
-    margin-top: 1rem;
-    text-align: right;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 24px;
-    color: #946bec;
-    cursor: pointer;
+    &__footer-label {
+      display: block;
+      width: fit-content;
+      margin-left: auto;
+      margin-top: 1rem;
+      text-align: right;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 24px;
+      color: #946bec;
+      cursor: pointer;
+    }
   }
-}
 
-.p-inputswitch.p-inputswitch-checked {
-  &.p-inputswitch-checked {
-    .p-inputswitch-slider {
-      background-color: var(--primary-color);
-    }
+  .p-inputswitch.p-inputswitch-checked {
+    &.p-inputswitch-checked {
+      .p-inputswitch-slider {
+        background-color: var(--ls-primary-color);
+      }
 
-    &:not(.p-disabled) {
-      &:hover {
-        .p-inputswitch-slider {
-          background-color: var(--primary-color);
+      &:not(.p-disabled) {
+        &:hover {
+          .p-inputswitch-slider {
+            background-color: var(--ls-primary-color);
+          }
         }
       }
     }
   }
-}
 
-.links-wrapper {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 1rem;
+  .links-wrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
 
-  &__link {
-    display: block;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 24px;
-    color: #946bec;
-    cursor: pointer;
+    &__link {
+      display: block;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      color: #946bec;
+      cursor: pointer;
 
-    &_gray {
-      color: var(--text-color-secondary);
+      &_gray {
+        color: var(--ls-text-color-secondary);
+      }
     }
   }
-}
 
-.svg-gray-filter {
-  filter: invert(61%) sepia(16%) saturate(320%) hue-rotate(204deg)
-  brightness(96%) contrast(87%);
-}
\ No newline at end of file
+  .svg-gray-filter {
+    filter: invert(61%) sepia(16%) saturate(320%) hue-rotate(204deg)
+    brightness(96%) contrast(87%);
+  }
+}
diff --git a/src/components/ImportTokenDialog/importTokenDialog.scss b/src/components/ImportTokenDialog/importTokenDialog.scss
index 2e5fc35..e59a072 100644
--- a/src/components/ImportTokenDialog/importTokenDialog.scss
+++ b/src/components/ImportTokenDialog/importTokenDialog.scss
@@ -1,91 +1,93 @@
-.footer-buttons {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  grid-gap: 16px;
-
-  .circular-button {
-    border-radius: 100px;
-  }
-}
-.token-info {
-  display: flex;
-  align-items: center;
-  padding: 18px;
-  border-radius: 12px;
-  background: #28253e;
-  flex-direction: column;
+.p-dialog-mask.p-component-overlay {
+  .footer-buttons {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    grid-gap: 16px;
 
-  img,
-  .img {
-    width: 64px;
-    height: 64px;
-    margin-bottom: 1rem;
+    .circular-button {
+      border-radius: 100px;
+    }
   }
-
-  &-content {
+  .token-info {
     display: flex;
-    flex-direction: row;
-    grid-gap: 8px;
+    align-items: center;
+    padding: 18px;
+    border-radius: 12px;
+    background: #28253e;
+    flex-direction: column;
 
-    & > span:first-child {
-      font-weight: 700;
-      font-size: 17px;
-      line-height: 24px;
-      letter-spacing: 0.1px;
+    img,
+    .img {
+      width: 64px;
+      height: 64px;
+      margin-bottom: 1rem;
     }
 
-    & > span:last-child {
+    &-content {
       display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      color: #d4c4ed;
-      font-size: 17px;
+      flex-direction: row;
+      grid-gap: 8px;
+
+      & > span:first-child {
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 24px;
+        letter-spacing: 0.1px;
+      }
+
+      & > span:last-child {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: #d4c4ed;
+        font-size: 17px;
+        line-height: 24px;
+        font-weight: 400;
+      }
+    }
+    &-address {
+      font-weight: 700;
+      font-size: 13px;
       line-height: 24px;
-      font-weight: 400;
+      letter-spacing: 0.1px;
+      text-align: center;
+      word-wrap: break-word;
+      width: 95%;
     }
   }
-  &-address {
-    font-weight: 700;
-    font-size: 13px;
-    line-height: 24px;
-    letter-spacing: 0.1px;
-    text-align: center;
-    word-wrap: break-word;
-    width: 95%;
-  }
-}
 
-.warning-container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  img {
-    width: 64px;
-    height: 64px;
-    margin-bottom: 2rem;
-  }
-  &-content {
+  .warning-container {
     display: flex;
-    flex-direction: column;
-    grid-gap: 8px;
     align-items: center;
-
-    & > span:first-child {
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 24px;
-      letter-spacing: 0.1px;
+    flex-direction: column;
+    img {
+      width: 64px;
+      height: 64px;
+      margin-bottom: 2rem;
     }
-
-    & > span:last-child {
+    &-content {
       display: flex;
+      flex-direction: column;
+      grid-gap: 8px;
       align-items: center;
-      text-align: center;
-      font-size: 15px;
-      line-height: 24px;
-      font-weight: 400;
-      color: #e5e4fa;
+
+      & > span:first-child {
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.1px;
+      }
+
+      & > span:last-child {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        font-size: 15px;
+        line-height: 24px;
+        font-weight: 400;
+        color: #e5e4fa;
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/InputToggle/inputToggle.scss b/src/components/InputToggle/inputToggle.scss
index d4f8176..74336bd 100644
--- a/src/components/InputToggle/inputToggle.scss
+++ b/src/components/InputToggle/inputToggle.scss
@@ -1,43 +1,45 @@
-.swap-toggle {
-  position: relative;
-  padding: 4px;
-  border-radius: 12px;
-  height: 32px;
-  width: 32px;
-  margin-top: -18px;
-  margin-bottom: -18px;
-  left: calc(50% - 16px);
-  top: -5px;
-  background-color: #24243a;
-  border: 5px solid var(--surface-card);
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  i {
-    position: absolute;
-    font-size: 12px;
-    color: var(--surface-400);
-    transition: all 0.3s ease;
-    opacity: 1;
-  }
-  img {
-    position: absolute;
-    margin-top: 12px;
-    opacity: 0;
-    transition: all 0.3s ease;
-  }
-  &:hover {
-    background-color: rgba(110, 66, 202, 1);
-    border-color: rgba(110, 66, 202, 1);
+.swap__container {
+  .swap-toggle {
+    position: relative;
+    padding: 4px;
+    border-radius: 12px;
+    height: 32px;
+    width: 32px;
+    margin-top: -18px;
+    margin-bottom: -18px;
+    left: calc(50% - 16px);
+    top: -5px;
+    background-color: #24243a;
+    border: 5px solid var(--ls-surface-card);
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     i {
-      opacity: 0;
-      bottom: 999px;
-      margin-bottom: 12px;
+      position: absolute;
+      font-size: 12px;
+      color: var(--ls-surface-400);
+      transition: all 0.3s ease;
+      opacity: 1;
     }
     img {
-      margin-top: 0px;
-      opacity: 1;
+      position: absolute;
+      margin-top: 12px;
+      opacity: 0;
+      transition: all 0.3s ease;
+    }
+    &:hover {
+      background-color: rgba(110, 66, 202, 1);
+      border-color: rgba(110, 66, 202, 1);
+      i {
+        opacity: 0;
+        bottom: 999px;
+        margin-bottom: 12px;
+      }
+      img {
+        margin-top: 0px;
+        opacity: 1;
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/InvalidNetworkDialog/invalidNetworkDialog.scss b/src/components/InvalidNetworkDialog/invalidNetworkDialog.scss
index 1cc1991..32c74cc 100644
--- a/src/components/InvalidNetworkDialog/invalidNetworkDialog.scss
+++ b/src/components/InvalidNetworkDialog/invalidNetworkDialog.scss
@@ -1,23 +1,25 @@
-.send-button {
-  width: 100%;
-  margin-top: 10px;
-}
+.p-dialog-mask.p-component-overlay {
+  .send-button {
+    width: 100%;
+    margin-top: 10px;
+  }
 
-.step {
-  ::v-deep(.p-blockui) {
-    opacity: 0;
+  .step {
+    ::v-deep(.p-blockui) {
+      opacity: 0;
+    }
   }
-}
 
-.p-dialog-content {
-  p {
-    margin-top: 0;
-    line-height: 1.4;
+  .p-dialog-content {
+    p {
+      margin-top: 0;
+      line-height: 1.4;
+    }
   }
-}
 
-.account-exit {
-  font-weight: 500;
-  font-size: 17px;
-  padding: 15px 24px;
-}
\ No newline at end of file
+  .account-exit {
+    font-weight: 500;
+    font-size: 17px;
+    padding: 15px 24px;
+  }
+}
diff --git a/src/components/LSNumberInput/lsNumberInputAutoNumeric.scss b/src/components/LSNumberInput/lsNumberInputAutoNumeric.scss
index 2ff447c..23403cc 100644
--- a/src/components/LSNumberInput/lsNumberInputAutoNumeric.scss
+++ b/src/components/LSNumberInput/lsNumberInputAutoNumeric.scss
@@ -1,14 +1,16 @@
-.number-input {
-  position: relative;
-  font-weight: 500;
-  outline: none;
-  border: none;
-  flex: 1 1 auto;
-  font-size: 28px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  -webkit-appearance: none;
+.swap__container {
+  .number-input {
+    position: relative;
+    font-weight: 500;
+    outline: none;
+    border: none;
+    flex: 1 1 auto;
+    font-size: 28px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -moz-appearance: textfield;
+    appearance: textfield;
+    -webkit-appearance: none;
+  }
 }
diff --git a/src/components/PriceImpactWarningDialog/PriceImpactWarningDialog.scss b/src/components/PriceImpactWarningDialog/PriceImpactWarningDialog.scss
index 7fccaf4..e21cff4 100644
--- a/src/components/PriceImpactWarningDialog/PriceImpactWarningDialog.scss
+++ b/src/components/PriceImpactWarningDialog/PriceImpactWarningDialog.scss
@@ -1,72 +1,73 @@
-.price-impact {
-  .p-dialog-header {
-    display: flex;
-    justify-content: flex-end;
+.p-dialog-mask.p-component-overlay {
+  .price-impact {
+    .p-dialog-header {
+      display: flex;
+      justify-content: flex-end;
+    }
   }
-}
 
-.price-impact-dialog {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  .price-impact-dialog {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
-  .warning-img {
-    margin-bottom: 38px;
-  }
+    .warning-img {
+      margin-bottom: 38px;
+    }
 
-  .title {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 28px;
-    text-align: center;
-    color: #ffffff;
-    margin-top: 0;
-  }
+    .title {
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      text-align: center;
+      color: #ffffff;
+      margin-top: 0;
+    }
 
-  .description {
-    font-family: 'Roboto';
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 24px;
-    letter-spacing: 0.44px;
-    color: var(--text-color);
-    margin-top: 0;
-    text-align: center;
-  }
+    .description {
+      font-family: 'Roboto';
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 24px;
+      letter-spacing: 0.44px;
+      color: var(--ls-text-color);
+      margin-top: 0;
+      text-align: center;
+    }
 
-  .button-wrapper {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-  }
+    .button-wrapper {
+      display: flex;
+      justify-content: space-around;
+      width: 100%;
+    }
 
-  .button {
-    display: flex;
-    justify-content: center;
-    width: 170px;
+    .button {
+      display: flex;
+      justify-content: center;
+      width: 170px;
 
-    &_warning {
-      background-color: #ee5d0c;
+      &_warning {
+        background-color: #ee5d0c;
 
-      &:hover {
-        background-color: #ed5c0a !important;
+        &:hover {
+          background-color: #ed5c0a !important;
+        }
       }
-    }
-    &_alert {
-      background-color: var(--accent-error);
+      &_alert {
+        background-color: var(--ls-accent-error);
 
-      &:hover {
-        background-color: #d75050 !important;
+        &:hover {
+          background-color: #d75050 !important;
+        }
       }
-    }
 
-    @media screen and (max-width:768px) {
-      width: 150px;
+      @media screen and (max-width:768px) {
+        width: 150px;
+      }
     }
   }
 }
-
diff --git a/src/components/ReservesContainer/reservesContainer.scss b/src/components/ReservesContainer/reservesContainer.scss
index b09f53b..2b93811 100644
--- a/src/components/ReservesContainer/reservesContainer.scss
+++ b/src/components/ReservesContainer/reservesContainer.scss
@@ -1,81 +1,83 @@
-.reserves-container {
-  max-width: 480px;
-  min-height: 50px;
-  border-radius: 24px;
-  color: white;
-  margin-bottom: 16px;
+.swap__container {
+  .reserves-container {
+    max-width: 480px;
+    min-height: 50px;
+    border-radius: 24px;
+    color: white;
+    margin-bottom: 16px;
 
-  .insufficient-reserves {
-    color: #e74c3c;
+    .insufficient-reserves {
+      color: #e74c3c;
+    }
   }
-}
-.reserves-heading {
-  font-size: 15px;
-  font-weight: 600;
-}
-.reserves-header {
-  padding: 11px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  border-radius: 0;
-  border: none;
-
-  span:first-child {
+  .reserves-heading {
     font-size: 15px;
-    font-weight: 700 !important;
+    font-weight: 600;
   }
+  .reserves-header {
+    padding: 11px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-radius: 0;
+    border: none;
 
-  span:last-child {
-    padding: 0 5px;
-  }
-}
-.reserves-content {
-  padding: 0 16px 3px 16px;
-  border-bottom: 1px solid #2d2942;
-}
+    span:first-child {
+      font-size: 15px;
+      font-weight: 700 !important;
+    }
 
-.reserves-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 8px 0;
-  font-size: 15px;
-  font-weight: 400;
-}
+    span:last-child {
+      padding: 0 5px;
+    }
+  }
+  .reserves-content {
+    padding: 0 16px 3px 16px;
+    border-bottom: 1px solid #2d2942;
+  }
 
-.swap-tokens {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
+  .reserves-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 8px 0;
+    font-size: 15px;
+    font-weight: 400;
+  }
 
-  &__token {
+  .swap-tokens {
     display: flex;
-    padding: 16px;
-    background: #24243a;
-    border-radius: 16px;
-    align-items: center;
+    width: 100%;
+    flex-direction: column;
 
-    &:first-child {
-      margin-bottom: 8px;
+    &__token {
+      display: flex;
+      padding: 16px;
+      background: #24243a;
+      border-radius: 16px;
+      align-items: center;
+
+      &:first-child {
+        margin-bottom: 8px;
+      }
     }
-  }
 
-  &__symbol {
-    display: flex;
-    align-items: center;
+    &__symbol {
+      display: flex;
+      align-items: center;
 
-    font-size: 14px;
-    letter-spacing: 0.05em;
-    color: var(--text-color);
-    font-weight: 400;
+      font-size: 14px;
+      letter-spacing: 0.05em;
+      color: var(--ls-text-color);
+      font-weight: 400;
 
-    img,
-    .img {
-      width: 24px;
-      height: 24px;
-      margin-right: 8px;
+      img,
+      .img {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/SelectTokenDialog/Coins/coinList.scss b/src/components/SelectTokenDialog/Coins/coinList.scss
index d9abf38..303ac5e 100644
--- a/src/components/SelectTokenDialog/Coins/coinList.scss
+++ b/src/components/SelectTokenDialog/Coins/coinList.scss
@@ -1,129 +1,131 @@
-.coins-list {
-  position: relative;
-  max-height: calc(100% - 80px);
-  overflow: hidden;
-  height: fill-available;
-}
+.p-dialog-mask.p-component-overlay {
+  .coins-list {
+    position: relative;
+    max-height: calc(100% - 80px);
+    overflow: hidden;
+    height: fill-available;
+  }
+
+  .address-import {
+    background: var(--ls-surface-card);
+    width: 100%;
+    display: flex;
+    padding: 16px 0;
+    flex-direction: column;
+
+    &__input {
+      min-width: 100%;
+      display: flex;
+      border-radius: 16px;
+      background: transparent;
+      border: 1px solid #36354b;
+    }
 
-.address-import {
-  background: var(--surface-card);
-  width: 100%;
-  display: flex;
-  padding: 16px 0;
-  flex-direction: column;
+    &__label {
+      font-weight: 500;
+      font-size: 15px;
+      line-height: 34px;
+      letter-spacing: 0.44px;
+      color: #e5e4fa;
+    }
+  }
 
-  &__input {
-    min-width: 100%;
+  .coin-wrap {
     display: flex;
+    justify-content: flex-start;
+    align-items: center;
     border-radius: 16px;
-    background: transparent;
-    border: 1px solid #36354b;
-  }
+    background: #28253e;
+    padding: 12px;
 
-  &__label {
-    font-weight: 500;
-    font-size: 15px;
-    line-height: 34px;
-    letter-spacing: 0.44px;
-    color: #e5e4fa;
-  }
-}
+    &.-nobg {
+      background: transparent;
+    }
+    .img {
+      width: 32px;
+      height: 32px;
+      margin-right: 12px;
+    }
+    .coin-wrap__labels {
+      display: block;
+      margin-right: auto;
 
-.coin-wrap {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  border-radius: 16px;
-  background: #28253e;
-  padding: 12px;
+      .coin-symbol {
+        margin: 0 0 1px;
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 21px;
+        letter-spacing: 0.03em;
+        color: #e5e4fa;
+      }
 
-  &.-nobg {
-    background: transparent;
-  }
-  .img {
-    width: 32px;
-    height: 32px;
-    margin-right: 12px;
+      .coin-name {
+        margin: 0;
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 18px;
+        letter-spacing: -0.0008em;
+        color: #e5e4fa;
+        opacity: 0.6;
+      }
+    }
+
+    .coin-import {
+      border-radius: 70px;
+    }
   }
-  .coin-wrap__labels {
-    display: block;
-    margin-right: auto;
 
-    .coin-symbol {
-      margin: 0 0 1px;
+  .no-imported-coins {
+    height: calc(100% - 90px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .title {
+      margin: 0;
       font-weight: 500;
-      font-size: 15px;
-      line-height: 21px;
-      letter-spacing: 0.03em;
+      font-size: 20px;
+      line-height: 28px;
+      letter-spacing: 0.15px;
       color: #e5e4fa;
     }
-
-    .coin-name {
-      margin: 0;
+    .description {
+      min-height: 60px;
       font-weight: 400;
-      font-size: 13px;
-      line-height: 18px;
-      letter-spacing: -0.0008em;
-      color: #e5e4fa;
-      opacity: 0.6;
+      font-size: 15px;
+      line-height: 24px;
+      text-align: center;
+      letter-spacing: 0.44px;
+      color: #77768c;
     }
   }
 
-  .coin-import {
-    border-radius: 70px;
-  }
-}
-
-.no-imported-coins {
-  height: calc(100% - 90px);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  .title {
-    margin: 0;
+  .dialog-step__divider {
     font-weight: 500;
     font-size: 20px;
     line-height: 28px;
+    display: flex;
+    align-items: center;
     letter-spacing: 0.15px;
     color: #e5e4fa;
   }
-  .description {
-    min-height: 60px;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 24px;
-    text-align: center;
-    letter-spacing: 0.44px;
-    color: #77768c;
-  }
-}
 
-.dialog-step__divider {
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 28px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.15px;
-  color: #e5e4fa;
-}
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 95px;
+  }
 
-::-webkit-scrollbar {
-  width: 6px;
-  height: 95px;
-}
+  ::-webkit-scrollbar-thumb {
+    background-color: #e5e4fa30;
+    opacity: 0.3;
+    border-radius: 40px;
+  }
 
-::-webkit-scrollbar-thumb {
-  background-color: #e5e4fa30;
-  opacity: 0.3;
-  border-radius: 40px;
+  .imported-coins {
+    position: relative;
+    max-height: calc(100% - 75px);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
 }
-
-.imported-coins {
-  position: relative;
-  max-height: calc(100% - 75px);
-  overflow-x: hidden;
-  overflow-y: auto;
-}
\ No newline at end of file
diff --git a/src/components/SelectTokenDialog/SelectTokenDialog.vue b/src/components/SelectTokenDialog/SelectTokenDialog.vue
index f5a145c..517ae84 100644
--- a/src/components/SelectTokenDialog/SelectTokenDialog.vue
+++ b/src/components/SelectTokenDialog/SelectTokenDialog.vue
@@ -12,10 +12,9 @@
       v-if="view === 'root'"
       v-model:actionToken="localActionToken"
       v-model:secondaryToken="localSecondaryToken"
-      :field="props.field"
       class="stepped-dialog__item"
-      @back="onBack"
       @navigate="onNavigate"
+      @back="onBack"
       @close="onClose"
     />
     <ManagePresets
@@ -34,16 +33,24 @@ import { ref, computed } from 'vue';
 import PDialog from 'primevue/dialog';
 import ManagePresets from './ManagePresets.vue';
 
-
 interface IProps {
   actionToken?: string;
   secondaryToken?: string;
-  field?: 'to' | 'from' | 'none';
+  view: 'select-token' | 'manage-presets';
+  mode: 'from' | 'to';
 }
 
-const emits = defineEmits(['update:actionToken', 'update:secondaryToken']);
+const emits = defineEmits([
+  'update:actionToken',
+  'update:secondaryToken',
+  'navigate',
+  'cancel',
+]);
+
 const props = defineProps<IProps>();
 
+const mode = computed(() => props.mode);
+
 const display = ref(false);
 const view = ref<'root' | 'mange-presets'>('root');
 const history = ref<string[]>([]);
diff --git a/src/components/SelectTokenDialog/TokenList.vue b/src/components/SelectTokenDialog/TokenList.vue
index fdc706e..faf550d 100644
--- a/src/components/SelectTokenDialog/TokenList.vue
+++ b/src/components/SelectTokenDialog/TokenList.vue
@@ -1,14 +1,53 @@
 <template>
   <div class="dialog-step">
-    <DialogHeader title="Select a Token" @close="onClose" />
     <div class="search">
       <InputText
-        v-model.trim="search"
-        spellcheck="false"
-        class="search__input"
-        placeholder="Put name or address"
+          v-model.trim="search"
+          data-tid="token-list-search-input"
+          spellcheck="false"
+          class="search__input"
+          placeholder="Search name or paste address"
+          autofocus
       />
     </div>
+    <div class="filter-buttons">
+      <PButton
+          class="filter-buttons__item p-button p-button-secondary justify-content-center"
+          :class="{ 'filter-buttons__item_selected': currentFilter === 'top' }"
+          @click="selectFilter('top')"
+      > Top
+      </PButton>
+      <PButton
+          class="filter-buttons__item p-button p-button-secondary justify-content-center"
+          :class="{ 'filter-buttons__item_selected': currentFilter === 'native' }"
+          @click="selectFilter('native')"
+      > Native
+      </PButton>
+      <PButton
+          class="filter-buttons__item p-button p-button-secondary justify-content-center"
+          :class="{
+          'filter-buttons__item_selected': currentFilter === 'bridged',
+        }"
+          @click="selectFilter('bridged')"
+      > Bridged
+      </PButton>
+    </div>
+    <template v-if="address">
+      <div class="divider" />
+      <div class="tvl-sort">
+        <span class="tvl-sort__title">Token</span>
+        <div class="tvl-sort__metric" @click="onClickBalance">
+          Balance
+          <img
+              class="tvl-sort__img"
+              :class="isBalanceSortedDesc ? '' : 'tvl-sort__img_selected'"
+              width="12"
+              src="@/assets/pools/dropdown.svg"
+          />
+        </div>
+      </div>
+    </template>
+    <div class="divider" />
     <div class="dialog-step__divider" />
     <div class="dialog-step__content">
       <div class="content-container with-search">
@@ -18,36 +57,52 @@
         <template v-if="!searchLoading">
           <ul v-if="tokenList_ && tokenList_.length" class="token-list">
             <li
-              v-for="item in tokenList_"
-              :key="item.token.type"
-              class="token-list-item"
-              :class="{ 'is-selected': item.selected }"
-              @click="item.command"
+                v-for="item in tokenList_"
+                :key="item.token.type"
+                class="token-list-item"
+                :class="{ 'is-selected': item.selected }"
+                @click="item.command"
             >
               <div class="token-list-item__icon">
                 <TokenIcon
-                  :logo="item.token.logo"
-                  :type="item.token.type"
-                  size="32"
+                    :logo="item.token.logo"
+                    :type="item.token.type"
+                    size="32"
                 />
               </div>
               <div class="token-list-item__content">
                 <div class="token-list-item__symbol flex">
                   <TextHighlight
-                    :text="item.token.symbol"
-                    :regexp="searchRegexp"
+                      :text="item.token.symbol"
+                      :regexp="searchRegexp"
                   /><token-alert :type="item.token.type" />
                 </div>
                 <div class="token-list-item__title">
                   <TextHighlight
-                    :text="item.token.title"
-                    :regexp="searchRegexp"
+                      :text="item.token.title"
+                      :regexp="searchRegexp"
                   />
+                  <div class="token-list-item__state">
+                    <span
+                        v-if="isDefaultToken(item.token.type)"
+                        class="token-list-item__state_verified"
+                    >
+                      Verified
+                    </span>
+                    <span v-else class="token-list-item__state_unverified">
+                      Unverified
+                    </span>
+                  </div>
                 </div>
               </div>
+              <span class="token-list-item__balance">{{
+                  balanceInUsd2Label(item.token.balanceInUsd)
+                }}</span>
             </li>
           </ul>
-          <p v-else-if="isLoadingTokensList" class="text-center">Loading...</p>
+          <p v-else-if="isLoadingTokensList" class="text-center">
+            Loading...
+          </p>
           <div v-else-if="importTokenPreview" class="import-coin-wrap">
             <TokenIcon
                 :logo="importTokenPreview?.logo"
@@ -65,77 +120,115 @@
               </p>
             </div>
             <div class="coin-wrap__actions">
-              <PButton class="coin-import" @click="importToken">Import</PButton>
+              <PButton class="coin-import" @click="importToken">
+                Import
+              </PButton>
             </div>
           </div>
-          <p v-else class="text-center">Tokens not found</p>
+          <p v-else class="text-center">
+            Tokens not found
+          </p>
         </template>
       </div>
     </div>
-    <div class="dialog-step__footer">
-      <div class="dialog-step__divider mb-3" />
-      <p-button
-          class="p-button-secondary justify-content-center w-full"
-          @click="onManageCoinLists"
-      >
-        Manage Token Lists
-      </p-button>
-    </div>
   </div>
   <ImportTokenDialog
-    ref="importDialog"
-    v-model:token="importTokenType"
-    :has-back="true"
+      ref="importDialog"
+      v-model:token="importTokenType"
+      :has-back="true"
   />
 </template>
 
 <script setup lang="ts">
-import { computed, ComputedRef, ref, watch, watchEffect } from 'vue';
+import {
+  computed,
+  ComputedRef,
+  onBeforeMount,
+  Ref,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue';
 import escapeRegExp from 'lodash/escapeRegExp';
 import orderBy from 'lodash/orderBy';
-import { useTokensStore } from '@/store';
+import {
+  usePoolsStore, useStore,
+  useTokensStore,
+} from '@/store';
 import { IPersistedTokenExtended } from '@/store/useTokenStore';
-import ProgressSpinner from 'primevue/progressspinner';
-import InputText from 'primevue/inputtext';
-import PButton from 'primevue/button';
-
 import { checkAptosType } from '@/utils/utils';
 import { TextHighlight } from '@/components/TextHighlight';
-import { DialogHeader } from '@/components/DialogHeader';
 import { TokenAlert } from '@/components/TokenAlert';
 import { TokenIcon } from '@/components/TokenIcon';
+import PButton from 'primevue/button';
 import { ImportTokenDialog } from '@/components/ImportTokenDialog';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+
+import { useCurrentAccountBalance } from '@/composables/useAccountBalance';
+import { useCurrencyFormat } from '@/composables/useCurrencyFormat';
+import { getTokenPrice, getUSDEquivalent } from '@/composables/useCoinPrice';
+import { getAmountWithDecimal } from '@/composables/useInputServices';
+import { BRIDGES } from '@/constants/tokensList';
+import { getFromCache } from '@/utils/cache';
+
 
 interface IProps {
   actionToken?: string;
   secondaryToken?: string;
   poolId?: string;
-  field?: 'from' | 'to' | 'none';
 }
 
-type TokenInList = {
-  token: IPersistedTokenExtended;
+interface IExtendedTokenInList extends IPersistedTokenExtended {
+  balance?: Ref<number | undefined>;
+  balanceInUsd?: number;
+  tvl?: number;
+  tvlInUsd?: number;
+}
+
+type TTokenInList = {
+  token: IExtendedTokenInList;
   selected: boolean;
   command: (...args: any[]) => void;
 };
+type TTokensBalance = { amount: number | undefined; token: string };
+type TFilterSelector = 'top' | 'native' | 'bridged' | undefined;
 
 const props = defineProps<IProps>();
 const emits = defineEmits([
   'close',
+  'back',
   'navigate',
   'update:actionToken',
   'update:poolId',
 ]);
 
+const poolsStore = usePoolsStore();
+const store = useStore();
+
 // states
-const rawTokenList_ = ref<TokenInList[]>();
-const tokenList_ = ref<TokenInList[]>();
+const rawTokenList_ = ref<TTokenInList[]>();
+const tokenList_ = ref<TTokenInList[]>();
 const isLoadingTokensList = ref<boolean>(false);
 
 const importTokenPreview = ref();
+const importTokenType = computed(() => importTokenPreview.value?.type);
 const importDialog = ref();
 
-const importTokenType = computed(() => importTokenPreview.value?.type);
+// filters and sorting
+const currentFilter = ref<TFilterSelector>();
+const isBalanceSortedDesc = ref(true);
+const isSortedByTvlInUsd = ref(false);
+const isFilteredByConditions = ref(false);
+
+const { account } = useStore();
+const address = computed(() => account.value?.address);
+
+onBeforeMount(() => {
+  if (!address.value) {
+    selectFilter('top');
+  }
+});
 
 function onClose() {
   emits('close');
@@ -143,59 +236,96 @@ function onClose() {
 
 const tokensStore = useTokensStore();
 const search = ref<string>('');
+// TODO: Process search string with address
 const searchLoading = ref(false);
 const searchRegexp = computed(() => {
   return new RegExp(escapeRegExp(search.value), 'gi');
 });
 
 const rawTokenList = async () => {
-  let tokens: ComputedRef<IPersistedTokenExtended>[] = [];
+  let tokens: ComputedRef<IExtendedTokenInList>[] = [];
+
   const tokens_ = Object.values(tokensStore.tokens).map(async (token) => {
     return computed(() => tokensStore.getToken(token.type));
   });
+
   tokens = await Promise.all(tokens_) as unknown as ComputedRef<IPersistedTokenExtended>[];
 
   const alreadySelected: string[] = [];
-  const list: TokenInList[] = tokens
-    .map((tokenRef): TokenInList => {
-      const token = tokenRef.value;
-      let selected = false;
-      if (
+
+  // avoid displaying balances when the wallet is disconnected
+  if (address.value) {
+    const cacheKey = `${address.value}-tokens-balance`;
+
+    //Cache to avoid loading every time you open the sidebar
+    const balances = await getFromCache(cacheKey, fetchBalanceForTokens, {
+      time: 60000,
+      args: [tokens],
+    });
+
+    // Calculate balance in USD for each token
+    balances.forEach((item: TTokensBalance) => {
+      if (!item) return;
+      const { amount, token } = item;
+
+      const tokenRef = tokens.find((e) => e.value.type === token);
+      if (!tokenRef || amount === undefined) return;
+
+      _fetchAndSetBalanceInUsd(tokenRef, amount);
+    });
+  } else {
+    //Reset the balances when wallet is disconnected
+    tokens.forEach((tokenRef) => {
+      if (tokenRef.value.balanceInUsd) {
+        tokenRef.value.balanceInUsd = 0;
+      }
+    });
+  }
+
+  const mappedTokensList = tokens.map((tokenRef: any) => {
+    let selected = false;
+    if (
         selectedTokens.value.length &&
         tokenRef &&
-        selectedTokens.value.includes(token.type)
-      ) {
-        selected = true;
-      }
+        selectedTokens.value.includes(tokenRef.value.type)
+    ) {
+      selected = true;
+    }
 
-      return {
-        token,
-        selected,
-        command: () => {
-          if (!selected) {
-            selectToken(token.type);
-            onClose();
-          }
-        },
-      };
-    })
-    .filter((item: TokenInList) => {
-      if (!item) {
-        return false;
-      }
-      const identifier = `${item.token.type}-${item.token.alias}`;
+    _calculateTvl(tokenRef);
 
-      if (item.selected) {
-        alreadySelected.push(identifier);
-      }
+    return {
+      token: tokenRef,
+      selected,
+      command: () => {
+        if (!selected) {
+          selectToken(tokenRef.value.type);
+          onClose();
+        }
+      },
+    };
+  });
 
-      return true;
-    }) as TokenInList[];
+  const filteredList = mappedTokensList.filter((item) => {
+    if (!item) {
+      return false;
+    }
+    /**
+     * item.token is reactive here
+     */
+    const identifier = `${item.token.value.type}-${item.token.value.symbol}`;
+
+    if (item.selected) {
+      alreadySelected.push(identifier);
+    }
+
+    return true;
+  }) as TTokenInList[];
 
   return orderBy(
-    list,
-    ['selected', 'token.caution', 'token.order', 'token.alias'],
-    ['desc', 'asc', 'asc', 'asc'],
+      filteredList,
+      ['selected', 'token.caution', 'token.order', 'token.alias'],
+      ['desc', 'asc', 'asc', 'asc'],
   );
 };
 
@@ -203,25 +333,27 @@ const selectedTokens = computed(() => {
   return [props.secondaryToken, props.actionToken].filter(Boolean);
 });
 
-function searchToken(resource: string) {
-  searchLoading.value = true;
-  const request = tokensStore.searchToken(resource, false);
-  request?.then(() => (searchLoading.value = false));
-}
+const importToken = () => {
+  importDialog.value.show();
+};
 
-function filterTokenList(list: TokenInList[]) {
+/**
+ * Filter through the search bar
+ * @param list
+ */
+function filterTokenList(list: TTokenInList[]) {
   if (!Array.isArray(list) || list.length == 0) return [];
   const searchString = search.value.toLowerCase();
-  return list.filter((item: TokenInList) => {
+  return list.filter((item: TTokenInList) => {
     if (!searchString) {
       return true;
     }
-    const aliasLowerCased = item.token.alias.toLowerCase();
+    const symbolLowerCased = item.token.symbol.toLowerCase();
     const titleLowerCased = item.token.title.toLowerCase();
     if (
-      aliasLowerCased.indexOf(searchString) !== -1 ||
-      titleLowerCased.indexOf(searchString) !== -1 ||
-      item.token.type.toLowerCase() === searchString
+        symbolLowerCased.indexOf(searchString) !== -1 ||
+        titleLowerCased.indexOf(searchString) !== -1 ||
+        item.token.symbol.toLowerCase() === searchString
     ) {
       return true;
     }
@@ -232,26 +364,124 @@ function filterTokenList(list: TokenInList[]) {
 
 function selectToken(token: string) {
   emits('update:actionToken', token);
+  search.value = '';
 }
 
-const importToken = () => {
-  importDialog.value.show();
-};
+function selectFilter(filter: TFilterSelector) {
+  currentFilter.value =
+      currentFilter.value && currentFilter.value === filter ? undefined : filter;
 
-function onManageCoinLists() {
-  emits('navigate', 'manage-presets');
+  switch (currentFilter.value) {
+    case 'top': {
+      isSortedByTvlInUsd.value = true;
+      isBalanceSortedDesc.value = false;
+      break;
+    }
+    case 'native': {
+      isFilteredByConditions.value = true;
+      isBalanceSortedDesc.value = false;
+      isSortedByTvlInUsd.value = false;
+      break;
+    }
+    case 'bridged': {
+      isFilteredByConditions.value = true;
+      isBalanceSortedDesc.value = false;
+      isSortedByTvlInUsd.value = false;
+      break;
+    }
+    default: {
+      isFilteredByConditions.value = false;
+      isBalanceSortedDesc.value = true;
+      isSortedByTvlInUsd.value = false;
+      break;
+    }
+  }
 }
 
+/**
+ * Descending sorting by balance in usd.
+ * Spread operator is used to avoid side effect in computed.
+ */
+const sortedByBalanceDesc = computed(() => {
+  if (!rawTokenList_.value?.length) return;
+
+  // First we sort by undefined field
+  const undefinedHandled = [...rawTokenList_.value].sort((a, b) =>
+      compByUndefined(a.token.balanceInUsd, b.token.balanceInUsd),
+  );
+
+  // Second we filter by balanceInUsd field
+  if (isBalanceSortedDesc.value) {
+    return undefinedHandled.sort(
+        (a, b) => b.token.balanceInUsd - a.token?.balanceInUsd,
+    );
+  } else {
+    return undefinedHandled.sort(
+        (a, b) => a.token.balanceInUsd - b.token.balanceInUsd,
+    );
+  }
+});
+
+/**
+ * sorting by token attributes
+ * 2. native - not bridge
+ * 3. bridged - bridge token
+ */
+const filteredByConditions = computed(() => {
+  switch (currentFilter.value) {
+    case 'native': {
+      return rawTokenList_.value?.filter(
+          (item) => !isBridged(item.token.source),
+      );
+    }
+    case 'bridged': {
+      return rawTokenList_.value?.filter((item) =>
+          isBridged(item.token.source),
+      );
+    }
+    default: {
+      return rawTokenList_.value;
+    }
+  }
+});
+
+const sortedByTvlInUsd = computed(() => {
+  if (!rawTokenList_.value?.length) return [];
+
+  // First we sort by undefined field
+  const undefinedProcessed = [...rawTokenList_.value].sort((a, b) =>
+      compByUndefined(a.token.tvlInUsd, b.token.tvlInUsd),
+  );
+  return undefinedProcessed.sort((a, b) => b.token.tvlInUsd - a.token.tvlInUsd);
+});
+
+/**
+ * A small state manager for filtering and sorting
+ */
+const sortedTokens = computed(() => {
+  if (isBalanceSortedDesc.value) {
+    return sortedByBalanceDesc.value;
+  } else if (isSortedByTvlInUsd.value) {
+    return sortedByTvlInUsd.value;
+  } else if (isFilteredByConditions.value) {
+    return filteredByConditions.value;
+  } else {
+    return sortedByBalanceDesc.value;
+  }
+});
+
 // watchers
 watchEffect(async () => {
   isLoadingTokensList.value = true;
+  account.value; //for the address change trigger
   rawTokenList_.value = await rawTokenList();
   isLoadingTokensList.value = false;
 });
 
 watchEffect(async () => {
+  if (isLoadingTokensList.value) return;
   return (tokenList_.value = filterTokenList(
-    rawTokenList_.value as TokenInList[],
+      sortedTokens.value as TTokenInList[],
   ));
 });
 
@@ -263,4 +493,116 @@ watch(search, async (v, _) => {
     searchLoading.value = false;
   }
 });
+
+function balanceInUsd2Label(amount: number | undefined) {
+  return amount ? `${+amount.toFixed(4)} $` : '';
+}
+
+/**
+ * Function of fetching the balance of the token in usd
+ * @param tokenRef
+ * @param amount
+ */
+function _fetchAndSetBalanceInUsd(
+    tokenRef: ComputedRef<IExtendedTokenInList>,
+    amount: number,
+) {
+  const symbol = tokenRef.value.symbol;
+  getTokenPrice(symbol)
+      .then((price) => {
+        if (!price) return;
+        const formattedAmount = useCurrencyFormat(amount, tokenRef.value.type, {
+          useSuffix: false,
+        }).formatted.value;
+
+        tokenRef.value.balanceInUsd = getUSDEquivalent(+formattedAmount, price);
+      })
+      .catch((error: Error) => console.error('TokenList:fetch prices', error));
+}
+
+/**
+ * TVL counting. This is the amount of reserves for the token for each pool.
+ * @param tokenRef
+ */
+function _calculateTvl(tokenRef: ComputedRef<IExtendedTokenInList>) {
+  const tokenType = tokenRef.value.type;
+  let tokenTvl = 0;
+  poolsStore.poolsMapAsArray.forEach((item) => {
+    if (item.coinX === tokenType) {
+      tokenTvl += item.reserveX;
+    }
+    if (item.coinY === tokenType) {
+      tokenTvl += item.reserveY;
+    }
+  });
+
+  tokenRef.value.tvl = tokenTvl;
+
+  getTokenPrice(tokenRef.value.symbol).then((price) => {
+    if (!price) return;
+    const decimalAmount = getAmountWithDecimal(
+        tokenTvl,
+        tokenRef.value.decimals,
+    );
+    const usd = getUSDEquivalent(decimalAmount, price);
+    tokenRef.value.tvlInUsd = usd;
+  });
+}
+
+function isBridged(source: string) {
+  return BRIDGES.includes(source);
+}
+
+function isDefaultToken(type: string) {
+  return tokensStore.isTokenVerified(type);
+}
+
+function onClickBalance() {
+  isBalanceSortedDesc.value = !isBalanceSortedDesc.value;
+  isSortedByTvlInUsd.value = false;
+  isFilteredByConditions.value = false;
+  currentFilter.value = undefined;
+}
+
+/**
+ * Moves objects with the undefined attribute to the end of list
+ * @param a
+ * @param b
+ */
+function compByUndefined(a: number | undefined, b: number | undefined) {
+  const aHas = typeof a !== 'undefined';
+  const bHas = typeof b !== 'undefined';
+  return bHas - aHas || (aHas === true && a - b) || 0;
+}
+
+/**
+ * Small workaround.
+ * Returns a promise with the resolved balance for each token from the list.
+ * important: useCurrentAccountBalance.balance - it is a reactive variable that changes over time
+ * @param tokens
+ */
+async function fetchBalanceForTokens(tokens: any) {
+  return await Promise.all(
+      tokens.map(
+          (
+              tokenRef: ComputedRef<IExtendedTokenInList>,
+          ): Promise<TTokensBalance> => {
+            return new Promise((resolve, _) => {
+              // requesting a balance
+              const amountOfToken = useCurrentAccountBalance(
+                  tokenRef.value.type,
+              ).balance;
+
+              // taking the value from balance after loading
+              setTimeout(() => {
+                return resolve({
+                  amount: amountOfToken.value,
+                  token: tokenRef.value.type,
+                });
+              }, 500);
+            });
+          },
+      ),
+  );
+}
 </script>
diff --git a/src/components/SelectTokenDialog/TokensListItem.vue b/src/components/SelectTokenDialog/TokensListItem.vue
index 40c8c00..3a9063c 100644
--- a/src/components/SelectTokenDialog/TokensListItem.vue
+++ b/src/components/SelectTokenDialog/TokensListItem.vue
@@ -1,70 +1,56 @@
 <template>
-  <div class="preset-list__item">
-    <img :src="preset?.logo" alt="" />
-    <div class="preset-list__item-content">
-      <span>{{ preset.name }}</span>
-      <span
-        >{{ preset.tokens?.length || 0 }} tokens
-        <i
-          class="pi pi-cog"
-          aria-haspopup="true"
-          aria-controls="preset_menu"
-          @click="toggle"
-        />
-        <p-menu id="preset_menu" ref="menu" :model="items" :popup="true" />
-      </span>
-    </div>
-    <p-input-switch
-      v-model="enabled"
-      :disabled="!preset.options?.switchable"
-      class="switch ml-auto"
-    />
+  <div class="tokens-container">
+    <template v-for="token in tokensEntities" :key="token?.type">
+      <ToolTip
+          position="top"
+          :tooltipText="token?.symbol"
+          class="token-icon-tooltip"
+      >
+        <i class="pi pi-info-circle info-circle" />
+      </ToolTip>
+      <TokenIcon
+          class="tokens-container__icon"
+          :class="{
+          'tokens-container__icon_inactive': activeToken !== token?.type,
+        }"
+          :type="token?.type"
+          :logo="token?.logo"
+          @click="handleIconClick(token)"
+      />
+    </template>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed, ref, toRefs } from 'vue';
-import PMenu from 'primevue/menu';
-import PInputSwitch from 'primevue/inputswitch';
+<script setup lang="ts">
+import { computed } from 'vue';
 
+import { TokenIcon } from '../TokenIcon';
+import ToolTip from '@/components/ToolTip/Tooltip.vue';
+import { useTokensStore } from '@/store';
+import { IPersistedTokenExtended } from '@/store/useTokenStore';
 
-interface IProps {
-  preset: {
-    logo: string;
-    name: string;
-    tokens: string[];
-    enabled: boolean;
-    options: {
-      switchable: boolean;
-    };
-  };
-}
-
-const props = defineProps<IProps>();
-const { preset } = toRefs<IProps>(props);
+const tokensStore = useTokensStore();
 
-const enabled = computed({
-  get: () => preset.value.enabled,
-  set(value) {
-    console.debug(value);
+const props = defineProps({
+  tokens: {
+    type: Array<string>,
+    default: () => [],
+  },
+  activeToken: {
+    type: String,
+    required: false,
+    default: () => undefined,
   },
 });
 
-const menu = ref();
-const items = ref([
-  {
-    label: 'View List',
-    command: () => {
-      // TODO: View list action
-    },
-  },
-  {
-    label: 'Remove List',
-    command: () => {
-      // TODO: Remove list action
-    },
-  },
-]);
+const emits = defineEmits(['click:icon']);
+
+const tokensEntities = computed(() => {
+  return props.tokens.map((type) => tokensStore.getToken(type));
+});
 
+function handleIconClick(token?: IPersistedTokenExtended) {
+  emits('click:icon', token);
+}
 </script>
 
diff --git a/src/components/SelectTokenDialog/managePresets.scss b/src/components/SelectTokenDialog/managePresets.scss
index 2b8be9b..e03a9f6 100644
--- a/src/components/SelectTokenDialog/managePresets.scss
+++ b/src/components/SelectTokenDialog/managePresets.scss
@@ -1,226 +1,228 @@
-.manage_presets .switch {
-  &:not(.p-inputswitch-checked) .p-inputswitch-slider {
-    background: #5a5a83;
-  }
-
-  &:not(.p-disabled):hover .p-inputswitch-slider {
-    background: #5a5a83;
-  }
-}
-
-.preset-list {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 12px;
-  margin-top: 1rem;
+.p-dialog-mask.p-component-overlay {
+  .manage_presets .switch {
+    &:not(.p-inputswitch-checked) .p-inputswitch-slider {
+      background: #5a5a83;
+    }
 
-  &__item {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-    border-radius: 12px;
-    background: #28253e;
-
-    img {
-      width: 64px;
-      height: 64px;
-      margin-right: 1rem;
+    &:not(.p-disabled):hover .p-inputswitch-slider {
+      background: #5a5a83;
     }
   }
 
-  &__item-content {
+  .preset-list {
     display: flex;
     flex-direction: column;
-    grid-gap: 3px;
+    grid-gap: 12px;
+    margin-top: 1rem;
 
-    & > span:first-child {
-      font-weight: 700;
-      font-size: 17px;
-      line-height: 24px;
-      letter-spacing: 0.1px;
-      margin-bottom: 6px;
+    &__item {
+      display: flex;
+      align-items: center;
+      padding: 1rem;
+      border-radius: 12px;
+      background: #28253e;
+
+      img {
+        width: 64px;
+        height: 64px;
+        margin-right: 1rem;
+      }
     }
 
-    & > span:last-child {
+    &__item-content {
       display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      color: #d4c4ed;
-      font-size: 0.8125rem;
-      font-weight: 500;
+      flex-direction: column;
+      grid-gap: 3px;
+
+      & > span:first-child {
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 24px;
+        letter-spacing: 0.1px;
+        margin-bottom: 6px;
+      }
 
-      i {
-        margin-left: 8px;
+      & > span:last-child {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: #d4c4ed;
+        font-size: 0.8125rem;
+        font-weight: 500;
+
+        i {
+          margin-left: 8px;
+        }
       }
     }
   }
-}
 
-.pools-list {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 12px;
-
-  .pool-item {
+  .pools-list {
     display: flex;
-    border-radius: 12px;
-    height: 100%;
-    background: #31314f;
-    padding: 12px 16px;
-    align-items: center;
-    position: relative;
     flex-direction: column;
-    &:hover {
-      .pool-item__delete {
-        opacity: 1;
-      }
-    }
+    grid-gap: 12px;
 
-    &__details {
+    .pool-item {
       display: flex;
-      justify-content: space-between;
-      width: 100%;
+      border-radius: 12px;
+      height: 100%;
+      background: #31314f;
+      padding: 12px 16px;
       align-items: center;
-    }
+      position: relative;
+      flex-direction: column;
+      &:hover {
+        .pool-item__delete {
+          opacity: 1;
+        }
+      }
 
-    &__row {
-      p {
-        font-family: var(--font-family);
-        font-style: normal;
-        font-weight: 400;
-        font-size: 13px;
-        line-height: 15px;
+      &__details {
         display: flex;
+        justify-content: space-between;
+        width: 100%;
         align-items: center;
-        text-align: center;
-        letter-spacing: 0.44px;
-        color: #e5e4fa;
-        opacity: 0.6;
       }
-    }
-    &__delete {
-      opacity: 0;
-      position: absolute;
-      padding: 6px;
-      font-size: 12px;
-      width: auto;
-      height: auto;
-      top: -8px;
-      right: -8px;
-      background: #44445b;
-      transition: all 0.25s;
-    }
-
-    &__tokens {
-      display: flex;
-      flex-direction: column;
-      grid-gap: 5px;
-    }
 
-    &__token {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      grid-gap: 12px;
+      &__row {
+        p {
+          font-family: var(--ls-font-family);
+          font-style: normal;
+          font-weight: 400;
+          font-size: 13px;
+          line-height: 15px;
+          display: flex;
+          align-items: center;
+          text-align: center;
+          letter-spacing: 0.44px;
+          color: #e5e4fa;
+          opacity: 0.6;
+        }
+      }
+      &__delete {
+        opacity: 0;
+        position: absolute;
+        padding: 6px;
+        font-size: 12px;
+        width: auto;
+        height: auto;
+        top: -8px;
+        right: -8px;
+        background: #44445b;
+        transition: all 0.25s;
+      }
 
-      img {
-        width: 16px;
-        height: 16px;
+      &__tokens {
+        display: flex;
+        flex-direction: column;
+        grid-gap: 5px;
       }
-    }
 
-    &__token-content {
-      display: flex;
-      align-items: baseline;
-      grid-gap: 10px;
+      &__token {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        grid-gap: 12px;
 
-      span {
-        &:first-child {
-          color: var(--text-color);
-          font-weight: 500;
+        img {
+          width: 16px;
+          height: 16px;
         }
+      }
 
-        &:last-child {
-          font-size: 13px;
-          color: var(--text-color-secondary);
+      &__token-content {
+        display: flex;
+        align-items: baseline;
+        grid-gap: 10px;
+
+        span {
+          &:first-child {
+            color: var(--ls-text-color);
+            font-weight: 500;
+          }
+
+          &:last-child {
+            font-size: 13px;
+            color: var(--ls-text-color-secondary);
+          }
         }
       }
     }
   }
-}
 
-.switch-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 8px;
-  gap: 8px;
-  background: #272742;
-  border-radius: 51px;
-  width: 100%;
-
-  &__switch {
+  .switch-container {
     display: flex;
     flex-direction: row;
-    justify-content: center;
     align-items: center;
-    padding: 8px 32px;
+    padding: 8px;
     gap: 8px;
+    background: #272742;
+    border-radius: 51px;
     width: 100%;
-    cursor: pointer;
-    transition: all 0.25s linear;
 
-    p {
-      font-family: var(--font-family);
-      font-style: normal;
-      font-weight: 500;
-      font-size: 15px;
-      line-height: 120%;
-      color: #ffffff;
-      margin-block: 0rem;
+    &__switch {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 8px 32px;
+      gap: 8px;
+      width: 100%;
+      cursor: pointer;
+      transition: all 0.25s linear;
+
+      p {
+        font-family: var(--ls-font-family);
+        font-style: normal;
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 120%;
+        color: #ffffff;
+        margin-block: 0rem;
+      }
+
+      &.isSelected {
+        background: #4d4d70;
+        border-radius: 51px;
+      }
     }
+  }
 
-    &.isSelected {
-      background: #4d4d70;
-      border-radius: 51px;
+  .address-import {
+    background: var(--ls-surface-card);
+    width: 100%;
+    display: flex;
+    padding: 16px 0;
+
+    &__input {
+      min-width: 100%;
+      display: flex;
+      border-radius: 16px;
+      background: transparent;
+      border: 1px solid #36354b;
     }
   }
-}
 
-.address-import {
-  background: var(--surface-card);
-  width: 100%;
-  display: flex;
-  padding: 16px 0;
+  .coins-info__wrap {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    bottom: 16px;
 
-  &__input {
-    min-width: 100%;
+    justify-content: center;
     display: flex;
-    border-radius: 16px;
-    background: transparent;
-    border: 1px solid #36354b;
-  }
-}
+    align-items: center;
+    color: #d4c4ed;
+    z-index: 10;
 
-.coins-info__wrap {
-  position: fixed;
-  width: 100%;
-  left: 0;
-  bottom: 16px;
-
-  justify-content: center;
-  display: flex;
-  align-items: center;
-  color: #d4c4ed;
-  z-index: 10;
-
-  p {
-    font-style: normal;
-    text-align: center;
-    margin-bottom: 0;
-    font-weight: 400;
-    font-size: 15px;
-    line-height: 24px;
-    letter-spacing: 0.44px;
+    p {
+      font-style: normal;
+      text-align: center;
+      margin-bottom: 0;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 24px;
+      letter-spacing: 0.44px;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/SelectTokenDialog/selectTokenDialog.scss b/src/components/SelectTokenDialog/selectTokenDialog.scss
index 6304ab8..ee4bb11 100644
--- a/src/components/SelectTokenDialog/selectTokenDialog.scss
+++ b/src/components/SelectTokenDialog/selectTokenDialog.scss
@@ -1,227 +1,185 @@
-.search {
-  background: var(--surface-card);
-  left: 0;
-  padding: 10px 0px 20px 0px;
-  margin: 0px -4px;
-  z-index: 10;
-
-  &__input {
-    width: 100%;
-    border-radius: 16px;
-    background: none;
-    border: 1px solid #36354b;
-  }
-}
-
-.content-container {
-  &__loader {
-    margin-top: 50px;
-    position: absolute;
-    width: 100%;
+.p-dialog-mask.p-component-overlay {
+  .search {
+    background: var(--ls-surface-card);
     left: 0;
-    display: flex;
-  }
-}
+    padding: 10px 0px 20px 0px;
+    margin: 0px -4px;
+    z-index: 10;
 
-.select-tokens {
-  .p-dialog-content {
-    margin-bottom: 1rem !important;
+    &__input {
+      width: 100%;
+      border-radius: 16px;
+      background: none;
+      border: 1px solid #36354b;
+    }
   }
 
-  .select-tokens__footer {
-    display: flex !important;
-    justify-content: center !important;
+  .content-container {
+    &__loader {
+      margin-top: 50px;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      display: flex;
+    }
   }
-}
-
-.token-list {
-  list-style: none;
-  padding: 0;
-  margin: 0 -12px;
-}
 
-.list-header {
-  color: var(--text-color-secondary);
-  font-weight: 500;
-  font-size: 13px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin: 8px 0;
-}
-
-.token-list-item {
-  display: flex;
-  flex-direction: row;
-  padding: 12px;
-  border-radius: 16px;
-  grid-gap: 12px;
-  align-items: center;
-  cursor: pointer;
-
-  &__stable-indicator {
-    align-items: flex-start;
-    margin-left: 0.5rem;
-    margin-top: 0.2rem;
-
-    & img {
-      height: 10px;
+  .select-tokens {
+    .p-dialog-content {
+      margin-bottom: 1rem !important;
     }
 
-    & p {
-      margin-block: 0rem !important;
-      font-size: 11px;
-      margin-left: 0.2rem;
-      color: #e5e4fa;
-      opacity: 0.6;
+    .select-tokens__footer {
+      display: flex !important;
+      justify-content: center !important;
     }
   }
 
-  &.is-selected {
-    cursor: auto;
-    opacity: 0.6;
+  .token-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 -12px;
   }
 
-  &:hover:not(.is-selected) {
-    background: #1c1c33;
+  .list-header {
+    color: var(--ls-text-color-secondary);
+    font-weight: 500;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin: 8px 0;
   }
 
-  &__icon {
-    width: 32px;
-    height: 32px;
+  .token-list-item {
+    display: flex;
+    flex-direction: row;
+    padding: 12px;
+    border-radius: 16px;
+    grid-gap: 12px;
+    align-items: center;
+    cursor: pointer;
 
-    img,
-    .img {
-      width: 100%;
-      height: 100%;
+    &__stable-indicator {
+      align-items: flex-start;
+      margin-left: 0.5rem;
+      margin-top: 0.2rem;
+
+      & img {
+        height: 10px;
+      }
+
+      & p {
+        margin-block: 0rem !important;
+        font-size: 11px;
+        margin-left: 0.2rem;
+        color: #e5e4fa;
+        opacity: 0.6;
+      }
     }
-  }
 
-  &__symbol {
-    color: var(--text-color);
-    font-weight: 500;
-  }
+    &.is-selected {
+      cursor: auto;
+      opacity: 0.6;
+    }
 
-  &__title {
-    font-size: 13px;
-    color: transparentize(#e5e4fa, 0.4);
-  }
+    &:hover:not(.is-selected) {
+      background: #1c1c33;
+    }
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    height: 38px;
-    justify-content: space-between;
-  }
+    &__icon {
+      width: 32px;
+      height: 32px;
 
-  &__append {
-    font-size: 13px;
-    display: flex;
-    margin-left: auto;
-    align-items: center;
-    color: transparentize(#e5e4fa, 0.4);
-  }
-}
+      img,
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+    }
 
-.pool__address {
-  font-family: var(--font-family);
-  font-style: normal;
-  font-weight: 500;
-  font-size: 12px;
-  margin-block: 0.2rem;
-  color: #9292a6;
-  opacity: 0.6;
-}
+    &__symbol {
+      color: var(--ls-text-color);
+      font-weight: 500;
+    }
 
-.preset-list__item {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  border-radius: 12px;
-  background: #28253e;
-
-  img {
-    width: 64px;
-    height: 64px;
-    margin-right: 1rem;
-  }
+    &__title {
+      font-size: 13px;
+      color: transparentize(#e5e4fa, 0.4);
+    }
 
-  &-content {
-    display: flex;
-    flex-direction: column;
-    grid-gap: 3px;
-
-    & > span:first-child {
-      font-weight: 700;
-      font-size: 17px;
-      line-height: 24px;
-      letter-spacing: 0.1px;
-      margin-bottom: 6px;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      height: 38px;
+      justify-content: space-between;
     }
 
-    & > span:last-child {
+    &__append {
+      font-size: 13px;
       display: flex;
-      justify-content: flex-start;
+      margin-left: auto;
       align-items: center;
-      color: #d4c4ed;
-      font-size: 0.8125rem;
-      font-weight: 500;
-
-      i {
-        margin-left: 8px;
-        // cursor: pointer;
-      }
+      color: transparentize(#e5e4fa, 0.4);
     }
   }
-}
-
-#preset_menu.p-menu {
-  border-radius: 8px;
-  padding: 8px 0;
-}
-
-#preset_menu.p-menu .p-menuitem-link:not(.p-disabled):hover {
-  background: #4a495e;
-}
 
-.import-coin-wrap {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  border-radius: 16px;
-  background: #28253e;
-  padding: 12px;
-  margin-top: 15px;
-
-  .img {
-    width: 32px;
-    height: 32px;
-    margin-right: 12px;
+  .pool__address {
+    font-family: var(--ls-font-family);
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    margin-block: 0.2rem;
+    color: #9292a6;
+    opacity: 0.6;
   }
-  .coin-wrap__labels {
-    display: block;
-    margin-right: auto;
 
-    .coin-symbol {
-      margin: 0 0 1px;
-      font-weight: 500;
-      font-size: 15px;
-      line-height: 21px;
-      letter-spacing: 0.03em;
-      color: #e5e4fa;
+  .preset-list__item {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 12px;
+    background: #28253e;
+
+    img {
+      width: 64px;
+      height: 64px;
+      margin-right: 1rem;
     }
 
-    .coin-name {
-      margin: 0;
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 18px;
-      letter-spacing: -0.0008em;
-      color: #e5e4fa;
-      opacity: 0.6;
+    &-content {
+      display: flex;
+      flex-direction: column;
+      grid-gap: 3px;
+
+      & > span:first-child {
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 24px;
+        letter-spacing: 0.1px;
+        margin-bottom: 6px;
+      }
+
+      & > span:last-child {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: #d4c4ed;
+        font-size: 0.8125rem;
+        font-weight: 500;
+
+        i {
+          margin-left: 8px;
+        }
+      }
     }
   }
 
-  .coin-import {
-    border-radius: 70px;
+  #preset_menu.p-menu {
+    border-radius: 8px;
+    padding: 8px 0;
+  }
+
+  #preset_menu.p-menu .p-menuitem-link:not(.p-disabled):hover {
+    background: #4a495e;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/SelectTokenDialog/tokenList.scss b/src/components/SelectTokenDialog/tokenList.scss
new file mode 100644
index 0000000..a3de096
--- /dev/null
+++ b/src/components/SelectTokenDialog/tokenList.scss
@@ -0,0 +1,269 @@
+.p-dialog-mask.p-component-overlay {
+  .import-coin-wrap {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    border-radius: 16px;
+    background: #28253e;
+    padding: 12px;
+    margin-top: 15px;
+
+    .img {
+      width: 32px;
+      height: 32px;
+      margin-right: 12px;
+    }
+    .coin-wrap__labels {
+      display: block;
+      margin-right: auto;
+
+      .coin-symbol {
+        margin: 0 0 1px;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 21px;
+        letter-spacing: 0.03em;
+        color: #e5e4fa;
+      }
+
+      .coin-name {
+        margin: 0;
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 18px;
+        letter-spacing: -0.0008em;
+        color: #e5e4fa;
+        opacity: 0.6;
+      }
+    }
+
+    .coin-import {
+      border-radius: 70px;
+    }
+  }
+
+  .search {
+    background: var(--ls-surface-card);
+    left: 0;
+    padding: 0px 0px 20px 0px;
+    margin: 0px -4px;
+    z-index: 10;
+
+    &__input {
+      width: 100%;
+      border-radius: 16px;
+      background: none;
+      border: 1px solid #36354b;
+      margin-top: 4px;
+    }
+  }
+
+  .content-container {
+    &__loader {
+      margin-top: 50px;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      display: flex;
+    }
+  }
+
+  .select-tokens {
+    .p-dialog-content {
+      margin-bottom: 1rem !important;
+    }
+
+    .select-tokens__footer {
+      display: flex !important;
+      justify-content: center !important;
+    }
+  }
+
+  .token-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 -12px;
+  }
+
+  .list-header {
+    color: var(--ls-text-color-secondary);
+    font-weight: 500;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin: 8px 0;
+  }
+
+  .token-list-item {
+    display: flex;
+    flex-direction: row;
+    padding: 12px;
+    border-radius: 16px;
+    grid-gap: 12px;
+    align-items: center;
+    cursor: pointer;
+
+    &__stable-indicator {
+      align-items: flex-start;
+      margin-left: 0.5rem;
+      margin-top: 0.2rem;
+
+      & img {
+        height: 10px;
+      }
+
+      & p {
+        margin-block: 0rem !important;
+        font-size: 11px;
+        margin-left: 0.2rem;
+        color: #e5e4fa;
+        opacity: 0.6;
+      }
+    }
+
+    &.is-selected {
+      cursor: auto;
+      opacity: 0.6;
+    }
+
+    &:hover:not(.is-selected) {
+      background: #1c1c33;
+    }
+
+    &__icon {
+      width: 32px;
+      height: 32px;
+
+      img,
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__symbol {
+      color: var(--ls-text-color);
+      font-weight: 500;
+    }
+
+    &__balance {
+      color: var(--ls-text-color);
+      margin-left: auto;
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 24px;
+      letter-spacing: 0.1px;
+      color: var(--ls-text-color);
+      opacity: 0.6;
+    }
+
+    &__title {
+      font-size: 13px;
+      color: transparentize(#e5e4fa, 0.4);
+    }
+
+    &__state {
+      display: inline;
+      font-weight: 400;
+      font-size: 11px;
+      line-height: 16px;
+      letter-spacing: 0.4px;
+      color: var(--ls-text-color);
+      opacity: 0.6;
+      margin-left: 4px;
+
+      &_verified {
+        border-radius: 3px;
+        padding: 1px 8px;
+        background-color: #28253e;
+      }
+
+      &_unverified {
+        border-radius: 3px;
+        padding: 1px 8px;
+        background-color: rgb(255, 205, 41, 0.3);
+        color: #e5e4fa;
+      }
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      height: 38px;
+      justify-content: space-between;
+    }
+
+    &__append {
+      font-size: 13px;
+      display: flex;
+      margin-left: auto;
+      align-items: center;
+      color: transparentize(#e5e4fa, 0.4);
+    }
+  }
+
+  .pool__address {
+    font-family: var(--ls-font-family);
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    margin-block: 0.2rem;
+    color: #9292a6;
+    opacity: 0.6;
+  }
+
+  .filter-buttons {
+    margin-bottom: 1rem;
+
+    &__item {
+      height: 32px;
+      font-weight: 500;
+      font-size: 15px;
+      line-height: 18px;
+      letter-spacing: 0.44px;
+
+      &:not(:first-child) {
+        margin-left: 0.5rem;
+      }
+
+      &_selected {
+        background-color: var(--ls-primary-color) !important;
+
+        &:hover {
+          background-color: var(--ls-primary-color) !important;
+        }
+      }
+    }
+  }
+
+  .divider {
+    border: 0px;
+    border-top: 2px solid #fbfaff16;
+    border-width: 2px 0px 0px 0px;
+    margin: 0px -1.35rem;
+  }
+
+  .tvl-sort {
+    display: flex;
+    justify-content: space-between;
+    margin: 1rem 0.5rem;
+    color: var(--ls-text-color);
+
+    &__title {
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 18px;
+      letter-spacing: -0.0008em;
+    }
+
+    &__img {
+      &_selected {
+        transform: rotate(180deg);
+      }
+    }
+
+    &__metric {
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/components/Steps/SendTransaction/SubmitTransaction.vue b/src/components/Steps/SendTransaction/SubmitTransaction.vue
index a698133..39f3317 100644
--- a/src/components/Steps/SendTransaction/SubmitTransaction.vue
+++ b/src/components/Steps/SendTransaction/SubmitTransaction.vue
@@ -41,7 +41,7 @@
                   <ToolTip position="left" :tooltipText="'Click to copy'">
                     <PButton
                         icon="pi pi-copy"
-                        class="p-button-sm p-button-rounded p-button-text"
+                        class="p-button-sm p-button-rounded p-button-text submit__copy-button"
                         @click="copyAddress"
                     />
                   </ToolTip>
diff --git a/src/components/Steps/SendTransaction/confirmTransaction.scss b/src/components/Steps/SendTransaction/confirmTransaction.scss
index e7a7794..9836053 100644
--- a/src/components/Steps/SendTransaction/confirmTransaction.scss
+++ b/src/components/Steps/SendTransaction/confirmTransaction.scss
@@ -1,21 +1,23 @@
-.confirmation {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.p-dialog-mask.p-component-overlay {
+  .confirmation {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-  &__title {
-    font-size: 20px;
-    margin-top: 24px;
-    margin-bottom: 0px;
-    color: var(--text-color);
-    font-weight: 800;
-  }
+    &__title {
+      font-size: 20px;
+      margin-top: 24px;
+      margin-bottom: 0px;
+      color: var(--ls-text-color);
+      font-weight: 800;
+    }
 
-  &__help {
-    margin-top: 24px;
-    margin-bottom: 24px;
-    color: var(--text-color);
-    opacity: 0.4;
-    font-size: 13px;
+    &__help {
+      margin-top: 24px;
+      margin-bottom: 24px;
+      color: var(--ls-text-color);
+      opacity: 0.4;
+      font-size: 13px;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Steps/SendTransaction/submitTransaction.scss b/src/components/Steps/SendTransaction/submitTransaction.scss
index fa66725..246526a 100644
--- a/src/components/Steps/SendTransaction/submitTransaction.scss
+++ b/src/components/Steps/SendTransaction/submitTransaction.scss
@@ -1,78 +1,85 @@
-.submit {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.p-dialog-mask.p-component-overlay {
+  .submit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-  &__title {
-    font-size: 20px;
-    margin-top: 24px;
-    margin-bottom: 0px;
-    color: var(--text-color);
-    font-weight: 800;
-  }
+    &__title {
+      font-size: 20px;
+      margin-top: 24px;
+      margin-bottom: 0px;
+      color: var(--ls-text-color);
+      font-weight: 800;
+    }
 
-  &__description {
-    color: var(--text-color);
-    opacity: 0.7;
-    font-size: 17px;
-    margin-bottom: 0;
-    margin-top: 10px;
-  }
+    &__description {
+      color: var(--ls-text-color);
+      opacity: 0.7;
+      font-size: 17px;
+      margin-bottom: 0;
+      margin-top: 10px;
+    }
 
-  &__error {
-    color: #f03f77;
-    text-align: center;
-    line-height: 1.5rem;
-    width: 80%;
-    &::first-letter {
-      text-transform: uppercase;
+    &__error {
+      color: #f03f77;
+      text-align: center;
+      line-height: 1.5rem;
+      width: 80%;
+      &::first-letter {
+        text-transform: uppercase;
+      }
+    }
+
+    &__copy-button {
+      background: transparent;
+      border: none;
     }
   }
-}
 
-.tx-hash {
-  width: 100%;
+  .tx-hash {
+    width: 100%;
 
-  .p-button {
-    width: 20px !important;
-    height: 20px !important;
-    padding: 0px 0px 0px 5px;
-    margin-left: auto;
+    .p-button {
+      width: 20px !important;
+      height: 20px !important;
+      padding: 0px 0px 0px 5px;
+      margin-left: auto;
+    }
   }
-}
 
-.tx-result {
-  width: 100%;
-  border-radius: 16px;
-  border: 1px solid transparentize(#e5e4fa, 0.85);
+  .tx-result {
+    width: 100%;
+    border-radius: 16px;
+    border: 1px solid transparentize(#e5e4fa, 0.85);
 
-  margin-top: 10px;
+    margin-top: 10px;
 
-  .tx-result__row {
-    display: flex;
-  }
+    .tx-result__row {
+      display: flex;
+    }
 
-  .tx-result__row:not(:last-child) {
-    border-bottom: 1px solid transparentize(#e5e4fa, 0.85);
-  }
+    .tx-result__row:not(:last-child) {
+      border-bottom: 1px solid transparentize(#e5e4fa, 0.85);
+    }
 
-  .tx-result__field {
-    padding: 16px 16px 0;
-    width: 100%;
-  }
+    .tx-result__field {
+      padding: 16px 16px 0;
+      width: 100%;
+    }
 
-  .tx-result__label {
-    white-space: nowrap;
-    font-size: 13px;
-    color: transparentize(#e5e4fa, 0.5);
-    font-weight: 500;
-    margin-bottom: 8px;
-  }
+    .tx-result__label {
+      white-space: nowrap;
+      font-size: 13px;
+      color: transparentize(#e5e4fa, 0.5);
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
 
-  .tx-result__value {
-    font-size: 17px;
-    padding-bottom: 16px;
-    color: #e5e4fa;
-    overflow: auto;
+    .tx-result__value {
+      font-size: 17px;
+      padding-bottom: 16px;
+      color: #e5e4fa;
+      overflow: auto;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/SwapConfirm/styles/swapGasSwitch.scss b/src/components/SwapConfirm/styles/swapGasSwitch.scss
index c62b8b3..d4f579e 100644
--- a/src/components/SwapConfirm/styles/swapGasSwitch.scss
+++ b/src/components/SwapConfirm/styles/swapGasSwitch.scss
@@ -1,96 +1,98 @@
-.swap-gas-switch {
-  display: flex;
-  justify-content: space-between;
-}
+.p-dialog-mask.p-component-overlay {
+  .swap-gas-switch {
+    display: flex;
+    justify-content: space-between;
+  }
 
-.gas-option {
-  cursor: pointer;
-  border-radius: 8px;
-  position: relative;
-  max-width: calc(50% - 8px);
-  padding: 1px;
-  z-index: inherit;
-  box-sizing: border-box;
+  .gas-option {
+    cursor: pointer;
+    border-radius: 8px;
+    position: relative;
+    max-width: calc(50% - 8px);
+    padding: 1px;
+    z-index: inherit;
+    box-sizing: border-box;
 
-  $border: 1px;
+    $border: 1px;
 
-  &:before {
-    content: ' ';
-    display: block;
-    position: absolute;
-    top: -$border;
-    right: -$border;
-    bottom: -$border;
-    left: -$border;
-    z-index: 0;
-    border-radius: inherit;
-    transition: 0.25s;
-    background: linear-gradient(to right, #6e42ca, #8d29c1);
-    opacity: 0.6;
-  }
-  &:after {
-    content: ' ';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-    background: #28253e;
-    border-radius: inherit;
-    z-index: 1;
-  }
+    &:before {
+      content: ' ';
+      display: block;
+      position: absolute;
+      top: -$border;
+      right: -$border;
+      bottom: -$border;
+      left: -$border;
+      z-index: 0;
+      border-radius: inherit;
+      transition: 0.25s;
+      background: linear-gradient(to right, #6e42ca, #8d29c1);
+      opacity: 0.6;
+    }
+    &:after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+      width: 100%;
+      background: #28253e;
+      border-radius: inherit;
+      z-index: 1;
+    }
 
-  .option-inner {
-    padding: 1px;
-    position: relative;
-    z-index: 2;
-    padding: 12px;
-    p {
-      margin: 0;
+    .option-inner {
+      padding: 1px;
+      position: relative;
+      z-index: 2;
+      padding: 12px;
+      p {
+        margin: 0;
+      }
     }
-  }
 
-  &.active:before,
-  &:hover:before {
-    opacity: 1;
-  }
+    &.active:before,
+    &:hover:before {
+      opacity: 1;
+    }
 
-  p {
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 15px;
-    color: #e5e4fa;
-    opacity: 0.7;
+    p {
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 15px;
+      color: #e5e4fa;
+      opacity: 0.7;
+    }
   }
-}
 
-.option-top {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-bottom: 4px;
+  .option-top {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 4px;
 
-  span {
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 20px;
+    span {
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 20px;
+    }
   }
-}
 
-.option-marker {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 1.5px solid #d4c4ed;
-  margin-right: 4px;
-  transition: 0.25s;
-}
-
-.gas-option.active {
   .option-marker {
-    background: #ffffff;
-    border: 5px solid #6e42ca;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1.5px solid #d4c4ed;
+    margin-right: 4px;
+    transition: 0.25s;
+  }
+
+  .gas-option.active {
+    .option-marker {
+      background: #ffffff;
+      border: 5px solid #6e42ca;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/SwapConfirm/styles/swapInfo.scss b/src/components/SwapConfirm/styles/swapInfo.scss
index 71266f0..477a15b 100644
--- a/src/components/SwapConfirm/styles/swapInfo.scss
+++ b/src/components/SwapConfirm/styles/swapInfo.scss
@@ -1,52 +1,54 @@
-.swap-rate {
-  padding: 16px 16px;
-  font-size: 15px;
-  font-weight: 400;
-  color: var(--text-color);
-}
+.p-dialog-mask.p-component-overlay {
+  .swap-rate {
+    padding: 16px 16px;
+    font-size: 15px;
+    font-weight: 400;
+    color: var(--ls-text-color);
+  }
 
-.swap-table {
-  border: 1px solid transparentize(#e5e4fa, 0.85);
-  border-radius: 16px;
-
-  &__row {
-    padding: 12px 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    color: var(--text-color);
-    font-size: 17px;
-
-    &.is-small {
-      opacity: 0.7;
-      font-size: 13px;
-      font-weight: 500;
+  .swap-table {
+    border: 1px solid transparentize(#e5e4fa, 0.85);
+    border-radius: 16px;
+
+    &__row {
+      padding: 12px 16px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      color: var(--ls-text-color);
+      font-size: 17px;
+
+      &.is-small {
+        opacity: 0.7;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid transparentize(#e5e4fa, 0.85);
+      }
     }
 
-    &:not(:last-child) {
-      border-bottom: 1px solid transparentize(#e5e4fa, 0.85);
+    &__label {
+      width: 50%;
     }
-  }
 
-  &__label {
-    width: 50%;
+    &__value {
+      margin-left: auto;
+    }
   }
 
-  &__value {
-    margin-left: auto;
-  }
-}
-
-.swap-help {
-  color: transparentize(#e5e4fa, 0.6);
-  font-size: 13px;
-  font-weight: 500;
-  margin-top: 24px;
-  padding: 0 16px;
-  line-height: 18px;
-
-  b {
-    color: #e5e4fa;
+  .swap-help {
+    color: transparentize(#e5e4fa, 0.6);
+    font-size: 13px;
     font-weight: 500;
+    margin-top: 24px;
+    padding: 0 16px;
+    line-height: 18px;
+
+    b {
+      color: #e5e4fa;
+      font-weight: 500;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/SwapConfirm/styles/swapPreview.scss b/src/components/SwapConfirm/styles/swapPreview.scss
index dc88f06..236317d 100644
--- a/src/components/SwapConfirm/styles/swapPreview.scss
+++ b/src/components/SwapConfirm/styles/swapPreview.scss
@@ -1,146 +1,149 @@
-.swap-tokens {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-
-  &__token {
+.p-dialog-mask.p-component-overlay {
+  .swap-tokens {
     display: flex;
-    padding: 16px;
-    background: #24243a;
-    border-radius: 16px;
-    align-items: center;
+    width: 100%;
+    flex-direction: column;
 
-    &:first-child {
-      margin-bottom: 8px;
-    }
-  }
+    &__token {
+      display: flex;
+      padding: 16px;
+      background: #24243a;
+      border-radius: 16px;
+      align-items: center;
 
-  &__symbol {
-    display: flex;
-    align-items: center;
-
-    font-size: 15px;
-    letter-spacing: 0.05em;
-    color: var(--text-color);
-    font-weight: 500;
-
-    img,
-    .img {
-      width: 24px;
-      height: 24px;
-      margin-right: 8px;
+      &:first-child {
+        margin-bottom: 8px;
+      }
     }
-  }
-
-  &__value {
-    color: var(--text-color);
-    font-size: 18px;
-    font-weight: 500;
-    padding-right: 16px;
 
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &__toggle {
-    position: relative;
-    div {
-      position: absolute;
-      padding: 4px;
-      border-radius: 12px;
-      height: 32px;
-      width: 32px;
-      margin-top: -18px;
-      margin-bottom: -18px;
-      left: calc(50% - 16px);
-      background-color: #24243a;
-      border: 6px solid var(--surface-card);
-      z-index: 1;
+    &__symbol {
       display: flex;
       align-items: center;
-      justify-content: center;
 
-      i {
-        font-size: 12px;
-        color: var(--text-color);
-        font-weight: 800;
+      font-size: 15px;
+      letter-spacing: 0.05em;
+      color: var(--ls-text-color);
+      font-weight: 500;
+
+      img,
+      .img {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
       }
     }
-  }
 
-  &__button {
-    width: 100%;
-    border-radius: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    height: 44px;
-    background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
-
-    &:enabled:hover {
-      background: linear-gradient(90deg, #8d6ad5, #6f42ca);
-      color: white;
-    }
+    &__value {
+      color: var(--ls-text-color);
+      font-size: 18px;
+      font-weight: 500;
+      padding-right: 16px;
 
-    span {
-      position: absolute;
-      margin: auto;
-      text-align: center;
-      z-index: 2;
-      opacity: 1;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    .progress {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: 0%;
-      background: #946bec;
-      opacity: 0;
-      transition: all 0.3s ease;
+    &__toggle {
+      position: relative;
+      div {
+        position: absolute;
+        padding: 4px;
+        border-radius: 12px;
+        height: 32px;
+        width: 32px;
+        margin-top: -18px;
+        margin-bottom: -18px;
+        left: calc(50% - 16px);
+        background-color: #24243a;
+        border: 6px solid var(--ls-surface-card);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+          font-size: 12px;
+          color: var(--ls-text-color);
+          font-weight: 800;
+        }
+      }
     }
 
-    &.rate-changed {
-      cursor: none;
-      pointer-events: none;
-    }
+    &__button {
+      width: 100%;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 0;
+      height: 44px;
+      background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
 
-    &.rate-changed .progress {
-      opacity: 1;
-      animation: progress 2s linear 0s;
-    }
+      &:enabled:hover {
+        background: linear-gradient(90deg, #8d6ad5, #6f42ca);
+        color: white;
+      }
 
-    @keyframes progress {
-      0% {
-        width: 0%;
+      span {
+        position: absolute;
+        margin: auto;
+        text-align: center;
+        z-index: 2;
+        opacity: 1;
       }
-      5% {
+
+      .progress {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
         width: 0%;
+        background: #946bec;
+        opacity: 0;
+        transition: all 0.3s ease;
       }
-      10% {
-        width: 15%;
-      }
-      30% {
-        width: 40%;
-      }
-      50% {
-        width: 55%;
-      }
-      80% {
-        width: 100%;
+
+      &.rate-changed {
+        cursor: none;
+        pointer-events: none;
       }
-      98% {
-        width: 100%;
+
+      &.rate-changed .progress {
         opacity: 1;
+        animation: progress 2s linear 0s;
       }
-      100% {
-        width: 100%;
-        opacity: 0;
+
+      @keyframes progress {
+        0% {
+          width: 0%;
+        }
+        5% {
+          width: 0%;
+        }
+        10% {
+          width: 15%;
+        }
+        30% {
+          width: 40%;
+        }
+        50% {
+          width: 55%;
+        }
+        80% {
+          width: 100%;
+        }
+        98% {
+          width: 100%;
+          opacity: 1;
+        }
+        100% {
+          width: 100%;
+          opacity: 0;
+        }
       }
     }
   }
-}
\ No newline at end of file
+
+}
diff --git a/src/components/TokenAlert/TokenAlert.vue b/src/components/TokenAlert/TokenAlert.vue
index 8e3f623..2919b93 100644
--- a/src/components/TokenAlert/TokenAlert.vue
+++ b/src/components/TokenAlert/TokenAlert.vue
@@ -32,6 +32,3 @@ const isNotDefaultCoin = computed<boolean>(
   () => !tokensStore.isTokenVerified(type.value),
 );
 </script>
-<style lang="scss" scoped>
-
-</style>
diff --git a/src/components/TokenAlert/tokenAlert.scss b/src/components/TokenAlert/tokenAlert.scss
index 9f2f5db..5a75a9f 100644
--- a/src/components/TokenAlert/tokenAlert.scss
+++ b/src/components/TokenAlert/tokenAlert.scss
@@ -1,7 +1,9 @@
-img.token-alert {
-  margin-left: 4px;
-  width: 16px !important;
-  height: 16px !important;
-  display: inline-block;
-  margin-bottom: -2px;
-}
\ No newline at end of file
+.swap__container, .p-dialog-mask.p-component-overlay {
+  img.token-alert {
+    margin-left: 4px;
+    width: 16px !important;
+    height: 16px !important;
+    display: inline-block;
+    margin-bottom: -2px;
+  }
+}
diff --git a/src/components/TokenIcon/TokenIcon.vue b/src/components/TokenIcon/TokenIcon.vue
index 358c6dc..379c7cf 100644
--- a/src/components/TokenIcon/TokenIcon.vue
+++ b/src/components/TokenIcon/TokenIcon.vue
@@ -1,13 +1,16 @@
 <template>
   <component
-    :is="props.logo ? 'img' : IdentificationIcon"
-    v-bind="tokenImageProps"
+      :is="props.logo ? 'img' : IdentificationIcon"
+      v-bind="tokenImageProps"
+      @error="handleBrokenImage"
   />
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { ref } from 'vue';
+import { computed } from 'vue-demi';
 import { IdentificationIcon } from '../IdentificationIcon';
+import unknownIcon from '@/assets/tokens/unknown.svg';
 
 interface IProps {
   logo?: string;
@@ -16,10 +19,19 @@ interface IProps {
   class?: string;
 }
 
+const isImageBroken = ref(false);
 const props = defineProps<IProps>();
 const tokenImageProps = computed(() =>
-  props.logo
-    ? { src: props.logo }
-    : { size: props.size, address: props.type, class: props.class },
+    props.logo
+        ? {
+          src: isImageBroken.value ? unknownIcon : props.logo,
+          size: props.size,
+          class: props.class,
+        }
+        : { size: props.size, address: props.type, class: props.class },
 );
+
+const handleBrokenImage = () => {
+  isImageBroken.value = true;
+};
 </script>
diff --git a/src/components/ToolTip/tooltip.scss b/src/components/ToolTip/tooltip.scss
index 5f7f56d..5f984bf 100644
--- a/src/components/ToolTip/tooltip.scss
+++ b/src/components/ToolTip/tooltip.scss
@@ -1,179 +1,181 @@
-$gray: var(--surface-card);
+$gray: var(--ls-surface-card);
 
-[tooltip] {
-  & > * {
-    display: inline-block;
-  }
-  position: relative;
-  &:before,
-  &:after {
-    text-transform: none;
-    font-size: 0.9em;
-    line-height: 1;
-    user-select: none;
-    pointer-events: none;
-    position: absolute;
-    display: none;
-    opacity: 0;
-  }
-  &:before {
-    content: "";
-    border: 5px solid transparent;
-    z-index: 1001;
-  }
-  &:after {
-    content: attr(tooltip);
+.swap__container, .p-dialog-mask.p-component-overlay {
+  [tooltip] {
+    & > * {
+      display: inline-block;
+    }
+    position: relative;
+    &:before,
+    &:after {
+      text-transform: none;
+      font-size: 0.9em;
+      line-height: 1;
+      user-select: none;
+      pointer-events: none;
+      position: absolute;
+      display: none;
+      opacity: 0;
+    }
+    &:before {
+      content: "";
+      border: 5px solid transparent;
+      z-index: 1001;
+    }
+    &:after {
+      content: attr(tooltip);
 
-    text-align: center;
+      text-align: center;
 
-    z-index: 1000;
-    color: var(--surface-300);
-    line-height: 1.4;
-    background: $gray;
-    font-size: 0.875rem;
+      z-index: 1000;
+      color: var(--ls-surface-300);
+      line-height: 1.4;
+      background: $gray;
+      font-size: 0.875rem;
 
-    min-width: 4em;
-    max-width: 16em;
-    width: max-content;
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0.5rem;
-    border-radius: 0.3rem;
-    box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
-  }
-  &:hover:before,
-  &:hover:after {
-    display: block;
-  }
-  /* position: TOP */
-  &:not([position]):before,
-  &[position^="top"]:before {
-    bottom: 100%;
-    border-bottom-width: 0;
-    border-top-color: $gray;
-  }
-  &:not([position]):after,
-  &[position^="top"]::after {
-    bottom: calc(100% + 5px);
-  }
+      min-width: 4em;
+      max-width: 16em;
+      width: max-content;
+      white-space: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0.5rem;
+      border-radius: 0.3rem;
+      box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
+    }
+    &:hover:before,
+    &:hover:after {
+      display: block;
+    }
+    /* position: TOP */
+    &:not([position]):before,
+    &[position^="top"]:before {
+      bottom: 100%;
+      border-bottom-width: 0;
+      border-top-color: $gray;
+    }
+    &:not([position]):after,
+    &[position^="top"]::after {
+      bottom: calc(100% + 5px);
+    }
 
-  &:not([position])::before,
-  &:not([position])::after,
-  &[position^="top"]::before,
-  &[position^="top"]::after {
-    left: 50%;
-    transform: translate(-50%, -0.5em);
-  }
+    &:not([position])::before,
+    &:not([position])::after,
+    &[position^="top"]::before,
+    &[position^="top"]::after {
+      left: 50%;
+      transform: translate(-50%, -0.5em);
+    }
 
-  /* position: BOTTOM */
-  &[position^="bottom"]::before {
-    top: 105%;
-    border-top-width: 0;
-    border-bottom-color: $gray;
-  }
-  &[position^="bottom"]::after {
-    top: calc(105% + 5px);
-  }
-  &[position^="bottom"]::before,
-  &[position^="bottom"]::after {
-    left: 50%;
-    transform: translate(-50%, 0.5em);
-  }
+    /* position: BOTTOM */
+    &[position^="bottom"]::before {
+      top: 105%;
+      border-top-width: 0;
+      border-bottom-color: $gray;
+    }
+    &[position^="bottom"]::after {
+      top: calc(105% + 5px);
+    }
+    &[position^="bottom"]::before,
+    &[position^="bottom"]::after {
+      left: 50%;
+      transform: translate(-50%, 0.5em);
+    }
 
-  /* position: LEFT */
-  &[position^="left"]::before {
-    top: 50%;
-    border-right-width: 0;
-    border-left-color: $gray;
-    left: calc(0em - 5px);
-    transform: translate(-0.5em, -50%);
-  }
-  &[position^="left"]::after {
-    top: 50%;
-    right: calc(100% + 5px);
-    transform: translate(-0.5em, -50%);
-  }
+    /* position: LEFT */
+    &[position^="left"]::before {
+      top: 50%;
+      border-right-width: 0;
+      border-left-color: $gray;
+      left: calc(0em - 5px);
+      transform: translate(-0.5em, -50%);
+    }
+    &[position^="left"]::after {
+      top: 50%;
+      right: calc(100% + 5px);
+      transform: translate(-0.5em, -50%);
+    }
 
-  /* position: RIGHT */
-  &[position^="right"]::before {
-    top: 50%;
-    border-left-width: 0;
-    border-right-color: $gray;
-    right: calc(0em - 5px);
-    transform: translate(0.5em, -50%);
-  }
-  &[position^="right"]::after {
-    top: 50%;
-    left: calc(100% + 5px);
-    transform: translate(0.5em, -50%);
-  }
+    /* position: RIGHT */
+    &[position^="right"]::before {
+      top: 50%;
+      border-left-width: 0;
+      border-right-color: $gray;
+      right: calc(0em - 5px);
+      transform: translate(0.5em, -50%);
+    }
+    &[position^="right"]::after {
+      top: 50%;
+      left: calc(100% + 5px);
+      transform: translate(0.5em, -50%);
+    }
 
-  /* position: TOP-LEFT */
-  &[position^="top-left"]::before {
-    bottom: 100%;
-    border-bottom-width: 0;
-    border-top-color: $gray;
-    left: calc(0em + 8px);
-    transform: translate(-50%, -0.5em);
-  }
-  &[position^="top-left"]::after {
-    bottom: calc(100% + 5px);
-    left: -88px;
-    transform: translate(-50%, -0.5em);
-  }
+    /* position: TOP-LEFT */
+    &[position^="top-left"]::before {
+      bottom: 100%;
+      border-bottom-width: 0;
+      border-top-color: $gray;
+      left: calc(0em + 8px);
+      transform: translate(-50%, -0.5em);
+    }
+    &[position^="top-left"]::after {
+      bottom: calc(100% + 5px);
+      left: -88px;
+      transform: translate(-50%, -0.5em);
+    }
 
-  /* position: BOTTOM-LEFT */
-  &[position^="bottom-left"]::before {
-    top: 100%;
-    border-top-width: 0;
-    border-bottom-color: $gray;
-    transform: translate(-50%, -0.5em);
-  }
-  &[position^="bottom-left"]::after {
-    top: calc(100% + 5px);
-    left: 40px;
-    transform: translate(-50%, -0.5em);
-  }
+    /* position: BOTTOM-LEFT */
+    &[position^="bottom-left"]::before {
+      top: 100%;
+      border-top-width: 0;
+      border-bottom-color: $gray;
+      transform: translate(-50%, -0.5em);
+    }
+    &[position^="bottom-left"]::after {
+      top: calc(100% + 5px);
+      left: 40px;
+      transform: translate(-50%, -0.5em);
+    }
 
-  &:not([position]):hover::before,
-  &:not([position]):hover::after,
-  &[position^="top"]:hover::before,
-  &[position^="top"]:hover::after,
-  &[position^="top-left"]:hover::before,
-  &[position^="top-left"]:hover::after,
-  &[position^="bottom-left"]:hover::before,
-  &[position^="bottom-left"]:hover::after,
-  &[position^="bottom"]:hover::before,
-  &[position^="bottom"]:hover::after {
-    animation: tooltips-vert 300ms ease-out forwards;
-  }
+    &:not([position]):hover::before,
+    &:not([position]):hover::after,
+    &[position^="top"]:hover::before,
+    &[position^="top"]:hover::after,
+    &[position^="top-left"]:hover::before,
+    &[position^="top-left"]:hover::after,
+    &[position^="bottom-left"]:hover::before,
+    &[position^="bottom-left"]:hover::after,
+    &[position^="bottom"]:hover::before,
+    &[position^="bottom"]:hover::after {
+      animation: tooltips-vert 300ms ease-out forwards;
+    }
 
-  &[position^="left"]:hover::before,
-  &[position^="left"]:hover::after,
-  &[position^="right"]:hover::before,
-  &[position^="right"]:hover::after {
-    animation: tooltips-horz 300ms ease-out forwards;
+    &[position^="left"]:hover::before,
+    &[position^="left"]:hover::after,
+    &[position^="right"]:hover::before,
+    &[position^="right"]:hover::after {
+      animation: tooltips-horz 300ms ease-out forwards;
+    }
   }
-}
 
-/* don't show empty tooltips */
-[tooltip=""]::before,
-[tooltip=""]::after {
-  display: none !important;
-}
+  /* don't show empty tooltips */
+  [tooltip=""]::before,
+  [tooltip=""]::after {
+    display: none !important;
+  }
 
-/* KEYFRAMES */
-@keyframes tooltips-vert {
-  to {
-    opacity: 0.96;
-    transform: translate(-50%, 0);
+  /* KEYFRAMES */
+  @keyframes tooltips-vert {
+    to {
+      opacity: 0.96;
+      transform: translate(-50%, 0);
+    }
   }
-}
 
-@keyframes tooltips-horz {
-  to {
-    opacity: 0.96;
-    transform: translate(0, -50%);
+  @keyframes tooltips-horz {
+    to {
+      opacity: 0.96;
+      transform: translate(0, -50%);
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/TxSettingsDialog/txSettingsDialog.scss b/src/components/TxSettingsDialog/txSettingsDialog.scss
index 9c0933b..e19ab54 100644
--- a/src/components/TxSettingsDialog/txSettingsDialog.scss
+++ b/src/components/TxSettingsDialog/txSettingsDialog.scss
@@ -1,141 +1,143 @@
-.settings-overlay {
-  &__title {
-    display: flex;
-    flex-direction: row;
-    grid-gap: 12px;
-    font-size: 1rem;
-    color: var(--surface-200);
-    margin-bottom: 8px;
-    font-weight: 500;
-  }
+.p-dialog-mask.p-component-overlay {
+  .settings-overlay {
+    &__title {
+      display: flex;
+      flex-direction: row;
+      grid-gap: 12px;
+      font-size: 1rem;
+      color: var(--ls-surface-200);
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
 
-  &__divider {
-    border-bottom: 1px solid rgba(255,255,255, 0.1);
-    margin: 0 -20px;
-  }
+    &__divider {
+      border-bottom: 1px solid rgba(255,255,255, 0.1);
+      margin: 0 -20px;
+    }
 
-  &__content {
-    padding-top: 12px;
+    &__content {
+      padding-top: 12px;
+    }
   }
-}
-
-.stepped-dialog .dialog-step__header {
-  padding-bottom: 8px;
-  padding-top: 0;
-}
-
-.copy-button {
-  margin-top: 7px;
-  margin-bottom: 16px;
-  min-width: 275px;
-}
 
-.disconnect-button {
-  margin-top: 16px;
-  margin-bottom: -4px;
-}
+  .stepped-dialog .dialog-step__header {
+    padding-bottom: 8px;
+    padding-top: 0;
+  }
 
-.slippage-options {
-  display: flex;
-  grid-gap: 12px;
+  .copy-button {
+    margin-top: 7px;
+    margin-bottom: 16px;
+    min-width: 275px;
+  }
 
-  &__button {
-    height: 32px;
-    padding: 3px 16px;
-    font-size: 0.875rem;
-    background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
-    border: none;
+  .disconnect-button {
+    margin-top: 16px;
+    margin-bottom: -4px;
+  }
 
+  .slippage-options {
+    display: flex;
+    grid-gap: 12px;
 
-    &--action {
+    &__button {
       height: 32px;
       padding: 3px 16px;
       font-size: 0.875rem;
+      background: linear-gradient(90deg, #6E42CA 0%, #8D29C1 100%);
+      border: none;
+
+
+      &--action {
+        height: 32px;
+        padding: 3px 16px;
+        font-size: 0.875rem;
+      }
+      &:enabled:hover {
+        background: linear-gradient(90deg, #8d6ad5, #6f42ca);
+        color: white;
+      }
     }
-    &:enabled:hover {
-      background: linear-gradient(90deg, #8d6ad5, #6f42ca);
-      color: white;
+
+    &__input {
+      flex: 1;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      &:after {
+        content: '%';
+        font-weight: 600;
+        color: var(--ls-surface-600);
+        font-size: 1rem;
+        position: absolute;
+        right: 0;
+        margin-right: 8px;
+      }
+
+      .p-inputnumber-input {
+        height: 32px;
+        padding: 3px 24px 3px 10px;
+        width: 100%;
+        text-align: right;
+      }
     }
   }
 
-  &__input {
-    flex: 1;
+  .common-label {
     width: 100%;
     display: flex;
-    align-items: center;
-    position: relative;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
 
-    &:after {
-      content: '%';
-      font-weight: 600;
-      color: var(--surface-600);
-      font-size: 1rem;
-      position: absolute;
-      right: 0;
-      margin-right: 8px;
+    label {
+      margin-right: auto;
     }
 
-    .p-inputnumber-input {
-      height: 32px;
-      padding: 3px 24px 3px 10px;
-      width: 100%;
-      text-align: right;
+    & > div {
+      color: var(--ls-surface-600);
+      font-size: 0.8rem;
+
+      margin-left: 5px;
+      cursor: pointer;
+      &:hover {
+        color: var(--ls-surface-500);
+      }
     }
   }
-}
-
-.common-label {
-  width: 100%;
-  display: flex;
-  margin-bottom: 0.5rem;
-  font-size: 0.9rem;
 
-  label {
-    margin-right: auto;
+  .slippage-label {
+    background: #24243a;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid var(--ls-surface-card);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+    box-shadow 0.2s;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 6px;
+    margin-right: 3px;
   }
-
-  & > div {
-    color: var(--surface-600);
-    font-size: 0.8rem;
-
-    margin-left: 5px;
-    cursor: pointer;
-    &:hover {
-      color: var(--surface-500);
-    }
+  .slippage-radio:checked + .slippage-label:not(.-uncheck) {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgb(196 181 253 / 50%);
+    border-color: #c4b5fd;
   }
-}
-
-.slippage-label {
-  background: #24243a;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid var(--surface-card);
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
-  box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border-radius: 6px;
-  margin-right: 3px;
-}
-.slippage-radio:checked + .slippage-label:not(.-uncheck) {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgb(196 181 253 / 50%);
-  border-color: #c4b5fd;
-}
 
-.slippage-comment {
-  text-align: right;
-  height: 24px;
-  font-size: 0.875rem;
-  padding-top: 6px;
+  .slippage-comment {
+    text-align: right;
+    height: 24px;
+    font-size: 0.875rem;
+    padding-top: 6px;
 
-  &.is-error {
-    color: var(--pink-600);
-  }
+    &.is-error {
+      color: var(--ls-pink-600);
+    }
 
-  &.is-warning {
-    color: var(--orange-600);
+    &.is-warning {
+      color: var(--ls-orange-600);
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/UnverifiedTokenDialog/unverifiedTokenDialog.scss b/src/components/UnverifiedTokenDialog/unverifiedTokenDialog.scss
index 5c91f08..ece7833 100644
--- a/src/components/UnverifiedTokenDialog/unverifiedTokenDialog.scss
+++ b/src/components/UnverifiedTokenDialog/unverifiedTokenDialog.scss
@@ -1,35 +1,37 @@
-.warning-container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 2rem;
-  img {
-    width: 64px;
-    height: 64px;
-    margin-bottom: 2rem;
-  }
-  &-content {
+.p-dialog-mask.p-component-overlay {
+  .warning-container {
     display: flex;
-    flex-direction: column;
-    grid-gap: 8px;
     align-items: center;
-
-    & > span:first-child {
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 24px;
-      letter-spacing: 0.1px;
+    flex-direction: column;
+    padding: 2rem;
+    img {
+      width: 64px;
+      height: 64px;
+      margin-bottom: 2rem;
     }
-
-    & > span:nth-child(2) {
+    &-content {
       display: flex;
+      flex-direction: column;
+      grid-gap: 8px;
       align-items: center;
-      text-align: center;
-      font-size: 15px;
-      line-height: 24px;
-      font-weight: 400;
-      color: #e5e4fa;
-      width: 90%;
+
+      & > span:first-child {
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.1px;
+      }
+
+      & > span:nth-child(2) {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        font-size: 15px;
+        line-height: 24px;
+        font-weight: 400;
+        color: #e5e4fa;
+        width: 90%;
+      }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/composables/useAccountBalance.ts b/src/composables/useAccountBalance.ts
index c58aea3..a86cba0 100644
--- a/src/composables/useAccountBalance.ts
+++ b/src/composables/useAccountBalance.ts
@@ -65,7 +65,7 @@ export function useAccountBalance(
             composeType(modules.CoinStore, [fnToken]),
           ) as unknown as Promise<AptosCoinInfoResource>;
         },
-        { time: 5000 },
+        { time: RECALCULATION_BALANCE_TIME },
       );
 
       if (cacheKey === `${unref(address)}-${unref(token)}`) {
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 927ac81..a6708a2 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -33,7 +33,7 @@ export const CURVE_UNCORRELATED_V05 = `${MODULES_V05_ACCOUNT}::curves::Uncorrela
 export const CURVE_STABLE = `${MODULES_ACCOUNT}::curves::Stable`;
 export const CURVE_STABLE_V05 = `${MODULES_V05_ACCOUNT}::curves::Stable`;
 
-export const RECALCULATION_BALANCE_TIME = 5000;
+export const RECALCULATION_BALANCE_TIME = 7000;
 
 export const NETWORKS_MODULES = {
   Scripts: `${MODULES_ACCOUNT}::scripts_v2`,
@@ -72,6 +72,10 @@ export const NETWORKS: Network[] = [
 
 export const CORRECT_CHAIN = process.env.VUE_APP_CORRECT_CHAIN || 'mainnet';
 
+export const REST_URL =
+  process.env.VITE_REST_API_URL ||
+  'https://aptos-mainnet.pontem.network/v1';
+
 export const CORRECT_CHAIN_ID =
   process.env.VUE_APP_CORRECT_CHAIN === 'mainnet'
     ? MAINNET_CHAIN_ID
diff --git a/src/constants/tokensList.ts b/src/constants/tokensList.ts
index b2fd571..17d04fa 100644
--- a/src/constants/tokensList.ts
+++ b/src/constants/tokensList.ts
@@ -20,5 +20,15 @@ export const knownTokens = [
   'abel',
   'alt',
   'amapt',
+  'mbx',
+  'props',
+  'doodoo',
+  'gari',
+  'returd',
+  'shrimp',
+  'apts',
 ];
 
+export const BRIDGES = ['celer', 'wormhole', 'layerzero'];
+
+
diff --git a/src/store/usePoolsStore.ts b/src/store/usePoolsStore.ts
index 76f389b..3b5a02c 100644
--- a/src/store/usePoolsStore.ts
+++ b/src/store/usePoolsStore.ts
@@ -359,6 +359,8 @@ export const usePoolsStore = defineStore('poolsStore', () => {
       : false;
   }
 
+  const poolsMapAsArray = computed(() => Object.values(poolsMap));
+
   return {
     isLoading,
     isReady,
@@ -371,5 +373,6 @@ export const usePoolsStore = defineStore('poolsStore', () => {
     poolsMap,
     poolsTitleMap,
     defaultPools,
+    poolsMapAsArray,
   };
 });
diff --git a/src/store/useTokenStore.ts b/src/store/useTokenStore.ts
index e8c29f1..f2eedc5 100644
--- a/src/store/useTokenStore.ts
+++ b/src/store/useTokenStore.ts
@@ -1,22 +1,16 @@
-import { useStorage } from '@vueuse/core';
-import { defineStore } from 'pinia';
-import {
-  computed,
-  ComputedRef,
-  onBeforeMount,
-  reactive,
-  ref,
-  watch,
-} from 'vue';
-import { isNumber } from 'lodash';
-import CoinsRegistry from '@pontem/coins-registry';
-
-import { IStorageBasic, Resource, AptosCoinInfoResource } from '@/types';
+import { APTOS, CORRECT_CHAIN, CORRECT_CHAIN_ID } from '@/constants/constants';
+import { IStorageBasic, Resource } from '@/types';
 import { TCoinSource } from '@/types/coins';
-import { APTOS, CORRECT_CHAIN_ID } from '@/constants/constants';
-import { useStore } from '@/store/useStore';
+import { useStore } from '@/store';
+import { AptosCoinInfoResource } from '@/types/aptosResources';
+import { nope } from '@/utils/utils';
 import { composeType, extractAddressFromType } from '@/utils/contracts';
 import { aliasForToken, titleForToken } from '@/utils/tokens';
+import { useStorage } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import { computed, ComputedRef, reactive, ref, watch } from 'vue';
+import isNumber from 'lodash/isNumber';
+import CoinsRegistry from '@pontem/coins-registry';
 
 export interface IPersistedToken {
   type: string;
@@ -25,7 +19,7 @@ export interface IPersistedToken {
   symbol: string;
   name: string;
   address?: string;
-  logoURI?: string;
+  logo?: string;
   logo_url?: string;
   verified?: boolean;
   source: TCoinSource;
@@ -44,14 +38,11 @@ interface IStorage extends IStorageBasic {
   tokens: IPersistedToken[];
 }
 
-const PROVIDER_TO_SYMBOL_PREFIX: Record<string, string> = {
-  amnis: 'am',
-};
-
 const PERSISTING_SOURCES = ['import', 'pool'];
 
 export const useTokensStore = defineStore('tokensStore', () => {
   const mainStore = useStore();
+
   const { client, modules } =  useStore();
 
   const tokens = reactive<Record<string, IPersistedTokenExtended>>({});
@@ -87,7 +78,6 @@ export const useTokensStore = defineStore('tokensStore', () => {
     if (!item?.caution) {
       verifiedTokensTypes.add(item.type);
     }
-    return item;
   }
 
   /**
@@ -101,12 +91,18 @@ export const useTokensStore = defineStore('tokensStore', () => {
   }
 
   async function fetchCoinsList() {
-    const { coins } = CoinsRegistry;
+    const coins = CoinsRegistry.getCoinsFor(CORRECT_CHAIN);
     coins.forEach(processFetchedCoin);
-    return registerCoins(coins, mainStore.network.value?.id);
+    return await registerCoins(coins, mainStore.network.value?.id);
   }
 
-  onBeforeMount(() => loadFromLocalStorage());
+  async function fetchCoinsData() {
+    const result = await Promise.all([
+      loadFromLocalStorage(),
+      fetchCoinsList(),
+    ]);
+    return result;
+  }
 
   async function loadFromLocalStorage() {
     if (customTokensStorage.value) {
@@ -114,14 +110,17 @@ export const useTokensStore = defineStore('tokensStore', () => {
         const { tokens } = customTokensStorage.value;
         if (!tokens) return;
 
-        for (const token of tokens) {
-          // load only coins which can be persisted
-          if (PERSISTING_SOURCES.includes(token.source)) {
-            await loadToken(token);
-          }
-        }
+        const tokensCandidates = tokens.filter((token) => {
+          return PERSISTING_SOURCES.includes(token.source);
+        });
+
+        return await Promise.all(
+          tokensCandidates.map((token) => {
+            return loadToken(token);
+          }),
+        );
       } catch (_e) {
-        //
+        console.error('tokensStore:loadFromLocalStorage', _e);
       } finally {
         isReady.value = true;
       }
@@ -145,7 +144,9 @@ export const useTokensStore = defineStore('tokensStore', () => {
     };
   }
 
-  watch(tokens, (_tokens) => persistCustomToStorage(_tokens));
+  watch(tokens, (_tokens) => {
+    persistCustomToStorage(_tokens);
+  });
 
   const loadToken = async (token: IPersistedToken) => {
     // - - fetch coinInfo from URL
@@ -154,21 +155,24 @@ export const useTokensStore = defineStore('tokensStore', () => {
       await client.getAccountResource(
         extractAddressFromType(token.type),
         coinInfo,
-      )  as unknown as Promise<Resource | undefined> | any;
+      ) as unknown as Promise<Resource | undefined> | any;
 
     if (!resource) {
       // TODO: Process error
       return undefined;
     }
 
-    tokens[token.type].name = resource.data.name;
-    tokens[token.type].symbol = resource.data.symbol;
-    tokens[token.type].decimals = +resource.data.decimals;
-    tokens[token.type].alias = aliasForToken(token);
-    tokens[token.type].title = titleForToken(token);
-    tokens[token.type].logo = token.logo_url || '';
+    const loadingToken: IPersistedToken = {
+      type: token.type,
+      name: resource.data.name,
+      symbol: resource.data.symbol,
+      decimals: +resource.data.decimals,
+      chainId: token.chainId,
+      source: token.source,
+      order: token.order,
+    };
 
-    return tokens[token.type];
+    return registerToken(loadingToken, { rewrite: true });
   };
 
   const token: ComputedRef<() => IPersistedToken | undefined> = computed(
@@ -176,8 +180,8 @@ export const useTokensStore = defineStore('tokensStore', () => {
   );
 
   /**
-   * Get extended token object
-   *
+   * Get an extended token object.
+   * The list of tokens is formed from coins-registry/coins and tokens from local storage.
    * @param type token type
    * @returns
    */
@@ -185,7 +189,10 @@ export const useTokensStore = defineStore('tokensStore', () => {
     return type && tokens[type] ? tokens[type] : undefined;
   }
 
-  function registerToken(token: IPersistedToken, { rewrite = false }) {
+  async function registerToken(
+    token: IPersistedToken,
+    { rewrite = false },
+  ): Promise<IPersistedTokenExtended> {
     const { type } = token;
 
     // TODO: Check try to register a duplicate
@@ -209,6 +216,7 @@ export const useTokensStore = defineStore('tokensStore', () => {
       symbol: token.symbol, // *
       source: token.source,
       order: token.order || 1000,
+      caution: token.caution || false,
       alias: aliasForToken(token),
       title: titleForToken(token),
       logo: token.logo_url || '',
@@ -217,17 +225,22 @@ export const useTokensStore = defineStore('tokensStore', () => {
     return tokens[type];
   }
 
-  function searchToken(type: string, withCancel?: false): Promise<any>;
-
+  function searchToken(
+    type: string,
+    withCancel?: false,
+  ): Promise<IPersistedTokenExtended>;
   function searchToken(
     type: string,
     withCancel: true,
-  ): { request: Promise<any>; cancel: (message?: string) => void };
-  function searchToken(type: string, withCancel: any): any {
+  ): {
+    request: Promise<IPersistedTokenExtended>;
+    cancel: (message?: string) => void;
+  };
+  function searchToken(type: string, withCancel?: boolean): any {
     if (tokens[type]) {
       return withCancel
         ? {
-          cancel: () => {},
+          cancel: nope,
           request: Promise.resolve(tokens[type]),
         }
         : Promise.resolve(tokens[type]);
@@ -236,27 +249,26 @@ export const useTokensStore = defineStore('tokensStore', () => {
     const promise = client.getAccountResource(
       extractAddressFromType(type),
       composeType(modules.CoinInfo, [type]),
-    ) as unknown as any;
-
-    const request = withCancel ? promise?.request : promise;
+    )as unknown as any;
+    const request = withCancel ? promise.request : promise;
 
-    request?.then((resource?: Resource<AptosCoinInfoResource>) => {
+    request.then((resource?: Resource<AptosCoinInfoResource>) => {
       if (!resource) {
         return;
       }
 
-      const data = resource.data;
+      const { data } = resource;
 
       return registerToken(
         {
+          type,
           name: data.name,
           symbol: data.symbol,
           decimals: +data.decimals,
           chainId: mainStore.networkId.value,
-          source: 'import',
           caution: true,
-          order: 1,
-          type,
+          source: 'import',
+          order: 1000,
         },
         {
           rewrite: false,
@@ -266,14 +278,15 @@ export const useTokensStore = defineStore('tokensStore', () => {
 
     if (withCancel) {
       return {
-        request: promise?.request,
-        cancel: promise?.cancel,
+        request: promise.request,
+        cancel: promise.cancel,
       };
     }
 
     return promise;
   }
 
+  //TODO: APT-420 getTokenInfo func could save received token to store immediately
   async function getTokenInfo(
     token: string,
     remote?: boolean,
@@ -287,7 +300,7 @@ export const useTokensStore = defineStore('tokensStore', () => {
       await client.getAccountResource(
         extractAddressFromType(token),
         coinInfo,
-      )  as unknown as any;
+      ) as unknown as any;
 
     if (!resource) {
       return undefined;
@@ -299,6 +312,7 @@ export const useTokensStore = defineStore('tokensStore', () => {
       name: resource.data.name,
       symbol: resource.data.symbol,
       decimals: +resource.data.decimals,
+      caution: true,
       source: 'import',
     };
 
@@ -318,8 +332,8 @@ export const useTokensStore = defineStore('tokensStore', () => {
     persistCustomToStorage(tokens, true);
   }
 
-  function registerCoins(list: IPersistedToken[], networkId: number): void {
-    list
+  function registerCoins(list: IPersistedToken[], networkId: number) {
+    const registerQueries = list
       .filter((token: IPersistedToken) => token.chainId === networkId)
       .map((token: IPersistedToken) =>
         registerToken(token, {
@@ -327,6 +341,8 @@ export const useTokensStore = defineStore('tokensStore', () => {
           rewrite: true,
         }),
       );
+
+    return Promise.all(registerQueries);
   }
 
   watch(
@@ -335,8 +351,11 @@ export const useTokensStore = defineStore('tokensStore', () => {
       if (!network) {
         return;
       }
+      // isLoading.value = true;
       // TODO: Check tokens not valid for network
-      registerCoins(coins.value, network.id);
+      await registerCoins(coins.value, network.id);
+      // isLoading.value = false;
+      // isReady.value = true;
     },
     { immediate: true },
   );
@@ -353,5 +372,6 @@ export const useTokensStore = defineStore('tokensStore', () => {
     isReady,
     isTokenVerified,
     fetchCoinsList,
+    fetchCoinsData,
   };
 });
diff --git a/src/styles/components/curveSwitch.scss b/src/styles/components/curveSwitch.scss
index 52cd326..0d06cb5 100644
--- a/src/styles/components/curveSwitch.scss
+++ b/src/styles/components/curveSwitch.scss
@@ -29,7 +29,7 @@
         }
 
         p {
-            font-family: var(--font-family);
+            font-family: var(--ls-font-family);
             font-style: normal;
             font-weight: 500;
             font-size: 16px;
@@ -47,4 +47,4 @@
 .isSelected {
     background: #4d4d70;
     border-radius: 12px;
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/steppedDialog.scss b/src/styles/components/steppedDialog.scss
index ee3937d..84b9bac 100644
--- a/src/styles/components/steppedDialog.scss
+++ b/src/styles/components/steppedDialog.scss
@@ -1,27 +1,89 @@
-.stepped-dialog {
-  padding: 0;
+.p-dialog-mask.p-component-overlay {
+  .stepped-dialog {
+    padding: 0;
 
-  $iconColor: #d4c4ed;
+    $iconColor: #d4c4ed;
 
-  &.stepped-dialog--panel {
-    .dialog-step {
-      padding: 20px;
+    &.stepped-dialog--panel {
+      .dialog-step {
+        padding: 20px;
+      }
     }
-  }
 
-  .p-dialog-content {
-    border-radius: 24px;
-    padding: 0 !important;
-    height: 100%;
-    overflow-x: hidden;
+    .p-dialog-content {
+      border-radius: 24px;
+      padding: 0 !important;
+      height: 100%;
+      overflow-x: hidden;
+
+      .dialog-step {
+        &__button {
+          background: none;
+          border: none;
+          padding: 3px !important;
+          width: auto;
+          height: auto;
+
+          &:hover,
+          &:active,
+          &:focus {
+            background: none !important;
+            border: none !important;
+            box-shadow: none !important;
+            color: rgba(255, 255, 255, 0.8) !important;
+          }
+        }
+      }
+    }
 
     .dialog-step {
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      &__header {
+        display: flex;
+        align-items: center !important;
+        padding-bottom: 16px;
+        padding-top: 4px;
+        min-height: 24px;
+      }
+
+      &__footer {
+        margin-top: auto;
+      }
+
+      &__content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: auto;
+        overflow-x: hidden;
+        margin: 0 -15px;
+        padding: 0 15px;
+      }
+
+      &__title {
+        box-sizing: border-box;
+        font-weight: 600;
+        font-size: 20px;
+        color: var(--ls-text-color);
+      }
+
+      &__divider {
+        opacity: 0.15;
+        border-bottom: 1px solid var(--ls-text-color);
+        margin: 0 -20px;
+      }
+
       &__button {
         background: none;
         border: none;
         padding: 3px !important;
         width: auto;
         height: auto;
+        color: transparentize($iconColor, 0.5) !important;
 
         &:hover,
         &:active,
@@ -29,69 +91,9 @@
           background: none !important;
           border: none !important;
           box-shadow: none !important;
-          color: rgba(255, 255, 255, 0.8) !important;
+          color: transparentize($iconColor, 0.2) !important;
         }
       }
     }
   }
-
-  .dialog-step {
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    &__header {
-      display: flex;
-      align-items: center !important;
-      padding-bottom: 16px;
-      padding-top: 4px;
-      min-height: 24px;
-    }
-
-    &__footer {
-      margin-top: auto;
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: auto;
-      overflow-x: hidden;
-      margin: 0 -15px;
-      padding: 0 15px;
-    }
-
-    &__title {
-      box-sizing: border-box;
-      font-weight: 600;
-      font-size: 20px;
-      color: var(--text-color);
-    }
-
-    &__divider {
-      opacity: 0.15;
-      border-bottom: 1px solid var(--text-color);
-      margin: 0 -20px;
-    }
-
-    &__button {
-      background: none;
-      border: none;
-      padding: 3px !important;
-      width: auto;
-      height: auto;
-      color: transparentize($iconColor, 0.5) !important;
-
-      &:hover,
-      &:active,
-      &:focus {
-        background: none !important;
-        border: none !important;
-        box-shadow: none !important;
-        color: transparentize($iconColor, 0.2) !important;
-      }
-    }
-  }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 04349d3..9a2e6d5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -15,8 +15,8 @@
 @import '../components/ToolTip/tooltip';
 @import '../components/ButtonToken/buttonToken';
 @import '../components/FrontrunOverlay/frontRunOverlay';
-@import '../components/PriceImpactWarningDialog/PriceImpactWarningDialog';
 @import '../styles/components/curveSwitch.scss';
 @import '../components/LSNumberInput/lsNumberInputAutoNumeric.scss';
 @import '../Swap/styles/swapInput';
+@import '../components/ContractSwitch/contractSwitch';
 
diff --git a/src/styles/modals.scss b/src/styles/modals.scss
index b946245..5e8aa3f 100644
--- a/src/styles/modals.scss
+++ b/src/styles/modals.scss
@@ -11,5 +11,7 @@
 @import 'components/steppedDialog';
 @import '../components/InvalidNetworkDialog/invalidNetworkDialog';
 @import '../components/SelectTokenDialog/managePresets';
-@import '../components/ContractSwitch/contractSwitch';
+@import '../components/SelectTokenDialog/tokenList';
+@import '../components/PriceImpactWarningDialog/PriceImpactWarningDialog';
+
 
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 84f22dd..8ff6999 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -11,7 +11,7 @@ liquidswap-widget {
   -webkit-tap-highlight-color: transparent;
   font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
   position: relative;
-  font-family: var(--font-family),
+  font-family: var(--ls-font-family),
     -apple-system,
     BlinkMacSystemFont,
     'Segoe UI',
@@ -29,7 +29,7 @@ liquidswap-widget {
     #0e0824 44.79%,
     #0a081e 59.58%
   );
-  color: var(--text-color);
+  color: var(--ls-text-color);
   padding: 0;
   margin: 0 auto;
   -moz-osx-font-smoothing: grayscale;
@@ -37,610 +37,603 @@ liquidswap-widget {
   &.layout-scroll-block {
     overflow: hidden;
   }
-}
 
-.swap__container {
-  margin: 0 auto;
-  width: 100%;
-}
+  a {
+    text-decoration: none;
+  }
 
-a {
-  text-decoration: none;
-}
+  p {
+    color: var(--ls-text-color);
+  }
 
-p {
-  color: var(--text-color);
+  .onboarding-icon {
+    display: inline-block;
+    width: 1rem;
+    background: url('../assets/union.svg') 0 0/contain no-repeat;
+    &::before {
+      content: "";
+      display: block;
+      padding-top: 100%;
+    }
+  }
 }
 
-.onboarding-icon {
-  display: inline-block;
-  width: 1rem;
-  background: url('../assets/union.svg') 0 0/contain no-repeat;
-  &::before {
-  content: "";
-    display: block;
-    padding-top: 100%;
-  }
+.swap__container {
+  margin: 0 auto;
+  width: 100%;
 }
 
 :root {
-  //--text-color:#495057;
-  --text-color: #e5e4fa;
-  --text-color-secondary: #6c757d; //9292A8
-  --primary-color: #6e42ca;
-  --primary-color-text: #ffffff;
-  --accent-success: #039581;
-  --accent-warning: #E67106;
-  --accent-error: #c62828;
-  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+  --ls-text-color: #e5e4fa;
+  --ls-text-color-secondary: #6c757d; //9292A8
+  --ls-primary-color: #6e42ca;
+  --ls-primary-color-text: #ffffff;
+  --ls-accent-success: #039581;
+  --ls-accent-warning: #E67106;
+  --ls-accent-error: #c62828;
+  --ls-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol';
-  --surface-0: #ffffff;
-  --surface-50: #fafafa;
-  --surface-100: #f5f5f5;
-  --surface-200: #eeeeee;
-  --surface-300: #e0e0e0;
-  --surface-400: #bdbdbd;
-  --surface-500: #9e9e9e;
-  --surface-600: #757575;
-  --surface-700: #616161;
-  --surface-800: #424242;
-  --surface-900: #212121;
-  --surface-ground: #212429;
-  --surface-section: #ffffff;
-  --surface-card: #16162d;
-  --surface-overlay: #16162d;
-  --surface-border: #dee2e6;
-  --content-padding: 1rem;
-  --inline-spacing: 0.5rem;
-  --border-radius: 14px;
-  --blue-50: #f4fafe;
-  --blue-100: #cae6fc;
-  --blue-200: #a0d2fa;
-  --blue-300: #75bef8;
-  --blue-400: #4baaf5;
-  --blue-500: #2196f3;
-  --blue-600: #1c80cf;
-  --blue-700: #1769aa;
-  --blue-800: #125386;
-  --blue-900: #0d3c61;
-  --green-50: #f6fbf6;
-  --green-100: #d4ecd5;
-  --green-200: #b2ddb4;
-  --green-300: #90cd93;
-  --green-400: #6ebe71;
-  --green-500: #4caf50;
-  --green-600: #419544;
-  --green-700: #357b38;
-  --green-800: #2a602c;
-  --green-900: #1e4620;
-  --yellow-50: #fffcf5;
-  --yellow-100: #fef0cd;
-  --yellow-200: #fde4a5;
-  --yellow-300: #fdd87d;
-  --yellow-400: #fccc55;
-  --yellow-500: #fbc02d;
-  --yellow-600: #d5a326;
-  --yellow-700: #b08620;
-  --yellow-800: #8a6a19;
-  --yellow-900: #644d12;
-  --cyan-50: #f2fcfd;
-  --cyan-100: #c2eff5;
-  --cyan-200: #91e2ed;
-  --cyan-300: #61d5e4;
-  --cyan-400: #30c9dc;
-  --cyan-500: #00bcd4;
-  --cyan-600: #00a0b4;
-  --cyan-700: #008494;
-  --cyan-800: #006775;
-  --cyan-900: #004b55;
-  --pink-50: #fef4f7;
-  --pink-100: #fac9da;
-  --pink-200: #f69ebc;
-  --pink-300: #f1749e;
-  --pink-400: #ed4981;
-  --pink-500: #e91e63;
-  --pink-600: #c61a54;
-  --pink-700: #a31545;
-  --pink-800: #801136;
-  --pink-900: #5d0c28;
-  --indigo-50: #f5f6fb;
-  --indigo-100: #d1d5ed;
-  --indigo-200: #acb4df;
-  --indigo-300: #8893d1;
-  --indigo-400: #6372c3;
-  --indigo-500: #3f51b5;
-  --indigo-600: #36459a;
-  --indigo-700: #2c397f;
-  --indigo-800: #232d64;
-  --indigo-900: #192048;
-  --teal-50: #f2faf9;
-  --teal-100: #c2e6e2;
-  --teal-200: #91d2cc;
-  --teal-300: #61beb5;
-  --teal-400: #30aa9f;
-  --teal-500: #009688;
-  --teal-600: #008074;
-  --teal-700: #00695f;
-  --teal-800: #00534b;
-  --teal-900: #003c36;
-  --orange-50: #fff8f2;
-  --orange-100: #fde0c2;
-  --orange-200: #fbc791;
-  --orange-300: #f9ae61;
-  --orange-400: #f79530;
-  --orange-500: #f57c00;
-  --orange-600: #d06900;
-  --orange-700: #ac5700;
-  --orange-800: #874400;
-  --orange-900: #623200;
-  --bluegray-50: #f7f9f9;
-  --bluegray-100: #d9e0e3;
-  --bluegray-200: #bbc7cd;
-  --bluegray-300: #9caeb7;
-  --bluegray-400: #7e96a1;
-  --bluegray-500: #607d8b;
-  --bluegray-600: #526a76;
-  --bluegray-700: #435861;
-  --bluegray-800: #35454c;
-  --bluegray-900: #263238;
-  --purple-50: #faf4fb;
-  --purple-100: #e7cbec;
-  --purple-200: #d4a2dd;
-  --purple-300: #c279ce;
-  --purple-400: #af50bf;
-  --purple-500: #9c27b0;
-  --purple-600: #852196;
-  --purple-700: #6d1b7b;
-  --purple-800: #561561;
-  --purple-900: #3e1046;
-  --gray-50: #fafafa;
-  --gray-100: #f5f5f5;
-  --gray-200: #eeeeee;
-  --gray-300: #e0e0e0;
-  --gray-400: #bdbdbd;
-  --gray-500: #9e9e9e;
-  --gray-600: #757575;
-  --gray-700: #616161;
-  --gray-800: #424242;
-  --gray-900: #212121;
-  --red-50: #fff5f5;
-  --red-100: #ffd1ce;
-  --red-200: #ffada7;
-  --red-300: #ff8980;
-  --red-400: #ff6459;
-  --red-500: #ff4032;
-  --red-600: #d9362b;
-  --red-700: #b32d23;
-  --red-800: #8c231c;
-  --red-900: #661a14;
-  --primary-50: #f4fafe;
-  --primary-100: #cae6fc;
-  --primary-200: #a0d2fa;
-  --primary-300: #75bef8;
-  --primary-400: #4baaf5;
-  --primary-500: #2196f3;
-  --primary-600: #1c80cf;
-  --primary-700: #1769aa;
-  --primary-800: #125386;
-  --primary-900: #0d3c61;
+  --ls-surface-0: #ffffff;
+  --ls-surface-50: #fafafa;
+  --ls-surface-100: #f5f5f5;
+  --ls-surface-200: #eeeeee;
+  --ls-surface-300: #e0e0e0;
+  --ls-surface-400: #bdbdbd;
+  --ls-surface-500: #9e9e9e;
+  --ls-surface-600: #757575;
+  --ls-surface-700: #616161;
+  --ls-surface-800: #424242;
+  --ls-surface-900: #212121;
+  --ls-surface-ground: #212429;
+  --ls-surface-section: #ffffff;
+  --ls-surface-card: #16162d;
+  --ls-surface-overlay: #16162d;
+  --ls-surface-border: #dee2e6;
+  --ls-content-padding: 1rem;
+  --ls-inline-spacing: 0.5rem;
+  --ls-border-radius: 14px;
+  --ls-border-color-invalid: #ca4242;
+  --ls-blue-50: #f4fafe;
+  --ls-blue-100: #cae6fc;
+  --ls-blue-200: #a0d2fa;
+  --ls-blue-300: #75bef8;
+  --ls-blue-400: #4baaf5;
+  --ls-blue-500: #2196f3;
+  --ls-blue-600: #1c80cf;
+  --ls-blue-700: #1769aa;
+  --ls-blue-800: #125386;
+  --ls-blue-900: #0d3c61;
+  --ls-green-50: #f6fbf6;
+  --ls-green-100: #d4ecd5;
+  --ls-green-200: #b2ddb4;
+  --ls-green-300: #90cd93;
+  --ls-green-400: #6ebe71;
+  --ls-green-500: #4caf50;
+  --ls-green-600: #419544;
+  --ls-green-700: #357b38;
+  --ls-green-800: #2a602c;
+  --ls-green-900: #1e4620;
+  --ls-yellow-50: #fffcf5;
+  --ls-yellow-100: #fef0cd;
+  --ls-yellow-200: #fde4a5;
+  --ls-yellow-300: #fdd87d;
+  --ls-yellow-400: #fccc55;
+  --ls-yellow-500: #fbc02d;
+  --ls-yellow-600: #d5a326;
+  --ls-yellow-700: #b08620;
+  --ls-yellow-800: #8a6a19;
+  --ls-yellow-900: #644d12;
+  --ls-cyan-50: #f2fcfd;
+  --ls-cyan-100: #c2eff5;
+  --ls-cyan-200: #91e2ed;
+  --ls-cyan-300: #61d5e4;
+  --ls-cyan-400: #30c9dc;
+  --ls-cyan-500: #00bcd4;
+  --ls-cyan-600: #00a0b4;
+  --ls-cyan-700: #008494;
+  --ls-cyan-800: #006775;
+  --ls-cyan-900: #004b55;
+  --ls-pink-50: #fef4f7;
+  --ls-pink-100: #fac9da;
+  --ls-pink-200: #f69ebc;
+  --ls-pink-300: #f1749e;
+  --ls-pink-400: #ed4981;
+  --ls-pink-500: #e91e63;
+  --ls-pink-600: #c61a54;
+  --ls-pink-700: #a31545;
+  --ls-pink-800: #801136;
+  --ls-pink-900: #5d0c28;
+  --ls-indigo-50: #f5f6fb;
+  --ls-indigo-100: #d1d5ed;
+  --ls-indigo-200: #acb4df;
+  --ls-indigo-300: #8893d1;
+  --ls-indigo-400: #6372c3;
+  --ls-indigo-500: #3f51b5;
+  --ls-indigo-600: #36459a;
+  --ls-indigo-700: #2c397f;
+  --ls-indigo-800: #232d64;
+  --ls-indigo-900: #192048;
+  --ls-teal-50: #f2faf9;
+  --ls-teal-100: #c2e6e2;
+  --ls-teal-200: #91d2cc;
+  --ls-teal-300: #61beb5;
+  --ls-teal-400: #30aa9f;
+  --ls-teal-500: #009688;
+  --ls-teal-600: #008074;
+  --ls-teal-700: #00695f;
+  --ls-teal-800: #00534b;
+  --ls-teal-900: #003c36;
+  --ls-orange-50: #fff8f2;
+  --ls-orange-100: #fde0c2;
+  --ls-orange-200: #fbc791;
+  --ls-orange-300: #f9ae61;
+  --ls-orange-400: #f79530;
+  --ls-orange-500: #f57c00;
+  --ls-orange-600: #d06900;
+  --ls-orange-700: #ac5700;
+  --ls-orange-800: #874400;
+  --ls-orange-900: #623200;
+  --ls-bluegray-50: #f7f9f9;
+  --ls-bluegray-100: #d9e0e3;
+  --ls-bluegray-200: #bbc7cd;
+  --ls-bluegray-300: #9caeb7;
+  --ls-bluegray-400: #7e96a1;
+  --ls-bluegray-500: #607d8b;
+  --ls-bluegray-600: #526a76;
+  --ls-bluegray-700: #435861;
+  --ls-bluegray-800: #35454c;
+  --ls-bluegray-900: #263238;
+  --ls-purple-50: #faf4fb;
+  --ls-purple-100: #e7cbec;
+  --ls-purple-200: #d4a2dd;
+  --ls-purple-300: #c279ce;
+  --ls-purple-400: #af50bf;
+  --ls-purple-500: #9c27b0;
+  --ls-purple-600: #852196;
+  --ls-purple-700: #6d1b7b;
+  --ls-purple-800: #561561;
+  --ls-purple-900: #3e1046;
+  --ls-gray-50: #fafafa;
+  --ls-gray-100: #f5f5f5;
+  --ls-gray-200: #eeeeee;
+  --ls-gray-300: #e0e0e0;
+  --ls-gray-400: #bdbdbd;
+  --ls-gray-500: #9e9e9e;
+  --ls-gray-600: #757575;
+  --ls-gray-700: #616161;
+  --ls-gray-800: #424242;
+  --ls-gray-900: #212121;
+  --ls-red-50: #fff5f5;
+  --ls-red-100: #ffd1ce;
+  --ls-red-200: #ffada7;
+  --ls-red-300: #ff8980;
+  --ls-red-400: #ff6459;
+  --ls-red-500: #ff4032;
+  --ls-red-600: #d9362b;
+  --ls-red-700: #b32d23;
+  --ls-red-800: #8c231c;
+  --ls-red-900: #661a14;
+  --ls-primary-10: #24243a;
+  --ls-primary-50: #f4fafe;
+  --ls-primary-100: #cae6fc;
+  --ls-primary-200: #a0d2fa;
+  --ls-primary-300: #75bef8;
+  --ls-primary-400: #4baaf5;
+  --ls-primary-500: #2196f3;
+  --ls-primary-600: #1c80cf;
+  --ls-primary-700: #1769aa;
+  --ls-primary-800: #125386;
+  --ls-primary-900: #0d3c61;
 }
 
 #nprogress {
   .bar {
-    background: #6E42CA;
+    background: var(--ls-primary-color);
   }
 
   .peg {
-    box-shadow: 0 0 10px #6E42CA, 0 0 5px #6E42CA;
+    box-shadow: 0 0 10px var(--ls-primary-color), 0 0 5px var(--ls-primary-color);
   }
 
 }
 
-.p-component {
-  font-family: var(--font-family);
-}
-
-.p-overlaypanel {
-  background: rgb(25, 27, 31);
-  border: 1px solid rgb(33, 36, 41);
-  box-shadow: rgb(0 0 0 / 5%) 0px 4px 8px 0px;
-
-  &::before,
-  &::after {
-    display: none;
+.p-dialog-mask.p-component-overlay, .swap__container {
+  .p-component {
+    font-family: var(--ls-font-family);
   }
-}
 
-.p-dialog {
-  border: none;
-  box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
-    rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
+  .p-overlaypanel {
+    background: rgb(25, 27, 31);
+    border: 1px solid rgb(33, 36, 41);
+    box-shadow: rgb(0 0 0 / 5%) 0px 4px 8px 0px;
 
-  .p-dialog-header {
-    background: var(--surface-card);
-    color: var(--text-color);
-    border: none;
-    border-top-left-radius: 24px !important;
-    border-top-right-radius: 24px !important;
+    &::before,
+    &::after {
+      display: none;
+    }
   }
 
-  .p-dialog-content {
-    background: var(--surface-card);
+  .p-dialog {
     border: none;
-    border-bottom-left-radius: 24px !important;
-    border-bottom-right-radius: 24px !important;
-  }
-}
+    box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
+    rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
 
-.account {
-  .p-dialog-header {
-    padding: 1rem;
-    padding-top: 24px;
-  }
-  .p-dialog-content {
-    padding: 1rem;
+    .p-dialog-header {
+      background: var(--ls-surface-card);
+      color: var(--ls-text-color);
+      border: none;
+      border-top-left-radius: 24px !important;
+      border-top-right-radius: 24px !important;
+    }
+
+    .p-dialog-content {
+      background: var(--ls-surface-card);
+      border: none;
+      border-bottom-left-radius: 24px !important;
+      border-bottom-right-radius: 24px !important;
+    }
   }
-}
 
-.p-menu {
-  margin-top: 10px;
-  &.p-menu-overlay {
-    overflow: hidden !important;
-    border: 0;
-    border-radius: 24px;
-    min-width: 230px !important;
-    background: var(--surface-card);
-    box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
+  .p-menu {
+    margin-top: 10px;
+    &.p-menu-overlay {
+      overflow: hidden !important;
+      border: 0;
+      border-radius: 24px;
+      min-width: 230px !important;
+      background: var(--ls-surface-card);
+      box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
       rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
+    }
   }
-}
 
-.p-inputtext {
-  background: #24243a;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid var(--surface-card);
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+  .p-inputtext {
+    background: var(--ls-primary-10);
+    padding: 0.75rem 0.75rem;
+    border: 1px solid var(--ls-surface-card);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
     box-shadow 0.2s;
-  appearance: none;
-  border-radius: 6px;
+    appearance: none;
+    border-radius: 6px;
 
-  &.p-invalid.p-component {
-    border-color: #ca4242 !important;
+    &.p-invalid.p-component {
+      border-color: var(--ls-border-color-invalid) !important;
+    }
   }
-}
-.p-inputtext:enabled:hover {
-  border-color: #c4b5fd;
-}
-.p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
-  border-color: #c4b5fd;
-}
-.p-inputtext.p-invalid.p-component {
-  border-color: #fca5a5;
-}
-.p-inputtext.p-inputtext-sm {
-  font-size: 0.875rem;
-  padding: 0.65625rem 0.65625rem;
-}
-.p-inputtext.p-inputtext-lg {
-  font-size: 1.25rem;
-  padding: 0.9375rem 0.9375rem;
-}
-
-.p-toast-detail {
-  white-space: break-spaces;
-  word-break: break-word;
-}
-
-.p-inline-message {
-  border-radius: 16px;
-  font-weight: 400;
-  &.p-inline-message-error {
-    background: rgba(#ca4242, 0.2);
-    border-color: #ca4242;
+  .p-inputtext:enabled:hover {
+    border-color: #c4b5fd;
   }
-
-  &.p-inline-message-warn {
-    background: rgba(#F6851B, 0.2);
-    border-color: #F6851B;
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
+    border-color: #c4b5fd;
   }
-
-  &.p-inline-message-info {
-    background-color: rgba(110, 66, 202, 0.2);
-    border-color: #6e42ca;
-
-    .p-inline-message-icon {
-      color: #8557e7;
-    }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
   }
-
-  .p-inline-message-text {
-    font-size: 0.9375rem;
-    color: var(--text-color);
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
   }
-}
 
-.p-message {
-  &.p-message-warn {
-    background: #2d2116;
-    border: solid #cc8925;
-    border-width: 0 0 0 6px;
-    color: #cc8925;
+  .p-toast-detail {
+    white-space: break-spaces;
+    word-break: break-word;
   }
 
-  &.p-message-info {
-    background: #262647;
-    border: solid var(--primary-color);
-    border-width: 0 0 0 6px;
-    color: var(--text-color);
+  .p-inline-message {
+    border-radius: 16px;
+    font-weight: 400;
+    &.p-inline-message-error {
+      background: rgba(var(--ls-border-color-invalid), 0.2);
+      border-color: var(--ls-border-color-invalid);
+    }
 
-    .p-message-icon {
-      color: var(--text-color);
+    &.p-inline-message-warn {
+      background: rgba(#F6851B, 0.2);
+      border-color: #F6851B;
     }
-  }
-}
 
-.p-button {
-  color: white;
-  background: var(--primary-color);
-  border: 1px solid var(--primary-color);
-  padding: 0.75rem 1.25rem;
-  font-size: 1rem;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
-    box-shadow 0.2s;
-  border-radius: 16px;
+    &.p-inline-message-info {
+      background-color: rgba(110, 66, 202, 0.2);
+      border-color: #6e42ca;
 
-  .p-button-label {
-    font-weight: 500;
-  }
-  &.p-button-secondary {
-    background: #1c1c33;
-    border-color: #1c1c33;
-    color: var(--gray-300);
-    &:enabled:hover {
-      background: lighten(#1c1c33, 5%);
-      border-color: #1c1c33;
-      color: var(--gray-50);
-    }
-    &:enabled:focus {
-      box-shadow: none;
+      .p-inline-message-icon {
+        color: #8557e7;
+      }
     }
-  }
-}
-.p-button:enabled:hover {
-  background: #b3a0fc;
-  color: #1c2127;
-  border-color: #b3a0fc;
-}
-.p-button:enabled:active {
-  background: #a28bfc;
-  color: #1c2127;
-  border-color: #a28bfc;
-}
-
-.p-dialog-mask {
-  z-index: 1000 !important;
-  background-color: rgba(0, 0, 0, 0.4) !important;
-}
 
-.p-overlaypanel {
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  z-index: 3;
-  padding: 6px 16px;
-
-  .p-overlaypanel-content {
-    border-radius: 24px;
-    background: #1e1e30;
-    box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
-      rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
+    .p-inline-message-text {
+      font-size: 0.9375rem;
+      color: var(--ls-text-color);
+    }
   }
-}
 
-.p-button {
-  color: white;
-  background: var(--primary-color);
-  border: 1px solid var(--primary-color);
-  border-radius: 100px;
-  padding: 0.75rem 1.25rem;
-  font-size: 1rem;
-  font-weight: 500;
+  .p-message {
+    &.p-message-warn {
+      background: #2d2116;
+      border: solid #cc8925;
+      border-width: 0 0 0 6px;
+      color: #cc8925;
+    }
 
-  .p-button-label {
-    font-weight: 500;
-  }
+    &.p-message-info {
+      background: #262647;
+      border: solid var(--ls-primary-color);
+      border-width: 0 0 0 6px;
+      color: var(--ls-text-color);
 
-  &:disabled {
-    opacity: 0.5;
+      .p-message-icon {
+        color: var(--ls-text-color);
+      }
+    }
   }
 
-  &.p-button-secondary {
-    background: #43395b;
+  .p-button {
     color: white;
-    border-width: 0px;
-    border-radius: 100px;
-
-    &:enabled:hover {
-      background: #483a6b;
-      color: white;
-    }
-
-    &:enabled:active {
-      background: #3c3257;
-      color: white;
-    }
+    background: var(--ls-primary-color);
+    border: 1px solid var(--ls-primary-color);
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+    box-shadow 0.2s;
+    border-radius: 16px;
 
-    &:enabled:focus {
-      box-shadow: none;
+    .p-button-label {
+      font-weight: 500;
     }
-
-    &:disabled {
-      opacity: 0.6;
+    &.p-button-secondary {
+      background: #1c1c33;
+      border-color: #1c1c33;
+      color: var(--ls-gray-300);
+      &:enabled:hover {
+        background: lighten(#1c1c33, 5%);
+        border-color: #1c1c33;
+        color: var(--ls-gray-50);
+      }
+      &:enabled:focus {
+        box-shadow: none;
+      }
     }
   }
-
-  &:enabled:hover {
-    color: white;
+  .p-button:enabled:hover {
+    background: #b3a0fc;
+    color: #1c2127;
+    border-color: #b3a0fc;
   }
-
-  &:enabled:active {
-    color: white;
+  .p-button:enabled:active {
+    background: #a28bfc;
+    color: #1c2127;
+    border-color: #a28bfc;
   }
 
-  &.p-button-primary {
-    position: relative;
-    border-width: 0px;
-    border-radius: 100px;
-    background-image: linear-gradient(90deg, #6e42ca 0%, #8d29c1 100%);
-    z-index: 1;
-
-    &::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-image: linear-gradient(90deg, #6039b0 0%, #8d29c1 30.44%);
-      z-index: -1;
-      transition: all 0.25s ease-in-out;
-      opacity: 0;
-    }
-
-    &::before {
-      position: absolute;
-      content: '';
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-image: linear-gradient(90deg, #8d6ad5 0%, #6f42ca 100%);
-      z-index: -1;
-      transition: all 0.25s ease-in-out;
-      opacity: 0;
-    }
-
-    &:active::after {
-      opacity: 1;
-    }
-
-    &:hover::before {
-      opacity: 1;
-    }
+  .p-dialog-mask {
+    z-index: 1000 !important;
+    background-color: rgba(0, 0, 0, 0.4) !important;
   }
 
-  &:enabled:hover {
-    color: white;
-    background-color: #8d6ad5;
+  .p-overlaypanel {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    z-index: 3;
+    padding: 6px 16px;
+
+    .p-overlaypanel-content {
+      border-radius: 24px;
+      background: #1e1e30;
+      box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
+      rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
+    }
   }
 
-  &:enabled:active {
+  .p-button {
     color: white;
-    background-color: #8d6ad5;
-  }
-
-  &.p-button-warning_custom {
-    background-color: #ee5d0c;
-    background-image: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
-
-    &::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-image: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
-      z-index: -1;
-      transition: all 0.25s ease-in-out;
-      opacity: 0;
-    }
+    background: var(--ls-primary-color);
+    border: 1px solid var(--ls-primary-color);
+    border-radius: 100px;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    font-weight: 500;
 
-    &::before {
-      position: absolute;
-      content: '';
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
-      z-index: -1;
-      transition: all 0.25s ease-in-out;
-      opacity: 0;
+    .p-button-label {
+      font-weight: 500;
     }
 
-    &:active::after {
-      opacity: 1;
+    &:disabled {
+      opacity: 0.5;
     }
 
-    &:hover::before {
-      opacity: 1;
+    &.p-button-secondary {
+      background: #43395b;
+      color: white;
+      border-width: 0px;
+      border-radius: 100px;
+
+      &:enabled:hover {
+        background: #483a6b;
+        color: white;
+      }
+
+      &:enabled:active {
+        background: #3c3257;
+        color: white;
+      }
+
+      &:enabled:focus {
+        box-shadow: none;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+      }
     }
 
     &:enabled:hover {
       color: white;
-      background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
     }
 
     &:enabled:active {
       color: white;
-      background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
     }
-  }
-
-  &.p-button-alert {
-    background-color: #C62828;
-    background-image: linear-gradient(89.82deg, #D75050 0.08%, #C62828 99.85%);
 
-    &::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-image: linear-gradient(89.82deg, #D75050 0.08%, #C62828 99.85%);
-    ;
-      z-index: -1;
-      transition: all 0.25s ease-in-out;
-      opacity: 0;
+    &.p-button-primary {
+      position: relative;
+      border-width: 0px;
+      border-radius: 100px;
+      background-image: linear-gradient(90deg, #6e42ca 0%, #8d29c1 100%);
+      z-index: 1;
+
+      &::after {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-image: linear-gradient(90deg, #6039b0 0%, #8d29c1 30.44%);
+        z-index: -1;
+        transition: all 0.25s ease-in-out;
+        opacity: 0;
+      }
+
+      &::before {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-image: linear-gradient(90deg, #8d6ad5 0%, #6f42ca 100%);
+        z-index: -1;
+        transition: all 0.25s ease-in-out;
+        opacity: 0;
+      }
+
+      &:active::after {
+        opacity: 1;
+      }
+
+      &:hover::before {
+        opacity: 1;
+      }
     }
 
-    &::before {
-      position: absolute;
-      content: '';
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
-    ;
-      z-index: -1;
-      transition: all 0.25s ease-in-out;
-      opacity: 0;
+    &:enabled:hover {
+      color: white;
+      background-color: #8d6ad5;
     }
 
-    &:active::after {
-      opacity: 1;
+    &:enabled:active {
+      color: white;
+      background-color: #8d6ad5;
     }
 
-    &:hover::before {
-      opacity: 1;
-    }
+    &.p-button-warning_custom {
+      background-color: #ee5d0c;
+      background-image: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
 
-    &:enabled:hover {
-      color: white;
-      background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
+      &::after {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-image: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
+        z-index: -1;
+        transition: all 0.25s ease-in-out;
+        opacity: 0;
+      }
+
+      &::before {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
+        z-index: -1;
+        transition: all 0.25s ease-in-out;
+        opacity: 0;
+      }
+
+      &:active::after {
+        opacity: 1;
+      }
+
+      &:hover::before {
+        opacity: 1;
+      }
+
+      &:enabled:hover {
+        color: white;
+        background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
+      }
+
+      &:enabled:active {
+        color: white;
+        background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
+      }
     }
 
-    &:enabled:active {
-      color: white;
-      background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
+    &.p-button-alert {
+      background-color: #C62828;
+      background-image: linear-gradient(89.82deg, #D75050 0.08%, #C62828 99.85%);
+
+      &::after {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-image: linear-gradient(89.82deg, #D75050 0.08%, #C62828 99.85%);
+      ;
+        z-index: -1;
+        transition: all 0.25s ease-in-out;
+        opacity: 0;
+      }
+
+      &::before {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
+      ;
+        z-index: -1;
+        transition: all 0.25s ease-in-out;
+        opacity: 0;
+      }
+
+      &:active::after {
+        opacity: 1;
+      }
+
+      &:hover::before {
+        opacity: 1;
+      }
+
+      &:enabled:hover {
+        color: white;
+        background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
+      }
+
+      &:enabled:active {
+        color: white;
+        background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
+      }
     }
   }
 }
diff --git a/src/types/aptosResources.ts b/src/types/aptosResources.ts
index fed7410..8fabe15 100644
--- a/src/types/aptosResources.ts
+++ b/src/types/aptosResources.ts
@@ -19,3 +19,12 @@ export type AptosCreateTx = {
   expiration: string;
   payload: AptosTxPayload;
 };
+
+export type AptosCoinInfoResource = {
+  decimals: string;
+  name: string;
+  supply: {
+    vec: [string];
+  };
+  symbol: string;
+};
diff --git a/src/utils/cache.ts b/src/utils/cache.ts
index d35fabe..e93f7a4 100644
--- a/src/utils/cache.ts
+++ b/src/utils/cache.ts
@@ -7,8 +7,8 @@ const cache = new Map<string, CacheItem>();
 
 export async function getFromCache(
   key: string,
-  getter: () => Promise<any>,
-  options?: { time?: number },
+  getter: (() => Promise<any>) | ((...args: any[]) => Promise<any>),
+  options?: { time?: number; args?: any[] },
 ): Promise<any> {
   const maxTime = options?.time || 0;
 
@@ -20,6 +20,12 @@ export async function getFromCache(
     }
   }
 
+  if (options?.args) {
+    const { args } = options;
+    cache.set(key, { time: Date.now(), promise: getter(...args) });
+    return (cache.get(key) as CacheItem).promise;
+  }
+
   cache.set(key, { time: Date.now(), promise: getter() });
 
   return (cache.get(key) as CacheItem).promise;
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 16769bb..78ecf6e 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -222,3 +222,6 @@ export function getFormattedValidationCode(error: Error) {
     .join(' ')
     .toLowerCase();
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function nope() {}
diff --git a/vite.config.js b/vite.config.js
index 87a6949..9a683cb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,6 +8,9 @@ import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
 
 import dts from 'vite-plugin-dts';
 
+import _package from './package.json';
+
+const { version } = _package;
 
 export default defineConfig({
   plugins: [
@@ -58,6 +61,7 @@ export default defineConfig({
   define: {
     'process.env.NODE_ENV': '"production"',
     'process.env.VUE_APP_CORRECT_CHAIN': '"mainnet"',
+    'process.env.VERSION': `"${version}"`,
     // For testnet environment:
     // 'process.env.VUE_APP_MODULES_ACCOUNT': '"0x190d44266241744264b964a37b8f09863167a12d3e70cda39376cfb4e3561e12"',
     // 'process.env.VUE_APP_MODULES_V05_ACCOUNT': '"0x45ef7a3a1221e7c10d190a550aa30fa5bc3208ed06ee3661ec0afa3d8b418580"',
diff --git a/yarn.lock b/yarn.lock
index 93ec2eb..70f29af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -307,10 +307,10 @@
     react-dom "^18.X.X || 17.X.X"
     vue "3.2.40"
 
-"@pontem/coins-registry@2.1.44":
-  version "2.1.44"
-  resolved "https://registry.yarnpkg.com/@pontem/coins-registry/-/coins-registry-2.1.44.tgz#39ff5a05379f2b60eec4ed0796750082b0d2cd4d"
-  integrity sha512-X0T+nAOJtkp/ySfJOAUjAshk+IlnAbGYb9OXdAjMT5bZ0VHS574aqCXTT9N7LgzVM515Y38r1Bnocs4JZdoPow==
+"@pontem/coins-registry@2.1.64":
+  version "2.1.64"
+  resolved "https://registry.yarnpkg.com/@pontem/coins-registry/-/coins-registry-2.1.64.tgz#7714e2be66122f3073b7b94860b07ac0a698cffe"
+  integrity sha512-yrDco9ckmCjcqlSDM40zTPtj97QZguRCJH0fBpj3HgfDkf3wpUNBryBg/n3W/qNMomeY2xrzy93OtfXR++jHKA==
 
 "@pontem/liquidswap-sdk@0.6.1":
   version "0.6.1"