diff --git a/src/components/reports/hours-report.tsx b/src/components/reports/hours-report.tsx
index 4edc609..7207494 100644
--- a/src/components/reports/hours-report.tsx
+++ b/src/components/reports/hours-report.tsx
@@ -15,8 +15,9 @@ import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { usePersistentCompanyFilter } from "@/lib/use-company-filter"
 import { Progress } from "@/components/ui/progress"
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
+import type { ChartConfig } from "@/components/ui/chart"
 import { formatHoursCompact } from "@/lib/utils"
 
 type HoursItem = {
@@ -32,11 +33,13 @@ type HoursItem = {
 const topClientsChartConfig = {
   internas: {
     label: "Horas internas",
+    color: "var(--chart-1)",
   },
   externas: {
     label: "Horas externas",
+    color: "var(--chart-2)",
   },
-}
+} satisfies ChartConfig
 
 export function HoursReport() {
   const [timeRange, setTimeRange] = useState("90d")
@@ -95,6 +98,19 @@ export function HoursReport() {
       }),
     [filtered]
   )
+  const topClientsData = useMemo(
+    () =>
+      filteredWithComputed
+        .slice()
+        .sort((a, b) => b.total - a.total)
+        .slice(0, 10)
+        .map((row) => ({
+          name: row.name,
+          internas: row.internal,
+          externas: row.external,
+        })),
+    [filteredWithComputed]
+  )
 
   return (
     <div className="space-y-6">
@@ -107,24 +123,26 @@ export function HoursReport() {
           {!filteredWithComputed || filteredWithComputed.length === 0 ? (
             <p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">Sem dados para o período.</p>
           ) : (
-            <ChartContainer config={topClientsChartConfig} className="aspect-auto h-[260px] w-full">
+            <ChartContainer config={topClientsChartConfig} className="aspect-auto h-[320px] w-full">
               <BarChart
-                data={filteredWithComputed
-                  .slice()
-                  .sort((a, b) => b.total - a.total)
-                  .slice(0, 10)
-                  .map((r) => ({ name: r.name, internas: r.internal, externas: r.external }))}
-                margin={{ top: 8, left: 20, right: 20, bottom: 56 }}
-                barCategoryGap={32}
+                data={topClientsData}
+                layout="vertical"
+                margin={{ top: 16, right: 24, bottom: 16, left: 0 }}
+                barCategoryGap={12}
               >
-                <CartesianGrid vertical={false} />
-                <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={24} interval={0} angle={-30} height={80} />
-                <Bar dataKey="internas" stackId="a" fill="var(--chart-1)" radius={[4, 4, 0, 0]} barSize={28} />
-                <Bar dataKey="externas" stackId="a" fill="var(--chart-2)" radius={[4, 4, 0, 0]} barSize={28} />
+                <CartesianGrid horizontal vertical={false} />
+                <XAxis
+                  type="number"
+                  tickLine={false}
+                  axisLine={false}
+                  tickFormatter={(value) => formatHoursCompact(Number(value))}
+                />
+                <YAxis dataKey="name" type="category" tickLine={false} axisLine={false} width={180} />
                 <ChartTooltip
                   content={
                     <ChartTooltipContent
-                      className="w-[200px]"
+                      className="w-[220px]"
+                      labelFormatter={(value) => <span className="font-semibold text-foreground">{String(value)}</span>}
                       formatter={(value, name) => (
                         <>
                           <span className="text-muted-foreground">
@@ -136,6 +154,9 @@ export function HoursReport() {
                     />
                   }
                 />
+                <ChartLegend content={<ChartLegendContent />} />
+                <Bar dataKey="internas" stackId="hours" fill="var(--color-internas)" radius={[8, 0, 0, 8]} barSize={18} />
+                <Bar dataKey="externas" stackId="hours" fill="var(--color-externas)" radius={[0, 8, 8, 0]} barSize={18} />
               </BarChart>
             </ChartContainer>
           )}