diff --git a/example-config.yml b/example-config.yml
index a7e100230..97befc4df 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -674,6 +674,8 @@ disableSingleItineraryDays: false
 #   # Whether to render routes within flex zones of a route's patterns. If set to true,
 #   # routes will not be rendered within flex zones.
 #   hideRouteShapesWithinFlexZones: true
+#   # Setting to sort routes by the number of vehicles on each pattern
+#   sortRoutePatternsByVehicleCount: true
 #   # Disable vehicle highlight if necessary (e.g. custom or inverted icons)
 #   vehicleIconHighlight: true
 #   # Customize vehicle icon padding (the default iconPadding is 2px in otp-ui)
diff --git a/lib/components/viewers/route-details.tsx b/lib/components/viewers/route-details.tsx
index 5e8afbfad..e7c4dac02 100644
--- a/lib/components/viewers/route-details.tsx
+++ b/lib/components/viewers/route-details.tsx
@@ -7,6 +7,7 @@ import React, { Component } from 'react'
 import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
+import { AppReduxState } from '../../util/state-types'
 import { DEFAULT_ROUTE_COLOR } from '../util/colors'
 import { extractMainHeadsigns, PatternSummary } from '../../util/pattern-viewer'
 import { getOperatorName } from '../../util/state'
@@ -47,6 +48,11 @@ const PatternSelectDropdown = styled(Dropdown)`
   span.caret {
     color: #333;
   }
+
+  ul li button span {
+    width: 100%;
+    display: block;
+  }
 `
 
 interface Props {
@@ -57,6 +63,7 @@ interface Props {
   setHoveredStop: (id: string | null) => void
   setViewedRoute: SetViewedRouteHandler
   setViewedStop: SetViewedStopHandler
+  sortPatternsByVehicleCount: boolean
 }
 
 class RouteDetails extends Component<Props> {
@@ -87,7 +94,14 @@ class RouteDetails extends Component<Props> {
   }
 
   render() {
-    const { intl, operator, patternId, route, setHoveredStop } = this.props
+    const {
+      intl,
+      operator,
+      patternId,
+      route,
+      setHoveredStop,
+      sortPatternsByVehicleCount
+    } = this.props
     const { agency, patterns = {}, shortName, url } = route
     const pattern = patterns[patternId]
 
@@ -100,6 +114,7 @@ class RouteDetails extends Component<Props> {
       shortName,
       this._editHeadsign
     ).sort((a, b) => {
+      if (!sortPatternsByVehicleCount) return 0
       // sort by number of vehicles on that pattern
       const aVehicleCount =
         route.vehicles?.filter((vehicle) => vehicle.patternId === a.id)
@@ -231,6 +246,15 @@ class RouteDetails extends Component<Props> {
   }
 }
 
+const mapStateToProps = (state: AppReduxState) => {
+  const sortRoutePatternsByVehicleCount =
+    state.otp.config.routeViewer?.sortRoutePatternsByVehicleCount
+
+  return {
+    sortPatternsByVehicleCount: sortRoutePatternsByVehicleCount !== false
+  }
+}
+
 // connect to redux store
 const mapDispatchToProps = {
   setHoveredStop: uiActions.setHoveredStop,
@@ -238,4 +262,7 @@ const mapDispatchToProps = {
   setViewedStop: uiActions.setViewedStop
 }
 
-export default connect(null, mapDispatchToProps)(injectIntl(RouteDetails))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(RouteDetails))
diff --git a/lib/components/viewers/styled.ts b/lib/components/viewers/styled.ts
index 8a870a84e..9c9815dbf 100644
--- a/lib/components/viewers/styled.ts
+++ b/lib/components/viewers/styled.ts
@@ -36,8 +36,7 @@ export const PatternContainer = styled.div`
   background-color: inherit;
   color: inherit;
   display: flex;
-  gap: 16px;
-  justify-content: flex-start;
+  justify-content: space-between;
   margin: 0;
   padding: 8px;
 
@@ -48,7 +47,7 @@ export const PatternContainer = styled.div`
   // Styling for SortResultsDropdown
 
   & > span {
-    width: 85%;
+    width: 80%;
 
     button#headsign-selector-label {
       align-items: center;
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index 93f00ce26..64a6ff3f4 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -362,6 +362,8 @@ export interface RouteViewerConfig {
   maxRealtimeVehicleAge?: number
   /** Use OTP date limiting to only show current service week in list */
   onlyShowCurrentServiceWeek?: boolean
+  /** Setting to sort routes by the number of vehicles on each pattern */
+  sortRoutePatternsByVehicleCount?: boolean
   /** Disable vehicle highlight if necessary (e.g. custom or inverted icons) */
   vehicleIconHighlight?: boolean
   /** Customize vehicle icon padding (the default iconPadding is 2px in otp-ui) */