@@ -66,26 +66,10 @@
 }
 
 .station-amenities {
-  display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: repeat(3, 1fr);
-
-  @include media-breakpoint-down(lg) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  @include media-breakpoint-down(sm) {
-    grid-gap: unset;
-    grid-template-columns: repeat(1, 1fr);
-  }
-
   .c-descriptive-link {
     height: auto;
     padding: 0;
 
-    @include media-breakpoint-down(sm) {
-      margin-bottom: 1rem;
-    }
-
     &[disabled] {
       background-color: $gray-lightest;
       border-color: $gray-light;
 
@@ -239,7 +239,7 @@ describe("algoliaSource", () => {
         algoliaQuery: query,
         algoliaIndexesWithParams: indexes
       }),
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": "" },
       method: "POST"
     });
   });
 
@@ -163,10 +163,14 @@ export const algoliaSource = (
         : AlgoliaItemTemplate
     },
     getItems() {
+      const token = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute("content");
       return fetch("/search/query", {
         method: "POST",
         headers: {
-          "Content-Type": "application/json"
+          "Content-Type": "application/json",
+          "X-CSRF-Token": token || ""
         },
         body: JSON.stringify({
           algoliaQuery: query,
 
@@ -141,7 +141,9 @@ config :laboratory,
     {:in_seat_transfers, "In Seat Transfers",
      "Show in-seat transfers available for certain trips"},
     {:line_diagram, "New Line Diagram",
-     "Adds a tab to the schedules page for the new line diagram"}
+     "Adds a tab to the schedules page for the new line diagram"},
+    {:new_stop_page, "New Stop Page Layout",
+     "Reconfigures the stop page and replaces the React view"}
   ],
   cookie: [
     # one month,
 
@@ -9,7 +9,14 @@ defimpl Algolia.Object, for: Stops.Stop do
   @stops_repo Application.compile_env!(:dotcom, :repo_modules)[:stops]
 
   def object_id(stop), do: "stop-" <> stop.id
-  def url(stop), do: Util.site_path(:stop_path, [:show, stop])
+
+  def url(stop),
+    do:
+      DotcomWeb.Router.Helpers.live_path(
+        DotcomWeb.Endpoint,
+        DotcomWeb.StopInformationLive,
+        stop.id
+      )
 
   def data(stop) do
     routes_for_stop = @routes_repo.by_stop(stop.id, include: "")
 
@@ -300,7 +300,13 @@ defmodule DotcomWeb.Components do
   """
   def dialog_modal(assigns) do
     ~H"""
-    <dialog id={@modal_id} class="mbta-modal min-w-[40%] min-h-[50%]" closedby="any" data-open={@open}>
+    <dialog
+      id={@modal_id}
+      class="mbta-modal min-w-[40%] min-h-[50%]"
+      closedby="any"
+      data-open={@open}
+      phx-update="ignore"
+    >
       <form method="dialog" class="flex justify-between gap-md items-center">
         <h1 :if={@modal_heading} class="h4 m-0">
           {render_slot(@modal_heading)}
 
@@ -18,20 +18,26 @@ defmodule DotcomWeb.OldSiteRedirectController do
   """
   def schedules_and_maps(conn, %{"path" => [_mode, "lines", "stations" | _], "stopId" => stop_id}) do
     case @stops_repo.old_id_to_gtfs_id(stop_id) do
-      nil -> permanent_redirect(conn, mode_path(conn, :index))
-      gtfs_id -> permanent_redirect(conn, stop_path(conn, :show, gtfs_id))
+      nil ->
+        permanent_redirect(conn, mode_path(conn, :index))
+
+      gtfs_id ->
+        permanent_redirect(
+          conn,
+          live_path(DotcomWeb.Endpoint, DotcomWeb.StopInformationLive, gtfs_id)
+        )
     end
   end
 
   def schedules_and_maps(conn, %{"path" => [mode, "lines", "stations" | _]}) do
-    redirect_mode =
+    redirect_path =
       case mode do
-        "rail" -> :commuter_rail
-        "boats" -> :ferry
-        _ -> :subway
+        "rail" -> commuter_rail_stops_path(DotcomWeb.Endpoint, :list)
+        "boats" -> ferry_stops_path(DotcomWeb.Endpoint, :list)
+        _ -> subway_stops_path(DotcomWeb.Endpoint, :list)
       end
 
-    permanent_redirect(conn, stop_path(conn, :show, redirect_mode))
+    permanent_redirect(conn, redirect_path)
   end
 
   def schedules_and_maps(conn, %{"path" => ["rail" | _]}) do
 
@@ -6,21 +6,14 @@ defmodule DotcomWeb.StopController do
   use Dotcom.Gettext.Sigils
   use DotcomWeb, :controller
 
-  import Alerts.Alert, only: [global_banner_alert?: 1, routewide?: 1]
-  import Dotcom.Alerts.StartTime, only: [active_in_next_n_days?: 3]
-
-  alias Alerts.Repo, as: AlertsRepo
   alias Dotcom.TransitNearMe
   alias Leaflet.MapData.Polyline
   alias Plug.Conn
   alias RoutePatterns.RoutePattern
   alias Routes.Route
   alias Services.Service
   alias Stops.Stop
-  alias Util.AndOr
 
-  @alerts_repo Application.compile_env!(:dotcom, :repo_modules)[:alerts]
-  @facilities_repo Application.compile_env!(:dotcom, :repo_modules)[:facilities]
   @route_patterns_repo Application.compile_env!(:dotcom, :repo_modules)[:route_patterns]
   @routes_repo Application.compile_env!(:dotcom, :repo_modules)[:routes]
   @stops_repo Application.compile_env!(:dotcom, :repo_modules)[:stops]
@@ -31,10 +24,11 @@ defmodule DotcomWeb.StopController do
         }
 
   def index(conn, _params) do
-    redirect(conn, to: stop_path(conn, :show, :subway))
+    redirect(conn, to: subway_stops_path(conn, :list))
   end
 
-  def show(conn, %{"id" => mode}) when mode in ["subway", "commuter-rail", "ferry"] do
+  def list(conn, _params) do
+    ["stops", mode] = conn.path_info
     mode_atom = Route.type_atom(mode)
     {mattapan, stop_info} = get_stop_info()
 
@@ -49,90 +43,6 @@ defmodule DotcomWeb.StopController do
     |> render("index.html")
   end
 
-  @spec show(Plug.Conn.t(), map()) :: Plug.Conn.t()
-  def show(conn, %{"id" => stop_id} = params) do
-    stop =
-      stop_id
-      |> URI.decode_www_form()
-      |> @stops_repo.get()
-
-    if stop do
-      if @stops_repo.has_parent?(stop) do
-        conn
-        |> redirect(to: stop_path(conn, :show, @stops_repo.get_parent(stop)))
-        |> halt()
-      else
-        routes_by_stop = @routes_repo.by_stop(stop_id, include: "stop.connecting_stops")
-        one_way_fares = Fares.Format.one_way_ranges(routes_by_stop)
-        accessible? = accessible?(stop)
-
-        amenities =
-          @facilities_repo.get_for_stop(stop_id)
-          |> Dotcom.StopAmenity.from_stop_facilities()
-
-        conn
-        |> assign(:breadcrumbs, breadcrumbs(stop, routes_by_stop))
-        |> meta_description(stop, routes_by_stop)
-        |> assign_alerts()
-        |> assign_stop_banner_alerts(routes_by_stop |> Enum.map(& &1.id), conn.assigns.date_time)
-        |> render("show.html", %{
-          stop: stop,
-          amenity_param: Map.get(params, "amenity", "") |> String.to_atom(),
-          one_way_fares: one_way_fares,
-          routes_by_stop: routes_by_stop,
-          parking_amenity: Enum.find(amenities, &(&1.type == :parking)),
-          bike_amenity: Enum.find(amenities, &(&1.type == :bike)),
-          elevator_amenity: Enum.find(amenities, &(&1.type == :elevator)),
-          escalator_amenity: Enum.find(amenities, &(&1.type == :escalator)),
-          accessibility_amenity: Enum.find(amenities, &(&1.type == :accessibility)),
-          fare_amenity: Enum.find(amenities, &(&1.type == :fare)),
-          accessible?: accessible?
-        })
-      end
-    else
-      check_cms_or_404(conn)
-    end
-  end
-
-  defp assign_stop_banner_alerts(conn, route_ids, date_time) do
-    all_alerts_for_stop = conn.assigns.alerts
-
-    all_routewide_alerts =
-      @alerts_repo.by_route_ids(route_ids, date_time)
-      |> Enum.filter(&routewide?/1)
-
-    banner_alerts =
-      (all_alerts_for_stop ++ all_routewide_alerts)
-      |> Enum.filter(&banner_alert?(&1, date_time))
-
-    assign(conn, :banner_alerts, banner_alerts)
-  end
-
-  defp banner_alert?(alert, now) do
-    !global_banner_alert?(alert) &&
-      banner_alert_active_effect?(alert) &&
-      active_in_next_n_days?(alert, 7, now)
-  end
-
-  defp banner_alert_active_effect?(alert) do
-    alert.effect in [
-      :access_issue,
-      :detour,
-      :dock_closure,
-      :dock_issue,
-      :service_change,
-      :elevator_closure,
-      :notice,
-      :shuttle,
-      :station_closure,
-      :station_issue,
-      :stop_closure,
-      :stop_moved,
-      :stop_shoveling,
-      :suspension
-    ]
-  end
-
   @spec get(Conn.t(), map) :: Conn.t()
   def get(conn, %{"id" => stop_id}) do
     json(conn, @stops_repo.get(stop_id))
@@ -240,15 +150,6 @@ defmodule DotcomWeb.StopController do
     Map.put(route_pattern, :representative_trip_polyline, polyline)
   end
 
-  @doc "Redirect users who type in a URL with a slash to the correct URL"
-  def stop_with_slash_redirect(conn, %{"path" => path}) do
-    real_id = Enum.join(path, "/")
-
-    conn
-    |> redirect(to: stop_path(conn, :show, real_id))
-    |> halt
-  end
-
   @spec get_stop_info :: {DetailedStopGroup.t(), [DetailedStopGroup.t()]}
   defp get_stop_info do
     [:subway, :commuter_rail, :ferry]
@@ -325,87 +226,4 @@ defmodule DotcomWeb.StopController do
 
   @spec includes_predictions?(TransitNearMe.headsign_data()) :: boolean
   defp includes_predictions?(%{times: times}), do: Enum.any?(times, &(&1.prediction != nil))
-
-  defp assign_alerts(%{assigns: %{alerts: alerts}} = conn) do
-    assign(conn, :all_alerts_count, length(alerts))
-  end
-
-  defp assign_alerts(%{path_params: %{"id" => id}} = conn) do
-    stop_id = URI.decode_www_form(id)
-    alerts = @alerts_repo.by_stop_id(stop_id)
-
-    conn
-    |> assign(:alerts, alerts)
-    |> assign(:all_alerts_count, length(alerts))
-  end
-
-  defp assign_alerts(conn) do
-    assign(conn, :alerts, AlertsRepo.all(conn.assigns.date_time))
-  end
-
-  @spec breadcrumbs(Stop.t(), [Route.t()]) :: [Util.Breadcrumb.t()]
-  def breadcrumbs(%Stop{name: name}, []) do
-    breadcrumbs_for_station_type(nil, name)
-  end
-
-  def breadcrumbs(%Stop{station?: true, name: name}, routes) do
-    routes
-    |> Enum.min_by(& &1.type)
-    |> Route.path_atom()
-    |> breadcrumbs_for_station_type(name)
-  end
-
-  def breadcrumbs(%Stop{name: name}, _routes) do
-    breadcrumbs_for_station_type(nil, name)
-  end
-
-  defp breadcrumbs_for_station_type(breadcrumb_tab, name)
-       when breadcrumb_tab in ~w(subway commuter-rail ferry)a do
-    [
-      Breadcrumb.build(~t"Stations", stop_path(DotcomWeb.Endpoint, :show, breadcrumb_tab)),
-      Breadcrumb.build(name)
-    ]
-  end
-
-  defp breadcrumbs_for_station_type(_, name) do
-    [Breadcrumb.build(name)]
-  end
-
-  @spec meta_description(Conn.t(), Stop.t(), [Route.t()]) :: Conn.t()
-  defp meta_description(conn, stop, routes),
-    do:
-      assign(
-        conn,
-        :meta_description,
-        gettext(
-          "Station serving MBTA %{lines} lines%{location}.",
-          lines: lines(routes),
-          location: location(stop)
-        )
-      )
-
-  @spec lines([Route.t()]) :: iolist
-  defp lines(routes) do
-    routes
-    |> Enum.map(&(&1.type |> Route.type_atom() |> Route.type_name()))
-    |> Enum.uniq()
-    |> AndOr.join(:and)
-  end
-
-  @spec location(Stop.t()) :: String.t()
-  defp location(stop) do
-    if stop.address && stop.address != "" do
-      gettext(" at %{address}", address: stop.address)
-    else
-      ""
-    end
-  end
-
-  # A stop is accessible if it is labeled as accessible in GTFS or it doesn't have a parent stop and it serves a bus route.
-  def accessible?(stop) do
-    routes = @routes_repo.by_stop(stop.id)
-
-    Enum.member?(stop.accessibility, "accessible") ||
-      (is_nil(stop.parent_id) && Enum.any?(routes, &(&1.type === 3)))
-  end
 end
@@ -10,7 +10,10 @@ defmodule DotcomWeb.Endpoint do
                    secure: true
 
   socket("/socket", DotcomWeb.UserSocket)
-  socket("/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]])
+
+  socket("/live", Phoenix.LiveView.Socket,
+    websocket: [connect_info: [:user_agent, session: @session_options]]
+  )
 
   # Serve at "/" the static files from "priv/static" directory.
   #