diff --git a/lib/components/map/default-map.tsx b/lib/components/map/default-map.tsx
index 8effba14e..9862ebe5b 100644
--- a/lib/components/map/default-map.tsx
+++ b/lib/components/map/default-map.tsx
@@ -540,7 +540,7 @@ class DefaultMap extends Component<DefaultMapProps> {
           {typeof getCustomMapOverlays === 'function' &&
             getCustomMapOverlays(!itinerary && !pending)}
           <NavigationControl
-            position={navigationControlPosition || 'bottom-right'}
+            position={navigationControlPosition || 'top-left'}
           />
         </BaseMap>
       </MapContainer>
diff --git a/lib/components/mobile/batch-results-screen.js b/lib/components/mobile/batch-results-screen.js
index 3cb41c7c9..6fe0877c0 100644
--- a/lib/components/mobile/batch-results-screen.js
+++ b/lib/components/mobile/batch-results-screen.js
@@ -1,9 +1,5 @@
 /* eslint-disable react/prop-types */
-import { ArrowsAlt } from '@styled-icons/fa-solid/ArrowsAlt'
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { FormattedMessage } from 'react-intl'
-import { ListUl } from '@styled-icons/fa-solid/ListUl'
 import { useMap } from 'react-map-gl/maplibre'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { useEffect } from 'react'
@@ -16,7 +12,6 @@ import {
   getResponsesWithErrors
 } from '../../util/state'
 import { getItineraryView, ItineraryView } from '../../util/ui'
-import { IconWithText } from '../util/styledIcon'
 import Map from '../map/map'
 import NarrativeItineraries from '../narrative/narrative-itineraries'
 
@@ -39,19 +34,15 @@ const StyledMobileContainer = styled(MobileContainer)`
   }
 `
 
-const ExpandMapButton = styled(Button)`
-  bottom: 10px;
-  left: 10px;
-  position: absolute;
-  z-index: 999999;
-`
-
-const NARRATIVE_SPLIT_TOP_PERCENT = 45
+const NARRATIVE_SPLIT_TOP_PERCENT = 41
+export const TOGGLE_MAP_BUTTON_HEIGHT = 6
 
 // Styles for the results map also include prop-independent styles copied from mobile.css.
 const ResultsMap = styled.div`
   bottom: ${(props) =>
-    props.expanded ? '0' : `${100 - NARRATIVE_SPLIT_TOP_PERCENT}%`};
+    props.expanded
+      ? `${TOGGLE_MAP_BUTTON_HEIGHT}%`
+      : `${100 - NARRATIVE_SPLIT_TOP_PERCENT}%`};
   display: ${(props) => (props.visible ? 'inherit' : 'none')};
   left: 0;
   position: fixed;
@@ -65,7 +56,7 @@ const narrativeCss = css`
       ? props.expanded
         ? '100px'
         : `${NARRATIVE_SPLIT_TOP_PERCENT}%`
-      : '100%'};
+      : `${100 - TOGGLE_MAP_BUTTON_HEIGHT}%`};
   transition: top 300ms;
 `
 
@@ -105,15 +96,6 @@ const BatchMobileResultsScreen = ({
       <ResultsHeader />
       <ResultsMap expanded={mapExpanded} visible={!itineraryExpanded}>
         <Map />
-        <ExpandMapButton bsSize="small" onClick={toggleBatchResultsMap}>
-          <IconWithText Icon={mapExpanded ? ListUl : ArrowsAlt}>
-            {mapExpanded ? (
-              <FormattedMessage id="components.BatchResultsScreen.showResults" />
-            ) : (
-              <FormattedMessage id="components.BatchResultsScreen.expandMap" />
-            )}
-          </IconWithText>
-        </ExpandMapButton>
       </ResultsMap>
       {hasErrorsAndNoResult ? (
         <StyledResultsError
@@ -127,7 +109,10 @@ const BatchMobileResultsScreen = ({
           expanded={itineraryExpanded}
           visible={!mapExpanded}
         >
-          <NarrativeItineraries />
+          <NarrativeItineraries
+            mapExpanded={mapExpanded}
+            onClickExpansionButton={toggleBatchResultsMap}
+          />
         </NarrativeContainer>
       )}
     </StyledMobileContainer>
diff --git a/lib/components/narrative/narrative-itineraries-header.tsx b/lib/components/narrative/narrative-itineraries-header.tsx
index 2f8d0ce7a..927d9ddc5 100644
--- a/lib/components/narrative/narrative-itineraries-header.tsx
+++ b/lib/components/narrative/narrative-itineraries-header.tsx
@@ -11,6 +11,7 @@ import { ComponentContext } from '../../util/contexts'
 import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
 import { ItinerarySortOption } from '../../util/config-types'
 import { sortOptions } from '../util/sortOptions'
+import { TOGGLE_MAP_BUTTON_HEIGHT } from '../mobile/batch-results-screen'
 import { UnstyledButton } from '../util/unstyled-button'
 import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import PopupTriggerText from '../app/popup-trigger-text'
@@ -19,10 +20,13 @@ import PlanFirstLastButtons from './plan-first-last-buttons'
 import SaveTripButton from './save-trip-button'
 
 const ItinerariesHeaderContainer = styled.div<{ showHeaderText: boolean }>`
+  align-items: flex-end;
   display: flex;
+  flex-direction: column;
   float: left;
   gap: 8px;
   margin-left: ${(props) => (props.showHeaderText ? 'inherit' : 'auto')};
+  width: 100%;
 `
 
 const SortResultsDropdown = styled(Dropdown)`
@@ -31,11 +35,18 @@ const SortResultsDropdown = styled(Dropdown)`
   }
 `
 
+const UnicodeChevron = styled.div<{ expanded: boolean }>`
+  transform: rotate(${(props) => (props.expanded ? '270' : '90')}deg) scaleY(2)
+    scaleX(1.5);
+`
+
 export default function NarrativeItinerariesHeader({
   customBatchUiBackground,
   enabledSortModes,
   itineraries,
   itineraryIsExpanded,
+  mapExpanded,
+  onClickExpansionButton = undefined,
   onSortChange,
   onSortDirChange,
   onViewAllOptions,
@@ -49,6 +60,8 @@ export default function NarrativeItinerariesHeader({
   enabledSortModes: ItinerarySortOption[]
   itineraries: unknown[]
   itineraryIsExpanded: boolean
+  mapExpanded: boolean
+  onClickExpansionButton?: () => void
   onSortChange: (type: string) => VoidFunction
   onSortDirChange: () => void
   onViewAllOptions: () => void
@@ -161,46 +174,93 @@ export default function NarrativeItinerariesHeader({
                 <PopupTriggerText compact popupTarget={popupTarget} />
               </button>
             )}
-            <button
-              className="clear-button-formatting"
-              onClick={onSortDirChange}
-              title={intl.formatMessage({
-                id: 'components.NarrativeItinerariesHeader.changeSortDir'
-              })}
-            >
-              <StyledIconWrapper
-                className={`${customBatchUiBackground && 'base-color-bg'}`}
+            {onClickExpansionButton && (
+              <button
+                aria-label={
+                  mapExpanded
+                    ? intl.formatMessage({
+                        id: 'components.BatchResultsScreen.showResults'
+                      })
+                    : intl.formatMessage({
+                        id: 'components.BatchResultsScreen.expandMap'
+                      })
+                }
+                className="clear-button-formatting"
+                onClick={onClickExpansionButton}
+                style={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  height: `${TOGGLE_MAP_BUTTON_HEIGHT}vh`,
+                  justifyContent: 'center',
+                  margin: '-10px 0',
+                  width: '100%'
+                }}
+                title={
+                  mapExpanded
+                    ? intl.formatMessage({
+                        id: 'components.BatchResultsScreen.showResults'
+                      })
+                    : intl.formatMessage({
+                        id: 'components.BatchResultsScreen.expandMap'
+                      })
+                }
+              >
+                <StyledIconWrapper>
+                  {mapExpanded ? (
+                    <UnicodeChevron expanded={mapExpanded}>
+                      &#10095;
+                    </UnicodeChevron>
+                  ) : (
+                    <UnicodeChevron expanded={mapExpanded}>
+                      &#10095;
+                    </UnicodeChevron>
+                  )}
+                </StyledIconWrapper>
+              </button>
+            )}
+            <div style={{ display: 'flex' }}>
+              <button
+                className="clear-button-formatting"
+                onClick={onSortDirChange}
+                style={{ marginRight: '6px' }}
+                title={intl.formatMessage({
+                  id: 'components.NarrativeItinerariesHeader.changeSortDir'
+                })}
               >
-                {sort.direction.toLowerCase() === 'asc' ? (
-                  <SortUp />
-                ) : (
-                  <SortDown />
-                )}
-              </StyledIconWrapper>
-            </button>
-            <SortResultsDropdown
-              id="sort-results"
-              label={sortResultsLabel}
-              text={sortText}
-              title={sortResultsLabel}
-            >
-              {sortOptionsArr.map((sortOption) => (
-                <li className="sort-option" key={sortOption.value}>
-                  <UnstyledButton
-                    aria-selected={sortText === sortOption.text || undefined}
-                    onClick={() => onSortChange(sortOption.value)}
-                    role="option"
-                  >
-                    {sortOption.text}
-                    {sortText === sortOption.text && (
-                      <InvisibleA11yLabel>
-                        <FormattedMessage id="common.currentlySelected" />
-                      </InvisibleA11yLabel>
-                    )}
-                  </UnstyledButton>
-                </li>
-              ))}
-            </SortResultsDropdown>
+                <StyledIconWrapper
+                  className={`${customBatchUiBackground && 'base-color-bg'}`}
+                >
+                  {sort.direction.toLowerCase() === 'asc' ? (
+                    <SortUp />
+                  ) : (
+                    <SortDown />
+                  )}
+                </StyledIconWrapper>
+              </button>
+              <SortResultsDropdown
+                id="sort-results"
+                label={sortResultsLabel}
+                text={sortText}
+                title={sortResultsLabel}
+              >
+                {sortOptionsArr.map((sortOption) => (
+                  <li className="sort-option" key={sortOption.value}>
+                    <UnstyledButton
+                      aria-selected={sortText === sortOption.text || undefined}
+                      onClick={() => onSortChange(sortOption.value)}
+                      role="option"
+                    >
+                      {sortOption.text}
+                      {sortText === sortOption.text && (
+                        <InvisibleA11yLabel>
+                          <FormattedMessage id="common.currentlySelected" />
+                        </InvisibleA11yLabel>
+                      )}
+                    </UnstyledButton>
+                  </li>
+                ))}
+              </SortResultsDropdown>
+            </div>
           </ItinerariesHeaderContainer>
           <PlanFirstLastButtons />
         </>
diff --git a/lib/components/narrative/narrative-itineraries.js b/lib/components/narrative/narrative-itineraries.js
index 0231e81e1..567d47239 100644
--- a/lib/components/narrative/narrative-itineraries.js
+++ b/lib/components/narrative/narrative-itineraries.js
@@ -164,7 +164,9 @@ class NarrativeItineraries extends Component {
     enabledSortModes: PropTypes.object,
     itineraries: PropTypes.array,
     itineraryIsExpanded: PropTypes.bool,
+    mapExpanded: PropTypes.bool,
     modes: PropTypes.object,
+    onClickExpansionButton: PropTypes.func,
     pending: PropTypes.bool,
     popupTarget: PropTypes.string,
     realtimeEffects: PropTypes.object,
@@ -378,7 +380,9 @@ class NarrativeItineraries extends Component {
       intl,
       itineraries,
       itineraryIsExpanded,
+      mapExpanded,
       mergedItineraries,
+      onClickExpansionButton,
       pending,
       popupTarget,
       setPopupContent,
@@ -425,6 +429,7 @@ class NarrativeItineraries extends Component {
         className={`options itinerary ${
           customBatchUiBackground && !itineraryIsExpanded && 'base-color-bg'
         }`}
+        style={{ overflow: 'hidden' }}
       >
         <PageTitle
           title={summarizeQuery(activeSearch.query, intl, user.savedLocations)}
@@ -435,6 +440,8 @@ class NarrativeItineraries extends Component {
           itineraries={mergedItineraries}
           itinerary={itinerary}
           itineraryIsExpanded={itineraryIsExpanded}
+          mapExpanded={mapExpanded}
+          onClickExpansionButton={onClickExpansionButton}
           onSortChange={this._onSortChange}
           onSortDirChange={this._onSortDirChange}
           onViewAllOptions={this._onViewAllOptions}