diff --git a/components/DateRangePicker.tsx b/components/DateRangePicker.tsx
index 9d9280e..e495764 100644
--- a/components/DateRangePicker.tsx
+++ b/components/DateRangePicker.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Calendar } from 'lucide-react';
 import { DateRange } from '../types';
 
@@ -8,8 +8,15 @@ interface DateRangePickerProps {
 }
 
 export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange }) => {
+  const [startType, setStartType] = useState<'text' | 'date'>('text');
+  const [endType, setEndType] = useState<'text' | 'date'>('text');
+
   const formatDateForInput = (date: Date) => {
-    return date.toISOString().split('T')[0];
+    return date.toISOString().split('T')[0]; // YYYY-MM-DD for <input type="date">
+  };
+
+  const formatDateForDisplay = (date: Date) => {
+    return date.toLocaleDateString('pt-BR'); // DD/MM/YYYY for visual text
   };
 
   const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -27,21 +34,27 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onC
   };
 
   return (
-    <div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors">
+    <div className="flex items-center gap-2 bg-white dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg shadow-sm hover:border-zinc-300 dark:hover:border-dark-border transition-colors">
       <Calendar size={16} className="text-zinc-500 dark:text-dark-muted shrink-0" />
       <div className="flex items-center gap-2 text-sm">
         <input
-          type="date"
-          value={formatDateForInput(dateRange.start)}
+          type={startType}
+          value={startType === 'date' ? formatDateForInput(dateRange.start) : formatDateForDisplay(dateRange.start)}
+          onFocus={() => setStartType('date')}
+          onBlur={() => setStartType('text')}
           onChange={handleStartChange}
-          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-28 md:w-auto"
+          lang="pt-BR"
+          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-24 sm:w-28 md:w-auto"
         />
         <span className="text-zinc-400 dark:text-dark-muted">até</span>
         <input
-          type="date"
-          value={formatDateForInput(dateRange.end)}
+          type={endType}
+          value={endType === 'date' ? formatDateForInput(dateRange.end) : formatDateForDisplay(dateRange.end)}
+          onFocus={() => setEndType('date')}
+          onBlur={() => setEndType('text')}
           onChange={handleEndChange}
-          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-28 md:w-auto"
+          lang="pt-BR"
+          className="bg-transparent text-zinc-700 dark:text-zinc-200 font-medium outline-none cursor-pointer w-24 sm:w-28 md:w-auto"
         />
       </div>
     </div>