diff --git a/assets/css/_route_pill.scss b/assets/css/_route_pill.scss
index 170d49a63..d0750b745 100644
--- a/assets/css/_route_pill.scss
+++ b/assets/css/_route_pill.scss
@@ -1,6 +1,5 @@
 .c-route-pill {
-  min-width: 2.875rem;
-  max-width: 2.875rem;
+  width: 2.875rem;
   height: 1.5rem;
 
   border-radius: 0.8125rem;
@@ -10,6 +9,18 @@
   line-height: 1.5rem;
   font-weight: 700;
   font-family: $font-family-route-pill;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  &--large-format {
+    width: 4.5rem;
+    height: 2.25rem;
+    border-radius: 1.875rem;
+    font-size: $h3-font-size;
+    font-weight: 600;
+  }
 }
 
 .c-route-pill--bus {
diff --git a/assets/src/components/detours/diversionPanel.tsx b/assets/src/components/detours/diversionPanel.tsx
index 030a74e47..5e94013e1 100644
--- a/assets/src/components/detours/diversionPanel.tsx
+++ b/assets/src/components/detours/diversionPanel.tsx
@@ -38,10 +38,7 @@ export const DiversionPanel = ({
           <h2 className="c-diversion-panel__h2">Affected route</h2>
 
           <div className="d-flex">
-            <RoutePill
-              className="d-inline-block me-2 align-top"
-              routeName={routeName}
-            />
+            <RoutePill className="me-2 align-top" routeName={routeName} />
 
             <div className="d-inline-block">
               <p className="my-0 c-diversion-panel__description">
diff --git a/assets/src/components/routePill.tsx b/assets/src/components/routePill.tsx
index 1d412df35..2289bb643 100644
--- a/assets/src/components/routePill.tsx
+++ b/assets/src/components/routePill.tsx
@@ -3,12 +3,19 @@ import { joinClasses } from "../helpers/dom"
 
 export const RoutePill = ({
   routeName,
+  largeFormat,
   className,
 }: {
   routeName: string
+  largeFormat?: boolean
   className?: string
 }): JSX.Element => {
-  const classes = joinClasses(["c-route-pill", modeClass(routeName), className])
+  const classes = joinClasses([
+    "c-route-pill",
+    modeClass(routeName),
+    largeFormat ? "c-route-pill--large-format" : "",
+    className,
+  ])
 
   return <div className={classes}>{routeNameTransform(routeName)}</div>
 }
diff --git a/assets/stories/skate-components/routePill.stories.tsx b/assets/stories/skate-components/routePill.stories.tsx
new file mode 100644
index 000000000..599f3f803
--- /dev/null
+++ b/assets/stories/skate-components/routePill.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { RoutePill } from "../../src/components/routePill"
+
+const meta = {
+  component: RoutePill,
+} satisfies Meta<typeof RoutePill>
+
+export default meta
+type Story = StoryObj<typeof RoutePill>
+
+export const Default: Story = {
+  args: { routeName: "66" },
+}
+
+export const BlueLine: Story = {
+  args: { routeName: "Blue Line" },
+}
+
+export const LargeFormat: Story = {
+  args: { routeName: "66", largeFormat: true },
+}