diff --git a/src/app/(dashboard)/accounts/[accountId]/statement/loading.tsx b/src/app/(dashboard)/accounts/[accountId]/statement/loading.tsx
index 9fe7bd7..3ae0af4 100644
--- a/src/app/(dashboard)/accounts/[accountId]/statement/loading.tsx
+++ b/src/app/(dashboard)/accounts/[accountId]/statement/loading.tsx
@@ -13,7 +13,7 @@ export default function ExtratoLoading() {
 	return (
 		<main className="flex flex-col gap-6">
 			{/* Month Picker placeholder */}
-			<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+			<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
 
 			{/* Account Statement Card */}
 			<AccountStatementCardSkeleton />
@@ -23,7 +23,7 @@ export default function ExtratoLoading() {
 				<div className="space-y-6 pt-4">
 					{/* Header */}
 					<div className="flex items-center justify-between">
-						<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
 					</div>
 
 					{/* Filtros */}
diff --git a/src/app/(dashboard)/accounts/loading.tsx b/src/app/(dashboard)/accounts/loading.tsx
index 8d41920..21b8a65 100644
--- a/src/app/(dashboard)/accounts/loading.tsx
+++ b/src/app/(dashboard)/accounts/loading.tsx
@@ -6,23 +6,23 @@ export default function ContasLoading() {
 			<div className="space-y-6 pt-4">
 				{/* Header */}
 				<div className="flex items-center justify-between">
-					<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
-					<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
+					<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
 				</div>
 
 				{/* Grid de contas */}
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{Array.from({ length: 6 }).map((_, i) => (
-						<div key={i} className="rounded-2xl border p-6 space-y-4">
+						<div key={i} className="rounded-md border p-6 space-y-4">
 							<div className="flex items-center justify-between">
-								<Skeleton className="size-10 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+								<Skeleton className="size-10 rounded-md bg-foreground/10" />
+								<Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
 							</div>
-							<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
-							<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
+							<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
 							<div className="flex gap-2">
-								<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
+								<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 							</div>
 						</div>
 					))}
diff --git a/src/app/(dashboard)/budgets/loading.tsx b/src/app/(dashboard)/budgets/loading.tsx
index e44ea8c..7edeb8f 100644
--- a/src/app/(dashboard)/budgets/loading.tsx
+++ b/src/app/(dashboard)/budgets/loading.tsx
@@ -8,53 +8,53 @@ export default function OrcamentosLoading() {
 	return (
 		<main className="flex flex-col gap-6">
 			{/* Month Picker placeholder */}
-			<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+			<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
 
 			<div className="space-y-6 pt-4">
 				{/* Header */}
 				<div className="flex items-center justify-between">
 					<div className="space-y-2">
-						<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
-						<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
+						<Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
 					</div>
-					<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
 				</div>
 
 				{/* Grid de cards de orçamentos */}
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{Array.from({ length: 6 }).map((_, i) => (
-						<div key={i} className="rounded-2xl border p-6 space-y-4">
+						<div key={i} className="rounded-md border p-6 space-y-4">
 							{/* Category com ícone */}
 							<div className="flex items-center gap-3">
-								<Skeleton className="size-10 rounded-2xl bg-foreground/10" />
+								<Skeleton className="size-10 rounded-md bg-foreground/10" />
 								<div className="flex-1 space-y-2">
-									<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-5 w-32 rounded-md bg-foreground/10" />
+									<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 								</div>
 							</div>
 
 							{/* Valor orçado */}
 							<div className="space-y-2 pt-4 border-t">
-								<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-7 w-32 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
+								<Skeleton className="h-7 w-32 rounded-md bg-foreground/10" />
 							</div>
 
 							{/* Valor gasto */}
 							<div className="space-y-2">
-								<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
+								<Skeleton className="h-6 w-28 rounded-md bg-foreground/10" />
 							</div>
 
 							{/* Barra de progresso */}
 							<div className="space-y-2">
 								<Skeleton className="h-2 w-full rounded-full bg-foreground/10" />
-								<Skeleton className="h-3 w-16 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-3 w-16 rounded-md bg-foreground/10" />
 							</div>
 
 							{/* Botões de ação */}
 							<div className="flex gap-2 pt-2">
-								<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-9 flex-1 rounded-md bg-foreground/10" />
+								<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
 							</div>
 						</div>
 					))}
diff --git a/src/app/(dashboard)/calendar/loading.tsx b/src/app/(dashboard)/calendar/loading.tsx
index 1234798..36536ed 100644
--- a/src/app/(dashboard)/calendar/loading.tsx
+++ b/src/app/(dashboard)/calendar/loading.tsx
@@ -8,15 +8,15 @@ export default function CalendarioLoading() {
 	return (
 		<main className="flex flex-col gap-3">
 			{/* Month Picker placeholder */}
-			<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+			<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
 
 			{/* Calendar Container */}
-			<div className="rounded-2xl border p-4 space-y-4">
+			<div className="rounded-md border p-4 space-y-4">
 				{/* Cabeçalho com dias da semana */}
 				<div className="grid grid-cols-7 gap-2 mb-4">
 					{["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"].map((day) => (
 						<div key={day} className="text-center">
-							<Skeleton className="h-4 w-12 mx-auto rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-4 w-12 mx-auto rounded-md bg-foreground/10" />
 						</div>
 					))}
 				</div>
@@ -26,17 +26,17 @@ export default function CalendarioLoading() {
 					{Array.from({ length: 42 }).map((_, i) => (
 						<div
 							key={i}
-							className="min-h-[100px] rounded-2xl border p-2 space-y-2"
+							className="min-h-[100px] rounded-md border p-2 space-y-2"
 						>
 							{/* Número do dia */}
-							<Skeleton className="h-5 w-6 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-5 w-6 rounded-md bg-foreground/10" />
 
 							{/* Indicadores de eventos (aleatório entre 0-3) */}
 							{i % 3 === 0 && (
 								<div className="space-y-1">
-									<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
 									{i % 5 === 0 && (
-										<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+										<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
 									)}
 								</div>
 							)}
@@ -49,7 +49,7 @@ export default function CalendarioLoading() {
 					{Array.from({ length: 4 }).map((_, i) => (
 						<div key={i} className="flex items-center gap-2">
 							<Skeleton className="size-3 rounded-full bg-foreground/10" />
-							<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 						</div>
 					))}
 				</div>
diff --git a/src/app/(dashboard)/cards/[cardId]/invoice/loading.tsx b/src/app/(dashboard)/cards/[cardId]/invoice/loading.tsx
index 5aed886..8cf0463 100644
--- a/src/app/(dashboard)/cards/[cardId]/invoice/loading.tsx
+++ b/src/app/(dashboard)/cards/[cardId]/invoice/loading.tsx
@@ -13,7 +13,7 @@ export default function FaturaLoading() {
 	return (
 		<main className="flex flex-col gap-6">
 			{/* Month Picker placeholder */}
-			<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+			<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
 
 			{/* Invoice Summary Card */}
 			<section className="flex flex-col gap-4">
@@ -25,8 +25,8 @@ export default function FaturaLoading() {
 				<div className="space-y-6 pt-4">
 					{/* Header */}
 					<div className="flex items-center justify-between">
-						<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
-						<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
+						<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
 					</div>
 
 					{/* Filtros */}
diff --git a/src/app/(dashboard)/cards/loading.tsx b/src/app/(dashboard)/cards/loading.tsx
index f914020..8616cc1 100644
--- a/src/app/(dashboard)/cards/loading.tsx
+++ b/src/app/(dashboard)/cards/loading.tsx
@@ -6,21 +6,21 @@ export default function CartoesLoading() {
 			<div className="space-y-6 pt-4">
 				{/* Header */}
 				<div className="flex items-center justify-between">
-					<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
-					<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
+					<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
 				</div>
 
 				{/* Grid de cartões */}
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{Array.from({ length: 6 }).map((_, i) => (
-						<div key={i} className="rounded-2xl border p-6 space-y-4">
+						<div key={i} className="rounded-md border p-6 space-y-4">
 							<div className="flex items-center justify-between">
-								<Skeleton className="size-10 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+								<Skeleton className="size-10 rounded-md bg-foreground/10" />
+								<Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
 							</div>
-							<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
-							<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
-							<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
+							<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
+							<Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
 						</div>
 					))}
 				</div>
diff --git a/src/app/(dashboard)/categories/history/loading.tsx b/src/app/(dashboard)/categories/history/loading.tsx
index d04b11d..d4933e2 100644
--- a/src/app/(dashboard)/categories/history/loading.tsx
+++ b/src/app/(dashboard)/categories/history/loading.tsx
@@ -25,7 +25,7 @@ export default function Loading() {
 					</div>
 
 					{/* Chart */}
-					<Skeleton className="h-[450px] w-full rounded-lg" />
+					<Skeleton className="h-[450px] w-full rounded-md" />
 				</CardContent>
 			</Card>
 		</main>
diff --git a/src/app/(dashboard)/categories/loading.tsx b/src/app/(dashboard)/categories/loading.tsx
index 4da52eb..0086417 100644
--- a/src/app/(dashboard)/categories/loading.tsx
+++ b/src/app/(dashboard)/categories/loading.tsx
@@ -7,8 +7,8 @@ export default function CategoriasLoading() {
 			<div className="w-full space-y-6">
 				{/* Header */}
 				<div className="flex items-center justify-between">
-					<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
-					<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
+					<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
 				</div>
 
 				{/* Tabs */}
@@ -17,7 +17,7 @@ export default function CategoriasLoading() {
 						{Array.from({ length: 3 }).map((_, i) => (
 							<Skeleton
 								key={i}
-								className="h-10 w-32 rounded-t-2xl bg-foreground/10"
+								className="h-10 w-32 rounded-t-md bg-foreground/10"
 							/>
 						))}
 					</div>
@@ -40,7 +40,7 @@ export default function CategoriasLoading() {
 										key={i}
 										className="flex items-center gap-4 border-b border-dashed px-2 py-3 last:border-b-0"
 									>
-										<Skeleton className="size-8 rounded-lg bg-foreground/10" />
+										<Skeleton className="size-8 rounded-md bg-foreground/10" />
 										<Skeleton
 											className="h-4 rounded bg-foreground/10"
 											style={{ width: `${100 + (i % 4) * 30}px` }}
diff --git a/src/app/(dashboard)/dashboard/loading.tsx b/src/app/(dashboard)/dashboard/loading.tsx
index 4ce2231..9648a10 100644
--- a/src/app/(dashboard)/dashboard/loading.tsx
+++ b/src/app/(dashboard)/dashboard/loading.tsx
@@ -1,18 +1,29 @@
-import { DashboardGridSkeleton } from "@/shared/components/skeletons";
+import {
+	DashboardGridSkeleton,
+	DashboardMetricsCardsSkeleton,
+} from "@/shared/components/skeletons";
 import { Skeleton } from "@/shared/components/ui/skeleton";
 
 export default function DashboardLoading() {
 	return (
 		<main className="flex flex-col gap-4">
-			<div className="space-y-2 px-1 py-2">
-				<Skeleton className="h-8 w-72 rounded-xl bg-foreground/10" />
-				<Skeleton className="h-5 w-56 rounded-xl bg-foreground/10" />
+			<div className="space-y-2 p-2">
+				<Skeleton className="h-7 w-56 rounded-md bg-foreground/10" />
+				<Skeleton className="h-4 w-48 rounded-md bg-foreground/10" />
 			</div>
 
-			{/* Month Picker skeleton */}
-			<Skeleton className="h-[56px] w-full rounded-xl bg-foreground/10" />
+			<div className="h-[60px] rounded-md border bg-card/60 p-4">
+				<div className="flex items-center justify-between gap-3">
+					<div className="flex items-center gap-2">
+						<Skeleton className="size-8 rounded-md bg-foreground/10" />
+						<Skeleton className="h-5 w-36 rounded-md bg-foreground/10" />
+						<Skeleton className="size-8 rounded-md bg-foreground/10" />
+					</div>
+					<Skeleton className="hidden h-8 w-24 rounded-md bg-foreground/10 sm:block" />
+				</div>
+			</div>
 
-			{/* Dashboard content skeleton (Section Cards + Widget Grid) */}
+			<DashboardMetricsCardsSkeleton />
 			<DashboardGridSkeleton />
 		</main>
 	);
diff --git a/src/app/(dashboard)/insights/loading.tsx b/src/app/(dashboard)/insights/loading.tsx
index 98d3014..183fdb9 100644
--- a/src/app/(dashboard)/insights/loading.tsx
+++ b/src/app/(dashboard)/insights/loading.tsx
@@ -9,26 +9,26 @@ export default function InsightsLoading() {
 			<div className="space-y-6 pt-4">
 				{/* Header */}
 				<div className="space-y-2">
-					<Skeleton className="h-10 w-64 rounded-2xl bg-foreground/10" />
-					<Skeleton className="h-6 w-96 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-10 w-64 rounded-md bg-foreground/10" />
+					<Skeleton className="h-6 w-96 rounded-md bg-foreground/10" />
 				</div>
 
 				{/* Grid de insights */}
 				<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
 					{Array.from({ length: 4 }).map((_, i) => (
-						<div key={i} className="rounded-2xl border p-6 space-y-4">
+						<div key={i} className="rounded-md border p-6 space-y-4">
 							<div className="flex items-start justify-between">
 								<div className="space-y-2 flex-1">
-									<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-4 w-3/4 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
+									<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
+									<Skeleton className="h-4 w-3/4 rounded-md bg-foreground/10" />
 								</div>
 								<Skeleton className="size-8 rounded-full bg-foreground/10" />
 							</div>
 							<div className="space-y-2">
-								<Skeleton className="h-3 w-full rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-3 w-full rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-3 w-2/3 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-3 w-full rounded-md bg-foreground/10" />
+								<Skeleton className="h-3 w-full rounded-md bg-foreground/10" />
+								<Skeleton className="h-3 w-2/3 rounded-md bg-foreground/10" />
 							</div>
 						</div>
 					))}
diff --git a/src/app/(dashboard)/notes/loading.tsx b/src/app/(dashboard)/notes/loading.tsx
index ddafb51..528d82c 100644
--- a/src/app/(dashboard)/notes/loading.tsx
+++ b/src/app/(dashboard)/notes/loading.tsx
@@ -10,33 +10,33 @@ export default function AnotacoesLoading() {
 			<div className="w-full space-y-6">
 				{/* Header */}
 				<div className="flex items-center justify-between">
-					<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
-					<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
+					<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
 				</div>
 
 				{/* Grid de cards de notas */}
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{Array.from({ length: 6 }).map((_, i) => (
-						<div key={i} className="rounded-2xl border p-4 space-y-3">
+						<div key={i} className="rounded-md border p-4 space-y-3">
 							{/* Título */}
-							<Skeleton className="h-6 w-3/4 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-6 w-3/4 rounded-md bg-foreground/10" />
 
 							{/* Conteúdo (3-4 linhas) */}
 							<div className="space-y-2">
-								<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-4 w-2/3 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
+								<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
+								<Skeleton className="h-4 w-2/3 rounded-md bg-foreground/10" />
 								{i % 2 === 0 && (
-									<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
 								)}
 							</div>
 
 							{/* Footer com data e ações */}
 							<div className="flex items-center justify-between pt-2 border-t">
-								<Skeleton className="h-3 w-24 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-3 w-24 rounded-md bg-foreground/10" />
 								<div className="flex gap-1">
-									<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
-									<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+									<Skeleton className="size-8 rounded-md bg-foreground/10" />
+									<Skeleton className="size-8 rounded-md bg-foreground/10" />
 								</div>
 							</div>
 						</div>
diff --git a/src/app/(dashboard)/payers/[payerId]/loading.tsx b/src/app/(dashboard)/payers/[payerId]/loading.tsx
index d13108e..1bb7800 100644
--- a/src/app/(dashboard)/payers/[payerId]/loading.tsx
+++ b/src/app/(dashboard)/payers/[payerId]/loading.tsx
@@ -7,63 +7,63 @@ import { Skeleton } from "@/shared/components/ui/skeleton";
 export default function PagadorDetailsLoading() {
 	return (
 		<main className="flex flex-col gap-6">
-			<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+			<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
 
 			<div className="space-y-6 pt-4">
 				<div className="flex gap-2 border-b">
-					<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
-					<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
-					<Skeleton className="h-10 w-36 rounded-t-2xl bg-foreground/10" />
+					<Skeleton className="h-10 w-32 rounded-t-md bg-foreground/10" />
+					<Skeleton className="h-10 w-32 rounded-t-md bg-foreground/10" />
+					<Skeleton className="h-10 w-36 rounded-t-md bg-foreground/10" />
 				</div>
 
-				<div className="rounded-2xl border p-6 space-y-4">
+				<div className="rounded-md border p-6 space-y-4">
 					<div className="flex items-start gap-4">
 						<Skeleton className="size-20 rounded-full bg-foreground/10" />
 
 						<div className="flex-1 space-y-3">
 							<div className="flex items-center gap-3">
-								<Skeleton className="h-7 w-48 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-7 w-48 rounded-md bg-foreground/10" />
+								<Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
 							</div>
 
-							<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
 
 							<div className="flex items-center gap-2">
 								<Skeleton className="size-2 rounded-full bg-foreground/10" />
-								<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
 							</div>
 						</div>
 
 						<div className="flex gap-2">
-							<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
-							<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
+							<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
 						</div>
 					</div>
 				</div>
 
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-					<div className="rounded-2xl border p-6 space-y-4 lg:col-span-2">
-						<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
+					<div className="rounded-md border p-6 space-y-4 lg:col-span-2">
+						<Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
 						<div className="grid grid-cols-3 gap-4 pt-4">
 							{Array.from({ length: 3 }).map((_, i) => (
 								<div key={i} className="space-y-2">
-									<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-7 w-full rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
+									<Skeleton className="h-7 w-full rounded-md bg-foreground/10" />
 								</div>
 							))}
 						</div>
 					</div>
 
 					{Array.from({ length: 4 }).map((_, i) => (
-						<div key={i} className="rounded-2xl border p-6 space-y-4">
+						<div key={i} className="rounded-md border p-6 space-y-4">
 							<div className="flex items-center gap-2">
-								<Skeleton className="size-5 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
+								<Skeleton className="size-5 rounded-md bg-foreground/10" />
+								<Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
 							</div>
 							<div className="space-y-3 pt-4">
-								<Skeleton className="h-5 w-full rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-5 w-3/4 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-5 w-1/2 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-5 w-full rounded-md bg-foreground/10" />
+								<Skeleton className="h-5 w-3/4 rounded-md bg-foreground/10" />
+								<Skeleton className="h-5 w-1/2 rounded-md bg-foreground/10" />
 							</div>
 						</div>
 					))}
diff --git a/src/app/(dashboard)/payers/loading.tsx b/src/app/(dashboard)/payers/loading.tsx
index 944cf9e..694a434 100644
--- a/src/app/(dashboard)/payers/loading.tsx
+++ b/src/app/(dashboard)/payers/loading.tsx
@@ -9,44 +9,44 @@ export default function PagadoresLoading() {
 		<main className="flex flex-col items-start gap-6">
 			<div className="w-full space-y-6">
 				{/* Input de código de compartilhamento */}
-				<div className="rounded-2xl border p-4 space-y-3">
-					<Skeleton className="h-5 w-64 rounded-2xl bg-foreground/10" />
+				<div className="rounded-md border p-4 space-y-3">
+					<Skeleton className="h-5 w-64 rounded-md bg-foreground/10" />
 					<div className="flex gap-2">
-						<Skeleton className="h-10 flex-1 rounded-2xl bg-foreground/10" />
-						<Skeleton className="h-10 w-32 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-10 flex-1 rounded-md bg-foreground/10" />
+						<Skeleton className="h-10 w-32 rounded-md bg-foreground/10" />
 					</div>
 				</div>
 
 				{/* Grid de cards de pagadores */}
 				<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{Array.from({ length: 6 }).map((_, i) => (
-						<div key={i} className="rounded-2xl border p-6 space-y-4">
+						<div key={i} className="rounded-md border p-6 space-y-4">
 							{/* Avatar + Nome + Badge */}
 							<div className="flex items-start gap-4">
 								<Skeleton className="size-16 rounded-full bg-foreground/10" />
 								<div className="flex-1 space-y-2">
-									<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-6 w-32 rounded-md bg-foreground/10" />
+									<Skeleton className="h-5 w-20 rounded-md bg-foreground/10" />
 								</div>
 								{i === 0 && (
-									<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-6 w-16 rounded-md bg-foreground/10" />
 								)}
 							</div>
 
 							{/* Email */}
-							<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
 
 							{/* Status */}
 							<div className="flex items-center gap-2">
 								<Skeleton className="size-2 rounded-full bg-foreground/10" />
-								<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
 							</div>
 
 							{/* Botões de ação */}
 							<div className="flex gap-2 pt-2 border-t">
-								<Skeleton className="h-9 flex-1 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-9 w-9 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-9 flex-1 rounded-md bg-foreground/10" />
+								<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
+								<Skeleton className="h-9 w-9 rounded-md bg-foreground/10" />
 							</div>
 						</div>
 					))}
diff --git a/src/app/(dashboard)/reports/card-usage/loading.tsx b/src/app/(dashboard)/reports/card-usage/loading.tsx
index 300a5be..04b874f 100644
--- a/src/app/(dashboard)/reports/card-usage/loading.tsx
+++ b/src/app/(dashboard)/reports/card-usage/loading.tsx
@@ -22,7 +22,7 @@ export default function Loading() {
 			{/* Cards grid */}
 			<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
 				{[1, 2, 3, 4].map((i) => (
-					<Skeleton key={i} className="h-16 w-full rounded-lg" />
+					<Skeleton key={i} className="h-16 w-full rounded-md" />
 				))}
 			</div>
 
diff --git a/src/app/(dashboard)/transactions/loading.tsx b/src/app/(dashboard)/transactions/loading.tsx
index 8fae457..4b51712 100644
--- a/src/app/(dashboard)/transactions/loading.tsx
+++ b/src/app/(dashboard)/transactions/loading.tsx
@@ -12,13 +12,13 @@ export default function LancamentosLoading() {
 	return (
 		<main className="flex flex-col gap-6">
 			{/* Month Picker placeholder */}
-			<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
+			<div className="h-[60px] animate-pulse rounded-md bg-foreground/10" />
 
 			<div className="space-y-6 pt-4">
 				{/* Header com título e botão */}
 				<div className="flex items-center justify-between">
-					<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />
-					<Skeleton className="h-10 w-40 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-8 w-48 rounded-md bg-foreground/10" />
+					<Skeleton className="h-10 w-40 rounded-md bg-foreground/10" />
 				</div>
 
 				{/* Filtros */}
diff --git a/src/shared/components/skeletons/account-statement-card-skeleton.tsx b/src/shared/components/skeletons/account-statement-card-skeleton.tsx
index 45b7712..717902f 100644
--- a/src/shared/components/skeletons/account-statement-card-skeleton.tsx
+++ b/src/shared/components/skeletons/account-statement-card-skeleton.tsx
@@ -1,43 +1,44 @@
 import { Skeleton } from "@/shared/components/ui/skeleton";
 
-/**
- * Skeleton para o card de resumo da conta (AccountStatementCard)
- * Reflete fielmente o layout: logo + nome + tipo + badge + métricas
- */
 export function AccountStatementCardSkeleton() {
 	return (
-		<div className="rounded-2xl border p-6 space-y-6">
-			{/* Header com logo, nome, tipo e badge */}
-			<div className="flex items-start justify-between">
-				<div className="flex items-start gap-4">
-					{/* Logo */}
-					<Skeleton className="size-12 rounded-2xl bg-foreground/10" />
+		<div className="rounded-xl border px-4 py-4 sm:px-5 sm:py-5">
+			<div className="flex flex-col gap-4">
+				{/* Linha 1 — identidade */}
+				<div className="flex items-center justify-between gap-3">
+					<div className="flex items-center gap-3">
+						<Skeleton className="size-12 shrink-0 rounded-full bg-foreground/10" />
+						<div className="space-y-1.5">
+							<Skeleton className="h-4 w-36 rounded bg-foreground/10" />
+							<Skeleton className="h-3 w-28 rounded bg-foreground/10" />
+						</div>
+					</div>
+					<Skeleton className="size-7 rounded bg-foreground/10" />
+				</div>
 
-					<div className="space-y-2">
-						{/* Nome da conta */}
-						<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
-						{/* Tipo de conta */}
-						<Skeleton className="h-4 w-32 rounded-2xl bg-foreground/10" />
+				{/* Linha 2 — saldo hero */}
+				<div className="space-y-2">
+					<Skeleton className="h-3 w-40 rounded bg-foreground/10" />
+					<Skeleton className="h-9 w-44 rounded bg-foreground/10" />
+					<div className="flex gap-2">
+						<Skeleton className="h-5 w-12 rounded-full bg-foreground/10" />
+						<Skeleton className="h-5 w-20 rounded bg-foreground/10" />
 					</div>
 				</div>
 
-				<div className="flex items-center gap-2">
-					{/* Badge de status */}
-					<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
-					{/* Botão de editar */}
-					<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+				{/* Linha 3 — breakdown */}
+				<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+					{Array.from({ length: 4 }).map((_, i) => (
+						<div
+							key={i}
+							className="rounded-md border border-border/60 px-3 py-2 space-y-1.5"
+						>
+							<Skeleton className="h-3 w-16 rounded bg-foreground/10" />
+							<Skeleton className="h-5 w-24 rounded bg-foreground/10" />
+						</div>
+					))}
 				</div>
 			</div>
-
-			{/* Métricas em grid */}
-			<div className="grid grid-cols-2 gap-4 pt-4 border-t md:grid-cols-4">
-				{Array.from({ length: 4 }).map((_, i) => (
-					<div key={i} className="space-y-2">
-						<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
-						<Skeleton className="h-6 w-32 rounded-2xl bg-foreground/10" />
-					</div>
-				))}
-			</div>
 		</div>
 	);
 }
diff --git a/src/shared/components/skeletons/category-report-skeleton.tsx b/src/shared/components/skeletons/category-report-skeleton.tsx
index 8dd013d..e808981 100644
--- a/src/shared/components/skeletons/category-report-skeleton.tsx
+++ b/src/shared/components/skeletons/category-report-skeleton.tsx
@@ -23,16 +23,16 @@ export function CategoryReportSkeleton() {
 				<div className="flex flex-wrap items-center justify-between gap-2">
 					<div className="flex flex-wrap items-center gap-2">
 						{/* Category MultiSelect */}
-						<Skeleton className="h-10 w-[200px] rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-10 w-[200px] rounded-md bg-foreground/10" />
 						{/* Start Period */}
-						<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-10 w-[150px] rounded-md bg-foreground/10" />
 						{/* End Period */}
-						<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-10 w-[150px] rounded-md bg-foreground/10" />
 						{/* Clear Button */}
-						<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
 					</div>
 					{/* Export Button */}
-					<Skeleton className="h-10 w-[120px] rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-10 w-[120px] rounded-md bg-foreground/10" />
 				</div>
 			</div>
 
@@ -40,8 +40,8 @@ export function CategoryReportSkeleton() {
 			<Tabs value="table" className="w-full">
 				<TabsList>
 					<div className="flex gap-1">
-						<Skeleton className="h-10 w-[100px] rounded-2xl bg-foreground/10" />
-						<Skeleton className="h-10 w-[100px] rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-10 w-[100px] rounded-md bg-foreground/10" />
+						<Skeleton className="h-10 w-[100px] rounded-md bg-foreground/10" />
 					</div>
 				</TabsList>
 
@@ -58,11 +58,11 @@ export function CategoryReportSkeleton() {
 								<div className="space-y-3">
 									{/* Category name with icon */}
 									<div className="flex items-center gap-2">
-										<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
-										<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
+										<Skeleton className="size-4 rounded-md bg-foreground/10" />
+										<Skeleton className="h-5 w-32 rounded-md bg-foreground/10" />
 									</div>
 									{/* Type badge */}
-									<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
 									{/* Values */}
 									<div className="space-y-2">
 										{Array.from({ length: 3 }).map((_, j) => (
@@ -70,8 +70,8 @@ export function CategoryReportSkeleton() {
 												key={j}
 												className="flex items-center justify-between"
 											>
-												<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
-												<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+												<Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
+												<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 											</div>
 										))}
 									</div>
@@ -87,17 +87,17 @@ export function CategoryReportSkeleton() {
 						<div className="space-y-4">
 							{/* Chart title area */}
 							<div className="flex items-center justify-between">
-								<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-6 w-48 rounded-md bg-foreground/10" />
+								<Skeleton className="h-8 w-32 rounded-md bg-foreground/10" />
 							</div>
 							{/* Chart area */}
-							<Skeleton className="h-[400px] w-full rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-[400px] w-full rounded-md bg-foreground/10" />
 							{/* Legend */}
 							<div className="flex flex-wrap gap-4 justify-center">
 								{Array.from({ length: 6 }).map((_, i) => (
 									<div key={i} className="flex items-center gap-2">
 										<Skeleton className="size-3 rounded-full bg-foreground/10" />
-										<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+										<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 									</div>
 								))}
 							</div>
@@ -124,17 +124,17 @@ function CategoryReportTableSkeleton() {
 					<TableRow>
 						{/* Category */}
 						<TableHead className="w-[280px] min-w-[280px]">
-							<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 						</TableHead>
 						{/* Period columns */}
 						{Array.from({ length: periodColumns }).map((_, i) => (
 							<TableHead key={i} className="text-right min-w-[120px]">
-								<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10 ml-auto" />
+								<Skeleton className="h-4 w-16 rounded-md bg-foreground/10 ml-auto" />
 							</TableHead>
 						))}
 						{/* Total */}
 						<TableHead className="text-right min-w-[120px]">
-							<Skeleton className="h-4 w-10 rounded-2xl bg-foreground/10 ml-auto" />
+							<Skeleton className="h-4 w-10 rounded-md bg-foreground/10 ml-auto" />
 						</TableHead>
 					</TableRow>
 				</TableHeader>
@@ -146,24 +146,24 @@ function CategoryReportTableSkeleton() {
 							<TableCell>
 								<div className="flex items-center gap-2">
 									<Skeleton className="size-2 rounded-full bg-foreground/10" />
-									<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-4 w-32 rounded-2xl bg-foreground/10" />
+									<Skeleton className="size-4 rounded-md bg-foreground/10" />
+									<Skeleton className="h-4 w-32 rounded-md bg-foreground/10" />
 								</div>
 							</TableCell>
 							{/* Period values */}
 							{Array.from({ length: periodColumns }).map((_, colIndex) => (
 								<TableCell key={colIndex} className="text-right">
 									<div className="flex flex-col items-end gap-1">
-										<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+										<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 										{colIndex > 0 && (
-											<Skeleton className="h-3 w-16 rounded-2xl bg-foreground/10" />
+											<Skeleton className="h-3 w-16 rounded-md bg-foreground/10" />
 										)}
 									</div>
 								</TableCell>
 							))}
 							{/* Total */}
 							<TableCell className="text-right">
-								<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
 							</TableCell>
 						</TableRow>
 					))}
@@ -173,17 +173,17 @@ function CategoryReportTableSkeleton() {
 					<TableRow>
 						{/* Total label */}
 						<TableCell className="font-bold">
-							<Skeleton className="h-5 w-16 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-5 w-16 rounded-md bg-foreground/10" />
 						</TableCell>
 						{/* Period totals */}
 						{Array.from({ length: periodColumns }).map((_, i) => (
 							<TableCell key={i} className="text-right">
-								<Skeleton className="h-5 w-24 rounded-2xl bg-foreground/10 ml-auto" />
+								<Skeleton className="h-5 w-24 rounded-md bg-foreground/10 ml-auto" />
 							</TableCell>
 						))}
 						{/* Grand total */}
 						<TableCell className="text-right">
-							<Skeleton className="h-5 w-28 rounded-2xl bg-foreground/10 ml-auto" />
+							<Skeleton className="h-5 w-28 rounded-md bg-foreground/10 ml-auto" />
 						</TableCell>
 					</TableRow>
 				</TableFooter>
diff --git a/src/shared/components/skeletons/dashboard-grid-skeleton.tsx b/src/shared/components/skeletons/dashboard-grid-skeleton.tsx
index 549bcec..919a404 100644
--- a/src/shared/components/skeletons/dashboard-grid-skeleton.tsx
+++ b/src/shared/components/skeletons/dashboard-grid-skeleton.tsx
@@ -1,17 +1,21 @@
-import { DashboardMetricsCardsSkeleton } from "./dashboard-metrics-cards-skeleton";
+import { Skeleton } from "@/shared/components/ui/skeleton";
 import { WidgetSkeleton } from "./widget-skeleton";
 
-/**
- * Skeleton completo para o dashboard grid
- * Mantém a mesma estrutura de layout do dashboard real
- */
 export function DashboardGridSkeleton() {
 	return (
 		<div className="@container/main space-y-4">
-			{/* Cards de métricas no topo */}
-			<DashboardMetricsCardsSkeleton />
+			<div className="flex flex-wrap items-center justify-between gap-2">
+				<div className="grid w-full grid-cols-3 gap-1 sm:flex sm:w-auto sm:items-center sm:gap-2">
+					<Skeleton className="h-12 rounded-md bg-foreground/10 sm:h-8 sm:w-28" />
+					<Skeleton className="h-12 rounded-md bg-foreground/10 sm:h-8 sm:w-30" />
+					<Skeleton className="h-12 rounded-md bg-foreground/10 sm:h-8 sm:w-28" />
+				</div>
+				<div className="flex w-full gap-2 sm:w-auto">
+					<Skeleton className="h-10 flex-1 rounded-md bg-foreground/10 sm:h-8 sm:w-34 sm:flex-none" />
+					<Skeleton className="h-10 flex-1 rounded-md bg-foreground/10 sm:h-8 sm:w-24 sm:flex-none" />
+				</div>
+			</div>
 
-			{/* Grid de widgets - mesmos breakpoints do dashboard real */}
 			<div className="grid grid-cols-1 gap-3 @4xl/main:grid-cols-2 @6xl/main:grid-cols-3">
 				{Array.from({ length: 9 }).map((_, i) => (
 					<WidgetSkeleton key={i} />
diff --git a/src/shared/components/skeletons/dashboard-metrics-cards-skeleton.tsx b/src/shared/components/skeletons/dashboard-metrics-cards-skeleton.tsx
index 49e5e60..c2d01c7 100644
--- a/src/shared/components/skeletons/dashboard-metrics-cards-skeleton.tsx
+++ b/src/shared/components/skeletons/dashboard-metrics-cards-skeleton.tsx
@@ -1,34 +1,35 @@
-import { Card, CardFooter, CardHeader } from "@/shared/components/ui/card";
+import {
+	Card,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/shared/components/ui/card";
 import { Skeleton } from "@/shared/components/ui/skeleton";
 
-/**
- * Skeleton fiel aos cards de métricas do dashboard (DashboardMetricsCards)
- * Mantém o mesmo layout de 4 colunas responsivo
- */
 export function DashboardMetricsCardsSkeleton() {
 	return (
-		<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+		<div className="grid grid-cols-1 gap-3 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
 			{Array.from({ length: 4 }).map((_, index) => (
-				<Card key={index} className="@container/card gap-2">
+				<Card
+					key={index}
+					className="@container/card flex flex-col justify-between min-h-32"
+				>
 					<CardHeader>
-						<div className="space-y-3">
-							{/* Título com ícone */}
-							<div className="flex items-center gap-1">
-								<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
-								<Skeleton className="h-5 w-20 rounded-2xl bg-foreground/10" />
-							</div>
-
-							{/* Valor principal */}
-							<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />
-
-							{/* Badge de tendência */}
-							<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+						<CardTitle className="flex items-center gap-1">
+							<Skeleton className="size-4 rounded-md bg-foreground/10" />
+							<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
+						</CardTitle>
+						<div className="flex items-baseline gap-2 mt-auto pt-4">
+							<Skeleton className="h-9 w-32 rounded-md bg-foreground/10" />
+							<Skeleton className="h-4 w-12 rounded-md bg-foreground/10" />
 						</div>
 					</CardHeader>
 
-					<CardFooter className="flex-col items-start gap-1.5 text-sm">
-						<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
-						<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+					<CardFooter className="text-sm">
+						<div className="flex items-center gap-1.5">
+							<Skeleton className="h-3 w-20 rounded-md bg-foreground/10" />
+							<Skeleton className="h-3 w-16 rounded-md bg-foreground/10" />
+						</div>
 					</CardFooter>
 				</Card>
 			))}
diff --git a/src/shared/components/skeletons/filter-skeleton.tsx b/src/shared/components/skeletons/filter-skeleton.tsx
index 9324e9e..ec815ca 100644
--- a/src/shared/components/skeletons/filter-skeleton.tsx
+++ b/src/shared/components/skeletons/filter-skeleton.tsx
@@ -10,11 +10,11 @@ export function FilterSkeleton() {
 			{Array.from({ length: 6 }).map((_, i) => (
 				<Skeleton
 					key={i}
-					className="h-10 w-[130px] rounded-2xl bg-foreground/10"
+					className="h-10 w-[130px] rounded-md bg-foreground/10"
 				/>
 			))}
-			<Skeleton className="h-10 w-[150px] rounded-2xl bg-foreground/10" />
-			<Skeleton className="h-8 w-16 rounded-2xl bg-foreground/10" />
+			<Skeleton className="h-10 w-[150px] rounded-md bg-foreground/10" />
+			<Skeleton className="h-8 w-16 rounded-md bg-foreground/10" />
 		</div>
 	);
 }
diff --git a/src/shared/components/skeletons/invoice-summary-card-skeleton.tsx b/src/shared/components/skeletons/invoice-summary-card-skeleton.tsx
index acc137f..8a19d93 100644
--- a/src/shared/components/skeletons/invoice-summary-card-skeleton.tsx
+++ b/src/shared/components/skeletons/invoice-summary-card-skeleton.tsx
@@ -6,58 +6,54 @@ import { Skeleton } from "@/shared/components/ui/skeleton";
  */
 export function InvoiceSummaryCardSkeleton() {
 	return (
-		<div className="rounded-2xl border p-6 space-y-6">
-			{/* Header com logo, nome, bandeira e badges */}
-			<div className="flex items-start justify-between">
-				<div className="flex items-start gap-4">
-					{/* Logo do cartão */}
-					<Skeleton className="size-12 rounded-2xl bg-foreground/10" />
-
-					<div className="space-y-2">
-						{/* Nome do cartão */}
-						<Skeleton className="h-6 w-48 rounded-2xl bg-foreground/10" />
-
-						<div className="flex items-center gap-2">
-							{/* Bandeira */}
-							<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
-							{/* Badge de status */}
-							<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
-						</div>
+		<div className="rounded-md border p-4 space-y-4 sm:p-5">
+			<div className="flex items-center justify-between gap-3">
+				<div className="flex min-w-0 items-center gap-3">
+					<Skeleton className="size-12 rounded-full bg-foreground/10" />
+					<div className="min-w-0 space-y-2">
+						<Skeleton className="h-4 w-40 rounded-md bg-foreground/10" />
+						<Skeleton className="h-3 w-28 rounded-md bg-foreground/10" />
 					</div>
 				</div>
-
-				{/* Botão de editar */}
-				<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+				<Skeleton className="size-8 rounded-md bg-foreground/10" />
 			</div>
 
-			{/* Informações da fatura */}
-			<div className="space-y-4 pt-4 border-t">
-				{/* Período e status */}
-				<div className="flex items-center justify-between">
-					<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
-					<Skeleton className="h-6 w-24 rounded-2xl bg-foreground/10" />
-				</div>
-
-				{/* Total da fatura */}
+			<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
 				<div className="space-y-2">
-					<Skeleton className="h-4 w-28 rounded-2xl bg-foreground/10" />
-					<Skeleton className="h-8 w-40 rounded-2xl bg-foreground/10" />
-				</div>
-
-				{/* Limite e utilização */}
-				<div className="grid grid-cols-2 gap-4 pt-4">
-					<div className="space-y-2">
-						<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
-						<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
-					</div>
-					<div className="space-y-2">
-						<Skeleton className="h-4 w-24 rounded-2xl bg-foreground/10" />
-						<Skeleton className="h-6 w-28 rounded-2xl bg-foreground/10" />
+					<Skeleton className="h-3 w-24 rounded-md bg-foreground/10" />
+					<Skeleton className="h-9 w-44 rounded-md bg-foreground/10" />
+					<div className="flex items-center gap-2">
+						<Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
+						<Skeleton className="h-4 w-28 rounded-md bg-foreground/10" />
 					</div>
 				</div>
 
-				{/* Botão de ação */}
-				<Skeleton className="h-10 w-full rounded-2xl bg-foreground/10" />
+				<div className="grid grid-cols-2 gap-2">
+					<Skeleton className="h-14 w-full rounded-md bg-foreground/10" />
+					<Skeleton className="h-14 w-full rounded-md bg-foreground/10" />
+				</div>
+			</div>
+
+			<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+				{Array.from({ length: 4 }).map((_, i) => (
+					<Skeleton
+						key={i}
+						className="h-14 w-full rounded-md bg-foreground/10"
+					/>
+				))}
+			</div>
+
+			<div className="rounded-md border border-dashed p-3">
+				<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+					<div className="space-y-2">
+						<Skeleton className="h-4 w-24 rounded-md bg-foreground/10" />
+						<Skeleton className="h-3 w-40 rounded-md bg-foreground/10" />
+					</div>
+					<div className="flex items-center gap-2">
+						<Skeleton className="h-9 w-32 rounded-md bg-foreground/10" />
+						<Skeleton className="size-8 rounded-md bg-foreground/10" />
+					</div>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/src/shared/components/skeletons/transactions-table-skeleton.tsx b/src/shared/components/skeletons/transactions-table-skeleton.tsx
index 0ab958d..fd66394 100644
--- a/src/shared/components/skeletons/transactions-table-skeleton.tsx
+++ b/src/shared/components/skeletons/transactions-table-skeleton.tsx
@@ -14,7 +14,7 @@ import {
  */
 export function TransactionsTableSkeleton() {
 	return (
-		<div className="rounded-2xl border">
+		<div className="rounded-md border">
 			<Table>
 				<TableHeader>
 					<TableRow>
@@ -24,8 +24,8 @@ export function TransactionsTableSkeleton() {
 						<TableHead className="w-[120px]">Valor</TableHead>
 						<TableHead className="w-[120px]">Condição</TableHead>
 						<TableHead className="w-[120px]">Pagamento</TableHead>
-						<TableHead className="w-[140px]">Payer</TableHead>
-						<TableHead className="w-[140px]">Category</TableHead>
+						<TableHead className="w-[140px]">Pagador</TableHead>
+						<TableHead className="w-[140px]">Categoria</TableHead>
 						<TableHead className="w-[140px]">Conta/Cartão</TableHead>
 						<TableHead className="w-[80px]">Ações</TableHead>
 					</TableRow>
@@ -34,45 +34,45 @@ export function TransactionsTableSkeleton() {
 					{Array.from({ length: 8 }).map((_, i) => (
 						<TableRow key={i}>
 							<TableCell>
-								<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-full rounded-md bg-foreground/10" />
 							</TableCell>
 							<TableCell>
-								<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
 							</TableCell>
 							<TableCell>
-								<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
 							</TableCell>
 							<TableCell>
-								<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 							</TableCell>
 							<TableCell>
-								<Skeleton className="h-6 w-16 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-6 w-16 rounded-md bg-foreground/10" />
 							</TableCell>
 							<TableCell>
-								<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+								<Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
 							</TableCell>
 							<TableCell>
 								<div className="flex items-center gap-2">
 									<Skeleton className="size-6 rounded-full bg-foreground/10" />
-									<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+									<Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
 								</div>
 							</TableCell>
 							<TableCell>
 								<div className="flex items-center gap-2">
-									<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-4 w-16 rounded-2xl bg-foreground/10" />
+									<Skeleton className="size-4 rounded-md bg-foreground/10" />
+									<Skeleton className="h-4 w-16 rounded-md bg-foreground/10" />
 								</div>
 							</TableCell>
 							<TableCell>
 								<div className="flex items-center gap-2">
-									<Skeleton className="size-6 rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-4 w-20 rounded-2xl bg-foreground/10" />
+									<Skeleton className="size-6 rounded-md bg-foreground/10" />
+									<Skeleton className="h-4 w-20 rounded-md bg-foreground/10" />
 								</div>
 							</TableCell>
 							<TableCell>
 								<div className="flex gap-1">
-									<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
-									<Skeleton className="size-8 rounded-2xl bg-foreground/10" />
+									<Skeleton className="size-8 rounded-md bg-foreground/10" />
+									<Skeleton className="size-8 rounded-md bg-foreground/10" />
 								</div>
 							</TableCell>
 						</TableRow>
diff --git a/src/shared/components/skeletons/widget-skeleton.tsx b/src/shared/components/skeletons/widget-skeleton.tsx
index 443bd56..8532f79 100644
--- a/src/shared/components/skeletons/widget-skeleton.tsx
+++ b/src/shared/components/skeletons/widget-skeleton.tsx
@@ -1,40 +1,40 @@
 import { Card, CardContent, CardHeader } from "@/shared/components/ui/card";
 import { Skeleton } from "@/shared/components/ui/skeleton";
 
-/**
- * Skeleton fiel ao WidgetCard
- * Usado enquanto widgets do dashboard estão carregando
- */
+const LINE_WIDTHS = ["w-full", "w-5/6", "w-4/5", "w-full", "w-3/4"] as const;
+const SUBLABEL_WIDTHS = ["w-24", "w-16", "w-20", "w-28", "w-16"] as const;
+
 export function WidgetSkeleton() {
 	return (
 		<Card className="relative h-auto gap-0 py-0 md:h-custom-height-card md:overflow-hidden">
 			<CardHeader className="border-b px-6 py-4">
 				<div className="flex w-full items-start justify-between">
 					<div className="min-w-0 space-y-1.5">
-						{/* Title com ícone */}
 						<div className="flex items-center gap-2">
-							<Skeleton className="size-4 rounded-2xl bg-foreground/10" />
-							<Skeleton className="h-5 w-32 rounded-2xl bg-foreground/10" />
+							<Skeleton className="size-4 rounded-md bg-foreground/10" />
+							<Skeleton className="h-5 w-32 rounded-md bg-foreground/10" />
 						</div>
-						{/* Subtitle */}
-						<Skeleton className="h-3 w-48 rounded-2xl bg-foreground/10" />
+						<Skeleton className="h-3 w-48 rounded-md bg-foreground/10" />
 					</div>
 				</div>
 			</CardHeader>
 
 			<CardContent className="min-h-0 flex-1 overflow-hidden px-6 py-4">
 				<div className="flex flex-col gap-3">
-					{/* Simula 5 linhas de conteúdo */}
 					{Array.from({ length: 5 }).map((_, i) => (
 						<div key={i} className="flex items-center justify-between gap-3">
 							<div className="flex flex-1 items-center gap-3">
-								<Skeleton className="size-10 rounded-2xl bg-foreground/10" />
+								<Skeleton className="size-10 rounded-md bg-foreground/10" />
 								<div className="flex-1 space-y-2">
-									<Skeleton className="h-4 w-full rounded-2xl bg-foreground/10" />
-									<Skeleton className="h-3 w-24 rounded-2xl bg-foreground/10" />
+									<Skeleton
+										className={`h-4 ${LINE_WIDTHS[i % LINE_WIDTHS.length]} rounded-md bg-foreground/10`}
+									/>
+									<Skeleton
+										className={`h-3 ${SUBLABEL_WIDTHS[i % SUBLABEL_WIDTHS.length]} rounded-md bg-foreground/10`}
+									/>
 								</div>
 							</div>
-							<Skeleton className="h-6 w-20 rounded-2xl bg-foreground/10" />
+							<Skeleton className="h-6 w-20 rounded-md bg-foreground/10" />
 						</div>
 					))}
 				</div>