From b164b0ec2826ad1d19421d0550f305cdb55d5eb0 Mon Sep 17 00:00:00 2001
From: bush1D3v <victor.jose.lopes.navarro@gmail.com>
Date: Sun, 3 Nov 2024 19:27:06 -0300
Subject: [PATCH] bomb commit

---
 api/.env.example                              |   1 +
 api/src/types/CurrencyQuotes/Rates.ts         |   3 -
 app/App.vue                                   |  17 +-
 app/assets/css/main.css                       |  15 +-
 app/components/CurrencyQuotes/Select.vue      | 107 +++++
 app/components/CurrencyQuotes/Tab.vue         |  44 ++
 app/components/Dto/CurrencyQuotes.ts          | 193 ---------
 app/components/Dto/CurrencyQuotesDto.ts       | 190 +++++++++
 app/components/Dto/CurrencyQuotesDtoValues.ts | 193 +++++++++
 app/components/ui/button/index.ts             |  58 +--
 app/components/ui/collapsible/Collapsible.vue |  15 +
 .../ui/collapsible/CollapsibleContent.vue     |  11 +
 .../ui/collapsible/CollapsibleTrigger.vue     |  11 +
 app/components/ui/collapsible/index.ts        |   3 +
 app/components/ui/command/CommandItem.vue     |  10 +-
 app/components/ui/drawer/Drawer.vue           |  19 +
 app/components/ui/drawer/DrawerContent.vue    |  28 ++
 .../ui/drawer/DrawerDescription.vue           |  20 +
 app/components/ui/drawer/DrawerFooter.vue     |  14 +
 app/components/ui/drawer/DrawerHeader.vue     |  14 +
 app/components/ui/drawer/DrawerOverlay.vue    |  18 +
 app/components/ui/drawer/DrawerTitle.vue      |  20 +
 app/components/ui/drawer/index.ts             |   8 +
 app/components/ui/popover/Popover.vue         |  15 +
 app/components/ui/popover/PopoverContent.vue  |  45 +++
 app/components/ui/popover/PopoverTrigger.vue  |  11 +
 app/components/ui/popover/index.ts            |   4 +
 app/config/composable/translate.ts            |  41 +-
 app/locales/en/translate.json                 |   8 +-
 app/locales/es/translate.json                 |   8 +-
 app/locales/pt/translate.json                 |   8 +-
 app/router/index.ts                           | 354 ++++++++--------
 app/services/CurrencyQuotes.ts                |   8 +-
 app/stores/useCurrencyQuotesStore.ts          |  40 +-
 app/types/CurrencyQuotes/Rates.ts             | 379 +++++++++---------
 app/views/AboutUs.vue                         |   8 +-
 app/views/BrapiDev/Stocks.vue                 |  45 ++-
 app/views/CoinMarketCap/CryptoDetail.vue      |  38 +-
 app/views/CoinMarketCap/Cryptos.vue           |  45 ++-
 app/views/CurrencyQuotes.vue                  |  17 -
 app/views/Home.vue                            |  10 +-
 app/views/Policies/CookiePolicy.vue           |   2 +-
 package.json                                  |   3 +
 tailwind.config.js                            |   1 +
 tsconfig.app.json                             |   3 +-
 45 files changed, 1345 insertions(+), 760 deletions(-)
 create mode 100644 app/components/CurrencyQuotes/Select.vue
 create mode 100644 app/components/CurrencyQuotes/Tab.vue
 delete mode 100644 app/components/Dto/CurrencyQuotes.ts
 create mode 100644 app/components/Dto/CurrencyQuotesDto.ts
 create mode 100644 app/components/Dto/CurrencyQuotesDtoValues.ts
 create mode 100644 app/components/ui/collapsible/Collapsible.vue
 create mode 100644 app/components/ui/collapsible/CollapsibleContent.vue
 create mode 100644 app/components/ui/collapsible/CollapsibleTrigger.vue
 create mode 100644 app/components/ui/collapsible/index.ts
 create mode 100644 app/components/ui/drawer/Drawer.vue
 create mode 100644 app/components/ui/drawer/DrawerContent.vue
 create mode 100644 app/components/ui/drawer/DrawerDescription.vue
 create mode 100644 app/components/ui/drawer/DrawerFooter.vue
 create mode 100644 app/components/ui/drawer/DrawerHeader.vue
 create mode 100644 app/components/ui/drawer/DrawerOverlay.vue
 create mode 100644 app/components/ui/drawer/DrawerTitle.vue
 create mode 100644 app/components/ui/drawer/index.ts
 create mode 100644 app/components/ui/popover/Popover.vue
 create mode 100644 app/components/ui/popover/PopoverContent.vue
 create mode 100644 app/components/ui/popover/PopoverTrigger.vue
 create mode 100644 app/components/ui/popover/index.ts
 delete mode 100644 app/views/CurrencyQuotes.vue

diff --git a/api/.env.example b/api/.env.example
index 9dd8c01..81a242a 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -2,3 +2,4 @@ COINMARKETCAP_HOST=your_host
 COINMARKETCAP_KEY=your_key
 BRAPI_HOST=your_host
 BRAPI_KEY=your_key
+CURRENCYQUOTES_HOST=your_host
diff --git a/api/src/types/CurrencyQuotes/Rates.ts b/api/src/types/CurrencyQuotes/Rates.ts
index 9ff498d..0bd7e63 100644
--- a/api/src/types/CurrencyQuotes/Rates.ts
+++ b/api/src/types/CurrencyQuotes/Rates.ts
@@ -160,9 +160,6 @@ export interface Rates {
 	USD: number;
 	UYU: number;
 	UZS: number;
-	VEF_BLKMKT: number;
-	VEF_DICOM: number;
-	VEF_DIPRO: number;
 	VES: number;
 	VND: number;
 	VUV: number;
diff --git a/app/App.vue b/app/App.vue
index 3b430c6..f131d50 100644
--- a/app/App.vue
+++ b/app/App.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import {RouterView} from "vue-router";
+import { RouterView } from "vue-router";
 import Footer from "@/components/Layout/Footer.vue";
 import Header from "@/components/Layout/Header.vue";
-import Sonner from "./components/ui/sonner/Sonner.vue";
-import Toaster from "./components/ui/toast/Toaster.vue";
+import Sonner from "@/components/ui/sonner/Sonner.vue";
+import Toaster from "@/components/ui/toast/Toaster.vue";
+import Tab from "@/components/CurrencyQuotes/Tab.vue";
+
 </script>
 
 <template>
     <Header />
-    <RouterView />
+    <main class="min-h-[95dvh] relative ">
+        <RouterView />
+        <Toaster />
+        <Sonner />
+        <Tab />
+    </main>
     <Footer />
-    <Toaster />
-    <Sonner />
 </template>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 5e66e11..fbfc30f 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -10,9 +10,12 @@
 		--secondary-darker: #171b2d;
 		--border: #222a44;
 		--accent: #2d375b;
+        --button-bg: #2d375b;
 		--dark: #8b94a3;
 		--card: #2d375b;
 		--muted: #eeeeee;
+        --destructive: #959595;
+        --material: #252d4a;
 	}
 
 	:root {
@@ -21,7 +24,6 @@
 		--muted: #111111;
 		--muted-foreground: rgb(141, 67, 14);
 
-		--popover: rgb(255, 0, 0);
 		--popover-foreground: #ffffff;
 
 		--card: #c9c9c9;
@@ -47,7 +49,7 @@
 		--primary-foreground: #ffffff;
 		--secondary: #0088cc;
 		--surface: #17192e;
-		--material: #252d4a;
+        --material: #eeeeee;
 		--texture: #161727;
 		--positive: #28c686;
 		--negative: #d34545;
@@ -56,7 +58,7 @@
 		--negative-lighter: #db6868;
 		--negative-darker: #bf2d2d;
 		--background: #f7fafd;
-		--secondary-darker: #eeeeee;
+		--secondary-darker: #ffffff;
 		--fg: #ffffff;
 		--fg-dim: #bac8d2;
 		--fg-muted: #8b94a3;
@@ -68,7 +70,6 @@
 		--material-darker: #1d2339;
 		--texture-lighter: #1f2137;
 		--texture-darker: #0d0d17;
-		--on-primary: #ffffff;
 		--twitter: #000000;
 		--telegram: #0088cc;
 		--reddit: #ff4500;
@@ -84,10 +85,12 @@
 		--primary-darker: #ef233c;
 		--primary-darker: #edf2f4;
 
-		--accent: #d6d6d8;
+		--accent: #ededed;
 		--accent-foreground: #ffffff;
 
-		--destructive: rgb(149, 149, 149);
+        --button-bg: #d6d6d8;
+
+		--destructive: #5a5a5a;
 		--destructive-foreground: rgb(22, 22, 22);
 
 		--ring: #ffffff;
diff --git a/app/components/CurrencyQuotes/Select.vue b/app/components/CurrencyQuotes/Select.vue
new file mode 100644
index 0000000..30731c4
--- /dev/null
+++ b/app/components/CurrencyQuotes/Select.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { CaretSortIcon, CheckIcon } from "@radix-icons/vue";
+import { CurrencyQuotesDto } from "@/components/Dto/CurrencyQuotesDto";
+import { ref } from "vue";
+import { t } from "i18next";
+import { listCurrencyQuotes } from "@/services/CurrencyQuotes";
+import { useCurrencyQuotesStore } from "@/stores/useCurrencyQuotesStore";
+import { onMounted } from "vue";
+import { CurrencyQuotesDtoValues } from "../Dto/CurrencyQuotesDtoValues";
+import { watch } from "vue";
+
+const currencyQuotesStore = useCurrencyQuotesStore();
+
+interface Props {
+    direction: "left" | "right";
+}
+
+const props = defineProps<Props>();
+
+async function loadCurrencyQuotes() {
+    return await listCurrencyQuotes();
+}
+
+function selectItem(currency: KeyValue) {
+    open.value = false;
+    selectedValue.value = currency.value;
+    if (props.direction === "left") currencyQuotesStore.leftCurrency = currency.value;
+    else currencyQuotesStore.rightCurrency = currency.value;
+}
+
+onMounted(async () => {
+    const stateCurrencyQuotes = currencyQuotesStore.currencyQuotes;
+
+    if (!stateCurrencyQuotes) {
+        const data = await loadCurrencyQuotes();
+        if (!data) {
+            const currencies = {
+                table: "default",
+                rates: CurrencyQuotesDtoValues,
+                lastupdate: "2024-11-03T18:21:47.000000-03:00", // ISO 8601 date string
+            };
+            currencyQuotesStore.setCurrencyQuotes(currencies);
+        }
+        else currencyQuotesStore.setCurrencyQuotes(data);
+    }
+});
+
+interface KeyValue {
+    key: string;
+    value: string;
+}
+
+const open = ref(false)
+const selectedValue = props.direction === "left" ? ref(currencyQuotesStore.leftCurrency) : ref(currencyQuotesStore.rightCurrency)
+const currencies: KeyValue[] = Object.entries(CurrencyQuotesDto)
+    .map(([ key, value ]) => ({ key, value }))
+    .sort((a, b) => a.value.localeCompare(b.value))
+
+watch(() => currencyQuotesStore.leftCurrency, (value) => {
+    if (props.direction === 'left') {
+        selectedValue.value = value;
+    }
+});
+
+watch(() => currencyQuotesStore.rightCurrency, (value) => {
+    if (props.direction === 'right') {
+        selectedValue.value = value;
+    }
+});
+</script>
+
+<template>
+    <Popover v-model:open="open">
+        <PopoverTrigger as-child>
+            <Button variant="outline" role="combobox" :aria-expanded="open" class="w-[200px] justify-between">
+                {{ t(selectedValue) || t("Search currency...") }}
+                <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-[290px] p-0">
+            <Command>
+                <CommandInput class="h-9" placeholder="Search currency..." />
+                <CommandEmpty>{{ t("Nenhuma moeda encontrada.") }}</CommandEmpty>
+                <CommandList>
+                    <CommandGroup>
+                        <CommandItem v-for="currency in currencies" :key="currency.key" :value="currency.value"
+                            @select="() => selectItem(currency)">
+                            {{ t(currency.value) }}
+                            <CheckIcon
+                                :class="`ml-auto h-4 w-4 ${selectedValue === currency.value ? 'opacity-100' : 'opacity-0'}`" />
+                        </CommandItem>
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
+</template>
diff --git a/app/components/CurrencyQuotes/Tab.vue b/app/components/CurrencyQuotes/Tab.vue
new file mode 100644
index 0000000..e0482ba
--- /dev/null
+++ b/app/components/CurrencyQuotes/Tab.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import Select from '@/components/CurrencyQuotes/Select.vue'
+import { Button } from '@/components/ui/button'
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { ChevronDownIcon, ChevronUpIcon, DoubleArrowDownIcon } from '@radix-icons/vue'
+import { ref } from 'vue'
+import { t } from 'i18next'
+import { useCurrencyQuotesStore } from '@/stores/useCurrencyQuotesStore'
+
+const { invertCurrencies } = useCurrencyQuotesStore()
+
+const isOpen = ref(false)
+</script>
+
+<template>
+    <Collapsible v-model:open="isOpen"
+        class="fixed z-50 right-10 bottom-0 space-y-2 bg-material rounded-t-2xl shadow-2xl shadow-accent py-2 px-4 translate-ignore">
+        <div class="flex items-center justify-between space-x-4">
+            <h4 class="font-semibold pr-20">
+                {{ t("Conversor de moedas") }}
+            </h4>
+            <CollapsibleTrigger as-child>
+                <Button variant="ghost" size="sm" class="w-9 p-0 rounded-full">
+                    <ChevronDownIcon class="w-6 h-6" v-if=isOpen />
+                    <ChevronUpIcon class="w-6 h-6" v-if=!isOpen />
+                    <span class="sr-only">{{ isOpen ? 'Fechar' : 'Abrir' }}</span>
+                </Button>
+            </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent class="space-y-2 flex flex-col">
+            <Select direction="left" />
+            <Button variant="default" class="w-9 p-0 rounded-full">
+                <DoubleArrowDownIcon @click="invertCurrencies">
+                    revert
+                </DoubleArrowDownIcon>
+            </Button>
+            <Select direction="right" />
+        </CollapsibleContent>
+    </Collapsible>
+</template>
diff --git a/app/components/Dto/CurrencyQuotes.ts b/app/components/Dto/CurrencyQuotes.ts
deleted file mode 100644
index 6f83059..0000000
--- a/app/components/Dto/CurrencyQuotes.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-export const CurrencyQuotes = {
-	AED: "Dirham dos Emirados Árabes Unidos (AED)",
-	AFN: "Afegane Afegão (AFN)",
-	ALL: "Lek Albanês (ALL)",
-	AMD: "Dram Armênio (AMD)",
-	ANG: "Florim das Antilhas Holandesas (ANG)",
-	AOA: "Kwanza Angolano (AOA)",
-	ARS: "Peso Argentino (ARS)",
-	AUD: "Dólar Australiano (AUD)",
-	AWG: "Florim Arubano (AWG)",
-	AZN: "Manat Azeri (AZN)",
-	BAM: "Marco Conversível da Bósnia-Herzegovina (BAM)",
-	BBD: "Dólar de Barbados (BBD)",
-	BDT: "Taka de Bangladesh (BDT)",
-	BGN: "Lev Búlgaro (BGN)",
-	BHD: "Dinar do Bahrein (BHD)",
-	BIF: "Franco Burundiano (BIF)",
-	BMD: "Dólar das Bermudas (BMD)",
-	BND: "Dólar de Brunei (BND)",
-	BOB: "Boliviano Boliviano (BOB)",
-	BRL: "Real Brasileiro (BRL)",
-	BSD: "Dólar das Bahamas (BSD)",
-	BTC: "Bitcoin (BTC)",
-	BTN: "Ngultrum do Butão (BTN)",
-	BTS: "BitShares (BTS)",
-	BWP: "Pula de Botswana (BWP)",
-	BYN: "Rublo Bielorrusso (BYN)",
-	BZD: "Dólar de Belize (BZD)",
-	CAD: "Dólar Canadense (CAD)",
-	CDF: "Franco Congolês (CDF)",
-	CHF: "Franco Suíço (CHF)",
-	CLF: "Unidade de Conta Chilena (UF) (CLF)",
-	CLP: "Peso Chileno (CLP)",
-	CNH: "Yuan Chinês (Offshore) (CNH)",
-	CNY: "Yuan Chinês (CNY)",
-	COP: "Peso Colombiano (COP)",
-	CRC: "Colón Costarriquenho (CRC)",
-	CUC: "Peso Cubano Conversível (CUC)",
-	CUP: "Peso Cubano (CUP)",
-	CVE: "Escudo Cabo-Verdiano (CVE)",
-	CZK: "Coroa Checa (CZK)",
-	DASH: "Dash (DASH)",
-	DJF: "Franco Djiboutiano (DJF)",
-	DKK: "Coroa Dinamarquesa (DKK)",
-	DOGE: "Dogecoin (DOGE)",
-	DOP: "Peso Dominicano (DOP)",
-	DZD: "Dinar Argelino (DZD)",
-	EGP: "Libra Egípcia (EGP)",
-	ERN: "Nakfa da Eritreia (ERN)",
-	ETB: "Birr Etíope (ETB)",
-	ETH: "Ethereum (ETH)",
-	EUR: "Euro (EUR)",
-	FJD: "Dólar Fijiano (FJD)",
-	FKP: "Libra das Ilhas Falkland (FKP)",
-	GBP: "Libra Esterlina (GBP)",
-	GEL: "Lari Georgiano (GEL)",
-	GGP: "Libra de Guernsey (GGP)",
-	GHS: "Cedi Ganês (GHS)",
-	GIP: "Libra de Gibraltar (GIP)",
-	GMD: "Dalasi da Gâmbia (GMD)",
-	GNF: "Franco Guineano (GNF)",
-	GTQ: "Quetzal Guatemalteco (GTQ)",
-	GYD: "Dólar da Guiana (GYD)",
-	HKD: "Dólar de Hong Kong (HKD)",
-	HNL: "Lempira Hondurenha (HNL)",
-	HRK: "Kuna Croata (HRK)",
-	HTG: "Gourde Haitiano (HTG)",
-	HUF: "Florim Húngaro (HUF)",
-	IDR: "Rupia Indonésia (IDR)",
-	ILS: "Novo Shekel Israelense (ILS)",
-	IMP: "Libra da Ilha de Man (IMP)",
-	INR: "Rupia Indiana (INR)",
-	IQD: "Dinar Iraquiano (IQD)",
-	IRR: "Rial Iraniano (IRR)",
-	ISK: "Coroa Islandesa (ISK)",
-	JEP: "Libra de Jersey (JEP)",
-	JMD: "Dólar Jamaicano (JMD)",
-	JOD: "Dinar Jordaniano (JOD)",
-	JPY: "Iene Japonês (JPY)",
-	KES: "Xelim Queniano (KES)",
-	KGS: "Som Quirguiz (KGS)",
-	KHR: "Riel Cambojano (KHR)",
-	KMF: "Franco Comorense (KMF)",
-	KPW: "Won Norte-Coreano (KPW)",
-	KRW: "Won Sul-Coreano (KRW)",
-	KWD: "Dinar Kuwaitiano (KWD)",
-	KYD: "Dólar das Ilhas Cayman (KYD)",
-	KZT: "Tenge Cazaque (KZT)",
-	LAK: "Kip Laosiano (LAK)",
-	LBP: "Libra Libanesa (LBP)",
-	LD: "Dólar Linden (LD)",
-	LKR: "Rupia do Sri Lanka (LKR)",
-	LRD: "Dólar Liberiano (LRD)",
-	LSL: "Loti do Lesoto (LSL)",
-	LTC: "Litecoin (LTC)",
-	LYD: "Dinar Líbio (LYD)",
-	MAD: "Dirham Marroquino (MAD)",
-	MDL: "Leu Moldavo (MDL)",
-	MGA: "Ariary Malgaxe (MGA)",
-	MKD: "Dinar Macedônio (MKD)",
-	MMK: "Kyat de Mianmar (MMK)",
-	MNT: "Tugrik Mongol (MNT)",
-	MOP: "Pataca de Macau (MOP)",
-	MRO: "Ouguiya Mauritana (MRO)",
-	MRU: "Ouguiya Mauritana (MRU)",
-	MUR: "Rupia Mauriciana (MUR)",
-	MVR: "Rufiyaa Maldiva (MVR)",
-	MWK: "Kwacha Malauiana (MWK)",
-	MXN: "Peso Mexicano (MXN)",
-	MYR: "Ringgit Malaio (MYR)",
-	MZN: "Metical Moçambicano (MZN)",
-	NAD: "Dólar Namibiano (NAD)",
-	NGN: "Naira Nigeriana (NGN)",
-	NIO: "Córdoba Nicaraguense (NIO)",
-	NOK: "Coroa Norueguesa (NOK)",
-	NPR: "Rupia Nepalesa (NPR)",
-	NXT: "Nxt (NXT)",
-	NZD: "Dólar Neozelandês (NZD)",
-	OMR: "Rial Omanense (OMR)",
-	PAB: "Balboa Panamenho (PAB)",
-	PEN: "Novo Sol Peruano (PEN)",
-	PGK: "Kina Papua-Nova Guiné (PGK)",
-	PHP: "Peso Filipino (PHP)",
-	PKR: "Rupia Paquistanesa (PKR)",
-	PLN: "Zloty Polonês (PLN)",
-	PYG: "Guarani Paraguaio (PYG)",
-	QAR: "Rial Catarense (QAR)",
-	RON: "Leu Romeno (RON)",
-	RSD: "Dinar Sérvio (RSD)",
-	RUB: "Rublo Russo (RUB)",
-	RWF: "Franco Ruandês (RWF)",
-	SAR: "Riyal Saudita (SAR)",
-	SBD: "Dólar das Ilhas Salomão (SBD)",
-	SCR: "Rupia de Seicheles (SCR)",
-	SDG: "Libra Sudanesa (SDG)",
-	SEK: "Coroa Sueca (SEK)",
-	SGD: "Dólar de Singapura (SGD)",
-	SHP: "Libra de Santa Helena (SHP)",
-	SLL: "Leone de Serra Leoa (SLL)",
-	SOS: "Xelim Somali (SOS)",
-	SRD: "Dólar do Suriname (SRD)",
-	SSP: "Libra do Sudão do Sul (SSP)",
-	STD: "Dobra de São Tomé e Príncipe (STD)",
-	STN: "Dobra de São Tomé e Príncipe (STN)",
-	STR: "Stellar (STR)",
-	SVC: "Colón Salvadorenho (SVC)",
-	SYP: "Libra Síria (SYP)",
-	SZL: "Lilangeni Suazi (SZL)",
-	THB: "Baht Tailandês (THB)",
-	TJS: "Somoni do Tajiquistão (TJS)",
-	TMT: "Manat Turcomeno (TMT)",
-	TND: "Dinar Tunisiano (TND)",
-	TOP: "Paʻanga de Tonga (TOP)",
-	TRY: "Lira Turca (TRY)",
-	TTD: "Dólar de Trinidad e Tobago (TTD)",
-	TWD: "Novo Dólar Taiwanês (TWD)",
-	TZS: "Xelim Tanzaniano (TZS)",
-	UAH: "Hryvnia Ucraniana (UAH)",
-	UGX: "Xelim Ugandense (UGX)",
-	USD: "Dólar dos Estados Unidos (USD)",
-	UYU: "Peso Uruguaio (UYU)",
-	UZS: "Som Uzbeque (UZS)",
-	VEF_BLKMKT: "Bolívar Venezuelano (Mercado Negro) (VEF_BLKMKT)",
-	VEF_DICOM: "Bolívar Venezuelano (DICOM) (VEF_DICOM)",
-	VEF_DIPRO: "Bolívar Venezuelano (DIPRO) (VEF_DIPRO)",
-	VES: "Bolívar Venezuelano Soberano (VES)",
-	VND: "Dong Vietnamita (VND)",
-	VUV: "Vatu de Vanuatu (VUV)",
-	WST: "Tala Samoano (WST)",
-	XAF: "Franco CFA BEAC (XAF)",
-	XAG: "Onça de Prata (XAG)",
-	XAU: "Onça de Ouro (XAU)",
-	XCD: "Dólar do Caribe Oriental (XCD)",
-	XDR: "Direitos Especiais de Saque (XDR)",
-	XMR: "Monero (XMR)",
-	XOF: "Franco CFA BCEAO (XOF)",
-	XPD: "Onça de Paládio (XPD)",
-	XPF: "Franco CFP (XPF)",
-	XPT: "Onça de Platina (XPT)",
-	XRP: "XRP (XRP)",
-	YER: "Rial Iemenita (YER)",
-	ZAR: "Rand Sul-Africano (ZAR)",
-	ZMW: "Kwacha Zambiano (ZMW)",
-	ZWL: "Dólar Zimbabuano (ZWL)",
-	NMC: "Namecoin (NMC)",
-	PPC: "Peercoin (PPC)",
-	NVC: "Novacoin (NVC)",
-	XPM: "Primecoin (XPM)",
-	EAC: "EarthCoin (EAC)",
-	VTC: "Vertcoin (VTC)",
-	EMC: "Emercoin (EMC)",
-	FCT: "Factom (FCT)",
-};
diff --git a/app/components/Dto/CurrencyQuotesDto.ts b/app/components/Dto/CurrencyQuotesDto.ts
new file mode 100644
index 0000000..1884500
--- /dev/null
+++ b/app/components/Dto/CurrencyQuotesDto.ts
@@ -0,0 +1,190 @@
+export const CurrencyQuotesDto = {
+    AED: "Dirham dos Emirados Árabes Unidos (AED)",
+    AFN: "Afegane Afegão (AFN)",
+    ALL: "Lek Albanês (ALL)",
+    AMD: "Dram Armênio (AMD)",
+    ANG: "Florim das Antilhas Holandesas (ANG)",
+    AOA: "Kwanza Angolano (AOA)",
+    ARS: "Peso Argentino (ARS)",
+    AUD: "Dólar Australiano (AUD)",
+    AWG: "Florim Arubano (AWG)",
+    AZN: "Manat Azeri (AZN)",
+    BAM: "Marco Conversível da Bósnia-Herzegovina (BAM)",
+    BBD: "Dólar de Barbados (BBD)",
+    BDT: "Taka de Bangladesh (BDT)",
+    BGN: "Lev Búlgaro (BGN)",
+    BHD: "Dinar do Bahrein (BHD)",
+    BIF: "Franco Burundiano (BIF)",
+    BMD: "Dólar das Bermudas (BMD)",
+    BND: "Dólar de Brunei (BND)",
+    BOB: "Boliviano da Bolívia (BOB)",
+    BRL: "Real Brasileiro (BRL)",
+    BSD: "Dólar das Bahamas (BSD)",
+    BTC: "Bitcoin (BTC)",
+    BTN: "Ngultrum do Butão (BTN)",
+    BTS: "BitShares (BTS)",
+    BWP: "Pula de Botswana (BWP)",
+    BYN: "Rublo Bielorrusso (BYN)",
+    BZD: "Dólar de Belize (BZD)",
+    CAD: "Dólar Canadense (CAD)",
+    CDF: "Franco Congolês (CDF)",
+    CHF: "Franco Suíço (CHF)",
+    CLF: "Unidade de Conta Chilena (UF) (CLF)",
+    CLP: "Peso Chileno (CLP)",
+    CNH: "Yuan Chinês (Offshore) (CNH)",
+    CNY: "Yuan Chinês (CNY)",
+    COP: "Peso Colombiano (COP)",
+    CRC: "Colón Costarriquenho (CRC)",
+    CUC: "Peso Cubano Conversível (CUC)",
+    CUP: "Peso Cubano (CUP)",
+    CVE: "Escudo Cabo-Verdiano (CVE)",
+    CZK: "Coroa Checa (CZK)",
+    DASH: "Dash (DASH)",
+    DJF: "Franco Djiboutiano (DJF)",
+    DKK: "Coroa Dinamarquesa (DKK)",
+    DOGE: "Dogecoin (DOGE)",
+    DOP: "Peso Dominicano (DOP)",
+    DZD: "Dinar Argelino (DZD)",
+    EGP: "Libra Egípcia (EGP)",
+    ERN: "Nakfa da Eritreia (ERN)",
+    ETB: "Birr Etíope (ETB)",
+    ETH: "Ethereum (ETH)",
+    EUR: "Euro (EUR)",
+    FJD: "Dólar Fijiano (FJD)",
+    FKP: "Libra das Ilhas Falkland (FKP)",
+    GBP: "Libra Esterlina (GBP)",
+    GEL: "Lari Georgiano (GEL)",
+    GGP: "Libra de Guernsey (GGP)",
+    GHS: "Cedi Ganês (GHS)",
+    GIP: "Libra de Gibraltar (GIP)",
+    GMD: "Dalasi da Gâmbia (GMD)",
+    GNF: "Franco Guineano (GNF)",
+    GTQ: "Quetzal Guatemalteco (GTQ)",
+    GYD: "Dólar da Guiana (GYD)",
+    HKD: "Dólar de Hong Kong (HKD)",
+    HNL: "Lempira Hondurenha (HNL)",
+    HRK: "Kuna Croata (HRK)",
+    HTG: "Gourde Haitiano (HTG)",
+    HUF: "Florim Húngaro (HUF)",
+    IDR: "Rupia Indonésia (IDR)",
+    ILS: "Novo Shekel Israelense (ILS)",
+    IMP: "Libra da Ilha de Man (IMP)",
+    INR: "Rupia Indiana (INR)",
+    IQD: "Dinar Iraquiano (IQD)",
+    IRR: "Rial Iraniano (IRR)",
+    ISK: "Coroa Islandesa (ISK)",
+    JEP: "Libra de Jersey (JEP)",
+    JMD: "Dólar Jamaicano (JMD)",
+    JOD: "Dinar Jordaniano (JOD)",
+    JPY: "Iene Japonês (JPY)",
+    KES: "Xelim Queniano (KES)",
+    KGS: "Som Quirguiz (KGS)",
+    KHR: "Riel Cambojano (KHR)",
+    KMF: "Franco Comorense (KMF)",
+    KPW: "Won Norte-Coreano (KPW)",
+    KRW: "Won Sul-Coreano (KRW)",
+    KWD: "Dinar Kuwaitiano (KWD)",
+    KYD: "Dólar das Ilhas Cayman (KYD)",
+    KZT: "Tenge Cazaque (KZT)",
+    LAK: "Kip Laosiano (LAK)",
+    LBP: "Libra Libanesa (LBP)",
+    LD: "Dólar Linden (LD)",
+    LKR: "Rupia do Sri Lanka (LKR)",
+    LRD: "Dólar Liberiano (LRD)",
+    LSL: "Loti do Lesoto (LSL)",
+    LTC: "Litecoin (LTC)",
+    LYD: "Dinar Líbio (LYD)",
+    MAD: "Dirham Marroquino (MAD)",
+    MDL: "Leu Moldavo (MDL)",
+    MGA: "Ariary Malgaxe (MGA)",
+    MKD: "Dinar Macedônio (MKD)",
+    MMK: "Kyat de Mianmar (MMK)",
+    MNT: "Tugrik Mongol (MNT)",
+    MOP: "Pataca de Macau (MOP)",
+    MRO: "Ouguiya Mauritana (MRO)",
+    MRU: "Ouguiya Mauritana (MRU)",
+    MUR: "Rupia Mauriciana (MUR)",
+    MVR: "Rufiyaa Maldiva (MVR)",
+    MWK: "Kwacha Malauiana (MWK)",
+    MXN: "Peso Mexicano (MXN)",
+    MYR: "Ringgit Malaio (MYR)",
+    MZN: "Metical Moçambicano (MZN)",
+    NAD: "Dólar Namibiano (NAD)",
+    NGN: "Naira Nigeriana (NGN)",
+    NIO: "Córdoba Nicaraguense (NIO)",
+    NOK: "Coroa Norueguesa (NOK)",
+    NPR: "Rupia Nepalesa (NPR)",
+    NXT: "Nxt (NXT)",
+    NZD: "Dólar Neozelandês (NZD)",
+    OMR: "Rial Omanense (OMR)",
+    PAB: "Balboa Panamenho (PAB)",
+    PEN: "Novo Sol Peruano (PEN)",
+    PGK: "Kina Papua-Nova Guiné (PGK)",
+    PHP: "Peso Filipino (PHP)",
+    PKR: "Rupia Paquistanesa (PKR)",
+    PLN: "Zloty Polonês (PLN)",
+    PYG: "Guarani Paraguaio (PYG)",
+    QAR: "Rial Catarense (QAR)",
+    RON: "Leu Romeno (RON)",
+    RSD: "Dinar Sérvio (RSD)",
+    RUB: "Rublo Russo (RUB)",
+    RWF: "Franco Ruandês (RWF)",
+    SAR: "Riyal Saudita (SAR)",
+    SBD: "Dólar das Ilhas Salomão (SBD)",
+    SCR: "Rupia de Seicheles (SCR)",
+    SDG: "Libra Sudanesa (SDG)",
+    SEK: "Coroa Sueca (SEK)",
+    SGD: "Dólar de Singapura (SGD)",
+    SHP: "Libra de Santa Helena (SHP)",
+    SLL: "Leone de Serra Leoa (SLL)",
+    SOS: "Xelim Somali (SOS)",
+    SRD: "Dólar do Suriname (SRD)",
+    SSP: "Libra do Sudão do Sul (SSP)",
+    STD: "Dobra de São Tomé e Príncipe (STD)",
+    STN: "Dobra de São Tomé e Príncipe (STN)",
+    STR: "Stellar (STR)",
+    SVC: "Colón Salvadorenho (SVC)",
+    SYP: "Libra Síria (SYP)",
+    SZL: "Lilangeni Suazi (SZL)",
+    THB: "Baht Tailandês (THB)",
+    TJS: "Somoni do Tajiquistão (TJS)",
+    TMT: "Manat Turcomeno (TMT)",
+    TND: "Dinar Tunisiano (TND)",
+    TOP: "Paʻanga de Tonga (TOP)",
+    TRY: "Lira Turca (TRY)",
+    TTD: "Dólar de Trinidad e Tobago (TTD)",
+    TWD: "Novo Dólar Taiwanês (TWD)",
+    TZS: "Xelim Tanzaniano (TZS)",
+    UAH: "Hryvnia Ucraniana (UAH)",
+    UGX: "Xelim Ugandense (UGX)",
+    USD: "Dólar dos Estados Unidos (USD)",
+    UYU: "Peso Uruguaio (UYU)",
+    UZS: "Som Uzbeque (UZS)",
+    VES: "Bolívar Venezuelano Soberano (VES)",
+    VND: "Dong Vietnamita (VND)",
+    VUV: "Vatu de Vanuatu (VUV)",
+    WST: "Tala Samoano (WST)",
+    XAF: "Franco CFA BEAC (XAF)",
+    XAG: "Onça de Prata (XAG)",
+    XAU: "Onça de Ouro (XAU)",
+    XCD: "Dólar do Caribe Oriental (XCD)",
+    XDR: "Direitos Especiais de Saque (XDR)",
+    XMR: "Monero (XMR)",
+    XOF: "Franco CFA BCEAO (XOF)",
+    XPD: "Onça de Paládio (XPD)",
+    XPF: "Franco CFP (XPF)",
+    XPT: "Onça de Platina (XPT)",
+    XRP: "XRP (XRP)",
+    YER: "Rial Iemenita (YER)",
+    ZAR: "Rand Sul-Africano (ZAR)",
+    ZMW: "Kwacha Zambiano (ZMW)",
+    ZWL: "Dólar Zimbabuano (ZWL)",
+    NMC: "Namecoin (NMC)",
+    PPC: "Peercoin (PPC)",
+    NVC: "Novacoin (NVC)",
+    XPM: "Primecoin (XPM)",
+    EAC: "EarthCoin (EAC)",
+    VTC: "Vertcoin (VTC)",
+    EMC: "Emercoin (EMC)",
+    FCT: "Factom (FCT)",
+};
diff --git a/app/components/Dto/CurrencyQuotesDtoValues.ts b/app/components/Dto/CurrencyQuotesDtoValues.ts
new file mode 100644
index 0000000..d8c47c8
--- /dev/null
+++ b/app/components/Dto/CurrencyQuotesDtoValues.ts
@@ -0,0 +1,193 @@
+export const CurrencyQuotesDtoValues = {
+    AED: 3.673,
+    AFN: 66.838212,
+    ALL: 90.364381,
+    AMD: 386.527719,
+    ANG: 1.800028,
+    AOA: 911.5,
+    ARS: 988.976931,
+    AUD: 1.514177,
+    AWG: 1.8025,
+    AZN: 1.7,
+    BAM: 1.797363,
+    BBD: 2,
+    BDT: 119.349343,
+    BGN: 1.797363,
+    BHD: 0.376602,
+    BIF: 2901.894591,
+    BMD: 1,
+    BND: 1.322336,
+    BOB: 6.926435,
+    BRL: 5.700501,
+    BSD: 1,
+    BTC: 0.000014566863,
+    BTN: 84.001285,
+    BTS: 132.38018913,
+    BWP: 13.35202,
+    BYN: 3.268575,
+    BZD: 2.013234,
+    CAD: 1.39335,
+    CDF: 2843.194394,
+    CHF: 0.86707,
+    CLF: 0.034802,
+    CLP: 960.28121,
+    CNH: 7.112585,
+    CNY: 7.1226,
+    COP: 4418.803604,
+    CRC: 512.153911,
+    CUC: 1,
+    CUP: 25.75,
+    CVE: 101.33253,
+    CZK: 23.2997,
+    DASH: 0.0462214,
+    DJF: 177.852384,
+    DKK: 6.853519,
+    DOGE: 6.72020429,
+    DOP: 60.102007,
+    DZD: 132.77734,
+    EGP: 48.723016,
+    ERN: 15,
+    ETB: 119.948649,
+    ETH: 0.0004079327,
+    EUR: 0.918864,
+    FJD: 2.2508,
+    FKP: 0.771025,
+    GBP: 0.771025,
+    GEL: 2.735,
+    GGP: 0.771025,
+    GHS: 16.279925,
+    GIP: 0.771025,
+    GMD: 71.5,
+    GNF: 8613.695024,
+    GTQ: 7.716767,
+    GYD: 208.859064,
+    HKD: 7.777285,
+    HNL: 25.176677,
+    HRK: 6.95475,
+    HTG: 131.434072,
+    HUF: 374.961,
+    IDR: 15849.05945,
+    ILS: 3.752505,
+    IMP: 0.771025,
+    INR: 84.133841,
+    IQD: 1308.368023,
+    IRR: 42092.5,
+    ISK: 137.021557,
+    JEP: 0.771025,
+    JMD: 158.314603,
+    JOD: 0.7091,
+    JPY: 152.95501587,
+    KES: 128.842538,
+    KGS: 85.8,
+    KHR: 4059.193853,
+    KMF: 453.849673,
+    KPW: 900,
+    KRW: 1380.34,
+    KWD: 0.3063,
+    KYD: 0.83233,
+    KZT: 488.443585,
+    LAK: 21920.437553,
+    LBP: 89422.167799,
+    LD: 320,
+    LKR: 292.588308,
+    LRD: 191.765845,
+    LSL: 17.578551,
+    LTC: 0.0150127608,
+    LYD: 4.812755,
+    MAD: 9.815558,
+    MDL: 17.811113,
+    MGA: 4604.115893,
+    MKD: 56.619032,
+    MMK: 2098,
+    MNT: 3398,
+    MOP: 8.000643,
+    MRO: 356.999828,
+    MRU: 39.652621,
+    MUR: 45.859996,
+    MVR: 15.41,
+    MWK: 1731.836444,
+    MXN: 20.151592,
+    MYR: 4.3785,
+    MZN: 63.909994,
+    NAD: 17.578551,
+    NGN: 1641.221193,
+    NIO: 36.750446,
+    NOK: 10.986075,
+    NPR: 134.402402,
+    NXT: 369.059921212,
+    NZD: 1.667695,
+    OMR: 0.384174,
+    PAB: 1,
+    PEN: 3.769793,
+    PGK: 4.003125,
+    PHP: 58.365004,
+    PKR: 277.355407,
+    PLN: 4.00671,
+    PYG: 7890.434888,
+    QAR: 3.64095,
+    RON: 4.58494,
+    RSD: 107.567901,
+    RUB: 97.859048,
+    RWF: 1365.622792,
+    SAR: 3.747437,
+    SBD: 8.319934,
+    SCR: 13.60318,
+    SDG: 601.5,
+    SEK: 10.678815,
+    SGD: 1.32256,
+    SHP: 0.771025,
+    SLL: 20969.5,
+    SOS: 570.785119,
+    SRD: 34.5425,
+    SSP: 130.26,
+    STD: 22281.8,
+    STN: 22.515278,
+    STR: 11.034605,
+    SVC: 8.738685,
+    SYP: 2512.53,
+    SZL: 17.573864,
+    THB: 33.865662,
+    TJS: 10.616827,
+    TMT: 3.5,
+    TND: 3.09268,
+    TOP: 2.38378,
+    TRY: 34.344999,
+    TTD: 6.770206,
+    TWD: 31.9378,
+    TZS: 2696.698183,
+    UAH: 41.27905,
+    UGX: 3656.652582,
+    USD: 1,
+    UYU: 41.663861,
+    UZS: 12779.56215,
+    VEF_BLKMKT: 10.4,
+    VEF_DICOM: 8.82,
+    VEF_DIPRO: 529.62,
+    VES: 42.803206,
+    VND: 25300,
+    VUV: 118.722,
+    WST: 2.8,
+    XAF: 602.735468,
+    XAG: 0.03081332,
+    XAU: 0.00036388,
+    XCD: 2.70255,
+    XDR: 0.750724,
+    XMR: 0.0080009049,
+    XOF: 602.735468,
+    XPD: 0.00090851,
+    XPF: 109.649677,
+    XPT: 0.00100825,
+    XRP: 1.99820162,
+    YER: 250.350066,
+    ZAR: 17.644816,
+    ZMW: 26.810451,
+    ZWL: 322,
+    NMC: 0.6583052534,
+    PPC: 1.2681920972,
+    NVC: 4.1334737071,
+    XPM: 4.8789734625,
+    EAC: 1463.0791964769,
+    VTC: 2.1090018835,
+    EMC: 15.3254221404,
+    FCT: 0.741747612
+}
diff --git a/app/components/ui/button/index.ts b/app/components/ui/button/index.ts
index 7321356..d044be8 100644
--- a/app/components/ui/button/index.ts
+++ b/app/components/ui/button/index.ts
@@ -1,35 +1,35 @@
-import {type VariantProps, cva} from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 
-export {default as Button} from "./Button.vue";
+export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
-	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground shadow hover:bg-accent duration-300",
-				destructive:
-					"bg-destructive text-destructive-foreground shadow-sm hover:bg-accent duration-300",
-				outline:
-					"border bg-background shadow-sm hover:bg-accent hover:text-textForeground duration-300",
-				secondary:
-					"bg-secondary text-secondary-foreground shadow-sm hover:bg-accent duration-300",
-				ghost: "hover:bg-accent hover:text-textForeground duration-300",
-				link: "text-primary underline-offset-4 hover:underline duration-300",
-			},
-			size: {
-				default: "h-9 px-4 py-2",
-				xs: "h-7 rounded px-2",
-				sm: "h-8 rounded-md px-3 text-xs",
-				lg: "h-10 rounded-md px-8",
-				icon: "h-9 w-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default: "bg-primary text-primary-foreground shadow hover:bg-buttonBg duration-300",
+                destructive:
+                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-buttonBg duration-300",
+                outline:
+                    "border bg-background shadow-sm hover:bg-buttonBg hover:text-textForeground duration-300",
+                secondary:
+                    "bg-secondary text-secondary-foreground shadow-sm hover:bg-buttonBg duration-300",
+                ghost: "hover:bg-buttonBg hover:text-textForeground duration-300",
+                link: "text-primary underline-offset-4 hover:underline duration-300",
+            },
+            size: {
+                default: "h-9 px-4 py-2",
+                xs: "h-7 rounded px-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
 );
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
diff --git a/app/components/ui/collapsible/Collapsible.vue b/app/components/ui/collapsible/Collapsible.vue
new file mode 100644
index 0000000..628f834
--- /dev/null
+++ b/app/components/ui/collapsible/Collapsible.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type {CollapsibleRootEmits, CollapsibleRootProps} from "radix-vue";
+import {CollapsibleRoot, useForwardPropsEmits} from "radix-vue";
+
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
diff --git a/app/components/ui/collapsible/CollapsibleContent.vue b/app/components/ui/collapsible/CollapsibleContent.vue
new file mode 100644
index 0000000..1c163d0
--- /dev/null
+++ b/app/components/ui/collapsible/CollapsibleContent.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import {CollapsibleContent, type CollapsibleContentProps} from "radix-vue";
+
+const props = defineProps<CollapsibleContentProps>();
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/app/components/ui/collapsible/CollapsibleTrigger.vue b/app/components/ui/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 0000000..8636102
--- /dev/null
+++ b/app/components/ui/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import {CollapsibleTrigger, type CollapsibleTriggerProps} from "radix-vue";
+
+const props = defineProps<CollapsibleTriggerProps>();
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/app/components/ui/collapsible/index.ts b/app/components/ui/collapsible/index.ts
new file mode 100644
index 0000000..e597297
--- /dev/null
+++ b/app/components/ui/collapsible/index.ts
@@ -0,0 +1,3 @@
+export {default as Collapsible} from "./Collapsible.vue";
+export {default as CollapsibleContent} from "./CollapsibleContent.vue";
+export {default as CollapsibleTrigger} from "./CollapsibleTrigger.vue";
diff --git a/app/components/ui/command/CommandItem.vue b/app/components/ui/command/CommandItem.vue
index 68a47e5..ee82777 100644
--- a/app/components/ui/command/CommandItem.vue
+++ b/app/components/ui/command/CommandItem.vue
@@ -17,10 +17,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <ComboboxItem
-    v-bind="forwarded"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
-  >
-    <slot />
-  </ComboboxItem>
+    <ComboboxItem v-bind="forwarded"
+        :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)">
+        <slot />
+    </ComboboxItem>
 </template>
diff --git a/app/components/ui/drawer/Drawer.vue b/app/components/ui/drawer/Drawer.vue
new file mode 100644
index 0000000..6fe862e
--- /dev/null
+++ b/app/components/ui/drawer/Drawer.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type {DrawerRootEmits, DrawerRootProps} from "vaul-vue";
+import {useForwardPropsEmits} from "radix-vue";
+import {DrawerRoot} from "vaul-vue";
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+	shouldScaleBackground: true,
+});
+
+const emits = defineEmits<DrawerRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>
diff --git a/app/components/ui/drawer/DrawerContent.vue b/app/components/ui/drawer/DrawerContent.vue
new file mode 100644
index 0000000..59954c2
--- /dev/null
+++ b/app/components/ui/drawer/DrawerContent.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type {DialogContentEmits, DialogContentProps} from "radix-vue";
+import type {HtmlHTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
+import {useForwardPropsEmits} from "radix-vue";
+import {DrawerContent, DrawerPortal} from "vaul-vue";
+import DrawerOverlay from "./DrawerOverlay.vue";
+
+const props = defineProps<DialogContentProps & {class?: HtmlHTMLAttributes["class"]}>();
+const emits = defineEmits<DialogContentEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwarded" :class="cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        props.class,
+      )"
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/app/components/ui/drawer/DrawerDescription.vue b/app/components/ui/drawer/DrawerDescription.vue
new file mode 100644
index 0000000..d65fe5d
--- /dev/null
+++ b/app/components/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type {DrawerDescriptionProps} from "vaul-vue";
+import {cn} from "@/lib/utils";
+import {DrawerDescription} from "vaul-vue";
+import {computed, type HtmlHTMLAttributes} from "vue";
+
+const props = defineProps<DrawerDescriptionProps & {class?: HtmlHTMLAttributes["class"]}>();
+
+const delegatedProps = computed(() => {
+	const {class: _, ...delegated} = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+  <DrawerDescription v-bind="delegatedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/app/components/ui/drawer/DrawerFooter.vue b/app/components/ui/drawer/DrawerFooter.vue
new file mode 100644
index 0000000..0978ae4
--- /dev/null
+++ b/app/components/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type {HtmlHTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
+
+const props = defineProps<{
+	class?: HtmlHTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/ui/drawer/DrawerHeader.vue b/app/components/ui/drawer/DrawerHeader.vue
new file mode 100644
index 0000000..77599b0
--- /dev/null
+++ b/app/components/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type {HtmlHTMLAttributes} from "vue";
+import {cn} from "@/lib/utils";
+
+const props = defineProps<{
+	class?: HtmlHTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/ui/drawer/DrawerOverlay.vue b/app/components/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 0000000..d1067b9
--- /dev/null
+++ b/app/components/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type {DialogOverlayProps} from "radix-vue";
+import {cn} from "@/lib/utils";
+import {DrawerOverlay} from "vaul-vue";
+import {computed, type HtmlHTMLAttributes} from "vue";
+
+const props = defineProps<DialogOverlayProps & {class?: HtmlHTMLAttributes["class"]}>();
+
+const delegatedProps = computed(() => {
+	const {class: _, ...delegated} = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-50 bg-black/80', props.class)" />
+</template>
diff --git a/app/components/ui/drawer/DrawerTitle.vue b/app/components/ui/drawer/DrawerTitle.vue
new file mode 100644
index 0000000..75ec01a
--- /dev/null
+++ b/app/components/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type {DrawerTitleProps} from "vaul-vue";
+import {cn} from "@/lib/utils";
+import {DrawerTitle} from "vaul-vue";
+import {computed, type HtmlHTMLAttributes} from "vue";
+
+const props = defineProps<DrawerTitleProps & {class?: HtmlHTMLAttributes["class"]}>();
+
+const delegatedProps = computed(() => {
+	const {class: _, ...delegated} = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+  <DrawerTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/app/components/ui/drawer/index.ts b/app/components/ui/drawer/index.ts
new file mode 100644
index 0000000..36c5139
--- /dev/null
+++ b/app/components/ui/drawer/index.ts
@@ -0,0 +1,8 @@
+export {default as Drawer} from "./Drawer.vue";
+export {default as DrawerContent} from "./DrawerContent.vue";
+export {default as DrawerDescription} from "./DrawerDescription.vue";
+export {default as DrawerFooter} from "./DrawerFooter.vue";
+export {default as DrawerHeader} from "./DrawerHeader.vue";
+export {default as DrawerOverlay} from "./DrawerOverlay.vue";
+export {default as DrawerTitle} from "./DrawerTitle.vue";
+export {DrawerClose, DrawerPortal, DrawerTrigger} from "vaul-vue";
diff --git a/app/components/ui/popover/Popover.vue b/app/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..97341e6
--- /dev/null
+++ b/app/components/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type {PopoverRootEmits, PopoverRootProps} from "radix-vue";
+import {PopoverRoot, useForwardPropsEmits} from "radix-vue";
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/app/components/ui/popover/PopoverContent.vue b/app/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..8a225a7
--- /dev/null
+++ b/app/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import {cn} from "@/lib/utils";
+import {
+	PopoverContent,
+	type PopoverContentEmits,
+	type PopoverContentProps,
+	PopoverPortal,
+	useForwardPropsEmits,
+} from "radix-vue";
+import {computed, type HTMLAttributes} from "vue";
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<PopoverContentProps & {class?: HTMLAttributes["class"]}>(), {
+	align: "center",
+	sideOffset: 4,
+});
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = computed(() => {
+	const {class: _, ...delegated} = props;
+
+	return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/app/components/ui/popover/PopoverTrigger.vue b/app/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..7f62651
--- /dev/null
+++ b/app/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import {PopoverTrigger, type PopoverTriggerProps} from "radix-vue";
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/app/components/ui/popover/index.ts b/app/components/ui/popover/index.ts
new file mode 100644
index 0000000..47a533a
--- /dev/null
+++ b/app/components/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export {default as Popover} from "./Popover.vue";
+export {default as PopoverContent} from "./PopoverContent.vue";
+export {default as PopoverTrigger} from "./PopoverTrigger.vue";
+export {PopoverAnchor} from "radix-vue";
diff --git a/app/config/composable/translate.ts b/app/config/composable/translate.ts
index 550af35..f4c3aa0 100644
--- a/app/config/composable/translate.ts
+++ b/app/config/composable/translate.ts
@@ -1,27 +1,26 @@
-import {onMounted, onUpdated} from "vue";
+import { onMounted, onUpdated } from "vue";
 import vTranslate from "../directive/v-translate";
 
 export function useTranslation() {
-	const applyTranslation = () => {
-		const tagsToTranslate = ["span", "p", "h1", "h2", "h3", "h4", "strong", "button"];
+    const applyTranslation = () => {
+        const tagsToTranslate = [ "span", "p", "h1", "h2", "h3", "h4", "strong", "button" ];
 
-		for (const tag of tagsToTranslate) {
-			const elements = document.querySelectorAll(tag);
-			for (const el of elements) {
-				if (el.closest(".accordion")) {
-					continue;
-				}
-				vTranslate.mounted(el as HTMLElement, {
-					value: (el as HTMLElement).innerText,
-					instance: null,
-					oldValue: undefined,
-					modifiers: {},
-					dir: vTranslate,
-				});
-			}
-		}
-	};
+        for (const tag of tagsToTranslate) {
+            const elements = document.querySelectorAll(tag);
+            for (const el of elements) {
+                if (el.closest(".translate-ignore")) {
+                    continue;
+                }
+                vTranslate.mounted(el as HTMLElement, {
+                    value: (el as HTMLElement).innerText,
+                    instance: null,
+                    oldValue: undefined,
+                    modifiers: {},
+                    dir: vTranslate,
+                });
+            }
+        }
+    };
 
-	onMounted(applyTranslation);
-	onUpdated(applyTranslation);
+    onMounted(applyTranslation);
 }
diff --git a/app/locales/en/translate.json b/app/locales/en/translate.json
index 3df10dc..e14e813 100644
--- a/app/locales/en/translate.json
+++ b/app/locales/en/translate.json
@@ -201,7 +201,7 @@
 	"Franco Burundiano (BIF)": "Burundian Franc (BIF)",
 	"Dólar das Bermudas (BMD)": "Bermudian Dollar (BMD)",
 	"Dólar de Brunei (BND)": "Brunei Dollar (BND)",
-	"Boliviano Boliviano (BOB)": "Bolivian Boliviano (BOB)",
+	"Boliviano da Bolívia (BOB)": "Bolivian Boliviano (BOB)",
 	"Real Brasileiro (BRL)": "Brazilian Real (BRL)",
 	"Dólar das Bahamas (BSD)": "Bahamian Dollar (BSD)",
 	"Bitcoin (BTC)": "Bitcoin (BTC)",
@@ -373,5 +373,9 @@
 	"EarthCoin (EAC)": "EarthCoin (EAC)",
 	"Vertcoin (VTC)": "Vertcoin (VTC)",
 	"Emercoin (EMC)": "Emercoin (EMC)",
-	"Factom (FCT)": "Factom (FCT)"
+	"Factom (FCT)": "Factom (FCT)",
+	"Nenhuma moeda encontrada.": "No currency found.",
+	"Procurar moeda...": "Search currency...",
+	"Conversor de moedas": "Currency converter",
+	"Alternar": "Toggle"
 }
diff --git a/app/locales/es/translate.json b/app/locales/es/translate.json
index bf5bd8e..336678c 100644
--- a/app/locales/es/translate.json
+++ b/app/locales/es/translate.json
@@ -201,7 +201,7 @@
 	"Franco Burundiano (BIF)": "Franco burundés (BIF)",
 	"Dólar das Bermudas (BMD)": "Dólar bermudeño (BMD)",
 	"Dólar de Brunei (BND)": "Dólar de Brunéi (BND)",
-	"Boliviano Boliviano (BOB)": "Boliviano boliviano (BOB)",
+	"Boliviano da Bolívia (BOB)": "Boliviano de Bolivia (BOB)",
 	"Real Brasileiro (BRL)": "Real brasileño (BRL)",
 	"Dólar das Bahamas (BSD)": "Dólar bahameño (BSD)",
 	"Bitcoin (BTC)": "Bitcoin (BTC)",
@@ -373,5 +373,9 @@
 	"EarthCoin (EAC)": "EarthCoin (EAC)",
 	"Vertcoin (VTC)": "Vertcoin (VTC)",
 	"Emercoin (EMC)": "Emercoin (EMC)",
-	"Factom (FCT)": "Factom (FCT)"
+	"Factom (FCT)": "Factom (FCT)",
+	"Nenhuma moeda encontrada.": "Ninguna moneda encontrada.",
+	"Procurar moeda...": "Buscar moneda...",
+	"Conversor de moedas": "Conversor de monedas",
+	"Alternar": "Alternar"
 }
diff --git a/app/locales/pt/translate.json b/app/locales/pt/translate.json
index 87bdee4..f21c830 100644
--- a/app/locales/pt/translate.json
+++ b/app/locales/pt/translate.json
@@ -201,7 +201,7 @@
 	"Franco Burundiano (BIF)": "Franco Burundiano (BIF)",
 	"Dólar das Bermudas (BMD)": "Dólar das Bermudas (BMD)",
 	"Dólar de Brunei (BND)": "Dólar de Brunei (BND)",
-	"Boliviano Boliviano (BOB)": "Boliviano Boliviano (BOB)",
+	"Boliviano da Bolívia (BOB)": "Boliviano da Bolívia (BOB)",
 	"Real Brasileiro (BRL)": "Real Brasileiro (BRL)",
 	"Dólar das Bahamas (BSD)": "Dólar das Bahamas (BSD)",
 	"Bitcoin (BTC)": "Bitcoin (BTC)",
@@ -373,5 +373,9 @@
 	"EarthCoin (EAC)": "EarthCoin (EAC)",
 	"Vertcoin (VTC)": "Vertcoin (VTC)",
 	"Emercoin (EMC)": "Emercoin (EMC)",
-	"Factom (FCT)": "Factom (FCT)"
+	"Factom (FCT)": "Factom (FCT)",
+	"Nenhuma moeda encontrada.": "Nenhuma moeda encontrada.",
+	"Procurar moeda...": "Procurar moeda...",
+	"Conversor de moedas": "Conversor de moedas",
+	"Alternar": "Alternar"
 }
diff --git a/app/router/index.ts b/app/router/index.ts
index a0140c8..6e6a36c 100644
--- a/app/router/index.ts
+++ b/app/router/index.ts
@@ -1,4 +1,4 @@
-import {createRouter, createWebHistory} from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import Home from "@/views/Home.vue";
 import AboutUs from "@/views/AboutUs.vue";
 import NotFound from "@/views/Exceptions/NotFound.vue";
@@ -8,199 +8,183 @@ import Stocks from "@/views/BrapiDev/Stocks.vue";
 import StockDetail from "@/views/BrapiDev/StockDetail.vue";
 import CookiePolicy from "@/views/Policies/CookiePolicy.vue";
 import PrivacyPolicy from "@/views/Policies/PrivacyPolicy.vue";
-import CurrencyQuotes from "@/views/CurrencyQuotes.vue";
 
 const router = createRouter({
-	history: createWebHistory(import.meta.env.BASE_URL),
-	routes: [
-		{
-			path: "/",
-			name: "Home",
-			component: Home,
-			meta: {
-				title: "Home | NEI Market Analytics",
-				description:
-					"Welcome to NEI Market Analytics, your source for comprehensive market analysis.",
-				keywords: "market analysis, business insights, NEI Market Analytics",
-				robots: "index, follow",
-				ogTitle: "Home | NEI Market Analytics",
-				ogDescription:
-					"Welcome to NEI Market Analytics, your source for comprehensive market analysis.",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/",
-			},
-		},
-		{
-			path: "/about-us",
-			name: "About Us",
-			component: AboutUs,
-			meta: {
-				title: "About Us | NEI Market Analytics",
-				description: "Learn more about NEI Market Analytics and our mission.",
-				keywords: "about us, NEI Market Analytics, company information",
-				robots: "index, follow",
-				ogTitle: "About Us | NEI Market Analytics",
-				ogDescription: "Learn more about NEI Market Analytics and our mission.",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/about-u",
-			},
-		},
-		{
-			path: "/privacy-policy",
-			name: "PrivacyPolicy",
-			component: PrivacyPolicy,
-			meta: {
-				title: "Privacy Policy | NEI Market Analytics",
-				description: "Learn more about our privacy policy.",
-				keywords: "privacy policy, NEI Market Analytics",
-				robots: "index, follow",
-				ogTitle: "Privacy Policy | NEI Market Analytics",
-				ogDescription: "Learn more about our privacy policy.",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/privacy-policy",
-			},
-		},
-		{
-			path: "/cookie-policy",
-			name: "CookiePolicy",
-			component: CookiePolicy,
-			meta: {
-				title: "Cookie Policy | NEI Market Analytics",
-				description: "Learn more about our cookie policy.",
-				keywords: "cookie policy, NEI Market Analytics",
-				robots: "index, follow",
-				ogTitle: "Cookie Policy | NEI Market Analytics",
-				ogDescription: "Learn more about our cookie policy.",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/cookie-policy",
-			},
-		},
-		{
-			path: "/cryptos",
-			name: "Cryptos",
-			component: Cryptos,
-			meta: {
-				title: "Crypto | NEI Market Analytics",
-				description: "Explore our comprehensive list of crypto assets.",
-				keywords: "crypto, crypto assets, NEI Market Analytics",
-				robots: "index, follow",
-				ogTitle: "Crypto | NEI Market Analytics",
-				ogDescription: "Explore our comprehensive list of crypto assets.",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/cryptos",
-			},
-		},
-		{
-			path: "/stocks",
-			name: "Stocks",
-			component: Stocks,
-			meta: {
-				title: "Stocks | NEI Market Analytics",
-				description: "Explore our comprehensive list of stocks.",
-				keywords: "stocks, stock assets, NEI Market Analytics",
-				robots: "index, follow",
-				ogTitle: "Stocks | NEI Market Analytics",
-				ogDescription: "Explore our comprehensive list of stocks.",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/stocks",
-			},
-		},
-		{
-			path: "/cryptos/:crypto",
-			name: "CryptoDetail",
-			component: CryptoDetail,
-			meta: {
-				description: "Explore our comprehensive crypto.",
-				keywords: "crypto, crypto assets, NEI Market Analytics",
-				robots: "index, follow",
-				ogTitle: "Crypto | NEI Market Analytics",
-				ogDescription: "Explore our comprehensive crypto.",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/cryptos/:crypto",
-			},
-			props: (route) => ({key: route.params.crypto}),
-		},
-		{
-			path: "/stocks/:stock",
-			name: "StockDetail",
-			component: StockDetail,
-			meta: {
-				description: "Explore our comprehensive list of stocks.",
-				keywords: "stocks, stock assets, NEI Market Analytics",
-				robots: "index, follow",
-				ogTitle: "Stocks | NEI Market Analytics",
-				ogDescription: "Explore our comprehensive list of stocks.",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/stocks/:stock",
-			},
-			props: (route) => ({key: route.params.stock}),
-		},
-		{
-			path: "/currency-quotes",
-			name: "CurrencyQuotes",
-			component: CurrencyQuotes,
-			meta: {
-				title: "Currency Quotes | NEI Market Analytics",
-				description: "Currency Quotes",
-				keywords: "currency quotes, NEI Market Analytics",
-				robots: "index, follow",
-				ogTitle: "Currency Quotes | NEI Market Analytics",
-				ogDescription: "Currency Quotes",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/currency-quotes",
-			},
-		},
-		{
-			path: "/:pathMatch(.*)*",
-			name: "Not Found",
-			component: NotFound,
-			meta: {
-				title: "404 | NEI Market Analytics",
-				description: "Page not found",
-				keywords: "404, page not found, NEI Market Analytics",
-				robots: "noindex, nofollow",
-				ogTitle: "404 | NEI Market Analytics",
-				ogDescription: "Page not found",
-				ogImage: "/logo.svg",
-				ogUrl: "http://localhost:5173/",
-			},
-		},
-	],
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: "/",
+            name: "Home",
+            component: Home,
+            meta: {
+                title: "Home | NEI Market Analytics",
+                description:
+                    "Welcome to NEI Market Analytics, your source for comprehensive market analysis.",
+                keywords: "market analysis, business insights, NEI Market Analytics",
+                robots: "index, follow",
+                ogTitle: "Home | NEI Market Analytics",
+                ogDescription:
+                    "Welcome to NEI Market Analytics, your source for comprehensive market analysis.",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/",
+            },
+        },
+        {
+            path: "/about-us",
+            name: "About Us",
+            component: AboutUs,
+            meta: {
+                title: "About Us | NEI Market Analytics",
+                description: "Learn more about NEI Market Analytics and our mission.",
+                keywords: "about us, NEI Market Analytics, company information",
+                robots: "index, follow",
+                ogTitle: "About Us | NEI Market Analytics",
+                ogDescription: "Learn more about NEI Market Analytics and our mission.",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/about-u",
+            },
+        },
+        {
+            path: "/privacy-policy",
+            name: "PrivacyPolicy",
+            component: PrivacyPolicy,
+            meta: {
+                title: "Privacy Policy | NEI Market Analytics",
+                description: "Learn more about our privacy policy.",
+                keywords: "privacy policy, NEI Market Analytics",
+                robots: "index, follow",
+                ogTitle: "Privacy Policy | NEI Market Analytics",
+                ogDescription: "Learn more about our privacy policy.",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/privacy-policy",
+            },
+        },
+        {
+            path: "/cookie-policy",
+            name: "CookiePolicy",
+            component: CookiePolicy,
+            meta: {
+                title: "Cookie Policy | NEI Market Analytics",
+                description: "Learn more about our cookie policy.",
+                keywords: "cookie policy, NEI Market Analytics",
+                robots: "index, follow",
+                ogTitle: "Cookie Policy | NEI Market Analytics",
+                ogDescription: "Learn more about our cookie policy.",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/cookie-policy",
+            },
+        },
+        {
+            path: "/cryptos",
+            name: "Cryptos",
+            component: Cryptos,
+            meta: {
+                title: "Crypto | NEI Market Analytics",
+                description: "Explore our comprehensive list of crypto assets.",
+                keywords: "crypto, crypto assets, NEI Market Analytics",
+                robots: "index, follow",
+                ogTitle: "Crypto | NEI Market Analytics",
+                ogDescription: "Explore our comprehensive list of crypto assets.",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/cryptos",
+            },
+        },
+        {
+            path: "/stocks",
+            name: "Stocks",
+            component: Stocks,
+            meta: {
+                title: "Stocks | NEI Market Analytics",
+                description: "Explore our comprehensive list of stocks.",
+                keywords: "stocks, stock assets, NEI Market Analytics",
+                robots: "index, follow",
+                ogTitle: "Stocks | NEI Market Analytics",
+                ogDescription: "Explore our comprehensive list of stocks.",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/stocks",
+            },
+        },
+        {
+            path: "/cryptos/:crypto",
+            name: "CryptoDetail",
+            component: CryptoDetail,
+            meta: {
+                description: "Explore our comprehensive crypto.",
+                keywords: "crypto, crypto assets, NEI Market Analytics",
+                robots: "index, follow",
+                ogTitle: "Crypto | NEI Market Analytics",
+                ogDescription: "Explore our comprehensive crypto.",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/cryptos/:crypto",
+            },
+            props: (route) => ({ key: route.params.crypto }),
+        },
+        {
+            path: "/stocks/:stock",
+            name: "StockDetail",
+            component: StockDetail,
+            meta: {
+                description: "Explore our comprehensive list of stocks.",
+                keywords: "stocks, stock assets, NEI Market Analytics",
+                robots: "index, follow",
+                ogTitle: "Stocks | NEI Market Analytics",
+                ogDescription: "Explore our comprehensive list of stocks.",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/stocks/:stock",
+            },
+            props: (route) => ({ key: route.params.stock }),
+        },
+        {
+            path: "/:pathMatch(.*)*",
+            name: "Not Found",
+            component: NotFound,
+            meta: {
+                title: "404 | NEI Market Analytics",
+                description: "Page not found",
+                keywords: "404, page not found, NEI Market Analytics",
+                robots: "noindex, nofollow",
+                ogTitle: "404 | NEI Market Analytics",
+                ogDescription: "Page not found",
+                ogImage: "/logo.svg",
+                ogUrl: "http://localhost:5173/",
+            },
+        },
+    ],
 });
 
 router.beforeEach((to, _from, next) => {
-	document.title = (to.meta.title as string) || "NEI Market Analytics";
+    document.title = (to.meta.title as string) || "NEI Market Analytics";
 
-	const metaTags = [
-		{name: "description", content: to.meta.description as string},
-		{name: "keywords", content: to.meta.keywords as string},
-		{name: "robots", content: to.meta.robots as string},
-		{property: "og:title", content: to.meta.ogTitle as string},
-		{
-			property: "og:description",
-			content: to.meta.ogDescription as string,
-		},
-		{property: "og:image", content: to.meta.ogImage as string},
-		{property: "og:url", content: to.meta.ogUrl as string},
-	];
+    const metaTags = [
+        { name: "description", content: to.meta.description as string },
+        { name: "keywords", content: to.meta.keywords as string },
+        { name: "robots", content: to.meta.robots as string },
+        { property: "og:title", content: to.meta.ogTitle as string },
+        {
+            property: "og:description",
+            content: to.meta.ogDescription as string,
+        },
+        { property: "og:image", content: to.meta.ogImage as string },
+        { property: "og:url", content: to.meta.ogUrl as string },
+    ];
 
-	for (const tag of metaTags) {
-		const key = tag.name ? "name" : "property";
-		const value = tag.name || tag.property;
-		if (!value) continue;
+    for (const tag of metaTags) {
+        const key = tag.name ? "name" : "property";
+        const value = tag.name || tag.property;
+        if (!value) continue;
 
-		let element = document.querySelector(`meta[${key}="${value}"]`);
-		if (element) {
-			element.setAttribute("content", tag.content);
-		} else {
-			element = document.createElement("meta");
-			element.setAttribute(key, value);
-			element.setAttribute("content", tag.content);
-			document.head.appendChild(element);
-		}
-	}
+        let element = document.querySelector(`meta[${key}="${value}"]`);
+        if (element) {
+            element.setAttribute("content", tag.content);
+        } else {
+            element = document.createElement("meta");
+            element.setAttribute(key, value);
+            element.setAttribute("content", tag.content);
+            document.head.appendChild(element);
+        }
+    }
 
-	next();
+    next();
 });
 
 export default router;
diff --git a/app/services/CurrencyQuotes.ts b/app/services/CurrencyQuotes.ts
index 6f22496..19e5ee5 100644
--- a/app/services/CurrencyQuotes.ts
+++ b/app/services/CurrencyQuotes.ts
@@ -1,20 +1,20 @@
 import {get} from "@/server/HttpClient";
 
-import type {Stock} from "@/types/BrapiDev/Stock";
+import type {CurrencyQuotes} from "@/types/CurrencyQuotes/CurrencyQuotes";
 
 /**
  * @description Handles the request to get the list of currency quotes.
  *
- * @returns Promise<Stock[] | undefined>
+ * @returns Promise<CurrencyQuotes | undefined>
  * @throws {Error} If the request to the proxy fails
  */
-export async function listCurrencyQuotes(): Promise<Stock[] | undefined> {
+export async function listCurrencyQuotes(): Promise<CurrencyQuotes | undefined> {
 	try {
 		const response = await get("/api/latest.json");
 
 		if (!response.ok) throw new Error(await response.json());
 
-		const jsonData: Stock[] = await response.json();
+		const jsonData: CurrencyQuotes = await response.json();
 
 		return jsonData;
 	} catch (error) {
diff --git a/app/stores/useCurrencyQuotesStore.ts b/app/stores/useCurrencyQuotesStore.ts
index d601260..794675c 100644
--- a/app/stores/useCurrencyQuotesStore.ts
+++ b/app/stores/useCurrencyQuotesStore.ts
@@ -1,22 +1,30 @@
-import {ref} from "vue";
-import {defineStore} from "pinia";
+import { ref } from "vue";
+import { defineStore } from "pinia";
 
-import type {CurrencyQuotes} from "@/types/CurrencyQuotes/CurrencyQuotes";
+import type { CurrencyQuotes } from "@/types/CurrencyQuotes/CurrencyQuotes";
 
 export const useCurrencyQuotesStore = defineStore("currencyQuotes", () => {
-	const currencyQuotes = ref<CurrencyQuotes>();
-	const leftCurrency = ref<string>("");
-	const rightCurrency = ref<string>("");
+    const currencyQuotes = ref<CurrencyQuotes>();
+    const leftCurrency = ref<string>("");
+    const rightCurrency = ref<string>("");
 
-	function invertCurrencies(): void {
-		leftCurrency.value = rightCurrency.value;
-		rightCurrency.value = leftCurrency.value;
-	}
+    function setCurrencyQuotes(quotes: CurrencyQuotes): void {
+        currencyQuotes.value = quotes;
+    }
 
-	return {
-		currencyQuotes,
-		leftCurrency,
-		rightCurrency,
-		invertCurrencies,
-	};
+    function invertCurrencies(): void {
+        const lastRightValue = rightCurrency.value;
+        const lastLeftValue = leftCurrency.value;
+
+        leftCurrency.value = lastRightValue;
+        rightCurrency.value = lastLeftValue;
+    }
+
+    return {
+        currencyQuotes,
+        leftCurrency,
+        rightCurrency,
+        setCurrencyQuotes,
+        invertCurrencies,
+    };
 });
diff --git a/app/types/CurrencyQuotes/Rates.ts b/app/types/CurrencyQuotes/Rates.ts
index 9ff498d..f205892 100644
--- a/app/types/CurrencyQuotes/Rates.ts
+++ b/app/types/CurrencyQuotes/Rates.ts
@@ -1,193 +1,190 @@
 export interface Rates {
-	AED: number;
-	AFN: number;
-	ALL: number;
-	AMD: number;
-	ANG: number;
-	AOA: number;
-	ARS: number;
-	AUD: number;
-	AWG: number;
-	AZN: number;
-	BAM: number;
-	BBD: number;
-	BDT: number;
-	BGN: number;
-	BHD: number;
-	BIF: number;
-	BMD: number;
-	BND: number;
-	BOB: number;
-	BRL: number;
-	BSD: number;
-	BTC: number;
-	BTN: number;
-	BTS: number;
-	BWP: number;
-	BYN: number;
-	BZD: number;
-	CAD: number;
-	CDF: number;
-	CHF: number;
-	CLF: number;
-	CLP: number;
-	CNH: number;
-	CNY: number;
-	COP: number;
-	CRC: number;
-	CUC: number;
-	CUP: number;
-	CVE: number;
-	CZK: number;
-	DASH: number;
-	DJF: number;
-	DKK: number;
-	DOGE: number;
-	DOP: number;
-	DZD: number;
-	EGP: number;
-	ERN: number;
-	ETB: number;
-	ETH: number;
-	EUR: number;
-	FJD: number;
-	FKP: number;
-	GBP: number;
-	GEL: number;
-	GGP: number;
-	GHS: number;
-	GIP: number;
-	GMD: number;
-	GNF: number;
-	GTQ: number;
-	GYD: number;
-	HKD: number;
-	HNL: number;
-	HRK: number;
-	HTG: number;
-	HUF: number;
-	IDR: number;
-	ILS: number;
-	IMP: number;
-	INR: number;
-	IQD: number;
-	IRR: number;
-	ISK: number;
-	JEP: number;
-	JMD: number;
-	JOD: number;
-	JPY: number;
-	KES: number;
-	KGS: number;
-	KHR: number;
-	KMF: number;
-	KPW: number;
-	KRW: number;
-	KWD: number;
-	KYD: number;
-	KZT: number;
-	LAK: number;
-	LBP: number;
-	LD: number;
-	LKR: number;
-	LRD: number;
-	LSL: number;
-	LTC: number;
-	LYD: number;
-	MAD: number;
-	MDL: number;
-	MGA: number;
-	MKD: number;
-	MMK: number;
-	MNT: number;
-	MOP: number;
-	MRO: number;
-	MRU: number;
-	MUR: number;
-	MVR: number;
-	MWK: number;
-	MXN: number;
-	MYR: number;
-	MZN: number;
-	NAD: number;
-	NGN: number;
-	NIO: number;
-	NOK: number;
-	NPR: number;
-	NXT: number;
-	NZD: number;
-	OMR: number;
-	PAB: number;
-	PEN: number;
-	PGK: number;
-	PHP: number;
-	PKR: number;
-	PLN: number;
-	PYG: number;
-	QAR: number;
-	RON: number;
-	RSD: number;
-	RUB: number;
-	RWF: number;
-	SAR: number;
-	SBD: number;
-	SCR: number;
-	SDG: number;
-	SEK: number;
-	SGD: number;
-	SHP: number;
-	SLL: number;
-	SOS: number;
-	SRD: number;
-	SSP: number;
-	STD: number;
-	STN: number;
-	STR: number;
-	SVC: number;
-	SYP: number;
-	SZL: number;
-	THB: number;
-	TJS: number;
-	TMT: number;
-	TND: number;
-	TOP: number;
-	TRY: number;
-	TTD: number;
-	TWD: number;
-	TZS: number;
-	UAH: number;
-	UGX: number;
-	USD: number;
-	UYU: number;
-	UZS: number;
-	VEF_BLKMKT: number;
-	VEF_DICOM: number;
-	VEF_DIPRO: number;
-	VES: number;
-	VND: number;
-	VUV: number;
-	WST: number;
-	XAF: number;
-	XAG: number;
-	XAU: number;
-	XCD: number;
-	XDR: number;
-	XMR: number;
-	XOF: number;
-	XPD: number;
-	XPF: number;
-	XPT: number;
-	XRP: number;
-	YER: number;
-	ZAR: number;
-	ZMW: number;
-	ZWL: number;
-	NMC: number;
-	PPC: number;
-	NVC: number;
-	XPM: number;
-	EAC: number;
-	VTC: number;
-	EMC: number;
-	FCT: number;
+    AED: number;
+    AFN: number;
+    ALL: number;
+    AMD: number;
+    ANG: number;
+    AOA: number;
+    ARS: number;
+    AUD: number;
+    AWG: number;
+    AZN: number;
+    BAM: number;
+    BBD: number;
+    BDT: number;
+    BGN: number;
+    BHD: number;
+    BIF: number;
+    BMD: number;
+    BND: number;
+    BOB: number;
+    BRL: number;
+    BSD: number;
+    BTC: number;
+    BTN: number;
+    BTS: number;
+    BWP: number;
+    BYN: number;
+    BZD: number;
+    CAD: number;
+    CDF: number;
+    CHF: number;
+    CLF: number;
+    CLP: number;
+    CNH: number;
+    CNY: number;
+    COP: number;
+    CRC: number;
+    CUC: number;
+    CUP: number;
+    CVE: number;
+    CZK: number;
+    DASH: number;
+    DJF: number;
+    DKK: number;
+    DOGE: number;
+    DOP: number;
+    DZD: number;
+    EGP: number;
+    ERN: number;
+    ETB: number;
+    ETH: number;
+    EUR: number;
+    FJD: number;
+    FKP: number;
+    GBP: number;
+    GEL: number;
+    GGP: number;
+    GHS: number;
+    GIP: number;
+    GMD: number;
+    GNF: number;
+    GTQ: number;
+    GYD: number;
+    HKD: number;
+    HNL: number;
+    HRK: number;
+    HTG: number;
+    HUF: number;
+    IDR: number;
+    ILS: number;
+    IMP: number;
+    INR: number;
+    IQD: number;
+    IRR: number;
+    ISK: number;
+    JEP: number;
+    JMD: number;
+    JOD: number;
+    JPY: number;
+    KES: number;
+    KGS: number;
+    KHR: number;
+    KMF: number;
+    KPW: number;
+    KRW: number;
+    KWD: number;
+    KYD: number;
+    KZT: number;
+    LAK: number;
+    LBP: number;
+    LD: number;
+    LKR: number;
+    LRD: number;
+    LSL: number;
+    LTC: number;
+    LYD: number;
+    MAD: number;
+    MDL: number;
+    MGA: number;
+    MKD: number;
+    MMK: number;
+    MNT: number;
+    MOP: number;
+    MRO: number;
+    MRU: number;
+    MUR: number;
+    MVR: number;
+    MWK: number;
+    MXN: number;
+    MYR: number;
+    MZN: number;
+    NAD: number;
+    NGN: number;
+    NIO: number;
+    NOK: number;
+    NPR: number;
+    NXT: number;
+    NZD: number;
+    OMR: number;
+    PAB: number;
+    PEN: number;
+    PGK: number;
+    PHP: number;
+    PKR: number;
+    PLN: number;
+    PYG: number;
+    QAR: number;
+    RON: number;
+    RSD: number;
+    RUB: number;
+    RWF: number;
+    SAR: number;
+    SBD: number;
+    SCR: number;
+    SDG: number;
+    SEK: number;
+    SGD: number;
+    SHP: number;
+    SLL: number;
+    SOS: number;
+    SRD: number;
+    SSP: number;
+    STD: number;
+    STN: number;
+    STR: number;
+    SVC: number;
+    SYP: number;
+    SZL: number;
+    THB: number;
+    TJS: number;
+    TMT: number;
+    TND: number;
+    TOP: number;
+    TRY: number;
+    TTD: number;
+    TWD: number;
+    TZS: number;
+    UAH: number;
+    UGX: number;
+    USD: number;
+    UYU: number;
+    UZS: number;
+    VES: number;
+    VND: number;
+    VUV: number;
+    WST: number;
+    XAF: number;
+    XAG: number;
+    XAU: number;
+    XCD: number;
+    XDR: number;
+    XMR: number;
+    XOF: number;
+    XPD: number;
+    XPF: number;
+    XPT: number;
+    XRP: number;
+    YER: number;
+    ZAR: number;
+    ZMW: number;
+    ZWL: number;
+    NMC: number;
+    PPC: number;
+    NVC: number;
+    XPM: number;
+    EAC: number;
+    VTC: number;
+    EMC: number;
+    FCT: number;
 }
diff --git a/app/views/AboutUs.vue b/app/views/AboutUs.vue
index 699df57..93ea16d 100644
--- a/app/views/AboutUs.vue
+++ b/app/views/AboutUs.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import Accordion from "@/components/Accordion.vue";
 import Badges from "@/components/Badges.vue";
-import {AccordionDto} from "@/components/Dto/AccordionDto";
-import {BadgesDto} from "@/components/Dto/BadgesDto";
-import {useTranslation} from "@/config/composable/translate";
+import { AccordionDto } from "@/components/Dto/AccordionDto";
+import { BadgesDto } from "@/components/Dto/BadgesDto";
+import { useTranslation } from "@/config/composable/translate";
 
 useTranslation();
 </script>
@@ -19,7 +19,7 @@ useTranslation();
             <span class="text-center text-2xl md:text-3xl pb-2 font-semibold border-b">Por Trás dos Códigos</span>
             <Badges :badges="BadgesDto" />
         </div>
-        <div class="w-full h-fit accordion">
+        <div class="w-full h-fit translate-ignore">
             <Accordion :items="AccordionDto" />
         </div>
     </main>
diff --git a/app/views/BrapiDev/Stocks.vue b/app/views/BrapiDev/Stocks.vue
index 4582a3c..0ed1320 100644
--- a/app/views/BrapiDev/Stocks.vue
+++ b/app/views/BrapiDev/Stocks.vue
@@ -3,44 +3,45 @@ import Button from "@/components/ui/button/Button.vue";
 import Skeleton from "@/components/Skeletons/views/Cryptos.vue";
 import EntityCard from "@/components/EntityCard.vue";
 import InternalServerError from "@/views/Exceptions/InternalServerError.vue";
-import { ref, onMounted } from "vue";
-import { listStocks } from "@/services/BrapiDev";
-import { useTranslation } from "@/config/composable/translate";
-import { useStocksCurrencyStore } from "@/stores/useStocksCurrencyStore";
+import {ref, onMounted} from "vue";
+import {listStocks} from "@/services/BrapiDev";
+import {useTranslation} from "@/config/composable/translate";
+import {useStocksCurrencyStore} from "@/stores/useStocksCurrencyStore";
+import {t} from "i18next";
 
 useTranslation();
 
-const { addStocksCurrencies, detailStocksCurrency, stocksCurrencies } = useStocksCurrencyStore();
+const {addStocksCurrencies, detailStocksCurrency, stocksCurrencies} = useStocksCurrencyStore();
 const isLoading = ref<boolean>(true);
 const isLoadingMore = ref<boolean>(false);
 const start = ref<number>(1);
 const error = ref<boolean>(false);
 
 async function loadStocks() {
-    return await listStocks(12, start.value);
+	return await listStocks(12, start.value);
 }
 
 async function loadMore() {
-    isLoadingMore.value = true;
-    start.value += 12;
-    const newStocks = await loadStocks();
+	isLoadingMore.value = true;
+	start.value += 12;
+	const newStocks = await loadStocks();
 
-    if (newStocks) {
-        addStocksCurrencies(newStocks);
-    } else {
-        error.value = true;
-    }
+	if (newStocks) {
+		addStocksCurrencies(newStocks);
+	} else {
+		error.value = true;
+	}
 
-    isLoadingMore.value = false;
+	isLoadingMore.value = false;
 }
 
 onMounted(async () => {
-    if (!stocksCurrencies.length) {
-        const data = await loadStocks();
-        if (!data) error.value = true;
-        else addStocksCurrencies(data);
-    }
-    isLoading.value = false;
+	if (!stocksCurrencies.length) {
+		const data = await loadStocks();
+		if (!data) error.value = true;
+		else addStocksCurrencies(data);
+	}
+	isLoading.value = false;
 });
 </script>
 
@@ -56,7 +57,7 @@ onMounted(async () => {
         </ul>
         <div v-if="!error && !isLoading" class="flex justify-center mt-4">
             <Button @click="loadMore" :disabled="isLoadingMore">
-                {{ isLoadingMore ? 'Carregando...' : 'Carregar Mais' }}
+                {{ isLoadingMore ? t('Carregando...') : t('Carregar Mais') }}
             </Button>
         </div>
         <InternalServerError v-if="error" />
diff --git a/app/views/CoinMarketCap/CryptoDetail.vue b/app/views/CoinMarketCap/CryptoDetail.vue
index fca749f..b934fd7 100644
--- a/app/views/CoinMarketCap/CryptoDetail.vue
+++ b/app/views/CoinMarketCap/CryptoDetail.vue
@@ -1,37 +1,37 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
-import { useCryptoCurrencyStore } from "@/stores/useCryptoCurrencyStore";
-import type { CryptoCurrency } from "@/types/CoinMarketCap/CryptoCurrency";
-import { detailBitcoin } from "@/services/CoinMarketCap";
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import {useCryptoCurrencyStore} from "@/stores/useCryptoCurrencyStore";
+import type {CryptoCurrency} from "@/types/CoinMarketCap/CryptoCurrency";
+import {detailBitcoin} from "@/services/CoinMarketCap";
 import LineCryptoChart from "@/components/LineCryptoChart.vue";
 
 const route = useRoute();
 const crypto = String(route.params.crypto);
-const { detailCryptoCurrencyByName } = useCryptoCurrencyStore();
+const {detailCryptoCurrencyByName} = useCryptoCurrencyStore();
 const cryptoData = ref<CryptoCurrency | null>(null);
 const error = ref<boolean>(false);
 const loading = ref<boolean>(true);
 
 const capitalizeFirstLetter = (string: string) => {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+	return string.charAt(0).toUpperCase() + string.slice(1);
 };
 
 document.title = `${capitalizeFirstLetter(crypto)} | NEI Market Analytics`;
 
 onMounted(async () => {
-    cryptoData.value = detailCryptoCurrencyByName(crypto);
-
-    if (!cryptoData.value) {
-        loading.value = false;
-        try {
-            cryptoData.value = (await detailBitcoin(crypto.toLowerCase())) as CryptoCurrency;
-        } catch (err) {
-            error.value = true;
-        }
-    }
-
-    loading.value = false;
+	cryptoData.value = detailCryptoCurrencyByName(crypto);
+
+	if (!cryptoData.value) {
+		loading.value = false;
+		try {
+			cryptoData.value = (await detailBitcoin(crypto.toLowerCase())) as CryptoCurrency;
+		} catch (err) {
+			error.value = true;
+		}
+	}
+
+	loading.value = false;
 });
 </script>
 
diff --git a/app/views/CoinMarketCap/Cryptos.vue b/app/views/CoinMarketCap/Cryptos.vue
index 00d569a..e8fce27 100644
--- a/app/views/CoinMarketCap/Cryptos.vue
+++ b/app/views/CoinMarketCap/Cryptos.vue
@@ -3,44 +3,45 @@ import Button from "@/components/ui/button/Button.vue";
 import Skeleton from "@/components/Skeletons/views/Cryptos.vue";
 import EntityCard from "@/components/EntityCard.vue";
 import InternalServerError from "@/views/Exceptions/InternalServerError.vue";
-import { ref, onMounted } from "vue";
-import { listBitcoin } from "@/services/CoinMarketCap";
-import { useTranslation } from "@/config/composable/translate";
-import { useCryptoCurrencyStore } from "@/stores/useCryptoCurrencyStore";
+import {ref, onMounted} from "vue";
+import {listBitcoin} from "@/services/CoinMarketCap";
+import {useTranslation} from "@/config/composable/translate";
+import {useCryptoCurrencyStore} from "@/stores/useCryptoCurrencyStore";
+import {t} from "i18next";
 
 useTranslation();
 
-const { addCryptoCurrencies, cryptoCurrencies } = useCryptoCurrencyStore();
+const {addCryptoCurrencies, cryptoCurrencies} = useCryptoCurrencyStore();
 const isLoading = ref<boolean>(true);
 const isLoadingMore = ref<boolean>(false);
 const start = ref<number>(1);
 const error = ref<boolean>(false);
 
 async function loadCryptos() {
-    return await listBitcoin(12, start.value);
+	return await listBitcoin(12, start.value);
 }
 
 async function loadMore() {
-    isLoadingMore.value = true;
-    start.value += 12;
-    const newCryptos = await loadCryptos();
+	isLoadingMore.value = true;
+	start.value += 12;
+	const newCryptos = await loadCryptos();
 
-    if (newCryptos) {
-        addCryptoCurrencies(newCryptos);
-    } else {
-        error.value = true;
-    }
+	if (newCryptos) {
+		addCryptoCurrencies(newCryptos);
+	} else {
+		error.value = true;
+	}
 
-    isLoadingMore.value = false;
+	isLoadingMore.value = false;
 }
 
 onMounted(async () => {
-    if (!cryptoCurrencies.length) {
-        const data = await loadCryptos();
-        if (!data) error.value = true;
-        else addCryptoCurrencies(data);
-    }
-    isLoading.value = false;
+	if (!cryptoCurrencies.length) {
+		const data = await loadCryptos();
+		if (!data) error.value = true;
+		else addCryptoCurrencies(data);
+	}
+	isLoading.value = false;
 });
 </script>
 
@@ -58,7 +59,7 @@ onMounted(async () => {
         </ul>
         <div v-if="!error && !isLoading" class="flex justify-center mt-4">
             <Button @click="loadMore" :disabled="isLoadingMore">
-                {{ isLoadingMore ? 'Carregando...' : 'Carregar Mais' }}
+                {{ isLoadingMore ? t('Carregando...') : t('Carregar Mais') }}
             </Button>
         </div>
         <InternalServerError v-if="error" />
diff --git a/app/views/CurrencyQuotes.vue b/app/views/CurrencyQuotes.vue
deleted file mode 100644
index 1eef7e9..0000000
--- a/app/views/CurrencyQuotes.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import Button from "@/components/ui/button/Button.vue";
-import {useTranslation} from "@/config/composable/translate";
-import {useCurrencyQuotesStore} from "@/stores/useCurrencyQuotesStore";
-
-useTranslation();
-
-const {currencyQuotes, leftCurrency, rightCurrency, invertCurrencies} = useCurrencyQuotesStore();
-</script>
-
-<template>
-    <main class="container justify-center">
-        <Button>
-            Currency Quotes
-        </Button>
-    </main>
-</template>
diff --git a/app/views/Home.vue b/app/views/Home.vue
index 019ce6f..91bb849 100644
--- a/app/views/Home.vue
+++ b/app/views/Home.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import {useTranslation} from "@/config/composable/translate";
-import Button from "@/components/ui/button/Button.vue";
-import RouterLink from "@/tags/RouterLink.vue";
+import { useTranslation } from "@/config/composable/translate";
 
 useTranslation();
 </script>
 
 <template>
     <main class="container justify-center">
-        <RouterLink to="/currency-quotes">
-            <Button>
-                Cotação de Moedas
-            </Button>
-        </RouterLink>
+        Home
     </main>
 </template>
diff --git a/app/views/Policies/CookiePolicy.vue b/app/views/Policies/CookiePolicy.vue
index 4d8ace3..73fb9c9 100644
--- a/app/views/Policies/CookiePolicy.vue
+++ b/app/views/Policies/CookiePolicy.vue
@@ -146,7 +146,7 @@ useTranslation();
             <Link href="https://www.termsfeed.com/blog/cookies/" target="_blank"><span>Tudo
                 Sobre Cookies por TermsFeed.</span></Link>
         </div>
-        <h3>Contate-Nos</h3>
+        <h2>Contate-Nos</h2>
         <p>Se você tiver alguma dúvida sobre esta Política de Cookies, você pode nos contatar:</p>
         <ul>
             <li>
diff --git a/package.json b/package.json
index b0c44cc..7d9c7ab 100644
--- a/package.json
+++ b/package.json
@@ -34,11 +34,13 @@
 		"i18next-browser-languagedetector": "^8.0.0",
 		"i18next-http-backend": "^2.6.1",
 		"i18next-vue": "^5.0.0",
+		"lucide-vue-next": "^0.454.0",
 		"mitt": "^3.0.1",
 		"pinia": "^2.1.7",
 		"radix-vue": "^1.9.5",
 		"tailwind-merge": "^2.5.2",
 		"tailwindcss-animate": "^1.0.7",
+		"vaul-vue": "^0.2.0",
 		"vue": "^3.4.29",
 		"vue-router": "^4.3.3",
 		"vue-sonner": "^1.2.1"
@@ -71,6 +73,7 @@
 		"start-server-and-test": "^2.0.4",
 		"storybook": "^8.3.0",
 		"storybook-vue3-router": "^5.0.0",
+		"tailwindcss": "^3.4.14",
 		"typescript": "~5.5.4",
 		"vite": "^5.3.1",
 		"vite-plugin-vue-devtools": "^7.3.1",
diff --git a/tailwind.config.js b/tailwind.config.js
index 2fec5c9..312be1e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,6 +16,7 @@ export const theme = {
 	extend: {
 		colors: {
 			primaryForeground: "var(--primary-foreground)",
+            buttonBg: "var(--button-bg)",
 			textForeground: "var(--text-foreground)",
 			material: "var(--material)",
 			dark: "var(--dark)",
diff --git a/tsconfig.app.json b/tsconfig.app.json
index f111c47..15af626 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -7,7 +7,8 @@
 		"tests/**/*",
 		"stories/**/*",
 		"mocks/**/*",
-		"app/locales"
+		"app/locales",
+		"tailwind.config.js"
 	],
 	"exclude": ["app/**/__tests__/*"],
 	"compilerOptions": {