diff --git a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
index 99c8081e9..ae77c1873 100644
--- a/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
+++ b/__tests__/components/viewers/__snapshots__/nearby-view.js.snap
@@ -45,7 +45,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-fTACoA bTJfzH nearby-view base-color-bg"
+            className="sc-hJxDiT glQFJm nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -84,7 +84,7 @@ exports[`components > viewers > nearby view renders nothing on a blank page 1`]
               }
             >
               <ol
-                className="sc-ehsPLh bsdzfb base-color-bg"
+                className="sc-gGTEWt jlrUaT base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4078,7 +4078,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
           className="nearby-view base-color-bg"
         >
           <div
-            className="sc-fTACoA bTJfzH nearby-view base-color-bg"
+            className="sc-hJxDiT glQFJm nearby-view base-color-bg"
           >
             <Connect(PageTitle)
               title="components.NearbyView.header"
@@ -4117,7 +4117,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
               }
             >
               <ol
-                className="sc-ehsPLh bsdzfb base-color-bg"
+                className="sc-gGTEWt jlrUaT base-color-bg"
                 style={
                   Object {
                     "marginTop": 0,
@@ -4221,15 +4221,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -4310,7 +4310,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4329,7 +4329,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -4652,15 +4652,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -4741,7 +4741,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -4760,7 +4760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -5083,15 +5083,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -5172,7 +5172,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -5191,7 +5191,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -7704,7 +7704,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -10014,11 +10014,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-dcwqsv cgJxka"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-ehsPLh iOmSFF"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 2
@@ -10030,7 +10030,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-iuAqRD hHHNdT"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -10049,7 +10049,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-DJgqy fxDimN"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -11481,7 +11481,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-gUUBao cxDnXi"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -11657,7 +11657,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -11705,7 +11705,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -11732,7 +11732,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -11879,10 +11879,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -11893,7 +11893,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -11905,7 +11905,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12039,10 +12039,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12053,7 +12053,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12065,7 +12065,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -12467,7 +12467,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -12515,7 +12515,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -12542,7 +12542,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -12689,10 +12689,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -12703,7 +12703,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -12715,7 +12715,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -13207,7 +13207,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -13255,7 +13255,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -13282,7 +13282,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -13429,10 +13429,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -13443,7 +13443,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -13455,7 +13455,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -15327,7 +15327,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -16833,11 +16833,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-dcwqsv cgJxka"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-ehsPLh iOmSFF"
                                       >
                                         <span>
                                           Roosevelt
@@ -16849,7 +16849,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-iuAqRD hHHNdT"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -16868,7 +16868,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-DJgqy fxDimN"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -17898,7 +17898,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-gUUBao cxDnXi"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -18009,7 +18009,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18057,7 +18057,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho cyqbfo"
+                                                    className="sc-liccgK eRJBLr"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -18084,7 +18084,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -18692,7 +18692,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -18740,7 +18740,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho cyqbfo"
+                                                    className="sc-liccgK eRJBLr"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -18767,7 +18767,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -19182,7 +19182,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -19230,7 +19230,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho cyqbfo"
+                                                    className="sc-liccgK eRJBLr"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -19257,7 +19257,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -19911,15 +19911,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -20000,7 +20000,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20019,7 +20019,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20342,15 +20342,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -20431,7 +20431,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20450,7 +20450,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -20773,15 +20773,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -20862,7 +20862,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -20881,7 +20881,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -23702,7 +23702,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -26320,11 +26320,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-dcwqsv cgJxka"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-ehsPLh iOmSFF"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 1
@@ -26336,7 +26336,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-iuAqRD hHHNdT"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -26355,7 +26355,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-DJgqy fxDimN"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -27941,7 +27941,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-gUUBao cxDnXi"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -28117,7 +28117,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -28165,7 +28165,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -28192,7 +28192,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -28339,10 +28339,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -28353,7 +28353,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -28365,7 +28365,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -28499,10 +28499,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -28513,7 +28513,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -28525,7 +28525,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -28940,7 +28940,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -28988,7 +28988,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -29015,7 +29015,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -29162,10 +29162,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -29176,7 +29176,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -29188,7 +29188,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -29477,10 +29477,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -29491,7 +29491,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -29503,7 +29503,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -29685,7 +29685,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -29733,7 +29733,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -29760,7 +29760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -30368,7 +30368,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -30416,7 +30416,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="988"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -30443,7 +30443,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -30787,15 +30787,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -30876,7 +30876,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -30895,7 +30895,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -31218,15 +31218,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -31307,7 +31307,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -31326,7 +31326,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -31649,15 +31649,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -31738,7 +31738,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -31757,7 +31757,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -32080,15 +32080,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -32169,7 +32169,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32188,7 +32188,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -32511,15 +32511,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -32600,7 +32600,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -32619,7 +32619,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -34328,7 +34328,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -35834,11 +35834,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-dcwqsv cgJxka"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-ehsPLh iOmSFF"
                                       >
                                         <span>
                                           Roosevelt Station Bay 5 - Bay 5
@@ -35850,7 +35850,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-iuAqRD hHHNdT"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -35869,7 +35869,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-DJgqy fxDimN"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -36899,7 +36899,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-gUUBao cxDnXi"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -37010,7 +37010,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37058,7 +37058,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -37085,7 +37085,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -37232,10 +37232,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -37246,7 +37246,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -37258,7 +37258,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -37815,7 +37815,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -37863,7 +37863,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -37890,7 +37890,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -38498,7 +38498,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -38546,7 +38546,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="984"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -38573,7 +38573,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -38917,15 +38917,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -39006,7 +39006,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -39025,7 +39025,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -41434,7 +41434,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -43640,11 +43640,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-dcwqsv cgJxka"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-ehsPLh iOmSFF"
                                       >
                                         <span>
                                           Roosevelt
@@ -43656,7 +43656,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-iuAqRD hHHNdT"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -43675,7 +43675,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-DJgqy fxDimN"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -45055,7 +45055,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-gUUBao cxDnXi"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -45322,7 +45322,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -45370,7 +45370,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="1 Line"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho cyqbfo"
+                                                    className="sc-liccgK eRJBLr"
                                                     color="28813F"
                                                     style={
                                                       Object {
@@ -45397,7 +45397,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -45544,10 +45544,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45558,7 +45558,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45570,7 +45570,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45704,10 +45704,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45718,7 +45718,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45730,7 +45730,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -45864,10 +45864,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -45878,7 +45878,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -45890,7 +45890,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -48564,7 +48564,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -51182,11 +51182,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-dcwqsv cgJxka"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-ehsPLh iOmSFF"
                                       >
                                         <span>
                                           Roosevelt Station - Bay 3
@@ -51198,7 +51198,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-iuAqRD hHHNdT"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -51217,7 +51217,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-DJgqy fxDimN"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -52803,7 +52803,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-gUUBao cxDnXi"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -52914,7 +52914,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -52962,7 +52962,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho jinUgQ"
+                                                    className="sc-liccgK rPcBj"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -52989,7 +52989,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53649,7 +53649,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -53697,7 +53697,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="67"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -53724,7 +53724,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -53871,10 +53871,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -53885,7 +53885,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -53897,7 +53897,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -54389,7 +54389,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -54437,7 +54437,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="522"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho jinUgQ"
+                                                    className="sc-liccgK rPcBj"
                                                     color="2B376E"
                                                     style={
                                                       Object {
@@ -54464,7 +54464,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -55189,7 +55189,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -55237,7 +55237,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="73"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -55264,7 +55264,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -55924,7 +55924,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -55972,7 +55972,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -55999,7 +55999,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -56633,7 +56633,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -56681,7 +56681,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="322"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -56708,7 +56708,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -57362,15 +57362,15 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <styled.div>
                               <div
-                                className="sc-iuAqRD gAoDco"
+                                className="sc-dcwqsv cgJxka"
                               >
                                 <styled.p>
                                   <p
-                                    className="sc-DJgqy jIxkFu"
+                                    className="sc-ehsPLh iOmSFF"
                                   >
                                     <IconWithText
                                       icon={
@@ -57451,7 +57451,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 >
                                   <styled.p>
                                     <p
-                                      className="sc-gUUBao eMZwka"
+                                      className="sc-iuAqRD hHHNdT"
                                     >
                                       <FormattedMessage
                                         id="components.NearbyView.distanceAway"
@@ -57470,7 +57470,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                             </styled.div>
                             <styled.div>
                               <div
-                                className="sc-hJxDiT gGpYuf"
+                                className="sc-DJgqy fxDimN"
                               >
                                 <Connect(FromToPicker)
                                   place={
@@ -59983,7 +59983,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                       >
                         <styled.div>
                           <div
-                            className="sc-hFXoIY cxosZU"
+                            className="sc-iumJeC blaAaE"
                           >
                             <Connect(StopCardHeader)
                               actionIcon={
@@ -62293,11 +62293,11 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               >
                                 <styled.div>
                                   <div
-                                    className="sc-iuAqRD gAoDco"
+                                    className="sc-dcwqsv cgJxka"
                                   >
                                     <styled.p>
                                       <p
-                                        className="sc-DJgqy jIxkFu"
+                                        className="sc-ehsPLh iOmSFF"
                                       >
                                         <span>
                                           NE 65th St & 14th Ave NE
@@ -62309,7 +62309,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                     >
                                       <styled.p>
                                         <p
-                                          className="sc-gUUBao eMZwka"
+                                          className="sc-iuAqRD hHHNdT"
                                         >
                                           <FormattedMessage
                                             id="components.NearbyView.distanceAway"
@@ -62328,7 +62328,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                 </styled.div>
                                 <styled.div>
                                   <div
-                                    className="sc-hJxDiT gGpYuf"
+                                    className="sc-DJgqy fxDimN"
                                   >
                                     <div>
                                       <FormattedMessage
@@ -63760,7 +63760,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                               <div />
                               <styled.ul>
                                 <ul
-                                  className="sc-cuWdqJ jWwXYb"
+                                  className="sc-gUUBao cxDnXi"
                                 >
                                   <PatternRow
                                     homeTimezone="America/Los_Angeles"
@@ -63936,7 +63936,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -63984,7 +63984,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="45"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -64011,7 +64011,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64158,10 +64158,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64172,7 +64172,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64184,7 +64184,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -64318,10 +64318,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64332,7 +64332,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64344,7 +64344,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -64746,7 +64746,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -64794,7 +64794,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="62"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -64821,7 +64821,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -64968,10 +64968,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -64982,7 +64982,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -64994,7 +64994,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
@@ -65486,7 +65486,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                       roundedTop={false}
                                     >
                                       <li
-                                        className="sc-clhTte ctsdph"
+                                        className="sc-lgqlnP fJJsyj"
                                       >
                                         <div
                                           className="header stop-view"
@@ -65534,7 +65534,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                   title="79"
                                                 >
                                                   <span
-                                                    className="sc-bTRMho hKYjYQ"
+                                                    className="sc-liccgK jfjFHH"
                                                     color="333333"
                                                     style={
                                                       Object {
@@ -65561,7 +65561,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                           </div>
                                           <styled.ol>
                                             <ol
-                                              className="sc-kJFuxL eQoNJh"
+                                              className="sc-huZMQ crhfPk"
                                             >
                                               <p
                                                 aria-hidden={true}
@@ -65708,10 +65708,10 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                         >
                                                           <Styled(Rss)>
                                                             <Rss
-                                                              className="sc-cipXqI jrJCvd"
+                                                              className="sc-gfaqzF bYPSMy"
                                                             >
                                                               <StyledIconBase
-                                                                className="sc-cipXqI jrJCvd"
+                                                                className="sc-gfaqzF bYPSMy"
                                                                 iconAttrs={
                                                                   Object {
                                                                     "fill": "currentColor",
@@ -65722,7 +65722,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 iconViewBox="0 0 448 512"
                                                               >
                                                                 <ForwardRef
-                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                  className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                   iconAttrs={
                                                                     Object {
                                                                       "fill": "currentColor",
@@ -65734,7 +65734,7 @@ exports[`components > viewers > nearby view renders proper scooter dates 1`] = `
                                                                 >
                                                                   <svg
                                                                     aria-hidden="true"
-                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-cipXqI jrJCvd"
+                                                                    className="StyledIconBase-sc-ea9ulj-0 fqiNOa sc-gfaqzF bYPSMy"
                                                                     fill="currentColor"
                                                                     focusable="false"
                                                                     viewBox="0 0 448 512"
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index cd877b1b8..f9a265b86 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -31,6 +31,26 @@ const StyledNav = styled(Nav)`
     margin-left: 5px;
     margin-right: -10px;
   }
+
+  .navBarItem {
+    position: static;
+    & > button {
+      background: transparent;
+      border: none;
+      color: white;
+      padding: 15px;
+      line-height: 20px;
+
+      @media (max-width: 768px) {
+        padding: 10px;
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.05);
+        color: #ececec;
+      }
+    }
+  }
 `
 
 const NavItemOnLargeScreens = styled(NavbarItem)`
diff --git a/lib/components/app/locale-selector.tsx b/lib/components/app/locale-selector.tsx
index a3681fe86..6e410aa6a 100644
--- a/lib/components/app/locale-selector.tsx
+++ b/lib/components/app/locale-selector.tsx
@@ -1,10 +1,10 @@
 import { connect } from 'react-redux'
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { GlobeAmericas } from '@styled-icons/fa-solid/GlobeAmericas'
 import { useIntl } from 'react-intl'
 import React from 'react'
 
 import * as uiActions from '../../actions/ui'
-import { Dropdown } from '../util/dropdown'
 import { getLanguageOptions } from '../../util/i18n'
 import { UnstyledButton } from '../util/unstyled-button'
 
@@ -23,11 +23,12 @@ const LocaleSelector = (props: LocaleSelectorProps): JSX.Element | null => {
   return languageOptions ? (
     <li>
       <Dropdown
+        className="navBarItem"
         id="locale-selector"
         label={intl.formatMessage({ id: 'components.SubNav.selectALanguage' })}
         listLabel={intl.formatMessage({ id: 'components.SubNav.languages' })}
-        name={<GlobeAmericas />}
         style={{ display: 'block ruby' }}
+        text={<GlobeAmericas />}
       >
         {Object.keys(languageOptions).map((locale: string) => (
           <li key={locale} lang={locale}>
diff --git a/lib/components/narrative/narrative-itineraries-header.tsx b/lib/components/narrative/narrative-itineraries-header.tsx
index 6d9615510..46fe56dff 100644
--- a/lib/components/narrative/narrative-itineraries-header.tsx
+++ b/lib/components/narrative/narrative-itineraries-header.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable complexity */
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { ExclamationTriangle } from '@styled-icons/fa-solid/ExclamationTriangle'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Itinerary } from '@opentripplanner/types'
@@ -11,7 +12,6 @@ import styled from 'styled-components'
 import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
 import { ItinerarySortOption } from '../../util/config-types'
 import { sortOptions } from '../util/sortOptions'
-import { SortResultsDropdown } from '../util/dropdown'
 import { UnstyledButton } from '../util/unstyled-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import PopupTriggerText from '../app/popup-trigger-text'
@@ -35,6 +35,12 @@ const ItinerariesHeaderContainer = styled.div<{ showHeaderText: boolean }>`
   margin-left: ${(props) => (props.showHeaderText ? 'inherit' : 'auto')};
 `
 
+const SortResultsDropdown = styled(Dropdown)`
+  button {
+    border: none;
+  }
+`
+
 export default function NarrativeItinerariesHeader({
   customBatchUiBackground,
   enabledSortModes,
@@ -209,7 +215,7 @@ export default function NarrativeItinerariesHeader({
             <SortResultsDropdown
               id="sort-results"
               label={sortResultsLabel}
-              name={sortText}
+              text={sortText}
               title={sortResultsLabel}
             >
               {sortOptionsArr.map((sortOption) => (
diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index 45fdc3bad..3bb007cb1 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -25,6 +25,18 @@
   background-color: #080808;
 }
 
+.navBarItem p {
+  padding: 5px 15px;
+  margin: 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.navBarItem ul {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
 #app-menu-locale-selector {
   display: none;
 }
diff --git a/lib/components/user/nav-login-button.tsx b/lib/components/user/nav-login-button.tsx
index c4dbf93f9..effee8aab 100644
--- a/lib/components/user/nav-login-button.tsx
+++ b/lib/components/user/nav-login-button.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { User } from '@auth0/auth0-react'
 import { User as UserIcon } from '@styled-icons/fa-regular/User'
 import React, { HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
-import { Dropdown } from '../util/dropdown'
 import { NewWindowIconA11y } from '../util/externalLink'
 import { UnstyledButton } from '../util/unstyled-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
@@ -64,9 +64,10 @@ const NavLoginButton = ({
     return (
       <li>
         <Dropdown
+          className="navBarItem"
           id="user-selector"
           label={intl.formatMessage({ id: 'components.SubNav.userMenu' })}
-          name={
+          text={
             <span>
               <Avatar
                 alt={displayedName}
@@ -75,51 +76,51 @@ const NavLoginButton = ({
               />
             </span>
           }
-          pullRight
         >
-          <li className="header">{displayedName}</li>
-
-          {links &&
-            links.map((link, i) => {
-              if (link.url.startsWith('http')) {
+          <p>{displayedName}</p>
+          <ul>
+            {links &&
+              links.map((link, i) => {
+                if (link.url.startsWith('http')) {
+                  return (
+                    <li key={link.url}>
+                      <NavUnstyledLink
+                        // Bypass our Link component and directly render an <a> element here,
+                        // so that the link works even when running the app locally.
+                        as="a"
+                        href={link.url}
+                        target="_blank"
+                      >
+                        <FormattedMessage id="components.NavLoginButton.help" />
+                        <NewWindowIconA11y
+                          size={12}
+                          style={{ marginLeft: '5px', marginTop: '-3px' }}
+                        />
+                      </NavUnstyledLink>
+                    </li>
+                  )
+                }
                 return (
                   <li key={link.url}>
-                    <NavUnstyledLink
-                      // Bypass our Link component and directly render an <a> element here,
-                      // so that the link works even when running the app locally.
-                      as="a"
-                      href={link.url}
-                      target="_blank"
-                    >
-                      <FormattedMessage id="components.NavLoginButton.help" />
-                      <NewWindowIconA11y
-                        size={12}
-                        style={{ marginLeft: '5px', marginTop: '-3px' }}
-                      />
+                    <NavUnstyledLink to={link.url}>
+                      {link.messageId === 'myAccount' ? ( // messageId is 'myAccount' or 'help'
+                        <FormattedMessage id="components.NavLoginButton.myAccount" />
+                      ) : (
+                        <FormattedMessage id="components.NavLoginButton.help" />
+                      )}
                     </NavUnstyledLink>
                   </li>
                 )
-              }
-              return (
-                <li key={link.url}>
-                  <NavUnstyledLink to={link.url}>
-                    {link.messageId === 'myAccount' ? ( // messageId is 'myAccount' or 'help'
-                      <FormattedMessage id="components.NavLoginButton.myAccount" />
-                    ) : (
-                      <FormattedMessage id="components.NavLoginButton.help" />
-                    )}
-                  </NavUnstyledLink>
-                </li>
-              )
-            })}
+              })}
 
-          <hr role="presentation" />
+            <hr role="presentation" />
 
-          <li>
-            <UnstyledButton onClick={onSignOutClick}>
-              <FormattedMessage id="components.NavLoginButton.signOut" />
-            </UnstyledButton>
-          </li>
+            <li>
+              <UnstyledButton onClick={onSignOutClick}>
+                <FormattedMessage id="components.NavLoginButton.signOut" />
+              </UnstyledButton>
+            </li>
+          </ul>
         </Dropdown>
       </li>
     )
diff --git a/lib/components/util/dropdown.tsx b/lib/components/util/dropdown.tsx
deleted file mode 100644
index db7d51215..000000000
--- a/lib/components/util/dropdown.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import React, {
-  HTMLAttributes,
-  KeyboardEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from 'react'
-
-import { DARK_TEXT_GREY } from './colors'
-import { getEntryRelativeTo } from './get-entry-relative-to'
-import { NavbarButton } from '../app/nav-item'
-import styled from 'styled-components'
-
-interface Props extends HTMLAttributes<HTMLElement> {
-  id: string
-  label?: string
-  listLabel?: string
-  name?: JSX.Element | string
-  nav?: boolean
-  pullRight?: boolean
-}
-
-const DropdownButton = styled(NavbarButton)``
-
-const DropdownMenu = styled.ul`
-  background-clip: padding-box;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  color: ${DARK_TEXT_GREY};
-  list-style: none;
-  margin: 2px 0 0;
-  min-width: 160px;
-  padding: 5px 0;
-  position: absolute;
-  right: 0;
-  top: 100%;
-  width: 100%;
-  z-index: 1000;
-
-  hr {
-    margin: 0;
-    padding: 0;
-  }
-  a,
-  button,
-  li.header {
-    padding: 5px 15px;
-    text-align: start;
-    width: 100%;
-  }
-  a,
-  button {
-    cursor: pointer;
-  }
-  li.header {
-    cursor: default;
-    font-weight: 600;
-  }
-  li:not(.header):hover {
-    background: rgba(0, 0, 0, 0.1);
-  }
-`
-
-/**
- * Renders a dropdown menu. By default, only a passed "name" is rendered. If clicked,
- * a floating div is rendered below the "name" with list contents inside. Clicking anywhere
- * outside the floating div will close the dropdown.
- */
-export const Dropdown = ({
-  children,
-  className,
-  id,
-  label,
-  listLabel,
-  name,
-  pullRight,
-  style
-}: Props): JSX.Element => {
-  const [open, setOpen] = useState(false)
-  const containerRef = useRef<HTMLLIElement>(null)
-
-  const toggleOpen = useCallback(() => setOpen(!open), [open, setOpen])
-
-  // Argument for document.querySelectorAll to target focusable elements.
-  const queryId = `#${id} button, #${id}-label`
-
-  // Adding document event listeners allows us to close the dropdown
-  // when the user interacts with any part of the page that isn't the dropdown
-  useEffect(() => {
-    const handleExternalAction = (e: Event): void => {
-      if (!containerRef?.current?.contains(e.target as HTMLElement)) {
-        setOpen(false)
-      }
-    }
-    document.addEventListener('mousedown', handleExternalAction)
-    document.addEventListener('focusin', handleExternalAction)
-    document.addEventListener('keydown', handleExternalAction)
-    return () => {
-      document.removeEventListener('mousedown', handleExternalAction)
-      document.removeEventListener('focusin', handleExternalAction)
-      document.removeEventListener('keydown', handleExternalAction)
-    }
-  }, [containerRef])
-
-  const _handleKeyDown = useCallback(
-    (e: KeyboardEvent): void => {
-      const element = e.target as HTMLElement
-      switch (e.key) {
-        case 'ArrowUp':
-          e.preventDefault()
-          getEntryRelativeTo(queryId, element, -1)?.focus()
-          break
-        case 'ArrowDown':
-          e.preventDefault()
-          getEntryRelativeTo(queryId, element, 1)?.focus()
-          break
-        case 'Escape':
-          setOpen(false)
-          break
-        case ' ':
-        case 'Enter':
-          e.preventDefault()
-          element.click()
-          if (element.id === `${id}-label` || element.id === `${id}-wrapper`) {
-            toggleOpen()
-          }
-          break
-        default:
-      }
-    },
-    [id, toggleOpen]
-  )
-
-  return (
-    <span
-      className={className}
-      id={`${id}-wrapper`}
-      onKeyDown={_handleKeyDown}
-      ref={containerRef}
-      role="presentation"
-      style={{ float: pullRight ? 'right' : 'left' }}
-    >
-      <DropdownButton
-        // Only set aria-controls when the dropdown is open
-        // (otherwise, assistive technologies may not announce the dropdown correctly).
-        aria-controls={open ? id : undefined}
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        aria-label={label}
-        className={`${open && 'active'}`}
-        id={`${id}-label`}
-        onClick={toggleOpen}
-        style={style}
-        tabIndex={0}
-        title={label}
-      >
-        <span>{name}</span>
-        <span className="caret" role="presentation" />
-      </DropdownButton>
-      {open && (
-        <DropdownMenu
-          aria-label={listLabel}
-          aria-labelledby={listLabel ? undefined : `${id}-label`}
-          id={id}
-          onClick={toggleOpen}
-          role="list"
-          tabIndex={-1}
-        >
-          {children}
-        </DropdownMenu>
-      )}
-    </span>
-  )
-}
-
-export const SortResultsDropdown = styled(Dropdown)`
-  position: relative;
-
-  ${DropdownButton} {
-    background: #fff;
-    border-radius: 5px;
-    color: inherit;
-    padding: 3px 7px;
-
-    span.caret {
-      color: inherit;
-    }
-  }
-`
diff --git a/lib/components/viewers/route-details.tsx b/lib/components/viewers/route-details.tsx
index 594ea31a4..6f511cc03 100644
--- a/lib/components/viewers/route-details.tsx
+++ b/lib/components/viewers/route-details.tsx
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { Dropdown } from '@opentripplanner/building-blocks'
 import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
 import { getMostReadableTextColor } from '@opentripplanner/core-utils/lib/route'
 import { Stop, TransitOperator } from '@opentripplanner/types'
@@ -16,7 +17,6 @@ import {
   SetViewedStopHandler,
   ViewedRouteObject
 } from '../util/types'
-import { SortResultsDropdown } from '../util/dropdown'
 import { UnstyledButton } from '../util/unstyled-button'
 
 import {
@@ -38,6 +38,17 @@ const PatternSelectButton = styled(UnstyledButton)`
   }
 `
 
+const PatternSelectDropdown = styled(Dropdown)`
+  button {
+    float: right;
+  }
+
+  span,
+  span.caret {
+    color: #333;
+  }
+`
+
 interface Props {
   intl: IntlShape
   operator: TransitOperator
@@ -149,12 +160,11 @@ class RouteDetails extends Component<Props> {
             <HeadsignSelectLabel htmlFor="headsign-selector-label">
               <FormattedMessage id="components.RouteDetails.stopsTo" />
             </HeadsignSelectLabel>
-            <SortResultsDropdown
+            <PatternSelectDropdown
               id="headsign-selector"
               label={patternSelectLabel}
-              name={patternSelectName}
-              pullRight
               style={{ color: 'black' }}
+              text={patternSelectName}
             >
               {headsigns.map((h: PatternSummary) => (
                 <li key={h.id}>
@@ -166,7 +176,7 @@ class RouteDetails extends Component<Props> {
                   </PatternSelectButton>
                 </li>
               ))}
-            </SortResultsDropdown>
+            </PatternSelectDropdown>
           </PatternContainer>
         )}
         {pattern && (
@@ -175,7 +185,7 @@ class RouteDetails extends Component<Props> {
               style={{
                 fontSize: 'inherit',
                 fontWeight: 400,
-                margin: '0 0 10px 8px'
+                margin: '10px 0 10px 8px'
               }}
             >
               <FormattedMessage id="components.RouteViewer.stopsInDirectionOfTravel" />
diff --git a/lib/components/viewers/styled.ts b/lib/components/viewers/styled.ts
index 5f1c1a619..5509975be 100644
--- a/lib/components/viewers/styled.ts
+++ b/lib/components/viewers/styled.ts
@@ -28,10 +28,11 @@ export const LogoLinkContainer = styled.div`
 `
 export const HeadsignSelectLabel = styled.label`
   font-size: 18px;
+  margin-bottom: 0;
 `
 
 export const PatternContainer = styled.div`
-  align-items: flex-start;
+  align-items: center;
   background-color: inherit;
   color: inherit;
   display: flex;