diff --git a/src/App.vue b/src/App.vue
index 9c31a65..2dad8e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,8 +4,13 @@ import TopBar from "./components/TopBar.vue";
 
 <template>
   <TopBar />
-
-  <RouterView />
+  <RouterView v-slot="{ Component }">
+    <template v-if="Component">
+      <Suspense>
+        <component :is="Component"></component>
+      </Suspense>
+    </template>
+  </RouterView>
 </template>
 
 <style scoped></style>
diff --git a/src/assets/cancel.svg b/src/assets/cancel.svg
new file mode 100644
index 0000000..e6069f6
--- /dev/null
+++ b/src/assets/cancel.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z" fill="#1F2937" stroke="#1F2937" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6115 4.81333C11.7288 4.696 11.7288 4.50577 11.6115 4.38844C11.4942 4.27111 11.304 4.27111 11.1866 4.38844L8 7.57509L4.81337 4.38844C4.69604 4.27111 4.50581 4.27111 4.38849 4.38844C4.27116 4.50577 4.27116 4.696 4.38849 4.81333L7.57511 7.99998L4.38844 11.1867C4.27111 11.304 4.27111 11.4942 4.38844 11.6116C4.50577 11.7289 4.69599 11.7289 4.81332 11.6116L8 8.42487L11.1867 11.6116C11.304 11.7289 11.4942 11.7289 11.6116 11.6116C11.7289 11.4942 11.7289 11.304 11.6116 11.1867L8.42489 7.99998L11.6115 4.81333Z" fill="#F9FAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.17604 4.17599C4.4107 3.94134 4.79116 3.94133 5.02582 4.17599L8 7.1502L10.9742 4.176C11.2088 3.94133 11.5893 3.94133 11.824 4.176C12.0586 4.41066 12.0586 4.79111 11.824 5.02577L8.84977 7.99998L11.824 10.9742C12.0587 11.2089 12.0587 11.5893 11.824 11.824C11.5893 12.0587 11.2089 12.0587 10.9742 11.824L8 8.84975L5.02577 11.824C4.79111 12.0587 4.41065 12.0587 4.17599 11.824C3.94134 11.5893 3.94134 11.2089 4.17599 10.9742L7.15023 7.99998L4.17604 5.02577C3.94138 4.79111 3.94138 4.41065 4.17604 4.17599Z" fill="#F9FAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99926 3.99922C4.33155 3.66693 4.8703 3.66693 5.20259 3.99922L8 6.79664L10.7974 3.99922C11.1297 3.66693 11.6684 3.66693 12.0007 3.99922C12.333 4.33151 12.333 4.87026 12.0007 5.20255L9.20333 7.99998L12.0008 10.7974C12.3331 11.1297 12.3331 11.6685 12.0008 12.0008C11.6685 12.3331 11.1297 12.3331 10.7975 12.0008L8 9.20331L5.20254 12.0008C4.87025 12.3331 4.33151 12.3331 3.99922 12.0008C3.66693 11.6685 3.66693 11.1297 3.99922 10.7974L6.79667 7.99998L3.99926 5.20255C3.66698 4.87026 3.66698 4.33151 3.99926 3.99922ZM4.6366 4.56522C4.6169 4.54552 4.58496 4.54552 4.56526 4.56522C4.54556 4.58491 4.54556 4.61685 4.56526 4.63655L7.92866 7.99998L4.56521 11.3634C4.54552 11.3831 4.54552 11.4151 4.56521 11.4348C4.58491 11.4545 4.61685 11.4545 4.63655 11.4348L8 8.07131L11.3635 11.4348C11.3832 11.4545 11.4151 11.4545 11.4348 11.4348C11.4545 11.4151 11.4545 11.3831 11.4348 11.3634L8.07133 7.99998L11.4347 4.63655C11.4544 4.61685 11.4544 4.58491 11.4347 4.56522C11.415 4.54552 11.3831 4.54552 11.3634 4.56522L8 7.92864L4.6366 4.56522Z" fill="#F9FAFB"/>
+</svg>
diff --git a/src/assets/withdraw.svg b/src/assets/withdraw.svg
new file mode 100644
index 0000000..fbb5603
--- /dev/null
+++ b/src/assets/withdraw.svg
@@ -0,0 +1,8 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_968_914" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.5V14C1.5 15.1046 2.39543 16 3.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H14.5H3.5H1Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.5V14C1.5 15.1046 2.39543 16 3.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H14.5H3.5H1Z" fill="#1F2937"/>
+<path d="M1.5 2H3.5V0H1.5V2ZM16.5 2V0H14.5V2H16.5ZM2 1C2 1.55228 1.55228 2 1 2V-2C-0.656854 -2 -2 -0.656854 -2 1H2ZM1 0C1.55228 0 2 0.447715 2 1H-2C-2 2.65685 -0.656854 4 1 4V0ZM1.5 0H1V4H1.5V0ZM3.5 14V2H-0.5V14H3.5ZM3.5 14H-0.5C-0.5 16.2091 1.29086 18 3.5 18V14ZM14.5 14H3.5V18H14.5V14ZM14.5 14V18C16.7091 18 18.5 16.2091 18.5 14H14.5ZM14.5 2V14H18.5V2H14.5ZM17 0H16.5V4H17V0ZM16 1C16 0.447715 16.4477 0 17 0V4C18.6569 4 20 2.65685 20 1H16ZM17 2C16.4477 2 16 1.55229 16 1H20C20 -0.656855 18.6569 -2 17 -2V2ZM14.5 2H17V-2H14.5V2ZM3.5 2H14.5V-2H3.5V2ZM1 2H3.5V-2H1V2Z" fill="#1F2937" mask="url(#path-1-inside-1_968_914)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99961 3.09998C9.49667 3.09998 9.89961 3.50292 9.89961 3.99998V9.91699L11.8828 8.05048C12.2447 7.70981 12.8143 7.72707 13.155 8.08903C13.4957 8.45099 13.4784 9.02057 13.1164 9.36124L9.61644 12.6554C9.2699 12.9815 8.72933 12.9815 8.38278 12.6554L4.88278 9.36124C4.52083 9.02057 4.50357 8.45099 4.84423 8.08903C5.1849 7.72707 5.75448 7.70981 6.11644 8.05048L8.09961 9.91699V3.99998C8.09961 3.50292 8.50256 3.09998 8.99961 3.09998Z" fill="#F9FAFB"/>
+</svg>
diff --git a/src/views/ListView.vue b/src/components/BuyConfirmedComponent.vue
similarity index 66%
rename from src/views/ListView.vue
rename to src/components/BuyConfirmedComponent.vue
index 49c39a4..fbfc637 100644
--- a/src/views/ListView.vue
+++ b/src/components/BuyConfirmedComponent.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
+import ListingComponent from "@/components/ListingComponent.vue";
+
+// props
+const props = defineProps<{
+  lastWalletReleaseTransactions: any[];
+  tokenAmount: Number | undefined;
+}>();
+
+// Emits
+const emit = defineEmits(["makeAnotherTransaction"]);
 </script>
 
 <template>
@@ -16,7 +26,7 @@ import CustomButton from "@/components/CustomButton.vue";
       >
         <div>
           <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">100 BRZ</p>
+          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
         </div>
         <div class="my-5">
           <p>
@@ -29,40 +39,25 @@ import CustomButton from "@/components/CustomButton.vue";
           @buttonClicked="() => {}"
         />
       </div>
-    </div>
-    <div class="blur-container-row">
       <button
         type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 w-full"
-        @click="() => {}"
+        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
+        @click="emit('makeAnotherTransaction')"
       >
         Fazer nova transação
       </button>
-      <button
-        type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2"
-        @click="() => {}"
-      >
-        Desconectar
-      </button>
     </div>
-    <div class="text-container mt-10">
+    <div class="text-container mt-16">
       <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Últimas transações
+        >Histórico de compras
       </span>
     </div>
-    <div class="blur-container">
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
-        <p>100 BRZ</p>
-        <p>20 out 2022</p>
-        <p>Etherscan</p>
-      </div>
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
-        <p>100 BRZ</p>
-        <p>20 out 2022</p>
-        <p>Etherscan</p>
-      </div>
-      <p class="text-white mt-2 cursor-pointer">Carregar mais</p>
+    <div class="w-full max-w-4xl">
+      <ListingComponent
+        :walletTransactions="lastWalletReleaseTransactions"
+        :isManageMode="false"
+      >
+      </ListingComponent>
     </div>
   </div>
 </template>
@@ -72,6 +67,10 @@ import CustomButton from "@/components/CustomButton.vue";
   @apply flex flex-col items-center justify-center w-full mt-16;
 }
 
+p {
+  @apply text-gray-900;
+}
+
 .text-container {
   @apply flex flex-col items-center justify-center gap-4;
 }
@@ -84,7 +83,11 @@ import CustomButton from "@/components/CustomButton.vue";
 }
 
 .blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+}
+
+.last-release-info {
+  @apply font-medium text-base text-gray-900;
 }
 
 input[type="number"] {
diff --git a/src/components/ListComponent.vue b/src/components/ListComponent.vue
deleted file mode 100644
index 4211256..0000000
--- a/src/components/ListComponent.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import CustomButton from "@/components/CustomButton.vue";
-import blockchain from "../utils/blockchain";
-
-// props
-const props = defineProps<{
-  lastWalletReleaseTransactions: any[] | undefined;
-  tokenAmount: Number | undefined;
-}>();
-
-// Emits
-const emit = defineEmits(["makeAnotherTransaction"]);
-
-const formatEventsAmount = (amount: any) => {
-  try {
-    const formated = blockchain.formatBigNumber(amount);
-    return formated;
-  } catch {
-    return "";
-  }
-};
-
-const openEtherscanUrl = (url: string) => {
-  window.open(url, "_blank");
-};
-</script>
-
-<template>
-  <div class="page">
-    <div class="text-container">
-      <span class="text font-extrabold text-5xl max-w-[50rem]"
-        >Os tokens já foram transferidos <br />
-        para a sua carteira!
-      </span>
-    </div>
-    <div class="blur-container">
-      <div
-        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
-      >
-        <div>
-          <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
-        </div>
-        <div class="my-5">
-          <p>
-            <b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
-            cadastrar o BRZ em sua carteira.
-          </p>
-        </div>
-        <CustomButton
-          :text="'Cadastrar token na carteira'"
-          @buttonClicked="() => {}"
-        />
-      </div>
-      <button
-        type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
-        @click="emit('makeAnotherTransaction')"
-      >
-        Fazer nova transação
-      </button>
-    </div>
-    <div class="text-container mt-16">
-      <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Últimas transações
-      </span>
-    </div>
-    <div class="blur-container min-w-[80%] gap-8">
-      <div class="flex flex-row justify-between w-full px-8">
-        <span class="text-xs text-gray-50 font-medium">Valor</span>
-        <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
-        <span class="text-xs text-gray-50 font-medium">Checar transação</span>
-      </div>
-      <div
-        class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
-        v-for="release in lastWalletReleaseTransactions"
-        :key="release?.blockNumber"
-      >
-        <span class="last-release-info">
-          {{ formatEventsAmount(release?.args.amount) }} BRZ
-        </span>
-        <span class="last-release-info">
-          {{ "Compra" }}
-        </span>
-        <div
-          class="flex gap-2 cursor-pointer items-center"
-          @click="
-            openEtherscanUrl(
-              `https://etherscan.io/tx/${release?.transactionHash}`
-            )
-          "
-        >
-          <span class="last-release-info">Etherscan</span>
-          <img alt="Redirect image" src="@/assets/redirect.svg" />
-        </div>
-      </div>
-      <div class="flex justify-center w-full right-6 mt-2">
-        <button
-          type="button"
-          class="text-white"
-          @click="() => {}"
-          v-if="lastWalletReleaseTransactions?.length != 0"
-        >
-          Carregar mais
-        </button>
-      </div>
-
-      <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
-        Não há nenhuma transação anterior
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page {
-  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
-p {
-  @apply text-gray-900;
-}
-
-.text-container {
-  @apply flex flex-col items-center justify-center gap-4;
-}
-
-.text {
-  @apply text-gray-800 text-center;
-}
-.blur-container-row {
-  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
-}
-
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
-}
-
-.last-release-info {
-  @apply font-medium text-base text-gray-900;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-</style>
diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
new file mode 100644
index 0000000..a2f25cd
--- /dev/null
+++ b/src/components/ListingComponent.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import blockchain from "@/utils/blockchain";
+import { ref, watch } from "vue";
+
+// props
+const props = defineProps<{
+  walletTransactions: any[];
+  isManageMode: boolean;
+}>();
+
+const itemsToShow = ref<any[]>([]);
+
+// Methods
+const showInitialItems = () => {
+  itemsToShow.value = props.walletTransactions.slice(0, 3);
+};
+
+const formatEventsAmount = (amount: any) => {
+  try {
+    const formated = blockchain.formatBigNumber(amount);
+    return formated;
+  } catch {
+    return "";
+  }
+};
+
+const openEtherscanUrl = (url: string) => {
+  window.open(url, "_blank");
+};
+
+const loadMore = () => {
+  const itemsShowing = itemsToShow.value.length;
+  itemsToShow.value?.push(
+    ...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
+  );
+};
+
+// watch props changes
+watch(props, async () => {
+  const itemsToShowQty = itemsToShow.value.length;
+  if (itemsToShowQty == 0) showInitialItems();
+  else
+    itemsToShow.value =
+      props.walletTransactions.length > itemsToShowQty
+        ? props.walletTransactions.slice(0, itemsToShowQty)
+        : props.walletTransactions;
+});
+
+//emits
+const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
+
+// initial itemsToShow value
+showInitialItems();
+</script>
+
+<template>
+  <div class="blur-container">
+    <div
+      class="grid grid-cols-4 grid-flow-row w-full px-6"
+      v-if="itemsToShow.length != 0"
+    >
+      <span class="text-xs text-gray-50 font-medium justify-self-center"
+        >Valor</span
+      >
+      <span class="text-xs text-gray-50 font-medium justify-self-center"
+        >Data</span
+      >
+      <span class="text-xs text-gray-50 font-medium justify-self-center">{{
+        props.isManageMode ? "Cancelar oferta" : "Tipo de transação"
+      }}</span>
+      <span class="text-xs text-gray-50 font-medium justify-self-center">{{
+        props.isManageMode ? "Retirar tokens" : "Checar transação"
+      }}</span>
+    </div>
+    <div
+      class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
+      v-for="(item, index) in itemsToShow"
+      :key="item.depositID"
+    >
+      <span class="last-release-info">
+        {{
+          item?.args ? formatEventsAmount(item?.args.amount) : item?.remaining
+        }}
+        BRZ
+      </span>
+
+      <!-- TODO: change this hardcoded date -->
+      <span class="last-release-info"> 20 out 2022 </span>
+
+      <div
+        v-if="props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="emit('cancelDeposit', item.depositID, index)"
+      >
+        <span class="last-release-info">Cancelar</span>
+        <img alt="Cancel image" src="@/assets/cancel.svg" />
+      </div>
+
+      <span
+        class="last-release-info"
+        v-if="item.event == 'DepositAdded' && !props.isManageMode"
+      >
+        {{ "Oferta" }}
+      </span>
+
+      <span
+        class="last-release-info"
+        v-if="item.event == 'LockAdded' && !props.isManageMode"
+      >
+        {{ "Reserva" }}
+      </span>
+
+      <span
+        class="last-release-info"
+        v-if="item.event == 'LockReleased' && !props.isManageMode"
+      >
+        {{ "Compra" }}
+      </span>
+
+      <div
+        v-if="props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="emit('withdrawDeposit', item.depositID, index)"
+      >
+        <span class="last-release-info">Retirar</span>
+        <img alt="Cancel image" src="@/assets/withdraw.svg" />
+      </div>
+
+      <div
+        v-if="!props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="
+          openEtherscanUrl(`https://etherscan.io/tx/${item?.transactionHash}`)
+        "
+      >
+        <span class="last-release-info">Etherscan</span>
+        <img alt="Redirect image" src="@/assets/redirect.svg" />
+      </div>
+    </div>
+    <div
+      class="flex flex-col justify-center items-center w-full mt-2 gap-2"
+      v-if="
+        itemsToShow.length != 0 &&
+        itemsToShow.length != props.walletTransactions.length
+      "
+    >
+      <button
+        type="button"
+        class="text-white font-semibold"
+        @click="loadMore()"
+      >
+        Carregar mais
+      </button>
+      <span class="text-gray-300">
+        ({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
+        {{ isManageMode ? "ofertas" : "transações" }})
+      </span>
+    </div>
+
+    <span class="font-bold text-gray-900" v-if="itemsToShow.length == 0">
+      Não há nenhuma transação anterior
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+p {
+  @apply text-gray-900;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4;
+}
+
+.text {
+  @apply text-gray-800 text-center;
+}
+.blur-container-row {
+  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
+}
+
+.blur-container {
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
+}
+
+.grid-container {
+  @apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+}
+
+.last-release-info {
+  @apply font-medium text-base text-gray-900 justify-self-center;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+</style>
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 72f8b37..d538b39 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -62,7 +62,6 @@ const verifyLiquidity = () => {
   depositsValidList.value.find((element) => {
     const remaining = element.remaining;
     if (
-      element.valid == true &&
       tokenValue.value!! <= remaining &&
       tokenValue.value!! != 0 &&
       element.seller !== walletAddress.value
diff --git a/src/components/SellerSteps/SellerSearchComponent.vue b/src/components/SellerSteps/SellerSearchComponent.vue
index f68d3b9..4fe8059 100644
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -35,7 +35,6 @@ const decimalCount = (num: Number) => {
   }
   return 0;
 };
-
 </script>
 
 <template>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 021ead3..c10585d 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -38,12 +38,12 @@ const formatWalletBalance = (): String => {
 
 const disconnectUser = () => {
   etherStore.setWalletAddress("");
-  const currentRoute = router.currentRoute.value.path;
-  if (currentRoute !== "/") {
-    router.push("/");
-  } else {
-    window.location.reload();
-  }
+  closeMenu();
+  window.location.reload();
+};
+
+const closeMenu = () => {
+  menuOpenToggle.value = false;
 };
 </script>
 
@@ -94,7 +94,7 @@ const disconnectUser = () => {
           >
             <img alt="Ethereum image" src="@/assets/ethereum.svg" />
             <span
-              class="default-text group-hover:text-black"
+              class="default-text group-hover:text-gray-900"
               :style="{
                 color: currencyMenuOpenToggle
                   ? '#000000'
@@ -106,7 +106,7 @@ const disconnectUser = () => {
               Ethereum
             </span>
             <img
-              class="text-black"
+              class="text-gray-900"
               v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
               alt="Chevron Down"
               src="@/assets/chevronDown.svg"
@@ -124,42 +124,38 @@ const disconnectUser = () => {
           </div>
           <div
             v-show="currencyMenuOpenToggle"
-            class="mt-10 absolute w-full text-black"
+            class="mt-10 pl-3 absolute w-full text-gray-900"
           >
             <div class="mt-2">
               <div class="bg-white rounded-md z-10">
-                <div class="menu-button px-4 rounded-md cursor-pointer">
-                  <div class="flex justify-between">
-                    <img
-                      alt="Ethereum image"
-                      width="20"
-                      height="20"
-                      src="@/assets/ethereum.svg"
-                    />
-                    <span
-                      class="text-black py-4 text-end font-semibold text-xs"
-                    >
-                      Ethereum
-                    </span>
-                    <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
-                  </div>
-                  <hr />
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <img
+                    alt="Ethereum image"
+                    width="20"
+                    height="20"
+                    src="@/assets/ethereum.svg"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    Ethereum
+                  </span>
                 </div>
-                <div class="menu-button px-4 rounded-md cursor-pointer">
-                  <div class="flex justify-between">
-                    <img
-                      alt="Ethereum image"
-                      width="20"
-                      height="20"
-                      src="@/assets/polygon.svg"
-                    />
-                    <span
-                      class="text-black py-4 text-end font-semibold text-xs"
-                    >
-                      Polygon
-                    </span>
-                    <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
-                  </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <img
+                    alt="Polygon image"
+                    width="20"
+                    height="20"
+                    src="@/assets/polygon.svg"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    Polygon
+                  </span>
                   <hr />
                 </div>
               </div>
@@ -199,7 +195,7 @@ const disconnectUser = () => {
               {{ formatWalletAddress() }}
             </span>
             <img
-              class="text-black"
+              class="text-gray-900"
               v-if="!menuHoverToggle && !menuOpenToggle"
               alt="Chevron Down"
               src="@/assets/chevronDown.svg"
@@ -215,34 +211,32 @@ const disconnectUser = () => {
               src="@/assets/chevronDownBlack.svg"
             />
           </div>
-          <div v-show="menuOpenToggle" class="mt-10 absolute w-full text-black">
-            <div class="mt-2">
+          <div
+            v-show="menuOpenToggle"
+            class="mt-10 absolute w-full text-gray-900"
+          >
+            <div class="pl-4 mt-2">
               <div class="bg-white rounded-md z-10">
-                <div
-                  class="menu-button px-4 rounded-md cursor-pointer"
-                  onclick="window.location='/bid_history'"
-                >
-                  <div class="py-4 text-end font-semibold text-xs">
-                    Histórico de compras
-                  </div>
-                  <hr />
+                <div class="menu-button" @click="closeMenu()">
+                  <RouterLink to="/transaction_history" class="redirect_button">
+                    Histórico de transações
+                  </RouterLink>
                 </div>
-                <div
-                  class="menu-button px-4 cursor-pointer"
-                  onclick="window.location='/manage_bids'"
-                >
-                  <div class="py-4 text-end font-semibold text-xs">
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div class="menu-button" @click="closeMenu()">
+                  <RouterLink to="/manage_bids" class="redirect_button">
                     Gerenciar Ofertas
-                  </div>
-                  <hr />
+                  </RouterLink>
                 </div>
-                <div
-                  class="menu-button px-4 py-1 rounded-md cursor-pointer"
-                  @click="disconnectUser"
-                >
-                  <div class="py-3 text-end font-semibold text-xs">
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div class="menu-button" @click="disconnectUser">
+                  <RouterLink to="/" class="redirect_button">
                     Desconectar
-                  </div>
+                  </RouterLink>
                 </div>
               </div>
             </div>
@@ -280,7 +274,15 @@ header {
   @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded;
 }
 
-.menu-button:hover {
-  background-color: #e5e7eb;
+.redirect_button {
+  @apply py-4 text-gray-900 font-semibold text-xs w-full;
+}
+
+.menu-button {
+  @apply flex text-center justify-center hover:bg-gray-200;
+}
+
+a:hover {
+  @apply bg-gray-200 rounded;
 }
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9684b60..c86ab63 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import MockView from "../views/MockView.vue";
-import BidHistoryView from "../views/BidHistoryView.vue";
+import TransactionHistoryView from "../views/TransactionHistoryView.vue";
 import ManageBidsView from "../views/ManageBidsView.vue";
 import SellerView from "@/views/SellerView.vue";
 
@@ -24,9 +24,9 @@ const router = createRouter({
       component: MockView,
     },
     {
-      path: "/bid_history",
-      name: "bid history",
-      component: BidHistoryView,
+      path: "/transaction_history",
+      name: "transaction history",
+      component: TransactionHistoryView,
     },
     {
       path: "/manage_bids",
diff --git a/src/store/ether.ts b/src/store/ether.ts
index 37a73d7..b4c0556 100644
--- a/src/store/ether.ts
+++ b/src/store/ether.ts
@@ -47,4 +47,14 @@ export const useEtherStore = defineStore("ether", {
       this.locksExpiredList = locksExpiredList;
     },
   },
+  getters: {
+    getValidDepositByWalletAddress: (state) => {
+      return (walletAddress: string) =>
+        state.depositsValidList
+          .filter((deposit) => deposit.seller == walletAddress)
+          .sort((a, b) => {
+            return b.blockNumber - a.blockNumber;
+          });
+    },
+  },
 });
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 8a8239a..9a02fd4 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -13,6 +13,7 @@ import { wallets } from "./smart_contract_files/wallets.json";
 const updateWalletStatus = async () => {
   const etherStore = useEtherStore();
   const provider = getProvider();
+
   if (!provider) return;
 
   const signer = provider.getSigner();
@@ -25,6 +26,21 @@ const updateWalletStatus = async () => {
   etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0]));
 };
 
+const updateWalletBalance = async () => {
+  const etherStore = useEtherStore();
+  const provider = getProvider();
+
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
+
+  const walletAddress = await provider.send("eth_requestAccounts", []);
+
+  const balance = await contract.balanceOf(walletAddress[0]);
+  etherStore.setBalance(formatBigNumber(balance));
+};
+
 //  Split tokens between wallets in wallets.json
 const splitTokens = async () => {
   const provider = getProvider();
@@ -78,9 +94,9 @@ const listAllTransactionByWalletAddress = async (
 // get wallet's deposit transactions
 const listDepositTransactionByWalletAddress = async (
   walletAddress: string
-): Promise<any[] | undefined> => {
+): Promise<any[]> => {
   const provider = getProvider();
-  if (!provider) return;
+  if (!provider) return [];
 
   const signer = provider.getSigner();
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
@@ -93,6 +109,21 @@ const listDepositTransactionByWalletAddress = async (
   });
 };
 
+// get wallet's deposit transactions
+const listValidDepositTransactionsByWalletAddress = async (
+  walletAddress: string
+): Promise<any[]> => {
+  const walletDeposits = await getValidDeposits();
+  if (walletDeposits) {
+    return walletDeposits
+      .filter((deposit) => deposit.seller == walletAddress)
+      .sort((a, b) => {
+        return b.blockNumber - a.blockNumber;
+      });
+  }
+  return [];
+};
+
 // get wallet's lock transactions
 const listLockTransactionByWalletAddress = async (
   walletAddress: string
@@ -131,13 +162,14 @@ const listReleaseTransactionByWalletAddress = async (
   });
 };
 
-// Update events at store methods
-const updateValidDeposits = async () => {
-  const etherStore = useEtherStore();
+//get valid deposits
+const getValidDeposits = async (): Promise<any[] | undefined> => {
   const window_ = window as any;
   const connection = window_.ethereum;
   let provider: ethers.providers.Web3Provider | null = null;
-  if (!connection) return;
+
+  if (!connection) return [];
+
   provider = new ethers.providers.Web3Provider(connection);
   const signer = provider.getSigner();
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
@@ -145,23 +177,34 @@ const updateValidDeposits = async () => {
   const filterDeposits = p2pContract.filters.DepositAdded(null);
   const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
 
-  const depositList = [] as any[];
+  const depositList: any[] = await Promise.all(
+    eventsDeposits
+      .map(async (deposit) => {
+        const mappedDeposit = await mapDeposits(deposit.args?.depositID);
+        let validDeposit = {};
 
-  eventsDeposits.forEach(async (deposit) => {
-    const mappedDeposit = await mapDeposits(deposit.args?.depositID);
+        if (mappedDeposit.valid) {
+          validDeposit = {
+            blockNumber: deposit.blockNumber,
+            depositID: deposit.args?.depositID,
+            remaining: formatBigNumber(mappedDeposit.remaining),
+            seller: mappedDeposit.seller,
+            pixKey: mappedDeposit.pixTarget,
+          };
+        }
 
-    const validDeposit = {
-      depositID: deposit.args?.depositID,
-      remaining: formatBigNumber(mappedDeposit.remaining),
-      seller: mappedDeposit.seller,
-      pixKey: mappedDeposit.pixTarget,
-      valid: mappedDeposit.valid,
-    };
+        return validDeposit;
+      })
+      .filter((deposit) => deposit)
+  );
 
-    depositList.push(validDeposit);
-  });
-
-  etherStore.setDepositsValidList(depositList);
+  return depositList;
+};
+// Update events at store methods
+const updateValidDeposits = async () => {
+  const etherStore = useEtherStore();
+  const deposits = await getValidDeposits();
+  if (deposits) etherStore.setDepositsValidList(deposits);
 };
 
 const updateDepositAddedEvents = async () => {
@@ -225,10 +268,10 @@ const connectProvider = async () => {
   const connection = window_.ethereum;
 
   await updateWalletStatus();
+  await updateValidDeposits();
   await updateDepositAddedEvents();
   await updateLockAddedEvents();
   await updateLockReleasedEvents();
-  await updateValidDeposits();
 
   connection.on("accountsChanged", async () => {
     await updateWalletStatus();
@@ -315,8 +358,38 @@ const mockDeposit = async (tokenQty: Number, pixKey: String) => {
   await deposit.wait();
 
   await updateWalletStatus();
-  await updateDepositAddedEvents();
   await updateValidDeposits();
+  await updateDepositAddedEvents();
+};
+
+// cancel a deposit by its Id
+const cancelDeposit = async (depositId: BigNumber): Promise<Boolean> => {
+  const provider = getProvider();
+
+  if (!provider) return false;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+  await contract.cancelDeposit(depositId);
+
+  await updateWalletBalance();
+  await updateValidDeposits();
+  return true;
+};
+
+// withdraw a deposit by its Id
+const withdrawDeposit = async (depositId: BigNumber): Promise<Boolean> => {
+  const provider = getProvider();
+
+  if (!provider) return false;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+  await contract.withdraw(depositId, []);
+
+  await updateWalletBalance();
+  await updateValidDeposits();
+  return true;
 };
 
 // Get specific deposit data by its ID
@@ -437,12 +510,15 @@ export default {
   formatEther,
   updateWalletStatus,
   splitTokens,
+  listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
   listReleaseTransactionByWalletAddress,
   listDepositTransactionByWalletAddress,
   listLockTransactionByWalletAddress,
   approveTokens,
   addDeposit,
+  cancelDeposit,
+  withdrawDeposit,
   mockDeposit,
   mapDeposits,
   formatBigNumber,
@@ -451,4 +527,5 @@ export default {
   releaseLock,
   updateLockAddedEvents,
   updateValidDeposits,
+  getValidDeposits,
 };
diff --git a/src/views/BidHistoryView.vue b/src/views/BidHistoryView.vue
deleted file mode 100644
index fcbd4d5..0000000
--- a/src/views/BidHistoryView.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="page">Histórico de ofertas</div>
-</template>
-
-<style scoped>
-.page {
-  @apply flex gap-8 mt-24;
-}
-</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a45b568..46038c2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SearchComponent from "../components/SearchComponent.vue";
 import ValidationComponent from "../components/LoadingComponent.vue";
-import ListComponent from "@/components/ListComponent.vue";
+import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue";
 import blockchain from "../utils/blockchain";
 import { ref } from "vue";
 
@@ -24,7 +24,7 @@ const tokenAmount = ref<number>();
 const lockTransactionHash = ref<string>("");
 const lockId = ref<string>("");
 const loadingRelease = ref<Boolean>(false);
-const lastWalletReleaseTransactions = ref<any[] | undefined>([]);
+const lastWalletReleaseTransactions = ref<any[]>([]);
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
@@ -72,10 +72,12 @@ const releaseTransaction = async ({ e2eId }: any) => {
     );
     release.wait();
 
-    lastWalletReleaseTransactions.value =
-      await blockchain.listReleaseTransactionByWalletAddress(
-        walletAddress.value.toLowerCase()
-      );
+    await blockchain
+      .listReleaseTransactionByWalletAddress(walletAddress.value.toLowerCase())
+      .then((releaseTransactions) => {
+        if (releaseTransactions)
+          lastWalletReleaseTransactions.value = releaseTransactions;
+      });
 
     await blockchain.updateWalletStatus();
     loadingRelease.value = false;
@@ -101,7 +103,7 @@ const releaseTransaction = async ({ e2eId }: any) => {
     />
   </div>
   <div v-if="flowStep == Step.List">
-    <ListComponent
+    <BuyConfirmedComponent
       v-if="!loadingRelease"
       :last-wallet-release-transactions="lastWalletReleaseTransactions"
       :tokenAmount="tokenAmount"
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index d8fdab1..9552912 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -1,11 +1,73 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import blockchain from "../utils/blockchain";
+import ListingComponent from "@/components/ListingComponent.vue";
+import type { BigNumber } from "ethers";
+import { ref, watch } from "vue";
+
+const etherStore = useEtherStore();
+
+const { walletAddress } = storeToRefs(etherStore);
+const depositList = ref<any[]>([]);
+
+if (walletAddress.value) {
+  const walletDeposits =
+    await blockchain.listValidDepositTransactionsByWalletAddress(
+      walletAddress.value
+    );
+  if (walletDeposits) {
+    depositList.value = walletDeposits;
+  }
+}
+
+const handleCancelDeposit = async (depositID: BigNumber, index: number) => {
+  const response = await blockchain.cancelDeposit(depositID);
+  if (response == true) {
+    console.log("Depósito cancelado com sucesso.");
+    depositList.value.splice(index, 1);
+  }
+};
+
+const handleWithDrawDeposit = async (depositID: BigNumber, index: number) => {
+  const response = await blockchain.withdrawDeposit(depositID);
+  if (response == true) {
+    console.log("Token retirado com sucesso.");
+    depositList.value.splice(index, 1);
+  }
+};
+
+watch(walletAddress, async () => {
+  const walletDeposits =
+    await blockchain.listValidDepositTransactionsByWalletAddress(
+      walletAddress.value
+    );
+  if (walletDeposits) {
+    depositList.value = walletDeposits;
+  }
+});
+</script>
 
 <template>
-  <div class="page">Gerenciar Ofertas</div>
+  <div class="page">
+    <div class="header">Gerenciar ofertas</div>
+    <div class="w-full max-w-4xl">
+      <ListingComponent
+        :wallet-transactions="depositList"
+        :is-manage-mode="true"
+        @cancel-deposit="handleCancelDeposit"
+        @withdraw-deposit="handleWithDrawDeposit"
+      ></ListingComponent>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .page {
-  @apply flex gap-8 mt-24;
+  @apply flex flex-col items-center gap-10 mt-20 w-full;
+}
+
+.header {
+  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
 }
 </style>
diff --git a/src/views/TransactionHistoryView.vue b/src/views/TransactionHistoryView.vue
new file mode 100644
index 0000000..22c555f
--- /dev/null
+++ b/src/views/TransactionHistoryView.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import { ref, watch } from "vue";
+import ListingComponent from "@/components/ListingComponent.vue";
+import blockchain from "../utils/blockchain";
+
+const etherStore = useEtherStore();
+const { walletAddress } = storeToRefs(etherStore);
+const allUserTransactions = ref<any[]>([]);
+
+if (walletAddress.value) {
+  await blockchain
+    .listAllTransactionByWalletAddress(walletAddress.value)
+    .then((res) => {
+      if (res) allUserTransactions.value = res;
+    });
+}
+
+watch(walletAddress, async (newValue) => {
+  await blockchain.listAllTransactionByWalletAddress(newValue).then((res) => {
+    if (res) allUserTransactions.value = res;
+  });
+});
+
+watch(walletAddress, async (newValue) => {
+  console.log(newValue);
+});
+
+watch(allUserTransactions, (newValue) => {
+  console.log(newValue);
+});
+</script>
+
+<template>
+  <div class="page">
+    <div class="header">Histórico de transações</div>
+    <div class="w-full max-w-4xl">
+      <ListingComponent
+        :wallet-transactions="allUserTransactions"
+        :is-manage-mode="false"
+      ></ListingComponent>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex flex-col gap-10 mt-20 w-full items-center;
+}
+
+.header {
+  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
+}
+</style>