diff --git a/lib/src/views/HorariosView.dart b/lib/src/views/HorariosView.dart
new file mode 100644
index 0000000..be26a8d
--- /dev/null
+++ b/lib/src/views/HorariosView.dart
@@ -0,0 +1,148 @@
+import 'package:flutter/material.dart';
+
+class HorariosView extends StatelessWidget {
+  const HorariosView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    const color = Color(0xFF0F0D38);
+
+    final List<Map<String, String>> rutas = List.generate(
+      6,
+      (index) => {
+        'colonia': 'Colonia',
+        'ruta': 'Ruta',
+        'horario': '(horario estimado)',
+      },
+    );
+
+    return Scaffold(
+      backgroundColor: Colors.white,
+
+      appBar: AppBar(
+        backgroundColor: color,
+        title: const Text(
+          'Horarios',
+          style: TextStyle(
+            color: Colors.white,
+            fontSize: 32,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        centerTitle: true,
+        elevation: 0,
+      ),
+
+      body: ListView.builder(
+        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 24),
+        itemCount: rutas.length,
+        itemBuilder: (context, index) {
+          final item = rutas[index];
+          return Padding(
+            padding: const EdgeInsets.symmetric(vertical: 16.0),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      item['colonia']!,
+                      style: const TextStyle(
+                        fontSize: 22,
+                        fontWeight: FontWeight.bold,
+                        color: Colors.black,
+                      ),
+                    ),
+                    Text(
+                      item['ruta']!,
+                      style: const TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold,
+                        color: Colors.black,
+                      ),
+                    ),
+                  ],
+                ),
+                // Bloque Derecho: Horario estimado
+                Text(
+                  item['horario']!,
+                  style: const TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.black,
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+
+      // 3. BARRA INFERIOR (Menú de navegación personalizado)
+      bottomNavigationBar: Container(
+        height: 90,
+        color: colorVerde,
+        child: Stack(
+          alignment: Alignment.center,
+          clipBehavior:
+              Clip.none, // Permite que el botón central sobresalga hacia arriba
+          children: [
+            // Iconos de los lados
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
+              children: [
+                // Botón de Inicio (Izquierda)
+                IconButton(
+                  icon: const Icon(
+                    Icons.home_outlined,
+                    color: Colors.white,
+                    size: 40,
+                  ),
+                  onPressed: () {},
+                ),
+                // Espacio invisible en medio para que no choque con el botón central grande
+                const SizedBox(width: 80),
+                // Botón de Notificaciones (Derecha)
+                IconButton(
+                  icon: const Icon(
+                    Icons.notifications_none,
+                    color: Colors.white,
+                    size: 40,
+                  ),
+                  onPressed: () {},
+                ),
+              ],
+            ),
+
+            // Botón Central Flotante y personalizado (Mapa/Ruta)
+            Positioned(
+              top: -25, // Lo empuja hacia arriba fuera de la barra verde
+              child: Container(
+                width: 85,
+                height: 85,
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  shape: BoxShape.circle,
+                  border: Border.all(color: colorVerde, width: 4),
+                  boxShadow: [
+                    BoxShadow(
+                      color: Colors.black.withOpacity(0.3),
+                      blurRadius: 8,
+                      offset: const Offset(0, 4),
+                    ),
+                  ],
+                ),
+                child: const Icon(
+                  Icons.alt_route_rounded, // Icono similar de caminos/puntos
+                  color: colorVerde,
+                  size: 45,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}