diff --git a/apps/ui-playground/app/(home)/page.tsx b/apps/ui-playground/app/(home)/page.tsx
index b7f52d73a34317..d9297f4950d97b 100644
--- a/apps/ui-playground/app/(home)/page.tsx
+++ b/apps/ui-playground/app/(home)/page.tsx
@@ -1,11 +1,11 @@
+import { useTranslations } from "next-intl";
 export default function Page() {
+const t = useTranslations("homepage-hero");
+
   return (
     <div className="font-cal -mt-16 flex  min-h-screen w-screen items-center justify-center border pt-16 text-center ">
       <div>
-        <h1 className="text-7xl leading-none md:text-8xl">
-          Open UI for absolutely
-          <br /> everyone
-        </h1>
+        <h1 className="text-7xl leading-none md:text-8xl">{t('heading.open-ui-for-absolutely')}<br />{t('heading.everyone')}</h1>
       </div>
     </div>
   );
diff --git a/apps/ui-playground/components/ui/IconGrid.tsx b/apps/ui-playground/components/ui/IconGrid.tsx
index 6bcdb153d06a87..9d38702c40bfb5 100644
--- a/apps/ui-playground/components/ui/IconGrid.tsx
+++ b/apps/ui-playground/components/ui/IconGrid.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import React, { useState, useMemo } from "react";
 import { Toaster } from "react-hot-toast";
@@ -160,20 +162,22 @@ interface CopyMenuProps {
 }
 
 const CopyMenu: React.FC<CopyMenuProps> = ({ name, onCopy }) => {
+const t = useTranslations("icon-grid-demo");
+
   return (
     <div className="absolute inset-2 flex items-center justify-center bg-black/10 opacity-0 transition-opacity group-hover:opacity-100">
       <div className="bg-default space-y-1 rounded-md p-2 shadow-lg">
         <button
           onClick={() => onCopy(`<Icon name="${name}" className="h-4 w-4" />`)}
-          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">
-          Copy Component
-        </button>
+          className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('actions.copy-component')}</button>
       </div>
     </div>
   );
 };
 
 export const IconGrid: React.FC<IconGridProps> = ({ className }) => {
+const t = useTranslations("icon-grid-demo");
+
   const [searchQuery, setSearchQuery] = useState("");
 
   const handleCopy = async (value: string) => {
@@ -344,7 +348,7 @@ export const IconGrid: React.FC<IconGridProps> = ({ className }) => {
         <div className="mb-8">
           <input
             type="text"
-            placeholder="Search icons..."
+            placeholder={t('inputs.search-placeholder')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className="border-subtle bg-default text-emphasis focus:ring-emphasis placeholder:text-subtle w-full rounded-md border px-4 py-2 focus:outline-none focus:ring-2"
diff --git a/apps/ui-playground/content/design/components/alert.actions.tsx b/apps/ui-playground/content/design/components/alert.actions.tsx
index 28e3877c8a8155..70c5125b31d388 100644
--- a/apps/ui-playground/content/design/components/alert.actions.tsx
+++ b/apps/ui-playground/content/design/components/alert.actions.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -6,19 +8,22 @@ import { Alert } from "@calcom/ui/components/alert";
 
 const severities = ["neutral", "info", "warning", "error"] as const;
 
-export const ActionsExample: React.FC = () => (
+export const ActionsExample: React.FC = () => {
+const t = useTranslations("alert-actions-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="no-prose space-y-4">
       {severities.map((severity) => (
         <Alert
           key={severity}
           severity={severity}
-          title={`${severity.charAt(0).toUpperCase() + severity.slice(1)} Alert with Actions`}
-          message={`This is a ${severity} alert with action buttons.`}
+          title={t('title.severity-alert-with-actions', { "severity": severity.charAt(0).toUpperCase() + severity.slice(1) })}
+          message={t('messages.alert-with-action-buttons', { "severity": severity })}
           actions={
             <div className="flex space-x-2">
-              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">Dismiss</button>
-              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">View</button>
+              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">{t('actions.dismiss')}</button>
+              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">{t('actions.view')}</button>
             </div>
           }
         />
@@ -26,3 +31,4 @@ export const ActionsExample: React.FC = () => (
     </div>
   </RenderComponentWithSnippet>
 );
+};
diff --git a/apps/ui-playground/content/design/components/avatar.image.tsx b/apps/ui-playground/content/design/components/avatar.image.tsx
index 2c20ec8e52b925..84da38306b13ba 100644
--- a/apps/ui-playground/content/design/components/avatar.image.tsx
+++ b/apps/ui-playground/content/design/components/avatar.image.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -6,17 +8,21 @@ import { Avatar } from "@calcom/ui/components/avatar";
 
 const sampleImage = "https://cal.com/stakeholder/peer.jpg";
 
-export const ImageExample: React.FC = () => (
+export const ImageExample: React.FC = () =>  {
+const t = useTranslations("avatar-image-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex items-center gap-8">
       <div className="flex flex-col items-center gap-2">
-        <Avatar size="md" alt="With image" imageSrc={sampleImage} />
-        <span className="text-subtle text-xs">With Image</span>
+        <Avatar size="md" alt={t('alt-text.with-image')} imageSrc={sampleImage} />
+        <span className="text-subtle text-xs">{t('labels.with-image')}</span>
       </div>
       <div className="flex flex-col items-center gap-2">
-        <Avatar size="md" alt="Without image" imageSrc="https://cal.com/avatar.svg" />
-        <span className="text-subtle text-xs">Without Image</span>
+        <Avatar size="md" alt={t('alt-text.without-image')} imageSrc="https://cal.com/avatar.svg" />
+        <span className="text-subtle text-xs">{t('labels.without-image')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/avatar.tooltip.tsx b/apps/ui-playground/content/design/components/avatar.tooltip.tsx
index 341d5a06b4b0dd..708bc94ba92b34 100644
--- a/apps/ui-playground/content/design/components/avatar.tooltip.tsx
+++ b/apps/ui-playground/content/design/components/avatar.tooltip.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -6,13 +8,17 @@ import { Avatar } from "@calcom/ui/components/avatar";
 
 const sampleImage = "https://cal.com/stakeholder/peer.jpg";
 
-export const TooltipExample: React.FC = () => (
+export const TooltipExample: React.FC = () =>  {
+const t = useTranslations("avatar-tooltip-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="flex items-center gap-4">
       <div className="flex flex-col items-center gap-2">
-        <Avatar size="md" alt="With tooltip" imageSrc={sampleImage} title="Hover me!" />
-        <span className="text-subtle text-xs">Hover to see tooltip</span>
+        <Avatar size="md" alt={t('avatar.alt-text')} imageSrc={sampleImage} title={t('tooltip.hover-message')} />
+        <span className="text-subtle text-xs">{t('instructions.hover-tooltip')}</span>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/button.disabled.tsx b/apps/ui-playground/content/design/components/button.disabled.tsx
index 9ab2eac138158a..fe22bec49d1d73 100644
--- a/apps/ui-playground/content/design/components/button.disabled.tsx
+++ b/apps/ui-playground/content/design/components/button.disabled.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { Row } from "@/app/components/row";
@@ -7,36 +9,48 @@ import { Button } from "@calcom/ui/components/button";
 
 const colors = ["primary", "secondary", "minimal", "destructive"] as const;
 
-export const DisabledExample: React.FC = () => (
+export const DisabledExample: React.FC = () =>  {
+const t = useTranslations("button-disabled-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
       <div>
-        <h3 className="text-default mb-4 text-sm">Disabled State</h3>
+        <h3 className="text-default mb-4 text-sm">{t('headings.disabled-state')}</h3>
         <Row>
-          {colors.map((color) => (
+          {colors.map((color) =>  {
+const t = useTranslations("button-disabled-demo");
+
+return (
             <div key={color} className="flex flex-col items-center gap-2">
               <Button color={color} disabled>
                 {color}
               </Button>
-              <span className="text-subtle text-xs">Disabled</span>
+              <span className="text-subtle text-xs">{t('labels.disabled')}</span>
             </div>
-          ))}
+          )
+})}
         </Row>
       </div>
 
       <div>
-        <h3 className="text-default mb-4 text-sm">Disabled with Icons</h3>
+        <h3 className="text-default mb-4 text-sm">{t('headings.disabled-with-icons')}</h3>
         <Row>
-          {colors.map((color) => (
+          {colors.map((color) =>  {
+const t = useTranslations("button-disabled-demo");
+
+return (
             <div key={color} className="flex flex-col items-center gap-2">
               <Button color={color} disabled StartIcon="calendar">
                 {color}
               </Button>
-              <span className="text-subtle text-xs">With Icon</span>
+              <span className="text-subtle text-xs">{t('labels.with-icon')}</span>
             </div>
-          ))}
+          )
+})}
         </Row>
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/button.variant.tsx b/apps/ui-playground/content/design/components/button.variant.tsx
index 0a8d72ebfe2544..24bd551b7f148a 100644
--- a/apps/ui-playground/content/design/components/button.variant.tsx
+++ b/apps/ui-playground/content/design/components/button.variant.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { Row } from "@/app/components/row";
@@ -9,12 +11,15 @@ const variants = ["button", "icon"] as const;
 const colors = ["primary", "secondary", "minimal", "destructive"] as const;
 const sizes = ["xs", "sm", "base", "lg"] as const;
 
-export const VariantExample: React.FC = () => (
+export const VariantExample: React.FC = () => {
+const t = useTranslations("button-variant-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
       {variants.map((variant) => (
         <div key={variant} className="space-y-6">
-          <h3 className="text-default text-sm capitalize">{variant === "button" ? "Default" : variant}</h3>
+          <h3 className="text-default text-sm capitalize">{variant === "button" ? t('variant-labels.default') : variant}</h3>
           <div className="space-y-6">
             {colors.map((color) => (
               <div key={color} className="space-y-2">
@@ -41,3 +46,4 @@ export const VariantExample: React.FC = () => (
     </div>
   </RenderComponentWithSnippet>
 );
+};
diff --git a/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx b/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx
index 66561cfce28e7d..dc4a7689c7cd8b 100644
--- a/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx
+++ b/apps/ui-playground/content/design/components/checkbox.labelPosition.tsx
@@ -1,24 +1,30 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { CheckboxField } from "@calcom/ui/components/form";
 
-export const LabelPositionExample: React.FC = () => (
+export const LabelPositionExample: React.FC = () =>  {
+const t = useTranslations("checkbox-label-position-demo");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-4">
       <CheckboxField
-        description="Description with label above (default on mobile)"
+        description={t('descriptions.label-above-mobile-default')}
         id="label-above"
-        label="Label Above"
+        label={t('labels.above-position')}
       />
       <div className="sm:min-w-[400px]">
         <CheckboxField
-          description="Description with label to the side (on larger screens)"
+          description={t('descriptions.label-side-desktop')}
           id="label-side"
-          label="Label to the Side"
+          label={t('labels.side-position')}
         />
       </div>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/dialog.largeContent.tsx b/apps/ui-playground/content/design/components/dialog.largeContent.tsx
index 0d77357d8b6f25..b158ceeb79c2fd 100644
--- a/apps/ui-playground/content/design/components/dialog.largeContent.tsx
+++ b/apps/ui-playground/content/design/components/dialog.largeContent.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -7,48 +9,37 @@ import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
 
 export const LargeContentExample: React.FC = () => {
+const t = useTranslations("dialog-large-content-demo");
+
   const [open, setOpen] = useState(false);
 
   return (
     <RenderComponentWithSnippet>
       <div className="space-y-2">
-        <Button color="secondary" onClick={() => setOpen(true)}>
-          Open Large Content Dialog
-        </Button>
+        <Button color="secondary" onClick={() => setOpen(true)}>{t('buttons.open-dialog')}</Button>
         <Dialog open={open} onOpenChange={setOpen}>
           <DialogContent
-            title="Terms and Conditions"
-            description="Please review our terms and conditions carefully"
+            title={t('dialog.title')}
+            description={t('dialog.description')}
             enableOverflow>
             <div className="space-y-6">
               {Array.from({ length: 5 }).map((_, i) => (
                 <div key={i} className="space-y-4">
-                  <h3 className="text-emphasis font-semibold">Section {i + 1}</h3>
-                  <p className="text-default text-sm">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus
-                    hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend
-                    nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis
-                    nisl tempor.
-                  </p>
-                  <p className="text-default text-sm">
-                    Suspendisse in orci enim. Integer vel sapien at risus ultrices ornare nec sit amet nibh.
-                    Duis blandit lectus ac odio rhoncus non congue diam bibendum. Aliquam erat volutpat.
-                  </p>
+                  <h3 className="text-emphasis font-semibold">{t('content.section-heading', { "i": i + 1 })}</h3>
+                  <p className="text-default text-sm">{t('content.lorem-paragraph-one')}</p>
+                  <p className="text-default text-sm">{t('content.lorem-paragraph-two')}</p>
                   {i === 2 && (
                     <div className="border-subtle rounded-lg border p-4 shadow-sm">
-                      <h4 className="text-emphasis mb-2 font-medium">Important Notice</h4>
-                      <p className="text-default text-sm">
-                        This is a highlighted section within the content to demonstrate how different UI
-                        elements appear within a scrollable dialog.
-                      </p>
+                      <h4 className="text-emphasis mb-2 font-medium">{t('notices.important-heading')}</h4>
+                      <p className="text-default text-sm">{t('notices.important-description')}</p>
                     </div>
                   )}
                 </div>
               ))}
             </div>
             <DialogFooter>
-              <DialogClose>Decline</DialogClose>
-              <Button>Accept Terms</Button>
+              <DialogClose>{t('buttons.decline')}</DialogClose>
+              <Button>{t('buttons.accept-terms')}</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
diff --git a/apps/ui-playground/content/design/components/emptyScreen.basic.tsx b/apps/ui-playground/content/design/components/emptyScreen.basic.tsx
index bf6e465ad1f747..49c0ed9894a0a9 100644
--- a/apps/ui-playground/content/design/components/emptyScreen.basic.tsx
+++ b/apps/ui-playground/content/design/components/emptyScreen.basic.tsx
@@ -1,17 +1,23 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
-export const BasicExample: React.FC = () => (
+export const BasicExample: React.FC = () =>  {
+const t = useTranslations("empty-screen-basic");
+
+return (
   <RenderComponentWithSnippet>
     <EmptyScreen
       Icon="calendar"
-      headline="No upcoming meetings"
-      description="Create a meeting to get started"
-      buttonText="Create Meeting"
+      headline={t('headlines.no-upcoming-meetings')}
+      description={t('messages.no-meetings-description')}
+      buttonText={t('buttons.create-meeting')}
       buttonOnClick={() => alert("Create Meeting clicked")}
     />
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx b/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx
index 28e3ee740bb2c7..81d313a62533d3 100644
--- a/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx
+++ b/apps/ui-playground/content/design/components/emptyScreen.rawButton.tsx
@@ -1,26 +1,28 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
-export const RawButtonExample: React.FC = () => (
+export const RawButtonExample: React.FC = () =>  {
+const t = useTranslations("empty-screen-demo");
+
+return (
   <RenderComponentWithSnippet>
     <EmptyScreen
       Icon="link"
-      headline="No links found"
-      description="Create a new link to share"
+      headline={t('headlines.no-links-found')}
+      description={t('messages.no-links-description')}
       buttonRaw={
         <div className="flex space-x-2">
-          <Button color="primary" onClick={() => alert("Create Link clicked")}>
-            Create Link
-          </Button>
-          <Button color="secondary" onClick={() => alert("Import Links clicked")}>
-            Import Links
-          </Button>
+          <Button color="primary" onClick={() => alert("Create Link clicked")}>{t('buttons.create-link')}</Button>
+          <Button color="secondary" onClick={() => alert("Import Links clicked")}>{t('buttons.import-links')}</Button>
         </div>
       }
     />
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/input.states.tsx b/apps/ui-playground/content/design/components/input.states.tsx
index f63285e7741027..e241ac505dcc3c 100644
--- a/apps/ui-playground/content/design/components/input.states.tsx
+++ b/apps/ui-playground/content/design/components/input.states.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -15,11 +17,14 @@ export const StatesExample: React.FC = () => (
           <div key={state} className="flex flex-col space-y-2">
             <h3 className="text-emphasis text-sm capitalize">{state}</h3>
             <div className="flex flex-wrap items-center gap-4">
-              {sizes.map((size) => (
+              {sizes.map((size) =>  {
+const t = useTranslations("input-states-demo");
+
+return (
                 <div key={size} className="flex flex-col items-center gap-2">
                   <Input
                     type="text"
-                    placeholder={`${state} input`}
+                    placeholder={t('placeholders.state-input', { "state": state })}
                     disabled={state === "disabled"}
                     readOnly={state === "readonly"}
                     size={size}
@@ -27,7 +32,8 @@ export const StatesExample: React.FC = () => (
                   />
                   <span className="text-subtle text-xs">{size}</span>
                 </div>
-              ))}
+              )
+})}
             </div>
           </div>
         ))}
diff --git a/apps/ui-playground/content/design/components/multiInputField.customization.tsx b/apps/ui-playground/content/design/components/multiInputField.customization.tsx
index efa4bf1e448678..b9febfef81bd62 100644
--- a/apps/ui-playground/content/design/components/multiInputField.customization.tsx
+++ b/apps/ui-playground/content/design/components/multiInputField.customization.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useForm, FormProvider } from "react-hook-form";
@@ -13,6 +15,8 @@ type FormValues = {
 };
 
 export const CustomizationExample: React.FC = () => {
+const t = useTranslations("multi-input-field-demo");
+
   const methods = useForm<FormValues>();
 
   return (
@@ -21,13 +25,13 @@ export const CustomizationExample: React.FC = () => {
         <div className="space-y-6">
           <div className="space-y-4">
             <div className="flex flex-col space-y-2">
-              <h3 className="text-emphasis text-sm">Key-Value Pairs</h3>
-              <p className="text-subtle text-xs">Allows inputting keys and values</p>
+              <h3 className="text-emphasis text-sm">{t('sections.key-value-pairs.title')}</h3>
+              <p className="text-subtle text-xs">{t('sections.key-value-pairs.description')}</p>
               <MultiOptionInput<FormValues>
                 fieldArrayName="keyValuePairs"
                 keyValueMode
-                keyLabel="Environment Variable"
-                valueLabel="Value"
+                keyLabel={t('labels.environment-variable')}
+                valueLabel={t('labels.value')}
                 optionPlaceholders={["NODE_ENV", "PORT", "DATABASE_URL"]}
                 valuePlaceholders={["production", "3000", "postgres://..."]}
                 defaultNumberOfOptions={3}
@@ -36,31 +40,31 @@ export const CustomizationExample: React.FC = () => {
             </div>
 
             <div className="flex flex-col space-y-2">
-              <h3 className="text-emphasis text-sm">Custom Placeholders</h3>
+              <h3 className="text-emphasis text-sm">{t('sections.custom-placeholders.title')}</h3>
               <MultiOptionInput<FormValues>
                 fieldArrayName="customPlaceholders"
-                optionPlaceholders={["Enter your name", "Enter your email", "Enter your phone"]}
+                optionPlaceholders={[t('sections.custom-placeholders.placeholders.enter-name'), t('sections.custom-placeholders.placeholders.enter-email'), t('sections.custom-placeholders.placeholders.enter-phone')]}
                 defaultNumberOfOptions={3}
               />
             </div>
 
             <div className="flex flex-col space-y-2">
-              <h3 className="text-emphasis text-sm">Without Move Buttons</h3>
+              <h3 className="text-emphasis text-sm">{t('sections.without-move-buttons.title')}</h3>
               <MultiOptionInput<FormValues>
                 fieldArrayName="noMoveButtons"
-                optionPlaceholders={["Static option 1", "Static option 2"]}
+                optionPlaceholders={[t('sections.without-move-buttons.placeholders.static-option-1'), t('sections.without-move-buttons.placeholders.static-option-2')]}
                 defaultNumberOfOptions={2}
                 showMoveButtons={false}
               />
             </div>
 
             <div className="flex flex-col space-y-2">
-              <h3 className="text-emphasis text-sm">Custom Add Button Label</h3>
+              <h3 className="text-emphasis text-sm">{t('sections.custom-add-button.title')}</h3>
               <MultiOptionInput<FormValues>
                 fieldArrayName="customLabel"
-                optionPlaceholders={["Social media link"]}
+                optionPlaceholders={[t('sections.custom-add-button.placeholders.social-media-link')]}
                 defaultNumberOfOptions={1}
-                addOptionLabel="Add another social media link"
+                addOptionLabel={t('buttons.add-social-media-link')}
               />
             </div>
           </div>
diff --git a/apps/ui-playground/content/design/components/navigation.sidebar.tsx b/apps/ui-playground/content/design/components/navigation.sidebar.tsx
index c5cdcc1aab24ee..67881cd71cae79 100644
--- a/apps/ui-playground/content/design/components/navigation.sidebar.tsx
+++ b/apps/ui-playground/content/design/components/navigation.sidebar.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -6,6 +8,8 @@ import { useState } from "react";
 import { NavigationItem } from "@calcom/ui";
 
 export const SidebarExample: React.FC = () => {
+const t = useTranslations("navigation-sidebar-demo");
+
   const [isDeelExpanded, setIsDeelExpanded] = useState(true);
 
   return (
@@ -54,7 +58,7 @@ export const SidebarExample: React.FC = () => {
             icon: "zap",
           }}
         />
-        <div className="text-subtle mt-4 px-2 text-sm">Manage</div>
+        <div className="text-subtle mt-4 px-2 text-sm">{t('sections.manage')}</div>
         <NavigationItem
           item={{
             name: "Members",
diff --git a/apps/ui-playground/content/design/components/section.subsection.tsx b/apps/ui-playground/content/design/components/section.subsection.tsx
index dbb461880dcfe8..4aa34d82723822 100644
--- a/apps/ui-playground/content/design/components/section.subsection.tsx
+++ b/apps/ui-playground/content/design/components/section.subsection.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -7,6 +9,8 @@ import { Input, Switch } from "@calcom/ui/components/form";
 import { Section } from "@calcom/ui/components/section";
 
 export const SubSectionExample = () => {
+const t = useTranslations("section-subsection-demo");
+
   const [isMainOpen, setIsMainOpen] = useState(true);
   const [isFirstSubsectionOpen, setIsFirstSubsectionOpen] = useState(true);
   const [isSecondSubsectionOpen, setIsSecondSubsectionOpen] = useState(true);
@@ -37,7 +41,7 @@ export const SubSectionExample = () => {
               </Section.SubSectionHeader>
               {isFirstSubsectionOpen && (
                 <Section.SubSectionContent>
-                  <p>This is the content of the first subsection.</p>
+                  <p>{t('content.first-subsection-description')}</p>
                 </Section.SubSectionContent>
               )}
             </Section.SubSection>
@@ -52,10 +56,10 @@ export const SubSectionExample = () => {
               {isSecondSubsectionOpen && (
                 <Section.SubSectionContent>
                   <div className="flex gap-3 px-3 py-1.5">
-                    <div className="text-subtle w-full text-sm font-medium">Field Name</div>
-                    <div className="text-subtle w-full text-sm font-medium">Field Type</div>
-                    <div className="text-subtle w-full text-sm font-medium">Value</div>
-                    <div className="text-subtle w-full text-sm font-medium">When to Write</div>
+                    <div className="text-subtle w-full text-sm font-medium">{t('table-headers.field-name')}</div>
+                    <div className="text-subtle w-full text-sm font-medium">{t('table-headers.field-type')}</div>
+                    <div className="text-subtle w-full text-sm font-medium">{t('table-headers.value')}</div>
+                    <div className="text-subtle w-full text-sm font-medium">{t('table-headers.when-to-write')}</div>
                   </div>
                   <Section.SubSectionNested>
                     <div className="flex gap-3">
diff --git a/apps/ui-playground/content/design/components/select.disabled.tsx b/apps/ui-playground/content/design/components/select.disabled.tsx
index 34da21f6a8dae9..ecf403373ed14a 100644
--- a/apps/ui-playground/content/design/components/select.disabled.tsx
+++ b/apps/ui-playground/content/design/components/select.disabled.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
@@ -12,16 +14,20 @@ const options = [
   { value: "coffee", label: "Coffee" },
 ];
 
-export const DisabledExample: React.FC = () => (
+export const DisabledExample: React.FC = () =>  {
+const t = useTranslations("select-disabled-examples");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-4 md:w-80">
-      <Select options={options} isDisabled placeholder="This select is disabled..." />
+      <Select options={options} isDisabled placeholder={t('placeholders.disabled-select')} />
       <SelectField
-        label="Disabled Field"
+        label={t('labels.disabled-field')}
         options={options}
         isDisabled
-        placeholder="This field is disabled..."
+        placeholder={t('placeholders.disabled-field')}
       />
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/select.multi.tsx b/apps/ui-playground/content/design/components/select.multi.tsx
index 497d5e62dc0e40..e32aa4b15e12fe 100644
--- a/apps/ui-playground/content/design/components/select.multi.tsx
+++ b/apps/ui-playground/content/design/components/select.multi.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -14,6 +16,8 @@ const options = [
 ];
 
 export const MultiExample: React.FC = () => {
+const t = useTranslations("select-multi-examples");
+
   const [multiValue, setMultiValue] = useState<{ value: string; label: string }[]>([]);
 
   return (
@@ -25,7 +29,7 @@ export const MultiExample: React.FC = () => {
           onChange={(newValue) => setMultiValue(newValue as { value: string; label: string }[])}
           isMulti
           isClearable
-          placeholder="Choose multiple flavors..."
+          placeholder={t('placeholders.choose-multiple-flavors')}
         />
         <Select
           options={options}
@@ -33,7 +37,7 @@ export const MultiExample: React.FC = () => {
           onChange={(newValue) => setMultiValue(newValue as { value: string; label: string }[])}
           isMulti
           isClearable
-          placeholder="Choose multiple flavors... (small)"
+          placeholder={t('placeholders.choose-multiple-flavors-small')}
           size="sm"
         />
       </div>
diff --git a/apps/ui-playground/content/design/components/textarea.basic.tsx b/apps/ui-playground/content/design/components/textarea.basic.tsx
index c57fadb49c1ca3..b51885b32649d8 100644
--- a/apps/ui-playground/content/design/components/textarea.basic.tsx
+++ b/apps/ui-playground/content/design/components/textarea.basic.tsx
@@ -1,18 +1,24 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { TextAreaField } from "@calcom/ui/components/form";
 
-export const BasicExample: React.FC = () => (
+export const BasicExample: React.FC = () =>  {
+const t = useTranslations("textarea-examples");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-y-4 md:w-80">
-      <TextAreaField name="message" placeholder="Enter your message..." defaultValue="" />
+      <TextAreaField name="message" placeholder={t('placeholders.message-input')} defaultValue="" />
       <TextAreaField
         name="description"
-        placeholder="With default value..."
+        placeholder={t('placeholders.default-value-demo')}
         defaultValue="This is a default value for the textarea component."
       />
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/apps/ui-playground/content/design/components/toast.variants.tsx b/apps/ui-playground/content/design/components/toast.variants.tsx
index 5c0cc7e6bf494a..cbabaafe94f497 100644
--- a/apps/ui-playground/content/design/components/toast.variants.tsx
+++ b/apps/ui-playground/content/design/components/toast.variants.tsx
@@ -1,36 +1,36 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 
 import { Button } from "@calcom/ui/components/button";
 import { showToast } from "@calcom/ui/components/toast";
 
-export const VariantsExample: React.FC = () => (
+export const VariantsExample: React.FC = () =>  {
+const t = useTranslations("toast-variants");
+
+return (
   <RenderComponentWithSnippet>
     <div className="space-x-2">
       <Button
         color="primary"
         onClick={() => {
           showToast("This is a success message", "success");
-        }}>
-        Success
-      </Button>
+        }}>{t('buttons.success')}</Button>
 
       <Button
         color="minimal"
         onClick={() => {
           showToast("This is a warning message", "warning");
-        }}>
-        Warning
-      </Button>
+        }}>{t('buttons.warning')}</Button>
 
       <Button
         color="destructive"
         onClick={() => {
           showToast("This is an error message", "error");
-        }}>
-        Error
-      </Button>
+        }}>{t('buttons.error')}</Button>
     </div>
   </RenderComponentWithSnippet>
-);
+)
+};
diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 00000000000000..014e9bd1aaefea
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,263 @@
+{
+  "table-examples": {
+    "headers": {
+      "column-one": "Header Column 1",
+      "column-two": "Header Column 2"
+    },
+    "body": {
+      "row-one-cell-one": "Row 1, Cell 1",
+      "row-one-cell-two": "Row 1, Cell 2",
+      "row-two-cell-one": "Row 2, Cell 1",
+      "row-two-cell-two": "Row 2, Cell 2"
+    },
+    "footer": {
+      "row-one-cell-one": "Row 3(footer), Cell 1",
+      "row-one-cell-two": "Row 3(footer), Cell 2"
+    },
+    "caption": {
+      "table-description": "Table Caption"
+    },
+    "titles": {
+      "column-one": "Title Column 1",
+      "column-two": "Title Column 2"
+    },
+    "cells": {
+      "row-one-cell-one": "Row 1, Cell 1",
+      "row-one-cell-two": "Row 1, Cell 2",
+      "row-two-cell-one": "Row 2, Cell 1",
+      "row-two-cell-two": "Row 2, Cell 2"
+    }
+  },
+  "logo-component": {
+    "brand": {
+      "alt-text": "Cal",
+      "title": "Cal",
+      "alt-text-icon": "Cal",
+      "title-icon": "Cal"
+    }
+  },
+  "boolean-toggle-group": {
+    "options": {
+      "yes": "Yes",
+      "no": "No"
+    }
+  },
+  "date-picker": {
+    "placeholder": {
+      "select-date": "Pick a date"
+    }
+  },
+  "card-component": {
+    "media": {
+      "play-video-alt": "play feature video"
+    }
+  },
+  "app-list-card": {
+    "logo": {
+      "alt-text": "{title} logo"
+    },
+    "badges": {
+      "template": "Template"
+    }
+  },
+  "toast-variants": {
+    "buttons": {
+      "success": "Success",
+      "warning": "Warning",
+      "error": "Error"
+    }
+  },
+  "textarea-examples": {
+    "placeholders": {
+      "message-input": "Enter your message...",
+      "default-value-demo": "With default value..."
+    }
+  },
+  "select-multi-examples": {
+    "placeholders": {
+      "choose-multiple-flavors": "Choose multiple flavors...",
+      "choose-multiple-flavors-small": "Choose multiple flavors... (small)"
+    }
+  },
+  "select-disabled-examples": {
+    "placeholders": {
+      "disabled-select": "This select is disabled...",
+      "disabled-field": "This field is disabled..."
+    },
+    "labels": {
+      "disabled-field": "Disabled Field"
+    }
+  },
+  "section-subsection-demo": {
+    "content": {
+      "first-subsection-description": "This is the content of the first subsection."
+    },
+    "table-headers": {
+      "field-name": "Field Name",
+      "field-type": "Field Type",
+      "value": "Value",
+      "when-to-write": "When to Write"
+    }
+  },
+  "navigation-sidebar-demo": {
+    "sections": {
+      "manage": "Manage"
+    }
+  },
+  "multi-input-field-demo": {
+    "sections": {
+      "key-value-pairs": {
+        "title": "Key-Value Pairs",
+        "description": "Allows inputting keys and values"
+      },
+      "custom-placeholders": {
+        "title": "Custom Placeholders",
+        "placeholders": {
+          "enter-name": "Enter your name",
+          "enter-email": "Enter your email", 
+          "enter-phone": "Enter your phone"
+        }
+      },
+      "without-move-buttons": {
+        "title": "Without Move Buttons",
+        "placeholders": {
+          "static-option-1": "Static option 1",
+          "static-option-2": "Static option 2"
+        }
+      },
+      "custom-add-button": {
+        "title": "Custom Add Button Label",
+        "placeholders": {
+          "social-media-link": "Social media link"
+        }
+      }
+    },
+    "labels": {
+      "environment-variable": "Environment Variable",
+      "value": "Value"
+    },
+    "buttons": {
+      "add-social-media-link": "Add another social media link"
+    }
+  },
+  "input-states-demo": {
+    "placeholders": {
+      "state-input": "{state} input"
+    }
+  },
+  "empty-screen-demo": {
+    "headlines": {
+      "no-links-found": "No links found"
+    },
+    "messages": {
+      "no-links-description": "Create a new link to share"
+    },
+    "buttons": {
+      "create-link": "Create Link",
+      "import-links": "Import Links"
+    }
+  },
+  "empty-screen-basic": {
+    "headlines": {
+      "no-upcoming-meetings": "No upcoming meetings"
+    },
+    "messages": {
+      "no-meetings-description": "Create a meeting to get started"
+    },
+    "buttons": {
+      "create-meeting": "Create Meeting"
+    }
+  },
+  "dialog-large-content-demo": {
+    "dialog": {
+      "title": "Terms and Conditions",
+      "description": "Please review our terms and conditions carefully"
+    },
+    "buttons": {
+      "open-dialog": "Open Large Content Dialog",
+      "decline": "Decline",
+      "accept-terms": "Accept Terms"
+    },
+    "content": {
+      "section-heading": "Section {i}",
+      "lorem-paragraph-one": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.",
+      "lorem-paragraph-two": "Suspendisse in orci enim. Integer vel sapien at risus ultrices ornare nec sit amet nibh. Duis blandit lectus ac odio rhoncus non congue diam bibendum. Aliquam erat volutpat."
+    },
+    "notices": {
+      "important-heading": "Important Notice",
+      "important-description": "This is a highlighted section within the content to demonstrate how different UI elements appear within a scrollable dialog."
+    }
+  },
+  "checkbox-label-position-demo": {
+    "descriptions": {
+      "label-above-mobile-default": "Description with label above (default on mobile)",
+      "label-side-desktop": "Description with label to the side (on larger screens)"
+    },
+    "labels": {
+      "above-position": "Label Above",
+      "side-position": "Label to the Side"
+    }
+  },
+  "button-variant-demo": {
+    "variant-labels": {
+      "default": "Default"
+    }
+  },
+  "button-disabled-demo": {
+    "headings": {
+      "disabled-state": "Disabled State",
+      "disabled-with-icons": "Disabled with Icons"
+    },
+    "labels": {
+      "disabled": "Disabled",
+      "with-icon": "With Icon"
+    }
+  },
+  "avatar-tooltip-demo": {
+    "avatar": {
+      "alt-text": "With tooltip"
+    },
+    "tooltip": {
+      "hover-message": "Hover me!"
+    },
+    "instructions": {
+      "hover-tooltip": "Hover to see tooltip"
+    }
+  },
+  "avatar-image-demo": {
+    "alt-text": {
+      "with-image": "With image",
+      "without-image": "Without image"
+    },
+    "labels": {
+      "with-image": "With Image",
+      "without-image": "Without Image"
+    }
+  },
+  "alert-actions-demo": {
+    "title": {
+      "severity-alert-with-actions": "{severity} Alert with Actions"
+    },
+    "messages": {
+      "alert-with-action-buttons": "This is a {severity} alert with action buttons."
+    },
+    "actions": {
+      "dismiss": "Dismiss",
+      "view": "View"
+    }
+  },
+  "icon-grid-demo": {
+    "actions": {
+      "copy-component": "Copy Component"
+    },
+    "inputs": {
+      "search-placeholder": "Search icons..."
+    }
+  },
+  "homepage-hero": {
+    "heading": {
+      "open-ui-for-absolutely": "Open UI for absolutely",
+      "everyone": "everyone"
+    }
+  }
+}
diff --git a/packages/ui/components/app-list-card/AppListCard.tsx b/packages/ui/components/app-list-card/AppListCard.tsx
index 1a47164f3b6580..c9f0495440bd83 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 { useTranslations } from "next-intl";
+
 
 import type { ReactNode } from "react";
 
@@ -36,6 +38,8 @@ export type AppListCardProps = {
 } & ShouldHighlight;
 
 export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) => {
+const tIntl = useTranslations("app-list-card");
+
   const { t } = useLocale();
   const {
     logo,
@@ -58,7 +62,7 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
           <img
             className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10")}
             src={logo}
-            alt={`${title} logo`}
+            alt={tIntl('logo.alt-text', { "title": title })}
           />
         ) : null}
         <div className="flex grow flex-col gap-y-1 truncate">
@@ -66,7 +70,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">{tIntl('badges.template')}</Badge>}
             </div>
           </div>
           <ListItemText component="p">{description}</ListItemText>
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index b9d42dba88572a..430427b4011d45 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 // @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 = useTranslations("card-component");
+
   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('media.play-video-alt')} src={thumbnailUrl} />
         </a>
       )}
 
diff --git a/packages/ui/components/form/datepicker/DatePicker.tsx b/packages/ui/components/form/datepicker/DatePicker.tsx
index cf462dd58c3f97..74be24e78b409d 100644
--- a/packages/ui/components/form/datepicker/DatePicker.tsx
+++ b/packages/ui/components/form/datepicker/DatePicker.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import * as Popover from "@radix-ui/react-popover";
 import { format } from "date-fns";
 
@@ -15,6 +16,8 @@ type Props = {
 };
 
 const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props) => {
+const t = useTranslations("date-picker");
+
   function handleDayClick(newDate: Date) {
     onDatesChange?.(newDate ?? new Date());
   }
@@ -42,7 +45,7 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
             color="secondary"
             EndIcon="calendar"
             className={classNames("justify-between text-left font-normal", !date && "text-subtle")}>
-            {date ? <>{format(date, "LLL dd, y")}</> : <span>Pick a date</span>}
+            {date ? <>{format(date, "LLL dd, y")}</> : <span>{t('placeholder.select-date')}</span>}
           </Button>
         </Popover.Trigger>
         <Popover.Content
diff --git a/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx b/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
index 781334513c7004..e9fd4ac3ec6992 100644
--- a/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 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 = useTranslations("boolean-toggle-group");
+
   // 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));
@@ -87,16 +91,12 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
       <ToggleGroupItemPrimitive
         className={classNames(boolean(yesNoValue) ? selectedClass : unselectedClass)}
         disabled={disabled}
-        value="yes">
-        Yes
-      </ToggleGroupItemPrimitive>
+        value="yes">{t('options.yes')}</ToggleGroupItemPrimitive>
 
       <ToggleGroupItemPrimitive
         disabled={disabled}
         className={classNames(!boolean(yesNoValue) ? selectedClass : unselectedClass)}
-        value="no">
-        No
-      </ToggleGroupItemPrimitive>
+        value="no">{t('options.no')}</ToggleGroupItemPrimitive>
     </ToggleGroupPrimitive>
   );
 };
diff --git a/packages/ui/components/logo/Logo.tsx b/packages/ui/components/logo/Logo.tsx
index 0fe05ba39a8545..1340d2f8b9c041 100644
--- a/packages/ui/components/logo/Logo.tsx
+++ b/packages/ui/components/logo/Logo.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import classNames from "@calcom/ui/classNames";
 
 export function Logo({
@@ -13,16 +14,18 @@ export function Logo({
   className?: string;
   src?: string;
 }) {
+const t = useTranslations("logo-component");
+
   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('brand.alt-text')} title={t('brand.title')} src={`${src}?type=icon`} />
         ) : (
           <img
             className={classNames(small ? "h-4 w-auto" : "h-5 w-auto", "dark:invert")}
-            alt="Cal"
-            title="Cal"
+            alt={t('brand.alt-text-icon')}
+            title={t('brand.title-icon')}
             src={src}
           />
         )}
diff --git a/packages/ui/components/table/TableExamples.tsx b/packages/ui/components/table/TableExamples.tsx
index 5b6616d45c08b7..7c99190ea7912c 100644
--- a/packages/ui/components/table/TableExamples.tsx
+++ b/packages/ui/components/table/TableExamples.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 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 = useTranslations("table-examples");
+
+return (
   <TableNew>
     <TableHeader>
       <TableRow>
-        <TableHead>Header Column 1</TableHead>
-        <TableHead>Header Column 2</TableHead>
+        <TableHead>{t('headers.column-one')}</TableHead>
+        <TableHead>{t('headers.column-two')}</TableHead>
       </TableRow>
     </TableHeader>
     <TableBody>
       <TableRow>
-        <TableCell>Row 1, Cell 1</TableCell>
-        <TableCell>Row 1, Cell 2</TableCell>
+        <TableCell>{t('body.row-one-cell-one')}</TableCell>
+        <TableCell>{t('body.row-one-cell-two')}</TableCell>
       </TableRow>
       <TableRow>
-        <TableCell>Row 2, Cell 1</TableCell>
-        <TableCell>Row 2, Cell 2</TableCell>
+        <TableCell>{t('body.row-two-cell-one')}</TableCell>
+        <TableCell>{t('body.row-two-cell-two')}</TableCell>
       </TableRow>
     </TableBody>
     <TableFooter>
       <TableRow>
-        <TableCell>Row 3(footer), Cell 1</TableCell>
-        <TableCell>Row 3(footer), Cell 2</TableCell>
+        <TableCell>{t('footer.row-one-cell-one')}</TableCell>
+        <TableCell>{t('footer.row-one-cell-two')}</TableCell>
       </TableRow>
     </TableFooter>
-    <TableCaption>Table Caption</TableCaption>
+    <TableCaption>{t('caption.table-description')}</TableCaption>
   </TableNew>
-);
+)
+};
+
+export const TableExampleComponent = () =>  {
+const t = useTranslations("table-examples");
 
-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('titles.column-one')}</Table.ColumnTitle>
+        <Table.ColumnTitle>{t('titles.column-two')}</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('cells.row-one-cell-one')}</Table.Cell>
+        <Table.Cell>{t('cells.row-one-cell-two')}</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('cells.row-two-cell-one')}</Table.Cell>
+        <Table.Cell>{t('cells.row-two-cell-two')}</Table.Cell>
       </Table.Row>
       <Table.Row>
         <TableActions
@@ -80,4 +88,5 @@ export const TableExampleComponent = () => (
       </Table.Row>
     </Table.Body>
   </Table>
-);
+)
+};