diff --git a/src/form/Calendar/Calendar.story.tsx b/src/form/Calendar/Calendar.story.tsx
index de3103f36..dade4622e 100644
--- a/src/form/Calendar/Calendar.story.tsx
+++ b/src/form/Calendar/Calendar.story.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Card } from '../../layout/Card';
 import { Calendar } from './Calendar';
-import { CalendarRange } from './CalendarRange';
 import { add, addMonths, sub } from 'date-fns';
 import { Divider, Stack } from '../../layout';
 
@@ -119,11 +118,13 @@ export const Multiview = () => {
 
   return (
     <Card>
-      <CalendarRange
+      <Calendar
         value={range}
         onChange={val => setRange(val as [Date, Date])}
-        numMonths={3}
-        enableDayOfWeek
+        numMonths={2}
+        direction="past"
+        max="now"
+        showDayOfWeek
         isRange
       />
       <Divider />
diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx
index 2c87ee5af..41a1eed0f 100644
--- a/src/form/Calendar/Calendar.tsx
+++ b/src/form/Calendar/Calendar.tsx
@@ -3,6 +3,7 @@ import React, { FC, useCallback, useMemo, useState } from 'react';
 import { Button } from '../../elements/Button';
 import {
   add,
+  addMonths,
   addYears,
   endOfDecade,
   getMonth,
@@ -19,6 +20,7 @@ import {
 import { DateFormat } from '../../data/DateFormat';
 import { CalendarDays } from './CalendarDays';
 import { CalendarMonths } from './CalendarMonths';
+import { CalendarRange } from './CalendarRange';
 import { CalendarYears } from './CalendarYears';
 import { SmallHeading } from '../../typography';
 
@@ -63,6 +65,16 @@ export interface CalendarProps {
    */
   previousArrow?: React.ReactNode | string;
 
+  /**
+   * The number of calendar months to display.
+   */
+  numMonths?: number;
+
+  /**
+   * Defaults view to show past or future months if multiple months shown.
+   */
+  direction?: 'past' | 'future';
+
   /**
    * The date format to use for the calendar. Defaults 'MMMM yyyy'.
    */
@@ -71,7 +83,7 @@ export interface CalendarProps {
   /**
    * Whether to display day of week labels
    */
-  enableDayOfWeek?: boolean;
+  showDayOfWeek?: boolean;
 
   /**
    * Whether to animate the calendar.
@@ -95,9 +107,12 @@ export const Calendar: FC<CalendarProps> = ({
   value,
   disabled,
   isRange,
+  numMonths,
+  direction,
   previousArrow,
   nextArrow,
   dateFormat,
+  showDayOfWeek,
   animated,
   onChange,
   onViewChange
@@ -125,6 +140,12 @@ export const Calendar: FC<CalendarProps> = ({
     'forward' | 'back' | null
   >(null);
 
+  const displayMonths = Array.from(Array(numMonths).keys());
+  const showPast = direction === 'past';
+  if (showPast) {
+    displayMonths.reverse();
+  }
+
   const previousClickHandler = useCallback(() => {
     setScrollDirection('back');
     if (view === 'days') {
@@ -225,11 +246,16 @@ export const Calendar: FC<CalendarProps> = ({
         >
           <SmallHeading disableMargins>
             {view === 'days' && (
-              <DateFormat
-                date={viewValue}
-                format={dateFormat}
-                allowToggle={false}
-              />
+              <div className={css.multiviewLabel}>
+                {displayMonths.map(i => (
+                  <DateFormat
+                    key={`label-${i}`}
+                    date={addMonths(viewValue, showPast ? -i : i)}
+                    format={dateFormat}
+                    allowToggle={false}
+                  />
+                ))}
+              </div>
             )}
             {view === 'months' && <>{yearValue}</>}
             {view === 'years' && (
@@ -260,7 +286,7 @@ export const Calendar: FC<CalendarProps> = ({
             scale: { type: animated ? 'tween' : false }
           }}
         >
-          {view === 'days' && (
+          {view === 'days' && numMonths === 1 && (
             <CalendarDays
               value={viewValue}
               min={min}
@@ -268,6 +294,23 @@ export const Calendar: FC<CalendarProps> = ({
               disabled={disabled}
               isRange={isRange}
               current={isRange ? [rangeStart, rangeEnd] : date}
+              showDayOfWeek={showDayOfWeek}
+              xAnimation={xAnimation}
+              animated={animated}
+              onChange={dateChangeHandler}
+            />
+          )}
+          {view === 'days' && numMonths !== 1 && (
+            <CalendarRange
+              value={viewValue}
+              min={min}
+              max={max}
+              disabled={disabled}
+              isRange={isRange}
+              numMonths={numMonths}
+              direction={direction}
+              current={isRange ? [rangeStart, rangeEnd] : date}
+              showDayOfWeek={showDayOfWeek}
               xAnimation={xAnimation}
               animated={animated}
               onChange={dateChangeHandler}
@@ -301,5 +344,7 @@ Calendar.defaultProps = {
   nextArrow: '→',
   animated: true,
   dateFormat: 'MMMM yyyy',
-  range: [new Date(), new Date()]
+  range: [new Date(), new Date()],
+  numMonths: 1,
+  direction: 'future'
 };
diff --git a/src/form/Calendar/CalendarDays/CalendarDays.module.css b/src/form/Calendar/CalendarDays/CalendarDays.module.css
index d28503288..89d518e07 100644
--- a/src/form/Calendar/CalendarDays/CalendarDays.module.css
+++ b/src/form/Calendar/CalendarDays/CalendarDays.module.css
@@ -1,6 +1,11 @@
 .week {
+  --button-border-radius: var(--calendar-day-radius);
+  --button-color: var(--calendar-day-color);
+
   display: grid;
   grid-template-columns: repeat(7, 1fr);
+  gap: var(--calendar-gap);
+  margin-bottom: var(--calendar-gap);
 
   .day {
     flex: 1;
@@ -8,29 +13,43 @@
     padding: var(--calendar-spacing);
     text-align: center;
 
+    &:not(:disabled) {
+      background: var(--calendar-day-background);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--calendar-day-border-hover);
+    }
+
     &:not(.range).outside {
-      opacity: 0.6;
+      color: color-mix(in srgb, var(--button-color) 60%, transparent);
     }
 
-    &.range,
-    &.rangeHover {
+    &.range {
       border-radius: 0;
+      /* !important to override default button styling */
+      background: var(--calendar-day-background-selected) !important;
+      border-color: var(--calendar-day-border-selected) !important;
+
+      &:hover {
+        border-color: var(--calendar-day-border-hover) !important;
+      }
     }
 
     &.startRangeDate {
-      border-top-left-radius: var(--button-border-radius);
+      border-top-left-radius: var(--calendar-day-radius);
     }
 
     &.roundStartDateBottom {
-      border-bottom-left-radius: var(--button-border-radius);
+      border-bottom-left-radius: var(--calendar-day-radius);
     }
 
     &.endRangeDate {
-      border-bottom-right-radius: var(--button-border-radius);
+      border-bottom-right-radius: var(--calendar-day-radius);
     }
 
     &.roundEndDateTop {
-      border-top-right-radius: var(--button-border-radius);
+      border-top-right-radius: var(--calendar-day-radius);
     }
 
     &.hideDay {
@@ -44,9 +63,11 @@
   grid-template-columns: repeat(7, 1fr);
   gap: var(--spacing-sm);
   width: 100%;
-  margin: var(--spacing-md) 0 var(--spacing-sm);
+  padding: var(--spacing-md) 0;
+  border-top: 1px solid var(--slate-500);
 
   .dayOfWeek {
     text-align: center;
+    font-weight: var(--font-weight-bold);
   }
 }
diff --git a/src/form/Calendar/CalendarDays/CalendarDays.tsx b/src/form/Calendar/CalendarDays/CalendarDays.tsx
index 4d90efcd8..a20ed4a74 100644
--- a/src/form/Calendar/CalendarDays/CalendarDays.tsx
+++ b/src/form/Calendar/CalendarDays/CalendarDays.tsx
@@ -60,7 +60,7 @@ export interface CalendarDaysProps {
   /**
    * Whether to display day of week labels
    */
-  enableDayOfWeek?: boolean;
+  showDayOfWeek?: boolean;
 
   /**
    * Whether the calendar is a range picker.
@@ -112,7 +112,7 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
   max,
   animated,
   xAnimation = 0,
-  enableDayOfWeek,
+  showDayOfWeek,
   hidePrevMonthDays,
   hideNextMonthDays,
   onChange,
@@ -254,7 +254,7 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
           opacity: { duration: 0.2, type: animated ? 'tween' : false }
         }}
       >
-        {enableDayOfWeek && (
+        {showDayOfWeek && (
           <div className={css.weekLabels}>
             {DAY_OF_WEEK_LABELS.map(day => (
               <div key={`day-${day}`} className={css.dayOfWeek}>
diff --git a/src/form/Calendar/CalendarRange.tsx b/src/form/Calendar/CalendarRange.tsx
deleted file mode 100644
index 9cbbd807f..000000000
--- a/src/form/Calendar/CalendarRange.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import { FC, Fragment, useCallback, useMemo, useState } from 'react';
-import {
-  add,
-  addMonths,
-  addYears,
-  endOfDecade,
-  getMonth,
-  getYear,
-  isSameDay,
-  max as maxDate,
-  min as minDate,
-  setMonth,
-  setYear,
-  startOfDecade,
-  sub,
-  subYears
-} from 'date-fns';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Button } from '../../elements/Button';
-import { CalendarProps, CalendarViewType } from './Calendar';
-import { CalendarDays } from './CalendarDays';
-import { CalendarMonths } from './CalendarMonths';
-import { CalendarYears } from './CalendarYears';
-import { DateFormat } from '../../data/DateFormat';
-import { SmallHeading } from '../../typography';
-import css from './Calendar.module.css';
-
-export interface CalendarRangeProps extends CalendarProps {
-  /**
-   * The number of months to display in the range.
-   * Defaults to 2.
-   */
-  numMonths?: number;
-}
-
-export const CalendarRange: FC<CalendarRangeProps> = ({
-  min,
-  max,
-  value,
-  disabled,
-  isRange,
-  previousArrow,
-  nextArrow,
-  dateFormat,
-  animated,
-  onChange,
-  onViewChange,
-  numMonths,
-  enableDayOfWeek
-}) => {
-  const date = useMemo(
-    () => (Array.isArray(value) ? value?.[0] : value) ?? new Date(),
-    [value]
-  );
-  const rangeStart = useMemo(
-    () => value?.[0] ?? date ?? new Date(),
-    [date, value]
-  );
-  const rangeEnd = useMemo(
-    () => value?.[1] ?? date ?? new Date(),
-    [date, value]
-  );
-
-  const [viewValue, setViewValue] = useState<Date>(date || new Date());
-  const [monthValue, setMonthValue] = useState<number>(getMonth(date));
-  const [yearValue, setYearValue] = useState<number>(getYear(date));
-  const [decadeStart, setDecadeStart] = useState<Date>(startOfDecade(date));
-  const [decadeEnd, setDecadeEnd] = useState<Date>(endOfDecade(date));
-  const [view, setView] = useState<CalendarViewType>('days');
-  const [hoveringDate, setHoveringDate] = useState<Date | null>(null);
-  const [scrollDirection, setScrollDirection] = useState<
-    'forward' | 'back' | null
-  >(null);
-
-  if (numMonths < 0) {
-    return null;
-  }
-
-  const displayMonths = Array.from(Array(numMonths).keys());
-
-  const previousClickHandler = useCallback(() => {
-    setScrollDirection('back');
-    if (view === 'days') {
-      setViewValue(sub(viewValue, { months: 1 }));
-    } else if (view === 'months') {
-      setYearValue(yearValue - 1);
-    } else {
-      setDecadeStart(subYears(decadeStart, 10));
-      setDecadeEnd(subYears(decadeEnd, 10));
-    }
-  }, [decadeEnd, decadeStart, view, viewValue, yearValue]);
-
-  const nextClickHandler = useCallback(() => {
-    setScrollDirection('forward');
-    if (view === 'days') {
-      setViewValue(add(viewValue, { months: 1 }));
-    } else if (view === 'months') {
-      setYearValue(yearValue + 1);
-    } else {
-      setDecadeStart(addYears(decadeStart, 10));
-      setDecadeEnd(addYears(decadeEnd, 10));
-    }
-  }, [decadeEnd, decadeStart, view, viewValue, yearValue]);
-
-  const headerClickHandler = useCallback(() => {
-    const newView = view === 'days' ? 'months' : 'years';
-    setScrollDirection(null);
-    setView(newView);
-    onViewChange?.(newView);
-  }, [onViewChange, view]);
-
-  const dateChangeHandler = useCallback(
-    (date: Date) => {
-      if (!isRange) {
-        onChange?.(date);
-        setMonthValue(getMonth(date));
-        setYearValue(getYear(date));
-      } else {
-        if (isSameDay(rangeStart, rangeEnd)) {
-          onChange?.([minDate([rangeStart, date]), maxDate([rangeEnd, date])]);
-        } else {
-          onChange?.([date, date]);
-        }
-      }
-    },
-    [isRange, onChange, rangeEnd, rangeStart]
-  );
-
-  const monthsChangeHandler = useCallback(
-    month => {
-      setViewValue(setMonth(setYear(min || new Date(), yearValue), month));
-      setMonthValue(month);
-      setView('days');
-      onViewChange?.('days');
-    },
-    [min, yearValue, onViewChange]
-  );
-
-  const yearChangeHandler = useCallback(
-    year => {
-      setViewValue(setYear(min || new Date(), year));
-      setYearValue(year);
-      setView('months');
-      onViewChange?.('months');
-    },
-    [min, onViewChange]
-  );
-
-  const xAnimation = useMemo(() => {
-    switch (scrollDirection) {
-      case 'forward':
-        return '100%';
-      case 'back':
-        return '-100%';
-      default:
-        return 0;
-    }
-  }, [scrollDirection]);
-
-  return (
-    <div className={css.container}>
-      <header className={css.header}>
-        <Button
-          variant="text"
-          disabled={disabled}
-          className={css.leftArrow}
-          disablePadding
-          onClick={previousClickHandler}
-        >
-          {previousArrow}
-        </Button>
-        <Button
-          disablePadding
-          fullWidth
-          disabled={disabled}
-          variant="text"
-          onClick={headerClickHandler}
-        >
-          <SmallHeading disableMargins>
-            {view === 'days' && (
-              <div className={css.multiviewLabel}>
-                {displayMonths.map(i => (
-                  <DateFormat
-                    key={`label-${i}`}
-                    date={addMonths(viewValue, i)}
-                    format={dateFormat}
-                    allowToggle={false}
-                  />
-                ))}
-              </div>
-            )}
-            {view === 'months' && <>{yearValue}</>}
-            {view === 'years' && (
-              <>
-                {decadeStart.getFullYear()}-{decadeEnd.getFullYear()}
-              </>
-            )}
-          </SmallHeading>
-        </Button>
-        <Button
-          variant="text"
-          disablePadding
-          disabled={disabled}
-          onClick={nextClickHandler}
-        >
-          {nextArrow}
-        </Button>
-      </header>
-      <AnimatePresence initial={false} mode="wait">
-        <motion.div
-          key={view}
-          className={css.calendars}
-          initial={{ scale: 0, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0, opacity: 1 }}
-          transition={{
-            x: { type: animated ? 'keyframes' : false },
-            opacity: { duration: 0.2, type: animated ? 'tween' : false },
-            scale: { type: animated ? 'tween' : false }
-          }}
-        >
-          {view === 'days' &&
-            displayMonths.map(month => (
-              <Fragment key={`calendar-${month}`}>
-                <CalendarDays
-                  value={addMonths(viewValue, month)}
-                  min={min}
-                  max={max}
-                  disabled={disabled}
-                  isRange={isRange}
-                  current={isRange ? [rangeStart, rangeEnd] : date}
-                  xAnimation={xAnimation}
-                  animated={animated}
-                  onChange={dateChangeHandler}
-                  hover={hoveringDate}
-                  onHover={setHoveringDate}
-                  hidePrevMonthDays={month > 0}
-                  hideNextMonthDays={month < numMonths - 1}
-                  enableDayOfWeek={enableDayOfWeek}
-                />
-              </Fragment>
-            ))}
-          {view === 'months' && (
-            <CalendarMonths
-              value={monthValue}
-              animated={animated}
-              onChange={monthsChangeHandler}
-            />
-          )}
-          {view === 'years' && (
-            <CalendarYears
-              decadeStart={decadeStart}
-              decadeEnd={decadeEnd}
-              animated={animated}
-              value={yearValue}
-              xAnimation={xAnimation}
-              onChange={yearChangeHandler}
-            />
-          )}
-        </motion.div>
-      </AnimatePresence>
-    </div>
-  );
-};
-
-CalendarRange.defaultProps = {
-  previousArrow: '←',
-  nextArrow: '→',
-  animated: true,
-  dateFormat: 'MMMM yyyy',
-  range: [new Date(), new Date()],
-  numMonths: 2
-};
diff --git a/src/form/Calendar/CalendarRange/CalendarRange.module.css b/src/form/Calendar/CalendarRange/CalendarRange.module.css
new file mode 100644
index 000000000..424ab530b
--- /dev/null
+++ b/src/form/Calendar/CalendarRange/CalendarRange.module.css
@@ -0,0 +1,4 @@
+.calendar {
+  display: flex;
+  gap: var(--spacing-lg);
+}
diff --git a/src/form/Calendar/CalendarRange/CalendarRange.tsx b/src/form/Calendar/CalendarRange/CalendarRange.tsx
new file mode 100644
index 000000000..3a51a3f20
--- /dev/null
+++ b/src/form/Calendar/CalendarRange/CalendarRange.tsx
@@ -0,0 +1,51 @@
+import { FC, Fragment, useState } from 'react';
+import { addMonths } from 'date-fns';
+import { CalendarProps } from '../Calendar';
+import { CalendarDays } from '../CalendarDays';
+import css from './CalendarRange.module.css';
+
+export interface CalendarRangeProps extends Omit<CalendarProps, 'value'> {
+  /**
+   * The currently displayed month of the calendar.
+   */
+  value?: Date;
+}
+
+export const CalendarRange: FC<CalendarRangeProps> = ({
+  value,
+  onChange,
+  numMonths,
+  direction,
+  ...rest
+}) => {
+  const [hoveringDate, setHoveringDate] = useState<Date | null>(null);
+
+  if (numMonths < 0) {
+    return null;
+  }
+
+  const displayMonths = Array.from(Array(numMonths).keys());
+  const showPast = direction === 'past';
+  if (direction === 'past') {
+    displayMonths.reverse();
+  }
+
+  return (
+    <div className={css.calendar}>
+      {displayMonths.map(month => (
+        <Fragment key={`calendar-${month}`}>
+          <CalendarDays
+            value={addMonths(value, showPast ? -month : month)}
+            hover={hoveringDate}
+            onHover={setHoveringDate}
+            hidePrevMonthDays={month > 0}
+            hideNextMonthDays={month < numMonths - 1}
+            numMonths={numMonths}
+            onChange={onChange}
+            {...rest}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+};
diff --git a/src/form/Calendar/CalendarRange/index.ts b/src/form/Calendar/CalendarRange/index.ts
new file mode 100644
index 000000000..2e7e3953a
--- /dev/null
+++ b/src/form/Calendar/CalendarRange/index.ts
@@ -0,0 +1 @@
+export * from './CalendarRange';
diff --git a/src/form/Calendar/index.ts b/src/form/Calendar/index.ts
index eb3ea071e..a72338059 100644
--- a/src/form/Calendar/index.ts
+++ b/src/form/Calendar/index.ts
@@ -1,2 +1 @@
 export * from './Calendar';
-export * from './CalendarRange';
diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts
index 47414cbb4..6fc94b9f2 100644
--- a/src/utils/Theme/themes/dark.ts
+++ b/src/utils/Theme/themes/dark.ts
@@ -424,7 +424,15 @@ export const darkTheme: Theme = {
       'sub-margin': '0 0 var(--spacing-xs) 0'
     },
     calendar: {
-      'calendar-spacing': '8px'
+      'calendar-spacing': '8px',
+      'calendar-gap': '0px',
+      'calendar-day-radius': 'var(--button-border-radius)',
+      'calendar-day-color': 'var(--button-color)',
+      'calendar-day-background': 'transparent',
+      'calendar-day-background-selected': 'var(--primary-background)',
+      'calendar-day-border-selected': 'var(--primary-background)',
+      'calendar-day-background-hover': 'var(--primary-background)',
+      'calendar-day-border-hover': 'var(--primary-background)'
     },
     badge: {
       'badge-color-background-default': darkColors.white,