diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx
index 3b380e6c8f..9ac23eff02 100644
--- a/packages/features/bookings/Booker/components/Header.tsx
+++ b/packages/features/bookings/Booker/components/Header.tsx
@@ -57,13 +57,33 @@ export function Header({
     return <LayoutToggleWithData />;
   }
 
+  const endDate = selectedDate.add(extraDays, "days");
+
+  const isSameMonth = () => {
+    return selectedDate.format("MMM") === endDate.format("MMM");
+  };
+
+  const isSameYear = () => {
+    return selectedDate.format("YYYY") === endDate.format("YYYY");
+  };
+
+  const FormattedSelectedDateRange = () => {
+    return (
+      <h3 className="min-w-[150px] text-base font-semibold leading-4">
+        {selectedDate.format("MMM D")}
+        {!isSameYear() && <span className="text-subtle">, {selectedDate.format("YYYY")} </span>}-{" "}
+        {isSameMonth() ? endDate.format("D") : endDate.format("MMM D")},{" "}
+        <span className="text-subtle">
+          {isSameYear() ? selectedDate.format("YYYY") : endDate.format("YYYY")}
+        </span>
+      </h3>
+    );
+  };
+
   return (
     <div className="border-default relative z-10 flex border-b border-l px-5 py-4">
       <div className="flex items-center gap-3">
-        <h3 className="min-w-[150px] text-base font-semibold leading-4">
-          {selectedDate.format("MMM D")}-{selectedDate.add(extraDays, "days").format("D")},{" "}
-          <span className="text-subtle">{selectedDate.format("YYYY")}</span>
-        </h3>
+        <FormattedSelectedDateRange />
         <ButtonGroup>
           <Button
             variant="icon"