5 files changed, 22 insertions, 16 deletions
diff --git a/src/frontend/app/i18n/locales/en-GB.json b/src/frontend/app/i18n/locales/en-GB.json
index 0c4f24f..8863634 100644
--- a/src/frontend/app/i18n/locales/en-GB.json
+++ b/src/frontend/app/i18n/locales/en-GB.json
@@ -156,6 +156,7 @@
   "navbar": {
     "home": "Home",
     "map": "Map",
+    "stops": "Stops",
     "planner": "Planner",
     "routes": "Routes",
     "favourites": "Favourites"
diff --git a/src/frontend/app/i18n/locales/es-ES.json b/src/frontend/app/i18n/locales/es-ES.json
index ff517a2..bc62a8f 100644
--- a/src/frontend/app/i18n/locales/es-ES.json
+++ b/src/frontend/app/i18n/locales/es-ES.json
@@ -156,6 +156,7 @@
   "navbar": {
     "home": "Inicio",
     "map": "Mapa",
+    "stops": "Paradas",
     "planner": "Planificador",
     "routes": "Rutas",
     "favourites": "Favoritos"
diff --git a/src/frontend/app/i18n/locales/gl-ES.json b/src/frontend/app/i18n/locales/gl-ES.json
index 2d02e67..e339d06 100644
--- a/src/frontend/app/i18n/locales/gl-ES.json
+++ b/src/frontend/app/i18n/locales/gl-ES.json
@@ -149,6 +149,7 @@
   "navbar": {
     "home": "Inicio",
     "map": "Mapa",
+    "stops": "Paradas",
     "planner": "Planificador",
     "routes": "Rutas",
     "favourites": "Favoritos"
diff --git a/src/frontend/app/routes/home.tsx b/src/frontend/app/routes/home.tsx
index ff415fd..973a534 100644
--- a/src/frontend/app/routes/home.tsx
+++ b/src/frontend/app/routes/home.tsx
@@ -235,15 +235,7 @@ export default function StopList() {
           type="search"
           placeholder={randomPlaceholder}
           onChange={handleStopSearch}
-          className="
-            w-full px-4 py-2 text-sm
-            border border-border rounded-xl
-            bg-surface
-            text-text
-            placeholder:text-muted placeholder:opacity-80
-            focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent
-            transition-all duration-200
-          "
+          className="w-full px-4 py-3 rounded-xl border border-border bg-surface text-text focus:outline-none focus:ring-2 focus:ring-primary shadow-sm placeholder-gray-500"
         />
       </div>
 
diff --git a/src/frontend/app/routes/routes.tsx b/src/frontend/app/routes/routes.tsx
index 0c575d2..5f02b70 100644
--- a/src/frontend/app/routes/routes.tsx
+++ b/src/frontend/app/routes/routes.tsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { fetchRoutes } from "~/api/transit";
@@ -9,13 +10,20 @@ import "../tailwind-full.css";
 export default function RoutesPage() {
   const { t } = useTranslation();
   usePageTitle(t("navbar.routes", "Rutas"));
+  const [searchQuery, setSearchQuery] = useState("");
 
   const { data: routes, isLoading } = useQuery({
     queryKey: ["routes"],
     queryFn: () => fetchRoutes(["tussa", "vitrasa", "tranvias", "feve"]),
   });
 
-  const routesByAgency = routes?.reduce(
+  const filteredRoutes = routes?.filter(
+    (route) =>
+      route.shortName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      route.longName?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const routesByAgency = filteredRoutes?.reduce(
     (acc, route) => {
       const agency = route.agencyName || t("routes.unknown_agency", "Otros");
       if (!acc[agency]) acc[agency] = [];
@@ -27,12 +35,15 @@ export default function RoutesPage() {
 
   return (
     <div className="container mx-auto px-4 py-6">
-      <p className="mb-6 text-gray-700 dark:text-gray-300">
-        {t(
-          "routes.description",
-          "A continuación se muestra una lista de las rutas de autobús urbano con sus respectivos trayectos."
-        )}
-      </p>
+      <div className="mb-6">
+        <input
+          type="text"
+          placeholder={t("routes.search_placeholder", "Buscar rutas...")}
+          className="w-full px-4 py-3 rounded-xl border border-border bg-surface text-text focus:outline-none focus:ring-2 focus:ring-primary shadow-sm placeholder-gray-500"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+      </div>
 
       {isLoading && (
         <div className="flex justify-center py-12">