diff --git a/packages/extension/src/ui/action/components/app-menu/index.vue b/packages/extension/src/ui/action/components/app-menu/index.vue
index ce5d1c027..1b7d11aa2 100644
--- a/packages/extension/src/ui/action/components/app-menu/index.vue
+++ b/packages/extension/src/ui/action/components/app-menu/index.vue
@@ -40,6 +40,7 @@
             <more-icon />
           </tooltip>
         </button>
+        <!-- DROPDOWN MENU-->
         <div v-show="isOpenMore" ref="dropdown" class="app__menu-dropdown">
           <button class="app__menu-dropdown-link" @click="otherNetworksAction">
             <manage-networks-icon /> <span>Other networks</span>
@@ -65,6 +66,7 @@
         </div>
       </div>
     </div>
+    <!-- SEARCH-->
     <base-search
       ref="searchNetworksComponent"
       v-show="isExpanded"
@@ -83,6 +85,18 @@
         </button>
       </tooltip>
     </div>
+    <!-- Cross Chain SWAP -->
+    <button
+      v-if="isExpanded"
+      class="app__menu__cross-chain-button"
+      @click="openSwap"
+    >
+      <swap-multicolor-icon />
+      <div>
+        <p class="title">Cross Chain Swap</p>
+        <p class="subtext">Swap assets on any chains</p>
+      </div>
+    </button>
 
     <!-- Networks Tabs  -->
     <app-menu-tab
@@ -198,7 +212,9 @@ import { useUpdatesStore } from '@action/store/updates-store';
 import { storeToRefs } from 'pinia';
 import { onClickOutside } from '@vueuse/core';
 import SearchIcon from '@action/icons/common/search.vue';
+import SwapMulticolorIcon from '@action/icons/actions/swap-multicolor.vue';
 import { useMenuStore } from '@action/store/menu-store';
+import { useRoute, useRouter } from 'vue-router';
 
 const appMenuRef = ref(null);
 
@@ -524,6 +540,24 @@ const updateGradient = (newGradient: string) => {
     (appMenuRef.value as HTMLElement).style.background =
       `radial-gradient(137.35% 97% at 100% 50%, rgba(250, 250, 250, 0.94) 0%, rgba(250, 250, 250, 0.96) 28.91%, rgba(250, 250, 250, 0.98) 100%), linear-gradient(180deg, ${newGradient} 80%, #684CFF 100%)`;
 };
+
+/** ------------------
+ * Swap Button
+ ------------------*/
+const route = useRoute();
+const router = useRouter();
+const openSwap = () => {
+  try {
+    router.push({
+      name: 'swap',
+      params: {
+        id: route.params.id,
+      },
+    });
+  } catch (e) {
+    console.error('Error opening swap:', e);
+  }
+};
 </script>
 
 <style lang="less">
@@ -688,7 +722,7 @@ const updateGradient = (newGradient: string) => {
       box-shadow 0.4s ease-in-out;
     &__scroll-area {
       &-expand {
-        height: 448px;
+        height: 382px;
       }
       &-collapse {
         height: 496px;
@@ -753,6 +787,43 @@ const updateGradient = (newGradient: string) => {
     box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.25);
     backdrop-filter: blur(40px);
   }
+  &__cross-chain-button {
+    background: @white;
+    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
+    padding: 8px 12px;
+    margin-top: 8px;
+    margin-bottom: 1px;
+    width: 100%;
+    border-radius: 10px;
+    display: flex;
+    gap: 12px;
+    justify-content: flex-start;
+    align-items: center;
+    transition: background 300ms ease-in-out;
+    text-align: left;
+
+    p {
+      margin: 0;
+    }
+    .title {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+      letter-spacing: 0.15px;
+    }
+    .subtext {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.5px;
+      color: @black06;
+    }
+
+    svg {
+      width: 42px !important;
+      height: 42px !important;
+    }
+  }
 }
 button {
   background: none;
diff --git a/packages/extension/src/ui/action/icons/actions/swap-multicolor.vue b/packages/extension/src/ui/action/icons/actions/swap-multicolor.vue
new file mode 100644
index 000000000..20bcbad0d
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/actions/swap-multicolor.vue
@@ -0,0 +1,36 @@
+<template>
+  <svg
+    width="42"
+    height="42"
+    viewBox="0 0 42 42"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.91173 12.435C7.02792 14.2258 6.81526 16.1458 6.76499 18.583L4.59099 16.409C3.71231 15.5303 2.28769 15.5303 1.40901 16.409C0.53033 17.2877 0.53033 18.7123 1.40901 19.591L7.40901 25.591C7.83097 26.0129 8.40326 26.25 9 26.25C9.59674 26.25 10.169 26.0129 10.591 25.591L16.591 19.591C17.4697 18.7123 17.4697 17.2877 16.591 16.409C15.7123 15.5303 14.2877 15.5303 13.409 16.409L11.2735 18.5445C11.3243 16.3953 11.4807 15.3714 11.9471 14.4265C12.4766 13.3536 13.7082 12.0683 14.7576 11.4935C16.0512 10.785 17.2061 10.6915 20.8011 10.5382C21.3806 10.5135 21.9494 10.5 22.4999 10.5C26.0995 10.5 28.5599 10.8599 30.0743 11.1964C30.8318 11.3647 31.354 11.5275 31.6652 11.6374C31.8208 11.6923 31.924 11.7341 31.9777 11.7569C31.9992 11.766 32.0128 11.7721 32.0187 11.7747C33.1253 12.3114 34.4609 11.8594 35.0124 10.7562C35.5681 9.64476 35.1176 8.29325 34.0062 7.73753L33 9.75C34.0062 7.73753 34.0042 7.73653 34.0042 7.73653L34.0021 7.7355L33.9977 7.73334L33.9882 7.72865L33.9658 7.71775C33.9493 7.70984 33.9298 7.70064 33.9073 7.69024C33.8622 7.66944 33.805 7.64386 33.7351 7.61423C33.5954 7.55497 33.4056 7.47958 33.1628 7.3939C32.6771 7.22247 31.9806 7.01026 31.0505 6.80358C29.1899 6.39011 26.4003 6 22.4999 6C21.877 6 21.2437 6.01522 20.6094 6.04226L20.2686 6.05669C17.1295 6.18906 14.9034 6.28294 12.596 7.54672C10.7361 8.56538 8.85021 10.5334 7.91173 12.435ZM33.0001 15.75C33.5968 15.75 34.1691 15.9871 34.5911 16.409L40.5911 22.409C41.4698 23.2877 41.4698 24.7123 40.5911 25.591C39.7124 26.4697 38.2878 26.4697 37.4091 25.591L35.2353 23.4172C35.185 25.8542 34.9723 27.7742 34.0885 29.565C33.1501 31.4666 31.2642 33.4346 29.4043 34.4533C27.0969 35.7171 24.8707 35.8109 21.7317 35.9433L21.3909 35.9577C20.7565 35.9848 20.1233 36 19.5004 36C15.5999 36 12.8104 35.6099 10.9498 35.1964C10.0197 34.9897 9.32312 34.7775 8.83742 34.6061C8.59465 34.5204 8.40484 34.445 8.26514 34.3858C8.19531 34.3561 8.09297 34.3098 8.09297 34.3098L7.9941 34.2625C6.88264 33.7067 6.43212 32.3552 6.98784 31.2438C7.53941 30.1406 8.87495 29.6886 9.98162 30.2253C9.98747 30.2279 10.0011 30.234 10.0226 30.2431C10.0763 30.2659 10.1794 30.3077 10.3351 30.3626C10.6463 30.4725 11.1685 30.6353 11.9259 30.8036C13.4403 31.1401 15.9008 31.5 19.5004 31.5C20.0508 31.5 20.6196 31.4865 21.1992 31.4618C24.7942 31.3085 25.9491 31.215 27.2427 30.5065C28.292 29.9317 29.5237 28.6464 30.0532 27.5735C30.5195 26.6286 30.6759 25.6046 30.7268 23.4553L28.5911 25.591C27.7124 26.4697 26.2878 26.4697 25.4091 25.591C24.5304 24.7123 24.5304 23.2877 25.4091 22.409L31.4091 16.409C31.831 15.9871 32.4033 15.75 33.0001 15.75Z"
+      fill="url(#paint0_linear_7575_13629)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_7575_13629"
+        x1="41"
+        y1="21"
+        x2="1"
+        y2="21"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#CD64DD" />
+        <stop offset="1" stop-color="#2790EF" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/common/warning-icon.vue b/packages/extension/src/ui/action/icons/common/warning-icon.vue
new file mode 100644
index 000000000..16df6890b
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/warning-icon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  /* display: inline-block;
+  vertical-align: baseline; */
+}
+</style>
diff --git a/packages/extension/src/ui/action/styles/color.less b/packages/extension/src/ui/action/styles/color.less
index 139ff62c4..eb65156fa 100644
--- a/packages/extension/src/ui/action/styles/color.less
+++ b/packages/extension/src/ui/action/styles/color.less
@@ -2,6 +2,7 @@
 @primary01: rgba(5, 192, 165, 0.1);
 @primaryLight: rgba(104, 76, 255, 0.1);
 @primary007: rgba(104, 76, 255, 0.07);
+@primaryDarker: rgba(96, 60, 240, 1);
 
 @primaryLabel: #202124;
 @secondaryLabel: #5f6368;
@@ -15,6 +16,8 @@
 @grayPrimary: rgba(95, 99, 104, 1);
 @gray01: rgba(95, 99, 104, 0.1);
 @gray02: rgba(95, 99, 104, 0.2);
+@grey08: rgba(0, 0, 0, 0.08);
+@grey16: rgba(242, 244, 247, 1);
 @white07: rgba(255, 255, 255, 0.7);
 @white09: rgba(255, 255, 255, 0.9);
 @error: #f4432c;
@@ -28,6 +31,7 @@
 @buttonBg: #f2f4f7;
 @hoverItemBg: #f9fafb;
 @lightBg: #f9fafb;
+@lightSurfaceBg: rgba(249, 250, 251, 1);
 @tipBg: #fff7b2;
 @overlayBg: rgba(0, 0, 0, 0.3);
 @introHeaderBg: #f9fafb;
diff --git a/packages/extension/src/ui/action/styles/theme.less b/packages/extension/src/ui/action/styles/theme.less
index 4f03d08ef..b578810ba 100644
--- a/packages/extension/src/ui/action/styles/theme.less
+++ b/packages/extension/src/ui/action/styles/theme.less
@@ -8,3 +8,15 @@
   -ms-user-select: none;
   user-select: none;
 }
+.skeleton {
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: @gray01;
+  }
+  100% {
+    background-color: @lightSurfaceBg;
+  }
+}
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-address-select/components/address-item.vue b/packages/extension/src/ui/action/views/swap/components/swap-address-select/components/address-item.vue
new file mode 100644
index 000000000..4c3e58e98
--- /dev/null
+++ b/packages/extension/src/ui/action/views/swap/components/swap-address-select/components/address-item.vue
@@ -0,0 +1,83 @@
+<template>
+  <button class="address-item" @click="emit('selected:account', address)">
+    <div class="address-item__row">
+      <img :src="identicon(address)" class="address-item__identicon" />
+
+      <div v-if="account" class="send-address-item__name">
+        <h4>{{ account.name }}</h4>
+        <p>
+          {{ $filters.replaceWithEllipsis(address, 4, 4) }}
+        </p>
+      </div>
+      <DoneIcon
+        v-if="selected === address && account"
+        class="address-item__check"
+      />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { EnkryptAccount } from '@enkryptcom/types';
+import DoneIcon from '@action/icons/common/done_icon.vue';
+
+const emit = defineEmits<{
+  (e: 'selected:account', address: string): void;
+}>();
+const props = defineProps({
+  identicon: {
+    type: Function,
+    default: () => '',
+  },
+  address: {
+    type: String,
+    required: true,
+  },
+  account: {
+    type: Object as PropType<EnkryptAccount>,
+    required: false,
+  },
+  selected: {
+    type: String,
+    required: false,
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '@action/styles/theme.less';
+
+.address-item {
+  padding: 0;
+  width: 100%;
+  border-radius: 10px;
+  &:hover,
+  &:focus {
+    background: @black007;
+  }
+  &__row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    padding: 8px 10px;
+    gap: 12px;
+    text-align: left;
+  }
+  &__identicon {
+    flex-basis: auto;
+    background: @grey16;
+    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+    min-width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    overflow: hidden;
+    object-fit: contain;
+  }
+  &__check {
+    margin-left: auto;
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue
new file mode 100644
index 000000000..74b493084
--- /dev/null
+++ b/packages/extension/src/ui/action/views/swap/components/swap-address-select/index.vue
@@ -0,0 +1,409 @@
+<template>
+  <div class="app-select-address__container">
+    <!-- Button -->
+    <button
+      class="app-select-address"
+      @click="openDialog"
+      :class="{ skeleton: isLoading }"
+      :disabled="isLoading"
+    >
+      <div class="app-select-address__avatar">
+        <!-- Selected Identicon -->
+        <img
+          v-if="displayIdenticon"
+          :src="displayIdenticon"
+          alt=""
+          width="32px"
+          height="32px"
+        />
+      </div>
+      <!-- Selected Address -->
+      <div v-if="selectedAddress" class="app-select-address__info">
+        <div v-if="displaySelectedTitle" class="title">
+          {{ displaySelectedTitle }}
+        </div>
+        <div :class="['subtext', { subtext__warning: !internalAccount }]">
+          <span>
+            <warning-icon
+              v-if="!internalAccount"
+              class="app-select-address__warning"
+          /></span>
+
+          {{ displaySelectedSubtext }}
+        </div>
+      </div>
+      <div v-else class="app-select-address__no-selection">Loading Address</div>
+      <switch-arrow class="app-select-address__arrow" />
+    </button>
+    <!-- Address Input Dialog-->
+    <app-dialog v-model="isOpened">
+      <div class="app-select-address__dialog">
+        <!-- Header -->
+        <div class="app-select-address__dialog__header">
+          <h1>{{ titleInbutton }}</h1>
+        </div>
+        <!-- Search -->
+        <div class="app-select-address__dialog__search">
+          <div class="app-select-address__avatar">
+            <img
+              v-if="searchIdenticon"
+              :src="searchIdenticon"
+              alt=""
+              width="32px"
+              height="32px"
+            />
+          </div>
+
+          <input
+            type="text"
+            v-model="search"
+            placeholder="Account name or address"
+            class="app-select-address__dialog__search__input"
+            @input="checkValidSearchAddress"
+          />
+        </div>
+        <!-- List -->
+        <div class="app-select-address__dialog__results">
+          <custom-scrollbar
+            class="app-select-address__dialog__scroll-area"
+            :settings="scrollSettings({ suppressScrollX: true })"
+          >
+            <h2>{{ myAccountsTitle }}</h2>
+            <address-item
+              v-for="(account, index) in searchAccounts"
+              :key="index"
+              :identicon="props.identicon"
+              :account="account"
+              :address="account.address"
+              :selected="selectedAddress"
+              @selected:account="setSelectedAddress"
+            />
+          </custom-scrollbar>
+        </div>
+      </div>
+    </app-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, ref, watchEffect, onMounted } from 'vue';
+import SwitchArrow from '@action/icons/header/switch_arrow.vue';
+import { EnkryptAccount, NetworkNames } from '@enkryptcom/types';
+import { getAccountsByNetworkName } from '@/libs/utils/accounts';
+import WarningIcon from '@/ui/action/icons/common/warning-icon.vue';
+import AppDialog from '@/ui/action/components/app-dialog/index.vue';
+import scrollSettings from '@/libs/utils/scroll-settings';
+import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
+import AddressItem from './components/address-item.vue';
+import { debounce } from 'lodash';
+
+const props = defineProps({
+  titleInbutton: {
+    type: String,
+    default: 'Select Address',
+  },
+  title: {
+    type: String,
+    default: 'Select Address',
+  },
+  hasExternalAccounts: {
+    type: Boolean,
+    default: true,
+  },
+  networkName: {
+    type: String as PropType<NetworkNames>,
+    required: false,
+  },
+  identicon: {
+    type: Function,
+    default: () => '',
+  },
+  isValidSearchAddress: {
+    type: Boolean,
+    default: () => false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: () => true,
+  },
+});
+
+/** -------------------
+ * Selected Address
+ -------------------*/
+const selectedAddress = defineModel<string | undefined>('selected-address', {
+  default: undefined,
+});
+
+const isLoadingAccounts = ref<boolean>(true);
+const displayAccounts = ref<EnkryptAccount[]>([]);
+
+const loadAccounts = async () => {
+  if (props.networkName) {
+    isLoadingAccounts.value = true;
+    displayAccounts.value = await getAccountsByNetworkName(props.networkName);
+    isLoadingAccounts.value = false;
+  }
+};
+
+onMounted(() => {
+  loadAccounts();
+});
+watchEffect(() => {
+  if (props.networkName) {
+    loadAccounts();
+  }
+});
+
+const getFormattedAddress = (address: string) => {
+  const firstPart = address.slice(0, 6);
+  const lastPart = address.slice(-4);
+  return `${firstPart}...${lastPart}`;
+};
+
+const internalAccount = computed(() => {
+  if (selectedAddress.value) {
+    const account = displayAccounts.value.find(
+      account => account.address === selectedAddress.value,
+    );
+    if (account) {
+      return account;
+    }
+  }
+  return undefined;
+});
+const displaySelectedTitle = computed<string | undefined>(() => {
+  if (selectedAddress.value) {
+    const account = internalAccount.value;
+    if (account) {
+      return account.name;
+    }
+    return getFormattedAddress(selectedAddress.value);
+  }
+  return undefined;
+});
+const displaySelectedSubtext = computed<string | undefined>(() => {
+  if (selectedAddress.value) {
+    const account = internalAccount.value;
+    if (account) {
+      return getFormattedAddress(selectedAddress.value);
+    }
+    return 'External account';
+  }
+  return undefined;
+});
+const displayIdenticon = computed(() => {
+  if (selectedAddress.value) {
+    return props.identicon(selectedAddress.value);
+  }
+  return undefined;
+});
+
+const setSelectedAddress = (address: string) => {
+  selectedAddress.value = address;
+  isOpened.value = false;
+};
+/** -------------------
+ * Dialog
+ -------------------*/
+const isOpened = ref<boolean>(false);
+const openDialog = () => {
+  isOpened.value = true;
+};
+
+const myAccountsTitle = computed(() => {
+  return `My ${props.networkName} Accounts`;
+});
+/** -------------------
+ * Search
+ -------------------*/
+const search = ref<string>('');
+const emit = defineEmits<{
+  (e: 'update:search', search: string): void;
+}>();
+
+const searchIdenticon = computed(() => {
+  if (search.value && props.isValidSearchAddress) {
+    return props.identicon(search.value);
+  }
+  return undefined;
+});
+
+const searchAccounts = computed(() => {
+  if (search.value) {
+    return displayAccounts.value.filter(
+      account =>
+        account.name.toLowerCase().includes(search.value.toLowerCase()) ||
+        account.address.toLowerCase().includes(search.value.toLowerCase()),
+    );
+  }
+  return displayAccounts.value;
+});
+const checkValidSearchAddress = debounce(() => {
+  emit('update:search', search.value);
+}, 200);
+</script>
+
+<style lang="less" scoped>
+@import '@action/styles/theme.less';
+.app-select-address {
+  &:focus-visible {
+    outline: none !important;
+    border-color: @primary;
+  }
+  &__container {
+    display: flex;
+    width: 100%;
+  }
+  width: 100%;
+  background: @white;
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  border: 1px solid @grey08;
+  height: 52px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 300ms ease-in-out;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  &:hover {
+    background: @black007;
+  }
+
+  &__avatar {
+    flex-basis: auto;
+    background: @white;
+    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
+    min-width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    overflow: hidden;
+    object-fit: contain;
+  }
+  &__info {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    text-align: left;
+    padding-left: 8px;
+
+    .title {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @black;
+      span {
+        font-variant: small-caps;
+      }
+    }
+    .subtext {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.5px;
+      color: @black06;
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      &__warning {
+        margin-left: -4px;
+      }
+    }
+  }
+  &__no-selection {
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: @black06;
+    letter-spacing: 0.25px;
+    margin: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-left: 8px;
+  }
+  &__arrow {
+    margin-left: auto;
+    min-width: 24px;
+  }
+  &__warning {
+    width: 12px;
+    height: 12px;
+    display: inline;
+    vertical-align: middle;
+    z-index: 1;
+  }
+  &__dialog {
+    height: 568px;
+    &__header {
+      padding: 14px 56px 14px 16px;
+      h1 {
+        font-style: normal;
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 28px;
+        color: @primaryLabel;
+        margin: 0;
+      }
+    }
+    &__results {
+      border-top: 1px solid @gray02;
+      padding: 0 8px;
+      h2 {
+        font-family: Roboto;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.25px;
+        margin-left: 8px;
+      }
+    }
+    &__scroll-area {
+      position: relative;
+      width: 100%;
+      max-height: 400px !important;
+      margin: 0 0 8px 0;
+      padding: 0 !important;
+      &.ps--active-y {
+        padding-right: 0;
+      }
+    }
+    .ps__rail-y {
+      right: 0px !important;
+    }
+
+    &__search {
+      display: flex;
+      align-items: center;
+      min-height: 56px;
+      padding: 0px 16px;
+      gap: 8px;
+
+      input {
+        width: 100%;
+        height: 40px;
+        border-radius: 10px;
+        border: 0px;
+        padding: 4px;
+        border: 0 none;
+        outline: none;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0.25px;
+        color: @primaryLabel;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue
index 6e7431406..6a3e78cc9 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-network-select/index.vue
@@ -1,19 +1,23 @@
 <template>
-  <a v-if="network" class="swap-token-select" @click="$emit('toggle:select')">
-    <div class="swap-token-select__image">
-      <img :src="network.logoURI" alt="" />
-    </div>
-    <div class="swap-token-select__info">
-      <h5>To Network</h5>
-      <p>
-        {{ network.name }}
-      </p>
-    </div>
-
-    <div class="swap-token-select__arrow">
-      <switch-arrow />
-    </div>
-  </a>
+  <div class="swap-network-select__container">
+    <button
+      class="swap-network-select"
+      :class="{ skeleton: !network }"
+      @click="$emit('toggle:select')"
+      :disabled="!network"
+    >
+      <div class="swap-network-select__image">
+        <img v-if="network" :src="network.logoURI" alt="" />
+      </div>
+      <div class="swap-network-select__info">
+        <h5>Network</h5>
+        <p v-if="network">
+          {{ network.name }}
+        </p>
+      </div>
+      <switch-arrow class="swap-network-select__arrow" />
+    </button>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -27,28 +31,34 @@ defineEmits<{
 defineProps({
   network: {
     type: Object as PropType<NetworkInfo | null>,
-    default: () => {
-      return {};
-    },
   },
 });
 </script>
 
 <style lang="less">
 @import '@action/styles/theme.less';
-.swap-token-select {
-  height: 54px;
-  background: #ffffff;
+
+.swap-network-select {
+  flex-grow: 1;
+  width: 100%;
+  &:focus-visible {
+    outline: none !important;
+    border-color: @primary;
+  }
+  &__container {
+    flex-grow: 1;
+    width: 100%;
+  }
+  background: @white;
+  padding: 8px;
   box-sizing: border-box;
   border-radius: 10px;
-  width: 100%;
-  padding: 16px;
-  margin-bottom: 3px;
+  border: 1px solid @grey08;
+  height: 52px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
-  position: relative;
   cursor: pointer;
   text-decoration: none;
   transition: background 300ms ease-in-out;
@@ -58,57 +68,49 @@ defineProps({
   }
 
   &__image {
-    background: @buttonBg;
+    background: @white;
     box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
     width: 32px;
     height: 32px;
     border-radius: 100%;
     overflow: hidden;
-    margin-right: 12px;
+    margin-right: 8px;
     img {
       width: 100%;
       height: 100%;
     }
   }
   &__info {
-    h4 {
-      font-style: normal;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      color: @primaryLabel;
-      width: 290px;
-      margin: 0;
-    }
+    flex-shrink: 1;
+    text-align: left;
     h5 {
-      font-style: normal;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-      color: @primaryLabel;
-      width: 290px;
-      margin: 0 0 1px 0;
-    }
-    p {
-      font-style: normal;
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
       letter-spacing: 0.5px;
-      color: @secondaryLabel;
+      color: @black06;
+      margin: 0;
+    }
+    p {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.25px;
+      color: @black;
       margin: 0;
-      width: 290px;
       span {
         font-variant: small-caps;
       }
     }
+    &__loading {
+      width: 80px;
+      height: 20px;
+      border-radius: 20px;
+    }
   }
   &__arrow {
-    position: absolute;
-    font-size: 0;
-    padding: 4px;
-    right: 8px;
-    top: 16px;
+    margin-left: auto;
+    min-width: 24px;
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue
index b086aa495..d3e91a0c0 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue
@@ -97,14 +97,14 @@ const onlyNumber = ($event: KeyboardEvent) => {
   outline: none;
   background: @white;
   margin: 0;
-  padding: 0 76px 0 16px;
+  padding: 0px 10px 0px 0;
   font-style: normal;
   font-weight: 400;
-  font-size: 34px;
+  font-size: 32px;
   line-height: 40px;
   letter-spacing: 0.25px;
   color: @primaryLabel;
-  width: 100%;
+  width: 230px;
   box-sizing: border-box;
   border: 0 none;
   -moz-appearance: textfield;
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue
index 28051b97e..9838840c4 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/index.vue
@@ -1,31 +1,35 @@
 <template>
   <div class="swap-token-input" :class="{ focus: isFocus }">
-    <swap-token-select v-bind="$attrs" :token="token" />
-
-    <swap-token-amount-input
-      v-show="!!token"
-      placeholder="Enter amount"
-      v-bind="$attrs"
-      :value="value"
-      :autofocus="autofocus"
-      :change-focus="changeFocus"
-      :error="!!errorMessage"
-    />
-
-    <a
-      v-show="!!token && token.address !== NATIVE_TOKEN_ADDRESS"
-      class="swap-token-input__max"
-      @click="$emit('update:inputMax')"
-      >Max</a
-    >
-    <div v-if="errorMessage" class="swap-token-input__invalid">
-      {{ errorMessage }}
+    <div class="swap-token-input__row">
+      <swap-token-amount-input
+        placeholder="0.0"
+        v-bind="$attrs"
+        :value="value"
+        :autofocus="autofocus"
+        :change-focus="changeFocus"
+        :error="!!errorMessage"
+      />
+      <swap-token-select v-bind="$attrs" :token="token" />
     </div>
-    <div
-      v-else-if="!!token && Number(value) > 0"
-      class="swap-token-input__fiat"
-    >
-      ≈ {{ $filters.parseCurrency(tokenPrice) }}
+    <div class="swap-token-input__row">
+      <div v-if="errorMessage" class="swap-token-input__invalid">
+        {{ errorMessage }}
+      </div>
+      <div
+        v-else-if="!!token"
+        class="swap-token-input__secondary-label swap-token-input__secondary-label__fiat"
+      >
+        ~{{
+          $filters.parseCurrency($filters.formatFiatValue(tokenPrice).value)
+        }}
+      </div>
+      <div
+        class="swap-token-input__secondary-label swap-token-input__secondary-label__balance"
+        :class="{ focus: isFocus }"
+      >
+        Balance:
+        {{ $filters.formatFloatingPointValue(tokenBalance).value }}
+      </div>
     </div>
   </div>
 </template>
@@ -43,7 +47,7 @@ defineEmits<{
 
 interface IProps {
   value: string;
-  token: TokenType;
+  token: TokenType | null;
   autofocus: boolean;
   errorMessage?: string;
 }
@@ -53,13 +57,20 @@ const props = defineProps<IProps>();
 const isFocus = ref(false);
 
 const tokenPrice = computed(() => {
-  if (props.value !== '') {
+  if (props.value !== '' && props.token) {
     const Token = new SwapToken(props.token);
     return Token.getReadableToFiat(props.value);
   }
   return 0;
 });
 
+const tokenBalance = computed(() => {
+  if (!props.token) {
+    return 0;
+  }
+  return new SwapToken(props.token).getBalanceReadable();
+});
+
 const changeFocus = (newVal: boolean) => {
   isFocus.value = newVal;
 };
@@ -69,47 +80,41 @@ const changeFocus = (newVal: boolean) => {
 @import '@action/styles/theme.less';
 .swap-token-input {
   width: 100%;
-  min-height: 125px;
-  border: 1px solid rgba(95, 99, 104, 0.2);
+  height: 100px;
+  border: 1px solid @grey08;
   box-sizing: border-box;
   border-radius: 10px;
   position: relative;
+  background-color: @white;
+  padding: 16px;
 
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
   &.focus {
     border: 1px solid @primary;
   }
 
-  &__max {
-    padding: 4px 8px;
-    text-decoration: none;
-    position: absolute;
-    width: 41px;
-    height: 24px;
-    right: 18px;
-    bottom: 30px;
-    background: rgba(0, 0, 0, 0.02);
-    border-radius: 6px;
-    cursor: pointer;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 0.8px;
-    box-sizing: border-box;
-    color: @primaryLabel;
-  }
-
-  &__fiat {
+  &__secondary-label {
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
-    text-align: center;
     letter-spacing: 0.25px;
-    color: @secondaryLabel;
-    position: absolute;
-    left: 16px;
-    bottom: 6px;
+    padding-top: 8px;
+    padding-left: 2px;
+    &__fiat {
+      color: @black06;
+    }
+    &__balance {
+      color: @black06;
+      margin-left: auto;
+      .focus {
+        color: @primaryDarker;
+      }
+    }
   }
 
   &__invalid {
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
index 6f1be6c1c..e05520b8b 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-token-select/index.vue
@@ -1,42 +1,40 @@
 <template>
-  <a v-if="!!token" class="swap-token-select" @click="open">
-    <div class="swap-token-select__image">
-      <img :src="token.logoURI" alt="" @error="imageLoadError" />
+  <button
+    class="swap-token-select"
+    :class="{ skeleton: !token }"
+    @click="open"
+    :disabled="!token"
+  >
+    <div
+      class="swap-token-select__image"
+      :class="{ 'swap-token-select__image__loading': !token }"
+    >
+      <img
+        v-if="token"
+        :src="token.logoURI"
+        alt=""
+        @error="imageLoadError"
+        width="28px"
+        height="28px"
+      />
     </div>
     <div class="swap-token-select__info">
-      <h5>
-        {{ $filters.truncate(token.name, 25) }}
+      <h5 v-if="token">
+        {{ $filters.truncate(token.symbol, 5) }}
       </h5>
-      <p>
-        {{
-          tokenBalance
-            ? $filters.formatFloatingPointValue(tokenBalance).value
-            : '~'
-        }}
-        <span>{{ token.symbol }}</span>
-      </p>
+      <div v-else class="swap-token-select__info__loading">Loading</div>
     </div>
 
     <div class="swap-token-select__arrow">
       <switch-arrow />
     </div>
-  </a>
-  <a v-else class="swap-token-select" @click="open">
-    <div v-show="!token" class="swap-token-select__info">
-      <h4>Select token</h4>
-    </div>
-
-    <div class="swap-token-select__arrow">
-      <switch-arrow />
-    </div>
-  </a>
+  </button>
 </template>
 
 <script setup lang="ts">
 import { ref, PropType } from 'vue';
 import SwitchArrow from '@action/icons/header/switch_arrow.vue';
-import { computed } from 'vue';
-import { TokenType, SwapToken } from '@enkryptcom/swap';
+import { TokenType } from '@enkryptcom/swap';
 import { imageLoadError } from '@/ui/action/utils/misc';
 
 const isOpen = ref(false);
@@ -44,22 +42,12 @@ const emit = defineEmits<{
   (e: 'toggle:select', isOpen: boolean): void;
 }>();
 
-const props = defineProps({
+defineProps({
   token: {
     type: Object as PropType<TokenType | null>,
-    default: () => {
-      return {};
-    },
   },
 });
 
-const tokenBalance = computed(() => {
-  if (props.token?.balance) {
-    return new SwapToken(props.token).getBalanceReadable();
-  }
-  return null;
-});
-
 const open = () => {
   isOpen.value = !isOpen.value;
   emit('toggle:select', isOpen.value);
@@ -69,12 +57,16 @@ const open = () => {
 <style lang="less">
 @import '@action/styles/theme.less';
 .swap-token-select {
-  height: 54px;
-  background: #ffffff;
+  &:focus-visible {
+    outline: none !important;
+    border: 1px solid @primary;
+  }
+  height: 36px;
+  background: @lightSurfaceBg;
   box-sizing: border-box;
-  border-radius: 10px;
-  width: 100%;
-  padding: 16px;
+  border-radius: 32px;
+  min-width: 99px;
+  padding: 4px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -90,56 +82,50 @@ const open = () => {
 
   &__image {
     background: @buttonBg;
-    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.16);
-    width: 32px;
-    height: 32px;
+    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.16) inset;
+    min-width: 28px;
+    max-width: 28px;
+    height: 28px;
     border-radius: 100%;
     overflow: hidden;
-    margin-right: 12px;
+    margin-right: 8px;
+    transition: background 300ms ease-in-out;
+
     img {
       width: 100%;
       height: 100%;
+      object-fit: contain;
+    }
+    &__loading {
+      background: @white;
     }
   }
   &__info {
-    h4 {
-      font-style: normal;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-      color: @primaryLabel;
-      width: 290px;
-      margin: 0;
-    }
     h5 {
       font-style: normal;
       font-weight: 400;
       font-size: 16px;
       line-height: 24px;
       color: @primaryLabel;
-      width: 290px;
-      margin: 0 0 1px 0;
+      margin: 0;
     }
-    p {
+    &__loading {
       font-style: normal;
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
       letter-spacing: 0.5px;
       color: @secondaryLabel;
-      margin: 0;
-      width: 290px;
       span {
         font-variant: small-caps;
       }
     }
   }
   &__arrow {
-    position: absolute;
-    font-size: 0;
-    padding: 4px;
-    right: 8px;
-    top: 16px;
+    margin-left: auto;
+    width: 24px;
+    height: 24px;
+    margin-right: -2px;
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/views/swap/index.vue b/packages/extension/src/ui/action/views/swap/index.vue
index ad00e35f3..c8406cdeb 100644
--- a/packages/extension/src/ui/action/views/swap/index.vue
+++ b/packages/extension/src/ui/action/views/swap/index.vue
@@ -4,73 +4,76 @@
       <div v-if="!!selected" class="swap">
         <div class="swap__header">
           <h3>Swap</h3>
-          <a class="swap__close" @click="router.go(-1)">
+          <button class="swap__close" @click="router.go(-1)">
             <close-icon />
-          </a>
+          </button>
         </div>
 
         <div class="swap__wrap">
-          <swap-token-amount-input
-            v-if="fromToken"
-            :value="fromAmount || ''"
-            :token="fromToken"
-            :autofocus="true"
-            :error-message="errors.inputAmount"
-            @update:input-max="setMax"
-            @toggle:select="toggleFromToken"
-            @update:value="inputAmountFrom"
-          />
-
-          <a class="swap__arrows"><swap-arrows /></a>
-
-          <swap-network-select
-            v-if="toNetwork"
-            :network="toNetwork"
-            @toggle:select="toggleToNetwork"
-          />
-
-          <swap-token-to-amount
-            :token="toToken"
-            :is-finding-rate="isFindingRate"
-            :fast-list="trendingToTokens"
-            :total-tokens="toTokens.length - trendingToTokens.length"
-            :amount="toAmount"
-            :no-providers="errors.noProviders"
-            @update:select-asset="selectTokenTo"
-            @toggle:select="toggleToToken"
-          />
-
-          <send-address-input
-            ref="addressInput"
-            :value="address"
-            :is-valid-address="addressIsValid"
-            :network-name="toAddressInputMeta.networkName"
-            :display-address="toAddressInputMeta.displayAddress"
-            :identicon="toAddressInputMeta.identicon"
-            @update:input-address="inputAddress"
-            @toggle:show-contacts="toggleSelectContact"
-          />
-
-          <send-contacts-list
-            :show-accounts="isOpenSelectContact"
-            :accounts="toAccounts"
-            :address="address"
-            :display-address="toAddressInputMeta.displayAddress"
-            :identicon="toAddressInputMeta.identicon"
-            @selected:account="selectAccount"
-            @update:paste-from-clipboard="addressInput.pasteFromClipboard()"
-            @close="toggleSelectContact"
-          />
+          <!-- FROM NETWORK, ADDRESS, TOKEN -->
+          <div class="swap__wrap__container">
+            <h2>From</h2>
+            <div class="swap__wrap__row">
+              <swap-network-select
+                :network="toNetwork"
+                @toggle:select="toggleToNetwork"
+              />
+              <swap-address-select
+                v-model:selected-address="fromSelectedAddress"
+                :is-loading="!toNetwork || !fromSelectedAddress"
+                :network-name="fromSelectedNetwork.name"
+                :identicon="fromSelectedNetwork.identicon"
+                :is-valid-search-address="false"
+                title="Swap from account"
+                :has-external-accounts="false"
+              ></swap-address-select>
+            </div>
+            <swap-token-amount-input
+              v-if="fromToken"
+              :value="fromAmount || ''"
+              :token="fromToken"
+              :autofocus="true"
+              :error-message="errors.inputAmount"
+              @toggle:select="toggleFromToken"
+              @update:value="inputAmountFrom"
+            />
+          </div>
+          <button class="swap__arrows" @click="reverseFromAndTo">
+            <swap-arrows />
+          </button>
+          <!-- TO NETWORK, ADDRESS, TOKEN -->
+          <div class="swap__wrap__container">
+            <h2>To</h2>
+            <div class="swap__wrap__row">
+              <swap-network-select
+                v-if="toNetwork"
+                :network="toNetwork"
+                @toggle:select="toggleToNetwork"
+              />
+              <swap-address-select
+                v-if="fromSelectedNetwork"
+                v-model:selected-address="fromSelectedAddress"
+                :is-loading="!toNetwork || !fromSelectedAddress"
+                :network-name="fromSelectedNetwork.name"
+                :identicon="fromSelectedNetwork.identicon"
+                :is-valid-search-address="false"
+                title="Swap from account"
+                :has-external-accounts="true"
+              ></swap-address-select>
+            </div>
+            <swap-token-amount-input
+              v-if="fromToken"
+              :value="fromAmount || ''"
+              :token="fromToken"
+              :autofocus="false"
+              :error-message="errors.inputAmount"
+              @toggle:select="toggleToToken"
+              @update:value="inputAmountFrom"
+            />
+          </div>
         </div>
 
         <div class="swap__buttons">
-          <div class="swap__buttons-cancel">
-            <base-button
-              title="Cancel"
-              :no-background="true"
-              @click="router.go(-1)"
-            />
-          </div>
           <div class="swap__buttons-send">
             <base-button
               :title="sendButtonTitle"
@@ -124,13 +127,11 @@ import CloseIcon from '@action/icons/common/close-icon.vue';
 import SwapArrows from '@action/icons/swap/swap-arrows.vue';
 import BaseButton from '@action/components/base-button/index.vue';
 import SwapTokenAmountInput from './components/swap-token-amount-input/index.vue';
-import SwapTokenToAmount from './components/swap-token-to-amount/index.vue';
 import AssetsSelectList from './components/swap-assets-select-list.vue';
 import NetworkSelectList from './components/swap-network-select/network-select-list.vue';
 import SwapLooking from './components/swap-loading/index.vue';
 import SwapErrorPopup from './components/swap-error/index.vue';
-import SendAddressInput from './components/send-address-input.vue';
-import SendContactsList from './components/send-contacts-list.vue';
+import SwapAddressSelect from './components/swap-address-select/index.vue';
 import { getAccountsByNetworkName } from '@/libs/utils/accounts';
 import { AccountsHeaderData } from '../../types/account';
 import { getNetworkByName } from '@/libs/utils/networks';
@@ -188,7 +189,13 @@ const props = defineProps({
 });
 
 const selected: string = route.params.id as string;
-
+/** -------------------
+ * From
+ -------------------*/
+const fromSelectedAddress = ref<string | undefined>(
+  props.accountInfo.selectedAccount?.address,
+);
+const fromSelectedNetwork = ref<BaseNetwork>(props.network);
 const fromTokens = ref<TokenType[]>();
 const fromToken = ref<TokenType | null>({
   name: 'Loading',
@@ -199,6 +206,9 @@ const fromToken = ref<TokenType | null>({
   type: '' as any,
 });
 const fromAmount = ref<string | null>(null);
+/** -------------------
+ * TO
+ -------------------*/
 const toNetworks = ref<NetworkInfo[]>([]);
 const toNetwork = ref<NetworkInfo | null>(null);
 const toNetworkOpen = ref(false);
@@ -225,8 +235,6 @@ const address = ref<string>('');
 /** Is the receiver address valid */
 const addressIsValid = ref(true);
 
-const isOpenSelectContact = ref<boolean>(false);
-const addressInput = ref();
 const toAccounts = ref<EnkryptAccount[]>([]);
 
 const fetchingTokens = ref(true);
@@ -238,6 +246,10 @@ const isLooking = ref(false);
 
 const swapMax = ref(false);
 
+const reverseFromAndTo = () => {
+  console.log('Reverse from and to token and amount');
+};
+
 let api: Web3Eth | Connection;
 switch (props.network.name) {
   case NetworkNames.Solana:
@@ -397,10 +409,6 @@ const setToTokens = () => {
   );
 };
 
-const setMax = () => {
-  fromAmount.value = new SwapToken(fromToken.value!).getBalanceReadable();
-};
-
 const inputAddress = (text: string) => {
   const debounceResolve = debounce(() => {
     nameResolver
@@ -420,10 +428,6 @@ const inputAddress = (text: string) => {
   isValidToAddress();
 };
 
-const toggleSelectContact = () => {
-  isOpenSelectContact.value = !isOpenSelectContact.value;
-};
-
 /**
  * Check whether the receiver address is a valid on the network
  *
@@ -727,11 +731,6 @@ const inputAmountFrom = async (newVal: string) => {
   swapMax.value = false;
   errors.value.inputAmount = '';
 };
-const selectAccount = (account: string) => {
-  address.value = account;
-  isValidToAddress();
-  isOpenSelectContact.value = false;
-};
 
 const toggleToNetwork = () => {
   toNetworkOpen.value = !toNetworkOpen.value;
@@ -922,36 +921,89 @@ const sendAction = async () => {
     cursor: pointer;
     font-size: 0;
     transition: background 300ms ease-in-out;
+    width: 40px;
+    height: 40px;
+    padding: 0px;
 
     &:hover {
       background: @black007;
     }
+    &:focus-visible {
+      outline: 1px solid @primary;
+    }
   }
 
   &__wrap {
-    padding: 0 32px;
+    padding: 8px 20px;
+    margin: 0;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: stretch;
+    align-items: stretch;
     flex-direction: column;
     width: 100%;
     box-sizing: border-box;
-    height: calc(~'100% - 172px');
+    overflow-y: auto;
+    gap: 4px;
+    position: relative;
+    &__container {
+      padding: 12px 16px 16px 16px;
+      background-color: @lightSurfaceBg;
+      border-radius: 20px;
+      flex: 1;
+      h2 {
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 20px;
+        letter-spacing: 0.15px;
+        margin-bottom: 8px;
+        margin-top: 0px;
+      }
+    }
+    &__row {
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+      margin-bottom: 8px;
+      gap: 8px;
+      & > div {
+        max-width: 190px;
+      }
+    }
   }
 
   &__arrows {
-    padding: 8px 0;
+    padding: 4px;
     text-align: center;
     font-size: 0;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-decoration: none;
+    background-color: @white;
+    border-radius: 12px;
+    width: 32px;
+    height: 32px;
+    border: 1px solid @grey08;
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    transition: background 300ms ease-in-out;
+    cursor: pointer;
+    &:hover {
+      background: @black007;
+    }
+    &:focus-visible {
+      outline: 1px solid @primary;
+    }
   }
 
   &__buttons {
     position: absolute;
     left: 0;
     bottom: 0;
-    padding: 32px;
+    padding: 8px 32px 32px 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -960,46 +1012,9 @@ const sendAction = async () => {
     box-sizing: border-box;
     background-color: @white;
 
-    &-cancel {
-      width: 140px;
-    }
-
     &-send {
-      width: 248px;
-    }
-  }
-
-  .send-address-input {
-    margin: 8px 0 8px 0;
-    width: 100%;
-  }
-}
-</style>
-
-<style lang="less">
-.swap {
-  .send-contacts-list__wrap {
-    top: 482px;
-    max-height: 114px;
-    padding: 0;
-  }
-
-  .send-contacts-list__scroll-area {
-    max-height: 114px;
-    padding: 8px;
-    box-sizing: border-box;
-
-    h3 {
-      display: none;
+      width: 100%;
     }
-
-    .ps__rail-y {
-      right: 3px !important;
-    }
-  }
-
-  .send-contacts-list__buttons {
-    display: none;
   }
 }
 </style>