diff --git a/apps/web/app/[domain]/not-found/page.tsx b/apps/web/app/[domain]/not-found/page.tsx
index 1ad903513f..01ce247a45 100644
--- a/apps/web/app/[domain]/not-found/page.tsx
+++ b/apps/web/app/[domain]/not-found/page.tsx
@@ -1,5 +1,6 @@
 import { GlobeSearch } from "@dub/ui";
 import { constructMetadata } from "@dub/utils";
+import { getTranslations } from "next-intl/server";
 
 export const runtime = "edge";
 
@@ -12,20 +13,20 @@ export const metadata = constructMetadata({
 });
 
 export default async function NotFoundLinkPage() {
+  const t = await getTranslations("[domain]/not-found");
+
   return (
     <div className="z-10 mx-2 my-10 flex max-w-md flex-col items-center space-y-5 px-2.5 text-center sm:mx-auto sm:max-w-lg sm:px-0 lg:mb-16">
       <div className="font-display mx-auto flex h-20 w-20 items-center justify-center rounded-full border border-gray-300 bg-white/80 text-lg font-bold text-gray-400">
         <GlobeSearch className="size-6 text-gray-500" />
       </div>
-      <h1 className="font-display text-5xl font-bold">Link Not Found</h1>
-      <p className="text-lg text-gray-600">
-        This link does not exist. Please check the URL and try again.
-      </p>
+      <h1 className="font-display text-5xl font-bold">{t("link-not-found")}</h1>
+      <p className="text-lg text-gray-600">{t("link-not-exist-message")}</p>
       <a
         href="https://dub.co/home"
         className="rounded-full bg-gray-800 px-10 py-2 font-medium text-white transition-colors hover:bg-black"
       >
-        Create Your Free Branded Link
+        {t("create-free-branded-link")}
       </a>
     </div>
   );
diff --git a/apps/web/app/admin.dub.co/(dashboard)/components/user-info.tsx b/apps/web/app/admin.dub.co/(dashboard)/components/user-info.tsx
index 5c6a65865d..ed7b499422 100644
--- a/apps/web/app/admin.dub.co/(dashboard)/components/user-info.tsx
+++ b/apps/web/app/admin.dub.co/(dashboard)/components/user-info.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 import { Badge, Copy, Globe2, Tick, useCopyToClipboard } from "@dub/ui";
 import { capitalize, nFormatter } from "@dub/utils";
 import { toast } from "sonner";
@@ -22,15 +24,17 @@ export interface UserInfoProps {
 }
 
 export default function UserInfo({ data }: { data: UserInfoProps }) {
+  const t = useTranslations("admin.dub.co/(dashboard)/components");
+
   return (
     <div className="grid gap-2">
       <LoginLinkCopyButton text={data.email} url={data.email} />
       <LoginLinkCopyButton
-        text="app.dub.co login link"
+        text={t("app-dub-co-login-link")}
         url={data.impersonateUrl.app}
       />
       <LoginLinkCopyButton
-        text="partners.dub.co login link"
+        text={t("partners-dub-co-login-link")}
         url={data.impersonateUrl.partners}
       />
       {Object.keys(data.defaultDomainLinks).length > 0 && (
@@ -57,27 +61,27 @@ export default function UserInfo({ data }: { data: UserInfoProps }) {
               <Badge className="lowercase">{workspace.slug}</Badge>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">ID</span>
+              <span className="font-medium text-gray-700">{t("id")}</span>
               <span className="text-gray-500">{workspace.id}</span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">Plan</span>
+              <span className="font-medium text-gray-700">{t("plan")}</span>
               <span className="text-gray-500">
                 {capitalize(workspace.plan)}
               </span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">Domains</span>
+              <span className="font-medium text-gray-700">{t("domains")}</span>
               <span className="text-gray-500">{workspace.domains}</span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">Links</span>
+              <span className="font-medium text-gray-700">{t("links")}</span>
               <span className="text-gray-500">
                 {nFormatter(workspace.links, { full: true })}
               </span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">Clicks</span>
+              <span className="font-medium text-gray-700">{t("clicks")}</span>
               <span className="text-gray-500">
                 {nFormatter(workspace.clicks, { full: true })}
               </span>
diff --git a/apps/web/app/api/og/analytics/route.tsx b/apps/web/app/api/og/analytics/route.tsx
index 6d80ac9a1d..8e01efc464 100644
--- a/apps/web/app/api/og/analytics/route.tsx
+++ b/apps/web/app/api/og/analytics/route.tsx
@@ -6,12 +6,15 @@ import {
   linkConstructor,
   nFormatter,
 } from "@dub/utils";
+import { getTranslations } from "next-intl/server";
 import { ImageResponse } from "next/og";
 import { NextRequest } from "next/server";
 
 export const runtime = "edge";
 
 export async function GET(req: NextRequest) {
+  const t = await getTranslations("api/og/analytics");
+
   const interMedium = await fetch(
     new URL("@/styles/Inter-Medium.ttf", import.meta.url),
   ).then((res) => res.arrayBuffer());
@@ -45,7 +48,7 @@ export async function GET(req: NextRequest) {
             <img
               tw="rounded-full w-10 h-10"
               src={`${GOOGLE_FAVICON_URL}${getApexDomain(link.url || "dub.co")}`}
-              alt="favicon"
+              alt={t("favicon-icon")}
             />
             <h1 tw="text-4xl font-bold ml-4">
               {linkConstructor({ domain, key, pretty: true })}
@@ -81,7 +84,7 @@ export async function GET(req: NextRequest) {
               <rect width="18" height="18" x="3" y="4" rx="2" />
               <path d="M3 10h18" />
             </svg>
-            <p tw="text-gray-700 ml-2 mt-4">Last 24 hours</p>
+            <p tw="text-gray-700 ml-2 mt-4">{t("last-24-hours")}</p>
           </div>
         </div>
         <div tw="flex flex-col h-full w-full rounded-lg border border-gray-200 bg-white shadow-lg overflow-hidden">
@@ -105,7 +108,7 @@ export async function GET(req: NextRequest) {
               </svg>
             </div>
             <p tw="text-lg font-medium uppercase -mt-4 text-gray-600">
-              Total Clicks
+              {t("total-clicks")}
             </p>
           </div>
 
diff --git a/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx b/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx
index a6e9c32ae1..ce7c616321 100644
--- a/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx
@@ -2,6 +2,7 @@ import { ResetPasswordForm } from "@/ui/auth/reset-password-form";
 import EmptyState from "@/ui/shared/empty-state";
 import { prisma } from "@dub/prisma";
 import { InputPassword } from "@dub/ui";
+import { getTranslations } from "next-intl/server";
 
 export const runtime = "nodejs";
 
@@ -12,14 +13,18 @@ interface Props {
 }
 
 export default async function ResetPasswordPage({ params: { token } }: Props) {
+  const t = await getTranslations(
+    "app.dub.co/(auth)/auth/reset-password/[token]",
+  );
+
   const validToken = await isValidToken(token);
 
   if (!validToken) {
     return (
       <EmptyState
         icon={InputPassword}
-        title="Invalid Reset Token"
-        description="The password reset token is invalid or expired. Please request a new one."
+        title={t("invalid-reset-token")}
+        description={t("invalid-or-expired-reset-token-message")}
       />
     );
   }
@@ -28,10 +33,8 @@ export default async function ResetPasswordPage({ params: { token } }: Props) {
     <div className="relative z-10 my-10 flex min-h-full w-full items-center justify-center">
       <div className="mx-auto w-full max-w-md overflow-hidden border-y border-gray-200 sm:rounded-2xl sm:border sm:shadow-xl">
         <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
-          <h3 className="text-xl font-semibold">Reset your password</h3>
-          <p className="text-sm text-gray-500">
-            Enter new password for your account.
-          </p>
+          <h3 className="text-xl font-semibold">{t("reset-password")}</h3>
+          <p className="text-sm text-gray-500">{t("enter-new-password")}</p>
         </div>
         <div className="flex flex-col gap-3 bg-gray-50 px-4 py-8 sm:px-16">
           <ResetPasswordForm />
diff --git a/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx b/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx
index 7eff4b839b..3fad78c5d8 100644
--- a/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx
@@ -1,16 +1,19 @@
 import EmptyState from "@/ui/shared/empty-state";
 import { LoadingSpinner } from "@dub/ui";
 import { APP_NAME } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import { Suspense } from "react";
 import SAMLIDPForm from "./form";
 
 export default function SAMLPage() {
+  const t = useTranslations("app.dub.co/(auth)/auth/saml");
+
   return (
     <>
       <EmptyState
         icon={LoadingSpinner}
-        title="SAML Authentication"
-        description={`${APP_NAME} is verifying your identity via SAML. This might take a few seconds...`}
+        title={t("saml-authentication")}
+        description={t("app-name-saml-verification", { APP_NAME: APP_NAME })}
       />
       <Suspense>
         <SAMLIDPForm />
diff --git a/apps/web/app/app.dub.co/(auth)/login/page.tsx b/apps/web/app/app.dub.co/(auth)/login/page.tsx
index dc9eeef84c..76b037d139 100644
--- a/apps/web/app/app.dub.co/(auth)/login/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/login/page.tsx
@@ -1,6 +1,7 @@
 import LoginForm from "@/ui/auth/login/login-form";
 import { AuthLayout } from "@/ui/layout/auth-layout";
 import { APP_DOMAIN, constructMetadata } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 
 export const metadata = constructMetadata({
@@ -9,24 +10,29 @@ export const metadata = constructMetadata({
 });
 
 export default function LoginPage() {
+  const t = useTranslations("app.dub.co/(auth)/login");
+
   return (
     <AuthLayout>
       <div className="w-full max-w-md overflow-hidden border-y border-gray-200 sm:rounded-2xl sm:border sm:shadow-sm">
         <div className="border-b border-gray-200 bg-white pb-6 pt-8 text-center">
-          <h3 className="text-lg font-semibold">Sign in to your Dub account</h3>
+          <h3 className="text-lg font-semibold">{t("sign-in-dub-account")}</h3>
         </div>
         <div className="bg-gray-50 px-4 py-8 sm:px-16">
           <LoginForm />
         </div>
       </div>
       <p className="mt-4 text-center text-sm text-gray-500">
-        Don't have an account?&nbsp;
-        <Link
-          href="register"
-          className="font-semibold text-gray-500 underline underline-offset-2 transition-colors hover:text-black"
-        >
-          Sign up
-        </Link>
+        {t("dont-have-account-sign-up-link", {
+          component0: (
+            <Link
+              href="register"
+              className="font-semibold text-gray-500 underline underline-offset-2 transition-colors hover:text-black"
+            >
+              {t("dont-have-account-sign-up-link_component0")}
+            </Link>
+          ),
+        })}
       </p>
     </AuthLayout>
   );
diff --git a/apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx b/apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx
index 7a57f6d22e..fdbf10d80e 100644
--- a/apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx
+++ b/apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { consolidateScopes, getScopesForRole } from "@/lib/api/tokens/scopes";
 import useWorkspaces from "@/lib/swr/use-workspaces";
@@ -25,6 +26,8 @@ export const AuthorizeForm = ({
   code_challenge,
   code_challenge_method,
 }: AuthorizeFormProps) => {
+  const t = useTranslations("app.dub.co/(auth)/oauth/authorize");
+
   const { data: session } = useSession();
   const { workspaces } = useWorkspaces();
   const { AddWorkspaceModal, setShowAddWorkspaceModal } =
@@ -141,7 +144,7 @@ export const AuthorizeForm = ({
           />
         )}
         <p className="text-sm text-gray-500">
-          Select a workspace to grant API access to
+          {t("select-workspace-api-access")}
         </p>
         <div className="max-w-md py-2">
           <InputSelect
@@ -153,7 +156,7 @@ export const AuthorizeForm = ({
             noItemsElement={
               <Button
                 icon={<OfficeBuilding className="size-4" />}
-                text="Create new workspace"
+                text={t("create-new-workspace")}
                 variant="outline"
                 onClick={() => setShowAddWorkspaceModal(true)}
                 className="justify-start text-gray-700"
@@ -163,14 +166,14 @@ export const AuthorizeForm = ({
         </div>
         <div className="mt-4 flex justify-between gap-4">
           <Button
-            text="Decline"
+            text={t("decline-action")}
             type="button"
             onClick={onDecline}
             variant="secondary"
             disabled={submitting}
           />
           <Button
-            text="Authorize"
+            text={t("authorize-action")}
             type="submit"
             loading={submitting}
             disabled={!selectedWorkspace}
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx
index 1ce1285529..4eba7ec8d9 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import usePartnersCount from "@/lib/swr/use-partners-count";
 import { PartnerStatusBadges } from "@/ui/partners/partner-status-badges";
@@ -13,6 +14,10 @@ interface PartnerCount {
 }
 
 export function PartnerStats() {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/programs/[programId]/partners",
+  );
+
   const { slug, programId } = useParams();
   const { queryParams } = useRouterStuff();
 
@@ -34,7 +39,7 @@ export function PartnerStats() {
   return (
     <div className="xs:grid-cols-4 xs:divide-x xs:divide-y-0 grid divide-y divide-neutral-200 overflow-hidden rounded-lg border border-neutral-200">
       <ProgramStatsFilter
-        label="All"
+        label={t("all-items")}
         href={`/${slug}/programs/${programId}/partners`}
         count={all}
         icon={Users}
@@ -42,7 +47,7 @@ export function PartnerStats() {
         error={!!error}
       />
       <ProgramStatsFilter
-        label="Top partners"
+        label={t("top-partners")}
         href={
           queryParams({
             set: {
@@ -58,7 +63,7 @@ export function PartnerStats() {
         error={!!error}
       />
       <ProgramStatsFilter
-        label="Approved"
+        label={t("approved-status")}
         href={
           queryParams({
             set: { status: "approved" },
@@ -71,7 +76,7 @@ export function PartnerStats() {
         error={!!error}
       />
       <ProgramStatsFilter
-        label="Pending"
+        label={t("pending-status")}
         href={
           queryParams({
             set: { status: "pending" },
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/invoices/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/invoices/page-client.tsx
index 6749d711f1..70aac7b67d 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/invoices/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/invoices/page-client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import useWorkspace from "@/lib/swr/use-workspace";
 import { InvoiceProps } from "@/lib/types";
@@ -20,6 +21,10 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 
 export default function WorkspaceInvoicesClient() {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/settings/billing/invoices",
+  );
+
   const { slug } = useParams();
   const { payoutMethodId } = useWorkspace();
   const { searchParams, queryParams } = useRouterStuff();
@@ -42,9 +47,9 @@ export default function WorkspaceInvoicesClient() {
             <ChevronLeft className="size-5" />
           </Link>
           <div>
-            <h2 className="text-xl font-medium">Invoices</h2>
+            <h2 className="text-xl font-medium">{t("invoices-title")}</h2>
             <p className="text-balance text-sm leading-normal text-neutral-500">
-              A history of all your Dub invoices
+              {t("invoices-history-description")}
             </p>
           </div>
         </div>
@@ -74,8 +79,8 @@ export default function WorkspaceInvoicesClient() {
             ))
           ) : (
             <AnimatedEmptyState
-              title="No invoices found"
-              description="You don't have any invoices yet"
+              title={t("no-invoices-found-message")}
+              description={t("no-invoices-yet-message")}
               cardContent={() => (
                 <>
                   <Receipt2 className="size-4 text-neutral-700" />
@@ -98,6 +103,10 @@ export default function WorkspaceInvoicesClient() {
 }
 
 const InvoiceCard = ({ invoice }: { invoice: InvoiceProps }) => {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/settings/billing/invoices",
+  );
+
   return (
     <div className="grid grid-cols-3 gap-4 px-6 py-4 sm:px-12">
       <div className="text-sm">
@@ -112,7 +121,7 @@ const InvoiceCard = ({ invoice }: { invoice: InvoiceProps }) => {
       </div>
 
       <div className="text-left text-sm">
-        <div className="font-medium">Total</div>
+        <div className="font-medium">{t("total-label")}</div>
         <div className="flex items-center gap-1.5 text-neutral-500">
           <span className="text-sm">
             {currencyFormatter(invoice.total / 100, {
@@ -145,14 +154,14 @@ const InvoiceCard = ({ invoice }: { invoice: InvoiceProps }) => {
               "flex size-8 items-center justify-center rounded-md border text-sm sm:size-auto sm:h-9 sm:px-3",
             )}
           >
-            <p className="hidden sm:block">View invoice</p>
+            <p className="hidden sm:block">{t("view-invoice-button")}</p>
             <InvoiceDollar className="size-4 sm:hidden" />
           </a>
         ) : (
           <Button
             className="w-fit"
             variant="secondary"
-            text="View invoice"
+            text={t("view-invoice-label")}
             disabled
             disabledTooltip="Invoice not available. Contact support if you need assistance."
           />
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx
index bc5470ce9f..e3ddf16d46 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { clientAccessCheck } from "@/lib/api/tokens/permissions";
 import useDefaultDomains from "@/lib/swr/use-default-domains";
@@ -42,6 +43,8 @@ function DubDomainsIcon(domain: string) {
 }
 
 export function DefaultDomains() {
+  const t = useTranslations("app.dub.co/(dashboard)/[slug]/settings/domains");
+
   const { id, plan, role, flags } = useWorkspace();
   const permissionsError = clientAccessCheck({
     action: "domains.write",
@@ -62,17 +65,20 @@ export function DefaultDomains() {
     <div className="my-10 grid gap-5 border-t border-gray-200 py-10">
       <div>
         <h2 className="text-xl font-semibold tracking-tight text-black">
-          Default Domains
+          {t("default-domains-title")}
         </h2>
         <p className="mt-3 text-sm text-gray-500">
-          Leverage default branded domains from Dub for specific links.{" "}
-          <Link
-            href="https://dub.co/help/article/default-dub-domains"
-            target="_blank"
-            className="underline transition-colors hover:text-gray-800"
-          >
-            Learn more.
-          </Link>
+          {t("default-branded-domains-info", {
+            component0: (
+              <Link
+                href="https://dub.co/help/article/default-dub-domains"
+                target="_blank"
+                className="underline transition-colors hover:text-gray-800"
+              >
+                {t("default-branded-domains-info_component0")}
+              </Link>
+            ),
+          })}
         </p>
       </div>
       <div className="mt-2 grid grid-cols-1 gap-3">
@@ -101,7 +107,7 @@ export function DefaultDomains() {
                   permissionsError ||
                   (slug === "dub.link" && plan === "free" ? (
                     <TooltipContent
-                      title="You can only use dub.link on a Pro plan and above. Upgrade to Pro to use this domain."
+                      title={t("pro-plan-restriction-message")}
                       cta="Upgrade to Pro"
                       href={`/${slug}/upgrade`}
                     />
@@ -135,7 +141,7 @@ export function DefaultDomains() {
                         if (error.message.includes("Upgrade to Pro")) {
                           toast.custom(() => (
                             <UpgradeRequiredToast
-                              title="You've discovered a Pro feature!"
+                              title={t("pro-feature-discovery-message")}
                               message={error.message}
                             />
                           ));
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/manage/page.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/manage/page.tsx
index 4175f10d0e..0e6fad5620 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/manage/page.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/manage/page.tsx
@@ -2,6 +2,7 @@ import AddEditIntegrationForm from "@/ui/oauth-apps/add-edit-integration-form";
 import { prisma } from "@dub/prisma";
 import { MaxWidthWrapper } from "@dub/ui";
 import { ChevronLeft } from "lucide-react";
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
@@ -10,6 +11,10 @@ export default async function IntegrationManagePage({
 }: {
   params: { slug: string; integrationSlug: string };
 }) {
+  const t = await getTranslations(
+    "app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/manage",
+  );
+
   // this is only available for Dub workspace for now
   // we might open this up to other workspaces in the future
   if (params.slug !== "dub") {
@@ -31,7 +36,7 @@ export default async function IntegrationManagePage({
       >
         <ChevronLeft className="size-4" />
         <p className="text-sm font-medium text-gray-500">
-          Back to integrations
+          {t("back-to-integrations")}
         </p>
       </Link>
 
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/template-card.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/template-card.tsx
index cdd60ba1a7..6e5a45a2a5 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/template-card.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/template-card.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import useWorkspace from "@/lib/swr/use-workspace";
 import { UtmTemplateWithUserProps } from "@/lib/types";
@@ -25,6 +26,10 @@ export function TemplateCard({
 }: {
   template: UtmTemplateWithUserProps;
 }) {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/settings/library/utm",
+  );
+
   const { id } = useWorkspace();
 
   const { openMenuTemplateId, setOpenMenuTemplateId } =
@@ -116,7 +121,7 @@ export function TemplateCard({
             content={
               <div className="grid w-full gap-px p-2 sm:w-48">
                 <Button
-                  text="Edit"
+                  text={t("edit-action")}
                   variant="outline"
                   onClick={() => {
                     setOpenPopover(false);
@@ -127,7 +132,7 @@ export function TemplateCard({
                   className="h-9 px-2 font-medium"
                 />
                 <Button
-                  text="Delete"
+                  text={t("delete-action")}
                   variant="danger-outline"
                   onClick={handleDelete}
                   icon={<Delete className="h-4 w-4" />}
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/new/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/new/page-client.tsx
index 50ed9e706e..4f2d51e9eb 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/new/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/new/page-client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { clientAccessCheck } from "@/lib/api/tokens/permissions";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -9,6 +10,10 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 
 export default function NewOAuthAppPageClient() {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/settings/oauth-apps/new",
+  );
+
   const { slug, role } = useWorkspace();
 
   const { error: permissionsError } = clientAccessCheck({
@@ -29,7 +34,7 @@ export default function NewOAuthAppPageClient() {
         >
           <ChevronLeft className="size-4" />
           <p className="text-sm font-medium text-gray-500">
-            Back to OAuth Apps
+            {t("back-to-oauth-apps")}
           </p>
         </Link>
       </MaxWidthWrapper>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/security/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/security/page-client.tsx
index 44c1d6143a..f5a95cb8ae 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/security/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/security/page-client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import useSAML from "@/lib/swr/use-saml";
 import useSCIM from "@/lib/swr/use-scim";
@@ -23,6 +24,8 @@ export default function WorkspaceSecurityClient() {
 }
 
 const SAMLSection = () => {
+  const t = useTranslations("app.dub.co/(dashboard)/[slug]/settings/security");
+
   const { plan } = useWorkspace();
   const { SAMLModal, setShowSAMLModal } = useSAMLModal();
   const { RemoveSAMLModal, setShowRemoveSAMLModal } = useRemoveSAMLModal();
@@ -40,7 +43,7 @@ const SAMLSection = () => {
         logo: (
           <img
             src={SAML_PROVIDERS.find((p) => p.name === provider)!.logo}
-            alt={provider + " logo"}
+            alt={t("provider-logo", { provider: provider })}
             className="h-8 w-8"
           />
         ),
@@ -68,10 +71,11 @@ const SAMLSection = () => {
       <div className="rounded-lg border border-gray-200 bg-white">
         <div className="relative flex flex-col space-y-6 p-5 sm:p-10">
           <div className="flex flex-col space-y-3">
-            <h2 className="text-xl font-medium">SAML Single Sign-On</h2>
+            <h2 className="text-xl font-medium">{t("saml-single-sign-on")}</h2>
             <p className="text-sm text-gray-500">
-              Set up SAML Single Sign-On (SSO) to allow your team to sign in to{" "}
-              {process.env.NEXT_PUBLIC_APP_NAME} with your identity provider.
+              {t("saml-sso-setup-description", {
+                processEnvNextPublicAppName: process.env.NEXT_PUBLIC_APP_NAME,
+              })}
             </p>
           </div>
 
@@ -108,7 +112,7 @@ const SAMLSection = () => {
                         className="rounded-md p-2 text-left text-sm font-medium text-red-600 transition-all duration-75 hover:bg-red-600 hover:text-white"
                       >
                         <IconMenu
-                          text="Remove"
+                          text={t("remove-button")}
                           icon={<ShieldOff className="h-4 w-4" />}
                         />
                       </button>
@@ -126,18 +130,18 @@ const SAMLSection = () => {
                     }}
                     className="rounded-md px-1 py-2 transition-all duration-75 hover:bg-gray-100 active:bg-gray-200"
                   >
-                    <span className="sr-only">Edit</span>
+                    <span className="sr-only">{t("edit-button")}</span>
                     <ThreeDots className="h-5 w-5 text-gray-500" />
                   </button>
                 </Popover>
               ) : (
                 <Button
-                  text="Configure"
+                  text={t("configure-button")}
                   disabled={plan !== "enterprise"}
                   {...(plan !== "enterprise" && {
                     disabledTooltip: (
                       <TooltipContent
-                        title="SAML SSO is only available on Enterprise plans. Upgrade to get started."
+                        title={t("saml-sso-enterprise-warning")}
                         cta="Contact sales"
                         href="https://dub.co/enterprise"
                         target="_blank"
@@ -157,7 +161,7 @@ const SAMLSection = () => {
             target="_blank"
             className="text-sm text-gray-400 underline underline-offset-4 transition-colors hover:text-gray-700"
           >
-            Learn more about SAML SSO.
+            {t("saml-sso-learn-more")}
           </a>
         </div>
       </div>
@@ -166,6 +170,8 @@ const SAMLSection = () => {
 };
 
 const SCIMSection = () => {
+  const t = useTranslations("app.dub.co/(dashboard)/[slug]/settings/security");
+
   const { plan } = useWorkspace();
   const { SCIMModal, setShowSCIMModal } = useSCIMModal();
   const { RemoveSCIMModal, setShowRemoveSCIMModal } = useRemoveSCIMModal();
@@ -184,7 +190,7 @@ const SCIMSection = () => {
         logo: (
           <img
             src={SAML_PROVIDERS.find((p) => p.scim === provider)!.logo}
-            alt={`${provider} logo`}
+            alt={t("provider-logo-template", { provider: provider })}
             className="h-8 w-8"
           />
         ),
@@ -212,10 +218,9 @@ const SCIMSection = () => {
       <div className="rounded-lg border border-gray-200 bg-white">
         <div className="relative flex flex-col space-y-6 p-5 sm:p-10">
           <div className="flex flex-col space-y-3">
-            <h2 className="text-xl font-medium">Directory Sync</h2>
+            <h2 className="text-xl font-medium">{t("directory-sync")}</h2>
             <p className="text-sm text-gray-500">
-              Automatically provision and deprovision users from your identity
-              provider.
+              {t("directory-sync-description")}
             </p>
           </div>
 
@@ -252,7 +257,7 @@ const SCIMSection = () => {
                         className="rounded-md p-2 text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
                       >
                         <IconMenu
-                          text="View configuration"
+                          text={t("view-configuration-button")}
                           icon={<FolderSync className="h-4 w-4" />}
                         />
                       </button>
@@ -264,7 +269,7 @@ const SCIMSection = () => {
                         className="rounded-md p-2 text-left text-sm font-medium text-red-600 transition-all duration-75 hover:bg-red-600 hover:text-white"
                       >
                         <IconMenu
-                          text="Remove"
+                          text={t("remove-button-duplicate")}
                           icon={<ShieldOff className="h-4 w-4" />}
                         />
                       </button>
@@ -282,18 +287,20 @@ const SCIMSection = () => {
                     }}
                     className="rounded-md px-1 py-2 transition-all duration-75 hover:bg-gray-100 active:bg-gray-200"
                   >
-                    <span className="sr-only">Edit</span>
+                    <span className="sr-only">
+                      {t("edit-button-duplicate")}
+                    </span>
                     <ThreeDots className="h-5 w-5 text-gray-500" />
                   </button>
                 </Popover>
               ) : (
                 <Button
-                  text="Configure"
+                  text={t("configure-button-duplicate")}
                   disabled={plan !== "enterprise"}
                   {...(plan !== "enterprise" && {
                     disabledTooltip: (
                       <TooltipContent
-                        title="SCIM Directory Sync is only available on Enterprise plans. Upgrade to get started."
+                        title={t("scim-directory-sync-enterprise-warning")}
                         cta="Contact sales"
                         href="https://dub.co/enterprise"
                         target="_blank"
@@ -313,7 +320,7 @@ const SCIMSection = () => {
             target="_blank"
             className="text-sm text-gray-400 underline underline-offset-4 transition-colors hover:text-gray-700"
           >
-            Learn more about SCIM Directory Sync.
+            {t("scim-directory-sync-learn-more")}
           </a>
         </div>
       </div>
diff --git a/apps/web/app/app.dub.co/(dashboard)/account/settings/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/account/settings/page-client.tsx
index f444f61eca..1832bcbd79 100644
--- a/apps/web/app/app.dub.co/(dashboard)/account/settings/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/account/settings/page-client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import DeleteAccountSection from "@/ui/account/delete-account";
 import UpdateDefaultWorkspace from "@/ui/account/update-default-workspace";
@@ -11,13 +12,15 @@ import { useSession } from "next-auth/react";
 import { toast } from "sonner";
 
 export default function SettingsPageClient() {
+  const t = useTranslations("app.dub.co/(dashboard)/account/settings");
+
   const { data: session, update, status } = useSession();
 
   return (
     <>
       <Form
-        title="Your Name"
-        description={`This will be your display name on ${APP_NAME}.`}
+        title={t("your-name-label")}
+        description={t("display-name-description", { APP_NAME: APP_NAME })}
         inputAttrs={{
           name: "name",
           defaultValue:
@@ -45,8 +48,8 @@ export default function SettingsPageClient() {
         }
       />
       <Form
-        title="Your Email"
-        description={`This will be the email you use to log in to ${APP_NAME} and receive notifications.`}
+        title={t("your-email-label")}
+        description={t("login-email-description", { APP_NAME: APP_NAME })}
         inputAttrs={{
           name: "email",
           type: "email",
diff --git a/apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page-client.tsx
index 62d78e8e35..261d603895 100644
--- a/apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page-client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import LayoutLoader from "@/ui/layout/layout-loader";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
@@ -9,6 +10,10 @@ import { useSession } from "next-auth/react";
 import useSWRImmutable from "swr/immutable";
 
 export function ReferralsPageClient() {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/account/settings/referrals",
+  );
+
   const { data: session, status } = useSession();
   const referralLinkId = session?.user?.["referralLinkId"];
 
@@ -25,8 +30,8 @@ export function ReferralsPageClient() {
   if (!referralLinkId || !publicToken) {
     return (
       <AnimatedEmptyState
-        title="Refer a friend"
-        description="Activate your referral link to share the word about Dub and earn cash rewards"
+        title={t("refer-a-friend")}
+        description={t("activate-referral-link")}
         cardContent={
           <>
             <Hyperlink className="size-4 text-neutral-700" />
diff --git a/apps/web/app/app.dub.co/(dashboard)/account/settings/security/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/account/settings/security/page-client.tsx
index 2aed73ad83..4438013ba1 100644
--- a/apps/web/app/app.dub.co/(dashboard)/account/settings/security/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/account/settings/security/page-client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import useUser from "@/lib/swr/use-user";
 import { RequestSetPassword } from "./request-set-password";
@@ -7,13 +8,15 @@ import { UpdatePassword } from "./update-password";
 export const dynamic = "force-dynamic";
 
 export default function SecurityPageClient() {
+  const t = useTranslations("app.dub.co/(dashboard)/account/settings/security");
+
   const { loading, user } = useUser();
 
   if (loading) {
     return (
       <div className="rounded-lg border border-gray-200 bg-white">
         <div className="flex flex-col gap-3 border-b border-gray-200 p-5 sm:p-10">
-          <h2 className="text-xl font-medium">Password</h2>
+          <h2 className="text-xl font-medium">{t("password")}</h2>
           <div className="h-3 w-56 rounded-full bg-gray-100"></div>
         </div>
         <div className="p-5 sm:p-10">
diff --git a/apps/web/app/app.dub.co/(dashboard)/account/settings/security/request-set-password.tsx b/apps/web/app/app.dub.co/(dashboard)/account/settings/security/request-set-password.tsx
index 804a810214..0b3f16b398 100644
--- a/apps/web/app/app.dub.co/(dashboard)/account/settings/security/request-set-password.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/account/settings/security/request-set-password.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import useUser from "@/lib/swr/use-user";
 import { Button } from "@dub/ui";
@@ -7,6 +8,8 @@ import { toast } from "sonner";
 
 // Displayed when the user doesn't have a password set for their account
 export const RequestSetPassword = () => {
+  const t = useTranslations("app.dub.co/(dashboard)/account/settings/security");
+
   const { user } = useUser();
   const [sending, setSending] = useState(false);
 
@@ -38,20 +41,21 @@ export const RequestSetPassword = () => {
   return (
     <div className="rounded-lg border border-gray-200 bg-white">
       <div className="flex flex-col gap-3 border-b border-gray-200 p-5 sm:p-10">
-        <h2 className="text-xl font-medium">Password</h2>
+        <h2 className="text-xl font-medium">{t("password-label")}</h2>
         <p className="pb-2 text-sm text-gray-500">
           {user?.provider && (
             <>
-              Your account is managed by{" "}
-              <span className="uppercase">{user?.provider}</span>.{" "}
+              {t("account-provider-info", {
+                component0: <span className="uppercase">{user?.provider}</span>,
+              })}
             </>
           )}
-          You can set a password to use with your Dub account.
+          {t("password-description")}
         </p>
       </div>
       <div className="p-5 sm:p-10">
         <Button
-          text="Create account password"
+          text={t("create-account-password")}
           onClick={sendPasswordSetRequest}
           loading={sending}
           disabled={sending}
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 f9d3ae4783..bba9c8548f 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,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import z from "@/lib/zod";
 import { updatePasswordSchema } from "@/lib/zod/schemas/auth";
@@ -8,6 +9,8 @@ import { toast } from "sonner";
 
 // Allow the user to update their existing password
 export const UpdatePassword = () => {
+  const t = useTranslations("app.dub.co/(dashboard)/account/settings/security");
+
   const {
     register,
     handleSubmit,
@@ -46,14 +49,18 @@ export const UpdatePassword = () => {
     >
       <div>
         <div className="flex flex-col gap-3 border-b border-gray-200 p-5 sm:p-10">
-          <h2 className="text-xl font-medium">Password</h2>
+          <h2 className="text-xl font-medium">{t("password-label")}</h2>
           <p className="pb-2 text-sm text-gray-500">
-            Manage your account password on {process.env.NEXT_PUBLIC_APP_NAME}.
+            {t("manage-account-password-description", {
+              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("current-password-label")}
+            </Label>
             <Input
               type="password"
               {...register("currentPassword", { required: true })}
@@ -68,7 +75,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("new-password-label")}</Label>
             <Input
               type="password"
               {...register("newPassword", { required: true })}
@@ -87,12 +94,12 @@ export const UpdatePassword = () => {
       <div className="flex items-center justify-between space-x-4 rounded-b-lg border-t border-gray-200 bg-gray-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-gray-500 underline decoration-dotted underline-offset-2 hover:text-gray-700">
-            Password requirements
+            {t("password-requirements-header")}
           </p>
         </Tooltip>
         <div className="shrink-0">
           <Button
-            text="Update Password"
+            text={t("update-password-button")}
             loading={isSubmitting}
             disabled={!isDirty}
             type="submit"
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/exit-button.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/exit-button.tsx
index ba3ac8c4ec..c55ec61492 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/exit-button.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/exit-button.tsx
@@ -1,9 +1,12 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { ExpandingArrow, LoadingSpinner } from "@dub/ui/icons";
 import { useOnboardingProgress } from "../use-onboarding-progress";
 
 export function ExitButton() {
+  const t = useTranslations("app.dub.co/(onboarding)/onboarding/(steps)");
+
   const { finish, isLoading, isSuccessful } = useOnboardingProgress();
 
   return (
@@ -16,7 +19,7 @@ export function ExitButton() {
       {(isLoading || isSuccessful) && (
         <LoadingSpinner className="mr-1 size-3" />
       )}
-      Skip onboarding
+      {t("skip-onboarding")}
       <ExpandingArrow className="size-3" />
     </button>
   );
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/step-page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/step-page.tsx
index 1c4ad6032b..2e6507931a 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/step-page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/step-page.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { Crown } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { PropsWithChildren, ReactNode } from "react";
 
 export function StepPage({
@@ -17,6 +18,8 @@ export function StepPage({
   paidPlanRequired?: boolean;
   className?: string;
 }>) {
+  const t = useTranslations("app.dub.co/(onboarding)/onboarding/(steps)");
+
   return (
     <div
       className={cn(
@@ -29,7 +32,7 @@ export function StepPage({
       {paidPlanRequired && (
         <div className="mt-6 flex items-center gap-1.5 rounded-full bg-gray-200/50 px-2.5 py-0.5 text-xs font-medium text-gray-700 shadow-inner">
           <Crown className="size-3" />
-          Paid plan required
+          {t("paid-plan-required")}
         </div>
       )}
       <h1 className="mt-4 text-center text-2xl font-medium leading-tight">
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/workspace/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/workspace/page.tsx
index 4388fabf00..9b9384297e 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/workspace/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/workspace/page.tsx
@@ -1,8 +1,13 @@
 import { GridPlus } from "@dub/ui/icons";
+import { useTranslations } from "next-intl";
 import { StepPage } from "../step-page";
 import { Form } from "./form";
 
 export default function Workspace() {
+  const t = useTranslations(
+    "app.dub.co/(onboarding)/onboarding/(steps)/workspace",
+  );
+
   return (
     <StepPage
       icon={GridPlus}
@@ -13,7 +18,7 @@ export default function Workspace() {
           target="_blank"
           className="underline transition-colors hover:text-gray-700"
         >
-          What is a workspace?
+          {t("what-is-a-workspace")}
         </a>
       }
     >
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/next-button.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/next-button.tsx
index 77d4867ada..5c77a798a6 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/next-button.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/next-button.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { OnboardingStep } from "@/lib/onboarding/types";
 import { Button, ButtonProps } from "@dub/ui";
@@ -8,12 +9,14 @@ export function NextButton({
   step,
   ...rest
 }: { step: OnboardingStep } & ButtonProps) {
+  const t = useTranslations("app.dub.co/(onboarding)/onboarding");
+
   const { continueTo, isLoading, isSuccessful } = useOnboardingProgress();
 
   return (
     <Button
       variant="primary"
-      text="Next"
+      text={t("next-button")}
       onClick={() => continueTo(step)}
       loading={isLoading || isSuccessful}
       {...rest}
diff --git a/apps/web/app/app.dub.co/embed/inline/page-client.tsx b/apps/web/app/app.dub.co/embed/inline/page-client.tsx
index 01319d6d7c..69208fcebd 100644
--- a/apps/web/app/app.dub.co/embed/inline/page-client.tsx
+++ b/apps/web/app/app.dub.co/embed/inline/page-client.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { DiscountProps } from "@/lib/types";
 import { ProgramCommissionDescription } from "@/ui/partners/program-commission-description";
@@ -38,6 +39,8 @@ export function EmbedInlinePageClient({
     amount: number;
   }[];
 }) {
+  const t = useTranslations("app.dub.co/embed/inline");
+
   const [copied, copyToClipboard] = useCopyToClipboard();
 
   const tabs = ["Quickstart", "Sales", "Leaderboard", "FAQ"];
@@ -55,7 +58,7 @@ export function EmbedInlinePageClient({
           <HeroBackground logo={program.logo} color={program.brandColor} />
           <span className="flex items-center gap-2 text-sm text-neutral-500">
             <MoneyBill2 className="size-4" />
-            Refer and earn
+            {t("refer-and-earn")}
           </span>
           <div className="relative mt-16 text-lg text-neutral-900 sm:max-w-[50%]">
             <ProgramCommissionDescription
@@ -64,7 +67,7 @@ export function EmbedInlinePageClient({
             />
           </div>
           <span className="mb-1.5 mt-6 block text-sm text-neutral-800">
-            Referral link
+            {t("referral-link")}
           </span>
           <div className="xs:flex-row relative flex flex-col items-center gap-2">
             <input
@@ -104,7 +107,7 @@ export function EmbedInlinePageClient({
             target="_blank"
             className="mt-4 flex items-center justify-center gap-1.5 text-neutral-500 transition-colors duration-75 hover:text-neutral-700 md:absolute md:bottom-3 md:right-3 md:mt-0 md:translate-x-0"
           >
-            <p className="text-xs font-medium">Powered by</p>
+            <p className="text-xs font-medium">{t("powered-by")}</p>
             <Wordmark className="h-3.5 text-neutral-900" />
           </a>
         </div>
diff --git a/apps/web/app/app.dub.co/embed/inline/payouts.tsx b/apps/web/app/app.dub.co/embed/inline/payouts.tsx
index cd9c04fac1..5b4c8cf4a7 100644
--- a/apps/web/app/app.dub.co/embed/inline/payouts.tsx
+++ b/apps/web/app/app.dub.co/embed/inline/payouts.tsx
@@ -1,16 +1,19 @@
 import { PayoutStatus } from "@dub/prisma/client";
 import { InfoTooltip } from "@dub/ui";
 import { currencyFormatter } from "@dub/utils";
+import { useTranslations } from "next-intl";
 
 export function EmbedPayouts({
   payouts,
 }: {
   payouts: { status: PayoutStatus; amount: number }[];
 }) {
+  const t = useTranslations("app.dub.co/embed/inline");
+
   return (
     <div className="flex flex-col justify-between gap-4 rounded-lg border border-neutral-200 bg-white p-4">
       <div className="flex items-center gap-1">
-        <p className="text-sm text-neutral-500">Payouts</p>
+        <p className="text-sm text-neutral-500">{t("payouts")}</p>
         <InfoTooltip content="Payouts are processed at the start of each month. Your earnings are automatically transferred to your bank account." />
       </div>
       <div className="grid gap-1">
diff --git a/apps/web/app/messages b/apps/web/app/messages
new file mode 100644
index 0000000000..48f1e954d3
--- /dev/null
+++ b/apps/web/app/messages
@@ -0,0 +1,390 @@
+{
+  "../ui/analytics/events": {
+    "filter": "Filter",
+    "download-as-csv": "Download as CSV",
+    "upgrade-business-plan-csv-downloads": "Upgrade to our Business Plan to enable CSV downloads for events in your workspace."
+  },
+  "../ui/analytics": {
+    "no-data-available": "No data available",
+    "no-url-configured": "No URL configured",
+    "download-as-csv": "Download as CSV"
+  },
+  "../ui/workspaces": {
+    "workspace-level-conversion-tracking": "Workspace-level conversion tracking",
+    "enable-conversion-tracking-future-links": "Enable conversion tracking for all future links in this workspace. This only affects links made with the link builder.",
+    "conversion-tracking-business-plans-only": "You can only enable conversion tracking on Business plans and above.",
+    "workspace-logo": "Workspace Logo",
+    "workspace-logo-description": "This is your workspace's logo on {processEnvNextPublicAppName}.",
+    "image-upload-recommendations": "Square image recommended. Accepted file types: .png, .jpg. Max file size: 2MB.",
+    "save-changes-button": "Save changes",
+    "upgrade-required": "Upgrade required",
+    "email-contact-panic": "panic@thedis.co",
+    "add-email-button": "Add email",
+    "pro-plan-invite-teammates_component0": "Learn more",
+    "pro-plan-invite-teammates": " saved. You'll need a pro plan to invite teammates. {component0}",
+    "workspace-name": "Workspace Name",
+    "company-name": "Acme, Inc.",
+    "workspace-slug": "Workspace Slug",
+    "app-domain": "app.{processEnvNextPublicAppDomain}",
+    "workspace-id": "acme",
+    "create-workspace": "Create workspace"
+  },
+  "../ui/auth/login": {
+    "continue-with-github": "Continue with Github",
+    "email-address": "panic@thedis.co",
+    "password-optional": "Password (optional)",
+    "continue-with-password-or-email": "Continue with {passwordPasswordEmail}",
+    "forgot-password": "Forgot password?"
+  },
+  "../ui/account": {
+    "subscribed-to-product-updates": "Subscribed to product updates",
+    "user-id-label": "Your User ID",
+    "account-identifier-description": "This is your unique account identifier on Dub."
+  },
+  "../ui/modals/link-builder": {
+    "link": "(link)",
+    "failed-to-load-templates": "Failed to load templates",
+    "utm-templates": "UTM Templates",
+    "no-templates-found": "No templates found",
+    "link-password": "Link Password",
+    "restrict-access-encrypt-password": "Restrict access to your short links by encrypting it with a password.",
+    "quick-access-instruction_component0": "P",
+    "quick-access-instruction": "Press {component0}  to open this quickly",
+    "shortcut-key-p": "P",
+    "password-label": "Password",
+    "create-password": "Create password",
+    "remove-password": "Remove password",
+    "cancel": "Cancel"
+  },
+  "../ui/modals": {
+    "template-name": "Template Name",
+    "new-template-title": "New Template",
+    "parameters-label": "Parameters",
+    "create-template-action": "Create template",
+    "learn-more": "Learn more",
+    "confirm-archive-unarchive": "Confirm {propsArchivedUnarchiveArchive}",
+    "api-key-created": "API Key Created",
+    "api-key-security-notice": "For security reasons, we will only show you the key once. Please copy and store it somewhere safe.",
+    "api-key-label": "API key",
+    "done-button": "Done",
+    "delete-shortlink": "Delete {shortlink}",
+    "warning-deleting-link-analytics": "Warning: Deleting this link will remove all of its analytics. This action cannot be undone – proceed with caution.",
+    "verify-type-shortlink": "To verify, type {component0}  below",
+    "confirm-delete": "Confirm delete",
+    "workspace-logo": "Workspace logo",
+    "workspace-removal-confirmation": "{inviteThisWillRevokeSessionUserEmailEmailYouReAboutToLeaveThisWillRemove}{component0}{inviteSInvitationToJoinYourWorkspaceSessionUserEmailEmailYouWillLoseAllAccessToThisWorkspaceFromYourWorkspace} Are you sure you want to continue?",
+    "confirm-button": "Confirm",
+    "qr-code-title": "QR Code",
+    "qr-code-custom-design-description": "Set a custom QR code design to improve click-through rates.",
+    "qr-code-quick-open-instruction_component0": "Q",
+    "qr-code-quick-open-instruction": "Press {component0}  to open this quickly",
+    "qr-code-quick-open-key": "Q",
+    "qr-code-preview-title": "QR Code Preview",
+    "qr-code-customization-brand-description": "Customize your QR code to fit your brand.",
+    "qr-code-logo-label": "Logo",
+    "qr-code-logo-display-description": "Display your logo in the center of the QR code.",
+    "qr-code-logo-pro-plan-requirement": "You need to be on the Pro plan and above to customize your QR Code logo.",
+    "qr-code-color-label": "QR Code Color",
+    "button-cancel": "Cancel",
+    "button-save-changes": "Save changes",
+    "button-download-svg": "Download SVG",
+    "button-download-png": "Download PNG",
+    "button-download-jpeg": "Download JPEG",
+    "button-copy-image": "Copy Image",
+    "button-copy-url": "Copy URL",
+    "bitly-logo": "Bitly logo",
+    "import-your-bitly-links": "Import Your Bitly Links",
+    "easily-import-bitly-links": "Easily import all your existing Bitly links into {processEnvNextPublicAppName} with just a few clicks.",
+    "connecting-to-bitly": "Connecting to Bitly",
+    "domains-header": "Domains",
+    "tags-found-import-all": "{tagsLength} tags found. Import all?",
+    "no-bitly-groups-warning": "It looks like you don't have any Bitly groups with custom domains (non bit.ly domains).",
+    "confirm-import": "Confirm import",
+    "sign-in-different-bitly-account": "Sign in to a different Bitly account?",
+    "sign-in-with-bitly": "Sign in with Bitly",
+    "bitly-logo-duplicate": "Bitly logo",
+    "read-the-guide": "Read the guide"
+  },
+  "../ui/oauth-apps": {
+    "client-id": "Client ID",
+    "client-secret-label": "Client Secret",
+    "client-secret-warning": "Be sure to copy your client secret. You won’t be able to see it again.",
+    "client-secret-label-duplicate": "Client Secret",
+    "application-name": "Application name",
+    "my-app-name": "My App",
+    "application-slug": "Application slug",
+    "description": "Description",
+    "add-description-placeholder": "Add a description",
+    "overview": "Overview",
+    "my-awesome-integration-title": "## My Awesome Integration",
+    "screenshots": "Screenshots",
+    "developer-name": "Developer name",
+    "acme-inc": "Acme Inc.",
+    "website-url": "Website URL",
+    "acme-website-url": "https://acme.com"
+  },
+  "../ui/webhooks": {
+    "response-message": "Response",
+    "http-status-code": "HTTP status code",
+    "request-message": "Request",
+    "back-to-webhooks": "Back to webhooks",
+    "copy-webhook-id": "Copy Webhook ID",
+    "send-test-event": "Send test event",
+    "delete-webhook": "Delete webhook"
+  },
+  "../ui/domains": {
+    "provisioned-by-dub": "Provisioned by Dub",
+    "learn-more": "Learn more",
+    "clicks": "clicks",
+    "dns-setup-success_component0": "Learn more.",
+    "dns-setup-success": "Good news! Your DNS records are set up correctly, but it can take some time for them to propagate globally. {component0}",
+    "link-settings": "Link Settings",
+    "edit-link": "Edit Link",
+    "qr-code": "QR Code",
+    "copy-link-id": "Copy Link ID",
+    "domain-settings": "Domain Settings",
+    "edit-domain": "Edit Domain",
+    "set-as-primary": "Set as Primary",
+    "transfer-domain": "Transfer",
+    "delete-domain": "Delete"
+  },
+  "../ui/links": {
+    "link-not-found": "Link Not Found",
+    "link-not-found-bummer-message": "Bummer! The link you are looking for does not exist. You either typed in the wrong URL or don't have access to this link.",
+    "no-links-yet": "No links yet"
+  },
+  "../ui/shared": {
+    "pro": "Pro"
+  },
+  "../ui/layout": {
+    "root-domain-links": "Root Domain Links"
+  },
+  "../ui/layout/sidebar": {
+    "payouts-title": " Payouts",
+    "upcoming-payouts": "Upcoming payouts",
+    "total-payouts": "Total payouts",
+    "connect-payouts": "Connect payouts"
+  },
+  "admin.dub.co/(dashboard)/components": {
+    "app-dub-co-login-link": "app.dub.co login link",
+    "partners-dub-co-login-link": "partners.dub.co login link",
+    "id": "ID",
+    "plan": "Plan",
+    "domains": "Domains",
+    "links": "Links",
+    "clicks": "Clicks"
+  },
+  "app.dub.co/embed/inline": {
+    "refer-and-earn": " Refer and earn",
+    "referral-link": "Referral link",
+    "powered-by": "Powered by",
+    "payouts": "Payouts"
+  },
+  "../emails": {
+    "referral-sale-notification": "You just made a {earningsInDollars} sale via your referral link",
+    "referral-sale-success": "You just made a {earningsInDollars} referral sale!",
+    "purchase-notification-with-referral": "Congratulations! Someone made a {component0}  purchase on {component1}  using your referral link ( {component2} ).",
+    "commission-receipt-notification": "Your received {component0} in commission for this sale and it will be included in your next payout.",
+    "view-sale-link": "View sale",
+    "new-workspace-api-key-created": "New Workspace API Key Created",
+    "new-workspace-api-key-created-whitespace": "New Workspace API Key Created",
+    "api-key-created-for-workspace_component1": "\"",
+    "api-key-created-for-workspace": "You've created a new API key for your Dub.co workspace {component0} with the name {component1} on {formatDateNewDateToString}.",
+    "token-type-info": "Since this is a {component0} token, it has",
+    "view-api-keys": "View API Keys",
+    "delete-api-key-instructions": "If you did not create this API key, you can {component0}  from your account.",
+    "delete-this-key": "delete this key",
+    "webhook-failing-deliver": "Webhook is failing to deliver",
+    "webhook-failing-deliver-whitespace": "Webhook is failing to deliver",
+    "webhook-url-failed-deliver": "Your webhook {component0} has failed to deliver",
+    "webhook-disabled-after-failures": " times and will be disabled after {WEBHOOK_FAILURE_DISABLE_THRESHOLD} consecutive failures.",
+    "review-webhook-details": "Please review the webhook details and update the URL if necessary to restore functionality.",
+    "edit-webhook": "Edit Webhook",
+    "new-feedback-received": "New Feedback Received",
+    "dub-title": "Dub",
+    "new-feedback-received-multiline": "New Feedback Received",
+    "new-feedback-from-email": "New feedback from {component0}",
+    "failed-payment-attempt-notification": "{attemptCount,select,true{2nd } false{{attemptCount,select,true{3rd  } false{}}}} Failed Payment for Dub.co",
+    "greeting-user": "Hey{userNameUserName}!",
+    "payment-failed-notification_component0": "$",
+    "payment-failed-notification_component2": "update your payment information",
+    "payment-failed-notification": "Your payment of {component0} for your Dub workspace {component1} has failed. Please {component2}  using the link below:",
+    "update-payment-information": "Update payment information",
+    "customer-support-invitation": "If you have any questions, feel free to respond to this email – we're happy to help!"
+  },
+  "partners.dub.co/(auth)/(default)": {
+    "partner-label": "Partner",
+    "dub-technologies-inc": " Dub Technologies, Inc.",
+    "privacy-policy": "Privacy Policy",
+    "terms-of-service": "Terms of Service"
+  },
+  "[domain]/not-found": {
+    "link-not-found": "Link Not Found",
+    "link-not-exist-message": "This link does not exist. Please check the URL and try again.",
+    "create-free-branded-link": "Create Your Free Branded Link"
+  },
+  "partners.dub.co/(dashboard)/settings/payouts": {
+    "payout-details": "Payout details",
+    "invoice-details": "Invoice details",
+    "view-all": "View all",
+    "close-button": "Close"
+  },
+  "app.dub.co/(auth)/login": {
+    "sign-in-dub-account": "Sign in to your Dub account",
+    "dont-have-account-sign-up-link_component0": "Sign up",
+    "dont-have-account-sign-up-link": "Don't have an account? {component0}"
+  },
+  "app.dub.co/(auth)/auth/saml": {
+    "saml-authentication": "SAML Authentication",
+    "app-name-saml-verification": "{APP_NAME} is verifying your identity via SAML. This might take a few seconds..."
+  },
+  "partners.dub.co/(auth)/(custom)/[programSlug]/login": {
+    "framer-logo": "Framer Logo",
+    "sign-in-framer-partners": "Sign in to Framer Partners",
+    "not-a-framer-partner-apply-today_component0": "Apply today",
+    "not-a-framer-partner-apply-today": "Not a Framer Partner? {component0}"
+  },
+  "app.dub.co/(dashboard)/account/settings/referrals": {
+    "refer-a-friend": "Refer a friend",
+    "activate-referral-link": "Activate your referral link to share the word about Dub and earn cash rewards"
+  },
+  "app.dub.co/(auth)/oauth/authorize": {
+    "select-workspace-api-access": "Select a workspace to grant API access to",
+    "create-new-workspace": "Create new workspace",
+    "decline-action": "Decline",
+    "authorize-action": "Authorize"
+  },
+  "app.dub.co/(dashboard)/account/settings": {
+    "your-name-label": "Your Name",
+    "display-name-description": "This will be your display name on {APP_NAME}.",
+    "your-email-label": "Your Email",
+    "login-email-description": "This will be the email you use to log in to {APP_NAME} and receive notifications."
+  },
+  "partners.dub.co/(apply)/[programSlug]/apply": {
+    "name-label": "Name",
+    "company-name": "Acme, Inc.",
+    "email-label": "Email",
+    "email-address": "panic@thedis.co",
+    "website-social-media_component0": "(optional)",
+    "website-social-media": "Website / Social media channel {component0}",
+    "website-url": "https://example.com",
+    "promotion-plan": "How do you plan to promote",
+    "additional-questions_component0": "(optional)",
+    "additional-questions": "Any additional questions or comments? {component0}",
+    "submit-application": "Submit application"
+  },
+  "app.dub.co/(onboarding)/onboarding/(steps)": {
+    "paid-plan-required": " Paid plan required",
+    "skip-onboarding": " Skip onboarding"
+  },
+  "app.dub.co/(dashboard)/account/settings/security": {
+    "password-label": "Password",
+    "password-description": " You can set a password to use with your Dub account.",
+    "account-provider-info": "Your account is managed by {component0}.",
+    "create-account-password": "Create account password",
+    "manage-account-password-description": "Manage your account password on {processEnvNextPublicAppName}.",
+    "current-password-label": "Current Password",
+    "new-password-label": "New Password",
+    "password-requirements-header": "Password requirements",
+    "update-password-button": "Update Password",
+    "password": "Password"
+  },
+  "app.dub.co/(auth)/auth/reset-password/[token]": {
+    "invalid-reset-token": "Invalid Reset Token",
+    "invalid-or-expired-reset-token-message": "The password reset token is invalid or expired. Please request a new one.",
+    "reset-password": "Reset your password",
+    "enter-new-password": "Enter new password for your account."
+  },
+  "app.dub.co/(dashboard)/[slug]/settings/library/utm": {
+    "edit-action": "Edit",
+    "delete-action": "Delete"
+  },
+  "app.dub.co/(onboarding)/onboarding": {
+    "next-button": "Next"
+  },
+  "app.dub.co/(onboarding)/onboarding/(steps)/workspace": {
+    "what-is-a-workspace": "What is a workspace?"
+  },
+  "app.dub.co/(dashboard)/[slug]/settings/oauth-apps/new": {
+    "back-to-oauth-apps": "Back to OAuth Apps"
+  },
+  "app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/manage": {
+    "back-to-integrations": "Back to integrations"
+  },
+  "partners.dub.co/(apply)/[programSlug]/apply/success": {
+    "enrolled": "Enrolled",
+    "overview": "Overview",
+    "payouts": "Payouts",
+    "events": "Events",
+    "links": "Links",
+    "resources": "Resources",
+    "overview-duplicate": "Overview",
+    "refer-and-earn": "Refer and Earn",
+    "earn": "Earn",
+    "conversion-reward": "for each conversion, and again",
+    "monthly-earnings": "every month",
+    "customer-lifetime-earnings": "for the customer's lifetime.",
+    "referral-link": "Referral link",
+    "referral-link-example": "refer.dub.co/steven",
+    "invite-via-email": "Invite via email",
+    "earnings": "Earnings",
+    "last-24-hours": "Last 24 hours",
+    "oct-1": "Oct 1",
+    "oct-5": "Oct 5",
+    "oct-10": "Oct 10",
+    "oct-15": "Oct 15",
+    "oct-20": "Oct 20",
+    "oct-25": "Oct 25",
+    "oct-31": "Oct 31"
+  },
+  "app.dub.co/(dashboard)/[slug]/settings/domains": {
+    "default-domains-title": "Default Domains",
+    "default-branded-domains-info_component0": "Learn more.",
+    "default-branded-domains-info": "Leverage default branded domains from Dub for specific links. {component0}",
+    "pro-plan-restriction-message": "You can only use dub.link on a Pro plan and above. Upgrade to Pro to use this domain.",
+    "pro-feature-discovery-message": "You've discovered a Pro feature!"
+  },
+  "app.dub.co/(dashboard)/[slug]/programs/[programId]/partners": {
+    "all-items": "All",
+    "top-partners": "Top partners",
+    "approved-status": "Approved",
+    "pending-status": "Pending"
+  },
+  "api/og/analytics": {
+    "favicon-icon": "favicon",
+    "last-24-hours": "Last 24 hours",
+    "total-clicks": "Total Clicks"
+  },
+  "app.dub.co/(dashboard)/[slug]/settings/security": {
+    "provider-logo": "{provider} logo",
+    "saml-single-sign-on": "SAML Single Sign-On",
+    "saml-sso-setup-description": "Set up SAML Single Sign-On (SSO) to allow your team to sign in to {processEnvNextPublicAppName} with your identity provider.",
+    "remove-button": "Remove",
+    "edit-button": "Edit",
+    "configure-button": "Configure",
+    "saml-sso-enterprise-warning": "SAML SSO is only available on Enterprise plans. Upgrade to get started.",
+    "saml-sso-learn-more": "Learn more about SAML SSO.",
+    "provider-logo-template": "{provider} logo",
+    "directory-sync": "Directory Sync",
+    "directory-sync-description": "Automatically provision and deprovision users from your identity provider.",
+    "view-configuration-button": "View configuration",
+    "remove-button-duplicate": "Remove",
+    "edit-button-duplicate": "Edit",
+    "configure-button-duplicate": "Configure",
+    "scim-directory-sync-enterprise-warning": "SCIM Directory Sync is only available on Enterprise plans. Upgrade to get started.",
+    "scim-directory-sync-learn-more": "Learn more about SCIM Directory Sync."
+  },
+  "app.dub.co/(dashboard)/[slug]/settings/billing/invoices": {
+    "invoices-title": "Invoices",
+    "invoices-history-description": "A history of all your Dub invoices",
+    "no-invoices-found-message": "No invoices found",
+    "no-invoices-yet-message": "You don't have any invoices yet",
+    "total-label": "Total",
+    "view-invoice-button": "View invoice",
+    "view-invoice-label": "View invoice"
+  },
+  "../ui/auth/register": {
+    "continue-with-google": "Continue with Google",
+    "continue-with-github": "Continue with GitHub"
+  }
+}
diff --git a/apps/web/app/partners.dub.co/(apply)/[programSlug]/apply/form.tsx b/apps/web/app/partners.dub.co/(apply)/[programSlug]/apply/form.tsx
index 225b633288..9c7602e93f 100644
--- a/apps/web/app/partners.dub.co/(apply)/[programSlug]/apply/form.tsx
+++ b/apps/web/app/partners.dub.co/(apply)/[programSlug]/apply/form.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { createProgramApplicationAction } from "@/lib/actions/partners/create-program-application";
 import { Program } from "@dub/prisma/client";
@@ -25,6 +26,8 @@ export function ProgramApplicationForm({
 }: {
   program: Pick<Program, "id" | "slug" | "name">;
 }) {
+  const t = useTranslations("partners.dub.co/(apply)/[programSlug]/apply");
+
   const { isMobile } = useMediaQuery();
   const router = useRouter();
   const { data: session } = useSession();
@@ -91,7 +94,9 @@ export function ProgramApplicationForm({
       className="flex flex-col gap-6"
     >
       <label>
-        <span className="text-sm font-medium text-gray-800">Name</span>
+        <span className="text-sm font-medium text-gray-800">
+          {t("name-label")}
+        </span>
         <input
           type="text"
           className={cn(
@@ -100,7 +105,7 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="Acme, Inc."
+          placeholder={t("company-name")}
           autoFocus={!isMobile}
           {...register("name", {
             required: true,
@@ -109,7 +114,9 @@ export function ProgramApplicationForm({
       </label>
 
       <label>
-        <span className="text-sm font-medium text-gray-800">Email</span>
+        <span className="text-sm font-medium text-gray-800">
+          {t("email-label")}
+        </span>
         <input
           type="email"
           className={cn(
@@ -118,7 +125,7 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="panic@thedis.co"
+          placeholder={t("email-address")}
           {...register("email", {
             required: true,
           })}
@@ -127,8 +134,13 @@ export function ProgramApplicationForm({
 
       <label>
         <span className="text-sm font-medium text-gray-800">
-          Website / Social media channel
-          <span className="font-normal text-neutral-500"> (optional)</span>
+          {t("website-social-media", {
+            component0: (
+              <span className="font-normal text-neutral-500">
+                {t("website-social-media_component0")}
+              </span>
+            ),
+          })}
         </span>
         <input
           type="text"
@@ -138,14 +150,15 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="https://example.com"
+          placeholder={t("website-url")}
           {...register("website")}
         />
       </label>
 
       <label>
         <span className="text-sm font-medium text-gray-800">
-          How do you plan to promote {program.name}?
+          {t("promotion-plan")}
+          {program.name}?
         </span>
         <ReactTextareaAutosize
           className={cn(
@@ -162,8 +175,13 @@ export function ProgramApplicationForm({
 
       <label>
         <span className="text-sm font-medium text-gray-800">
-          Any additional questions or comments?
-          <span className="font-normal text-neutral-500"> (optional)</span>
+          {t("additional-questions", {
+            component0: (
+              <span className="font-normal text-neutral-500">
+                {t("additional-questions_component0")}
+              </span>
+            ),
+          })}
         </span>
         <ReactTextareaAutosize
           className={cn(
@@ -179,7 +197,7 @@ export function ProgramApplicationForm({
       </label>
 
       <Button
-        text="Submit application"
+        text={t("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/partners.dub.co/(apply)/[programSlug]/apply/success/screenshot.tsx b/apps/web/app/partners.dub.co/(apply)/[programSlug]/apply/success/screenshot.tsx
index 1f1e2ce4ab..dca082366d 100644
--- a/apps/web/app/partners.dub.co/(apply)/[programSlug]/apply/success/screenshot.tsx
+++ b/apps/web/app/partners.dub.co/(apply)/[programSlug]/apply/success/screenshot.tsx
@@ -1,11 +1,16 @@
 import { ProgramProps } from "@/lib/types";
 import { cn, DICEBEAR_AVATAR_URL, truncate } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import { SVGProps, useId } from "react";
 
 export function Screenshot({
   program,
   ...rest
 }: { program: Pick<ProgramProps, "name" | "logo"> } & SVGProps<SVGSVGElement>) {
+  const t = useTranslations(
+    "partners.dub.co/(apply)/[programSlug]/apply/success",
+  );
+
   const id = useId();
 
   return (
@@ -92,7 +97,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="68" y="97.636">
-            Enrolled
+            {t("enrolled")}
           </tspan>
         </text>
         <g clipPath={`url(#${id}-e)`}>
@@ -131,7 +136,7 @@ export function Screenshot({
             style={{ whiteSpace: "pre" }}
           >
             <tspan x="46" y="143.727">
-              Overview
+              {t("overview")}
             </tspan>
           </text>
         </g>
@@ -169,7 +174,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="46" y="173.727">
-            Payouts
+            {t("payouts")}
           </tspan>
         </text>
         <g
@@ -190,7 +195,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="46" y="203.727">
-            Events
+            {t("events")}
           </tspan>
         </text>
         <path
@@ -216,7 +221,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="46" y="233.727">
-            Links
+            {t("links")}
           </tspan>
         </text>
         <path
@@ -253,7 +258,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="46" y="263.727">
-            Resources
+            {t("resources")}
           </tspan>
         </text>
         <path
@@ -273,7 +278,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="367.5" y="72.727">
-            Overview
+            {t("overview-duplicate")}
           </tspan>
         </text>
         <g clipPath={`url(#${id}-h)`}>
@@ -316,7 +321,7 @@ export function Screenshot({
             style={{ whiteSpace: "pre" }}
           >
             <tspan x="417.5" y="142.091">
-              Refer and Earn
+              {t("refer-and-earn")}
             </tspan>
           </text>
           <text
@@ -339,7 +344,7 @@ export function Screenshot({
             x="391.5"
             y="262.045"
           >
-            <tspan>Earn </tspan>
+            <tspan>{t("earn")}</tspan>
             <tspan
               fontWeight="600"
               // Blur to avoid confusing a placeholder number for a real number
@@ -347,8 +352,8 @@ export function Screenshot({
             >
               20%
             </tspan>
-            <tspan> for each conversion, and again </tspan>
-            <tspan fontWeight="600">every month</tspan>
+            <tspan>{t("conversion-reward")}</tspan>
+            <tspan fontWeight="600">{t("monthly-earnings")}</tspan>
           </text>
           <text
             xmlSpace="preserve"
@@ -360,7 +365,7 @@ export function Screenshot({
             x="391.5"
             y="289.045"
           >
-            for the customer's lifetime.
+            {t("customer-lifetime-earnings")}
           </text>
           <text
             xmlSpace="preserve"
@@ -371,7 +376,7 @@ export function Screenshot({
             style={{ whiteSpace: "pre" }}
           >
             <tspan x="391.5" y="334.091">
-              Referral link
+              {t("referral-link")}
             </tspan>
           </text>
           <path
@@ -390,7 +395,7 @@ export function Screenshot({
             style={{ whiteSpace: "pre" }}
           >
             <tspan x="403.5" y="371.091">
-              refer.dub.co/steven
+              {t("referral-link-example")}
             </tspan>
           </text>
           <path
@@ -424,7 +429,7 @@ export function Screenshot({
             style={{ whiteSpace: "pre" }}
           >
             <tspan x="743.521" y="371.091">
-              Invite via email
+              {t("invite-via-email")}
             </tspan>
           </text>
           <g filter={`url(#${id}-j)`} style={{ mixBlendMode: "overlay" }}>
@@ -691,7 +696,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="391.5" y="470.591">
-            Earnings
+            {t("earnings")}
           </tspan>
         </text>
         <text
@@ -732,7 +737,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="1436.5" y="478.364">
-            Last 24 hours
+            {t("last-24-hours")}
           </tspan>
         </text>
         <path
@@ -822,7 +827,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="431.5" y="856.864">
-            Oct 1
+            {t("oct-1")}
           </tspan>
         </text>
         <text
@@ -833,7 +838,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="605.167" y="856.864">
-            Oct 5
+            {t("oct-5")}
           </tspan>
         </text>
         <text
@@ -844,7 +849,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="779.833" y="856.864">
-            Oct 10
+            {t("oct-10")}
           </tspan>
         </text>
         <text
@@ -855,7 +860,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="960.5" y="856.864">
-            Oct 15
+            {t("oct-15")}
           </tspan>
         </text>
         <text
@@ -866,7 +871,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="1141.17" y="856.864">
-            Oct 20
+            {t("oct-20")}
           </tspan>
         </text>
         <text
@@ -877,7 +882,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="1323.83" y="856.864">
-            Oct 25
+            {t("oct-25")}
           </tspan>
         </text>
         <text
@@ -888,7 +893,7 @@ export function Screenshot({
           style={{ whiteSpace: "pre" }}
         >
           <tspan x="1506.5" y="856.864">
-            Oct 31
+            {t("oct-31")}
           </tspan>
         </text>
         <mask
diff --git a/apps/web/app/partners.dub.co/(auth)/(custom)/[programSlug]/login/page.tsx b/apps/web/app/partners.dub.co/(auth)/(custom)/[programSlug]/login/page.tsx
index 6528648aec..65465cd5c5 100644
--- a/apps/web/app/partners.dub.co/(auth)/(custom)/[programSlug]/login/page.tsx
+++ b/apps/web/app/partners.dub.co/(auth)/(custom)/[programSlug]/login/page.tsx
@@ -1,5 +1,6 @@
 import { FramerButton } from "@/ui/auth/login/framer-button";
 import { APP_DOMAIN, constructMetadata } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
@@ -13,6 +14,10 @@ export default function CustomPartnerLoginPage({
 }: {
   params: { programSlug: string };
 }) {
+  const t = useTranslations(
+    "partners.dub.co/(auth)/(custom)/[programSlug]/login",
+  );
+
   if (programSlug !== "framer") {
     redirect("/login");
   }
@@ -22,22 +27,25 @@ export default function CustomPartnerLoginPage({
       <div className="animate-slide-up-fade relative flex w-auto flex-col items-center [--offset:10px] [animation-duration:1.3s] [animation-fill-mode:both]">
         <img
           src="https://assets.dub.co/testimonials/companies/framer.svg"
-          alt="Framer Logo"
+          alt={t("framer-logo")}
           className="h-8"
         />
       </div>
       <div className="animate-slide-up-fade flex flex-col items-center justify-center gap-2 [--offset:10px] [animation-delay:0.15s] [animation-duration:1.3s] [animation-fill-mode:both]">
         <h1 className="text-lg font-medium text-neutral-800">
-          Sign in to Framer Partners
+          {t("sign-in-framer-partners")}
         </h1>
         <p className="text-center text-sm text-neutral-700">
-          Not a Framer Partner?&nbsp;
-          <Link
-            href="/framer/apply"
-            className="font-normal underline underline-offset-2 transition-colors hover:text-black"
-          >
-            Apply today
-          </Link>
+          {t("not-a-framer-partner-apply-today", {
+            component0: (
+              <Link
+                href="/framer/apply"
+                className="font-normal underline underline-offset-2 transition-colors hover:text-black"
+              >
+                {t("not-a-framer-partner-apply-today_component0")}
+              </Link>
+            ),
+          })}
         </p>
       </div>
 
diff --git a/apps/web/app/partners.dub.co/(auth)/(default)/layout.tsx b/apps/web/app/partners.dub.co/(auth)/(default)/layout.tsx
index 04ae4865af..312e48657c 100644
--- a/apps/web/app/partners.dub.co/(auth)/(default)/layout.tsx
+++ b/apps/web/app/partners.dub.co/(auth)/(default)/layout.tsx
@@ -1,10 +1,13 @@
 import { Grid, Wordmark } from "@dub/ui";
+import { useTranslations } from "next-intl";
 
 export default function PartnerAuthLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const t = useTranslations("partners.dub.co/(auth)/(default)");
+
   return (
     <div className="flex min-h-screen flex-col">
       <div className="fixed inset-0 [mask-image:radial-gradient(60%_60%_at_50%_0%,black,transparent)]">
@@ -14,14 +17,17 @@ export default function PartnerAuthLayout({
       <div className="relative z-10 mt-10 flex w-full flex-col items-center justify-center px-3 text-center md:px-8">
         <div className="animate-slide-up-fade relative flex w-auto flex-col items-center [--offset:10px] [animation-duration:1.3s] [animation-fill-mode:both]">
           <Wordmark className="relative h-10" />
-          <span className="text-sm font-medium text-neutral-700">Partner</span>
+          <span className="text-sm font-medium text-neutral-700">
+            {t("partner-label")}
+          </span>
         </div>
         {children}
       </div>
       <div className="flex grow flex-col justify-end">
         <div className="relative flex w-full flex-col items-center justify-center gap-2 py-10 pb-6">
           <p className="text-xs text-gray-600">
-            © {new Date().getFullYear()} Dub Technologies, Inc.
+            © {new Date().getFullYear()}
+            {t("dub-technologies-inc")}
           </p>
           <div className="flex gap-3 text-center text-xs text-gray-500 underline underline-offset-2">
             <a
@@ -29,14 +35,14 @@ export default function PartnerAuthLayout({
               target="_blank"
               className="hover:text-gray-800"
             >
-              Privacy Policy
+              {t("privacy-policy")}
             </a>
             <a
               href="https://dub.co/legal/terms"
               target="_blank"
               className="hover:text-gray-800"
             >
-              Terms of Service
+              {t("terms-of-service")}
             </a>
             <a
               href="https://app.dub.co"
diff --git a/apps/web/app/partners.dub.co/(dashboard)/settings/payouts/payout-details-sheet.tsx b/apps/web/app/partners.dub.co/(dashboard)/settings/payouts/payout-details-sheet.tsx
index 70214db429..6fe2e83294 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/settings/payouts/payout-details-sheet.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/settings/payouts/payout-details-sheet.tsx
@@ -23,6 +23,7 @@ import {
   formatDate,
   formatDateTime,
 } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { Dispatch, Fragment, SetStateAction, useMemo } from "react";
 import useSWR from "swr";
@@ -36,6 +37,8 @@ function PayoutDetailsSheetContent({
   payout,
   setIsOpen,
 }: PayoutDetailsSheetProps) {
+  const t = useTranslations("partners.dub.co/(dashboard)/settings/payouts");
+
   const { partner } = usePartnerProfile();
 
   const {
@@ -168,7 +171,7 @@ function PayoutDetailsSheetContent({
       <div>
         <div className="flex items-start justify-between border-b border-neutral-200 p-6">
           <Sheet.Title className="text-xl font-semibold">
-            Payout details
+            {t("payout-details")}
           </Sheet.Title>
           <Sheet.Close asChild>
             <Button
@@ -180,7 +183,7 @@ function PayoutDetailsSheetContent({
         </div>
         <div className="flex flex-col gap-4 p-6">
           <div className="text-base font-medium text-neutral-900">
-            Invoice details
+            {t("invoice-details")}
           </div>
           <div className="grid grid-cols-2 gap-3 text-sm">
             {Object.entries(invoiceData).map(([key, value]) => (
@@ -206,7 +209,7 @@ function PayoutDetailsSheetContent({
                       "flex h-7 items-center rounded-lg border px-2 text-sm",
                     )}
                   >
-                    View all
+                    {t("view-all")}
                   </Link>
                 </div>
               )}
@@ -221,7 +224,7 @@ function PayoutDetailsSheetContent({
             type="button"
             variant="secondary"
             onClick={() => setIsOpen(false)}
-            text="Close"
+            text={t("close-button")}
             className="w-fit"
           />
         </div>
diff --git a/apps/web/emails/api-key-created.tsx b/apps/web/emails/api-key-created.tsx
index 76164a0b01..af78b84b0c 100644
--- a/apps/web/emails/api-key-created.tsx
+++ b/apps/web/emails/api-key-created.tsx
@@ -12,6 +12,7 @@ import {
   Tailwind,
   Text,
 } from "@react-email/components";
+import { useTranslations } from "next-intl";
 import Footer from "./components/footer";
 
 export default function APIKeyCreated({
@@ -37,10 +38,12 @@ export default function APIKeyCreated({
     permissions: string;
   };
 }) {
+  const t = useTranslations("../emails");
+
   return (
     <Html>
       <Head />
-      <Preview>New Workspace API Key Created</Preview>
+      <Preview>{t("new-workspace-api-key-created")}</Preview>
       <Tailwind>
         <Body className="mx-auto my-auto bg-white font-sans">
           <Container className="mx-auto my-10 max-w-[500px] rounded border border-solid border-gray-200 px-10 py-5">
@@ -53,16 +56,25 @@ export default function APIKeyCreated({
               />
             </Section>
             <Heading className="mx-0 my-7 p-0 text-center text-xl font-semibold text-black">
-              New Workspace API Key Created
+              {t("new-workspace-api-key-created-whitespace")}
             </Heading>
             <Text className="text-sm leading-6 text-black">
-              You've created a new API key for your Dub.co workspace{" "}
-              <strong>{workspace.name}</strong> with the name{" "}
-              <strong>"{token.name}"</strong> on{" "}
-              {formatDate(new Date().toString())}.
+              {t("api-key-created-for-workspace", {
+                component0: <strong>{workspace.name}</strong>,
+                component1: (
+                  <strong>
+                    {t("api-key-created-for-workspace_component1")}
+                    {token.name}
+                    {t("api-key-created-for-workspace_component1")}
+                  </strong>
+                ),
+                formatDateNewDateToString: formatDate(new Date().toString()),
+              })}
             </Text>
             <Text className="text-sm leading-6 text-black">
-              Since this is a <strong>{token.type}</strong> token, it has{" "}
+              {t("token-type-info", {
+                component0: <strong>{token.type}</strong>,
+              })}
               {token.permissions}.
             </Text>
             <Section className="mb-8 mt-4 text-center">
@@ -70,18 +82,20 @@ export default function APIKeyCreated({
                 className="rounded-full bg-black px-6 py-3 text-center text-[12px] font-semibold text-white no-underline"
                 href={`https://app.dub.co/${workspace.slug}/settings/tokens`}
               >
-                View API Keys
+                {t("view-api-keys")}
               </Link>
             </Section>
             <Text className="text-sm leading-6 text-black">
-              If you did not create this API key, you can{" "}
-              <Link
-                href={`https://app.dub.co/${workspace.slug}/settings/tokens`}
-                className="text-black underline"
-              >
-                <strong>delete this key</strong>
-              </Link>{" "}
-              from your account.
+              {t("delete-api-key-instructions", {
+                component0: (
+                  <Link
+                    href={`https://app.dub.co/${workspace.slug}/settings/tokens`}
+                    className="text-black underline"
+                  >
+                    <strong>delete this key</strong>
+                  </Link>
+                ),
+              })}
             </Text>
             <Footer email={email} />
           </Container>
diff --git a/apps/web/emails/failed-payment.tsx b/apps/web/emails/failed-payment.tsx
index d2af513901..81255dc142 100644
--- a/apps/web/emails/failed-payment.tsx
+++ b/apps/web/emails/failed-payment.tsx
@@ -13,6 +13,7 @@ import {
   Tailwind,
   Text,
 } from "@react-email/components";
+import { useTranslations } from "next-intl";
 import Footer from "./components/footer";
 
 export default function FailedPayment({
@@ -26,6 +27,8 @@ export default function FailedPayment({
   amountDue: number;
   attemptCount: number;
 }) {
+  const t = useTranslations("../emails");
+
   const title = `${
     attemptCount == 2 ? "2nd notice: " : attemptCount == 3 ? "3rd notice: " : ""
   }Your payment for Dub.co failed`;
@@ -41,42 +44,49 @@ export default function FailedPayment({
               <Img
                 src={DUB_WORDMARK}
                 height="40"
-                alt="Dub"
+                alt={t("dub-title")}
                 className="mx-auto my-0"
               />
             </Section>
             <Heading className="mx-0 my-7 p-0 text-center text-xl font-semibold text-black">
-              {attemptCount == 2 ? "2nd " : attemptCount == 3 ? "3rd  " : ""}
-              Failed Payment for Dub.co
+              {t("failed-payment-attempt-notification")}
             </Heading>
             <Text className="text-sm leading-6 text-black">
-              Hey{user.name ? `, ${user.name}` : ""}!
+              {t("greeting-user", {
+                userNameUserName: user.name ? `, ${user.name}` : "",
+              })}
             </Text>
             <Text className="text-sm leading-6 text-black">
-              Your payment of{" "}
-              <code className="text-purple-600">${amountDue / 100}</code> for
-              your Dub workspace{" "}
-              <code className="text-purple-600">{workspace.name}</code> has
-              failed. Please{" "}
-              <Link
-                href="https://dub.co/help/article/how-to-change-billing-information"
-                className="font-medium text-blue-600 no-underline"
-              >
-                update your payment information
-              </Link>{" "}
-              using the link below:
+              {t("payment-failed-notification", {
+                component0: (
+                  <code className="text-purple-600">
+                    {t("payment-failed-notification_component0")}
+                    {amountDue / 100}
+                  </code>
+                ),
+                component1: (
+                  <code className="text-purple-600">{workspace.name}</code>
+                ),
+                component2: (
+                  <Link
+                    href="https://dub.co/help/article/how-to-change-billing-information"
+                    className="font-medium text-blue-600 no-underline"
+                  >
+                    {t("payment-failed-notification_component2")}
+                  </Link>
+                ),
+              })}
             </Text>
             <Section className="my-8 text-center">
               <Link
                 className="rounded-full bg-black px-6 py-3 text-center text-[12px] font-semibold text-white no-underline"
                 href={`https://app.dub.co/${workspace.slug}/settings/billing`}
               >
-                Update payment information
+                {t("update-payment-information")}
               </Link>
             </Section>
             <Text className="text-sm leading-6 text-black">
-              If you have any questions, feel free to respond to this email –
-              we're happy to help!
+              {t("customer-support-invitation")}
             </Text>
             <Footer email={user.email} />
           </Container>
diff --git a/apps/web/emails/feedback-email.tsx b/apps/web/emails/feedback-email.tsx
index 2be2cd84f2..9df5be3a27 100644
--- a/apps/web/emails/feedback-email.tsx
+++ b/apps/web/emails/feedback-email.tsx
@@ -11,6 +11,7 @@ import {
   Tailwind,
   Text,
 } from "@react-email/components";
+import { useTranslations } from "next-intl";
 
 export default function FeedbackEmail({
   email = "panic@thedis.co",
@@ -19,10 +20,12 @@ export default function FeedbackEmail({
   email: string;
   feedback: string;
 }) {
+  const t = useTranslations("../emails");
+
   return (
     <Html>
       <Head />
-      <Preview>New Feedback Received</Preview>
+      <Preview>{t("new-feedback-received")}</Preview>
       <Tailwind>
         <Body className="mx-auto my-auto bg-white font-sans">
           <Container className="mx-auto my-10 max-w-[500px] rounded border border-solid border-gray-200 px-10 py-5">
@@ -30,15 +33,17 @@ export default function FeedbackEmail({
               <Img
                 src={DUB_WORDMARK}
                 height="40"
-                alt="Dub"
+                alt={t("dub-title")}
                 className="mx-auto my-0"
               />
             </Section>
             <Heading className="mx-0 my-7 p-0 text-center text-xl font-semibold text-black">
-              New Feedback Received
+              {t("new-feedback-received-multiline")}
             </Heading>
             <Text className="text-sm leading-6 text-black">
-              New feedback from <span className="font-semibold">{email}</span>
+              {t("new-feedback-from-email", {
+                component0: <span className="font-semibold">{email}</span>,
+              })}
             </Text>
             <Text className="text-sm leading-6 text-black">{feedback}</Text>
           </Container>
diff --git a/apps/web/emails/new-sale-created.tsx b/apps/web/emails/new-sale-created.tsx
index a178f7703c..45b7a3e9e0 100644
--- a/apps/web/emails/new-sale-created.tsx
+++ b/apps/web/emails/new-sale-created.tsx
@@ -12,6 +12,7 @@ import {
   Tailwind,
   Text,
 } from "@react-email/components";
+import { useTranslations } from "next-intl";
 import Footer from "./components/footer";
 
 export default function NewSaleCreated({
@@ -45,6 +46,8 @@ export default function NewSaleCreated({
     earnings: number;
   };
 }) {
+  const t = useTranslations("../emails");
+
   const linkToSale = `https://partners.dub.co/${partner.id}/${program.id}/sales`;
 
   const earningsInDollars = currencyFormatter(sale.earnings / 100, {
@@ -61,7 +64,9 @@ export default function NewSaleCreated({
     <Html>
       <Head />
       <Preview>
-        You just made a {earningsInDollars} sale via your referral link{" "}
+        {t("referral-sale-notification", {
+          earningsInDollars: earningsInDollars,
+        })}
         {getPrettyUrl(partner.referralLink)}
       </Preview>
       <Tailwind>
@@ -76,27 +81,35 @@ export default function NewSaleCreated({
             </Section>
 
             <Heading className="mx-0 p-0 text-lg font-medium text-black">
-              You just made a {earningsInDollars} referral sale!
+              {t("referral-sale-success", {
+                earningsInDollars: earningsInDollars,
+              })}
             </Heading>
 
             <Text className="text-sm leading-6 text-gray-600">
-              Congratulations! Someone made a{" "}
-              <strong className="text-black">{saleAmountInDollars}</strong>{" "}
-              purchase on <strong className="text-black">{program.name}</strong>{" "}
-              using your referral link (
-              <a
-                href={partner.referralLink}
-                className="text-semibold font-medium text-black underline"
-              >
-                {getPrettyUrl(partner.referralLink)}
-              </a>
-              ).
+              {t("purchase-notification-with-referral", {
+                component0: (
+                  <strong className="text-black">{saleAmountInDollars}</strong>
+                ),
+                component1: (
+                  <strong className="text-black">{program.name}</strong>
+                ),
+                component2: (
+                  <a
+                    href={partner.referralLink}
+                    className="text-semibold font-medium text-black underline"
+                  >
+                    {getPrettyUrl(partner.referralLink)}
+                  </a>
+                ),
+              })}
             </Text>
             <Text className="text-sm leading-6 text-gray-600">
-              Your received{" "}
-              <strong className="text-black">{earningsInDollars}</strong> in
-              commission for this sale and it will be included in your next
-              payout.
+              {t("commission-receipt-notification", {
+                component0: (
+                  <strong className="text-black">{earningsInDollars}</strong>
+                ),
+              })}
             </Text>
 
             <Section className="mb-12 mt-8">
@@ -104,7 +117,7 @@ export default function NewSaleCreated({
                 className="rounded-md bg-neutral-900 px-4 py-3 text-[12px] font-medium text-white no-underline"
                 href={linkToSale}
               >
-                View sale
+                {t("view-sale-link")}
               </Link>
             </Section>
             <Footer email={email} />
diff --git a/apps/web/emails/webhook-failed.tsx b/apps/web/emails/webhook-failed.tsx
index d93e9fdae6..5891259f9e 100644
--- a/apps/web/emails/webhook-failed.tsx
+++ b/apps/web/emails/webhook-failed.tsx
@@ -13,6 +13,7 @@ import {
   Tailwind,
   Text,
 } from "@react-email/components";
+import { useTranslations } from "next-intl";
 import Footer from "./components/footer";
 
 export default function WebhookFailed({
@@ -38,10 +39,12 @@ export default function WebhookFailed({
     consecutiveFailures: number;
   };
 }) {
+  const t = useTranslations("../emails");
+
   return (
     <Html>
       <Head />
-      <Preview>Webhook is failing to deliver</Preview>
+      <Preview>{t("webhook-failing-deliver")}</Preview>
       <Tailwind>
         <Body className="mx-auto my-auto bg-white font-sans">
           <Container className="mx-auto my-10 max-w-[500px] rounded border border-solid border-gray-200 px-10 py-5">
@@ -54,23 +57,27 @@ export default function WebhookFailed({
               />
             </Section>
             <Heading className="mx-0 my-7 p-0 text-center text-xl font-semibold text-black">
-              Webhook is failing to deliver
+              {t("webhook-failing-deliver-whitespace")}
             </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_FAILURE_DISABLE_THRESHOLD} consecutive failures.
+              {t("webhook-url-failed-deliver", {
+                component0: <strong>{webhook.url}</strong>,
+              })}
+              {webhook.consecutiveFailures}
+              {t("webhook-disabled-after-failures", {
+                WEBHOOK_FAILURE_DISABLE_THRESHOLD:
+                  WEBHOOK_FAILURE_DISABLE_THRESHOLD,
+              })}
             </Text>
             <Text className="text-sm leading-6 text-black">
-              Please review the webhook details and update the URL if necessary
-              to restore functionality.
+              {t("review-webhook-details")}
             </Text>
             <Section className="mb-8 mt-4 text-center">
               <Link
                 className="rounded-full 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
+                {t("edit-webhook")}
               </Link>
             </Section>
             <Footer email={email} />
diff --git a/apps/web/ui/account/update-subscription.tsx b/apps/web/ui/account/update-subscription.tsx
index b2618ba4e2..cc1037e623 100644
--- a/apps/web/ui/account/update-subscription.tsx
+++ b/apps/web/ui/account/update-subscription.tsx
@@ -1,7 +1,10 @@
 import { Switch, useOptimisticUpdate } from "@dub/ui";
 import { APP_NAME } from "@dub/utils";
+import { useTranslations } from "next-intl";
 
 export default function UpdateSubscription() {
+  const t = useTranslations("../ui/account");
+
   const { data, isLoading, update } = useOptimisticUpdate<{
     subscribed: boolean;
   }>("/api/user/subscribe", {
@@ -30,7 +33,9 @@ export default function UpdateSubscription() {
           update(() => subscribe(checked), { subscribed: checked });
         }}
       />
-      <p className="text-sm text-gray-500">Subscribed to product updates</p>
+      <p className="text-sm text-gray-500">
+        {t("subscribed-to-product-updates")}
+      </p>
     </div>
   );
 }
diff --git a/apps/web/ui/account/user-id.tsx b/apps/web/ui/account/user-id.tsx
index 9ca30c226f..34a868089e 100644
--- a/apps/web/ui/account/user-id.tsx
+++ b/apps/web/ui/account/user-id.tsx
@@ -1,9 +1,12 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { CopyButton } from "@dub/ui";
 import { useSession } from "next-auth/react";
 
 export default function UserId() {
+  const t = useTranslations("../ui/account");
+
   const { data: session } = useSession() as
     | {
         data: { user: { id: string } };
@@ -15,9 +18,9 @@ export default function UserId() {
       <div className="rounded-lg border border-gray-200 bg-white">
         <div className="relative flex flex-col space-y-6 p-5 sm:p-10">
           <div className="flex flex-col space-y-3">
-            <h2 className="text-xl font-medium">Your User ID</h2>
+            <h2 className="text-xl font-medium">{t("user-id-label")}</h2>
             <p className="text-sm text-gray-500">
-              This is your unique account identifier on Dub.
+              {t("account-identifier-description")}
             </p>
           </div>
           {session?.user?.id ? (
diff --git a/apps/web/ui/analytics/events/export-button.tsx b/apps/web/ui/analytics/events/export-button.tsx
index f1830490b4..9d3877f041 100644
--- a/apps/web/ui/analytics/events/export-button.tsx
+++ b/apps/web/ui/analytics/events/export-button.tsx
@@ -1,10 +1,13 @@
 import useWorkspace from "@/lib/swr/use-workspace";
 import { Button, Download, TooltipContent } from "@dub/ui";
+import { useTranslations } from "next-intl";
 import { useContext } from "react";
 import { toast } from "sonner";
 import { EventsContext } from "./events-provider";
 
 export default function ExportButton({ onClick }: { onClick?: () => void }) {
+  const t = useTranslations("../ui/analytics/events");
+
   const { exportQueryString } = useContext(EventsContext);
   const { slug, plan } = useWorkspace();
 
@@ -35,11 +38,11 @@ export default function ExportButton({ onClick }: { onClick?: () => void }) {
       variant="outline"
       icon={<Download className="h-4 w-4 shrink-0" />}
       className="h-9 justify-start px-2 text-black"
-      text="Download as CSV"
+      text={t("download-as-csv")}
       disabledTooltip={
         needsHigherPlan && (
           <TooltipContent
-            title="Upgrade to our Business Plan to enable CSV downloads for events in your workspace."
+            title={t("upgrade-business-plan-csv-downloads")}
             cta="Upgrade to Business"
             href={`/${slug}/upgrade`}
           />
diff --git a/apps/web/ui/analytics/events/filter-button.tsx b/apps/web/ui/analytics/events/filter-button.tsx
index 8401793169..20e1bdde98 100644
--- a/apps/web/ui/analytics/events/filter-button.tsx
+++ b/apps/web/ui/analytics/events/filter-button.tsx
@@ -1,8 +1,11 @@
 import { useRouterStuff } from "@dub/ui";
 import { FilterBars } from "@dub/ui/icons";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 
 export default function FilterButton({ set }: { set: Record<string, any> }) {
+  const t = useTranslations("../ui/analytics/events");
+
   const { queryParams } = useRouterStuff();
 
   return (
@@ -17,7 +20,7 @@ export default function FilterButton({ set }: { set: Record<string, any> }) {
         }
         className="block rounded-md border border-transparent bg-white p-0.5 text-gray-600 transition-colors hover:border-gray-200 hover:bg-gray-100 hover:text-gray-950"
       >
-        <span className="sr-only">Filter</span>
+        <span className="sr-only">{t("filter")}</span>
         <FilterBars className="size-3.5" />
       </Link>
     </div>
diff --git a/apps/web/ui/analytics/export-button.tsx b/apps/web/ui/analytics/export-button.tsx
index 24d1cca62b..705025d584 100644
--- a/apps/web/ui/analytics/export-button.tsx
+++ b/apps/web/ui/analytics/export-button.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@dub/ui";
 import { Download } from "@dub/ui/icons";
+import { useTranslations } from "next-intl";
 import { Dispatch, SetStateAction, useContext, useState } from "react";
 import { toast } from "sonner";
 import { AnalyticsContext } from "./analytics-provider";
@@ -9,6 +10,8 @@ export default function ExportButton({
 }: {
   setOpenPopover: Dispatch<SetStateAction<boolean>>;
 }) {
+  const t = useTranslations("../ui/analytics");
+
   const [loading, setLoading] = useState(false);
   const { queryString } = useContext(AnalyticsContext);
 
@@ -41,7 +44,7 @@ export default function ExportButton({
 
   return (
     <Button
-      text="Download as CSV"
+      text={t("download-as-csv")}
       variant="outline"
       icon={<Download className="h-4 w-4" />}
       className="h-9 justify-start px-2 text-black"
diff --git a/apps/web/ui/analytics/link-preview.tsx b/apps/web/ui/analytics/link-preview.tsx
index fcaad2e590..6174b17367 100644
--- a/apps/web/ui/analytics/link-preview.tsx
+++ b/apps/web/ui/analytics/link-preview.tsx
@@ -2,8 +2,11 @@ import { LinkProps } from "@/lib/types";
 import { CopyButton, LinkLogo } from "@dub/ui";
 import { ArrowTurnRight2 } from "@dub/ui/icons";
 import { getApexDomain, getPrettyUrl, linkConstructor } from "@dub/utils";
+import { useTranslations } from "next-intl";
 
 export default function LinkPreviewTooltip({ data }: { data: LinkProps }) {
+  const t = useTranslations("../ui/analytics");
+
   const { domain, key, url } = data;
 
   return (
@@ -50,7 +53,9 @@ export default function LinkPreviewTooltip({ data }: { data: LinkProps }) {
               {getPrettyUrl(url)}
             </a>
           ) : (
-            <span className="truncate text-gray-400">No URL configured</span>
+            <span className="truncate text-gray-400">
+              {t("no-url-configured")}
+            </span>
           )}
         </div>
       </div>
diff --git a/apps/web/ui/analytics/locations.tsx b/apps/web/ui/analytics/locations.tsx
index df8381a001..c1cfaac232 100644
--- a/apps/web/ui/analytics/locations.tsx
+++ b/apps/web/ui/analytics/locations.tsx
@@ -7,6 +7,7 @@ import {
   OfficeBuilding,
 } from "@dub/ui/icons";
 import { CONTINENTS, COUNTRIES, REGIONS } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import { useContext, useState } from "react";
 import { AnalyticsCard } from "./analytics-card";
 import { AnalyticsLoadingSpinner } from "./analytics-loading-spinner";
@@ -16,6 +17,8 @@ import ContinentIcon from "./continent-icon";
 import { useAnalyticsFilterOption } from "./utils";
 
 export default function Locations() {
+  const t = useTranslations("../ui/analytics");
+
   const { queryParams, searchParams } = useRouterStuff();
 
   const { selectedTab, saleUnit } = useContext(AnalyticsContext);
@@ -93,7 +96,7 @@ export default function Locations() {
             />
           ) : (
             <div className="flex h-[300px] items-center justify-center">
-              <p className="text-sm text-gray-600">No data available</p>
+              <p className="text-sm text-gray-600">{t("no-data-available")}</p>
             </div>
           )
         ) : (
diff --git a/apps/web/ui/analytics/top-links.tsx b/apps/web/ui/analytics/top-links.tsx
index 1f2c4f362c..c7c9f01260 100644
--- a/apps/web/ui/analytics/top-links.tsx
+++ b/apps/web/ui/analytics/top-links.tsx
@@ -1,6 +1,7 @@
 import { LinkLogo, useRouterStuff } from "@dub/ui";
 import { Globe, Hyperlink } from "@dub/ui/icons";
 import { getApexDomain } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import { useContext, useState } from "react";
 import { AnalyticsCard } from "./analytics-card";
 import { AnalyticsLoadingSpinner } from "./analytics-loading-spinner";
@@ -9,6 +10,8 @@ import BarList from "./bar-list";
 import { useAnalyticsFilterOption } from "./utils";
 
 export default function TopLinks() {
+  const t = useTranslations("../ui/analytics");
+
   const { queryParams, searchParams } = useRouterStuff();
 
   const { selectedTab, saleUnit } = useContext(AnalyticsContext);
@@ -80,7 +83,7 @@ export default function TopLinks() {
             />
           ) : (
             <div className="flex h-[300px] items-center justify-center">
-              <p className="text-sm text-gray-600">No data available</p>
+              <p className="text-sm text-gray-600">{t("no-data-available")}</p>
             </div>
           )
         ) : (
diff --git a/apps/web/ui/auth/login/email-sign-in.tsx b/apps/web/ui/auth/login/email-sign-in.tsx
index d8709445ea..dafd5436fb 100644
--- a/apps/web/ui/auth/login/email-sign-in.tsx
+++ b/apps/web/ui/auth/login/email-sign-in.tsx
@@ -4,6 +4,7 @@ import { InputPassword } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { Mail } from "lucide-react";
 import { signIn } from "next-auth/react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useContext, useState } from "react";
@@ -11,6 +12,8 @@ import { toast } from "sonner";
 import { errorCodes, LoginFormContext } from "./login-form";
 
 export const EmailSignIn = ({ redirectTo }: { redirectTo?: string }) => {
+  const t = useTranslations("../ui/auth/login");
+
   const router = useRouter();
   const searchParams = useSearchParams();
   const next = searchParams?.get("next");
@@ -130,7 +133,7 @@ export const EmailSignIn = ({ redirectTo }: { redirectTo?: string }) => {
             name="email"
             autoFocus={!isMobile && !showPasswordField}
             type="email"
-            placeholder="panic@thedis.co"
+            placeholder={t("email-address")}
             autoComplete="email"
             required
             value={email}
@@ -151,14 +154,16 @@ export const EmailSignIn = ({ redirectTo }: { redirectTo?: string }) => {
               type="password"
               autoFocus={!isMobile}
               value={password}
-              placeholder="Password (optional)"
+              placeholder={t("password-optional")}
               onChange={(e) => setPassword(e.target.value)}
             />
           </div>
         )}
 
         <Button
-          text={`Continue with ${password ? "Password" : "Email"}`}
+          text={t("continue-with-password-or-email", {
+            passwordPasswordEmail: password ? "Password" : "Email",
+          })}
           variant="secondary"
           icon={
             password ? (
@@ -184,7 +189,7 @@ export const EmailSignIn = ({ redirectTo }: { redirectTo?: string }) => {
           href={`/forgot-password?email=${encodeURIComponent(email)}`}
           className="text-center text-xs text-gray-500 transition-colors hover:text-black"
         >
-          Forgot password?
+          {t("forgot-password")}
         </Link>
       )}
     </>
diff --git a/apps/web/ui/auth/login/github-button.tsx b/apps/web/ui/auth/login/github-button.tsx
index 2d1186e5cd..c7ce264b15 100644
--- a/apps/web/ui/auth/login/github-button.tsx
+++ b/apps/web/ui/auth/login/github-button.tsx
@@ -1,10 +1,13 @@
 import { Button, Github } from "@dub/ui";
 import { signIn } from "next-auth/react";
+import { useTranslations } from "next-intl";
 import { useSearchParams } from "next/navigation";
 import { useContext } from "react";
 import { LoginFormContext } from "./login-form";
 
 export const GitHubButton = () => {
+  const t = useTranslations("../ui/auth/login");
+
   const searchParams = useSearchParams();
   const next = searchParams?.get("next");
 
@@ -13,7 +16,7 @@ export const GitHubButton = () => {
 
   return (
     <Button
-      text="Continue with Github"
+      text={t("continue-with-github")}
       variant="secondary"
       onClick={() => {
         setClickedMethod("github");
diff --git a/apps/web/ui/auth/register/signup-oauth.tsx b/apps/web/ui/auth/register/signup-oauth.tsx
index 727c3b5f6a..51b8e8019e 100644
--- a/apps/web/ui/auth/register/signup-oauth.tsx
+++ b/apps/web/ui/auth/register/signup-oauth.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { Button, Github, Google } from "@dub/ui";
 import { signIn } from "next-auth/react";
@@ -10,6 +11,8 @@ export const SignUpOAuth = ({
 }: {
   methods: ("email" | "google" | "github")[];
 }) => {
+  const t = useTranslations("../ui/auth/register");
+
   const searchParams = useSearchParams();
   const next = searchParams?.get("next");
   const [clickedGoogle, setClickedGoogle] = useState(false);
@@ -28,7 +31,7 @@ export const SignUpOAuth = ({
       {methods.includes("google") && (
         <Button
           variant="secondary"
-          text="Continue with Google"
+          text={t("continue-with-google")}
           onClick={() => {
             setClickedGoogle(true);
             signIn("google", {
@@ -42,7 +45,7 @@ export const SignUpOAuth = ({
       {methods.includes("github") && (
         <Button
           variant="secondary"
-          text="Continue with GitHub"
+          text={t("continue-with-github")}
           onClick={() => {
             setClickedGithub(true);
             signIn("github", {
diff --git a/apps/web/ui/domains/domain-card.tsx b/apps/web/ui/domains/domain-card.tsx
index af247ccd43..90e6f2510e 100644
--- a/apps/web/ui/domains/domain-card.tsx
+++ b/apps/web/ui/domains/domain-card.tsx
@@ -32,6 +32,7 @@ import {
 import { cn, DEFAULT_LINK_PROPS, fetcher, nFormatter } from "@dub/utils";
 import { motion } from "framer-motion";
 import { Archive, ChevronDown, FolderInput, QrCode } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useMemo, useRef, useState } from "react";
@@ -48,6 +49,8 @@ import { DomainCardTitleColumn } from "./domain-card-title-column";
 import DomainConfiguration from "./domain-configuration";
 
 export default function DomainCard({ props }: { props: DomainProps }) {
+  const t = useTranslations("../ui/domains");
+
   const { slug: domain, primary, registeredDomain } = props || {};
 
   const isDubProvisioned = !!registeredDomain;
@@ -105,7 +108,7 @@ export default function DomainCard({ props }: { props: DomainProps }) {
             <div className="flex items-center gap-1.5">
               <Wordmark className="h-4" />
               <span className="font-medium text-gray-900">
-                Provisioned by Dub
+                {t("provisioned-by-dub")}
               </span>
             </div>
             <a
@@ -113,7 +116,7 @@ export default function DomainCard({ props }: { props: DomainProps }) {
               target="_blank"
               className="text-gray-500 underline transition-colors hover:text-gray-800"
             >
-              Learn more
+              {t("learn-more")}
             </a>
           </div>
         )}
@@ -136,7 +139,9 @@ export default function DomainCard({ props }: { props: DomainProps }) {
                   <CursorRays className="h-4 w-4 text-gray-700" />
                   <p className="text-xs font-medium text-gray-900">
                     {nFormatter(props.link?.clicks || 0)}
-                    <span className="ml-1 hidden sm:inline-block">clicks</span>
+                    <span className="ml-1 hidden sm:inline-block">
+                      {t("clicks")}
+                    </span>
                   </p>
                 </Link>
               </NumberTooltip>
@@ -229,15 +234,17 @@ export default function DomainCard({ props }: { props: DomainProps }) {
                 <div className="mt-6 flex items-center gap-2 text-pretty rounded-lg bg-green-100/80 p-3 text-sm text-green-600">
                   <CircleCheck className="h-5 w-5 shrink-0" />
                   <div>
-                    Good news! Your DNS records are set up correctly, but it can
-                    take some time for them to propagate globally.{" "}
-                    <Link
-                      href="https://dub.co/help/article/how-to-add-custom-domain#how-long-do-i-have-to-wait-for-my-domain-to-work"
-                      target="_blank"
-                      className="underline transition-colors hover:text-green-800"
-                    >
-                      Learn more.
-                    </Link>
+                    {t("dns-setup-success", {
+                      component0: (
+                        <Link
+                          href="https://dub.co/help/article/how-to-add-custom-domain#how-long-do-i-have-to-wait-for-my-domain-to-work"
+                          target="_blank"
+                          className="underline transition-colors hover:text-green-800"
+                        >
+                          {t("dns-setup-success_component0")}
+                        </Link>
+                      ),
+                    })}
                   </div>
                 </div>
               ) : (
@@ -267,6 +274,8 @@ function Menu({
   };
   groupHover: boolean;
 }) {
+  const t = useTranslations("../ui/domains");
+
   const { primary, archived, slug: domain, registeredDomain } = props;
   const isDubProvisioned = !!registeredDomain;
 
@@ -371,10 +380,10 @@ function Menu({
             <div className="w-full sm:w-48">
               <div className="grid gap-px p-2">
                 <p className="mb-1.5 mt-1 flex items-center gap-2 px-1 text-xs font-medium text-gray-500">
-                  Link Settings
+                  {t("link-settings")}
                 </p>
                 <Button
-                  text="Edit Link"
+                  text={t("edit-link")}
                   variant="outline"
                   onClick={() => {
                     setOpenPopover(false);
@@ -387,7 +396,7 @@ function Menu({
                   className="h-9 justify-start px-2 font-medium"
                 />
                 <Button
-                  text="QR Code"
+                  text={t("qr-code")}
                   variant="outline"
                   onClick={() => {
                     setOpenPopover(false);
@@ -400,7 +409,7 @@ function Menu({
                   className="h-9 justify-start px-2 font-medium"
                 />
                 <Button
-                  text="Copy Link ID"
+                  text={t("copy-link-id")}
                   variant="outline"
                   onClick={() => copyLinkId()}
                   icon={
@@ -419,10 +428,10 @@ function Menu({
               <div className="border-t border-gray-200" />
               <div className="grid gap-px p-2">
                 <p className="mb-1.5 mt-1 flex items-center gap-2 px-1 text-xs font-medium text-gray-500">
-                  Domain Settings
+                  {t("domain-settings")}
                 </p>
                 <Button
-                  text="Edit Domain"
+                  text={t("edit-domain")}
                   variant="outline"
                   onClick={() => {
                     setOpenPopover(false);
@@ -433,7 +442,7 @@ function Menu({
                 />
                 {!primary && (
                   <Button
-                    text="Set as Primary"
+                    text={t("set-as-primary")}
                     variant="outline"
                     onClick={() => {
                       setOpenPopover(false);
@@ -445,7 +454,7 @@ function Menu({
                 )}
                 {!isDubProvisioned && (
                   <Button
-                    text="Transfer"
+                    text={t("transfer-domain")}
                     variant="outline"
                     onClick={() => {
                       setOpenPopover(false);
@@ -472,7 +481,7 @@ function Menu({
                 />
                 {!isDubProvisioned && (
                   <Button
-                    text="Delete"
+                    text={t("delete-domain")}
                     variant="danger-outline"
                     onClick={() => {
                       setOpenPopover(false);
diff --git a/apps/web/ui/layout/changelog-popup.tsx b/apps/web/ui/layout/changelog-popup.tsx
index 62083c0f18..f4ec97045d 100644
--- a/apps/web/ui/layout/changelog-popup.tsx
+++ b/apps/web/ui/layout/changelog-popup.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { BlurImage, Popup, PopupContext } from "@dub/ui";
 import { motion } from "framer-motion";
@@ -22,6 +23,8 @@ export default function ChangelogPopup() {
 }
 
 export function ChangelogPopupInner() {
+  const t = useTranslations("../ui/layout");
+
   const { hidePopup } = useContext(PopupContext);
 
   return (
@@ -49,7 +52,7 @@ export function ChangelogPopupInner() {
         <div className="border-b border-gray-200">
           <BlurImage
             src={CHANGELOG_IMAGE_URL}
-            alt="Root Domain Links"
+            alt={t("root-domain-links")}
             className="aspect-[1200/630] object-cover"
             width={1200}
             height={630}
diff --git a/apps/web/ui/layout/sidebar/payout-stats.tsx b/apps/web/ui/layout/sidebar/payout-stats.tsx
index efee4f321b..ac316c29f2 100644
--- a/apps/web/ui/layout/sidebar/payout-stats.tsx
+++ b/apps/web/ui/layout/sidebar/payout-stats.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import usePartnerPayoutsCount from "@/lib/swr/use-partner-payouts-count";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
@@ -11,6 +12,8 @@ import { ChevronRight } from "lucide-react";
 import Link from "next/link";
 
 export function PayoutStats() {
+  const t = useTranslations("../ui/layout/sidebar");
+
   const { partner } = usePartnerProfile();
   const { payoutsCount } = usePartnerPayoutsCount();
 
@@ -22,13 +25,13 @@ export function PayoutStats() {
           href="/settings/payouts"
         >
           <MoneyBills2 className="size-4" />
-          Payouts
+          {t("payouts-title")}
           <ChevronRight className="size-3 text-neutral-400 transition-[color,transform] group-hover:translate-x-0.5 group-hover:text-neutral-500" />
         </Link>
 
         <div className="mt-4 flex flex-col gap-2">
           <div className="grid gap-1 text-sm">
-            <p className="text-neutral-500">Upcoming payouts</p>
+            <p className="text-neutral-500">{t("upcoming-payouts")}</p>
             <div className="flex items-center gap-2">
               {partner && !partner.payoutsEnabled && (
                 <Tooltip
@@ -57,7 +60,7 @@ export function PayoutStats() {
             </div>
           </div>
           <div className="grid gap-1 text-sm">
-            <p className="text-neutral-500">Total payouts</p>
+            <p className="text-neutral-500">{t("total-payouts")}</p>
             {payoutsCount ? (
               <p className="text-black">
                 {currencyFormatter(
@@ -79,7 +82,7 @@ export function PayoutStats() {
           CONNECT_SUPPORTED_COUNTRIES.includes(partner.country) && (
             <StripeConnectButton
               className="mt-4 h-9 w-full"
-              text="Connect payouts"
+              text={t("connect-payouts")}
             />
           )}
       </div>
diff --git a/apps/web/ui/links/link-not-found.tsx b/apps/web/ui/links/link-not-found.tsx
index b192540c7f..f518ed1a14 100644
--- a/apps/web/ui/links/link-not-found.tsx
+++ b/apps/web/ui/links/link-not-found.tsx
@@ -1,21 +1,23 @@
 import { FileX2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 export default function LinkNotFound() {
+  const t = useTranslations("../ui/links");
+
   return (
     <div className="flex flex-col items-center justify-center rounded-md border border-gray-200 bg-white py-12">
       <div className="rounded-full bg-gray-100 p-3">
         <FileX2 className="h-6 w-6 text-gray-600" />
       </div>
       <h1 className="my-3 text-xl font-semibold text-gray-700">
-        Link Not Found
+        {t("link-not-found")}
       </h1>
       <p className="z-10 max-w-sm text-center text-sm text-gray-600">
-        Bummer! The link you are looking for does not exist. You either typed in
-        the wrong URL or don't have access to this link.
+        {t("link-not-found-bummer-message")}
       </p>
       <img
         src="https://assets.dub.co/misc/not-found.svg"
-        alt="No links yet"
+        alt={t("no-links-yet")}
         width={300}
         height={300}
       />
diff --git a/apps/web/ui/modals/add-edit-utm-template.modal.tsx b/apps/web/ui/modals/add-edit-utm-template.modal.tsx
index 8c043d5313..7a2a1d821c 100644
--- a/apps/web/ui/modals/add-edit-utm-template.modal.tsx
+++ b/apps/web/ui/modals/add-edit-utm-template.modal.tsx
@@ -1,6 +1,7 @@
 import useWorkspace from "@/lib/swr/use-workspace";
 import { UtmTemplateProps } from "@/lib/types";
 import { Button, Modal, useMediaQuery, UTMBuilder } from "@dub/ui";
+import { useTranslations } from "next-intl";
 import posthog from "posthog-js";
 import {
   Dispatch,
@@ -22,6 +23,8 @@ function AddEditUtmTemplateModal({
   setShowAddEditUtmTemplateModal: Dispatch<SetStateAction<boolean>>;
   props?: UtmTemplateProps;
 }) {
+  const t = useTranslations("../ui/modals");
+
   const { id } = props || {};
   const { id: workspaceId } = useWorkspace();
   const { isMobile } = useMediaQuery();
@@ -114,7 +117,7 @@ function AddEditUtmTemplateModal({
         <div className="mt-6">
           <label htmlFor="name">
             <span className="block text-sm font-medium text-gray-700">
-              Template Name
+              {t("template-name")}
             </span>
             <div className="mt-2 flex rounded-md shadow-sm">
               <input
@@ -122,7 +125,7 @@ function AddEditUtmTemplateModal({
                 autoFocus={!isMobile}
                 autoComplete="off"
                 className="block w-full rounded-md border-gray-300 text-gray-900 placeholder-gray-400 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm"
-                placeholder="New Template"
+                placeholder={t("new-template-title")}
                 {...register("name", { required: true })}
               />
             </div>
@@ -131,7 +134,7 @@ function AddEditUtmTemplateModal({
 
         <div className="mt-6">
           <span className="mb-2 block text-sm font-medium text-gray-700">
-            Parameters
+            {t("parameters-label")}
           </span>
           <UTMBuilder
             values={values}
@@ -160,11 +163,13 @@ function AddUtmTemplateButton({
 }: {
   setShowAddEditUtmTemplateModal: Dispatch<SetStateAction<boolean>>;
 }) {
+  const t = useTranslations("../ui/modals");
+
   return (
     <div>
       <Button
         variant="primary"
-        text="Create template"
+        text={t("create-template-action")}
         className="h-9 rounded-lg"
         onClick={() => setShowAddEditUtmTemplateModal(true)}
       />
diff --git a/apps/web/ui/modals/archive-domain-modal.tsx b/apps/web/ui/modals/archive-domain-modal.tsx
index 2132647213..1efeb87d7d 100644
--- a/apps/web/ui/modals/archive-domain-modal.tsx
+++ b/apps/web/ui/modals/archive-domain-modal.tsx
@@ -2,6 +2,7 @@ import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { DomainProps } from "@/lib/types";
 import { Button, LinkLogo, Modal, useToastWithUndo } from "@dub/ui";
+import { useTranslations } from "next-intl";
 import {
   Dispatch,
   MouseEvent,
@@ -40,6 +41,8 @@ function ArchiveDomainModal({
   setShowArchiveDomainModal: Dispatch<SetStateAction<boolean>>;
   props: DomainProps;
 }) {
+  const t = useTranslations("../ui/modals");
+
   const toastWithUndo = useToastWithUndo();
 
   const { id: workspaceId } = useWorkspace();
@@ -110,7 +113,7 @@ function ArchiveDomainModal({
             target="_blank"
             className="text-sm text-gray-500 underline"
           >
-            Learn more
+            {t("learn-more")}
           </a>
         </p>
       </div>
@@ -120,7 +123,11 @@ function ArchiveDomainModal({
           onClick={handleArchiveRequest}
           autoFocus
           loading={archiving}
-          text={`Confirm ${props.archived ? "unarchive" : "archive"}`}
+          text={t("confirm-archive-unarchive", {
+            propsArchivedUnarchiveArchive: props.archived
+              ? "unarchive"
+              : "archive",
+          })}
         />
       </div>
     </Modal>
diff --git a/apps/web/ui/modals/delete-link-modal.tsx b/apps/web/ui/modals/delete-link-modal.tsx
index 656eb0a4ac..9abffc0441 100644
--- a/apps/web/ui/modals/delete-link-modal.tsx
+++ b/apps/web/ui/modals/delete-link-modal.tsx
@@ -3,6 +3,7 @@ import useWorkspace from "@/lib/swr/use-workspace";
 import { LinkProps } from "@/lib/types";
 import { Button, LinkLogo, Modal, useMediaQuery } from "@dub/ui";
 import { getApexDomain, linkConstructor } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import {
   Dispatch,
   SetStateAction,
@@ -33,6 +34,8 @@ function DeleteLinkModalInner({
   setShowDeleteLinkModal,
   props,
 }: DeleteLinkModalProps) {
+  const t = useTranslations("../ui/modals");
+
   const { id } = useWorkspace();
   const [deleting, setDeleting] = useState(false);
   const apexDomain = getApexDomain(props.url);
@@ -53,10 +56,11 @@ function DeleteLinkModalInner({
     <>
       <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-4 pt-8 text-center sm:px-16">
         <LinkLogo apexDomain={apexDomain} />
-        <h3 className="text-lg font-medium">Delete {shortlink}</h3>
+        <h3 className="text-lg font-medium">
+          {t("delete-shortlink", { shortlink: shortlink })}
+        </h3>
         <p className="text-sm text-gray-500">
-          Warning: Deleting this link will remove all of its analytics. This
-          action cannot be undone – proceed with caution.
+          {t("warning-deleting-link-analytics")}
         </p>
       </div>
 
@@ -82,8 +86,9 @@ function DeleteLinkModalInner({
       >
         <div>
           <label htmlFor="verification" className="block text-sm text-gray-700">
-            To verify, type <span className="font-semibold">{shortlink}</span>{" "}
-            below
+            {t("verify-type-shortlink", {
+              component0: <span className="font-semibold">{shortlink}</span>,
+            })}
           </label>
           <div className="relative mt-1 rounded-md shadow-sm">
             <input
@@ -99,7 +104,11 @@ function DeleteLinkModalInner({
           </div>
         </div>
 
-        <Button variant="danger" text="Confirm delete" loading={deleting} />
+        <Button
+          variant="danger"
+          text={t("confirm-delete")}
+          loading={deleting}
+        />
       </form>
     </>
   );
diff --git a/apps/web/ui/modals/import-bitly-modal.tsx b/apps/web/ui/modals/import-bitly-modal.tsx
index 4a8a0d46d6..9b4f12e536 100644
--- a/apps/web/ui/modals/import-bitly-modal.tsx
+++ b/apps/web/ui/modals/import-bitly-modal.tsx
@@ -11,6 +11,7 @@ import {
 } from "@dub/ui";
 import { APP_DOMAIN_WITH_NGROK, fetcher } from "@dub/utils";
 import { ArrowRight, ServerOff } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import {
   Dispatch,
@@ -30,6 +31,8 @@ function ImportBitlyModal({
   showImportBitlyModal: boolean;
   setShowImportBitlyModal: Dispatch<SetStateAction<boolean>>;
 }) {
+  const t = useTranslations("../ui/modals");
+
   const router = useRouter();
   const { slug } = useParams() as { slug?: string };
   const searchParams = useSearchParams();
@@ -96,16 +99,17 @@ function ImportBitlyModal({
         <div className="flex items-center space-x-3 py-4">
           <img
             src="https://assets.dub.co/misc/icons/bitly.svg"
-            alt="Bitly logo"
+            alt={t("bitly-logo")}
             className="h-10 w-10 rounded-full"
           />
           <ArrowRight className="h-5 w-5 text-gray-600" />
           <Logo />
         </div>
-        <h3 className="text-lg font-medium">Import Your Bitly Links</h3>
+        <h3 className="text-lg font-medium">{t("import-your-bitly-links")}</h3>
         <p className="text-center text-sm text-gray-500">
-          Easily import all your existing Bitly links into{" "}
-          {process.env.NEXT_PUBLIC_APP_NAME} with just a few clicks.
+          {t("easily-import-bitly-links", {
+            processEnvNextPublicAppName: process.env.NEXT_PUBLIC_APP_NAME,
+          })}
         </p>
       </div>
 
@@ -113,7 +117,7 @@ function ImportBitlyModal({
         {isLoading || !workspaceId ? (
           <div className="flex flex-col items-center justify-center space-y-4 bg-none">
             <LoadingSpinner />
-            <p className="text-sm text-gray-500">Connecting to Bitly</p>
+            <p className="text-sm text-gray-500">{t("connecting-to-bitly")}</p>
           </div>
         ) : groups ? (
           <form
@@ -155,7 +159,7 @@ function ImportBitlyModal({
                   <div key={guid} className="flex flex-col space-y-2">
                     <div className="flex items-center justify-between">
                       <p className="text-sm font-medium text-gray-700">
-                        Domains
+                        {t("domains-header")}
                       </p>
                       <Tooltip content="Your Bitly group ID">
                         <p className="cursor-default text-xs uppercase text-gray-400 transition-colors hover:text-gray-700">
@@ -193,7 +197,9 @@ function ImportBitlyModal({
                     {tags?.length > 0 && (
                       <div className="flex items-center justify-between space-x-2 rounded-md py-1 pl-2 pr-4">
                         <p className="text-xs text-gray-500">
-                          {tags.length} tags found. Import all?
+                          {t("tags-found-import-all", {
+                            tagsLength: tags.length,
+                          })}
                         </p>
                         <Switch
                           fn={() => {
@@ -215,14 +221,13 @@ function ImportBitlyModal({
                 <div className="flex flex-col items-center justify-center gap-2 pb-2">
                   <ServerOff className="h-6 w-6 text-gray-500" />
                   <p className="text-center text-sm text-gray-500">
-                    It looks like you don't have any Bitly groups with custom
-                    domains (non bit.ly domains).
+                    {t("no-bitly-groups-warning")}
                   </p>
                 </div>
               )}
             </div>
             <Button
-              text="Confirm import"
+              text={t("confirm-import")}
               loading={importing}
               disabled={selectedDomains.length === 0}
             />
@@ -230,19 +235,19 @@ function ImportBitlyModal({
               href={bitlyOAuthURL}
               className="text-center text-xs text-gray-500 underline underline-offset-4 transition-colors hover:text-gray-800"
             >
-              Sign in to a different Bitly account?
+              {t("sign-in-different-bitly-account")}
             </a>
           </form>
         ) : (
           <div className="flex flex-col space-y-2">
             <Button
-              text="Sign in with Bitly"
+              text={t("sign-in-with-bitly")}
               variant="secondary"
               loading={redirecting}
               icon={
                 <img
                   src="https://assets.dub.co/misc/icons/bitly.svg"
-                  alt="Bitly logo"
+                  alt={t("bitly-logo-duplicate")}
                   className="h-5 w-5 rounded-full border border-gray-200"
                 />
               }
@@ -256,7 +261,7 @@ function ImportBitlyModal({
               target="_blank"
               className="text-center text-xs text-gray-500 underline underline-offset-4 transition-colors hover:text-gray-800"
             >
-              Read the guide
+              {t("read-the-guide")}
             </a>
           </div>
         )}
diff --git a/apps/web/ui/modals/link-builder/draft-controls.tsx b/apps/web/ui/modals/link-builder/draft-controls.tsx
index acd1bb4bcb..54788d2ba0 100644
--- a/apps/web/ui/modals/link-builder/draft-controls.tsx
+++ b/apps/web/ui/modals/link-builder/draft-controls.tsx
@@ -3,6 +3,7 @@ import { AnimatedSizeContainer, Button, Popover, useMediaQuery } from "@dub/ui";
 import { CircleCheck, CircleInfo, LoadingCircle, Xmark } from "@dub/ui/icons";
 import { cn, nanoid, punycode, timeAgo, truncate } from "@dub/utils";
 import { ChevronDown } from "lucide-react";
+import { useTranslations } from "next-intl";
 import {
   forwardRef,
   SVGProps,
@@ -181,6 +182,8 @@ function DraftOption({
   onSelect: () => void;
   onDelete: () => void;
 }) {
+  const t = useTranslations("../ui/modals/link-builder");
+
   const { isMobile } = useMediaQuery();
 
   // Memoize time so it doesn't change on rerender
@@ -206,7 +209,7 @@ function DraftOption({
             {draft.link.key ? (
               punycode(draft.link.key)
             ) : (
-              <span className="text-gray-400">(link)</span>
+              <span className="text-gray-400">{t("link")}</span>
             )}
           </span>
         </div>
diff --git a/apps/web/ui/modals/link-builder/password-modal.tsx b/apps/web/ui/modals/link-builder/password-modal.tsx
index 1233598ce8..df5810b29d 100644
--- a/apps/web/ui/modals/link-builder/password-modal.tsx
+++ b/apps/web/ui/modals/link-builder/password-modal.tsx
@@ -10,6 +10,7 @@ import {
 } from "@dub/ui";
 import { Eye, EyeSlash, InputPassword, Shuffle } from "@dub/ui/icons";
 import { cn, nanoid } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import {
   Dispatch,
   SetStateAction,
@@ -45,6 +46,8 @@ function PasswordModalInner({
 }: {
   setShowPasswordModal: Dispatch<SetStateAction<boolean>>;
 }) {
+  const t = useTranslations("../ui/modals/link-builder");
+
   const { isMobile } = useMediaQuery();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const {
@@ -93,11 +96,11 @@ function PasswordModalInner({
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <h3 className="text-lg font-medium">Link Password</h3>
+          <h3 className="text-lg font-medium">{t("link-password")}</h3>
           <ProBadgeTooltip
             content={
               <SimpleTooltipContent
-                title="Restrict access to your short links by encrypting it with a password."
+                title={t("restrict-access-encrypt-password")}
                 cta="Learn more."
                 href="https://dub.co/help/article/password-protected-links"
               />
@@ -108,14 +111,19 @@ function PasswordModalInner({
           <Tooltip
             content={
               <div className="px-2 py-1 text-xs text-gray-700">
-                Press <strong className="font-medium text-gray-950">P</strong>{" "}
-                to open this quickly
+                {t("quick-access-instruction", {
+                  component0: (
+                    <strong className="font-medium text-gray-950">
+                      {t("quick-access-instruction_component0")}
+                    </strong>
+                  ),
+                })}
               </div>
             }
             side="right"
           >
             <kbd className="flex size-6 cursor-default items-center justify-center rounded-md border border-gray-200 font-sans text-xs text-gray-950">
-              P
+              {t("shortcut-key-p")}
             </kbd>
           </Tooltip>
         </div>
@@ -124,7 +132,7 @@ function PasswordModalInner({
       <div className="mt-6">
         <div className="flex items-center justify-between">
           <span className="block text-sm font-medium text-gray-700">
-            Password
+            {t("password-label")}
           </span>
           <div className="flex items-center gap-2">
             <ButtonTooltip
@@ -155,7 +163,7 @@ function PasswordModalInner({
         <div className="mt-2 rounded-md shadow-sm">
           <input
             type={showPassword ? "text" : "password"}
-            placeholder="Create password"
+            placeholder={t("create-password")}
             data-1p-ignore
             className={`${
               errors.password
@@ -186,7 +194,7 @@ function PasswordModalInner({
                 setShowPasswordModal(false);
               }}
             >
-              Remove password
+              {t("remove-password")}
             </button>
           )}
         </div>
@@ -194,7 +202,7 @@ function PasswordModalInner({
           <Button
             type="button"
             variant="secondary"
-            text="Cancel"
+            text={t("cancel")}
             className="h-9 w-fit"
             onClick={() => {
               reset();
diff --git a/apps/web/ui/modals/link-builder/utm-templates-button.tsx b/apps/web/ui/modals/link-builder/utm-templates-button.tsx
index 30f33f78b2..0c8b938dbd 100644
--- a/apps/web/ui/modals/link-builder/utm-templates-button.tsx
+++ b/apps/web/ui/modals/link-builder/utm-templates-button.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import useWorkspace from "@/lib/swr/use-workspace";
 import { UtmTemplateProps } from "@/lib/types";
@@ -19,6 +20,8 @@ export function UTMTemplatesButton({
 }: {
   onLoad: (params: Record<string, string>) => void;
 }) {
+  const t = useTranslations("../ui/modals/link-builder");
+
   const { isMobile } = useMediaQuery();
   const { id: workspaceId } = useWorkspace();
 
@@ -62,7 +65,7 @@ export function UTMTemplatesButton({
             </div>
           ) : (
             <div className="flex w-full items-center justify-center p-2 text-center text-xs text-gray-500 md:w-32">
-              Failed to load templates
+              {t("failed-to-load-templates")}
             </div>
           )}
         </AnimatedSizeContainer>
@@ -90,12 +93,14 @@ function UTMTemplateList({
   data: UtmTemplateProps[];
   onLoad: (params: Record<string, string>) => void;
 }) {
+  const t = useTranslations("../ui/modals/link-builder");
+
   const { setValue } = useFormContext();
 
   return data.length ? (
     <div className="scrollbar-hide grid max-h-64 overflow-y-auto p-1 md:min-w-48">
       <span className="block pb-2 pl-2.5 pt-2 text-xs font-medium text-gray-500">
-        UTM Templates
+        {t("utm-templates")}
       </span>
       {data.map((template) => (
         <UTMTemplateOption
@@ -117,7 +122,7 @@ function UTMTemplateList({
     </div>
   ) : (
     <div className="flex items-center justify-center p-3 text-center text-xs text-gray-500">
-      No templates found
+      {t("no-templates-found")}
     </div>
   );
 }
diff --git a/apps/web/ui/modals/link-qr-modal.tsx b/apps/web/ui/modals/link-qr-modal.tsx
index f2140c85be..93cbb7b29b 100644
--- a/apps/web/ui/modals/link-qr-modal.tsx
+++ b/apps/web/ui/modals/link-qr-modal.tsx
@@ -30,6 +30,7 @@ import {
 } from "@dub/ui/icons";
 import { API_DOMAIN, cn, DUB_QR_LOGO, linkConstructor } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
+import { useTranslations } from "next-intl";
 import {
   Dispatch,
   PropsWithChildren,
@@ -92,6 +93,8 @@ function LinkQRModalInner({
   showLinkQRModal: boolean;
   setShowLinkQRModal: Dispatch<SetStateAction<boolean>>;
 } & LinkQRModalProps) {
+  const t = useTranslations("../ui/modals");
+
   const { id: workspaceId, slug, plan, logo: workspaceLogo } = useWorkspace();
   const id = useId();
   const { isMobile } = useMediaQuery();
@@ -152,11 +155,11 @@ function LinkQRModalInner({
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <h3 className="text-lg font-medium">QR Code</h3>
+          <h3 className="text-lg font-medium">{t("qr-code-title")}</h3>
           <ProBadgeTooltip
             content={
               <SimpleTooltipContent
-                title="Set a custom QR code design to improve click-through rates."
+                title={t("qr-code-custom-design-description")}
                 cta="Learn more."
                 href="https://dub.co/help/article/custom-qr-codes"
               />
@@ -167,14 +170,19 @@ function LinkQRModalInner({
           <Tooltip
             content={
               <div className="px-2 py-1 text-xs text-gray-700">
-                Press <strong className="font-medium text-gray-950">Q</strong>{" "}
-                to open this quickly
+                {t("qr-code-quick-open-instruction", {
+                  component0: (
+                    <strong className="font-medium text-gray-950">
+                      {t("qr-code-quick-open-instruction_component0")}
+                    </strong>
+                  ),
+                })}
               </div>
             }
             side="right"
           >
             <kbd className="flex size-6 cursor-default items-center justify-center rounded-md border border-gray-200 font-sans text-xs text-gray-950">
-              Q
+              {t("qr-code-quick-open-key")}
             </kbd>
           </Tooltip>
         </div>
@@ -184,12 +192,12 @@ function LinkQRModalInner({
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2">
             <span className="text-sm font-medium text-gray-700">
-              QR Code Preview
+              {t("qr-code-preview-title")}
             </span>
             <InfoTooltip
               content={
                 <SimpleTooltipContent
-                  title="Customize your QR code to fit your brand."
+                  title={t("qr-code-customization-brand-description")}
                   cta="Learn more."
                   href="https://dub.co/help/article/custom-qr-codes"
                 />
@@ -257,12 +265,12 @@ function LinkQRModalInner({
             className="text-sm font-medium text-gray-700"
             htmlFor={`${id}-show-logo`}
           >
-            Logo
+            {t("qr-code-logo-label")}
           </label>
           <InfoTooltip
             content={
               <SimpleTooltipContent
-                title="Display your logo in the center of the QR code."
+                title={t("qr-code-logo-display-description")}
                 cta="Learn more."
                 href="https://dub.co/help/article/custom-qr-codes"
               />
@@ -278,7 +286,7 @@ function LinkQRModalInner({
           disabledTooltip={
             !plan || plan === "free" ? (
               <TooltipContent
-                title="You need to be on the Pro plan and above to customize your QR Code logo."
+                title={t("qr-code-logo-pro-plan-requirement")}
                 cta="Upgrade to Pro"
                 href={
                   slug
@@ -300,7 +308,7 @@ function LinkQRModalInner({
       {/* Color selector */}
       <div>
         <span className="block text-sm font-medium text-gray-700">
-          QR Code Color
+          {t("qr-code-color-label")}
         </span>
         <div className="mt-2 flex gap-6">
           <div className="relative flex h-9 w-32 shrink-0 rounded-md shadow-sm">
@@ -361,7 +369,7 @@ function LinkQRModalInner({
         <Button
           type="button"
           variant="secondary"
-          text="Cancel"
+          text={t("button-cancel")}
           className="h-9 w-fit"
           onClick={() => {
             setShowLinkQRModal(false);
@@ -370,7 +378,7 @@ function LinkQRModalInner({
         <Button
           type="submit"
           variant="primary"
-          text="Save changes"
+          text={t("button-save-changes")}
           className="h-9 w-fit"
         />
       </div>
@@ -386,6 +394,8 @@ function DownloadPopover({
   qrData: ReturnType<typeof getQRData>;
   props: QRLinkProps;
 }>) {
+  const t = useTranslations("../ui/modals");
+
   const anchorRef = useRef<HTMLAnchorElement>(null);
 
   function download(url: string, extension: string) {
@@ -411,7 +421,7 @@ function DownloadPopover({
               className="rounded-md p-2 text-left text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
             >
               <IconMenu
-                text="Download SVG"
+                text={t("button-download-svg")}
                 icon={<Photo className="h-4 w-4" />}
               />
             </button>
@@ -426,7 +436,7 @@ function DownloadPopover({
               className="rounded-md p-2 text-left text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
             >
               <IconMenu
-                text="Download PNG"
+                text={t("button-download-png")}
                 icon={<Photo className="h-4 w-4" />}
               />
             </button>
@@ -441,7 +451,7 @@ function DownloadPopover({
               className="rounded-md p-2 text-left text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
             >
               <IconMenu
-                text="Download JPEG"
+                text={t("button-download-jpeg")}
                 icon={<Photo className="h-4 w-4" />}
               />
             </button>
@@ -470,6 +480,8 @@ function CopyPopover({
   qrData: ReturnType<typeof getQRData>;
   props: QRLinkProps;
 }>) {
+  const t = useTranslations("../ui/modals");
+
   const [openPopover, setOpenPopover] = useState(false);
   const [copiedURL, copyUrlToClipboard] = useCopyToClipboard(2000);
   const [copiedImage, copyImageToClipboard] = useCopyToClipboard(2000);
@@ -504,7 +516,7 @@ function CopyPopover({
             className="rounded-md p-2 text-left text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
           >
             <IconMenu
-              text="Copy Image"
+              text={t("button-copy-image")}
               icon={
                 copiedImage ? (
                   <Check className="h-4 w-4" />
@@ -532,7 +544,7 @@ function CopyPopover({
             className="rounded-md p-2 text-left text-sm font-medium text-gray-500 transition-all duration-75 hover:bg-gray-100"
           >
             <IconMenu
-              text="Copy URL"
+              text={t("button-copy-url")}
               icon={
                 copiedURL ? (
                   <Check className="h-4 w-4" />
diff --git a/apps/web/ui/modals/remove-teammate-modal.tsx b/apps/web/ui/modals/remove-teammate-modal.tsx
index 2945116fd2..d4bc19c4e9 100644
--- a/apps/web/ui/modals/remove-teammate-modal.tsx
+++ b/apps/web/ui/modals/remove-teammate-modal.tsx
@@ -2,6 +2,7 @@ import useWorkspace from "@/lib/swr/use-workspace";
 import { UserProps } from "@/lib/types";
 import { Avatar, BlurImage, Button, Logo, Modal, useMediaQuery } from "@dub/ui";
 import { useSession } from "next-auth/react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import {
   Dispatch,
@@ -24,6 +25,8 @@ function RemoveTeammateModal({
   user: UserProps;
   invite?: boolean;
 }) {
+  const t = useTranslations("../ui/modals");
+
   const router = useRouter();
   const [removing, setRemoving] = useState(false);
   const { id: workspaceId, name: workspaceName, logo } = useWorkspace();
@@ -40,7 +43,7 @@ function RemoveTeammateModal({
         {logo ? (
           <BlurImage
             src={logo}
-            alt="Workspace logo"
+            alt={t("workspace-logo")}
             className="h-10 w-10 rounded-full"
             width={20}
             height={20}
@@ -56,20 +59,25 @@ function RemoveTeammateModal({
               : "Remove Teammate"}
         </h3>
         <p className="text-center text-sm text-gray-500">
-          {invite
-            ? "This will revoke "
-            : session?.user?.email === email
-              ? "You're about to leave "
-              : "This will remove "}
-          <span className="font-semibold text-black">
-            {session?.user?.email === email ? workspaceName : name || email}
-          </span>
-          {invite
-            ? "'s invitation to join your workspace. "
-            : session?.user?.email === email
-              ? ". You will lose all access to this workspace. "
-              : " from your workspace. "}
-          Are you sure you want to continue?
+          {t("workspace-removal-confirmation", {
+            inviteThisWillRevokeSessionUserEmailEmailYouReAboutToLeaveThisWillRemove:
+              invite
+                ? "This will revoke "
+                : session?.user?.email === email
+                  ? "You're about to leave "
+                  : "This will remove ",
+            component0: (
+              <span className="font-semibold text-black">
+                {session?.user?.email === email ? workspaceName : name || email}
+              </span>
+            ),
+            inviteSInvitationToJoinYourWorkspaceSessionUserEmailEmailYouWillLoseAllAccessToThisWorkspaceFromYourWorkspace:
+              invite
+                ? "'s invitation to join your workspace. "
+                : session?.user?.email === email
+                  ? ". You will lose all access to this workspace. "
+                  : " from your workspace. ",
+          })}
         </p>
       </div>
 
@@ -82,7 +90,7 @@ function RemoveTeammateModal({
           </div>
         </div>
         <Button
-          text="Confirm"
+          text={t("confirm-button")}
           variant="danger"
           autoFocus={!isMobile}
           loading={removing}
diff --git a/apps/web/ui/modals/token-created-modal.tsx b/apps/web/ui/modals/token-created-modal.tsx
index 584434ad83..e56eb23d30 100644
--- a/apps/web/ui/modals/token-created-modal.tsx
+++ b/apps/web/ui/modals/token-created-modal.tsx
@@ -1,4 +1,5 @@
 import { Button, Copy, Modal, Tick, useCopyToClipboard } from "@dub/ui";
+import { useTranslations } from "next-intl";
 import {
   Dispatch,
   SetStateAction,
@@ -17,6 +18,8 @@ function TokenCreatedModal({
   setShowTokenCreatedModal: Dispatch<SetStateAction<boolean>>;
   token: string;
 }) {
+  const t = useTranslations("../ui/modals");
+
   const [copied, copyToClipboard] = useCopyToClipboard();
 
   return (
@@ -26,16 +29,17 @@ function TokenCreatedModal({
       className="max-w-md"
     >
       <div className="space-y-2 border-b border-neutral-200 px-4 py-4 sm:px-6">
-        <h3 className="text-lg font-medium">API Key Created</h3>
+        <h3 className="text-lg font-medium">{t("api-key-created")}</h3>
         <p className="text-sm text-neutral-500">
-          For security reasons, we will only show you the key once. Please copy
-          and store it somewhere safe.
+          {t("api-key-security-notice")}
         </p>
       </div>
 
       <div className="flex flex-col space-y-4 bg-neutral-50 px-4 py-8 sm:px-6">
         <div className="flex flex-col gap-1">
-          <h2 className="text-sm font-medium text-neutral-800">API key</h2>
+          <h2 className="text-sm font-medium text-neutral-800">
+            {t("api-key-label")}
+          </h2>
           <div className="flex items-center justify-between rounded-md border border-neutral-200 bg-white p-2">
             <p className="font-mono text-sm text-neutral-500">{token}</p>
             <button
@@ -57,7 +61,10 @@ function TokenCreatedModal({
             </button>
           </div>
         </div>
-        <Button text="Done" onClick={() => setShowTokenCreatedModal(false)} />
+        <Button
+          text={t("done-button")}
+          onClick={() => setShowTokenCreatedModal(false)}
+        />
       </div>
     </Modal>
   );
diff --git a/apps/web/ui/oauth-apps/add-edit-integration-form.tsx b/apps/web/ui/oauth-apps/add-edit-integration-form.tsx
index f3dcdc4004..9be11bcfe4 100644
--- a/apps/web/ui/oauth-apps/add-edit-integration-form.tsx
+++ b/apps/web/ui/oauth-apps/add-edit-integration-form.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { addEditIntegration } from "@/lib/actions/add-edit-integration";
 import { clientAccessCheck } from "@/lib/api/tokens/permissions";
@@ -19,6 +20,8 @@ export default function AddEditIntegrationForm({
 }: {
   integration: NewOrExistingIntegration;
 }) {
+  const t = useTranslations("../ui/oauth-apps");
+
   const { id: workspaceId, role } = useWorkspace();
   const [screenshots, setScreenshots] = useState<
     {
@@ -145,7 +148,7 @@ export default function AddEditIntegrationForm({
         <div>
           <label htmlFor="name" className="flex items-center space-x-2">
             <h2 className="text-sm font-medium text-gray-900">
-              Application name
+              {t("application-name")}
             </h2>
             <InfoTooltip content="Application name will be displayed in the OAuth consent screen" />
           </label>
@@ -162,7 +165,7 @@ export default function AddEditIntegrationForm({
               onChange={(e) => setData({ ...data, name: e.target.value })}
               autoFocus
               autoComplete="off"
-              placeholder="My App"
+              placeholder={t("my-app-name")}
               disabled={!canManageApp}
             />
           </div>
@@ -171,7 +174,7 @@ export default function AddEditIntegrationForm({
         <div>
           <label htmlFor="slug" className="flex items-center space-x-2">
             <h2 className="text-sm font-medium text-gray-900">
-              Application slug
+              {t("application-slug")}
             </h2>
             <InfoTooltip content="Unique slug for this application on Dub" />
           </label>
@@ -195,7 +198,9 @@ export default function AddEditIntegrationForm({
 
         <div>
           <label htmlFor="slug" className="flex items-center space-x-2">
-            <h2 className="text-sm font-medium text-gray-900">Description</h2>
+            <h2 className="text-sm font-medium text-gray-900">
+              {t("description")}
+            </h2>
             <InfoTooltip content="Description of your application" />
           </label>
           <div className="relative mt-2 rounded-md shadow-sm">
@@ -208,7 +213,7 @@ export default function AddEditIntegrationForm({
                   "cursor-not-allowed bg-gray-50": !canManageApp,
                 },
               )}
-              placeholder="Add a description"
+              placeholder={t("add-description-placeholder")}
               value={description || ""}
               maxLength={120}
               onChange={(e) => {
@@ -221,7 +226,9 @@ export default function AddEditIntegrationForm({
 
         <div>
           <label htmlFor="slug" className="flex items-center space-x-2">
-            <h2 className="text-sm font-medium text-gray-900">Overview</h2>
+            <h2 className="text-sm font-medium text-gray-900">
+              {t("overview")}
+            </h2>
             <InfoTooltip content="Provide some details about your integration. This will be displayed on the integration page. Markdown is supported." />
           </label>
           <div className="relative mt-2 rounded-md shadow-sm">
@@ -234,7 +241,7 @@ export default function AddEditIntegrationForm({
                   "cursor-not-allowed bg-gray-50": !canManageApp,
                 },
               )}
-              placeholder="## My Awesome Integration"
+              placeholder={t("my-awesome-integration-title")}
               value={readme || ""}
               maxLength={1000}
               onChange={(e) => {
@@ -247,7 +254,9 @@ export default function AddEditIntegrationForm({
 
         <div>
           <label htmlFor="slug" className="flex items-center space-x-2">
-            <h2 className="text-sm font-medium text-gray-900">Screenshots</h2>
+            <h2 className="text-sm font-medium text-gray-900">
+              {t("screenshots")}
+            </h2>
             <InfoTooltip content="You can upload up to 4 screenshots that will be displayed on the integration page." />
           </label>
           <Reorder.Group
@@ -301,7 +310,7 @@ export default function AddEditIntegrationForm({
         <div>
           <label htmlFor="developer" className="flex items-center space-x-2">
             <h2 className="text-sm font-medium text-gray-900">
-              Developer name
+              {t("developer-name")}
             </h2>
             <InfoTooltip content="The person or company developing this application" />
           </label>
@@ -316,7 +325,7 @@ export default function AddEditIntegrationForm({
               required
               value={developer}
               onChange={(e) => setData({ ...data, developer: e.target.value })}
-              placeholder="Acme Inc."
+              placeholder={t("acme-inc")}
               disabled={!canManageApp}
             />
           </div>
@@ -324,7 +333,9 @@ export default function AddEditIntegrationForm({
 
         <div>
           <label htmlFor="website" className="flex items-center space-x-2">
-            <h2 className="text-sm font-medium text-gray-900">Website URL</h2>
+            <h2 className="text-sm font-medium text-gray-900">
+              {t("website-url")}
+            </h2>
             <InfoTooltip content="URL to the developer's website or documentation" />
           </label>
           <div className="relative mt-2 rounded-md shadow-sm">
@@ -339,7 +350,7 @@ export default function AddEditIntegrationForm({
               required
               value={website}
               onChange={(e) => setData({ ...data, website: e.target.value })}
-              placeholder="https://acme.com"
+              placeholder={t("acme-website-url")}
               disabled={!canManageApp}
             />
           </div>
diff --git a/apps/web/ui/oauth-apps/oauth-app-credentials.tsx b/apps/web/ui/oauth-apps/oauth-app-credentials.tsx
index 9db15ff2ba..10eead49f7 100644
--- a/apps/web/ui/oauth-apps/oauth-app-credentials.tsx
+++ b/apps/web/ui/oauth-apps/oauth-app-credentials.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { CopyButton } from "@dub/ui";
 
@@ -11,6 +12,8 @@ export default function OAuthAppCredentials({
   clientSecret: string | null;
   partialClientSecret: string;
 }) {
+  const t = useTranslations("../ui/oauth-apps");
+
   if (!clientId) {
     return null;
   }
@@ -18,7 +21,9 @@ export default function OAuthAppCredentials({
   return (
     <div className="flex flex-col space-y-3 text-left">
       <div className="space-y-2">
-        <label className="text-sm font-medium text-gray-500">Client ID</label>
+        <label className="text-sm font-medium text-gray-500">
+          {t("client-id")}
+        </label>
         <div className="grid grid-cols-[1fr,auto] items-center gap-2 rounded-md border border-gray-300 bg-white p-3">
           <p className="truncate font-mono text-sm text-gray-500">{clientId}</p>
           <CopyButton value={clientId} className="rounded-md" />
@@ -28,7 +33,7 @@ export default function OAuthAppCredentials({
       {clientSecret && (
         <div className="space-y-2">
           <label className="text-sm font-medium text-gray-500">
-            Client Secret
+            {t("client-secret-label")}
           </label>
           <div className="flex items-center justify-between rounded-md border border-gray-300 bg-white p-3">
             <p className="text-nowrap font-mono text-sm text-gray-500">
@@ -39,8 +44,7 @@ export default function OAuthAppCredentials({
             </div>
           </div>
           <span className="text-xs text-red-400">
-            Be sure to copy your client secret. You won’t be able to see it
-            again.
+            {t("client-secret-warning")}
           </span>
         </div>
       )}
@@ -48,7 +52,7 @@ export default function OAuthAppCredentials({
       {!clientSecret && partialClientSecret && (
         <div className="space-y-2">
           <label className="text-sm font-medium text-gray-500">
-            Client Secret
+            {t("client-secret-label-duplicate")}
           </label>
           <div className="flex items-center justify-between rounded-md border border-gray-300 bg-white p-3">
             <p className="text-nowrap font-mono text-sm text-gray-500">
diff --git a/apps/web/ui/shared/pro-badge-tooltip.tsx b/apps/web/ui/shared/pro-badge-tooltip.tsx
index cd8b6fb46e..7a40391092 100644
--- a/apps/web/ui/shared/pro-badge-tooltip.tsx
+++ b/apps/web/ui/shared/pro-badge-tooltip.tsx
@@ -1,6 +1,7 @@
 import useWorkspace from "@/lib/swr/use-workspace";
 import { BadgeTooltip, InfoTooltip, type TooltipProps } from "@dub/ui";
 import { Crown } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 /**
  * A dynamic badge/icon w/ tooltip based on the workspace plan:
@@ -9,13 +10,15 @@ import { Crown } from "lucide-react";
  * For a Pro workspace: an info icon (question mark circle)
  */
 export function ProBadgeTooltip(props: Omit<TooltipProps, "children">) {
+  const t = useTranslations("../ui/shared");
+
   const { plan } = useWorkspace();
 
   return plan === "free" ? (
     <BadgeTooltip {...props}>
       <div className="flex items-center space-x-1">
         <Crown size={12} />
-        <p className="uppercase">Pro</p>
+        <p className="uppercase">{t("pro")}</p>
       </div>
     </BadgeTooltip>
   ) : (
diff --git a/apps/web/ui/webhooks/webhook-events.tsx b/apps/web/ui/webhooks/webhook-events.tsx
index 5305bf5c82..b5ee52ce40 100644
--- a/apps/web/ui/webhooks/webhook-events.tsx
+++ b/apps/web/ui/webhooks/webhook-events.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { WebhookEventProps } from "@/lib/types";
 import {
@@ -20,6 +21,8 @@ export type EventListProps = PropsWithChildren<{
 }>;
 
 const WebhookEvent = ({ event }: { event: WebhookEventProps }) => {
+  const t = useTranslations("../ui/webhooks");
+
   const [highlighter, setHighlighter] = useState<Highlighter | null>(null);
   const [responseBody, setResponseBody] = useState<string>("");
   const [requestBody, setRequestBody] = useState<string>("");
@@ -145,9 +148,9 @@ const WebhookEvent = ({ event }: { event: WebhookEventProps }) => {
           </div>
         </div>
         <div className="grid gap-4 border-t border-gray-200 bg-white p-6">
-          <h4 className="font-semibold">Response</h4>
+          <h4 className="font-semibold">{t("response-message")}</h4>
           <div className="flex items-center gap-8">
-            <p className="text-sm text-gray-500">HTTP status code</p>
+            <p className="text-sm text-gray-500">{t("http-status-code")}</p>
             <p className="text-sm text-gray-700">{event.http_status}</p>
           </div>
           <div
@@ -156,7 +159,7 @@ const WebhookEvent = ({ event }: { event: WebhookEventProps }) => {
           />
         </div>
         <div className="grid gap-4 border-t border-gray-200 bg-white p-6">
-          <h4 className="font-semibold">Request</h4>
+          <h4 className="font-semibold">{t("request-message")}</h4>
           <div
             className="shiki-wrapper overflow-y-scroll text-sm"
             dangerouslySetInnerHTML={{ __html: requestBody }}
diff --git a/apps/web/ui/webhooks/webhook-header.tsx b/apps/web/ui/webhooks/webhook-header.tsx
index 09f3c2ad3f..511d3f0029 100644
--- a/apps/web/ui/webhooks/webhook-header.tsx
+++ b/apps/web/ui/webhooks/webhook-header.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { enableOrDisableWebhook } from "@/lib/actions/enable-disable-webhook";
 import { clientAccessCheck } from "@/lib/api/tokens/permissions";
@@ -26,6 +27,8 @@ import { useSendTestWebhookModal } from "../modals/send-test-webhook-modal";
 import { WebhookStatus } from "./webhook-status";
 
 export default function WebhookHeader({ webhookId }: { webhookId: string }) {
+  const t = useTranslations("../ui/webhooks");
+
   const router = useRouter();
   const { webhook, isLoading, mutate } = useWebhook();
   const { slug, id: workspaceId, role } = useWorkspace();
@@ -89,7 +92,9 @@ export default function WebhookHeader({ webhookId }: { webhookId: string }) {
           className="flex items-center gap-x-1"
         >
           <ChevronLeft className="size-4" />
-          <p className="text-sm font-medium text-gray-500">Back to webhooks</p>
+          <p className="text-sm font-medium text-gray-500">
+            {t("back-to-webhooks")}
+          </p>
         </Link>
         <div className="flex justify-between gap-8 sm:items-center">
           {isLoading || !webhook ? (
@@ -130,7 +135,7 @@ export default function WebhookHeader({ webhookId }: { webhookId: string }) {
               <div className="w-screen sm:w-48">
                 <div className="grid gap-px p-2">
                   <Button
-                    text="Copy Webhook ID"
+                    text={t("copy-webhook-id")}
                     variant="outline"
                     icon={
                       copiedWebhookId ? (
@@ -144,7 +149,7 @@ export default function WebhookHeader({ webhookId }: { webhookId: string }) {
                   />
 
                   <Button
-                    text="Send test event"
+                    text={t("send-test-event")}
                     variant="outline"
                     icon={<Send className="size-4" />}
                     className="h-9 justify-start px-2"
@@ -193,7 +198,7 @@ export default function WebhookHeader({ webhookId }: { webhookId: string }) {
                   />
 
                   <Button
-                    text="Delete webhook"
+                    text={t("delete-webhook")}
                     variant="danger-outline"
                     icon={<Trash className="size-4" />}
                     className="h-9 justify-start px-2"
diff --git a/apps/web/ui/workspaces/conversion-tracking-toggle.tsx b/apps/web/ui/workspaces/conversion-tracking-toggle.tsx
index d71aa55e3e..86f48d2c6f 100644
--- a/apps/web/ui/workspaces/conversion-tracking-toggle.tsx
+++ b/apps/web/ui/workspaces/conversion-tracking-toggle.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { clientAccessCheck } from "@/lib/api/tokens/permissions";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -8,6 +9,8 @@ import { toast } from "sonner";
 import { mutate } from "swr";
 
 export function ConversionTrackingToggle() {
+  const t = useTranslations("../ui/workspaces");
+
   const id = useId();
 
   return (
@@ -21,11 +24,10 @@ export function ConversionTrackingToggle() {
             htmlFor={`${id}-switch`}
             className="block text-pretty font-medium"
           >
-            Workspace-level conversion tracking
+            {t("workspace-level-conversion-tracking")}
           </label>
           <p className="mt-1 flex items-center gap-1 text-sm text-gray-500">
-            Enable conversion tracking for all future links in this workspace.
-            This only affects links made with the link builder.
+            {t("enable-conversion-tracking-future-links")}
           </p>
         </div>
       </div>
@@ -37,6 +39,8 @@ export function ConversionTrackingToggle() {
 export function ConversionTrackingToggleSwitch(
   props: ComponentProps<typeof Switch>,
 ) {
+  const t = useTranslations("../ui/workspaces");
+
   const {
     slug: workspaceSlug,
     plan,
@@ -64,7 +68,7 @@ export function ConversionTrackingToggleSwitch(
       disabledTooltip={
         plan === "free" || plan === "pro" ? (
           <TooltipContent
-            title="You can only enable conversion tracking on Business plans and above."
+            title={t("conversion-tracking-business-plans-only")}
             cta="Upgrade to Business"
             href={`/${workspaceSlug}/upgrade`}
           />
diff --git a/apps/web/ui/workspaces/create-workspace-form.tsx b/apps/web/ui/workspaces/create-workspace-form.tsx
index b2ece3ac95..348ac65f0c 100644
--- a/apps/web/ui/workspaces/create-workspace-form.tsx
+++ b/apps/web/ui/workspaces/create-workspace-form.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { AlertCircleFill } from "@/ui/shared/icons";
 import { Button, InfoTooltip, useMediaQuery } from "@dub/ui";
@@ -23,6 +24,8 @@ export function CreateWorkspaceForm({
   onSuccess?: (data: FormData) => void;
   className?: string;
 }) {
+  const t = useTranslations("../ui/workspaces");
+
   const { update } = useSession();
   const plausible = usePlausible();
 
@@ -87,7 +90,7 @@ export function CreateWorkspaceForm({
       <div>
         <label htmlFor="name" className="flex items-center space-x-2">
           <p className="block text-sm font-medium text-gray-700">
-            Workspace Name
+            {t("workspace-name")}
           </p>
           <InfoTooltip
             content={`This is the name of your workspace on ${process.env.NEXT_PUBLIC_APP_NAME}.`}
@@ -100,7 +103,7 @@ export function CreateWorkspaceForm({
             autoFocus={!isMobile}
             autoComplete="off"
             className="block w-full rounded-md border-gray-300 text-gray-900 placeholder-gray-400 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm"
-            placeholder="Acme, Inc."
+            placeholder={t("company-name")}
             {...register("name", {
               required: true,
               onChange: (e) => setValue("slug", slugify(e.target.value)),
@@ -112,7 +115,7 @@ export function CreateWorkspaceForm({
       <div>
         <label htmlFor="slug" className="flex items-center space-x-2">
           <p className="block text-sm font-medium text-gray-700">
-            Workspace Slug
+            {t("workspace-slug")}
           </p>
           <InfoTooltip
             content={`This is your workspace's unique slug on ${process.env.NEXT_PUBLIC_APP_NAME}.`}
@@ -120,7 +123,9 @@ export function CreateWorkspaceForm({
         </label>
         <div className="relative mt-2 flex rounded-md shadow-sm">
           <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-5 text-gray-500 sm:text-sm">
-            app.{process.env.NEXT_PUBLIC_APP_DOMAIN}
+            {t("app-domain", {
+              processEnvNextPublicAppDomain: process.env.NEXT_PUBLIC_APP_DOMAIN,
+            })}
           </span>
           <input
             id="slug"
@@ -132,7 +137,7 @@ export function CreateWorkspaceForm({
                 ? "border-red-300 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
                 : "border-gray-300 text-gray-900 placeholder-gray-400 focus:border-gray-500 focus:ring-gray-500"
             } block w-full rounded-r-md focus:outline-none sm:text-sm`}
-            placeholder="acme"
+            placeholder={t("workspace-id")}
             {...register("slug", {
               required: true,
               minLength: 3,
@@ -171,7 +176,7 @@ export function CreateWorkspaceForm({
 
       <Button
         loading={isSubmitting || isSubmitSuccessful}
-        text="Create workspace"
+        text={t("create-workspace")}
       />
     </form>
   );
diff --git a/apps/web/ui/workspaces/invite-teammates-form.tsx b/apps/web/ui/workspaces/invite-teammates-form.tsx
index 61fa56310d..5799c272d1 100644
--- a/apps/web/ui/workspaces/invite-teammates-form.tsx
+++ b/apps/web/ui/workspaces/invite-teammates-form.tsx
@@ -5,6 +5,7 @@ import { Button, useMediaQuery } from "@dub/ui";
 import { Trash } from "@dub/ui/icons";
 import { capitalize, cn, pluralize } from "@dub/utils";
 import { Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
 import posthog from "posthog-js";
 import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -30,6 +31,8 @@ export function InviteTeammatesForm({
   invites?: Invite[];
   className?: string;
 }) {
+  const t = useTranslations("../ui/workspaces");
+
   const { id, slug } = useWorkspace();
   const { isMobile } = useMediaQuery();
 
@@ -88,7 +91,7 @@ export function InviteTeammatesForm({
             toast.custom(
               () => (
                 <UpgradeRequiredToast
-                  title="Upgrade required"
+                  title={t("upgrade-required")}
                   message="You've reached the invite limit for your plan. Please upgrade to invite more teammates."
                 />
               ),
@@ -114,7 +117,7 @@ export function InviteTeammatesForm({
               <div className="relative flex rounded-md shadow-sm">
                 <input
                   type="email"
-                  placeholder="panic@thedis.co"
+                  placeholder={t("email-contact-panic")}
                   autoFocus={index === 0 && !isMobile}
                   autoComplete="off"
                   className="z-10 block w-full rounded-l-md border-gray-300 text-gray-900 placeholder-gray-400 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm"
@@ -153,7 +156,7 @@ export function InviteTeammatesForm({
           className="h-9 w-fit"
           variant="secondary"
           icon={<Plus className="size-4" />}
-          text="Add email"
+          text={t("add-email-button")}
           onClick={() => append({ email: "", role: "member" })}
           disabled={fields.length >= maxTeammates}
         />
@@ -169,19 +172,24 @@ export function InviteTeammatesForm({
 }
 
 function InviteSavedToast({ teammates }: { teammates: number }) {
+  const t = useTranslations("../ui/workspaces");
+
   return (
     <div className="flex items-center gap-1.5 rounded-lg bg-white p-4 text-sm shadow-[0_4px_12px_#0000001a]">
       <CheckCircleFill className="size-5 shrink-0 text-black" />
       <p className="text-[13px] font-medium text-gray-900">
-        {pluralize("Invitation", teammates)} saved. You'll need a pro plan to
-        invite teammates.{" "}
-        <a
-          href="https://dub.co/help/article/how-to-invite-teammates"
-          target="_blank"
-          className="text-gray-500 underline transition-colors hover:text-gray-800"
-        >
-          Learn more
-        </a>
+        {pluralize("Invitation", teammates)}
+        {t("pro-plan-invite-teammates", {
+          component0: (
+            <a
+              href="https://dub.co/help/article/how-to-invite-teammates"
+              target="_blank"
+              className="text-gray-500 underline transition-colors hover:text-gray-800"
+            >
+              {t("pro-plan-invite-teammates_component0")}
+            </a>
+          ),
+        })}
       </p>
     </div>
   );
diff --git a/apps/web/ui/workspaces/upload-logo.tsx b/apps/web/ui/workspaces/upload-logo.tsx
index 3946488d6d..6171b2c531 100644
--- a/apps/web/ui/workspaces/upload-logo.tsx
+++ b/apps/web/ui/workspaces/upload-logo.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import useWorkspace from "@/lib/swr/use-workspace";
 import { Button, FileUpload } from "@dub/ui";
@@ -7,6 +8,8 @@ import { toast } from "sonner";
 import { mutate } from "swr";
 
 export default function UploadLogo() {
+  const t = useTranslations("../ui/workspaces");
+
   const { id, logo, isOwner } = useWorkspace();
 
   const [image, setImage] = useState<string | null>();
@@ -45,9 +48,11 @@ export default function UploadLogo() {
       className="rounded-lg border border-gray-200 bg-white"
     >
       <div className="flex flex-col space-y-3 p-5 sm:p-10">
-        <h2 className="text-xl font-medium">Workspace Logo</h2>
+        <h2 className="text-xl font-medium">{t("workspace-logo")}</h2>
         <p className="text-sm text-gray-500">
-          This is your workspace's logo on {process.env.NEXT_PUBLIC_APP_NAME}.
+          {t("workspace-logo-description", {
+            processEnvNextPublicAppName: process.env.NEXT_PUBLIC_APP_NAME,
+          })}
         </p>
         <div className="mt-1">
           <FileUpload
@@ -67,12 +72,11 @@ export default function UploadLogo() {
 
       <div className="flex items-center justify-between space-x-4 rounded-b-lg border-t border-gray-200 bg-gray-50 p-3 sm:px-10">
         <p className="text-sm text-gray-500">
-          Square image recommended. Accepted file types: .png, .jpg. Max file
-          size: 2MB.
+          {t("image-upload-recommendations")}
         </p>
         <div className="shrink-0">
           <Button
-            text="Save changes"
+            text={t("save-changes-button")}
             loading={uploading}
             disabled={!isOwner || !image || logo === image}
             {...(!isOwner && {
diff --git a/packages/stripe-app/src/views/AppSettings.tsx b/packages/stripe-app/src/views/AppSettings.tsx
index 935c4a0eb3..152527a301 100644
--- a/packages/stripe-app/src/views/AppSettings.tsx
+++ b/packages/stripe-app/src/views/AppSettings.tsx
@@ -1,5 +1,3 @@
-import { I18nextProvider } from "react-i18next";
-import { i18n } from ".././i18n";
 import type { ExtensionContextValue } from "@stripe/ui-extension-sdk/context";
 import { createOAuthState } from "@stripe/ui-extension-sdk/oauth";
 import {
@@ -11,6 +9,8 @@ import {
   Spinner,
 } from "@stripe/ui-extension-sdk/ui";
 import { useEffect, useRef, useState } from "react";
+import { I18nextProvider, Trans, useTranslation } from "react-i18next";
+import { i18n } from ".././i18n";
 import { useWorkspace } from "../hooks/use-workspace";
 import appIcon from "../icon.svg";
 import { updateWorkspace } from "../utils/dub";
@@ -25,6 +25,8 @@ import { stripe } from "../utils/stripe";
 import { Workspace } from "../utils/types";
 
 const AppSettings = ({ userContext, oauthContext }: ExtensionContextValue) => {
+  const { t } = useTranslation("views");
+
   const credentialsUsed = useRef(false);
   const [oauthState, setOAuthState] = useState("");
   const [challenge, setChallenge] = useState("");
@@ -139,56 +141,66 @@ const AppSettings = ({ userContext, oauthContext }: ExtensionContextValue) => {
 
   return (
     <I18nextProvider i18n={i18n}>
-<Box css={{ width: "6/12", stack: "y", gap: "large" }}>
-      {workspace ? (
-        <Banner
-          title="Dub workspace"
-          description={`Connected to ${workspace.name}`}
-          actions={
-            <Button
-              type="destructive"
-              size="small"
-              disabled={disconnecting}
-              onPress={async () => {
-                setDisconnecting(true);
-
-                await disconnectWorkspace({
-                  workspace,
-                });
-
-                mutate();
-                setDisconnecting(false);
-              }}
-            >
-              {disconnecting ? "Disconnecting..." : "Disconnect"}
-            </Button>
-          }
-        />
-      ) : (
-        <SignInView
-          description="Connect your Dub workspace with Stripe to start tracking the conversions."
-          primaryAction={{
-            label: connecting
-              ? "Connecting please wait..."
-              : "Connect workspace",
-            href: connecting
-              ? "#"
-              : getOAuthUrl({ state: oauthState, challenge }),
-          }}
-          footerContent={
-            <>
-              Don&apos;t have an Dub account?{" "}
-              <Link href="https://app.dub.co/register" target="_blank" external>
-                Sign up
-              </Link>
-            </>
-          }
-          brandColor="#000000"
-          brandIcon={appIcon}
-        />
-      )}
-    </Box>
-</I18nextProvider>
+      <Box css={{ width: "6/12", stack: "y", gap: "large" }}>
+        {workspace ? (
+          <Banner
+            title={t("dub-workspace-title")}
+            description={t("connected-to-workspace", {
+              workspaceName: workspace.name,
+            })}
+            actions={
+              <Button
+                type="destructive"
+                size="small"
+                disabled={disconnecting}
+                onPress={async () => {
+                  setDisconnecting(true);
+
+                  await disconnectWorkspace({
+                    workspace,
+                  });
+
+                  mutate();
+                  setDisconnecting(false);
+                }}
+              >
+                {disconnecting ? "Disconnecting..." : "Disconnect"}
+              </Button>
+            }
+          />
+        ) : (
+          <SignInView
+            description={t("connect-dub-workspace-stripe")}
+            primaryAction={{
+              label: connecting
+                ? "Connecting please wait..."
+                : "Connect workspace",
+              href: connecting
+                ? "#"
+                : getOAuthUrl({ state: oauthState, challenge }),
+            }}
+            footerContent={
+              <>
+                <Trans
+                  i18nKey="dub-account-sign-up-prompt"
+                  components={{
+                    "0": (
+                      <Link
+                        href="https://app.dub.co/register"
+                        target="_blank"
+                        external
+                      />
+                    ),
+                  }}
+                />
+              </>
+            }
+            brandColor="#000000"
+            brandIcon={appIcon}
+          />
+        )}
+      </Box>
+    </I18nextProvider>
   );
 };
 
diff --git a/packages/stripe-app/src/views/locales/en.json b/packages/stripe-app/src/views/locales/en.json
new file mode 100644
index 0000000000..2a367c0957
--- /dev/null
+++ b/packages/stripe-app/src/views/locales/en.json
@@ -0,0 +1,6 @@
+{
+  "dub-workspace-title": "Dub workspace",
+  "connected-to-workspace": "Connected to {{workspaceName}}",
+  "connect-dub-workspace-stripe": "Connect your Dub workspace with Stripe to start tracking the conversions.",
+  "dub-account-sign-up-prompt": "Don't have an Dub account? <0>Sign up</0>"
+}