diff --git a/src/components/@molecules/DateSelection/DateSelection.test.tsx b/src/components/@molecules/DateSelection/DateSelection.test.tsx
index e72670922..f64c4f66f 100644
--- a/src/components/@molecules/DateSelection/DateSelection.test.tsx
+++ b/src/components/@molecules/DateSelection/DateSelection.test.tsx
@@ -13,51 +13,64 @@ describe('DateSelection', () => {
     vi.resetAllMocks()
   })
   it('should render a plus minus counter if no name was provided', () => {
-    render(<DateSelection minSeconds={0} seconds={ONE_YEAR} setSeconds={() => {}} />)
+    render(
+      <DateSelection
+        minSeconds={0}
+        seconds={ONE_YEAR}
+        setSeconds={() => {}}
+        durationType="years"
+      />,
+    )
 
     expect(screen.getByTestId('plus-minus-control-input')).toBeInTheDocument()
   })
   it('should show a calendar if user is picking by date', async () => {
-    render(<DateSelection minSeconds={0} seconds={ONE_YEAR} setSeconds={() => {}} />)
-
-    screen.getByTestId('date-selection').click()
-
+    render(
+      <DateSelection minSeconds={0} seconds={ONE_YEAR} setSeconds={() => {}} durationType="date" />,
+    )
     expect(screen.getByText('unit.years.1 registration.')).toBeVisible()
   })
   it('should set back to one year when switching to a year toggle if previously was set to less', async () => {
     const { result } = renderHook(() => useState(ONE_YEAR))
-    const { rerender } = render(
-      <DateSelection minSeconds={0} seconds={result.current[0]} setSeconds={result.current[1]} />,
+    let { result: durationTypeResult } = renderHook(() => useState<'years' | 'date'>('years'))
+
+    const DateSelectionComponent = () => (
+      <DateSelection
+        minSeconds={0}
+        seconds={result.current[0]}
+        setSeconds={result.current[1]}
+        durationType={durationTypeResult.current[0]}
+        onChangeDurationType={durationTypeResult.current[1]}
+      />
     )
 
+    const { rerender } = render(<DateSelectionComponent />)
+
     const dateSelection = screen.getByTestId('date-selection')
 
     await userEvent.click(dateSelection)
 
+    rerender(<DateSelectionComponent />)
+
     await waitFor(() => {
       expect(screen.getByText('calendar.pick_by_years')).toBeVisible()
     })
 
-    const currentDate = new Date()
-    act(() => {
-      result.current[1](secondsFromDateDiff({ startDate: currentDate, additionalMonths: 1 }))
-    })
+    result.current[1](secondsFromDateDiff({ startDate: new Date(), additionalMonths: 1 }))
 
-    rerender(
-      <DateSelection minSeconds={0} seconds={result.current[0]} setSeconds={result.current[1]} />,
-    )
+    rerender(<DateSelectionComponent />)
 
     expect(screen.getByText('unit.months.1 registration.')).toBeVisible()
 
     await userEvent.click(dateSelection)
 
+    rerender(<DateSelectionComponent />)
+
     await waitFor(() => {
       expect(screen.getByText('calendar.pick_by_date')).toBeVisible()
     })
 
-    rerender(
-      <DateSelection minSeconds={0} seconds={result.current[0]} setSeconds={result.current[1]} />,
-    )
+    rerender(<DateSelectionComponent />)
 
     expect(screen.getByText('unit.years.1 registration.')).toBeVisible()
   })
diff --git a/src/components/@molecules/DateSelection/DateSelection.tsx b/src/components/@molecules/DateSelection/DateSelection.tsx
index b2f6547db..3c19320e2 100644
--- a/src/components/@molecules/DateSelection/DateSelection.tsx
+++ b/src/components/@molecules/DateSelection/DateSelection.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
@@ -33,6 +33,8 @@ const now = Math.floor(Date.now() / 1000)
 export const DateSelection = ({
   seconds,
   setSeconds,
+  durationType,
+  onChangeDurationType,
   name,
   minSeconds,
   mode = 'register',
@@ -40,14 +42,14 @@ export const DateSelection = ({
 }: {
   seconds: number
   setSeconds: (seconds: number) => void
+  durationType: 'years' | 'date'
   name?: string
   minSeconds: number
   mode?: 'register' | 'extend'
   expiry?: number
+  onChangeDurationType?: (type: 'years' | 'date') => void
 }) => {
   const currentTime = expiry ?? now
-  const [yearPickView, setYearPickView] = useState<'years' | 'date'>('years')
-  const toggleYearPickView = () => setYearPickView(yearPickView === 'date' ? 'years' : 'date')
 
   const { t } = useTranslation()
 
@@ -57,29 +59,23 @@ export const DateSelection = ({
   }, [minSeconds, seconds])
 
   const dateInYears = Math.floor(secondsToYears(seconds))
-  const extensionPeriod = useMemo(() => {
-    return formatDurationOfDates(
-      new Date(currentTime * 1000),
-      new Date((currentTime + seconds) * 1000),
-      t,
-    )
-  }, [currentTime, seconds, t])
 
+  // When the duration type is years, normalise the seconds to a year value
   useEffect(() => {
-    if (yearPickView === 'years' && currentTime) {
+    if (durationType === 'years' && currentTime) {
       setSeconds(
         secondsFromDateDiff({
           startDate: new Date(currentTime * 1000),
-          additionalYears: dateInYears < 1 ? 1 : dateInYears,
+          additionalYears: Math.max(1, dateInYears),
         }),
       )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dateInYears, yearPickView])
+  }, [dateInYears, durationType])
 
   return (
     <Container>
-      {yearPickView === 'date' ? (
+      {durationType === 'date' ? (
         <Calendar
           value={currentTime + seconds}
           onChange={(e) => {
@@ -111,15 +107,18 @@ export const DateSelection = ({
         />
       )}
       <Typography color="greyPrimary" fontVariant="smallBold" data-testid="date-selection-info">
-        {extensionPeriod === t('unit.invalid_date', { ns: 'common' })
-          ? extensionPeriod
-          : `${extensionPeriod} ${mode === 'register' ? 'registration.' : 'extension.'}`}{' '}
+        {formatDurationOfDates({
+          startDate: new Date(currentTime * 1000),
+          endDate: new Date((currentTime + seconds) * 1000),
+          postFix: mode === 'register' ? ' registration. ' : ' extension. ',
+          t,
+        })}
         <YearsViewSwitch
           type="button"
           data-testid="date-selection"
-          onClick={() => toggleYearPickView()}
+          onClick={() => onChangeDurationType?.(durationType === 'years' ? 'date' : 'years')}
         >
-          {t(`calendar.pick_by_${yearPickView === 'date' ? 'years' : 'date'}`, { ns: 'common' })}
+          {t(`calendar.pick_by_${durationType === 'date' ? 'years' : 'date'}`, { ns: 'common' })}
         </YearsViewSwitch>
       </Typography>
     </Container>
diff --git a/src/components/pages/profile/[name]/registration/FullInvoice.tsx b/src/components/pages/profile/[name]/registration/FullInvoice.tsx
index 51016b2b7..da8c90822 100644
--- a/src/components/pages/profile/[name]/registration/FullInvoice.tsx
+++ b/src/components/pages/profile/[name]/registration/FullInvoice.tsx
@@ -51,7 +51,11 @@ const FullInvoice = ({
     return [
       {
         label: t('invoice.timeRegistration', {
-          time: formatDurationOfDates(new Date(), new Date(now + seconds * 1000), t),
+          time: formatDurationOfDates({
+            startDate: new Date(),
+            endDate: new Date(now + seconds * 1000),
+            t,
+          }),
         }),
         bufferPercentage: CURRENCY_FLUCTUATION_BUFFER_PERCENTAGE,
         value: totalDurationBasedFee,
diff --git a/src/components/pages/profile/[name]/registration/Registration.tsx b/src/components/pages/profile/[name]/registration/Registration.tsx
index baf650902..5b61385e8 100644
--- a/src/components/pages/profile/[name]/registration/Registration.tsx
+++ b/src/components/pages/profile/[name]/registration/Registration.tsx
@@ -142,6 +142,7 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
     seconds,
     reverseRecord,
     paymentMethodChoice,
+    durationType,
   }: RegistrationStepData['pricing']) => {
     if (paymentMethodChoice === PaymentMethod.moonpay) {
       initiateMoonpayRegistrationMutation.mutate(secondsToYears(seconds))
@@ -149,7 +150,7 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
     }
     dispatch({
       name: 'setPricingData',
-      payload: { seconds, reverseRecord },
+      payload: { seconds, reverseRecord, durationType },
       selected,
     })
     if (!item.queue.includes('profile')) {
diff --git a/src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx b/src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx
index 873ecb57e..dc0413a6c 100644
--- a/src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx
+++ b/src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx
@@ -380,6 +380,7 @@ export type ActionButtonProps = {
   seconds: number
   balance: GetBalanceData | undefined
   totalRequiredBalance?: bigint
+  durationType: 'date' | 'years'
 }
 
 export const ActionButton = (props: ActionButtonProps) => {
@@ -404,12 +405,13 @@ export const ActionButton = (props: ActionButtonProps) => {
         reverseRecord,
         seconds,
         paymentMethodChoice,
+        durationType,
         callback,
       }) => (
         <Button
           loading={initiateMoonpayRegistrationMutation.isPending}
           data-testid="next-button"
-          onClick={() => callback({ reverseRecord, seconds, paymentMethodChoice })}
+          onClick={() => callback({ reverseRecord, seconds, paymentMethodChoice, durationType })}
           disabled={!paymentMethodChoice || initiateMoonpayRegistrationMutation.isPending}
         >
           {t('action.next', { ns: 'common' })}
@@ -438,10 +440,10 @@ export const ActionButton = (props: ActionButtonProps) => {
         </Button>
       ),
     )
-    .otherwise(({ reverseRecord, seconds, paymentMethodChoice, callback }) => (
+    .otherwise(({ reverseRecord, seconds, paymentMethodChoice, durationType, callback }) => (
       <Button
         data-testid="next-button"
-        onClick={() => callback({ reverseRecord, seconds, paymentMethodChoice })}
+        onClick={() => callback({ reverseRecord, seconds, paymentMethodChoice, durationType })}
         disabled={!paymentMethodChoice}
       >
         {t('action.next', { ns: 'common' })}
@@ -486,6 +488,9 @@ const Pricing = ({
   const resolverAddress = useContractAddress({ contract: 'ensPublicResolver' })
 
   const [seconds, setSeconds] = useState(() => registrationData.seconds ?? ONE_YEAR)
+  const [durationType, setDurationType] = useState<'date' | 'years'>(
+    registrationData.durationType ?? 'years',
+  )
 
   const [reverseRecord, setReverseRecord] = useState(() =>
     registrationData.started ? registrationData.reverseRecord : !hasPrimaryName,
@@ -550,7 +555,10 @@ const Pricing = ({
   return (
     <StyledCard>
       <StyledHeading>{t('heading', { name: beautifiedName })}</StyledHeading>
-      <DateSelection {...{ seconds, setSeconds, minSeconds }} />
+      <DateSelection
+        {...{ seconds, setSeconds, minSeconds, durationType }}
+        onChangeDurationType={setDurationType}
+      />
       <FullInvoice {...fullEstimate} />
       {hasPremium && gracePeriodEndDate ? (
         <TemporaryPremium startDate={gracePeriodEndDate} name={name} />
@@ -594,6 +602,7 @@ const Pricing = ({
             seconds,
             balance,
             totalRequiredBalance,
+            durationType,
           }}
         />
       </MobileFullWidth>
diff --git a/src/components/pages/profile/[name]/registration/types.ts b/src/components/pages/profile/[name]/registration/types.ts
index ac5dc197b..2183af96b 100644
--- a/src/components/pages/profile/[name]/registration/types.ts
+++ b/src/components/pages/profile/[name]/registration/types.ts
@@ -23,6 +23,7 @@ export type RegistrationStepData = {
     seconds: number
     reverseRecord: boolean
     paymentMethodChoice: PaymentMethod | ''
+    durationType: 'date' | 'years'
   }
   profile: {
     records: ProfileRecord[]
diff --git a/src/hooks/useRegistrationReducer.ts b/src/hooks/useRegistrationReducer.ts
index d0ade546a..f91f6fd5c 100644
--- a/src/hooks/useRegistrationReducer.ts
+++ b/src/hooks/useRegistrationReducer.ts
@@ -30,6 +30,7 @@ const defaultData: RegistrationReducerDataItem = {
   isMoonpayFlow: false,
   externalTransactionId: '',
   chainId: 1,
+  durationType: 'years',
   version: REGISTRATION_REDUCER_DATA_ITEM_VERSION,
 }
 
@@ -52,6 +53,7 @@ const makeDefaultData = (selected: SelectedItemProperties): RegistrationReducerD
   isMoonpayFlow: false,
   externalTransactionId: '',
   version: REGISTRATION_REDUCER_DATA_ITEM_VERSION,
+  durationType: 'years',
   ...selected,
 })
 
@@ -107,6 +109,7 @@ const reducer = (state: RegistrationReducerData, action: RegistrationReducerActi
     case 'setPricingData': {
       item.seconds = action.payload.seconds
       item.reverseRecord = action.payload.reverseRecord
+      item.durationType = action.payload.durationType
       break
     }
     case 'setTransactionsData': {
diff --git a/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx b/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
index 09409d73b..723d375d6 100644
--- a/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
+++ b/src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx
@@ -197,6 +197,7 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
   const view = flow[viewIdx]
 
   const [seconds, setSeconds] = useState(ONE_YEAR)
+  const [durationType, setDurationType] = useState<'years' | 'date'>('years')
 
   const years = secondsToYears(seconds)
 
@@ -213,15 +214,15 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
   const previousYearlyFee = usePreviousDistinct(yearlyFee) || 0n
   const unsafeDisplayYearlyFee = yearlyFee !== 0n ? yearlyFee : previousYearlyFee
   const isShowingPreviousYearlyFee = yearlyFee === 0n && previousYearlyFee > 0n
-  const { data: expiryData } = useExpiry({ enabled: names.length > 1, name: names[0] })
-  const expireDate = expiryData?.expiry?.date ? new Date(expiryData?.expiry?.date) : new Date()
-  const extendedDate = new Date(expireDate.getTime() + seconds * 1000)
+  const { data: expiryData } = useExpiry({ enabled: names.length === 1, name: names[0] })
+  const expiryDate = expiryData?.expiry?.date
+  const extendedDate = expiryDate ? new Date(expiryDate.getTime() + seconds * 1000) : undefined
 
   const transactions = [
     createTransactionItem('extendNames', {
       names,
       duration: seconds,
-      startDateTimestamp: expireDate.getTime(),
+      startDateTimestamp: expiryDate?.getTime(),
       displayPrice: makeCurrencyDisplay({
         eth: totalRentFee,
         ethPrice,
@@ -243,7 +244,7 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
         data: {
           duration: seconds,
           names,
-          startDateTimestamp: expireDate.getTime(),
+          startDateTimestamp: expiryDate?.getTime(),
         },
         stateOverride: [
           {
@@ -266,7 +267,7 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
   const items: InvoiceItem[] = [
     {
       label: t('input.extendNames.invoice.extension', {
-        time: formatDurationOfDates(expireDate, extendedDate, t),
+        time: formatDurationOfDates({ startDate: expiryDate, endDate: extendedDate, t }),
       }),
       value: totalRentFee,
       bufferPercentage: CURRENCY_FLUCTUATION_BUFFER_PERCENTAGE,
@@ -328,6 +329,8 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
                     minSeconds={minSeconds}
                     mode="extend"
                     expiry={Number(expiryData?.expiry.value)}
+                    durationType={durationType}
+                    onChangeDurationType={setDurationType}
                   />
                 ) : (
                   <PlusMinusControl
diff --git a/src/transaction-flow/transaction/extendNames.ts b/src/transaction-flow/transaction/extendNames.ts
index d009ded65..ac2ff598a 100644
--- a/src/transaction-flow/transaction/extendNames.ts
+++ b/src/transaction-flow/transaction/extendNames.ts
@@ -10,7 +10,7 @@ import { calculateValueWithBuffer, formatDurationOfDates } from '../../utils/uti
 type Data = {
   names: string[]
   duration: number
-  startDateTimestamp: number
+  startDateTimestamp?: number
   displayPrice?: string
 }
 
@@ -30,11 +30,11 @@ const displayItems = (
     },
     {
       label: 'duration',
-      value: formatDurationOfDates(
-        new Date(startDateTimestamp),
-        new Date(startDateTimestamp + duration * 1000),
+      value: formatDurationOfDates({
+        startDate: startDateTimestamp ? new Date(startDateTimestamp) : undefined,
+        endDate: startDateTimestamp ? new Date(startDateTimestamp + duration * 1000) : undefined,
         t,
-      ),
+      }),
     },
     {
       label: 'cost',
diff --git a/src/transaction-flow/transaction/registerName.ts b/src/transaction-flow/transaction/registerName.ts
index 633368024..3a1d95dfb 100644
--- a/src/transaction-flow/transaction/registerName.ts
+++ b/src/transaction-flow/transaction/registerName.ts
@@ -24,7 +24,11 @@ const displayItems = (
   },
   {
     label: 'duration',
-    value: formatDurationOfDates(new Date(), new Date(now + duration * 1000), t),
+    value: formatDurationOfDates({
+      startDate: new Date(),
+      endDate: new Date(now + duration * 1000),
+      t,
+    }),
   },
 ]
 
diff --git a/src/utils/date.test.ts b/src/utils/date.test.ts
index 64d2fad68..528f68628 100644
--- a/src/utils/date.test.ts
+++ b/src/utils/date.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import {
+  calculateDatesDiff,
   dateFromDateDiff,
   roundDurationWithDay,
   safeDateObj,
@@ -150,3 +151,25 @@ describe('secondsFromDateDiff', () => {
     expect(secondsFromDate).toBe(ONE_DAY * 60)
   })
 })
+
+describe.only('calculateDateDiff', () => {
+  it.each([
+    ['2024-01-10', '2025-01-10', '1-0-0'],
+    ['2024-01-10', '2024-02-10', '0-1-0' ], 
+    ['2024-01-10', '2024-01-11', '0-0-1' ],
+    ['2024-01-10', '2025-01-9', '0-11-30'],
+    ['2024-03-10', '2025-03-9', '0-11-27'],
+    ['2023-03-10', '2024-03-9', '0-11-28'], // leap year
+    ['2024-04-10', '2025-04-9', '0-11-30'],
+    ['2024-04-10', '2025-04-10', '1-0-0' ],
+    ['2024-11-10', '2026-05-1', '1-5-21' ],
+  ])(`should return correct diff from %s to %s`, (date1, date2, result) => {
+    const startDate = new Date(date1)
+    const endDate = new Date(date2)
+
+    const toUnit = (i: number) => i === 0 ? 'years' : i === 1 ? 'months' : 'days'
+    const dateDiff = Object.fromEntries(result.split('-').map((value, i) => [toUnit(i),parseInt(value)]))
+
+    expect(calculateDatesDiff(startDate, endDate)).toEqual({ diff: dateDiff, isNegative: false})
+  })
+})
\ No newline at end of file
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 693b3435a..ad32ee4e2 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -40,15 +40,6 @@ export const dateFromDateDiff = ({
 }) => {
   const newDate = new Date(startDate.getTime())
   newDate.setFullYear(newDate.getFullYear() + additionalYears)
-  // Get the new month's last day
-  const getEndDayOfMonth = new Date(
-    newDate.getFullYear(),
-    (newDate.getMonth() + 1 + additionalMonths) % 12,
-    0,
-  ).getDate()
-  if (newDate.getDate() > getEndDayOfMonth) {
-    newDate.setDate(getEndDayOfMonth)
-  }
   newDate.setMonth(newDate.getMonth() + additionalMonths)
   newDate.setDate(newDate.getDate() + additionalDays)
   return newDate
@@ -68,3 +59,45 @@ export const secondsFromDateDiff = ({
   const newDate = dateFromDateDiff({ startDate, additionalYears, additionalMonths, additionalDays })
   return Math.floor((newDate.getTime() - startDate.getTime()) / 1000)
 }
+
+export type DatesDiff = {
+  years: number
+  months: number
+  days: number
+}
+
+export const calculateDatesDiff = (
+  date1: Date,
+  date2: Date,
+): { diff: DatesDiff; isNegative: boolean } => {
+  const isNegative = date1 > date2
+  const [startDate, endDate] = isNegative ? [date2, date1] : [date1, date2]
+  const dateDiff = {
+    years: endDate.getFullYear() - startDate.getFullYear(),
+    months: endDate.getMonth() - startDate.getMonth(),
+    days: endDate.getDate() - startDate.getDate(),
+  }
+
+  if (dateDiff.days < 0) {
+    const numberOfDaysInMonthBeforeEndDate = new Date(
+      endDate.getFullYear(),
+      endDate.getMonth(),
+      0,
+    ).getDate()
+
+    const newDays = numberOfDaysInMonthBeforeEndDate - startDate.getDate() + endDate.getDate()
+
+    dateDiff.days = newDays
+    dateDiff.months -= 1
+  }
+
+  if (dateDiff.months < 0) {
+    dateDiff.years -= 1
+    dateDiff.months += 12
+  }
+
+  return {
+    diff: dateDiff,
+    isNegative,
+  }
+}
diff --git a/src/utils/utils.test.ts b/src/utils/utils.test.ts
index baf7ad7a9..a188bcf26 100644
--- a/src/utils/utils.test.ts
+++ b/src/utils/utils.test.ts
@@ -89,51 +89,59 @@ describe('formatFullExpiry', () => {
 describe('formatDurationOfDates', () => {
   it('should return a year locale', () => {
     expect(
-      formatDurationOfDates(
-        new Date(),
-        dateFromDateDiff({ startDate: new Date(), additionalYears: 1 }),
-        (x) => x,
-      ),
-    ).toEqual('unit.years')
+      formatDurationOfDates({
+        startDate: new Date(),
+        endDate: dateFromDateDiff({ startDate: new Date(), additionalYears: 1 }),
+        t: (x, options: any) => x + options?.count,
+      }),
+    ).toEqual('unit.years1')
   })
   it('should return a month locale', () => {
     expect(
-      formatDurationOfDates(
-        new Date(),
-        dateFromDateDiff({ startDate: new Date(), additionalMonths: 1 }),
-        (x) => x,
-      ),
-    ).toEqual('unit.months')
+      formatDurationOfDates({
+        startDate: new Date(),
+        endDate: dateFromDateDiff({ startDate: new Date(), additionalMonths: 1 }),
+        t: (x, options: any) => x + options?.count,
+      }),
+    ).toEqual('unit.months1')
   })
   it('should return a day locale', () => {
     expect(
-      formatDurationOfDates(
-        new Date(),
-        dateFromDateDiff({ startDate: new Date(), additionalDays: 1 }),
-        (x) => x,
-      ),
-    ).toEqual('unit.days')
+      formatDurationOfDates({
+        startDate: new Date(),
+        endDate: dateFromDateDiff({ startDate: new Date(), additionalDays: 1 }),
+        t: (x, options: any) => x + options?.count,
+      }),
+    ).toEqual('unit.days1')
   })
   it('should return invalid date if less than a day', () => {
-    expect(formatDurationOfDates(new Date(), new Date(Date.now() + 123 * 1000), (x) => x)).toEqual(
-      'unit.invalid_date',
-    )
+    expect(
+      formatDurationOfDates({
+        startDate: new Date(),
+        endDate: new Date(Date.now() + 123 * 1000),
+        t: (x, options: any) =>  x + options?.count,
+      }),
+    ).toEqual('unit.days0')
   })
   it('if extra day or month, return multiple locales', () => {
     expect(
-      formatDurationOfDates(
-        new Date(),
-        dateFromDateDiff({
+      formatDurationOfDates({
+        startDate: new Date(),
+        endDate: dateFromDateDiff({
           startDate: new Date(),
           additionalYears: 2,
           additionalMonths: 3,
           additionalDays: 1,
         }),
-        (x) => x,
-      ),
-    ).toEqual('unit.years, unit.months')
+        t: (x, options: any) => x + options?.count,
+      }),
+    ).toEqual('unit.years2, unit.months3')
     expect(
-      formatDurationOfDates(new Date(), new Date(Date.now() + ONE_DAY * 33 * 1000), (x) => x),
+      formatDurationOfDates({
+        startDate: new Date(),
+        endDate: new Date(Date.now() + ONE_DAY * 33 * 1000),
+        t: (x) => x,
+      }),
     ).toEqual('unit.months, unit.days')
   })
 })
@@ -333,4 +341,4 @@ describe('getEncodedLabelAmount', () => {
     const result = getEncodedLabelAmount(name)
     expect(result).toEqual(2)
   })
-})
\ No newline at end of file
+})
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 48fcf3827..69e8b8fe7 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -8,6 +8,7 @@ import { DecodedFuses } from '@ensdomains/ensjs/utils'
 import { KNOWN_RESOLVER_DATA } from '@app/constants/resolverAddressData'
 
 import { CURRENCY_FLUCTUATION_BUFFER_PERCENTAGE } from './constants'
+import { calculateDatesDiff } from './date'
 import { ONE_YEAR } from './time'
 
 export * from './time'
@@ -50,58 +51,38 @@ export const formatDateTime = (date: Date) => {
 export const formatFullExpiry = (expiryDate?: Date) =>
   expiryDate ? `${formatExpiry(expiryDate)}, ${formatDateTime(expiryDate)}` : ''
 
-export const formatDurationOfDates = (startDate: Date, endDate: Date, t: TFunction) => {
-  const startYear = startDate.getFullYear()
+export const formatDurationOfDates = ({
+  startDate,
+  endDate,
+  postFix = '',
+  t,
+}: {
+  startDate?: Date
+  endDate?: Date
+  postFix?: string
+  t: TFunction
+}) => {
+  if (!startDate || !endDate) return t('unit.invalid_date', { ns: 'common' })
 
-  let yearDiff = endDate.getFullYear() - startYear
-  let monthDiff = endDate.getMonth() - startDate.getMonth()
-  if (monthDiff < 0) {
-    yearDiff -= 1
-    monthDiff += 12
-  }
+  const { isNegative, diff } = calculateDatesDiff(startDate, endDate)
 
-  let dayDiff = endDate.getDate() - startDate.getDate()
-  if (dayDiff < 0) {
-    const lastDayOfStartMonth = new Date(startYear, startDate.getMonth() + 1, 0).getDate()
-    const lastDayOfEndMonth = new Date(endDate.getFullYear(), endDate.getMonth() + 1, 0).getDate()
-    // Calculate if the day is still within the next month's last day
-    const calcEndDay = dayDiff + startDate.getDate()
-    dayDiff += lastDayOfStartMonth
-    if (calcEndDay < lastDayOfEndMonth && monthDiff > 0) {
-      monthDiff -= 1
-    } else if (calcEndDay < lastDayOfEndMonth) {
-      yearDiff -= 1
-      monthDiff = 11
-    } else {
-      dayDiff = 0
-    }
-  }
+  if (isNegative) return t('unit.invalid_date', { ns: 'common' })
 
-  if (yearDiff > 0) {
-    if (monthDiff > 0) {
-      return `${t('unit.years', { count: yearDiff, ns: 'common' })}, ${t('unit.months', {
-        count: monthDiff,
-        ns: 'common',
-      })}`
-    }
-    return t('unit.years', { count: yearDiff, ns: 'common' })
-  }
+  const diffEntries = [
+    ['years', diff.years],
+    ['months', diff.months],
+    ['days', diff.days],
+  ] as [string, number][]
 
-  if (monthDiff > 0) {
-    if (dayDiff > 0) {
-      return `${t('unit.months', { count: monthDiff, ns: 'common' })}, ${t('unit.days', {
-        count: dayDiff,
-        ns: 'common',
-      })}`
-    }
-    return t('unit.months', { count: monthDiff, ns: 'common' })
-  }
+  const durationStrings = diffEntries
+    .filter(([, value]) => value > 0)
+    .slice(0, 2)
+    .filter((value): value is [string, number] => !!value)
+    .map(([unit, count]) => t(`unit.${unit}`, { count, ns: 'common' }))
 
-  if (dayDiff > 0) {
-    return t('unit.days', { count: dayDiff, ns: 'common' })
-  }
+  if (durationStrings.length === 0) return t('unit.days', { count: 0, ns: 'common' }) + postFix
 
-  return t('unit.invalid_date', { ns: 'common' })
+  return durationStrings.join(', ') + postFix
 }
 
 export const makeEtherscanLink = (data: string, network?: string, route: string = 'tx') =>