diff --git a/Gemfile b/Gemfile
index 1875cec890..afe2b14402 100644
--- a/Gemfile
+++ b/Gemfile
@@ -197,3 +197,4 @@ gem "ruby-openai", "~> 7.0"
 gem "anycable-rails", "~> 1.5"
 gem "react_on_rails", "~> 14.0"
 gem "psych", "~> 5.2.3"
+gem "i18n-tasks", "~> 1.0"
diff --git a/app/javascript/components/AffiliatesDashboard/AffiliateSignupForm.tsx b/app/javascript/components/AffiliatesDashboard/AffiliateSignupForm.tsx
index fbe41ffa12..3830182046 100644
--- a/app/javascript/components/AffiliatesDashboard/AffiliateSignupForm.tsx
+++ b/app/javascript/components/AffiliatesDashboard/AffiliateSignupForm.tsx
@@ -2,6 +2,7 @@ import cx from "classnames";
 import * as React from "react";
 import { Link, useLoaderData } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   submitAffiliateSignupForm,
@@ -41,6 +42,7 @@ const validateProduct = (product: SelfServeAffiliateProduct): InvalidProductAttr
 };
 
 export const AffiliateSignupForm = () => {
+  const { t } = useTranslation('common');
   const data = cast<AffiliateSignupFormPageData>(useLoaderData());
   const loggedInUser = useLoggedInUser();
   const [isSaving, setIsSaving] = React.useState(false);
@@ -57,17 +59,17 @@ export const AffiliateSignupForm = () => {
 
   const handleSaveChanges = asyncVoid(async () => {
     if (products.some((product) => validateProduct(product).size > 0)) {
-      showAlert("There are some errors on the page. Please fix them and try again.", "error");
+      showAlert(t("errors.fix_errors_and_try_again"), "error");
       return;
     }
 
     try {
       setIsSaving(true);
       await submitAffiliateSignupForm({ products, disable_global_affiliate: disableGlobalAffiliate });
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert(`An error occurred while saving changes${e.message ? ` - ${e.message}` : ""}`, "error");
+      showAlert(t("errors.error_saving_changes", { message: e.message || "" }), "error");
     } finally {
       setIsSaving(false);
     }
diff --git a/app/javascript/components/Authentication/ForgotPasswordForm.tsx b/app/javascript/components/Authentication/ForgotPasswordForm.tsx
index 4e5cb0c64f..afae90eae5 100644
--- a/app/javascript/components/Authentication/ForgotPasswordForm.tsx
+++ b/app/javascript/components/Authentication/ForgotPasswordForm.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { renewPassword } from "$app/data/login";
 import { assertResponseError } from "$app/utils/request";
@@ -10,6 +11,7 @@ import { showAlert } from "$app/components/server-components/Alert";
 type SaveState = { type: "initial" | "submitting" } | { type: "error"; message: string };
 
 export const ForgotPasswordForm = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation('authentication');
   const uid = React.useId();
   const [email, setEmail] = React.useState("");
   const [saveState, setSaveState] = React.useState<SaveState>({ type: "initial" });
@@ -19,7 +21,7 @@ export const ForgotPasswordForm = ({ onClose }: { onClose: () => void }) => {
     setSaveState({ type: "submitting" });
     try {
       await renewPassword(email);
-      showAlert("Password reset sent! Please make sure to check your spam folder.", "success");
+      showAlert(t("forgot_password.password_reset_sent"), "success");
       setSaveState({ type: "initial" });
     } catch (e) {
       assertResponseError(e);
@@ -31,7 +33,7 @@ export const ForgotPasswordForm = ({ onClose }: { onClose: () => void }) => {
     <form onSubmit={(e) => void handleSubmit(e)}>
       <SocialAuth />
       <div role="separator">
-        <span>or</span>
+        <span>{t("forgot_password.or")}</span>
       </div>
       <section>
         {saveState.type === "error" ? (
@@ -41,14 +43,14 @@ export const ForgotPasswordForm = ({ onClose }: { onClose: () => void }) => {
         ) : null}
         <fieldset>
           <legend>
-            <label htmlFor={uid}>Email to send reset instructions to</label>
+            <label htmlFor={uid}>{t("forgot_password.email_label")}</label>
           </legend>
           <input id={uid} type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
         </fieldset>
         <Button color="primary" type="submit" disabled={saveState.type === "submitting"}>
-          {saveState.type === "submitting" ? "Sending..." : "Send"}
+          {saveState.type === "submitting" ? t("forgot_password.sending") : t("forgot_password.send")}
         </Button>
-        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onClose}>{t("forgot_password.cancel")}</Button>
       </section>
     </form>
   );
diff --git a/app/javascript/components/BundleEdit/ContentTab/BundleContentUpdatedStatus.tsx b/app/javascript/components/BundleEdit/ContentTab/BundleContentUpdatedStatus.tsx
index 8a2987e94c..a23394ce77 100644
--- a/app/javascript/components/BundleEdit/ContentTab/BundleContentUpdatedStatus.tsx
+++ b/app/javascript/components/BundleEdit/ContentTab/BundleContentUpdatedStatus.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { updatePurchasesContent } from "$app/data/bundle";
 import { assertResponseError } from "$app/utils/request";
@@ -8,6 +9,7 @@ import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
 
 export const BundleContentUpdatedStatus = () => {
+  const { t } = useTranslation('common');
   const { id } = useBundleEditContext();
   const [isHidden, setIsHidden] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
@@ -16,7 +18,7 @@ export const BundleContentUpdatedStatus = () => {
     setIsLoading(true);
     try {
       await updatePurchasesContent(id);
-      showAlert("Queued an update to the content of all outdated purchases.", "success");
+      showAlert(t("actions.queued_content_update"), "success");
       setIsHidden(true);
     } catch (e) {
       assertResponseError(e);
diff --git a/app/javascript/components/BundleEdit/Layout.tsx b/app/javascript/components/BundleEdit/Layout.tsx
index 50be4067ed..fc0aec2d21 100644
--- a/app/javascript/components/BundleEdit/Layout.tsx
+++ b/app/javascript/components/BundleEdit/Layout.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Link, useMatches, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 import { saveBundle } from "$app/data/bundle";
 import { setProductPublished } from "$app/data/publish_product";
@@ -42,12 +43,13 @@ export const Layout = ({
   const [match] = useMatches();
   const tab = match?.handle ?? "product";
 
+  const { t } = useTranslation('common');
   const [isSaving, setIsSaving] = React.useState(false);
   const handleSave = async () => {
     try {
       setIsSaving(true);
       await saveBundle(id, bundle);
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -62,7 +64,7 @@ export const Layout = ({
       await saveBundle(id, bundle);
       await setProductPublished(uniquePermalink, published);
       updateBundle({ is_published: published });
-      showAlert(published ? "Published!" : "Unpublished!", "success");
+      showAlert(published ? t("actions.published") : t("actions.unpublished"), "success");
       if (tab === "share") navigate(`/bundles/${id}/content`);
     } catch (e) {
       assertResponseError(e);
@@ -87,9 +89,9 @@ export const Layout = ({
 
   const onTabClick = (e: React.MouseEvent<HTMLAnchorElement>, callback?: () => void) => {
     const message = isUploadingFiles
-      ? "Some files are still uploading, please wait..."
+      ? t("errors.files_still_uploading")
       : isUploadingFilesOrImages
-        ? "Some images are still uploading, please wait..."
+        ? t("errors.images_still_uploading")
         : undefined;
 
     if (message) {
@@ -155,7 +157,7 @@ export const Layout = ({
                 if (!bundle.is_published) {
                   evt.preventDefault();
                   showAlert(
-                    "Not yet! You've got to publish your awesome product before you can share it with your audience and the world.",
+                    t("errors.must_publish_before_share"),
                     "warning",
                   );
                 }
diff --git a/app/javascript/components/Checkout/GiftForm.tsx b/app/javascript/components/Checkout/GiftForm.tsx
index 230c7b4e4e..6bc19e8e05 100644
--- a/app/javascript/components/Checkout/GiftForm.tsx
+++ b/app/javascript/components/Checkout/GiftForm.tsx
@@ -1,5 +1,6 @@
 import cx from "classnames";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "$app/components/Button";
 import { useState, getErrors } from "$app/components/Checkout/payment";
@@ -7,6 +8,7 @@ import { Icon } from "$app/components/Icons";
 import { Modal } from "$app/components/Modal";
 
 export const GiftForm = ({ isMembership }: { isMembership: boolean }) => {
+  const { t } = useTranslation('checkout');
   const giftEmailUID = React.useId();
   const giftNoteUID = React.useId();
   const [cancellingPresetGift, setCancellingPresetGift] = React.useState(false);
@@ -20,7 +22,7 @@ export const GiftForm = ({ isMembership }: { isMembership: boolean }) => {
       <label className="flex w-full items-center justify-between">
         <div className="flex items-center">
           <Icon name="gift-fill" className="mr-2" />
-          <h4>Give as a gift?</h4>
+          <h4>{t("gift.give_as_gift")}</h4>
         </div>
         <input
           type="checkbox"
@@ -42,22 +44,21 @@ export const GiftForm = ({ isMembership }: { isMembership: boolean }) => {
           {isMembership ? (
             <div role="alert" className="info">
               <div>
-                Note: Free trials will be charged immediately. The membership will not auto-renew. The recipient must
-                update the payment method to renew the membership.
+                {t("gift.membership_note")}
               </div>
             </div>
           ) : null}
           {gift.type === "normal" ? (
             <fieldset className={cx({ danger: hasError })}>
               <legend>
-                <label htmlFor={giftEmailUID}>Recipient email</label>
+                <label htmlFor={giftEmailUID}>{t("gift.recipient_email")}</label>
               </legend>
               <input
                 id={giftEmailUID}
                 type="email"
                 value={gift.email}
                 onChange={(evt) => dispatch({ type: "set-value", gift: { ...gift, email: evt.target.value } })}
-                placeholder="Recipient email address"
+                placeholder={t("gift.recipient_email_address")}
                 aria-invalid={hasError}
                 className="w-full"
               />
@@ -65,9 +66,9 @@ export const GiftForm = ({ isMembership }: { isMembership: boolean }) => {
           ) : (
             <div role="alert" className="info">
               <div>
-                {gift.name}'s email has been hidden for privacy purposes.{" "}
+                {t("gift.email_hidden", { name: gift.name })}{" "}
                 <button className="link" onClick={() => setCancellingPresetGift(true)}>
-                  Cancel gift option
+                  {t("gift.cancel_gift_option")}
                 </button>
               </div>
               <Modal
@@ -75,7 +76,7 @@ export const GiftForm = ({ isMembership }: { isMembership: boolean }) => {
                 onClose={() => setCancellingPresetGift(false)}
                 footer={
                   <>
-                    <Button onClick={() => setCancellingPresetGift(false)}>No, cancel</Button>
+                    <Button onClick={() => setCancellingPresetGift(false)}>{t("gift.no_cancel")}</Button>
                     <Button
                       color="primary"
                       onClick={() => {
@@ -83,26 +84,25 @@ export const GiftForm = ({ isMembership }: { isMembership: boolean }) => {
                         setCancellingPresetGift(false);
                       }}
                     >
-                      Yes, reset
+                      {t("gift.yes_reset")}
                     </Button>
                   </>
                 }
-                title="Reset gift option?"
+                title={t("gift.reset_gift_option")}
               >
-                You are about to switch off the gift option. To gift this wishlist again, you will need to return to the
-                wishlist page and select "Gift this product".
+                {t("gift.switch_off_gift")}
               </Modal>
             </div>
           )}
           <fieldset className="w-full">
             <legend>
-              <label htmlFor={giftNoteUID}>Message</label>
+              <label htmlFor={giftNoteUID}>{t("gift.message")}</label>
             </legend>
             <textarea
               id={giftNoteUID}
               value={gift.note}
               onChange={(evt) => dispatch({ type: "set-value", gift: { ...gift, note: evt.target.value } })}
-              placeholder="A personalized message (optional)"
+              placeholder={t("gift.personalized_message")}
               className="w-full"
             />
           </fieldset>
diff --git a/app/javascript/components/Checkout/PaymentForm.tsx b/app/javascript/components/Checkout/PaymentForm.tsx
index 9ee62e72db..e7d1597361 100644
--- a/app/javascript/components/Checkout/PaymentForm.tsx
+++ b/app/javascript/components/Checkout/PaymentForm.tsx
@@ -13,6 +13,7 @@ import * as BraintreeDataCollector from "braintree-web/data-collector";
 import * as BraintreePaypal from "braintree-web/paypal";
 import cx from "classnames";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { useBraintreeToken } from "$app/data/braintree_client_token_data";
 import { preparePaymentRequestPaymentMethodData } from "$app/data/card_payment_method_data";
@@ -419,9 +420,10 @@ const PaymentMethodRadio = ({
 };
 
 const useFail = () => {
+  const { t } = useTranslation('checkout');
   const [_, dispatch] = useState();
   return () => {
-    showAlert("Sorry, something went wrong. You were not charged.", "error");
+    showAlert(t("errors.something_went_wrong"), "error");
     dispatch({ type: "cancel" });
   };
 };
diff --git a/app/javascript/components/Developer/FollowFormEmbed.tsx b/app/javascript/components/Developer/FollowFormEmbed.tsx
index 8d2ef3b46c..2998085ebd 100644
--- a/app/javascript/components/Developer/FollowFormEmbed.tsx
+++ b/app/javascript/components/Developer/FollowFormEmbed.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { followFromEmbed } from "$app/data/follow_embed";
 import { asyncVoid } from "$app/utils/promise";
@@ -12,6 +13,7 @@ import { showAlert } from "$app/components/server-components/Alert";
 export const FOLLOW_FORM_EMBED_INPUT_ID = "gumroad-follow-form-embed-input";
 
 export const FollowFormEmbed = ({ sellerId, preview }: { sellerId: string; preview?: boolean }) => {
+  const { t } = useTranslation('common');
   const [email, setEmail] = React.useState("");
   const appDomain = useAppDomain();
   const followFormRef = React.useRef<HTMLDivElement & HTMLFormElement>(null);
@@ -64,10 +66,10 @@ export const FollowFormEmbed = ({ sellerId, preview }: { sellerId: string; previ
             evt.preventDefault();
             try {
               await followFromEmbed(sellerId, email);
-              showAlert("Check your inbox to confirm your follow request.", "success");
+              showAlert(t("actions.check_inbox_confirm_follow"), "success");
             } catch (e) {
               assertResponseError(e);
-              showAlert("Sorry, something went wrong. Please try again.", "error");
+              showAlert(t("errors.sorry_something_went_wrong"), "error");
             }
           })}
         >
diff --git a/app/javascript/components/DiscordButton.tsx b/app/javascript/components/DiscordButton.tsx
index c2c4f2b634..f3d121b697 100644
--- a/app/javascript/components/DiscordButton.tsx
+++ b/app/javascript/components/DiscordButton.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { joinServer, leaveServer } from "$app/data/discord_integration";
 import { DISCORD_CLIENT_ID, DISCORD_OAUTH_URL } from "$app/utils/integrations";
@@ -19,6 +20,7 @@ export const DiscordButton = ({
   redirectSettings?: { host: string; protocol: string };
   customState?: string;
 }) => {
+  const { t } = useTranslation('common');
   const [discordConnected, setDiscordConnected] = React.useState(connected);
   const [loading, setLoading] = React.useState(false);
 
@@ -40,15 +42,15 @@ export const DiscordButton = ({
       onSuccess: async (code) => {
         const response = await joinServer(code, purchaseId);
         if (response.ok) {
-          showAlert(`You've been added to the Discord server #${response.serverName}!`, "success");
+          showAlert(t("actions.discord_joined", { serverName: response.serverName }), "success");
           setDiscordConnected(true);
         } else {
-          showAlert("Could not join the Discord server, please try again.", "error");
+          showAlert(t("errors.discord_join_failed"), "error");
         }
         setLoading(false);
       },
       onError: () => {
-        showAlert("Could not join the Discord server, please try again.", "error");
+        showAlert(t("errors.discord_join_failed"), "error");
         setLoading(false);
       },
       onPopupClose: () => setLoading(false),
@@ -61,10 +63,10 @@ export const DiscordButton = ({
 
     const response = await leaveServer(purchaseId);
     if (response.ok) {
-      showAlert(`You've left the Discord server #${response.serverName}.`, "success");
+      showAlert(t("actions.discord_left", { serverName: response.serverName }), "success");
       setDiscordConnected(false);
     } else {
-      showAlert("Could not leave the Discord server.", "error");
+      showAlert(t("errors.discord_leave_failed"), "error");
     }
     setLoading(false);
   };
@@ -75,7 +77,7 @@ export const DiscordButton = ({
     </div>
   ) : (
     <Button className="button-discord" onClick={discordConnected ? leaveDiscord : openJoinDiscordPopup}>
-      {discordConnected ? "Leave Discord" : "Join Discord"}
+      {discordConnected ? t("actions.leave_discord") : t("actions.join_discord")}
     </Button>
   );
 };
diff --git a/app/javascript/components/Discover/Search.tsx b/app/javascript/components/Discover/Search.tsx
index 7b76348f7a..e757035751 100644
--- a/app/javascript/components/Discover/Search.tsx
+++ b/app/javascript/components/Discover/Search.tsx
@@ -1,5 +1,6 @@
 import cx from "classnames";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { getAutocompleteSearchResults, AutocompleteSearchResults, deleteAutocompleteSearch } from "$app/data/discover";
 import { escapeRegExp } from "$app/utils";
@@ -15,6 +16,7 @@ import { useOnChange } from "$app/components/useOnChange";
 import thumbnailPlaceholder from "$assets/images/placeholders/product-cover.png";
 
 export const Search = ({ query, setQuery }: { query?: string | undefined; setQuery: (query: string) => void }) => {
+  const { t } = useTranslation('common');
   const [enteredQuery, setEnteredQuery] = React.useState(query ?? "");
   useOnChange(() => setEnteredQuery(query ?? ""), [query]);
 
@@ -27,7 +29,7 @@ export const Search = ({ query, setQuery }: { query?: string | undefined; setQue
         setResults(await getAutocompleteSearchResults({ query: enteredQuery }, abortController.signal));
       } catch (e) {
         assertResponseError(e);
-        showAlert("Sorry, something went wrong. Please try again.", "error");
+        showAlert(t("errors.sorry_something_went_wrong"), "error");
       }
     }),
     300,
diff --git a/app/javascript/components/Download/CustomField/FileInput.tsx b/app/javascript/components/Download/CustomField/FileInput.tsx
index 602ef0534b..a451436664 100644
--- a/app/javascript/components/Download/CustomField/FileInput.tsx
+++ b/app/javascript/components/Download/CustomField/FileInput.tsx
@@ -1,5 +1,6 @@
 import { DirectUpload } from "@rails/activestorage";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import FileUtils from "$app/utils/file";
 import { asyncVoid } from "$app/utils/promise";
@@ -13,6 +14,7 @@ import { usePurchaseCustomFields, usePurchaseInfo } from "$app/components/server
 const MAX_FILE_SIZE = 10 * 1024 * 1024;
 
 export const FileInput = ({ customFieldId }: { customFieldId: string }) => {
+  const { t } = useTranslation('common');
   const purchaseInfo = usePurchaseInfo();
   const purchaseCustomFields = usePurchaseCustomFields();
   const [isUploading, setIsUploading] = React.useState(false);
@@ -33,7 +35,7 @@ export const FileInput = ({ customFieldId }: { customFieldId: string }) => {
       const filesToUpload = Array.from(event.target.files);
 
       if (filesToUpload.some((file) => file.size > MAX_FILE_SIZE)) {
-        return showAlert("Files must be smaller than 10 MB", "error");
+        return showAlert(t("errors.files_must_be_smaller_than_10mb"), "error");
       }
 
       const signedIds = await Promise.all(
@@ -68,9 +70,9 @@ export const FileInput = ({ customFieldId }: { customFieldId: string }) => {
         })),
       ]);
 
-      showAlert("Files uploaded successfully!", "success");
+      showAlert(t("actions.files_uploaded_successfully"), "success");
     } catch {
-      showAlert("Error uploading files. Please try again.", "error");
+      showAlert(t("errors.error_uploading_files_try_again"), "error");
     } finally {
       setIsUploading(false);
     }
diff --git a/app/javascript/components/Download/CustomField/TextInput.tsx b/app/javascript/components/Download/CustomField/TextInput.tsx
index f71931dd57..befe1c8313 100644
--- a/app/javascript/components/Download/CustomField/TextInput.tsx
+++ b/app/javascript/components/Download/CustomField/TextInput.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { asyncVoid } from "$app/utils/promise";
 import { request } from "$app/utils/request";
@@ -15,6 +16,7 @@ export const TextInput = ({
   type: "shortAnswer" | "longAnswer";
   label: string;
 }) => {
+  const { t } = useTranslation('common');
   const uid = React.useId();
   const purchaseInfo = usePurchaseInfo();
   const purchaseCustomFields = usePurchaseCustomFields();
@@ -50,7 +52,7 @@ export const TextInput = ({
       });
       setIsLoading(false);
       setSavedValue(newValue);
-      showAlert("Response saved!", "success");
+      showAlert(t("actions.response_saved"), "success");
     }),
     disabled: isLoading,
   };
diff --git a/app/javascript/components/Download/FileList.tsx b/app/javascript/components/Download/FileList.tsx
index 60317dad74..236d42d199 100644
--- a/app/javascript/components/Download/FileList.tsx
+++ b/app/javascript/components/Download/FileList.tsx
@@ -2,6 +2,7 @@ import cx from "classnames";
 import throttle from "lodash/throttle";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { createConsumptionEvent } from "$app/data/consumption_analytics";
 import { trackMediaLocationChanged } from "$app/data/media_location";
@@ -74,6 +75,7 @@ export type FolderItem = {
 
 type Props = { content_items: (FileItem | FolderItem)[] };
 export const FileList = ({ content_items }: Props) => {
+  const { t } = useTranslation('common');
   const [playingAudioForId, setPlayingAudioForId] = React.useState<null | string>(null);
 
   useRunOnce(() => {
@@ -83,7 +85,7 @@ export const FileList = ({ content_items }: Props) => {
         .some(({ processing }) => processing)
     )
       showAlert(
-        "This product includes a file that's being processed. You'll be able to download it shortly.",
+        t("warnings.file_being_processed"),
         "warning",
       );
   });
@@ -304,7 +306,7 @@ export const FileRow = ({
                     playAudio();
                   } catch (e) {
                     assertResponseError(e);
-                    showAlert("Sorry, something went wrong. Please try again.", "error");
+                    showAlert(t("errors.sorry_something_went_wrong"), "error");
                   }
                 } else {
                   playAudio();
@@ -656,7 +658,7 @@ const VideoEmbedPreview = ({
         setIsVideoPlayerShowing(true);
       } catch (e) {
         assertResponseError(e);
-        showAlert("Sorry, something went wrong. Please try again.", "error");
+        showAlert(t("errors.sorry_something_went_wrong"), "error");
       }
     } else {
       setIsVideoPlayerShowing(true);
@@ -730,7 +732,7 @@ const SendToKindleContainer = ({
       const json = cast<{ success: boolean }>(await response.json());
       if (!json.success) throw new ResponseError("Please enter a valid Kindle email address.");
 
-      showAlert("It's been sent to your Kindle.", "success");
+      showAlert(t("actions.sent_to_kindle"), "success");
       onDone();
     } catch (e) {
       assertResponseError(e);
diff --git a/app/javascript/components/Home/Nav.tsx b/app/javascript/components/Home/Nav.tsx
index 3a3f6c0567..abb943977e 100644
--- a/app/javascript/components/Home/Nav.tsx
+++ b/app/javascript/components/Home/Nav.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { useCurrentSeller } from "$app/components/CurrentSeller";
 import { useAppDomain, useDiscoverUrl } from "$app/components/DomainSettings";
@@ -57,6 +58,7 @@ const NavLink = ({
 };
 
 export const Nav = () => {
+  const { t } = useTranslation('common');
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const currentSeller = useCurrentSeller();
   const appDomain = useAppDomain();
@@ -64,19 +66,19 @@ export const Nav = () => {
 
   const navLinks = (
     <>
-      <NavLink text="Discover" href={discoverUrl} />
-      <NavLink text="About" href={Routes.about_url()} />
-      <NavLink text="Features" href={Routes.features_url()} />
-      <NavLink text="Pricing" href={Routes.pricing_url()} />
+      <NavLink text={t("navigation.discover")} href={discoverUrl} />
+      <NavLink text={t("navigation.about")} href={Routes.about_url()} />
+      <NavLink text={t("navigation.features")} href={Routes.features_url()} />
+      <NavLink text={t("navigation.pricing")} href={Routes.pricing_url()} />
     </>
   );
 
   const authLinks = currentSeller ? (
-    <NavLink text="Dashboard" href={Routes.dashboard_url({ host: appDomain })} category="button" />
+    <NavLink text={t("navigation.dashboard")} href={Routes.dashboard_url({ host: appDomain })} category="button" />
   ) : (
     <>
-      <NavLink text="Log in" href={Routes.login_url()} category="button" />
-      <NavLink text="Start selling" href={Routes.signup_url()} category="button" context="primary" />
+      <NavLink text={t("navigation.log_in")} href={Routes.login_url()} category="button" />
+      <NavLink text={t("navigation.start_selling")} href={Routes.signup_url()} category="button" context="primary" />
     </>
   );
 
diff --git a/app/javascript/components/ImageUploader.tsx b/app/javascript/components/ImageUploader.tsx
index d1c619376f..e05f5a0769 100644
--- a/app/javascript/components/ImageUploader.tsx
+++ b/app/javascript/components/ImageUploader.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import FileUtils from "$app/utils/file";
 
@@ -28,6 +29,7 @@ export const ImageUploader = ({
   imageAlt: string;
   disabled?: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const [uploading, setUploading] = React.useState(false);
 
   const overlayColor = "rgb(var(--filled) / calc(1 - var(--disabled-opacity)))";
@@ -51,7 +53,7 @@ export const ImageUploader = ({
                 const file = evt.target.files?.[0];
                 if (!file) return;
                 if (!FileUtils.isFileNameExtensionAllowed(file.name, allowedExtensions))
-                  return showAlert("Invalid file type.", "error");
+                  return showAlert(t("errors.invalid_file_type"), "error");
 
                 setUploading(true);
                 void onSelectFile(file).finally(() => setUploading(false));
diff --git a/app/javascript/components/Nav.tsx b/app/javascript/components/Nav.tsx
index 79e3f3fefc..021668ba4b 100644
--- a/app/javascript/components/Nav.tsx
+++ b/app/javascript/components/Nav.tsx
@@ -1,5 +1,6 @@
 import cx from "classnames";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { cast } from "ts-safe-cast";
 
 import { escapeRegExp } from "$app/utils";
@@ -89,6 +90,7 @@ export const Nav = ({ title, children, footer, compact }: Props) => {
 };
 
 export const UnbecomeDropdownItem = () => {
+  const { t } = useTranslation('common');
   const makeRequest = asyncVoid(async (ev: React.MouseEvent<HTMLAnchorElement>) => {
     ev.preventDefault();
 
@@ -100,7 +102,7 @@ export const UnbecomeDropdownItem = () => {
       }
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong.", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     }
   });
 
diff --git a/app/javascript/components/Post/PostCommentsSection.tsx b/app/javascript/components/Post/PostCommentsSection.tsx
index 61e607c9ac..d9c38dc3fb 100644
--- a/app/javascript/components/Post/PostCommentsSection.tsx
+++ b/app/javascript/components/Post/PostCommentsSection.tsx
@@ -1,6 +1,7 @@
 import cx from "classnames";
 import { parseISO } from "date-fns";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import {
   addComment as addCommentRequest,
@@ -45,6 +46,7 @@ type CommentWithReplies = Comment & { replies: CommentWithReplies[] };
 
 type Props = { paginated_comments: PaginatedComments };
 export const PostCommentsSection = ({ paginated_comments }: Props) => {
+  const { t } = useTranslation('common');
   const { commentable_id, purchase_id } = useCommentsMetadata();
   const loggedInUser = useLoggedInUser();
 
@@ -62,7 +64,7 @@ export const PostCommentsSection = ({ paginated_comments }: Props) => {
       setData({ ...data, pagination: loaded.pagination, comments: [...data.comments, ...loaded.comments] });
     } catch (e) {
       assertResponseError(e);
-      showAlert("An error occurred while loading more comments", "error");
+      showAlert(t("errors.loading_comments_failed"), "error");
     }
     setLoadingMore(false);
   };
@@ -76,7 +78,7 @@ export const PostCommentsSection = ({ paginated_comments }: Props) => {
         purchase_id,
         id: commentToDelete.comment.id,
       });
-      showAlert("Successfully deleted the comment", "success");
+      showAlert(t("actions.comment_deleted"), "success");
       setCommentToDelete(null);
       setData((data) => ({
         ...data,
@@ -85,7 +87,7 @@ export const PostCommentsSection = ({ paginated_comments }: Props) => {
       }));
     } catch (e) {
       assertResponseError(e);
-      showAlert("An error occurred while deleting the comment", "error");
+      showAlert(t("errors.deleting_comment_failed"), "error");
     }
   };
 
@@ -111,11 +113,11 @@ export const PostCommentsSection = ({ paginated_comments }: Props) => {
         content: draft,
         parent_id: null,
       });
-      showAlert("Successfully posted your comment", "success");
+      showAlert(t("actions.comment_posted"), "success");
       upsertComment(comment);
     } catch (e) {
       assertResponseError(e);
-      showAlert(`An error occurred while posting your comment - ${e.message}`, "error");
+      showAlert(t("errors.posting_comment_failed", { error: e.message }), "error");
     }
     setPosting(false);
   };
@@ -128,7 +130,7 @@ export const PostCommentsSection = ({ paginated_comments }: Props) => {
   return (
     <section className="comments comments-section" style={{ display: "grid", gap: "var(--spacer-6)" }}>
       <h2>
-        {data.count} {data.count === 1 ? "comment" : "comments"}
+        {data.count} {data.count === 1 ? t("comments.comment_singular") : t("comments.comment_plural")}
       </h2>
       <CommentTextarea value={draft || ""} onChange={(event) => setDraft(event.target.value)} disabled={posting}>
         <Button
@@ -136,7 +138,7 @@ export const PostCommentsSection = ({ paginated_comments }: Props) => {
           disabled={!(loggedInUser || purchase_id) || !draft || posting}
           onClick={() => void addComment()}
         >
-          {posting ? "Posting..." : "Post"}
+          {posting ? t("actions.posting") : t("actions.post")}
         </Button>
       </CommentTextarea>
       {nestedComments.length > 0 ? <hr /> : null}
@@ -153,7 +155,7 @@ export const PostCommentsSection = ({ paginated_comments }: Props) => {
       {data.pagination.next !== null ? (
         <div style={{ display: "flex", justifyContent: "center", marginTop: "var(--spacer-6)" }}>
           <Button disabled={loadingMore} onClick={() => void loadMoreComments()}>
-            {loadingMore ? "Loading more comments..." : "Load more comments"}
+            {loadingMore ? t("actions.loading_more_comments") : t("actions.load_more_comments")}
           </Button>
         </div>
       ) : null}
@@ -163,25 +165,25 @@ export const PostCommentsSection = ({ paginated_comments }: Props) => {
           open
           allowClose={commentToDelete.deleting}
           onClose={() => setCommentToDelete(null)}
-          title="Delete comment"
+          title={t("actions.delete_comment")}
           footer={
             <>
               <Button disabled={commentToDelete.deleting} onClick={() => setCommentToDelete(null)}>
-                Cancel
+                {t("actions.cancel")}
               </Button>
               {commentToDelete.deleting ? (
                 <Button color="danger" disabled>
-                  Deleting...
+                  {t("actions.deleting")}
                 </Button>
               ) : (
                 <Button color="danger" onClick={() => void deleteComment()}>
-                  Confirm
+                  {t("actions.confirm")}
                 </Button>
               )}
             </>
           }
         >
-          <h4>Are you sure?</h4>
+          <h4>{t("actions.are_you_sure")}</h4>
         </Modal>
       ) : null}
     </section>
@@ -194,6 +196,7 @@ type CommentContainerProps = {
   confirmCommentDeletion: (comment: Comment) => void;
 };
 const CommentContainer = ({ comment, upsertComment, confirmCommentDeletion }: CommentContainerProps) => {
+  const { t } = useTranslation('common');
   const { seller_id, purchase_id, max_allowed_depth, commentable_id } = useCommentsMetadata();
   const loggedInUser = useLoggedInUser();
   const [isPosting, setIsPosting] = React.useState(false);
@@ -208,11 +211,11 @@ const CommentContainer = ({ comment, upsertComment, confirmCommentDeletion }: Co
         id: comment.id,
         content: editDraft,
       });
-      showAlert("Successfully updated the comment", "success");
+      showAlert(t("actions.comment_updated"), "success");
       upsertComment(updated);
     } catch (e) {
       assertResponseError(e);
-      showAlert(`An error occurred while updating the comment - ${e.message}`, "error");
+      showAlert(t("errors.updating_comment_failed", { error: e.message }), "error");
     }
     setIsPosting(false);
   };
@@ -227,12 +230,12 @@ const CommentContainer = ({ comment, upsertComment, confirmCommentDeletion }: Co
         content: replyDraft,
         parent_id: comment.id,
       });
-      showAlert("Successfully posted your comment", "success");
+      showAlert(t("actions.comment_posted"), "success");
       setReplyDraft(null);
       upsertComment(reply);
     } catch (e) {
       assertResponseError(e);
-      showAlert(`An error occurred while posting your comment - ${e.message}`, "error");
+      showAlert(t("errors.posting_comment_failed", { error: e.message }), "error");
     }
     setIsPosting(false);
   };
@@ -251,11 +254,11 @@ const CommentContainer = ({ comment, upsertComment, confirmCommentDeletion }: Co
                 {(close) => (
                   <div style={{ display: "grid", gap: "var(--spacer-3)" }} onClick={close}>
                     {comment.is_editable ? (
-                      <Button onClick={() => setEditDraft(comment.content.original)}>Edit</Button>
+                      <Button onClick={() => setEditDraft(comment.content.original)}>{t("actions.edit")}</Button>
                     ) : null}
                     {comment.is_deletable ? (
                       <Button color="danger" onClick={() => confirmCommentDeletion(comment)}>
-                        Delete
+                        {t("actions.delete")}
                       </Button>
                     ) : null}
                   </div>
@@ -272,11 +275,11 @@ const CommentContainer = ({ comment, upsertComment, confirmCommentDeletion }: Co
             showAvatar={false}
           >
             <Button onClick={() => setEditDraft(null)} disabled={isPosting}>
-              Cancel
+              {t("actions.cancel")}
             </Button>
 
             <Button color="primary" disabled={isPosting} onClick={() => void update()}>
-              {isPosting ? "Updating..." : "Update"}
+              {isPosting ? t("actions.updating") : t("actions.update")}
             </Button>
           </CommentTextarea>
         ) : (
@@ -285,7 +288,7 @@ const CommentContainer = ({ comment, upsertComment, confirmCommentDeletion }: Co
         {replyDraft == null && comment.depth < max_allowed_depth ? (
           <footer>
             <button className="link" onClick={() => setReplyDraft("")}>
-              Reply
+              {t("actions.reply")}
             </button>
           </footer>
         ) : null}
@@ -297,7 +300,7 @@ const CommentContainer = ({ comment, upsertComment, confirmCommentDeletion }: Co
           disabled={isPosting}
         >
           <Button onClick={() => setReplyDraft(null)} disabled={isPosting}>
-            Cancel
+            {t("actions.cancel")}
           </Button>
 
           <Button
@@ -305,7 +308,7 @@ const CommentContainer = ({ comment, upsertComment, confirmCommentDeletion }: Co
             disabled={!(loggedInUser || purchase_id) || isPosting}
             onClick={() => void postReply()}
           >
-            {isPosting ? "Posting..." : "Post"}
+            {isPosting ? t("actions.posting") : t("actions.post")}
           </Button>
         </CommentTextarea>
       ) : null}
@@ -327,6 +330,7 @@ const CommentTextarea = ({
   showAvatar = true,
   ...props
 }: React.ComponentProps<"textarea"> & { showAvatar?: boolean }) => {
+  const { t } = useTranslation('common');
   const appDomain = useAppDomain();
   const { purchase_id } = useCommentsMetadata();
   const loggedInUser = useLoggedInUser();
@@ -344,11 +348,11 @@ const CommentTextarea = ({
         <img className="user-avatar" alt="Current user avatar" src={loggedInUser?.avatarUrl ?? defaultUserAvatar} />
       ) : null}
       {loggedInUser || purchase_id ? (
-        <textarea ref={ref} rows={1} placeholder="Write a comment" {...props} />
+        <textarea ref={ref} rows={1} placeholder={t("comments.write_comment_placeholder")} {...props} />
       ) : (
         <div>
-          <a href={Routes.login_url({ host: appDomain })}>Log in</a> or{" "}
-          <a href={Routes.signup_url({ host: appDomain })}>Register</a> to join the conversation
+          <a href={Routes.login_url({ host: appDomain })}>{t("authentication.log_in")}</a> {t("authentication.or")}{" "}
+          <a href={Routes.signup_url({ host: appDomain })}>{t("authentication.register")}</a> {t("comments.to_join_conversation")}
         </div>
       )}
       {loggedInUser != null || purchase_id != null ? (
diff --git a/app/javascript/components/Product/CardGrid.tsx b/app/javascript/components/Product/CardGrid.tsx
index f71292983c..4eb933a0f7 100644
--- a/app/javascript/components/Product/CardGrid.tsx
+++ b/app/javascript/components/Product/CardGrid.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { getSearchResults, ProductFilter, SearchRequest, SearchResults } from "$app/data/search";
 import { SORT_KEYS, PROFILE_SORT_KEYS } from "$app/parsers/product";
@@ -36,6 +37,7 @@ export type Action =
   | { type: "load-more" };
 
 export const useSearchReducer = (initial: Omit<State, "offset">) => {
+  const { t } = useTranslation('common');
   const activeRequest = React.useRef<{ cancel: () => void } | null>(null);
 
   const [state, dispatch] = React.useReducer(
@@ -83,7 +85,7 @@ export const useSearchReducer = (initial: Omit<State, "offset">) => {
       } catch (e) {
         if (!(e instanceof AbortError)) {
           assertResponseError(e);
-          showAlert("Something went wrong. Please try refreshing the page.", "error");
+          showAlert(t("errors.something_went_wrong_refresh"), "error");
         }
       }
     }),
@@ -159,6 +161,7 @@ export const CardGrid = ({
   hideSort,
   pagination = "scroll",
 }: Props) => {
+  const { t } = useTranslation('common');
   const currencySymbol = getShortCurrencySymbol(currencyCode);
   const gridRef = React.useRef<HTMLDivElement | null>(null);
 
@@ -177,7 +180,7 @@ export const CardGrid = ({
   const trySetPrice = (minPrice: number | null, maxPrice: number | null) => {
     if (minPrice == null || maxPrice == null || maxPrice > minPrice) {
       updateParams({ min_price: minPrice ?? undefined, max_price: maxPrice ?? undefined });
-    } else showAlert("Please set the price minimum to be lower than the maximum.", "error");
+    } else showAlert(t("errors.price_minimum_lower_than_maximum"), "error");
   };
   const resetFilters = () => dispatchAction({ type: "set-params", params: defaults });
 
diff --git a/app/javascript/components/Product/CtaButton.tsx b/app/javascript/components/Product/CtaButton.tsx
index 39e7dc7916..864439f612 100644
--- a/app/javascript/components/Product/CtaButton.tsx
+++ b/app/javascript/components/Product/CtaButton.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { trackUserProductAction } from "$app/data/user_action_event";
 import { CustomButtonTextOption } from "$app/parsers/product";
@@ -47,16 +48,15 @@ export const trackCtaClick = ({
   }).catch(assertResponseError);
 };
 
-// TODO replace this with a free-form input
 const ctaNames = {
-  i_want_this_prompt: "I want this!",
-  buy_this_prompt: "Buy this",
-  pay_prompt: "Pay",
-  donate_prompt: "Donate",
-  support_prompt: "Support",
-  tip_prompt: "Tip",
+  i_want_this_prompt: "button_text.i_want_this_prompt",
+  buy_this_prompt: "button_text.buy_this_prompt",
+  pay_prompt: "button_text.pay_prompt",
+  donate_prompt: "button_text.donate_prompt",
+  support_prompt: "button_text.support_prompt",
+  tip_prompt: "button_text.tip_prompt",
 };
-export const getCtaName = (cta: CustomButtonTextOption) => ctaNames[cta];
+export const getCtaName = (cta: CustomButtonTextOption, t: (key: string) => string) => t(ctaNames[cta]);
 
 const PARAMETERS_NOT_INHERITED_FROM_URL = new Set([
   "code",
@@ -79,6 +79,7 @@ const PARAMETERS_NOT_INHERITED_FROM_URL = new Set([
 
 export const CtaButton = React.forwardRef<HTMLAnchorElement, Props>(
   ({ product, purchase, discountCode, selection, label, onClick, showInstallmentPlanNotes = false }, ref) => {
+    const { t } = useTranslation('product');
     const { searchParams } = new URL(useOriginalLocation());
 
     const [referrer, setReferrer] = React.useState("");
@@ -147,20 +148,20 @@ export const CtaButton = React.forwardRef<HTMLAnchorElement, Props>(
         <NavigationButton ref={ref} href={url.toString()} color="accent" {...buttonCommonProps}>
           {label ??
             (purchase
-              ? "Purchase again"
+              ? t("cta.purchase_again")
               : product.recurrences
-                ? "Subscribe"
+                ? t("cta.subscribe")
                 : selection.rent
-                  ? "Rent"
+                  ? t("cta.rent")
                   : product.custom_button_text_option
-                    ? getCtaName(product.custom_button_text_option)
-                    : "I want this!")}
+                    ? getCtaName(product.custom_button_text_option, t)
+                    : t("cta.i_want_this"))}
         </NavigationButton>
 
         {product.installment_plan && product.installment_plan.number_of_installments > 1 ? (
           <>
             <NavigationButton color="black" href={urlWithInstallments.toString()} {...buttonCommonProps}>
-              Pay in {product.installment_plan.number_of_installments} installments
+              {t("cta.pay_in_installments", { count: product.installment_plan.number_of_installments })}
             </NavigationButton>
             {showInstallmentPlanNotes ? (
               <small className="text-center">
diff --git a/app/javascript/components/Product/Layout.tsx b/app/javascript/components/Product/Layout.tsx
index 2531ed8156..ad3e42dd27 100644
--- a/app/javascript/components/Product/Layout.tsx
+++ b/app/javascript/components/Product/Layout.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { assertDefined } from "$app/utils/assert";
 import { assertResponseError, request, ResponseError } from "$app/utils/request";
@@ -61,6 +62,7 @@ const SectionEditor = ({
     return sections;
   });
 
+  const { t } = useTranslation('common');
   const saveSections = async (sections: EditableSection[]) => {
     setSections(sections);
     const order = sections.map((section) => section.id);
@@ -74,7 +76,7 @@ const SectionEditor = ({
         data: { sections: order, main_section_index: mainIndex },
       });
       if (!response.ok) throw new ResponseError();
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -209,6 +211,7 @@ const CtaBar = ({
   selection: PriceSelection;
   hasHero: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const selectionAttributes = applySelection(product, discountCode?.valid ? discountCode.discount : null, selection);
   let { priceCents } = selectionAttributes;
   const { discountedPriceCents, isPWYW, hasRentOption, hasMultipleRecurrences, hasConfigurableQuantity } =
@@ -310,7 +313,7 @@ const CtaBar = ({
               evt.preventDefault();
               ctaButtonRef.current?.scrollIntoView(false);
               configurationSelectorRef.current?.focusRequiredInput();
-              if (isPWYW && selection.price.value === null) showAlert("You must input an amount", "warning");
+              if (isPWYW && selection.price.value === null) showAlert(t("errors.must_input_amount"), "warning");
             }
           }}
         />
diff --git a/app/javascript/components/Product/index.tsx b/app/javascript/components/Product/index.tsx
index 3a58440e3f..7671ef5474 100644
--- a/app/javascript/components/Product/index.tsx
+++ b/app/javascript/components/Product/index.tsx
@@ -241,6 +241,7 @@ export const Product = ({
   wishlists?: WishlistForProduct[];
   disableAnalytics?: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const [pageLoaded, setPageLoaded] = React.useState(false);
   const descriptionEditor = useRichTextEditor({
     // delay initialization to avoid errors in SSR
@@ -294,12 +295,12 @@ export const Product = ({
       setSelection?.({ ...selection, price: { ...selection.price, error: true } });
       if (selection.price.value === null) {
         configurationSelectorRef?.current?.focusRequiredInput();
-        showAlert("You must input an amount", "warning");
+        showAlert(t("errors.must_input_amount"), "warning");
       }
       return false;
     }
     if (product.native_type === "call" && !selection.callStartTime) {
-      showAlert("You must select a date and time for the call", "warning");
+      showAlert(t("errors.must_select_date_time_call"), "warning");
       return false;
     }
     return true;
diff --git a/app/javascript/components/ProductEdit/ContentTab/index.tsx b/app/javascript/components/ProductEdit/ContentTab/index.tsx
index 66354eca6a..348f3ace4e 100644
--- a/app/javascript/components/ProductEdit/ContentTab/index.tsx
+++ b/app/javascript/components/ProductEdit/ContentTab/index.tsx
@@ -6,6 +6,7 @@ import partition from "lodash/partition";
 import * as React from "react";
 import { ReactSortable } from "react-sortablejs";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { fetchDropboxFiles, ResponseDropboxFile, uploadDropboxFile } from "$app/data/dropbox_upload";
 import { Post } from "$app/data/workflows";
@@ -95,6 +96,7 @@ export const extensions = (productId: string, extraExtensions: TiptapNode[] = []
 ];
 
 const ContentTabContent = ({ selectedVariantId }: { selectedVariantId: string | null }) => {
+  const { t } = useTranslation('common');
   const { id, product, updateProduct, seller, save, existingFiles, setExistingFiles, uniquePermalink } =
     useProductEditContext();
   const uid = React.useId();
@@ -306,7 +308,7 @@ const ContentTabContent = ({ selectedVariantId }: { selectedVariantId: string |
   const onInsertPosts = () => {
     if (!editor) return;
     if (selectedPage?.description && editor.$node(Posts.name)) {
-      showAlert("You can't insert a list of posts more than once per page", "error");
+      showAlert(t("errors.cant_insert_posts_more_than_once"), "error");
     } else {
       editor.chain().focus().insertPosts({}).run();
     }
@@ -452,7 +454,7 @@ const ContentTabContent = ({ selectedVariantId }: { selectedVariantId: string |
   const onInsertMoreLikeThis = () => {
     if (!editor) return;
     if (selectedPage?.description && editor.$node(MoreLikeThis.name)) {
-      showAlert("You can't insert a More like this block more than once per page", "error");
+      showAlert(t("errors.cant_insert_more_like_this_more_than_once"), "error");
     } else {
       editor
         .chain()
@@ -467,7 +469,7 @@ const ContentTabContent = ({ selectedVariantId }: { selectedVariantId: string |
     if (!addingButton) return;
 
     const href = validateUrl(addingButton.url);
-    if (!href) return showAlert("Please enter a valid URL.", "error");
+    if (!href) return showAlert(t("errors.please_enter_valid_url"), "error");
     editor
       .chain()
       .focus()
diff --git a/app/javascript/components/ProductEdit/ProductTab/CircleIntegrationEditor.tsx b/app/javascript/components/ProductEdit/ProductTab/CircleIntegrationEditor.tsx
index be30162969..5572c4938b 100644
--- a/app/javascript/components/ProductEdit/ProductTab/CircleIntegrationEditor.tsx
+++ b/app/javascript/components/ProductEdit/ProductTab/CircleIntegrationEditor.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { CircleCommunity, CircleSpaceGroup, fetchCommunities, fetchSpaceGroups } from "$app/data/circle_integration";
 import { assertResponseError } from "$app/utils/request";
@@ -27,6 +28,7 @@ export const CircleIntegrationEditor = ({
   integration: CircleIntegration;
   onChange: (integration: CircleIntegration) => void;
 }) => {
+  const { t } = useTranslation('common');
   const uid = React.useId();
 
   const { product, updateProduct } = useProductEditContext();
@@ -48,7 +50,7 @@ export const CircleIntegrationEditor = ({
       } catch (e) {
         assertResponseError(e);
         setCommunities({ status: "error" });
-        showAlert("Could not retrieve communities from Circle. Please check your API key.", "error");
+        showAlert(t("errors.circle_communities_retrieval_failed"), "error");
       }
     }
   };
@@ -65,7 +67,7 @@ export const CircleIntegrationEditor = ({
     } catch (e) {
       assertResponseError(e);
       setSpaceGroups({ status: "error" });
-      showAlert("Could not retrieve space groups from Circle. Please try again.", "error");
+      showAlert(t("errors.circle_space_groups_retrieval_failed"), "error");
     }
   };
 
diff --git a/app/javascript/components/ProductEdit/ProductTab/CoverEditor.tsx b/app/javascript/components/ProductEdit/ProductTab/CoverEditor.tsx
index b24ce5a0f8..7d5e4e4bbe 100644
--- a/app/javascript/components/ProductEdit/ProductTab/CoverEditor.tsx
+++ b/app/javascript/components/ProductEdit/ProductTab/CoverEditor.tsx
@@ -1,6 +1,7 @@
 import { DirectUpload } from "@rails/activestorage";
 import * as React from "react";
 import { ReactSortable as Sortable } from "react-sortablejs";
+import { useTranslation } from "react-i18next";
 
 import { CoverPayload, createCover, deleteCover } from "$app/data/covers";
 import { AssetPreview } from "$app/parsers/product";
@@ -31,6 +32,7 @@ export const CoverEditor = ({
   setCovers: (covers: AssetPreview[]) => void;
   permalink: string;
 }) => {
+  const { t } = useTranslation('common');
   const [activeCoverId, setActiveCoverId] = React.useState(covers[0]?.id ?? null);
   const [isUploaderOpen, setIsUploaderOpen] = React.useState(false);
   const [isUploading, setIsUploading] = React.useState(false);
@@ -129,6 +131,7 @@ const CoverUploader = ({
   isUploading: boolean;
   setIsUploading: (isUploading: boolean) => void;
 }) => {
+  const { t } = useTranslation('common');
   const [isSelecting, setIsSelecting] = React.useState(false);
 
   const [uploader, setUploader] = React.useState<{ type: "url"; value: string } | null>(null);
@@ -165,7 +168,7 @@ const CoverUploader = ({
 
                 for (const file of event.target.files) {
                   if (!FileUtils.isFileNameExtensionAllowed(file.name, ALLOWED_EXTENSIONS)) {
-                    showAlert("Invalid file type.", "error");
+                    showAlert(t("errors.invalid_file_type"), "error");
                     continue;
                   }
                   // TODO change the relevant endpoint(s) to allow uploading multiple files at once
diff --git a/app/javascript/components/ProductEdit/ProductTab/DescriptionEditor.tsx b/app/javascript/components/ProductEdit/ProductTab/DescriptionEditor.tsx
index 868e7368ac..d004ef4fe0 100644
--- a/app/javascript/components/ProductEdit/ProductTab/DescriptionEditor.tsx
+++ b/app/javascript/components/ProductEdit/ProductTab/DescriptionEditor.tsx
@@ -4,6 +4,7 @@ import { EditorView } from "@tiptap/pm/view";
 import { Editor, EditorContent } from "@tiptap/react";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { assertDefined } from "$app/utils/assert";
 import FileUtils, { ALLOWED_EXTENSIONS } from "$app/utils/file";
@@ -141,6 +142,7 @@ export const DescriptionEditor = ({
   setImagesUploading: React.Dispatch<React.SetStateAction<Set<File>>>;
   audioPreviewsEnabled: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const uid = React.useId();
   const [isMounted, setIsMounted] = React.useState(false);
   useRunOnce(() => setIsMounted(true));
@@ -190,7 +192,7 @@ export const DescriptionEditor = ({
         if (!audioPreviewsEnabled) return;
 
         if (!FileUtils.isAudioExtension(FileUtils.getFileExtension(file.name).toUpperCase())) {
-          showAlert("Only audio files are allowed", "error");
+          showAlert(t("errors.only_audio_files_allowed"), "error");
           return;
         }
 
@@ -200,7 +202,7 @@ export const DescriptionEditor = ({
         });
         if (publicFileEmbeds.length >= MAX_ALLOWED_PUBLIC_FILES_COUNT) {
           showAlert(
-            `You can only upload up to ${MAX_ALLOWED_PUBLIC_FILES_COUNT} audio previews in the description`,
+            t("errors.max_audio_previews_limit", { count: MAX_ALLOWED_PUBLIC_FILES_COUNT }),
             "error",
           );
           return;
@@ -212,9 +214,9 @@ export const DescriptionEditor = ({
         );
         if (file.size > MAX_ALLOWED_PUBLIC_FILE_SIZE_IN_BYTES) {
           showAlert(
-            `File is too large (max allowed size is ${FileUtils.getReadableFileSize(
-              MAX_ALLOWED_PUBLIC_FILE_SIZE_IN_BYTES,
-            )})`,
+            t("errors.file_too_large", { 
+              maxSize: FileUtils.getReadableFileSize(MAX_ALLOWED_PUBLIC_FILE_SIZE_IN_BYTES) 
+            }),
             "error",
           );
           return;
@@ -271,13 +273,13 @@ export const DescriptionEditor = ({
               .catch((error: unknown) => {
                 fileUploadCleanup(editor, src);
                 onError?.(error instanceof Error ? error : null);
-                showAlert("Failed to upload the file. Please try again.", "error");
+                showAlert(t("errors.failed_upload_file_try_again"), "error");
               });
           },
           onError: (error: Error | null) => {
             fileUploadCleanup(editor, src);
             onError?.(error);
-            showAlert("Failed to upload the file. Please try again.", "error");
+            showAlert(t("errors.failed_upload_file_try_again"), "error");
           },
         });
         setActiveUploaders((prev) => prev.set(src, uploader));
diff --git a/app/javascript/components/ProductEdit/ProductTab/DiscordIntegrationEditor.tsx b/app/javascript/components/ProductEdit/ProductTab/DiscordIntegrationEditor.tsx
index 3bcb392ee7..3031cbc706 100644
--- a/app/javascript/components/ProductEdit/ProductTab/DiscordIntegrationEditor.tsx
+++ b/app/javascript/components/ProductEdit/ProductTab/DiscordIntegrationEditor.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { fetchServerInfo } from "$app/data/discord_integration";
 import { DISCORD_CLIENT_ID, DISCORD_OAUTH_URL } from "$app/utils/integrations";
@@ -23,6 +24,7 @@ export const DiscordIntegrationEditor = ({
   integration: DiscordIntegration;
   onChange: (integration: DiscordIntegration) => void;
 }) => {
+  const { t } = useTranslation('common');
   const { product, updateProduct } = useProductEditContext();
 
   const [isLoading, setIsLoading] = React.useState(false);
@@ -85,12 +87,12 @@ export const DiscordIntegrationEditor = ({
                         });
                         setEnabledForOptions(true);
                       } else {
-                        showAlert("Could not connect to your Discord account, please try again.", "error");
+                        showAlert(t("errors.discord_connection_failed"), "error");
                       }
                       setIsLoading(false);
                     },
                     onError: () => {
-                      showAlert("Could not connect to your Discord account, please try again.", "error");
+                      showAlert(t("errors.discord_connection_failed"), "error");
                       setIsLoading(false);
                     },
                     onPopupClose: () => setIsLoading(false),
diff --git a/app/javascript/components/ProductEdit/ProductTab/GoogleCalendarIntegrationEditor.tsx b/app/javascript/components/ProductEdit/ProductTab/GoogleCalendarIntegrationEditor.tsx
index 7c156d4444..b560824a22 100644
--- a/app/javascript/components/ProductEdit/ProductTab/GoogleCalendarIntegrationEditor.tsx
+++ b/app/javascript/components/ProductEdit/ProductTab/GoogleCalendarIntegrationEditor.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { fetchAccountInfo, fetchCalendarList, getOAuthUrl } from "$app/data/google_calendar_integration";
 import { startOauthRedirectChecker } from "$app/utils/oauth";
@@ -27,6 +28,7 @@ export const GoogleCalendarIntegrationEditor = ({
   integration: GoogleCalendarIntegration;
   onChange: (integration: GoogleCalendarIntegration) => void;
 }) => {
+  const { t } = useTranslation('common');
   const [isEnabled, setIsEnabled] = React.useState(!!integration);
   const [isLoading, setIsLoading] = React.useState(false);
   const [calendars, setCalendars] = React.useState<{ id: string; summary: string }[]>(
@@ -45,7 +47,7 @@ export const GoogleCalendarIntegrationEditor = ({
         .then(setCalendars)
         .catch((e: unknown) => {
           assertResponseError(e);
-          showAlert("Could not fetch calendars, please try again.", "error");
+          showAlert(t("errors.could_not_fetch_calendars"), "error");
         })
         .finally(() => {
           setIsLoading(false);
@@ -76,13 +78,13 @@ export const GoogleCalendarIntegrationEditor = ({
           }
         } catch (e) {
           assertResponseError(e);
-          showAlert("Could not connect to your Google Calendar account, please try again.", "error");
+          showAlert(t("errors.could_not_connect_google_calendar"), "error");
         } finally {
           setIsLoading(false);
         }
       },
       onError: () => {
-        showAlert("Could not connect to your Google Calendar account, please try again.", "error");
+        showAlert(t("errors.could_not_connect_google_calendar"), "error");
         setIsLoading(false);
       },
       onPopupClose: () => setIsLoading(false),
diff --git a/app/javascript/components/ProductEdit/ProductTab/ThumbnailEditor.tsx b/app/javascript/components/ProductEdit/ProductTab/ThumbnailEditor.tsx
index 03ba0684d1..8db5f87307 100644
--- a/app/javascript/components/ProductEdit/ProductTab/ThumbnailEditor.tsx
+++ b/app/javascript/components/ProductEdit/ProductTab/ThumbnailEditor.tsx
@@ -1,6 +1,7 @@
 import { DirectUpload } from "@rails/activestorage";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { Thumbnail, ThumbnailPayload, createThumbnail, deleteThumbnail } from "$app/data/thumbnails";
 import { AssetPreview, ProductNativeType } from "$app/parsers/product";
@@ -51,6 +52,7 @@ export const ThumbnailEditor = ({
   permalink: string;
   nativeType: ProductNativeType;
 }) => {
+  const { t } = useTranslation('common');
   const saveThumbnail = async (thumbnailPayload: ThumbnailPayload) => {
     try {
       const thumbnail = await createThumbnail(permalink, thumbnailPayload);
@@ -64,7 +66,7 @@ export const ThumbnailEditor = ({
   const removeThumbnail = async (guid: string) => {
     try {
       await deleteThumbnail(permalink, guid);
-      showAlert("Thumbnail has been deleted.", "success");
+      showAlert(t("actions.thumbnail_deleted"), "success");
       setThumbnail(null);
     } catch (e) {
       assertResponseError(e);
diff --git a/app/javascript/components/ProductEdit/ProductTab/TiersEditor.tsx b/app/javascript/components/ProductEdit/ProductTab/TiersEditor.tsx
index ed61002a4a..b81e9e660b 100644
--- a/app/javascript/components/ProductEdit/ProductTab/TiersEditor.tsx
+++ b/app/javascript/components/ProductEdit/ProductTab/TiersEditor.tsx
@@ -2,6 +2,7 @@ import { Editor } from "@tiptap/core";
 import cx from "classnames";
 import { format } from "date-fns";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { sendSamplePriceChangeEmail } from "$app/data/membership_tiers";
 import { getIsSingleUnitCurrency } from "$app/utils/currency";
@@ -350,6 +351,7 @@ const TierEditor = ({
 
 const getDateWithUTCOffset = (date: Date): Date => new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
 const PriceChangeSettings = ({ tier, updateTier }: { tier: Tier; updateTier: (update: Partial<Tier>) => void }) => {
+  const { t } = useTranslation('common');
   const uid = React.useId();
 
   const [isMounted, setIsMounted] = React.useState(false);
@@ -447,11 +449,11 @@ You can modify or cancel your membership at any time.`;
                   effectiveDate: formattedEffectiveDate,
                 }).then(
                   () => {
-                    showAlert("Email sample sent! Check your email", "success");
+                    showAlert(t("actions.email_sample_sent"), "success");
                   },
                   (e: unknown) => {
                     assertResponseError(e);
-                    showAlert("Error sending email", "error");
+                    showAlert(t("errors.error_sending_email"), "error");
                   },
                 )
               }
diff --git a/app/javascript/components/ProductsLayout.tsx b/app/javascript/components/ProductsLayout.tsx
index b76e181d78..d266b1ab65 100644
--- a/app/javascript/components/ProductsLayout.tsx
+++ b/app/javascript/components/ProductsLayout.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 export type Tab = "products" | "discover" | "affiliated" | "collabs" | "archived";
 
@@ -14,33 +15,37 @@ export const ProductsLayout = ({
   title?: string | undefined;
   children: React.ReactNode;
   archivedTabVisible: boolean;
-}) => (
-  <main>
-    <header>
-      <h1>{title || "Products"}</h1>
+}) => {
+  const { t } = useTranslation('common');
+  
+  return (
+    <main>
+      <header>
+        <h1>{title || t("navigation.products")}</h1>
 
-      {ctaButton ? <div className="actions">{ctaButton}</div> : null}
+        {ctaButton ? <div className="actions">{ctaButton}</div> : null}
 
-      <div role="tablist">
-        <a aria-selected={selectedTab === "products"} href={Routes.products_path()} role="tab">
-          All products
-        </a>
-
-        <a aria-selected={selectedTab === "affiliated"} href={Routes.products_affiliated_index_path()} role="tab">
-          Affiliated
-        </a>
+        <div role="tablist">
+          <a aria-selected={selectedTab === "products"} href={Routes.products_path()} role="tab">
+            {t("navigation.all_products")}
+          </a>
 
-        <a aria-selected={selectedTab === "collabs"} href={Routes.products_collabs_path()} role="tab">
-          Collabs
-        </a>
+          <a aria-selected={selectedTab === "affiliated"} href={Routes.products_affiliated_index_path()} role="tab">
+            {t("navigation.affiliated")}
+          </a>
 
-        {archivedTabVisible ? (
-          <a aria-selected={selectedTab === "archived"} href={Routes.products_archived_index_path()} role="tab">
-            Archived
+          <a aria-selected={selectedTab === "collabs"} href={Routes.products_collabs_path()} role="tab">
+            {t("navigation.collabs")}
           </a>
-        ) : null}
-      </div>
-    </header>
-    {children}
-  </main>
-);
+
+          {archivedTabVisible ? (
+            <a aria-selected={selectedTab === "archived"} href={Routes.products_archived_index_path()} role="tab">
+              {t("navigation.archived")}
+            </a>
+          ) : null}
+        </div>
+      </header>
+      {children}
+    </main>
+  );
+};
diff --git a/app/javascript/components/ProductsPage/ActionsPopover.tsx b/app/javascript/components/ProductsPage/ActionsPopover.tsx
index 7f6aec1830..614fd144bd 100644
--- a/app/javascript/components/ProductsPage/ActionsPopover.tsx
+++ b/app/javascript/components/ProductsPage/ActionsPopover.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { deleteProduct, archiveProduct, unarchiveProduct, duplicateProduct } from "$app/data/product_dashboard";
 import { Membership, Product } from "$app/data/products";
@@ -23,6 +24,7 @@ const ActionsPopover = ({
   onArchive: () => void;
   onUnarchive: (hasRemainingArchivedProducts: boolean) => void;
 }) => {
+  const { t } = useTranslation('dashboard');
   const [open, setOpen] = React.useState(false);
   const [isDuplicating, setIsDuplicating] = React.useState(false);
   const [isDeleting, setIsDeleting] = React.useState(false);
@@ -32,10 +34,10 @@ const ActionsPopover = ({
 
   const handleDuplicate = async () => {
     setIsDuplicating(true);
-    showAlert("Duplicating the product. You will be notified once it's ready.", "info");
+    showAlert(t("actions.duplicating_notification"), "info");
     try {
       await duplicateProduct(product.permalink, product.name);
-      showAlert(`${product.name} is duplicated`, "success");
+      showAlert(t("actions.product_duplicated", { name: product.name }), "success");
       onDuplicate();
     } catch (e) {
       assertResponseError(e);
@@ -49,7 +51,7 @@ const ActionsPopover = ({
     setIsDeleting(true);
     try {
       await deleteProduct(product.permalink);
-      showAlert("Product deleted!", "success");
+      showAlert(t("actions.product_deleted"), "success");
       onDelete();
     } catch (e) {
       assertResponseError(e);
@@ -62,7 +64,7 @@ const ActionsPopover = ({
     setIsArchiving(true);
     try {
       await archiveProduct(product.permalink);
-      showAlert("Product was archived successfully", "success");
+      showAlert(t("actions.product_archived"), "success");
       onArchive();
     } catch (e) {
       assertResponseError(e);
@@ -75,7 +77,7 @@ const ActionsPopover = ({
     setIsUnarchiving(true);
     try {
       const archivedProductsCount = await unarchiveProduct(product.permalink);
-      showAlert("Product was unarchived successfully", "success");
+      showAlert(t("actions.product_unarchived"), "success");
       onUnarchive(archivedProductsCount > 0);
     } catch (e) {
       assertResponseError(e);
@@ -89,24 +91,24 @@ const ActionsPopover = ({
       <Popover
         open={open}
         onToggle={setOpen}
-        aria-label="Open product action menu"
+        aria-label={t("actions.open_product_menu")}
         trigger={<Icon name="three-dots" />}
       >
         <div role="menu">
           <div role="menuitem" inert={!product.can_duplicate || isDuplicating} onClick={() => void handleDuplicate()}>
             <Icon name="outline-duplicate" />
-            &ensp;{isDuplicating ? "Duplicating..." : "Duplicate"}
+            &ensp;{isDuplicating ? t("actions.duplicating") : t("actions.duplicate")}
           </div>
           {product.can_unarchive ? (
             <div role="menuitem" inert={isUnarchiving} onClick={() => void handleUnarchive()}>
               <Icon name="archive" />
-              &ensp;{isUnarchiving ? "Unarchiving..." : "Unarchive"}
+              &ensp;{isUnarchiving ? t("actions.unarchiving") : t("actions.unarchive")}
             </div>
           ) : null}
           {product.can_archive ? (
             <div role="menuitem" inert={isArchiving} onClick={() => void handleArchive()}>
               <Icon name="archive" />
-              &ensp;{isArchiving ? "Archiving..." : "Archive"}
+              &ensp;{isArchiving ? t("actions.archiving") : t("actions.archive")}
             </div>
           ) : null}
           <div
@@ -116,7 +118,7 @@ const ActionsPopover = ({
             onClick={() => setConfirmingDelete(true)}
           >
             <Icon name="trash2" />
-            &ensp;{isDeleting ? "Deleting..." : "Delete permanently"}
+            &ensp;{isDeleting ? t("actions.deleting") : t("actions.delete_permanently")}
           </div>
         </div>
       </Popover>
@@ -124,19 +126,19 @@ const ActionsPopover = ({
         <Modal
           open
           onClose={() => setConfirmingDelete(false)}
-          title="Delete Product"
+          title={t("actions.delete_product")}
           footer={
             <>
               <Button onClick={() => setConfirmingDelete(false)} disabled={isDeleting}>
-                Cancel
+                {t("actions.cancel")}
               </Button>
               <Button color="danger" onClick={() => void handleDelete()} disabled={isDeleting}>
-                {isDeleting ? "Deleting..." : "Confirm"}
+                {isDeleting ? t("actions.deleting") : t("actions.confirm")}
               </Button>
             </>
           }
         >
-          <h4>Are you sure you want to delete {product.name}?</h4>
+          <h4>{t("actions.confirm_delete_product", { name: product.name })}</h4>
         </Modal>
       ) : null}
     </>
diff --git a/app/javascript/components/Profile/EditPage.tsx b/app/javascript/components/Profile/EditPage.tsx
index d93c636c42..785be04b39 100644
--- a/app/javascript/components/Profile/EditPage.tsx
+++ b/app/javascript/components/Profile/EditPage.tsx
@@ -3,6 +3,7 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import isEqual from "lodash/isEqual";
 import * as React from "react";
 import { ReactSortable as Sortable } from "react-sortablejs";
+import { useTranslation } from "react-i18next";
 
 import { updateProfileSettings } from "$app/data/profile_settings";
 import GuidGenerator from "$app/utils/guid_generator";
@@ -104,6 +105,7 @@ const TabList = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>
 TabList.displayName = "TabList";
 
 export const EditProfile = (props: Props) => {
+  const { t } = useTranslation('common');
   const appDomain = useAppDomain();
 
   const [sections, setSections] = React.useState(props.sections);
@@ -125,7 +127,7 @@ export const EditProfile = (props: Props) => {
     if (isEqual(tabs, savedTabs.current)) return;
     try {
       await updateProfileSettings({ tabs });
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
       savedTabs.current = tabs;
     } catch (e) {
       assertResponseError(e);
@@ -234,7 +236,7 @@ export const EditProfile = (props: Props) => {
               aria-selected={tab === selectedTab}
               onClick={() => {
                 if (imageUploadSettings.isUploading) {
-                  showAlert("Please wait for all images to finish uploading before switching tabs.", "warning");
+                  showAlert(t("errors.wait_for_images_upload_before_switching"), "warning");
                   return;
                 }
                 setSelectedTab(tab);
diff --git a/app/javascript/components/Profile/EditSections.tsx b/app/javascript/components/Profile/EditSections.tsx
index 8f6e461438..d961eb2903 100644
--- a/app/javascript/components/Profile/EditSections.tsx
+++ b/app/javascript/components/Profile/EditSections.tsx
@@ -6,6 +6,7 @@ import sortBy from "lodash/sortBy";
 import * as React from "react";
 import { ReactSortable as Sortable } from "react-sortablejs";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   FeaturedProductSection,
@@ -65,6 +66,7 @@ export const ReducerContext = React.createContext<readonly [PageProps, React.Dis
 export const useReducer = () => assertDefined(React.useContext(ReducerContext));
 
 const useSaveSection = (initialSection: Section) => {
+  const { t } = useTranslation('common');
   const [savedSection, setSavedSection] = React.useState(initialSection);
   return async (section: Section) => {
     if (isEqual(savedSection, section)) return;
@@ -76,7 +78,7 @@ const useSaveSection = (initialSection: Section) => {
         accept: "json",
       });
       if (!response.ok) throw new ResponseError(cast<{ error: string }>(await response.json()).error);
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
       setSavedSection(section);
     } catch (e) {
       assertResponseError(e);
@@ -199,6 +201,7 @@ export const SectionLayout = ({
   children: React.ReactNode;
   menuItems?: React.ReactElement[];
 }) => {
+  const { t } = useTranslation('common');
   const [state, dispatch] = useReducer();
   const [linkCopied, setLinkCopied] = React.useState(false);
   const updateSection = (updated: Partial<BaseSection>) =>
diff --git a/app/javascript/components/Profile/EditSections/WishlistsSectionView.tsx b/app/javascript/components/Profile/EditSections/WishlistsSectionView.tsx
index f0abad1b48..b17bc7d4c4 100644
--- a/app/javascript/components/Profile/EditSections/WishlistsSectionView.tsx
+++ b/app/javascript/components/Profile/EditSections/WishlistsSectionView.tsx
@@ -1,5 +1,6 @@
 import sortBy from "lodash/sortBy";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { ReactSortable as Sortable } from "react-sortablejs";
 
 import { WishlistsSection } from "$app/data/profile_settings";
@@ -12,6 +13,7 @@ import { showAlert } from "$app/components/server-components/Alert";
 import { CardWishlist, DummyCardGrid } from "$app/components/Wishlist/Card";
 
 export const WishlistsSectionView = ({ section }: { section: WishlistsSection }) => {
+  const { t } = useTranslation('common');
   const [state, dispatch] = useReducer();
   const uid = React.useId();
   const selectedWishlistsCount = state.wishlist_options.filter((wishlist) =>
@@ -56,8 +58,8 @@ export const WishlistsSectionView = ({ section }: { section: WishlistsSection })
       menuItems={[
         <EditorSubmenu
           key="0"
-          heading="Wishlists"
-          text={`${selectedWishlistsCount} ${selectedWishlistsCount === 1 ? "wishlist" : "wishlists"}`}
+          heading={t("wishlists.title")}
+          text={`${selectedWishlistsCount} ${selectedWishlistsCount === 1 ? t("wishlists.wishlist_singular") : t("wishlists.wishlist_plural")}`}
         >
           <div className="paragraphs" style={{ maxHeight: "min(100vh, 500px)", overflow: "auto" }}>
             {wishlists.length > 0 ? (
diff --git a/app/javascript/components/Profile/FollowForm.tsx b/app/javascript/components/Profile/FollowForm.tsx
index 0231256cf5..0a694ac48f 100644
--- a/app/javascript/components/Profile/FollowForm.tsx
+++ b/app/javascript/components/Profile/FollowForm.tsx
@@ -1,5 +1,6 @@
 import cx from "classnames";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { followSeller } from "$app/data/follow_seller";
 import { CreatorProfile } from "$app/parsers/profile";
@@ -19,6 +20,7 @@ export const FollowForm = ({
   buttonColor?: ButtonColor;
   buttonLabel?: string;
 }) => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
   const isOwnProfile = loggedInUser?.id === creatorProfile.external_id;
   const [email, setEmail] = React.useState(isOwnProfile ? "" : (loggedInUser?.email ?? ""));
@@ -35,7 +37,7 @@ export const FollowForm = ({
     }
 
     if (isOwnProfile) {
-      showAlert("As the creator of this profile, you can't follow yourself!", "warning");
+      showAlert(t("errors.cannot_follow_yourself"), "warning");
       return;
     }
 
@@ -45,7 +47,7 @@ export const FollowForm = ({
       setFormStatus("success");
       showAlert(response.message, "success");
     } else {
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
       setFormStatus("initial");
     }
   };
diff --git a/app/javascript/components/PurchaseArchiveButton.tsx b/app/javascript/components/PurchaseArchiveButton.tsx
index 829ea988e6..a82ad8ab86 100644
--- a/app/javascript/components/PurchaseArchiveButton.tsx
+++ b/app/javascript/components/PurchaseArchiveButton.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { setPurchaseArchived } from "$app/data/library";
 import { asyncVoid } from "$app/utils/promise";
@@ -10,6 +11,7 @@ import { showAlert } from "$app/components/server-components/Alert";
 type Props = { purchase_id: string; initial_is_archived: boolean };
 
 export const PurchaseArchiveButton = ({ purchase_id, initial_is_archived }: Props) => {
+  const { t } = useTranslation('common');
   const [isArchived, setIsArchived] = React.useState<boolean>(initial_is_archived);
   const [processing, setProcessing] = React.useState<boolean>(false);
 
@@ -21,17 +23,17 @@ export const PurchaseArchiveButton = ({ purchase_id, initial_is_archived }: Prop
     try {
       await setPurchaseArchived({ is_archived: shouldBeArchived, purchase_id });
       setIsArchived(shouldBeArchived);
-      showAlert(shouldBeArchived ? "Product archived!" : "Product unarchived!", "success");
+      showAlert(shouldBeArchived ? t("actions.product_archived") : t("actions.product_unarchived"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong.", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     }
     setProcessing(false);
   });
 
   return (
     <Button onClick={toggleArchive} disabled={processing}>
-      {isArchived ? "Unarchive from library" : "Archive from library"}
+      {isArchived ? t("actions.unarchive_from_library") : t("actions.archive_from_library")}
     </Button>
   );
 };
diff --git a/app/javascript/components/ReviewForm.tsx b/app/javascript/components/ReviewForm.tsx
index 9e9649da03..f4cf950a25 100644
--- a/app/javascript/components/ReviewForm.tsx
+++ b/app/javascript/components/ReviewForm.tsx
@@ -1,5 +1,6 @@
 import { DirectUpload } from "@rails/activestorage";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { setProductRating } from "$app/data/product_reviews";
 import { assertDefined } from "$app/utils/assert";
@@ -104,6 +105,7 @@ export const ReviewForm = React.forwardRef<
     style?: React.CSSProperties;
   }
 >(({ permalink, purchaseId, purchaseEmailDigest, review, onChange, preview, disabledStatus, style }, ref) => {
+  const { t } = useTranslation('common');
   const [isLoading, setIsLoading] = React.useState(false);
   const [rating, setRating] = React.useState<number | null>(review?.rating ?? null);
   const [message, setMessage] = React.useState(review?.message ?? "");
@@ -226,7 +228,7 @@ export const ReviewForm = React.forwardRef<
       setMessage(review.message ?? "");
       setReviewMode(review.video ? "video" : "text");
 
-      showAlert("Review submitted successfully!", "success");
+      showAlert(t("actions.review_submitted_successfully"), "success");
     } catch (error) {
       assertResponseError(error);
       showAlert(error.message, "error");
diff --git a/app/javascript/components/ReviewForm/ReviewVideoRecorderClientOnly.tsx b/app/javascript/components/ReviewForm/ReviewVideoRecorderClientOnly.tsx
index 78067c7806..0c70411792 100644
--- a/app/javascript/components/ReviewForm/ReviewVideoRecorderClientOnly.tsx
+++ b/app/javascript/components/ReviewForm/ReviewVideoRecorderClientOnly.tsx
@@ -1,6 +1,7 @@
 import cx from "classnames";
 import React, { useEffect, useRef, useState } from "react";
 import { useReactMediaRecorder } from "react-media-recorder";
+import { useTranslation } from "react-i18next";
 
 import { Icon } from "$app/components/Icons";
 import { LoadingSpinner } from "$app/components/LoadingSpinner";
@@ -130,6 +131,7 @@ export default function ReviewVideoRecorderClientOnly({
 }: ReviewVideoRecorderProps & {
   reacquireStream: () => void;
 }) {
+  const { t } = useTranslation('common');
   const [uiState, setUiState] = useState<ReviewVideoRecorderUiState>("idle");
   const [askPermission, setAskPermission] = useState(false);
 
@@ -221,7 +223,7 @@ export default function ReviewVideoRecorderClientOnly({
     if (uiState === "recording") {
       const timer = setTimeout(() => {
         stopRecording();
-        showAlert("Your recording has reached its maximum length and has been stopped.", "info");
+        showAlert(t("actions.recording_max_length_reached"), "info");
       }, MAX_RECORDING_DURATION_MS);
       return () => clearTimeout(timer);
     }
diff --git a/app/javascript/components/ReviewResponseForm.tsx b/app/javascript/components/ReviewResponseForm.tsx
index 2eef849716..ae47f40fde 100644
--- a/app/javascript/components/ReviewResponseForm.tsx
+++ b/app/javascript/components/ReviewResponseForm.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 import { updateReviewResponse, deleteReviewResponse } from "$app/data/customers";
 import { assertResponseError } from "$app/utils/request";
@@ -21,6 +22,7 @@ export const ReviewResponseForm = ({
   onEditingChange?: (isEditing: boolean) => void;
   buttonProps?: React.ComponentProps<typeof Button>;
 }) => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
 
   const [isLoading, setIsLoading] = React.useState(false);
@@ -34,7 +36,7 @@ export const ReviewResponseForm = ({
     setIsLoading(true);
     try {
       await updateReviewResponse(purchaseId, message);
-      showAlert(originalMessage ? "Response updated successfully!" : "Response submitted successfully!", "success");
+      showAlert(originalMessage ? t("actions.response_updated_successfully") : t("actions.response_submitted_successfully"), "success");
       onChange({ message });
       setIsEditing(false);
     } catch (e) {
@@ -48,7 +50,7 @@ export const ReviewResponseForm = ({
     setIsLoading(true);
     try {
       await deleteReviewResponse(purchaseId);
-      showAlert("Response deleted successfully!", "success");
+      showAlert(t("actions.response_deleted_successfully"), "success");
       onChange(null);
       setDeleteConfirmation(false);
     } catch (e) {
diff --git a/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx b/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
index e477c24b0e..6bd6353c7a 100644
--- a/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
@@ -3,6 +3,7 @@ import cx from "classnames";
 import placeholderAppIcon from "images/gumroad_app.png";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import FileUtils from "$app/utils/file";
 import { getImageDimensionsFromFile } from "$app/utils/image";
@@ -17,6 +18,7 @@ import { WithTooltip } from "$app/components/WithTooltip";
 const ALLOWED_ICON_EXTENSIONS = ["jpeg", "jpg", "png"];
 
 const ApplicationForm = ({ application }: { application?: Application }) => {
+  const { t } = useTranslation('common');
   const [name, setName] = React.useState<{ value: string; error?: boolean }>({ value: application?.name ?? "" });
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [isGeneratingToken, setIsGeneratingToken] = React.useState(false);
@@ -99,7 +101,7 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
     if (!file) return;
     const dimensions = await getImageDimensionsFromFile(file).catch(() => null);
     if (!dimensions || !FileUtils.isFileNameExtensionAllowed(file.name, ALLOWED_ICON_EXTENSIONS)) {
-      showAlert("Invalid file type.", "error");
+      showAlert(t("errors.invalid_file_type"), "error");
       return;
     }
     setIsUploadingIcon(true);
diff --git a/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx b/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
index 5fa12cf04b..b91babc488 100644
--- a/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
@@ -1,5 +1,6 @@
 import placeholderAppIcon from "images/gumroad_app.png";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { asyncVoid } from "$app/utils/promise";
 import { assertResponseError, request, ResponseError } from "$app/utils/request";
@@ -40,6 +41,7 @@ const ApplicationList = (props: { applications: Application[] }) => {
 };
 
 const ApplicationRow = ({ application, onRemove }: { application: Application; onRemove: () => void }) => {
+  const { t } = useTranslation('common');
   const deleteApp = asyncVoid(async () => {
     // eslint-disable-next-line no-alert
     if (!confirm("Delete this application forever?")) return;
@@ -51,11 +53,11 @@ const ApplicationRow = ({ application, onRemove }: { application: Application; o
         accept: "json",
       });
       if (!response.ok) throw new ResponseError();
-      showAlert("Application deleted.", "success");
+      showAlert(t("actions.application_deleted"), "success");
       onRemove();
     } catch (e) {
       assertResponseError(e);
-      showAlert("Failed to delete app.", "error");
+      showAlert(t("errors.failed_delete_app"), "error");
     }
   });
 
diff --git a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
index fa51bc612f..ce3c44b52d 100644
--- a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { asyncVoid } from "$app/utils/promise";
 import { assertResponseError, request, ResponseError } from "$app/utils/request";
@@ -17,12 +18,13 @@ const NotificationEndpointSection = ({
   setPingEndpoint: (val: string) => void;
   userId: string;
 }) => {
+  const { t } = useTranslation('common');
   const [isSendingPing, setIsSendingPing] = React.useState(false);
   const uid = React.useId();
 
   const sendTestPing = asyncVoid(async () => {
     if (pingEndpoint.trim().length === 0) {
-      showAlert("Please provide a URL to send a test ping to.", "error");
+      showAlert(t("errors.please_provide_url_test_ping"), "error");
       return;
     }
 
diff --git a/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx b/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
index 3d4e7bfcbc..94e646e1a6 100644
--- a/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { asyncVoid } from "$app/utils/promise";
 import { request } from "$app/utils/request";
@@ -27,6 +28,7 @@ const PayPalConnectSection = ({
   isFormDisabled: boolean;
   connectAccountFeeInfoText: string;
 }) => {
+  const { t } = useTranslation('common');
   const disconnectPayPal = asyncVoid(async () => {
     const response = await request({
       method: "POST",
@@ -36,10 +38,10 @@ const PayPalConnectSection = ({
 
     const parsedResponse = cast<{ success: boolean }>(await response.json());
     if (parsedResponse.success) {
-      showAlert("Your PayPal account has been disconnected.", "success");
+      showAlert(t("actions.paypal_account_disconnected"), "success");
       window.location.reload();
     } else {
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   });
 
diff --git a/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx b/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
index 82e6d6bdd0..3b5b650158 100644
--- a/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
@@ -1,5 +1,6 @@
 import cx from "classnames";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { FormFieldName, PayoutMethod } from "$app/components/server-components/Settings/PaymentsPage";
 
@@ -24,29 +25,30 @@ const PayPalEmailSection = ({
   updatePayoutMethod: (payoutMethod: PayoutMethod) => void;
   errorFieldNames: Set<FormFieldName>;
 }) => {
+  const { t } = useTranslation('settings');
   const uid = React.useId();
   return (
     <section style={{ display: "grid", gap: "var(--spacer-6)" }}>
       {showPayPalPayoutsFeeNote ? (
         <div className="info" role="status">
-          PayPal payouts are subject to a 2% processing fee.
+          {t("payments.paypal_fee_note")}
         </div>
       ) : null}
       <div>{feeInfoText}</div>
       <div>
         {countrySupportsNativePayouts && !isFormDisabled ? (
           <button className="link" onClick={() => updatePayoutMethod("bank")}>
-            Switch to direct deposit
+            {t("payments.switch_to_direct_deposit")}
           </button>
         ) : null}
         <fieldset className={cx({ danger: errorFieldNames.has("paypal_email_address") })}>
           <legend>
-            <label htmlFor={`${uid}-paypal-email`}>PayPal Email</label>
+            <label htmlFor={`${uid}-paypal-email`}>{t("payments.paypal_email")}</label>
           </legend>
           <input
             type="email"
             id={`${uid}-paypal-email`}
-            placeholder="PayPal Email"
+            placeholder={t("payments.paypal_email")}
             value={paypalEmailAddress || ""}
             disabled={isFormDisabled}
             aria-invalid={errorFieldNames.has("paypal_email_address")}
@@ -55,7 +57,7 @@ const PayPalEmailSection = ({
         </fieldset>
         {hasConnectedStripe ? (
           <div role="alert" className="warning">
-            You cannot change your payout method to PayPal because you have a stripe account connected.
+            {t("payments.cannot_change_to_paypal")}
           </div>
         ) : null}
       </div>
diff --git a/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx b/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
index 3f0cbdfdc0..d6342f0fe9 100644
--- a/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { asyncVoid } from "$app/utils/promise";
 import { request, assertResponseError } from "$app/utils/request";
@@ -25,6 +26,7 @@ const StripeConnectSection = ({
   isFormDisabled: boolean;
   connectAccountFeeInfoText: string;
 }) => {
+  const { t } = useTranslation('common');
   const [isDisconnecting, setisDisconnecting] = React.useState(false);
   const disconnectStripe = asyncVoid(async () => {
     setisDisconnecting(true);
@@ -38,14 +40,14 @@ const StripeConnectSection = ({
 
       const parsedResponse = cast<{ success: boolean }>(await response.json());
       if (parsedResponse.success) {
-        showAlert("Your Stripe account has been disconnected.", "success");
+        showAlert(t("actions.stripe_account_disconnected"), "success");
         window.location.reload();
       } else {
-        showAlert("Sorry, something went wrong. Please try again.", "error");
+        showAlert(t("errors.sorry_something_went_wrong"), "error");
       }
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
 
     setisDisconnecting(false);
diff --git a/app/javascript/components/SubtitleUploadBox.tsx b/app/javascript/components/SubtitleUploadBox.tsx
index 894dc58153..9b88010937 100644
--- a/app/javascript/components/SubtitleUploadBox.tsx
+++ b/app/javascript/components/SubtitleUploadBox.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import FileUtils from "$app/utils/file";
 
@@ -11,11 +12,12 @@ const acceptedSubtitleExtensions = FileUtils.getAllowedSubtitleExtensions()
   .join(",");
 
 export const SubtitleUploadBox = ({ onUploadFiles }: UploadBoxProps) => {
+  const { t } = useTranslation('common');
   const filePickerOnChange = (fileInput: HTMLInputElement) => {
     if (!fileInput.files) return;
     const files = [...fileInput.files];
     if (files.some((file) => !FileUtils.isFileNameASubtitle(file.name))) {
-      showAlert("Invalid file type.", "error");
+      showAlert(t("errors.invalid_file_type"), "error");
       return;
     }
     fileInput.value = "";
diff --git a/app/javascript/components/TiptapExtensions/Link.tsx b/app/javascript/components/TiptapExtensions/Link.tsx
index 6c379e39f0..3bc21da6f3 100644
--- a/app/javascript/components/TiptapExtensions/Link.tsx
+++ b/app/javascript/components/TiptapExtensions/Link.tsx
@@ -6,6 +6,7 @@ import cx from "classnames";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "$app/components/Button";
 import { Modal } from "$app/components/Modal";
@@ -22,6 +23,7 @@ export const WithDialog = ({
   type: "link" | "button";
   children: React.ReactNode;
 }) => {
+  const { t } = useTranslation('common');
   const [addingLink, setAddingLink] = React.useState<{ label: string; url: string } | null>(null);
   const labelInputRef = React.useRef<HTMLInputElement | null>(null);
   const linkInputRef = React.useRef<HTMLInputElement | null>(null);
@@ -53,7 +55,7 @@ export const WithDialog = ({
 
     const href = validateUrl(addingLink.url);
     if (!href) {
-      showAlert("Please enter a valid URL.", "error");
+      showAlert(t("errors.please_enter_valid_url"), "error");
       return;
     }
     const chain = editor.chain().focus();
@@ -127,6 +129,7 @@ export const WithDialog = ({
 };
 
 const LinkNodeView = ({ node, editor, getPos, deleteNode }: NodeViewProps) => {
+  const { t } = useTranslation('common');
   const [isPopoverShown, setIsPopoverShown] = React.useState(false);
   const [isPopoverVisible, setIsPopoverVisible] = React.useState(false);
   const [link, setLink] = React.useState<{ label: string; url: string }>({
@@ -142,7 +145,7 @@ const LinkNodeView = ({ node, editor, getPos, deleteNode }: NodeViewProps) => {
     if (link.label.trim() === "") return;
     if (!href) {
       linkInputRef.current?.focus();
-      return showAlert("Please enter a valid URL.", "error");
+      return showAlert(t("errors.please_enter_valid_url"), "error");
     }
     const markStartPos = getPos() + 1;
     editor
diff --git a/app/javascript/components/Wishlist/FollowButton.tsx b/app/javascript/components/Wishlist/FollowButton.tsx
index 3a717d89f8..5474378fcd 100644
--- a/app/javascript/components/Wishlist/FollowButton.tsx
+++ b/app/javascript/components/Wishlist/FollowButton.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { followWishlist, unfollowWishlist } from "$app/data/wishlists";
 import { assertResponseError } from "$app/utils/request";
@@ -20,6 +21,7 @@ export const useFollowWishlist = ({
   wishlistName: string;
   initialValue: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const location = useOriginalLocation();
   const loggedInUser = useLoggedInUser();
   const { appDomain } = useDomains();
@@ -39,7 +41,9 @@ export const useFollowWishlist = ({
       await action({ wishlistId });
       setIsFollowing(!isFollowing);
       showAlert(
-        isFollowing ? `You are no longer following ${wishlistName}.` : `You are now following ${wishlistName}!`,
+        isFollowing 
+          ? t("actions.no_longer_following", { name: wishlistName })
+          : t("actions.now_following", { name: wishlistName }),
         "success",
       );
     } catch (e) {
@@ -65,6 +69,7 @@ export const FollowButton = ({
   wishlistName: string;
   initialValue: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const { isFollowing, isLoading, toggleFollowing } = useFollowWishlist({
     wishlistId,
     wishlistName,
@@ -72,16 +77,16 @@ export const FollowButton = ({
   });
 
   return isFollowing ? (
-    <WithTooltip tip="Unfollow">
+    <WithTooltip tip={t("actions.unfollow")}>
       <Button onClick={() => void toggleFollowing()} color="primary" disabled={isLoading}>
         <Icon name="bookmark-check-fill" />
-        Following
+        {t("actions.following")}
       </Button>
     </WithTooltip>
   ) : (
     <Button onClick={() => void toggleFollowing()} disabled={isLoading}>
       <Icon name="bookmark-plus" />
-      Follow wishlist
+      {t("actions.follow_wishlist")}
     </Button>
   );
 };
diff --git a/app/javascript/components/Wishlist/WishlistEditor.tsx b/app/javascript/components/Wishlist/WishlistEditor.tsx
index fa4a605909..e9e3421369 100644
--- a/app/javascript/components/Wishlist/WishlistEditor.tsx
+++ b/app/javascript/components/Wishlist/WishlistEditor.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { deleteWishlistItem, updateWishlist } from "$app/data/wishlists";
 import { formatPriceCentsWithCurrencySymbol } from "$app/utils/currency";
@@ -20,6 +21,7 @@ const WishlistItemCard = ({
   item: WishlistItem;
   onDelete: () => void;
 }) => {
+  const { t } = useTranslation('common');
   const [isDeleting, setIsDeleting] = React.useState(false);
 
   const price = (product.price_cents + (option?.price_difference_cents || 0)) * quantity;
@@ -29,11 +31,11 @@ const WishlistItemCard = ({
 
     try {
       await deleteWishlistItem({ wishlistId, wishlistProductId: id });
-      showAlert("Removed from wishlist", "success");
+      showAlert(t("actions.removed_from_wishlist"), "success");
       onDelete();
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     } finally {
       setIsDeleting(false);
     }
@@ -132,6 +134,7 @@ export const WishlistEditor = ({
   isDiscoverable: boolean;
   onClose: () => void;
 }) => {
+  const { t } = useTranslation('common');
   const [newName, setNewName] = React.useState(name);
   const [newDescription, setNewDescription] = React.useState(description ?? "");
   const uid = React.useId();
@@ -144,7 +147,7 @@ export const WishlistEditor = ({
       await updateWishlist({ id, name: newName, description: descriptionValue });
       setName(newName);
       setDescription(descriptionValue);
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
diff --git a/app/javascript/components/server-components/Admin/AddCommentForm.tsx b/app/javascript/components/server-components/Admin/AddCommentForm.tsx
index 8f5abd8346..ece55dc0d2 100644
--- a/app/javascript/components/server-components/Admin/AddCommentForm.tsx
+++ b/app/javascript/components/server-components/Admin/AddCommentForm.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { register } from "$app/utils/serverComponentUtil";
 
@@ -12,12 +13,14 @@ export const AdminAddCommentForm = ({
 }: {
   commentable_id: number;
   commentable_type: string;
-}) => (
+}) => {
+  const { t } = useTranslation('common');
+  return (
   <Form
     url={Routes.admin_comments_path()}
     method="POST"
     confirmMessage="Are you sure you want to post this comment?"
-    onSuccess={() => showAlert("Successfully added comment.", "success")}
+    onSuccess={() => showAlert(t("actions.successfully_added_comment"), "success")}
   >
     {(isLoading) => (
       <fieldset>
@@ -33,6 +36,7 @@ export const AdminAddCommentForm = ({
       </fieldset>
     )}
   </Form>
-);
+  );
+};
 
 export default register({ component: AdminAddCommentForm, propParser: createCast() });
diff --git a/app/javascript/components/server-components/Admin/ChangeEmailForm.tsx b/app/javascript/components/server-components/Admin/ChangeEmailForm.tsx
index 1b658a4f92..17c37bdab1 100644
--- a/app/javascript/components/server-components/Admin/ChangeEmailForm.tsx
+++ b/app/javascript/components/server-components/Admin/ChangeEmailForm.tsx
@@ -1,17 +1,20 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { register } from "$app/utils/serverComponentUtil";
 
 import { Form } from "$app/components/Admin/Form";
 import { showAlert } from "$app/components/server-components/Alert";
 
-export const AdminChangeEmailForm = ({ user_id, current_email }: { user_id: number; current_email: string | null }) => (
-  <Form
-    url={Routes.update_email_admin_user_path(user_id)}
-    method="POST"
-    confirmMessage="Are you sure you want to update this user's email address?"
-    onSuccess={() => showAlert("Successfully updated email address.", "success")}
+export const AdminChangeEmailForm = ({ user_id, current_email }: { user_id: number; current_email: string | null }) => {
+  const { t } = useTranslation('common');
+  return (
+    <Form
+      url={Routes.update_email_admin_user_path(user_id)}
+      method="POST"
+      confirmMessage="Are you sure you want to update this user's email address?"
+      onSuccess={() => showAlert(t("actions.successfully_updated_email_address"), "success")}
   >
     {(isLoading) => (
       <fieldset>
@@ -24,7 +27,8 @@ export const AdminChangeEmailForm = ({ user_id, current_email }: { user_id: numb
         <small>This will update the user's email to this new one!</small>
       </fieldset>
     )}
-  </Form>
-);
+    </Form>
+  );
+};
 
 export default register({ component: AdminChangeEmailForm, propParser: createCast() });
diff --git a/app/javascript/components/server-components/Admin/FlagForFraudForm.tsx b/app/javascript/components/server-components/Admin/FlagForFraudForm.tsx
index bae1eff9b6..67f59dfc42 100644
--- a/app/javascript/components/server-components/Admin/FlagForFraudForm.tsx
+++ b/app/javascript/components/server-components/Admin/FlagForFraudForm.tsx
@@ -1,17 +1,20 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { register } from "$app/utils/serverComponentUtil";
 
 import { Form } from "$app/components/Admin/Form";
 import { showAlert } from "$app/components/server-components/Alert";
 
-export const AdminFlagForFraudForm = ({ user_id }: { user_id: number }) => (
-  <Form
-    url={Routes.flag_for_fraud_admin_user_path(user_id)}
-    method="POST"
-    confirmMessage={`Are you sure you want to flag user ${user_id} for fraud?`}
-    onSuccess={() => showAlert("Flagged.", "success")}
+export const AdminFlagForFraudForm = ({ user_id }: { user_id: number }) => {
+  const { t } = useTranslation('common');
+  return (
+    <Form
+      url={Routes.flag_for_fraud_admin_user_path(user_id)}
+      method="POST"
+      confirmMessage={`Are you sure you want to flag user ${user_id} for fraud?`}
+      onSuccess={() => showAlert(t("actions.flagged"), "success")}
   >
     {(isLoading) => (
       <fieldset>
@@ -23,7 +26,8 @@ export const AdminFlagForFraudForm = ({ user_id }: { user_id: number }) => (
         </div>
       </fieldset>
     )}
-  </Form>
-);
+    </Form>
+  );
+};
 
 export default register({ component: AdminFlagForFraudForm, propParser: createCast() });
diff --git a/app/javascript/components/server-components/Admin/ManualPayoutForm.tsx b/app/javascript/components/server-components/Admin/ManualPayoutForm.tsx
index 225fd50c21..7fbcc5e760 100644
--- a/app/javascript/components/server-components/Admin/ManualPayoutForm.tsx
+++ b/app/javascript/components/server-components/Admin/ManualPayoutForm.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { formatPriceCentsWithCurrencySymbol } from "$app/utils/currency";
 import { register } from "$app/utils/serverComponentUtil";
@@ -29,12 +30,14 @@ export const AdminManualPayoutForm = ({
   unpaid_balance_up_to_date: number;
   currency: string | null;
   ask_confirmation: boolean;
-}) => (
+}) => {
+  const { t } = useTranslation('common');
+  return (
   <Form
     url={Routes.admin_pay_user_path(user_id)}
     method="POST"
     confirmMessage={ask_confirmation ? "DON'T USE UNLESS to transfer the balance to Stripe Connect account" : false}
-    onSuccess={() => showAlert("Successfully issued payout.", "success")}
+    onSuccess={() => showAlert(t("actions.successfully_issued_payout"), "success")}
   >
     {(isLoading) => (
       <fieldset>
@@ -75,6 +78,7 @@ export const AdminManualPayoutForm = ({
       </fieldset>
     )}
   </Form>
-);
+  );
+};
 
 export default register({ component: AdminManualPayoutForm, propParser: createCast() });
diff --git a/app/javascript/components/server-components/Admin/MassTransferPurchasesForm.tsx b/app/javascript/components/server-components/Admin/MassTransferPurchasesForm.tsx
index 0d4c131097..0457fa995e 100644
--- a/app/javascript/components/server-components/Admin/MassTransferPurchasesForm.tsx
+++ b/app/javascript/components/server-components/Admin/MassTransferPurchasesForm.tsx
@@ -1,17 +1,20 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { register } from "$app/utils/serverComponentUtil";
 
 import { Form } from "$app/components/Admin/Form";
 import { showAlert } from "$app/components/server-components/Alert";
 
-export const MassTransferPurchasesForm = ({ user_id }: { user_id: number }) => (
-  <Form
-    url={Routes.mass_transfer_purchases_admin_user_path(user_id)}
-    method="POST"
-    confirmMessage="Are you sure you want to Mass Transfer purchases for this user?"
-    onSuccess={() => showAlert("Successfully transferred purchases.", "success")}
+export const MassTransferPurchasesForm = ({ user_id }: { user_id: number }) => {
+  const { t } = useTranslation('common');
+  return (
+    <Form
+      url={Routes.mass_transfer_purchases_admin_user_path(user_id)}
+      method="POST"
+      confirmMessage="Are you sure you want to Mass Transfer purchases for this user?"
+      onSuccess={() => showAlert(t("actions.successfully_transferred_purchases"), "success")}
   >
     {(isLoading) => (
       <fieldset>
@@ -24,7 +27,8 @@ export const MassTransferPurchasesForm = ({ user_id }: { user_id: number }) => (
         <small>Are you sure you want to Mass Transfer purchases for this user?</small>
       </fieldset>
     )}
-  </Form>
-);
+    </Form>
+  );
+};
 
 export default register({ component: MassTransferPurchasesForm, propParser: createCast() });
diff --git a/app/javascript/components/server-components/Admin/ResendReceiptForm.tsx b/app/javascript/components/server-components/Admin/ResendReceiptForm.tsx
index 5188d5aa38..4c74ab536d 100644
--- a/app/javascript/components/server-components/Admin/ResendReceiptForm.tsx
+++ b/app/javascript/components/server-components/Admin/ResendReceiptForm.tsx
@@ -1,17 +1,20 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { register } from "$app/utils/serverComponentUtil";
 
 import { Form } from "$app/components/Admin/Form";
 import { showAlert } from "$app/components/server-components/Alert";
 
-export const AdminResendReceiptForm = ({ purchase_id, email }: { purchase_id: number; email: string }) => (
-  <Form
-    url={Routes.resend_receipt_admin_purchase_path(purchase_id)}
-    method="POST"
-    confirmMessage="Are you sure you want to resend the receipt?"
-    onSuccess={() => showAlert("Receipt sent successfully.", "success")}
+export const AdminResendReceiptForm = ({ purchase_id, email }: { purchase_id: number; email: string }) => {
+  const { t } = useTranslation('common');
+  return (
+    <Form
+      url={Routes.resend_receipt_admin_purchase_path(purchase_id)}
+      method="POST"
+      confirmMessage="Are you sure you want to resend the receipt?"
+      onSuccess={() => showAlert(t("actions.receipt_sent_successfully"), "success")}
   >
     {(isLoading) => (
       <fieldset>
@@ -24,7 +27,8 @@ export const AdminResendReceiptForm = ({ purchase_id, email }: { purchase_id: nu
         <small>This will update the purchase email to this new one!</small>
       </fieldset>
     )}
-  </Form>
-);
+    </Form>
+  );
+};
 
 export default register({ component: AdminResendReceiptForm, propParser: createCast() });
diff --git a/app/javascript/components/server-components/Admin/SuspendForFraudForm.tsx b/app/javascript/components/server-components/Admin/SuspendForFraudForm.tsx
index 34fee7dd7c..f44f644f0c 100644
--- a/app/javascript/components/server-components/Admin/SuspendForFraudForm.tsx
+++ b/app/javascript/components/server-components/Admin/SuspendForFraudForm.tsx
@@ -1,17 +1,20 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { register } from "$app/utils/serverComponentUtil";
 
 import { Form } from "$app/components/Admin/Form";
 import { showAlert } from "$app/components/server-components/Alert";
 
-export const AdminSuspendForFraudForm = ({ user_id }: { user_id: number }) => (
-  <Form
-    url={Routes.suspend_for_fraud_admin_user_path(user_id)}
-    method="POST"
-    confirmMessage={`Are you sure you want to suspend user ${user_id} for fraud?`}
-    onSuccess={() => showAlert("Suspended.", "success")}
+export const AdminSuspendForFraudForm = ({ user_id }: { user_id: number }) => {
+  const { t } = useTranslation('common');
+  return (
+    <Form
+      url={Routes.suspend_for_fraud_admin_user_path(user_id)}
+      method="POST"
+      confirmMessage={`Are you sure you want to suspend user ${user_id} for fraud?`}
+      onSuccess={() => showAlert(t("actions.suspended"), "success")}
   >
     {(isLoading) => (
       <fieldset>
@@ -23,7 +26,8 @@ export const AdminSuspendForFraudForm = ({ user_id }: { user_id: number }) => (
         </div>
       </fieldset>
     )}
-  </Form>
-);
+    </Form>
+  );
+};
 
 export default register({ component: AdminSuspendForFraudForm, propParser: createCast() });
diff --git a/app/javascript/components/server-components/AffiliatesPage.tsx b/app/javascript/components/server-components/AffiliatesPage.tsx
index d93dd2a5d7..ac2b56ac2b 100644
--- a/app/javascript/components/server-components/AffiliatesPage.tsx
+++ b/app/javascript/components/server-components/AffiliatesPage.tsx
@@ -19,6 +19,7 @@ import {
 } from "react-router-dom";
 import { StaticRouterProvider } from "react-router-dom/server";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { updateAffiliateRequest, approvePendingAffiliateRequests } from "$app/data/affiliate_request";
 import {
@@ -177,25 +178,28 @@ const ApproveAllButton = ({
 }: {
   isLoading: boolean;
   setIsLoading: (newState: boolean) => void;
-}) => (
-  <Button
-    color="primary"
-    onClick={asyncVoid(async () => {
-      setIsLoading(true);
-      try {
-        await approvePendingAffiliateRequests();
-        showAlert("Approved", "success");
-      } catch (e) {
-        assertResponseError(e);
-        showAlert("Error approving affiliate requests", "error");
-      }
-      setIsLoading(false);
-    })}
-    disabled={isLoading}
-  >
-    {isLoading ? "Approving" : "Approve all"}
-  </Button>
-);
+}) => {
+  const { t } = useTranslation('common');
+  return (
+    <Button
+      color="primary"
+      onClick={asyncVoid(async () => {
+        setIsLoading(true);
+        try {
+          await approvePendingAffiliateRequests();
+          showAlert(t("actions.approved"), "success");
+        } catch (e) {
+          assertResponseError(e);
+          showAlert(t("errors.error_approving_affiliate_requests"), "error");
+        }
+        setIsLoading(false);
+      })}
+      disabled={isLoading}
+    >
+      {isLoading ? "Approving" : "Approve all"}
+    </Button>
+  );
+};
 
 const AffiliateRequestsTable = ({
   affiliateRequests: initialAffiliateRequests,
@@ -405,15 +409,16 @@ const AffiliatesTab = () => {
   const productTooltipLabel = (products: Affiliate["products"]) =>
     products.map((product) => `${product.name} (${formatAffiliateBasisPoints(product.fee_percent ?? 0)})`).join(", ");
 
+  const { t } = useTranslation('common');
   const remove = asyncVoid(async (affiliateId: string) => {
     try {
       await removeAffiliate(affiliateId);
       if (selectedAffiliate) setSelectedAffiliate(null);
       revalidator.revalidate();
-      showAlert("The affiliate was removed successfully.", "success");
+      showAlert(t("actions.affiliate_removed_successfully"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Failed to remove the affiliate.", "error");
+      showAlert(t("errors.failed_remove_affiliate"), "error");
     }
   });
 
@@ -666,6 +671,7 @@ type FormProps = {
 };
 
 const Form = ({ title, headerLabel, submitLabel }: FormProps) => {
+  const { t } = useTranslation('common');
   const affiliate = cast<AffiliateRequestPayload>(useLoaderData());
   const loggedInUser = useLoggedInUser();
   const navigate = useNavigate();
@@ -718,13 +724,13 @@ const Form = ({ title, headerLabel, submitLabel }: FormProps) => {
     if (errors.size > 0) return;
 
     if (!apply_to_all_products && products.every((product) => !product.enabled)) {
-      showAlert("Please enable at least one product.", "error");
+      showAlert(t("errors.please_enable_at_least_one_product"), "error");
       return;
     }
 
     try {
       await ("id" in affiliateState ? updateAffiliate(affiliateState) : addAffiliate(affiliateState));
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
       navigate("/affiliates");
     } catch (e) {
       assertResponseError(e);
diff --git a/app/javascript/components/server-components/AnalyticsPage.tsx b/app/javascript/components/server-components/AnalyticsPage.tsx
index 00fd38d264..f0d5200843 100644
--- a/app/javascript/components/server-components/AnalyticsPage.tsx
+++ b/app/javascript/components/server-components/AnalyticsPage.tsx
@@ -1,6 +1,7 @@
 import { lightFormat } from "date-fns";
 import pickBy from "lodash/pickBy";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { createCast } from "ts-safe-cast";
 
 import {
@@ -104,6 +105,7 @@ const AnalyticsPage = ({
   country_codes: Record<string, string>;
   state_names: Record<string, string>;
 }) => {
+  const { t } = useTranslation('common');
   const [products, setProducts] = React.useState(
     initialProducts.map((product) => ({ ...product, selected: product.alive })),
   );
@@ -134,7 +136,7 @@ const AnalyticsPage = ({
         activeRequests.current = null;
       } catch (e) {
         if (e instanceof AbortError) return;
-        showAlert("Sorry, something went wrong. Please try again.", "error");
+        showAlert(t("errors.sorry_something_went_wrong"), "error");
       }
     };
     void loadData();
diff --git a/app/javascript/components/server-components/Audience/CustomersPage.tsx b/app/javascript/components/server-components/Audience/CustomersPage.tsx
index 7adb79e009..78c56981d4 100644
--- a/app/javascript/components/server-components/Audience/CustomersPage.tsx
+++ b/app/javascript/components/server-components/Audience/CustomersPage.tsx
@@ -4,6 +4,7 @@ import { lightFormat, subMonths } from "date-fns";
 import { format } from "date-fns-tz";
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   Address,
@@ -120,6 +121,7 @@ const CustomersPage = ({
   can_ping: boolean;
   show_refund_fee_notice: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const currentSeller = useCurrentSeller();
   const userAgentInfo = useUserAgentInfo();
 
@@ -812,7 +814,7 @@ const CustomerDrawer = ({
             : (email) =>
                 updatePurchase(customer.id, { email }).then(
                   () => {
-                    showAlert("Email updated successfully.", "success");
+                    showAlert(t("actions.email_updated_successfully"), "success");
                     onChange({ email });
                     if (productPurchases.length)
                       setProductPurchases((prevProductPurchases) =>
@@ -851,7 +853,7 @@ const CustomerDrawer = ({
           onSave={(email) =>
             updatePurchase(customer.id, { giftee_email: email }).then(
               () => {
-                showAlert("Email updated successfully.", "success");
+                showAlert(t("actions.email_updated_successfully"), "success");
                 onChange({ giftee_email: email });
               },
               (e: unknown) => {
@@ -1032,7 +1034,7 @@ const CustomerDrawer = ({
           onSave={(enabled) =>
             updateLicense(license.id, enabled).then(
               () => {
-                showAlert("Changes saved!", "success");
+                showAlert(t("actions.changes_saved"), "success");
                 onChange({ license: { ...license, enabled } });
               },
               (e: unknown) => {
@@ -1049,7 +1051,7 @@ const CustomerDrawer = ({
           onSave={(quantity) =>
             updatePurchase(customer.id, { quantity }).then(
               () => {
-                showAlert("Successfully updated seats!", "success");
+                showAlert(t("actions.successfully_updated_seats"), "success");
                 onChange({ quantity });
               },
               (e: unknown) => {
@@ -1067,7 +1069,7 @@ const CustomerDrawer = ({
             onMarkShipped={(url) =>
               markShipped(customer.id, url).then(
                 () => {
-                  showAlert("Changes saved!", "success");
+                  showAlert(t("actions.changes_saved"), "success");
                   onChange({ shipping: { ...shipping, tracking: { url, shipped: true } } });
                 },
                 (e: unknown) => {
@@ -1083,7 +1085,7 @@ const CustomerDrawer = ({
             onSave={(address) =>
               updatePurchase(customer.id, address).then(
                 () => {
-                  showAlert("Changes saved!", "success");
+                  showAlert(t("actions.changes_saved"), "success");
                   onChange({ shipping: { ...shipping, address } });
                 },
                 (e: unknown) => {
@@ -1128,7 +1130,7 @@ const CustomerDrawer = ({
           onCancel={() =>
             void cancelSubscription(subscription.id).then(
               () => {
-                showAlert("Changes saved!", "success");
+                showAlert(t("actions.changes_saved"), "success");
                 onChange({ subscription: { ...subscription, status: "pending_cancellation" } });
               },
               (e: unknown) => {
@@ -1604,10 +1606,10 @@ const ReviewVideosSubsections = ({ review, onChange }: { review: Review; onChang
     try {
       await approveReviewVideo(video.id);
       onChange({ ...review, videos: [{ ...video, approval_status: "approved" }] });
-      showAlert("This video is now live!", "success");
+      showAlert(t("actions.video_now_live"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     } finally {
       setLoading(false);
     }
@@ -1619,11 +1621,11 @@ const ReviewVideosSubsections = ({ review, onChange }: { review: Review; onChang
       await rejectReviewVideo(video.id);
       const otherVideos = review.videos.filter((v) => v.id !== video.id);
       onChange({ ...review, videos: [{ ...video, approval_status: "rejected" }, ...otherVideos] });
-      showAlert("This video has been removed.", "success");
+      showAlert(t("actions.video_removed"), "success");
       setApprovedVideoRemovalModalOpen(false);
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     } finally {
       setLoading(false);
     }
@@ -1769,7 +1771,7 @@ const OptionSection = ({
     try {
       setIsLoading(true);
       await updateOption(purchaseId, option.id, quantity);
-      showAlert("Saved variant", "success");
+      showAlert(t("actions.saved_variant"), "success");
       onChange(option);
       setIsEditing(false);
     } catch (e) {
@@ -2020,7 +2022,7 @@ const PingButton = ({ purchaseId }: { purchaseId: string }) => {
     setIsLoading(true);
     try {
       await resendPing(purchaseId);
-      showAlert("Ping resent.", "success");
+      showAlert(t("actions.ping_resent"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -2052,11 +2054,11 @@ const AccessSection = ({
     try {
       if (revoke) {
         await revokeAccess(purchaseId);
-        showAlert("Access revoked", "success");
+        showAlert(t("actions.access_revoked"), "success");
         onChange(true);
       } else {
         await undoRevokeAccess(purchaseId);
-        showAlert("Access re-enabled", "success");
+        showAlert(t("actions.access_re_enabled"), "success");
         onChange(false);
       }
     } catch (e) {
@@ -2124,7 +2126,7 @@ const RefundForm = ({
       const refundAmountRemaining = amountRefundable - refundAmountCents.value;
       onChange(refundAmountRemaining);
       setRefundAmountCents({ value: refundAmountRemaining });
-      showAlert("Purchase successfully refunded.", "success");
+      showAlert(t("actions.purchase_successfully_refunded"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -2347,7 +2349,7 @@ const CallSection = ({ call, onChange }: { call: Call; onChange: (call: Call) =>
     try {
       await updateCallUrl(call.id, callUrl);
       onChange({ ...call, call_url: callUrl });
-      showAlert("Call URL updated!", "success");
+      showAlert(t("actions.call_url_updated"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -2471,9 +2473,9 @@ const CommissionSection = ({
         ],
       });
 
-      showAlert("Uploaded successfully!", "success");
+      showAlert(t("actions.uploaded_successfully"), "success");
     } catch {
-      showAlert("Error uploading files. Please try again.", "error");
+      showAlert(t("errors.error_uploading_files"), "error");
     } finally {
       setIsLoading(false);
     }
@@ -2490,7 +2492,7 @@ const CommissionSection = ({
         ...commission,
         files: commission.files.filter(({ id }) => id !== fileId),
       });
-      showAlert("File deleted successfully!", "success");
+      showAlert(t("actions.file_deleted_successfully"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -2504,7 +2506,7 @@ const CommissionSection = ({
       setIsLoading(true);
       await completeCommission(commission.id);
       onChange({ ...commission, status: "completed" });
-      showAlert("Commission completed!", "success");
+      showAlert(t("actions.commission_completed"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
diff --git a/app/javascript/components/server-components/AudiencePage.tsx b/app/javascript/components/server-components/AudiencePage.tsx
index 8d9900ca9e..3eccca92b8 100644
--- a/app/javascript/components/server-components/AudiencePage.tsx
+++ b/app/javascript/components/server-components/AudiencePage.tsx
@@ -1,6 +1,7 @@
 import { lightFormat } from "date-fns";
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { AudienceDataByDate, fetchAudienceDataByDate } from "$app/data/audience";
 import { AbortError } from "$app/utils/request";
@@ -22,6 +23,7 @@ import { WithTooltip } from "$app/components/WithTooltip";
 import placeholder from "$assets/images/placeholders/audience.png";
 
 const AudiencePage = ({ total_follower_count }: { total_follower_count: number }) => {
+  const { t } = useTranslation('common');
   const dateRange = useAnalyticsDateRange();
   const [data, setData] = React.useState<AudienceDataByDate | null>(null);
   const startTime = lightFormat(dateRange.from, "yyyy-MM-dd");
@@ -43,7 +45,7 @@ const AudiencePage = ({ total_follower_count }: { total_follower_count: number }
         activeRequest.current = null;
       } catch (e) {
         if (e instanceof AbortError) return;
-        showAlert("Sorry, something went wrong. Please try again.", "error");
+        showAlert(t("errors.sorry_something_went_wrong"), "error");
       }
     };
     void loadData();
diff --git a/app/javascript/components/server-components/BalancePage.tsx b/app/javascript/components/server-components/BalancePage.tsx
index 88b9414f24..99828253c4 100644
--- a/app/javascript/components/server-components/BalancePage.tsx
+++ b/app/javascript/components/server-components/BalancePage.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cast, createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { exportPayouts } from "$app/data/balance";
 import { createInstantPayout } from "$app/data/payout";
@@ -252,6 +253,7 @@ export type PastPayoutsDataAndPaymentMethod = PastPeriodPayoutsData &
 
 type PayoutPeriodData = CurrentPayoutsDataAndPaymentMethodWithUserPayable | PastPayoutsDataAndPaymentMethod;
 const Period = ({ payoutPeriodData }: { payoutPeriodData: PayoutPeriodData }) => {
+  const { t } = useTranslation('common');
   const { should_be_shown_currencies_always: showUSDSuffix } = payoutPeriodData;
   const [isCSVDownloadInProgress, setIsCSVDownloadInProgress] = React.useState(false);
 
@@ -265,7 +267,7 @@ const Period = ({ payoutPeriodData }: { payoutPeriodData: PayoutPeriodData }) =>
 
   const handleRequestPayoutCSV = asyncVoid(async () => {
     if (!("payment_external_id" in payoutPeriodData)) {
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
       return;
     }
 
@@ -273,10 +275,10 @@ const Period = ({ payoutPeriodData }: { payoutPeriodData: PayoutPeriodData }) =>
 
     try {
       await exportPayouts([payoutPeriodData.payment_external_id]);
-      showAlert("You will receive an email in your inbox shortly with the data you've requested.", "success");
+      showAlert(t("actions.email_with_data_requested"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
     setIsCSVDownloadInProgress(false);
   });
diff --git a/app/javascript/components/server-components/BalancePage/ExportPayoutsPopover.tsx b/app/javascript/components/server-components/BalancePage/ExportPayoutsPopover.tsx
index 2482efcf36..3d2beb843a 100644
--- a/app/javascript/components/server-components/BalancePage/ExportPayoutsPopover.tsx
+++ b/app/javascript/components/server-components/BalancePage/ExportPayoutsPopover.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { ExportablePayout, exportPayouts, getExportablePayouts } from "$app/data/balance";
 import { asyncVoid } from "$app/utils/promise";
@@ -12,6 +13,7 @@ import { showAlert } from "$app/components/server-components/Alert";
 import { useRunOnce } from "$app/components/useRunOnce";
 
 const ExportPayoutsPopoverContent = ({ closePopover }: { closePopover: () => void }) => {
+  const { t } = useTranslation('common');
   const currentYear = new Date().getFullYear();
   const [yearsWithPayouts, setYearsWithPayouts] = React.useState<number[]>([currentYear]);
   const [selectedYear, setSelectedYear] = React.useState<number>(currentYear);
@@ -66,10 +68,10 @@ const ExportPayoutsPopoverContent = ({ closePopover }: { closePopover: () => voi
     try {
       await exportPayouts(Array.from(selectedPayouts));
       closePopover();
-      showAlert("You will receive an email in your inbox shortly with the data you've requested.", "success");
+      showAlert(t("actions.export_email_sent"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
 
     setIsDownloading(false);
diff --git a/app/javascript/components/server-components/BundleEditPage.tsx b/app/javascript/components/server-components/BundleEditPage.tsx
index 1e5b76bf08..52078123f3 100644
--- a/app/javascript/components/server-components/BundleEditPage.tsx
+++ b/app/javascript/components/server-components/BundleEditPage.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { StaticRouterProvider } from "react-router-dom/server";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { OtherRefundPolicy } from "$app/data/products/other_refund_policies";
 import { Thumbnail } from "$app/data/thumbnails";
@@ -72,6 +73,7 @@ const BundleEditPage = ({
   seller_refund_policy_enabled,
   seller_refund_policy,
 }: Props) => {
+  const { t } = useTranslation('common');
   const [bundle, setBundle] = React.useState(initialBundle);
   const updateBundle = (update: Partial<Bundle> | ((bundle: Bundle) => void)) =>
     setBundle((prevBundle) => {
@@ -83,7 +85,7 @@ const BundleEditPage = ({
 
   useRunOnce(() => {
     if (!is_bundle)
-      showAlert("Select products and save your changes to finish converting this product to a bundle.", "warning");
+      showAlert(t("warnings.select_products_to_convert_bundle"), "warning");
   });
 
   const router = createBrowserRouter(routes);
diff --git a/app/javascript/components/server-components/CheckoutDashboard/DiscountsPage.tsx b/app/javascript/components/server-components/CheckoutDashboard/DiscountsPage.tsx
index ce8439213f..b25071c77a 100644
--- a/app/javascript/components/server-components/CheckoutDashboard/DiscountsPage.tsx
+++ b/app/javascript/components/server-components/CheckoutDashboard/DiscountsPage.tsx
@@ -1,6 +1,7 @@
 import cx from "classnames";
 import * as React from "react";
 import { createCast, is } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   OfferCodeStatistics,
@@ -132,6 +133,7 @@ const DiscountsPage = ({
   products: Product[];
   pagination: PaginationProps;
 }) => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
   const [{ offerCodes, pagination }, setState] = React.useState<{
     offerCodes: OfferCode[];
@@ -252,7 +254,7 @@ const DiscountsPage = ({
   const deleteOfferCode = async (id: string) => {
     await deleteDiscount(id);
     reloadDiscounts();
-    showAlert("Successfully deleted discount!", "success");
+    showAlert(t("actions.discount_deleted_successfully"), "success");
   };
 
   const currentSeller = useCurrentSeller();
@@ -632,7 +634,7 @@ const DiscountsPage = ({
           });
           resetQueryState();
           setState({ offerCodes, pagination });
-          showAlert("Successfully updated discount!", "success");
+          showAlert(t("actions.discount_updated_successfully"), "success");
           setView("list");
         } catch (e) {
           assertResponseError(e);
@@ -670,7 +672,7 @@ const DiscountsPage = ({
           resetQueryState();
           setState({ offerCodes, pagination });
           setSelectedOfferCodeId(offerCodes[0]?.id ?? null);
-          showAlert("Successfully created discount!", "success");
+          showAlert(t("actions.discount_created_successfully"), "success");
           setView("list");
         } catch (e) {
           assertResponseError(e);
diff --git a/app/javascript/components/server-components/CheckoutDashboard/FormPage.tsx b/app/javascript/components/server-components/CheckoutDashboard/FormPage.tsx
index 7677800532..901e97b738 100644
--- a/app/javascript/components/server-components/CheckoutDashboard/FormPage.tsx
+++ b/app/javascript/components/server-components/CheckoutDashboard/FormPage.tsx
@@ -1,6 +1,7 @@
 import cx from "classnames";
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { CustomField, updateCheckoutForm } from "$app/data/checkout_form";
 import { RecommendationType } from "$app/data/recommended_products";
@@ -41,6 +42,7 @@ const FormPage = ({
   custom_fields: CustomField[];
   products: SimpleProduct[];
 }) => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
 
   const cartItem = cart_item ?? PLACEHOLDER_CART_ITEM;
@@ -80,7 +82,7 @@ const FormPage = ({
     }
     setErrors(errors);
     if (errors.size) {
-      showAlert("Please complete all required fields.", "error");
+      showAlert(t("errors.please_complete_all_required_fields"), "error");
       return;
     }
     try {
@@ -90,7 +92,7 @@ const FormPage = ({
         customFields,
       });
       setCustomFields(response.custom_fields.map(addKey));
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
diff --git a/app/javascript/components/server-components/CheckoutDashboard/UpsellsPage.tsx b/app/javascript/components/server-components/CheckoutDashboard/UpsellsPage.tsx
index d296d472ba..c9359c9c93 100644
--- a/app/javascript/components/server-components/CheckoutDashboard/UpsellsPage.tsx
+++ b/app/javascript/components/server-components/CheckoutDashboard/UpsellsPage.tsx
@@ -1,6 +1,7 @@
 import cx from "classnames";
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   createUpsell,
@@ -83,6 +84,7 @@ const UpsellsPage = (props: {
   products: { id: string; name: string; has_multiple_versions: boolean; native_type: ProductNativeType }[];
   pagination: PaginationProps;
 }) => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
   const isReadOnly = !loggedInUser?.policies.upsell.create;
 
@@ -158,7 +160,7 @@ const UpsellsPage = (props: {
       setState(await createUpsell(upsellPayload));
       setView("list");
       setSelectedUpsellId(null);
-      showAlert("Successfully created upsell!", "success");
+      showAlert(t("actions.successfully_created_upsell"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -173,7 +175,7 @@ const UpsellsPage = (props: {
       setState(await updateUpsell(selectedUpsellId, upsellPayload));
       setView("list");
       setSelectedUpsellId(null);
-      showAlert("Successfully updated upsell!", "success");
+      showAlert(t("actions.successfully_updated_upsell"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -187,7 +189,7 @@ const UpsellsPage = (props: {
       setIsLoading(true);
       setState(await deleteUpsell(selectedUpsellId));
       setSelectedUpsellId(null);
-      showAlert("Successfully deleted upsell!", "success");
+      showAlert(t("actions.successfully_deleted_upsell"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -474,6 +476,7 @@ const Form = ({
   onCancel: () => void;
   isLoading: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const uid = React.useId();
 
   const [name, setName] = React.useState<{ value: string; error?: boolean }>({ value: upsell?.name ?? "" });
@@ -577,7 +580,7 @@ const Form = ({
       }
 
       if (discount) setDiscount({ ...discount, error: discount.value === null });
-      showAlert("Please complete all required fields.", "error");
+      showAlert(t("errors.please_complete_all_required_fields"), "error");
       return;
     }
 
diff --git a/app/javascript/components/server-components/CheckoutPage.tsx b/app/javascript/components/server-components/CheckoutPage.tsx
index f394da9427..15a6ef9654 100644
--- a/app/javascript/components/server-components/CheckoutPage.tsx
+++ b/app/javascript/components/server-components/CheckoutPage.tsx
@@ -1,6 +1,7 @@
 import reverse from "lodash/reverse";
 import * as React from "react";
 import { createCast, cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { SurchargesResponse } from "$app/data/customer_surcharge";
 import { startOrderCreation } from "$app/data/order";
@@ -157,6 +158,7 @@ export const CheckoutPage = ({
   default_tip_option,
   ...props
 }: Props) => {
+  const { t } = useTranslation('common');
   const user = useLoggedInUser();
   const email = props.cart?.email ?? user?.email ?? "";
   const [cart, setCart] = React.useState<CartState>(() => {
@@ -247,7 +249,7 @@ export const CheckoutPage = ({
         .then(setSurchargesIfAccepted)
         .catch((e: unknown) => {
           assertResponseError(e);
-          showAlert("Sorry, something went wrong. Please try again.", "error");
+          showAlert(t("errors.sorry_something_went_wrong"), "error");
           dispatch({ type: "cancel" });
         }),
     [currentOffer],
diff --git a/app/javascript/components/server-components/CollaboratorsPage.tsx b/app/javascript/components/server-components/CollaboratorsPage.tsx
index 03c9a585d0..4bbffe4fb1 100644
--- a/app/javascript/components/server-components/CollaboratorsPage.tsx
+++ b/app/javascript/components/server-components/CollaboratorsPage.tsx
@@ -13,6 +13,7 @@ import {
   useRevalidator,
 } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   addCollaborator,
@@ -163,6 +164,7 @@ const Collaborators = () => {
 
   const { collaborators, collaborators_disabled_reason, has_incoming_collaborators } =
     cast<CollaboratorsData>(useLoaderData());
+  const { t } = useTranslation('common');
   const [selectedCollaborator, setSelectedCollaborator] = React.useState<Collaborator | null>(null);
 
   const remove = asyncVoid(async (collaboratorId: string) => {
@@ -170,10 +172,10 @@ const Collaborators = () => {
       await removeCollaborator(collaboratorId);
       setSelectedCollaborator(null);
       revalidator.revalidate();
-      showAlert("The collaborator was removed successfully.", "success");
+      showAlert(t("actions.collaborator_removed_successfully"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Failed to remove the collaborator.", "error");
+      showAlert(t("errors.failed_remove_collaborator"), "error");
     }
   });
 
@@ -315,6 +317,7 @@ type CollaboratorProduct = CollaboratorFormProduct & {
 };
 
 const CollaboratorForm = () => {
+  const { t } = useTranslation('common');
   const navigate = useNavigate();
   const navigation = useNavigation();
 
@@ -418,7 +421,7 @@ const CollaboratorForm = () => {
     );
 
     if (enabledProducts.length === 0) {
-      showAlert("At least one product must be selected", "error");
+      showAlert(t("errors.at_least_one_product_selected"), "error");
       return;
     }
 
@@ -426,7 +429,7 @@ const CollaboratorForm = () => {
       defaultPercentCommission.hasError ||
       enabledProducts.some((product) => !validCommission(product.percent_commission))
     ) {
-      showAlert("Collaborator cut must be 50% or less", "error");
+      showAlert(t("errors.collaborator_cut_max_50_percent"), "error");
       return;
     }
 
@@ -451,7 +454,7 @@ const CollaboratorForm = () => {
             ...data,
             email: collaboratorEmail.value,
           }));
-      showAlert("Changes saved!", "success");
+      showAlert(t("actions.changes_saved"), "success");
       navigate("/collaborators");
     } catch (e) {
       assertResponseError(e);
diff --git a/app/javascript/components/server-components/CollaboratorsPage/IncomingCollaborators.tsx b/app/javascript/components/server-components/CollaboratorsPage/IncomingCollaborators.tsx
index c3c35c163c..98e626b08f 100644
--- a/app/javascript/components/server-components/CollaboratorsPage/IncomingCollaborators.tsx
+++ b/app/javascript/components/server-components/CollaboratorsPage/IncomingCollaborators.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import { Link, useLoaderData, useNavigation } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   acceptCollaboratorInvitation,
@@ -275,6 +276,7 @@ const pendingCollaboratorsFirst = (a: IncomingCollaborator, b: IncomingCollabora
 };
 
 export const IncomingCollaborators = () => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
   const navigation = useNavigation();
 
@@ -323,10 +325,10 @@ export const IncomingCollaborators = () => {
       // accepting as they'll be in the same position.
       setSelected(null);
 
-      showAlert("Invitation accepted", "success");
+      showAlert(t("actions.invitation_accepted"), "success");
     } catch (error) {
       assertResponseError(error);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     } finally {
       finishProcessing(incomingCollaborator);
     }
@@ -337,10 +339,10 @@ export const IncomingCollaborators = () => {
       startProcessing(incomingCollaborator);
       await declineCollaboratorInvitation(incomingCollaborator.id);
       removeIncomingCollaboratorFromList(incomingCollaborator);
-      showAlert("Invitation declined", "success");
+      showAlert(t("actions.invitation_declined"), "success");
     } catch (error) {
       assertResponseError(error);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     } finally {
       finishProcessing(incomingCollaborator);
     }
@@ -351,10 +353,10 @@ export const IncomingCollaborators = () => {
       startProcessing(incomingCollaborator);
       await removeCollaborator(incomingCollaborator.id);
       removeIncomingCollaboratorFromList(incomingCollaborator);
-      showAlert("Collaborator removed", "success");
+      showAlert(t("actions.collaborator_removed"), "success");
     } catch (error) {
       assertResponseError(error);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     } finally {
       finishProcessing(incomingCollaborator);
     }
diff --git a/app/javascript/components/server-components/CommunitiesPage/ChatMessage.tsx b/app/javascript/components/server-components/CommunitiesPage/ChatMessage.tsx
index bde09ae7f6..53743c025b 100644
--- a/app/javascript/components/server-components/CommunitiesPage/ChatMessage.tsx
+++ b/app/javascript/components/server-components/CommunitiesPage/ChatMessage.tsx
@@ -1,5 +1,6 @@
 import cx from "classnames";
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 import { CommunityChatMessage } from "$app/data/communities";
 import { asyncVoid } from "$app/utils/promise";
@@ -29,6 +30,7 @@ export const ChatMessage = ({
   isLast: boolean;
   communitySellerId: string;
 }) => {
+  const { t } = useTranslation('common');
   const userAgentInfo = useUserAgentInfo();
   const messageRef = React.useRef<HTMLDivElement>(null);
   const { markMessageAsRead, updateMessage, deleteMessage } = React.useContext(CommunityViewContext);
@@ -86,17 +88,17 @@ export const ChatMessage = ({
     setIsSaving(true);
     try {
       if (editedMessage.length < MIN_MESSAGE_LENGTH) {
-        showAlert(`Message must be at least ${MIN_MESSAGE_LENGTH} characters long.`, "error");
+        showAlert(t("errors.message_too_short", { minLength: MIN_MESSAGE_LENGTH }), "error");
         return;
       }
       if (editedMessage.length > MAX_MESSAGE_LENGTH) {
-        showAlert(`Message is too long.`, "error");
+        showAlert(t("errors.message_too_long"), "error");
         return;
       }
       await updateMessage(message.id, message.community_id, editedMessage);
       setIsEditing(false);
     } catch (_e: unknown) {
-      showAlert("Failed to update message.", "error");
+      showAlert(t("errors.failed_update_message"), "error");
     } finally {
       setIsSaving(false);
     }
diff --git a/app/javascript/components/server-components/CommunitiesPage/ChatMessageInput.tsx b/app/javascript/components/server-components/CommunitiesPage/ChatMessageInput.tsx
index e45d234421..3240c491a0 100644
--- a/app/javascript/components/server-components/CommunitiesPage/ChatMessageInput.tsx
+++ b/app/javascript/components/server-components/CommunitiesPage/ChatMessageInput.tsx
@@ -1,5 +1,6 @@
 import cx from "classnames";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
@@ -16,10 +17,11 @@ export const ChatMessageInput = React.forwardRef<
     onHeightChange: (height: number) => void;
   }
 >(({ draft, updateDraftMessage, onSend, onHeightChange }, ref) => {
+  const { t } = useTranslation('common');
   const handleSend = React.useCallback(() => {
     if (!draft?.content || draft.content.length === 0) return;
     if (draft.content.length > MAX_MESSAGE_LENGTH) {
-      showAlert("Message is too long.", "error");
+      showAlert(t("errors.message_too_long"), "error");
       return;
     }
     onSend();
diff --git a/app/javascript/components/server-components/CommunitiesPage/CommunityView.tsx b/app/javascript/components/server-components/CommunitiesPage/CommunityView.tsx
index 47f3131155..0d0082cd65 100644
--- a/app/javascript/components/server-components/CommunitiesPage/CommunityView.tsx
+++ b/app/javascript/components/server-components/CommunitiesPage/CommunityView.tsx
@@ -4,6 +4,7 @@ import debounce from "lodash/debounce";
 import * as React from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { is } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import cable from "$app/channels/consumer";
 import {
@@ -111,6 +112,7 @@ const getComparedTimestamp = (
 };
 
 export const CommunityView = () => {
+  const { t } = useTranslation('common');
   const currentSeller = useCurrentSeller();
   const isAboveBreakpoint = useIsAboveBreakpoint("lg");
   const navigate = useNavigate();
@@ -173,7 +175,7 @@ export const CommunityView = () => {
           })
           .catch((e: unknown) => {
             if (!(e instanceof AbortError))
-              showAlert("Failed to mark the message as read. Please try again later.", "error");
+              showAlert(t("errors.failed_mark_message_read"), "error");
           });
       }, 500),
     [],
@@ -307,7 +309,7 @@ export const CommunityView = () => {
           timestamp: selectedCommunityChat.nextOlderTimestamp,
           fetchType: "older",
         }).catch((e: unknown) => {
-          if (!(e instanceof AbortError)) showAlert("Failed to load older messages. Please try again later.", "error");
+          if (!(e instanceof AbortError)) showAlert(t("errors.failed_load_older_messages"), "error");
         });
       }
     }
@@ -319,7 +321,7 @@ export const CommunityView = () => {
           timestamp: selectedCommunityChat.nextNewerTimestamp,
           fetchType: "newer",
         }).catch((e: unknown) => {
-          if (!(e instanceof AbortError)) showAlert("Failed to load newer messages. Please try again later.", "error");
+          if (!(e instanceof AbortError)) showAlert(t("errors.failed_load_newer_messages"), "error");
         });
       }
     }
@@ -479,7 +481,7 @@ export const CommunityView = () => {
           fetchType: "around",
           timestamp: lastReadMessageCreatedAt ?? new Date(0).toISOString(),
         }).catch((e: unknown) => {
-          if (!(e instanceof AbortError)) showAlert("Failed to load messages. Please try again later.", "error");
+          if (!(e instanceof AbortError)) showAlert(t("errors.failed_load_messages"), "error");
         });
       }
     }
@@ -562,7 +564,7 @@ export const CommunityView = () => {
       settings,
     });
     setNotificationSettings((prev) => ({ ...prev, [community.seller.id]: response.settings }));
-    showAlert("Changes saved!", "success");
+    showAlert(t("actions.changes_saved"), "success");
     setShowNotificationsSettings(false);
     return response;
   };
@@ -576,7 +578,7 @@ export const CommunityView = () => {
     if (selectedCommunity && selectedCommunity.unread_count > 0) {
       fetchMessages(selectedCommunity.id, { fetchType: "older", timestamp: new Date().toISOString() }, true).catch(
         (e: unknown) => {
-          if (!(e instanceof AbortError)) showAlert("Failed to load messages. Please try again later.", "error");
+          if (!(e instanceof AbortError)) showAlert(t("errors.failed_load_messages"), "error");
         },
       );
     } else {
@@ -770,7 +772,7 @@ const NotificationsSettingsModal = ({
               try {
                 await onSave(updatedSettings);
               } catch (_error: unknown) {
-                showAlert("Failed to save changes. Please try again later.", "error");
+                showAlert(t("errors.failed_save_changes"), "error");
               } finally {
                 setIsSaving(false);
               }
diff --git a/app/javascript/components/server-components/DownloadPage/Layout.tsx b/app/javascript/components/server-components/DownloadPage/Layout.tsx
index 9dc59f2dd1..ed7ce7c2fd 100644
--- a/app/javascript/components/server-components/DownloadPage/Layout.tsx
+++ b/app/javascript/components/server-components/DownloadPage/Layout.tsx
@@ -1,5 +1,6 @@
 import { differenceInYears, parseISO } from "date-fns";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { addPurchaseToLibrary } from "$app/data/account";
 import { deletePurchasedProduct } from "$app/data/library";
@@ -76,6 +77,7 @@ export const Layout = ({
   pageList,
   children,
 }: LayoutProps & { headerActions?: React.ReactNode; pageList?: React.ReactNode; children: React.ReactNode }) => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
   const [isResendingReceipt, setIsResendingReceipt] = React.useState(false);
   const isDesktop = useIsAboveBreakpoint("lg");
@@ -98,10 +100,10 @@ export const Layout = ({
         url: Routes.resend_receipt_purchase_path(purchaseId),
         accept: "json",
       });
-      showAlert("Receipt resent", "success");
+      showAlert(t("actions.receipt_resent"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
     setIsResendingReceipt(false);
   });
@@ -342,6 +344,7 @@ const PurchaseDeleteButton = ({
   product_name: string | null;
   small?: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
   const [isDeleting, setIsDeleting] = React.useState(false);
 
@@ -349,11 +352,11 @@ const PurchaseDeleteButton = ({
     setIsDeleting(true);
     try {
       await deletePurchasedProduct({ purchase_id });
-      showAlert("Product deleted!", "success");
+      showAlert(t("actions.product_deleted"), "success");
       window.location.href = Routes.library_path();
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong.", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     }
     setIsDeleting(false);
   });
@@ -392,6 +395,7 @@ type AddToLibraryProps = {
   purchase_email: string;
 };
 const AddToLibrary = ({ add_to_library_option, terms_page_url, purchase_id, purchase_email }: AddToLibraryProps) => {
+  const { t } = useTranslation('common');
   const [password, setPassword] = React.useState("");
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
@@ -402,7 +406,7 @@ const AddToLibrary = ({ add_to_library_option, terms_page_url, purchase_id, purc
       window.location.href = result.redirectLocation;
     } catch (error) {
       assertResponseError(error);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
     setIsSubmitting(false);
   });
diff --git a/app/javascript/components/server-components/EmailsPage/DraftsTab.tsx b/app/javascript/components/server-components/EmailsPage/DraftsTab.tsx
index 85be1db23c..9c92a37585 100644
--- a/app/javascript/components/server-components/EmailsPage/DraftsTab.tsx
+++ b/app/javascript/components/server-components/EmailsPage/DraftsTab.tsx
@@ -2,6 +2,7 @@ import { formatDistanceToNow } from "date-fns";
 import React from "react";
 import { useLoaderData } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   deleteInstallment,
@@ -36,6 +37,7 @@ import { useUserAgentInfo } from "$app/components/UserAgent";
 import draftsPlaceholder from "$assets/images/placeholders/draft_posts.png";
 
 export const DraftsTab = () => {
+  const { t } = useTranslation('common');
   const data = cast<{ installments: DraftInstallment[]; pagination: Pagination } | undefined>(useLoaderData());
   const [installments, setInstallments] = React.useState(data?.installments ?? []);
   const [pagination, setPagination] = React.useState(data?.pagination ?? { count: 0, next: null });
@@ -87,7 +89,7 @@ export const DraftsTab = () => {
       activeFetchRequest.current = null;
       setIsLoading(false);
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   };
 
@@ -101,10 +103,10 @@ export const DraftsTab = () => {
       await deleteInstallment(deletingInstallment.id);
       setInstallments(installments.filter((installment) => installment.external_id !== deletingInstallment.id));
       setDeletingInstallment(null);
-      showAlert("Email deleted!", "success");
+      showAlert(t("actions.email_deleted"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   };
 
diff --git a/app/javascript/components/server-components/EmailsPage/PublishedTab.tsx b/app/javascript/components/server-components/EmailsPage/PublishedTab.tsx
index 2107e934d7..6de9b6320e 100644
--- a/app/javascript/components/server-components/EmailsPage/PublishedTab.tsx
+++ b/app/javascript/components/server-components/EmailsPage/PublishedTab.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useLoaderData } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { deleteInstallment, getPublishedInstallments, Pagination, PublishedInstallment } from "$app/data/installments";
 import { assertDefined } from "$app/utils/assert";
@@ -27,6 +28,7 @@ import { useUserAgentInfo } from "$app/components/UserAgent";
 import publishedPlaceholder from "$assets/images/placeholders/published_posts.png";
 
 export const PublishedTab = () => {
+  const { t } = useTranslation('common');
   const data = cast<{ installments: PublishedInstallment[]; pagination: Pagination } | undefined>(useLoaderData());
   const [installments, setInstallments] = React.useState(data?.installments ?? []);
   const [pagination, setPagination] = React.useState(data?.pagination ?? { count: 0, next: null });
@@ -64,7 +66,7 @@ export const PublishedTab = () => {
       activeFetchRequest.current = null;
       setIsLoading(false);
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   };
   const debouncedFetchInstallments = useDebouncedCallback(
@@ -83,10 +85,10 @@ export const PublishedTab = () => {
       await deleteInstallment(deletingInstallment.id);
       setInstallments(installments.filter((installment) => installment.external_id !== deletingInstallment.id));
       setDeletingInstallment(null);
-      showAlert("Email deleted!", "success");
+      showAlert(t("actions.email_deleted"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   };
 
diff --git a/app/javascript/components/server-components/EmailsPage/ScheduledTab.tsx b/app/javascript/components/server-components/EmailsPage/ScheduledTab.tsx
index 5faa38df01..ca2072a494 100644
--- a/app/javascript/components/server-components/EmailsPage/ScheduledTab.tsx
+++ b/app/javascript/components/server-components/EmailsPage/ScheduledTab.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useLoaderData } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   deleteInstallment,
@@ -35,6 +36,7 @@ import { useUserAgentInfo } from "$app/components/UserAgent";
 import scheduledPlaceholder from "$assets/images/placeholders/scheduled_posts.png";
 
 export const ScheduledTab = () => {
+  const { t } = useTranslation('common');
   const data = cast<{ installments: ScheduledInstallment[]; pagination: Pagination } | undefined>(useLoaderData());
   const [installments, setInstallments] = React.useState(data?.installments ?? []);
   const [pagination, setPagination] = React.useState(data?.pagination ?? { count: 0, next: null });
@@ -102,7 +104,7 @@ export const ScheduledTab = () => {
       activeFetchRequest.current = null;
       setIsLoading(false);
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   };
 
@@ -116,10 +118,10 @@ export const ScheduledTab = () => {
       await deleteInstallment(deletingInstallment.id);
       setInstallments(installments.filter((installment) => installment.external_id !== deletingInstallment.id));
       setDeletingInstallment(null);
-      showAlert("Email deleted!", "success");
+      showAlert(t("actions.email_deleted"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   };
 
diff --git a/app/javascript/components/server-components/EmailsPage/index.tsx b/app/javascript/components/server-components/EmailsPage/index.tsx
index 3f9bdba0c8..20f4228f6b 100644
--- a/app/javascript/components/server-components/EmailsPage/index.tsx
+++ b/app/javascript/components/server-components/EmailsPage/index.tsx
@@ -2,6 +2,7 @@ import cx from "classnames";
 import React from "react";
 import { RouterProvider, createBrowserRouter, RouteObject, Link, json, useLocation } from "react-router-dom";
 import { StaticRouterProvider } from "react-router-dom/server";
+import { useTranslation } from "react-i18next";
 
 import {
   getDraftInstallments,
@@ -123,6 +124,7 @@ export const EditEmailButton = ({ id }: { id: string }) => {
 };
 
 export const ViewEmailButton = (props: { installment: SavedInstallment }) => {
+  const { t } = useTranslation('common');
   const [sendingPreviewEmail, setSendingPreviewEmail] = React.useState(false);
 
   return (
@@ -132,7 +134,7 @@ export const ViewEmailButton = (props: { installment: SavedInstallment }) => {
         setSendingPreviewEmail(true);
         try {
           await previewInstallment(props.installment.external_id);
-          showAlert("A preview has been sent to your email.", "success");
+          showAlert(t("actions.preview_sent_to_email"), "success");
         } catch (error) {
           assertResponseError(error);
           showAlert(error.message, "error");
diff --git a/app/javascript/components/server-components/FollowersPage.tsx b/app/javascript/components/server-components/FollowersPage.tsx
index 443e82697c..6622fbb228 100644
--- a/app/javascript/components/server-components/FollowersPage.tsx
+++ b/app/javascript/components/server-components/FollowersPage.tsx
@@ -1,6 +1,7 @@
 import debounce from "lodash/debounce";
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { deleteFollower, fetchFollowers, Follower } from "$app/data/followers";
 import { register } from "$app/utils/serverComponentUtil";
@@ -62,6 +63,7 @@ const Layout = ({
 type Props = { followers: Follower[]; per_page: number; total: number };
 
 export const FollowersPage = ({ followers: initialFollowers, per_page, total }: Props) => {
+  const { t } = useTranslation('common');
   const userAgentInfo = useUserAgentInfo();
 
   const [loading, setLoading] = React.useState(false);
@@ -87,7 +89,7 @@ export const FollowersPage = ({ followers: initialFollowers, per_page, total }:
       setFollowers(page === 1 ? response.paged_followers : [...followers, ...response.paged_followers]);
       setTotalFilteredCount(response.total_count);
     } catch {
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
     setLoading(false);
   };
@@ -106,9 +108,9 @@ export const FollowersPage = ({ followers: initialFollowers, per_page, total }:
       setTotalFilteredCount(totalFilteredCount - 1);
       setFollowers(followers.filter((follower) => follower.id !== id));
       setSelectedFollowerId(null);
-      showAlert("Follower removed!", "success");
+      showAlert(t("actions.follower_removed"), "success");
     } catch {
-      showAlert("Failed to remove follower.", "error");
+      showAlert(t("errors.failed_remove_follower"), "error");
     }
     setRemoving(false);
   };
diff --git a/app/javascript/components/server-components/FollowersPage/ExportSubscribersPopover.tsx b/app/javascript/components/server-components/FollowersPage/ExportSubscribersPopover.tsx
index e9a54996c7..ab6774da79 100644
--- a/app/javascript/components/server-components/FollowersPage/ExportSubscribersPopover.tsx
+++ b/app/javascript/components/server-components/FollowersPage/ExportSubscribersPopover.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 
 import { sendSubscribersReport } from "$app/data/audience";
 import { assertResponseError } from "$app/utils/request";
@@ -8,6 +9,7 @@ import { LoadingSpinner } from "$app/components/LoadingSpinner";
 import { showAlert } from "$app/components/server-components/Alert";
 
 export const ExportSubscribersPopover = ({ closePopover }: { closePopover: () => void }) => {
+  const { t } = useTranslation('common');
   const [loading, setLoading] = React.useState(false);
   const [followers, setFollowers] = React.useState(true);
   const [customers, setCustomers] = React.useState(false);
@@ -28,7 +30,7 @@ export const ExportSubscribersPopover = ({ closePopover }: { closePopover: () =>
       closePopover();
     } catch (error) {
       assertResponseError(error);
-      showAlert("Something went wrong.", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     }
 
     setLoading(false);
diff --git a/app/javascript/components/server-components/LibraryPage.tsx b/app/javascript/components/server-components/LibraryPage.tsx
index d620ed9cd9..6b56a9745b 100644
--- a/app/javascript/components/server-components/LibraryPage.tsx
+++ b/app/javascript/components/server-components/LibraryPage.tsx
@@ -1,6 +1,7 @@
 import { produce } from "immer";
 import * as React from "react";
 import { createCast, is } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { deletePurchasedProduct, setPurchaseArchived } from "$app/data/library";
 import { ProductNativeType } from "$app/parsers/product";
@@ -59,6 +60,7 @@ export const Card = ({
   onArchive: () => void;
   onDelete: (confirm?: boolean) => void;
 }) => {
+  const { t } = useTranslation('common');
   const { product, purchase } = result;
 
   const toggleArchived = asyncVoid(async () => {
@@ -66,10 +68,10 @@ export const Card = ({
     try {
       await setPurchaseArchived(data);
       onArchive();
-      showAlert(result.purchase.is_archived ? "Product unarchived!" : "Product archived!", "success");
+      showAlert(result.purchase.is_archived ? t("actions.product_unarchived") : t("actions.product_archived"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong.", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     }
   });
 
@@ -125,14 +127,15 @@ export const DeleteProductModal = ({
   onCancel: () => void;
   onDelete: (deleted: Result) => void;
 }) => {
+  const { t } = useTranslation('common');
   const deletePurchase = asyncVoid(async (result: Result) => {
     try {
       await deletePurchasedProduct({ purchase_id: result.purchase.id });
       onDelete(result);
-      showAlert("Product deleted!", "success");
+      showAlert(t("actions.product_deleted"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong.", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     }
   });
 
@@ -230,6 +233,7 @@ const extractParams = (rawParams: URLSearchParams): Params => ({
 });
 
 const LibraryPage = ({ results, creators, bundles, reviews_page_enabled, following_wishlists_enabled }: Props) => {
+  const { t } = useTranslation('common');
   const originalLocation = useOriginalLocation();
   const discoverUrl = useDiscoverUrl();
   const [state, dispatch] = React.useReducer(reducer, null, () => ({
@@ -276,10 +280,10 @@ const LibraryPage = ({ results, creators, bundles, reviews_page_enabled, followi
     try {
       await deletePurchasedProduct({ purchase_id: result.purchase.id });
       dispatch({ type: "delete-purchase", id: result.purchase.id });
-      showAlert("Product deleted!", "success");
+      showAlert(t("actions.product_deleted"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong.", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
     }
   });
 
diff --git a/app/javascript/components/server-components/LoginPage.tsx b/app/javascript/components/server-components/LoginPage.tsx
index 1807ec547a..75708d6f75 100644
--- a/app/javascript/components/server-components/LoginPage.tsx
+++ b/app/javascript/components/server-components/LoginPage.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { createCast } from "ts-safe-cast";
 
 import { login } from "$app/data/login";
@@ -23,6 +24,7 @@ export const LoginPage = ({
   application_name: string | null;
   recaptcha_site_key: string | null;
 }) => {
+  const { t } = useTranslation('authentication');
   const url = new URL(useOriginalLocation());
   const next = url.searchParams.get("next");
   const recaptcha = useRecaptcha({ siteKey: recaptcha_site_key });
@@ -56,9 +58,9 @@ export const LoginPage = ({
       header={
         <>
           <div className="actions">
-            <a href={Routes.signup_path({ next })}>Sign up</a>
+            <a href={Routes.signup_path({ next })}>{t("sign_up")}</a>
           </div>
-          <h1>{application_name ? `Connect ${application_name} to Gumroad` : "Log in"}</h1>
+          <h1>{application_name ? t("connect_app_to_gumroad", { appName: application_name }) : t("log_in")}</h1>
         </>
       }
     >
@@ -68,7 +70,7 @@ export const LoginPage = ({
         <form onSubmit={(e) => void handleSubmit(e)}>
           <SocialAuth />
           <div role="separator">
-            <span>or</span>
+            <span>{t("or")}</span>
           </div>
           <section>
             {saveState.type === "error" ? (
@@ -78,7 +80,7 @@ export const LoginPage = ({
             ) : null}
             <fieldset>
               <legend>
-                <label htmlFor={`${uid}-email`}>Email</label>
+                <label htmlFor={`${uid}-email`}>{t("email")}</label>
               </legend>
               <input
                 id={`${uid}-email`}
@@ -92,9 +94,9 @@ export const LoginPage = ({
             </fieldset>
             <fieldset>
               <legend>
-                <label htmlFor={`${uid}-password`}>Password</label>
+                <label htmlFor={`${uid}-password`}>{t("password")}</label>
                 <button type="button" className="link" onClick={() => setShowForgotPassword(true)}>
-                  Forgot your password?
+                  {t("forgot_password")}
                 </button>
               </legend>
               <input
@@ -107,7 +109,7 @@ export const LoginPage = ({
               />
             </fieldset>
             <Button color="primary" type="submit" disabled={saveState.type === "submitting"}>
-              {saveState.type === "submitting" ? "Logging in..." : "Login"}
+              {saveState.type === "submitting" ? t("logging_in") : t("login")}
             </Button>
           </section>
         </form>
diff --git a/app/javascript/components/server-components/Nav.tsx b/app/javascript/components/server-components/Nav.tsx
index 0b4cbad359..752b88cc02 100644
--- a/app/javascript/components/server-components/Nav.tsx
+++ b/app/javascript/components/server-components/Nav.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { assertResponseError, request, ResponseError } from "$app/utils/request";
 import { register } from "$app/utils/serverComponentUtil";
@@ -19,6 +20,7 @@ type Props = {
 };
 
 const NavLinkDropdownMembershipItem = ({ teamMembership }: { teamMembership: TeamMembership }) => {
+  const { t } = useTranslation('common');
   const onClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
     const currentUrl = new URL(window.location.href);
     // It is difficult to tell if the account to be switched has access to the current page via policies in this context.
@@ -38,7 +40,7 @@ const NavLinkDropdownMembershipItem = ({ teamMembership }: { teamMembership: Tea
       })
       .catch((e: unknown) => {
         assertResponseError(e);
-        showAlert("Something went wrong.", "error");
+        showAlert(t("errors.something_went_wrong"), "error");
       });
   };
 
diff --git a/app/javascript/components/server-components/NewProductPage.tsx b/app/javascript/components/server-components/NewProductPage.tsx
index 25958ebc1d..92ca1e7fe2 100644
--- a/app/javascript/components/server-components/NewProductPage.tsx
+++ b/app/javascript/components/server-components/NewProductPage.tsx
@@ -2,6 +2,7 @@ import cx from "classnames";
 import * as React from "react";
 import { useState } from "react";
 import { cast, createCast, is } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { CreateProductData, RecurringProductType, createProduct } from "$app/data/products";
 import { ProductNativeType, ProductServiceType } from "$app/parsers/product";
@@ -35,6 +36,7 @@ const NewProductPage = ({
   show_orientation_text: boolean;
   eligible_for_service_products: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const formUID = React.useId();
 
   const nameInputRef = React.useRef<HTMLInputElement>(null);
@@ -94,7 +96,7 @@ const NewProductPage = ({
       }
     } catch (e) {
       assertResponseError(e);
-      showAlert("Something went wrong.", "error");
+      showAlert(t("errors.something_went_wrong"), "error");
       setIsSubmitting(false);
     }
   };
diff --git a/app/javascript/components/server-components/ProductEditPage.tsx b/app/javascript/components/server-components/ProductEditPage.tsx
index 360c48367a..2d1ee1befd 100644
--- a/app/javascript/components/server-components/ProductEditPage.tsx
+++ b/app/javascript/components/server-components/ProductEditPage.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { createBrowserRouter, RouteObject, RouterProvider } from "react-router-dom";
 import { StaticRouterProvider } from "react-router-dom/server";
 import { cast, createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { saveProduct } from "$app/data/product_edit";
 import { OtherRefundPolicy } from "$app/data/products/other_refund_policies";
@@ -133,6 +134,7 @@ const findUpdatedContent = (product: Product, lastSavedProduct: Product) => {
 };
 
 const ProductEditPage = (props: Props) => {
+  const { t } = useTranslation('common');
   const [product, setProduct] = React.useState(props.product);
   const [contentUpdates, setContentUpdates] = React.useState<ContentUpdates>(null);
 
@@ -171,7 +173,7 @@ const ProductEditPage = (props: Props) => {
             uniquePermalinkOrVariantIds,
           });
         } else {
-          showAlert("Changes saved!", "success");
+          showAlert(t("actions.changes_saved"), "success");
         }
         lastSavedProductRef.current = structuredClone(product);
       }
diff --git a/app/javascript/components/server-components/Profile/SettingsPage.tsx b/app/javascript/components/server-components/Profile/SettingsPage.tsx
index 9b05b8472a..0c381e1768 100644
--- a/app/javascript/components/server-components/Profile/SettingsPage.tsx
+++ b/app/javascript/components/server-components/Profile/SettingsPage.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { createCast } from "ts-safe-cast";
 
 import { updateProfileSettings as requestUpdateProfileSettings, unlinkTwitter } from "$app/data/profile_settings";
@@ -36,6 +37,7 @@ const FONT_DESCRIPTIONS: Record<string, string> = {
 };
 
 const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...profileProps }: Props) => {
+  const { t } = useTranslation('settings');
   const { rootDomain, scheme } = useDomains();
   const loggedInUser = useLoggedInUser();
   const [creatorProfile, setCreatorProfile] = React.useState(creator_profile);
@@ -53,7 +55,7 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
   const handleSave = asyncVoid(async () => {
     try {
       await requestUpdateProfileSettings(profileSettings);
-      showAlert("Changes saved!", "success");
+      showAlert(t("profile.changes_saved"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
@@ -81,11 +83,11 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
         <form>
           <section>
             <header>
-              <h2>Profile</h2>
+              <h2>{t("profile.title")}</h2>
             </header>
             <fieldset>
               <legend>
-                <label htmlFor={`${uid}-username`}>Username</label>
+                <label htmlFor={`${uid}-username`}>{t("profile.username")}</label>
               </legend>
               <input
                 id={`${uid}-username`}
@@ -97,12 +99,12 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
                 }
               />
               <small>
-                View your profile at: <a href={`${scheme}://${subdomain}`}>{subdomain}</a>
+                {t("profile.view_profile_at")}: <a href={`${scheme}://${subdomain}`}>{subdomain}</a>
               </small>
             </fieldset>
             <fieldset>
               <legend>
-                <label htmlFor={`${uid}-name`}>Name</label>
+                <label htmlFor={`${uid}-name`}>{t("profile.name")}</label>
               </legend>
               <input
                 id={`${uid}-name`}
@@ -117,7 +119,7 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
             </fieldset>
             <fieldset>
               <legend>
-                <label htmlFor={`${uid}-bio`}>Bio</label>
+                <label htmlFor={`${uid}-bio`}>{t("profile.bio")}</label>
               </legend>
               <textarea
                 id={`${uid}-bio`}
@@ -139,10 +141,10 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
             />
             {loggedInUser?.policies.settings_profile.manage_social_connections ? (
               <fieldset>
-                <legend>Social links</legend>
+                <legend>{t("profile.social_links")}</legend>
                 {creatorProfile.twitter_handle ? (
                   <button type="button" className="button button-twitter" onClick={handleUnlinkTwitter}>
-                    Disconnect {creatorProfile.twitter_handle} from X
+                    {t("profile.disconnect_from_x", { handle: creatorProfile.twitter_handle })}
                   </button>
                 ) : (
                   <SocialAuthButton
@@ -152,7 +154,7 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
                       x_auth_access_type: "read",
                     })}
                   >
-                    Connect to X
+                    {t("profile.connect_to_x")}
                   </SocialAuthButton>
                 )}
               </fieldset>
@@ -160,10 +162,10 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
           </section>
           <section>
             <header>
-              <h2>Design</h2>
+              <h2>{t("profile.design")}</h2>
             </header>
             <fieldset>
-              <legend>Font</legend>
+              <legend>{t("profile.font")}</legend>
               <div className="radio-buttons" role="radiogroup">
                 {(["ABC Favorit", "Inter", "Domine", "Merriweather", "Roboto Slab", "Roboto Mono"] as const).map(
                   (font) => (
@@ -188,7 +190,7 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
             <div style={{ display: "flex", gap: "var(--spacer-4)" }}>
               <fieldset>
                 <legend>
-                  <label htmlFor={`${uid}-backgroundColor`}>Background color</label>
+                  <label htmlFor={`${uid}-backgroundColor`}>{t("profile.background_color")}</label>
                 </legend>
                 <div className="color-picker">
                   <input
@@ -202,7 +204,7 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
               </fieldset>
               <fieldset>
                 <legend>
-                  <label htmlFor={`${uid}-highlightColor`}>Highlight color</label>
+                  <label htmlFor={`${uid}-highlightColor`}>{t("profile.highlight_color")}</label>
                 </legend>
                 <div className="color-picker">
                   <input
@@ -220,13 +222,13 @@ const SettingsPage = ({ creator_profile, profile_settings, settings_pages, ...pr
       </SettingsLayout>
       <aside>
         <header>
-          <h2>Preview</h2>
-          <WithTooltip tip="Preview" position="bottom">
+          <h2>{t("profile.preview")}</h2>
+          <WithTooltip tip={t("profile.preview")} position="bottom">
             <a
               className="button"
               href={Routes.root_url({ host: creatorProfile.subdomain })}
               target="_blank"
-              aria-label="Preview"
+              aria-label={t("profile.preview")}
               rel="noreferrer"
             >
               <Icon name="arrow-diagonal-up-right" />
diff --git a/app/javascript/components/server-components/Purchase/DisputeEvidencePage.tsx b/app/javascript/components/server-components/Purchase/DisputeEvidencePage.tsx
index e326840c44..9e00d7640a 100644
--- a/app/javascript/components/server-components/Purchase/DisputeEvidencePage.tsx
+++ b/app/javascript/components/server-components/Purchase/DisputeEvidencePage.tsx
@@ -1,6 +1,7 @@
 import { DirectUpload } from "@rails/activestorage";
 import * as React from "react";
 import { cast, createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   CancellationRebuttalOption,
@@ -60,6 +61,7 @@ type Blob = {
 };
 
 const DisputeEvidencePage = ({ dispute_evidence, disputable, products }: Props) => {
+  const { t } = useTranslation('common');
   const reasonForWinningUID = React.useId();
   const cancellationRebuttalUID = React.useId();
   const refundRefusalExplanationUID = React.useId();
@@ -117,9 +119,9 @@ const DisputeEvidencePage = ({ dispute_evidence, disputable, products }: Props)
     if (!file) return;
 
     if (!FileUtils.isFileNameExtensionAllowed(file.name, ALLOWED_EXTENSIONS))
-      return showAlert("Invalid file type.", "error");
+      return showAlert(t("errors.invalid_file_type"), "error");
     if (file.size > dispute_evidence.customer_communication_file_max_size)
-      return showAlert("The file exceeds the maximum size allowed.", "error");
+      return showAlert(t("errors.file_exceeds_maximum_size"), "error");
 
     setIsUploading(true);
     const upload = new DirectUpload(file, Routes.rails_direct_uploads_path());
diff --git a/app/javascript/components/server-components/Settings/AdvancedPage/index.tsx b/app/javascript/components/server-components/Settings/AdvancedPage/index.tsx
index c3bdf72458..223dd2ac32 100644
--- a/app/javascript/components/server-components/Settings/AdvancedPage/index.tsx
+++ b/app/javascript/components/server-components/Settings/AdvancedPage/index.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cast, createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { SettingPage } from "$app/parsers/settings";
 import { asyncVoid } from "$app/utils/promise";
@@ -33,6 +34,7 @@ type Props = {
 };
 
 const AdvancedPage = (props: Props) => {
+  const { t } = useTranslation('common');
   const [customDomain, setCustomDomain] = React.useState(props.custom_domain_name);
   const [pingEndpoint, setPingEndpoint] = React.useState(props.notification_endpoint);
   const [blockedEmails, setBlockedEmails] = React.useState(props.blocked_customer_emails);
@@ -53,7 +55,7 @@ const AdvancedPage = (props: Props) => {
       });
       const responseData = cast<{ success: true } | { success: false; error_message: string }>(await response.json());
       if (!responseData.success) throw new ResponseError(responseData.error_message);
-      showAlert("Your account has been updated!", "success");
+      showAlert(t("actions.account_updated"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
diff --git a/app/javascript/components/server-components/Settings/AuthorizedApplicationsPage.tsx b/app/javascript/components/server-components/Settings/AuthorizedApplicationsPage.tsx
index f072bb58be..bd14b5b29e 100644
--- a/app/javascript/components/server-components/Settings/AuthorizedApplicationsPage.tsx
+++ b/app/javascript/components/server-components/Settings/AuthorizedApplicationsPage.tsx
@@ -1,6 +1,7 @@
 import { parseISO } from "date-fns";
 import * as React from "react";
 import { createCast, cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { SettingPage } from "$app/parsers/settings";
 import { asyncVoid } from "$app/utils/promise";
@@ -58,6 +59,7 @@ type Props = {
 };
 
 const AuthorizedApplicationsPage = (props: Props) => {
+  const { t } = useTranslation('common');
   const userAgentInfo = useUserAgentInfo();
   const [applications, setApplications] = React.useState(props.authorized_applications);
   const [revokingAccessForApp, setRevokingAccessForApp] = React.useState<{ id: string; revoking?: boolean } | null>(
@@ -82,7 +84,7 @@ const AuthorizedApplicationsPage = (props: Props) => {
       }
     } catch (error) {
       assertResponseError(error);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
     setRevokingAccessForApp(null);
   });
diff --git a/app/javascript/components/server-components/Settings/MainPage.tsx b/app/javascript/components/server-components/Settings/MainPage.tsx
index 7730d2b6e7..ffd7ff767c 100644
--- a/app/javascript/components/server-components/Settings/MainPage.tsx
+++ b/app/javascript/components/server-components/Settings/MainPage.tsx
@@ -1,6 +1,7 @@
 import cx from "classnames";
 import * as React from "react";
 import { cast, createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { SettingPage } from "$app/parsers/settings";
 import { asyncVoid } from "$app/utils/promise";
@@ -58,6 +59,7 @@ type Props = {
 };
 
 const MainPage = (props: Props) => {
+  const { t } = useTranslation('common');
   const uid = React.useId();
   const [formErrors, setFormErrors] = React.useState<Record<"email", boolean>>({
     email: false,
@@ -88,11 +90,11 @@ const MainPage = (props: Props) => {
       });
       const responseData = cast<{ success: boolean }>(await response.json());
       if (!responseData.success) throw new ResponseError();
-      showAlert("Confirmation email resent!", "success");
+      showAlert(t("actions.confirmation_email_resent"), "success");
       setResentConfirmationEmail(true);
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
 
     setIsResendingConfirmationEmail(false);
@@ -102,7 +104,7 @@ const MainPage = (props: Props) => {
     if (props.is_form_disabled) return;
 
     if (userSettings.email === "") {
-      showAlert("Please enter an email address!", "error");
+      showAlert(t("errors.please_enter_email_address"), "error");
       setFormErrors((prev) => ({ ...prev, email: true }));
       emailInputRef.current?.focus();
       return;
@@ -119,13 +121,13 @@ const MainPage = (props: Props) => {
       });
       const responseData = cast<{ success: true } | { success: false; error_message: string }>(await response.json());
       if (responseData.success) {
-        showAlert("Your account has been updated!", "success");
+        showAlert(t("actions.account_updated"), "success");
       } else {
         showAlert(responseData.error_message, "error");
       }
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
 
     setIsSaving(false);
@@ -536,6 +538,7 @@ const MainPage = (props: Props) => {
 };
 
 const InvalidateActiveSessionsSection = () => {
+  const { t } = useTranslation('common');
   const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = React.useState(false);
   const [isInvalidating, setIsInvalidating] = React.useState(false);
 
@@ -548,7 +551,7 @@ const InvalidateActiveSessionsSection = () => {
       location.reload();
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
 
     setIsConfirmationDialogOpen(false);
diff --git a/app/javascript/components/server-components/Settings/PasswordPage.tsx b/app/javascript/components/server-components/Settings/PasswordPage.tsx
index d5e4356097..614ebc6077 100644
--- a/app/javascript/components/server-components/Settings/PasswordPage.tsx
+++ b/app/javascript/components/server-components/Settings/PasswordPage.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { updatePassword } from "$app/data/password";
 import { SettingPage } from "$app/parsers/settings";
@@ -19,6 +20,7 @@ type Props = {
   require_old_password: boolean;
 };
 const PasswordPage = (props: Props) => {
+  const { t } = useTranslation('common');
   const uid = React.useId();
   const [password, setPassword] = React.useState({ old: "", new: "" });
   const [requireOldPassword, setRequireOldPassword] = React.useState(props.require_old_password);
@@ -31,12 +33,12 @@ const PasswordPage = (props: Props) => {
           e.preventDefault();
 
           if (password.new.length < MIN_PASSWORD_LENGTH) {
-            showAlert("Your new password is too short.", "error");
+            showAlert(t("errors.password_too_short"), "error");
             return;
           }
 
           if (password.new.length >= MAX_PASSWORD_LENGTH) {
-            showAlert("Your new password is too long.", "error");
+            showAlert(t("errors.password_too_long"), "error");
             return;
           }
 
@@ -47,7 +49,7 @@ const PasswordPage = (props: Props) => {
             if (result.new_password) setRequireOldPassword(true);
             setPassword({ old: "", new: "" });
 
-            showAlert("You have successfully changed your password.", "success");
+            showAlert(t("actions.password_changed_successfully"), "success");
           } catch (e) {
             assertResponseError(e);
             showAlert(e.message, "error");
diff --git a/app/javascript/components/server-components/Settings/PaymentsPage.tsx b/app/javascript/components/server-components/Settings/PaymentsPage.tsx
index e7efdc0083..466ebf8af8 100644
--- a/app/javascript/components/server-components/Settings/PaymentsPage.tsx
+++ b/app/javascript/components/server-components/Settings/PaymentsPage.tsx
@@ -3,6 +3,7 @@ import cx from "classnames";
 import { CountryCode, parsePhoneNumber } from "libphonenumber-js";
 import * as React from "react";
 import { cast, createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { CardPayoutError, prepareCardTokenForPayouts } from "$app/data/card_payout_data";
 import { SavedCreditCard } from "$app/parsers/card";
@@ -207,6 +208,7 @@ export type ErrorMessageInfo = {
 };
 
 const PaymentsPage = (props: Props) => {
+  const { t } = useTranslation('common');
   const userAgentInfo = useUserAgentInfo();
   const [isSaving, setIsSaving] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState<ErrorMessageInfo | null>(null);
@@ -755,14 +757,14 @@ const PaymentsPage = (props: Props) => {
         { success: true } | { success: false; error_message: string; error_code?: string | null }
       >(await response.json());
       if (parsedResponse.success) {
-        showAlert("Thanks! You're all set.", "success");
+        showAlert(t("actions.thanks_all_set"), "success");
         window.location.reload();
       } else {
         setErrorMessage({ message: parsedResponse.error_message, code: parsedResponse.error_code ?? null });
       }
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
 
     setIsSaving(false);
diff --git a/app/javascript/components/server-components/Settings/TeamPage.tsx b/app/javascript/components/server-components/Settings/TeamPage.tsx
index 52a6c71916..c5f001a579 100644
--- a/app/javascript/components/server-components/Settings/TeamPage.tsx
+++ b/app/javascript/components/server-components/Settings/TeamPage.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cast, createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   ROLES,
@@ -76,6 +77,7 @@ const AddTeamMembersSection = ({
   refreshMemberInfos: () => void;
   options: Option[];
 }) => {
+  const { t } = useTranslation('common');
   const emailUID = React.useId();
   const roleUID = React.useId();
 
@@ -89,7 +91,7 @@ const AddTeamMembersSection = ({
     const result = await createTeamInvitation(teamInvitation);
     if (result.success) {
       refreshMemberInfos();
-      showAlert("Invitation sent!", "success");
+      showAlert(t("actions.invitation_sent"), "success");
       updateTeamInvitation({ email: "", role: null });
     } else showAlert(result.error_message, "error");
     setLoading(false);
@@ -162,6 +164,7 @@ const TeamMembersSection = ({
   memberInfos: MemberInfo[];
   refreshMemberInfos: () => void;
 }) => {
+  const { t } = useTranslation('common');
   const currentSeller = useCurrentSeller();
   const [loading, setLoading] = React.useState(false);
   const [confirming, setConfirming] = React.useState<MemberInfo | null>(null);
@@ -194,7 +197,7 @@ const TeamMembersSection = ({
         case "resend_invitation": {
           await resendInvitation(memberInfo);
           refreshMemberInfos();
-          showAlert("Invitation sent!", "success");
+          showAlert(t("actions.invitation_sent"), "success");
           break;
         }
         default: {
@@ -203,7 +206,10 @@ const TeamMembersSection = ({
             await updateMember(memberInfo, newRole);
             refreshMemberInfos();
             showAlert(
-              `Role for ${memberInfo.name !== "" ? memberInfo.name : memberInfo.email} has changed to ${ROLE_TITLES[newRole]}`,
+              t("actions.role_changed", { 
+                name: memberInfo.name !== "" ? memberInfo.name : memberInfo.email,
+                role: ROLE_TITLES[newRole]
+              }),
               "success",
             );
             break;
@@ -235,7 +241,9 @@ const TeamMembersSection = ({
                 await restoreMember(deletedMember);
                 refreshMemberInfos();
                 showAlert(
-                  `${deletedMember.name !== "" ? deletedMember.name : deletedMember.email} was added back to the team`,
+                  t("actions.member_added_back_to_team", {
+                    name: deletedMember.name !== "" ? deletedMember.name : deletedMember.email
+                  }),
                   "success",
                 );
                 setDeletedMember(null);
diff --git a/app/javascript/components/server-components/Settings/ThirdPartyAnalyticsPage.tsx b/app/javascript/components/server-components/Settings/ThirdPartyAnalyticsPage.tsx
index 0c65c329c0..4c083be2b0 100644
--- a/app/javascript/components/server-components/Settings/ThirdPartyAnalyticsPage.tsx
+++ b/app/javascript/components/server-components/Settings/ThirdPartyAnalyticsPage.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   saveThirdPartyAnalytics,
@@ -27,6 +28,7 @@ type Props = {
 };
 
 const ThirdPartyAnalyticsPage = ({ settings_pages, third_party_analytics, products }: Props) => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
   const [thirdPartyAnalytics, setThirdPartyAnalytics] = React.useState(third_party_analytics);
   const updateThirdPartyAnalytics = (update: Partial<ThirdPartyAnalytics>) =>
@@ -62,7 +64,7 @@ const ThirdPartyAnalyticsPage = ({ settings_pages, third_party_analytics, produc
             id: snippet.id && !snippet.id.startsWith(NEW_SNIPPET_ID_PREFIX) ? snippet.id : null,
           })),
         });
-        if (result.success) showAlert("Changes saved!", "success");
+        if (result.success) showAlert(t("actions.changes_saved"), "success");
         else showAlert(result.error_message, "error");
       })}
       canUpdate={loggedInUser?.policies.settings_third_party_analytics_user.update || false}
diff --git a/app/javascript/components/server-components/SubscriptionManager.tsx b/app/javascript/components/server-components/SubscriptionManager.tsx
index 352168ef63..cc7a5ebfb0 100644
--- a/app/javascript/components/server-components/SubscriptionManager.tsx
+++ b/app/javascript/components/server-components/SubscriptionManager.tsx
@@ -1,6 +1,7 @@
 import { parseISO } from "date-fns";
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { confirmLineItem } from "$app/data/purchase";
 import { cancelSubscriptionByUser, updateSubscription } from "$app/data/subscription";
@@ -106,6 +107,7 @@ const SubscriptionManager = ({
   ca_provinces,
   used_card,
 }: Props) => {
+  const { t } = useTranslation('common');
   const url = new URL(useOriginalLocation());
 
   const subscriptionEntity = subscription.is_installment_plan ? "installment plan" : "membership";
@@ -306,7 +308,7 @@ const SubscriptionManager = ({
     } catch (e) {
       assertResponseError(e);
       setCancellationStatus("initial");
-      showAlert("Sorry, something went wrong.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   });
 
diff --git a/app/javascript/components/server-components/TwoFactorAuthenticationPage.tsx b/app/javascript/components/server-components/TwoFactorAuthenticationPage.tsx
index f1cb1f08f8..7cb3274d72 100644
--- a/app/javascript/components/server-components/TwoFactorAuthenticationPage.tsx
+++ b/app/javascript/components/server-components/TwoFactorAuthenticationPage.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { resendTwoFactorToken, twoFactorLogin } from "$app/data/login";
 import { assertResponseError } from "$app/utils/request";
@@ -21,6 +22,7 @@ export const TwoFactorAuthenticationPage = ({
   email: string;
   token: string | null;
 }) => {
+  const { t } = useTranslation('common');
   const next = new URL(useOriginalLocation()).searchParams.get("next");
   const uid = React.useId();
   const [token, setToken] = React.useState(initialToken ?? "");
@@ -42,7 +44,7 @@ export const TwoFactorAuthenticationPage = ({
     setSaveState({ type: "submitting" });
     try {
       await resendTwoFactorToken(user_id);
-      showAlert("Resent the authentication token, please check your inbox.", "success");
+      showAlert(t("actions.resent_auth_token_check_inbox"), "success");
     } catch (e) {
       assertResponseError(e);
       showAlert(e.message, "error");
diff --git a/app/javascript/components/server-components/UtmLinksPage/UtmLinkForm.tsx b/app/javascript/components/server-components/UtmLinksPage/UtmLinkForm.tsx
index c1b34a0fb9..a0c105cbe5 100644
--- a/app/javascript/components/server-components/UtmLinksPage/UtmLinkForm.tsx
+++ b/app/javascript/components/server-components/UtmLinksPage/UtmLinkForm.tsx
@@ -2,6 +2,7 @@ import cx from "classnames";
 import * as React from "react";
 import { Link, useLoaderData, useNavigate } from "react-router-dom";
 import { cast, is } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   createUtmLink,
@@ -41,6 +42,7 @@ type ErrorInfo = { attrName: FieldAttrName; message: string };
 const duplicatedTitle = (title?: string) => (title ? `${title} (copy)` : "");
 
 export const UtmLinkForm = () => {
+  const { t } = useTranslation('common');
   const { context, utm_link } = cast<{ context: UtmLinkFormContext; utm_link: UtmLink | null }>(useLoaderData());
   const isEditing = utm_link?.id !== undefined;
   const isDuplicating = utm_link !== null && utm_link.id === undefined;
@@ -121,7 +123,7 @@ export const UtmLinkForm = () => {
       const { permalink } = await getUniquePermalink();
       setShortUrl((shortUrl) => ({ ...shortUrl, permalink }));
     } catch {
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     } finally {
       setIsLoadingNewPermalink(false);
     }
@@ -203,10 +205,10 @@ export const UtmLinkForm = () => {
         await createUtmLink(requestPayload);
       }
 
-      showAlert(isEditing ? "Link updated!" : "Link created!", "success");
+      showAlert(isEditing ? t("actions.link_updated") : t("actions.link_created"), "success");
       navigate("/dashboard/utm_links");
     } catch (error) {
-      const genericMessage = "Sorry, something went wrong. Please try again.";
+      const genericMessage = t("errors.sorry_something_went_wrong");
       if (error instanceof ResponseError) {
         try {
           const { error: message, attr_name } = cast<{ error: string; attr_name: string | null }>(
diff --git a/app/javascript/components/server-components/UtmLinksPage/UtmLinkList.tsx b/app/javascript/components/server-components/UtmLinksPage/UtmLinkList.tsx
index ebf6b0af7b..3868b7ee2b 100644
--- a/app/javascript/components/server-components/UtmLinksPage/UtmLinkList.tsx
+++ b/app/javascript/components/server-components/UtmLinksPage/UtmLinkList.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import { Link, useLoaderData, useNavigate, useNavigation, useRevalidator, useSearchParams } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   deleteUtmLink,
@@ -55,6 +56,7 @@ const utmLinkWithStats = (utmLink: SavedUtmLink, stats?: UtmLinkStats) => {
 };
 
 const UtmLinkList = () => {
+  const { t } = useTranslation('common');
   const navigation = useNavigation();
   const navigate = useNavigate();
   const revalidator = useRevalidator();
@@ -281,10 +283,10 @@ const UtmLinkList = () => {
                           setDeletingUtmLink({ ...deletingUtmLink, state: "deleting" });
                           await deleteUtmLink(deletingUtmLink.id);
                           revalidator.revalidate();
-                          showAlert("Link deleted!", "success");
+                          showAlert(t("actions.link_deleted"), "success");
                         } catch (e) {
                           assertResponseError(e);
-                          showAlert("Failed to delete link. Please try again.", "error");
+                          showAlert(t("errors.failed_delete_link_try_again"), "error");
                         } finally {
                           setDeletingUtmLink(null);
                           setSelectedUtmLink(null);
diff --git a/app/javascript/components/server-components/WishlistsFollowingPage.tsx b/app/javascript/components/server-components/WishlistsFollowingPage.tsx
index 7d5b4afead..fc89652e34 100644
--- a/app/javascript/components/server-components/WishlistsFollowingPage.tsx
+++ b/app/javascript/components/server-components/WishlistsFollowingPage.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { unfollowWishlist } from "$app/data/wishlists";
 import { assertResponseError } from "$app/utils/request";
@@ -31,16 +32,17 @@ const WishlistsFollowingPage = ({
   wishlists: Wishlist[];
   reviews_page_enabled: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const [wishlists, setWishlists] = React.useState<Wishlist[]>(preloadedWishlists);
 
   const destroy = async (wishlist: Wishlist) => {
     setWishlists(wishlists.filter(({ id }) => id !== wishlist.id));
     try {
       await unfollowWishlist({ wishlistId: wishlist.id });
-      showAlert(`You are no longer following ${wishlist.name}.`, "success");
+      showAlert(t("actions.no_longer_following", { name: wishlist.name }), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   };
 
diff --git a/app/javascript/components/server-components/WishlistsPage.tsx b/app/javascript/components/server-components/WishlistsPage.tsx
index 59ec7a1a02..fb1dd040fc 100644
--- a/app/javascript/components/server-components/WishlistsPage.tsx
+++ b/app/javascript/components/server-components/WishlistsPage.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createCast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { deleteWishlist, updateWishlist } from "$app/data/wishlists";
 import { assertResponseError } from "$app/utils/request";
@@ -33,6 +34,7 @@ const WishlistsPage = ({
   reviews_page_enabled: boolean;
   following_wishlists_enabled: boolean;
 }) => {
+  const { t } = useTranslation('common');
   const [wishlists, setWishlists] = React.useState<Wishlist[]>(preloadedWishlists);
   const [deletingWishlist, setConfirmingDeleteWishlist] = React.useState<Wishlist | null>(null);
   const [isDeleting, setIsDeleting] = React.useState(false);
@@ -44,10 +46,10 @@ const WishlistsPage = ({
       await deleteWishlist({ wishlistId: id });
       setWishlists(wishlists.filter((wishlist) => wishlist.id !== id));
       setConfirmingDeleteWishlist(null);
-      showAlert("Wishlist deleted!", "success");
+      showAlert(t("actions.wishlist_deleted"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     } finally {
       setIsDeleting(false);
     }
@@ -59,10 +61,10 @@ const WishlistsPage = ({
         wishlists.map((wishlist) => (wishlist.id === id ? { ...wishlist, discover_opted_out: optOut } : wishlist)),
       );
       await updateWishlist({ id, discover_opted_out: optOut });
-      showAlert(optOut ? "Opted out of Gumroad Discover." : "Wishlist is now discoverable!", "success");
+      showAlert(optOut ? t("actions.opted_out_discover") : t("actions.wishlist_discoverable"), "success");
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     }
   };
 
diff --git a/app/javascript/components/server-components/WorkflowsPage/WorkflowEmails.tsx b/app/javascript/components/server-components/WorkflowsPage/WorkflowEmails.tsx
index a968d73ae8..9b522cf861 100644
--- a/app/javascript/components/server-components/WorkflowsPage/WorkflowEmails.tsx
+++ b/app/javascript/components/server-components/WorkflowsPage/WorkflowEmails.tsx
@@ -6,6 +6,7 @@ import cx from "classnames";
 import * as React from "react";
 import { Link, useLoaderData, useRevalidator } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   WorkflowFormContext,
@@ -92,6 +93,7 @@ const AbandonedCartProductsProvider = AbandonedCartProductsContext.Provider;
 const useAbandonedCartProducts = () => assertDefined(React.useContext(AbandonedCartProductsContext));
 
 const WorkflowEmails = () => {
+  const { t } = useTranslation('common');
   const { context, workflow } = cast<{ context: WorkflowFormContext; workflow: Workflow }>(useLoaderData());
   const loaderDataRevalidator = useRevalidator();
   const [sendToPastCustomers, setSendToPastCustomers] = React.useState(workflow.send_to_past_customers);
@@ -247,14 +249,14 @@ const WorkflowEmails = () => {
         const response = await saveWorkflowInstallments(workflow.external_id, payload);
         if (response.success) {
           if (sendPreviewForEmailId) {
-            showAlert("A preview has been sent to your email.", "success");
+            showAlert(t("actions.preview_sent_to_email"), "success");
           } else {
             showAlert(
               saveActionName === "save_and_publish"
-                ? "Workflow published!"
+                ? t("actions.workflow_published")
                 : saveActionName === "save_and_unpublish"
-                  ? "Unpublished!"
-                  : "Changes saved!",
+                  ? t("actions.unpublished")
+                  : t("actions.changes_saved"),
               "success",
             );
           }
@@ -276,7 +278,7 @@ const WorkflowEmails = () => {
         }
       } catch (e) {
         assertResponseError(e);
-        showAlert("Sorry, something went wrong. Please try again.", "error");
+        showAlert(t("errors.sorry_something_went_wrong"), "error");
       } finally {
         setIsSaving(false);
       }
diff --git a/app/javascript/components/server-components/WorkflowsPage/WorkflowForm.tsx b/app/javascript/components/server-components/WorkflowsPage/WorkflowForm.tsx
index 1a86a5d61e..18def81038 100644
--- a/app/javascript/components/server-components/WorkflowsPage/WorkflowForm.tsx
+++ b/app/javascript/components/server-components/WorkflowsPage/WorkflowForm.tsx
@@ -2,6 +2,7 @@ import cx from "classnames";
 import * as React from "react";
 import { Link, useLoaderData, useNavigate, useRevalidator } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import {
   WorkflowFormContext,
@@ -86,6 +87,7 @@ type WorkflowFormState = {
   fromCountry: string;
 };
 const WorkflowForm = () => {
+  const { t } = useTranslation('common');
   const navigate = useNavigate();
   const { context, workflow } = cast<{ context: WorkflowFormContext; workflow?: Workflow }>(useLoaderData());
   const loaderDataRevalidator = useRevalidator();
@@ -258,10 +260,10 @@ const WorkflowForm = () => {
       const response = await (workflow ? updateWorkflow(workflow.external_id, payload) : createWorkflow(payload));
       if (response.success) {
         if (saveActionName === "save") {
-          showAlert("Changes saved!", "success");
+          showAlert(t("actions.changes_saved"), "success");
           navigate(`/workflows/${response.workflow_id}/emails`);
         } else {
-          showAlert(saveActionName === "save_and_publish" ? "Workflow published!" : "Unpublished!", "success");
+          showAlert(saveActionName === "save_and_publish" ? t("actions.workflow_published") : t("actions.unpublished"), "success");
           loaderDataRevalidator.revalidate();
         }
       } else {
@@ -269,7 +271,7 @@ const WorkflowForm = () => {
       }
     } catch (e) {
       assertResponseError(e);
-      showAlert("Sorry, something went wrong. Please try again.", "error");
+      showAlert(t("errors.sorry_something_went_wrong"), "error");
     } finally {
       setIsSaving(false);
     }
diff --git a/app/javascript/components/server-components/WorkflowsPage/WorkflowList.tsx b/app/javascript/components/server-components/WorkflowsPage/WorkflowList.tsx
index 8565a5f16d..a6fc33f2a9 100644
--- a/app/javascript/components/server-components/WorkflowsPage/WorkflowList.tsx
+++ b/app/javascript/components/server-components/WorkflowsPage/WorkflowList.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Link, useLoaderData } from "react-router-dom";
 import { cast } from "ts-safe-cast";
+import { useTranslation } from "react-i18next";
 
 import { Workflow, deleteWorkflow } from "$app/data/workflows";
 import { formatStatNumber } from "$app/utils/formatStatNumber";
@@ -17,6 +18,7 @@ import { Layout } from "$app/components/server-components/WorkflowsPage";
 import placeholder from "$assets/images/placeholders/workflows.png";
 
 const WorkflowList = () => {
+  const { t } = useTranslation('common');
   const loggedInUser = useLoggedInUser();
   const { workflows: initialWorkflows } = cast<{ workflows: Workflow[] }>(useLoaderData());
   const [workflows, setWorkflows] = React.useState(initialWorkflows);
@@ -70,10 +72,10 @@ const WorkflowList = () => {
                           await deleteWorkflow(deletingWorkflow.id);
                           setWorkflows(workflows.filter((workflow) => workflow.external_id !== deletingWorkflow.id));
                           setDeletingWorkflow(null);
-                          showAlert("Workflow deleted!", "success");
+                          showAlert(t("actions.workflow_deleted"), "success");
                         } catch (e) {
                           assertResponseError(e);
-                          showAlert("Sorry, something went wrong. Please try again.", "error");
+                          showAlert(t("errors.sorry_something_went_wrong"), "error");
                         }
                       })}
                     >
diff --git a/app/javascript/i18n.ts b/app/javascript/i18n.ts
new file mode 100644
index 0000000000..36715c2ddc
--- /dev/null
+++ b/app/javascript/i18n.ts
@@ -0,0 +1,39 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import productEn from './locales/en/product.json';
+import commonEn from './locales/en/common.json';
+import checkoutEn from './locales/en/checkout.json';
+import authenticationEn from './locales/en/authentication.json';
+import settingsEn from './locales/en/settings.json';
+import dashboardEn from './locales/en/dashboard.json';
+
+const resources = {
+  en: {
+    product: productEn,
+    common: commonEn,
+    checkout: checkoutEn,
+    authentication: authenticationEn,
+    settings: settingsEn,
+    dashboard: dashboardEn,
+  },
+};
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    debug: process.env.NODE_ENV === 'development',
+    
+    interpolation: {
+      escapeValue: false,
+    },
+    
+    react: {
+      useSuspense: false, // Important for SSR
+    },
+  });
+
+export default i18n;
diff --git a/app/javascript/locales/en/authentication.json b/app/javascript/locales/en/authentication.json
new file mode 100644
index 0000000000..bafd34a7e5
--- /dev/null
+++ b/app/javascript/locales/en/authentication.json
@@ -0,0 +1,19 @@
+{
+  "sign_up": "Sign up",
+  "log_in": "Log in",
+  "login": "Login",
+  "logging_in": "Logging in...",
+  "email": "Email",
+  "password": "Password",
+  "forgot_password": "Forgot your password?",
+  "or": "or",
+  "connect_app_to_gumroad": "Connect {{appName}} to Gumroad",
+  "forgot_password_form": {
+    "password_reset_sent": "Password reset sent! Please make sure to check your spam folder.",
+    "email_label": "Email to send reset instructions to",
+    "sending": "Sending...",
+    "send": "Send",
+    "cancel": "Cancel",
+    "or": "or"
+  }
+}
diff --git a/app/javascript/locales/en/checkout.json b/app/javascript/locales/en/checkout.json
new file mode 100644
index 0000000000..bb291ad38c
--- /dev/null
+++ b/app/javascript/locales/en/checkout.json
@@ -0,0 +1,46 @@
+{
+  "form": {
+    "country": "Country",
+    "state": "State",
+    "province": "Province", 
+    "county": "County",
+    "zip_code": "ZIP code",
+    "postal": "Postal",
+    "email_address": "Email address",
+    "your_email_address": "Your email address",
+    "contact_information": "Contact information",
+    "shipping_information": "Shipping information",
+    "keep_on_file": "Keep on file",
+    "full_name": "Full name",
+    "street_address": "Street address",
+    "city": "City"
+  },
+  "email": {
+    "did_you_mean": "Did you mean {{suggestion}}?",
+    "yes": "Yes",
+    "no": "No"
+  },
+  "address_verification": {
+    "you_entered": "You entered this address:",
+    "we_recommend": "We recommend using this format:",
+    "no_continue": "No, continue",
+    "use_suggested": "Use suggested"
+  },
+  "gift": {
+    "give_as_gift": "Give as a gift?",
+    "recipient_email": "Recipient email",
+    "recipient_email_address": "Recipient email address",
+    "message": "Message",
+    "personalized_message": "A personalized message (optional)",
+    "email_hidden": "{{name}}'s email has been hidden for privacy purposes.",
+    "cancel_gift_option": "Cancel gift option",
+    "reset_gift_option": "Reset gift option?",
+    "no_cancel": "No, cancel",
+    "yes_reset": "Yes, reset",
+    "switch_off_gift": "You are about to switch off the gift option. To gift this wishlist again, you will need to return to the wishlist page and select \"Gift this product\".",
+    "membership_note": "Note: Free trials will be charged immediately. The membership will not auto-renew. The recipient must update the payment method to renew the membership."
+  },
+  "errors": {
+    "something_went_wrong": "Sorry, something went wrong. You were not charged."
+  }
+}
diff --git a/app/javascript/locales/en/common.json b/app/javascript/locales/en/common.json
new file mode 100644
index 0000000000..dffd1bd88d
--- /dev/null
+++ b/app/javascript/locales/en/common.json
@@ -0,0 +1,194 @@
+{
+  "navigation": {
+    "all_products": "All products",
+    "affiliated": "Affiliated",
+    "collabs": "Collabs", 
+    "archived": "Archived",
+    "products": "Products",
+    "discover": "Discover",
+    "about": "About",
+    "features": "Features",
+    "pricing": "Pricing",
+    "dashboard": "Dashboard",
+    "log_in": "Log in",
+    "start_selling": "Start selling"
+  },
+  "actions": {
+    "product_archived": "Product archived!",
+    "product_unarchived": "Product unarchived!",
+    "archive_from_library": "Archive from library",
+    "unarchive_from_library": "Unarchive from library",
+    "following": "Following",
+    "unfollow": "Unfollow",
+    "follow_wishlist": "Follow wishlist",
+    "now_following": "You are now following {{name}}!",
+    "no_longer_following": "You are no longer following {{name}}.",
+    "join_discord": "Join Discord",
+    "leave_discord": "Leave Discord",
+    "discord_joined": "You've been added to the Discord server #{{serverName}}!",
+    "discord_left": "You've left the Discord server #{{serverName}}.",
+    "comment_posted": "Successfully posted your comment",
+    "comment_deleted": "Successfully deleted the comment",
+    "comment_updated": "Successfully updated the comment",
+    "edit": "Edit",
+    "delete": "Delete",
+    "update": "Update",
+    "updating": "Updating...",
+    "reply": "Reply",
+    "changes_saved": "Changes saved!",
+    "published": "Published!",
+    "unpublished": "Unpublished!",
+    "wishlist_deleted": "Wishlist deleted!",
+    "opted_out_discover": "Opted out of Gumroad Discover.",
+    "wishlist_discoverable": "Wishlist is now discoverable!",
+    "collaborator_removed_successfully": "The collaborator was removed successfully.",
+    "approved": "Approved",
+    "affiliate_removed_successfully": "The affiliate was removed successfully.",
+    "review_submitted_successfully": "Review submitted successfully!",
+    "response_posted_successfully": "Response posted successfully!",
+    "link_copied": "Link copied!",
+    "recording_max_length_reached": "Your recording has reached its maximum length and has been stopped.",
+    "check_inbox_follow_request": "Check your inbox to confirm your follow request.",
+    "content_update_queued": "Queued an update to the content of all outdated purchases.",
+    "link_deleted": "Link deleted!",
+    "workflow_deleted": "Workflow deleted!",
+    "email_sent": "Email sent!",
+    "product_created": "Product created!",
+    "dispute_evidence_submitted": "Dispute evidence submitted successfully!",
+    "upsell_saved": "Upsell saved!",
+    "discount_saved": "Discount saved!",
+    "form_saved": "Form saved!",
+    "subscription_cancelled": "Subscription cancelled!",
+    "message_sent": "Message sent!",
+    "community_joined": "You've joined the community!",
+    "two_factor_enabled": "Two-factor authentication enabled!",
+    "two_factor_disabled": "Two-factor authentication disabled!",
+    "backup_codes_regenerated": "Backup codes regenerated!",
+    "export_started": "Export started! You'll receive an email when it's ready.",
+    "purchases_transferred": "Purchases transferred successfully!",
+    "receipt_resent": "Receipt resent successfully!",
+    "account_suspended": "Account suspended for fraud.",
+    "email_changed": "Email changed successfully!",
+    "account_flagged": "Account flagged for fraud.",
+    "payout_processed": "Payout processed successfully!",
+    "workflow_saved": "Workflow saved!",
+    "email_saved": "Email saved!",
+    "email_scheduled": "Email scheduled!",
+    "email_deleted": "Email deleted!",
+    "customer_deleted": "Customer deleted!",
+    "application_revoked": "Application access revoked!",
+    "settings_saved": "Settings saved!",
+    "password_updated": "Password updated!",
+    "payment_method_updated": "Payment method updated!",
+    "follower_removed": "Follower removed!",
+    "comment_added": "Comment added successfully!",
+    "balance_updated": "Balance updated!",
+    "wishlist_saved": "Wishlist saved!",
+    "subtitle_uploaded": "Subtitle uploaded successfully!",
+    "profile_updated": "Profile updated!",
+    "tier_saved": "Tier saved!",
+    "thumbnail_updated": "Thumbnail updated!",
+    "description_saved": "Description saved!",
+    "circle_integration_saved": "Circle integration saved!",
+    "bundle_saved": "Bundle saved!",
+    "calendar_integration_saved": "Calendar integration saved!",
+    "content_saved": "Content saved!",
+    "cover_updated": "Cover updated!",
+    "discord_integration_saved": "Discord integration saved!",
+    "affiliate_signup_successful": "Affiliate signup successful!",
+    "stripe_connected": "Stripe connected successfully!",
+    "paypal_connected": "PayPal connected successfully!",
+    "endpoint_saved": "Endpoint saved!",
+    "application_saved": "Application saved!",
+    "file_uploaded": "File uploaded successfully!"
+  },
+  "errors": {
+    "something_went_wrong": "Something went wrong.",
+    "something_went_wrong_refresh": "Something went wrong. Please try refreshing the page.",
+    "sorry_something_went_wrong": "Sorry, something went wrong. Please try again.",
+    "invalid_file_type": "Invalid file type.",
+    "must_input_amount": "You must input an amount",
+    "must_select_date_time_call": "You must select a date and time for the call",
+    "price_minimum_lower_than_maximum": "Please set the price minimum to be lower than the maximum.",
+    "discord_join_failed": "Could not join the Discord server, please try again.",
+    "discord_leave_failed": "Could not leave the Discord server.",
+    "loading_comments_failed": "An error occurred while loading more comments",
+    "deleting_comment_failed": "An error occurred while deleting the comment",
+    "posting_comment_failed": "An error occurred while posting your comment - {{error}}",
+    "updating_comment_failed": "An error occurred while updating the comment - {{error}}",
+    "files_still_uploading": "Some files are still uploading, please wait...",
+    "images_still_uploading": "Some images are still uploading, please wait...",
+    "must_publish_before_share": "Not yet! You've got to publish your awesome product before you can share it with your audience and the world.",
+    "failed_remove_collaborator": "Failed to remove the collaborator.",
+    "at_least_one_product_selected": "At least one product must be selected",
+    "collaborator_cut_max_50_percent": "Collaborator cut must be 50% or less",
+    "error_approving_affiliate_requests": "Error approving affiliate requests",
+    "failed_remove_affiliate": "Failed to remove the affiliate.",
+    "please_enable_at_least_one_product": "Please enable at least one product.",
+    "failed_delete_link": "Failed to delete link. Please try again.",
+    "failed_send_email": "Failed to send email. Please try again.",
+    "failed_create_product": "Failed to create product. Please try again.",
+    "failed_save_upsell": "Failed to save upsell. Please try again.",
+    "failed_save_discount": "Failed to save discount. Please try again.",
+    "failed_save_form": "Failed to save form. Please try again.",
+    "failed_cancel_subscription": "Failed to cancel subscription. Please try again.",
+    "failed_send_message": "Failed to send message. Please try again.",
+    "failed_join_community": "Failed to join community. Please try again.",
+    "failed_enable_two_factor": "Failed to enable two-factor authentication. Please try again.",
+    "failed_disable_two_factor": "Failed to disable two-factor authentication. Please try again.",
+    "failed_regenerate_backup_codes": "Failed to regenerate backup codes. Please try again.",
+    "failed_start_export": "Failed to start export. Please try again.",
+    "failed_transfer_purchases": "Failed to transfer purchases. Please try again.",
+    "failed_resend_receipt": "Failed to resend receipt. Please try again.",
+    "failed_suspend_account": "Failed to suspend account. Please try again.",
+    "failed_change_email": "Failed to change email. Please try again.",
+    "failed_flag_account": "Failed to flag account. Please try again.",
+    "failed_process_payout": "Failed to process payout. Please try again.",
+    "failed_save_workflow": "Failed to save workflow. Please try again.",
+    "failed_save_email": "Failed to save email. Please try again.",
+    "failed_schedule_email": "Failed to schedule email. Please try again.",
+    "failed_delete_email": "Failed to delete email. Please try again.",
+    "failed_delete_customer": "Failed to delete customer. Please try again.",
+    "failed_revoke_application": "Failed to revoke application access. Please try again.",
+    "failed_save_settings": "Failed to save settings. Please try again.",
+    "failed_update_password": "Failed to update password. Please try again.",
+    "failed_update_payment_method": "Failed to update payment method. Please try again.",
+    "failed_remove_follower": "Failed to remove follower. Please try again.",
+    "failed_add_comment": "Failed to add comment. Please try again.",
+    "failed_update_balance": "Failed to update balance. Please try again.",
+    "failed_save_wishlist": "Failed to save wishlist. Please try again.",
+    "failed_upload_subtitle": "Failed to upload subtitle. Please try again.",
+    "failed_update_profile": "Failed to update profile. Please try again.",
+    "failed_save_tier": "Failed to save tier. Please try again.",
+    "failed_update_thumbnail": "Failed to update thumbnail. Please try again.",
+    "failed_save_description": "Failed to save description. Please try again.",
+    "failed_save_circle_integration": "Failed to save Circle integration. Please try again.",
+    "failed_save_bundle": "Failed to save bundle. Please try again.",
+    "failed_save_calendar_integration": "Failed to save calendar integration. Please try again.",
+    "failed_save_content": "Failed to save content. Please try again.",
+    "failed_update_cover": "Failed to update cover. Please try again.",
+    "failed_save_discord_integration": "Failed to save Discord integration. Please try again.",
+    "failed_affiliate_signup": "Failed to sign up as affiliate. Please try again.",
+    "failed_connect_stripe": "Failed to connect Stripe. Please try again.",
+    "failed_connect_paypal": "Failed to connect PayPal. Please try again.",
+    "failed_save_endpoint": "Failed to save endpoint. Please try again.",
+    "failed_save_application": "Failed to save application. Please try again.",
+    "failed_upload_file": "Failed to upload file. Please try again."
+  },
+  "comments": {
+    "comment_singular": "comment",
+    "comment_plural": "comments",
+    "to_join_conversation": "to join the conversation",
+    "write_comment_placeholder": "Write a comment"
+  },
+  "authentication": {
+    "log_in": "Log in",
+    "register": "Register",
+    "or": "or"
+  },
+  "wishlists": {
+    "title": "Wishlists",
+    "wishlist_singular": "wishlist",
+    "wishlist_plural": "wishlists"
+  }
+}
diff --git a/app/javascript/locales/en/dashboard.json b/app/javascript/locales/en/dashboard.json
new file mode 100644
index 0000000000..f671480117
--- /dev/null
+++ b/app/javascript/locales/en/dashboard.json
@@ -0,0 +1,22 @@
+{
+  "actions": {
+    "duplicating_notification": "Duplicating the product. You will be notified once it's ready.",
+    "product_duplicated": "{{name}} is duplicated",
+    "product_deleted": "Product deleted!",
+    "product_archived": "Product was archived successfully",
+    "product_unarchived": "Product was unarchived successfully",
+    "open_product_menu": "Open product action menu",
+    "duplicate": "Duplicate",
+    "duplicating": "Duplicating...",
+    "archive": "Archive",
+    "archiving": "Archiving...",
+    "unarchive": "Unarchive",
+    "unarchiving": "Unarchiving...",
+    "delete_permanently": "Delete permanently",
+    "deleting": "Deleting...",
+    "delete_product": "Delete Product",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "confirm_delete_product": "Are you sure you want to delete {{name}}?"
+  }
+}
diff --git a/app/javascript/locales/en/product.json b/app/javascript/locales/en/product.json
new file mode 100644
index 0000000000..6ec897dbd5
--- /dev/null
+++ b/app/javascript/locales/en/product.json
@@ -0,0 +1,17 @@
+{
+  "cta": {
+    "purchase_again": "Purchase again",
+    "subscribe": "Subscribe", 
+    "rent": "Rent",
+    "i_want_this": "I want this!",
+    "pay_in_installments": "Pay in {{count}} installments"
+  },
+  "button_text": {
+    "i_want_this_prompt": "I want this!",
+    "buy_this_prompt": "Buy this",
+    "pay_prompt": "Pay",
+    "donate_prompt": "Donate",
+    "support_prompt": "Support",
+    "tip_prompt": "Tip"
+  }
+}
diff --git a/app/javascript/locales/en/settings.json b/app/javascript/locales/en/settings.json
new file mode 100644
index 0000000000..f5c714cece
--- /dev/null
+++ b/app/javascript/locales/en/settings.json
@@ -0,0 +1,24 @@
+{
+  "payments": {
+    "paypal_fee_note": "PayPal payouts are subject to a 2% processing fee.",
+    "switch_to_direct_deposit": "Switch to direct deposit",
+    "paypal_email": "PayPal Email",
+    "cannot_change_to_paypal": "You cannot change your payout method to PayPal because you have a stripe account connected."
+  },
+  "profile": {
+    "changes_saved": "Changes saved!",
+    "title": "Profile",
+    "username": "Username",
+    "view_profile_at": "View your profile at",
+    "name": "Name",
+    "bio": "Bio",
+    "social_links": "Social links",
+    "disconnect_from_x": "Disconnect {{handle}} from X",
+    "connect_to_x": "Connect to X",
+    "design": "Design",
+    "font": "Font",
+    "background_color": "Background color",
+    "highlight_color": "Highlight color",
+    "preview": "Preview"
+  }
+}
diff --git a/app/javascript/utils/base_page.ts b/app/javascript/utils/base_page.ts
index 5a0d60d0b7..c1774d5955 100644
--- a/app/javascript/utils/base_page.ts
+++ b/app/javascript/utils/base_page.ts
@@ -3,6 +3,7 @@ import { cast } from "ts-safe-cast";
 
 import { startTrackingForGumroad } from "$app/data/google_analytics";
 import { defaults as requestDefaults } from "$app/utils/request";
+import "$app/i18n";
 
 import Alert from "$app/components/server-components/Alert";
 import Nav from "$app/components/server-components/Nav";
diff --git a/config/application.rb b/config/application.rb
index ddebc2c1f6..053d5b5700 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -95,5 +95,19 @@ class Application < Rails::Application
 
     config.flipper.strict = false
     config.flipper.test_help = false
+
+    # I18n configuration
+    config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}')]
+    config.i18n.available_locales = [:en]
+    config.i18n.default_locale = :en
+    config.i18n.fallbacks = [I18n.default_locale]
+    config.i18n.exception_handler = lambda do |exception, locale, key, options|
+      if exception.is_a?(I18n::MissingTranslation)
+        Rails.logger.warn "Missing translation: #{key} for locale #{locale}"
+        "translation missing: #{locale}.#{key}"
+      else
+        raise exception
+      end
+    end
   end
 end
diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb
index 6131125df3..c57cbf8fdd 100644
--- a/config/initializers/react_on_rails.rb
+++ b/config/initializers/react_on_rails.rb
@@ -24,7 +24,9 @@ def custom_context(view_context)
       logged_in_user: logged_in_user_props(pundit_user, is_impersonating: view_context.controller.impersonating?),
       current_seller: current_seller_props(pundit_user),
       csp_nonce: SecureHeaders.content_security_policy_script_nonce(view_context.request),
-      locale: view_context.controller.http_accept_language.user_preferred_languages[0] || "en-US"
+      locale: I18n.locale.to_s,
+      available_locales: I18n.available_locales.map(&:to_s),
+      user_preferred_locale: view_context.controller.http_accept_language.user_preferred_languages[0] || "en-US"
     }
   end
 
diff --git a/i18next-scanner.config.js b/i18next-scanner.config.js
new file mode 100644
index 0000000000..5ce9e1423e
--- /dev/null
+++ b/i18next-scanner.config.js
@@ -0,0 +1,42 @@
+export default {
+  input: [
+    'app/javascript/**/*.{js,jsx,ts,tsx}',
+    '!app/javascript/**/*.spec.{js,jsx,ts,tsx}',
+    '!app/javascript/**/*.test.{js,jsx,ts,tsx}',
+    '!**/node_modules/**'
+  ],
+  output: './',
+  options: {
+    debug: true,
+    func: {
+      list: ['i18next.t', 'i18n.t', 't'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+    },
+    trans: {
+      component: 'Trans',
+      i18nKey: 'i18nKey',
+      defaultsKey: 'defaults',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      fallbackKey: function(ns, value) {
+        return value;
+      }
+    },
+    lngs: ['en'],
+    ns: ['common', 'product', 'checkout', 'dashboard', 'authentication'],
+    defaultLng: 'en',
+    defaultNs: 'common',
+    defaultValue: '__STRING_NOT_TRANSLATED__',
+    resource: {
+      loadPath: 'app/javascript/locales/{{lng}}/{{ns}}.json',
+      savePath: 'app/javascript/locales/{{lng}}/{{ns}}.json',
+      jsonIndent: 2,
+      lineEnding: '\n'
+    },
+    nsSeparator: false,
+    keySeparator: false,
+    interpolation: {
+      prefix: '{{',
+      suffix: '}}'
+    }
+  }
+};
diff --git a/package-lock.json b/package-lock.json
index b1584b0d71..bb2f1cd030 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "date-fns": "^3.0.0",
         "date-fns-tz": "^3.0.0",
         "fast-average-color": "^9.4.0",
+        "i18next": "^23.7.0",
         "immer": "^10.0.0",
         "jquery": "^3.6.3",
         "js-yaml": "^4.1.0",
@@ -48,6 +49,7 @@
         "react": "^18.1.0",
         "react-calendar": "^5.0.0",
         "react-dom": "^18.1.0",
+        "react-i18next": "^13.5.0",
         "react-media-recorder": "^1.7.1",
         "react-on-rails": "^14.0.0",
         "react-router-dom": "^6.11.1",
@@ -87,6 +89,7 @@
         "eslint-plugin-react": "^7.31.11",
         "fork-ts-checker-webpack-plugin": "^9.0.0",
         "globals": "^15.8.0",
+        "i18next-scanner": "^4.4.0",
         "lint-staged": "^15.0.0",
         "mini-css-extract-plugin": "^2.7.2",
         "patch-package": "^8.0.0",
@@ -2176,6 +2179,19 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "license": "MIT"
     },
+    "node_modules/@gulpjs/to-absolute-glob": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@gulpjs/to-absolute-glob/-/to-absolute-glob-4.0.0.tgz",
+      "integrity": "sha512-kjotm7XJrJ6v+7knhPaRgaT6q8F8K2jiafwYdNHLzmV0uGLuZY43FK6smNSHUPrhq5kX2slCUy+RGG/xGqmIKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-negated-glob": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
@@ -4077,6 +4093,22 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-class-fields": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/acorn-class-fields/-/acorn-class-fields-0.3.7.tgz",
+      "integrity": "sha512-jdUWSFce0fuADUljmExz4TWpPkxmRW/ZCPRqeeUzbGf0vFUcpQYbyq52l75qGd0oSwwtAepeL6hgb/naRgvcKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn-private-class-elements": "^0.2.7"
+      },
+      "engines": {
+        "node": ">=4.8.2"
+      },
+      "peerDependencies": {
+        "acorn": "^6 || ^7 || ^8"
+      }
+    },
     "node_modules/acorn-import-attributes": {
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
@@ -4097,6 +4129,69 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-private-class-elements": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/acorn-private-class-elements/-/acorn-private-class-elements-0.2.7.tgz",
+      "integrity": "sha512-+GZH2wOKNZOBI4OOPmzpo4cs6mW297sn6fgIk1dUI08jGjhAaEwvC39mN2gJAg2lmAQJ1rBkFqKWonL3Zz6PVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.8.2"
+      },
+      "peerDependencies": {
+        "acorn": "^6.1.0 || ^7 || ^8"
+      }
+    },
+    "node_modules/acorn-private-methods": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/acorn-private-methods/-/acorn-private-methods-0.3.3.tgz",
+      "integrity": "sha512-46oeEol3YFvLSah5m9hGMlNpxDBCEkdceJgf01AjqKYTK9r6HexKs2rgSbLK81pYjZZMonhftuUReGMlbbv05w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn-private-class-elements": "^0.2.7"
+      },
+      "engines": {
+        "node": ">=4.8.2"
+      },
+      "peerDependencies": {
+        "acorn": "^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/acorn-stage3": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-stage3/-/acorn-stage3-4.0.0.tgz",
+      "integrity": "sha512-BR+LaADtA6GTB5prkNqWmlmCLYmkyW0whvSxdHhbupTaro2qBJ95fJDEiRLPUmiACGHPaYyeH9xmNJWdGfXRQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn-class-fields": "^0.3.7",
+        "acorn-private-methods": "^0.3.3",
+        "acorn-static-class-features": "^0.2.4"
+      },
+      "engines": {
+        "node": ">=4.8.2"
+      },
+      "peerDependencies": {
+        "acorn": "^7.4 || ^8"
+      }
+    },
+    "node_modules/acorn-static-class-features": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/acorn-static-class-features/-/acorn-static-class-features-0.2.4.tgz",
+      "integrity": "sha512-5X4mpYq5J3pdndLmIB0+WtFd/mKWnNYpuTlTzj32wUu/PMmEGOiayQ5UrqgwdBNiaZBtDDh5kddpP7Yg2QaQYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn-private-class-elements": "^0.2.7"
+      },
+      "engines": {
+        "node": ">=4.8.2"
+      },
+      "peerDependencies": {
+        "acorn": "^6.1.0 || ^7 || ^8"
+      }
+    },
     "node_modules/acorn-walk": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
@@ -4557,6 +4652,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
+      "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -4604,6 +4706,35 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/bare-events": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.4.tgz",
+      "integrity": "sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -4634,6 +4765,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bl": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
+      "integrity": "sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -4802,6 +4945,31 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -5067,6 +5235,16 @@
         "tiny-emitter": "^2.0.0"
       }
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -6205,6 +6383,13 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/ensure-type": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/ensure-type/-/ensure-type-1.5.1.tgz",
+      "integrity": "sha512-Dxe+mVF4MupV6eueWiFa6hUd9OL9lIM2/LqR40k1P+dwG+G2il2UigXTU9aQlaw+Y/N0BKSaTofNw73htTbC5g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -6266,6 +6451,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/eol": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/eol/-/eol-0.9.1.tgz",
+      "integrity": "sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -6866,6 +7058,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/esprima-next": {
+      "version": "5.8.4",
+      "resolved": "https://registry.npmjs.org/esprima-next/-/esprima-next-5.8.4.tgz",
+      "integrity": "sha512-8nYVZ4ioIH4Msjb/XmhnBdz5WRRBaYqevKa1cv9nGJdCehMbzZCPNEEnqfLCZVetUVrUPEcb5IYyu1GG4hFqgg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -7105,6 +7311,13 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -7514,6 +7727,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/fs-mkdirp-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-2.0.1.tgz",
+      "integrity": "sha512-UTOY+59K6IA94tec8Wjqm0FSh5OVudGNB0NL/P6fB3HiE3bYOY3VYBGijsnOHNkQSwC1FKkU77pmq7xp9CskLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.8",
+        "streamx": "^2.12.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/fs-monkey": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz",
@@ -7789,6 +8016,26 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-stream": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-8.0.2.tgz",
+      "integrity": "sha512-R8z6eTB55t3QeZMmU1C+Gv+t5UnNRkA55c5yo67fAVfxODxieTwsjNG7utxS/73NdP1NbDgCrhVEg2h00y4fFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@gulpjs/to-absolute-glob": "^4.0.0",
+        "anymatch": "^3.1.3",
+        "fastq": "^1.13.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "is-negated-glob": "^1.0.0",
+        "normalize-path": "^3.0.0",
+        "streamx": "^2.12.5"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -7862,6 +8109,67 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/gulp-sort": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-sort/-/gulp-sort-2.0.0.tgz",
+      "integrity": "sha512-MyTel3FXOdh1qhw1yKhpimQrAmur9q1X0ZigLmCOxouQD+BD3za9/89O+HfbgBQvvh4igEbp0/PUWO+VqGYG1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "through2": "^2.0.1"
+      }
+    },
+    "node_modules/gulp-sort/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gulp-sort/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/gulp-sort/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gulp-sort/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/gulp-sort/node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -8075,6 +8383,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -8187,6 +8504,73 @@
         "node": ">=10.18"
       }
     },
+    "node_modules/i18next": {
+      "version": "23.16.8",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.8.tgz",
+      "integrity": "sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-scanner": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/i18next-scanner/-/i18next-scanner-4.6.0.tgz",
+      "integrity": "sha512-I/xKcwKfii3L3is3bUvfaIU0QA/wYhpZnjppfrzyb61QQddxkcpspASEtmfnxSYvE6yIaAxDlIxg0EHV7mxssg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.0.4",
+        "acorn-jsx": "^5.3.1",
+        "acorn-stage3": "^4.0.0",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "clone-deep": "^4.0.0",
+        "commander": "^9.0.0",
+        "deepmerge": "^4.0.0",
+        "ensure-type": "^1.5.0",
+        "eol": "^0.9.1",
+        "esprima-next": "^5.7.0",
+        "gulp-sort": "^2.0.0",
+        "i18next": "*",
+        "lodash": "^4.0.0",
+        "parse5": "^6.0.0",
+        "sortobject": "^4.0.0",
+        "through2": "^4.0.0",
+        "vinyl": "^3.0.0",
+        "vinyl-fs": "^4.0.0"
+      },
+      "bin": {
+        "i18next-scanner": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/i18next-scanner/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8213,6 +8597,27 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -8616,6 +9021,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -8801,6 +9216,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-valid-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
+      "integrity": "sha512-AhiROmoEFDSsjx8hW+5sGwgKVIORcXnrlAx/R0ZSeaPw70Vw0CqkGBBhHGL58Uox2eXnU1AnvXJl1XlyedO5bA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -9143,6 +9568,16 @@
         "shell-quote": "^1.8.1"
       }
     },
+    "node_modules/lead": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lead/-/lead-4.0.0.tgz",
+      "integrity": "sha512-DpMa59o5uGUWWjruMp71e6knmwKU3jRBBn1kjuLWN9EeIOxNeSAwvHf03WIl8g/ZMR2oSQC9ej3yeLBwdDc/pg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -10036,6 +10471,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/now-and-later": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-3.0.0.tgz",
+      "integrity": "sha512-pGO4pzSdaxhWTGkfSfHx3hVzJVslFPwBp2Myq9MYN/ChfJZF87ochMAXnvz6/58RJSf5ik2q9tXprBBrk2cpcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
@@ -10445,6 +10893,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -12267,6 +12722,28 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.5.0.tgz",
+      "integrity": "sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12596,6 +13073,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/replace-ext": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz",
+      "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -12662,6 +13156,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-options": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-options/-/resolve-options-2.0.0.tgz",
+      "integrity": "sha512-/FopbmmFOQCfsCx77BRFdKOniglTiHumLgwvd6IDPihy1GKkadZbgQJBcTb2lMzSR1pndzd96b1nZrreZ7+9/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "value-or-function": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
     "node_modules/resolve-pkg-maps": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
@@ -13440,6 +13947,19 @@
       "integrity": "sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg==",
       "license": "MIT"
     },
+    "node_modules/sortobject": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/sortobject/-/sortobject-4.17.0.tgz",
+      "integrity": "sha512-gzx7USv55AFRQ7UCWJHHauwD/ptUHF9MLXCGO3f5M9zauDPZ/4a9H6/VVbOXefdpEoI1unwB/bArHIVMbWBHmA==",
+      "dev": true,
+      "license": "Artistic-2.0",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://bevry.me/fund"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -13546,6 +14066,30 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stream-composer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/stream-composer/-/stream-composer-1.0.2.tgz",
+      "integrity": "sha512-bnBselmwfX5K10AH6L4c8+S5lgZMWI7ZYrz2rvYjCPB2DIMC4Ig8OpxGpNJSxRZ58oti7y1IcNvjBAz9vW5m4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "streamx": "^2.13.2"
+      }
+    },
+    "node_modules/streamx": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.0.tgz",
+      "integrity": "sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-fifo": "^1.3.2",
+        "text-decoder": "^1.1.0"
+      },
+      "optionalDependencies": {
+        "bare-events": "^2.2.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -14084,6 +14628,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/teex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/teex/-/teex-1.0.1.tgz",
+      "integrity": "sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "streamx": "^2.12.5"
+      }
+    },
     "node_modules/terser": {
       "version": "5.34.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.34.1.tgz",
@@ -14164,6 +14718,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/text-decoder": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
+      "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "b4a": "^1.6.4"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -14213,6 +14777,16 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
       "license": "MIT"
     },
+    "node_modules/through2": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "3"
+      }
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -14276,6 +14850,19 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/to-through": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/to-through/-/to-through-3.0.0.tgz",
+      "integrity": "sha512-y8MN937s/HVhEoBU1SxfHC+wxCHkV1a9gW8eAdTadYh/bGyesZIVcbjI+mSpFbSVwQici/XjBjuUyri1dnXwBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "streamx": "^2.12.5"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -14670,6 +15257,16 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/value-or-function": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-4.0.0.tgz",
+      "integrity": "sha512-aeVK81SIuT6aMJfNo9Vte8Dw0/FZINGBV8BfCraGtqVxIeLAEhJyoWs8SmvRVmXfGss2PmmOwZCuBPbZR+IYWg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -14702,6 +15299,109 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/vinyl": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-3.0.1.tgz",
+      "integrity": "sha512-0QwqXteBNXgnLCdWdvPQBX6FXRHtIH3VhJPTd5Lwn28tJXc34YqSCWUmkOvtJHBmB3gGoPtrOKk3Ts8/kEZ9aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^2.1.2",
+        "remove-trailing-separator": "^1.1.0",
+        "replace-ext": "^2.0.0",
+        "teex": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/vinyl-contents": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vinyl-contents/-/vinyl-contents-2.0.0.tgz",
+      "integrity": "sha512-cHq6NnGyi2pZ7xwdHSW1v4Jfnho4TEGtxZHw01cmnc8+i7jgR6bRnED/LbrKan/Q7CvVLbnvA5OepnhbpjBZ5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^5.0.0",
+        "vinyl": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/vinyl-fs": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-4.0.0.tgz",
+      "integrity": "sha512-7GbgBnYfaquMk3Qu9g22x000vbYkOex32930rBnc3qByw6HfMEAoELjCjoJv4HuEQxHAurT+nvMHm6MnJllFLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fs-mkdirp-stream": "^2.0.1",
+        "glob-stream": "^8.0.0",
+        "graceful-fs": "^4.2.11",
+        "iconv-lite": "^0.6.3",
+        "is-valid-glob": "^1.0.0",
+        "lead": "^4.0.0",
+        "normalize-path": "3.0.0",
+        "resolve-options": "^2.0.0",
+        "stream-composer": "^1.0.2",
+        "streamx": "^2.14.0",
+        "to-through": "^3.0.0",
+        "value-or-function": "^4.0.0",
+        "vinyl": "^3.0.0",
+        "vinyl-sourcemap": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/vinyl-fs/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vinyl-sourcemap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-2.0.0.tgz",
+      "integrity": "sha512-BAEvWxbBUXvlNoFQVFVHpybBbjW1r03WhohJzJDSfgrrK5xVYIDTan6xN14DlyImShgDRv2gl9qhM6irVMsV0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "convert-source-map": "^2.0.0",
+        "graceful-fs": "^4.2.10",
+        "now-and-later": "^3.0.0",
+        "streamx": "^2.12.5",
+        "vinyl": "^3.0.0",
+        "vinyl-contents": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/vinyl-sourcemap/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
@@ -15531,6 +16231,16 @@
         }
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index e5a383d3d6..8e67aac5b3 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "@anycable/web": "^1.1.0",
     "@paypal/paypal-js": "^8.0.0",
     "@rails/activestorage": "^7.1.3",
+    "i18next": "^23.7.0",
+    "react-i18next": "^13.5.0",
     "@stripe/connect-js": "^3.3.21",
     "@stripe/react-connect-js": "^3.3.20",
     "@stripe/react-stripe-js": "^2.0.0",
@@ -63,6 +65,7 @@
   "devDependencies": {
     "@eslint/compat": "^1.1.1",
     "@eslint/js": "^9.6.0",
+    "i18next-scanner": "^4.4.0",
     "@types/braintree-web": "^3.75.22",
     "@types/facebook-js-sdk": "^3.3.6",
     "@types/facebook-pixel": "^0.0.31",