diff --git a/packages/twenty-docs/l/ar/developers/extend/apps/layout/front-components.mdx b/packages/twenty-docs/l/ar/developers/extend/apps/layout/front-components.mdx
index 3b561ff00ed..5bfbe17c7bd 100644
--- a/packages/twenty-docs/l/ar/developers/extend/apps/layout/front-components.mdx
+++ b/packages/twenty-docs/l/ar/developers/extend/apps/layout/front-components.mdx
@@ -7,7 +7,7 @@ icon: window-maximize
المكوّنات الأمامية هي مكوّنات React تُعرَض مباشرة داخل واجهة مستخدم Twenty. تعمل ضمن **Web Worker معزول** باستخدام Remote DOM — تُنفَّذ شيفرتك داخل iframe معزول ذو منشأ غير شفاف، ومع ذلك لا تزال واجهتها تُعرَض محليًا داخل الصفحة بدلًا من أن تظل محصورة داخل ذلك الـ iframe.
-Front components are still under active development. Your code runs against a partial DOM, not a real browser page, so advanced usages can fail, often silently. See [Current limitations](#current-limitations).
+لا تزال مكوّنات Front قيد التطوير النشط. يعمل الكود الخاص بك على DOM جزئي، وليس على صفحة متصفح حقيقية، لذلك يمكن أن تفشل الاستخدامات المتقدمة، وغالبًا من دون أي إشعار. راجع [القيود الحالية](#current-limitations).
## أين يمكن استخدام مكوّنات الواجهة الأمامية
@@ -73,10 +73,10 @@ export default defineCommandMenuItem({
| الحقل | مطلوب | الوصف |
| --------------------- | ----- | ------------------------------------------------------------- |
-| `universalIdentifier` | Yes | معرّف فريد ثابت لهذا المكوّن |
+| `universalIdentifier` | نعم | معرّف فريد ثابت لهذا المكوّن |
| `component` | نعم | دالة مكوّن React |
-| `name` | No | الاسم المعروض |
-| `description` | No | وصف لما يفعله المكوّن |
+| `name` | لا | الاسم المعروض |
+| `description` | لا | وصف لما يفعله المكوّن |
| `isHeadless` | لا | عيّنه على `true` إذا كان المكوّن بلا واجهة مرئية (انظر أدناه) |
## وضع مكوّن أمامي على صفحة
@@ -701,71 +701,71 @@ const Card = () => {
للتفرّع بناءً على النظام النشِط (active scheme) صراحةً، اقرأه باستخدام `useColorScheme()` من `twenty-sdk/front-component`، والذي يعيد `'light'` أو `'dark'`.
-## Current limitations
+## القيود الحالية
-Front components are under active development. Rendering, styling and handling events works well. Anything that reaches *past* rendering (measuring an element, calling a DOM method on a ref, portaling outside your tree, touching browser storage) is missing or incomplete today, and most of it fails silently: no exception, and no TypeScript error either, since the scaffold is typed against the full browser DOM.
+مكوّنات Front قيد التطوير النشط. الترسيم والتنسيق والتعامل مع الأحداث تعمل بشكل جيد. أي شيء يتجاوز *مرحلة* الترسيم (قياس عنصر، استدعاء دالة DOM على ref، إنشاء portal خارج الشجرة الخاصة بك، أو لمس تخزين المتصفح) مفقود أو غير مكتمل حاليًا، ومعظم هذه الحالات تفشل بصمت: لا يتم رمي استثناء، ولا يظهر خطأ TypeScript أيضًا، لأن القالب مكتوب استنادًا إلى DOM الكامل للمتصفح.
-If one of these blocks you, [open an issue](https://github.com/twentyhq/twenty/issues/new/choose) so it gets prioritized.
+إذا كان أحد هذه الأمور يعيقك، [افتح تذكرة](https://github.com/twentyhq/twenty/issues/new/choose) ليتم إعطاؤه أولوية.
-### Layout and measurement
+### التخطيط والقياس
-Nothing can measure itself yet.
+لا يوجد أي شيء يمكنه قياس نفسه بعد.
-| API | What happens |
-| ------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `getBoundingClientRect()`, `getClientRects()` | Throws |
-| `offsetWidth`, `clientWidth`, `scrollWidth`, `offsetTop`, ... | Silently `undefined`, so `width ?? 0` yields `0` and `width > 600` is always false |
-| `ResizeObserver`, `IntersectionObserver` | `ReferenceError` (`typeof` guards do work) |
-| `window.matchMedia()`, `window.getComputedStyle()` | Throws |
-| `window.innerWidth`, `innerHeight`, `devicePixelRatio` | Silently `undefined` |
-| `new MutationObserver(fn)` | Constructs, then `.observe()` throws |
+| واجهة برمجة التطبيقات | ما الذي يحدث |
+| ------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `getBoundingClientRect()`, `getClientRects()` | يرمي استثناء |
+| `offsetWidth`, `clientWidth`, `scrollWidth`, `offsetTop`, ... | قيمة `undefined` بصمت، لذا فإن `width ?? 0` تعطي `0` و `width > 600` تكون دائمًا خاطئة |
+| `ResizeObserver`, `IntersectionObserver` | `ReferenceError` (`typeof` guards تعمل) |
+| `window.matchMedia()`, `window.getComputedStyle()` | يرمي استثناء |
+| `window.innerWidth`, `innerHeight`, `devicePixelRatio` | قيمة `undefined` بصمت |
+| `new MutationObserver(fn)` | يتم الإنشاء، ثم ترمي `.observe()` استثناء |
-So recharts `ResponsiveContainer`, Floating UI / Popper, list virtualization and drag-to-resize do not work yet. Do layout in CSS instead: your stylesheet reaches the real page, so flexbox, grid, `aspect-ratio`, `clamp()` and `@container` all behave normally.
+لذلك فإن recharts `ResponsiveContainer`، و Floating UI / Popper، وvirtualization للقوائم، والسحب لتغيير الحجم لا تعمل بعد. قم بتنفيذ التخطيط في CSS بدلًا من ذلك: ورقة الأنماط الخاصة بك تصل إلى الصفحة الحقيقية، لذا فإن flexbox و grid و `aspect-ratio` و `clamp()` و `@container` كلها تتصرف بشكل طبيعي.
-`requestAnimationFrame`, `fetch`, `setTimeout` and `queueMicrotask` work without the `window.` prefix. Only `window.requestAnimationFrame(...)` and friends throw.
+`requestAnimationFrame`, `fetch`, `setTimeout` و `queueMicrotask` تعمل بدون بادئة `window.`. فقط `window.requestAnimationFrame(...)` وما شابهها ترمي استثناء.
-### DOM access
+### الوصول إلى DOM
-A `ref` gives you a sandbox element, not an `HTMLElement`.
+يعطيك `ref` عنصرًا في sandbox، وليس `HTMLElement`.
-| What you write | What happens | Use instead |
-| ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `ref.current.focus()`, `.click()`, `.select()`, `.setSelectionRange()`, `.scrollIntoView()`, `video.play()` | Throws | Controlled components; read values from `event.target` |
-| `element.classList.add(...)` | Throws (`classList` is `undefined`) | Build the `className` string yourself |
-| `document.getElementById()`, `getElementsByClassName()`, `createTreeWalker()` | Throws | `querySelector()` / `querySelectorAll()`, which work |
-| `document.activeElement` | Always `undefined` | Track focus with `onFocus` / `onBlur` |
-| `\