diff --git a/app/Http/Controllers/AppointmentController.php b/app/Http/Controllers/AppointmentController.php
new file mode 100644
index 0000000..17baf46
--- /dev/null
+++ b/app/Http/Controllers/AppointmentController.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers;
+use App\Models\Appointment;
+use Illuminate\Http\Request;
+
+class AppointmentController extends Controller
+{
+    public function show(Appointment $appointment)
+{
+    return view('appointments.show', compact('appointment'));
+}
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index d2e80fa..b9da903 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -70,4 +70,7 @@
 
 .fc-daygrid-event-dot {
     display: none;
-}
\ No newline at end of file
+}
+
+import '@fullcalendar/core/index.css'
+import '@fullcalendar/daygrid/index.css'
\ No newline at end of file
diff --git a/resources/js/app.js b/resources/js/app.js
index 5aff602..814fd37 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', function () {
         },
         */
 
-        eventClick: function(info) {
+        eventClick: function (info) {
 
             const evento = info.event
 
@@ -55,9 +55,18 @@ document.addEventListener('DOMContentLoaded', function () {
 
             modal.classList.remove("hidden")
 
+            const statusMap = {
+                pending: 'Pendiente',
+                confirmed: 'Confirmado',
+                in_progress: 'En progreso',
+                ready: 'Listo',
+                delivered: 'Entregado'
+            }
+
+            const estado = statusMap[evento.extendedProps.status] ?? 'desconocido'
+
             document.getElementById("modalTitle").innerText =
-                evento.extendedProps.description + " - " +
-                evento.extendedProps.status
+                evento.extendedProps.description + " - " + estado
 
             const fecha = evento.start
 
@@ -68,21 +77,22 @@ document.addEventListener('DOMContentLoaded', function () {
             })
 
             document.getElementById("modalDate").innerText =
-                "Hora: " + hora 
-                
-            document.getElementById("viewEventBtn").href =
-                "/appointments/" + evento.id
+                "Hora: " + hora
+
+            const url = window.appointmentShowTemplate.replace(':id', evento.id)
+
+            document.getElementById("viewEventBtn").href = url
         },
 
         events: window.appointments ?? [],
 
-        eventDidMount: function(info) {
+        eventDidMount: function (info) {
 
             const status = info.event.extendedProps.status
 
             const colors = {
-                pending: '#f59e0b',
-                in_progress: '#ef4444',
+                pending: '#ef4444',
+                in_progress: '#f59e0b',
                 completed: '#22c55e',
                 ready: '#22c55e',
                 delivered: '#22c55e'
diff --git a/resources/views/agenda.blade.php b/resources/views/agenda.blade.php
index c64017c..5161d60 100644
--- a/resources/views/agenda.blade.php
+++ b/resources/views/agenda.blade.php
@@ -1,5 +1,4 @@
 <x-layout title="Agenda">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/main.min.css">
 
     <div class="flex w-full justify-between items-end mb-6">
 
@@ -21,6 +20,9 @@
     <script>
         window.appointments = @json($appointments);
     </script>
+    <script>
+    window.appointmentShowTemplate = "{{ route('appointments.show', ':id') }}";
+    </script>
     
     <div id="calendar" class="w-full border-2 rounded-xl py-3 px-3 bg-neutral-900/50 border border-neutral-800"></div>
 
@@ -42,7 +44,6 @@
             </button>
 
             <a id="viewEventBtn"
-               href=""
                class="px-4 py-2 bg-neon-lime hover:bg-[#b3e600] text-neutral-900 font-bold rounded-lg">
                 Ver turno
             </a>
diff --git a/resources/views/appointments/show.blade.php b/resources/views/appointments/show.blade.php
new file mode 100644
index 0000000..f5574aa
--- /dev/null
+++ b/resources/views/appointments/show.blade.php
@@ -0,0 +1,107 @@
+<x-layout title="Detalle del Turno">
+
+    <x-section-header subtitle="Gestor de Turnos" title="Detalle del" highlight="Turno" />
+
+    <div class="flex justify-end mb-6">
+        <a href="{{ route('agenda') }}"
+            class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] uppercase tracking-wide text-xs flex items-center gap-2">
+            ← Volver a Agenda
+        </a>
+    </div>
+
+    <div class="rounded-2xl shadow-lg p-8 space-y-6 bg-neutral-900/50 border-neutral-800 border-2">
+
+        @php
+            $statusMap = [
+                'pending' => 'Pendiente',
+                'confirmed' => 'Confirmado',
+                'in_progress' => 'En progreso',
+                'ready' => 'Listo',
+                'delivered' => 'Entregado',
+            ];
+
+            $translatedStatus = $statusMap[$appointment->status] ?? 'Desconocido';
+
+            $colorMap = [
+                'pending' => '#ef4444',
+                'in_progress' => '#f59e0b',
+                'completed' => '#22c55e',
+                'ready' => '#22c55e',
+                'delivered' => '#22c55e',
+            ];
+            
+            $color = $colorMap[$appointment->status] ?? '#3b82f6';
+
+        @endphp
+
+        {{-- Estado --}}
+        <div class="text-center">
+            <span class="text-lg uppercase font-bold text-gray-400 tracking-wide">
+                Estado
+            </span>
+
+            <div class="mt-2">
+                <span class="px-3 py-1 rounded-full text-lg font-semibold text-black"
+                    style="background-color: {{ $color }}">
+                    {{ $translatedStatus }}
+                </span>
+            </div>
+        </div>
+
+        {{-- Información principal --}}
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+            <div>
+                <p class="text-lg uppercase font-bold text-gray-400">Cliente</p>
+                <p class="text-lg font-semibold text-white">
+                    {{ $appointment->client->name }}
+                </p>
+            </div>
+
+            <div>
+                <p class="text-lg uppercase font-bold text-gray-400">Teléfono</p>
+                <p class="text-white">
+                    {{ $appointment->contact_phone ?? '-' }}
+                </p>
+            </div>
+
+            <div>
+                <p class="text-lg uppercase font-bold text-gray-400">Fecha pactada de entrega</p>
+                <p class="text-white">
+                    {{ $appointment->scheduled_at->format('d/m/Y') }}
+                </p>
+            </div>
+
+            <div>
+                <p class="text-lg uppercase font-bold text-gray-400">Hora</p>
+                <p class="text-white">
+                    {{ $appointment->scheduled_at->format('H:i') }}
+                </p>
+            </div>
+
+            <div class="md:col-span-2">
+                <p class="text-lg uppercase font-bold text-gray-400">Modelo de Bicicleta</p>
+                <p class="text-white">
+                    {{ $appointment->bike_model ?? '-' }}
+                </p>
+            </div>
+
+            <div class="md:col-span-2">
+                <p class="text-lg uppercase font-bold text-gray-400">Problema Reportado</p>
+                <p class="text-white">
+                    {{ $appointment->problem_description }}
+                </p>
+            </div>
+
+            <div class="md:col-span-2">
+                <p class="text-lg uppercase font-bold text-gray-400">Notas</p>
+                <p class="text-white">
+                    {{ $appointment->notes ?? '-' }}
+                </p>
+            </div>
+
+        </div>
+
+    </div>
+
+</x-layout>
diff --git a/routes/web.php b/routes/web.php
index 8d67948..4b5f9ae 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -11,6 +11,7 @@ use App\Http\Controllers\ProductosController;
 use App\Http\Controllers\RegisterController;
 use App\Http\Controllers\TallerController;
 use App\Http\Controllers\AgendaController;
+use App\Http\Controllers\AppointmentController;
 use App\Models\Product;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Session;
@@ -49,11 +50,14 @@ Route::middleware(['auth'])->group(function () {
         Route::post('/', 'store')->name('store');
         Route::patch('/{appointment}/status', 'updateStatus')->name('updateStatus');
     });
+    Route::get('/agenda', [AgendaController::class, 'index'])->name('agenda');
+    Route::get('/appointments/{appointment}', [AppointmentController::class, 'show'])
+    ->name('appointments.show');
 });
 
 
 Route::get('/productos/{id}/vistaUsuario', [ProductosController::class,'vistaUsuario'])->name('productos.vistaUsuario');
 
 
-Route::get('/agenda', [AgendaController::class, 'index'])->name('agenda');
+