diff --git a/src/App.vue b/src/App.vue
index ec0b484..2d1e23d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useRoute } from "vue-router";
 import TopBar from "@/components/TopBar/TopBar.vue";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import { init, useOnboard } from "@web3-onboard/vue";
@@ -6,6 +7,7 @@ import injectedModule from "@web3-onboard/injected-wallets";
 import { Networks } from "./model/Networks";
 import { NetworkEnum } from "./model/NetworkEnum";
 
+const route = useRoute();
 const injected = injectedModule();
 
 const web3Onboard = init({
@@ -33,18 +35,25 @@ if (!connectedWallet) {
 </script>
 
 <template>
-  <TopBar />
-  <RouterView v-slot="{ Component }">
-    <template v-if="Component">
-      <Suspense>
-        <component :is="Component"></component>
-        <template #fallback>
-          <appkit-button />
-          <div class="flex w-full h-full justify-center items-center">
-            <SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
+  <div class="p-3 sm:p-4 md:p-8">
+    <TopBar />
+    <RouterView v-slot="{ Component }">
+      <template v-if="Component">
+        <Transition name="page" mode="out-in" appear>
+          <div :key="route.fullPath">
+            <Suspense>
+              <template #default>
+                <component :is="Component" />
+              </template>
+              <template #fallback>
+                <div class="flex w-full h-full justify-center items-center">
+                  <SpinnerComponent :width="'16'" :height="'16'" />
+                </div>
+              </template>
+            </Suspense>
           </div>
-        </template>
-      </Suspense>
-    </template>
-  </RouterView>
+        </Transition>
+      </template>
+    </RouterView>
+  </div>
 </template>
diff --git a/src/assets/chevron.svg b/src/assets/chevron.svg
new file mode 100644
index 0000000..d5b4633
--- /dev/null
+++ b/src/assets/chevron.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 id="chevronDown" 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="currentColor"/>
+</svg>
diff --git a/src/assets/main.css b/src/assets/main.css
index 06401b6..3e1fbc9 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -6,7 +6,6 @@
 #app {
   width: 100%;
   margin: 0 auto;
-  padding: 2rem;
   height: fit-content;
   min-height: 100vh;
   background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%);
@@ -25,3 +24,7 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
+
+.main-container {
+  @apply flex w-full md:max-w-lg flex-col justify-center items-center px-4 sm:px-8 py-4 sm:py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
+}
diff --git a/src/assets/transitions.css b/src/assets/transitions.css
new file mode 100644
index 0000000..4ad8cc6
--- /dev/null
+++ b/src/assets/transitions.css
@@ -0,0 +1,21 @@
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.3s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
index dfd346a..1c88b10 100644
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@@ -86,7 +86,7 @@ onMounted(async () => {
         para a sua carteira!
       </span>
     </div>
-    <div class="blur-container">
+    <div class="main-container">
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
@@ -145,13 +145,6 @@ p {
 .text {
   @apply text-white 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 max-w-screen-sm;
-}
-
-.blur-container {
-  @apply flex w-full max-w-xs md:max-w-lg flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
-}
 
 .last-release-info {
   @apply font-medium text-base text-gray-900;
diff --git a/src/components/CustomModal/CustomModal.vue b/src/components/CustomModal/CustomModal.vue
index f68de25..5fed482 100644
--- a/src/components/CustomModal/CustomModal.vue
+++ b/src/components/CustomModal/CustomModal.vue
@@ -17,50 +17,52 @@ if (props.isRedirectModal) {
 </script>
 
 <template>
-  <div
-    class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
-    v-if="!isRedirectModal"
-  >
-    <div class="modal px-5 text-center">
-      <p
-        class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
-      >
-        <strong>ATENÇÃO!</strong>
-        A transação só será processada após inserir o código de autenticação.
-        Caso contrário não conseguiremos comprovar o seu depósito e não será
-        possível transferir os tokens para sua carteira.
-      </p>
-      <button
-        @click="$emit('close-modal')"
-        class="border-2 border-solid border-amber-400 mt-2"
-      >
-        Entendi
-      </button>
-    </div>
-  </div>
-  <div
-    class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
-    v-if="isRedirectModal"
-  >
-    <div class="modal px-5 text-center">
-      <p
-        class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
-      >
-        Retomar a última compra?
-      </p>
-      <div class="flex justify-around items-center px-2">
+  <div>
+    <div
+      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
+      v-if="!isRedirectModal"
+    >
+      <div class="modal px-5 text-center">
+        <p
+          class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
+        >
+          <strong>ATENÇÃO!</strong>
+          A transação só será processada após inserir o código de autenticação.
+          Caso contrário não conseguiremos comprovar o seu depósito e não será
+          possível transferir os tokens para sua carteira.
+        </p>
         <button
           @click="$emit('close-modal')"
-          class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          class="border-2 border-solid border-amber-400 mt-2"
         >
-          Não
+          Entendi
         </button>
-        <button
-          @click="$emit('go-to-lock')"
-          class="border-2 border-solid border-white-400 mt-2 font-semibold"
+      </div>
+    </div>
+    <div
+      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
+      v-if="isRedirectModal"
+    >
+      <div class="modal px-5 text-center">
+        <p
+          class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
         >
-          Sim
-        </button>
+          Retomar a última compra?
+        </p>
+        <div class="flex justify-around items-center px-2">
+          <button
+            @click="$emit('close-modal')"
+            class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          >
+            Não
+          </button>
+          <button
+            @click="$emit('go-to-lock')"
+            class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          >
+            Sim
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index f7cbf1d..f967286 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -162,10 +162,10 @@ showInitialItems();
 </script>
 
 <template>
-  <div class="blur-container" v-if="loadingWalletTransactions">
+  <div class="main-container !w-full !max-w-full" v-if="loadingWalletTransactions">
     <SpinnerComponent width="8" height="8"></SpinnerComponent>
   </div>
-  <div class="blur-container" v-if="!loadingWalletTransactions">
+  <div class="main-container !w-full !max-w-full" v-if="!loadingWalletTransactions">
     <div
       class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-if="props.validDeposits.length > 0"
@@ -389,10 +389,6 @@ p {
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center px-4 py-3 sm:px-8 sm: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;
 }
diff --git a/src/components/LoadingComponent/LoadingComponent.vue b/src/components/LoadingComponent/LoadingComponent.vue
index 04d0e7c..30db539 100644
--- a/src/components/LoadingComponent/LoadingComponent.vue
+++ b/src/components/LoadingComponent/LoadingComponent.vue
@@ -15,7 +15,7 @@ const props = defineProps({
         {{ props.title ? props.title : "Confirme em sua carteira" }}
       </span>
     </div>
-    <div class="blur-container sm:w-[26rem] w-[20rem]">
+    <div class="main-container !sm:w-[26rem] !w-[20rem]">
       <div
         class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
       >
@@ -60,10 +60,6 @@ const props = defineProps({
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center sm:px-8 px-6 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
 }
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 4cf2c05..f501101 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -97,7 +97,7 @@ onUnmounted(() => {
         autenticação para enviar a transação para a rede.
       </span>
     </div>
-    <div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black">
+    <div class="main-container sm:max-w-[28rem] max-w-[20rem] text-black">
       <div
         class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
       >
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 49896b2..7339a44 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -126,7 +126,7 @@ const enableOrDisableConfirmButton = (): void => {
     enableConfirmButton.value = true;
   else if (
     selectedRootstockDeposit.value &&
-    networkName.value == NetworkEnum.polygon
+    networkName.value != NetworkEnum.rootstock
   )
     enableConfirmButton.value = true;
   else enableConfirmButton.value = false;
@@ -155,7 +155,7 @@ watch(walletAddress, (): void => {
         tokens após realizar o Pix</span
       >
     </div>
-    <div class="blur-container">
+    <div class="main-container">
       <div class="backdrop-blur -z-10 w-full h-full"></div>
       <div
         class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@@ -172,7 +172,7 @@ watch(walletAddress, (): void => {
             placeholder="0  "
             step=".01"
           />
-          <div class="relative">
+          <div class="relative overflow-visible">
             <button
               ref="tokenDropdownRef"
               class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -194,35 +194,37 @@ watch(walletAddress, (): void => {
                 alt="Chevron Down"
               />
             </button>
-            <div
-              v-if="selectTokenToggle"
-              class="mt-2 w-[100px] text-gray-900 absolute"
-            >
+            <transition name="dropdown">
               <div
-                class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
+                v-if="selectTokenToggle"
+                class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
               >
                 <div
-                  v-for="token in TokenEnum"
-                  class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
-                  @click="handleSelectedToken(token)"
+                  class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
                 >
-                  <img
-                    :alt="token + ' logo'"
-                    width="20"
-                    height="20"
-                    :src="getTokenImage(token)"
-                  />
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  <div
+                    v-for="token in TokenEnum"
+                    class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
+                    @click="handleSelectedToken(token)"
                   >
-                    {{ token }}
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
+                    <img
+                      :alt="token + ' logo'"
+                      width="20"
+                      height="20"
+                      :src="getTokenImage(token)"
+                    />
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    >
+                      {{ token }}
+                    </span>
+                  </div>
+                  <div class="w-full flex justify-center">
+                    <hr class="w-4/5" />
+                  </div>
                 </div>
               </div>
-            </div>
+            </transition>
           </div>
         </div>
         <div class="custom-divide py-2 mb-2"></div>
@@ -315,10 +317,6 @@ watch(walletAddress, (): void => {
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 max-w-screen-sm;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
 }
diff --git a/src/components/SellerSteps/SellerSearchComponent.vue b/src/components/SellerSteps/SellerSearchComponent.vue
index 127cb4e..b3de2e9 100644
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -54,7 +54,7 @@ const handleInputEvent = (event: any): void => {
         tokens após realizar o Pix</span
       >
     </div>
-    <div class="blur-container">
+    <div class="main-container">
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
@@ -153,10 +153,6 @@ const handleInputEvent = (event: any): void => {
   @apply text-white text-center;
 }
 
-.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-10;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
 }
diff --git a/src/components/SellerSteps/SendNetwork.vue b/src/components/SellerSteps/SendNetwork.vue
index e8683f6..5cf7c86 100644
--- a/src/components/SellerSteps/SendNetwork.vue
+++ b/src/components/SellerSteps/SendNetwork.vue
@@ -26,7 +26,7 @@ const props = defineProps({
         os tokens de volta.</span
       >
     </div>
-    <div class="blur-container">
+    <div class="main-container sm:w-1/3">
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
@@ -75,10 +75,6 @@ p {
   @apply text-white text-center;
 }
 
-.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 max-w-screen-sm;
-}
-
 .last-deposit-info {
   @apply font-medium text-base;
 }
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index 2afd9fe..34c2656 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -101,7 +101,7 @@ const handleSellClick = async (
         envio da transação e confirme sua oferta.</span
       >
     </div>
-    <div class="blur-container">
+    <div class="main-container">
       <div class="backdrop-blur -z-10 w-full h-full"></div>
       <div
         class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@@ -111,15 +111,15 @@ const handleSellClick = async (
             type="number"
             v-model="offer"
             class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
-            v-bind:class="{
-              'font-semibold': offer != undefined,
-              'text-xl': offer != undefined,
+            :class="{
+              '!font-medium': offer !== undefined && offer !== '',
+              'text-xl': offer !== undefined && offer !== '',
             }"
             @input="debounce(handleInputEvent, 500)($event)"
             placeholder="Digite sua oferta"
             step=".01"
           />
-          <div class="relative">
+          <div class="relative overflow-visible">
             <button
               ref="tokenDropdownRef"
               class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -133,44 +133,44 @@ const handleSellClick = async (
               <span
                 class="text-gray-900 sm:text-lg text-md font-medium"
                 id="token"
-                >{{ selectedToken }}</span
               >
-              <ChevronDown
-                class="pr-4 sm:pr-0 transition-all duration-500 ease-in-out invert"
+                {{ selectedToken }}
+              </span>
+              <img
+                class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
                 :class="{ 'scale-y-[-1]': selectTokenToggle }"
                 alt="Chevron Down"
               />
             </button>
-            <div
-              v-if="selectTokenToggle"
-              class="mt-2 w-[100px] text-gray-900 absolute"
-            >
+            <transition name="dropdown">
               <div
-                class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
+                v-if="selectTokenToggle"
+                class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
               >
                 <div
-                  v-for="token in TokenEnum"
-                  :key="token"
-                  class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
-                  @click="handleSelectedToken(token)"
+                  class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
                 >
-                  <img
-                    :alt="token + ' logo'"
-                    width="20"
-                    height="20"
-                    :src="getTokenImage(token)"
-                  />
-                  <span
-                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  <div
+                    v-for="token in TokenEnum"
+                    :key="token"
+                    class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
+                    @click="handleSelectedToken(token)"
                   >
-                    {{ token }}
-                  </span>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
+                    <img
+                      :alt="token + ' logo'"
+                      width="20"
+                      height="20"
+                      :src="getTokenImage(token)"
+                    />
+                    <span
+                      class="text-gray-900 py-4 text-end font-semibold text-sm"
+                    >
+                      {{ token }}
+                    </span>
+                  </div>
                 </div>
               </div>
-            </div>
+            </transition>
           </div>
         </div>
 
@@ -194,6 +194,10 @@ const handleSellClick = async (
             type="text"
             v-model="pixKey"
             class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
+            :class="{
+              '!font-medium': pixKey !== undefined && pixKey !== '',
+              'text-xl': pixKey !== undefined && pixKey !== '',
+            }"
             placeholder="Digite a chave Pix"
           />
         </div>
@@ -241,10 +245,6 @@ const handleSellClick = async (
   @apply text-white text-center;
 }
 
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 max-w-screen-sm;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
   appearance: textfield;
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index d26cce5..26f2328 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -113,82 +113,7 @@ onClickOutside(infoMenuRef, () => {
 
     <div class="flex sm:gap-4 gap-2 items-center">
       <div class="flex flex-col">
-        <div
-          v-show="infoMenuOpenToggle"
-          class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
-        >
-          <div class="mt-2">
-            <div class="bg-white rounded-md z-10 -left-32 w-52">
-              <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  Documentação
-                </span>
-              </div>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-              <RouterLink
-                :to="'/faq'"
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-              >
-                <span
-                  class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
-                >
-                  Perguntas frequentes
-                </span>
-              </RouterLink>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-              <div
-                class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
-              >
-                <div class="redirect_button">
-                  <a
-                    href="https://www.twitter.com/doiim"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <TwitterIcon
-                      alt="Twitter"
-                      width="20"
-                      height="20"
-                      class="cursor-pointer"
-                    />
-                  </a>
-                  <a
-                    href="https://www.linkedin.com/company/doiim/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <LinkedinIcon
-                      alt="LinkedIn"
-                      width="20"
-                      height="20"
-                      class="cursor-pointer"
-                    />
-                  </a>
-                  <a
-                    href="https://www.github.com/doiim"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <GithubIcon
-                      alt="Github"
-                      width="20"
-                      height="20"
-                      class="cursor-pointer"
-                    />
-                  </a>
-                </div>
-              </div>
-              <div class="w-full flex justify-center">
-                <hr class="w-4/5" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
+        <button
           ref="infoMenuRef"
           class="default-button hidden md:inline-block cursor-pointer"
           @click="
@@ -200,16 +125,93 @@ onClickOutside(infoMenuRef, () => {
           "
         >
           <h1
-            class="text-gray-50 font-semibold sm:text-base"
+            class="topbar-text topbar-link"
             :style="{
               'border-bottom': infoMenuOpenToggle
                 ? '2px solid white'
-                : 'transparent',
+                : '2px solid transparent',
             }"
           >
             Menu
           </h1>
-        </div>
+        </button>
+        <transition name="dropdown">
+          <div
+            v-show="infoMenuOpenToggle"
+            class="mt-10 absolute w-full text-gray-900 lg-view"
+          >
+            <div class="mt-2">
+              <div class="bg-white rounded-md z-10 -left-36 w-52">
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    Documentação
+                  </span>
+                </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <RouterLink
+                  :to="'/faq'"
+                  class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                >
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
+                  >
+                    Perguntas frequentes
+                  </span>
+                </RouterLink>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div
+                  class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
+                >
+                  <div class="redirect_button flex mr-4">
+                    <div class="mr-6">
+                      <a href="https://www.twitter.com/doiim">
+                        <img
+                          alt="Twitter"
+                          width="20"
+                          height="20"
+                          src="@/assets/twitterIcon.svg"
+                          class="cursor-pointer"
+                        />
+                      </a>
+                    </div>
+                    <div class="mr-6">
+                      <a href="https://www.linkedin.com/company/doiim/">
+                        <img
+                          alt="LinkedIn"
+                          width="20"
+                          height="20"
+                          src="@/assets/linkedinIcon.svg"
+                          class="cursor-pointer"
+                          href="https://www.linkedin.com/company/doiim/"
+                        />
+                      </a>
+                    </div>
+                    <div class="mr-6">
+                      <a href="https://www.github.com/doiim">
+                        <img
+                          alt="Github"
+                          width="20"
+                          height="20"
+                          src="@/assets/githubIcon.svg"
+                          class="cursor-pointer"
+                        />
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </transition>
       </div>
       <RouterLink
         :to="'/faq'"
@@ -220,21 +222,26 @@ onClickOutside(infoMenuRef, () => {
       </RouterLink>
       <RouterLink
         :to="sellerView ? '/' : '/seller'"
-        class="default-button sm:whitespace-normal whitespace-nowrap hidden md:inline-block"
+        class="default-button sm:whitespace-normal whitespace-nowrap lg-view w-40 sm:w-44 md:w-36"
       >
-        {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        <div class="topbar-text topbar-link text-center mx-auto inline-block">
+          {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        </div>
       </RouterLink>
       <RouterLink
         :to="sellerView ? '/' : '/seller'"
         v-if="!walletAddress"
-        class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden"
+        class="default-button sm:whitespace-normal whitespace-nowrap sm-view w-40 sm:w-44 md:w-36"
       >
-        {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        <div class="topbar-text topbar-link text-center mx-auto inline-block">
+          {{ sellerView ? "Quero comprar" : "Quero vender" }}
+        </div>
       </RouterLink>
-      <div class="flex flex-col" v-if="walletAddress">
+      <div class="flex flex-col relative" v-if="walletAddress">
         <div
           ref="currencyRef"
-          class="group top-bar-info cursor-pointer h-10"
+          class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
+          :class="{ 'bg-gray-50': currencyMenuOpenToggle }"
           @click="
             [
               (currencyMenuOpenToggle = !currencyMenuOpenToggle),
@@ -249,25 +256,36 @@ onClickOutside(infoMenuRef, () => {
             height="24"
             width="24"
           />
-          <span class="default-text hidden md:inline-block">
+          <span
+            class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
+            :class="{ '!text-gray-900': currencyMenuOpenToggle }"
+          >
             {{ Networks[etherStore.networkName].chainName }}
           </span>
-          <ChevronDown
-            class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
+          <div
+            class="transition-all duration-500 ease-in-out mt-1"
             :class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
-            alt="Chevron Down"
-          />
+          >
+            <svg
+              viewBox="0 0 16 16"
+              class="h-4 w-4 text-white group-hover:text-gray-900"
+              :class="{ '!text-gray-900': currencyMenuOpenToggle }"
+            >
+              <use href="@/assets/chevron.svg#chevronDown"></use>
+            </svg>
+          </div>
         </div>
-        <div
-          v-show="currencyMenuOpenToggle"
-          class="mt-10 pl-3 absolute w-full text-gray-900 hidden md:inline-block"
-        >
-          <div class="mt-2">
-            <div class="bg-white rounded-md z-10">
+        <transition name="dropdown">
+          <div
+            v-show="currencyMenuOpenToggle"
+            class="mt-10 absolute text-gray-900 lg-view min-w-max left-0"
+          >
+            <div
+              class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
+            >
               <div
                 v-for="(chainData, network) in Networks"
-                :key="network"
-                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
                 @click="networkChange(network)"
               >
                 <img
@@ -275,8 +293,9 @@ onClickOutside(infoMenuRef, () => {
                   width="20"
                   height="20"
                   :src="getNetworkImage(NetworkEnum[network])"
+                  class="mr-2 ml-1"
                 />
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
+                <span class="text-gray-900 font-semibold text-sm">
                   {{ chainData.chainName }}
                 </span>
               </div>
@@ -285,7 +304,7 @@ onClickOutside(infoMenuRef, () => {
               </div>
             </div>
           </div>
-        </div>
+        </transition>
       </div>
       <button
         type="button"
@@ -304,10 +323,11 @@ onClickOutside(infoMenuRef, () => {
         Conectar
       </button>
       <div v-if="walletAddress" class="account-info">
-        <div class="flex flex-col">
+        <div class="flex flex-col relative">
           <div
             ref="walletAddressRef"
-            class="top-bar-info cursor-pointer h-10"
+            class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
+            :class="{ 'bg-gray-50': menuOpenToggle }"
             @click="
               [
                 (menuOpenToggle = !menuOpenToggle),
@@ -316,41 +336,52 @@ onClickOutside(infoMenuRef, () => {
               ]
             "
           >
-            <Account alt="Account image" />
-            <span class="default-text">
+            <img alt="Account image" src="@/assets/account.svg" />
+            <span
+              class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
+              :class="{ '!text-gray-900': menuOpenToggle }"
+            >
               {{ formatWalletAddress() }}
             </span>
-            <ChevronDown
-              class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
+            <div
+              class="transition-all duration-500 ease-in-out mt-1"
               :class="{ 'scale-y-[-1]': menuOpenToggle }"
-              alt="Chevron Down"
-            />
-          </div>
-          <div
-            v-show="menuOpenToggle"
-            class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
-          >
-            <div class="pl-4 mt-2">
-              <div class="bg-white rounded-md z-10">
-                <RouterLink
-                  onclick="closeMenu()"
-                  to="/manage_bids"
-                  class="redirect_button menu-button"
-                >
-                  Gerenciar Ofertas
-                </RouterLink>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
-                </div>
-                <button
-                  onclick="disconnectUser()"
-                  class="redirect_button menu-button"
-                >
-                  Desconectar
-                </button>
-              </div>
+            >
+              <svg
+                viewBox="0 0 16 16"
+                class="h-4 w-4 text-white group-hover:text-gray-900"
+                :class="{ '!text-gray-900': menuOpenToggle }"
+              >
+                <use href="@/assets/chevron.svg#chevronDown"></use>
+              </svg>
             </div>
           </div>
+          <transition name="dropdown">
+            <div
+              v-show="menuOpenToggle"
+              class="mt-10 absolute w-full text-gray-900 lg-view"
+            >
+              <div class="pl-4 mt-2">
+                <div
+                  class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
+                >
+                  <div class="menu-button" @click="closeMenu()">
+                    <RouterLink to="/manage_bids" class="redirect_button">
+                      Gerenciar Ofertas
+                    </RouterLink>
+                  </div>
+                  <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
+                    </RouterLink>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </transition>
         </div>
       </div>
     </div>
@@ -450,6 +481,13 @@ header {
   @apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
 }
 
+.topbar-text {
+  @apply text-gray-50 font-semibold sm:text-base mt-0.5 transition-all duration-500;
+}
+.topbar-link {
+  @apply mt-0.5 hover:border-b-2 border-b-2 border-transparent hover:!border-white;
+}
+
 .account-info {
   @apply flex items-center gap-6;
 }
@@ -459,7 +497,7 @@ header {
 }
 
 .top-bar-info {
-  @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center;
+  @apply flex justify-between items-center gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg;
 }
 
 .redirect_button {
@@ -474,9 +512,26 @@ a:hover {
   @apply bg-gray-200 rounded;
 }
 
+.lg-view {
+  display: inline-block;
+}
+.sm-view {
+  display: none;
+}
+
 .mobile-menu {
   margin-top: 1400px;
   bottom: 0px;
   height: auto;
 }
+
+@media screen and (max-width: 500px) {
+  .lg-view {
+    display: none;
+  }
+
+  .sm-view {
+    display: inline-block;
+  }
+}
 </style>
diff --git a/src/main.ts b/src/main.ts
index 1fa42f8..54e2868 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,7 @@ import router from "./router";
 import { createPinia } from "pinia";
 
 import "./assets/main.css";
+import "./assets/transitions.css";
 
 const app = createApp(App);
 
diff --git a/src/views/FaqView.vue b/src/views/FaqView.vue
index 03fb430..96cf3a8 100644
--- a/src/views/FaqView.vue
+++ b/src/views/FaqView.vue
@@ -134,11 +134,4 @@ h4 {
 .text {
   @apply text-white 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 max-w-screen-sm;
-}
-
-.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 max-w-screen-sm;
-}
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 76b95de..b40afed 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -120,46 +120,48 @@ onMounted(async () => {
 </script>
 
 <template>
-  <SearchComponent
-    v-if="flowStep == Step.Search"
-    @token-buy="confirmBuyClick"
-  />
-  <CustomAlert
-    v-if="flowStep == Step.Search && showModal"
-    :type="'redirect'"
-    @close-alert="showModal = false"
-    @go-to-lock="flowStep = Step.Buy"
-  />
-  <CustomAlert
-    v-if="
-      flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
-    "
-    :type="'buy'"
-    @close-alert="showBuyAlert = false"
-  />
-  <div v-if="flowStep == Step.Buy">
-    <QrCodeComponent
-      :pixTarget="String(pixTarget)"
-      :tokenValue="tokenAmount"
-      @pix-validated="releaseTransaction"
-      v-if="!loadingLock"
+  <div>
+    <SearchComponent
+      v-if="flowStep == Step.Search"
+      @token-buy="confirmBuyClick"
     />
-    <LoadingComponent
-      v-if="loadingLock"
-      :message="'A transação está sendo enviada para a rede'"
+    <CustomAlert
+      v-if="flowStep == Step.Search && showModal"
+      :type="'redirect'"
+      @close-alert="showModal = false"
+      @go-to-lock="flowStep = Step.Buy"
     />
-  </div>
-  <div v-if="flowStep == Step.List">
-    <div class="flex flex-col gap-10" v-if="!loadingRelease">
-      <BuyConfirmedComponent
-        :tokenAmount="tokenAmount"
-        :is-current-step="flowStep == Step.List"
-        @make-another-transaction="flowStep = Step.Search"
+    <CustomAlert
+      v-if="
+        flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
+      "
+      :type="'buy'"
+      @close-alert="showBuyAlert = false"
+    />
+    <div v-if="flowStep == Step.Buy">
+      <QrCodeComponent
+        :pixTarget="String(pixTarget)"
+        :tokenValue="tokenAmount"
+        @pix-validated="releaseTransaction"
+        v-if="!loadingLock"
+      />
+      <LoadingComponent
+        v-if="loadingLock"
+        :message="'A transação está sendo enviada para a rede'"
+      />
+    </div>
+    <div v-if="flowStep == Step.List">
+      <div class="flex flex-col gap-10" v-if="!loadingRelease">
+        <BuyConfirmedComponent
+          :tokenAmount="tokenAmount"
+          :is-current-step="flowStep == Step.List"
+          @make-another-transaction="flowStep = Step.Search"
+        />
+      </div>
+      <LoadingComponent
+        v-if="loadingRelease"
+        :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
       />
     </div>
-    <LoadingComponent
-      v-if="loadingRelease"
-      :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
-    />
   </div>
 </template>
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 8ee3444..c5f9f76 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -86,30 +86,32 @@ watch(networkName, async () => {
 </script>
 
 <template>
-  <CustomAlert
-    v-if="showAlert"
-    :type="'withdraw'"
-    @close-alert="showAlert = false"
-  />
-  <div class="page">
-    <div class="header" v-if="!loadingWithdraw && !walletAddress">
-      Por Favor Conecte Sua Carteira
-    </div>
-    <div class="header" v-if="!loadingWithdraw && walletAddress">
-      Gerenciar Ofertas
-    </div>
-    <div class="w-full max-w-4xl">
-      <ListingComponent
-        v-if="!loadingWithdraw && walletAddress"
-        :valid-deposits="depositList"
-        :wallet-transactions="transactionsList"
-        :active-lock-amount="activeLockAmount"
-        @deposit-withdrawn="callWithdraw"
-      ></ListingComponent>
-      <LoadingComponent
-        v-if="loadingWithdraw"
-        :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
-      />
+  <div>
+    <CustomAlert
+      v-if="showAlert"
+      :type="'withdraw'"
+      @close-alert="showAlert = false"
+    />
+    <div class="page">
+      <div class="header" v-if="!loadingWithdraw && !walletAddress">
+        Por Favor Conecte Sua Carteira
+      </div>
+      <div class="header" v-if="!loadingWithdraw && walletAddress">
+        Gerenciar Ofertas
+      </div>
+      <div class="w-full max-w-4xl">
+        <ListingComponent
+          v-if="!loadingWithdraw && walletAddress"
+          :valid-deposits="depositList"
+          :wallet-transactions="transactionsList"
+          :active-lock-amount="activeLockAmount"
+          @deposit-withdrawn="callWithdraw"
+        ></ListingComponent>
+        <LoadingComponent
+          v-if="loadingWithdraw"
+          :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/SellerView.vue b/src/views/SellerView.vue
index f4381d6..dfd53d9 100644
--- a/src/views/SellerView.vue
+++ b/src/views/SellerView.vue
@@ -61,29 +61,31 @@ const sendNetwork = async () => {
 </script>
 
 <template>
-  <div v-if="flowStep == Step.Sell">
-    <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
-    <LoadingComponent
-      v-if="loading"
-      :message="'A transação está sendo enviada para a rede.'"
-    />
-  </div>
-  <CustomAlert
-    v-if="flowStep == Step.Sell && showAlert"
-    :type="'sell'"
-    @close-alert="showAlert = false"
-  />
-  <div v-if="flowStep == Step.Network">
-    <SendNetwork
-      :pixKey="pixKeyBuyer"
-      :offer="Number(offerValue)"
-      :selected-token="etherStore.selectedToken"
-      v-if="!loading"
-      @send-network="sendNetwork"
-    />
-    <LoadingComponent
-      v-if="loading"
-      :message="'A transação está sendo enviada para a rede.'"
+  <div>
+    <div v-if="flowStep == Step.Sell">
+      <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
+      <LoadingComponent
+        v-if="loading"
+        :message="'A transação está sendo enviada para a rede.'"
+      />
+    </div>
+    <CustomAlert
+      v-if="flowStep == Step.Sell && showAlert"
+      :type="'sell'"
+      @close-alert="showAlert = false"
     />
+    <div v-if="flowStep == Step.Network">
+      <SendNetwork
+        :pixKey="pixKeyBuyer"
+        :offer="Number(offerValue)"
+        :selected-token="etherStore.selectedToken"
+        v-if="!loading"
+        @send-network="sendNetwork"
+      />
+      <LoadingComponent
+        v-if="loading"
+        :message="'A transação está sendo enviada para a rede.'"
+      />
+    </div>
   </div>
 </template>