diff --git a/src/app/(public)/adicionar-cartao/page.tsx b/src/app/(public)/adicionar-cartao/page.tsx
index 293e91d..1d20f9f 100644
--- a/src/app/(public)/adicionar-cartao/page.tsx
+++ b/src/app/(public)/adicionar-cartao/page.tsx
@@ -12,7 +12,7 @@ import { TextInput } from "components/Inputs/Text";
 import { Space } from "components/Space";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
-import { CardTypeEnum } from "types/enums/card-type";
+import { CardTypeEnum, isPostpaid, isPrepaid } from "types/enums/card-type";
 import { PayAtEnum } from "types/enums/pay-at";
 
 const bankAccounts = Object.values(bankAccountsData);
@@ -84,7 +84,7 @@ const AddCard = () => {
 
 					<Space />
 
-					{cardType === CardTypeEnum.POSTPAID && (
+					{isPostpaid(cardType) && (
 						<>
 							<SelectInput
 								id="dueDay"
@@ -155,7 +155,7 @@ const AddCard = () => {
 						</>
 					)}
 
-					{cardType === CardTypeEnum.PREPAID && (
+					{isPrepaid(cardType) && (
 						<>
 							<MoneyInput
 								id="balance"
diff --git a/src/app/(public)/cartao/[cardId]/page.tsx b/src/app/(public)/cartao/[cardId]/page.tsx
index 243012e..529f756 100644
--- a/src/app/(public)/cartao/[cardId]/page.tsx
+++ b/src/app/(public)/cartao/[cardId]/page.tsx
@@ -1,7 +1,8 @@
 import { cards } from "assets/data";
 import { Header } from "components/Header";
 import { Icon } from "components/Icon";
-import { CardTypeEnum } from "types/enums/card-type";
+import { PostpaidCard, PrepaidCard } from "types/card";
+import { isPostpaid, isPrepaid } from "types/enums/card-type";
 import { formatMoney } from "utils/format";
 
 interface Props {
@@ -29,21 +30,23 @@ const Card = ({ params }: Props) => {
 				<div className="flex flex-col w-full">
 					<span>Número: **** {card.lastFourDigits}</span>
 					<span>Bandeira: {card.cardProvider.network}</span>
-					{card.type === CardTypeEnum.POSTPAID && (
+					{isPostpaid(card.type) && (
 						<>
-							<span>Dia de vencimento: {card.dueDay}</span>
+							<span>Dia de vencimento: {(card as PostpaidCard).dueDay}</span>
 							<span>
-								Fecha: {card.cardProvider.statementDays} dias antes do
-								vencimento
+								Fecha: {(card as PostpaidCard).cardProvider.statementDays} dias
+								antes do vencimento
+							</span>
+							<span>Limite: {formatMoney((card as PostpaidCard).limit)}</span>
+							<span>Pago no: {(card as PostpaidCard).payAt}</span>
+							<span>
+								Pago com: {(card as PostpaidCard).payWithBankAccountId}
 							</span>
-							<span>Limite: {formatMoney(card.limit)}</span>
-							<span>Pago no: {card.payAt}</span>
-							<span>Pago com: {card.payWithBankAccountId}</span>
 						</>
 					)}
-					{card.type === CardTypeEnum.PREPAID && (
+					{isPrepaid(card.type) && (
 						<>
-							<span>Saldo: {formatMoney(card.balance)}</span>
+							<span>Saldo: {formatMoney((card as PrepaidCard).balance)}</span>
 						</>
 					)}
 				</div>
diff --git a/src/app/(public)/carteira/page.tsx b/src/app/(public)/carteira/page.tsx
index e37910d..4e36ad2 100644
--- a/src/app/(public)/carteira/page.tsx
+++ b/src/app/(public)/carteira/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { colors } from "assets/colors";
 import {
 	bankAccounts as bankAccountsData,
 	cards as cardsData,
@@ -9,11 +10,20 @@ import { Icon } from "components/Icon";
 import { Space } from "components/Space";
 import { WalletItem } from "components/WalletItem";
 import Link from "next/link";
-import { PostpaidCard, PrepaidCard } from "types/card";
+import { Card, PostpaidCard, PrepaidCard } from "types/card";
 import { CardTypeEnum } from "types/enums/card-type";
 import { formatBankAccountNumber } from "utils/format";
 import { formatMoney } from "utils/format";
 
+interface CardGroup {
+	title: string;
+	items: Array<Card>;
+	valueKey: keyof PostpaidCard | keyof PrepaidCard;
+	valueLabel: string;
+	newCardLabel: string;
+	cardType: CardTypeEnum;
+}
+
 const bankAccounts = Object.values(bankAccountsData);
 const cards = Object.values(cardsData);
 
@@ -24,32 +34,85 @@ const Wallet = () => {
 
 			<main className="min-h-[100dvh] w-full flex flex-col pt-2 container-padding">
 				<section>
-					<h2 className="font-bold text-lg">Resumo</h2>
+					<h2 className="font-bold text-lg">Saldos</h2>
 
-					<div>
-						<div className="flex flex-row justify-between">
-							<span>Saldo bancário</span>
-							<span>
-								{formatMoney(
+					<div className="flex flex-col gap-1">
+						{[
+							{
+								title: "Bancário",
+								value: formatMoney(
 									bankAccounts.reduce((acc, cur) => acc + cur.balance, 0),
-								)}
-							</span>
-						</div>
-
-						<div className="flex flex-row justify-between">
-							<span>Fatura</span>
-							<span>
-								{formatMoney(
+								),
+							},
+							{
+								title: "Vale alimentação",
+								value: formatMoney(
+									cards.reduce((acc, cur) => {
+										if (cur.type === CardTypeEnum.VA) {
+											acc + cur.balance;
+										}
+
+										return acc;
+									}, 0),
+								),
+							},
+							{
+								title: "Vale refeição",
+								value: formatMoney(
 									cards.reduce((acc, cur) => {
-										if (cur.type === CardTypeEnum.POSTPAID) {
-											return acc + 0;
+										if (cur.type === CardTypeEnum.VR) {
+											acc + cur.balance;
 										}
 
 										return acc;
 									}, 0),
-								)}
-							</span>
-						</div>
+								),
+							},
+							{
+								title: "Vale transporte",
+								value: formatMoney(
+									cards.reduce((acc, cur) => {
+										if (cur.type === CardTypeEnum.VT) {
+											acc + cur.balance;
+										}
+
+										return acc;
+									}, 0),
+								),
+							},
+							// {
+							// 	title: "Faturas",
+							// 	value: formatMoney(
+							// 		cards.reduce((acc, cur) => {
+							// 			if (isPostpaid(cur.type)) {
+							// 				return acc + 0;
+							// 			}
+
+							// 			return acc;
+							// 		}, 0),
+							// 	),
+							// },
+						].map(({ title, value }) => (
+							<div key={title} className="flex font-bold text-sm rounded">
+								<div
+									className="flex flex-row gap-2 w-3/4 items-center p-2 rounded-l"
+									style={{
+										backgroundColor: colors.gray,
+									}}
+								>
+									<span>{title}</span>
+								</div>
+
+								<div
+									className="w-2/5 flex flex-row items-center justify-end p-2 rounded-r"
+									style={{
+										backgroundColor: `${colors.gray}75`,
+									}}
+								>
+									<span>{value}</span>
+								</div>
+							</div>
+						))}
 					</div>
 				</section>
 
@@ -79,65 +142,75 @@ const Wallet = () => {
 
 				<Space />
 
-				<section>
-					<h2 className="font-bold text-lg">Cartões de crédito</h2>
-
-					<div className="flex flex-col gap-1">
-						{(
-							cards.filter(
-								(c) => c.type === CardTypeEnum.POSTPAID,
-							) as Array<PostpaidCard>
-						).map((c) => (
-							<WalletItem
-								key={c.cardId}
-								redirectTo={`/cartao/${c.cardId}`}
-								iconUrl={c.cardProvider.iconUrl}
-								label={`**** ${c.lastFourDigits}`}
-								name={c.name}
-								valueLabel="Fatura"
-								value={formatMoney(0)}
-							/>
-						))}
-
-						<Link
-							href={`/adicionar-cartao?type=${CardTypeEnum.POSTPAID}`}
-							className="btn"
-						>
-							<Icon icon="pluscircle" /> Adicionar novo cartão
-						</Link>
-					</div>
-				</section>
-
-				<Space />
-
-				<section>
-					<h2 className="font-bold text-lg">Vales</h2>
-
-					<div className="flex flex-col gap-1">
-						{(
-							cards.filter(
-								(c) => c.type === CardTypeEnum.PREPAID,
-							) as Array<PrepaidCard>
-						).map((c) => (
-							<WalletItem
-								key={c.cardId}
-								redirectTo={`/cartao/${c.cardId}`}
-								iconUrl={c.cardProvider.iconUrl}
-								label={`**** ${c.lastFourDigits}`}
-								name={c.name}
-								valueLabel="Saldo"
-								value={formatMoney(c.balance)}
-							/>
-						))}
-
-						<Link
-							href={`/adicionar-cartao?type=${CardTypeEnum.PREPAID}`}
-							className="btn"
-						>
-							<Icon icon="pluscircle" /> Adicionar novo vale
-						</Link>
-					</div>
-				</section>
+				{(
+					[
+						{
+							title: "Cartões de crédito",
+							items: cards.filter((c) => c.type === CardTypeEnum.CREDIT),
+							valueKey: "limit", // TODO Fix
+							valueLabel: "Fatura",
+							newCardLabel: "Adicionar novo cartão",
+							cardType: CardTypeEnum.CREDIT,
+						},
+						{
+							title: "Vales Alimentação",
+							items: cards.filter((c) => c.type === CardTypeEnum.VA),
+							valueKey: "balance",
+							valueLabel: "Saldo",
+							newCardLabel: "Adicionar vale alimentação",
+							cardType: CardTypeEnum.VA,
+						},
+						{
+							title: "Vales Refeição",
+							items: cards.filter((c) => c.type === CardTypeEnum.VR),
+							valueKey: "balance",
+							valueLabel: "Saldo",
+							newCardLabel: "Adicionar vale refeição",
+							cardType: CardTypeEnum.VR,
+						},
+						{
+							title: "Vales Transporte",
+							items: cards.filter((c) => c.type === CardTypeEnum.VT),
+							valueKey: "balance",
+							valueLabel: "Saldo",
+							newCardLabel: "Adicionar vale transporte",
+							cardType: CardTypeEnum.VT,
+						},
+					] as Array<CardGroup>
+				).map(
+					({ title, items, valueKey, valueLabel, newCardLabel, cardType }) => (
+						<>
+							<section>
+								<h2 className="font-bold text-lg">{title}</h2>
+
+								<div className="flex flex-col gap-1">
+									{items.map((c) => (
+										<WalletItem
+											key={c.cardId}
+											redirectTo={`/cartao/${c.cardId}`}
+											iconUrl={c.cardProvider.iconUrl}
+											label={`**** ${c.lastFourDigits}`}
+											name={c.name}
+											valueLabel={valueLabel}
+											value={formatMoney(
+												c[valueKey as keyof (typeof items)[0]] as any,
+											)}
+										/>
+									))}
+
+									<Link
+										href={`/adicionar-cartao?type=${cardType}`}
+										className="btn"
+									>
+										<Icon icon="pluscircle" /> {newCardLabel}
+									</Link>
+								</div>
+							</section>
+
+							<Space />
+						</>
+					),
+				)}
 			</main>
 		</>
 	);
diff --git a/src/app/(public)/conta/page.tsx b/src/app/(public)/conta/page.tsx
index 890d3f7..2d3f058 100644
--- a/src/app/(public)/conta/page.tsx
+++ b/src/app/(public)/conta/page.tsx
@@ -3,7 +3,7 @@ import { Header } from "components/Header";
 import { Icon, IconType } from "components/Icon";
 import { Space } from "components/Space";
 import Link from "next/link";
-import { CardTypeEnum } from "types/enums/card-type";
+import { CardTypeEnum, isPrepaid } from "types/enums/card-type";
 
 interface PremiumBenefit {
 	title: string;
@@ -28,28 +28,28 @@ const premiumBenefits: Array<PremiumBenefit> = [
 		icon: "ticket",
 	},
 	{
-		title: "Categorias ilimitados",
+		title: "Categorias ilimitadas",
 		description: "Adicione quantas categorias quiser",
 		icon: "category",
 	},
 	{
-		title: "Transações recorrentes ilimitadas",
+		title: "(Em breve) Transações recorrentes ilimitadas",
 		description: "Adicione quantas transações recorrentes quiser",
 		icon: "clock",
 	},
 	{
-		title: "Gere relatórios",
+		title: "(Em breve) Gere relatórios",
 		description:
 			"Gere relatórios dos seus gastos, orçamentos e muito mais, em diversos formatos",
 		icon: "pdf",
 	},
 	{
-		title: "Tags",
+		title: "(Em breve) Tags",
 		description: "Adicione tags as suas transações",
 		icon: "tag",
 	},
 	{
-		title: "Lembretes",
+		title: "(Em breve) Lembretes",
 		description: "Receba lembretes para pagar suas contas",
 		icon: "bell",
 	},
@@ -99,7 +99,7 @@ const Account = () => {
 							label="Cartões de crédito"
 							curAmount={
 								Object.values(cards).filter(
-									(c) => c.type === CardTypeEnum.POSTPAID,
+									(c) => c.type === CardTypeEnum.CREDIT,
 								).length
 							}
 							limit={plans.free.limits.postpaidCard}
@@ -107,9 +107,7 @@ const Account = () => {
 						<LimitItem
 							label="Vales"
 							curAmount={
-								Object.values(cards).filter(
-									(c) => c.type === CardTypeEnum.PREPAID,
-								).length
+								Object.values(cards).filter((c) => isPrepaid(c.type)).length
 							}
 							limit={plans.free.limits.prepaidCard}
 						/>
diff --git a/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx b/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx
index 945f7fb..61e8b5d 100644
--- a/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx
+++ b/src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx
@@ -14,11 +14,15 @@ interface Props {
 
 const getCardType = (type: CardTypeEnum) => {
 	switch (type) {
-		case CardTypeEnum.POSTPAID:
+		case CardTypeEnum.CREDIT:
 		default:
-			return "Pós-pago";
-		case CardTypeEnum.PREPAID:
-			return "Pré-pago";
+			return "Crédito";
+		case CardTypeEnum.VA:
+			return "Vale Alimentação";
+		case CardTypeEnum.VR:
+			return "Vale Refeição";
+		case CardTypeEnum.VT:
+			return "Vale Transporte";
 	}
 };
 
diff --git a/src/assets/data.ts b/src/assets/data.ts
index 04f84cd..1a8feff 100644
--- a/src/assets/data.ts
+++ b/src/assets/data.ts
@@ -137,7 +137,7 @@ export const cardProviders: Record<string, CardProvider> = {
 		iconUrl:
 			"https://logodownload.org/wp-content/uploads/2019/07/xp-investimentos-logo-8.png",
 		color: colors.xpInvestimentos,
-		type: CardTypeEnum.POSTPAID,
+		type: CardTypeEnum.CREDIT,
 		network: NetworkEnum.VISA,
 		statementDays: 14,
 		availableDueDates: ["05", "10", "15"],
@@ -147,7 +147,7 @@ export const cardProviders: Record<string, CardProvider> = {
 		name: "Nubank",
 		iconUrl: bankProviders.nubank.iconUrl,
 		color: bankProviders.nubank.color,
-		type: CardTypeEnum.POSTPAID,
+		type: CardTypeEnum.CREDIT,
 		network: NetworkEnum.MASTERCARD,
 		statementDays: 14,
 		availableDueDates: ["05", "10", "15"],
@@ -158,7 +158,7 @@ export const cardProviders: Record<string, CardProvider> = {
 		iconUrl:
 			"https://logodownload.org/wp-content/uploads/2017/09/alelo-logo-1-599x393.png",
 		color: colors.aleloRefeicao,
-		type: CardTypeEnum.PREPAID,
+		type: CardTypeEnum.VR,
 		network: NetworkEnum.ELO,
 	},
 };
@@ -169,7 +169,7 @@ export const cards: Record<string, Card> = {
 		accountId: "foo1",
 		cardProviderId: "xpInfinityOne",
 		cardProvider: cardProviders["xpInfinityOne"],
-		type: CardTypeEnum.POSTPAID,
+		type: CardTypeEnum.CREDIT,
 		name: "Xp Investimentos",
 
 		// Credit cards
@@ -184,7 +184,7 @@ export const cards: Record<string, Card> = {
 		accountId: "foo1",
 		cardProviderId: "nubank",
 		cardProvider: cardProviders["nubank"],
-		type: CardTypeEnum.POSTPAID,
+		type: CardTypeEnum.CREDIT,
 		name: "Nubank",
 
 		// Credit cards
@@ -199,7 +199,7 @@ export const cards: Record<string, Card> = {
 		accountId: "foo1",
 		cardProviderId: "aleloRefeicao",
 		cardProvider: cardProviders["aleloRefeicao"],
-		type: CardTypeEnum.PREPAID,
+		type: CardTypeEnum.VR,
 		name: "Alelo VR",
 		lastFourDigits: "1234",
 
diff --git a/src/components/AddTransaction/index.tsx b/src/components/AddTransaction/index.tsx
index f04e8f9..d689eb6 100644
--- a/src/components/AddTransaction/index.tsx
+++ b/src/components/AddTransaction/index.tsx
@@ -16,16 +16,6 @@ import { TransactionTypeEnum } from "types/enums/transaction-type";
 
 const categories = Object.values(categoriesData);
 const paymentMethods = [
-	...Object.values(cards).map((c) => ({
-		id: `${c.cardId}#CARD`,
-		color: c.cardProvider.color,
-		name: c.cardProvider.name,
-		iconUrl: c.cardProvider.iconUrl,
-		groupLabel:
-			c.cardProvider.type === CardTypeEnum.POSTPAID
-				? "Cartões de crédito"
-				: "Vales",
-	})),
 	...Object.values(bankAccounts).map((b) => ({
 		id: `${b.bankAccountId}#BANK`,
 		color: b.bank.color,
@@ -33,6 +23,42 @@ const paymentMethods = [
 		iconUrl: b.bank.iconUrl,
 		groupLabel: "Contas bancárias",
 	})),
+	...Object.values(cards)
+		.filter((c) => c.type === CardTypeEnum.CREDIT)
+		.map((c) => ({
+			id: `${c.cardId}#CARD`,
+			color: c.cardProvider.color,
+			name: c.cardProvider.name,
+			iconUrl: c.cardProvider.iconUrl,
+			groupLabel: "Cartões de crédito",
+		})),
+	...Object.values(cards)
+		.filter((c) => c.type === CardTypeEnum.VA)
+		.map((c) => ({
+			id: `${c.cardId}#CARD`,
+			color: c.cardProvider.color,
+			name: c.cardProvider.name,
+			iconUrl: c.cardProvider.iconUrl,
+			groupLabel: "Vales Alimentação",
+		})),
+	...Object.values(cards)
+		.filter((c) => c.type === CardTypeEnum.VR)
+		.map((c) => ({
+			id: `${c.cardId}#CARD`,
+			color: c.cardProvider.color,
+			name: c.cardProvider.name,
+			iconUrl: c.cardProvider.iconUrl,
+			groupLabel: "Vales Refeição",
+		})),
+	...Object.values(cards)
+		.filter((c) => c.type === CardTypeEnum.VT)
+		.map((c) => ({
+			id: `${c.cardId}#CARD`,
+			color: c.cardProvider.color,
+			name: c.cardProvider.name,
+			iconUrl: c.cardProvider.iconUrl,
+			groupLabel: "Vales Transporte",
+		})),
 ];
 
 export const AddTransaction = () => {
diff --git a/src/components/BudgetCard/index.tsx b/src/components/BudgetCard/index.tsx
index f17b3db..2cebcbd 100644
--- a/src/components/BudgetCard/index.tsx
+++ b/src/components/BudgetCard/index.tsx
@@ -67,7 +67,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
 						dataKey="value"
 					>
 						<Cell fill={color(expensesPercentage)} />
-						<Cell fill="#DCDCDC" />
+						<Cell fill={colors.gray} />
 					</Pie>
 				</PieChart>
 
@@ -76,7 +76,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
 						<div
 							className="flex flex-row gap-2 w-3/4 items-center p-2 rounded-l"
 							style={{
-								backgroundColor: "#DCDCDC",
+								backgroundColor: colors.gray,
 							}}
 						>
 							<span>Gasto total</span>
@@ -85,7 +85,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
 						<div
 							className="w-2/5 flex flex-row items-center justify-end p-2 rounded-r"
 							style={{
-								backgroundColor: "#DCDCDC75",
+								backgroundColor: `${colors.gray}75`,
 							}}
 						>
 							<span>{formatMoney(totalExpenses)}</span>
@@ -96,7 +96,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
 						<div
 							className="flex flex-row gap-2 w-3/4 items-center p-2 rounded-l"
 							style={{
-								backgroundColor: "#DCDCDC",
+								backgroundColor: colors.gray,
 							}}
 						>
 							<span>Gasto planejado</span>
@@ -105,7 +105,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
 						<div
 							className="w-2/5 flex flex-row items-center justify-end p-2 rounded-r"
 							style={{
-								backgroundColor: "#DCDCDC75",
+								backgroundColor: `${colors.gray}75`,
 							}}
 						>
 							<span>{formatMoney(totalBudget)}</span>
@@ -116,7 +116,7 @@ export const BudgetCard = ({ budget, expenses }: Props) => {
 						<div
 							className="flex flex-row gap-2 w-3/4 items-center p-2 rounded-l"
 							style={{
-								backgroundColor: "#DCDCDC",
+								backgroundColor: colors.gray,
 							}}
 						>
 							<span>Saldo</span>
diff --git a/src/types/card.ts b/src/types/card.ts
index e92eb9d..9f9a06a 100644
--- a/src/types/card.ts
+++ b/src/types/card.ts
@@ -25,7 +25,7 @@ interface BaseCard {
 
 // Credit cards
 export interface PostpaidCard extends BaseCard {
-	type: CardTypeEnum.POSTPAID;
+	type: CardTypeEnum.CREDIT;
 	dueDay: number;
 	limit: number;
 	payAt: PayAtEnum;
@@ -34,7 +34,7 @@ export interface PostpaidCard extends BaseCard {
 
 // VA, VR, VT
 export interface PrepaidCard extends BaseCard {
-	type: CardTypeEnum.PREPAID;
+	type: CardTypeEnum.VA | CardTypeEnum.VR | CardTypeEnum.VT;
 	balance: number;
 }
 
diff --git a/src/types/enums/card-type.ts b/src/types/enums/card-type.ts
index 156db91..55ad64d 100644
--- a/src/types/enums/card-type.ts
+++ b/src/types/enums/card-type.ts
@@ -1,4 +1,18 @@
 export enum CardTypeEnum {
-	"POSTPAID" = "POSTPAID",
-	"PREPAID" = "PREPAID",
+	"CREDIT" = "CREDIT",
+	"VA" = "VA",
+	"VR" = "VR",
+	"VT" = "VT",
 }
+
+export const isPrepaid = (type: CardTypeEnum) => {
+	if ([CardTypeEnum.VA, CardTypeEnum.VR, CardTypeEnum.VT].includes(type)) {
+		return true;
+	}
+
+	return false;
+};
+
+export const isPostpaid = (type: CardTypeEnum) => {
+	return CardTypeEnum.CREDIT === type;
+};