diff --git a/components/transaction/zksync/era/ConfirmTransactionModal.vue b/components/transaction/zksync/era/ConfirmTransactionModal.vue
index 1ae9fff81..a6a5622b0 100644
--- a/components/transaction/zksync/era/ConfirmTransactionModal.vue
+++ b/components/transaction/zksync/era/ConfirmTransactionModal.vue
@@ -94,7 +94,6 @@
     v-else-if="transaction?.type === 'withdrawal'"
     v-bind="$attrs"
     :transaction="transactionLineItem"
-    :in-progress="!transactionCommitted"
   />
 </template>
 
@@ -266,7 +265,7 @@ const makeTransaction = async () => {
       })
       .catch((err) => {
         transactionCommitted.value = false;
-        error.value = err;
+        error.value = err as Error;
         status.value = "not-started";
       });
   }
diff --git a/components/transaction/zksync/era/EraTransferSuccessfulModal.vue b/components/transaction/zksync/era/EraTransferSuccessfulModal.vue
index d2cba2b48..8a69e527f 100644
--- a/components/transaction/zksync/era/EraTransferSuccessfulModal.vue
+++ b/components/transaction/zksync/era/EraTransferSuccessfulModal.vue
@@ -66,7 +66,7 @@ import ProgressPlane from "@/assets/lottie/progress-plane.json";
 import SuccessConfetti from "@/assets/lottie/success-confetti.json";
 
 import type { EraTransaction } from "@/utils/zksync/era/mappers";
-import type { PropType } from "nuxt/dist/app/compat/capi";
+import type { PropType } from "vue";
 
 import { useDestinationsStore } from "@/store/destinations";
 import { useEraProviderStore } from "@/store/zksync/era/provider";
diff --git a/components/transaction/zksync/era/EraWithdrawalSuccessfulModal.vue b/components/transaction/zksync/era/EraWithdrawalSuccessfulModal.vue
index aa45866da..8a94e6ae1 100644
--- a/components/transaction/zksync/era/EraWithdrawalSuccessfulModal.vue
+++ b/components/transaction/zksync/era/EraWithdrawalSuccessfulModal.vue
@@ -12,7 +12,8 @@
 
       <CommonAlert class="mt-3" variant="neutral" :icon="InformationCircleIcon">
         <p>
-          Your funds will be available on the <span class="font-medium">{{ destinations.ethereum.label }}</span> after a
+          Your funds will be available on the <span class="font-medium">{{ destinations.ethereum.label }}</span> (L1)
+          after a
           <a
             href="https://era.zksync.io/docs/dev/troubleshooting/withdrawal-delay.html#withdrawal-delay"
             target="_blank"
@@ -53,7 +54,7 @@ import EraTransactionLineItem from "@/components/transaction/zksync/era/EraTrans
 import ProgressPlane from "@/assets/lottie/progress-plane.json";
 
 import type { EraTransaction } from "@/utils/zksync/era/mappers";
-import type { PropType } from "nuxt/dist/app/compat/capi";
+import type { PropType } from "vue";
 
 import { useDestinationsStore } from "@/store/destinations";
 
diff --git a/components/transaction/zksync/lite/ConfirmTransactionModal.vue b/components/transaction/zksync/lite/ConfirmTransactionModal.vue
index 270b0fb06..e08c7a1ba 100644
--- a/components/transaction/zksync/lite/ConfirmTransactionModal.vue
+++ b/components/transaction/zksync/lite/ConfirmTransactionModal.vue
@@ -97,36 +97,29 @@
       </div>
     </div>
   </CommonModal>
-  <TransactionSuccessfulModal v-else v-bind="$attrs" :transaction-hashes="transactionHashes">
-    <template #after-transactions>
-      <CommonAlert v-if="destination.key === 'ethereum'" class="mt-3" variant="neutral" :icon="InformationCircleIcon">
-        <p>
-          It can take <span class="font-medium">up to 7 hours</span> until funds arrive on
-          <span class="font-medium">{{ destinations.ethereum.label }}</span> (L1)
-        </p>
-        <a href="https://docs.zksync.io/userdocs/faq/#how-long-are-withdrawal-times" target="_blank" class="alert-link">
-          Learn more
-          <ArrowUpRightIcon class="ml-1 h-3 w-3" />
-        </a>
-      </CommonAlert>
-    </template>
-  </TransactionSuccessfulModal>
+
+  <TransferSuccessfulModal
+    v-else-if="destination.key === 'zkSyncLite'"
+    v-bind="$attrs"
+    :transaction-hashes="transactionHashes"
+    :in-progress="!transactionCommitted"
+  />
+  <WithdrawSuccessfulModal
+    v-else-if="destination.key === 'ethereum'"
+    v-bind="$attrs"
+    :transaction-hashes="transactionHashes"
+  />
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
 
-import {
-  ArrowDownIcon,
-  ArrowUpRightIcon,
-  ExclamationCircleIcon,
-  InformationCircleIcon,
-  PlusIcon,
-} from "@heroicons/vue/24/outline";
+import { ArrowDownIcon, ArrowUpRightIcon, ExclamationCircleIcon, PlusIcon } from "@heroicons/vue/24/outline";
 import { BigNumber } from "ethers";
 import { storeToRefs } from "pinia";
 
-import TransactionSuccessfulModal from "@/components/transaction/zksync/lite/TransactionSuccessfulModal.vue";
+import TransferSuccessfulModal from "@/components/transaction/zksync/lite/TransferSuccessfulModal.vue";
+import WithdrawSuccessfulModal from "@/components/transaction/zksync/lite/WithdrawSuccessfulModal.vue";
 
 import useTransaction from "@/composables/zksync/lite/useTransaction";
 
@@ -234,6 +227,8 @@ const totalOfEachToken = computed<{ token: ZkSyncLiteToken; amount: BigNumberish
   }));
 });
 
+const transactionCommitted = ref(false);
+
 const getActionName = (type: IncomingTxFeeType) => {
   if (type === "Transfer") return "Sending";
   else if (type === "Withdraw") return "Withdrawing";
@@ -272,17 +267,20 @@ const makeTransaction = async () => {
   }
 
   if (tx) {
-    /* Have to wait because for further transactions account needs to be activated, otherwise do it async */
-    if (liteAccountActivationStore.isAccountActivated === false) {
+    try {
       await tx[0].awaitReceipt();
-    }
-    tx[0].awaitReceipt().then(async () => {
+      transactionCommitted.value = true;
+
       liteTransactionsHistoryStore.reloadRecentTransactions();
       walletLiteStore.requestBalance({ force: true });
       if (liteAccountActivationStore.isAccountActivated === false) {
         liteAccountActivationStore.checkAccountActivation();
       }
-    });
+    } catch (err) {
+      transactionCommitted.value = false;
+      error.value = err as Error;
+      status.value = "not-started";
+    }
   }
 };
 </script>
diff --git a/components/transaction/zksync/lite/TransferSuccessfulModal.vue b/components/transaction/zksync/lite/TransferSuccessfulModal.vue
new file mode 100644
index 000000000..504398523
--- /dev/null
+++ b/components/transaction/zksync/lite/TransferSuccessfulModal.vue
@@ -0,0 +1,126 @@
+<template>
+  <CommonModal v-bind="$attrs" :closable="false" class="transaction-successful-modal" title="">
+    <template #animation>
+      <Vue3Lottie v-if="inProgress" class="w-72" :animation-data="ProgressPlane" loop />
+      <Vue3Lottie v-else class="w-72" :animation-data="SuccessConfetti" :loop="false" />
+    </template>
+
+    <div class="flex h-full flex-col overflow-auto">
+      <div class="h2 text-center sm:h1">
+        {{ inProgress ? "Transaction submitted" : "Transaction completed" }}
+      </div>
+      <CommonCardWithLineButtons v-if="transactionsRequestInProgress">
+        <TokenBalanceLoader v-for="index in transactionHashes.length" :key="index" />
+      </CommonCardWithLineButtons>
+      <CommonCardWithLineButtons v-else-if="transactionsRequestError">
+        <CommonErrorBlock class="m-2" @try-again="fetch">
+          {{ transactionsRequestError!.message }}
+        </CommonErrorBlock>
+      </CommonCardWithLineButtons>
+      <template v-else>
+        <CommonCardWithLineButtons>
+          <ZkSyncLiteTransactionLineItem v-for="(item, index) in transactions" :key="index" :transaction="item" />
+        </CommonCardWithLineButtons>
+      </template>
+
+      <CommonAlert v-if="inProgress" class="mt-3" variant="neutral" :icon="InformationCircleIcon">
+        <p>
+          Your funds will be available at the
+          <a
+            :href="`${blockExplorerUrl}/address/${mainTransaction?.to}`"
+            target="_blank"
+            class="font-medium underline underline-offset-2"
+            >destination address</a
+          >
+          after the transaction is committed on the <span class="font-medium">{{ destinations.zkSyncLite.label }}</span
+          >. You are free to close this page.
+        </p>
+        <a :href="`${blockExplorerUrl}/tx/${mainTransaction?.txHash}`" target="_blank" class="alert-link">
+          Track status
+          <ArrowUpRightIcon class="ml-1 h-3 w-3" />
+        </a>
+      </CommonAlert>
+      <CommonAlert v-else class="mt-3" variant="success" :icon="InformationCircleIcon">
+        <p>
+          Your funds should now be available at the
+          <a
+            :href="`${blockExplorerUrl}/address/${mainTransaction?.to}`"
+            target="_blank"
+            class="font-medium underline underline-offset-2"
+            >destination address</a
+          >.
+        </p>
+      </CommonAlert>
+
+      <div class="sticky bottom-0 z-[1] mt-auto flex w-full flex-col items-center">
+        <NuxtLink :to="{ name: 'transaction-zksync-lite' }" class="link mb-2 mt-8 text-sm underline-offset-2">
+          Make another transaction
+        </NuxtLink>
+        <CommonButton as="RouterLink" :to="{ name: 'index' }" class="mx-auto" variant="primary-solid">
+          Go to Home page
+        </CommonButton>
+      </div>
+    </div>
+  </CommonModal>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from "vue";
+import { Vue3Lottie } from "vue3-lottie";
+
+import { ArrowUpRightIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { storeToRefs } from "pinia";
+
+import ZkSyncLiteTransactionLineItem from "@/components/transaction/zksync/lite/ZkSyncLiteTransactionLineItem.vue";
+
+import useTransactionsReceipt from "@/composables/zksync/lite/useTransactionsReceipts";
+
+import ProgressPlane from "@/assets/lottie/progress-plane.json";
+import SuccessConfetti from "@/assets/lottie/success-confetti.json";
+
+import type { PropType } from "vue";
+
+import { useDestinationsStore } from "@/store/destinations";
+import { useLiteProviderStore } from "@/store/zksync/lite/provider";
+import { useLiteTokensStore } from "@/store/zksync/lite/tokens";
+
+const props = defineProps({
+  transactionHashes: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+  inProgress: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { destinations } = storeToRefs(useDestinationsStore());
+const { blockExplorerUrl } = storeToRefs(useLiteProviderStore());
+const liteProviderStore = useLiteProviderStore();
+const liteTokensStore = useLiteTokensStore();
+const { tokens } = storeToRefs(liteTokensStore);
+const { transactions, transactionsRequestInProgress, transactionsRequestError, requestTransactions } =
+  useTransactionsReceipt(liteProviderStore.requestProvider, () =>
+    liteTokensStore.requestTokens().then(() => (tokens.value ? Object.values(tokens.value) : []))
+  );
+const mainTransaction = computed(() => transactions.value?.find((e) => e.type === "Transfer"));
+
+const fetch = () => {
+  requestTransactions(props.transactionHashes);
+};
+
+watch(
+  () => props.transactionHashes,
+  () => {
+    fetch();
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss">
+.transaction-successful-modal .modal-card {
+  @apply grid h-full grid-rows-[0_max-content_1fr];
+}
+</style>
diff --git a/components/transaction/zksync/lite/WithdrawSuccessfulModal.vue b/components/transaction/zksync/lite/WithdrawSuccessfulModal.vue
new file mode 100644
index 000000000..65ef7c288
--- /dev/null
+++ b/components/transaction/zksync/lite/WithdrawSuccessfulModal.vue
@@ -0,0 +1,98 @@
+<template>
+  <CommonModal v-bind="$attrs" :closable="false" class="transaction-successful-modal" title="">
+    <template #animation>
+      <Vue3Lottie class="w-72" :animation-data="ProgressPlane" loop />
+    </template>
+
+    <div class="flex h-full flex-col overflow-auto">
+      <div class="h2 text-center sm:h1">Transaction submitted</div>
+      <CommonCardWithLineButtons v-if="transactionsRequestInProgress">
+        <TokenBalanceLoader v-for="index in transactionHashes.length" :key="index" />
+      </CommonCardWithLineButtons>
+      <CommonCardWithLineButtons v-else-if="transactionsRequestError">
+        <CommonErrorBlock class="m-2" @try-again="fetch">
+          {{ transactionsRequestError!.message }}
+        </CommonErrorBlock>
+      </CommonCardWithLineButtons>
+      <template v-else>
+        <CommonCardWithLineButtons>
+          <ZkSyncLiteTransactionLineItem v-for="(item, index) in transactions" :key="index" :transaction="item" />
+        </CommonCardWithLineButtons>
+      </template>
+
+      <CommonAlert class="mt-3" variant="neutral" :icon="InformationCircleIcon">
+        <p>
+          It can take <span class="font-medium">up to 7 hours</span> until funds arrive on
+          <span class="font-medium">{{ destinations.ethereum.label }}</span> (L1)
+        </p>
+        <a href="https://docs.zksync.io/userdocs/faq/#how-long-are-withdrawal-times" target="_blank" class="alert-link">
+          Learn more
+          <ArrowUpRightIcon class="ml-1 h-3 w-3" />
+        </a>
+      </CommonAlert>
+
+      <div class="sticky bottom-0 z-[1] mt-auto flex w-full flex-col items-center">
+        <NuxtLink :to="{ name: 'transaction-zksync-lite' }" class="link mb-2 mt-8 text-sm underline-offset-2">
+          Make another transaction
+        </NuxtLink>
+        <CommonButton as="RouterLink" :to="{ name: 'index' }" class="mx-auto" variant="primary-solid">
+          Go to Home page
+        </CommonButton>
+      </div>
+    </div>
+  </CommonModal>
+</template>
+
+<script lang="ts" setup>
+import { watch } from "vue";
+import { Vue3Lottie } from "vue3-lottie";
+
+import { ArrowUpRightIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
+import { storeToRefs } from "pinia";
+
+import ZkSyncLiteTransactionLineItem from "@/components/transaction/zksync/lite/ZkSyncLiteTransactionLineItem.vue";
+
+import useTransactionsReceipt from "@/composables/zksync/lite/useTransactionsReceipts";
+
+import ProgressPlane from "@/assets/lottie/progress-plane.json";
+
+import type { PropType } from "vue";
+
+import { useDestinationsStore } from "@/store/destinations";
+import { useLiteProviderStore } from "@/store/zksync/lite/provider";
+import { useLiteTokensStore } from "@/store/zksync/lite/tokens";
+
+const props = defineProps({
+  transactionHashes: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+});
+
+const { destinations } = storeToRefs(useDestinationsStore());
+const liteProviderStore = useLiteProviderStore();
+const liteTokensStore = useLiteTokensStore();
+const { tokens } = storeToRefs(liteTokensStore);
+const { transactions, transactionsRequestInProgress, transactionsRequestError, requestTransactions } =
+  useTransactionsReceipt(liteProviderStore.requestProvider, () =>
+    liteTokensStore.requestTokens().then(() => (tokens.value ? Object.values(tokens.value) : []))
+  );
+
+const fetch = () => {
+  requestTransactions(props.transactionHashes);
+};
+
+watch(
+  () => props.transactionHashes,
+  () => {
+    fetch();
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss">
+.transaction-successful-modal .modal-card {
+  @apply grid h-full grid-rows-[0_max-content_1fr];
+}
+</style>
diff --git a/components/transaction/zksync/lite/deposit/ConfirmTransactionModal.vue b/components/transaction/zksync/lite/deposit/ConfirmTransactionModal.vue
index bc478faae..79ebefd47 100644
--- a/components/transaction/zksync/lite/deposit/ConfirmTransactionModal.vue
+++ b/components/transaction/zksync/lite/deposit/ConfirmTransactionModal.vue
@@ -109,9 +109,9 @@
 
       <CommonAlert class="mt-3" variant="neutral" :icon="InformationCircleIcon">
         <p>
-          Your funds will be available on <span class="font-medium">{{ destinations.zkSyncLite.label }}</span> after the
-          transaction is committed on <span class="font-medium">{{ destinations.ethereum.label }}</span> and then
-          processed on <span class="font-medium">{{ destinations.zkSyncLite.label }}</span
+          Your funds will be available on <span class="font-medium">{{ destinations.zkSyncLite.label }}</span> (L2)
+          after the transaction is committed on <span class="font-medium">{{ destinations.ethereum.label }}</span> and
+          then processed on <span class="font-medium">{{ destinations.zkSyncLite.label }}</span
           >. You are free to close this page.
         </p>
         <a :href="`${blockExplorerUrl}/tx/${ethTransactionHash}`" target="_blank" class="alert-link">
@@ -292,7 +292,7 @@ const makeTransaction = async () => {
       })
       .catch((err) => {
         transactionCommitted.value = false;
-        error.value = err;
+        error.value = err as Error;
         status.value = "not-started";
       });
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index bef8154e7..35ef06676 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -37,6 +37,19 @@ module.exports = {
           800: "#27274E",
           900: "#11142B",
         },
+        /* primary: {
+          50: "#D9E3FF",
+          100: "#A6BFFF",
+          200: "#739AFF",
+          300: "#4075FF",
+          400: "#1755F4",
+          500: "#1650E5",
+          600: "#2663FF",
+          700: "#1347CC",
+          800: "#113EB2",
+          900: "#0C2C80",
+          950: "#071B4D",
+        }, */
       },
     },
     screens: {