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..00a3c9bf255e2b 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-component");
+
   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-component");
+
   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('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..eefe896f4ea96d 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";
 
@@ -9,20 +11,24 @@ const severities = ["neutral", "info", "warning", "error"] as const;
 export const ActionsExample: React.FC = () => (
   <RenderComponentWithSnippet>
     <div className="no-prose space-y-4">
-      {severities.map((severity) => (
+      {severities.map((severity) =>  {
+const t = useTranslations("alert-actions-demo");
+
+return (
         <Alert
           key={severity}
           severity={severity}
-          title={`${severity.charAt(0).toUpperCase() + severity.slice(1)} Alert with Actions`}
+          title={t('titles.severity-alert-with-actions', { "severityCharAt0ToUpperCaseSeveritySlice1": severity.charAt(0).toUpperCase() + severity.slice(1) })}
           message={`This is a ${severity} alert with action buttons.`}
           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('buttons.dismiss')}</button>
+              <button className="rounded-md px-3 py-2 text-sm font-medium hover:opacity-90">{t('buttons.view')}</button>
             </div>
           }
         />
-      ))}
+      )
+})}
     </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..09bdbc98dbb1e5 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";
@@ -12,9 +14,12 @@ const sizes = ["xs", "sm", "base", "lg"] as const;
 export const VariantExample: React.FC = () => (
   <RenderComponentWithSnippet>
     <div className="space-y-8">
-      {variants.map((variant) => (
+      {variants.map((variant) =>  {
+const t = useTranslations("button-variant-demo");
+
+return (
         <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('headings.variant-default_0') : variant}</h3>
           <div className="space-y-6">
             {colors.map((color) => (
               <div key={color} className="space-y-2">
@@ -37,7 +42,8 @@ export const VariantExample: React.FC = () => (
             ))}
           </div>
         </div>
-      ))}
+      )
+})}
     </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..d0d4d836a7ed74 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");
+
+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-large-screens')}
           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..48d0de562cd74a 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,41 @@ 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-example");
+
   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"
             enableOverflow>
             <div className="space-y-6">
-              {Array.from({ length: 5 }).map((_, i) => (
+              {Array.from({ length: 5 }).map((_, i) =>  {
+const t = useTranslations("dialog-large-content-example");
+
+return (
                 <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 })}</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.highlighted-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..21ab9e4742a946 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-example");
+
+return (
   <RenderComponentWithSnippet>
     <EmptyScreen
       Icon="calendar"
       headline="No upcoming meetings"
-      description="Create a meeting to get started"
-      buttonText="Create Meeting"
+      description={t('messages.create-meeting-prompt')}
+      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..c76aab834195de 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-raw-button");
+
+return (
   <RenderComponentWithSnippet>
     <EmptyScreen
       Icon="link"
       headline="No links found"
-      description="Create a new link to share"
+      description={t('descriptions.create-new-link')}
       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..0f18a013aea711 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-examples");
+
   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,7 +40,7 @@ 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"]}
@@ -45,7 +49,7 @@ export const CustomizationExample: React.FC = () => {
             </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"]}
@@ -55,12 +59,12 @@ export const CustomizationExample: React.FC = () => {
             </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"]}
                 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..b42d898a5572ef 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");
+
   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..d97d353b9a8315
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,241 @@
+{
+  "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"
+    },
+    "images": {
+      "cover-alt": "cover"
+    }
+  },
+  "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": {
+    "sections": {
+      "manage": "Manage"
+    }
+  },
+  "multi-input-field-examples": {
+    "sections": {
+      "key-value-pairs": {
+        "title": "Key-Value Pairs",
+        "description": "Allows inputting keys and values"
+      },
+      "custom-placeholders": {
+        "title": "Custom Placeholders"
+      },
+      "without-move-buttons": {
+        "title": "Without Move Buttons"
+      },
+      "custom-add-button": {
+        "title": "Custom Add Button Label"
+      }
+    },
+    "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-raw-button": {
+    "descriptions": {
+      "create-new-link": "Create a new link to share"
+    },
+    "buttons": {
+      "create-link": "Create Link",
+      "import-links": "Import Links"
+    }
+  },
+  "empty-screen-basic-example": {
+    "messages": {
+      "create-meeting-prompt": "Create a meeting to get started"
+    },
+    "buttons": {
+      "create-meeting": "Create Meeting"
+    }
+  },
+  "dialog-large-content-example": {
+    "buttons": {
+      "open-dialog": "Open Large Content Dialog",
+      "decline": "Decline",
+      "accept-terms": "Accept Terms"
+    },
+    "content": {
+      "section-heading": "Section {i}1",
+      "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",
+      "highlighted-description": "This is a highlighted section within the content to demonstrate how different UI elements appear within a scrollable dialog."
+    }
+  },
+  "checkbox-label-position": {
+    "descriptions": {
+      "label-above-mobile-default": "Description with label above (default on mobile)",
+      "label-side-large-screens": "Description with label to the side (on larger screens)"
+    },
+    "labels": {
+      "above-position": "Label Above",
+      "side-position": "Label to the Side"
+    }
+  },
+  "button-variant-demo": {
+    "headings": {
+      "variant-default_0": "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": {
+    "titles": {
+      "severity-alert-with-actions": "{severityCharAt0ToUpperCaseSeveritySlice1} Alert with Actions"
+    },
+    "buttons": {
+      "dismiss": "Dismiss",
+      "view": "View"
+    }
+  },
+  "icon-grid-component": {
+    "actions": {
+      "copy-component": "Copy Component"
+    },
+    "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 e770d394d06fd3..dc389d48dd9d60 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";
 
@@ -43,6 +45,8 @@ export type AppListCardProps = {
 } & ShouldHighlight;
 
 export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) => {
+const t = useTranslations("app-list-card");
+
   const { t } = useLocale();
   const {
     logo,
@@ -70,7 +74,7 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
           <img
             className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10 flex-shrink-0")}
             src={logo}
-            alt={`${title} logo`}
+            alt={t('logo.alt-text', { "title": title })}
           />
         ) : null}
         <div className="flex min-w-0 grow flex-col gap-y-1">
@@ -81,7 +85,7 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
             </h3>
             <div className="flex flex-shrink-0 items-center gap-x-2">
               {isDefault && <Badge variant="green">{t("default")}</Badge>}
-              {isTemplate && <Badge variant="red">Template</Badge>}
+              {isTemplate && <Badge variant="red">{t('badges.template')}</Badge>}
             </div>
           </div>
           <ListItemText
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index 2c3e3d66579f40..ffd9558b488b2d 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";
@@ -158,6 +159,8 @@ export function Card({
   coverPhoto,
   buttonClassName,
 }: BaseCardProps) {
+const t = useTranslations("card-component");
+
   const LinkComponent = learnMore && learnMore.href.startsWith("https") ? "a" : Link;
   return (
     <div
@@ -225,11 +228,11 @@ export function Card({
               strokeLinejoin="round"
             />
           </svg>
-          <img alt="play feature video" src={thumbnailUrl} />
+          <img alt={t('media.play-video-alt')} src={thumbnailUrl} />
         </a>
       )}
       {variant === "NewLaunchSidebarCard" && coverPhoto && (
-        <img alt="cover" className="mt-3 w-full" src={coverPhoto} />
+        <img alt={t('images.cover-alt')} className="mt-3 w-full" src={coverPhoto} />
       )}
 
       {/* TODO: this should be CardActions https://mui.com/material-ui/api/card-actions/ */}
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>
-);
+)
+};