diff --git a/apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/programs/new/form.tsx b/apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/programs/new/form.tsx
index cbfbbb6ca5a..f8c4d1c48e2 100644
--- a/apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/programs/new/form.tsx
+++ b/apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/programs/new/form.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { onboardProgramAction } from "@/lib/actions/partners/onboard-program";
 import { getLinkStructureOptions } from "@/lib/partners/get-link-structure-options";
@@ -27,6 +29,8 @@ import { toast } from "sonner";
 import useSWRImmutable from "swr/immutable";
 
 export function Form() {
+const t = useTranslations("program-creation-form");
+
   const router = useRouter();
   const { isMobile } = useMediaQuery();
   const [isUploading, setIsUploading] = useState(false);
@@ -127,27 +131,19 @@ export function Form() {
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-10">
       <div>
-        <label className="block text-sm font-medium text-neutral-800">
-          Company name
-        </label>
-        <p className="mb-4 mt-1 text-sm text-neutral-600">
-          The name of the company you're setting up the program for
-        </p>
+        <label className="block text-sm font-medium text-neutral-800">{t('labels.company-name')}</label>
+        <p className="mb-4 mt-1 text-sm text-neutral-600">{t('descriptions.company-name')}</p>
         <Input
           {...register("name", { required: true })}
-          placeholder="Acme"
+          placeholder={t('placeholders.company-name')}
           autoFocus={!isMobile}
           className="mt-2 max-w-full"
         />
       </div>
 
       <div>
-        <label className="block text-sm font-medium text-neutral-800">
-          Logo
-        </label>
-        <p className="mb-4 mt-1 text-sm text-neutral-600">
-          A square logo that will be used in various parts of your program
-        </p>
+        <label className="block text-sm font-medium text-neutral-800">{t('labels.logo')}</label>
+        <p className="mb-4 mt-1 text-sm text-neutral-600">{t('descriptions.logo')}</p>
         <div className="flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 p-1">
           <Controller
             control={control}
@@ -174,24 +170,18 @@ export function Form() {
 
       <div className="space-y-6">
         <div className="space-y-1">
-          <h2 className="text-base font-medium text-neutral-900">
-            Referral link
-          </h2>
-          <p className="text-sm font-normal text-neutral-600">
-            Set the custom domain and destination URL for your referral links
-          </p>
+          <h2 className="text-base font-medium text-neutral-900">{t('headings.referral-link')}</h2>
+          <p className="text-sm font-normal text-neutral-600">{t('descriptions.referral-link-setup')}</p>
         </div>
 
         <div className="space-y-2">
           <div className="flex items-center gap-x-2">
-            <label className="block text-sm font-medium text-neutral-800">
-              Custom domain
-            </label>
+            <label className="block text-sm font-medium text-neutral-800">{t('labels.custom-domain')}</label>
 
             <InfoTooltip
               content={
                 <SimpleTooltipContent
-                  title="A connected domain or sub-domain is required to create a program."
+                  title={t('tooltips.domain-requirement')}
                   cta="Learn more"
                   href="https://dub.co/help/article/choosing-a-custom-domain"
                 />
@@ -204,9 +194,7 @@ export function Form() {
             setSelectedDomain={(domain) => setValue("domain", domain)}
           />
 
-          <p className="text-xs font-normal text-neutral-500">
-            Custom domain that will be used for your program's referral links
-          </p>
+          <p className="text-xs font-normal text-neutral-500">{t('descriptions.custom-domain')}</p>
         </div>
 
         <AnimatePresence>
@@ -227,19 +215,14 @@ export function Form() {
         </AnimatePresence>
 
         <div className="space-y-2">
-          <label className="block text-sm font-medium text-neutral-800">
-            Destination URL
-          </label>
+          <label className="block text-sm font-medium text-neutral-800">{t('labels.destination-url')}</label>
           <Input
             {...register("url", { required: true })}
             type="url"
-            placeholder="https://dub.co"
+            placeholder={t('placeholders.destination-url')}
             className="max-w-full"
           />
-          <p className="text-xs font-normal text-neutral-500">
-            Where people will be redirected to when they click on your program's
-            referral links
-          </p>
+          <p className="text-xs font-normal text-neutral-500">{t('descriptions.destination-url')}</p>
         </div>
       </div>
 
@@ -253,9 +236,7 @@ export function Form() {
             transition={{ duration: 0.2 }}
             className="space-y-2"
           >
-            <h2 className="text-base font-medium text-neutral-900">
-              Referral link preview
-            </h2>
+            <h2 className="text-base font-medium text-neutral-900">{t('headings.referral-link-preview')}</h2>
 
             <div className="rounded-2xl bg-neutral-50 p-2">
               <div className="flex items-center gap-3 rounded-xl border border-neutral-200 bg-white p-4">
@@ -301,7 +282,7 @@ export function Form() {
       </AnimatePresence>
 
       <Button
-        text="Continue"
+        text={t('buttons.continue')}
         className="w-full"
         loading={isSubmitting || isPending || hasSubmitted}
         disabled={buttonDisabled}
diff --git a/apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/apply/form.tsx b/apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/apply/form.tsx
index c952e61c7be..f2a4d49d048 100644
--- a/apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/apply/form.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/apply/form.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { createProgramApplicationAction } from "@/lib/actions/partners/create-program-application";
 import { Program } from "@dub/prisma/client";
@@ -30,6 +32,8 @@ export function ProgramApplicationForm({
     "id" | "slug" | "name" | "termsUrl" | "ageVerification"
   >;
 }) {
+const t = useTranslations("partner-application-form");
+
   const { isMobile } = useMediaQuery();
   const router = useRouter();
   const { data: session } = useSession();
@@ -96,7 +100,7 @@ export function ProgramApplicationForm({
       className="flex flex-col gap-6"
     >
       <label>
-        <span className="text-sm font-medium text-neutral-800">Name</span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.name')}</span>
         <input
           type="text"
           className={cn(
@@ -105,7 +109,7 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="Acme, Inc."
+          placeholder={t('placeholders.company-name')}
           autoFocus={!isMobile}
           {...register("name", {
             required: true,
@@ -114,7 +118,7 @@ export function ProgramApplicationForm({
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">Email</span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.email')}</span>
         <input
           type="email"
           className={cn(
@@ -123,7 +127,7 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="panic@thedis.co"
+          placeholder={t('placeholders.email-address')}
           {...register("email", {
             required: true,
           })}
@@ -131,9 +135,7 @@ export function ProgramApplicationForm({
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">
-          Website / Social media channel
-        </span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.website-social-channel')}</span>
         <input
           type="text"
           className={cn(
@@ -142,7 +144,7 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="https://example.com"
+          placeholder={t('placeholders.website-url')}
           {...register("website", {
             required: true,
           })}
@@ -150,9 +152,7 @@ export function ProgramApplicationForm({
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">
-          How do you plan to promote {program.name}?
-        </span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.promotion-plan', { "programName": program.name })}</span>
         <ReactTextareaAutosize
           className={cn(
             "mt-2 block max-h-48 min-h-12 w-full rounded-md focus:outline-none sm:text-sm",
@@ -167,9 +167,9 @@ export function ProgramApplicationForm({
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">
-          Any additional questions or comments?
-          <span className="font-normal text-neutral-500"> (optional)</span>
+        <span className="text-sm font-medium text-neutral-800">{t.rich('labels.additional-comments', {
+      component0: (chunks) => <span className="font-normal text-neutral-500">{chunks}</span>
+    })}
         </span>
         <ReactTextareaAutosize
           className={cn(
@@ -197,9 +197,7 @@ export function ProgramApplicationForm({
               required: true,
             })}
           />
-          <label htmlFor="ageVerification" className="text-sm text-neutral-800">
-            I'm {program.ageVerification} years or older
-          </label>
+          <label htmlFor="ageVerification" className="text-sm text-neutral-800">{t('checkboxes.age-verification', { "programAgeVerification": program.ageVerification })}</label>
         </div>
       )}
 
@@ -214,22 +212,23 @@ export function ProgramApplicationForm({
             )}
             {...register("termsAgreement", { required: true })}
           />
-          <label htmlFor="termsAgreement" className="text-sm text-neutral-800">
-            I agree to the{" "}
-            <a
+          <label htmlFor="termsAgreement" className="text-sm text-neutral-800">{t.rich('checkboxes.terms-agreement', {
+      programName,
+      component0: (chunks) => <a
               href={program.termsUrl}
               target="_blank"
               rel="noopener noreferrer"
               className="text-[var(--brand)] underline hover:opacity-80"
             >
-              {program.name} Partner Program Terms ↗
-            </a>
+              </a>
+    })}
+            
           </label>
         </div>
       )}
 
       <Button
-        text="Submit application"
+        text={t('buttons.submit-application')}
         className="mt-4 enabled:border-[var(--brand)] enabled:bg-[var(--brand)] enabled:hover:bg-[var(--brand)] enabled:hover:ring-[var(--brand-ring)]"
         loading={isLoading}
       />
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-composite-chart.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-composite-chart.tsx
index bf793616c24..72c590005cf 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-composite-chart.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-composite-chart.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { DUB_PARTNERS_ANALYTICS_INTERVAL } from "@/lib/analytics/constants";
 import { formatDateTooltip } from "@/lib/analytics/format-date-tooltip";
@@ -43,6 +45,8 @@ const EVENT_TYPE_LINE_COLORS = {
 const MAX_LINES = LINE_COLORS.length;
 
 export function EarningsCompositeChart() {
+const t = useTranslations("earnings-composite-chart");
+
   const { queryParams, searchParamsObj } = useRouterStuff();
 
   const {
@@ -108,7 +112,7 @@ export function EarningsCompositeChart() {
       <div className="rounded-lg border border-neutral-200 p-6">
         <div className="flex w-full items-center justify-between">
           <div className="flex flex-col gap-1">
-            <span className="text-sm text-neutral-500">Total Earnings</span>
+            <span className="text-sm text-neutral-500">{t('labels.total-earnings')}</span>
             <div className="mt-1">
               {total !== undefined ? (
                 <NumberFlow
@@ -136,7 +140,7 @@ export function EarningsCompositeChart() {
                 label: (
                   <div className="flex items-center gap-1.5 text-neutral-600">
                     <Hyperlink className="size-4" />
-                    <span className="text-sm">Link</span>
+                    <span className="text-sm">{t('toggle-options.link')}</span>
                   </div>
                 ),
                 value: "linkId",
@@ -145,7 +149,7 @@ export function EarningsCompositeChart() {
                 label: (
                   <div className="flex items-center gap-1.5 text-neutral-600">
                     <Sliders className="size-4" />
-                    <span className="text-sm">Type</span>
+                    <span className="text-sm">{t('toggle-options.type')}</span>
                   </div>
                 ),
                 value: "type",
diff --git a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
index 098a92a6a86..feaa889c947 100644
--- a/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { onboardPartnerAction } from "@/lib/actions/partners/onboard-partner";
 import { onboardPartnerSchema } from "@/lib/zod/schemas/partners";
@@ -41,6 +43,8 @@ export function OnboardingForm({
     >
   > | null;
 }) {
+const t = useTranslations("partner-onboarding-form");
+
   const router = useRouter();
   const { isMobile } = useMediaQuery();
   const [accountCreated, setAccountCreated] = useState(false);
@@ -102,7 +106,7 @@ export function OnboardingForm({
       className="flex w-full flex-col gap-4 text-left"
     >
       <label>
-        <span className="text-sm font-medium text-neutral-800">Full Name</span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.full-name')}</span>
         <input
           type="text"
           className={cn(
@@ -119,9 +123,7 @@ export function OnboardingForm({
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">
-          Profile Image
-        </span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.profile-image')}</span>
         <div className="flex items-center gap-5">
           <Controller
             control={control}
@@ -152,18 +154,14 @@ export function OnboardingForm({
                 buttonVariants({ variant: "secondary" }),
                 "flex h-7 w-fit cursor-pointer items-center rounded-md border px-2 text-xs",
               )}
-            >
-              Upload image
-            </div>
-            <p className="mt-1.5 text-xs text-neutral-500">
-              Recommended size: 160x160px
-            </p>
+            >{t('buttons.upload-image')}</div>
+            <p className="mt-1.5 text-xs text-neutral-500">{t('descriptions.recommended-image-size')}</p>
           </div>
         </div>
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">Country</span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.country')}</span>
         <Controller
           control={control}
           name="country"
@@ -180,15 +178,13 @@ export function OnboardingForm({
             />
           )}
         />
-        <p className="mt-1.5 text-xs text-neutral-500">
-          Your country cannot be changed once set.
-        </p>
+        <p className="mt-1.5 text-xs text-neutral-500">{t('descriptions.country-immutable-warning')}</p>
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">
-          Description
-          <span className="font-normal text-neutral-500"> (optional)</span>
+        <span className="text-sm font-medium text-neutral-800">{t.rich('labels.description-with-optional', {
+      component0: (chunks) => <span className="font-normal text-neutral-500">{chunks}</span>
+    })}
         </span>
         <ReactTextareaAutosize
           className={cn(
@@ -197,7 +193,7 @@ export function OnboardingForm({
               ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-neutral-500",
           )}
-          placeholder="Tell us about the kind of content you create – e.g. tech, travel, fashion, etc."
+          placeholder={t('placeholders.description-content-types')}
           minRows={3}
           onKeyDown={handleKeyDown}
           {...register("description")}
@@ -206,9 +202,7 @@ export function OnboardingForm({
 
       <LayoutGroup>
         <div>
-          <span className="text-sm font-medium text-neutral-800">
-            Profile Type
-          </span>
+          <span className="text-sm font-medium text-neutral-800">{t('labels.profile-type')}</span>
           <div className="mt-2">
             <ToggleGroup
               options={[
@@ -256,9 +250,7 @@ export function OnboardingForm({
               }}
             >
               <label>
-                <span className="text-sm font-medium text-neutral-800">
-                  Legal company name
-                </span>
+                <span className="text-sm font-medium text-neutral-800">{t('labels.legal-company-name')}</span>
                 <input
                   type="text"
                   className={cn(
@@ -272,9 +264,7 @@ export function OnboardingForm({
                     required: profileType === "company",
                   })}
                 />
-                <p className="mt-1.5 text-xs text-neutral-500">
-                  This cannot be changed once set.
-                </p>
+                <p className="mt-1.5 text-xs text-neutral-500">{t('descriptions.company-name-immutable-warning')}</p>
               </label>
             </motion.div>
           )}
@@ -283,7 +273,7 @@ export function OnboardingForm({
         <motion.div layout>
           <Button
             type="submit"
-            text="Continue"
+            text={t('buttons.continue')}
             className="mt-2"
             loading={isPending || isSubmitting || isSubmitSuccessful}
           />
diff --git a/apps/web/app/app.dub.co/(auth)/oauth/authorize/scopes-requested.tsx b/apps/web/app/app.dub.co/(auth)/oauth/authorize/scopes-requested.tsx
index ba325fd6b16..e1da83090cb 100644
--- a/apps/web/app/app.dub.co/(auth)/oauth/authorize/scopes-requested.tsx
+++ b/apps/web/app/app.dub.co/(auth)/oauth/authorize/scopes-requested.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { OAUTH_SCOPE_DESCRIPTIONS } from "@/lib/api/oauth/constants";
 import { consolidateScopes } from "@/lib/api/tokens/scopes";
@@ -9,6 +11,8 @@ interface ScopesProps {
 }
 
 export const ScopesRequested = ({ scopes }: ScopesProps) => {
+const t = useTranslations("oauth-scopes-requested");
+
   // Add default scopes if not present
   if (!scopes.includes("user.read")) {
     scopes.push("user.read");
@@ -35,7 +39,7 @@ export const ScopesRequested = ({ scopes }: ScopesProps) => {
 
   return (
     <>
-      <span className="text-neutral-600">Grant permissions:</span>
+      <span className="text-neutral-600">{t('labels.grant-permissions')}</span>
       <ul className="text-md space-y-1">
         {scopeWithDescriptions.map((scope) => {
           return (
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/programs/[programId]/resources/add-color-modal.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/programs/[programId]/resources/add-color-modal.tsx
index 27f11b2f52b..6a097146c70 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/programs/[programId]/resources/add-color-modal.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/programs/[programId]/resources/add-color-modal.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { addProgramResourceAction } from "@/lib/actions/partners/program-resources/add-program-resource";
 import useProgramResources from "@/lib/swr/use-program-resources";
@@ -46,6 +48,8 @@ function AddColorModal(props: AddColorModalProps) {
 const DEFAULT_COLORS = ["#dc2626", "#84cc16", "#14b8a6", "#0ea5e9", "#d946ef"];
 
 function AddColorModalInner({ setShowAddColorModal }: AddColorModalProps) {
+const t = useTranslations("add-color-modal");
+
   const { programId } = useParams();
   const { id: workspaceId } = useWorkspace();
   const { mutate } = useProgramResources({
@@ -104,7 +108,7 @@ function AddColorModalInner({ setShowAddColorModal }: AddColorModalProps) {
   return (
     <>
       <div className="space-y-2 border-b border-neutral-200 p-4 sm:p-6">
-        <h3 className="text-lg font-medium leading-none">Add color</h3>
+        <h3 className="text-lg font-medium leading-none">{t('headings.title')}</h3>
       </div>
 
       <form
@@ -121,9 +125,7 @@ function AddColorModalInner({ setShowAddColorModal }: AddColorModalProps) {
         <div className="bg-neutral-50 p-4 sm:p-6">
           <div className="space-y-4">
             <div>
-              <span className="mb-1 block text-sm font-medium text-neutral-700">
-                Color
-              </span>
+              <span className="mb-1 block text-sm font-medium text-neutral-700">{t('labels.color-picker')}</span>
               <div className="flex justify-center [&_.react-colorful]:h-[180px] [&_.react-colorful]:w-full">
                 <HexColorPicker
                   color={selectedColor}
@@ -135,9 +137,7 @@ function AddColorModalInner({ setShowAddColorModal }: AddColorModalProps) {
             </div>
 
             <label className="block">
-              <span className="mb-1 block text-sm font-medium text-neutral-700">
-                Hex
-              </span>
+              <span className="mb-1 block text-sm font-medium text-neutral-700">{t('labels.hex-input')}</span>
               <input
                 type="text"
                 value={hexInputValue}
@@ -161,9 +161,7 @@ function AddColorModalInner({ setShowAddColorModal }: AddColorModalProps) {
             </label>
 
             <label className="block">
-              <span className="mb-1 block text-sm font-medium text-neutral-700">
-                Color name
-              </span>
+              <span className="mb-1 block text-sm font-medium text-neutral-700">{t('labels.color-name')}</span>
               <input
                 id="name"
                 type="text"
@@ -187,7 +185,7 @@ function AddColorModalInner({ setShowAddColorModal }: AddColorModalProps) {
           <Button
             onClick={() => setShowAddColorModal(false)}
             variant="secondary"
-            text="Cancel"
+            text={t('buttons.cancel')}
             className="h-8 w-fit px-3"
             type="button"
           />
@@ -195,7 +193,7 @@ function AddColorModalInner({ setShowAddColorModal }: AddColorModalProps) {
             type="submit"
             autoFocus
             loading={isSubmitting || isSubmitSuccessful}
-            text="Add Color"
+            text={t('buttons.add-color')}
             className="h-8 w-fit px-3"
           />
         </div>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/upgrade/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/upgrade/page-client.tsx
index ea137d80b3f..507f33e70d4 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/upgrade/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/upgrade/page-client.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import useWorkspace from "@/lib/swr/use-workspace";
 import { UpgradePlanButton } from "@/ui/workspaces/upgrade-plan-button";
@@ -38,6 +40,8 @@ const plans = ["Pro", "Business", "Advanced", "Enterprise"].map(
 );
 
 export function WorkspaceBillingUpgradePageClient() {
+const t = useTranslations("billing-upgrade-page");
+
   const { slug, plan: currentPlan, stripeId } = useWorkspace();
 
   const [mobilePlanIndex, setMobilePlanIndex] = useState(0);
@@ -55,9 +59,7 @@ export function WorkspaceBillingUpgradePageClient() {
             className="mt-px size-5 text-neutral-500 transition-transform duration-100 group-hover:-translate-x-0.5"
             strokeWidth={2}
           />
-          <h1 className="text-2xl font-semibold tracking-tight text-neutral-900">
-            Plans
-          </h1>
+          <h1 className="text-2xl font-semibold tracking-tight text-neutral-900">{t('headings.plans')}</h1>
         </Link>
         <ToggleGroup
           options={[
@@ -117,9 +119,7 @@ export function WorkspaceBillingUpgradePageClient() {
                       <div>
                         <div className="relative mt-0.5 flex items-center gap-1">
                           {plan.name === "Enterprise" ? (
-                            <span className="text-sm font-medium text-neutral-900">
-                              Custom
-                            </span>
+                            <span className="text-sm font-medium text-neutral-900">{t('pricing.custom-label')}</span>
                           ) : (
                             <>
                               <NumberFlow
@@ -132,9 +132,7 @@ export function WorkspaceBillingUpgradePageClient() {
                                 }}
                                 continuous
                               />
-                              <span className="text-sm font-medium text-neutral-400">
-                                per month
-                              </span>
+                              <span className="text-sm font-medium text-neutral-400">{t('pricing.per-month-suffix')}</span>
                             </>
                           )}
                         </div>
@@ -158,22 +156,14 @@ export function WorkspaceBillingUpgradePageClient() {
                             "border border-neutral-200 bg-white text-neutral-900 shadow-sm hover:bg-neutral-50",
                           )}
                         >
-                          {plan.name === "Enterprise"
-                            ? "Contact us"
-                            : "Get started"}
+                          {plan.name === "Enterprise" ? t('buttons.enterprise-contact-or-get-started_0') : t('buttons.enterprise-contact-or-get-started_1')}
                         </Link>
                       ) : (
                         <UpgradePlanButton
                           plan={plan.name.toLowerCase()}
                           period={period}
                           disabled={disableCurrentPlan}
-                          text={
-                            disableCurrentPlan
-                              ? "Current plan"
-                              : isDowngrade
-                                ? "Downgrade"
-                                : "Upgrade"
-                          }
+                          text={disableCurrentPlan ? t('buttons.plan-action-text_0') : isDowngrade ? t('buttons.plan-action-text_1') : t('buttons.plan-action-text_2')}
                           variant={isDowngrade ? "secondary" : "primary"}
                           className="h-8 shadow-sm"
                         />
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/folders/[folderId]/members/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/folders/[folderId]/members/page-client.tsx
index 6e5f07b34d4..87d1619666b 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/folders/[folderId]/members/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/folders/[folderId]/members/page-client.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { updateUserRoleInFolder } from "@/lib/actions/folders/update-folder-user-role";
 import {
@@ -27,6 +29,8 @@ import { toast } from "sonner";
 import useSWR from "swr";
 
 export const FolderUsersPageClient = ({ folderId }: { folderId: string }) => {
+const t = useTranslations("folder-members-page");
+
   const [isUpdating, setIsUpdating] = useState(false);
   const workspace = useWorkspace();
   const { canManageFolderPermissions } = getPlanCapabilities(workspace.plan);
@@ -104,7 +108,7 @@ export const FolderUsersPageClient = ({ folderId }: { folderId: string }) => {
         className="flex items-center gap-x-1"
       >
         <ChevronLeft className="size-4" />
-        <p className="text-sm font-medium text-neutral-500">Folders</p>
+        <p className="text-sm font-medium text-neutral-500">{t('navigation.folders-breadcrumb')}</p>
       </Link>
 
       <div className="rounded-lg border border-neutral-200 bg-white">
@@ -120,8 +124,7 @@ export const FolderUsersPageClient = ({ folderId }: { folderId: string }) => {
                   <div className="flex items-center gap-1">
                     <Globe className="size-3.5 text-neutral-500" />
                     <span className="text-[13px] font-normal leading-[14.30px] text-neutral-500">
-                      {nFormatter(folder.linkCount)} link
-                      {folder.linkCount !== 1 && "s"}
+                      {nFormatter(folder.linkCount)}{t('folder-info.link-count-suffix', { "folderLinkCount1S": folder.linkCount !== 1 && "s" })}
                     </span>
                   </div>
                 </div>
@@ -150,9 +153,7 @@ export const FolderUsersPageClient = ({ folderId }: { folderId: string }) => {
                         {FOLDER_WORKSPACE_ACCESS[access]}
                       </option>
                     ))}
-                    <option value="" key="no-access">
-                      No access
-                    </option>
+                    <option value="" key="no-access">{t('access-control.no-access-option')}</option>
                   </select>
                 </div>
               )}
@@ -191,6 +192,8 @@ const FolderUserRow = ({
   user: FolderUser;
   folder: Folder;
 }) => {
+const t = useTranslations("folder-members-page");
+
   const { data: session } = useSession();
   const { id: workspaceId } = useWorkspace();
   const [role, setRole] = useState<FolderUserRole>(user.role);
@@ -262,9 +265,7 @@ const FolderUserRow = ({
             </option>
           ))}
 
-          <option value="" key="no-access">
-            No access
-          </option>
+          <option value="" key="no-access">{t('access-control.no-access-fallback')}</option>
         </select>
       </div>
     </div>
diff --git a/apps/web/app/app.dub.co/(dashboard)/account/settings/security/update-password.tsx b/apps/web/app/app.dub.co/(dashboard)/account/settings/security/update-password.tsx
index 6b6a0546da2..96209264a25 100644
--- a/apps/web/app/app.dub.co/(dashboard)/account/settings/security/update-password.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/account/settings/security/update-password.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import z from "@/lib/zod";
 import { updatePasswordSchema } from "@/lib/zod/schemas/auth";
@@ -8,6 +10,8 @@ import { toast } from "sonner";
 
 // Allow the user to update their existing password
 export const UpdatePassword = () => {
+const t = useTranslations("update-password-form");
+
   const {
     register,
     handleSubmit,
@@ -46,14 +50,12 @@ export const UpdatePassword = () => {
     >
       <div>
         <div className="flex flex-col gap-3 border-b border-neutral-200 p-5 sm:p-10">
-          <h2 className="text-xl font-medium">Password</h2>
-          <p className="pb-2 text-sm text-neutral-500">
-            Manage your account password on {process.env.NEXT_PUBLIC_APP_NAME}.
-          </p>
+          <h2 className="text-xl font-medium">{t('headings.password')}</h2>
+          <p className="pb-2 text-sm text-neutral-500">{t('descriptions.manage-password', { "processEnvNextPublicAppName": process.env.NEXT_PUBLIC_APP_NAME })}</p>
         </div>
         <div className="flex flex-wrap justify-between gap-4 p-5 sm:p-10">
           <div className="grid w-full max-w-sm items-center gap-2">
-            <Label htmlFor="currentPassword">Current Password</Label>
+            <Label htmlFor="currentPassword">{t('labels.current-password')}</Label>
             <Input
               type="password"
               {...register("currentPassword", { required: true })}
@@ -68,7 +70,7 @@ export const UpdatePassword = () => {
           </div>
 
           <div className="grid w-full max-w-sm items-center gap-2">
-            <Label htmlFor="newPassword">New Password</Label>
+            <Label htmlFor="newPassword">{t('labels.new-password')}</Label>
             <Input
               type="password"
               {...register("newPassword", { required: true })}
@@ -86,13 +88,11 @@ export const UpdatePassword = () => {
 
       <div className="flex items-center justify-between space-x-4 rounded-b-lg border-t border-neutral-200 bg-neutral-50 p-3 sm:px-10">
         <Tooltip content="Passwords must be at least 8 characters long containing at least one number, one uppercase, and one lowercase letter.">
-          <p className="text-sm text-neutral-500 underline decoration-dotted underline-offset-2 hover:text-neutral-700">
-            Password requirements
-          </p>
+          <p className="text-sm text-neutral-500 underline decoration-dotted underline-offset-2 hover:text-neutral-700">{t('tooltips.password-requirements')}</p>
         </Tooltip>
         <div className="shrink-0">
           <Button
-            text="Update Password"
+            text={t('buttons.update-password')}
             loading={isSubmitting}
             disabled={!isDirty}
             type="submit"
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 1450a2ff12f..dadea42c31a 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { geistMono, inter, satoshi } from "@/styles/fonts";
 import "@/styles/globals.css";
 import { cn, constructMetadata } from "@dub/utils";
@@ -11,6 +12,8 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+const t = useTranslations("root-layout");
+
   return (
     <html
       lang="en"
@@ -20,21 +23,7 @@ export default function RootLayout({
         <RootProviders>{children}</RootProviders>
 
         <Script id="set-theme" strategy="beforeInteractive">
-          {`
-          (() => {
-            // Only run on referrals embed page for now
-            if (window.location.pathname !== '/embed/referrals') return;
-
-            const urlParams = new URLSearchParams(window.location.search);
-            const theme = urlParams.get('theme');
-
-            if (theme === 'dark' || (theme === 'system' && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-              document.body.classList.add("dark");
-            } else {
-              document.body.classList.remove("dark");
-            }
-          })();
-        `}
+          {t('scripts.theme-detection-embed')}
         </Script>
       </body>
     </html>
diff --git a/apps/web/ui/analytics/analytics-provider.tsx b/apps/web/ui/analytics/analytics-provider.tsx
index 7fc2806edde..3ec16c401d5 100644
--- a/apps/web/ui/analytics/analytics-provider.tsx
+++ b/apps/web/ui/analytics/analytics-provider.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import {
   ANALYTICS_SALE_UNIT,
@@ -92,6 +94,8 @@ export default function AnalyticsProvider({
   adminPage?: boolean;
   dashboardProps?: AnalyticsDashboardProps;
 }>) {
+const t = useTranslations("analytics-provider");
+
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const { id: workspaceId, slug } = useWorkspace();
@@ -292,7 +296,7 @@ export default function AnalyticsProvider({
           ) {
             toast.custom(() => (
               <UpgradeRequiredToast
-                title="Upgrade for more analytics"
+                title={t('upgrade.toast-title')}
                 message={errorMessage}
               />
             ));
diff --git a/apps/web/ui/auth/login/email-sign-in.tsx b/apps/web/ui/auth/login/email-sign-in.tsx
index 3fc2af22f92..0ba0457c2e4 100644
--- a/apps/web/ui/auth/login/email-sign-in.tsx
+++ b/apps/web/ui/auth/login/email-sign-in.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { checkAccountExistsAction } from "@/lib/actions/check-account-exists";
 import { Button, Input, useMediaQuery } from "@dub/ui";
 import { InputPassword } from "@dub/ui/icons";
@@ -12,6 +13,8 @@ import { toast } from "sonner";
 import { errorCodes, LoginFormContext } from "./login-form";
 
 export const EmailSignIn = ({ next }: { next?: string }) => {
+const t = useTranslations("email-sign-in");
+
   const router = useRouter();
   const searchParams = useSearchParams();
   const finalNext = next ?? searchParams?.get("next");
@@ -125,7 +128,7 @@ export const EmailSignIn = ({ next }: { next?: string }) => {
             name="email"
             autoFocus={!isMobile && !showPasswordField}
             type="email"
-            placeholder="panic@thedis.co"
+            placeholder={t('placeholders.email-example')}
             autoComplete="email"
             required
             value={email}
@@ -146,14 +149,14 @@ export const EmailSignIn = ({ next }: { next?: string }) => {
               type="password"
               autoFocus={!isMobile}
               value={password}
-              placeholder="Password (optional)"
+              placeholder={t('placeholders.password-optional')}
               onChange={(e) => setPassword(e.target.value)}
             />
           </div>
         )}
 
         <Button
-          text={`Continue with ${password ? "Password" : "Email"}`}
+          text={t('buttons.continue-with-method')}
           variant="secondary"
           icon={
             password ? (
@@ -178,9 +181,7 @@ export const EmailSignIn = ({ next }: { next?: string }) => {
         <Link
           href={`/forgot-password?email=${encodeURIComponent(email)}`}
           className="text-center text-xs text-neutral-500 transition-colors hover:text-black"
-        >
-          Forgot password?
-        </Link>
+        >{t('links.forgot-password')}</Link>
       )}
     </>
   );
diff --git a/apps/web/ui/customers/customer-table/customer-table.tsx b/apps/web/ui/customers/customer-table/customer-table.tsx
index 6d3026d0b27..07a718f361f 100644
--- a/apps/web/ui/customers/customer-table/customer-table.tsx
+++ b/apps/web/ui/customers/customer-table/customer-table.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { getPlanCapabilities } from "@/lib/plan-capabilities";
 import useCustomersCount from "@/lib/swr/use-customers-count";
@@ -52,6 +54,8 @@ type ColumnMeta = {
 };
 
 export function CustomerTable() {
+const t = useTranslations("customer-table");
+
   const { id: workspaceId, slug: workspaceSlug, plan } = useWorkspace();
 
   const { canManageCustomers } = getPlanCapabilities(plan);
@@ -132,7 +136,7 @@ export function CustomerTable() {
               <div className="flex items-center gap-2">
                 {country && (
                   <img
-                    alt={`${country} flag`}
+                    alt={t('accessibility.country-flag-alt', { "country": country })}
                     src={`https://hatscripts.github.io/circle-flags/flags/${country.toLowerCase()}.svg`}
                     className="size-4 shrink-0"
                   />
@@ -157,7 +161,7 @@ export function CustomerTable() {
                   trailingZeroDisplay: "stripIfInteger",
                 })}
               </span>
-              <span className="text-neutral-400">USD</span>
+              <span className="text-neutral-400">{t('currency.usd-label')}</span>
             </div>
           ),
         },
@@ -275,7 +279,7 @@ export function CustomerTable() {
             onRemove={onRemove}
           />
           <SearchBoxPersisted
-            placeholder="Search by email, name, or external ID"
+            placeholder={t('search.placeholder')}
             inputClassName="md:w-[21rem]"
           />
         </div>
@@ -311,26 +315,21 @@ export function CustomerTable() {
                       src="https://assets.dub.co/misc/customer-screenshot.jpg"
                       fill
                       className="object-contain object-top"
-                      alt="Customer overview screenshot"
+                      alt={t('accessibility.customer-screenshot-alt')}
                       draggable={false}
                     />
                   </div>
                 </div>
                 <div className="relative -mt-4 flex flex-col items-center justify-center">
-                  <span className="text-lg font-semibold text-neutral-700">
-                    Customer Insights
-                  </span>
-                  <p className="mt-3 max-w-sm text-pretty text-sm text-neutral-500">
-                    Want to see more details about your customers' LTV, country
-                    breakdown etc.? Upgrade to our Business Plan to get deeper,
-                    real-time customer insights.{" "}
-                    <a
+                  <span className="text-lg font-semibold text-neutral-700">{t('upgrade-overlay.heading')}</span>
+                  <p className="mt-3 max-w-sm text-pretty text-sm text-neutral-500">{t.rich('upgrade-overlay.description', {
+      component0: (chunks) => <a
                       href="https://dub.co/help/article/customer-insights"
                       target="_blank"
                       className="underline underline-offset-2 hover:text-neutral-800"
-                    >
-                      Learn more ↗
-                    </a>
+                    >{chunks}</a>
+    })}
+                    
                   </p>
                   <div className="mt-4">
                     <Link
@@ -340,9 +339,7 @@ export function CustomerTable() {
                         "flex h-8 items-center justify-center gap-2 rounded-md border px-4 text-sm",
                       )}
                     >
-                      <span className="bg-gradient-to-r from-violet-600 to-pink-600 bg-clip-text text-transparent">
-                        Upgrade to Business
-                      </span>
+                      <span className="bg-gradient-to-r from-violet-600 to-pink-600 bg-clip-text text-transparent">{t('upgrade-overlay.button-text')}</span>
                     </Link>
                   </div>
                 </div>
@@ -353,12 +350,8 @@ export function CustomerTable() {
         </Table>
       ) : (
         <AnimatedEmptyState
-          title={`No customers ${isFiltered ? "found" : "yet"}`}
-          description={
-            isFiltered
-              ? "No customers found for the selected filters. Adjust your filters to refine your search results."
-              : "No customers have been recorded for your workspace yet. Learn how to track your first customer."
-          }
+          title={t('empty-state.title')}
+          description={isFiltered ? t('empty-state.description_0') : t('empty-state.description_1')}
           {...(!isFiltered && {
             learnMoreHref: "https://dub.co/help/article/customer-insights",
             learnMoreText: "Read the guide",
@@ -376,6 +369,8 @@ export function CustomerTable() {
 }
 
 function RowMenuButton({ row }: { row: Row<CustomerProps> }) {
+const t = useTranslations("customer-table");
+
   const [isOpen, setIsOpen] = useState(false);
 
   const [, copyToClipboard] = useCopyToClipboard();
@@ -398,9 +393,7 @@ function RowMenuButton({ row }: { row: Row<CustomerProps> }) {
                     });
                     setIsOpen(false);
                   }}
-                >
-                  Copy external ID
-                </MenuItem>
+                >{t('context-menu.copy-external-id')}</MenuItem>
               )}
               {row.original.email && (
                 <MenuItem
@@ -412,9 +405,7 @@ function RowMenuButton({ row }: { row: Row<CustomerProps> }) {
                     });
                     setIsOpen(false);
                   }}
-                >
-                  Copy email
-                </MenuItem>
+                >{t('context-menu.copy-email')}</MenuItem>
               )}
             </Command.List>
           </Command>
diff --git a/apps/web/ui/layout/changelog-popup.tsx b/apps/web/ui/layout/changelog-popup.tsx
index 67c76973c66..ebc1342ed99 100644
--- a/apps/web/ui/layout/changelog-popup.tsx
+++ b/apps/web/ui/layout/changelog-popup.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { BlurImage, Popup, PopupContext } from "@dub/ui";
 import { motion } from "framer-motion";
@@ -22,6 +24,8 @@ export default function ChangelogPopup() {
 }
 
 export function ChangelogPopupInner() {
+const t = useTranslations("changelog-popup");
+
   const { hidePopup } = useContext(PopupContext);
 
   return (
@@ -49,7 +53,7 @@ export function ChangelogPopupInner() {
         <div className="border-b border-neutral-200">
           <BlurImage
             src={CHANGELOG_IMAGE_URL}
-            alt="Root Domain Links"
+            alt={t('images.root-domain-links-alt')}
             className="aspect-[1200/630] object-cover"
             width={1200}
             height={630}
diff --git a/apps/web/ui/layout/user-survey/index.tsx b/apps/web/ui/layout/user-survey/index.tsx
index 5efcad67f69..71c5a408587 100644
--- a/apps/web/ui/layout/user-survey/index.tsx
+++ b/apps/web/ui/layout/user-survey/index.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { CheckCircleFill } from "@/ui/shared/icons";
 import { AnimatedSizeContainer, ClientOnly, Popover } from "@dub/ui";
@@ -21,6 +23,8 @@ export const UserSurveyContext = createContext<{ status: UserSurveyStatus }>({
 const HIDDEN_COOKIE_ID = "hideUserSurveyPopup";
 
 export default function UserSurveyButton() {
+const t = useTranslations("user-survey");
+
   const { data: session } = useSession();
   const [hidden, setHidden] = useState(Cookies.get(HIDDEN_COOKIE_ID) === "1");
   const [openPopover, setOpenPopover] = useState(false);
@@ -52,9 +56,7 @@ export default function UserSurveyButton() {
                     "hover:text-neutral-600 data-[state=open]:text-neutral-600",
                     "outline-none focus-visible:ring-2 focus-visible:ring-black/50",
                   )}
-                >
-                  Where did you hear about Dub?
-                </button>
+                >{t('prompts.where-did-you-hear')}</button>
               </Popover>
             </motion.div>
           )}
@@ -65,6 +67,8 @@ export default function UserSurveyButton() {
 }
 
 export function UserSurveyPopupInner({ hide }: { hide: () => void }) {
+const t = useTranslations("user-survey");
+
   const { update } = useSession();
 
   const [status, setStatus] = useState<UserSurveyStatus>("idle");
@@ -109,7 +113,7 @@ export function UserSurveyPopupInner({ hide }: { hide: () => void }) {
                 className="absolute inset-0 flex flex-col items-center justify-center space-y-3 rounded-lg bg-white text-sm"
               >
                 <CheckCircleFill className="h-8 w-8 text-green-500" />
-                <p className="text-neutral-500">Thank you for your response!</p>
+                <p className="text-neutral-500">{t('messages.thank-you-response')}</p>
               </motion.div>
             )}
           </AnimatePresence>
diff --git a/apps/web/ui/links/link-display.tsx b/apps/web/ui/links/link-display.tsx
index 1e2186e274d..79661efd0d0 100644
--- a/apps/web/ui/links/link-display.tsx
+++ b/apps/web/ui/links/link-display.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import {
   linksDisplayProperties,
   LinksViewMode,
@@ -25,6 +26,8 @@ import LinkSort from "./link-sort";
 import { LinksDisplayContext } from "./links-display-provider";
 
 export default function LinkDisplay() {
+const t = useTranslations("link-display");
+
   const {
     viewMode,
     setViewMode,
@@ -82,9 +85,7 @@ export default function LinkDisplay() {
           {!isMegaFolder && (
             <div className="flex h-16 items-center justify-between gap-2 px-4">
               <span className="flex items-center gap-2">
-                <ArrowsOppositeDirectionY className="h-4 w-4 text-neutral-800" />
-                Ordering
-              </span>
+                <ArrowsOppositeDirectionY className="h-4 w-4 text-neutral-800" />{t('sections.ordering')}</span>
               <div>
                 <LinkSort />
               </div>
@@ -95,12 +96,8 @@ export default function LinkDisplay() {
               <div className="flex items-center gap-2">
                 <div className="flex w-6 items-center justify-center">
                   <BoxArchive className="size-4 text-neutral-800 group-hover:hidden" />
-                  <kbd className="hidden rounded border border-neutral-200 bg-neutral-100 px-2 py-0.5 text-xs font-light text-neutral-500 group-hover:block">
-                    A
-                  </kbd>
-                </div>
-                Show archived links
-              </div>
+                  <kbd className="hidden rounded border border-neutral-200 bg-neutral-100 px-2 py-0.5 text-xs font-light text-neutral-500 group-hover:block">{t('keyboard-shortcuts.archive-toggle')}</kbd>
+                </div>{t('toggles.show-archived-links')}</div>
               <div>
                 <Switch
                   checked={showArchived}
@@ -118,9 +115,7 @@ export default function LinkDisplay() {
             </div>
           )}
           <div className="p-4">
-            <span className="text-xs uppercase text-neutral-500">
-              Display Properties
-            </span>
+            <span className="text-xs uppercase text-neutral-500">{t('sections.display-properties')}</span>
             <div className="mt-4 flex flex-wrap gap-2">
               {linksDisplayProperties.map((property) => {
                 const active = displayProperties.includes(property.id);
@@ -172,13 +167,13 @@ export default function LinkDisplay() {
                   <Button
                     className="h-8 w-auto px-2"
                     variant="outline"
-                    text="Reset to default"
+                    text={t('buttons.reset-to-default')}
                     onClick={reset}
                   />
                   <Button
                     className="h-8 w-auto px-2"
                     variant="primary"
-                    text="Set as default"
+                    text={t('buttons.set-as-default')}
                     onClick={persist}
                   />
                 </div>
@@ -204,7 +199,7 @@ export default function LinkDisplay() {
                 </div>
               )}
             </div>
-            <span className="grow text-left">Display</span>
+            <span className="grow text-left">{t('labels.display')}</span>
             <ChevronDown
               className={cn("h-4 w-4 text-neutral-400 transition-transform", {
                 "rotate-180": openPopover,
diff --git a/apps/web/ui/modals/delete-account-modal.tsx b/apps/web/ui/modals/delete-account-modal.tsx
index d8e74e85808..89bbb3a246a 100644
--- a/apps/web/ui/modals/delete-account-modal.tsx
+++ b/apps/web/ui/modals/delete-account-modal.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { Avatar, Button, Modal } from "@dub/ui";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
@@ -17,6 +18,8 @@ function DeleteAccountModal({
   showDeleteAccountModal: boolean;
   setShowDeleteAccountModal: Dispatch<SetStateAction<boolean>>;
 }) {
+const t = useTranslations("delete-account-modal");
+
   const router = useRouter();
   const { data: session, update } = useSession();
   const [deleting, setDeleting] = useState(false);
@@ -53,11 +56,8 @@ function DeleteAccountModal({
     >
       <div className="flex flex-col items-center justify-center space-y-3 border-b border-neutral-200 px-4 py-4 pt-8 sm:px-16">
         <Avatar user={session?.user} />
-        <h3 className="text-lg font-medium">Delete Account</h3>
-        <p className="text-center text-sm text-neutral-500">
-          Warning: This will permanently delete your account, all your
-          workspaces, and all your short links.
-        </p>
+        <h3 className="text-lg font-medium">{t('headings.delete-account')}</h3>
+        <p className="text-center text-sm text-neutral-500">{t('warnings.permanent-deletion')}</p>
       </div>
 
       <form
@@ -75,13 +75,10 @@ function DeleteAccountModal({
           <label
             htmlFor="verification"
             className="block text-sm text-neutral-700"
-          >
-            To verify, type{" "}
-            <span className="font-semibold text-black">
-              confirm delete account
-            </span>{" "}
-            below
-          </label>
+          >{t.rich('labels.verification-instruction', {
+      component0: (chunks) => <span className="font-semibold text-black">{chunks}</span>
+    })}
+            </label>
           <div className="relative mt-1 rounded-md shadow-sm">
             <input
               type="text"
@@ -97,7 +94,7 @@ function DeleteAccountModal({
         </div>
 
         <Button
-          text="Confirm delete account"
+          text={t('buttons.confirm-delete')}
           variant="danger"
           loading={deleting}
         />
diff --git a/apps/web/ui/modals/import-rewardful-modal.tsx b/apps/web/ui/modals/import-rewardful-modal.tsx
index 5a80ffc3f30..733a7955af6 100644
--- a/apps/web/ui/modals/import-rewardful-modal.tsx
+++ b/apps/web/ui/modals/import-rewardful-modal.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { setRewardfulTokenAction } from "@/lib/actions/partners/set-rewardful-token";
 import { startRewardfulImportAction } from "@/lib/actions/partners/start-rewardful-import";
 import { RewardfulCampaign } from "@/lib/rewardful/types";
@@ -33,6 +34,8 @@ function ImportRewardfulModal({
   showImportRewardfulModal: boolean;
   setShowImportRewardfulModal: Dispatch<SetStateAction<boolean>>;
 }) {
+const t = useTranslations("import-rewardful-modal");
+
   const router = useRouter();
   const { program } = useProgram();
   const searchParams = useSearchParams();
@@ -145,17 +148,15 @@ function ImportRewardfulModal({
         <div className="flex items-center space-x-3 py-4">
           <img
             src="https://assets.dub.co/misc/icons/rewardful.svg"
-            alt="Rewardful logo"
+            alt={t('images.rewardful-logo-alt')}
             className="h-10 w-10 rounded-full"
           />
           <ArrowRight className="h-5 w-5 text-neutral-600" />
           <Logo />
         </div>
-        <h3 className="text-lg font-medium">Import Your Rewardful Campaigns</h3>
-        <p className="text-center text-sm text-neutral-500">
-          Import your existing Rewardful campaigns into{" "}
-          {process.env.NEXT_PUBLIC_APP_NAME} with just a few clicks.
-        </p>
+        <h3 className="text-lg font-medium">{t('headings.import-campaigns')}</h3>
+        <p className="text-center text-sm text-neutral-500">{t('descriptions.import-intro', { "processEnvNextPublicAppName": process.env.NEXT_PUBLIC_APP_NAME })}
+          </p>
       </div>
 
       <div className="flex flex-col space-y-6 bg-neutral-50 px-4 py-8 text-left sm:px-16">
@@ -169,7 +170,7 @@ function ImportRewardfulModal({
         ) : isLoadingCampaigns || !workspaceId ? (
           <div className="flex flex-col items-center justify-center space-y-4 bg-none">
             <LoadingSpinner />
-            <p className="text-sm text-neutral-500">Loading campaigns...</p>
+            <p className="text-sm text-neutral-500">{t('messages.loading-campaigns')}</p>
           </div>
         ) : campaigns ? (
           <CampaignsStep
@@ -182,9 +183,7 @@ function ImportRewardfulModal({
         ) : (
           <div className="flex flex-col items-center justify-center gap-2 pb-2">
             <ServerOff className="h-6 w-6 text-neutral-500" />
-            <p className="text-center text-sm text-neutral-500">
-              Failed to load campaigns. Please try again.
-            </p>
+            <p className="text-center text-sm text-neutral-500">{t('errors.failed-to-load-campaigns')}</p>
           </div>
         )}
       </div>
@@ -203,6 +202,8 @@ function TokenStep({
   isSubmittingToken: boolean;
   onSubmit: (e: React.FormEvent) => Promise<void>;
 }) {
+const t = useTranslations("import-rewardful-modal");
+
   const { isMobile } = useMediaQuery();
   return (
     <form onSubmit={onSubmit} className="flex flex-col space-y-4">
@@ -210,33 +211,30 @@ function TokenStep({
         <label
           htmlFor="apiToken"
           className="block text-sm font-medium text-neutral-700"
-        >
-          Rewardful API Secret
-        </label>
+        >{t('labels.api-secret')}</label>
         <input
           type="password"
           id="apiToken"
           value={apiToken}
           autoFocus={!isMobile}
           onChange={(e) => setApiToken(e.target.value)}
-          placeholder="Enter your Rewardful API token"
+          placeholder={t('placeholders.enter-api-token')}
           className="mt-1 block w-full rounded-md border border-neutral-200 px-3 py-2 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
           required
         />
-        <p className="mt-1.5 text-xs text-neutral-500">
-          You can find your Rewardful API Secret on your{" "}
-          <a
+        <p className="mt-1.5 text-xs text-neutral-500">{t.rich('descriptions.api-secret-location', {
+      component0: (chunks) => <a
             href="https://app.getrewardful.com/company/edit"
             target="_blank"
             rel="noopener noreferrer"
             className="text-blue-500 hover:text-blue-600"
-          >
-            Company settings page
-          </a>
+          >{chunks}</a>
+    })}
+          
         </p>
       </div>
       <Button
-        text={isSubmittingToken ? "Fetching campaigns..." : "Fetch campaigns"}
+        text={isSubmittingToken ? t('buttons.fetch-campaigns_0') : t('buttons.fetch-campaigns_1')}
         loading={isSubmittingToken}
         disabled={!apiToken}
       />
@@ -257,6 +255,8 @@ function CampaignsStep({
   importing: boolean;
   onSubmit: (e: React.FormEvent) => Promise<void>;
 }) {
+const t = useTranslations("import-rewardful-modal");
+
   const handleCampaignChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       const campaign = campaigns.find((c) => c.id === e.target.value) || null;
@@ -277,16 +277,14 @@ function CampaignsStep({
         <label
           htmlFor="campaign"
           className="block text-sm font-medium text-neutral-700"
-        >
-          Choose the campaign you want to import
-        </label>
+        >{t('labels.choose-campaign')}</label>
         <select
           id="campaign"
           value={selectedCampaign?.id || ""}
           onChange={handleCampaignChange}
           className="mt-1 block w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
         >
-          <option value="">Select a campaign</option>
+          <option value="">{t('options.select-campaign')}</option>
           {campaigns.map((campaign) => (
             <option key={campaign.id} value={campaign.id}>
               {campaign.name}
@@ -298,27 +296,25 @@ function CampaignsStep({
       {selectedCampaign && (
         <dl className="grid grid-cols-2 gap-3 rounded-md border border-neutral-200 bg-white p-4 text-xs">
           <div>
-            <dt className="text-neutral-500">Affiliates</dt>
+            <dt className="text-neutral-500">{t('campaign-details.affiliates')}</dt>
             <dd className="font-medium text-neutral-700">
               {selectedCampaign.affiliates}
             </dd>
           </div>
           <div>
-            <dt className="text-neutral-500">Commission</dt>
+            <dt className="text-neutral-500">{t('campaign-details.commission')}</dt>
             <dd className="font-medium text-neutral-700">
               {formatCommission(selectedCampaign)}
             </dd>
           </div>
           <div>
-            <dt className="text-neutral-500">Duration</dt>
+            <dt className="text-neutral-500">{t('campaign-details.duration')}</dt>
             <dd className="font-medium text-neutral-700">
-              {selectedCampaign.max_commission_period_months
-                ? `${selectedCampaign.max_commission_period_months} months`
-                : "Lifetime"}
+              {selectedCampaign.max_commission_period_months ? t('campaign-details.duration-value_0', { "selectedCampaignMaxCommissionPeriodMonths": selectedCampaign.max_commission_period_months }) : t('campaign-details.duration-value_1')}
             </dd>
           </div>
           <div>
-            <dt className="text-neutral-500">Type</dt>
+            <dt className="text-neutral-500">{t('campaign-details.type')}</dt>
             <dd className="font-medium text-neutral-700">
               {capitalize(selectedCampaign.reward_type)}
             </dd>
@@ -327,7 +323,7 @@ function CampaignsStep({
       )}
 
       <Button
-        text="Import campaign"
+        text={t('buttons.import-campaign')}
         loading={importing}
         disabled={!selectedCampaign}
         className="w-full justify-center"
diff --git a/apps/web/ui/modals/link-builder/webhooks-modal.tsx b/apps/web/ui/modals/link-builder/webhooks-modal.tsx
index f401e51619e..b2e008b34e7 100644
--- a/apps/web/ui/modals/link-builder/webhooks-modal.tsx
+++ b/apps/web/ui/modals/link-builder/webhooks-modal.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import useWebhooks from "@/lib/swr/use-webhooks";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { LinkFormData } from "@/ui/links/link-builder/link-builder-provider";
@@ -37,6 +38,8 @@ function WebhooksModalInner({
 }: {
   setShowWebhooksModal: Dispatch<SetStateAction<boolean>>;
 }) {
+const t = useTranslations("link-webhooks-modal");
+
   const {
     watch: watchParent,
     getValues: getValuesParent,
@@ -71,30 +74,25 @@ function WebhooksModalInner({
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <h3 className="text-lg font-medium">Link Webhooks</h3>
+          <h3 className="text-lg font-medium">{t('headings.title')}</h3>
         </div>
         <div className="max-md:hidden">
           <Tooltip
             content={
-              <div className="px-2 py-1 text-xs text-neutral-700">
-                Press{" "}
-                <strong className="font-medium text-neutral-950">W</strong> to
-                open this quickly
-              </div>
+              <div className="px-2 py-1 text-xs text-neutral-700">{t.rich('tooltips.keyboard-shortcut', {
+      component0: (chunks) => <strong className="font-medium text-neutral-950">{chunks}</strong>
+    })}
+                </div>
             }
             side="right"
           >
-            <kbd className="flex size-6 cursor-default items-center justify-center rounded-md border border-neutral-200 font-sans text-xs text-neutral-950">
-              W
-            </kbd>
+            <kbd className="flex size-6 cursor-default items-center justify-center rounded-md border border-neutral-200 font-sans text-xs text-neutral-950">{t('keyboard.shortcut-key')}</kbd>
           </Tooltip>
         </div>
       </div>
 
       <div className="mt-6">
-        <span className="mb-1 block text-sm font-normal text-neutral-500">
-          Webhooks
-        </span>
+        <span className="mb-1 block text-sm font-normal text-neutral-500">{t('labels.webhooks')}</span>
         <WebhookSelect
           webhookIds={webhookIds as string[]}
           onChange={(webhookIds) =>
@@ -113,16 +111,14 @@ function WebhooksModalInner({
                 setValueParent("webhookIds", [], { shouldDirty: true });
                 setShowWebhooksModal(false);
               }}
-            >
-              Remove webhooks
-            </button>
+            >{t('buttons.remove-webhooks')}</button>
           )}
         </div>
         <div className="flex items-center gap-2">
           <Button
             type="button"
             variant="secondary"
-            text="Cancel"
+            text={t('buttons.cancel')}
             className="h-9 w-fit"
             onClick={() => {
               reset();
@@ -132,7 +128,7 @@ function WebhooksModalInner({
           <Button
             type="submit"
             variant="primary"
-            text="Save webhooks"
+            text={t('buttons.save-webhooks')}
             className="h-9 w-fit"
             disabled={!isDirty}
           />
@@ -237,6 +233,8 @@ export function WebhookSelect({
 }
 
 const NoWebhooksFound = () => {
+const t = useTranslations("link-webhooks-modal");
+
   const { slug } = useWorkspace();
 
   return (
@@ -244,15 +242,13 @@ const NoWebhooksFound = () => {
       <div className="flex items-center justify-center rounded-2xl border border-neutral-200 bg-neutral-50 p-3">
         <Webhook className="size-6 text-neutral-700" />
       </div>
-      <p className="mt-2 font-medium text-neutral-950">No webhooks found</p>
-      <p className="mx-auto mt-1 w-full max-w-[180px] text-neutral-700">
-        Add a webhook to receive a click event when someone clicks your link.
-      </p>
+      <p className="mt-2 font-medium text-neutral-950">{t('empty-state.no-webhooks-title')}</p>
+      <p className="mx-auto mt-1 w-full max-w-[180px] text-neutral-700">{t('empty-state.no-webhooks-description')}</p>
       <div>
         <Button
           className="mt-1 h-8"
           onClick={() => window.open(`/${slug}/settings/webhooks`, "_blank")}
-          text="Add webhook"
+          text={t('buttons.add-webhook')}
         />
       </div>
     </div>
diff --git a/apps/web/ui/modals/set-default-folder-modal.tsx b/apps/web/ui/modals/set-default-folder-modal.tsx
index c27dfb943e8..44097fe65c2 100644
--- a/apps/web/ui/modals/set-default-folder-modal.tsx
+++ b/apps/web/ui/modals/set-default-folder-modal.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { setDefaultFolderAction } from "@/lib/actions/folders/set-default-folder";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { FolderSummary } from "@/lib/types";
@@ -23,6 +24,8 @@ function SetDefaultFolderModal({
   setShowDefaultFolderModal: Dispatch<SetStateAction<boolean>>;
   folder: FolderSummary;
 }) {
+const t = useTranslations("set-default-folder-modal");
+
   const { id: workspaceId } = useWorkspace();
 
   const { executeAsync, isPending } = useAction(setDefaultFolderAction, {
@@ -55,21 +58,17 @@ function SetDefaultFolderModal({
     >
       <div className="flex flex-col items-center justify-center space-y-3 border-b border-neutral-200 px-4 py-4 pt-8 text-center sm:px-16">
         <FolderIcon folder={folder} />
-        <h3 className="text-lg font-medium">
-          Set "{folder.name}" as your default folder
-        </h3>
-        <p className="text-sm text-neutral-500">
-          This will make this folder the default folder for your links
-          dashboard.{" "}
-          <a
+        <h3 className="text-lg font-medium">{t('headings.set-folder-as-default', { "folderName": folder.name })}</h3>
+        <p className="text-sm text-neutral-500">{t.rich('descriptions.default-folder-explanation', {
+      component0: (chunks) => <a
             // TODO: Update help article when ready
             href="https://dub.co/help"
             className="underline"
             target="_blank"
             rel="noreferrer"
-          >
-            Learn more ↗
-          </a>
+          >{chunks}</a>
+    })}
+          
         </p>
       </div>
 
@@ -86,7 +85,7 @@ function SetDefaultFolderModal({
           }
           autoFocus
           loading={isPending}
-          text="Set as default folder"
+          text={t('buttons.set-as-default')}
         />
       </div>
     </Modal>
diff --git a/apps/web/ui/partners/payout-details-sheet.tsx b/apps/web/ui/partners/payout-details-sheet.tsx
index 8a87bd03894..1f35c55ff94 100644
--- a/apps/web/ui/partners/payout-details-sheet.tsx
+++ b/apps/web/ui/partners/payout-details-sheet.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { PAYOUTS_SHEET_ITEMS_LIMIT } from "@/lib/partners/constants";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { CommissionResponse, PayoutResponse } from "@/lib/types";
@@ -41,6 +42,8 @@ function PayoutDetailsSheetContent({
   payout,
   setIsOpen,
 }: PayoutDetailsSheetProps) {
+const t = useTranslations("payout-details-sheet");
+
   const { id: workspaceId, slug } = useWorkspace();
   const { programId } = useParams() as { programId: string };
 
@@ -132,9 +135,7 @@ function PayoutDetailsSheetContent({
 
             <div className="flex flex-col">
               <span className="w-44 truncate text-sm text-neutral-700">
-                {row.original.type === "click"
-                  ? `${row.original.quantity} ${pluralize("click", row.original.quantity)}`
-                  : row.original.customer.email || row.original.customer.name}
+                {row.original.type === "click" ? t('table.commission-details_0') : row.original.customer.email || row.original.customer.name}
               </span>
               <span className="text-xs text-neutral-500">
                 {formatDateTime(row.original.createdAt)}
@@ -190,8 +191,7 @@ function PayoutDetailsSheetContent({
     <div className="flex h-full flex-col">
       <div className="sticky top-0 z-10 flex items-start justify-between border-b border-neutral-200 bg-white p-6">
         <Sheet.Title className="text-xl font-semibold">
-          {capitalize(payout.status)} payout
-        </Sheet.Title>
+          {capitalize(payout.status)}{t('headings.payout-status')}</Sheet.Title>
         <Sheet.Close asChild>
           <Button
             variant="outline"
@@ -202,9 +202,7 @@ function PayoutDetailsSheetContent({
       </div>
       <div className="flex-1 overflow-y-auto">
         <div className="flex flex-col gap-4 p-6">
-          <div className="text-base font-medium text-neutral-900">
-            Invoice details
-          </div>
+          <div className="text-base font-medium text-neutral-900">{t('sections.invoice-details')}</div>
           <div className="grid grid-cols-2 gap-3 text-sm">
             {Object.entries(invoiceData).map(([key, value]) => (
               <Fragment key={key}>
@@ -234,9 +232,7 @@ function PayoutDetailsSheetContent({
                   buttonVariants({ variant: "secondary" }),
                   "flex h-7 items-center rounded-lg border px-2 text-sm",
                 )}
-              >
-                View all
-              </Link>
+              >{t('buttons.view-all')}</Link>
             </div>
           </>
         ) : null}
diff --git a/apps/web/ui/placeholders/feature-graphics/domains.tsx b/apps/web/ui/placeholders/feature-graphics/domains.tsx
index 62173b95ab7..bc53d4dfad2 100644
--- a/apps/web/ui/placeholders/feature-graphics/domains.tsx
+++ b/apps/web/ui/placeholders/feature-graphics/domains.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { CursorRays, FlagWavy, LinkLogo } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { CSSProperties } from "react";
@@ -19,6 +20,8 @@ const DOMAINS = [
 ];
 
 export function Domains() {
+const t = useTranslations("domains-feature-graphic");
+
   return (
     <div className="flex size-full flex-col justify-center" aria-hidden>
       <div className="flex flex-col gap-2.5 [mask-image:linear-gradient(90deg,black_70%,transparent)]">
@@ -46,16 +49,14 @@ export function Domains() {
                 <CursorRays className="h-4 w-4 text-neutral-700" />
                 <div className="flex items-center whitespace-nowrap text-sm text-neutral-500">
                   {clicks}
-                  <span className="ml-1 hidden sm:inline-block">clicks</span>
+                  <span className="ml-1 hidden sm:inline-block">{t('metrics.clicks')}</span>
                 </div>
               </div>
 
               {primary && (
                 <div className="flex items-center gap-x-1 rounded-md border border-blue-100 bg-blue-50 px-2 py-[0.2rem]">
                   <FlagWavy className="h-4 w-4 text-blue-700" />
-                  <div className="flex items-center whitespace-nowrap text-sm text-blue-600">
-                    Primary
-                  </div>
+                  <div className="flex items-center whitespace-nowrap text-sm text-blue-600">{t('badges.primary')}</div>
                 </div>
               )}
             </div>
diff --git a/apps/web/ui/webhooks/no-events-placeholder.tsx b/apps/web/ui/webhooks/no-events-placeholder.tsx
index 979bd064698..6723fb47db8 100644
--- a/apps/web/ui/webhooks/no-events-placeholder.tsx
+++ b/apps/web/ui/webhooks/no-events-placeholder.tsx
@@ -1,13 +1,16 @@
+import { useTranslations } from "next-intl";
 import { Webhook } from "lucide-react";
 import EmptyState from "../shared/empty-state";
 
 export const NoEventsPlaceholder = () => {
+const t = useTranslations("webhook-events-placeholder");
+
   return (
     <div className="rounded-xl border border-neutral-200 py-10">
       <EmptyState
         icon={Webhook}
-        title="No events"
-        description="No events have been logged for this webhook. Events will appear as they are logged."
+        title={t('empty-state.title')}
+        description={t('empty-state.description')}
       />
     </div>
   );
diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 00000000000..063dc07888c
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,405 @@
+{
+  "filter-select": {
+    "keyboard-shortcuts": {
+      "filter-key": "F"
+    },
+    "ai": {
+      "ask-with-search-term": "Ask AI <component0>\"{search}\"</component0>"
+    }
+  },
+  "webhook-failed-email": {
+    "preview": {
+      "webhook-failing": "Webhook is failing to deliver"
+    },
+    "alt": {
+      "dub-logo": "Dub"
+    },
+    "headings": {
+      "webhook-failing": "Webhook is failing to deliver"
+    },
+    "messages": {
+      "failure-warning": "Your webhook <component0>{webhook.url}</component0> has failed to deliver {webhookConsecutiveFailures} times and will be disabled after {webhookDisableThreshold} consecutive failures.",
+      "review-instructions": "Please review the webhook details and update the URL if necessary to restore functionality."
+    },
+    "buttons": {
+      "edit-webhook": "Edit Webhook"
+    }
+  },
+  "login-link-email": {
+    "preview": {
+      "login-link": "Your Dub Login Link"
+    },
+    "alt": {
+      "dub-logo": "Dub"
+    },
+    "headings": {
+      "login-link": "Your Login Link"
+    },
+    "messages": {
+      "welcome": "Welcome to Dub!",
+      "magic-link-instruction": "Please click the magic link below to sign in to your account.",
+      "copy-url-instruction": "or copy and paste this URL into your browser:"
+    },
+    "buttons": {
+      "sign-in": "Sign in"
+    }
+  },
+  "campaign-imported-email": {
+    "preview": {
+      "campaign-imported": "Your {provider} campaign has been imported"
+    },
+    "alt": {
+      "dub-logo": "Dub"
+    },
+    "headings": {
+      "campaign-imported": "Your {provider} campaign has been imported"
+    },
+    "messages": {
+      "import-success": "We have successfully imported your {provider} campaign <component0>{programName}↗</component0> into Dub."
+    }
+  },
+  "link-display": {
+    "sections": {
+      "ordering": "Ordering",
+      "display-properties": "Display Properties"
+    },
+    "keyboard-shortcuts": {
+      "archive-toggle": "A"
+    },
+    "toggles": {
+      "show-archived-links": "Show archived links"
+    },
+    "buttons": {
+      "reset-to-default": "Reset to default",
+      "set-as-default": "Set as default"
+    },
+    "labels": {
+      "display": "Display"
+    }
+  },
+  "payout-details-sheet": {
+    "table": {
+      "commission-details_0": "{rowOriginalQuantity} {rowOriginalQuantity,plural,one{click} other{clicks}}"
+    },
+    "headings": {
+      "payout-status": "payout"
+    },
+    "sections": {
+      "invoice-details": "Invoice details"
+    },
+    "buttons": {
+      "view-all": "View all"
+    }
+  },
+  "customer-table": {
+    "accessibility": {
+      "country-flag-alt": "{country} flag",
+      "customer-screenshot-alt": "Customer overview screenshot"
+    },
+    "currency": {
+      "usd-label": "USD"
+    },
+    "search": {
+      "placeholder": "Search by email, name, or external ID"
+    },
+    "upgrade-overlay": {
+      "heading": "Customer Insights",
+      "description": "Want to see more details about your customers' LTV, country breakdown etc.? Upgrade to our Business Plan to get deeper, real-time customer insights. <component0>Learn more ↗</component0>",
+      "button-text": "Upgrade to Business"
+    },
+    "empty-state": {
+      "title": "No customers {isFiltered,select,true{found} other{yet}}",
+      "description_0": "No customers found for the selected filters. Adjust your filters to refine your search results.",
+      "description_1": "No customers have been recorded for your workspace yet. Learn how to track your first customer."
+    },
+    "context-menu": {
+      "copy-external-id": "Copy external ID",
+      "copy-email": "Copy email"
+    }
+  },
+  "link-webhooks-modal": {
+    "headings": {
+      "title": "Link Webhooks"
+    },
+    "tooltips": {
+      "keyboard-shortcut": "Press <component0>W</component0> to open this quickly"
+    },
+    "keyboard": {
+      "shortcut-key": "W"
+    },
+    "labels": {
+      "webhooks": "Webhooks"
+    },
+    "buttons": {
+      "remove-webhooks": "Remove webhooks",
+      "cancel": "Cancel",
+      "save-webhooks": "Save webhooks",
+      "add-webhook": "Add webhook"
+    },
+    "empty-state": {
+      "no-webhooks-title": "No webhooks found",
+      "no-webhooks-description": "Add a webhook to receive a click event when someone clicks your link."
+    }
+  },
+  "import-rewardful-modal": {
+    "images": {
+      "rewardful-logo-alt": "Rewardful logo"
+    },
+    "headings": {
+      "import-campaigns": "Import Your Rewardful Campaigns"
+    },
+    "descriptions": {
+      "import-intro": "Import your existing Rewardful campaigns into {processEnvNextPublicAppName} with just a few clicks.",
+      "api-secret-location": "You can find your Rewardful API Secret on your <component0>Company settings page</component0>"
+    },
+    "messages": {
+      "loading-campaigns": "Loading campaigns..."
+    },
+    "errors": {
+      "failed-to-load-campaigns": "Failed to load campaigns. Please try again."
+    },
+    "labels": {
+      "api-secret": "Rewardful API Secret",
+      "choose-campaign": "Choose the campaign you want to import"
+    },
+    "placeholders": {
+      "enter-api-token": "Enter your Rewardful API token"
+    },
+    "buttons": {
+      "fetch-campaigns_0": "Fetching campaigns...",
+      "fetch-campaigns_1": "Fetch campaigns",
+      "import-campaign": "Import campaign"
+    },
+    "options": {
+      "select-campaign": "Select a campaign"
+    },
+    "campaign-details": {
+      "affiliates": "Affiliates",
+      "commission": "Commission",
+      "duration": "Duration",
+      "duration-value_0": "{selectedCampaignMaxCommissionPeriodMonths} months",
+      "duration-value_1": "Lifetime",
+      "type": "Type"
+    }
+  },
+  "set-default-folder-modal": {
+    "headings": {
+      "set-folder-as-default": "Set \"{folderName}\" as your default folder"
+    },
+    "descriptions": {
+      "default-folder-explanation": "This will make this folder the default folder for your links dashboard. <component0>Learn more ↗</component0>"
+    },
+    "buttons": {
+      "set-as-default": "Set as default folder"
+    }
+  },
+  "delete-account-modal": {
+    "headings": {
+      "delete-account": "Delete Account"
+    },
+    "warnings": {
+      "permanent-deletion": "Warning: This will permanently delete your account, all your workspaces, and all your short links."
+    },
+    "labels": {
+      "verification-instruction": "To verify, type <component0>confirm delete account</component0> below"
+    },
+    "buttons": {
+      "confirm-delete": "Confirm delete account"
+    }
+  },
+  "email-sign-in": {
+    "placeholders": {
+      "email-example": "panic@thedis.co",
+      "password-optional": "Password (optional)"
+    },
+    "buttons": {
+      "continue-with-method": "Continue with {password,select,true{Password} other{Email}}"
+    },
+    "links": {
+      "forgot-password": "Forgot password?"
+    }
+  },
+  "webhook-events-placeholder": {
+    "empty-state": {
+      "title": "No events",
+      "description": "No events have been logged for this webhook. Events will appear as they are logged."
+    }
+  },
+  "analytics-provider": {
+    "upgrade": {
+      "toast-title": "Upgrade for more analytics"
+    }
+  },
+  "domains-feature-graphic": {
+    "metrics": {
+      "clicks": "clicks"
+    },
+    "badges": {
+      "primary": "Primary"
+    }
+  },
+  "changelog-popup": {
+    "images": {
+      "root-domain-links-alt": "Root Domain Links"
+    }
+  },
+  "user-survey": {
+    "prompts": {
+      "where-did-you-hear": "Where did you hear about Dub?"
+    },
+    "messages": {
+      "thank-you-response": "Thank you for your response!"
+    }
+  },
+  "root-layout": {
+    "scripts": {
+      "theme-detection-embed": "\n          (() => '{\n            // Only run on referrals embed page for now\n            if (window.location.pathname !== '/embed/referrals') return;\n\n            const urlParams = new URLSearchParams(window.location.search);\n            const theme = urlParams.get('theme');\n\n            if (theme === 'dark' || (theme === 'system' && window.matchMedia(\"(prefers-color-scheme: dark)\").matches)) {\n              document.body.classList.add(\"dark\");\n            } else {\n              document.body.classList.remove(\"dark\");\n            }\n          }')();"
+    }
+  },
+  "update-password-form": {
+    "headings": {
+      "password": "Password"
+    },
+    "descriptions": {
+      "manage-password": "Manage your account password on {processEnvNextPublicAppName}."
+    },
+    "labels": {
+      "current-password": "Current Password",
+      "new-password": "New Password"
+    },
+    "tooltips": {
+      "password-requirements": "Password requirements"
+    },
+    "buttons": {
+      "update-password": "Update Password"
+    }
+  },
+  "folder-members-page": {
+    "navigation": {
+      "folders-breadcrumb": "Folders"
+    },
+    "folder-info": {
+      "link-count-suffix": "link {folderLinkCount1S}"
+    },
+    "access-control": {
+      "no-access-option": "No access",
+      "no-access-fallback": "No access"
+    }
+  },
+  "billing-upgrade-page": {
+    "headings": {
+      "plans": "Plans"
+    },
+    "pricing": {
+      "custom-label": "Custom",
+      "per-month-suffix": "per month"
+    },
+    "buttons": {
+      "enterprise-contact-or-get-started_0": "Contact us",
+      "enterprise-contact-or-get-started_1": "Get started",
+      "plan-action-text_0": "Current plan",
+      "plan-action-text_1": "Downgrade",
+      "plan-action-text_2": "Upgrade"
+    }
+  },
+  "add-color-modal": {
+    "headings": {
+      "title": "Add color"
+    },
+    "labels": {
+      "color-picker": "Color",
+      "hex-input": "Hex",
+      "color-name": "Color name"
+    },
+    "buttons": {
+      "cancel": "Cancel",
+      "add-color": "Add Color"
+    }
+  },
+  "oauth-scopes-requested": {
+    "labels": {
+      "grant-permissions": "Grant permissions:"
+    }
+  },
+  "earnings-composite-chart": {
+    "labels": {
+      "total-earnings": "Total Earnings"
+    },
+    "toggle-options": {
+      "link": "Link",
+      "type": "Type"
+    }
+  },
+  "partner-onboarding-form": {
+    "labels": {
+      "full-name": "Full Name",
+      "profile-image": "Profile Image",
+      "country": "Country",
+      "description-with-optional": "Description <component0>(optional)</component0>",
+      "profile-type": "Profile Type",
+      "legal-company-name": "Legal company name"
+    },
+    "buttons": {
+      "upload-image": "Upload image",
+      "continue": "Continue"
+    },
+    "descriptions": {
+      "recommended-image-size": "Recommended size: 160x160px",
+      "country-immutable-warning": "Your country cannot be changed once set.",
+      "company-name-immutable-warning": "This cannot be changed once set."
+    },
+    "placeholders": {
+      "description-content-types": "Tell us about the kind of content you create – e.g. tech, travel, fashion, etc."
+    }
+  },
+  "partner-application-form": {
+    "labels": {
+      "name": "Name",
+      "email": "Email",
+      "website-social-channel": "Website / Social media channel",
+      "promotion-plan": "How do you plan to promote {programName}?",
+      "additional-comments": "Any additional questions or comments? <component0>(optional)</component0>"
+    },
+    "placeholders": {
+      "company-name": "Acme, Inc.",
+      "email-address": "panic@thedis.co",
+      "website-url": "https://example.com"
+    },
+    "checkboxes": {
+      "age-verification": "I'm {programAgeVerification} years or older",
+      "terms-agreement": "I agree to the <component0>{programName} Partner Program Terms ↗</component0>"
+    },
+    "buttons": {
+      "submit-application": "Submit application"
+    }
+  },
+  "program-creation-form": {
+    "labels": {
+      "company-name": "Company name",
+      "logo": "Logo",
+      "custom-domain": "Custom domain",
+      "destination-url": "Destination URL"
+    },
+    "descriptions": {
+      "company-name": "The name of the company you're setting up the program for",
+      "logo": "A square logo that will be used in various parts of your program",
+      "referral-link-setup": "Set the custom domain and destination URL for your referral links",
+      "custom-domain": "Custom domain that will be used for your program's referral links",
+      "destination-url": "Where people will be redirected to when they click on your program's referral links"
+    },
+    "placeholders": {
+      "company-name": "Acme",
+      "destination-url": "https://dub.co"
+    },
+    "headings": {
+      "referral-link": "Referral link",
+      "referral-link-preview": "Referral link preview"
+    },
+    "tooltips": {
+      "domain-requirement": "A connected domain or sub-domain is required to create a program."
+    },
+    "buttons": {
+      "continue": "Continue"
+    }
+  }
+}
diff --git a/packages/email/src/templates/campaign-imported.tsx b/packages/email/src/templates/campaign-imported.tsx
index 7535d6fde45..3f1a60de749 100644
--- a/packages/email/src/templates/campaign-imported.tsx
+++ b/packages/email/src/templates/campaign-imported.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { DUB_WORDMARK } from "@dub/utils";
 import {
   Body,
@@ -35,29 +36,29 @@ export function CampaignImported({
     name: string;
   };
 }) {
+const t = useTranslations("campaign-imported-email");
+
   return (
     <Html>
       <Head />
-      <Preview>Your {provider} campaign has been imported</Preview>
+      <Preview>{t('preview.campaign-imported', { "provider": provider })}</Preview>
       <Tailwind>
         <Body className="mx-auto my-auto bg-white font-sans">
           <Container className="mx-auto my-10 max-w-[600px] rounded border border-solid border-neutral-200 px-10 py-5">
             <Section className="mb-8 mt-6">
-              <Img src={DUB_WORDMARK} height="32" alt="Dub" />
+              <Img src={DUB_WORDMARK} height="32" alt={t('alt.dub-logo')} />
             </Section>
-            <Heading className="mx-0 my-7 p-0 text-lg font-medium text-black">
-              Your {provider} campaign has been imported
-            </Heading>
-            <Text className="text-sm leading-6 text-black">
-              We have successfully imported your {provider} campaign{" "}
-              <Link
+            <Heading className="mx-0 my-7 p-0 text-lg font-medium text-black">{t('headings.campaign-imported', { "provider": provider })}</Heading>
+            <Text className="text-sm leading-6 text-black">{t.rich('messages.import-success', {
+      provider,
+      programName,
+      component0: (chunks) => <Link
                 href={`https://app.dub.co/${workspace.slug}/programs/${program.id}/partners`}
                 className="font-medium text-blue-600 no-underline"
               >
-                {program.name}↗
-              </Link>{" "}
-              into Dub.
-            </Text>
+                </Link>
+    })}
+              </Text>
             <Footer email={email} />
           </Container>
         </Body>
diff --git a/packages/email/src/templates/login-link.tsx b/packages/email/src/templates/login-link.tsx
index 7f3908db717..378dac1713d 100644
--- a/packages/email/src/templates/login-link.tsx
+++ b/packages/email/src/templates/login-link.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { DUB_WORDMARK } from "@dub/utils";
 import {
   Body,
@@ -21,36 +22,28 @@ export function LoginLink({
   email: string;
   url: string;
 }) {
+const t = useTranslations("login-link-email");
+
   return (
     <Html>
       <Head />
-      <Preview>Your Dub Login Link</Preview>
+      <Preview>{t('preview.login-link')}</Preview>
       <Tailwind>
         <Body className="mx-auto my-auto bg-white font-sans">
           <Container className="mx-auto my-10 max-w-[600px] rounded border border-solid border-neutral-200 px-10 py-5">
             <Section className="mt-8">
-              <Img src={DUB_WORDMARK} height="32" alt="Dub" />
+              <Img src={DUB_WORDMARK} height="32" alt={t('alt.dub-logo')} />
             </Section>
-            <Heading className="mx-0 my-7 p-0 text-lg font-medium text-black">
-              Your Login Link
-            </Heading>
-            <Text className="text-sm leading-6 text-black">
-              Welcome to Dub!
-            </Text>
-            <Text className="text-sm leading-6 text-black">
-              Please click the magic link below to sign in to your account.
-            </Text>
+            <Heading className="mx-0 my-7 p-0 text-lg font-medium text-black">{t('headings.login-link')}</Heading>
+            <Text className="text-sm leading-6 text-black">{t('messages.welcome')}</Text>
+            <Text className="text-sm leading-6 text-black">{t('messages.magic-link-instruction')}</Text>
             <Section className="my-8">
               <Link
                 className="rounded-lg bg-black px-6 py-3 text-center text-[12px] font-semibold text-white no-underline"
                 href={url}
-              >
-                Sign in
-              </Link>
+              >{t('buttons.sign-in')}</Link>
             </Section>
-            <Text className="text-sm leading-6 text-black">
-              or copy and paste this URL into your browser:
-            </Text>
+            <Text className="text-sm leading-6 text-black">{t('messages.copy-url-instruction')}</Text>
             <Text className="max-w-sm flex-wrap break-words font-medium text-purple-600 no-underline">
               {url.replace(/^https?:\/\//, "")}
             </Text>
diff --git a/packages/email/src/templates/webhook-failed.tsx b/packages/email/src/templates/webhook-failed.tsx
index e727abf68fc..948357c33ad 100644
--- a/packages/email/src/templates/webhook-failed.tsx
+++ b/packages/email/src/templates/webhook-failed.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { DUB_WORDMARK } from "@dub/utils";
 import {
   Body,
@@ -39,35 +40,32 @@ export default function WebhookFailed({
     disableThreshold: number;
   };
 }) {
+const t = useTranslations("webhook-failed-email");
+
   return (
     <Html>
       <Head />
-      <Preview>Webhook is failing to deliver</Preview>
+      <Preview>{t('preview.webhook-failing')}</Preview>
       <Tailwind>
         <Body className="mx-auto my-auto bg-white font-sans">
           <Container className="mx-auto my-10 max-w-[600px] rounded border border-solid border-neutral-200 px-10 py-5">
             <Section className="mt-8">
-              <Img src={DUB_WORDMARK} height="32" alt="Dub" />
+              <Img src={DUB_WORDMARK} height="32" alt={t('alt.dub-logo')} />
             </Section>
-            <Heading className="mx-0 my-7 p-0 text-xl font-medium text-black">
-              Webhook is failing to deliver
-            </Heading>
-            <Text className="text-sm leading-6 text-black">
-              Your webhook <strong>{webhook.url}</strong> has failed to deliver{" "}
-              {webhook.consecutiveFailures} times and will be disabled after{" "}
-              {webhook.disableThreshold} consecutive failures.
-            </Text>
-            <Text className="text-sm leading-6 text-black">
-              Please review the webhook details and update the URL if necessary
-              to restore functionality.
-            </Text>
+            <Heading className="mx-0 my-7 p-0 text-xl font-medium text-black">{t('headings.webhook-failing')}</Heading>
+            <Text className="text-sm leading-6 text-black">{t.rich('messages.failure-warning', {
+      webhookConsecutiveFailures,
+      webhookDisableThreshold,
+      component0: (chunks) => <strong>{webhook.url}</strong>
+    })}
+              
+              </Text>
+            <Text className="text-sm leading-6 text-black">{t('messages.review-instructions')}</Text>
             <Section className="mb-8 mt-8">
               <Link
                 className="rounded-lg bg-black px-6 py-3 text-center text-[12px] font-semibold text-white no-underline"
                 href={`https://app.dub.co/${workspace.slug}/settings/webhooks/${webhook.id}/edit`}
-              >
-                Edit Webhook
-              </Link>
+              >{t('buttons.edit-webhook')}</Link>
             </Section>
             <Footer email={email} />
           </Container>
diff --git a/packages/ui/src/filter/filter-select.tsx b/packages/ui/src/filter/filter-select.tsx
index 9a971613d22..8bb1963f059 100644
--- a/packages/ui/src/filter/filter-select.tsx
+++ b/packages/ui/src/filter/filter-select.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import { cn, truncate } from "@dub/utils";
 import { Command, useCommandState } from "cmdk";
 import { ChevronDown, ListFilter } from "lucide-react";
@@ -50,6 +51,8 @@ export function FilterSelect({
   emptyState,
   className,
 }: FilterSelectProps) {
+const t = useTranslations("filter-select");
+
   const { isMobile } = useMediaQuery();
 
   // Track main list container/dimensions to maintain size for loading spinner
@@ -205,9 +208,7 @@ export function FilterSelect({
                 }}
               />
               {!selectedFilter && (
-                <kbd className="mr-2 hidden shrink-0 rounded border border-neutral-200 bg-neutral-100 px-2 py-0.5 text-xs font-light text-neutral-500 md:block">
-                  F
-                </kbd>
+                <kbd className="mr-2 hidden shrink-0 rounded border border-neutral-200 bg-neutral-100 px-2 py-0.5 text-xs font-light text-neutral-500 md:block">{t('keyboard-shortcuts.filter-key')}</kbd>
               )}
             </div>
             <FilterScroll key={selectedFilterKey} ref={listContainer}>
@@ -429,12 +430,16 @@ const CommandEmpty = ({
   search: string;
   askAI?: boolean;
 }>) => {
+const t = useTranslations("filter-select");
+
   if (askAI && search) {
     return (
       <Command.Empty className="flex min-w-[180px] items-center space-x-2 rounded-md bg-neutral-100 px-3 py-2">
         <Magic className="h-4 w-4" />
-        <p className="text-center text-sm text-neutral-600">
-          Ask AI <span className="text-black">"{search}"</span>
+        <p className="text-center text-sm text-neutral-600">{t.rich('ai.ask-with-search-term', {
+      search,
+      component0: (chunks) => <span className="text-black">{chunks}</span>
+    })}
         </p>
       </Command.Empty>
     );