diff --git a/src/assets/chevronDownBlack.svg b/src/assets/chevronDownBlack.svg
new file mode 100644
index 0000000..3fe97eb
--- /dev/null
+++ b/src/assets/chevronDownBlack.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="black"/>
+</svg>
diff --git a/src/assets/chevronUp.svg b/src/assets/chevronUp.svg
new file mode 100644
index 0000000..224851e
--- /dev/null
+++ b/src/assets/chevronUp.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3536 7.35355C13.1583 7.54882 12.8417 7.54882 12.6464 7.35355L7 1.70711L1.35355 7.35355C1.15829 7.54881 0.841709 7.54881 0.646446 7.35355C0.451184 7.15829 0.451184 6.84171 0.646446 6.64645L6.64645 0.646446C6.84171 0.451184 7.15829 0.451184 7.35355 0.646446L13.3536 6.64645C13.5488 6.84171 13.5488 7.15829 13.3536 7.35355Z" fill="#111827"/>
+</svg>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 6b7de9f..25989d0 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -2,6 +2,7 @@
 import router from "@/router";
 import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
+import { ref } from "vue";
 import blockchain from "../utils/blockchain";
 
 // Store reference
@@ -9,6 +10,9 @@ const etherStore = useEtherStore();
 
 const { walletAddress, balance } = storeToRefs(etherStore);
 
+const menuOpenToggle = ref<boolean>(false);
+const menuHoverToggle = ref<boolean>(false);
+
 //Methods
 const connectMetaMask = () => {
   blockchain.connectProvider();
@@ -28,31 +32,27 @@ const formatWalletBalance = (): String => {
   const fixed = Number(balance.value);
   return fixed.toFixed(2);
 };
+
+const disconnectUser = () => {
+  etherStore.setWalletAddress("");
+  const currentRoute = router.currentRoute.value.path;
+  if (currentRoute !== "/") {
+    router.push("/");
+  } else {
+    window.location.reload();
+  }
+};
 </script>
 
 <template>
   <header>
-    <img
-      alt="P2Pix logo"
-      class="logo"
-      src="@/assets/logo.svg"
-      width="75"
-      height="75"
-    />
+    <img alt="P2Pix logo" class="logo" src="@/assets/logo.svg" width="75" height="75" />
     <div class="flex gap-4 items-center">
-      <button
-        type="button"
-        class="default-button"
-        v-on:click="router.push('/seller')"
-      >
+      <button type="button" class="default-button" v-on:click="router.push('/seller')">
         Quero vender
       </button>
-      <button
-        type="button"
-        v-if="!walletAddress"
-        class="border-amber-500 border-2 rounded default-button"
-        @click="connectMetaMask()"
-      >
+      <button type="button" v-if="!walletAddress" class="border-amber-500 border-2 rounded default-button"
+        @click="connectMetaMask()">
         Conectar carteira
       </button>
       <div v-if="walletAddress" class="account-info">
@@ -61,10 +61,85 @@ const formatWalletBalance = (): String => {
           <span class="default-text"> Ethereum </span>
           <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
         </div>
-        <div class="top-bar-info">
-          <img alt="Account image" src="@/assets/account.svg" />
-          <span class="default-text text-sm">{{ formatWalletAddress() }}</span>
-          <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
+        <div class="flex flex-col">
+          <div
+            class="top-bar-info cursor-pointer"
+            @click="menuOpenToggle = !menuOpenToggle"
+            @mouseover="menuHoverToggle = true"
+            @mouseout="menuHoverToggle = false"
+            :style="{
+              backgroundColor: menuOpenToggle
+                ? '#F9F9F9'
+                : menuHoverToggle
+                ? '#F9F9F9'
+                : 'transparent',
+            }"
+          >
+            <img alt="Account image" src="@/assets/account.svg" />
+            <span
+              class="default-text text-sm"
+              :style="{
+                color: menuOpenToggle
+                  ? '#000000'
+                  : menuHoverToggle
+                  ? '#000000'
+                  : 'rgb(249 250 251)',
+              }"
+            >
+              {{ formatWalletAddress() }}
+            </span>
+            <img
+              class="text-black"
+              v-if="!menuHoverToggle && !menuOpenToggle"
+              alt="Chevron Down"
+              src="@/assets/chevronDown.svg"
+            />
+            <img
+              v-if="menuOpenToggle"
+              alt="Chevron Up"
+              src="@/assets/chevronUp.svg"
+            />
+            <img
+              v-if="menuHoverToggle && !menuOpenToggle"
+              alt="Chevron Down Black"
+              src="@/assets/chevronDownBlack.svg"
+            />
+          </div>
+          <div
+            v-show="menuOpenToggle"
+            class="mt-10 absolute w-full text-black"
+          >
+            <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>
+                <div
+                  class="menu-button px-4 cursor-pointer"
+                  onclick="window.location='/manage_bids'"
+                >
+                  <div class="py-4 text-end font-semibold text-xs">
+                    Gerenciar Ofertas
+                  </div>
+                  <hr />
+                </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">
+                    Desconectar
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="top-bar-info">
           <span class="default-text text-sm">
@@ -85,6 +160,7 @@ header {
 .default-button {
   @apply px-4 py-2 rounded text-gray-50 font-semibold text-base;
 }
+
 .account-info {
   @apply flex items-center gap-6;
 }
@@ -96,4 +172,8 @@ header {
 .top-bar-info {
   @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded;
 }
+
+.menu-button:hover {
+  background-color: #E5E7EB;
+}
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 116a89a..9684b60 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,8 @@
 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 ManageBidsView from "../views/ManageBidsView.vue";
 import SellerView from "@/views/SellerView.vue";
 
 const router = createRouter({
@@ -21,6 +23,16 @@ const router = createRouter({
       name: "mock",
       component: MockView,
     },
+    {
+      path: "/bid_history",
+      name: "bid history",
+      component: BidHistoryView,
+    },
+    {
+      path: "/manage_bids",
+      name: "manage bids",
+      component: ManageBidsView,
+    },
   ],
 });
 
diff --git a/src/views/BidHistoryView.vue b/src/views/BidHistoryView.vue
new file mode 100644
index 0000000..a89deb3
--- /dev/null
+++ b/src/views/BidHistoryView.vue
@@ -0,0 +1,12 @@
+<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/ManageBidsView.vue b/src/views/ManageBidsView.vue
new file mode 100644
index 0000000..636665d
--- /dev/null
+++ b/src/views/ManageBidsView.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="page">Gerenciar Ofertas</div>
+</template>
+
+<style scoped>
+.page {
+  @apply flex gap-8 mt-24;
+}
+</style>