diff --git a/src/components/@atoms/Calendar/Calendar.test.tsx b/src/components/@atoms/Calendar/Calendar.test.tsx
index 08e43ee52..96fe2ef0c 100644
--- a/src/components/@atoms/Calendar/Calendar.test.tsx
+++ b/src/components/@atoms/Calendar/Calendar.test.tsx
@@ -1,6 +1,5 @@
-import { fireEvent, render, screen } from '@app/test-utils'
+import { fireEvent, mockFunction, render, screen } from '@app/test-utils'
 
-import { fireEvent } from '@testing-library/react'
 import { InputHTMLAttributes, useState } from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
@@ -8,7 +7,18 @@ import { secondsToDate, secondsToDateInput } from '@app/utils/date'
 import { formatExpiry } from '@app/utils/utils'
 
 import { Calendar } from './Calendar'
+import { useBreakpoint } from '@app/utils/BreakpointProvider'
 
+vi.mock('@app/utils/BreakpointProvider')
+
+const mockUseBreakpoint = mockFunction(useBreakpoint)
+mockUseBreakpoint.mockReturnValue({
+  xs: true,
+  sm: true,
+  md: true,
+  lg: false,
+  xl: false,
+})
 
 const value = 3600
 const min = 0
diff --git a/src/components/@atoms/Calendar/Calendar.tsx b/src/components/@atoms/Calendar/Calendar.tsx
index 57e948a8b..37b7db57c 100644
--- a/src/components/@atoms/Calendar/Calendar.tsx
+++ b/src/components/@atoms/Calendar/Calendar.tsx
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components'
 
 import CalendarSVG from '@app/assets/Calendar.svg'
 import { useDefaultRef } from '@app/hooks/useDefaultRef'
+import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { secondsToDate, secondsToDateInput } from '@app/utils/date'
 import { formatExpiry } from '@app/utils/utils'
 
@@ -80,6 +81,8 @@ export const Calendar = forwardRef(
     const [minDuratiion] = useState(min ?? value)
     const minDate = secondsToDate(minDuratiion)
 
+    const breakpoint = useBreakpoint()
+
     return (
       <Label htmlFor="calendar" $highlighted={highlighted}>
         <LabelInput
@@ -113,7 +116,9 @@ export const Calendar = forwardRef(
           }}
           onClick={() => inputRef.current!.showPicker()}
         />
-        <span data-testid="calendar-date">{formatExpiry(secondsToDate(value))}</span>
+        <span data-testid="calendar-date">
+          {formatExpiry(secondsToDate(value), { short: !breakpoint.sm })}
+        </span>
         <CalendarIcon>
           <CalendarSVG height={16} width={16} />
         </CalendarIcon>
diff --git a/src/components/@molecules/DateSelection/DateSelection.test.tsx b/src/components/@molecules/DateSelection/DateSelection.test.tsx
index cb46d4416..4b9ada15e 100644
--- a/src/components/@molecules/DateSelection/DateSelection.test.tsx
+++ b/src/components/@molecules/DateSelection/DateSelection.test.tsx
@@ -1,13 +1,27 @@
-import { act, render, renderHook, screen, userEvent, waitFor } from '@app/test-utils'
+import { act, mockFunction, render, renderHook, screen, userEvent, waitFor } from '@app/test-utils'
 
 import { useState } from 'react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { ONE_DAY, ONE_YEAR } from '@app/utils/time'
 
 import { DateSelection } from './DateSelection'
+import { useBreakpoint } from '@app/utils/BreakpointProvider'
+
+vi.mock('@app/utils/BreakpointProvider')
+
+const mockUseBreakpoint = mockFunction(useBreakpoint)
 
 describe('DateSelection', () => {
+  beforeEach(() => {
+    mockUseBreakpoint.mockReturnValue({
+      xs: true,
+      sm: true,
+      md: true,
+      lg: false,
+      xl: false,
+    })
+  })
   afterEach(() => {
     vi.resetAllMocks()
   })
diff --git a/src/utils/utils.test.ts b/src/utils/utils.test.ts
index cb7f0f753..1d349c430 100644
--- a/src/utils/utils.test.ts
+++ b/src/utils/utils.test.ts
@@ -65,6 +65,18 @@ describe('formatExpiry', () => {
     const result = formatExpiry(expiry)
     expect(result).toEqual('January 1, 2020')
   })
+
+  it('should format the date with short month if options.short is true', () => {
+    const expiry = new Date('2020-01-01')
+    const result = formatExpiry(expiry, { short: true })
+    expect(result).toEqual('Jan 1, 2020')
+  })
+
+  it('should format the date with long month if options.short is false', () => {
+    const expiry = new Date('2020-01-01')
+    const result = formatExpiry(expiry, { short: false })
+    expect(result).toEqual('January 1, 2020')
+  })
 })
 
 describe('formatDateTime', () => {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index fb2ba5f29..77787d230 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -31,9 +31,9 @@ export const deriveYearlyFee = ({
   return yearlyFee
 }
 
-export const formatExpiry = (expiry: Date) =>
+export const formatExpiry = (expiry: Date, options: { short?: boolean } = {}) =>
   `${expiry.toLocaleDateString(undefined, {
-    month: 'long',
+    month: options.short ? 'short' : 'long',
   })} ${expiry.getDate()}, ${expiry.getFullYear()}`
 
 export const formatDateTime = (date: Date) => {