From b821c78d202a1a46a14962e25073cd1ab5ee9221 Mon Sep 17 00:00:00 2001
From: Codemod Bot <codemod[bot]@users.noreply.github.com>
Date: Thu, 12 Dec 2024 19:00:36 +0000
Subject: [PATCH] feat: Apply i18n codemods

---
 apps/web/app/locales/en.json                  |   4 +
 apps/web/app/not-found.tsx                    |   7 +-
 .../(admin-layout)/admin/locales/en.json      |   3 +
 .../settings/(admin-layout)/admin/page.tsx    |   7 +-
 .../admin/users/locales/en.json               |   3 +
 .../(admin-layout)/admin/users/page.tsx       |   5 +-
 apps/web/components/EnterprisePage.tsx        |   6 +-
 apps/web/components/apps/AppPage.tsx          |   7 +-
 .../apps/installation/ConfigureStepCard.tsx   |  23 ++--
 .../apps/installation/EventTypesStepCard.tsx  |  19 ++-
 .../apps/installation/locales/en.json         |   7 +
 apps/web/components/apps/locales/en.json      |   3 +
 apps/web/components/auth/BackupCode.tsx       |   7 +-
 apps/web/components/auth/locales/en.json      |   4 +
 .../components/booking/BookingListItem.tsx    |   5 +-
 apps/web/components/booking/locales/en.json   |   3 +
 apps/web/components/dialog/RerouteDialog.tsx  |   9 +-
 .../components/dialog/RescheduleDialog.tsx    |   5 +-
 apps/web/components/dialog/locales/en.json    |   5 +
 .../steps-views/UserProfile.tsx               |   5 +-
 .../steps-views/locales/en.json               |   3 +
 apps/web/components/locales/en.json           |   3 +
 .../security/EnableTwoFactorModal.tsx         |   5 +-
 apps/web/components/security/locales/en.json  |   3 +
 .../settings/CustomEmailTextField.tsx         |   5 +-
 .../settings/EnableTwoFactorModal.tsx         |   5 +-
 apps/web/components/settings/locales/en.json  |   3 +
 .../platform/dashboard/NoPlatformPlan.tsx     |  17 +--
 .../platform/dashboard/locales/en.json        |   6 +
 .../dashboard/managed-user-header/index.tsx   |  11 +-
 .../managed-user-header/locales/en.json       |   4 +
 .../dashboard/managed-user-table/index.tsx    |   9 +-
 .../managed-user-table/locales/en.json        |   5 +
 .../dashboard/oauth-clients-list/index.tsx    |  13 +-
 .../oauth-clients-list/locales/en.json        |   5 +
 .../oauth-clients/OAuthClientCard.tsx         |  42 +++---
 .../platform/oauth-clients/locales/en.json    |  16 +++
 .../oauth-clients/oauth-client-form/index.tsx |  31 +++--
 .../oauth-client-form/locales/en.json         |  12 ++
 .../platform/pricing/billing-card/index.tsx   |  12 +-
 .../pricing/billing-card/locales/en.json      |   4 +
 .../pricing/platform-pricing/index.tsx        |   5 +-
 .../pricing/platform-pricing/locales/en.json  |   3 +
 apps/web/components/setup/ChooseLicense.tsx   |   5 +-
 .../components/setup/EnterpriseLicense.tsx    |  15 ++-
 apps/web/components/setup/locales/en.json     |   5 +
 .../UsernameAvailability/PremiumTextfield.tsx |  10 +-
 .../ui/UsernameAvailability/locales/en.json   |   4 +
 apps/web/components/ui/form/MinutesField.tsx  |   7 +-
 apps/web/components/ui/form/locales/en.json   |   3 +
 apps/web/lib/QueryCell.tsx                    |   5 +-
 apps/web/lib/locales/en.json                  |   3 +
 apps/web/modules/apps/[slug]/locales/en.json  |   3 +
 .../modules/apps/[slug]/setup/locales/en.json |   3 +
 .../modules/apps/[slug]/setup/setup-view.tsx  |   6 +-
 apps/web/modules/apps/[slug]/slug-view.tsx    |  14 +-
 .../forgot-password/forgot-password-view.tsx  |   6 +-
 .../auth/forgot-password/locales/en.json      |   3 +
 apps/web/modules/auth/locales/en.json         |  10 ++
 apps/web/modules/auth/login-view.tsx          |  16 ++-
 .../modules/auth/oauth2/authorize-view.tsx    |   8 +-
 apps/web/modules/auth/oauth2/locales/en.json  |   4 +
 .../modules/auth/platform/authorize-view.tsx  |  19 ++-
 .../web/modules/auth/platform/locales/en.json |   6 +
 apps/web/modules/auth/signin-view.tsx         |   6 +-
 apps/web/modules/auth/verify-view.tsx         |  20 +--
 .../bookings/views/bookings-single-view.tsx   |  20 +--
 .../modules/bookings/views/locales/en.json    |   9 ++
 .../connect-and-join-view.tsx                 |  13 +-
 .../modules/connect-and-join/locales/en.json  |   3 +
 .../views/event-types-listing-view.tsx        |  20 ++-
 .../modules/event-types/views/locales/en.json |   7 +
 apps/web/modules/locales/en.json              |  13 ++
 apps/web/modules/maintenance/locales/en.json  |   5 +
 .../modules/maintenance/maintenance-view.tsx  |  13 +-
 .../settings/admin/components/UsersTable.tsx  |  19 ++-
 .../settings/admin/components/locales/en.json |   6 +
 .../modules/settings/admin/locales/en.json    |  13 ++
 .../settings/admin/locked-sms-view.tsx        |  16 +--
 .../web/modules/settings/admin/oauth-view.tsx |  18 ++-
 .../settings/my-account/locales/en.json       |   5 +
 .../settings/my-account/profile-view.tsx      |  12 +-
 .../platform/billing/billing-view.tsx         |  12 +-
 .../settings/platform/billing/locales/en.json |   5 +
 .../modules/settings/platform/locales/en.json |   5 +
 .../[clientId]/edit/edit-view.tsx             |  12 +-
 .../[clientId]/edit/edit-webhooks-view.tsx    |   8 +-
 .../[clientId]/edit/locales/en.json           |   7 +
 .../oauth-clients/create-new-view.tsx         |   6 +-
 .../platform/oauth-clients/locales/en.json    |   3 +
 .../settings/platform/plans/locales/en.json   |   5 +
 .../platform/plans/platform-plans-view.tsx    |  12 +-
 .../settings/platform/platform-view.tsx       |  10 +-
 apps/web/modules/signup-view.tsx              |  30 ++---
 apps/web/modules/upgrade/locales/en.json      |   4 +
 apps/web/modules/upgrade/upgrade-view.tsx     |   8 +-
 apps/web/modules/videos/views/locales/en.json |   5 +
 .../videos-meeting-ended-single-view.tsx      |   8 +-
 .../videos/views/videos-single-view.tsx       |   8 +-
 apps/web/pages/404.tsx                        |  10 +-
 apps/web/pages/500.tsx                        |   7 +-
 apps/web/pages/icons.tsx                      |  12 +-
 apps/web/pages/locales/en.json                |  10 ++
 example-apps/credential-sync/pages/index.tsx  |  18 ++-
 .../credential-sync/pages/locales/en.json     |   6 +
 .../src/components/AppCreateUpdateForm.tsx    |  41 +++---
 .../src/components/DeleteForm.tsx             |  11 +-
 .../src/components/locales/en.json            |  20 +++
 .../components/BookingConfirmationForm.tsx    |  13 +-
 .../src/components/CallToActionIcon.tsx       |  11 +-
 .../emails/src/components/EmailBodyLogo.tsx   |   5 +-
 .../components/EmailSchedulingBodyHeader.tsx  |   5 +-
 .../emails/src/components/locales/en.json     |   6 +
 .../AdminOrganizationNotificationEmail.tsx    |  22 ++--
 .../src/templates/AttendeeAddGuestsEmail.tsx  |  11 +-
 .../AttendeeAwaitingPaymentEmail.tsx          |   7 +-
 .../src/templates/AttendeeCancelledEmail.tsx  |  11 +-
 .../templates/AttendeeCancelledSeatEmail.tsx  |  11 +-
 .../templates/AttendeeLocationChangeEmail.tsx |  11 +-
 .../templates/AttendeeRescheduledEmail.tsx    |  11 +-
 .../src/templates/AttendeeUpdatedEmail.tsx    |  11 +-
 .../AttendeeWasRequestedToRescheduleEmail.tsx |   7 +-
 .../src/templates/BrokenIntegrationEmail.tsx  |  32 +++--
 .../DailyVideoDownloadRecordingEmail.tsx      |  13 +-
 .../DailyVideoDownloadTranscriptEmail.tsx     |   9 +-
 .../emails/src/templates/FeedbackEmail.tsx    |  11 +-
 .../src/templates/MonthlyDigestEmail.tsx      |   5 +-
 .../src/templates/OrgAutoInviteEmail.tsx      |   5 +-
 .../templates/OrganizationAdminNoSlots.tsx    |  24 ++--
 .../templates/OrganizationCreationEmail.tsx   |  59 +++++----
 .../src/templates/OrganizerAddGuestsEmail.tsx |  11 +-
 .../OrganizerAttendeeCancelledSeatEmail.tsx   |  11 +-
 .../src/templates/OrganizerCancelledEmail.tsx |  11 +-
 .../OrganizerLocationChangeEmail.tsx          |  11 +-
 .../OrganizerPaymentRefundFailedEmail.tsx     |   6 +-
 .../templates/OrganizerReassignedEmail.tsx    |   5 +-
 .../OrganizerRequestReminderEmail.tsx         |  11 +-
 .../templates/OrganizerRescheduledEmail.tsx   |  11 +-
 .../src/templates/SlugReplacementEmail.tsx    |  30 ++---
 .../emails/src/templates/TeamInviteEmail.tsx  | 124 ++++++++++--------
 packages/emails/src/templates/locales/en.json |  71 ++++++++++
 .../base/src/components/Navbar/index.tsx      |  21 +--
 .../src/components/Navbar/locales/en.json     |  10 ++
 .../examples/base/src/pages/[bookingUid].tsx  |  35 +++--
 .../examples/base/src/pages/booking.tsx       |  13 +-
 .../examples/base/src/pages/bookings.tsx      |   9 +-
 .../examples/base/src/pages/embed.tsx         |   5 +-
 .../examples/base/src/pages/event-types.tsx   |  14 +-
 .../examples/base/src/pages/index.tsx         |  13 +-
 .../examples/base/src/pages/locales/en.json   |  29 ++++
 .../components/app-list-card/AppListCard.tsx  |   6 +-
 .../components/app-list-card/locales/en.json  |   3 +
 packages/ui/components/apps/AppCard.tsx       |   6 +-
 packages/ui/components/apps/locales/en.json   |   3 +
 packages/ui/components/card/Card.tsx          |   5 +-
 packages/ui/components/card/locales/en.json   |   3 +
 packages/ui/components/dialog/dialog.test.tsx |   7 +-
 packages/ui/components/dialog/locales/en.json |   4 +
 .../editor/plugins/ToolbarPlugin.test.tsx     |  11 +-
 .../components/editor/plugins/locales/en.json |   3 +
 .../errorBoundary/error-boundary.test.tsx     |   5 +-
 .../components/errorBoundary/locales/en.json  |   3 +
 .../ui/components/filter-select/index.tsx     |   7 +-
 .../components/filter-select/locales/en.json  |   3 +
 .../form/color-picker/colorpicker.tsx         |   6 +-
 .../form/color-picker/locales/en.json         |   3 +
 .../date-range-picker/DateRangePicker.tsx     |   8 +-
 .../form/date-range-picker/locales/en.json    |   4 +
 packages/ui/components/form/step/FormStep.tsx |   6 +-
 .../ui/components/form/step/locales/en.json   |   3 +
 .../form/timezone-select/TimezoneSelect.tsx   |   6 +-
 .../form/timezone-select/locales/en.json      |   3 +
 .../form/toggleGroup/BooleanToggleGroup.tsx   |  12 +-
 .../form/toggleGroup/locales/en.json          |   4 +
 packages/ui/components/icon/SatSymbol.tsx     |   5 +-
 packages/ui/components/icon/locales/en.json   |   3 +
 packages/ui/components/logo/Logo.tsx          |   9 +-
 packages/ui/components/logo/locales/en.json   |   6 +
 .../navigation/tabs/HorizontalTabItem.tsx     |   5 +-
 .../navigation/tabs/locales/en.json           |   3 +
 .../ui/components/table/TableExamples.tsx     |  47 ++++---
 packages/ui/components/table/locales/en.json  |  17 +++
 packages/ui/form/fields.tsx                   |   5 +-
 packages/ui/form/locales/en.json              |   3 +
 184 files changed, 1403 insertions(+), 590 deletions(-)
 create mode 100644 apps/web/app/locales/en.json
 create mode 100644 apps/web/app/settings/(admin-layout)/admin/locales/en.json
 create mode 100644 apps/web/app/settings/(admin-layout)/admin/users/locales/en.json
 create mode 100644 apps/web/components/apps/installation/locales/en.json
 create mode 100644 apps/web/components/apps/locales/en.json
 create mode 100644 apps/web/components/auth/locales/en.json
 create mode 100644 apps/web/components/booking/locales/en.json
 create mode 100644 apps/web/components/dialog/locales/en.json
 create mode 100644 apps/web/components/getting-started/steps-views/locales/en.json
 create mode 100644 apps/web/components/locales/en.json
 create mode 100644 apps/web/components/security/locales/en.json
 create mode 100644 apps/web/components/settings/locales/en.json
 create mode 100644 apps/web/components/settings/platform/dashboard/locales/en.json
 create mode 100644 apps/web/components/settings/platform/dashboard/managed-user-header/locales/en.json
 create mode 100644 apps/web/components/settings/platform/dashboard/managed-user-table/locales/en.json
 create mode 100644 apps/web/components/settings/platform/dashboard/oauth-clients-list/locales/en.json
 create mode 100644 apps/web/components/settings/platform/oauth-clients/locales/en.json
 create mode 100644 apps/web/components/settings/platform/oauth-clients/oauth-client-form/locales/en.json
 create mode 100644 apps/web/components/settings/platform/pricing/billing-card/locales/en.json
 create mode 100644 apps/web/components/settings/platform/pricing/platform-pricing/locales/en.json
 create mode 100644 apps/web/components/setup/locales/en.json
 create mode 100644 apps/web/components/ui/UsernameAvailability/locales/en.json
 create mode 100644 apps/web/components/ui/form/locales/en.json
 create mode 100644 apps/web/lib/locales/en.json
 create mode 100644 apps/web/modules/apps/[slug]/locales/en.json
 create mode 100644 apps/web/modules/apps/[slug]/setup/locales/en.json
 create mode 100644 apps/web/modules/auth/forgot-password/locales/en.json
 create mode 100644 apps/web/modules/auth/locales/en.json
 create mode 100644 apps/web/modules/auth/oauth2/locales/en.json
 create mode 100644 apps/web/modules/auth/platform/locales/en.json
 create mode 100644 apps/web/modules/bookings/views/locales/en.json
 create mode 100644 apps/web/modules/connect-and-join/locales/en.json
 create mode 100644 apps/web/modules/event-types/views/locales/en.json
 create mode 100644 apps/web/modules/locales/en.json
 create mode 100644 apps/web/modules/maintenance/locales/en.json
 create mode 100644 apps/web/modules/settings/admin/components/locales/en.json
 create mode 100644 apps/web/modules/settings/admin/locales/en.json
 create mode 100644 apps/web/modules/settings/my-account/locales/en.json
 create mode 100644 apps/web/modules/settings/platform/billing/locales/en.json
 create mode 100644 apps/web/modules/settings/platform/locales/en.json
 create mode 100644 apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/locales/en.json
 create mode 100644 apps/web/modules/settings/platform/oauth-clients/locales/en.json
 create mode 100644 apps/web/modules/settings/platform/plans/locales/en.json
 create mode 100644 apps/web/modules/upgrade/locales/en.json
 create mode 100644 apps/web/modules/videos/views/locales/en.json
 create mode 100644 apps/web/pages/locales/en.json
 create mode 100644 example-apps/credential-sync/pages/locales/en.json
 create mode 100644 packages/app-store-cli/src/components/locales/en.json
 create mode 100644 packages/emails/src/components/locales/en.json
 create mode 100644 packages/emails/src/templates/locales/en.json
 create mode 100644 packages/platform/examples/base/src/components/Navbar/locales/en.json
 create mode 100644 packages/platform/examples/base/src/pages/locales/en.json
 create mode 100644 packages/ui/components/app-list-card/locales/en.json
 create mode 100644 packages/ui/components/apps/locales/en.json
 create mode 100644 packages/ui/components/card/locales/en.json
 create mode 100644 packages/ui/components/dialog/locales/en.json
 create mode 100644 packages/ui/components/editor/plugins/locales/en.json
 create mode 100644 packages/ui/components/errorBoundary/locales/en.json
 create mode 100644 packages/ui/components/filter-select/locales/en.json
 create mode 100644 packages/ui/components/form/color-picker/locales/en.json
 create mode 100644 packages/ui/components/form/date-range-picker/locales/en.json
 create mode 100644 packages/ui/components/form/step/locales/en.json
 create mode 100644 packages/ui/components/form/timezone-select/locales/en.json
 create mode 100644 packages/ui/components/form/toggleGroup/locales/en.json
 create mode 100644 packages/ui/components/icon/locales/en.json
 create mode 100644 packages/ui/components/logo/locales/en.json
 create mode 100644 packages/ui/components/navigation/tabs/locales/en.json
 create mode 100644 packages/ui/components/table/locales/en.json
 create mode 100644 packages/ui/form/locales/en.json

diff --git a/apps/web/app/locales/en.json b/apps/web/app/locales/en.json
new file mode 100644
index 00000000000000..b7f7bf1a58182f
--- /dev/null
+++ b/apps/web/app/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "404-page-not-found": "404 - Page Not Found",
+  "sorry-the-page-you-are-looking-for-does-not-exist": "Sorry, the page you are looking for does not exist."
+}
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index a9a4bb5c9251f3..f3f33daf41a48b 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -1,10 +1,13 @@
+import { useTranslation } from "react-i18next";
 import React from "react";
 
 const NotFound = () => {
+const { t } = useTranslation();
+
   return (
     <div data-testid="404-page">
-      <h1>404 - Page Not Found</h1>
-      <p>Sorry, the page you are looking for does not exist.</p>
+      <h1>{t('404-page-not-found')}</h1>
+      <p>{t('sorry-the-page-you-are-looking-for-does-not-exist')}</p>
     </div>
   );
 };
diff --git a/apps/web/app/settings/(admin-layout)/admin/locales/en.json b/apps/web/app/settings/(admin-layout)/admin/locales/en.json
new file mode 100644
index 00000000000000..7490971931f642
--- /dev/null
+++ b/apps/web/app/settings/(admin-layout)/admin/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "admin-index": "Admin index"
+}
diff --git a/apps/web/app/settings/(admin-layout)/admin/page.tsx b/apps/web/app/settings/(admin-layout)/admin/page.tsx
index 4f4fb938eca887..00935e8684d82d 100644
--- a/apps/web/app/settings/(admin-layout)/admin/page.tsx
+++ b/apps/web/app/settings/(admin-layout)/admin/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { _generateMetadata } from "app/_utils";
 
 export const generateMetadata = async () =>
@@ -6,5 +7,9 @@ export const generateMetadata = async () =>
     () => ""
   );
 
-const Page = () => <h1>Admin index</h1>;
+const Page = () =>  {
+const { t } = useTranslation();
+
+return <h1>{t('admin-index')}</h1>
+};
 export default Page;
diff --git a/apps/web/app/settings/(admin-layout)/admin/users/locales/en.json b/apps/web/app/settings/(admin-layout)/admin/users/locales/en.json
new file mode 100644
index 00000000000000..0e8ec5d3612200
--- /dev/null
+++ b/apps/web/app/settings/(admin-layout)/admin/users/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "add-user": "Add user"
+}
diff --git a/apps/web/app/settings/(admin-layout)/admin/users/page.tsx b/apps/web/app/settings/(admin-layout)/admin/users/page.tsx
index 178b22b6cc59b2..55a65172d4e69b 100644
--- a/apps/web/app/settings/(admin-layout)/admin/users/page.tsx
+++ b/apps/web/app/settings/(admin-layout)/admin/users/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { _generateMetadata, getTranslate } from "app/_utils";
 
 import UsersListingView from "@calcom/features/ee/users/pages/users-listing-view";
@@ -11,6 +12,8 @@ export const generateMetadata = async () =>
   );
 
 const Page = async () => {
+const { t } = useTranslation();
+
   const t = await getTranslate();
   return (
     <SettingsHeader
@@ -20,7 +23,7 @@ const Page = async () => {
         <div className="mt-4 space-x-5 sm:ml-16 sm:mt-0 sm:flex-none">
           {/* TODO: Add import users functionality */}
           {/* <Button disabled>Import users</Button> */}
-          <Button href="/settings/admin/users/add">Add user</Button>
+          <Button href="/settings/admin/users/add">{t('add-user')}</Button>
         </div>
       }>
       <UsersListingView />
diff --git a/apps/web/components/EnterprisePage.tsx b/apps/web/components/EnterprisePage.tsx
index 43f2f202ba4555..2054002c972848 100644
--- a/apps/web/components/EnterprisePage.tsx
+++ b/apps/web/components/EnterprisePage.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { ShellMain } from "@calcom/features/shell/Shell";
 import { UpgradeTip } from "@calcom/features/tips";
@@ -6,6 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, ButtonGroup, Icon } from "@calcom/ui";
 
 export default function EnterprisePage() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
 
   const features = [
@@ -61,7 +65,7 @@ export default function EnterprisePage() {
               </ButtonGroup>
             </div>
           }>
-          <>Create Org</>
+          <>{t('create-org')}</>
         </UpgradeTip>
       </ShellMain>
     </div>
diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
index 8294a0dff77118..d8193840d1d98f 100644
--- a/apps/web/components/apps/AppPage.tsx
+++ b/apps/web/components/apps/AppPage.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import type { IframeHTMLAttributes } from "react";
@@ -74,6 +75,8 @@ export const AppPage = ({
   concurrentMeetings,
   paid,
 }: AppPageProps) => {
+const { t } = useTranslation();
+
   const { t, i18n } = useLocale();
   const router = useRouter();
   const searchParams = useCompatSearchParams();
@@ -234,9 +237,7 @@ export const AppPage = ({
               </a>
             </h2>
             {isTemplate && (
-              <Badge variant="red" className="mt-4">
-                Template - Available in Dev Environment only for testing
-              </Badge>
+              <Badge variant="red" className="mt-4">{t('template-available-in-dev-environment-only-for-testing')}</Badge>
             )}
           </header>
         </div>
diff --git a/apps/web/components/apps/installation/ConfigureStepCard.tsx b/apps/web/components/apps/installation/ConfigureStepCard.tsx
index 1df0c1490b58cc..5c5214025aa0a2 100644
--- a/apps/web/components/apps/installation/ConfigureStepCard.tsx
+++ b/apps/web/components/apps/installation/ConfigureStepCard.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Dispatch, SetStateAction } from "react";
 import type { FC } from "react";
@@ -60,6 +61,8 @@ type TUpdatedEventTypesStatus = { id: number; updated: boolean }[][];
 
 const EventTypeAppSettingsForm = forwardRef<HTMLButtonElement, EventTypeAppSettingsFormProps>(
   function EventTypeAppSettingsForm(props, ref) {
+const { t } = useTranslation();
+
     const { handleDelete, onSubmit, eventType, loading, isConferencing } = props;
     const { t } = useLocale();
 
@@ -107,9 +110,7 @@ const EventTypeAppSettingsForm = forwardRef<HTMLButtonElement, EventTypeAppSetti
               className="absolute right-4 top-4 h-4 w-4 cursor-pointer"
               onClick={() => !loading && handleDelete()}
             />
-            <button type="submit" className="hidden" form={`eventtype-${eventType.id}`} ref={ref}>
-              Save
-            </button>
+            <button type="submit" className="hidden" form={`eventtype-${eventType.id}`} ref={ref}>{t('save')}</button>
           </div>
         </div>
       </Form>
@@ -186,6 +187,8 @@ const EventTypeGroup = ({
 };
 
 export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
+const { t } = useTranslation();
+
   const { loading, formPortalRef, handleSetUpLater } = props;
   const { t } = useLocale();
   const { control, watch } = useFormContext<TEventTypesForm>();
@@ -222,12 +225,15 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
     formPortalRef?.current &&
     createPortal(
       <div className="mt-8">
-        {fields.map((group, groupIndex) => (
+        {fields.map((group, groupIndex) =>  {
+const { t } = useTranslation();
+
+return (
           <div key={group.fieldId}>
             {eventTypeGroups[groupIndex].eventTypes.some((eventType) => eventType.selected === true) && (
               <div className="mb-2 mt-4 flex items-center">
                 <Avatar
-                  alt=""
+                  alt={t('empty-string')}
                   imageSrc={group.image} // if no image, use default avatar
                   size="md"
                   className="inline-flex justify-center"
@@ -242,10 +248,9 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
               {...props}
             />
           </div>
-        ))}
-        <button form="outer-event-type-form" type="submit" className="hidden" ref={mainForSubmitRef}>
-          Save
-        </button>
+        )
+})}
+        <button form="outer-event-type-form" type="submit" className="hidden" ref={mainForSubmitRef}>{t('save-duplicate')}</button>
         <Button
           className="text-md mt-6 w-full justify-center"
           type="button"
diff --git a/apps/web/components/apps/installation/EventTypesStepCard.tsx b/apps/web/components/apps/installation/EventTypesStepCard.tsx
index ccd1b0d16a2ded..cd21e166aaa582 100644
--- a/apps/web/components/apps/installation/EventTypesStepCard.tsx
+++ b/apps/web/components/apps/installation/EventTypesStepCard.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { Dispatch, SetStateAction } from "react";
 import type { FC } from "react";
 import React from "react";
@@ -64,11 +65,13 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
           )}
           <div className="mt-2 flex flex-row flex-wrap gap-2">
             {Boolean(durations.length) &&
-              durations.map((duration) => (
-                <Badge key={`event-type-${id}-duration-${duration}`} variant="gray" startIcon="clock">
-                  {duration}m
-                </Badge>
-              ))}
+              durations.map((duration) =>  {
+const { t } = useTranslation();
+
+return (
+                <Badge key={`event-type-${id}-duration-${duration}`} variant="gray" startIcon="clock">{t('duration-m', { duration })}</Badge>
+              )
+})}
           </div>
         </li>
       </label>
@@ -76,6 +79,8 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
   );
 };
 const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...props }) => {
+const { t } = useTranslation();
+
   const { control } = useFormContext<TEventTypesForm>();
   const { fields, update } = useFieldArray({
     control,
@@ -87,7 +92,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
     <div className="mt-10">
       <div className="mb-2 flex items-center">
         <Avatar
-          alt=""
+          alt={t('empty-string')}
           imageSrc={props.image} // if no image, use default avatar
           size="md"
           className="mt-1 inline-flex justify-center"
@@ -110,7 +115,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
                 />
               ))
             ) : (
-              <div className="text-subtle bg-muted w-full p-2  text-center text-sm">Team has no Events</div>
+              <div className="text-subtle bg-muted w-full p-2  text-center text-sm">{t('team-has-no-events')}</div>
             )}
           </ul>
         </ScrollableArea>
diff --git a/apps/web/components/apps/installation/locales/en.json b/apps/web/components/apps/installation/locales/en.json
new file mode 100644
index 00000000000000..6f172881bc362b
--- /dev/null
+++ b/apps/web/components/apps/installation/locales/en.json
@@ -0,0 +1,7 @@
+{
+  "duration-m": "{{duration}}m",
+  "empty-string": "\"\"",
+  "team-has-no-events": "Team has no Events",
+  "save": "Save",
+  "save-duplicate": "Save"
+}
diff --git a/apps/web/components/apps/locales/en.json b/apps/web/components/apps/locales/en.json
new file mode 100644
index 00000000000000..e9cba44d4f14ee
--- /dev/null
+++ b/apps/web/components/apps/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "template-available-in-dev-environment-only-for-testing": "Template - Available in Dev Environment only for testing"
+}
diff --git a/apps/web/components/auth/BackupCode.tsx b/apps/web/components/auth/BackupCode.tsx
index a9121d815ebda5..b30f1bb93fbd66 100644
--- a/apps/web/components/auth/BackupCode.tsx
+++ b/apps/web/components/auth/BackupCode.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import React from "react";
 import { useFormContext } from "react-hook-form";
 
@@ -5,6 +6,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Label, TextField } from "@calcom/ui";
 
 export default function TwoFactor({ center = true }) {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const methods = useFormContext();
 
@@ -16,9 +19,9 @@ export default function TwoFactor({ center = true }) {
 
       <TextField
         id="backup-code"
-        label=""
+        label={t('empty-string-key')}
         defaultValue=""
-        placeholder="XXXXX-XXXXX"
+        placeholder={t('placeholder-xxxxx-xxxxx')}
         minLength={10} // without dash
         maxLength={11} // with dash
         required
diff --git a/apps/web/components/auth/locales/en.json b/apps/web/components/auth/locales/en.json
new file mode 100644
index 00000000000000..b28224147495c7
--- /dev/null
+++ b/apps/web/components/auth/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "empty-string-key": "\"\"",
+  "placeholder-xxxxx-xxxxx": "\"XXXXX-XXXXX\""
+}
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 3cfa857580cc40..f1a80202581069 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { AssignmentReason } from "@prisma/client";
 import Link from "next/link";
 import { useState } from "react";
@@ -104,6 +105,8 @@ const isBookingReroutable = (booking: ParsedBooking): booking is ReroutableBooki
 };
 
 function BookingListItem(booking: BookingItemProps) {
+const { t } = useTranslation();
+
   const parsedBooking = buildParsedBooking(booking);
 
   const { userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
@@ -490,7 +493,7 @@ function BookingListItem(booking: BookingItemProps) {
               label={
                 <>
                   {t("rejection_reason")}
-                  <span className="text-subtle font-normal"> (Optional)</span>
+                  <span className="text-subtle font-normal">{t('optional')}</span>
                 </>
               }
               value={rejectionReason}
diff --git a/apps/web/components/booking/locales/en.json b/apps/web/components/booking/locales/en.json
new file mode 100644
index 00000000000000..62922dca70319a
--- /dev/null
+++ b/apps/web/components/booking/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(Optional)"
+}
diff --git a/apps/web/components/dialog/RerouteDialog.tsx b/apps/web/components/dialog/RerouteDialog.tsx
index ca72e40dc83ad2..412ad93619695c 100644
--- a/apps/web/components/dialog/RerouteDialog.tsx
+++ b/apps/web/components/dialog/RerouteDialog.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useMutation } from "@tanstack/react-query";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -274,6 +275,8 @@ const NewRoutingManager = ({
   };
   reroutingState: ReturnType<typeof useReroutingState>;
 }) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
   const bookerUrl = useBookerUrl();
@@ -645,13 +648,11 @@ const NewRoutingManager = ({
     return (
       <div>
         <span className="text-attention">
-          <span>Continue with rerouting in the new</span>{" "}
+          <span>{t('continue-with-rerouting-in-the-new')}</span>{" "}
           <a
             href="javascript:void(0)"
             className="text-attention underline"
-            onClick={() => reroutingState.value?.reschedulerWindow?.focus()}>
-            tab
-          </a>
+            onClick={() => reroutingState.value?.reschedulerWindow?.focus()}>{t('tab')}</a>
         </span>
       </div>
     );
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index 42ea9d7806adca..66e8957411c6ee 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";
 
@@ -22,6 +23,8 @@ interface IRescheduleDialog {
 }
 
 export const RescheduleDialog = (props: IRescheduleDialog) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const utils = trpc.useUtils();
   const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props;
@@ -51,7 +54,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
             <p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
             <p className="text-emphasis mb-2 mt-6 text-sm font-bold">
               {t("reason_for_reschedule_request")}
-              <span className="text-subtle font-normal"> (Optional)</span>
+              <span className="text-subtle font-normal">{t('optional')}</span>
             </p>
             <TextArea
               data-testid="reschedule_reason"
diff --git a/apps/web/components/dialog/locales/en.json b/apps/web/components/dialog/locales/en.json
new file mode 100644
index 00000000000000..08f72e4de058d1
--- /dev/null
+++ b/apps/web/components/dialog/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "optional": "(Optional)",
+  "continue-with-rerouting-in-the-new": "Continue with rerouting in the new",
+  "tab": "tab"
+}
diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index 637b409c6fa4f6..ca777860963863 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useRouter } from "next/navigation";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
@@ -16,6 +17,8 @@ type FormData = {
 };
 
 const UserProfile = () => {
+const { t } = useTranslation();
+
   const [user] = trpc.viewer.me.useSuspenseQuery();
   const { t } = useLocale();
   const avatarRef = useRef<HTMLInputElement>(null);
@@ -106,7 +109,7 @@ const UserProfile = () => {
           type="hidden"
           name="avatar"
           id="avatar"
-          placeholder="URL"
+          placeholder={t('url')}
           className="border-default focus:ring-empthasis mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none"
           defaultValue={imageSrc}
         />
diff --git a/apps/web/components/getting-started/steps-views/locales/en.json b/apps/web/components/getting-started/steps-views/locales/en.json
new file mode 100644
index 00000000000000..72c226be770df9
--- /dev/null
+++ b/apps/web/components/getting-started/steps-views/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "url": "\"URL\""
+}
diff --git a/apps/web/components/locales/en.json b/apps/web/components/locales/en.json
new file mode 100644
index 00000000000000..560164ee5236a7
--- /dev/null
+++ b/apps/web/components/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "create-org": "Create Org"
+}
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index 20b9a89026f047..d9ea852f29407e 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { BaseSyntheticEvent } from "react";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -47,6 +48,8 @@ interface EnableTwoFactorValues {
 }
 
 const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const form = useForm<EnableTwoFactorValues>();
 
@@ -171,7 +174,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <div className="flex justify-center">
               {
                 // eslint-disable-next-line @next/next/no-img-element
-                <img src={dataUri} alt="" />
+                <img src={dataUri} alt={t('empty-string')} />
               }
             </div>
             <p className="text-center font-mono text-xs">{secret}</p>
diff --git a/apps/web/components/security/locales/en.json b/apps/web/components/security/locales/en.json
new file mode 100644
index 00000000000000..47dd5e7315f12f
--- /dev/null
+++ b/apps/web/components/security/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "empty-string": "\"\""
+}
diff --git a/apps/web/components/settings/CustomEmailTextField.tsx b/apps/web/components/settings/CustomEmailTextField.tsx
index 509f35b409532a..f2bef7020b552a 100644
--- a/apps/web/components/settings/CustomEmailTextField.tsx
+++ b/apps/web/components/settings/CustomEmailTextField.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
@@ -39,6 +40,8 @@ const CustomEmailTextField = ({
   handleVerifyEmail,
   handleItemDelete,
 }: CustomEmailTextFieldProps) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const [inputFocus, setInputFocus] = useState(false);
 
@@ -50,7 +53,7 @@ const CustomEmailTextField = ({
         }`}>
         <TextField
           {...formMethods.register(formMethodFieldName)}
-          label=""
+          label={t('empty-string')}
           containerClassName="flex flex-1 items-center"
           className="mb-0 border-none outline-none focus:ring-0"
           data-testid={dataTestId}
diff --git a/apps/web/components/settings/EnableTwoFactorModal.tsx b/apps/web/components/settings/EnableTwoFactorModal.tsx
index ea169c2b2dea34..009584c1690348 100644
--- a/apps/web/components/settings/EnableTwoFactorModal.tsx
+++ b/apps/web/components/settings/EnableTwoFactorModal.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { BaseSyntheticEvent } from "react";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -50,6 +51,8 @@ interface EnableTwoFactorValues {
 }
 
 const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: EnableTwoFactorModalProps) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const form = useForm<EnableTwoFactorValues>();
 
@@ -188,7 +191,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
             <div className="-mt-3 flex justify-center">
               {
                 // eslint-disable-next-line @next/next/no-img-element
-                <img src={dataUri} alt="" />
+                <img src={dataUri} alt={t('empty-string')} />
               }
             </div>
             <p data-testid="two-factor-secret" className="mb-4 text-center font-mono text-xs">
diff --git a/apps/web/components/settings/locales/en.json b/apps/web/components/settings/locales/en.json
new file mode 100644
index 00000000000000..47dd5e7315f12f
--- /dev/null
+++ b/apps/web/components/settings/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "empty-string": "\"\""
+}
diff --git a/apps/web/components/settings/platform/dashboard/NoPlatformPlan.tsx b/apps/web/components/settings/platform/dashboard/NoPlatformPlan.tsx
index d58b6035b50a91..de3d17f8423e53 100644
--- a/apps/web/components/settings/platform/dashboard/NoPlatformPlan.tsx
+++ b/apps/web/components/settings/platform/dashboard/NoPlatformPlan.tsx
@@ -1,33 +1,30 @@
+import { useTranslation } from "react-i18next";
 import { EmptyScreen, Button } from "@calcom/ui";
 
 export default function NoPlatformPlan() {
+const { t } = useTranslation();
+
   return (
     <EmptyScreen
       Icon="credit-card"
       headline="Subscription needed"
-      description="You are not subscribed to a Platform plan."
+      description={t('you-are-not-subscribed-to-a-platform-plan')}
       buttonRaw={
         <div className="flex gap-2">
           <Button
             className="hover:bg-slate-300 hover:text-black"
             color="secondary"
-            href="/settings/platform/new">
-            Subscribe
-          </Button>
+            href="/settings/platform/new">{t('subscribe')}</Button>
           <Button
             color="secondary"
             className="hover:bg-slate-300 hover:text-black"
             href="https://cal.com/platform/pricing"
-            target="_blank">
-            Go to Pricing
-          </Button>
+            target="_blank">{t('go-to-pricing')}</Button>
           <Button
             color="secondary"
             className="hover:bg-slate-300 hover:text-black"
             href="https://cal.com/sales"
-            target="_blank">
-            Contact Sales
-          </Button>
+            target="_blank">{t('contact-sales')}</Button>
         </div>
       }
     />
diff --git a/apps/web/components/settings/platform/dashboard/locales/en.json b/apps/web/components/settings/platform/dashboard/locales/en.json
new file mode 100644
index 00000000000000..d558c56e378050
--- /dev/null
+++ b/apps/web/components/settings/platform/dashboard/locales/en.json
@@ -0,0 +1,6 @@
+{
+  "you-are-not-subscribed-to-a-platform-plan": "\"You are not subscribed to a Platform plan.\"",
+  "subscribe": "Subscribe",
+  "go-to-pricing": "Go to Pricing",
+  "contact-sales": "Contact Sales"
+}
diff --git a/apps/web/components/settings/platform/dashboard/managed-user-header/index.tsx b/apps/web/components/settings/platform/dashboard/managed-user-header/index.tsx
index 40a7ece0c10c16..33d6b2e1392878 100644
--- a/apps/web/components/settings/platform/dashboard/managed-user-header/index.tsx
+++ b/apps/web/components/settings/platform/dashboard/managed-user-header/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { PlatformOAuthClient } from "@calcom/prisma/client";
 
 import { OAuthClientsDropdown } from "@components/settings/platform/dashboard/oauth-client-dropdown";
@@ -13,15 +14,13 @@ export const ManagedUserHeader = ({
   initialClientName,
   handleChange,
 }: ManagedUserHeaderProps) => {
+const { t } = useTranslation();
+
   return (
     <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
       <div className="flex w-full flex-col">
-        <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
-          Managed Users
-        </h1>
-        <p className="text-default text-sm ltr:mr-4 rtl:ml-4">
-          See all the managed users created by your OAuth client.
-        </p>
+        <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">{t('managed-users')}</h1>
+        <p className="text-default text-sm ltr:mr-4 rtl:ml-4">{t('see-all-managed-users')}</p>
       </div>
       <OAuthClientsDropdown
         oauthClients={oauthClients}
diff --git a/apps/web/components/settings/platform/dashboard/managed-user-header/locales/en.json b/apps/web/components/settings/platform/dashboard/managed-user-header/locales/en.json
new file mode 100644
index 00000000000000..7d1c70ba32f4ba
--- /dev/null
+++ b/apps/web/components/settings/platform/dashboard/managed-user-header/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "managed-users": "Managed Users",
+  "see-all-managed-users": "See all the managed users created by your OAuth client."
+}
diff --git a/apps/web/components/settings/platform/dashboard/managed-user-table/index.tsx b/apps/web/components/settings/platform/dashboard/managed-user-table/index.tsx
index af32a422e29228..c33100337930cf 100644
--- a/apps/web/components/settings/platform/dashboard/managed-user-table/index.tsx
+++ b/apps/web/components/settings/platform/dashboard/managed-user-table/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { EmptyScreen } from "@calcom/ui";
 
 import type { ManagedUser } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
@@ -13,6 +14,8 @@ export const ManagedUserTable = ({
   isManagedUserLoading,
   initialClientId,
 }: ManagedUserTableProps) => {
+const { t } = useTranslation();
+
   const showUsers = !isManagedUserLoading && managedUsers?.length;
 
   return (
@@ -22,9 +25,9 @@ export const ManagedUserTable = ({
           <table className="w-[100%] rounded-lg">
             <colgroup className="border-subtle overflow-hidden rounded-b-lg border border-b-0" span={3} />
             <tr>
-              <td className="border-subtle border px-4 py-3 md:text-center">Id</td>
-              <td className="border-subtle border px-4 py-3 md:text-center">Username</td>
-              <td className="border-subtle border px-4 py-3 md:text-center">Email</td>
+              <td className="border-subtle border px-4 py-3 md:text-center">{t('id')}</td>
+              <td className="border-subtle border px-4 py-3 md:text-center">{t('username')}</td>
+              <td className="border-subtle border px-4 py-3 md:text-center">{t('email')}</td>
             </tr>
             {managedUsers.map((user) => {
               return (
diff --git a/apps/web/components/settings/platform/dashboard/managed-user-table/locales/en.json b/apps/web/components/settings/platform/dashboard/managed-user-table/locales/en.json
new file mode 100644
index 00000000000000..793107faa8aa74
--- /dev/null
+++ b/apps/web/components/settings/platform/dashboard/managed-user-table/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "id": "Id",
+  "username": "Username",
+  "email": "Email"
+}
diff --git a/apps/web/components/settings/platform/dashboard/oauth-clients-list/index.tsx b/apps/web/components/settings/platform/dashboard/oauth-clients-list/index.tsx
index e8b5a9bba7cded..50de2356e4340d 100644
--- a/apps/web/components/settings/platform/dashboard/oauth-clients-list/index.tsx
+++ b/apps/web/components/settings/platform/dashboard/oauth-clients-list/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useRouter } from "next/navigation";
 
 import type { PlatformOAuthClient } from "@calcom/prisma/client";
@@ -12,16 +13,14 @@ type OAuthClientsListProps = {
 };
 
 export const OAuthClientsList = ({ oauthClients, isDeleting, handleDelete }: OAuthClientsListProps) => {
+const { t } = useTranslation();
+
   return (
     <div className="mb-10">
       <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
         <div className="flex w-full flex-col">
-          <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
-            OAuth Clients
-          </h1>
-          <p className="text-default text-sm ltr:mr-4 rtl:ml-4">
-            Connect your platform to cal.com with OAuth
-          </p>
+          <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">{t('oauth-clients-title')}</h1>
+          <p className="text-default text-sm ltr:mr-4 rtl:ml-4">{t('connect-platform-to-cal-oauth')}</p>
         </div>
         <div>
           <NewOAuthClientButton redirectLink="/settings/platform/oauth-clients/create" />
@@ -55,7 +54,7 @@ export const OAuthClientsList = ({ oauthClients, isDeleting, handleDelete }: OAu
       ) : (
         <EmptyScreen
           headline="Create your first OAuth client"
-          description="OAuth clients facilitate access to Cal.com on behalf of users"
+          description={t('oauth-clients-access-explanation')}
           Icon="plus"
           className=""
           buttonRaw={<NewOAuthClientButton redirectLink="/settings/platform/oauth-clients/create" />}
diff --git a/apps/web/components/settings/platform/dashboard/oauth-clients-list/locales/en.json b/apps/web/components/settings/platform/dashboard/oauth-clients-list/locales/en.json
new file mode 100644
index 00000000000000..e2508495442cdc
--- /dev/null
+++ b/apps/web/components/settings/platform/dashboard/oauth-clients-list/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "oauth-clients-title": "OAuth Clients",
+  "connect-platform-to-cal-oauth": "Connect your platform to cal.com with OAuth",
+  "oauth-clients-access-explanation": "\"OAuth clients facilitate access to Cal.com on behalf of users\""
+}
diff --git a/apps/web/components/settings/platform/oauth-clients/OAuthClientCard.tsx b/apps/web/components/settings/platform/oauth-clients/OAuthClientCard.tsx
index 2d04420c203737..eddee673e9e7b5 100644
--- a/apps/web/components/settings/platform/oauth-clients/OAuthClientCard.tsx
+++ b/apps/web/components/settings/platform/oauth-clients/OAuthClientCard.tsx
@@ -1,3 +1,4 @@
+import { useTranslation, Trans } from "react-i18next";
 import { useRouter } from "next/navigation";
 import React from "react";
 
@@ -41,6 +42,8 @@ export const OAuthClientCard = ({
   areEmailsEnabled,
   organizationId,
 }: OAuthClientCardProps) => {
+const { t } = useTranslation();
+
   const router = useRouter();
 
   const clientPermissions = Object.values(PERMISSIONS_GROUPED_MAP).map((value, index) => {
@@ -74,8 +77,11 @@ export const OAuthClientCard = ({
       )}>
       <div className="flex flex-col gap-2">
         <div className="flex gap-1">
-          <p className="font-semibold">
-            Client name: <span className="font-normal">{name}</span>
+          <p className="font-semibold"><Trans
+i18nKey="client-name-fragment"
+values={{ _name_: <>{name}</> }}
+components={{"0": <span className="font-normal" />}}
+/>
           </p>
         </div>
         {!!logo && (
@@ -85,7 +91,7 @@ export const OAuthClientCard = ({
         )}
         <div className="flex flex-col gap-2">
           <div className="flex flex-row items-center gap-2">
-            <div className="font-semibold">Client Id:</div>
+            <div className="font-semibold">{t('client-id-label')}</div>
             <div>{id}</div>
             <Icon
               name="clipboard"
@@ -99,7 +105,7 @@ export const OAuthClientCard = ({
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <div className="font-semibold">Client Secret:</div>
+          <div className="font-semibold">{t('client-secret-label')}</div>
           <div className="flex items-center justify-center rounded-md">
             {[...new Array(20)].map((_, index) => (
               <Icon name="asterisk" key={`${index}asterisk`} className="h-2 w-2" />
@@ -117,7 +123,7 @@ export const OAuthClientCard = ({
         </div>
         <div className="flex flex-col gap-2">
           <div className="flex flex-row items-center gap-2">
-            <div className="font-semibold">Organization Id:</div>
+            <div className="font-semibold">{t('organization-id-label')}</div>
             <div>{organizationId}</div>
             <Icon
               name="clipboard"
@@ -131,30 +137,30 @@ export const OAuthClientCard = ({
           </div>
         </div>
         <div className="border-subtle flex text-sm">
-          <span className="font-semibold">Permissions: </span>
-          {permissions ? <div className="flex">{clientPermissions}</div> : <>&nbsp;Disabled</>}
+          <span className="font-semibold">{t('permissions-label')}</span>
+          {permissions ? <div className="flex">{clientPermissions}</div> : <>{t('disabled-label')}</>}
         </div>
         <div className="flex gap-1 text-sm">
-          <span className="font-semibold">Redirect uris: </span>
+          <span className="font-semibold">{t('redirect-uris-label')}</span>
           {redirectUris.map((item, index) => (redirectUris.length === index + 1 ? `${item}` : `${item}, `))}
         </div>
         {bookingRedirectUri && (
           <div className="flex gap-1 text-sm">
-            <span className="font-semibold">Booking redirect uri: </span> {bookingRedirectUri}
+            <span className="font-semibold">{t('booking-redirect-uri-label')}</span> {bookingRedirectUri}
           </div>
         )}
         {bookingRescheduleRedirectUri && (
           <div className="flex gap-1 text-sm">
-            <span className="font-semibold">Booking reschedule uri: </span> {bookingRescheduleRedirectUri}
+            <span className="font-semibold">{t('booking-reschedule-uri-label')}</span> {bookingRescheduleRedirectUri}
           </div>
         )}
         {bookingCancelRedirectUri && (
           <div className="flex gap-1 text-sm">
-            <span className="font-semibold">Booking cancel uri: </span> {bookingCancelRedirectUri}
+            <span className="font-semibold">{t('booking-cancel-uri-label')}</span> {bookingCancelRedirectUri}
           </div>
         )}
         <div className="flex gap-1 text-sm">
-          <span className="text-sm font-semibold">Emails enabled:</span> {areEmailsEnabled ? "Yes" : "No"}
+          <span className="text-sm font-semibold">{t('emails-enabled-label')}</span> {areEmailsEnabled ? "Yes" : "No"}
         </div>
       </div>
       <div className="flex items-start gap-4">
@@ -162,19 +168,13 @@ export const OAuthClientCard = ({
           color="primary"
           loading={isLoading}
           disabled={isLoading}
-          onClick={() => router.push(`/settings/platform/oauth-clients/${id}/edit/webhooks`)}>
-          Webhooks
-        </Button>
+          onClick={() => router.push(`/settings/platform/oauth-clients/${id}/edit/webhooks`)}>{t('webhooks-section')}</Button>
         <Button
           color="secondary"
           loading={isLoading}
           disabled={isLoading}
-          onClick={() => router.push(`/settings/platform/oauth-clients/${id}/edit`)}>
-          Edit
-        </Button>
-        <Button color="destructive" loading={isLoading} disabled={isLoading} onClick={() => onDelete(id)}>
-          Delete
-        </Button>
+          onClick={() => router.push(`/settings/platform/oauth-clients/${id}/edit`)}>{t('edit-button')}</Button>
+        <Button color="destructive" loading={isLoading} disabled={isLoading} onClick={() => onDelete(id)}>{t('delete-button')}</Button>
       </div>
     </div>
   );
diff --git a/apps/web/components/settings/platform/oauth-clients/locales/en.json b/apps/web/components/settings/platform/oauth-clients/locales/en.json
new file mode 100644
index 00000000000000..209370688b8ea9
--- /dev/null
+++ b/apps/web/components/settings/platform/oauth-clients/locales/en.json
@@ -0,0 +1,16 @@
+{
+  "client-name-fragment": "Client name:<0>{{_name_}}</0>",
+  "client-id-label": "Client Id:",
+  "client-secret-label": "Client Secret:",
+  "organization-id-label": "Organization Id:",
+  "permissions-label": "Permissions:",
+  "disabled-label": " Disabled",
+  "redirect-uris-label": "Redirect uris:",
+  "booking-redirect-uri-label": "Booking redirect uri:",
+  "booking-reschedule-uri-label": "Booking reschedule uri:",
+  "booking-cancel-uri-label": "Booking cancel uri:",
+  "emails-enabled-label": "Emails enabled:",
+  "webhooks-section": "Webhooks",
+  "edit-button": "Edit",
+  "delete-button": "Delete"
+}
diff --git a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
index 6dc931abbe18db..a22039b1f8caf3 100644
--- a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
+++ b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useState, useCallback } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 
@@ -41,6 +42,8 @@ export const OAuthClientForm = ({
   isFormDisabled,
   onSubmit,
 }: OAuthClientFormProps) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const { register, control, handleSubmit, setValue } = useForm<FormValues>({
     defaultValues: { redirectUris: [{ uri: "" }], ...defaultValues },
@@ -81,9 +84,7 @@ export const OAuthClientForm = ({
               type="checkbox"
               disabled={!!defaultValues}
             />
-            <label htmlFor={`${permissionKey}Read`} className="cursor-pointer text-sm">
-              Read
-            </label>
+            <label htmlFor={`${permissionKey}Read`} className="cursor-pointer text-sm">{t('read')}</label>
           </div>
           <div className="flex items-center gap-x-2">
             <input
@@ -93,9 +94,7 @@ export const OAuthClientForm = ({
               type="checkbox"
               disabled={!!defaultValues}
             />
-            <label htmlFor={`${permissionKey}Write`} className="cursor-pointer text-sm">
-              Write
-            </label>
+            <label htmlFor={`${permissionKey}Write`} className="cursor-pointer text-sm">{t('write')}</label>
           </div>
         </div>
       </div>
@@ -108,11 +107,13 @@ export const OAuthClientForm = ({
         className="border-subtle rounded-b-lg border border-t-0 px-4 pb-8 pt-2"
         onSubmit={handleSubmit(onSubmit)}>
         <div className="mt-6">
-          <TextField disabled={isFormDisabled} required={true} label="Client name" {...register("name")} />
+          <TextField disabled={isFormDisabled} required={true} label={t('client-name')} {...register("name")} />
         </div>
         <div className="mt-6">
-          <Label>Redirect uris</Label>
+          <Label>{t('redirect-uris')}</Label>
           {fields.map((field, index) => {
+const { t } = useTranslation();
+
             return (
               <div className="flex items-end" key={field.id}>
                 <div className="w-[80vw]">
@@ -120,7 +121,7 @@ export const OAuthClientForm = ({
                     type="url"
                     required={index === 0}
                     className="w-[100%]"
-                    label=""
+                    label={t('empty-string')}
                     disabled={isFormDisabled}
                     {...register(`redirectUris.${index}.uri` as const)}
                   />
@@ -191,7 +192,7 @@ export const OAuthClientForm = ({
           <Tooltip content="URL of your booking page">
             <TextField
               type="url"
-              label="Booking redirect uri"
+              label={t('booking-redirect-uri')}
               className="w-[100%]"
               {...register("bookingRedirectUri")}
               disabled={isFormDisabled}
@@ -202,7 +203,7 @@ export const OAuthClientForm = ({
           <Tooltip content="URL of the page where your users can cancel their booking">
             <TextField
               type="url"
-              label="Booking cancel redirect uri"
+              label={t('booking-cancel-redirect-uri')}
               className="w-[100%]"
               {...register("bookingCancelRedirectUri")}
               disabled={isFormDisabled}
@@ -213,7 +214,7 @@ export const OAuthClientForm = ({
           <Tooltip content="URL of the page where your users can reschedule their booking">
             <TextField
               type="url"
-              label="Booking reschedule redirect uri"
+              label={t('booking-reschedule-redirect-uri')}
               className="w-[100%]"
               {...register("bookingRescheduleRedirectUri")}
               disabled={isFormDisabled}
@@ -228,13 +229,11 @@ export const OAuthClientForm = ({
             type="checkbox"
             disabled={isFormDisabled}
           />
-          <label htmlFor="areEmailsEnabled" className="cursor-pointer px-2 text-base font-semibold">
-            Enable emails
-          </label>
+          <label htmlFor="areEmailsEnabled" className="cursor-pointer px-2 text-base font-semibold">{t('enable-emails')}</label>
         </div>
         <div className="mt-6">
           <div className="flex justify-between">
-            <h1 className="text-base font-semibold underline">Permissions</h1>
+            <h1 className="text-base font-semibold underline">{t('permissions')}</h1>
             <Button type="button" onClick={selectAllPermissions} disabled={!!defaultValues || isFormDisabled}>
               {!isSelectAllPermissionsChecked ? "Select all" : "Discard all"}
             </Button>
diff --git a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/locales/en.json b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/locales/en.json
new file mode 100644
index 00000000000000..87ebac6ecb5afe
--- /dev/null
+++ b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/locales/en.json
@@ -0,0 +1,12 @@
+{
+  "read": "Read",
+  "write": "Write",
+  "client-name": "\"Client name\"",
+  "redirect-uris": "Redirect uris",
+  "empty-string": "\"\"",
+  "booking-redirect-uri": "\"Booking redirect uri\"",
+  "booking-cancel-redirect-uri": "\"Booking cancel redirect uri\"",
+  "booking-reschedule-redirect-uri": "\"Booking reschedule redirect uri\"",
+  "enable-emails": "Enable emails",
+  "permissions": "Permissions"
+}
diff --git a/apps/web/components/settings/platform/pricing/billing-card/index.tsx b/apps/web/components/settings/platform/pricing/billing-card/index.tsx
index b3dff623c87b6d..f1fb293012e5ae 100644
--- a/apps/web/components/settings/platform/pricing/billing-card/index.tsx
+++ b/apps/web/components/settings/platform/pricing/billing-card/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation, Trans } from "react-i18next";
 import { Button } from "@calcom/ui";
 
 type PlatformBillingCardProps = {
@@ -19,6 +20,8 @@ export const PlatformBillingCard = ({
   handleSubscribe,
   currentPlan,
 }: PlatformBillingCardProps) => {
+const { t } = useTranslation();
+
   return (
     <div className="border-subtle max-w-[450px] rounded-2xl border p-5 md:mx-4">
       <div className="pb-5">
@@ -38,8 +41,11 @@ export const PlatformBillingCard = ({
         <p className="pb-5 pt-3 text-base">{description}</p>
         <h1 className="text-3xl font-semibold">
           {pricing !== undefined && (
-            <>
-              US${pricing} <span className="text-sm">per month</span>
+            <><Trans
+i18nKey="us-pricing-per-month"
+values={{ pricing }}
+components={{"0": <span className="text-sm" />}}
+/>
             </>
           )}
         </h1>
@@ -55,7 +61,7 @@ export const PlatformBillingCard = ({
         </div>
       )}
       <div className="mt-5">
-        <p>This includes:</p>
+        <p>{t('this-includes')}</p>
         {includes.map((feature) => {
           return (
             <div key={feature} className="my-2 flex">
diff --git a/apps/web/components/settings/platform/pricing/billing-card/locales/en.json b/apps/web/components/settings/platform/pricing/billing-card/locales/en.json
new file mode 100644
index 00000000000000..8ae2ffe09baacf
--- /dev/null
+++ b/apps/web/components/settings/platform/pricing/billing-card/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "us-pricing-per-month": "US${{pricing}}<0>per month</0>",
+  "this-includes": "This includes:"
+}
diff --git a/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx b/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx
index 3acf1a326eda15..c029acc83fd556 100644
--- a/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx
+++ b/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
@@ -16,6 +17,8 @@ import { PlatformBillingCard } from "@components/settings/platform/pricing/billi
 type PlatformPricingProps = { teamId?: number | null; teamPlan?: string; heading?: ReactNode };
 
 export const PlatformPricing = ({ teamId, teamPlan, heading }: PlatformPricingProps) => {
+const { t } = useTranslation();
+
   const pathname = usePathname();
   const currentPage = pathname?.split("/").pop();
   const router = useRouter();
@@ -54,7 +57,7 @@ export const PlatformPricing = ({ teamId, teamPlan, heading }: PlatformPricingPr
   };
 
   if (!teamId) {
-    return <div className="m-5">Platform team not present, you need to create a team first.</div>;
+    return <div className="m-5">{t('platform-team-not-present-you-need-to-create-a-team-first')}</div>;
   }
 
   return (
diff --git a/apps/web/components/settings/platform/pricing/platform-pricing/locales/en.json b/apps/web/components/settings/platform/pricing/platform-pricing/locales/en.json
new file mode 100644
index 00000000000000..6fb5135144b128
--- /dev/null
+++ b/apps/web/components/settings/platform/pricing/platform-pricing/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "platform-team-not-present-you-need-to-create-a-team-first": "Platform team not present, you need to create a team first."
+}
diff --git a/apps/web/components/setup/ChooseLicense.tsx b/apps/web/components/setup/ChooseLicense.tsx
index 7c08e2d5f5fbc0..d4ae8dd835c3fb 100644
--- a/apps/web/components/setup/ChooseLicense.tsx
+++ b/apps/web/components/setup/ChooseLicense.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import classNames from "classnames";
 import Link from "next/link";
@@ -12,6 +13,8 @@ const ChooseLicense = (
     onSubmit: (value: string) => void;
   } & Omit<JSX.IntrinsicElements["form"], "onSubmit" | "onChange">
 ) => {
+const { t } = useTranslation();
+
   const { value: initialValue = "FREE", onChange, onSubmit, ...rest } = props;
   const [value, setValue] = useState(initialValue);
   const { t } = useLocale();
@@ -54,7 +57,7 @@ const ChooseLicense = (
             <div className={classNames("bg-default h-full cursor-pointer space-y-2 rounded-md border p-4")}>
               <h2 className="font-cal text-emphasis text-xl">{t("custom_plan")}</h2>
               <p className="font-medium text-green-800">{t("contact_sales")}</p>
-              <p className="text-subtle">Build on top of Cal.com</p>
+              <p className="text-subtle">{t('build-on-top-of-cal-com')}</p>
               <ul className="text-subtle ml-4 list-disc text-left text-xs">
                 <li>{t("no_need_to_keep_your_code_open_source")}</li>
                 <li>{t("repackage_rebrand_resell")}</li>
diff --git a/apps/web/components/setup/EnterpriseLicense.tsx b/apps/web/components/setup/EnterpriseLicense.tsx
index 744ede19a1e303..1cfb379367a758 100644
--- a/apps/web/components/setup/EnterpriseLicense.tsx
+++ b/apps/web/components/setup/EnterpriseLicense.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { zodResolver } from "@hookform/resolvers/zod";
 // eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
@@ -55,6 +56,8 @@ const EnterpriseLicense = (
     ) => void;
   } & Omit<JSX.IntrinsicElements["form"], "onSubmit">
 ) => {
+const { t } = useTranslation();
+
   const { onSubmit, onSuccess = noop, onSuccessValidate = noop, ...rest } = props;
   const { t } = useLocale();
   const [checkLicenseLoading, setCheckLicenseLoading] = useState(false);
@@ -99,20 +102,23 @@ const EnterpriseLicense = (
           </Button>
           <div className="relative flex justify-center">
             <hr className="border-subtle my-8 w-full border-[1.5px]" />
-            <span className="bg-default absolute mt-[22px] px-3.5 text-sm">OR</span>
+            <span className="bg-default absolute mt-[22px] px-3.5 text-sm">{t('or')}</span>
           </div>
           {t("already_have_key")}
           <Controller
             name="licenseKey"
             control={formMethods.control}
-            render={({ field: { onBlur, onChange, value } }) => (
+            render={({ field: { onBlur, onChange, value } }) =>  {
+const { t } = useTranslation();
+
+return (
               <TextField
                 {...formMethods.register("licenseKey")}
                 className={classNames(
                   "group-hover:border-emphasis mb-0",
                   (checkLicenseLoading || (errors.licenseKey === undefined && isDirty)) && "border-r-0"
                 )}
-                placeholder="xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
+                placeholder={t('xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx')}
                 labelSrOnly={true}
                 value={value}
                 addOnFilled={false}
@@ -135,7 +141,8 @@ const EnterpriseLicense = (
                   await formMethods.trigger("licenseKey");
                 }}
               />
-            )}
+            )
+}}
           />
         </div>
       </form>
diff --git a/apps/web/components/setup/locales/en.json b/apps/web/components/setup/locales/en.json
new file mode 100644
index 00000000000000..c087f6a93414e5
--- /dev/null
+++ b/apps/web/components/setup/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "build-on-top-of-cal-com": "Build on top of Cal.com",
+  "or": "OR",
+  "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx": "\"xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx\""
+}
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 60d83caf64d30e..f16bc02ee03459 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 // eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
@@ -48,6 +49,8 @@ const obtainNewUsernameChangeCondition = ({
 };
 
 const PremiumTextfield = (props: ICustomUsernameProps) => {
+const { t } = useTranslation();
+
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const router = useRouter();
@@ -176,16 +179,13 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
   };
 
   let paymentMsg = !currentUsername ? (
-    <span className="text-xs text-orange-400">
-      You need to reserve your premium username for {getPremiumPlanPriceValue()}
+    <span className="text-xs text-orange-400">{t('reserve-premium-username')}{getPremiumPlanPriceValue()}
     </span>
   ) : null;
 
   if (recentAttemptPaymentStatus && recentAttemptPaymentStatus !== "paid") {
     paymentMsg = (
-      <span className="text-sm text-red-500">
-        Your payment could not be completed. Your username is still not reserved
-      </span>
+      <span className="text-sm text-red-500">{t('payment-not-completed-username-not-reserved')}</span>
     );
   }
 
diff --git a/apps/web/components/ui/UsernameAvailability/locales/en.json b/apps/web/components/ui/UsernameAvailability/locales/en.json
new file mode 100644
index 00000000000000..a19d37889c1cdd
--- /dev/null
+++ b/apps/web/components/ui/UsernameAvailability/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "reserve-premium-username": "You need to reserve your premium username for",
+  "payment-not-completed-username-not-reserved": "Your payment could not be completed. Your username is still not reserved"
+}
diff --git a/apps/web/components/ui/form/MinutesField.tsx b/apps/web/components/ui/form/MinutesField.tsx
index 42d147ef6a1173..e81d47071593e9 100644
--- a/apps/web/components/ui/form/MinutesField.tsx
+++ b/apps/web/components/ui/form/MinutesField.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import type { InputHTMLAttributes, ReactNode } from "react";
 import React, { forwardRef } from "react";
@@ -7,6 +8,8 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
 };
 
 const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, ref) => {
+const { t } = useTranslation();
+
   return (
     <div className="block sm:flex">
       {!!label && (
@@ -28,9 +31,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
             )}
           />
           <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-            <span className="text-subtle text-sm" id="duration">
-              mins
-            </span>
+            <span className="text-subtle text-sm" id="duration">{t('mins')}</span>
           </div>
         </div>
       </div>
diff --git a/apps/web/components/ui/form/locales/en.json b/apps/web/components/ui/form/locales/en.json
new file mode 100644
index 00000000000000..c01098e5af00d8
--- /dev/null
+++ b/apps/web/components/ui/form/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "mins": "mins"
+}
diff --git a/apps/web/lib/QueryCell.tsx b/apps/web/lib/QueryCell.tsx
index cfc2fbbb5f27e0..cda0ab5fe915f0 100644
--- a/apps/web/lib/QueryCell.tsx
+++ b/apps/web/lib/QueryCell.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type {
   QueryObserverPendingResult,
   QueryObserverRefetchErrorResult,
@@ -48,6 +49,8 @@ export function QueryCell<TData, TError extends ErrorLike>(
 export function QueryCell<TData, TError extends ErrorLike>(
   opts: QueryCellOptionsNoEmpty<TData, TError> | QueryCellOptionsWithEmpty<TData, TError>
 ) {
+const { t } = useTranslation();
+
   const { query } = opts;
   const { isLocaleReady } = useLocale();
   const StatusLoader = opts.customLoader || <Loader />; // Fixes edge case where this can return null form query cell
@@ -70,7 +73,7 @@ export function QueryCell<TData, TError extends ErrorLike>(
   if (query.status === "error") {
     return (
       opts.error?.(query) ?? (
-        <Alert severity="error" title="Something went wrong" message={query.error.message} />
+        <Alert severity="error" title={t('something-went-wrong')} message={query.error.message} />
       )
     );
   }
diff --git a/apps/web/lib/locales/en.json b/apps/web/lib/locales/en.json
new file mode 100644
index 00000000000000..3d43bcc41eafcc
--- /dev/null
+++ b/apps/web/lib/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "something-went-wrong": "\"Something went wrong\""
+}
diff --git a/apps/web/modules/apps/[slug]/locales/en.json b/apps/web/modules/apps/[slug]/locales/en.json
new file mode 100644
index 00000000000000..2234e623eb2b1d
--- /dev/null
+++ b/apps/web/modules/apps/[slug]/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "this-app-seems-to-be-disabled-if-you-are-an-admin-you-can-enable-this-app-from-here": "This App seems to be disabled. If you are an admin, you can enable this app from <0>here</0>"
+}
diff --git a/apps/web/modules/apps/[slug]/setup/locales/en.json b/apps/web/modules/apps/[slug]/setup/locales/en.json
new file mode 100644
index 00000000000000..47dd5e7315f12f
--- /dev/null
+++ b/apps/web/modules/apps/[slug]/setup/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "empty-string": "\"\""
+}
diff --git a/apps/web/modules/apps/[slug]/setup/setup-view.tsx b/apps/web/modules/apps/[slug]/setup/setup-view.tsx
index 921423ce79bc20..bd71d0f9b7c43c 100644
--- a/apps/web/modules/apps/[slug]/setup/setup-view.tsx
+++ b/apps/web/modules/apps/[slug]/setup/setup-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
@@ -12,6 +14,8 @@ import { HeadSeo } from "@calcom/ui";
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 
 export default function SetupInformation(props: PageProps) {
+const { t } = useTranslation();
+
   const searchParams = useCompatSearchParams();
   const router = useRouter();
   const slug = searchParams?.get("slug") as string;
@@ -31,7 +35,7 @@ export default function SetupInformation(props: PageProps) {
   return (
     <>
       {/* So that the set up page does not get indexed by search engines */}
-      <HeadSeo nextSeoProps={{ noindex: true, nofollow: true }} title={`${slug} | Cal.com`} description="" />
+      <HeadSeo nextSeoProps={{ noindex: true, nofollow: true }} title={`${slug} | Cal.com`} description={t('empty-string')} />
       <AppSetupPage slug={slug} {...props} />
     </>
   );
diff --git a/apps/web/modules/apps/[slug]/slug-view.tsx b/apps/web/modules/apps/[slug]/slug-view.tsx
index 6331f81e401735..a14b1097919682 100644
--- a/apps/web/modules/apps/[slug]/slug-view.tsx
+++ b/apps/web/modules/apps/[slug]/slug-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation, Trans } from "react-i18next";
+
 
 import MarkdownIt from "markdown-it";
 import type { InferGetStaticPropsType } from "next";
@@ -19,6 +21,8 @@ const md = new MarkdownIt("default", { html: true, breaks: true });
 export type PageProps = InferGetStaticPropsType<typeof getStaticProps>;
 
 function SingleAppPage(props: PageProps) {
+const { t } = useTranslation();
+
   const { error, setQuery: setError } = useRouterQuery("error");
   const { t } = useLocale();
   if (error === "account_already_linked") {
@@ -30,11 +34,11 @@ function SingleAppPage(props: PageProps) {
     if (!IS_PRODUCTION) {
       // TODO: Improve disabled App UI. This is just a placeholder.
       return (
-        <div className="p-2">
-          This App seems to be disabled. If you are an admin, you can enable this app from{" "}
-          <Link href="/settings/admin/apps" className="cursor-pointer text-blue-500 underline">
-            here
-          </Link>
+        <div className="p-2"><Trans
+i18nKey="this-app-seems-to-be-disabled-if-you-are-an-admin-you-can-enable-this-app-from-here"
+components={{"0": 
+          <Link href="/settings/admin/apps" className="cursor-pointer text-blue-500 underline" />}}
+/>
         </div>
       );
     }
diff --git a/apps/web/modules/auth/forgot-password/forgot-password-view.tsx b/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
index d8587cd11455ea..52bfef6eeb592b 100644
--- a/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
+++ b/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 // eslint-disable-next-line no-restricted-imports
 import { debounce } from "lodash";
@@ -18,6 +20,8 @@ import type { getServerSideProps } from "@server/lib/auth/forgot-password/getSer
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 
 export default function ForgotPassword(props: PageProps) {
+const { t } = useTranslation();
+
   const csrfToken = "csrfToken" in props ? (props.csrfToken as string) : undefined;
   const { t } = useLocale();
   const [loading, setLoading] = React.useState(false);
@@ -125,7 +129,7 @@ export default function ForgotPassword(props: PageProps) {
               id="email"
               name="email"
               label={t("email_address")}
-              placeholder="john.doe@example.com"
+              placeholder={t('john-doe@example-com')}
               required
             />
             <div className="space-y-2">
diff --git a/apps/web/modules/auth/forgot-password/locales/en.json b/apps/web/modules/auth/forgot-password/locales/en.json
new file mode 100644
index 00000000000000..b620510a6679ed
--- /dev/null
+++ b/apps/web/modules/auth/forgot-password/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "john-doe@example-com": "\"john.doe@example.com\""
+}
diff --git a/apps/web/modules/auth/locales/en.json b/apps/web/modules/auth/locales/en.json
new file mode 100644
index 00000000000000..3e550e9052d8fe
--- /dev/null
+++ b/apps/web/modules/auth/locales/en.json
@@ -0,0 +1,10 @@
+{
+  "sign-in-with": "Sign in with",
+  "continue-with-google-icon": "\"Continue with Google Icon\"",
+  "john-doe-at-example-dot-com": "\"john.doe@example.com\"",
+  "invalid-link": "Invalid Link",
+  "account-created-premium-not-reserved": "Your account has been created, but your premium has not been reserved.",
+  "email-sent-activate-account": "We have sent an email to<0></0>with a link to activate your account.",
+  "open-in-gmail": "Open in Gmail",
+  "did-not-receive-email": "Don’t seen an email?"
+}
diff --git a/apps/web/modules/auth/login-view.tsx b/apps/web/modules/auth/login-view.tsx
index 478ec4523e4b91..7c3bdac1b0fb4d 100644
--- a/apps/web/modules/auth/login-view.tsx
+++ b/apps/web/modules/auth/login-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import classNames from "classnames";
@@ -39,9 +41,13 @@ interface LoginValues {
   csrfToken: string;
 }
 
-const GoogleIcon = () => (
-  <img className="text-subtle mr-2 h-4 w-4" src="/google-icon-colored.svg" alt="Continue with Google Icon" />
-);
+const GoogleIcon = () =>  {
+const { t } = useTranslation();
+
+return (
+  <img className="text-subtle mr-2 h-4 w-4" src="/google-icon-colored.svg" alt={t('continue-with-google-icon')} />
+)
+};
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Login({
   csrfToken,
@@ -52,6 +58,8 @@ export default function Login({
   totpEmail,
 }: // eslint-disable-next-line @typescript-eslint/ban-types
 PageProps & WithNonceProps<{}>) {
+const { t } = useTranslation();
+
   const searchParams = useCompatSearchParams();
   const { t } = useLocale();
   const router = useRouter();
@@ -250,7 +258,7 @@ PageProps & WithNonceProps<{}>) {
                   id="email"
                   label={t("email_address")}
                   defaultValue={totpEmail || (searchParams?.get("email") as string)}
-                  placeholder="john.doe@example.com"
+                  placeholder={t('john-doe-at-example-dot-com')}
                   required
                   {...register("email")}
                 />
diff --git a/apps/web/modules/auth/oauth2/authorize-view.tsx b/apps/web/modules/auth/oauth2/authorize-view.tsx
index 61efe7eec78f1e..a0350a86ac704e 100644
--- a/apps/web/modules/auth/oauth2/authorize-view.tsx
+++ b/apps/web/modules/auth/oauth2/authorize-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useSession } from "next-auth/react";
@@ -12,6 +14,8 @@ import { trpc } from "@calcom/trpc/react";
 import { Avatar, Button, Icon, Select } from "@calcom/ui";
 
 export default function Authorize() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const { status } = useSession();
 
@@ -83,7 +87,7 @@ export default function Authorize() {
       <div className="bg-default border-subtle mt-2 max-w-xl rounded-md border px-9 pb-3 pt-2">
         <div className="flex items-center justify-center">
           <Avatar
-            alt=""
+            alt={t('empty-string')}
             fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
             className="items-center"
             imageSrc={client.logo}
@@ -92,7 +96,7 @@ export default function Authorize() {
           <div className="relative -ml-6 h-24 w-24">
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="bg-default flex h-[70px] w-[70px] items-center  justify-center rounded-full">
-                <img src="/cal-com-icon.svg" alt="Logo" className="h-16 w-16 rounded-full" />
+                <img src="/cal-com-icon.svg" alt={t('logo')} className="h-16 w-16 rounded-full" />
               </div>
             </div>
           </div>
diff --git a/apps/web/modules/auth/oauth2/locales/en.json b/apps/web/modules/auth/oauth2/locales/en.json
new file mode 100644
index 00000000000000..ce7e6eeff02adc
--- /dev/null
+++ b/apps/web/modules/auth/oauth2/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "empty-string": "\"\"",
+  "logo": "\"Logo\""
+}
diff --git a/apps/web/modules/auth/platform/authorize-view.tsx b/apps/web/modules/auth/platform/authorize-view.tsx
index 6a5739d2a7067a..1119a9a6e9c8a0 100644
--- a/apps/web/modules/auth/platform/authorize-view.tsx
+++ b/apps/web/modules/auth/platform/authorize-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation, Trans } from "react-i18next";
+
 
 import { useRouter } from "next/navigation";
 
@@ -11,6 +13,8 @@ import { Avatar, Button, Icon } from "@calcom/ui";
 import { hasPermission } from "../../../../../packages/platform/utils/permissions";
 
 export default function Authorize() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
 
@@ -47,9 +51,12 @@ export default function Authorize() {
 
     return (
       !!permissionsMessage && (
-        <li key={value.read} className="relative pl-5 text-sm">
-          <span className="absolute left-0">&#10003;</span>
-          {permissionsMessage} your {`${value.label}s`.toLocaleLowerCase()}
+        <li key={value.read} className="relative pl-5 text-sm"><Trans
+i18nKey="permissions-message-your"
+values={{ permissionsMessage }}
+components={{"0": 
+          <span className="absolute left-0" />}}
+/>{`${value.label}s`.toLocaleLowerCase()}
         </li>
       )
     );
@@ -66,7 +73,7 @@ export default function Authorize() {
            */}
           {client.logo ? (
             <Avatar
-              alt=""
+              alt={t('empty-string-1')}
               fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
               className="items-center"
               imageSrc={client.logo}
@@ -74,7 +81,7 @@ export default function Authorize() {
             />
           ) : (
             <Avatar
-              alt=""
+              alt={t('empty-string-2')}
               fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
               className="items-center"
               imageSrc="/cal-com-icon.svg"
@@ -84,7 +91,7 @@ export default function Authorize() {
           <div className="relative -ml-6 h-24 w-24">
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="flex h-[70px] w-[70px] items-center justify-center  rounded-full bg-white">
-                <img src="/cal-com-icon.svg" alt="Logo" className="h-16 w-16 rounded-full" />
+                <img src="/cal-com-icon.svg" alt={t('logo')} className="h-16 w-16 rounded-full" />
               </div>
             </div>
           </div>
diff --git a/apps/web/modules/auth/platform/locales/en.json b/apps/web/modules/auth/platform/locales/en.json
new file mode 100644
index 00000000000000..816e107b3757aa
--- /dev/null
+++ b/apps/web/modules/auth/platform/locales/en.json
@@ -0,0 +1,6 @@
+{
+  "permissions-message-your": "<0>✓</0>{{permissionsMessage}}your",
+  "empty-string-1": "\"\"",
+  "empty-string-2": "\"\"",
+  "logo": "\"Logo\""
+}
diff --git a/apps/web/modules/auth/signin-view.tsx b/apps/web/modules/auth/signin-view.tsx
index eb5169379033c8..6ed629126bed2f 100644
--- a/apps/web/modules/auth/signin-view.tsx
+++ b/apps/web/modules/auth/signin-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { signIn } from "next-auth/react";
 
@@ -9,6 +11,8 @@ import type { getServerSideProps } from "@server/lib/auth/signin/getServerSidePr
 
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 function Signin({ providers }: PageProps) {
+const { t } = useTranslation();
+
   if (!providers) {
     return null;
   }
@@ -18,7 +22,7 @@ function Signin({ providers }: PageProps) {
       {Object.values(providers).map((provider) => {
         return (
           <div key={provider.name}>
-            <Button onClick={() => signIn(provider.id)}>Sign in with {provider.name}</Button>
+            <Button onClick={() => signIn(provider.id)}>{t('sign-in-with')}{provider.name}</Button>
           </div>
         );
       })}
diff --git a/apps/web/modules/auth/verify-view.tsx b/apps/web/modules/auth/verify-view.tsx
index 327cefb2f4db38..86e6b14c686548 100644
--- a/apps/web/modules/auth/verify-view.tsx
+++ b/apps/web/modules/auth/verify-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation, Trans } from "react-i18next";
+
 
 import { motion } from "framer-motion";
 import { signIn } from "next-auth/react";
@@ -118,6 +120,8 @@ const MailOpenIcon = () => (
 );
 
 export default function Verify(props: PageProps) {
+const { t } = useTranslation();
+
   const searchParams = useCompatSearchParams();
   const pathname = usePathname();
   const router = useRouter();
@@ -171,7 +175,7 @@ export default function Verify(props: PageProps) {
   }
 
   if (!stripeCustomerId && !sessionId) {
-    return <div>Invalid Link</div>;
+    return <div>{t('invalid-link')}</div>;
   }
 
   return (
@@ -198,10 +202,12 @@ export default function Verify(props: PageProps) {
               : "Check your Inbox"}
           </h3>
           {hasPaymentFailed && (
-            <p className="my-6">Your account has been created, but your premium has not been reserved.</p>
+            <p className="my-6">{t('account-created-premium-not-reserved')}</p>
           )}
-          <p className="text-muted dark:text-subtle text-base font-normal">
-            We have sent an email to <b>{customer?.email} </b>with a link to activate your account.{" "}
+          <p className="text-muted dark:text-subtle text-base font-normal"><Trans
+i18nKey="email-sent-activate-account"
+components={{"0": <b />}}
+/>
             {hasPaymentFailed &&
               "Once you activate your account you will be able to try purchase your premium username again or select a different one."}
           </p>
@@ -214,13 +220,11 @@ export default function Verify(props: PageProps) {
                   : "https://mail.google.com/mail/u/0/"
               }
               target="_blank"
-              EndIcon="external-link">
-              Open in Gmail
-            </Button>
+              EndIcon="external-link">{t('open-in-gmail')}</Button>
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <p className="text-subtle text-base font-normal ">Don’t seen an email?</p>
+          <p className="text-subtle text-base font-normal ">{t('did-not-receive-email')}</p>
           <button
             className={classNames(
               "font-light",
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 623171b7127fd2..2551890da66f00 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
@@ -105,6 +107,8 @@ const useBrandColors = ({
 };
 
 export default function Success(props: PageProps) {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
   const routerQuery = useRouterQuery();
@@ -475,7 +479,7 @@ export default function Success(props: PageProps) {
                       )}
                       {giphyImage && !needsConfirmation && isReschedulable && (
                         // eslint-disable-next-line @next/next/no-img-element
-                        <img src={giphyImage} className="w-full rounded-lg" alt="Gif from Giphy" />
+                        <img src={giphyImage} className="w-full rounded-lg" alt={t('gif-from-giphy')} />
                       )}
                       <div
                         className={classNames(
@@ -786,9 +790,7 @@ export default function Success(props: PageProps) {
                           onClick={() => {
                             window.opener.focus();
                             window.close();
-                          }}>
-                          Go Back
-                        </Button>
+                          }}>{t('go-back')}</Button>
                       </div>
                     )}
                     {!needsConfirmation && !isCancellationMode && isReschedulable && !!calculatedDuration && (
@@ -824,7 +826,7 @@ export default function Success(props: PageProps) {
                                 fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24">
-                                <title>Google</title>
+                                <title>{t('google')}</title>
                                 <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
                               </svg>
                             </Link>
@@ -851,7 +853,7 @@ export default function Success(props: PageProps) {
                                 fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24">
-                                <title>Microsoft Outlook</title>
+                                <title>{t('microsoft-outlook')}</title>
                                 <path d="M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z" />
                               </svg>
                             </Link>
@@ -878,7 +880,7 @@ export default function Success(props: PageProps) {
                                 fill="currentColor"
                                 xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 24 24">
-                                <title>Microsoft Office</title>
+                                <title>{t('microsoft-office')}</title>
                                 <path d="M21.53 4.306v15.363q0 .807-.472 1.433-.472.627-1.253.85l-6.888 1.974q-.136.037-.29.055-.156.019-.293.019-.396 0-.72-.105-.321-.106-.656-.292l-4.505-2.544q-.248-.137-.391-.366-.143-.23-.143-.515 0-.434.304-.738.304-.305.739-.305h5.831V4.964l-4.38 1.563q-.533.187-.856.658-.322.472-.322 1.03v8.078q0 .496-.248.912-.25.416-.683.651l-2.072 1.13q-.286.148-.571.148-.497 0-.844-.347-.348-.347-.348-.844V6.563q0-.62.33-1.19.328-.571.874-.881L11.07.285q.248-.136.534-.21.285-.075.57-.075.211 0 .38.031.166.031.364.093l6.888 1.899q.384.11.7.329.317.217.547.52.23.305.353.67.125.367.125.764zm-1.588 15.363V4.306q0-.273-.16-.478-.163-.204-.423-.28l-3.388-.93q-.397-.111-.794-.23-.397-.117-.794-.216v19.68l4.976-1.427q.26-.074.422-.28.161-.204.161-.477z" />
                               </svg>
                             </Link>
@@ -923,7 +925,7 @@ export default function Success(props: PageProps) {
                               id="email"
                               defaultValue={email}
                               className="mr- focus:border-brand-default border-default text-default mt-0 block w-full rounded-none rounded-l-md shadow-sm focus:ring-black sm:text-sm"
-                              placeholder="rick.astley@cal.com"
+                              placeholder={t('rick-astley-cal-com')}
                             />
                             <Button
                               size="lg"
@@ -1022,7 +1024,7 @@ export default function Success(props: PageProps) {
                       <TextArea
                         id="comment"
                         name="comment"
-                        placeholder="Next time I would like to ..."
+                        placeholder={t('next-time-i-would-like-to')}
                         rows={3}
                         disabled={isFeedbackSubmitted}
                         onChange={(event) => setComment(event.target.value)}
diff --git a/apps/web/modules/bookings/views/locales/en.json b/apps/web/modules/bookings/views/locales/en.json
new file mode 100644
index 00000000000000..b27ed98c9ddaad
--- /dev/null
+++ b/apps/web/modules/bookings/views/locales/en.json
@@ -0,0 +1,9 @@
+{
+  "gif-from-giphy": "\"Gif from Giphy\"",
+  "go-back": "Go Back",
+  "google": "Google",
+  "microsoft-outlook": "Microsoft Outlook",
+  "microsoft-office": "Microsoft Office",
+  "rick-astley-cal-com": "\"rick.astley@cal.com\"",
+  "next-time-i-would-like-to": "\"Next time I would like to ...\""
+}
diff --git a/apps/web/modules/connect-and-join/connect-and-join-view.tsx b/apps/web/modules/connect-and-join/connect-and-join-view.tsx
index 044a4d0faa1ec0..825567d0718dcd 100644
--- a/apps/web/modules/connect-and-join/connect-and-join-view.tsx
+++ b/apps/web/modules/connect-and-join/connect-and-join-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation, Trans } from "react-i18next";
+
 
 import { useSession } from "next-auth/react";
 import { Trans } from "next-i18next";
@@ -14,6 +16,8 @@ import { TRPCClientError } from "@calcom/trpc/react";
 import { Button, EmptyScreen, Alert } from "@calcom/ui";
 
 function ConnectAndJoin() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
   const token = getQueryParam("token");
@@ -56,11 +60,10 @@ function ConnectAndJoin() {
             <div className="flex flex-col items-center justify-center	gap-4">
               {meetingUrl ? (
                 <div className="text-default flex flex-col items-center gap-2 text-center text-sm font-normal">
-                  <Trans i18nKey="some_other_host_already_accepted_the_meeting">
-                    Some other host already accepted the meeting. Do you still want to join?
-                    <Link className="inline-block cursor-pointer underline" href={meetingUrl}>
-                      Continue to Meeting
-                    </Link>
+                  <Trans i18nKey="some_other_host_already_accepted_the_meeting"><Trans
+i18nKey="some-other-host-already-accepted-the-meeting"
+components={{"0": <Link className="inline-block cursor-pointer underline" href={meetingUrl} />}}
+/>
                   </Trans>
                 </div>
               ) : (
diff --git a/apps/web/modules/connect-and-join/locales/en.json b/apps/web/modules/connect-and-join/locales/en.json
new file mode 100644
index 00000000000000..48c22f5f717b56
--- /dev/null
+++ b/apps/web/modules/connect-and-join/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "some-other-host-already-accepted-the-meeting": "Some other host already accepted the meeting. Do you still want to join?<0>Continue to Meeting</0>"
+}
diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index b3e6280f818e0a..9724ae9bf995f5 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { Trans } from "next-i18next";
@@ -254,6 +256,8 @@ export const InfiniteEventTypeList = ({
   isPending,
   debouncedSearchTerm,
 }: InfiniteEventTypeListProps): JSX.Element => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
   const pathname = usePathname();
@@ -810,10 +814,8 @@ export const InfiniteEventTypeList = ({
               i18nKey={`delete${isManagedEventPrefix()}_event_type_description`}
               components={{ li: <li />, ul: <ul className="ml-4 list-disc" /> }}>
               <ul>
-                <li>Members assigned to this event type will also have their event types deleted.</li>
-                <li>
-                  Anyone who they&apos;ve shared their link with will no longer be able to book using it.
-                </li>
+                <li>{t('members-assigned-to-event-type-deleted')}</li>
+                <li>{t('shared-link-no-longer-able-to-book')}</li>
               </ul>
             </Trans>
           </p>
@@ -898,12 +900,14 @@ const InfiniteScrollMain = ({
   eventTypeGroups: GetUserEventGroupsResponse["eventTypeGroups"] | undefined;
   profiles: GetUserEventGroupsResponse["profiles"] | undefined;
 }) => {
+const { t } = useTranslation();
+
   const searchParams = useCompatSearchParams();
   const { data } = useTypedQuery(querySchema);
   const orgBranding = useOrgBranding();
 
   if (status === "error") {
-    return <Alert severity="error" title="Something went wrong" message={errorMessage} />;
+    return <Alert severity="error" title={t('something-went-wrong')} message={errorMessage} />;
   }
 
   if (!eventTypeGroups || !profiles || status === "pending") {
@@ -950,6 +954,8 @@ const EventTypesPage: React.FC & {
   PageWrapper?: AppProps["Component"]["PageWrapper"];
   getLayout?: AppProps["Component"]["getLayout"];
 } = () => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const searchParams = useCompatSearchParams();
   const { open } = useIntercom();
@@ -1017,8 +1023,8 @@ const EventTypesPage: React.FC & {
       subtitle={t("event_types_page_subtitle")}
       CTA={<CTA profileOptions={profileOptions} isOrganization={!!user?.organizationId} />}>
       <HeadSeo
-        title="Event Types"
-        description="Create events to share for people to book on your calendar."
+        title={t('event-types')}
+        description={t('create-events-to-share-for-booking')}
       />
 
       <InfiniteScrollMain
diff --git a/apps/web/modules/event-types/views/locales/en.json b/apps/web/modules/event-types/views/locales/en.json
new file mode 100644
index 00000000000000..b526b436225ce4
--- /dev/null
+++ b/apps/web/modules/event-types/views/locales/en.json
@@ -0,0 +1,7 @@
+{
+  "members-assigned-to-event-type-deleted": "Members assigned to this event type will also have their event types deleted.",
+  "shared-link-no-longer-able-to-book": "Anyone who they've shared their link with will no longer be able to book using it.",
+  "something-went-wrong": "\"Something went wrong\"",
+  "event-types": "\"Event Types\"",
+  "create-events-to-share-for-booking": "\"Create events to share for people to book on your calendar.\""
+}
diff --git a/apps/web/modules/locales/en.json b/apps/web/modules/locales/en.json
new file mode 100644
index 00000000000000..dbd39949a84237
--- /dev/null
+++ b/apps/web/modules/locales/en.json
@@ -0,0 +1,13 @@
+{
+  "continue-with-google-icon": "\"Continue with Google Icon\"",
+  "terms": "Terms",
+  "privacy-policy": "Privacy Policy.",
+  "cal-com-product-of-the-day-at-producthunt": "\"Cal.com was Product of the Day at ProductHunt\"",
+  "cal-com-product-of-the-week-at-producthunt": "\"Cal.com was Product of the Week at ProductHunt\"",
+  "cal-com-product-of-the-month-at-producthunt": "\"Cal.com was Product of the Month at ProductHunt\"",
+  "producthunt-rating-of-5-stars": "\"ProductHunt Rating of 5 Stars\"",
+  "google-reviews-rating-of-4-7-stars": "\"Google Reviews Rating of 4.7 Stars\"",
+  "g2-rating-of-4-7-stars": "\"G2 Rating of 4.7 Stars\"",
+  "cal-com-booking-page-1": "\"Cal.com Booking Page\"",
+  "cal-com-booking-page-2": "\"Cal.com Booking Page\""
+}
diff --git a/apps/web/modules/maintenance/locales/en.json b/apps/web/modules/maintenance/locales/en.json
new file mode 100644
index 00000000000000..02d969fccb6799
--- /dev/null
+++ b/apps/web/modules/maintenance/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "down-for-maintenance": "Down for maintenance",
+  "the-cal-com-team-are-performing-scheduled-maintenance-if-you-have-any-questions-please-contact-support": "The Cal.com team are performing scheduled maintenance. If you have any questions, please contact support.",
+  "contact-support": "Contact Support"
+}
diff --git a/apps/web/modules/maintenance/maintenance-view.tsx b/apps/web/modules/maintenance/maintenance-view.tsx
index 129e8b4460a5b8..9136e5feaabfc7 100644
--- a/apps/web/modules/maintenance/maintenance-view.tsx
+++ b/apps/web/modules/maintenance/maintenance-view.tsx
@@ -1,18 +1,19 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { Button } from "@calcom/ui";
 
 export default function MaintenancePage() {
+const { t } = useTranslation();
+
   return (
     <div className="bg-subtle flex h-screen">
       <div className="bg-default m-auto rounded-md p-10 text-right ltr:text-left">
-        <h1 className="text-emphasis text-2xl font-medium">Down for maintenance</h1>
-        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">
-          The Cal.com team are performing scheduled maintenance. If you have any questions, please contact
-          support.
-        </p>
-        <Button href={`${WEBSITE_URL}/support`}>Contact Support</Button>
+        <h1 className="text-emphasis text-2xl font-medium">{t('down-for-maintenance')}</h1>
+        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">{t('the-cal-com-team-are-performing-scheduled-maintenance-if-you-have-any-questions-please-contact-support')}</p>
+        <Button href={`${WEBSITE_URL}/support`}>{t('contact-support')}</Button>
       </div>
     </div>
   );
diff --git a/apps/web/modules/settings/admin/components/UsersTable.tsx b/apps/web/modules/settings/admin/components/UsersTable.tsx
index e0a639ac7d7405..0ced5a05a9cd5d 100644
--- a/apps/web/modules/settings/admin/components/UsersTable.tsx
+++ b/apps/web/modules/settings/admin/components/UsersTable.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { SMSLockState } from "@calcom/prisma/client";
@@ -50,6 +51,8 @@ const LockStatusTable = ({
   teams?: Team[];
   setSMSLockState: (param: { userId?: number; teamId?: number; lock: boolean }) => void;
 }) => {
+const { t } = useTranslation();
+
   function getActions({ user, team }: { user?: User; team?: Team }) {
     const smsLockState = user?.smsLockState ?? team?.smsLockState;
     if (!smsLockState) return [];
@@ -88,10 +91,10 @@ const LockStatusTable = ({
     <>
       <Table>
         <Header>
-          <ColumnTitle widthClassNames="w-auto">User/Team</ColumnTitle>
-          <ColumnTitle>Status</ColumnTitle>
+          <ColumnTitle widthClassNames="w-auto">{t('user-team')}</ColumnTitle>
+          <ColumnTitle>{t('status')}</ColumnTitle>
           <ColumnTitle widthClassNames="w-auto">
-            <span className="sr-only">Edit</span>
+            <span className="sr-only">{t('edit')}</span>
           </ColumnTitle>
         </Header>
 
@@ -121,7 +124,10 @@ const LockStatusTable = ({
               </Cell>
             </Row>
           ))}
-          {teams.map((team) => (
+          {teams.map((team) =>  {
+const { t } = useTranslation();
+
+return (
             <Row key={`team-${team.id}`}>
               <Cell widthClassNames="w-auto">
                 <div className="min-h-10 flex items-center">
@@ -132,7 +138,7 @@ const LockStatusTable = ({
                   />
                   <div className="text-subtle ml-4 font-medium">
                     <span className="text-default">{team.name}</span>
-                    <span className="ml-3 break-all">/team/{team.slug}</span>
+                    <span className="ml-3 break-all">{t('team-path')}{team.slug}</span>
                   </div>
                 </div>
               </Cell>
@@ -141,7 +147,8 @@ const LockStatusTable = ({
                 <DropdownActions actions={getActions({ team })} />
               </Cell>
             </Row>
-          ))}
+          )
+})}
         </tbody>
       </Table>
     </>
diff --git a/apps/web/modules/settings/admin/components/locales/en.json b/apps/web/modules/settings/admin/components/locales/en.json
new file mode 100644
index 00000000000000..cae042b8401da5
--- /dev/null
+++ b/apps/web/modules/settings/admin/components/locales/en.json
@@ -0,0 +1,6 @@
+{
+  "user-team": "User/Team",
+  "status": "Status",
+  "edit": "Edit",
+  "team-path": "/team/"
+}
diff --git a/apps/web/modules/settings/admin/locales/en.json b/apps/web/modules/settings/admin/locales/en.json
new file mode 100644
index 00000000000000..9a79988715e2ba
--- /dev/null
+++ b/apps/web/modules/settings/admin/locales/en.json
@@ -0,0 +1,13 @@
+{
+  "username": "\"username\"",
+  "lock-user": "Lock User",
+  "team-slug": "\"team slug\"",
+  "lock-team": "Lock Team",
+  "client-name": "\"Client name\"",
+  "empty-string-1": "\"\"",
+  "redirect-uri": "\"Redirect URI\"",
+  "empty-string-2": "\"\"",
+  "empty-string-3": "\"\"",
+  "client-id": "Client Id",
+  "client-secret": "Client Secret"
+}
diff --git a/apps/web/modules/settings/admin/locked-sms-view.tsx b/apps/web/modules/settings/admin/locked-sms-view.tsx
index eb6364942b1bde..7cc82da6deb2eb 100644
--- a/apps/web/modules/settings/admin/locked-sms-view.tsx
+++ b/apps/web/modules/settings/admin/locked-sms-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useState } from "react";
 
@@ -8,6 +10,8 @@ import { Button, TextField, showToast } from "@calcom/ui";
 import UsersTable from "./components/UsersTable";
 
 export default function LockedSMSView() {
+const { t } = useTranslation();
+
   const [username, setUsername] = useState("");
   const [teamSlug, setTeamSlug] = useState("");
 
@@ -40,7 +44,7 @@ export default function LockedSMSView() {
         <div className="flex">
           <TextField
             name="Lock User"
-            placeholder="username"
+            placeholder={t('username')}
             defaultValue=""
             onChange={(event) => setUsername(event.target.value)}
             value={username}
@@ -51,14 +55,12 @@ export default function LockedSMSView() {
             onClick={() => {
               mutation.mutate({ username, lock: true });
               utils.viewer.admin.getSMSLockStateTeamsUsers.invalidate();
-            }}>
-            Lock User
-          </Button>
+            }}>{t('lock-user')}</Button>
         </div>
         <div className="flex">
           <TextField
             name="Lock Team"
-            placeholder="team slug"
+            placeholder={t('team-slug')}
             defaultValue=""
             onChange={(event) => {
               setTeamSlug(event.target.value);
@@ -71,9 +73,7 @@ export default function LockedSMSView() {
             onClick={() => {
               mutation.mutate({ teamSlug, lock: true });
               utils.viewer.admin.getSMSLockStateTeamsUsers.invalidate();
-            }}>
-            Lock Team
-          </Button>
+            }}>{t('lock-team')}</Button>
         </div>
       </div>
       <UsersTable setSMSLockState={setSMSLockState} />
diff --git a/apps/web/modules/settings/admin/oauth-view.tsx b/apps/web/modules/settings/admin/oauth-view.tsx
index 711897ecd63d3b..9630b93a8e4572 100644
--- a/apps/web/modules/settings/admin/oauth-view.tsx
+++ b/apps/web/modules/settings/admin/oauth-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -14,6 +16,8 @@ type FormValues = {
 };
 
 export default function OAuthView() {
+const { t } = useTranslation();
+
   const oAuthForm = useForm<FormValues>();
   const [clientSecret, setClientSecret] = useState("");
   const [clientId, setClientId] = useState("");
@@ -46,24 +50,24 @@ export default function OAuthView() {
           <div className="">
             <TextField
               {...oAuthForm.register("name")}
-              label="Client name"
+              label={t('client-name')}
               type="text"
               id="name"
-              placeholder=""
+              placeholder={t('empty-string-1')}
               className="mb-3"
               required
             />
             <TextField
               {...oAuthForm.register("redirectUri")}
-              label="Redirect URI"
+              label={t('redirect-uri')}
               type="text"
               id="redirectUri"
-              placeholder=""
+              placeholder={t('empty-string-2')}
               required
             />
             <div className="mb-5 mt-5 flex items-center">
               <Avatar
-                alt=""
+                alt={t('empty-string-3')}
                 fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
                 className="mr-5 items-center"
                 imageSrc={logo}
@@ -88,7 +92,7 @@ export default function OAuthView() {
       ) : (
         <div>
           <div className="text-emphasis mb-5 text-xl font-semibold">{oAuthForm.getValues("name")}</div>
-          <div className="mb-2 font-medium">Client Id</div>
+          <div className="mb-2 font-medium">{t('client-id')}</div>
           <div className="flex">
             <code className="bg-subtle text-default w-full truncate rounded-md rounded-r-none py-[6px] pl-2 pr-2 align-middle font-mono">
               {" "}
@@ -109,7 +113,7 @@ export default function OAuthView() {
           </div>
           {clientSecret ? (
             <>
-              <div className="mb-2 mt-4 font-medium">Client Secret</div>
+              <div className="mb-2 mt-4 font-medium">{t('client-secret')}</div>
               <div className="flex">
                 <code className="bg-subtle text-default w-full truncate rounded-md rounded-r-none py-[6px] pl-2 pr-2 align-middle font-mono">
                   {" "}
diff --git a/apps/web/modules/settings/my-account/locales/en.json b/apps/web/modules/settings/my-account/locales/en.json
new file mode 100644
index 00000000000000..9fa992d6ef2e50
--- /dev/null
+++ b/apps/web/modules/settings/my-account/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "password": "\"Password\"",
+  "password-duplicate": "\"Password\"",
+  "connected-accounts": "Connected accounts"
+}
diff --git a/apps/web/modules/settings/my-account/profile-view.tsx b/apps/web/modules/settings/my-account/profile-view.tsx
index e4d5e619e7d4c9..0bf3d7c97abd50 100644
--- a/apps/web/modules/settings/my-account/profile-view.tsx
+++ b/apps/web/modules/settings/my-account/profile-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { zodResolver } from "@hookform/resolvers/zod";
 // eslint-disable-next-line no-restricted-imports
@@ -90,6 +92,8 @@ export type FormValues = {
 };
 
 const ProfileView = () => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const utils = trpc.useUtils();
   const { update } = useSession();
@@ -344,7 +348,7 @@ const ProfileView = () => {
                   id="password"
                   autoComplete="current-password"
                   required
-                  label="Password"
+                  label={t('password')}
                   ref={passwordRef}
                 />
               )}
@@ -398,7 +402,7 @@ const ProfileView = () => {
               id="password"
               autoComplete="current-password"
               required
-              label="Password"
+              label={t('password-duplicate')}
               ref={passwordRef}
             />
 
@@ -512,6 +516,8 @@ const ProfileForm = ({
   userOrganization: RouterOutputs["viewer"]["me"]["organization"];
   isCALIdentityProvider: boolean;
 }) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const [firstRender, setFirstRender] = useState(true);
 
@@ -728,7 +734,7 @@ const ProfileForm = ({
         so essentially there is no point in allowing them to disconnect, since when they log in they will get logged into the same account */}
         {!isCALIdentityProvider && user.email !== user.identityProviderEmail && (
           <div className="mt-6">
-            <Label>Connected accounts</Label>
+            <Label>{t('connected-accounts')}</Label>
             <div className="flex items-center">
               <span className="text-default text-sm capitalize">{user.identityProvider.toLowerCase()}</span>
               {user.identityProviderEmail && (
diff --git a/apps/web/modules/settings/platform/billing/billing-view.tsx b/apps/web/modules/settings/platform/billing/billing-view.tsx
index 8c4d6d16b10529..7640cbb91acb34 100644
--- a/apps/web/modules/settings/platform/billing/billing-view.tsx
+++ b/apps/web/modules/settings/platform/billing/billing-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { usePathname } from "next/navigation";
 
@@ -15,6 +17,8 @@ import { useGetUserAttributes } from "@components/settings/platform/hooks/useGet
 import { CtaRow } from "~/settings/billing/billing-view";
 
 export default function PlatformBillingUpgrade() {
+const { t } = useTranslation();
+
   const pathname = usePathname();
   const { t } = useLocale();
   const { open } = useIntercom();
@@ -28,7 +32,7 @@ export default function PlatformBillingUpgrade() {
     useGetUserAttributes();
 
   if (isUserLoading || (isUserBillingDataLoading && !userBillingData)) {
-    return <div className="m-5">Loading...</div>;
+    return <div className="m-5">{t('loading')}</div>;
   }
 
   if (isPlatformUser && !isPaidUser)
@@ -37,7 +41,7 @@ export default function PlatformBillingUpgrade() {
         teamId={userOrgId}
         heading={
           <div className="mb-5 text-center text-2xl font-semibold">
-            <h1>Subscribe to Platform</h1>
+            <h1>{t('subscribe-to-platform')}</h1>
           </div>
         }
       />
@@ -76,9 +80,7 @@ export default function PlatformBillingUpgrade() {
             <CtaRow
               title="Change plan"
               description={t("Want to change your existing plan or check out other plans?")}>
-              <Button href="/settings/platform/plans" color="secondary">
-                Plans
-              </Button>
+              <Button href="/settings/platform/plans" color="secondary">{t('plans')}</Button>
             </CtaRow>
 
             <hr className="border-subtle" />
diff --git a/apps/web/modules/settings/platform/billing/locales/en.json b/apps/web/modules/settings/platform/billing/locales/en.json
new file mode 100644
index 00000000000000..f00b83f639ba29
--- /dev/null
+++ b/apps/web/modules/settings/platform/billing/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "loading": "Loading...",
+  "subscribe-to-platform": "Subscribe to Platform",
+  "plans": "Plans"
+}
diff --git a/apps/web/modules/settings/platform/locales/en.json b/apps/web/modules/settings/platform/locales/en.json
new file mode 100644
index 00000000000000..7099468737bfe6
--- /dev/null
+++ b/apps/web/modules/settings/platform/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "loading-0": "Loading...",
+  "loading-1": "Loading...",
+  "subscribe-to-platform": "Subscribe to Platform"
+}
diff --git a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx
index b03399607d64d0..13340fee21d406 100644
--- a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx
+++ b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useParams } from "next/navigation";
 import { useRouter } from "next/navigation";
@@ -31,6 +33,8 @@ import {
 } from "../../../../../../../../packages/platform/utils/permissions";
 
 export default function EditOAuthClient() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
   const params = useParams<{ clientId: string }>();
@@ -75,7 +79,7 @@ export default function EditOAuthClient() {
     });
   };
 
-  if (isUserLoading) return <div className="m-5">Loading...</div>;
+  if (isUserLoading) return <div className="m-5">{t('loading')}</div>;
 
   if (isPlatformUser && isPaidUser) {
     return (
@@ -92,7 +96,7 @@ export default function EditOAuthClient() {
                 </p>
               </div>
             </div>
-            {(!Boolean(clientId) || (isFetched && !data)) && <p>OAuth Client not found.</p>}
+            {(!Boolean(clientId) || (isFetched && !data)) && <p>{t('oauth-client-not-found')}</p>}
             {isFetched && !!data && (
               <EditOAuthClientForm
                 defaultValues={{
@@ -117,8 +121,8 @@ export default function EditOAuthClient() {
                 isPending={isUpdating}
               />
             )}
-            {isFetching && <p>Loading...</p>}
-            {isError && <p>Something went wrong.</p>}
+            {isFetching && <p>{t('loading-duplicate')}</p>}
+            {isError && <p>{t('something-went-wrong')}</p>}
           </div>
         </Shell>
       </div>
diff --git a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx
index b6dca864a9cf45..c1b4579c92996f 100644
--- a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx
+++ b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useParams } from "next/navigation";
 import { useRouter } from "next/navigation";
@@ -19,6 +21,8 @@ import NoPlatformPlan from "@components/settings/platform/dashboard/NoPlatformPl
 import { useGetUserAttributes } from "@components/settings/platform/hooks/useGetUserAttributes";
 
 export default function EditOAuthClientWebhooks() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
   const params = useParams<{ clientId: string }>();
@@ -37,7 +41,7 @@ export default function EditOAuthClientWebhooks() {
   const { mutateAsync: createWebhook } = useCreateOAuthClientWebhook(clientId);
   const { mutateAsync: updateWebhook } = useUpdateOAuthClientWebhook(clientId);
 
-  if (isUserLoading) return <div className="m-5">Loading...</div>;
+  if (isUserLoading) return <div className="m-5">{t('loading')}</div>;
 
   if (isPlatformUser && isPaidUser) {
     return (
@@ -55,7 +59,7 @@ export default function EditOAuthClientWebhooks() {
               </div>
             </div>
 
-            {webhooksStatus !== "success" && <p>Error while trying to access webhooks.</p>}
+            {webhooksStatus !== "success" && <p>{t('error-while-trying-to-access-webhooks')}</p>}
 
             {isWebhooksFetched && webhooksStatus === "success" && (
               <WebhookForm
diff --git a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/locales/en.json b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/locales/en.json
new file mode 100644
index 00000000000000..c9931b0b8977ab
--- /dev/null
+++ b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/locales/en.json
@@ -0,0 +1,7 @@
+{
+  "loading": "Loading...",
+  "error-while-trying-to-access-webhooks": "Error while trying to access webhooks.",
+  "oauth-client-not-found": "OAuth Client not found.",
+  "loading-duplicate": "Loading...",
+  "something-went-wrong": "Something went wrong."
+}
diff --git a/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx b/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx
index 33ef295a4726a9..cc052b0cf5aa49 100644
--- a/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx
+++ b/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useRouter } from "next/navigation";
 
@@ -17,6 +19,8 @@ import type { FormValues } from "@components/settings/platform/oauth-clients/oau
 import { OAuthClientForm } from "@components/settings/platform/oauth-clients/oauth-client-form";
 
 export default function CreateOAuthClient() {
+const { t } = useTranslation();
+
   const searchParams = useCompatSearchParams();
   const router = useRouter();
   const { t } = useLocale();
@@ -59,7 +63,7 @@ export default function CreateOAuthClient() {
     });
   };
 
-  if (isUserLoading) return <div className="m-5">Loading...</div>;
+  if (isUserLoading) return <div className="m-5">{t('loading')}</div>;
 
   if (isPlatformUser && isPaidUser) {
     return (
diff --git a/apps/web/modules/settings/platform/oauth-clients/locales/en.json b/apps/web/modules/settings/platform/oauth-clients/locales/en.json
new file mode 100644
index 00000000000000..1c1d110b7ce1ae
--- /dev/null
+++ b/apps/web/modules/settings/platform/oauth-clients/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Loading..."
+}
diff --git a/apps/web/modules/settings/platform/plans/locales/en.json b/apps/web/modules/settings/platform/plans/locales/en.json
new file mode 100644
index 00000000000000..f6f6259cb9a316
--- /dev/null
+++ b/apps/web/modules/settings/platform/plans/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "loading": "Loading...",
+  "currently-subscribed-to": "You are currently subscribed to",
+  "plan": "plan"
+}
diff --git a/apps/web/modules/settings/platform/plans/platform-plans-view.tsx b/apps/web/modules/settings/platform/plans/platform-plans-view.tsx
index 4f08fcf037f420..114f38c7c8e4f4 100644
--- a/apps/web/modules/settings/platform/plans/platform-plans-view.tsx
+++ b/apps/web/modules/settings/platform/plans/platform-plans-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import Shell from "@calcom/features/shell/Shell";
 
@@ -7,11 +9,13 @@ import { useGetUserAttributes } from "@components/settings/platform/hooks/useGet
 import { PlatformPricing } from "@components/settings/platform/pricing/platform-pricing";
 
 export default function PlatformPlans() {
+const { t } = useTranslation();
+
   const { isUserLoading, isUserBillingDataLoading, isPlatformUser, isPaidUser, userBillingData, userOrgId } =
     useGetUserAttributes();
 
   if (isUserLoading || (isUserBillingDataLoading && !userBillingData)) {
-    return <div className="m-5">Loading...</div>;
+    return <div className="m-5">{t('loading')}</div>;
   }
 
   if (!isPlatformUser) return <NoPlatformPlan />;
@@ -22,10 +26,8 @@ export default function PlatformPlans() {
         backPath
         isPlatformUser={true}
         heading={
-          <h1 className="mx-2 mt-4 text-center text-xl md:text-2xl">
-            You are currently subscribed to {userBillingData?.plan[0]}
-            {userBillingData?.plan.slice(1).toLocaleLowerCase()} plan
-          </h1>
+          <h1 className="mx-2 mt-4 text-center text-xl md:text-2xl">{t('currently-subscribed-to')}{userBillingData?.plan[0]}
+            {userBillingData?.plan.slice(1).toLocaleLowerCase()}{t('plan')}</h1>
         }
         withoutMain={false}
         SidebarContainer={<></>}>
diff --git a/apps/web/modules/settings/platform/platform-view.tsx b/apps/web/modules/settings/platform/platform-view.tsx
index cff78782370d55..5639aae62f99f9 100644
--- a/apps/web/modules/settings/platform/platform-view.tsx
+++ b/apps/web/modules/settings/platform/platform-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { useState, useEffect } from "react";
@@ -23,6 +25,8 @@ import { PlatformPricing } from "@components/settings/platform/pricing/platform-
 const queryClient = new QueryClient();
 
 export default function Platform() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const [initialClientId, setInitialClientId] = useState("");
   const [initialClientName, setInitialClientName] = useState("");
@@ -54,10 +58,10 @@ export default function Platform() {
     setInitialClientName(data[0]?.name);
   }, [data]);
 
-  if (isUserLoading || isOAuthClientLoading) return <div className="m-5">Loading...</div>;
+  if (isUserLoading || isOAuthClientLoading) return <div className="m-5">{t('loading-0')}</div>;
 
   if (isUserBillingDataLoading && !userBillingData) {
-    return <div className="m-5">Loading...</div>;
+    return <div className="m-5">{t('loading-1')}</div>;
   }
 
   if (isPlatformUser && !isPaidUser)
@@ -66,7 +70,7 @@ export default function Platform() {
         teamId={userOrgId}
         heading={
           <div className="mb-5 text-center text-2xl font-semibold">
-            <h1>Subscribe to Platform</h1>
+            <h1>{t('subscribe-to-platform')}</h1>
           </div>
         }
       />
diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx
index a573bb3ce36650..44c22ad32733cf 100644
--- a/apps/web/modules/signup-view.tsx
+++ b/apps/web/modules/signup-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { Analytics as DubAnalytics } from "@dub/analytics/react";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -179,6 +181,8 @@ export default function Signup({
   redirectUrl,
   emailVerificationEnabled,
 }: SignupProps) {
+const { t } = useTranslation();
+
   const isOrgInviteByLink = orgSlug && !prepopulateFormValues?.username;
   const [isSamlSignup, setIsSamlSignup] = useState(false);
   const [premiumUsername, setPremiumUsername] = useState(false);
@@ -523,7 +527,7 @@ export default function Signup({
                         <img
                           className={classNames("text-subtle  mr-2 h-4 w-4", premiumUsername && "opacity-50")}
                           src="/google-icon-colored.svg"
-                          alt="Continue with Google Icon"
+                          alt={t('continue-with-google-icon')}
                         />
                       }
                       className={classNames("w-full justify-center rounded-md text-center")}
@@ -612,16 +616,12 @@ export default function Signup({
                         className="text-emphasis hover:underline"
                         key="terms"
                         href={`${WEBSITE_TERMS_URL}`}
-                        target="_blank">
-                        Terms
-                      </Link>,
+                        target="_blank">{t('terms')}</Link>,
                       <Link
                         className="text-emphasis hover:underline"
                         key="privacy"
                         href={`${WEBSITE_PRIVACY_POLICY_URL}`}
-                        target="_blank">
-                        Privacy Policy.
-                      </Link>,
+                        target="_blank">{t('privacy-policy')}</Link>,
                     ]}
                   />
                 </div>
@@ -636,21 +636,21 @@ export default function Signup({
                     <img
                       src="/product-cards/product-of-the-day.svg"
                       className="h-[34px] w-full dark:invert"
-                      alt="Cal.com was Product of the Day at ProductHunt"
+                      alt={t('cal-com-product-of-the-day-at-producthunt')}
                     />
                   </div>
                   <div>
                     <img
                       src="/product-cards/product-of-the-week.svg"
                       className="h-[34px] w-full dark:invert"
-                      alt="Cal.com was Product of the Week at ProductHunt"
+                      alt={t('cal-com-product-of-the-week-at-producthunt')}
                     />
                   </div>
                   <div>
                     <img
                       src="/product-cards/product-of-the-month.svg"
                       className="h-[34px] w-full dark:invert"
-                      alt="Cal.com was Product of the Month at ProductHunt"
+                      alt={t('cal-com-product-of-the-month-at-producthunt')}
                     />
                   </div>
                 </div>
@@ -659,32 +659,32 @@ export default function Signup({
                     <img
                       src="/product-cards/producthunt.svg"
                       className="h-[54px] w-full"
-                      alt="ProductHunt Rating of 5 Stars"
+                      alt={t('producthunt-rating-of-5-stars')}
                     />
                   </div>
                   <div>
                     <img
                       src="/product-cards/google-reviews.svg"
                       className="h-[54px] w-full"
-                      alt="Google Reviews Rating of 4.7 Stars"
+                      alt={t('google-reviews-rating-of-4-7-stars')}
                     />
                   </div>
                   <div>
                     <img
                       src="/product-cards/g2.svg"
                       className="h-[54px] w-full"
-                      alt="G2 Rating of 4.7 Stars"
+                      alt={t('g2-rating-of-4-7-stars')}
                     />
                   </div>
                 </div>
               </>
             )}
             <div className="border-default hidden rounded-bl-2xl rounded-br-none rounded-tl-2xl border border-r-0 border-dashed bg-black/[3%] dark:bg-white/5 lg:block lg:py-[6px] lg:pl-[6px]">
-              <img className="block dark:hidden" src="/mock-event-type-list.svg" alt="Cal.com Booking Page" />
+              <img className="block dark:hidden" src="/mock-event-type-list.svg" alt={t('cal-com-booking-page-1')} />
               <img
                 className="hidden dark:block"
                 src="/mock-event-type-list-dark.svg"
-                alt="Cal.com Booking Page"
+                alt={t('cal-com-booking-page-2')}
               />
             </div>
             <div className="mr-12 mt-8 hidden h-full w-full grid-cols-3 gap-4 overflow-hidden lg:grid">
diff --git a/apps/web/modules/upgrade/locales/en.json b/apps/web/modules/upgrade/locales/en.json
new file mode 100644
index 00000000000000..beacb520159887
--- /dev/null
+++ b/apps/web/modules/upgrade/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "improve-your-scheduling-experience": "\"Improve your scheduling experience by upgrading to the new plan and enjoy the new features.\"",
+  "latest-plan-no-upgrade-needed": "\"You are already on the latest plan. Nothing to upgrade. Enjoy the new features and reach out to us with any questions!\""
+}
diff --git a/apps/web/modules/upgrade/upgrade-view.tsx b/apps/web/modules/upgrade/upgrade-view.tsx
index cb3e8ff86689da..c1551f8057c081 100644
--- a/apps/web/modules/upgrade/upgrade-view.tsx
+++ b/apps/web/modules/upgrade/upgrade-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useRouter } from "next/navigation";
 
@@ -14,6 +16,8 @@ export type OrgUpgradeBannerProps = {
 };
 
 export default function UpgradePage() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
 
   const router = useRouter();
@@ -34,7 +38,7 @@ export default function UpgradePage() {
         {doesUserHaveOrgToUpgrade.data ? (
           <EmptyScreen
             headline="Your upgrade is here"
-            description="Improve your scheduling experience by upgrading to the new plan and enjoy the new features."
+            description={t('improve-your-scheduling-experience')}
             Icon="circle-arrow-up"
             buttonRaw={
               <Button
@@ -48,7 +52,7 @@ export default function UpgradePage() {
         ) : (
           <EmptyScreen
             headline="You are all set"
-            description="You are already on the latest plan. Nothing to upgrade. Enjoy the new features and reach out to us with any questions!"
+            description={t('latest-plan-no-upgrade-needed')}
             Icon="circle-check"
             buttonRaw={<Button href="mailto:support@cal.com">{t("contact_support")}</Button>}
           />
diff --git a/apps/web/modules/videos/views/locales/en.json b/apps/web/modules/videos/views/locales/en.json
new file mode 100644
index 00000000000000..80e35253fd492e
--- /dev/null
+++ b/apps/web/modules/videos/views/locales/en.json
@@ -0,0 +1,5 @@
+{
+  "my-org-logo": "\"My Org Logo\"",
+  "logo": "\"Logo\"",
+  "this-meeting-is-in-the-past": "This meeting is in the past."
+}
diff --git a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
index 85d8e2275037c5..9bc589d2b3639e 100644
--- a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -10,6 +12,8 @@ import type { getServerSideProps } from "@lib/video/meeting-ended/[uid]/getServe
 
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 export default function MeetingUnavailable(props: PageProps) {
+const { t } = useTranslation();
+
   const { t } = useLocale();
 
   return (
@@ -32,9 +36,7 @@ export default function MeetingUnavailable(props: PageProps) {
                     <Icon name="x" className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
-                    <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">
-                      This meeting is in the past.
-                    </h3>
+                    <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">{t('this-meeting-is-in-the-past')}</h3>
                   </div>
                   <div className="mt-4 border-b border-t py-4">
                     <h2 className="font-cal text-default mb-2 text-center text-lg font-medium">
diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index 77ab60d6930d63..edb20e40e96456 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import type { DailyCall } from "@daily-co/daily-js";
 import DailyIframe from "@daily-co/daily-js";
@@ -22,6 +24,8 @@ import { CalAiTranscribe } from "~/videos/ai/ai-transcribe";
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 
 export default function JoinCall(props: PageProps) {
+const { t } = useTranslation();
+
   const { meetingUrl, meetingPassword, booking, hasTeamPlan, calVideoLogo } = props;
   const [daily, setDaily] = useState<DailyCall | null>(null);
 
@@ -94,7 +98,7 @@ export default function JoinCall(props: PageProps) {
           <img
             className="min-w-16 min-h-16 fixed z-10 hidden aspect-square h-16 w-16 rounded-full sm:inline-block"
             src={calVideoLogo}
-            alt="My Org Logo"
+            alt={t('my-org-logo')}
             style={{
               top: 32,
               left: 32,
@@ -104,7 +108,7 @@ export default function JoinCall(props: PageProps) {
           <img
             className="fixed z-10 hidden h-5 sm:inline-block"
             src={`${WEBSITE_URL}/cal-logo-word-dark.svg`}
-            alt="Logo"
+            alt={t('logo')}
             style={{
               top: 47,
               left: 20,
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index a90e17681f85a6..0bd6d46ca41f73 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
@@ -26,6 +28,8 @@ enum pageType {
 }
 
 export default function Custom404() {
+const { t } = useTranslation();
+
   const pathname = usePathname();
   const { t } = useLocale();
   const [username, setUsername] = useState<string>("");
@@ -96,7 +100,7 @@ export default function Custom404() {
     return (
       <>
         <HeadSeo
-          title="Feature is currently disabled"
+          title={t('feature-is-currently-disabled')}
           description={t("404_page_not_found")}
           nextSeoProps={{
             nofollow: true,
@@ -107,9 +111,7 @@ export default function Custom404() {
           <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
             <div className="text-center">
               <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
-              <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
-                Feature is currently disabled
-              </h1>
+              <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">{t('feature-is-currently-disabled-2')}</h1>
             </div>
             <div className="mt-12">
               <div className="mt-8">
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index 2bb6a206094f42..3314bd246028d6 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import Head from "next/head";
 
 import { APP_NAME } from "@calcom/lib/constants";
@@ -8,18 +9,20 @@ import { Button, showToast } from "@calcom/ui";
 import PageWrapper from "@components/PageWrapper";
 
 export default function Error500() {
+const { t } = useTranslation();
+
   const searchParams = useCompatSearchParams();
   const { t } = useLocale();
 
   return (
     <div className="bg-subtle flex h-screen">
       <Head>
-        <title>Something unexpected occurred | {APP_NAME}</title>
+        <title>{t('something-unexpected-occurred-app-name', { APP_NAME })}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
         <h1 className="font-cal text-emphasis text-6xl">500</h1>
-        <h2 className="text-emphasis mt-6 text-2xl font-medium">It&apos;s not you, it&apos;s us.</h2>
+        <h2 className="text-emphasis mt-6 text-2xl font-medium">{t('its-not-you-its-us')}</h2>
         <p className="text-default mb-6 mt-4 max-w-2xl text-sm">{t("something_went_wrong_on_our_end")}</p>
         {searchParams?.get("error") && (
           <div className="mb-8 flex flex-col">
diff --git a/apps/web/pages/icons.tsx b/apps/web/pages/icons.tsx
index d15a292bcaee1d..87b97c6979480f 100644
--- a/apps/web/pages/icons.tsx
+++ b/apps/web/pages/icons.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import type { InferGetStaticPropsType } from "next";
 import { Inter } from "next/font/google";
@@ -50,10 +52,12 @@ const IconGrid = (props: {
 );
 
 export default function IconsPage(props: InferGetStaticPropsType<typeof getStaticProps>) {
+const { t } = useTranslation();
+
   return (
     <div className="bg-subtle flex h-screen">
       <Head>
-        <title>Icon showcase | {APP_NAME}</title>
+        <title>{t('icon-showcase-app-name', { APP_NAME })}</title>
       </Head>
       <style jsx global>{`
         :root {
@@ -63,10 +67,10 @@ export default function IconsPage(props: InferGetStaticPropsType<typeof getStati
       `}</style>
       <IconSprites />
       <div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
-        <h1 className="text-emphasis font-cal text-2xl font-medium">Icons showcase</h1>
-        <IconGrid title="Regular Icons" icons={props.icons} />
+        <h1 className="text-emphasis font-cal text-2xl font-medium">{t('icons-showcase')}</h1>
+        <IconGrid title={t('regular-icons')} icons={props.icons} />
         <IconGrid
-          title="Filled Icons"
+          title={t('filled-icons')}
           icons={props.icons}
           rootClassName="bg-darkgray-100 text-gray-50"
           iconClassName="fill-blue-500"
diff --git a/apps/web/pages/locales/en.json b/apps/web/pages/locales/en.json
new file mode 100644
index 00000000000000..67838444e57253
--- /dev/null
+++ b/apps/web/pages/locales/en.json
@@ -0,0 +1,10 @@
+{
+  "something-unexpected-occurred-app-name": "Something unexpected occurred |{{APP_NAME}}",
+  "its-not-you-its-us": "It's not you, it's us.",
+  "feature-is-currently-disabled": "\"Feature is currently disabled\"",
+  "feature-is-currently-disabled-2": "Feature is currently disabled",
+  "icon-showcase-app-name": "Icon showcase |{{APP_NAME}}",
+  "icons-showcase": "Icons showcase",
+  "regular-icons": "\"Regular Icons\"",
+  "filled-icons": "\"Filled Icons\""
+}
diff --git a/example-apps/credential-sync/pages/index.tsx b/example-apps/credential-sync/pages/index.tsx
index 824b1af04d7cd9..53e44d40117dd9 100644
--- a/example-apps/credential-sync/pages/index.tsx
+++ b/example-apps/credential-sync/pages/index.tsx
@@ -1,7 +1,10 @@
+import { useTranslation, Trans } from "react-i18next";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
 export default function Index() {
+const { t } = useTranslation();
+
   const [data, setData] = useState("");
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -44,13 +47,16 @@ export default function Index() {
 
   return (
     <div>
-      <h1>Welcome to Credential Sync Playground</h1>
-      <p>
-        You are managing credentials for cal.com <strong>userId={userId}</strong> for{" "}
-        <strong>appSlug={appSlug}</strong>. Update query params to manage a different user or app{" "}
+      <h1>{t('welcome-to-credential-sync-playground')}</h1>
+      <p><Trans
+i18nKey="managing-credentials-for-cal-user-id-app-slug"
+values={{ userId, appSlug }}
+components={{"0": <strong />, "1": 
+        <strong />}}
+/>
       </p>
-      <button onClick={() => updateToken({ invalid: true })}>Give an invalid token to Cal.com</button>
-      <button onClick={() => updateToken()}>Give a valid token to Cal.com</button>
+      <button onClick={() => updateToken({ invalid: true })}>{t('give-invalid-token-to-cal-com')}</button>
+      <button onClick={() => updateToken()}>{t('give-valid-token-to-cal-com')}</button>
       <div>{data}</div>
     </div>
   );
diff --git a/example-apps/credential-sync/pages/locales/en.json b/example-apps/credential-sync/pages/locales/en.json
new file mode 100644
index 00000000000000..60aac9e76e54d3
--- /dev/null
+++ b/example-apps/credential-sync/pages/locales/en.json
@@ -0,0 +1,6 @@
+{
+  "welcome-to-credential-sync-playground": "Welcome to Credential Sync Playground",
+  "managing-credentials-for-cal-user-id-app-slug": "You are managing credentials for cal.com<0>userId={{userId}}</0>for <1>appSlug={{appSlug}}</1>. Update query params to manage a different user or app",
+  "give-invalid-token-to-cal-com": "Give an invalid token to Cal.com",
+  "give-valid-token-to-cal-com": "Give a valid token to Cal.com"
+}
diff --git a/packages/app-store-cli/src/components/AppCreateUpdateForm.tsx b/packages/app-store-cli/src/components/AppCreateUpdateForm.tsx
index 2085736a3dd33a..8b96cbf0f94e86 100644
--- a/packages/app-store-cli/src/components/AppCreateUpdateForm.tsx
+++ b/packages/app-store-cli/src/components/AppCreateUpdateForm.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import fs from "fs";
 import { Box, Newline, Text, useApp } from "ink";
 import SelectInput from "ink-select-input";
@@ -21,6 +22,8 @@ export const AppForm = ({
   slug?: string;
   action: "create" | "edit" | "create-template" | "edit-template";
 }) => {
+const { t } = useTranslation();
+
   cliTemplate = Templates.find((t) => t.value === cliTemplate)?.value || "";
   const { exit } = useApp();
   const isTemplate = action === "create-template" || action === "edit-template";
@@ -162,7 +165,7 @@ export const AppForm = ({
 
   if (action === "edit" || action === "edit-template") {
     if (!slug) {
-      return <Text>--slug is required</Text>;
+      return <Text>{t('slug-is-required')}</Text>;
     }
     if (!app) {
       return (
@@ -202,58 +205,48 @@ export const AppForm = ({
         )}
         {status === "done" && (
           <Box flexDirection="column" paddingTop={2} paddingBottom={2}>
-            <Text bold>
-              Just wait for a few seconds for process to exit and then you are good to go. Your{" "}
-              {isTemplate ? "Template" : "App"} code exists at {getAppDirPath(slug, isTemplate)}
+            <Text bold>{t('just-wait-for-a-few-seconds-for-process-to-exit-and-then-you-are-good-to-go-your')}
+              {isTemplate ? "Template" : "App"}{t('code-exists-at')}{getAppDirPath(slug, isTemplate)}
             </Text>
-            <Text>
-              Tip : Go and change the logo of your {isTemplate ? "template" : "app"} by replacing{" "}
+            <Text>{t('tip-go-and-change-the-logo-of-your')}{isTemplate ? "template" : "app"}{t('by-replacing')}
               {`${getAppDirPath(slug, isTemplate)}/static/icon.svg`}
             </Text>
             <Newline />
-            <Text bold underline color="blue">
-              App Summary:
-            </Text>
+            <Text bold underline color="blue">{t('app-summary')}</Text>
             <Box flexDirection="column">
               <Box flexDirection="row">
-                <Text color="green">Slug: </Text>
+                <Text color="green">{t('slug')}</Text>
                 <Text>{slug}</Text>
               </Box>
               <Box flexDirection="row">
-                <Text color="green">{isTemplate ? "Template" : "App"} URL: </Text>
+                <Text color="green">{isTemplate ? "Template" : "App"}{t('url')}</Text>
                 <Text>{`http://localhost:3000/apps/${slug}`}</Text>
               </Box>
               <Box flexDirection="row">
-                <Text color="green">Name: </Text>
+                <Text color="green">{t('name')}</Text>
                 <Text>{name}</Text>
               </Box>
               <Box flexDirection="row">
-                <Text color="green">Description: </Text>
+                <Text color="green">{t('description')}</Text>
                 <Text>{description}</Text>
               </Box>
               <Box flexDirection="row">
-                <Text color="green">Category: </Text>
+                <Text color="green">{t('category')}</Text>
                 <Text>{category}</Text>
               </Box>
               <Box flexDirection="row">
-                <Text color="green">Publisher Name: </Text>
+                <Text color="green">{t('publisher-name')}</Text>
                 <Text>{publisher}</Text>
               </Box>
               <Box flexDirection="row">
-                <Text color="green">Publisher Email: </Text>
+                <Text color="green">{t('publisher-email')}</Text>
                 <Text>{email}</Text>
               </Box>
-              <Text bold>
-                Next Step: Enable the app from http://localhost:3000/settings/admin/apps as admin user (Email:
-                admin@example.com, Pass: ADMINadmin2022!)
-              </Text>
+              <Text bold>{t('next-step-enable-the-app-from-http-localhost-3000-settings-admin-apps-as-admin-user-email-admin-example-com-pass-adminadmin2022')}</Text>
             </Box>
           </Box>
         )}
-        <Text italic color="gray">
-          Note: You should not rename app directory manually. Use cli only to do that as it needs to be
-          updated in DB as well
-        </Text>
+        <Text italic color="gray">{t('note-you-should-not-rename-app-directory-manually-use-cli-only-to-do-that-as-it-needs-to-be-updated-in-db-as-well')}</Text>
       </Box>
     );
   }
diff --git a/packages/app-store-cli/src/components/DeleteForm.tsx b/packages/app-store-cli/src/components/DeleteForm.tsx
index 54012cc159d235..4e39093c3d74d5 100644
--- a/packages/app-store-cli/src/components/DeleteForm.tsx
+++ b/packages/app-store-cli/src/components/DeleteForm.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Text } from "ink";
 import TextInput from "ink-text-input";
 import React, { useEffect, useState } from "react";
@@ -8,6 +9,8 @@ import { BaseAppFork, generateAppFiles } from "../core";
 import { getApp } from "../utils/getApp";
 
 export default function DeleteForm({ slug, action }: { slug: string; action: "delete" | "delete-template" }) {
+const { t } = useTranslation();
+
   const [confirmedAppSlug, setConfirmedAppSlug] = useState("");
   const [state, setState] = useState<
     | "INITIALIZED"
@@ -38,12 +41,8 @@ export default function DeleteForm({ slug, action }: { slug: string; action: "de
   if (state === "INITIALIZED") {
     return (
       <>
-        <ImportantText>
-          Type below the slug of the {isTemplate ? "Template" : "App"} that you want to delete.
-        </ImportantText>
-        <Text color="gray" italic>
-          It would cleanup the app directory and App table and Credential table.
-        </Text>
+        <ImportantText>{t('type-below-the-slug-of-the')}{isTemplate ? "Template" : "App"}{t('that-you-want-to-delete')}</ImportantText>
+        <Text color="gray" italic>{t('it-would-cleanup-the-app-directory-and-app-table-and-credential-table')}</Text>
         <TextInput
           value={confirmedAppSlug}
           onSubmit={(value) => {
diff --git a/packages/app-store-cli/src/components/locales/en.json b/packages/app-store-cli/src/components/locales/en.json
new file mode 100644
index 00000000000000..4b41531a60e540
--- /dev/null
+++ b/packages/app-store-cli/src/components/locales/en.json
@@ -0,0 +1,20 @@
+{
+  "type-below-the-slug-of-the": "Type below the slug of the",
+  "that-you-want-to-delete": "that you want to delete.",
+  "it-would-cleanup-the-app-directory-and-app-table-and-credential-table": "It would cleanup the app directory and App table and Credential table.",
+  "slug-is-required": "--slug is required",
+  "just-wait-for-a-few-seconds-for-process-to-exit-and-then-you-are-good-to-go-your": "Just wait for a few seconds for process to exit and then you are good to go. Your",
+  "code-exists-at": "code exists at",
+  "tip-go-and-change-the-logo-of-your": "Tip : Go and change the logo of your",
+  "by-replacing": "by replacing",
+  "app-summary": "App Summary:",
+  "slug": "Slug:",
+  "url": "URL:",
+  "name": "Name:",
+  "description": "Description:",
+  "category": "Category:",
+  "publisher-name": "Publisher Name:",
+  "publisher-email": "Publisher Email:",
+  "next-step-enable-the-app-from-http-localhost-3000-settings-admin-apps-as-admin-user-email-admin-example-com-pass-adminadmin2022": "Next Step: Enable the app from http://localhost:3000/settings/admin/apps as admin user (Email: admin@example.com, Pass: ADMINadmin2022!)",
+  "note-you-should-not-rename-app-directory-manually-use-cli-only-to-do-that-as-it-needs-to-be-updated-in-db-as-well": "Note: You should not rename app directory manually. Use cli only to do that as it needs to be updated in DB as well"
+}
diff --git a/packages/emails/src/components/BookingConfirmationForm.tsx b/packages/emails/src/components/BookingConfirmationForm.tsx
index 13f3a9f016e623..529e79bddfa508 100644
--- a/packages/emails/src/components/BookingConfirmationForm.tsx
+++ b/packages/emails/src/components/BookingConfirmationForm.tsx
@@ -1,4 +1,7 @@
+import { useTranslation, Trans } from "react-i18next";
 export const BookingConfirmationForm = (props: { action: string; children: React.ReactNode }) => {
+const { t } = useTranslation();
+
   return (
     <form action={props.action} method="POST" target="_blank">
       {props.children}
@@ -34,13 +37,15 @@ export const BookingConfirmationForm = (props: { action: string; children: React
             textAlign: "left",
             whiteSpace: "pre-wrap",
             display: "block",
-          }}>
-          Reason for rejection &nbsp;
-          <small>(Optional)</small>
+          }}><Trans
+i18nKey="reason-for-rejection-optional"
+components={{"0": 
+          <small />}}
+/>
         </label>
         <textarea
           name="reason"
-          placeholder="Why are you rejecting?"
+          placeholder={t('why-are-you-rejecting')}
           style={{
             appearance: "none",
             backgroundColor: "rgb(255, 255, 255)",
diff --git a/packages/emails/src/components/CallToActionIcon.tsx b/packages/emails/src/components/CallToActionIcon.tsx
index 872149ac9bd4d8..d9a8cd1adddb4d 100644
--- a/packages/emails/src/components/CallToActionIcon.tsx
+++ b/packages/emails/src/components/CallToActionIcon.tsx
@@ -1,8 +1,12 @@
+import { useTranslation } from "react-i18next";
 import React from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 
-export const CallToActionIcon = ({ iconName, style }: { iconName: string; style?: React.CSSProperties }) => (
+export const CallToActionIcon = ({ iconName, style }: { iconName: string; style?: React.CSSProperties }) =>  {
+const { t } = useTranslation();
+
+return (
   <img
     src={`${WEBAPP_URL}/emails/${iconName}.png`}
     srcSet={`${WEBAPP_URL}/emails/${iconName}.svg`}
@@ -13,6 +17,7 @@ export const CallToActionIcon = ({ iconName, style }: { iconName: string; style?
       marginLeft: "0.5rem",
       ...style,
     }}
-    alt=""
+    alt={t('empty-string-fragment')}
   />
-);
+)
+};
diff --git a/packages/emails/src/components/EmailBodyLogo.tsx b/packages/emails/src/components/EmailBodyLogo.tsx
index 2292b6294855cb..b442b38bfab60a 100644
--- a/packages/emails/src/components/EmailBodyLogo.tsx
+++ b/packages/emails/src/components/EmailBodyLogo.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 
 import RawHtml from "./RawHtml";
@@ -6,6 +7,8 @@ import Row from "./Row";
 const CommentIE = ({ html = "" }) => <RawHtml html={`<!--[if mso | IE]>${html}<![endif]-->`} />;
 
 const EmailBodyLogo = () => {
+const { t } = useTranslation();
+
   const image = `${WEBAPP_URL}/emails/logo.png`;
 
   return (
@@ -60,7 +63,7 @@ const EmailBodyLogo = () => {
                             fontSize: "13px",
                           }}
                           width="89"
-                          alt=""
+                          alt={t('empty-string')}
                         />
                       </a>
                     </td>
diff --git a/packages/emails/src/components/EmailSchedulingBodyHeader.tsx b/packages/emails/src/components/EmailSchedulingBodyHeader.tsx
index 863dcc9289325f..f2aad2f91789e3 100644
--- a/packages/emails/src/components/EmailSchedulingBodyHeader.tsx
+++ b/packages/emails/src/components/EmailSchedulingBodyHeader.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { CSSProperties } from "react";
 
 import { BASE_URL, IS_PRODUCTION } from "@calcom/lib/constants";
@@ -29,6 +30,8 @@ export const getHeadImage = (headerType: BodyHeadType): string => {
 };
 
 const EmailSchedulingBodyHeader = (props: { headerType: BodyHeadType; headStyles?: CSSProperties }) => {
+const { t } = useTranslation();
+
   const image = getHeadImage(props.headerType);
 
   return (
@@ -57,7 +60,7 @@ const EmailSchedulingBodyHeader = (props: { headerType: BodyHeadType; headStyles
                   fontSize: "13px",
                 }}
                 width="64"
-                alt=""
+                alt={t('empty-string')}
               />
             </td>
           </Row>
diff --git a/packages/emails/src/components/locales/en.json b/packages/emails/src/components/locales/en.json
new file mode 100644
index 00000000000000..127c57c83b1ae3
--- /dev/null
+++ b/packages/emails/src/components/locales/en.json
@@ -0,0 +1,6 @@
+{
+  "empty-string": "\"\"",
+  "empty-string-fragment": "\"\"",
+  "reason-for-rejection-optional": "Reason for rejection <0>(Optional)</0>",
+  "why-are-you-rejecting": "\"Why are you rejecting?\""
+}
diff --git a/packages/emails/src/templates/AdminOrganizationNotificationEmail.tsx b/packages/emails/src/templates/AdminOrganizationNotificationEmail.tsx
index b6e9198e56f08e..b4d0a8674ba088 100644
--- a/packages/emails/src/templates/AdminOrganizationNotificationEmail.tsx
+++ b/packages/emails/src/templates/AdminOrganizationNotificationEmail.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { Trans, type TFunction } from "next-i18next";
 
@@ -69,6 +71,8 @@ export const AdminOrganizationNotificationEmail = ({
   webappIPAddress,
   language,
 }: AdminOrganizationNotification) => {
+const { t } = useTranslation();
+
   const webAppUrl = WEBAPP_URL.replace("https://", "")?.replace("http://", "").replace(/(:.*)/, "");
   return (
     <BaseEmailHtml
@@ -92,20 +96,10 @@ export const AdminOrganizationNotificationEmail = ({
         <>{language("hi_admin")}!</>
       </p>
       <p style={{ fontWeight: 400, lineHeight: "24px" }}>
-        <Trans i18nKey="admin_org_notification_email_body_part1" t={language} values={{ orgSlug }}>
-          An organization with slug {`"${orgSlug}"`} was created.
-          <br />
-          <br />
-          Please be sure to configure your DNS registry to point the subdomain corresponding to the new
-          organization to where the main app is running. Otherwise the organization will not work.
-          <br />
-          <br />
-          Here are just the very basic options to configure a subdomain to point to their app so it loads the
-          organization profile page.
-          <br />
-          <br />
-          You can do it either with the A Record:
-        </Trans>
+        <Trans i18nKey="admin_org_notification_email_body_part1" t={language} values={{ orgSlug }}>{t('an-organization-with-slug')}{`"${orgSlug}"`}{t('was-created')}<br />
+          <br />{t('please-configure-dns-registry')}<br />
+          <br />{t('basic-options-to-configure-subdomain')}<br />
+          <br />{t('a-record-configuration')}</Trans>
       </p>
       {dnsTable("A", orgSlug, webappIPAddress, language)}
       <p style={{ fontWeight: 400, lineHeight: "24px" }}>
diff --git a/packages/emails/src/templates/AttendeeAddGuestsEmail.tsx b/packages/emails/src/templates/AttendeeAddGuestsEmail.tsx
index cbc736869b9034..445462d75738fa 100644
--- a/packages/emails/src/templates/AttendeeAddGuestsEmail.tsx
+++ b/packages/emails/src/templates/AttendeeAddGuestsEmail.tsx
@@ -1,10 +1,15 @@
+import { useTranslation } from "react-i18next";
 import { AttendeeScheduledEmail } from "./AttendeeScheduledEmail";
 
-export const AttendeeAddGuestsEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) => (
+export const AttendeeAddGuestsEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <AttendeeScheduledEmail
-    title="new_guests_added"
+    title={t('new-guests-added')}
     headerType="calendarCircle"
     subject="guests_added_event_type_subject"
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/AttendeeAwaitingPaymentEmail.tsx b/packages/emails/src/templates/AttendeeAwaitingPaymentEmail.tsx
index b9d506ef8c2e70..3d079787f0693e 100644
--- a/packages/emails/src/templates/AttendeeAwaitingPaymentEmail.tsx
+++ b/packages/emails/src/templates/AttendeeAwaitingPaymentEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { CallToAction, CallToActionTable } from "../components";
 import { AttendeeScheduledEmail } from "./AttendeeScheduledEmail";
 
@@ -14,9 +15,11 @@ function ManageLink(props: React.ComponentProps<typeof AttendeeScheduledEmail>)
 }
 
 export const AttendeeAwaitingPaymentEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) => {
+const { t } = useTranslation();
+
   return props.calEvent.paymentInfo?.paymentOption === "HOLD" ? (
     <AttendeeScheduledEmail
-      title="meeting_awaiting_payment_method"
+      title={t('meeting-awaiting-payment-method')}
       headerType="calendarCircle"
       subject="awaiting_payment_subject"
       callToAction={<ManageLink {...props} />}
@@ -24,7 +27,7 @@ export const AttendeeAwaitingPaymentEmail = (props: React.ComponentProps<typeof
     />
   ) : (
     <AttendeeScheduledEmail
-      title="meeting_awaiting_payment"
+      title={t('meeting-awaiting-payment')}
       headerType="calendarCircle"
       subject="awaiting_payment_subject"
       callToAction={<ManageLink {...props} />}
diff --git a/packages/emails/src/templates/AttendeeCancelledEmail.tsx b/packages/emails/src/templates/AttendeeCancelledEmail.tsx
index 9e856d27f7f38c..e8905b31bb41ef 100644
--- a/packages/emails/src/templates/AttendeeCancelledEmail.tsx
+++ b/packages/emails/src/templates/AttendeeCancelledEmail.tsx
@@ -1,11 +1,16 @@
+import { useTranslation } from "react-i18next";
 import { AttendeeScheduledEmail } from "./AttendeeScheduledEmail";
 
-export const AttendeeCancelledEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) => (
+export const AttendeeCancelledEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <AttendeeScheduledEmail
-    title="event_request_cancelled"
+    title={t('event-request-cancelled')}
     headerType="xCircle"
     subject="event_cancelled_subject"
     callToAction={null}
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/AttendeeCancelledSeatEmail.tsx b/packages/emails/src/templates/AttendeeCancelledSeatEmail.tsx
index fefcdfa2e0f0af..0da2110abc1529 100644
--- a/packages/emails/src/templates/AttendeeCancelledSeatEmail.tsx
+++ b/packages/emails/src/templates/AttendeeCancelledSeatEmail.tsx
@@ -1,12 +1,17 @@
+import { useTranslation } from "react-i18next";
 import { AttendeeScheduledEmail } from "./AttendeeScheduledEmail";
 
-export const AttendeeCancelledSeatEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) => (
+export const AttendeeCancelledSeatEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <AttendeeScheduledEmail
-    title="no_longer_attending"
+    title={t('no-longer-attending')}
     headerType="xCircle"
     subject="event_no_longer_attending_subject"
     subtitle=""
     callToAction={null}
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/AttendeeLocationChangeEmail.tsx b/packages/emails/src/templates/AttendeeLocationChangeEmail.tsx
index deba59c112f5ec..430888b3afa972 100644
--- a/packages/emails/src/templates/AttendeeLocationChangeEmail.tsx
+++ b/packages/emails/src/templates/AttendeeLocationChangeEmail.tsx
@@ -1,10 +1,15 @@
+import { useTranslation } from "react-i18next";
 import { AttendeeScheduledEmail } from "./AttendeeScheduledEmail";
 
-export const AttendeeLocationChangeEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) => (
+export const AttendeeLocationChangeEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <AttendeeScheduledEmail
-    title="event_location_changed"
+    title={t('event-location-changed')}
     headerType="calendarCircle"
     subject="location_changed_event_type_subject"
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/AttendeeRescheduledEmail.tsx b/packages/emails/src/templates/AttendeeRescheduledEmail.tsx
index 9e0ab07943939e..43c762d38ec16f 100644
--- a/packages/emails/src/templates/AttendeeRescheduledEmail.tsx
+++ b/packages/emails/src/templates/AttendeeRescheduledEmail.tsx
@@ -1,10 +1,15 @@
+import { useTranslation } from "react-i18next";
 import { AttendeeScheduledEmail } from "./AttendeeScheduledEmail";
 
-export const AttendeeRescheduledEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) => (
+export const AttendeeRescheduledEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <AttendeeScheduledEmail
-    title="event_has_been_rescheduled"
+    title={t('event-has-been-rescheduled')}
     headerType="calendarCircle"
     subject="event_type_has_been_rescheduled_on_time_date"
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/AttendeeUpdatedEmail.tsx b/packages/emails/src/templates/AttendeeUpdatedEmail.tsx
index f9721c534135c6..ca531f0f29d4a5 100644
--- a/packages/emails/src/templates/AttendeeUpdatedEmail.tsx
+++ b/packages/emails/src/templates/AttendeeUpdatedEmail.tsx
@@ -1,10 +1,15 @@
+import { useTranslation } from "react-i18next";
 import { AttendeeScheduledEmail } from "./AttendeeScheduledEmail";
 
-export const AttendeeUpdatedEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) => (
+export const AttendeeUpdatedEmail = (props: React.ComponentProps<typeof AttendeeScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <AttendeeScheduledEmail
-    title="event_has_been_updated"
+    title={t('event-has-been-updated')}
     headerType="calendarCircle"
     subject="event_type_has_been_updated"
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx b/packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx
index b353f5b6a28efc..a4a7864323175d 100644
--- a/packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx
+++ b/packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx
@@ -1,14 +1,17 @@
+import { useTranslation } from "react-i18next";
 import { CallToAction, CallToActionTable } from "../components";
 import { OrganizerScheduledEmail } from "./OrganizerScheduledEmail";
 
 export const AttendeeWasRequestedToRescheduleEmail = (
   props: { metadata: { rescheduleLink: string } } & React.ComponentProps<typeof OrganizerScheduledEmail>
 ) => {
+const { t } = useTranslation();
+
   const t = props.attendee.language.translate;
   return (
     <OrganizerScheduledEmail
       t={t}
-      title="request_reschedule_booking"
+      title={t('request-reschedule-booking')}
       subtitle={
         <>
           {t("request_reschedule_subtitle", {
@@ -20,7 +23,7 @@ export const AttendeeWasRequestedToRescheduleEmail = (
       subject="rescheduled_event_type_subject"
       callToAction={
         <CallToActionTable>
-          <CallToAction label="Book a new time" href={props.metadata.rescheduleLink} endIconName="linkIcon" />
+          <CallToAction label={t('book-a-new-time')} href={props.metadata.rescheduleLink} endIconName="linkIcon" />
         </CallToActionTable>
       }
       {...props}
diff --git a/packages/emails/src/templates/BrokenIntegrationEmail.tsx b/packages/emails/src/templates/BrokenIntegrationEmail.tsx
index d7ebe70026c383..bfdb47b69c20c0 100644
--- a/packages/emails/src/templates/BrokenIntegrationEmail.tsx
+++ b/packages/emails/src/templates/BrokenIntegrationEmail.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation, Trans } from "react-i18next";
+
 
 import type { TFunction } from "next-i18next";
 import { Trans } from "react-i18next";
@@ -16,18 +18,19 @@ export function getEnumKeyByEnumValue(myEnum: any, enumValue: number | string):
 }
 
 const BrokenVideoIntegration = (props: { location: string; eventTypeId?: number | null; t: TFunction }) => {
+const { t } = useTranslation();
+
   return (
-    <Trans i18nKey="broken_video_action" t={props.t}>
-      We could not add the <span>{props.location}</span> meeting link to your scheduled event. Contact your
-      invitees or update your calendar event to add the details. You can either&nbsp;
+    <Trans i18nKey="broken_video_action" t={props.t}><Trans
+i18nKey="could-not-add-meeting-link"
+values={{ _props_location_: <>{props.location}</> }}
+components={{"0": <span />, "1": 
       <a
         href={
           props.eventTypeId ? `${WEBAPP_URL}/event-types/${props.eventTypeId}` : `${WEBAPP_URL}/event-types`
-        }>
-        change your location on the event type
-      </a>
-      &nbsp;or try&nbsp;
-      <a href={`${WEBAPP_URL}/apps/installed`}>removing and adding the app again.</a>
+        } />, "2": 
+      <a href={`${WEBAPP_URL}/apps/installed`} />}}
+/>
     </Trans>
   );
 };
@@ -37,14 +40,17 @@ const BrokenCalendarIntegration = (props: {
   eventTypeId?: number | null;
   t: TFunction;
 }) => {
+const { t } = useTranslation();
+
   const { t } = props;
 
   return (
-    <Trans i18nKey="broken_calendar_action" t={props.t}>
-      We could not update your <span>{props.calendar}</span>.{" "}
-      <a href={`${WEBAPP_URL}/apps/installed`}>
-        Please check your calendar settings or remove and add your calendar again
-      </a>
+    <Trans i18nKey="broken_calendar_action" t={props.t}><Trans
+i18nKey="could-not-update-calendar"
+values={{ _props_calendar_: <>{props.calendar}</> }}
+components={{"0": <span />, "1": 
+      <a href={`${WEBAPP_URL}/apps/installed`} />}}
+/>
     </Trans>
   );
 };
diff --git a/packages/emails/src/templates/DailyVideoDownloadRecordingEmail.tsx b/packages/emails/src/templates/DailyVideoDownloadRecordingEmail.tsx
index 1244e0de082fe3..adf6b764114ecd 100644
--- a/packages/emails/src/templates/DailyVideoDownloadRecordingEmail.tsx
+++ b/packages/emails/src/templates/DailyVideoDownloadRecordingEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation, Trans } from "react-i18next";
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
 
@@ -16,6 +17,8 @@ interface DailyVideoDownloadRecordingEmailProps {
 export const DailyVideoDownloadRecordingEmail = (
   props: DailyVideoDownloadRecordingEmailProps & Partial<React.ComponentProps<typeof V2BaseEmailHtml>>
 ) => {
+const { t } = useTranslation();
+
   const image = `${WEBAPP_URL}/emails/logo.png`;
   return (
     <V2BaseEmailHtml
@@ -38,7 +41,7 @@ export const DailyVideoDownloadRecordingEmail = (
               fontSize: "13px",
             }}
             width="89"
-            alt=""
+            alt={t('empty-string')}
           />
         </a>
       </div>
@@ -89,10 +92,10 @@ export const DailyVideoDownloadRecordingEmail = (
       </div>
 
       <p style={{ fontWeight: 500, lineHeight: "20px", marginTop: "8px" }}>
-        <Trans i18nKey="link_valid_for_12_hrs">
-          Note: The download link is valid only for 12 hours. You can generate new download link by following
-          instructions
-          <a href="https://cal.com/docs/enterprise-features/teams/cal-video-recordings"> here</a>
+        <Trans i18nKey="link_valid_for_12_hrs"><Trans
+i18nKey="note-download-link-valid"
+components={{"0": <a href="https://cal.com/docs/enterprise-features/teams/cal-video-recordings" />}}
+/>
         </Trans>
       </p>
 
diff --git a/packages/emails/src/templates/DailyVideoDownloadTranscriptEmail.tsx b/packages/emails/src/templates/DailyVideoDownloadTranscriptEmail.tsx
index 316e370ed409c7..7cdfe743d19143 100644
--- a/packages/emails/src/templates/DailyVideoDownloadTranscriptEmail.tsx
+++ b/packages/emails/src/templates/DailyVideoDownloadTranscriptEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { TFunction } from "next-i18next";
 
 import { WEBAPP_URL, APP_NAME, COMPANY_NAME } from "@calcom/lib/constants";
@@ -15,6 +16,8 @@ interface DailyVideoDownloadTranscriptEmailProps {
 export const DailyVideoDownloadTranscriptEmail = (
   props: DailyVideoDownloadTranscriptEmailProps & Partial<React.ComponentProps<typeof V2BaseEmailHtml>>
 ) => {
+const { t } = useTranslation();
+
   const image = `${WEBAPP_URL}/emails/logo.png`;
   return (
     <V2BaseEmailHtml
@@ -37,7 +40,7 @@ export const DailyVideoDownloadTranscriptEmail = (
               fontSize: "13px",
             }}
             width="89"
-            alt=""
+            alt={t('empty-string-fragment')}
           />
         </a>
       </div>
@@ -59,6 +62,8 @@ export const DailyVideoDownloadTranscriptEmail = (
       </p>
 
       {props.transcriptDownloadLinks.map((downloadLink, index) => {
+const { t } = useTranslation();
+
         return (
           <div
             key={downloadLink}
@@ -85,7 +90,7 @@ export const DailyVideoDownloadTranscriptEmail = (
                 marginTop: "0px",
                 color: "black",
               }}>
-              {props.date} Transcript {index + 1}
+              {props.date}{t('transcript-fragment')}{index + 1}
             </p>
             <CallToAction label={props.language("download_transcript")} href={downloadLink} />
           </div>
diff --git a/packages/emails/src/templates/FeedbackEmail.tsx b/packages/emails/src/templates/FeedbackEmail.tsx
index a8b8be0dc7ed75..8b1b5ec2347798 100644
--- a/packages/emails/src/templates/FeedbackEmail.tsx
+++ b/packages/emails/src/templates/FeedbackEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { BaseEmailHtml, Info } from "../components";
 
 export interface Feedback {
@@ -8,12 +9,14 @@ export interface Feedback {
 }
 
 export const FeedbackEmail = (props: Feedback & Partial<React.ComponentProps<typeof BaseEmailHtml>>) => {
+const { t } = useTranslation();
+
   return (
     <BaseEmailHtml subject="Feedback" title="Feedback">
-      <Info label="Username" description={props.username} withSpacer />
-      <Info label="Email" description={props.email} withSpacer />
-      <Info label="Rating" description={props.rating} withSpacer />
-      <Info label="Comment" description={props.comment} withSpacer />
+      <Info label={t('username')} description={props.username} withSpacer />
+      <Info label={t('email')} description={props.email} withSpacer />
+      <Info label={t('rating')} description={props.rating} withSpacer />
+      <Info label={t('comment')} description={props.comment} withSpacer />
     </BaseEmailHtml>
   );
 };
diff --git a/packages/emails/src/templates/MonthlyDigestEmail.tsx b/packages/emails/src/templates/MonthlyDigestEmail.tsx
index 86e7c21a2e7447..43edbe3591c546 100644
--- a/packages/emails/src/templates/MonthlyDigestEmail.tsx
+++ b/packages/emails/src/templates/MonthlyDigestEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { TFunction } from "next-i18next";
 
 import { APP_NAME, SENDER_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
@@ -33,6 +34,8 @@ export type MonthlyDigestEmailData = {
 export const MonthlyDigestEmail = (
   props: MonthlyDigestEmailData & Partial<React.ComponentProps<typeof BaseEmailHtml>>
 ) => {
+const { t } = useTranslation();
+
   const EventsDetails = () => {
     return (
       <div
@@ -179,7 +182,7 @@ export const MonthlyDigestEmail = (
         </div>
         <div style={{ marginTop: "30px", marginBottom: "30px" }}>
           <CallToAction
-            label="View all stats"
+            label={t('view-all-stats')}
             href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/insights?teamId=${props.team.id}`}
             endIconName="white-arrow-right"
           />
diff --git a/packages/emails/src/templates/OrgAutoInviteEmail.tsx b/packages/emails/src/templates/OrgAutoInviteEmail.tsx
index 7bed1634733b53..b5cc7aaf27aa2f 100644
--- a/packages/emails/src/templates/OrgAutoInviteEmail.tsx
+++ b/packages/emails/src/templates/OrgAutoInviteEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { TFunction } from "next-i18next";
 
 import { APP_NAME, WEBAPP_URL, IS_PRODUCTION } from "@calcom/lib/constants";
@@ -15,6 +16,8 @@ type TeamInvite = {
 export const OrgAutoInviteEmail = (
   props: TeamInvite & Partial<React.ComponentProps<typeof V2BaseEmailHtml>>
 ) => {
+const { t } = useTranslation();
+
   return (
     <V2BaseEmailHtml
       subject={props.language("user_invited_you", {
@@ -43,7 +46,7 @@ export const OrgAutoInviteEmail = (
             ? `${WEBAPP_URL}/emails/calendar-email-hero.png`
             : "http://localhost:3000/emails/calendar-email-hero.png"
         }
-        alt=""
+        alt={t('empty-string')}
       />
       <p
         style={{
diff --git a/packages/emails/src/templates/OrganizationAdminNoSlots.tsx b/packages/emails/src/templates/OrganizationAdminNoSlots.tsx
index d0da37e2aa07bb..a5806daaac31bd 100644
--- a/packages/emails/src/templates/OrganizationAdminNoSlots.tsx
+++ b/packages/emails/src/templates/OrganizationAdminNoSlots.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
 
@@ -19,6 +20,8 @@ export type OrganizationAdminNoSlotsEmailInput = {
 export const OrganizationAdminNoSlotsEmail = (
   props: OrganizationAdminNoSlotsEmailInput & Partial<React.ComponentProps<typeof BaseEmailHtml>>
 ) => {
+const { t } = useTranslation();
+
   return (
     <BaseEmailHtml subject={`No availability found for ${props.user}`}>
       <p
@@ -30,23 +33,14 @@ export const OrganizationAdminNoSlotsEmail = (
         <>{props.language("org_admin_no_slots|heading", { name: props.user })}</>
       </p>
       <p style={{ fontWeight: 400, fontSize: "16px", lineHeight: "24px" }}>
-        <Trans i18nKey="org_admin_no_slots|content" values={{ username: props.user, slug: props.slug }}>
-          Hello Organization Admins,
-          <br />
-          <br />
-          Please note: It has been brought to our attention that {props.user} has not had any availability
-          when a user has visited {props.teamSlug}/{props.slug}.
-          <br />
-          Start time: {props.startTime}
-          <br />
-          End time: {props.endTime}
-          <br />
-          <br />
-          There’s a few reasons why this could be happening:
+        <Trans i18nKey="org_admin_no_slots|content" values={{ username: props.user, slug: props.slug }}>{t('hello-organization-admins')}<br />
+          <br />{t('please-note-it-has-been-brought-to-our-attention-that')}{props.user}{t('has-not-had-any-availability-when-a-user-has-visited')}{props.teamSlug}{t('slash')}{props.slug}{t('period')}<br />{t('start-time')}{props.startTime}
+          <br />{t('end-time')}{props.endTime}
           <br />
+          <br />{t('theres-a-few-reasons-why-this-could-be-happening')}<br />
           <ul>
-            <li>The user does not have any calendars connected</li>
-            <li>Their schedules attached to this event are not enabled</li>
+            <li>{t('the-user-does-not-have-any-calendars-connected')}</li>
+            <li>{t('their-schedules-attached-to-this-event-are-not-enabled')}</li>
           </ul>
         </Trans>
       </p>
diff --git a/packages/emails/src/templates/OrganizationCreationEmail.tsx b/packages/emails/src/templates/OrganizationCreationEmail.tsx
index b386b66ca4ef3f..d37eb4df150f39 100644
--- a/packages/emails/src/templates/OrganizationCreationEmail.tsx
+++ b/packages/emails/src/templates/OrganizationCreationEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation, Trans } from "react-i18next";
 import { Trans } from "next-i18next";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
@@ -8,6 +9,8 @@ import { V2BaseEmailHtml } from "../components";
 export const OrganizationCreationEmail = (
   props: OrganizationCreation & Partial<React.ComponentProps<typeof V2BaseEmailHtml>>
 ) => {
+const { t } = useTranslation();
+
   const { prevLink, newLink, orgName: teamName } = props;
   const prevLinkWithoutProtocol = props.prevLink?.replace(/https?:\/\//, "");
   const newLinkWithoutProtocol = props.newLink?.replace(/https?:\/\//, "");
@@ -26,7 +29,7 @@ export const OrganizationCreationEmail = (
           justifyContent: "center",
         }}
         src={`${WEBAPP_URL}/emails/calendar-email-hero.png`}
-        alt=""
+        alt={t('empty-string')}
       />
       <p
         style={{
@@ -35,9 +38,12 @@ export const OrganizationCreationEmail = (
           marginBottom: "32px",
           marginTop: "32px",
           lineHeightStep: "24px",
-        }}>
-        You have been added as an owner of the organization. To publish your new organization, visit{" "}
-        <a href={`${WEBAPP_URL}/upgrade`}>{WEBAPP_URL}/upgrade</a>
+        }}><Trans
+i18nKey="added-as-owner"
+values={{ WEBAPP_URL }}
+components={{"0": 
+        <a href={`${WEBAPP_URL}/upgrade`} />}}
+/>
       </p>
       <p
         data-testid="organization-link-info"
@@ -49,29 +55,32 @@ export const OrganizationCreationEmail = (
           lineHeightStep: "24px",
         }}>
         {isNewUser ? (
-          <Trans>
-            Enjoy your new organization link: <a href={`${newLink}`}>{newLinkWithoutProtocol}</a>
+          <Trans><Trans
+i18nKey="new-organization-link"
+values={{ _newLinkWithoutProtocol_: <>{newLinkWithoutProtocol}</> }}
+components={{"0": <a href={`${newLink}`} />}}
+/>
           </Trans>
         ) : (
-          <Trans i18nKey="email|existing_user_added_link_changed">
-            Your link has been changed from <a href={prevLink ?? ""}>{prevLinkWithoutProtocol}</a> to{" "}
-            <a href={newLink ?? ""}>{newLinkWithoutProtocol}</a> but don&apos;t worry, all previous links
-            still work and redirect appropriately.
-            <br />
-            <br />
-            Please note: All of your personal event types have been moved into the <strong>
-              {teamName}
-            </strong>{" "}
-            organisation, which may also include potential personal link.
-            <br />
-            <br />
-            Please log in and make sure you have no private events on your new organisational account.
-            <br />
-            <br />
-            For personal events we recommend creating a new account with a personal email address.
-            <br />
-            <br />
-            Enjoy your new clean link: <a href={`${newLink}?orgRedirection=true`}>{newLinkWithoutProtocol}</a>
+          <Trans i18nKey="email|existing_user_added_link_changed"><Trans
+i18nKey="link-changed-notification"
+values={{ _prevLinkWithoutProtocol_: <>{prevLinkWithoutProtocol}</>, _newLinkWithoutProtocol_: <>{newLinkWithoutProtocol}</> }}
+components={{"0": <a href={prevLink ?? ""} />, "1": 
+            <a href={newLink ?? ""} />}}
+/><br />
+            <br /><Trans
+i18nKey="personal-event-types-moved"
+values={{ _teamName_: <>
+              {teamName}</> }}
+components={{"0": <strong />}}
+/><br />
+            <br />{t('check-private-events')}<br />
+            <br />{t('recommend-new-account')}<br />
+            <br /><Trans
+i18nKey="new-clean-link"
+values={{ _newLinkWithoutProtocol_: <>{newLinkWithoutProtocol}</> }}
+components={{"0": <a href={`${newLink}?orgRedirection=true`} />}}
+/>
           </Trans>
         )}
       </p>
diff --git a/packages/emails/src/templates/OrganizerAddGuestsEmail.tsx b/packages/emails/src/templates/OrganizerAddGuestsEmail.tsx
index 74171b2270d87e..3cd965ec3f7f27 100644
--- a/packages/emails/src/templates/OrganizerAddGuestsEmail.tsx
+++ b/packages/emails/src/templates/OrganizerAddGuestsEmail.tsx
@@ -1,11 +1,16 @@
+import { useTranslation } from "react-i18next";
 import { OrganizerScheduledEmail } from "./OrganizerScheduledEmail";
 
-export const OrganizerAddGuestsEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) => (
+export const OrganizerAddGuestsEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <OrganizerScheduledEmail
-    title="new_guests_added"
+    title={t('new-guests-added')}
     headerType="calendarCircle"
     subject="guests_added_event_type_subject"
     callToAction={null}
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/OrganizerAttendeeCancelledSeatEmail.tsx b/packages/emails/src/templates/OrganizerAttendeeCancelledSeatEmail.tsx
index 873230671d232f..74e58e6219fc2f 100644
--- a/packages/emails/src/templates/OrganizerAttendeeCancelledSeatEmail.tsx
+++ b/packages/emails/src/templates/OrganizerAttendeeCancelledSeatEmail.tsx
@@ -1,14 +1,19 @@
+import { useTranslation } from "react-i18next";
 import { OrganizerScheduledEmail } from "./OrganizerScheduledEmail";
 
 export const OrganizerAttendeeCancelledSeatEmail = (
   props: React.ComponentProps<typeof OrganizerScheduledEmail>
-) => (
+) =>  {
+const { t } = useTranslation();
+
+return (
   <OrganizerScheduledEmail
-    title="attendee_no_longer_attending"
+    title={t('attendee-no-longer-attending')}
     headerType="xCircle"
     subject="event_cancelled_subject"
     callToAction={null}
     attendeeCancelled
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/OrganizerCancelledEmail.tsx b/packages/emails/src/templates/OrganizerCancelledEmail.tsx
index b16ef436814815..7f31dff9395bfb 100644
--- a/packages/emails/src/templates/OrganizerCancelledEmail.tsx
+++ b/packages/emails/src/templates/OrganizerCancelledEmail.tsx
@@ -1,11 +1,16 @@
+import { useTranslation } from "react-i18next";
 import { OrganizerScheduledEmail } from "./OrganizerScheduledEmail";
 
-export const OrganizerCancelledEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) => (
+export const OrganizerCancelledEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <OrganizerScheduledEmail
-    title="event_request_cancelled"
+    title={t('event-request-cancelled')}
     headerType="xCircle"
     subject="event_cancelled_subject"
     callToAction={null}
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/OrganizerLocationChangeEmail.tsx b/packages/emails/src/templates/OrganizerLocationChangeEmail.tsx
index 1518f72484eb42..030ff358e0bf93 100644
--- a/packages/emails/src/templates/OrganizerLocationChangeEmail.tsx
+++ b/packages/emails/src/templates/OrganizerLocationChangeEmail.tsx
@@ -1,11 +1,16 @@
+import { useTranslation } from "react-i18next";
 import { OrganizerScheduledEmail } from "./OrganizerScheduledEmail";
 
-export const OrganizerLocationChangeEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) => (
+export const OrganizerLocationChangeEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <OrganizerScheduledEmail
-    title="event_location_changed"
+    title={t('event-location-changed')}
     headerType="calendarCircle"
     subject="location_changed_event_type_subject"
     callToAction={null}
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/OrganizerPaymentRefundFailedEmail.tsx b/packages/emails/src/templates/OrganizerPaymentRefundFailedEmail.tsx
index 525ce097c4724a..4435219f7aecb4 100644
--- a/packages/emails/src/templates/OrganizerPaymentRefundFailedEmail.tsx
+++ b/packages/emails/src/templates/OrganizerPaymentRefundFailedEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { BaseEmailHtml } from "../components";
 import type { OrganizerScheduledEmail } from "./OrganizerScheduledEmail";
 
@@ -25,6 +26,8 @@ export const OrganizerPaymentRefundFailedEmail = (
 };
 
 function RefundInformation(props: React.ComponentProps<typeof OrganizerPaymentRefundFailedEmail>) {
+const { t } = useTranslation();
+
   const { paymentInfo } = props.calEvent;
   const t = props.calEvent.organizer.language.translate;
 
@@ -60,8 +63,7 @@ function RefundInformation(props: React.ComponentProps<typeof OrganizerPaymentRe
                 lineHeight: "24px",
                 textAlign: "center",
                 color: "#494949",
-              }}>
-              Payment {paymentInfo.id}
+              }}>{t('payment')}{paymentInfo.id}
             </div>
           </td>
         </tr>
diff --git a/packages/emails/src/templates/OrganizerReassignedEmail.tsx b/packages/emails/src/templates/OrganizerReassignedEmail.tsx
index 07a4121abff5c9..ee552fe0eeb6ce 100644
--- a/packages/emails/src/templates/OrganizerReassignedEmail.tsx
+++ b/packages/emails/src/templates/OrganizerReassignedEmail.tsx
@@ -1,10 +1,13 @@
+import { useTranslation } from "react-i18next";
 import { OrganizerScheduledEmail } from "./OrganizerScheduledEmail";
 
 export const OrganizerReassignedEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) => {
+const { t } = useTranslation();
+
   const t = props.teamMember?.language.translate || props.calEvent.organizer.language.translate;
   return (
     <OrganizerScheduledEmail
-      title="event_request_reassigned"
+      title={t('event-request-reassigned')}
       headerType="xCircle"
       subject="event_reassigned_subject"
       subtitle={<>{t("event_reassigned_subtitle")}</>}
diff --git a/packages/emails/src/templates/OrganizerRequestReminderEmail.tsx b/packages/emails/src/templates/OrganizerRequestReminderEmail.tsx
index d2040ae5e1e49e..ecaf3b474cad09 100644
--- a/packages/emails/src/templates/OrganizerRequestReminderEmail.tsx
+++ b/packages/emails/src/templates/OrganizerRequestReminderEmail.tsx
@@ -1,5 +1,10 @@
+import { useTranslation } from "react-i18next";
 import { OrganizerRequestEmail } from "./OrganizerRequestEmail";
 
-export const OrganizerRequestReminderEmail = (props: React.ComponentProps<typeof OrganizerRequestEmail>) => (
-  <OrganizerRequestEmail title="event_still_awaiting_approval" {...props} />
-);
+export const OrganizerRequestReminderEmail = (props: React.ComponentProps<typeof OrganizerRequestEmail>) =>  {
+const { t } = useTranslation();
+
+return (
+  <OrganizerRequestEmail title={t('event-still-awaiting-approval')} {...props} />
+)
+};
diff --git a/packages/emails/src/templates/OrganizerRescheduledEmail.tsx b/packages/emails/src/templates/OrganizerRescheduledEmail.tsx
index a47b1fc4bc29ba..3cc9821a283091 100644
--- a/packages/emails/src/templates/OrganizerRescheduledEmail.tsx
+++ b/packages/emails/src/templates/OrganizerRescheduledEmail.tsx
@@ -1,10 +1,15 @@
+import { useTranslation } from "react-i18next";
 import { OrganizerScheduledEmail } from "./OrganizerScheduledEmail";
 
-export const OrganizerRescheduledEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) => (
+export const OrganizerRescheduledEmail = (props: React.ComponentProps<typeof OrganizerScheduledEmail>) =>  {
+const { t } = useTranslation();
+
+return (
   <OrganizerScheduledEmail
-    title="event_has_been_rescheduled"
+    title={t('event-has-been-rescheduled')}
     headerType="calendarCircle"
     subject="event_type_has_been_rescheduled_on_time_date"
     {...props}
   />
-);
+)
+};
diff --git a/packages/emails/src/templates/SlugReplacementEmail.tsx b/packages/emails/src/templates/SlugReplacementEmail.tsx
index b8707a3b264abc..51298247eaa533 100644
--- a/packages/emails/src/templates/SlugReplacementEmail.tsx
+++ b/packages/emails/src/templates/SlugReplacementEmail.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation, Trans } from "react-i18next";
+
 
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
@@ -15,6 +17,8 @@ export const SlugReplacementEmail = (
     t: TFunction;
   } & Partial<React.ComponentProps<typeof BaseEmailHtml>>
 ) => {
+const { t } = useTranslation();
+
   const { slug, name, teamName, t } = props;
 
   return (
@@ -24,20 +28,19 @@ export const SlugReplacementEmail = (
       title={t("event_replaced_notice")}>
       <>
         <Trans i18nKey="hi_user_name" name={name}>
-          <p style={{ fontWeight: 400, lineHeight: "24px", display: "inline-block" }}>Hi {name}</p>
+          <p style={{ fontWeight: 400, lineHeight: "24px", display: "inline-block" }}>{t('hi-{name}', { name })}</p>
           <p style={{ display: "inline" }}>,</p>
         </Trans>
         <Trans i18nKey="email_body_slug_replacement_notice" slug={slug}>
-          <p style={{ fontWeight: 400, lineHeight: "24px" }}>
-            An administrator on the <strong>{teamName}</strong> team has replaced your event type{" "}
-            <strong>/{slug}</strong> with a managed event type that they control.
-          </p>
+          <p style={{ fontWeight: 400, lineHeight: "24px" }}><Trans
+i18nKey="administrator-on-the-{team-name}-team-replaced-your-event-type-{slug}"
+values={{ _teamName_: <>{teamName}</>, slug }}
+components={{"0": <strong />, "1": 
+            <strong />}}
+/></p>
         </Trans>
         <Trans i18nKey="email_body_slug_replacement_info">
-          <p style={{ fontWeight: 400, lineHeight: "24px" }}>
-            Your link will continue to work but some settings for it may have changed. You can review it in
-            event types.
-          </p>
+          <p style={{ fontWeight: 400, lineHeight: "24px" }}>{t('link-will-continue-to-work-settings-may-have-changed-review-it-in-event-types')}</p>
         </Trans>
         <table
           role="presentation"
@@ -65,13 +68,8 @@ export const SlugReplacementEmail = (
           }}
         />
         <Trans i18nKey="email_body_slug_replacement_suggestion">
-          <p style={{ fontWeight: 400, lineHeight: "24px" }}>
-            If you have any questions about the event type, please reach out to your administrator.
-            <br />
-            <br />
-            Happy scheduling, <br />
-            The Cal.com team
-          </p>
+          <p style={{ fontWeight: 400, lineHeight: "24px" }}>{t('questions-about-the-event-type-reach-out-to-your-administrator')}<br />
+            <br />{t('happy-scheduling')}<br />{t('the-cal-com-team')}</p>
         </Trans>
         {/*<p style={{ fontWeight: 400, lineHeight: "24px" }}>
           <>{t("email_body_slug_replacement_suggestion")}</>
diff --git a/packages/emails/src/templates/TeamInviteEmail.tsx b/packages/emails/src/templates/TeamInviteEmail.tsx
index 77ee69c4b0b894..12a8ef5c5d1d3b 100644
--- a/packages/emails/src/templates/TeamInviteEmail.tsx
+++ b/packages/emails/src/templates/TeamInviteEmail.tsx
@@ -1,3 +1,4 @@
+import { useTranslation, Trans } from "react-i18next";
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
 
@@ -24,6 +25,8 @@ type TeamInvite = {
 export const TeamInviteEmail = (
   props: TeamInvite & Partial<React.ComponentProps<typeof V2BaseEmailHtml>>
 ) => {
+const { t } = useTranslation();
+
   const typeOfInvite = getTypeOfInvite(props);
 
   const heading = getHeading();
@@ -46,7 +49,7 @@ export const TeamInviteEmail = (
             ? `${WEBAPP_URL}/emails/calendar-email-hero.png`
             : "http://localhost:3000/emails/calendar-email-hero.png"
         }
-        alt=""
+        alt={t('empty-string')}
       />
       <p
         style={{
@@ -157,49 +160,52 @@ export const TeamInviteEmail = (
           <>
             {autoJoinType == "added" ? (
               <>
-                <Trans i18nKey="email_team_invite|content|added_to_org">
-                  {invitedBy} has added you to the <strong>{teamName}</strong> organization.
-                </Trans>{" "}
+                <Trans i18nKey="email_team_invite|content|added_to_org"><Trans
+i18nKey="invited-by-added-to-team-organization"
+values={{ invitedBy, _teamName_: <>{teamName}</> }}
+components={{"0": <strong />}}
+/></Trans>{" "}
                 <Trans
                   i18nKey="email_team_invite|content_addition|existing_user_added"
-                  values={{ prevLink: props.prevLink, newLink: props.newLink, teamName: props.teamName }}>
-                  Your link has been changed from <a href={prevLink ?? ""}>{prevLinkWithoutProtocol}</a> to{" "}
-                  <a href={newLink ?? ""}>{newLinkWithoutProtocol}</a> but don&apos;t worry, all previous
-                  links still work and redirect appropriately.
-                  <br />
-                  <br />
-                  Please note: All of your personal event types have been moved into the{" "}
-                  <strong>{teamName}</strong> organisation, which may also include potential personal link.
-                  <br />
-                  <br />
-                  Please log in and make sure you have no private events on your new organisational account.
-                  <br />
-                  <br />
-                  For personal events we recommend creating a new account with a personal email address.
-                  <br />
-                  <br />
-                  Enjoy your new clean link:{" "}
-                  <a href={`${newLink}?orgRedirection=true`}>{newLinkWithoutProtocol}</a>
+                  values={{ prevLink: props.prevLink, newLink: props.newLink, teamName: props.teamName }}><Trans
+i18nKey="link-changed-from-to"
+values={{ _prevLinkWithoutProtocol_: <>{prevLinkWithoutProtocol}</>, _newLinkWithoutProtocol_: <>{newLinkWithoutProtocol}</> }}
+components={{"0": <a href={prevLink ?? ""} />, "1": 
+                  <a href={newLink ?? ""} />}}
+/><br />
+                  <br /><Trans
+i18nKey="personal-event-types-moved-to-organization"
+values={{ _teamName_: <>{teamName}</> }}
+components={{"0": 
+                  <strong />}}
+/><br />
+                  <br />{t('log-in-check-private-events')}<br />
+                  <br />{t('recommend-creating-new-account')}<br />
+                  <br /><Trans
+i18nKey="enjoy-new-clean-link"
+values={{ _newLinkWithoutProtocol_: <>{newLinkWithoutProtocol}</> }}
+components={{"0": 
+                  <a href={`${newLink}?orgRedirection=true`} />}}
+/>
                 </Trans>
               </>
             ) : (
               <>
-                <Trans i18nKey="email_team_invite|content|invited_to_org">
-                  {invitedBy} has invited you to join the <strong>{teamName}</strong> organization.
-                </Trans>{" "}
+                <Trans i18nKey="email_team_invite|content|invited_to_org"><Trans
+i18nKey="invited-by-invited-to-join-organization"
+values={{ invitedBy, _teamName_: <>{teamName}</> }}
+components={{"0": <strong />}}
+/></Trans>{" "}
                 <Trans
                   i18nKey="existing_user_added_link_will_change"
-                  values={{ prevLink: props.prevLink, newLink: props.newLink, teamName: props.teamName }}>
-                  On accepting the invite, your link will change to your organization domain but don&apos;t
-                  worry, all previous links will still work and redirect appropriately.
-                  <br />
-                  <br />
-                  Please note: All of your personal event types will be moved into the{" "}
-                  <strong>{teamName}</strong> organisation, which may also include potential personal link.
-                  <br />
-                  <br />
-                  For personal events we recommend creating a new account with a personal email address.
-                </Trans>
+                  values={{ prevLink: props.prevLink, newLink: props.newLink, teamName: props.teamName }}>{t('accepting-invite-link-change')}<br />
+                  <br /><Trans
+i18nKey="personal-event-types-moved-organization"
+values={{ _teamName_: <>{teamName}</> }}
+components={{"0": 
+                  <strong />}}
+/><br />
+                  <br />{t('recommend-creating-new-account-2')}</Trans>
               </>
             )}
           </>
@@ -208,18 +214,19 @@ export const TeamInviteEmail = (
       return (
         <>
           {autoJoinType === "added" ? (
-            <Trans i18nKey="email_team_invite|content|added_to_org">
-              {invitedBy} has added you to the <strong>{teamName}</strong> organization.
-            </Trans>
+            <Trans i18nKey="email_team_invite|content|added_to_org"><Trans
+i18nKey="invited-by-added-to-team-organization-2"
+values={{ invitedBy, _teamName_: <>{teamName}</> }}
+components={{"0": <strong />}}
+/></Trans>
           ) : (
-            <Trans i18nKey="email_team_invite|content|invited_to_org">
-              {invitedBy} has invited you to join the <strong>{teamName}</strong> organization.
-            </Trans>
+            <Trans i18nKey="email_team_invite|content|invited_to_org"><Trans
+i18nKey="invited-by-invited-to-team-organization"
+values={{ invitedBy, _teamName_: <>{teamName}</> }}
+components={{"0": <strong />}}
+/></Trans>
           )}{" "}
-          <Trans>
-            {appName} is the event-juggling scheduler that enables you and your team to schedule meetings
-            without the email tennis.
-          </Trans>
+          <Trans>{t('app-name-event-juggling-scheduler', { appName })}</Trans>
         </>
       );
     }
@@ -228,20 +235,21 @@ export const TeamInviteEmail = (
       return (
         <>
           {autoJoinType === "added" ? (
-            <Trans i18nKey="email_team_invite|content|added_to_subteam">
-              {invitedBy} has added you to the team <strong>{teamName}</strong> in their organization{" "}
-              <strong>{parentTeamName}</strong>.
-            </Trans>
+            <Trans i18nKey="email_team_invite|content|added_to_subteam"><Trans
+i18nKey="invited-by-added-to-team-in-organization"
+values={{ invitedBy, _teamName_: <>{teamName}</>, _parentTeamName_: <>{parentTeamName}</> }}
+components={{"0": <strong />, "1": 
+              <strong />}}
+/></Trans>
           ) : (
-            <Trans i18nKey="email_team_invite|content|invited_to_subteam">
-              {invitedBy} has invited you to the team <strong>{teamName}</strong> in their organization{" "}
-              <strong>{parentTeamName}</strong>.
-            </Trans>
+            <Trans i18nKey="email_team_invite|content|invited_to_subteam"><Trans
+i18nKey="invited-by-invited-to-team-in-organization"
+values={{ invitedBy, _teamName_: <>{teamName}</>, _parentTeamName_: <>{parentTeamName}</> }}
+components={{"0": <strong />, "1": 
+              <strong />}}
+/></Trans>
           )}{" "}
-          <Trans>
-            {appName} is the event-juggling scheduler that enables you and your team to schedule meetings
-            without the email tennis.
-          </Trans>
+          <Trans>{t('app-name-event-juggling-scheduler-2', { appName })}</Trans>
         </>
       );
     }
diff --git a/packages/emails/src/templates/locales/en.json b/packages/emails/src/templates/locales/en.json
new file mode 100644
index 00000000000000..f0246ae2e2c958
--- /dev/null
+++ b/packages/emails/src/templates/locales/en.json
@@ -0,0 +1,71 @@
+{
+  "event-location-changed": "\"event_location_changed\"",
+  "view-all-stats": "\"View all stats\"",
+  "event-has-been-rescheduled": "\"event_has_been_rescheduled\"",
+  "empty-string": "\"\"",
+  "note-download-link-valid": "Note: The download link is valid only for 12 hours. You can generate new download link by following instructions<0>here</0>",
+  "no-longer-attending": "\"no_longer_attending\"",
+  "could-not-add-meeting-link": "We could not add the<0>{{_props_location_}}</0>meeting link to your scheduled event. Contact your invitees or update your calendar event to add the details. You can either <1>change your location on the event type</1>\n       or try <2>removing and adding the app again.</2>",
+  "could-not-update-calendar": "We could not update your<0>{{_props_calendar_}}</0>. <1>Please check your calendar settings or remove and add your calendar again</1>",
+  "event-still-awaiting-approval": "\"event_still_awaiting_approval\"",
+  "payment": "Payment",
+  "new-guests-added": "\"new_guests_added\"",
+  "meeting-awaiting-payment-method": "\"meeting_awaiting_payment_method\"",
+  "meeting-awaiting-payment": "\"meeting_awaiting_payment\"",
+  "event-has-been-updated": "\"event_has_been_updated\"",
+  "event-request-cancelled": "\"event_request_cancelled\"",
+  "added-as-owner": "You have been added as an owner of the organization. To publish your new organization, visit <0>{{WEBAPP_URL}}/upgrade</0>",
+  "new-organization-link": "Enjoy your new organization link:<0>{{_newLinkWithoutProtocol_}}</0>",
+  "link-changed-notification": "Your link has been changed from<0>{{_prevLinkWithoutProtocol_}}</0>to <1>{{_newLinkWithoutProtocol_}}</1>but don't worry, all previous links still work and redirect appropriately.",
+  "personal-event-types-moved": "Please note: All of your personal event types have been moved into the<0>{{_teamName_}}</0> organisation, which may also include potential personal link.",
+  "check-private-events": "Please log in and make sure you have no private events on your new organisational account.",
+  "recommend-new-account": "For personal events we recommend creating a new account with a personal email address.",
+  "new-clean-link": "Enjoy your new clean link:<0>{{_newLinkWithoutProtocol_}}</0>",
+  "event-request-reassigned": "\"event_request_reassigned\"",
+  "an-organization-with-slug": "An organization with slug",
+  "was-created": "was created.",
+  "please-configure-dns-registry": "Please be sure to configure your DNS registry to point the subdomain corresponding to the new organization to where the main app is running. Otherwise the organization will not work.",
+  "basic-options-to-configure-subdomain": "Here are just the very basic options to configure a subdomain to point to their app so it loads the organization profile page.",
+  "a-record-configuration": "You can do it either with the A Record:",
+  "request-reschedule-booking": "\"request_reschedule_booking\"",
+  "book-a-new-time": "\"Book a new time\"",
+  "username": "\"Username\"",
+  "email": "\"Email\"",
+  "rating": "\"Rating\"",
+  "comment": "\"Comment\"",
+  "hi-{name}": "Hi{{name}}",
+  "administrator-on-the-{team-name}-team-replaced-your-event-type-{slug}": "An administrator on the<0>{{_teamName_}}</0>team has replaced your event type <1>/{{slug}}</1>with a managed event type that they control.",
+  "link-will-continue-to-work-settings-may-have-changed-review-it-in-event-types": "Your link will continue to work but some settings for it may have changed. You can review it in event types.",
+  "questions-about-the-event-type-reach-out-to-your-administrator": "If you have any questions about the event type, please reach out to your administrator.",
+  "happy-scheduling": "Happy scheduling,",
+  "the-cal-com-team": "The Cal.com team",
+  "empty-string-fragment": "\"\"",
+  "transcript-fragment": "Transcript",
+  "attendee-no-longer-attending": "\"attendee_no_longer_attending\"",
+  "hello-organization-admins": "Hello Organization Admins,",
+  "please-note-it-has-been-brought-to-our-attention-that": "Please note: It has been brought to our attention that",
+  "has-not-had-any-availability-when-a-user-has-visited": "has not had any availability when a user has visited",
+  "slash": "/",
+  "period": ".",
+  "start-time": "Start time:",
+  "end-time": "End time:",
+  "theres-a-few-reasons-why-this-could-be-happening": "There’s a few reasons why this could be happening:",
+  "the-user-does-not-have-any-calendars-connected": "The user does not have any calendars connected",
+  "their-schedules-attached-to-this-event-are-not-enabled": "Their schedules attached to this event are not enabled",
+  "invited-by-added-to-team-organization": "{{invitedBy}}has added you to the<0>{{_teamName_}}</0>organization.",
+  "link-changed-from-to": "Your link has been changed from<0>{{_prevLinkWithoutProtocol_}}</0>to <1>{{_newLinkWithoutProtocol_}}</1>but don't worry, all previous links still work and redirect appropriately.",
+  "personal-event-types-moved-to-organization": "Please note: All of your personal event types have been moved into the <0>{{_teamName_}}</0>organisation, which may also include potential personal link.",
+  "log-in-check-private-events": "Please log in and make sure you have no private events on your new organisational account.",
+  "recommend-creating-new-account": "For personal events we recommend creating a new account with a personal email address.",
+  "enjoy-new-clean-link": "Enjoy your new clean link: <0>{{_newLinkWithoutProtocol_}}</0>",
+  "invited-by-invited-to-join-organization": "{{invitedBy}}has invited you to join the<0>{{_teamName_}}</0>organization.",
+  "accepting-invite-link-change": "On accepting the invite, your link will change to your organization domain but don't worry, all previous links will still work and redirect appropriately.",
+  "personal-event-types-moved-organization": "Please note: All of your personal event types will be moved into the <0>{{_teamName_}}</0>organisation, which may also include potential personal link.",
+  "recommend-creating-new-account-2": "For personal events we recommend creating a new account with a personal email address.",
+  "invited-by-added-to-team-organization-2": "{{invitedBy}}has added you to the<0>{{_teamName_}}</0>organization.",
+  "invited-by-invited-to-team-organization": "{{invitedBy}}has invited you to join the<0>{{_teamName_}}</0>organization.",
+  "app-name-event-juggling-scheduler": "{{appName}}is the event-juggling scheduler that enables you and your team to schedule meetings without the email tennis.",
+  "invited-by-added-to-team-in-organization": "{{invitedBy}}has added you to the team<0>{{_teamName_}}</0>in their organization <1>{{_parentTeamName_}}</1>.",
+  "invited-by-invited-to-team-in-organization": "{{invitedBy}}has invited you to the team<0>{{_teamName_}}</0>in their organization <1>{{_parentTeamName_}}</1>.",
+  "app-name-event-juggling-scheduler-2": "{{appName}}is the event-juggling scheduler that enables you and your team to schedule meetings without the email tennis."
+}
diff --git a/packages/platform/examples/base/src/components/Navbar/index.tsx b/packages/platform/examples/base/src/components/Navbar/index.tsx
index 051ad00697595a..3e2d318f6112b0 100644
--- a/packages/platform/examples/base/src/components/Navbar/index.tsx
+++ b/packages/platform/examples/base/src/components/Navbar/index.tsx
@@ -1,42 +1,43 @@
+import { useTranslation } from "react-i18next";
 import { Poppins } from "next/font/google";
 import Link from "next/link";
 
 const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
 
 export function Navbar({ username }: { username?: string }) {
+const { t } = useTranslation();
+
   return (
     <nav className="flex h-[75px] w-[100%] items-center justify-between bg-black px-14 py-3 text-white">
       <div className={`flex h-[100%] items-center text-lg ${poppins.className}`}>
         <Link href="/">
-          <h1 className="bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] bg-clip-text text-2xl font-bold text-transparent">
-            CalSync
-          </h1>
+          <h1 className="bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] bg-clip-text text-2xl font-bold text-transparent">{t('cal-sync')}</h1>
         </Link>
       </div>
       {username && <div className="capitalize">👤 {username}</div>}
       <div className={`${poppins.className}`}>
         <ul className="flex gap-x-7">
           <li>
-            <Link href="/calendars">Calendar</Link>
+            <Link href="/calendars">{t('calendar')}</Link>
           </li>
           <li>
-            <Link href="/availability">Availability</Link>
+            <Link href="/availability">{t('availability')}</Link>
           </li>
           <li>
-            <Link href="/event-types">EventTypes</Link>
+            <Link href="/event-types">{t('event-types')}</Link>
           </li>
           <li>
-            <Link href="/booking">Book Me</Link>
+            <Link href="/booking">{t('book-me')}</Link>
           </li>
           <li>
-            <Link href="/bookings">My Bookings</Link>
+            <Link href="/bookings">{t('my-bookings')}</Link>
           </li>
           <li>
-            <Link href="/embed">Embed</Link>
+            <Link href="/embed">{t('embed')}</Link>
           </li>
 
           <li>
-            <Link href="/conferencing-apps">Conferencing Apps</Link>
+            <Link href="/conferencing-apps">{t('conferencing-apps')}</Link>
           </li>
         </ul>
       </div>
diff --git a/packages/platform/examples/base/src/components/Navbar/locales/en.json b/packages/platform/examples/base/src/components/Navbar/locales/en.json
new file mode 100644
index 00000000000000..cf181cf1de4895
--- /dev/null
+++ b/packages/platform/examples/base/src/components/Navbar/locales/en.json
@@ -0,0 +1,10 @@
+{
+  "cal-sync": "CalSync",
+  "calendar": "Calendar",
+  "availability": "Availability",
+  "event-types": "EventTypes",
+  "book-me": "Book Me",
+  "my-bookings": "My Bookings",
+  "embed": "Embed",
+  "conferencing-apps": "Conferencing Apps"
+}
diff --git a/packages/platform/examples/base/src/pages/[bookingUid].tsx b/packages/platform/examples/base/src/pages/[bookingUid].tsx
index b0729bba2a9322..17f6529f4ae7e9 100644
--- a/packages/platform/examples/base/src/pages/[bookingUid].tsx
+++ b/packages/platform/examples/base/src/pages/[bookingUid].tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
 // eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
@@ -10,6 +11,8 @@ import { Icon } from "@calcom/ui";
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Bookings(props: { calUsername: string; calEmail: string }) {
+const { t } = useTranslation();
+
   const router = useRouter();
 
   const { isLoading, data: booking, refetch } = useBooking((router.query.bookingUid as string) ?? "");
@@ -32,7 +35,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
       <main
         className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
         <Navbar username={props.calUsername} />
-        {isLoading && <p>Loading...</p>}
+        {isLoading && <p>{t('loading')}</p>}
         {!isLoading && booking && (
           <div
             key={booking.id}
@@ -43,20 +46,20 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                   name="circle-check-big"
                   className="my-5 flex h-[40px] w-[40px] rounded-full bg-green-500"
                 />
-                <h1 className="text-xl font-bold">This meeting is scheduled</h1>
-                <p>We sent an email with a calendar invitation with the details to everyone.</p>
+                <h1 className="text-xl font-bold">{t('meeting-scheduled')}</h1>
+                <p>{t('email-calendar-invitation-details')}</p>
               </div>
             ) : (
               <div className="mx-2 my-4 flex flex-col items-center justify-center text-center">
                 <Icon name="x" className="my-5 flex h-[40px] w-[40px] rounded-full bg-red-400" />
-                <h4 className="text-2xl font-bold">This event is cancelled</h4>
+                <h4 className="text-2xl font-bold">{t('event-cancelled')}</h4>
               </div>
             )}
             <hr className="mx-2 bg-black text-black" />
             <div className="mx-2 my-7 flex flex-col gap-y-3">
               <div className="flex gap-[70px]">
                 <div>
-                  <h4>What</h4>
+                  <h4>{t('what')}</h4>
                 </div>
                 <div>
                   <p>{booking.title}</p>
@@ -64,7 +67,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               </div>
               <div className="flex gap-[70px]">
                 <div>
-                  <h4>When</h4>
+                  <h4>{t('when')}</h4>
                 </div>
                 <div>
                   <div>
@@ -86,13 +89,13 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                 </div>
               </div>
               <div className="flex gap-[70px]">
-                <div>Who</div>
+                <div>{t('who')}</div>
                 <div>
                   <div>
                     <div>
                       <h4>
                         {booking.hosts[0]?.name}{" "}
-                        <span className="rounded-md bg-blue-800 px-2 text-sm text-white">Host</span>
+                        <span className="rounded-md bg-blue-800 px-2 text-sm text-white">{t('host')}</span>
                       </h4>
                     </div>
                   </div>
@@ -111,7 +114,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               {!!booking.location && (
                 <div className="flex gap-[70px]">
                   <div>
-                    <h4>Where</h4>
+                    <h4>{t('where')}</h4>
                   </div>
                   <div>
                     <p>{booking.location}</p>
@@ -121,7 +124,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               {!!booking.bookingFieldsResponses?.notes && (
                 <div className="flex gap-[70px]">
                   <div className="w-[40px]">
-                    <h4>Additional notes</h4>
+                    <h4>{t('additional-notes')}</h4>
                   </div>
                   <div>
                     <p>{`${booking.bookingFieldsResponses.notes}`}</p>
@@ -134,18 +137,14 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               <>
                 <hr className="mx-3" />
                 <div className="mx-2 my-3 text-center">
-                  <p>
-                    Need to make a change?{" "}
+                  <p>{t('need-to-make-a-change')}
                     <button
                       className="underline"
                       onClick={() => {
                         router.push(
                           `/booking?rescheduleUid=${booking?.uid}&eventTypeSlug=${booking?.eventType.slug}`
                         );
-                      }}>
-                      Reschedule
-                    </button>{" "}
-                    or{" "}
+                      }}>{t('reschedule')}</button>{t('or')}
                     <button
                       className="underline"
                       onClick={() => {
@@ -155,9 +154,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                           cancellationReason: "User request",
                           allRemainingBookings: true,
                         });
-                      }}>
-                      Cancel
-                    </button>
+                      }}>{t('cancel')}</button>
                   </p>
                 </div>
               </>
diff --git a/packages/platform/examples/base/src/pages/booking.tsx b/packages/platform/examples/base/src/pages/booking.tsx
index e0842cd65efcf8..e5920adc1003f6 100644
--- a/packages/platform/examples/base/src/pages/booking.tsx
+++ b/packages/platform/examples/base/src/pages/booking.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
 // eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
@@ -9,6 +10,8 @@ import { Booker, useEventTypes, useTeamEventTypes, useTeams } from "@calcom/atom
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Bookings(props: { calUsername: string; calEmail: string }) {
+const { t } = useTranslation();
+
   const [bookingTitle, setBookingTitle] = useState<string | null>(null);
   const [eventTypeSlug, setEventTypeSlug] = useState<string | null>(null);
   const [eventTypeDuration, setEventTypeDuration] = useState<number | null>(null);
@@ -25,13 +28,13 @@ export default function Bookings(props: { calUsername: string; calEmail: string
       className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
       <Navbar username={props.calUsername} />
       <div>
-        <h1 className="mx-10 my-4 text-2xl font-semibold">{props.calUsername} Public Booking Page</h1>
+        <h1 className="mx-10 my-4 text-2xl font-semibold">{props.calUsername}{t('public-booking-page')}</h1>
 
-        {isLoadingEvents && !eventTypeSlug && <p>Loading...</p>}
+        {isLoadingEvents && !eventTypeSlug && <p>{t('loading')}</p>}
 
         {!isLoadingEvents && !eventTypeSlug && Boolean(eventTypes?.length) && !rescheduleUid && (
           <div className="flex flex-col gap-4">
-            <h1>User event types</h1>
+            <h1>{t('user-event-types')}</h1>
             {eventTypes?.map(
               (event: { id: number; slug: string; title: string; lengthInMinutes: number }) => {
                 const formatEventSlug = event.slug
@@ -60,7 +63,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
 
         {!isLoadingTeamEvents && !eventTypeSlug && Boolean(teamEventTypes?.length) && !rescheduleUid && (
           <div className="flex flex-col gap-4">
-            <h1>Team event types</h1>
+            <h1>{t('team-event-types')}</h1>
             {teamEventTypes?.map(
               (event: { id: number; slug: string; title: string; lengthInMinutes: number }) => {
                 const formatEventSlug = event.slug
@@ -132,7 +135,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
             duration={eventTypeDuration}
           />
         )}
-        {bookingTitle && <p>Booking created: {bookingTitle}</p>}
+        {bookingTitle && <p>{t('booking-created-{booking-title}', { bookingTitle })}</p>}
       </div>
     </main>
   );
diff --git a/packages/platform/examples/base/src/pages/bookings.tsx b/packages/platform/examples/base/src/pages/bookings.tsx
index 708e7ae4d7f7ed..574fed22870ce0 100644
--- a/packages/platform/examples/base/src/pages/bookings.tsx
+++ b/packages/platform/examples/base/src/pages/bookings.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
 // eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
@@ -9,6 +10,8 @@ import dayjs from "@calcom/dayjs";
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Bookings(props: { calUsername: string; calEmail: string }) {
+const { t } = useTranslation();
+
   const { isLoading: isLoadingUpcomingBookings, data: upcomingBookings } = useBookings({
     take: 50,
     skip: 0,
@@ -27,8 +30,8 @@ export default function Bookings(props: { calUsername: string; calEmail: string
     <main
       className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
       <Navbar username={props.calUsername} />
-      <h1 className="my-4 text-2xl font-semibold">{props.calUsername} Bookings</h1>
-      {isLoading && <p>Loading...</p>}
+      <h1 className="my-4 text-2xl font-semibold">{props.calUsername}{t('bookings')}</h1>
+      {isLoading && <p>{t('loading')}</p>}
       {!isLoading &&
         pastBookings &&
         upcomingBookings &&
@@ -64,7 +67,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                 </div>
                 <div className="px-6">
                   <p>
-                    {booking?.hosts?.[0]?.name} and {booking.attendees[0].name}
+                    {booking?.hosts?.[0]?.name}{t('and')}{booking.attendees[0].name}
                   </p>{" "}
                   <p />
                 </div>
diff --git a/packages/platform/examples/base/src/pages/embed.tsx b/packages/platform/examples/base/src/pages/embed.tsx
index 964601367b0405..0f31886ba6b88e 100644
--- a/packages/platform/examples/base/src/pages/embed.tsx
+++ b/packages/platform/examples/base/src/pages/embed.tsx
@@ -1,14 +1,17 @@
+import { useTranslation } from "react-i18next";
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Embed(props: { calUsername: string; calEmail: string }) {
+const { t } = useTranslation();
+
   return (
     <main className={`flex ${inter.className} text-default flex flex-col`}>
       <Navbar username={props.calUsername} />
       <div>
-        <h1 className="mx-8 my-4 text-2xl font-bold">This is the booker embed</h1>
+        <h1 className="mx-8 my-4 text-2xl font-bold">{t('this-is-the-booker-embed')}</h1>
       </div>
     </main>
   );
diff --git a/packages/platform/examples/base/src/pages/event-types.tsx b/packages/platform/examples/base/src/pages/event-types.tsx
index 894364fb6fbf4b..2ba4774986cacc 100644
--- a/packages/platform/examples/base/src/pages/event-types.tsx
+++ b/packages/platform/examples/base/src/pages/event-types.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
 // eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
@@ -15,6 +16,8 @@ import {
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Bookings(props: { calUsername: string; calEmail: string }) {
+const { t } = useTranslation();
+
   const [eventTypeId, setEventTypeId] = useState<number | null>(null);
   const [isTeamEvent, setIsTeamEvent] = useState<boolean>(false);
   const router = useRouter();
@@ -32,11 +35,10 @@ export default function Bookings(props: { calUsername: string; calEmail: string
       className={`flex min-h-screen flex-col ${inter.className} main text-default flex min-h-full w-full flex-col items-center overflow-visible`}>
       <Navbar username={props.calUsername} />
       <div>
-        <h1 className="mx-10 my-4 text-2xl font-semibold">
-          EventTypes{eventTypeId ? `: ${eventTypeId}` : ""}
+        <h1 className="mx-10 my-4 text-2xl font-semibold">{t('event-types')}{eventTypeId ? `: ${eventTypeId}` : ""}
         </h1>
 
-        {isLoadingEvents && !eventTypeId && <p>Loading...</p>}
+        {isLoadingEvents && !eventTypeId && <p>{t('loading')}</p>}
 
         {!isLoadingEvents && !eventTypeId && Boolean(eventTypes?.length) && !rescheduleUid && (
           <div className="flex flex-col gap-4">
@@ -67,7 +69,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
 
         {!isLoadingTeamEvents && !eventTypeId && Boolean(teamEventTypes?.length) && !rescheduleUid && (
           <div className="flex flex-col gap-4">
-            <h1>Team event types</h1>
+            <h1>{t('team-event-types')}</h1>
             {teamEventTypes?.map(
               (event: { id: number; slug: string; title: string; lengthInMinutes: number }) => {
                 const formatEventSlug = event.slug
@@ -746,7 +748,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
         {!eventTypeId && (
           <div className="mt-8 flex flex-row items-center justify-center gap-24">
             <div className="flex w-[30vw] flex-col gap-2">
-              <h1 className="font-semibold">Create Event Type</h1>
+              <h1 className="font-semibold">{t('create-event-type')}</h1>
               <CreateEventType
                 customClassNames={{
                   atomsWrapper: "border p-4 shadow-md rounded-md",
@@ -759,7 +761,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
             </div>
 
             <div className="flex w-[30vw] flex-col gap-2">
-              <h1 className="font-semibold">Create Team Event Type</h1>
+              <h1 className="font-semibold">{t('create-team-event-type')}</h1>
               {teams?.[0]?.id && (
                 <CreateEventType
                   customClassNames={{
diff --git a/packages/platform/examples/base/src/pages/index.tsx b/packages/platform/examples/base/src/pages/index.tsx
index c30f972654e505..0a3e7bb5eca770 100644
--- a/packages/platform/examples/base/src/pages/index.tsx
+++ b/packages/platform/examples/base/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Navbar } from "@/components/Navbar";
 import { Inter, Poppins } from "next/font/google";
 
@@ -7,18 +8,16 @@ const inter = Inter({ subsets: ["latin"] });
 const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
 
 export default function Home(props: { calUsername: string; calEmail: string }) {
+const { t } = useTranslation();
+
   return (
     <main className={`flex min-h-screen flex-col ${inter.className} items-center justify-center`}>
       <Navbar username={props.calUsername} />
       <div
         className={` h-[100vh] w-full items-center justify-center gap-y-3  font-mono lg:flex ${inter.className} gap-16 `}>
         <div className="ml-32">
-          <h1 className={`${poppins.className} w-[100%] pb-3 text-7xl font-bold`}>
-            The all in one Scheduling marketplace
-          </h1>
-          <p className={`w-[70%] font-normal ${inter.className} pb-3 text-2xl`}>
-            To get started, connect your google calendar.
-          </p>
+          <h1 className={`${poppins.className} w-[100%] pb-3 text-7xl font-bold`}>{t('the-all-in-one-scheduling-marketplace')}</h1>
+          <p className={`w-[70%] font-normal ${inter.className} pb-3 text-2xl`}>{t('to-get-started-connect-your-google-calendar')}</p>
           <div className="flex flex-row gap-4">
             <Connect.GoogleCalendar
               redir="http://localhost:4321/calendars"
@@ -47,7 +46,7 @@ export default function Home(props: { calUsername: string; calEmail: string }) {
             width="76%"
             height="76%"
             className="rounded-lg shadow-2xl"
-            alt="cover image"
+            alt={t('cover-image')}
             src="https://images.unsplash.com/photo-1506784365847-bbad939e9335?q=80&w=2668&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           />
         </div>
diff --git a/packages/platform/examples/base/src/pages/locales/en.json b/packages/platform/examples/base/src/pages/locales/en.json
new file mode 100644
index 00000000000000..b15d325356fd35
--- /dev/null
+++ b/packages/platform/examples/base/src/pages/locales/en.json
@@ -0,0 +1,29 @@
+{
+  "this-is-the-booker-embed": "This is the booker embed",
+  "bookings": "Bookings",
+  "loading": "Loading...",
+  "and": "and",
+  "the-all-in-one-scheduling-marketplace": "The all in one Scheduling marketplace",
+  "to-get-started-connect-your-google-calendar": "To get started, connect your google calendar.",
+  "cover-image": "\"cover image\"",
+  "public-booking-page": "Public Booking Page",
+  "user-event-types": "User event types",
+  "team-event-types": "Team event types",
+  "booking-created-{booking-title}": "Booking created:{{bookingTitle}}",
+  "event-types": "EventTypes",
+  "create-event-type": "Create Event Type",
+  "create-team-event-type": "Create Team Event Type",
+  "meeting-scheduled": "This meeting is scheduled",
+  "email-calendar-invitation-details": "We sent an email with a calendar invitation with the details to everyone.",
+  "event-cancelled": "This event is cancelled",
+  "what": "What",
+  "when": "When",
+  "who": "Who",
+  "host": "Host",
+  "where": "Where",
+  "additional-notes": "Additional notes",
+  "need-to-make-a-change": "Need to make a change?",
+  "reschedule": "Reschedule",
+  "or": " or",
+  "cancel": "Cancel"
+}
diff --git a/packages/ui/components/app-list-card/AppListCard.tsx b/packages/ui/components/app-list-card/AppListCard.tsx
index cf1988d14141f8..2f0aff86cd7d64 100644
--- a/packages/ui/components/app-list-card/AppListCard.tsx
+++ b/packages/ui/components/app-list-card/AppListCard.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import type { AppListCardProps } from "@calcom/features/apps/components/AppListCard";
 import classNames from "@calcom/lib/classNames";
@@ -7,6 +9,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar, Badge, Icon, ListItemText } from "@calcom/ui";
 
 export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const {
     logo,
@@ -37,7 +41,7 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
             <h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
             <div className="flex items-center gap-x-2">
               {isDefault && <Badge variant="green">{t("default")}</Badge>}
-              {isTemplate && <Badge variant="red">Template</Badge>}
+              {isTemplate && <Badge variant="red">{t('template')}</Badge>}
             </div>
           </div>
           <ListItemText component="p">{description}</ListItemText>
diff --git a/packages/ui/components/app-list-card/locales/en.json b/packages/ui/components/app-list-card/locales/en.json
new file mode 100644
index 00000000000000..ab7f82338e1235
--- /dev/null
+++ b/packages/ui/components/app-list-card/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "template": "Template"
+}
diff --git a/packages/ui/components/apps/AppCard.tsx b/packages/ui/components/apps/AppCard.tsx
index 81d72432310fd8..3c89e812b64418 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -27,6 +29,8 @@ interface AppCardProps {
 }
 
 export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCardProps) {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
   const allowedMultipleInstalls = app.categories && app.categories.indexOf("calendar") > -1;
@@ -178,7 +182,7 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
       <div className="max-w-44 absolute right-0 mr-4 flex flex-wrap justify-end gap-1">
         {appAdded > 0 ? <Badge variant="green">{t("installed", { count: appAdded })}</Badge> : null}
         {app.isTemplate && (
-          <span className="bg-error rounded-md px-2 py-1 text-sm font-normal text-red-800">Template</span>
+          <span className="bg-error rounded-md px-2 py-1 text-sm font-normal text-red-800">{t('template')}</span>
         )}
         {(app.isDefault || (!app.isDefault && app.isGlobal)) && (
           <span className="bg-subtle text-emphasis flex items-center rounded-md px-2 py-1 text-sm font-normal">
diff --git a/packages/ui/components/apps/locales/en.json b/packages/ui/components/apps/locales/en.json
new file mode 100644
index 00000000000000..ab7f82338e1235
--- /dev/null
+++ b/packages/ui/components/apps/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "template": "Template"
+}
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index 62ea4b4206e9a1..ec564afa78e720 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 // @TODO: turn this into a more generic component that has the same Props API as MUI https://mui.com/material-ui/react-card/
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
@@ -131,6 +132,8 @@ export function Card({
   thumbnailUrl,
   learnMore,
 }: BaseCardProps) {
+const { t } = useTranslation();
+
   const LinkComponent = learnMore && learnMore.href.startsWith("https") ? "a" : Link;
   return (
     <div
@@ -198,7 +201,7 @@ export function Card({
               strokeLinejoin="round"
             />
           </svg>
-          <img alt="play feature video" src={thumbnailUrl} />
+          <img alt={t('play-feature-video')} src={thumbnailUrl} />
         </a>
       )}
 
diff --git a/packages/ui/components/card/locales/en.json b/packages/ui/components/card/locales/en.json
new file mode 100644
index 00000000000000..05d0127c7634c5
--- /dev/null
+++ b/packages/ui/components/card/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "play-feature-video": "\"play feature video\""
+}
diff --git a/packages/ui/components/dialog/dialog.test.tsx b/packages/ui/components/dialog/dialog.test.tsx
index 4611194fa8e6ac..31f54b3942189b 100644
--- a/packages/ui/components/dialog/dialog.test.tsx
+++ b/packages/ui/components/dialog/dialog.test.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { render, screen } from "@testing-library/react";
 import { vi } from "vitest";
 
@@ -36,15 +37,17 @@ const DialogComponent = (props: {
   showDivider?: boolean;
   color?: "primary" | "secondary" | "minimal" | "destructive";
 }) => {
+const { t } = useTranslation();
+
   return (
     <Dialog open={props.open}>
       <DialogContent type={props.type}>
         <div className="flex flex-row justify-center align-middle ">
           <DialogHeader title={props.title} subtitle={props.subtitle} />
-          <p>Dialog Content</p>
+          <p>{t('dialog-content')}</p>
           <DialogFooter showDivider={props.showDivider}>
             <DialogClose color={props.color} />
-            <p>Dialog Footer</p>
+            <p>{t('dialog-footer')}</p>
           </DialogFooter>
         </div>
       </DialogContent>
diff --git a/packages/ui/components/dialog/locales/en.json b/packages/ui/components/dialog/locales/en.json
new file mode 100644
index 00000000000000..fbe5785627dd68
--- /dev/null
+++ b/packages/ui/components/dialog/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "dialog-content": "Dialog Content",
+  "dialog-footer": "Dialog Footer"
+}
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.test.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.test.tsx
index 2cc50d0b5309b4..5b9fea2d848fae 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.test.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.test.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
@@ -40,17 +41,21 @@ const initialConfig = {
   onError: (error: Error) => console.error(error),
 };
 
-const TestWrapper = ({ children }: { children: string | JSX.Element }) => (
+const TestWrapper = ({ children }: { children: string | JSX.Element }) =>  {
+const { t } = useTranslation();
+
+return (
   <LexicalComposer initialConfig={initialConfig}>
     <RichTextPlugin
       contentEditable={<ContentEditable />}
-      placeholder={<div>Enter some text...</div>}
+      placeholder={<div>{t('enter-some-text')}</div>}
       ErrorBoundary={LexicalErrorBoundary}
     />
     <HistoryPlugin />
     {children}
   </LexicalComposer>
-);
+)
+};
 
 describe("ToolbarPlugin", () => {
   const defaultProps = {
diff --git a/packages/ui/components/editor/plugins/locales/en.json b/packages/ui/components/editor/plugins/locales/en.json
new file mode 100644
index 00000000000000..d47766270c5eac
--- /dev/null
+++ b/packages/ui/components/editor/plugins/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "enter-some-text": "Enter some text..."
+}
diff --git a/packages/ui/components/errorBoundary/error-boundary.test.tsx b/packages/ui/components/errorBoundary/error-boundary.test.tsx
index 856bedd6ca5a34..b5177f3c1e07fb 100644
--- a/packages/ui/components/errorBoundary/error-boundary.test.tsx
+++ b/packages/ui/components/errorBoundary/error-boundary.test.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { render, screen } from "@testing-library/react";
 import { useEffect } from "react";
 
@@ -18,11 +19,13 @@ describe("ErrorBoundary", () => {
 
   test("should render error message and error details when an error occurs", () => {
     const ErrorThrowingComponent = () => {
+const { t } = useTranslation();
+
       useEffect(() => {
         throw new Error("Test Error");
       }, []);
 
-      return <div>Error Throwing Component</div>;
+      return <div>{t('error-throwing-component')}</div>;
     };
 
     render(
diff --git a/packages/ui/components/errorBoundary/locales/en.json b/packages/ui/components/errorBoundary/locales/en.json
new file mode 100644
index 00000000000000..27b5ede3f9a84c
--- /dev/null
+++ b/packages/ui/components/errorBoundary/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "error-throwing-component": "Error Throwing Component"
+}
diff --git a/packages/ui/components/filter-select/index.tsx b/packages/ui/components/filter-select/index.tsx
index 5a9be461e1c975..e795e23b8d9a97 100644
--- a/packages/ui/components/filter-select/index.tsx
+++ b/packages/ui/components/filter-select/index.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { classNames } from "@calcom/lib";
 import {
   Button,
@@ -42,6 +43,8 @@ export function FilterSelect({
   emptyText = "No results",
   testId,
 }: FilterSelectProps) {
+const { t } = useTranslation();
+
   const selectedOption = options.find((option) => option.value === selectedValue);
 
   return (
@@ -91,9 +94,7 @@ export function FilterSelect({
               <>
                 <CommandSeparator />
                 <CommandGroup>
-                  <CommandItem onSelect={() => onChange(null)} className="justify-center text-center">
-                    Clear filter
-                  </CommandItem>
+                  <CommandItem onSelect={() => onChange(null)} className="justify-center text-center">{t('clear-filter')}</CommandItem>
                 </CommandGroup>
               </>
             )}
diff --git a/packages/ui/components/filter-select/locales/en.json b/packages/ui/components/filter-select/locales/en.json
new file mode 100644
index 00000000000000..2b1e54de0fc6b2
--- /dev/null
+++ b/packages/ui/components/filter-select/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "clear-filter": "Clear filter"
+}
diff --git a/packages/ui/components/form/color-picker/colorpicker.tsx b/packages/ui/components/form/color-picker/colorpicker.tsx
index d30482c98e7fe8..736abdaab3365d 100644
--- a/packages/ui/components/form/color-picker/colorpicker.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import * as Popover from "@radix-ui/react-popover";
 import { useState } from "react";
@@ -18,6 +20,8 @@ export type ColorPickerProps = {
 };
 
 const ColorPicker = (props: ColorPickerProps) => {
+const { t } = useTranslation();
+
   const init = !isValidHexCode(props.defaultValue)
     ? fallBackHex(props.defaultValue, false)
     : props.defaultValue;
@@ -35,7 +39,7 @@ const ColorPicker = (props: ColorPickerProps) => {
           <Popover.Trigger asChild>
             <button
               className="h-5 w-5 rounded-sm"
-              aria-label="pick colors"
+              aria-label={t('pick-colors')}
               style={{ backgroundColor: color }}
             />
           </Popover.Trigger>
diff --git a/packages/ui/components/form/color-picker/locales/en.json b/packages/ui/components/form/color-picker/locales/en.json
new file mode 100644
index 00000000000000..87b7aa2cab8d30
--- /dev/null
+++ b/packages/ui/components/form/color-picker/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "pick-colors": "\"pick colors\""
+}
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index 2d443aa9a813d7..cbbda1e6209f8d 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import * as Popover from "@radix-ui/react-popover";
 import { format } from "date-fns";
@@ -25,6 +27,8 @@ export function DatePickerWithRange({
   onDatesChange,
   disabled,
 }: React.HTMLAttributes<HTMLDivElement> & DatePickerWithRangeProps) {
+const { t } = useTranslation();
+
   function handleDayClick(date: Date) {
     if (dates?.endDate) {
       onDatesChange({ startDate: date, endDate: undefined });
@@ -51,10 +55,10 @@ export function DatePickerWithRange({
                   {format(dates.startDate, "LLL dd, y")} - {format(dates.endDate, "LLL dd, y")}
                 </>
               ) : (
-                <>{format(dates.startDate, "LLL dd, y")} - End</>
+                <>{format(dates.startDate, "LLL dd, y")}{t('end-fragment')}</>
               )
             ) : (
-              <span>Pick a date</span>
+              <span>{t('pick-a-date')}</span>
             )}
           </Button>
         </Popover.Trigger>
diff --git a/packages/ui/components/form/date-range-picker/locales/en.json b/packages/ui/components/form/date-range-picker/locales/en.json
new file mode 100644
index 00000000000000..8e006128adb4c6
--- /dev/null
+++ b/packages/ui/components/form/date-range-picker/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "end-fragment": "- End",
+  "pick-a-date": "Pick a date"
+}
diff --git a/packages/ui/components/form/step/FormStep.tsx b/packages/ui/components/form/step/FormStep.tsx
index ead893f51a935b..7a6664d407911f 100644
--- a/packages/ui/components/form/step/FormStep.tsx
+++ b/packages/ui/components/form/step/FormStep.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import React from "react";
 
 import classNames from "@calcom/lib/classNames";
@@ -9,10 +10,11 @@ type Props = {
 
 // It might be worth passing this label string from outside the component so we can translate it?
 function FormStep({ currentStep, steps }: Props) {
+const { t } = useTranslation();
+
   return (
     <div className="w-full">
-      <p className="text-muted text-xs font-medium">
-        Step {currentStep} of {steps}
+      <p className="text-muted text-xs font-medium">{t('step-{current-step}-of-{steps}', { currentStep, steps })}
       </p>
       <div className="flex flex-nowrap space-x-1">
         {[...Array(steps)].map((_, j) => {
diff --git a/packages/ui/components/form/step/locales/en.json b/packages/ui/components/form/step/locales/en.json
new file mode 100644
index 00000000000000..40caf61259bb69
--- /dev/null
+++ b/packages/ui/components/form/step/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "step-{current-step}-of-{steps}": "Step{{currentStep}}of{{steps}}"
+}
diff --git a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
index a912473d2ab0c3..7a19a3ce1aecdd 100644
--- a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
+++ b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useMemo, useState } from "react";
 import type { ITimezoneOption, ITimezone, Props as SelectProps } from "react-timezone-select";
@@ -72,6 +74,8 @@ export function TimezoneSelectComponent({
   value,
   ...props
 }: TimezoneSelectComponentProps) {
+const { t } = useTranslation();
+
   const data = [...(props.data || []), ...SELECT_SEARCH_DATA];
   /*
    * we support multiple timezones for the different labels
@@ -95,7 +99,7 @@ export function TimezoneSelectComponent({
     <BaseSelect
       value={value}
       className={`${className} ${timezoneSelectCustomClassname}`}
-      aria-label="Timezone Select"
+      aria-label={t('timezone-select')}
       isLoading={isPending}
       isDisabled={isPending}
       {...reactSelectProps}
diff --git a/packages/ui/components/form/timezone-select/locales/en.json b/packages/ui/components/form/timezone-select/locales/en.json
new file mode 100644
index 00000000000000..eb7fe6e69804bb
--- /dev/null
+++ b/packages/ui/components/form/timezone-select/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "timezone-select": "\"Timezone Select\""
+}
diff --git a/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx b/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
index b2182f2a08fb7c..ad8795b91de0e1 100644
--- a/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { useId } from "@radix-ui/react-id";
 import { Root as ToggleGroupPrimitive, Item as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group";
@@ -45,6 +47,8 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
   disabled?: boolean;
   variant?: "default" | "small";
 }) {
+const { t } = useTranslation();
+
   // Maintain a state because it is not necessary that onValueChange the parent component would re-render. Think react-hook-form
   // Also maintain a string as boolean isn't accepted as ToggleGroupPrimitive value
   const [yesNoValue, setYesNoValue] = useState<"yes" | "no" | undefined>(yesNo(value));
@@ -79,16 +83,12 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
       <ToggleGroupItemPrimitive
         className={classNames(boolean(yesNoValue) ? selectedClass : unselectedClass)}
         disabled={disabled}
-        value="yes">
-        Yes
-      </ToggleGroupItemPrimitive>
+        value="yes">{t('yes-fragment')}</ToggleGroupItemPrimitive>
 
       <ToggleGroupItemPrimitive
         disabled={disabled}
         className={classNames(!boolean(yesNoValue) ? selectedClass : unselectedClass)}
-        value="no">
-        No
-      </ToggleGroupItemPrimitive>
+        value="no">{t('no-fragment')}</ToggleGroupItemPrimitive>
     </ToggleGroupPrimitive>
   );
 };
diff --git a/packages/ui/components/form/toggleGroup/locales/en.json b/packages/ui/components/form/toggleGroup/locales/en.json
new file mode 100644
index 00000000000000..75559fe95a5daa
--- /dev/null
+++ b/packages/ui/components/form/toggleGroup/locales/en.json
@@ -0,0 +1,4 @@
+{
+  "yes-fragment": "Yes",
+  "no-fragment": "No"
+}
diff --git a/packages/ui/components/icon/SatSymbol.tsx b/packages/ui/components/icon/SatSymbol.tsx
index 157c8d156db47d..92f518f827b2dd 100644
--- a/packages/ui/components/icon/SatSymbol.tsx
+++ b/packages/ui/components/icon/SatSymbol.tsx
@@ -1,6 +1,9 @@
+import { useTranslation } from "react-i18next";
 import React, { forwardRef } from "react";
 
 export const SatSymbol = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function SatSymbol(props) {
+const { t } = useTranslation();
+
   return (
     <svg
       className={props.className}
@@ -8,7 +11,7 @@ export const SatSymbol = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>
       data-name="Layer 1"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 360 360">
-      <title>Satoshis</title>
+      <title>{t('satoshis')}</title>
 
       <rect
         fill="currentColor"
diff --git a/packages/ui/components/icon/locales/en.json b/packages/ui/components/icon/locales/en.json
new file mode 100644
index 00000000000000..c03422be73dd1c
--- /dev/null
+++ b/packages/ui/components/icon/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "satoshis": "Satoshis"
+}
diff --git a/packages/ui/components/logo/Logo.tsx b/packages/ui/components/logo/Logo.tsx
index 1f8d301687f214..dd93be0c5aec52 100644
--- a/packages/ui/components/logo/Logo.tsx
+++ b/packages/ui/components/logo/Logo.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import classNames from "@calcom/lib/classNames";
 
 export default function Logo({
@@ -13,16 +14,18 @@ export default function Logo({
   className?: string;
   src?: string;
 }) {
+const { t } = useTranslation();
+
   return (
     <h3 className={classNames("logo", inline && "inline", className)}>
       <strong>
         {icon ? (
-          <img className="mx-auto w-9 dark:invert" alt="Cal" title="Cal" src={`${src}?type=icon`} />
+          <img className="mx-auto w-9 dark:invert" alt={t('cal-1')} title={t('cal-2')} src={`${src}?type=icon`} />
         ) : (
           <img
             className={classNames(small ? "h-4 w-auto" : "h-5 w-auto", "dark:invert")}
-            alt="Cal"
-            title="Cal"
+            alt={t('cal-3')}
+            title={t('cal-4')}
             src={src}
           />
         )}
diff --git a/packages/ui/components/logo/locales/en.json b/packages/ui/components/logo/locales/en.json
new file mode 100644
index 00000000000000..b5ebd65b08a487
--- /dev/null
+++ b/packages/ui/components/logo/locales/en.json
@@ -0,0 +1,6 @@
+{
+  "cal-1": "\"Cal\"",
+  "cal-2": "\"Cal\"",
+  "cal-3": "\"Cal\"",
+  "cal-4": "\"Cal\""
+}
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index 7d97de3b3d368a..f3e5665a7cfbb5 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import Link from "next/link";
 
 import classNames from "@calcom/lib/classNames";
@@ -31,6 +32,8 @@ const HorizontalTabItem = function ({
   avatar,
   ...props
 }: HorizontalTabItemProps) {
+const { t } = useTranslation();
+
   const { t, isLocaleReady } = useLocale();
 
   const isCurrent = useUrlMatchesCurrentUrl(href) || props?.isActive;
@@ -68,7 +71,7 @@ const HorizontalTabItem = function ({
       )}
       {isLocaleReady ? (
         <div className="flex items-center gap-x-2">
-          {avatar && <Avatar size="sm" imageSrc={avatar} alt="avatar" />} {t(name)}
+          {avatar && <Avatar size="sm" imageSrc={avatar} alt={t('avatar')} />} {t(name)}
         </div>
       ) : (
         <SkeletonText className="h-4 w-24" />
diff --git a/packages/ui/components/navigation/tabs/locales/en.json b/packages/ui/components/navigation/tabs/locales/en.json
new file mode 100644
index 00000000000000..71c6a542c9a06c
--- /dev/null
+++ b/packages/ui/components/navigation/tabs/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "avatar": "\"avatar\""
+}
diff --git a/packages/ui/components/table/TableExamples.tsx b/packages/ui/components/table/TableExamples.tsx
index 5b6616d45c08b7..fa2c60ee2974f5 100644
--- a/packages/ui/components/table/TableExamples.tsx
+++ b/packages/ui/components/table/TableExamples.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Table } from "./Table";
 import { TableActions } from "./TableActions";
 import {
@@ -11,50 +12,57 @@ import {
   TableCaption,
 } from "./TableNew";
 
-export const TableNewExampleComponent = () => (
+export const TableNewExampleComponent = () =>  {
+const { t } = useTranslation();
+
+return (
   <TableNew>
     <TableHeader>
       <TableRow>
-        <TableHead>Header Column 1</TableHead>
-        <TableHead>Header Column 2</TableHead>
+        <TableHead>{t('header-column-1')}</TableHead>
+        <TableHead>{t('header-column-2')}</TableHead>
       </TableRow>
     </TableHeader>
     <TableBody>
       <TableRow>
-        <TableCell>Row 1, Cell 1</TableCell>
-        <TableCell>Row 1, Cell 2</TableCell>
+        <TableCell>{t('row-1-cell-1')}</TableCell>
+        <TableCell>{t('row-1-cell-2')}</TableCell>
       </TableRow>
       <TableRow>
-        <TableCell>Row 2, Cell 1</TableCell>
-        <TableCell>Row 2, Cell 2</TableCell>
+        <TableCell>{t('row-2-cell-1')}</TableCell>
+        <TableCell>{t('row-2-cell-2')}</TableCell>
       </TableRow>
     </TableBody>
     <TableFooter>
       <TableRow>
-        <TableCell>Row 3(footer), Cell 1</TableCell>
-        <TableCell>Row 3(footer), Cell 2</TableCell>
+        <TableCell>{t('row-3-footer-cell-1')}</TableCell>
+        <TableCell>{t('row-3-footer-cell-2')}</TableCell>
       </TableRow>
     </TableFooter>
-    <TableCaption>Table Caption</TableCaption>
+    <TableCaption>{t('table-caption')}</TableCaption>
   </TableNew>
-);
+)
+};
+
+export const TableExampleComponent = () =>  {
+const { t } = useTranslation();
 
-export const TableExampleComponent = () => (
+return (
   <Table>
     <Table.Header>
       <Table.Row>
-        <Table.ColumnTitle>Title Column 1</Table.ColumnTitle>
-        <Table.ColumnTitle>Title Column 2</Table.ColumnTitle>
+        <Table.ColumnTitle>{t('title-column-1')}</Table.ColumnTitle>
+        <Table.ColumnTitle>{t('title-column-2')}</Table.ColumnTitle>
       </Table.Row>
     </Table.Header>
     <Table.Body>
       <Table.Row>
-        <Table.Cell>Row 1, Cell 1</Table.Cell>
-        <Table.Cell>Row 1, Cell 2</Table.Cell>
+        <Table.Cell>{t('row-1-cell-1-duplicate')}</Table.Cell>
+        <Table.Cell>{t('row-1-cell-2-duplicate')}</Table.Cell>
       </Table.Row>
       <Table.Row>
-        <Table.Cell>Row 2, Cell 1</Table.Cell>
-        <Table.Cell>Row 2, Cell 2</Table.Cell>
+        <Table.Cell>{t('row-2-cell-1-duplicate')}</Table.Cell>
+        <Table.Cell>{t('row-2-cell-2-duplicate')}</Table.Cell>
       </Table.Row>
       <Table.Row>
         <TableActions
@@ -80,4 +88,5 @@ export const TableExampleComponent = () => (
       </Table.Row>
     </Table.Body>
   </Table>
-);
+)
+};
diff --git a/packages/ui/components/table/locales/en.json b/packages/ui/components/table/locales/en.json
new file mode 100644
index 00000000000000..660b2c14f6b63d
--- /dev/null
+++ b/packages/ui/components/table/locales/en.json
@@ -0,0 +1,17 @@
+{
+  "header-column-1": "Header Column 1",
+  "header-column-2": "Header Column 2",
+  "row-1-cell-1": "Row 1, Cell 1",
+  "row-1-cell-2": "Row 1, Cell 2",
+  "row-2-cell-1": "Row 2, Cell 1",
+  "row-2-cell-2": "Row 2, Cell 2",
+  "row-3-footer-cell-1": "Row 3(footer), Cell 1",
+  "row-3-footer-cell-2": "Row 3(footer), Cell 2",
+  "table-caption": "Table Caption",
+  "title-column-1": "Title Column 1",
+  "title-column-2": "Title Column 2",
+  "row-1-cell-1-duplicate": "Row 1, Cell 1",
+  "row-1-cell-2-duplicate": "Row 1, Cell 2",
+  "row-2-cell-1-duplicate": "Row 2, Cell 1",
+  "row-2-cell-2-duplicate": "Row 2, Cell 2"
+}
diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx
index a11ea5a98f3bc7..a8f840e5a9c48b 100644
--- a/packages/ui/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useId } from "@radix-ui/react-id";
 import type { ReactElement, ReactNode, Ref } from "react";
 import React, { forwardRef } from "react";
@@ -106,8 +107,10 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
   props,
   ref
 ) {
+const { t } = useTranslation();
+
   return (
-    <InputField data-testid="password" type="password" placeholder="•••••••••••••" ref={ref} {...props} />
+    <InputField data-testid="password" type="password" placeholder={t('unique-key-0')} ref={ref} {...props} />
   );
 });
 
diff --git a/packages/ui/form/locales/en.json b/packages/ui/form/locales/en.json
new file mode 100644
index 00000000000000..0d5f3cb0f06194
--- /dev/null
+++ b/packages/ui/form/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "unique-key-0": "\"•••••••••••••\""
+}