diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 8ed1f63610..3e192edc77 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -326,6 +326,7 @@
   "find_the_symbols_you_need_with_premium": "",
   "first_name": "",
   "first_x_days_free_after_that_y_per_month": "",
+  "first_x_days_free_after_that_y_per_year": "",
   "fold_line": "",
   "folder_location": "",
   "following_paths_conflict": "",
diff --git a/services/web/frontend/js/features/subscription/components/new/payment-preview/trial-price.tsx b/services/web/frontend/js/features/subscription/components/new/payment-preview/trial-price.tsx
index 7bd62ad893..91872a2df4 100644
--- a/services/web/frontend/js/features/subscription/components/new/payment-preview/trial-price.tsx
+++ b/services/web/frontend/js/features/subscription/components/new/payment-preview/trial-price.tsx
@@ -2,7 +2,8 @@ import { Trans } from 'react-i18next'
 import { usePaymentContext } from '../../../context/payment-context'
 
 function TrialPrice() {
-  const { currencySymbol, trialLength, recurlyPrice } = usePaymentContext()
+  const { currencySymbol, plan, recurlyPrice, trialLength } =
+    usePaymentContext()
 
   if (!trialLength || !recurlyPrice) {
     return null
@@ -10,14 +11,25 @@ function TrialPrice() {
 
   return (
     <div>
-      <Trans
-        i18nKey="first_x_days_free_after_that_y_per_month"
-        components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
-        values={{
-          trialLen: trialLength,
-          price: `${currencySymbol}${recurlyPrice.total}`,
-        }}
-      />
+      {plan.annual ? (
+        <Trans
+          i18nKey="first_x_days_free_after_that_y_per_year"
+          components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
+          values={{
+            trialLen: trialLength,
+            price: `${currencySymbol}${recurlyPrice.total}`,
+          }}
+        />
+      ) : (
+        <Trans
+          i18nKey="first_x_days_free_after_that_y_per_month"
+          components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
+          values={{
+            trialLen: trialLength,
+            price: `${currencySymbol}${recurlyPrice.total}`,
+          }}
+        />
+      )}
     </div>
   )
 }
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 2d78496033..ef2468dc63 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -528,6 +528,7 @@
   "find_the_symbols_you_need_with_premium": "Find the symbols you need faster with Overleaf Premium",
   "first_name": "First Name",
   "first_x_days_free_after_that_y_per_month": "First <0>__trialLen__ days free</0>, after that <0>__price__</0> per month",
+  "first_x_days_free_after_that_y_per_year": "First <0>__trialLen__ days free</0>, after that <0>__price__</0> per year",
   "fold_line": "Fold line",
   "folder_location": "Folder location",
   "folders": "Folders",