diff --git a/susconecta/app/paciente/page.tsx b/susconecta/app/paciente/page.tsx
index f76067b..0d23ec2 100644
--- a/susconecta/app/paciente/page.tsx
+++ b/susconecta/app/paciente/page.tsx
@@ -14,6 +14,7 @@ import { SimpleThemeToggle } from '@/components/simple-theme-toggle'
 import Link from 'next/link'
 import ProtectedRoute from '@/components/ProtectedRoute'
 import { useAuth } from '@/hooks/useAuth'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 // Simulação de internacionalização básica
 const strings = {
   dashboard: 'Dashboard',
@@ -145,8 +146,7 @@ export default function PacientePage() {
     },
   ];
 
-  function formatDatePt(dateStr: string) {
-    const date = new Date(dateStr);
+  function formatDatePt(date: Date) {
     return date.toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
   }
 
@@ -163,65 +163,222 @@ export default function PacientePage() {
   const consultasDoDia = consultasFicticias.filter(c => c.data === todayStr);
 
   function Consultas() {
+    const [tipoConsulta, setTipoConsulta] = useState<'teleconsulta' | 'presencial'>('teleconsulta')
+    const [especialidade, setEspecialidade] = useState('cardiologia')
+    const [localizacao, setLocalizacao] = useState('')
+    const [mostrarAgendadas, setMostrarAgendadas] = useState(false)
+    const hoverPrimaryClass = "transition duration-200 hover:bg-[#2563eb] hover:text-white focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97]"
+    const activeToggleClass = "w-full transition duration-200 focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97] bg-[#2563eb] text-white hover:bg-[#2563eb] hover:text-white"
+    const inactiveToggleClass = "w-full transition duration-200 bg-slate-50 text-[#2563eb] border border-[#2563eb]/30 hover:bg-slate-100 hover:text-[#2563eb] dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:border-white/20"
+    const hoverPrimaryIconClass = "rounded-xl bg-white text-[#1e293b] border border-black/10 shadow-[0_2px_8px_rgba(0,0,0,0.03)] transition duration-200 hover:bg-[#2563eb] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2563eb] dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:shadow-none dark:hover:bg-[#2563eb] dark:hover:text-white"
+    const today = new Date(); today.setHours(0, 0, 0, 0);
+    const selectedDate = new Date(currentDate); selectedDate.setHours(0, 0, 0, 0);
+    const isSelectedDateToday = selectedDate.getTime() === today.getTime()
+
     return (
       <section className="bg-card shadow-md rounded-lg border border-border p-6">
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-2xl font-bold">Minhas Consultas</h2>
-        </div>
-        {/* Navegação de Data */}
-        <div className="flex items-center justify-between mb-6 p-4 bg-blue-50 rounded-lg dark:bg-muted">
-          <div className="flex items-center space-x-4">
-            <Button variant="outline" size="sm" onClick={() => navigateDate('prev')} className="p-2"><ChevronLeft className="h-4 w-4" /></Button>
-            <h3 className="text-lg font-medium text-foreground">{formatDatePt(todayStr)}</h3>
-            <Button variant="outline" size="sm" onClick={() => navigateDate('next')} className="p-2"><ChevronRight className="h-4 w-4" /></Button>
-            <Button variant="outline" size="sm" onClick={goToToday} className="ml-4 px-3 py-1 text-sm">Hoje</Button>
-          </div>
-          <div className="text-sm text-gray-600 dark:text-muted-foreground">
-            {consultasDoDia.length} consulta{consultasDoDia.length !== 1 ? 's' : ''} agendada{consultasDoDia.length !== 1 ? 's' : ''}
-          </div>
-        </div>
-        {/* Lista de Consultas do Dia */}
-        <div className="space-y-4">
-          {consultasDoDia.length === 0 ? (
-            <div className="text-center py-8 text-gray-600 dark:text-muted-foreground">
-              <Calendar className="h-12 w-12 mx-auto mb-4 text-gray-400 dark:text-muted-foreground/50" />
-              <p className="text-lg mb-2">Nenhuma consulta agendada para este dia</p>
-              <p className="text-sm">Você pode agendar uma nova consulta</p>
-              <Button variant="default" className="mt-4">Agendar Consulta</Button>
+        <div className="max-w-3xl mx-auto space-y-8">
+          <header className="text-center space-y-2">
+            <h2 className="text-3xl font-semibold text-foreground">Agende sua próxima consulta</h2>
+            <p className="text-muted-foreground">Escolha o formato ideal, selecione a especialidade e encontre o profissional perfeito para você.</p>
+          </header>
+
+          <div className="space-y-6 rounded-lg border border-border bg-muted/40 p-6">
+            <div className="space-y-3">
+              <Label>Tipo de consulta</Label>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <Button
+                  type="button"
+                  className={tipoConsulta === 'teleconsulta' ? activeToggleClass : inactiveToggleClass}
+                  aria-pressed={tipoConsulta === 'teleconsulta'}
+                  onClick={() => setTipoConsulta('teleconsulta')}
+                >
+                  Teleconsulta
+                </Button>
+                <Button
+                  type="button"
+                  className={tipoConsulta === 'presencial' ? activeToggleClass : inactiveToggleClass}
+                  aria-pressed={tipoConsulta === 'presencial'}
+                  onClick={() => setTipoConsulta('presencial')}
+                >
+                  Consulta no local
+                </Button>
+              </div>
             </div>
-          ) : (
-            consultasDoDia.map(consulta => (
-              <div key={consulta.id} className="border-l-4 border-t border-r border-b p-4 rounded-lg shadow-sm bg-card border-border">
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-center">
-                  <div className="flex items-center">
-                    <div className="w-3 h-3 rounded-full mr-3" style={{ backgroundColor: consulta.status === 'Confirmada' ? '#22c55e' : consulta.status === 'Pendente' ? '#fbbf24' : '#ef4444' }}></div>
-                    <div>
-                      <div className="font-medium flex items-center">
-                        <Stethoscope className="h-4 w-4 mr-2 text-gray-500 dark:text-muted-foreground" />
-                        {consulta.medico}
+
+            <div className="grid gap-6 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label>Especialidade</Label>
+                <Select value={especialidade} onValueChange={setEspecialidade}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Selecione a especialidade" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="cardiologia">Cardiologia</SelectItem>
+                    <SelectItem value="pediatria">Pediatria</SelectItem>
+                    <SelectItem value="dermatologia">Dermatologia</SelectItem>
+                    <SelectItem value="ortopedia">Ortopedia</SelectItem>
+                    <SelectItem value="ginecologia">Ginecologia</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label>Localização (opcional)</Label>
+                <div className="relative">
+                  <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    value={localizacao}
+                    onChange={event => setLocalizacao(event.target.value)}
+                    placeholder="Cidade ou estado"
+                    className="pl-9"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <Button className={`w-full md:w-auto md:self-start ${hoverPrimaryClass}`}>Pesquisar</Button>
+          </div>
+
+          <div className="text-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="transition duration-200 bg-white text-[#1e293b] border border-black/10 rounded-md shadow-[0_2px_6px_rgba(0,0,0,0.03)] hover:bg-[#2563eb] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2563eb] dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:hover:bg-[#2563eb] dark:hover:text-white"
+              onClick={() => setMostrarAgendadas(true)}
+            >
+              Ver consultas agendadas
+            </Button>
+          </div>
+        </div>
+
+        <Dialog open={mostrarAgendadas} onOpenChange={open => setMostrarAgendadas(open)}>
+          <DialogContent className="max-w-3xl space-y-6 sm:max-h-[85vh] overflow-hidden">
+            <DialogHeader>
+              <DialogTitle className="text-2xl font-semibold text-foreground">Consultas agendadas</DialogTitle>
+              <DialogDescription>Gerencie suas consultas confirmadas, pendentes ou canceladas.</DialogDescription>
+            </DialogHeader>
+
+            <div className="flex flex-col gap-4 rounded-lg border border-border bg-muted/40 p-4 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={() => navigateDate('prev')}
+                  aria-label="Dia anterior"
+                  className={`group shadow-sm ${hoverPrimaryIconClass}`}
+                >
+                  <ChevronLeft className="h-4 w-4 transition group-hover:text-white" />
+                </Button>
+                <span className="text-lg font-medium text-foreground">{formatDatePt(currentDate)}</span>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={() => navigateDate('next')}
+                  aria-label="Próximo dia"
+                  className={`group shadow-sm ${hoverPrimaryIconClass}`}
+                >
+                  <ChevronRight className="h-4 w-4 transition group-hover:text-white" />
+                </Button>
+                {isSelectedDateToday && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={goToToday}
+                    disabled
+                    className="border border-border text-foreground focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97] hover:bg-transparent hover:text-foreground disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-foreground"
+                  >
+                    Hoje
+                  </Button>
+                )}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                {consultasDoDia.length} consulta{consultasDoDia.length !== 1 ? 's' : ''} agendada{consultasDoDia.length !== 1 ? 's' : ''}
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-4 overflow-y-auto max-h-[70vh] pr-1 sm:pr-2">
+              {consultasDoDia.length === 0 ? (
+                <div className="text-center py-10 text-muted-foreground">
+                  <Calendar className="h-12 w-12 mx-auto mb-4 opacity-60" />
+                  <p className="text-lg font-medium">Nenhuma consulta agendada para este dia</p>
+                  <p className="text-sm">Use a busca para marcar uma nova consulta.</p>
+                </div>
+              ) : (
+                consultasDoDia.map(consulta => (
+                  <div
+                    key={consulta.id}
+                    className="rounded-xl border border-black/5 dark:border-white/10 bg-card shadow-[0_4px_12px_rgba(0,0,0,0.05)] dark:shadow-none p-5"
+                  >
+                    <div className="grid gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.4fr)] items-start">
+                      <div className="flex items-start gap-3">
+                        <span
+                          className="mt-1 h-3 w-3 flex-shrink-0 rounded-full"
+                          style={{ backgroundColor: consulta.status === 'Confirmada' ? '#22c55e' : consulta.status === 'Pendente' ? '#fbbf24' : '#ef4444' }}
+                        />
+                        <div className="space-y-1">
+                          <div className="font-medium flex items-center gap-2 text-foreground">
+                            <Stethoscope className="h-4 w-4 text-muted-foreground" />
+                            {consulta.medico}
+                          </div>
+                          <p className="text-sm text-muted-foreground break-words">
+                            {consulta.especialidade} • {consulta.local}
+                          </p>
+                        </div>
                       </div>
-                      <div className="text-sm text-gray-600 dark:text-muted-foreground">
-                        {consulta.especialidade} • {consulta.local}
+
+                      <div className="flex items-center gap-2 text-foreground">
+                        <Clock className="h-4 w-4 text-muted-foreground" />
+                        <span className="font-medium">{consulta.hora}</span>
+                      </div>
+
+                      <div className="flex items-center">
+                        <span className={`px-3 py-1 rounded-full text-sm font-medium text-white ${consulta.status === 'Confirmada' ? 'bg-green-600' : consulta.status === 'Pendente' ? 'bg-yellow-500' : 'bg-red-600'}`}>
+                          {consulta.status}
+                        </span>
+                      </div>
+
+                      <div className="flex flex-wrap items-center justify-end gap-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="border border-[#2563eb]/40 text-[#2563eb] hover:bg-transparent hover:text-[#2563eb] focus-visible:ring-2 focus-visible:ring-[#2563eb]/40 active:scale-[0.97]"
+                        >
+                          Detalhes
+                        </Button>
+                        {consulta.status !== 'Cancelada' && (
+                          <Button type="button" variant="secondary" size="sm" className={hoverPrimaryClass}>
+                            Reagendar
+                          </Button>
+                        )}
+                        {consulta.status !== 'Cancelada' && (
+                          <Button
+                            type="button"
+                            variant="destructive"
+                            size="sm"
+                            className="transition duration-200 hover:bg-[#dc2626] focus-visible:ring-2 focus-visible:ring-[#dc2626]/60 active:scale-[0.97]"
+                          >
+                            Cancelar
+                          </Button>
+                        )}
                       </div>
                     </div>
                   </div>
-                  <div className="flex items-center">
-                    <Clock className="h-4 w-4 mr-2 text-gray-500 dark:text-muted-foreground" />
-                    <span className="font-medium">{consulta.hora}</span>
-                  </div>
-                  <div className="flex items-center">
-                    <div className={`px-3 py-1 rounded-full text-sm font-medium text-white ${consulta.status === 'Confirmada' ? 'bg-green-600' : consulta.status === 'Pendente' ? 'bg-yellow-500' : 'bg-red-600'}`}>{consulta.status}</div>
-                  </div>
-                  <div className="flex items-center justify-end space-x-2">
-                    <Button variant="outline" size="sm">Detalhes</Button>
-                    {consulta.status !== 'Cancelada' && <Button variant="secondary" size="sm">Reagendar</Button>}
-                    {consulta.status !== 'Cancelada' && <Button variant="destructive" size="sm">Cancelar</Button>}
-                  </div>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
+                ))
+              )}
+            </div>
+
+            <DialogFooter className="justify-center border-t border-border pt-4 mt-2">
+              <Button variant="outline" onClick={() => setMostrarAgendadas(false)} className="w-full sm:w-auto">
+                Fechar
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </section>
     )
   }
diff --git a/susconecta/next-env.d.ts b/susconecta/next-env.d.ts
index 830fb59..40c3d68 100644
--- a/susconecta/next-env.d.ts
+++ b/susconecta/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.