diff --git a/__tests__/components/__snapshots__/date-time-options.js.snap b/__tests__/components/__snapshots__/date-time-options.js.snap
index 9e8214cdc..37415059c 100644
--- a/__tests__/components/__snapshots__/date-time-options.js.snap
+++ b/__tests__/components/__snapshots__/date-time-options.js.snap
@@ -28,8 +28,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="12a"
         timeFormat="h:mm a"
       >
@@ -145,8 +151,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="12p"
         timeFormat="h:mm a"
       >
@@ -262,8 +274,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="133"
         timeFormat="h:mm a"
       >
@@ -379,8 +397,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="133p"
         timeFormat="h:mm a"
       >
@@ -496,8 +520,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="135p"
         timeFormat="h:mm a"
       >
@@ -613,8 +643,14 @@ exports[`components > form > call-taker > date time options should correctly han
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="1335"
         timeFormat="h:mm a"
       >
@@ -730,8 +766,14 @@ exports[`components > form > call-taker > date time options should render 1`] =
     >
       <DateTimeOptions
         date="2022-11-17"
-        dispatch={[Function]}
         homeTimezone="America/Los_Angeles"
+        importedUpdateItineraryFilter={[Function]}
+        sort={
+          Object {
+            "direction": "ASC",
+            "type": "BEST",
+          }
+        }
         time="12:34"
         timeFormat="h:mm a"
       >
diff --git a/__tests__/components/date-time-options.js b/__tests__/components/date-time-options.js
index d2737d38f..931e05de5 100644
--- a/__tests__/components/date-time-options.js
+++ b/__tests__/components/date-time-options.js
@@ -1,3 +1,4 @@
+import '../test-utils/mock-window-matchMedia'
 import '../test-utils/mock-window-url'
 import {
   getMockInitialState,
diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
index a3a1b7bc5..65c9368a3 100644
--- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
+++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -46,7 +46,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-liccgK dBKtUQ nearby-view base-color-bg"
+            className="sc-cuWdqJ cZFGA-D nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -85,7 +85,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
               }
             >
               <ol
-                className="sc-iumJeC jmbulg base-color-bg"
+                className="sc-dcwqsv bgYBAJ base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4080,7 +4080,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-liccgK dBKtUQ nearby-view base-color-bg"
+            className="sc-cuWdqJ cZFGA-D nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -4119,7 +4119,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
               }
             >
               <ol
-                className="sc-iumJeC jmbulg base-color-bg"
+                className="sc-dcwqsv bgYBAJ base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4236,15 +4236,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -4331,7 +4331,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4350,7 +4350,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -4692,15 +4692,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -4787,7 +4787,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4806,7 +4806,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -5148,15 +5148,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -5243,7 +5243,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -5262,7 +5262,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -7794,7 +7794,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -10116,11 +10116,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -10702,7 +10702,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -10721,7 +10721,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -12159,7 +12159,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -12336,7 +12336,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -12384,7 +12384,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -12422,7 +12422,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -12571,10 +12571,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12585,7 +12585,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12597,7 +12597,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12733,10 +12733,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12747,7 +12747,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12759,7 +12759,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -13164,7 +13164,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13212,7 +13212,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -13250,7 +13250,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -13399,10 +13399,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -13413,7 +13413,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -13425,7 +13425,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -13922,7 +13922,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13970,7 +13970,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -14008,7 +14008,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -14157,10 +14157,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -14171,7 +14171,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -14183,7 +14183,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -16072,7 +16072,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -17590,11 +17590,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -17975,7 +17975,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -17994,7 +17994,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -19030,7 +19030,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -19142,7 +19142,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19190,7 +19190,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ blvspg"
+                                                    className="sc-fTACoA NVRqI"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -19228,7 +19228,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -19843,7 +19843,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19891,7 +19891,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ blvspg"
+                                                    className="sc-fTACoA NVRqI"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -19929,7 +19929,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -20347,7 +20347,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -20395,7 +20395,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ blvspg"
+                                                    className="sc-fTACoA NVRqI"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -20433,7 +20433,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -21106,15 +21106,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -21201,7 +21201,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -21220,7 +21220,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -21562,15 +21562,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -21657,7 +21657,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -21676,7 +21676,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -22018,15 +22018,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -22113,7 +22113,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -22132,7 +22132,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -24972,7 +24972,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -27602,11 +27602,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -28265,7 +28265,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -28284,7 +28284,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -29876,7 +29876,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -30053,7 +30053,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30101,7 +30101,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -30139,7 +30139,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -30288,10 +30288,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -30302,7 +30302,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -30314,7 +30314,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -30450,10 +30450,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -30464,7 +30464,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -30476,7 +30476,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -30894,7 +30894,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30942,7 +30942,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -30980,7 +30980,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -31129,10 +31129,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -31143,7 +31143,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -31155,7 +31155,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -31448,10 +31448,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -31462,7 +31462,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -31474,7 +31474,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -31657,7 +31657,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -31705,7 +31705,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -31743,7 +31743,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -32358,7 +32358,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -32406,7 +32406,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="988"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -32444,7 +32444,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -32803,15 +32803,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -32898,7 +32898,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32917,7 +32917,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -33259,15 +33259,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -33354,7 +33354,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -33373,7 +33373,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -33715,15 +33715,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -33810,7 +33810,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -33829,7 +33829,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -34171,15 +34171,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -34266,7 +34266,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -34285,7 +34285,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -34627,15 +34627,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -34722,7 +34722,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -34741,7 +34741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -36469,7 +36469,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -37987,11 +37987,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -38372,7 +38372,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -38391,7 +38391,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -39427,7 +39427,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -39539,7 +39539,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -39587,7 +39587,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -39625,7 +39625,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -39774,10 +39774,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -39788,7 +39788,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -39800,7 +39800,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -40362,7 +40362,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -40410,7 +40410,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -40448,7 +40448,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -41063,7 +41063,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -41111,7 +41111,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="984"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -41149,7 +41149,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -41508,15 +41508,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -41603,7 +41603,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -41622,7 +41622,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -44050,7 +44050,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -46268,11 +46268,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -46828,7 +46828,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -46847,7 +46847,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -48233,7 +48233,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -48501,7 +48501,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -48549,7 +48549,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ blvspg"
+                                                    className="sc-fTACoA NVRqI"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -48587,7 +48587,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -48736,10 +48736,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -48750,7 +48750,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -48762,7 +48762,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -48898,10 +48898,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -48912,7 +48912,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -48924,7 +48924,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -49060,10 +49060,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -49074,7 +49074,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -49086,7 +49086,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -51773,7 +51773,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -54403,11 +54403,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -55066,7 +55066,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -55085,7 +55085,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -56677,7 +56677,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -56789,7 +56789,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56837,7 +56837,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ dXDCbE"
+                                                    className="sc-fTACoA bFfeuI"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -56875,7 +56875,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -57542,7 +57542,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -57590,7 +57590,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -57628,7 +57628,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -57777,10 +57777,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -57791,7 +57791,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -57803,7 +57803,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -58300,7 +58300,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -58348,7 +58348,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ dXDCbE"
+                                                    className="sc-fTACoA bFfeuI"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -58386,7 +58386,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -59118,7 +59118,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -59166,7 +59166,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -59204,7 +59204,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -59871,7 +59871,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -59919,7 +59919,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -59957,7 +59957,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -60598,7 +60598,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -60646,7 +60646,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -60684,7 +60684,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -61357,15 +61357,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <styled.div>
                               <div
-                                className="sc-ehsPLh knNHig"
+                                className="sc-hFXoIY jfMSdz"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-hFXoIY cscarb"
+                                    className="sc-iuAqRD dRALsU"
                                   >
                                     <IconWithText
                                       icon={
@@ -61452,7 +61452,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-DJgqy elnNKc"
+                                      className="sc-dwqccx bGdJor"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -61471,7 +61471,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-dwqccx gcfhMK"
+                                className="sc-gUUBao dCmAkv"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -64003,7 +64003,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-dcwqsv hdkpdB"
+                            className="sc-ehsPLh kxBipD"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -66325,11 +66325,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-ehsPLh knNHig"
+                                    className="sc-hFXoIY jfMSdz"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-hFXoIY cscarb"
+                                        className="sc-iuAqRD dRALsU"
                                       >
                                         <TransitOperatorLogos
                                           stopData={
@@ -66911,7 +66911,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-DJgqy elnNKc"
+                                          className="sc-dwqccx bGdJor"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -66930,7 +66930,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-dwqccx gcfhMK"
+                                    className="sc-gUUBao dCmAkv"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -68368,7 +68368,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-hJxDiT kpgtBy"
+                                  className="sc-liccgK cELqZs"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -68545,7 +68545,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -68593,7 +68593,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -68631,7 +68631,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -68780,10 +68780,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -68794,7 +68794,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -68806,7 +68806,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -68942,10 +68942,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -68956,7 +68956,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -68968,7 +68968,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -69373,7 +69373,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -69421,7 +69421,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -69459,7 +69459,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -69608,10 +69608,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -69622,7 +69622,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -69634,7 +69634,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -70131,7 +70131,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-gfaqzF lnhCXy pattern-row-item"
+                                        className="sc-clhTte ctsdph pattern-row-item"
                                       >
                                         <div
                                           className="header stop-view"
@@ -70179,7 +70179,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-cuWdqJ fyEINM"
+                                                    className="sc-fTACoA MLrMk"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -70217,7 +70217,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                             className="departure-times"
                                           >
                                             <ol
-                                              className="sc-clhTte dZqpkF departure-times"
+                                              className="sc-kJFuxL eQoNJh departure-times"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -70366,10 +70366,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-kJFuxL hzGcQZ"
+                                                              className="sc-cipXqI jrJCvd"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-kJFuxL hzGcQZ"
+                                                                className="sc-cipXqI jrJCvd"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -70380,7 +70380,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -70392,7 +70392,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-kJFuxL hzGcQZ"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
diff --git a/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap b/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
index e05ba4868..8696af73a 100644
--- a/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
+++ b/__tests__/reducers/__snapshots__/create-otp-reducer.js.snap
@@ -83,6 +83,9 @@ Object {
   },
   "ui": Object {
     "diagramLeg": null,
+    "errors": Object {
+      "networkConnectionLost": false,
+    },
     "locale": null,
     "localizedMessages": null,
     "mainPanelContent": null,
diff --git a/__tests__/test-utils/mock-window-matchMedia.js b/__tests__/test-utils/mock-window-matchMedia.js
new file mode 100644
index 000000000..5fefd4aed
--- /dev/null
+++ b/__tests__/test-utils/mock-window-matchMedia.js
@@ -0,0 +1,7 @@
+const mockedMediaQuery = jest.fn()
+mockedMediaQuery.mockReturnValue({ matches: [] })
+
+Object.defineProperty(window, 'matchMedia', {
+  value: mockedMediaQuery,
+  writable: true
+})
diff --git a/example-config.yml b/example-config.yml
index 00c24ad77..a7e100230 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -184,6 +184,9 @@ map:
 # geocoder test account can be obtained from the Pelias maintainers at geocode.earth.
 geocoder:
   apiKey: PELIAS_API_KEY
+  # Pass an array of geocoder result types to control the order in which they are displayed.
+  # The default order is ['STATIONS', 'STOPS', 'OTHER'].
+  geocoderResultsOrder: ['STATIONS', 'STOPS', 'OTHER']
   boundary:
     rect:
       minLon: -123.2034
@@ -353,6 +356,8 @@ itinerary:
   showPlanFirstLastButtons: false
   # adds the 'about' and '~' prefixes to the duration of non transit legs and trip details panel
   showApproximatePrefixAccessLegs: false
+  # Whether to show the effective date and time of alerts
+  showAlertEffectiveDateTimeText: true
   # Show all walking legs regardless of distance
   showAllWalkLegs: false
   # Filters out trips returned by OTP by default, unless specifically requested.
diff --git a/example.css b/example.css
index afd7900f5..bcef527bc 100644
--- a/example.css
+++ b/example.css
@@ -15,7 +15,6 @@
 .otp .navbar-title {
   color: #fff;
   font-size: 24px;
-  padding-top: 7px;
 }
 
 .otp.mobile .navbar-title {
diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 230360920..ea4b74aef 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -184,6 +184,8 @@ components:
     closeMenu: Close Menu
     fieldTrip: Field Trip
     mailables: Mailables
+    networkConnectionLost: Network connection lost
+    networkConnectionRestored: Network connection restored
     openMenu: Open Menu
     skipNavigation: Skip navigation
   BackToTripPlanner:
diff --git a/i18n/es.yml b/i18n/es.yml
index a68f7a03c..79ead7b60 100644
--- a/i18n/es.yml
+++ b/i18n/es.yml
@@ -30,7 +30,8 @@ actions:
       No se puede guardar el plan: este plan no se pudo guardar debido a la
       falta de capacidad en uno o más vehículos. Por favor, vuelva a planificar
       su viaje.
-    maxTripRequestsExceeded: Número de solicitudes de viaje superadas sin resultados válidos
+    maxTripRequestsExceeded: Número de solicitudes de viaje superadas sin resultados
+      válidos
     saveItinerariesError: "No se pudieron guardar los itinerarios: {err}"
     setDateError: "Error al establecer la fecha:"
     setGroupSizeError: "No se pudo establecer el tamaño del grupo:"
@@ -52,10 +53,13 @@ actions:
     authTokenError: Error al obtener un token de autorización.
     confirmDeleteMonitoredTrip: ¿Desea eliminar este viaje?
     confirmDeletePlace: ¿Quiere eliminar este lugar?
-    emailVerificationResent: El mensaje de verificación de correo electrónico ha sido reenviado.
+    emailVerificationResent: El mensaje de verificación de correo electrónico ha sido
+      reenviado.
     genericError: "Se ha encontrado un error: {err}"
-    itineraryExistenceCheckFailed: Comprobación de errores para ver si el viaje seleccionado es posible.
-    mustAcceptTermsToSavePlace: Acepte los Términos de uso (en Mi Cuenta) para guardar las ubicaciones.
+    itineraryExistenceCheckFailed: Comprobación de errores para ver si el viaje seleccionado
+      es posible.
+    mustAcceptTermsToSavePlace: Acepte los Términos de uso (en Mi Cuenta) para guardar
+      las ubicaciones.
     mustBeLoggedInToSavePlace: Por favor, inicia la sesión para guardar las ubicaciones.
     placeRemembered: La configuración de este lugar se ha guardado.
     preferencesSaved: Sus preferencias se han guardado.
@@ -112,13 +116,12 @@ common:
     submitting: Enviando…
     "yes": Sí
   itineraryDescriptions:
-    calories: "{calories, number} kcal"
     fareUnknown: No hay información de las tarifas
     noItineraryToDisplay: No hay itinerario que mostrar.
     relativeCo2: >
       {co2} de CO₂ en {isMore, select, true {más} other {menos} } que conducir
       solo
-    transfers: "{transfers, plural, =0 {} one {# transferencia} other {# transferencias}}"
+    timeStartEnd: '{start} – {end}'
   linkOpensNewWindow: (Abre una nueva ventana)
   modes:
     bicycle_rent: Compartir bicicleta
@@ -157,7 +160,6 @@ common:
     enterStartLocation: Introduzca la ubicación de inicio o {mapAction} en el mapa…
     tap: toque
   time:
-    departureArrivalTimes: "{startTime, time, short}—{endTime, time, short}"
     duration:
       aFewSeconds: unos segundos
       nDays: "{days, plural, =1 {un día} other {# días}}"
@@ -201,6 +203,13 @@ components:
   BatchSearchScreen:
     header: Planifique su viaje
     modeSelectorLabel: Seleccione un modo de desplazamiento
+    moreOptions: Más opciones
+    saveAndReturn: Guardar y volver
+    saved: Guardado
+    tripOptions: Opciones de ruta
+    submodeSelectorLabel: Seleccionar modos y submodos de desplazamiento
+    advancedHeader: Ajustes avanzados
+    modeOptions: Más opciones
   BatchSettings:
     destination: destino
     invalidModeSelection: >-
@@ -208,7 +217,8 @@ components:
       a incluir el transporte publico en la selección de modos.
     origin: origen
     planTripTooltip: Planificar viaje
-    validationMessage: "Por favor, defina los siguientes campos para planificar un viaje: {issues}"
+    validationMessage: "Por favor, defina los siguientes campos para planificar un
+      viaje: {issues}"
   BeforeSignInScreen:
     mainTitle: Iniciando sesión
     message: >
@@ -267,7 +277,6 @@ components:
     ariaLabel: Navegar por los formularios
   ItinerarySummary:
     itineraryDetails: Detalles del itinerario
-    minMaxFare: "{minTotalFare} - {maxTotalFare}"
   LocationSearch:
     enterLocation: Introduzca la ubicación
     setDestination: Establecer el destino
@@ -281,6 +290,7 @@ components:
     shared-vehicles: Vehículos compartidos
     stops: Paradas de tránsito
     streets: Calles
+    stations: Estaciones de transporte
   MapillaryFrame:
     title: Imágenes de la calle
   MetroUI:
@@ -292,6 +302,7 @@ components:
     originallyScheduledTime: (originalmente {originalTime})
     singleModeItineraryDescription: Viaja {time} {mode}
     timeWalking: "{time} caminando"
+    itinerarySummary: Desde {stopName} | {cost}
   MobileOptions:
     header: Configurar las opciones de búsqueda
   MobilityProfile:
@@ -370,6 +381,7 @@ components:
     nearbyListIntro: Lista de {count} entidades cercanas.
     nothingNearby: No ubicaciónes cercanas.
     spacesAvailable: "{spacesAvailable} espacios libres disponibles"
+    headsign: '{destination}'
   NewAccountWizard:
     createNewAccount: Crear una nueva cuenta
     finish: ¡Configuración de la cuenta completa!
@@ -547,6 +559,7 @@ components:
       Otro viaje guardado ya utiliza este nombre. Por favor, elija un nombre
       diferente.
     tripNameRequired: Por favor, introduzca el nombre del viaje.
+    selectAtLeastOneDay: Por favor, seleccione al menos un día para realizar el seguimiento.
   SequentialPaneDisplay:
     stepNumber: Paso {step} de {total}
   SessionTimeout:
@@ -556,7 +569,8 @@ components:
     header: ¡La sesión está a punto de terminar!
     keepSession: Continuar sesión
   SimpleRealtimeAnnotation:
-    usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo real
+    usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo
+      real
   StackedPaneDisplay:
     savePreferences: Guardar preferencias
   StatusBadge:
@@ -622,15 +636,20 @@ components:
     travelingAt: Viajando a {milesPerHour}
     vehicleName: Vehículo {vehicleNumber}
   TripBasicsPane:
-    checkingItineraryExistence: Comprobación de la existencia de itinerarios para cada día de la semana…
+    checkingItineraryExistence: Comprobación de la existencia de itinerarios para
+      cada día de la semana…
     tripDaysPrompt: ¿Qué días hace este viaje?
-    tripIsAvailableOnDaysIndicated: Su viaje está disponible en los días de la semana indicados anteriormente.
+    tripIsAvailableOnDaysIndicated: Su viaje está disponible en los días de la semana
+      indicados anteriormente.
     tripNamePrompt: "Por favor, indique un nombre para este viaje:"
     tripNotAvailableOnDay: El viaje no está disponible el {repeatedDay}
     unsavedChangesExistingTrip: >-
       Todavía no ha guardado su viaje. Si abandona la página, los cambios se
       perderán.
-    unsavedChangesNewTrip: Todavía no ha guardado su nuevo viaje. Si abandona la página, se perderá.
+    unsavedChangesNewTrip: Todavía no ha guardado su nuevo viaje. Si abandona la página,
+      se perderá.
+    onlyOnDate: Solo el {date, date, ::eeeee yyyyMMdd}
+    recurringEachWeek: Algunos días de la semana
   TripNotificationsPane:
     advancedSettings: Configuración avanzada
     altRouteRecommended: Se recomienda una ruta alternativa o un punto de transferencia
@@ -696,11 +715,15 @@ components:
         El viaje debe comenzar a las {tripStart, time, short}. (El seguimiento
         en tiempo real comenzará a las {monitoringStart, time, short}.)
       tripStartIsDelayed: ¡La hora de inicio del viaje se retrasa {duration}!
-      tripStartIsEarly: ¡La hora de inicio del viaje se produce {duration} antes de lo previsto!
+      tripStartIsEarly: ¡La hora de inicio del viaje se produce {duration} antes de
+        lo previsto!
       tripStartsSoonNoUpdates: >-
         El viaje comienza pronto (no hay actualizaciones disponibles en tiempo
         real).
       tripStartsSoonOnTime: El viaje comienza pronto y es más o menos puntual.
+    past:
+      heading: Viaje realizado
+      description: Un viaje que ocurrió el pasado.
   TripSummary:
     arriveAt: "Llegue a las "
     leaveAt: "Salida a las "
@@ -795,6 +818,8 @@ components:
     switcher: Botón de cambio
   WelcomeScreen:
     prompt: ¿A donde quiere ir?
+  TripPreviewLayout:
+    previewTrip: Vista previa del viaje
 config:
   accessModes:
     bicycle: Tránsito + Bicicleta Personal
diff --git a/i18n/fr.yml b/i18n/fr.yml
index f24f6da71..4e7bdb55b 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -195,6 +195,8 @@ components:
     closeMenu: Fermer le menu
     fieldTrip: Groupes scolaires
     mailables: Prêt-à-poster
+    networkConnectionLost: Erreur de connexion réseau
+    networkConnectionRestored: Connexion réseau restaurée
     openMenu: Ouvrir le menu
     skipNavigation: Sauter la navigation
   BackToTripPlanner:
diff --git a/i18n/ko.yml b/i18n/ko.yml
index bc5bbb9d9..d033e1ec1 100644
--- a/i18n/ko.yml
+++ b/i18n/ko.yml
@@ -22,7 +22,8 @@ actions:
     fetchFieldTripsError: "트립을 가져오는 중에 오류가 발생했습니다: {err}"
     fetchTripsForDateError: "필트 트립 날짜에 대한 트립을 가져오는 중에 오류가 발생했습니다: {err}"
     incompatibleTripDateError: 계획한 트립 날짜({tripDate})가 요청한 트립 날짜({requestDate})가 아닙니다
-    itineraryCapacityError: "플랜을 저장할 수 없습니다: 하나 이상의 차량의 용량이 부족하여 이 플랜을 저장할 수 없습니다. 트립을 다시 계획하세요."
+    itineraryCapacityError: "플랜을 저장할 수 없습니다: 하나 이상의 차량의 용량이 부족하여 이 플랜을 저장할 수 없습니다.
+      트립을 다시 계획하세요."
     maxTripRequestsExceeded: 유효한 결과없이 초과된 트립 요청의 개수
     saveItinerariesError: "트립을 저장하는 데 실패했습니다: {err}"
     setDateError: "날짜를 설정하는 중에 오류가 발생했습니다:"
@@ -99,12 +100,10 @@ common:
     submitting: 제출 중…
     "yes": 예
   itineraryDescriptions:
-    calories: "{calories, number} 칼로리"
     fareUnknown: 운임 정보 없음
     noItineraryToDisplay: 표시할 일정이 없습니다.
     relativeCo2: |
       {co2} CO₂ 를 자동차보다 {isMore, select, true {더} other {덜} } 사용합니다
-    transfers: "{transfers, plural, =0 {} other {# 전송}}"
   linkOpensNewWindow: (새 창 열림)
   modes:
     bicycle_rent: 공유자전거
@@ -143,7 +142,6 @@ common:
     enterStartLocation: 시작 위치 또는 {mapAction}을(를) 지도에 입력하십시오…
     tap: 클릭
   time:
-    departureArrivalTimes: "{startTime, time, short}—{endTime, time, short}"
     duration:
       aFewSeconds: 몇 초
       nDays: "{days} 일"
@@ -244,7 +242,6 @@ components:
     ariaLabel: 내비게이션 양식
   ItinerarySummary:
     itineraryDetails: 여정 세부 정보
-    minMaxFare: "{minTotalFare} - {maxTotalFare}"
   LocationSearch:
     enterLocation: 위치 입력
     setDestination: 목적지 선택
@@ -687,5 +684,6 @@ util:
     networkUnavailable: 현재 {network} 네트워크를 사용할 수 없습니다.
     noTripFound: 트립을 찾을 수 없습니다.
     noTripFoundForMode: "{modes}의 트립을 찾을 수 없습니다."
-    noTripFoundReason: 지정된 최대 거리 내 또는 지정된 시간에 대중 교통 서비스가 없거나, 출발지 또는 도착지가 안전하게 접근가능하지 못할 수 있습니다.
+    noTripFoundReason: 지정된 최대 거리 내 또는 지정된 시간에 대중 교통 서비스가 없거나, 출발지 또는 도착지가 안전하게 접근가능하지
+      못할 수 있습니다.
     noTripFoundWithReason: "{noTripFound} {reason}"
diff --git a/i18n/nb_NO.yml b/i18n/nb_NO.yml
index f65100277..a3c25a12f 100644
--- a/i18n/nb_NO.yml
+++ b/i18n/nb_NO.yml
@@ -104,7 +104,6 @@ components:
     requestNewCode: Forespør ny kode
     sendVerificationText: Send bekreftelsestekst
     verificationCode: Bekreftelseskode
-    verified: Bekreftet
     verify: Bekreft
   Place:
     deleteThisPlace: Slett dette stedet
diff --git a/i18n/ru.yml b/i18n/ru.yml
index 0e1a1768b..9e8f20b2f 100644
--- a/i18n/ru.yml
+++ b/i18n/ru.yml
@@ -18,7 +18,8 @@ actions:
     itineraryCapacityError: >-
       Невозможно сохранить план. Этот план невозможно сохранить из-за нехватки
       мест в одном или нескольких транспортных средствах. Измените план поездки.
-    maxTripRequestsExceeded: Превышено количество запросов на поездку без действительных результатов
+    maxTripRequestsExceeded: Превышено количество запросов на поездку без действительных
+      результатов
     saveItinerariesError: "Не удалось сохранить маршруты: {err}"
     setDateError: "Ошибка введения данных:"
   location:
@@ -37,9 +38,11 @@ actions:
     authTokenError: Ошибка получения токена на авторизацию.
     confirmDeleteMonitoredTrip: Удалить эту поездку?
     confirmDeletePlace: Удалить это место?
-    emailVerificationResent: Сообщение с подтверждением адреса электронной почты отправлено повторно.
+    emailVerificationResent: Сообщение с подтверждением адреса электронной почты отправлено
+      повторно.
     genericError: "Произошла ошибка: {err}"
-    itineraryExistenceCheckFailed: При проверке возможности выбранной поездки произошла ошибка.
+    itineraryExistenceCheckFailed: При проверке возможности выбранной поездки произошла
+      ошибка.
     mustAcceptTermsToSavePlace: >-
       Примите «Условия использования» (в разделе «Моя учетная запись»), чтобы
       сохранять местоположения.
@@ -99,15 +102,11 @@ common:
     submitting: Отправка…
     "yes": Да
   itineraryDescriptions:
-    calories: "{calories, number} кал"
     fareUnknown: Информации о стоимости поездки нет.
     noItineraryToDisplay: Нет маршрута для отображения.
     relativeCo2: >
       {co2} {isMore, select, true {больше } other {меньше} } CO₂, чем при
       вождении в одиночку
-    transfers: >-
-      {transfers, plural, =0 {} one {# пересадка} other {несколько пересадок
-      (#)}}
   linkOpensNewWindow: (Открывает новое окно)
   modes:
     bicycle_rent: Прокат велосипедов
@@ -146,7 +145,6 @@ common:
     enterStartLocation: Введите место отправления или {mapAction} на карте…
     tap: коснитесь его
   time:
-    departureArrivalTimes: "{startTime, time, short}\_— {endTime, time, short}"
     duration:
       aFewSeconds: несколько секунд
       nDays: "{days} дн."
@@ -256,7 +254,6 @@ components:
     ariaLabel: Навигационная форма
   ItinerarySummary:
     itineraryDetails: Сведения о маршруте
-    minMaxFare: "{minTotalFare}\_— {maxTotalFare}"
   LocationSearch:
     enterLocation: Ввести местоположение
     setDestination: Выбрать место назначения
@@ -285,7 +282,8 @@ components:
     header: Задать параметры поиска
   NarrativeItinerariesHeader:
     changeSortDir: Изменить направление сортировки
-    howToFindResults: Чтобы просмотреть результаты, см. заголовок «Найденные маршруты» ниже.
+    howToFindResults: Чтобы просмотреть результаты, см. заголовок «Найденные маршруты»
+      ниже.
     itinerariesFound: |-
       {itineraryNum, plural,
        one {найден # маршрут}
@@ -388,7 +386,7 @@ components:
       TO: Mесто назначения
   PhoneNumberEditor:
     changeNumber: Изменить номер
-    invalidCode: "Введите проверочный код из 6\_цифр."
+    invalidCode: "Введите проверочный код из 6 цифр."
     invalidPhone: Введите действительный номер телефона.
     phoneNumberSubmitted: Номер телефона{phoneNumber} был успешно отправлен.
     phoneNumberVerified: Номер телефона{phoneNumber}  был успешно проверен.
@@ -401,7 +399,9 @@ components:
       подтверждением и мониторингом поездки. Вашим оператором мобильной связи
       могут взиматься дополнительные пени.
     verificationCode: "Код подтверждения:"
-    verificationInstructions: "Откройте приложение для обмена SMS на телефоне и найдите текстовое сообщение с кодом подтверждения. Затем введите код ниже (срок действия кода: 10\_минут).\n"
+    verificationInstructions: "Откройте приложение для обмена SMS на телефоне и найдите
+      текстовое сообщение с кодом подтверждения. Затем введите код ниже (срок действия
+      кода: 10 минут).\n"
     verify: Подтвердить
   Place:
     deleteThisPlace: Удалить это место
@@ -496,7 +496,8 @@ components:
     tooManyTrips: >
       Можно сохранить не более пяти поездок. Удалите неиспользуемые поездки из
       раздела сохраненных и попробуйте еще раз.
-    tripNameAlreadyUsed: У вас уже сохранена поездка с таким именем. Укажите другое имя.
+    tripNameAlreadyUsed: У вас уже сохранена поездка с таким именем. Укажите другое
+      имя.
     tripNameRequired: Укажите имя поездки.
   SequentialPaneDisplay:
     stepNumber: Шаг {шаг} из {общее кол-во}
@@ -555,9 +556,13 @@ components:
     defaultContent: Переключить
     switchLocations: Переключить местоположения
   TermsOfUsePane:
-    confirmDeletionPrompt: "Недавние поисковые запросы и\_(или) места сохранены. Отключение сохранения недавних мест и\_(или) поисковых запросов приведет к удалению этих элементов. Продолжить?\n"
+    confirmDeletionPrompt: "Недавние поисковые запросы и (или) места сохранены. Отключение
+      сохранения недавних мест и (или) поисковых запросов приведет к удалению этих
+      элементов. Продолжить?\n"
     mustAgreeToTerms: Для продолжения примите условия использования.
-    termsOfServiceStatement: "Я подтверждаю, что мне исполнилось 18\_лет и что я прочитал и принимаю <termsOfUseLink>Условия использования</termsOfUseLink > планировщика поездок.\n"
+    termsOfServiceStatement: "Я подтверждаю, что мне исполнилось 18 лет и что я прочитал
+      и принимаю <termsOfUseLink>Условия использования</termsOfUseLink > планировщика
+      поездок.\n"
     termsOfStorageStatement: >
       Необязательно: я даю согласие на то, чтобы планировщик поездок хранил
       архивные данные о моих запланированных поездках с целью улучшения услуг
@@ -575,8 +580,10 @@ components:
     tripIsAvailableOnDaysIndicated: Поездка доступна для указанных выше дней.
     tripNamePrompt: "Укажите имя поездки:"
     tripNotAvailableOnDay: "Поездка недоступна для следующих дней: {repeatedDay}"
-    unsavedChangesExistingTrip: Вы не сохранили поездку. Если вы выйдете, все изменения будут утеряны.
-    unsavedChangesNewTrip: Вы не сохранили новую поездку. Если вы выйдете, она будет удалена.
+    unsavedChangesExistingTrip: Вы не сохранили поездку. Если вы выйдете, все изменения
+      будут утеряны.
+    unsavedChangesNewTrip: Вы не сохранили новую поездку. Если вы выйдете, она будет
+      удалена.
   TripNotificationsPane:
     advancedSettings: Расширенные настройки
     altRouteRecommended: Рекомендуется использовать пересадку или альтернативный маршрут
@@ -587,7 +594,7 @@ components:
     monitorThisTrip: "Мониторинг данной поездки до ее начала:"
     notificationsTurnedOff: Уведомления отключены в настройках вашей учетной записи.
     notifyViaChannelWhen: "Использовать канал «{channel}» для уведомлений, когда:"
-    oneHour: "1\_ч"
+    oneHour: "1 ч"
     realtimeAlertFlagged: Для моего пути есть предупреждение в режиме реального времени
     timeBefore: "{time} до"
   TripStatus:
@@ -646,14 +653,16 @@ components:
         реальном времени запустится в {monitoringStart, time, short}.)
       tripStartIsDelayed: Начало поездки откладывается на {duration}!
       tripStartIsEarly: Начало поездки произойдет на {duration} раньше ожидаемого!
-      tripStartsSoonNoUpdates: Поездка скоро начнется (обновления в реальном времени недоступны).
+      tripStartsSoonNoUpdates: Поездка скоро начнется (обновления в реальном времени
+        недоступны).
       tripStartsSoonOnTime: Поездка скоро начнется. Без задержек.
   TripSummary:
     arriveAt: "Прибытие в "
     leaveAt: "Оставить "
   TripSummaryPane:
     happensOnDays: "Проходит в такие дни: {days}"
-    notifications: за <strong>{leadTimeInMinutes} мин до запланированного времени отправления
+    notifications: за <strong>{leadTimeInMinutes} мин до запланированного времени
+      отправления
     notificationsDisabled: "Уведомления: отключены"
   TripTools:
     copyLink: Скопировать ссылку
@@ -693,17 +702,23 @@ components:
       storeTripHistory: Сохранять историю поездок
     updating: Обновляется
   UserSettings:
-    confirmDeletion: "Недавние поисковые запросы и\_(или) места сохранены. Отключение сохранения недавних мест и\_(или) поисковых запросов приведет к удалению этих элементов. Продолжить?"
+    confirmDeletion: "Недавние поисковые запросы и (или) места сохранены. Отключение
+      сохранения недавних мест и (или) поисковых запросов приведет к удалению этих
+      элементов. Продолжить?"
     favoriteStops: Избранные остановки
     myPreferences: Мои параметры
     mySavedPlaces: Мои сохраненные места (<manageLink>изменить</manageLink>)
     noFavoriteStops: Избранные остановки
     recentPlaces: Недавние места
-    recentSearchSummary: "Режим «{mode}». {from}\_— {to}"
+    recentSearchSummary: "Режим «{mode}». {from} — {to}"
     recentSearches: Недавние поисковые запросы
-    rememberSearches: "Сохранить недавние места\_/ поисковые запросы?"
+    rememberSearches: "Сохранить недавние места / поисковые запросы?"
     stopId: "Идентификатор остановки: {stopId}"
-    storageDisclaimer: "Все сохраненные параметры, места и настройки будут храниться в локальном хранилище браузера. TriMet не получит доступ к данным о вашем доме, месте работы или другим местоположениям. В любой момент вы можете отключить сохранение недавних мест\_/ поисковых запросов и очистить список местоположений дома/работы, а также избранных остановок.\n"
+    storageDisclaimer: "Все сохраненные параметры, места и настройки будут храниться
+      в локальном хранилище браузера. TriMet не получит доступ к данным о вашем доме,
+      месте работы или другим местоположениям. В любой момент вы можете отключить
+      сохранение недавних мест / поисковых запросов и очистить список местоположений
+      дома/работы, а также избранных остановок.\n"
   UserTripSettings:
     forgetOptions: Удалить варианты
     rememberOptions: Сохранить варианты поездки
@@ -725,12 +740,12 @@ components:
     prompt: Куда вы хотите отправиться?
 config:
   accessModes:
-    bicycle: "Общественный транспорт\_+\_личный велосипед"
-    bicycle_rent: "Общественный транспорт\_+\_прокат велосипеда"
+    bicycle: "Общественный транспорт + личный велосипед"
+    bicycle_rent: "Общественный транспорт + прокат велосипеда"
     car_hail: Заказная поездка
     car_park: Парковочное место
-    micromobility: "Общественный транспорт\_+\_личный самокат"
-    micromobility_rent: "Общественный транспорт\_+\_прокат электросамоката"
+    micromobility: "Общественный транспорт + личный самокат"
+    micromobility_rent: "Общественный транспорт + прокат электросамоката"
   bicycleModes:
     bicycle: Личный велосипед
     bicycle_rent: Прокат велосипедов
diff --git a/i18n/tl.yml b/i18n/tl.yml
index 4d48060ef..ad174d969 100644
--- a/i18n/tl.yml
+++ b/i18n/tl.yml
@@ -45,7 +45,8 @@ actions:
     confirmDeletePlace: Gusto mo bang alisin ang lugar na ito?
     emailVerificationResent: Ipinadala ulit ang mensahe ng pag-verify sa email.
     genericError: "Nagka-error: {err}"
-    itineraryExistenceCheckFailed: Nagka-error sa pagtingin kung posible ang napili mong biyahe.
+    itineraryExistenceCheckFailed: Nagka-error sa pagtingin kung posible ang napili
+      mong biyahe.
     mustAcceptTermsToSavePlace: >-
       Pakitanggap ang Mga Tuntunin ng Paggamit (sa ilalim ng Aking Account) para
       mag-save ng mga lokasyon.
@@ -106,13 +107,11 @@ common:
     submitting: Isinusumite…
     "yes": Oo
   itineraryDescriptions:
-    calories: "{calories, number} Cal"
     fareUnknown: Walang impormasyon sa pamasahe
     noItineraryToDisplay: Walang ipapakitang itinerary.
     relativeCo2: >
       {co2} {isMore, select, true {mas maraming} other {mas kaunting} } CO₂
       kaysa magmaneho nang mag-isa
-    transfers: "{transfers, plural, =0 {} one {# transfer} other {# transfers}}"
   linkOpensNewWindow: (Magbubukas sa bagong window)
   modes:
     bicycle_rent: Bikeshare
@@ -151,7 +150,6 @@ common:
     enterStartLocation: Ilagay ang lokasyon ng pagsisimula o {mapAction} sa mapa…
     tap: tap
   time:
-    departureArrivalTimes: "{startTime, time, short}—{endTime, time, short}"
     duration:
       aFewSeconds: a few seconds
       nDays: "{days, plural, =1 {one day} other {# days}}"
@@ -204,7 +202,8 @@ components:
       ang pampublikong transportasyon sa pagpili mo ng mode.
     origin: pinagmulan
     planTripTooltip: Planuhin ang biyahe
-    validationMessage: "Ilarawan ang mga sumusunod na field para makapagplano ng biyahe: {issues}"
+    validationMessage: "Ilarawan ang mga sumusunod na field para makapagplano ng biyahe:
+      {issues}"
   BeforeSignInScreen:
     mainTitle: Sina-sign in ka
     message: >
@@ -263,7 +262,6 @@ components:
     ariaLabel: Pag-navigate sa form
   ItinerarySummary:
     itineraryDetails: Mga detalye ng itinerary
-    minMaxFare: "{minTotalFare} - {maxTotalFare}"
   LocationSearch:
     enterLocation: Ilagay ang lokasyon
     setDestination: Itakda ang Patutunguhan
@@ -396,7 +394,8 @@ components:
     invalidCode: Maglagay ng 6 na digit para sa code sa pag-validate.
     invalidPhone: Maglagay ng valid na numero ng telepono.
     phoneNumberSubmitted: Matagumpay na naisumite ang numero ng teleponong {phoneNumber}.
-    phoneNumberVerified: Matagumpay na na-verify ang numero ng teleponong {phoneNumber} .
+    phoneNumberVerified: Matagumpay na na-verify ang numero ng teleponong {phoneNumber}
+      .
     placeholder: Ilagay ang numero ng iyong telepono
     prompt: "Ilagay ang numero ng iyong telepono para sa mga SMS na notification:"
     requestNewCode: Humiling ng bagong code
@@ -585,9 +584,11 @@ components:
     travelingAt: Bumibiyahe nang {milesPerHour}
     vehicleName: Sasakyan {vehicleNumber}
   TripBasicsPane:
-    checkingItineraryExistence: Tinitingnan kung may itinerary para sa bawat araw ng linggo...
+    checkingItineraryExistence: Tinitingnan kung may itinerary para sa bawat araw
+      ng linggo...
     tripDaysPrompt: Anong mga araw mo ginagawa ang biyaheng ito?
-    tripIsAvailableOnDaysIndicated: Available ang iyong biyahe sa mga araw ng linggo na nakasaad sa itaas.
+    tripIsAvailableOnDaysIndicated: Available ang iyong biyahe sa mga araw ng linggo
+      na nakasaad sa itaas.
     tripNamePrompt: "Pangalanan ang biyaheng ito:"
     tripNotAvailableOnDay: Hindi available ang biyahe sa {repeatedDay}
     unsavedChangesExistingTrip: >-
@@ -632,7 +633,8 @@ components:
       unknownState: Hindi Alam ang Status ng Biyahe
       untogglePause: Ipagpatuloy
     inactive:
-      description: Ipagpatuloy ang pagsubaybay sa biyahe para makita ang updated na status
+      description: Ipagpatuloy ang pagsubaybay sa biyahe para makita ang updated na
+        status
       heading: Naka-pause ang pagsubaybay sa biyahe
     nextTripNotPossible:
       description: >
@@ -651,7 +653,8 @@ components:
       description: Hinihintay na makalkula ang biyahe.
       heading: Hindi pa nakakalkula ang biyahe
     snoozed:
-      description: I-unsnooze ang pagsubaybay sa biyahe para makita ang updated na status.
+      description: I-unsnooze ang pagsubaybay sa biyahe para makita ang updated na
+        status.
       heading: Naka-snooze ang pagsubaybay sa biyahe ngayong araw
     upcoming:
       nextTripBegins: >-
@@ -661,7 +664,8 @@ components:
         Magsisimula ang biyahe nang {tripStart, time, short}. (Magsisimula ang
         realtime na pagsubaybay nang {monitoringStart, time, short}.)
       tripStartIsDelayed: Naantala ang oras ng pagsisimula ng biyahe nang {duration}!
-      tripStartIsEarly: Nagsisimula na ang biyahe {duration} na mas maaga kaysa sa inaasahan!
+      tripStartIsEarly: Nagsisimula na ang biyahe {duration} na mas maaga kaysa sa
+        inaasahan!
       tripStartsSoonNoUpdates: >-
         Malapit nang magsimula ang biyahe (walang realtime na update na
         available).
diff --git a/i18n/vi.yml b/i18n/vi.yml
index 316b37876..b10292003 100644
--- a/i18n/vi.yml
+++ b/i18n/vi.yml
@@ -5,7 +5,8 @@ actions:
     callQuerySaveError: "Lỗi khi lưu trữ các truy vấn cuộc gọi: {err}"
     callSaveError: "Không thể lưu cuộc gọi: {err}"
     checkSessionError: "Lỗi khi thiết lập phiên ủy quyền: {err}"
-    couldNotFindCallError: Không thể tìm thấy cuộc gọi. Đang hủy yêu cầu lưu truy vấn.
+    couldNotFindCallError: Không thể tìm thấy cuộc gọi. Đang hủy yêu cầu lưu truy
+      vấn.
     fetchCallsError: "Lỗi khi tìm nạp cuộc gọi: {err}"
     queryFetchError: "Lỗi khi tìm nạp các truy vấn: {err}"
   fieldTrip:
@@ -28,7 +29,8 @@ actions:
       Không thể lưu kế hoạch chuyến đi: Không thể lưu kế hoạch chuyến đi này do
       thiếu sức chứa trên một hoặc nhiều xe. Vui lòng lên kế hoạch lại chuyến đi
       của bạn.
-    maxTripRequestsExceeded: Đã vượt quá số lượng yêu cầu chuyến đi mà không có kết quả hợp lệ
+    maxTripRequestsExceeded: Đã vượt quá số lượng yêu cầu chuyến đi mà không có kết
+      quả hợp lệ
     saveItinerariesError: "Không lưu được hành trình: {err}"
     setDateError: "Lỗi khi cài đặt ngày:"
     setGroupSizeError: "Lỗi khi cài đặt kích thước nhóm:"
@@ -40,7 +42,8 @@ actions:
 
       Để sử dụng địa điểm hiện tại của mình, quý vị hãy cho phép sử dụng vị trí
       trong trình duyệt và tải lại trang này. 
-    geolocationNotSupportedError: Định vị địa lý không được hỗ trợ bởi trình duyệt của bạn
+    geolocationNotSupportedError: Định vị địa lý không được hỗ trợ bởi trình duyệt
+      của bạn
     unknownPositionError: Lỗi không xác định khi tìm vị trí
     userDeniedPermission: Người dùng từ chối cấp quyền
   map:
@@ -52,7 +55,8 @@ actions:
     confirmDeletePlace: Bạn có muốn loại bỏ nơi này không?
     emailVerificationResent: Thông báo xác minh email đã được gửi lại.
     genericError: "Phát sinh lỗi: {err}"
-    itineraryExistenceCheckFailed: Lỗi kiểm tra xem chuyến đi được chọn của bạn là có thể.
+    itineraryExistenceCheckFailed: Lỗi kiểm tra xem chuyến đi được chọn của bạn là
+      có thể.
     mustAcceptTermsToSavePlace: >-
       Vui lòng chấp nhận Điều Khoản Sử Dụng (trong phần Tài Khoản Của Tôi) để
       lưu lại địa điểm.
@@ -112,12 +116,10 @@ common:
     submitting: Đang gửi…
     "yes": Đúng
   itineraryDescriptions:
-    calories: "{calories, number} calo"
     fareUnknown: Không có thông tin giá vé
     noItineraryToDisplay: Không có hành trình để hiển thị.
     relativeCo2: |
       {co2} CO₂ {isMore, select, true {nhiều} other {ít} } hơn so với xe hơi
-    transfers: "{transfers, plural, =0 {} other {# chuyển}}"
   linkOpensNewWindow: (Mở khoảng thời gian mới)
   modes:
     bicycle_rent: Chia sẻ xe đạp
@@ -156,7 +158,6 @@ common:
     enterStartLocation: Nhập vị trí bắt đầu hoặc {mapAction} vào bản đồ…
     tap: chạm
   time:
-    departureArrivalTimes: "{startTime, time, short}—{endTime, time, short}"
     duration:
       aFewSeconds: vài giây
       nDays: "{days} ngày"
@@ -168,12 +169,14 @@ common:
       {} other {# giây}}
 components:
   A11yPrefs:
-    accessibilityRoutingByDefault: Thích những chuyến đi có thể truy cập theo mặc định
+    accessibilityRoutingByDefault: Thích những chuyến đi có thể truy cập theo mặc
+      định
   AccountSetupFinishPane:
     message: Bạn đã sẵn sàng để bắt đầu lên kế hoạch cho các chuyến đi của bạn.
   AddPlaceButton:
     addPlace: Thêm địa điểm
-    needOriginDestination: Xác định nguồn gốc hoặc đích đến để thêm các địa điểm trung gian
+    needOriginDestination: Xác định nguồn gốc hoặc đích đến để thêm các địa điểm trung
+      gian
     tooManyPlaces: Địa điểm trung gian tối đa đạt được
   AdvancedOptions:
     bannedRoutes: Chọn các tuyến đường bị cấm…
@@ -259,14 +262,14 @@ components:
     editPlaceGeneric: Chỉnh sửa vị trí
     invalidAddress: Vui lòng cài đặt một vị trí cho nơi này.
     invalidName: Vui lòng nhập tên cho nơi này.
-    nameAlreadyUsed: Bạn đã sử dụng tên này cho một nơi khác. Vui lòng nhập một tên khác.
+    nameAlreadyUsed: Bạn đã sử dụng tên này cho một nơi khác. Vui lòng nhập một tên
+      khác.
     placeNotFound: Không tìm thấy địa điểm
     placeNotFoundDescription: Xin lỗi, địa điểm được yêu cầu không được tìm thấy.
   FormNavigationButtons:
     ariaLabel: Điều hướng hình thức
   ItinerarySummary:
     itineraryDetails: Chi tiết hành trình
-    minMaxFare: "{minTotalFare} - {maxTotalFare}"
   LocationSearch:
     enterLocation: Nhập vị trí
     setDestination: Chọn điểm đến
@@ -335,8 +338,10 @@ components:
     description: Nội dung bạn yêu cầu không có sẵn.
     header: Không tìm thấy nội dung
   NotificationPrefsPane:
-    devicesRegistered: "{count, plural, one {# device} other {# devices}} đã đăng ký"
-    noDeviceForPush: Đăng ký thiết bị của quý vị bằng ứng dụng di động để nhận thông báo đẩy.
+    devicesRegistered: "{count, plural, one {# device} other {# devices}} đã đăng
+      ký"
+    noDeviceForPush: Đăng ký thiết bị của quý vị bằng ứng dụng di động để nhận thông
+      báo đẩy.
     notificationChannelPrompt: "Nhận thông báo về các chuyến đi đã lưu bằng:"
   OTP2ErrorRenderer:
     LOCATION_NOT_FOUND:
@@ -579,16 +584,21 @@ components:
     travelingAt: di chuyển với tốc độ {milesPerHour}
     vehicleName: Phương tiện giao thông {vehicleNumber}
   TripBasicsPane:
-    checkingItineraryExistence: Kiểm tra sự tồn tại của hành trình cho mỗi ngày trong tuần…
+    checkingItineraryExistence: Kiểm tra sự tồn tại của hành trình cho mỗi ngày trong
+      tuần…
     tripDaysPrompt: Bạn thực hiện chuyến đi này vào những ngày nào?
-    tripIsAvailableOnDaysIndicated: Chuyến đi của bạn có sẵn vào những ngày trong tuần như đã nêu ở trên.
+    tripIsAvailableOnDaysIndicated: Chuyến đi của bạn có sẵn vào những ngày trong
+      tuần như đã nêu ở trên.
     tripNamePrompt: "Vui lòng cung cấp tên cho chuyến đi này:"
     tripNotAvailableOnDay: Chuyến đi không có sẵn vào {repeatedDay}
-    unsavedChangesExistingTrip: Bạn chưa lưu chuyến đi của mình. Nếu bạn rời đi, những thay đổi sẽ bị mất.
-    unsavedChangesNewTrip: Bạn chưa lưu chuyến đi mới của mình. Nếu bạn rời đi, nó sẽ bị mất.
+    unsavedChangesExistingTrip: Bạn chưa lưu chuyến đi của mình. Nếu bạn rời đi, những
+      thay đổi sẽ bị mất.
+    unsavedChangesNewTrip: Bạn chưa lưu chuyến đi mới của mình. Nếu bạn rời đi, nó
+      sẽ bị mất.
   TripNotificationsPane:
     advancedSettings: Cài đặt nâng cao
-    altRouteRecommended: Một tuyến đường hoặc điểm trung chuyển thay thế được khuyến nghị
+    altRouteRecommended: Một tuyến đường hoặc điểm trung chuyển thay thế được khuyến
+      nghị
     delaysAboveThreshold: Có sự chậm trễ hoặc gián đoạn của hơn
     howToReceiveAlerts: >
       Để nhận thông báo cho các chuyến đi đã lưu của bạn, bật thông báo trong
@@ -597,7 +607,8 @@ components:
     notificationsTurnedOff: Thông báo được tắt cho tài khoản của bạn.
     notifyViaChannelWhen: "Thông báo cho tôi qua {channel} khi:"
     oneHour: 1 tiếng
-    realtimeAlertFlagged: Có một cảnh báo thời gian thực được gắn cờ trên hành trình của tôi
+    realtimeAlertFlagged: Có một cảnh báo thời gian thực được gắn cờ trên hành trình
+      của tôi
     timeBefore: "{time} trước"
   TripStatus:
     alerts: "{alerts, plural, one {# cảnh báo!} other {# cảnh báo!}}"
@@ -610,7 +621,8 @@ components:
       earlyHeading: >-
         Chuyến đi đang diễn ra và sẽ đến sớm hơn {formattedDuration} so với dự
         kiến!
-      noDataHeading: Chuyến đi đang được tiến hành (không có cập nhật thời gian thực có sẵn).
+      noDataHeading: Chuyến đi đang được tiến hành (không có cập nhật thời gian thực
+        có sẵn).
       onTimeHeading: Chuyến đi đang được tiến hành và đúng giờ.
     base:
       lastCheckedDefaultText: Thời gian được kiểm tra lần cuối không xác định
@@ -653,7 +665,8 @@ components:
       tripStartIsEarly: >-
         Thời gian bắt đầu chuyến đi đang diễn ra sớm hơn {duration} so với dự
         kiến!
-      tripStartsSoonNoUpdates: Chuyến đi đang bắt đầu sớm (không có cập nhật về thời gian thực).
+      tripStartsSoonNoUpdates: Chuyến đi đang bắt đầu sớm (không có cập nhật về thời
+        gian thực).
       tripStartsSoonOnTime: Chuyến đi đang bắt đầu sớm và sắp đúng giờ.
   TripSummary:
     arriveAt: "Đến nơi "
diff --git a/i18n/zh_Hans.yml b/i18n/zh_Hans.yml
index 5d4b6a419..c3012c95a 100644
--- a/i18n/zh_Hans.yml
+++ b/i18n/zh_Hans.yml
@@ -99,12 +99,10 @@ common:
     submitting: 正在提交…
     "yes": 是
   itineraryDescriptions:
-    calories: "{calories, number} 大卡"
     fareUnknown: 无票价信息
     noItineraryToDisplay: 没有显示行程.
     relativeCo2: |
       {co2} {isMore, select, true {更多} other {更少} } CO₂ 比单独驾车
-    transfers: "{transfers, plural, =0 {} other {# 换乘}}"
   linkOpensNewWindow: （打开新窗口）
   modes:
     bicycle_rent: 共享单车
@@ -143,7 +141,6 @@ common:
     enterStartLocation: 输入出发地点或{mapAction}地图…
     tap: 点击
   time:
-    departureArrivalTimes: "{startTime, time, short}—{endTime, time, short}"
     duration:
       aFewSeconds: 几秒钟
       nDays: "{days} 天"
@@ -244,7 +241,6 @@ components:
     ariaLabel: 表格导航
   ItinerarySummary:
     itineraryDetails: 行程详情
-    minMaxFare: "{minTotalFare} - {maxTotalFare}"
   LocationSearch:
     enterLocation: 输入位置
     setDestination: 设置目的地
diff --git a/i18n/zh_Hant.yml b/i18n/zh_Hant.yml
index 4fbc7d8fd..b18d02dc0 100644
--- a/i18n/zh_Hant.yml
+++ b/i18n/zh_Hant.yml
@@ -99,12 +99,10 @@ common:
     submitting: 正在提交…
     "yes": 是
   itineraryDescriptions:
-    calories: "{calories, number}卡"
     fareUnknown: 無票價資訊
     noItineraryToDisplay: 沒有預定行程可顯示。
     relativeCo2: |
       {co2}比單獨開車排放的CO₂{isMore, select, true {要多} other {少}}
-    transfers: "{transfers}次轉乘"
   linkOpensNewWindow: (開啟新視窗)
   modes:
     bicycle_rent: 自行車共享
@@ -143,7 +141,6 @@ common:
     enterStartLocation: 輸入開始位置或{mapAction} 地圖……
     tap: 輕觸
   time:
-    departureArrivalTimes: "{startTime, time, short}—{endTime, time, short}"
     duration:
       aFewSeconds: 幾秒鐘
       nDays: "{days}天"
@@ -244,7 +241,6 @@ components:
     ariaLabel: 表單導航
   ItinerarySummary:
     itineraryDetails: 路線詳細資訊
-    minMaxFare: "{minTotalFare} - {maxTotalFare}"
   LocationSearch:
     enterLocation: 輸入位置
     setDestination: 設定目的地
diff --git a/index.css b/index.css
index 697d3b1b6..c5a4df16f 100644
--- a/index.css
+++ b/index.css
@@ -1,5 +1,6 @@
 @import url(node_modules/bootstrap/dist/css/bootstrap.min.css);
-
+@import url(react-sliding-pane/dist/react-sliding-pane.css);
+@import url(lib/bike-rental.css);
 @import url(node_modules/maplibre-gl/dist/maplibre-gl.css);
 
 @import url(lib/components/admin/call-taker.css);
@@ -12,190 +13,25 @@
 @import url(lib/components/user/nav-login-button.css);
 @import url(lib/components/viewers/viewers.css);
 
-@import url(lib/bike-rental.css);
 
-@import url(react-sliding-pane/dist/react-sliding-pane.css);
 
 /* Hide IE/Edge clear button in text input fields. */
 input[type="text"]::-ms-clear {
   display: none;
 }
 
-/* New app menu */
-.app-menu-icon {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: 15px;
-  justify-content: space-between;
-  padding: 0;
-  position: absolute;
-  top: 16px;
-  transition: all 1s ease;
-  width: 21px;
-  z-index: 10;
-}
-
-@media only screen and (max-width: 768px) {
-  #locale-selector-wrapper {
-    display: none;
-  }
-  .app-menu-icon {
-    left: 15px;
-  }
-}
-
-.app-menu-icon .menu-line {
-  border-bottom: 3px solid #ffffff;
-  display: block;
-  position: relative;
-  transition: all 0.5s ease;
-  width: 100%;
-}
-
-.app-menu-icon[aria-expanded="true"] .menu-line.top {
-  transform: rotate(45deg);
-  top: 7px;
-}
-.app-menu-icon[aria-expanded="true"] .menu-line.bottom {
-  transform: rotate(-45deg);
-  bottom: 5px;
-}
-.app-menu-icon[aria-expanded="true"] .menu-line.middle {
-  display: none;
-}
-
-.slide-pane {
-  transition: all 0.2s ease-in-out;
-}
-
-.slide-pane_from_left {
-  margin: 52px auto 0 0;
-  /* Keep pane from overflowing on smaller screens */
-  height: calc(100% - 52px);
-}
-
-.slide-pane__content {
-  padding: 6px 0;
-}
-
-.slide-pane__overlay {
-  z-index: 1000;
-}
-
-.app-menu {
-  margin: 0;
-  padding: 0.5rem 0;
-}
-
-.app-menu img,
-.app-menu svg {
-  max-height: 1em;
-  margin: 0 2rem;
-  vertical-align: middle;
-  width: 1em;
-}
-
-.app-menu a,
-.app-menu button {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  font-size: 20px;
-  padding: 0.5rem 0;
-  text-decoration: none;
-  width: 100%;
-}
-
-/* Prevents hover styles from getting triggered on mobile */
-@media (hover: hover) {
-  .app-menu a:hover,
-  .app-menu button:hover {
-    color: #4c97f5;
-  }
-}
-
-.app-menu a:focus,
-.app-menu button:focus {
-  background-color: #ddd;
-  outline: 2px solid #4c97f5;
-  outline-offset: -2px;
-}
-
-.app-menu button[aria-selected="true"],
-.sort-option button[aria-selected="true"],
-#locale-selector button[aria-selected="true"] {
-  font-weight: bold;
-}
-
-.skip-nav-button {
-  color: initial;
-  position: fixed;
-  top: -30px;
-}
-.skip-nav-button:focus {
-  padding: 7px 24px;
-  top: 7px;
-  z-index: 100;
-}
-
-.view-switcher {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .view-switcher {
-    display: flex;
-  }
-}
-
-.expand-menu-chevron {
-  flex-grow: 1;
-  text-align: end;
-}
-
-.dropdown-header {
-  font-size: inherit;
-  line-height: normal;
-  color: inherit;
-  white-space: nowrap;
-}
-
-.sub-menu-container {
-  border-top: 1px solid #cccccc;
-  margin-top: 0.5rem;
-  padding-left: 2rem;
-}
-
-.app-menu .app-menu-divider {
-  border-bottom: 1px solid #ccc;
-  padding: 1rem 0;
-}
-
-/* Header image or title */
-/* If an icon is used, visually-hide the title (but keep it visible to screen readers). */
-.with-icon div.navbar-title {
-  height: 0;
-  overflow: hidden;
-  width: 0;
-}
-
 /* Buttons */
 
 button.header,
 button.step,
 .clear-button-formatting {
   background: transparent;
-  color: inherit;
   border: 0;
+  color: inherit;
+  margin: 0;
+  padding: 0;
   text-align: inherit;
   text-decoration: none;
-  padding: 0;
-  margin: 0;
 }
 
 .clear-button-formatting:active {
@@ -217,9 +53,9 @@ button.step {
 }
 
 .overflow-ellipsis {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .map-container .leaflet-top {
diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 39291f813..e4d5ab1a2 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -509,6 +509,10 @@ export const fetchNearby = (position, radius, currentServiceWeek) => {
 
 export const findStopTimesForStop = (params) =>
   function (dispatch, getState) {
+    // If the stop is already in the store, don't fetch it again, unless we are forcing a refetch
+    if (!params.forceFetch && getState().otp.transitIndex.stops[params.stopId])
+      return
+
     dispatch(fetchingStopTimesForStop(params))
     const { date, stopId } = params
     const timeZone = getState().otp.config.homeTimezone
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index cdd0691da..a548a43bc 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -47,6 +47,9 @@ const viewRoute = createAction('SET_VIEWED_ROUTE')
 export const toggleAutoRefresh = createAction('TOGGLE_AUTO_REFRESH')
 const settingItineraryView = createAction('SET_ITINERARY_VIEW')
 export const setPopupContent = createAction('SET_POPUP_CONTENT')
+export const setNetworkConnectionLost = createAction(
+  'SET_NETWORK_CONNECTION_LOST'
+)
 
 // This code-less action calls the reducer code
 // and thus resets the session timeout.
diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index 87fe44222..697857947 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -1,8 +1,8 @@
 /* application menu styling */
 
 .app-menu-button {
-  border: none;
   background: none;
+  border: none;
   color: #fff;
   font-size: 24px;
   padding: 0px 0px;
@@ -21,10 +21,10 @@
 .app-menu .btn-default:active,
 .app-menu .open > .dropdown-toggle.btn-default:focus,
 .app-menu .open > .dropdown-toggle.btn-default {
-  color: #fff;
   background: none;
-  box-shadow: none;
   border: none;
+  box-shadow: none;
+  color: #fff;
 }
 
 .app-menu .btn-default:hover {
@@ -47,36 +47,266 @@
   }
 }
 
+/* Navbar settings */
+
+.navbar .navbar-header {
+  display: grid;
+  grid-template-columns: 300px auto 170px;
+}
+
+.navbar .navbar-nav {
+  grid-column: 3;
+  margin: 0;
+}
+
+.navbar .navbar-brand {
+  align-items: center;
+  display: flex;
+  gap: 25px;
+  grid-column: 1 / span 1;
+  width: 100%;
+}
+
+.view-switcher {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+@media (min-width: 992px) {
+  .view-switcher {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 100%
+  }
+}
+
+
+@media (max-width: 768px) {
+  .navbar .navbar-header {
+    grid-template-columns: 50px auto 70px;
+    width: auto !important;
+
+  }
+
+  .navbar .navbar-brand {
+    gap: 15px;
+    grid-column: 1 / span 2;
+    padding: 10px;
+  }
+
+  .view-switcher {
+    display: none;
+}
+
+}
+
+/* Mobile navbar */
+.mobile-navbar-container .navbar-header {
+  display: block;
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: center;
+  width: 25px;
+}
+
+.mobile-navbar-container .mobile-header {
+  grid-row: 1;
+  height: 100%;
+  justify-self: center;
+}
+
+.mobile-navbar-container .locale-selector-and-login {
+  grid-row: 1;
+  height: 50px;
+  justify-self: flex-end;
+}
+
+.mobile-navbar-container .container-fluid {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 50px auto 70px;
+  grid-template-rows: 50px;
+  padding: 0;
+}
+
+/* New app menu */
+.app-menu-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 15px;
+  justify-content: space-between;
+  padding: 0;
+  transition: all 1s ease;
+  width: 21px;
+  z-index: 10;
+}
+
+@media only screen and (max-width: 768px) {
+  #locale-selector-wrapper {
+    display: none;
+  }
+  .app-menu-icon {
+    left: 15px;
+  }
+}
+
+.app-menu-icon .menu-line {
+  border-bottom: 3px solid #ffffff;
+  display: block;
+  position: relative;
+  transition: all 0.5s ease;
+  width: 100%;
+}
+
+.app-menu-icon[aria-expanded="true"] .menu-line.top {
+  top: 7px;
+  transform: rotate(45deg);
+}
+.app-menu-icon[aria-expanded="true"] .menu-line.bottom {
+  bottom: 5px;
+  transform: rotate(-45deg);
+}
+.app-menu-icon[aria-expanded="true"] .menu-line.middle {
+  display: none;
+}
+
+.slide-pane {
+  transition: all 0.2s ease-in-out;
+}
+
+.slide-pane_from_left {
+  /* Keep pane from overflowing on smaller screens */
+  height: calc(100% - 52px);
+  margin: 52px auto 0 0;
+}
+
+.slide-pane__content {
+  padding: 6px 0;
+}
+
+.slide-pane__overlay {
+  z-index: 1000;
+}
+
+.app-menu {
+  margin: 0;
+  padding: 0.5rem 0;
+}
+
+.app-menu img,
+.app-menu svg {
+  margin: 0 2rem;
+  max-height: 1em;
+  vertical-align: middle;
+  width: 1em;
+}
+
+.app-menu a,
+.app-menu button {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font-size: 20px;
+  padding: 0.5rem 0;
+  text-decoration: none;
+  width: 100%;
+}
+
+/* Prevents hover styles from getting triggered on mobile */
+@media (hover: hover) {
+  .app-menu a:hover,
+  .app-menu button:hover {
+    color: #4c97f5;
+  }
+}
+
+.app-menu a:focus,
+.app-menu button:focus {
+  background-color: #ddd;
+  outline: 2px solid #4c97f5;
+  outline-offset: -2px;
+}
+
+.app-menu button[aria-selected="true"],
+.sort-option button[aria-selected="true"],
+#locale-selector button[aria-selected="true"] {
+  font-weight: bold;
+}
+
+.skip-nav-button {
+  color: initial;
+  position: fixed;
+  top: -30px;
+}
+.skip-nav-button:focus {
+  padding: 7px 24px;
+  top: 7px;
+  z-index: 100;
+}
+
+.expand-menu-chevron {
+  flex-grow: 1;
+  text-align: end;
+}
+
+.dropdown-header {
+  color: inherit;
+  font-size: inherit;
+  line-height: normal;
+  white-space: nowrap;
+}
+
+.sub-menu-container {
+  border-top: 1px solid #cccccc;
+  margin-top: 0.5rem;
+  padding-left: 2rem;
+}
+
+.app-menu .app-menu-divider {
+  border-bottom: 1px solid #ccc;
+  padding: 1rem 0;
+}
+
+/* Header image or title */
+/* If an icon is used, visually-hide the title (but keep it visible to screen readers). */
+.with-icon div.navbar-title {
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
 /* PrintLayout styles */
 
 .otp.print-layout {
-  max-width: 640px;
   margin: 30px auto;
+  max-width: 640px;
 }
 
 .otp.print-layout > .header {
-  margin-bottom: 30px;
   border-bottom: 4px solid black;
   font-size: 36px;
   font-weight: 600;
+  margin-bottom: 30px;
 }
 
 .otp.print-layout > .map-container {
   border: 2px solid black;
+  box-sizing: border-box;
   height: 400px;
   margin-bottom: 30px;
-  box-sizing: border-box;
 }
 
 /* View Switcher Styling */
-.view-switcher {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
 .view-switcher a {
-  color: rgba(255, 255, 255, 0.85);
   border-radius: 15px;
+  color: rgba(255, 255, 255, 0.85);
   font-size: 14px;
   padding: 6px 12px;
   user-select: none;
@@ -98,8 +328,8 @@
 
 /* Full screen modal styling */
 .fullscreen-modal {
-  width: 75vw;
   height: 60vh;
+  width: 75vw;
 }
 .fullscreen-modal .modal-content {
   height: 90vh;
@@ -108,6 +338,9 @@
   height: 100%;
   width: 100%;
 }
+.otp .navbar {
+  z-index: 25;
+}
 
 /** These changes kick in when the map is hidden. These rules ensure that the entire "sidebar"
     (which at this point fills the entire screen) scrolls as a single unit.
diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx
index 6ca1f6da2..30001e1b3 100644
--- a/lib/components/app/batch-routing-panel.tsx
+++ b/lib/components/app/batch-routing-panel.tsx
@@ -25,6 +25,7 @@ import ViewerContainer from '../viewers/viewer-container'
 interface Props {
   activeSearch: any
   currentQuery: any
+  geocoderResultsOrder?: Array<string>
   intl: IntlShape
   mainPanelContent: number
   mobile?: boolean
@@ -89,7 +90,13 @@ class BatchRoutingPanel extends Component<Props> {
   }
 
   render() {
-    const { activeSearch, intl, mobile, showUserSettings } = this.props
+    const {
+      activeSearch,
+      geocoderResultsOrder,
+      intl,
+      mobile,
+      showUserSettings
+    } = this.props
     const { planTripClicked } = this.state
     const mapAction = mobile
       ? intl.formatMessage({
@@ -157,6 +164,7 @@ class BatchRoutingPanel extends Component<Props> {
                   <div ref={this._mainPanelContentRef}>
                     <span className="batch-routing-panel-location-fields">
                       <LocationField
+                        geocoderResultsOrder={geocoderResultsOrder}
                         inputPlaceholder={intl.formatMessage(
                           { id: 'common.searchForms.enterStartLocation' },
                           { mapAction }
@@ -167,6 +175,7 @@ class BatchRoutingPanel extends Component<Props> {
                         showClearButton={!mobile}
                       />
                       <LocationField
+                        geocoderResultsOrder={geocoderResultsOrder}
                         inputPlaceholder={intl.formatMessage(
                           { id: 'common.searchForms.enterDestination' },
                           { mapAction }
@@ -236,9 +245,11 @@ const mapStateToProps = (state: any) => {
   const { mainPanelContent } = state.otp.ui
   const currentQuery = state.otp.currentQuery
 
+  const geocoderResultsOrder = state.otp.config?.geocoder?.geocoderResultsOrder
   return {
     activeSearch: getActiveSearch(state),
     currentQuery,
+    geocoderResultsOrder,
     mainPanelContent,
     showUserSettings
   }
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index f9a265b86..8ce6df8d9 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -13,14 +13,15 @@ import { DEFAULT_APP_TITLE } from '../../util/constants'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import NavLoginButtonAuth0 from '../user/nav-login-button-auth0'
 
+import { NetworkConnectionBanner } from './network-connection-banner'
 import AppMenu, { Icon } from './app-menu'
 import LocaleSelector from './locale-selector'
 import NavbarItem from './nav-item'
 import ViewSwitcher from './view-switcher'
 
 const StyledNav = styled(Nav)`
-  /* Almost override bootstrap's margin-right: -15px */
-  margin-right: -5px;
+  display: flex;
+  justify-content: end;
   /* Target only the svgs in the Navbar */
   & > li > button > svg,
   & > li > span > button > span > svg {
@@ -41,10 +42,6 @@ const StyledNav = styled(Nav)`
       padding: 15px;
       line-height: 20px;
 
-      @media (max-width: 768px) {
-        padding: 10px;
-      }
-
       &:hover {
         background: rgba(0, 0, 0, 0.05);
         color: #ececec;
@@ -63,6 +60,7 @@ const NavItemOnLargeScreens = styled(NavbarItem)`
 // Typscript TODO: otpConfig type
 export type Props = {
   locale: string
+  networkConnectionLost: boolean
   otpConfig: AppConfig
   popupTarget?: string
   setPopupContent: (url: string) => void
@@ -83,6 +81,7 @@ export type Props = {
  */
 const DesktopNav = ({
   locale,
+  networkConnectionLost,
   otpConfig,
   popupTarget,
   setPopupContent
@@ -99,18 +98,14 @@ const DesktopNav = ({
 
   const BrandingElement = brandClickable ? 'a' : 'div'
 
-  const commonStyles = { marginLeft: 50 }
-  const brandingProps = brandClickable
-    ? {
-        href: '/#/',
-        style: {
-          ...commonStyles,
-          display: 'block',
-          position: 'relative',
-          zIndex: 10
-        }
-      }
-    : { style: { ...commonStyles } }
+  const brandingProps = brandClickable && {
+    href: '/#/',
+    style: {
+      display: 'block',
+      position: 'relative',
+      zIndex: 10
+    }
+  }
   const popupButtonText =
     popupTarget &&
     intl.formatMessage({
@@ -142,7 +137,7 @@ const DesktopNav = ({
             )}
           </Navbar.Brand>
 
-          <ViewSwitcher sticky />
+          <ViewSwitcher />
 
           <StyledNav pullRight>
             {popupTarget && (
@@ -166,6 +161,7 @@ const DesktopNav = ({
           </StyledNav>
         </Navbar.Header>
       </Navbar>
+      <NetworkConnectionBanner networkConnectionLost={networkConnectionLost} />
     </header>
   )
 }
@@ -173,8 +169,10 @@ const DesktopNav = ({
 // connect to the redux store
 const mapStateToProps = (state: AppReduxState) => {
   const { config: otpConfig } = state.otp
+  const { networkConnectionLost } = state.otp.ui.errors
   return {
     locale: state.otp.ui.locale,
+    networkConnectionLost,
     otpConfig,
     popupTarget: otpConfig.popups?.launchers?.toolbar
   }
diff --git a/lib/components/app/nav-item.tsx b/lib/components/app/nav-item.tsx
index d6cd2f9f9..9c4c92be8 100644
--- a/lib/components/app/nav-item.tsx
+++ b/lib/components/app/nav-item.tsx
@@ -19,10 +19,6 @@ export const NavbarButton = styled.button`
   padding: 15px;
   transition: all 0.1s ease-in-out;
 
-  @media (max-width: 768px) {
-    padding: 10px;
-  }
-
   &:hover,
   &[aria-expanded='true'] {
     background: rgba(0, 0, 0, 0.05);
diff --git a/lib/components/app/network-connection-banner.tsx b/lib/components/app/network-connection-banner.tsx
new file mode 100644
index 000000000..a323520ac
--- /dev/null
+++ b/lib/components/app/network-connection-banner.tsx
@@ -0,0 +1,83 @@
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import { FormattedMessage } from 'react-intl'
+import React, { useRef } from 'react'
+import styled from 'styled-components'
+
+import { RED_ON_WHITE } from '../util/colors'
+import InvisibleA11yLabel from '../util/invisible-a11y-label'
+
+const containerClassname = 'network-connection-banner'
+const timeout = 250
+
+const TransitionStyles = styled.div`
+  .${containerClassname} {
+    background: ${RED_ON_WHITE};
+    border-left: 1px solid #e7e7e7;
+    border-right: 1px solid #e7e7e7;
+    color: #fff;
+    font-weight: 600;
+    padding: 5px;
+    position: absolute;
+    text-align: center;
+    top: 50px;
+    width: 100%;
+    // When banner is fully loaded, set z-index higher than nav so we're not seeing the nav border.
+    z-index: 26;
+
+    @media (max-width: 768px) {
+      border: 0;
+    }
+  }
+  .${containerClassname}-enter {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  .${containerClassname}-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity ${timeout}ms ease-in;
+  }
+  .${containerClassname}-exit {
+    opacity: 1;
+    transform: translateY(0);
+    z-index: 20;
+  }
+  .${containerClassname}-exit-active {
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity ${timeout}ms ease-in, transform ${timeout}ms ease-in;
+    z-index: 20;
+  }
+`
+
+export const NetworkConnectionBanner = ({
+  networkConnectionLost
+}: {
+  networkConnectionLost: boolean
+}): JSX.Element => {
+  const connectionLostBannerRef = useRef<HTMLDivElement>(null)
+  return (
+    <TransitionStyles>
+      <InvisibleA11yLabel aria-live="assertive" role="status">
+        {networkConnectionLost ? (
+          <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+        ) : (
+          <FormattedMessage id="components.AppMenu.networkConnectionRestored" />
+        )}
+      </InvisibleA11yLabel>
+      <TransitionGroup style={{ display: 'content' }}>
+        {networkConnectionLost && (
+          <CSSTransition
+            classNames={containerClassname}
+            nodeRef={connectionLostBannerRef}
+            timeout={timeout}
+          >
+            <div className={containerClassname} ref={connectionLostBannerRef}>
+              <FormattedMessage id="components.AppMenu.networkConnectionLost" />
+            </div>
+          </CSSTransition>
+        )}
+      </TransitionGroup>
+    </TransitionStyles>
+  )
+}
diff --git a/lib/components/app/responsive-webapp.js b/lib/components/app/responsive-webapp.js
index 2b2a44dfc..ee4c3c684 100644
--- a/lib/components/app/responsive-webapp.js
+++ b/lib/components/app/responsive-webapp.js
@@ -154,10 +154,13 @@ class ResponsiveWebapp extends Component {
       map,
       matchContentToUrl,
       parseUrlQueryString,
-      receivedPositionResponse
+      receivedPositionResponse,
+      setNetworkConnectionLost
     } = this.props
     // Add on back button press behavior.
     window.addEventListener('popstate', handleBackButtonPress)
+    window.addEventListener('online', () => setNetworkConnectionLost(false))
+    window.addEventListener('offline', () => setNetworkConnectionLost(true))
 
     // If a URL is detected without hash routing (e.g., http://localhost:9966?sessionId=test),
     // window.location.search will have a value. In this case, we need to redirect to the URL root with the
@@ -180,10 +183,7 @@ class ResponsiveWebapp extends Component {
       navigator.geolocation.watchPosition(
         // On success
         (position) => {
-          // This object cloning is required to be allowed to read the position info twice
-          // on webkit browsers.
-          // See https://github.com/opentripplanner/otp-react-redux/pull/697 for details
-          receivedPositionResponse({ position: { ...position } })
+          receivedPositionResponse({ position })
         },
         // On error
         (error) => {
@@ -441,6 +441,7 @@ const mapStateToWrapperProps = (state) => {
 const mapWrapperDispatchToProps = {
   processSignIn: authActions.processSignIn,
   setLocale: uiActions.setLocale,
+  setNetworkConnectionLost: uiActions.setNetworkConnectionLost,
   showAccessTokenError: authActions.showAccessTokenError,
   showLoginError: authActions.showLoginError
 }
diff --git a/lib/components/app/view-switcher.tsx b/lib/components/app/view-switcher.tsx
index fc500f9b5..0bd47d5e8 100644
--- a/lib/components/app/view-switcher.tsx
+++ b/lib/components/app/view-switcher.tsx
@@ -3,14 +3,11 @@ import React from 'react'
 
 import Link from '../util/link'
 
-type Props = {
-  sticky?: boolean
-}
 /**
  * This component is a switcher between
  * the main views of the application.
  */
-const ViewSwitcher = ({ sticky }: Props) => {
+const ViewSwitcher = (): JSX.Element => {
   const intl = useIntl()
   return (
     <div
@@ -20,16 +17,6 @@ const ViewSwitcher = ({ sticky }: Props) => {
       className="view-switcher"
       id="view-switcher"
       role="group"
-      style={
-        sticky
-          ? {
-              height: '100%',
-              left: 0,
-              position: 'absolute',
-              width: '100%'
-            }
-          : {}
-      }
     >
       <Link to="/" tracking>
         <FormattedMessage id="components.BatchRoutingPanel.shortTitle" />
diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
index 0f0e99929..ccf3ea25d 100644
--- a/lib/components/form/advanced-settings-panel.tsx
+++ b/lib/components/form/advanced-settings-panel.tsx
@@ -133,15 +133,14 @@ const DtSelectorContainer = styled.div`
 `
 
 const MobilityProfileContainer = styled.div`
-  margin-bottom: 12px;
-`
-
-const UnderlinedLink = styled(Link)`
-  text-decoration: underline;
+  margin: 60px 0 60px 5px;
 `
 
 const MobilityProfileDropdown = styled(DropdownSelector)`
   margin: 20px 0px;
+  label {
+    padding-left: 0;
+  }
 `
 
 const AdvancedSettingsPanel = ({
diff --git a/lib/components/form/call-taker/advanced-options.js b/lib/components/form/call-taker/advanced-options.js
index de97254ce..891db3c4b 100644
--- a/lib/components/form/call-taker/advanced-options.js
+++ b/lib/components/form/call-taker/advanced-options.js
@@ -224,7 +224,7 @@ class AdvancedOptions extends Component {
           }}
         >
           {/* Show the first mode setting */}
-          {applicableModeSettings.length >= 1 && (
+          {applicableModeSettings?.length >= 1 && (
             <ModeSettingRenderer
               onChange={this._setCustomModeSetting}
               setting={applicableModeSettings[0]}
@@ -264,7 +264,7 @@ class AdvancedOptions extends Component {
         </Suspense>
         <div style={{ paddingTop: '8px' }}>
           {/* Show the remaining items after the first */}
-          {applicableModeSettings.length > 1 &&
+          {applicableModeSettings?.length > 1 &&
             applicableModeSettings
               .slice(1)
               .map((ms) => (
diff --git a/lib/components/form/call-taker/date-time-picker.tsx b/lib/components/form/call-taker/date-time-picker.tsx
index 282c104cc..96292df86 100644
--- a/lib/components/form/call-taker/date-time-picker.tsx
+++ b/lib/components/form/call-taker/date-time-picker.tsx
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { format, toDate } from 'date-fns-tz'
+import { format, OptionsWithTZ, toDate } from 'date-fns-tz'
 import { getCurrentTime } from '@opentripplanner/core-utils/lib/time'
 import { IntlShape, useIntl } from 'react-intl'
 import { isMatch, parse } from 'date-fns'
@@ -7,6 +7,10 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { useEffect, useRef, useState } from 'react'
 
+import { AppReduxState, FilterType, SortType } from '../../../util/state-types'
+import { DepartArriveTypeMap, DepartArriveValue } from '../date-time-modal'
+import { updateItineraryFilter } from '../../../actions/narrative'
+
 const { getCurrentDate, OTP_API_DATE_FORMAT, OTP_API_TIME_FORMAT } =
   coreUtils.time
 
@@ -56,7 +60,7 @@ const SUPPORTED_TIME_FORMATS = [
   'HH:mm'
 ]
 
-const safeFormat = (date: Date | '', time: string, options: any) => {
+const safeFormat = (date: Date | '', time: string, options?: OptionsWithTZ) => {
   if (date === '') return ''
   try {
     return format(date, time, options)
@@ -68,8 +72,9 @@ const safeFormat = (date: Date | '', time: string, options: any) => {
 
 type Props = {
   date?: string
-  departArrive?: string
+  departArrive?: DepartArriveValue
   homeTimezone: string
+  importedUpdateItineraryFilter: (payload: FilterType) => void
   onKeyDown: () => void
   setQueryParam: ({
     date,
@@ -80,6 +85,8 @@ type Props = {
     departArrive: string
     time: string
   }) => void
+  sort: SortType
+  syncSortWithDepartArrive?: boolean
   time?: string
   timeFormat: string
 }
@@ -101,12 +108,15 @@ const DateTimeOptions = ({
   date: initialDate,
   departArrive: initialDepartArrive,
   homeTimezone,
+  importedUpdateItineraryFilter,
   onKeyDown,
   setQueryParam,
+  sort,
+  syncSortWithDepartArrive,
   time: initialTime,
   timeFormat
 }: Props) => {
-  const [departArrive, setDepartArrive] = useState(
+  const [departArrive, setDepartArrive] = useState<DepartArriveValue>(
     initialDate || initialTime ? 'DEPART' : 'NOW'
   )
   const [date, setDate] = useState<string | undefined>(initialDate)
@@ -187,6 +197,18 @@ const DateTimeOptions = ({
         })
       })
     }
+
+    if (
+      syncSortWithDepartArrive &&
+      DepartArriveTypeMap[departArrive] !== sort.type
+    ) {
+      importedUpdateItineraryFilter({
+        sort: {
+          ...sort,
+          type: DepartArriveTypeMap[departArrive]
+        }
+      })
+    }
   }, [dateTime, departArrive, homeTimezone, setQueryParam])
 
   // Handler for updating the time and date fields when NOW is selected
@@ -209,8 +231,8 @@ const DateTimeOptions = ({
   return (
     <>
       <select
-        onBlur={(e) => setDepartArrive(e.target.value)}
-        onChange={(e) => setDepartArrive(e.target.value)}
+        onBlur={(e) => setDepartArrive(e.target.value as DepartArriveValue)}
+        onChange={(e) => setDepartArrive(e.target.value as DepartArriveValue)}
         onKeyDown={onKeyDown}
         value={departArrive}
       >
@@ -282,12 +304,19 @@ const DateTimeOptions = ({
 }
 
 // connect to the redux store
-const mapStateToProps = (state: any) => {
-  const { dateTime, homeTimezone } = state.otp.config
+const mapStateToProps = (state: AppReduxState) => {
+  const { dateTime, homeTimezone, itinerary } = state.otp.config
+  const syncSortWithDepartArrive = itinerary?.syncSortWithDepartArrive
+  const { sort } = state.otp.filter
   return {
     homeTimezone,
+    sort,
+    syncSortWithDepartArrive,
     timeFormat: dateTime?.timeFormat || 'h:mm a'
   }
 }
+const mapDispatchToProps = {
+  importedUpdateItineraryFilter: updateItineraryFilter
+}
 
-export default connect(mapStateToProps)(DateTimeOptions)
+export default connect(mapStateToProps, mapDispatchToProps)(DateTimeOptions)
diff --git a/lib/components/form/date-time-modal.tsx b/lib/components/form/date-time-modal.tsx
index e9f31407b..bd7082eef 100644
--- a/lib/components/form/date-time-modal.tsx
+++ b/lib/components/form/date-time-modal.tsx
@@ -21,9 +21,9 @@ type Props = {
   updateItineraryFilter: (payload: FilterType) => void
 }
 
-type DepartArriveValue = 'NOW' | 'DEPART' | 'ARRIVE'
+export type DepartArriveValue = 'NOW' | 'DEPART' | 'ARRIVE'
 
-const DepartArriveTypeMap: Record<
+export const DepartArriveTypeMap: Record<
   DepartArriveValue,
   FilterType['sort']['type']
 > = {
diff --git a/lib/components/map/default-map.tsx b/lib/components/map/default-map.tsx
index 412dc0382..00a552a81 100644
--- a/lib/components/map/default-map.tsx
+++ b/lib/components/map/default-map.tsx
@@ -319,6 +319,9 @@ class DefaultMap extends Component {
     const baseLayerUrls = baseLayersWithNames?.map((bl) => bl.url)
     const baseLayerNames = baseLayersWithNames?.map((bl) => bl.name)
 
+    const routeBasedTransitVehicleOverlayNameOverride =
+      overlays?.find((o) => o.type === 'vehicles-one-route')?.name || undefined
+
     return (
       <MapContainer className="percy-hide">
         <BaseMap
@@ -342,7 +345,13 @@ class DefaultMap extends Component {
           {/* The default overlays */}
           <EndpointsOverlay />
           <RouteViewerOverlay />
-          <TransitVehicleOverlay ModeIcon={ModeIcon} />
+          <TransitVehicleOverlay
+            id={routeBasedTransitVehicleOverlayNameOverride}
+            key={routeBasedTransitVehicleOverlayNameOverride}
+            ModeIcon={ModeIcon}
+            name={routeBasedTransitVehicleOverlayNameOverride}
+            visible
+          />
           <GeolocateControl
             onGeolocate={() => {
               getCurrentPosition(intl)
diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx
index 5be2cc8c7..47bff6735 100644
--- a/lib/components/mobile/batch-search-screen.tsx
+++ b/lib/components/mobile/batch-search-screen.tsx
@@ -40,12 +40,14 @@ const MobileSearchSettings = styled.div<{
   top: 50px;
   transition: ${(props) => `all ${props.transitionDuration}ms ease`};
   transition-delay: ${(props) => props.transitionDelay}ms;
-  /* Must appear under the 'hamburger' dropdown which has z-index of 1000. */
-  z-index: 999;
+  /* Must appear under the 'hamburger' dropdown which has z-index of 1000, and the "network lost"
+    banner which has a z-index of 10 */
+  z-index: 9;
 `
 
 interface Props {
   currentQuery: any
+  geocoderResultsOrder: Array<string>
   intl: IntlShape
   map: React.ReactElement
   routingQuery: any
@@ -91,7 +93,7 @@ class BatchSearchScreen extends Component<Props> {
   }
 
   render() {
-    const { intl } = this.props
+    const { geocoderResultsOrder, intl } = this.props
     const { planTripClicked, showAdvancedModeSettings } = this.state
 
     const transitionDelay = this.state.closeAdvancedSettingsWithDelay ? 300 : 0
@@ -126,6 +128,7 @@ class BatchSearchScreen extends Component<Props> {
                       style={{ display: 'content' }}
                     >
                       <LocationField
+                        geocoderResultsOrder={geocoderResultsOrder}
                         inputPlaceholder={intl.formatMessage({
                           id: 'components.LocationSearch.setOrigin'
                         })}
@@ -136,6 +139,7 @@ class BatchSearchScreen extends Component<Props> {
                         showClearButton={false}
                       />
                       <LocationField
+                        geocoderResultsOrder={geocoderResultsOrder}
                         inputPlaceholder={intl.formatMessage({
                           id: 'components.LocationSearch.setDestination'
                         })}
@@ -190,8 +194,10 @@ class BatchSearchScreen extends Component<Props> {
 
 const mapStateToProps = (state: any) => {
   const currentQuery = state.otp.currentQuery
+  const { geocoderResultsOrder } = state.otp.config.geocoder
   return {
-    currentQuery
+    currentQuery,
+    geocoderResultsOrder
   }
 }
 
diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css
index b1197cfbd..77a8ef225 100644
--- a/lib/components/mobile/mobile.css
+++ b/lib/components/mobile/mobile.css
@@ -3,29 +3,26 @@
 }
 
 .otp .mobile-bottom-button-container {
-  position: fixed;
   bottom: 0;
-  right: 0;
-  left: 0;
   height: 40px;
+  left: 0;
+  position: fixed;
+  right: 0;
 }
 
 /* Navbar settings */
 
 .otp.mobile .navbar {
-  margin-bottom: 0;
   border: none;
+  margin-bottom: 0;
 }
 
 .otp .navbar .mobile-header {
   align-items: center;
   display: flex;
-  height: 50px;
+  height: 100%;
   justify-content: center;
-  left: 50px;
   max-width: 90%;
-  position: fixed;
-  right: 50px;
   text-align: center;
 }
 
@@ -38,7 +35,6 @@
 
 @media (max-width: 768px) {
   .otp .navbar .mobile-header-text {
-    margin-top: 2px;
     word-break: break-all;
   }
 }
@@ -56,138 +52,132 @@
   border: none;
   color: white;
   font-size: 18px;
-  left: 7px;
-  position: fixed;
 }
 
 .otp .navbar .mobile-close {
-  position: fixed;
-  top: 4px;
-  right: 6px;
   color: white;
   font-size: 18px;
-}
-
-.otp .navbar-brand {
-  padding: 7px 10px;
+  position: fixed;
+  right: 6px;
+  top: 4px;
 }
 
 /* Welcome screen */
 
 .otp.mobile .welcome-location {
-  position: fixed;
-  top: 50px;
+  height: 60px;
   left: 0;
+  position: fixed;
   right: 0;
-  height: 60px;
+  top: 50px;
 }
 
 .otp.mobile .welcome-map {
-  position: fixed;
-  top: 110px;
+  bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
+  top: 110px;
 }
 
 /* Location search screen */
 
 .otp.mobile .location-search {
-  position: fixed;
-  top: 50px;
+  bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
+  top: 50px;
 }
 
 /* Main search screen */
 
 .otp.mobile .search-settings {
-  position: fixed;
-  top: 50px;
+  box-shadow: 3px 0px 12px #00000052;
+  height: 250px;
   left: 0;
+  position: fixed;
   right: 0;
-  height: 250px;
-  box-shadow: 3px 0px 12px #00000052;
+  top: 50px;
 }
 
 .otp.mobile .search-map {
-  position: fixed;
-  top: 300px;
+  bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
+  top: 300px;
 }
 
 /* Batch routing search screen */
 
 .otp.mobile .batch-search-map {
-  position: fixed;
-  top: 282px;
+  bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
+  top: 282px;
 }
 
 /* Detailed options screen */
 
 .otp.mobile .options-main-content {
-  position: fixed;
-  top: 50px;
-  left: 0;
-  right: 0;
   bottom: 55px;
-  overflow-y: auto;
+  left: 0;
   overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  right: 0;
+  top: 50px;
 }
 
 .otp.mobile .options-lower-tray {
-  position: fixed;
+  bottom: 0;
   height: 55px;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
 }
 
 /* Results screen: normal display */
 
 .otp.mobile .mobile-narrative-header {
-  position: fixed;
-  height: 40px;
-  left: 0;
-  right: 0;
   background-color: #444;
   color: #fff;
-  text-align: center;
   font-size: 20px;
   font-weight: 500;
+  height: 40px;
+  left: 0;
+  position: fixed;
+  right: 0;
+  text-align: center;
 }
 
 .otp.mobile .mobile-narrative-container {
-  position: fixed;
   bottom: 20px;
-  right: 0;
   left: 0;
   padding: 8px 12px;
+  position: fixed;
+  right: 0;
 }
 
 .otp.mobile .dots-container {
-  position: fixed;
   bottom: 0;
-  right: 0;
-  left: 0;
   height: 20px;
+  left: 0;
+  position: fixed;
+  right: 0;
   text-align: center;
 }
 
 .otp.mobile .dots-container .dot {
+  background-color: #ddd;
+  border-radius: 4px;
   display: inline-block;
-  width: 8px;
   height: 8px;
-  border-radius: 4px;
-  background-color: #ddd;
   margin: 0px 3px;
   vertical-align: 2px;
+  width: 8px;
 }
 
 .otp.mobile .dots-container .dot.active {
@@ -195,64 +185,64 @@
 }
 
 .otp.mobile .results-map {
-  position: fixed;
-  top: 100px;
+  bottom: 140px;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 140px;
+  top: 100px;
 }
 
 /* Results screen: error display */
 
 .otp.mobile .results-error-map {
-  position: fixed;
-  top: 100px;
+  height: 200px;
   left: 0;
+  position: fixed;
   right: 0;
-  height: 200px;
+  top: 100px;
 }
 
 .otp.mobile .results-error-message {
-  position: fixed;
-  left: 0;
-  right: 0;
   bottom: 0;
+  left: 0;
   padding-top: 12px;
+  position: fixed;
+  right: 0;
 }
 
 /* User Settings */
 
 .otp.mobile .user-settings {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   background-color: white;
-  position: fixed;
-  left: 0;
-  right: 0;
+  border-radius: 5px;
   bottom: 0;
-  margin-bottom: 18px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   height: 165px;
-  z-index: 999999;
+  left: 0;
+  margin-bottom: 18px;
   overflow-y: scroll;
-  border-radius: 5px;
+  position: fixed;
+  right: 0;
+  z-index: 999999;
 }
 
 /* Stop/Trip/Route Viewer screens */
 
 .otp.mobile .viewer-container {
-  position: fixed;
-  top: 250px;
   bottom: 0;
   left: 0;
-  right: 0;
   overflow-y: auto;
+  position: fixed;
+  right: 0;
+  top: 250px;
 }
 
 .otp.mobile .viewer-map {
-  position: fixed;
-  top: 50px;
+  height: 200px;
   left: 0;
+  position: fixed;
   right: 0;
-  height: 200px;
+  top: 50px;
 }
 
 .otp.mobile .route-viewer-header {
diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js
index 4426a244c..1e7b0079c 100644
--- a/lib/components/mobile/navigation-bar.js
+++ b/lib/components/mobile/navigation-bar.js
@@ -1,5 +1,6 @@
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
 import { connect } from 'react-redux'
+import { injectIntl } from 'react-intl'
 import { Navbar } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
@@ -8,7 +9,7 @@ import styled from 'styled-components'
 import * as uiActions from '../../actions/ui'
 import { accountLinks, getAuth0Config } from '../../util/auth'
 import { ComponentContext } from '../../util/contexts'
-import { injectIntl } from 'react-intl'
+import { NetworkConnectionBanner } from '../app/network-connection-banner'
 import { StyledIconWrapper } from '../util/styledIcon'
 import AppMenu from '../app/app-menu'
 import LocaleSelector from '../app/locale-selector'
@@ -32,6 +33,7 @@ class MobileNavigationBar extends Component {
     headerText: PropTypes.string,
     intl: PropTypes.object,
     locale: PropTypes.string,
+    networkConnectionLost: PropTypes.bool,
     onBackClicked: PropTypes.func,
     setMobileScreen: PropTypes.func,
     showBackButton: PropTypes.bool
@@ -55,6 +57,7 @@ class MobileNavigationBar extends Component {
       headerText,
       intl,
       locale,
+      networkConnectionLost,
       showBackButton
     } = this.props
 
@@ -111,6 +114,9 @@ class MobileNavigationBar extends Component {
             )}
           </MobileBar>
         </Navbar>
+        <NetworkConnectionBanner
+          networkConnectionLost={networkConnectionLost}
+        />
       </header>
     )
   }
@@ -123,7 +129,8 @@ const mapStateToProps = (state) => {
     auth0Config: getAuth0Config(state.otp.config.persistence),
     configLanguages: state.otp.config.language,
     extraMenuItems: state.otp?.config?.extraMenuItems,
-    locale: state.otp.ui.locale
+    locale: state.otp.ui.locale,
+    networkConnectionLost: state.otp.ui.errors.networkConnectionLost
   }
 }
 
diff --git a/lib/components/mobile/welcome-screen.tsx b/lib/components/mobile/welcome-screen.tsx
index 9a3492407..8fde116df 100644
--- a/lib/components/mobile/welcome-screen.tsx
+++ b/lib/components/mobile/welcome-screen.tsx
@@ -12,10 +12,14 @@ import MobileContainer from './container'
 import MobileNavigationBar from './navigation-bar'
 
 interface Props {
+  geocoderResultsOrder: Array<string>
   setMobileScreen: (screen: number) => void
 }
 
-const MobileWelcomeScreen = ({ setMobileScreen }: Props) => {
+const MobileWelcomeScreen = ({
+  geocoderResultsOrder,
+  setMobileScreen
+}: Props) => {
   const intl = useIntl()
 
   const toFieldClicked = useCallback(
@@ -33,6 +37,7 @@ const MobileWelcomeScreen = ({ setMobileScreen }: Props) => {
       <main tabIndex={-1}>
         <div className="welcome-location mobile-padding">
           <LocationField
+            geocoderResultsOrder={geocoderResultsOrder}
             inputPlaceholder={intl.formatMessage({
               id: 'components.WelcomeScreen.prompt'
             })}
@@ -56,4 +61,12 @@ const mapDispatchToProps = {
   setMobileScreen: uiActions.setMobileScreen
 }
 
-export default connect(null, mapDispatchToProps)(MobileWelcomeScreen)
+const mapStateToProps = (state: any) => {
+  const { geocoderResultsOrder } = state.otp.config.geocoder
+
+  return {
+    geocoderResultsOrder
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MobileWelcomeScreen)
diff --git a/lib/components/narrative/line-itin/connected-itinerary-body.js b/lib/components/narrative/line-itin/connected-itinerary-body.js
index 3a42c538c..7ca0c77dd 100644
--- a/lib/components/narrative/line-itin/connected-itinerary-body.js
+++ b/lib/components/narrative/line-itin/connected-itinerary-body.js
@@ -87,6 +87,8 @@ class ConnectedItineraryBody extends Component {
     const allowUserAlertCollapsing = config?.itinerary?.allowUserAlertCollapsing
     const showApproximatePrefixAccessLegs =
       config?.itinerary?.showApproximatePrefixAccessLegs
+    const showAlertEffectiveDateTimeText =
+      config?.itinerary?.showAlertEffectiveDateTimeText
 
     // Support OTP1 flex messages in Trip Details
     // Adding empty pickupBookingInfo and dropOffBookingInfo objects
@@ -139,6 +141,7 @@ class ConnectedItineraryBody extends Component {
             setMainPanelContent(MainPanelContent.TRIP_VIEWER)
           }}
           showAgencyInfo
+          showAlertEffectiveDateTimeText={showAlertEffectiveDateTimeText}
           showApproximateAccessLegTravelTimes={showApproximatePrefixAccessLegs}
           showElevationProfile={config.elevationProfile}
           showLegIcon
diff --git a/lib/components/narrative/loading.tsx b/lib/components/narrative/loading.tsx
index 6761eeae4..9b4749382 100644
--- a/lib/components/narrative/loading.tsx
+++ b/lib/components/narrative/loading.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 const Loading = ({ extraSmall, small }: Props): JSX.Element => {
   return (
-    <div className="text-center percy-hide">
+    <div className="text-center percy-hide loading-container">
       <StyledIconWrapper size={small ? '3x' : extraSmall ? '1x' : '5x'} spin>
         <Redo />
       </StyledIconWrapper>
diff --git a/lib/components/narrative/styled.js b/lib/components/narrative/styled.js
index 9ca966693..8381eef24 100644
--- a/lib/components/narrative/styled.js
+++ b/lib/components/narrative/styled.js
@@ -14,6 +14,11 @@ export const NarrativeItinerariesContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+
+  // Prevent the loading spinner from clipping the top of the container
+  .loading-container {
+    margin-top: 25px;
+  }
 `
 
 export const ULContainer = styled.ul`
diff --git a/lib/components/user/monitored-trip/trip-basics-pane.tsx b/lib/components/user/monitored-trip/trip-basics-pane.tsx
index ee8f9ae02..a238cb18b 100644
--- a/lib/components/user/monitored-trip/trip-basics-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-basics-pane.tsx
@@ -188,9 +188,8 @@ const RenderAvailableDays = ({
               title={notAvailableText}
             >
               <Field
-                // Let users save an existing trip, even though it may not be available on some days.
                 // TODO: improve checking trip availability.
-                disabled={isDayDisabled && isCreating}
+                disabled={isDayDisabled}
                 id={day}
                 name={day}
                 type="checkbox"
diff --git a/lib/components/user/monitored-trip/trip-status-rendering-strategies/base-renderer.js b/lib/components/user/monitored-trip/trip-status-rendering-strategies/base-renderer.js
index 612135199..54d2a5d50 100644
--- a/lib/components/user/monitored-trip/trip-status-rendering-strategies/base-renderer.js
+++ b/lib/components/user/monitored-trip/trip-status-rendering-strategies/base-renderer.js
@@ -4,18 +4,6 @@ import React from 'react'
 
 import FormattedDuration from '../../../util/formatted-duration'
 
-/**
- * Helper function that changes alert timestamps from milliseconds to seconds
- * for display using the alerts body component from itinerary-body.
- */
-function withAlertTimestampsInSeconds(alert) {
-  return {
-    ...alert,
-    effectiveEndDate: alert.effectiveEndDate / 1000,
-    effectiveStartDate: alert.effectiveStartDate / 1000
-  }
-}
-
 /**
  * Calculate commonly-used pieces of data used to render the trip status
  * component. The monitoredTrip param can be undefined.
@@ -63,9 +51,7 @@ export default function baseRenderer(monitoredTrip) {
 
   // Set some alert data if the matching itinerary exists.
   // (Convert alert timestamps in milliseconds to seconds for display using alerts body.)
-  data.alerts = data.matchingItinerary?.alerts?.map(
-    withAlertTimestampsInSeconds
-  )
+  data.alerts = data.matchingItinerary?.alerts
   data.hasMoreThanOneAlert = !!(data.alerts?.length > 0)
   data.shouldRenderAlerts = data.hasMoreThanOneAlert
 
diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index 3bb007cb1..417c18a36 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -13,11 +13,6 @@
   min-width: 0px;
 }
 
-.otp.mobile .navbar .container-fluid .locale-selector-and-login {
-  position: fixed;
-  right: 0;
-  top: 0;
-}
 .otp.mobile .navbar .container-fluid .locale-selector-and-login > li {
   display: inline-block;
 }
@@ -26,10 +21,10 @@
 }
 
 .navBarItem p {
-  padding: 5px 15px;
-  margin: 0;
-  font-weight: 600;
   font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  padding: 5px 15px;
 }
 
 .navBarItem ul {
@@ -50,5 +45,8 @@
   }
   #user-selector-label {
     background-color: transparent;
+    border: 0;
+    color: white;
+    height: 50px;
   }
 }
diff --git a/lib/components/viewers/stop-schedule-viewer.tsx b/lib/components/viewers/stop-schedule-viewer.tsx
index 51f85c967..8b62234c8 100644
--- a/lib/components/viewers/stop-schedule-viewer.tsx
+++ b/lib/components/viewers/stop-schedule-viewer.tsx
@@ -33,7 +33,11 @@ import TimezoneWarning from './timezone-warning'
 interface Props {
   calendarMax: string
   calendarMin: string
-  findStopTimesForStop: (arg: { date: string; stopId: string }) => void
+  findStopTimesForStop: (arg: {
+    date: string
+    forceFetch?: boolean
+    stopId: string
+  }) => void
   hideBackButton?: boolean
   homeTimezone: string
   intl: IntlShape
@@ -137,7 +141,7 @@ class StopScheduleViewer extends Component<Props, State> {
   _findStopTimesForDate = (date: string) => {
     const { findStopTimesForStop, stopId } = this.props
     if (stopId) {
-      findStopTimesForStop({ date, stopId })
+      findStopTimesForStop({ date, forceFetch: true, stopId })
     }
   }
 
diff --git a/lib/components/viewers/styled.ts b/lib/components/viewers/styled.ts
index 5509975be..8a870a84e 100644
--- a/lib/components/viewers/styled.ts
+++ b/lib/components/viewers/styled.ts
@@ -50,7 +50,7 @@ export const PatternContainer = styled.div`
   & > span {
     width: 85%;
 
-    button {
+    button#headsign-selector-label {
       align-items: center;
       display: flex;
       justify-content: space-between;
@@ -69,10 +69,10 @@ export const StopContainer = styled.ol<RenderProps>`
   color: ${(props) => props?.textColor || DARK_TEXT_GREY};
   background-color: ${(props) => props?.backgroundColor || '#fff'};
   overflow-y: scroll;
-  height: 100%;
-  /* 100px bottom padding is needed to ensure all stops 
-  are shown when browsers don't calculate 100% sensibly */
-  padding: 15px 0 100px;
+  /* Calculate the height of the container a little short to ensure all stops 
+  are shown when browsers don't calculate 100% sensibly. */
+  height: calc(100% - 140px);
+  padding: 15px 0 0px;
 `
 export const StopLink = styled.button<RenderProps>`
   color: ${(props) => props?.textColor + 'da' || DARK_TEXT_GREY};
diff --git a/lib/reducers/create-otp-reducer.js b/lib/reducers/create-otp-reducer.js
index e753c466c..9d66ab43b 100644
--- a/lib/reducers/create-otp-reducer.js
+++ b/lib/reducers/create-otp-reducer.js
@@ -225,6 +225,9 @@ export function getInitialState(userDefinedConfig) {
     },
     ui: {
       diagramLeg: null,
+      errors: {
+        networkConnectionLost: !navigator.onLine
+      },
       locale: null,
       localizedMessages: null,
       mainPanelContent: null,
@@ -1108,6 +1111,14 @@ function createOtpReducer(config) {
             }
           }
         })
+      case 'SET_NETWORK_CONNECTION_LOST':
+        return update(state, {
+          ui: {
+            errors: {
+              networkConnectionLost: { $set: action.payload }
+            }
+          }
+        })
       case 'SERVICE_TIME_RANGE_REQUEST':
         return update(state, {
           serviceTimeRange: { $set: { pending: true } }
diff --git a/lib/util/i18n.js b/lib/util/i18n.js
index 6f210c071..b17e001a6 100644
--- a/lib/util/i18n.js
+++ b/lib/util/i18n.js
@@ -97,8 +97,9 @@ async function loadOtpUiLocaleData(matchedLocale) {
       .filter((pkg) => pkg.startsWith('@opentripplanner'))
       .map(async (pkg) => {
         try {
+          const packagePath = pkg.replace('@opentripplanner/', '')
           const msgs = await import(
-            `../../node_modules/${pkg}/i18n/${matchedLocale}.yml`
+            `@opentripplanner/${packagePath}/i18n/${matchedLocale}.yml`
           )
           if (msgs) return msgs.default
         } catch (ex) {
diff --git a/package.json b/package.json
index 898bc9182..79c052fed 100644
--- a/package.json
+++ b/package.json
@@ -50,10 +50,10 @@
     "@opentripplanner/geocoder": "^3.0.2",
     "@opentripplanner/humanize-distance": "^1.2.0",
     "@opentripplanner/icons": "3.0.1",
-    "@opentripplanner/itinerary-body": "6.0.3",
-    "@opentripplanner/location-field": "3.0.0",
+    "@opentripplanner/location-field": "3.1.1",
+    "@opentripplanner/itinerary-body": "6.1.0",
     "@opentripplanner/location-icon": "^1.4.1",
-    "@opentripplanner/map-popup": "5.1.0",
+    "@opentripplanner/map-popup": "5.1.1",
     "@opentripplanner/otp2-tile-overlay": "2.1.1",
     "@opentripplanner/park-and-ride-overlay": "3.0.0",
     "@opentripplanner/printable-itinerary": "3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 989268574..1c1df6718 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2513,28 +2513,6 @@
     isomorphic-mapzen-search "^1.6.1"
     lodash.memoize "^4.1.2"
 
-"@opentripplanner/geocoder@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-3.0.2.tgz#2c7618947d1d9b082bd39d037327c9cf23282782"
-  integrity sha512-pl7tCiodex0hXWKLH3WE+I+HzoSgOOWp9kR3xMcuRiE5g6k2JXNneoD/ZfSS1n6Oorxcjv3U2DbMSXT2j/39dQ==
-  dependencies:
-    "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
-    "@conveyal/lonlat" "^1.4.1"
-    "@leeoniya/ufuzzy" "^1.0.14"
-    isomorphic-mapzen-search "^1.6.1"
-    lodash.memoize "^4.1.2"
-
-"@opentripplanner/geocoder@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-3.0.2.tgz#2c7618947d1d9b082bd39d037327c9cf23282782"
-  integrity sha512-pl7tCiodex0hXWKLH3WE+I+HzoSgOOWp9kR3xMcuRiE5g6k2JXNneoD/ZfSS1n6Oorxcjv3U2DbMSXT2j/39dQ==
-  dependencies:
-    "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
-    "@conveyal/lonlat" "^1.4.1"
-    "@leeoniya/ufuzzy" "^1.0.14"
-    isomorphic-mapzen-search "^1.6.1"
-    lodash.memoize "^4.1.2"
-
 "@opentripplanner/humanize-distance@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@opentripplanner/humanize-distance/-/humanize-distance-1.2.0.tgz#71cf5d5d1b756adef15300edbba0995ccd4b35ee"
@@ -2564,10 +2542,10 @@
     "@opentripplanner/core-utils" "^11.4.4"
     prop-types "^15.7.2"
 
-"@opentripplanner/itinerary-body@6.0.3", "@opentripplanner/itinerary-body@^6.0.0":
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-6.0.3.tgz#84573d20ac9cc1fc7f2d2e032fac5a072ac3e142"
-  integrity sha512-1qrH8hpR5Rr9KMGNnajI7GJyuoV+rogmyGqd5Z5DErZGp4luVzksIsnyW1IbxRslnV3bqKll+DH8lTXy4QIyZg==
+"@opentripplanner/itinerary-body@6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-6.1.0.tgz#8a1399e8dc15b6918ede51a0f263519e4b891415"
+  integrity sha512-nv42+hJavdVS5nHtKLDv1Um04patzGD+/xh3zApgxpB9xG/D2Zy4JBqbyMtZ1eHKF4JYkmm+NsAq/7043WPXGA==
   dependencies:
     "@opentripplanner/core-utils" "^12.0.0"
     "@opentripplanner/humanize-distance" "^1.2.0"
@@ -2600,13 +2578,31 @@
     react-resize-detector "^4.2.1"
     string-similarity "^4.0.4"
 
-"@opentripplanner/location-field@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-3.0.0.tgz#a6f8743290cf088bcd589cf8e6b0d07a651b704a"
-  integrity sha512-wPb9l5pvSeocZ45K1E3Zeb4hDjJtP9tw/S0MQ3HXYEQSf+700n4CWXVXYReYJXJYriOzge5/2whjUPGTlJckWw==
+"@opentripplanner/location-field@3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/location-field/-/location-field-3.1.1.tgz#0658df4cfd47866153c8ae33fd60e991cdf94df0"
+  integrity sha512-Q9yhi3AVlnj8izrpJvxN+uVBjjtEDyFXUsJ0VhE9zevVpGzCh/gcGNzJY5EnP2IRDd/Szx6dPUogt3XJlHkHTQ==
+
+"@opentripplanner/itinerary-body@^6.0.0":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-6.0.3.tgz#84573d20ac9cc1fc7f2d2e032fac5a072ac3e142"
+  integrity sha512-1qrH8hpR5Rr9KMGNnajI7GJyuoV+rogmyGqd5Z5DErZGp4luVzksIsnyW1IbxRslnV3bqKll+DH8lTXy4QIyZg==
+  dependencies:
+    "@opentripplanner/core-utils" "^12.0.0"
+    "@opentripplanner/humanize-distance" "^1.2.0"
+    "@opentripplanner/icons" "^3.0.0"
+    "@opentripplanner/location-icon" "^1.4.1"
+    "@styled-icons/fa-solid" "^10.34.0"
+    "@styled-icons/foundation" "^10.34.0"
+    date-fns "^2.28.0"
+    date-fns-tz "^1.2.2"
+    flat "^5.0.2"
+    react-animate-height "^3.0.4"
+    react-resize-detector "^4.2.1"
+    string-similarity "^4.0.4"
   dependencies:
     "@conveyal/geocoder-arcgis-geojson" "^0.0.3"
-    "@opentripplanner/core-utils" "^11.4.4"
+    "@opentripplanner/core-utils" "^12.0.0"
     "@opentripplanner/geocoder" "^3.0.2"
     "@opentripplanner/humanize-distance" "^1.2.0"
     "@opentripplanner/location-icon" "^1.4.1"
@@ -2621,10 +2617,10 @@
     "@styled-icons/fa-regular" "^10.34.0"
     "@styled-icons/fa-solid" "^10.34.0"
 
-"@opentripplanner/map-popup@5.1.0", "@opentripplanner/map-popup@^v5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-5.1.0.tgz#cf6374bf7b69af69c026ec414a84719078c56e9e"
-  integrity sha512-EShoMyFZa7Zb2ZZrJhEsJfuCAvs2jfQe5QstU+AEk5Jm1zc8LzU6PsXmizQ/RMVi6zIYLhlBoZ3u458tTA3VQA==
+"@opentripplanner/map-popup@5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-5.1.1.tgz#f4699b63a2ba0fae6263f2417c5b85f5ffc204cb"
+  integrity sha512-HifqZFmrBy3FmARVKZwUnad8U/L8ftBm2PcSck4oGQ768E7TKhqyzXz+GzkO39TyKNU5yiNgmQEbss8elZuJ/g==
   dependencies:
     "@opentripplanner/base-map" "^4.0.0"
     "@opentripplanner/building-blocks" "^2.0.0"
@@ -2643,6 +2639,17 @@
     "@opentripplanner/from-to-location-picker" "^2.1.14"
     flat "^5.0.2"
 
+"@opentripplanner/map-popup@^v5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-5.1.0.tgz#cf6374bf7b69af69c026ec414a84719078c56e9e"
+  integrity sha512-EShoMyFZa7Zb2ZZrJhEsJfuCAvs2jfQe5QstU+AEk5Jm1zc8LzU6PsXmizQ/RMVi6zIYLhlBoZ3u458tTA3VQA==
+  dependencies:
+    "@opentripplanner/base-map" "^4.0.0"
+    "@opentripplanner/building-blocks" "^2.0.0"
+    "@opentripplanner/core-utils" "^12.0.0"
+    "@opentripplanner/from-to-location-picker" "^3.0.0"
+    flat "^5.0.2"
+
 "@opentripplanner/otp2-tile-overlay@2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@opentripplanner/otp2-tile-overlay/-/otp2-tile-overlay-2.1.1.tgz#3bd2f26caa01181eb4ca90bbd05ce784f9b05a7a"
@@ -12869,9 +12876,9 @@ nan@^2.12.1:
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
 nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
 nanomatch@^1.2.9:
   version "1.2.13"