From 4bfc0a79c7e4f69337a2299d2989d56e06a631c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Mon, 22 Dec 2025 14:03:22 +0100
Subject: [PATCH] I18n Docs (#16746)

Attempt to fix translations...

---------

Co-authored-by: github-actions <github-actions@twenty.com>
---
 .github/workflows/docs-i18n-pull.yaml         |   3 +-
 packages/twenty-docs/l/ar/twenty-ui/input.mdx |   8 +
 .../l/ar/twenty-ui/input/block-editor.mdx     |  34 ++
 .../twenty-docs/l/ar/twenty-ui/input/text.mdx | 153 ++++++
 .../l/ar/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/cs/twenty-ui/display/tag.mdx            |  44 ++
 packages/twenty-docs/l/cs/twenty-ui/input.mdx |   8 +
 .../twenty-docs/l/cs/twenty-ui/navigation.mdx |   8 +
 .../l/cs/twenty-ui/navigation/breadcrumb.mdx  |  44 ++
 .../l/cs/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/de/twenty-ui/display/icons.mdx          |  83 ++++
 packages/twenty-docs/l/de/twenty-ui/input.mdx |   8 +
 .../l/de/twenty-ui/input/select.mdx           |  54 +++
 .../twenty-docs/l/de/twenty-ui/navigation.mdx |   8 +
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/de/twenty-ui/navigation/step-bar.mdx    |  38 ++
 .../l/es/twenty-ui/display/icons.mdx          |  83 ++++
 .../l/es/twenty-ui/display/tag.mdx            |  44 ++
 packages/twenty-docs/l/es/twenty-ui/input.mdx |   8 +
 .../l/es/twenty-ui/input/block-editor.mdx     |  34 ++
 .../l/es/twenty-ui/input/checkbox.mdx         |  47 ++
 .../twenty-docs/l/es/twenty-ui/navigation.mdx |   8 +
 .../l/es/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/es/twenty-ui/progress-bar.mdx           |  77 +++
 .../l/fr/twenty-ui/display/app-tooltip.mdx    |  88 ++++
 .../l/fr/twenty-ui/display/chip.mdx           | 148 ++++++
 .../l/fr/twenty-ui/display/icons.mdx          |  83 ++++
 packages/twenty-docs/l/fr/twenty-ui/input.mdx |   8 +
 .../l/fr/twenty-ui/input/block-editor.mdx     |  34 ++
 .../l/fr/twenty-ui/input/checkbox.mdx         |  47 ++
 .../l/fr/twenty-ui/input/color-scheme.mdx     |  73 +++
 .../l/fr/twenty-ui/input/icon-picker.mdx      |  56 +++
 .../l/fr/twenty-ui/input/image-input.mdx      |  37 ++
 .../l/fr/twenty-ui/input/radio.mdx            | 104 ++++
 .../l/fr/twenty-ui/input/select.mdx           |  54 +++
 .../twenty-docs/l/fr/twenty-ui/input/text.mdx | 153 ++++++
 .../twenty-docs/l/fr/twenty-ui/navigation.mdx |   8 +
 .../l/fr/twenty-ui/navigation/breadcrumb.mdx  |  44 ++
 .../l/fr/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../l/fr/twenty-ui/navigation/menu-item.mdx   | 458 ++++++++++++++++++
 .../l/fr/twenty-ui/navigation/step-bar.mdx    |  38 ++
 .../l/fr/twenty-ui/progress-bar.mdx           |  77 +++
 .../capabilities/profile-settings.mdx         |  43 ++
 .../l/it/twenty-ui/display/tag.mdx            |  44 ++
 packages/twenty-docs/l/it/twenty-ui/input.mdx |   8 +
 .../l/it/twenty-ui/input/block-editor.mdx     |  34 ++
 .../twenty-docs/l/it/twenty-ui/input/text.mdx | 153 ++++++
 .../twenty-docs/l/it/twenty-ui/navigation.mdx |   8 +
 .../l/it/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/it/twenty-ui/progress-bar.mdx           |  77 +++
 .../l/ja/twenty-ui/display/app-tooltip.mdx    |  88 ++++
 .../l/ja/twenty-ui/display/checkmark.mdx      |  69 +++
 .../l/ja/twenty-ui/display/chip.mdx           | 148 ++++++
 .../l/ja/twenty-ui/display/tag.mdx            |  44 ++
 packages/twenty-docs/l/ja/twenty-ui/input.mdx |   8 +
 .../l/ja/twenty-ui/input/block-editor.mdx     |  34 ++
 .../l/ja/twenty-ui/input/icon-picker.mdx      |  56 +++
 .../twenty-docs/l/ja/twenty-ui/navigation.mdx |   8 +
 .../l/ja/twenty-ui/navigation/breadcrumb.mdx  |  44 ++
 .../l/ja/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/ja/twenty-ui/navigation/step-bar.mdx    |  38 ++
 .../l/ko/twenty-ui/display/app-tooltip.mdx    |  88 ++++
 .../l/ko/twenty-ui/display/checkmark.mdx      |  69 +++
 .../l/ko/twenty-ui/display/icons.mdx          |  83 ++++
 .../l/ko/twenty-ui/display/tag.mdx            |  44 ++
 packages/twenty-docs/l/ko/twenty-ui/input.mdx |   8 +
 .../l/ko/twenty-ui/input/block-editor.mdx     |  34 ++
 .../l/ko/twenty-ui/input/checkbox.mdx         |  47 ++
 .../l/ko/twenty-ui/input/color-scheme.mdx     |  73 +++
 .../l/ko/twenty-ui/input/image-input.mdx      |  37 ++
 .../l/ko/twenty-ui/input/radio.mdx            | 104 ++++
 .../l/ko/twenty-ui/input/select.mdx           |  54 +++
 .../twenty-docs/l/ko/twenty-ui/navigation.mdx |   8 +
 .../l/ko/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../l/ko/twenty-ui/navigation/step-bar.mdx    |  38 ++
 .../l/pt/twenty-ui/display/app-tooltip.mdx    |  88 ++++
 packages/twenty-docs/l/pt/twenty-ui/input.mdx |   8 +
 .../l/pt/twenty-ui/input/block-editor.mdx     |  34 ++
 .../twenty-docs/l/pt/twenty-ui/navigation.mdx |   8 +
 .../l/pt/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../l/pt/twenty-ui/navigation/step-bar.mdx    |  38 ++
 packages/twenty-docs/l/ro/twenty-ui/input.mdx |   8 +
 .../l/ro/twenty-ui/input/block-editor.mdx     |  34 ++
 .../l/ro/twenty-ui/input/checkbox.mdx         |  47 ++
 .../l/ro/twenty-ui/input/icon-picker.mdx      |  56 +++
 .../twenty-docs/l/ro/twenty-ui/navigation.mdx |   8 +
 .../l/ro/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/ro/twenty-ui/navigation/step-bar.mdx    |  38 ++
 .../l/ro/twenty-ui/progress-bar.mdx           |  77 +++
 .../capabilities/profile-settings.mdx         |  43 ++
 .../l/ru/twenty-ui/display/app-tooltip.mdx    |  88 ++++
 packages/twenty-docs/l/ru/twenty-ui/input.mdx |   8 +
 .../l/ru/twenty-ui/input/block-editor.mdx     |  34 ++
 .../l/ru/twenty-ui/input/color-scheme.mdx     |  73 +++
 .../l/ru/twenty-ui/input/icon-picker.mdx      |  56 +++
 .../l/ru/twenty-ui/input/image-input.mdx      |  37 ++
 .../l/ru/twenty-ui/input/select.mdx           |  54 +++
 .../l/ru/twenty-ui/input/toggle.mdx           |  39 ++
 .../twenty-docs/l/ru/twenty-ui/navigation.mdx |   8 +
 .../l/ru/twenty-ui/navigation/breadcrumb.mdx  |  44 ++
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/ru/twenty-ui/navigation/step-bar.mdx    |  38 ++
 .../l/ru/twenty-ui/progress-bar.mdx           |  77 +++
 packages/twenty-docs/l/tr/twenty-ui/input.mdx |   8 +
 .../l/tr/twenty-ui/input/block-editor.mdx     |  34 ++
 .../l/tr/twenty-ui/input/select.mdx           |  54 +++
 .../twenty-docs/l/tr/twenty-ui/navigation.mdx |   8 +
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/zh/twenty-ui/display/app-tooltip.mdx    |  88 ++++
 .../l/zh/twenty-ui/display/soon-pill.mdx      |  18 +
 .../l/zh/twenty-ui/display/tag.mdx            |  44 ++
 packages/twenty-docs/l/zh/twenty-ui/input.mdx |   8 +
 .../l/zh/twenty-ui/input/block-editor.mdx     |  34 ++
 .../l/zh/twenty-ui/input/icon-picker.mdx      |  56 +++
 .../l/zh/twenty-ui/input/radio.mdx            | 104 ++++
 .../l/zh/twenty-ui/input/select.mdx           |  54 +++
 .../twenty-docs/l/zh/twenty-ui/input/text.mdx | 153 ++++++
 .../twenty-docs/l/zh/twenty-ui/navigation.mdx |   8 +
 .../l/zh/twenty-ui/navigation/breadcrumb.mdx  |  44 ++
 .../l/zh/twenty-ui/navigation/links.mdx       | 168 +++++++
 .../twenty-ui/navigation/navigation-bar.mdx   |  52 ++
 .../l/zh/twenty-ui/navigation/step-bar.mdx    |  38 ++
 128 files changed, 7890 insertions(+), 1 deletion(-)
 create mode 100644 packages/twenty-docs/l/ar/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/ar/twenty-ui/input/text.mdx
 create mode 100644 packages/twenty-docs/l/ar/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/cs/twenty-ui/display/tag.mdx
 create mode 100644 packages/twenty-docs/l/cs/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/cs/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx
 create mode 100644 packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/de/twenty-ui/display/icons.mdx
 create mode 100644 packages/twenty-docs/l/de/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/de/twenty-ui/input/select.mdx
 create mode 100644 packages/twenty-docs/l/de/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/display/icons.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/display/tag.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/display/chip.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/display/icons.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input/color-scheme.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input/radio.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input/select.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/input/text.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/navigation/breadcrumb.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/navigation/menu-item.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/navigation/step-bar.mdx
 create mode 100644 packages/twenty-docs/l/fr/twenty-ui/progress-bar.mdx
 create mode 100644 packages/twenty-docs/l/fr/user-guide/settings/capabilities/profile-settings.mdx
 create mode 100644 packages/twenty-docs/l/it/twenty-ui/display/tag.mdx
 create mode 100644 packages/twenty-docs/l/it/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/it/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/it/twenty-ui/input/text.mdx
 create mode 100644 packages/twenty-docs/l/it/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/it/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/it/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/it/twenty-ui/progress-bar.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/display/app-tooltip.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/display/checkmark.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/display/chip.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/display/tag.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/input/icon-picker.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/navigation/breadcrumb.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/ja/twenty-ui/navigation/step-bar.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/display/app-tooltip.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/display/checkmark.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/display/icons.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/display/tag.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/input/checkbox.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/input/color-scheme.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/input/image-input.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/input/radio.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/input/select.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/ko/twenty-ui/navigation/step-bar.mdx
 create mode 100644 packages/twenty-docs/l/pt/twenty-ui/display/app-tooltip.mdx
 create mode 100644 packages/twenty-docs/l/pt/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/pt/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/pt/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/pt/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/pt/twenty-ui/navigation/step-bar.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/input/checkbox.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/input/icon-picker.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/navigation/step-bar.mdx
 create mode 100644 packages/twenty-docs/l/ro/twenty-ui/progress-bar.mdx
 create mode 100644 packages/twenty-docs/l/ro/user-guide/settings/capabilities/profile-settings.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/display/app-tooltip.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/input/color-scheme.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/input/icon-picker.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/input/image-input.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/input/select.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/input/toggle.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/navigation/breadcrumb.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/navigation/step-bar.mdx
 create mode 100644 packages/twenty-docs/l/ru/twenty-ui/progress-bar.mdx
 create mode 100644 packages/twenty-docs/l/tr/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/tr/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/tr/twenty-ui/input/select.mdx
 create mode 100644 packages/twenty-docs/l/tr/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/tr/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/display/app-tooltip.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/display/soon-pill.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/display/tag.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/input.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/input/block-editor.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/input/icon-picker.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/input/radio.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/input/select.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/input/text.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/navigation.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/navigation/breadcrumb.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/navigation/links.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/navigation/navigation-bar.mdx
 create mode 100644 packages/twenty-docs/l/zh/twenty-ui/navigation/step-bar.mdx

diff --git a/.github/workflows/docs-i18n-pull.yaml b/.github/workflows/docs-i18n-pull.yaml
index b4ba1db8ca..70148ac1de 100644
--- a/.github/workflows/docs-i18n-pull.yaml
+++ b/.github/workflows/docs-i18n-pull.yaml
@@ -97,7 +97,8 @@ jobs:
           skip_ref_checkout: true
           dryrun_action: false
           # Only download languages supported by Mintlify (see supported-languages.ts)
-          download_language: 'fr,ar,cs,de,es,it,ja,ko,pt,ro,ru,tr,zh-CN'
+          # Using multiple -l flags since download_language only accepts single language
+          download_translations_args: '-l fr -l ar -l cs -l de -l es -l it -l ja -l ko -l pt -l ro -l ru -l tr -l zh-CN'
         env:
           GITHUB_TOKEN: ${{ github.token }}
           CROWDIN_PROJECT_ID: '1'
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input.mdx b/packages/twenty-docs/l/ar/twenty-ui/input.mdx
new file mode 100644
index 0000000000..d9147a43fb
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: إدخال
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..78bdb0bd9d
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: محرر الكتل
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+يستخدم محرر نصوص غني يعتمد على الكتل من [BlockNote](https://www.blocknotejs.org/) للسماح للمستخدمين بتحرير وعرض كتل المحتوى.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| المحددات | النوع             | الوصف                    |
+| -------- | ----------------- | ------------------------ |
+| محرر     | `BlockNoteEditor` | مثيل أو تكوين محرر الكتل |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx
new file mode 100644
index 0000000000..81d892ae61
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx
@@ -0,0 +1,153 @@
+---
+title: نص
+image: /images/user-guide/notes/notes_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
+</Frame>
+
+## إدخال نص
+
+يسمح للمستخدمين بإدخال وتحرير النص.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+  const handleChange = (text) => {
+    console.log("Input changed:", text);
+  };
+
+  const handleKeyDown = (event) => {
+    console.log("Key pressed:", event.key);
+  };
+
+  return (
+    <RecoilRoot>
+      <TextInput
+        className
+        label="Username"
+        onChange={handleChange}
+        fullWidth={false}
+        disableHotkeys={false}
+        error="Invalid username"
+        onKeyDown={handleKeyDown}
+        RightIcon={null}
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| المحددات         | النوع       | الوصف                                                                                                                    |
+| ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------ |
+| className        | string      | اسم اختياري لتنسيقات إضافية                                                                                              |
+| التسمية          | string      | يمثل التسمية للإدخال.                                                                                    |
+| عند التغيير      | function    | الدالة التي تُستدعى عند تغيير قيمة الإدخال.                                                              |
+| عرض كامل         | قيمة منطقية | يشير إلى ما إذا كان الإدخال يجب أن يشغل 100% من العرض.                                                   |
+| تعطيل الإختصارات | قيمة منطقية | يشير إلى ما إذا كانت الاختصارات ممكنة للإدخال.                                                           |
+| خطأ              | string      | يمثل رسالة الخطأ التي سيتم عرضها. عند توفرها، تضيف رمز خطأ على الجانب الأيمن من الإدخال. |
+| onKeyDown        | function    | يتم الاستدعاء عندما يتم الضغط على مفتاح عند التركيز على حقل الإدخال. يتلقى `React.KeyboardEvent` كمعلمة  |
+| أيقونة يمين      | مكون رمز    | مكون أيقونة اختياري معروض على الجانب الأيمن من الإدخال.                                                  |
+
+يقبل المكون أيضًا دعم خصائص HTML أخرى لعناصر الإدخال.
+
+</Tab>
+
+</Tabs>
+
+## إدخال نص بالحجم التلقائي
+
+مكون إدخال نصي يعدل ارتفاعه تلقائيًا بناءً على المحتوى.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+  return (
+    <RecoilRoot>
+      <AutosizeTextInput
+        onValidate={() => console.log("onValidate function fired")}
+        minRows={1}
+        placeholder="Write a comment"
+        onFocus={() => console.log("onFocus function fired")}
+        variant="icon"
+        buttonTitle
+        value="Task: "
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| المحددات           | النوع    | الوصف                                                                                                      |
+| ------------------ | -------- | ---------------------------------------------------------------------------------------------------------- |
+| onValidate         | function | الدالة التي ترغب في تفعيلها عند تصديق المستخدم الإدخال.                                    |
+| الحد الأدنى للأسطر | رقم      | عدد الأسطر الأدنى للمساحة النصية.                                                          |
+| نص توضيحي          | string   | النص التوضيحي الذي ترغب في عرضه عند كون المساحة النصية فارغة.                              |
+| onFocus            | function | الدالة التي ترغب في تفعيلها عند تركيز المساحة النصية.                                      |
+| التنوع             | string   | البديل للإدخال. تشمل الخيارات: `افتراضي`، `أيقونة`، و`زر`. |
+| عنوان الزر         | string   | العنوان للزر (فقط للبديل الزر).                                         |
+| القيمة             | string   | القيمة الأولية للمساحة النصية.                                                             |
+
+</Tab>
+
+</Tabs>
+
+## مساحة نصية
+
+تتيح لك إنشاء إدخالات نصية متعددة الأسطر.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+  return (
+    <TextArea
+    disabled={false}
+    minRows={4}
+    onChange={()=>console.log('On change function fired')}
+    placeholder="Enter text here"
+    value=""
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| المحددات           | النوع       | الوصف                                                       |
+| ------------------ | ----------- | ----------------------------------------------------------- |
+| معطل               | قيمة منطقية | يشير إلى ما إذا كانت المساحة النصية معطلة.  |
+| الحد الأدنى للأسطر | رقم         | العدد الأدنى للأسطر الظاهرة للمساحة النصية. |
+| عند التغيير        | function    | دالة الاستدعاء تُشغّل عند تغيّر محتوى منطقة النص            |
+| نص توضيحي          | string      | النص المُوضّح عندما تكون منطقة النص فارغة                   |
+| القيمة             | string      | القيمة الحالية لمنطقة النص                                  |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ar/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/ar/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..dba2e922f5
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: روابط
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## رابط الاتصال
+
+مكون رابط منمق لعرض معلومات الاتصال.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| المحددات                       | النوع             | الوصف                                            |
+| ------------------------------ | ----------------- | ------------------------------------------------ |
+| className                      | string            | اسم اختياري لتنسيقات إضافية                      |
+| رابط                           | string            | عنوان URL المستهدف أو المسار للرابط              |
+| عند_النقر | وظيفة             | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
+| الأبناء                        | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط                    |
+
+</Tab>
+
+</Tabs>
+
+## رابط خام
+
+مكون رابط منمق لعرض الروابط.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| المحددات  | النوع             | الوصف                                            |
+| --------- | ----------------- | ------------------------------------------------ |
+| className | string            | اسم اختياري لتنسيقات إضافية                      |
+| رابط      | string            | عنوان URL المستهدف أو المسار للرابط              |
+| عند النقر | function          | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
+| الأبناء   | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط                    |
+
+</Tab>
+</Tabs>
+
+## رابط مستدير
+
+رابط مستدير مثبت مع مكون Chip للروابط.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| المحددات  | النوع             | الوصف                                            |
+| --------- | ----------------- | ------------------------------------------------ |
+| رابط      | string            | عنوان URL المستهدف أو المسار للرابط              |
+| الأبناء   | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط                    |
+| عند النقر | function          | دالة رد النداء ليتم تفعيلها عند النقر على الرابط |
+
+</Tab>
+</Tabs>
+
+## رابط التواصل الاجتماعي
+
+روابط اجتماعية منمقة، مع دعم لأنواع متعددة من الروابط الاجتماعية، مثل العناوين الإلكترونية، LinkedIn، وX (أو Twitter).
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| المحددات                       | النوع             | الوصف                                                                                                |
+| ------------------------------ | ----------------- | ---------------------------------------------------------------------------------------------------- |
+| رابط                           | string            | عنوان URL المستهدف أو المسار للرابط                                                                  |
+| الأبناء                        | `React.ReactNode` | المحتوى ليتم عرضه داخل الرابط                                                                        |
+| النوع                          | string            | نوع الروابط الاجتماعية. تشمل الخيارات: `url`, `LinkedIn`, و`Twitter` |
+| عند_النقر | وظيفة             | دالة رد النداء ليتم تفعيلها عند النقر على الرابط                                                     |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..9a47a96362
--- /dev/null
+++ b/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: شريط التنقل
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+يستعرض شريط التنقل الذي يحتوي على عدة مكونات `NavigationBarItem`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| المحددات         | النوع  | الوصف                                                                                                                                                                            |
+| ---------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| اسم العنصر النشط | string | اسم العنصر النشط حاليًا في قائمة التنقل                                                                                                                                          |
+| العناصر          | array  | مصفوفة من الكائنات التي تمثل كل عنصر من عناصر التنقل. كل كائن يحتوي على `الاسم` للعنصر، ومكون `الأيقونة` للعرض، ودالة `onClick` التي تستدعي عند النقر على العنصر |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/cs/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/cs/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..86a7c89f5b
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: Štítek
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Komponenta pro vizuální kategorizaci nebo označení obsahu.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Vlastnosti | Typ             | Popis                                                                                                                                                                   |
+| ---------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className  | textový řetězec | Volitelný název pro dodatečné stylování                                                                                                                                 |
+| barva      | textový řetězec | Barva štítku. Možnosti zahrnují: `zelená`, `tyrkysová`, `nebeská`, `modrá`, `fialová`, `růžová`, `červená`, `oranžová`, `žlutá`, `šedá` |
+| text       | textový řetězec | Obsah štítku                                                                                                                                                            |
+| onClick    | funkce          | Volitelná funkce vyvolaná při kliknutí uživatele na štítek                                                                                                              |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/cs/twenty-ui/input.mdx b/packages/twenty-docs/l/cs/twenty-ui/input.mdx
new file mode 100644
index 0000000000..56dcf07865
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Vstup
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..bcdc757cb2
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigace
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx
new file mode 100644
index 0000000000..7a5a017758
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx
@@ -0,0 +1,44 @@
+---
+title: Drobečková navigace
+image: /images/user-guide/fields/field.png
+---
+
+<Frame>
+  <img src="/images/user-guide/fields/field.png" alt="Header" />
+</Frame>
+
+Zobrazuje drobečkovou navigační lištu.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter } from "react-router-dom";
+import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
+
+export const MyComponent = () => {
+  const breadcrumbLinks = [
+    { children: "Home", href: "/" },
+    { children: "Category", href: "/category" },
+    { children: "Subcategory", href: "/category/subcategory" },
+    { children: "Current Page" },
+  ];
+
+  return (
+    <BrowserRouter>
+      <Breadcrumb className links={breadcrumbLinks} />
+    </BrowserRouter>
+    )
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Vlastnosti | Typ             | Popis                                                                                                                                                                                                                                                                     |
+| ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className  | textový řetězec | Volitelný název třídy pro dodatečné stylování                                                                                                                                                                                                                             |
+| odkazy     | pole            | Pole objektů, z nichž každý představuje odkaz na drobečkovou navigaci. Každý objekt má vlastnost `children` (text obsahu odkazu) a nepovinnou vlastnost `href` (URL, na které se má navigovat po kliknutí na odkaz) |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..327db7d1b3
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Odkazy
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## Odkaz na kontakt
+
+Stylizovaná komponenta odkazu pro zobrazení kontaktních informací.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Vlastnosti | Typ               | Popis                                                 |
+| ---------- | ----------------- | ----------------------------------------------------- |
+| className  | textový řetězec   | Volitelný název pro dodatečné stylování               |
+| href       | textový řetězec   | Cílová URL adresa nebo cesta pro odkaz                |
+| onClick    | funkce            | Funkce zpětného volání spuštěná při kliknutí na odkaz |
+| děti       | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu           |
+
+</Tab>
+
+</Tabs>
+
+## Surový odkaz
+
+Stylizovaná komponenta odkazu pro zobrazení odkazů.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Vlastnosti | Typ               | Popis                                                 |
+| ---------- | ----------------- | ----------------------------------------------------- |
+| className  | textový řetězec   | Volitelný název pro dodatečné stylování               |
+| href       | textový řetězec   | Cílová URL adresa nebo cesta pro odkaz                |
+| onClick    | funkce            | Funkce zpětného volání spuštěná při kliknutí na odkaz |
+| děti       | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu           |
+
+</Tab>
+</Tabs>
+
+## Zaoblený odkaz
+
+Zaobleně stylizovaný odkaz s komponentou Chip pro odkazy.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Vlastnosti | Typ               | Popis                                                 |
+| ---------- | ----------------- | ----------------------------------------------------- |
+| href       | textový řetězec   | Cílová URL adresa nebo cesta pro odkaz                |
+| děti       | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu           |
+| onClick    | funkce            | Funkce zpětného volání spuštěná při kliknutí na odkaz |
+
+</Tab>
+</Tabs>
+
+## Sociální odkaz
+
+Stylizované sociální odkazy s podporou různých typů sociálních odkazů, jako jsou URL, LinkedIn a X (nebo Twitter).
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Vlastnosti | Typ               | Popis                                                                                                   |
+| ---------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
+| href       | textový řetězec   | Cílová URL adresa nebo cesta pro odkaz                                                                  |
+| děti       | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu                                                             |
+| typ        | textový řetězec   | Typ sociálního odkazu. Možnosti zahrnují: `url`, `LinkedIn` a `Twitter` |
+| onClick    | funkce            | Funkce zpětného volání spuštěná při kliknutí na odkaz                                                   |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..b79cf1a3c4
--- /dev/null
+++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Navigační panel
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Zobrazuje navigační panel, který obsahuje více komponent `NavigationBarItem`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Vlastnosti     | Typ             | Popis                                                                                                                                                                                                                       |
+| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | textový řetězec | Název aktuálně aktivního navigačního prvku                                                                                                                                                                                  |
+| položky        | pole            | Pole objektů představujících jednotlivé navigační položky. Každý objekt obsahuje `název` položky, komponent `Ikona` ke zobrazení a funkce `onClick`, která se volá při kliknutí na položku. |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/de/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/de/twenty-ui/display/icons.mdx
new file mode 100644
index 0000000000..549337486a
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/display/icons.mdx
@@ -0,0 +1,83 @@
+---
+title: Icons
+image: /images/user-guide/objects/objects.png
+---
+
+<Frame>
+  <img src="/images/user-guide/objects/objects.png" alt="Header" />
+</Frame>
+
+Eine Liste von Symbolen, die in unserer App verwendet werden.
+
+## Tabler-Symbole
+
+Wir verwenden Tabler-Symbole für React in der gesamten App.
+
+<Tabs>
+
+<Tab title="Installation"><br/>
+
+```
+yarn add @tabler/icons-react
+```
+
+</Tab>
+
+<Tab title="Props">
+
+Sie können jedes Symbol als Komponente importieren. Here's an example: <br />
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return <IconArrowLeft color="red" size={48} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props  | Typ          | Beschreibung                              | Standard     |
+| ------ | ------------ | ----------------------------------------- | ------------ |
+| größe  | nummer       | Die Höhe und Breite des Symbols in Pixeln | 24           |
+| farbe  | Zeichenkette | Die Farbe der Symbole                     | currentColor |
+| Strich | nummer       | Die Strichbreite des Symbols in Pixeln    | 2            |
+
+</Tab>
+
+</Tabs>
+
+## Benutzerdefinierte Symbole
+
+Zusätzlich zu den Tabler-Symbolen verwendet die App auch einige benutzerdefinierte Symbole.
+
+### Symbol: Adressbuch
+
+Zeigt ein Adressbuchsymbol an.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  return <IconAddressBook size={24} stroke={2} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props  | Typ    | Beschreibung                              | Standard |
+| ------ | ------ | ----------------------------------------- | -------- |
+| größe  | nummer | Die Höhe und Breite des Symbols in Pixeln | 24       |
+| Strich | nummer | Die Strichbreite des Symbols in Pixeln    | 2        |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/de/twenty-ui/input.mdx b/packages/twenty-docs/l/de/twenty-ui/input.mdx
new file mode 100644
index 0000000000..12e7c50a65
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Eingabe
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/de/twenty-ui/input/select.mdx b/packages/twenty-docs/l/de/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..0a2ea4c827
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: Auswahl
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+Ermöglicht es Benutzern, einen Wert aus einer Liste vordefinierter Optionen auszuwählen.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+  return (
+    <RecoilRoot>
+      <Select
+        className
+        disabled={false}
+        label="Select an option"
+        options={[
+          { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
+          { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
+        ]}
+        value="option1"
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Props        | Typ          | Beschreibung                                                                                                                                                                                                                                                                       |
+| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Klassenname  | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung                                                                                                                                                                                                                                    |
+| deaktiviert  | boolesch     | Wenn auf `true` gesetzt, wird die Benutzerinteraktion mit der Komponente deaktiviert                                                                                                                                                                                               |
+| Beschriftung | Zeichenkette | Die Beschriftung, um den Zweck der `Select`-Komponente zu beschreiben                                                                                                                                                                                                              |
+| onChange     | function     | Die Funktion, die aufgerufen wird, wenn sich die ausgewählten Werte ändern                                                                                                                                                                                                         |
+| optionen     | array        | Repräsentiert die verfügbaren Optionen für die `Select`-Komponente. Es ist ein Array von Objekten, bei dem jedes Objekt ein `value` (die eindeutige Kennung), `label` (die eindeutige Kennung) und ein optionales `Icon` hat |
+| wert         | Zeichenkette | Repräsentiert den aktuell ausgewählten Wert. Es sollte mit einem der `value`-Eigenschaften im `options`-Array übereinstimmen                                                                                                                                       |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..e1264f0997
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigation
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..98df96d4d5
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Navigationsleiste
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Rendert eine Navigationsleiste, die mehrere `NavigationBarItem`-Komponenten enthält.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Props          | Typ          | Beschreibung                                                                                                                                                                                                                                                 |
+| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| activeItemName | Zeichenkette | Der Name des aktuell aktiven Navigationselements                                                                                                                                                                                                             |
+| items          | array        | Ein Array von Objekten, die jeweils ein Navigationselement repräsentieren. Jedes Objekt enthält den `name` des Elements, die zugehörige `Icon`-Komponente und eine Funktion `onClick`, die ausgeführt wird, wenn das Element angeklickt wird |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..a12d31032f
--- /dev/null
+++ b/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Schrittleiste
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Zeigt den Fortschritt durch eine Folge von nummerierten Schritten, indem der aktive Schritt hervorgehoben wird. Es rendert einen Container mit Schritten, die jeweils durch die `Step`-Komponente dargestellt werden.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+  return (
+    <StepBar activeStep={2}>
+      <StepBar.Step>Step 1</StepBar.Step>
+      <StepBar.Step>Step 2</StepBar.Step>
+      <StepBar.Step>Step 3</StepBar.Step>
+    </StepBar>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props          | Typ    | Beschreibung                                                                                                                              |
+| -------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| aktiverSchritt | nummer | Der Index des derzeit aktiven Schritts. Dies bestimmt, welcher Schritt visuell hervorgehoben werden soll. |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/es/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/es/twenty-ui/display/icons.mdx
new file mode 100644
index 0000000000..4cfe3c0df4
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/display/icons.mdx
@@ -0,0 +1,83 @@
+---
+title: Iconos
+image: /images/user-guide/objects/objects.png
+---
+
+<Frame>
+  <img src="/images/user-guide/objects/objects.png" alt="Header" />
+</Frame>
+
+Una lista de iconos utilizados en toda nuestra aplicación.
+
+## Iconos Tabler
+
+Usamos iconos Tabler para React en toda la aplicación.
+
+<Tabs>
+
+<Tab title="Installation"><br/>
+
+```
+yarn add @tabler/icons-react
+```
+
+</Tab>
+
+<Tab title="Props">
+
+Puede importar cada icono como un componente. Here's an example: <br />
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return <IconArrowLeft color="red" size={48} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| "Props" | Tipo     | Descripción                               | Predeterminado |
+| ------- | -------- | ----------------------------------------- | -------------- |
+| tamaño  | número   | La altura y el ancho del icono en píxeles | 24             |
+| color   | "cadena" | El color de los iconos                    | currentColor   |
+| trazo   | número   | El ancho del trazo del icono en píxeles   | 2              |
+
+</Tab>
+
+</Tabs>
+
+## Iconos Personalizados
+
+Además de los iconos Tabler, la aplicación también utiliza algunos iconos personalizados.
+
+### Icono de Libreta de Direcciones
+
+Muestra un icono de libreta de direcciones.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  return <IconAddressBook size={24} stroke={2} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| "Props" | Tipo   | Descripción                               | Predeterminado |
+| ------- | ------ | ----------------------------------------- | -------------- |
+| tamaño  | número | La altura y el ancho del icono en píxeles | 24             |
+| trazo   | número | El ancho del trazo del icono en píxeles   | 2              |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/es/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/es/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..6fa2e396a4
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: Etiqueta
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Componente para categorizar o etiquetar contenido visualmente.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| "Props"     | Tipo      | Descripción                                                                                                                                                                 |
+| ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| "className" | cadena    | "Nombre opcional para estilización adicional"                                                                                                                               |
+| color       | cadena    | Color de la etiqueta. Las opciones incluyen: `verde`, `turquesa`, `cielo`, `azul`, `púrpura`, `rosa`, `rojo`, `naranja`, `amarillo`, `gris` |
+| texto       | "cadena"  | El contenido de la etiqueta                                                                                                                                                 |
+| alHacerClic | "función" | Función opcional llamada cuando un usuario hace clic en la etiqueta                                                                                                         |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/es/twenty-ui/input.mdx b/packages/twenty-docs/l/es/twenty-ui/input.mdx
new file mode 100644
index 0000000000..e2e309dc53
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Entrada
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/es/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/es/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..172050024a
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Editor de Bloques
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Usa un editor de texto enriquecido basado en bloques de [BlockNote](https://www.blocknotejs.org/) para permitir a los usuarios editar y ver bloques de contenido.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| "Props" | Tipo              | Descripción                                        |
+| ------- | ----------------- | -------------------------------------------------- |
+| editor  | `BlockNoteEditor` | La instancia o configuración del editor de bloques |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx
new file mode 100644
index 0000000000..2f9d84206d
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx
@@ -0,0 +1,47 @@
+---
+title: Caja de selección
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
+
+Usado cuando un usuario necesita seleccionar múltiples valores entre varias opciones.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Checkbox } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return (
+    <Checkbox
+      checked={true}
+      indeterminate={false}
+      onChange={() => console.log("onChange function fired")}
+      onCheckedChange={() => console.log("onCheckedChange function fired")}
+      variant="primary"
+      size="small"
+      shape="squared"
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| "Props"         | Tipo      | Descripción                                                                                                                            |
+| --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| marcado         | booleano  | Indica si la caja de selección está marcada                                                                                            |
+| indeterminado   | booleano  | Indica si la caja de selección está en un estado indeterminado (ni marcada ni desmarcada)                           |
+| "onChange"      | función   | La función de devolución de llamada que desea activar cuando cambia el estado de la caja de selección                                  |
+| onCheckedChange | "función" | La función de devolución de llamada que desea activar cuando cambia el estado `marcado`                                                |
+| variante        | "cadena"  | La variante de estilo visual de la caja. Las opciones incluyen: `primario`, `secundario` y `terciario` |
+| tamaño          | "cadena"  | El tamaño de la caja de selección. Tiene dos opciones: `pequeño` y `grande`                            |
+| forma           | cadena    | La forma de la caja de selección. Tiene dos opciones: `cuadrado` y `redondeado`                        |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/es/twenty-ui/navigation.mdx b/packages/twenty-docs/l/es/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..8d50701bfa
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navegación
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..b094bb5692
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Enlaces
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## Enlace de Contacto
+
+Un componente de enlace estilizado para mostrar información de contacto.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| "Props"     | Tipo              | Descripción                                                                     |
+| ----------- | ----------------- | ------------------------------------------------------------------------------- |
+| "className" | "cadena"          | "Nombre opcional para estilización adicional"                                   |
+| href        | "cadena"          | La URL o ruta objetivo del enlace                                               |
+| alHacerClic | "función"         | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
+| hijos       | `React.ReactNode` | El contenido que se mostrará dentro del enlace                                  |
+
+</Tab>
+
+</Tabs>
+
+## Enlace Sin Estilo
+
+Un componente de enlace estilizado para mostrar enlaces.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| "Props"     | Tipo              | Descripción                                                                     |
+| ----------- | ----------------- | ------------------------------------------------------------------------------- |
+| "className" | cadena            | "Nombre opcional para estilización adicional"                                   |
+| href        | "cadena"          | La URL o ruta objetivo del enlace                                               |
+| alHacerClic | función           | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
+| hijos       | `React.ReactNode` | El contenido que se mostrará dentro del enlace                                  |
+
+</Tab>
+</Tabs>
+
+## Enlace Redondeado
+
+Un enlace de estilo redondeado con un componente Chip para enlaces.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| "Props"     | Tipo              | Descripción                                                                     |
+| ----------- | ----------------- | ------------------------------------------------------------------------------- |
+| href        | "cadena"          | La URL o ruta objetivo del enlace                                               |
+| hijos       | `React.ReactNode` | El contenido que se mostrará dentro del enlace                                  |
+| alHacerClic | "función"         | Función de devolución de llamada que se activa cuando se hace clic en el enlace |
+
+</Tab>
+</Tabs>
+
+## Enlace Social
+
+Enlaces sociales estilizados, con soporte para varios tipos de enlaces sociales, como URLs, LinkedIn y X (o Twitter).
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| "Props"     | Tipo              | Descripción                                                                                                        |
+| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ |
+| href        | "cadena"          | La URL o ruta objetivo del enlace                                                                                  |
+| hijos       | `React.ReactNode` | El contenido que se mostrará dentro del enlace                                                                     |
+| tipo        | "cadena"          | El tipo de enlaces sociales. Las opciones incluyen: `url`, `LinkedIn`, y `Twitter` |
+| alHacerClic | "función"         | Función de devolución de llamada que se activa cuando se hace clic en el enlace                                    |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/es/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/es/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..17a29ee848
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Barra de navegación
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Renderiza una barra de navegación que contiene varios componentes `NavigationBarItem`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| "Props"                 | Tipo     | Descripción                                                                                                                                                                                                                                   |
+| ----------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nombreDelElementoActivo | "cadena" | El nombre del elemento de navegación actualmente activo                                                                                                                                                                                       |
+| elementos               | array    | Una matriz de objetos que representan cada elemento de navegación. Cada objeto contiene el `nombre` del elemento, el componente `Icono` a mostrar y una función `cuandoHagaClick` que se llamará al hacer clic en el elemento |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..b6e0a0eecc
--- /dev/null
+++ b/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Retroalimentación
+image: /images/user-guide/emails/emails_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
+</Frame>
+
+Indica el progreso o la cuenta regresiva y se mueve de derecha a izquierda.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+  return (
+    <ProgressBar
+      duration={6000}
+      delay={0}
+      easing="easeInOut"
+      barHeight={10}
+      barColor="#4bb543"
+      autoStart={true}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| "Props"          | Tipo     | Descripción                                                                                               | Predeterminado |
+| ---------------- | -------- | --------------------------------------------------------------------------------------------------------- | -------------- |
+| duración         | número   | La duración total de la animación de la barra de progreso en milisegundos                                 | 3              |
+| retraso          | número   | El retraso en el inicio de la animación de la barra de progreso en milisegundos                           | 0              |
+| aceleración      | "cadena" | Función de aceleración para la animación de la barra de progreso                                          | easeInOut      |
+| alturaDeBarra    | número   | La altura de la barra en píxeles                                                                          | 24             |
+| colorDeBarra     | "cadena" | El color de la barra                                                                                      | gray80         |
+| inicioAutomático | booleano | Si es `true`, la animación de la barra de progreso comienza automáticamente cuando el componente se monta | `verdadero`    |
+
+</Tab>
+</Tabs>
+
+## Barra de Progreso Circular
+
+Indica el progreso de una tarea, a menudo se usa en pantallas de carga o áreas donde se desea comunicar procesos en curso al usuario.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| "Props"      | Tipo   | Descripción                                  | Predeterminado |
+| ------------ | ------ | -------------------------------------------- | -------------- |
+| tamaño       | número | El tamaño de la barra de progreso circular   | 50             |
+| anchoDeBarra | número | El ancho de la línea de la barra de progreso | 5              |
+| colorDeBarra | cadena | El color de la barra de progreso             | currentColor   |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..ed88adeac3
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: Info-bulle de l'application
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
+
+Un message bref qui affiche des informations supplémentaires lorsqu'un utilisateur interagit avec un élément.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés              | Type                                         | Description                                                                                                                                                                                                                 |
+| ----------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nomDeClasse             | chaîne                                       | Classe CSS facultative pour le style supplémentaire                                                                                                                                                                         |
+| sélecteurAncre          | Sélecteur CSS                                | Sélecteur pour l'ancre de l'info-bulle (l'élément qui déclenche l'info-bulle)                                                                                                                            |
+| contenu                 | chaîne                                       | Le contenu que vous souhaitez afficher dans l'info-bulle                                                                                                                                                                    |
+| délaiMasquer            | nombre                                       | Le délai avant de masquer l'info-bulle après que le curseur ait quitté l'ancre                                                                                                                                              |
+| décalage                | nombre                                       | Le décalage en pixels pour positionner l'info-bulle                                                                                                                                                                         |
+| pasDeFlèche             | booléen                                      | Si `vrai`, masque la flèche sur l'info-bulle                                                                                                                                                                                |
+| estOuvert               | booléen                                      | Si `vrai`, l'info-bulle est ouverte par défaut                                                                                                                                                                              |
+| emplacement             | Chaîne `PlacesType` de `react-tooltip`       | Spécifie le placement de l'info-bulle. Les valeurs incluent `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, et `left-end` |
+| stratégiePositionnement | Chaîne `PositionStrategy` de `react-tooltip` | Stratégie de positionnement pour l'info-bulle. A deux valeurs : `absolute` et `fixed`                                                                                                       |
+
+</Tab>
+
+</Tabs>
+
+## Texte débordant avec info-bulle
+
+Gère le texte débordant et affiche une info-bulle lorsque le texte déborde.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  const crmTaskDescription =
+    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés | Type   | Description                                                             |
+| ---------- | ------ | ----------------------------------------------------------------------- |
+| texte      | chaîne | Le contenu que vous souhaitez afficher dans la zone de texte débordante |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/display/chip.mdx b/packages/twenty-docs/l/fr/twenty-ui/display/chip.mdx
new file mode 100644
index 0000000000..3d0c83086b
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/display/chip.mdx
@@ -0,0 +1,148 @@
+---
+title: Puce
+image: /images/user-guide/github/github-header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/github/github-header.png" alt="Header" />
+</Frame>
+
+Un élément visuel que vous pouvez utiliser comme un conteneur cliquable ou non cliquable avec une étiquette, des composants optionnels à gauche et à droite, et diverses options de style pour afficher des étiquettes et des tags.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+  return (
+    <Chip
+      size="large"
+      label="Clickable Chip"
+      clickable={true}
+      variant="highlighted"
+      accent="text-primary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+    />
+  );
+};
+
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés   | Type                     | Description                                                                                                                          |
+| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| linkToEntity | chaîne                   | Le lien vers l'entité                                                                                                                |
+| entityId     | chaîne                   | L'identifiant unique pour l'entité                                                                                                   |
+| nom          | chaîne                   | Le nom de l'entité                                                                                                                   |
+| pictureUrl   | chaîne                   | Image",                                                                                                                              |
+| avatarType   | Type d'avatar            | Le type d'avatar que vous souhaitez afficher. A deux options : `arrondie` et `carrée`                |
+| variante     | `EntityChipVariant` enum | Variante de la puce entité que vous souhaitez afficher. A deux options : `régulier` et `transparent` |
+| LeftIcon     | ComposantIcône           | Un composant React représentant une icône. Affiché sur le côté gauche de la puce                                     |
+
+</Tab>
+</Tabs>
+
+## Exemples
+
+### Puce transparente désactivée
+
+```jsx
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+  return (
+      <Chip 
+      size="large"
+      label="Transparent Disabled Chip"
+      clickable={false}
+      variant="rounded"
+      accent="text-secondary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+      />    
+  );
+};
+
+```
+
+<br/>
+
+### Puce désactivée avec infobulle
+
+```jsx
+import { Chip } from "twenty-ui/components";
+  
+export const MyComponent = () => {
+  return (
+      <Chip 
+      size="large"
+      label="Disabled chip that triggers a tooltip when overflowing."
+      clickable={false}
+      variant="regular"
+      accent="text-primary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+      />    
+  );
+};
+```
+
+## Puce entité
+
+Un élément semblable à une puce pour afficher des informations sur une entité.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+import { IconTwentyStar } from 'twenty-ui/display';
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <Chip
+        linkToEntity="/entity-link"
+        entityId="entityTest"
+        name="Entity name"
+        pictureUrl=""
+        avatarType="rounded"
+        variant="regular"
+        LeftIcon={IconTwentyStar}
+      />
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés   | Type                     | Description                                                                                                                          |
+| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| linkToEntity | chaîne                   | Le lien vers l'entité                                                                                                                |
+| entityId     | chaîne                   | L'identifiant unique pour l'entité                                                                                                   |
+| nom          | chaîne                   | Le nom de l'entité                                                                                                                   |
+| pictureUrl   | chaîne                   | Image",                                                                                                                              |
+| avatarType   | Type d'avatar            | Le type d'avatar que vous souhaitez afficher. A deux options : `arrondie` et `carrée`                |
+| variante     | `EntityChipVariant` enum | Variante de la puce entité que vous souhaitez afficher. A deux options : `régulier` et `transparent` |
+| LeftIcon     | ComposantIcône           | Un composant React représentant une icône. Affiché sur le côté gauche de la puce                                     |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/fr/twenty-ui/display/icons.mdx
new file mode 100644
index 0000000000..af7d9f31ab
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/display/icons.mdx
@@ -0,0 +1,83 @@
+---
+title: Icônes
+image: /images/user-guide/objects/objects.png
+---
+
+<Frame>
+  <img src="/images/user-guide/objects/objects.png" alt="Header" />
+</Frame>
+
+Une liste d'icônes utilisées dans notre application.
+
+## Icônes Tabler
+
+Nous utilisons les icônes Tabler pour React dans toute l'application.
+
+<Tabs>
+
+<Tab title="Installation"><br/>
+
+```
+yarn add @tabler/icons-react
+```
+
+</Tab>
+
+<Tab title="Props">
+
+Vous pouvez importer chaque icône en tant que composant. Here's an example: <br />
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return <IconArrowLeft color="red" size={48} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés | Type   | Description                                   | Par défaut      |
+| ---------- | ------ | --------------------------------------------- | --------------- |
+| taille     | nombre | La hauteur et la largeur de l'icône en pixels | 24              |
+| couleur    | chaîne | La couleur des icônes                         | couleurCourante |
+| trait      | nombre | La largeur du trait de l'icône en pixels      | 2               |
+
+</Tab>
+
+</Tabs>
+
+## Icônes personnalisées
+
+En plus des icônes Tabler, l'application utilise également certaines icônes personnalisées.
+
+### Icône Carnet d'adresses
+
+Affiche une icône de carnet d'adresses.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  return <IconAddressBook size={24} stroke={2} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés | Type   | Description                                   | Par défaut |
+| ---------- | ------ | --------------------------------------------- | ---------- |
+| taille     | nombre | La hauteur et la largeur de l'icône en pixels | 24         |
+| trait      | nombre | La largeur du trait de l'icône en pixels      | 2          |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input.mdx b/packages/twenty-docs/l/fr/twenty-ui/input.mdx
new file mode 100644
index 0000000000..4a19239d96
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: "Entrée "
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..5b1bf2f90b
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Éditeur de Blocs
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Utilise un éditeur de texte riche basé sur des blocs de [BlockNote](https://www.blocknotejs.org/) pour permettre aux utilisateurs de modifier et de visualiser des blocs de contenu.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés | Type              | Description                                          |
+| ---------- | ----------------- | ---------------------------------------------------- |
+| éditeur    | `BlockNoteEditor` | L'instance de l'éditeur de blocs ou sa configuration |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx
new file mode 100644
index 0000000000..f5f1a3e19c
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx
@@ -0,0 +1,47 @@
+---
+title: Case à cocher
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
+
+Utilisé lorsqu'un utilisateur doit sélectionner plusieurs valeurs parmi plusieurs options.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Checkbox } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return (
+    <Checkbox
+      checked={true}
+      indeterminate={false}
+      onChange={() => console.log("onChange function fired")}
+      onCheckedChange={() => console.log("onCheckedChange function fired")}
+      variant="primary"
+      size="small"
+      shape="squared"
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés      | Type     | Description                                                                                                                                |
+| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| coché           | booléen  | Indique si la case à cocher est cochée                                                                                                     |
+| indéterminé     | booléen  | Indique si la case à cocher est dans un état indéterminé (ni cochée ni décochée)                                        |
+| onChange        | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état de la case à cocher change                                              |
+| onCheckedChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état `coché` change                                                          |
+| variante        | chaîne   | Le style visuel de la variante de la boîte. Les options incluent : `primaire`, `secondaire` et `tertiaire` |
+| taille          | chaîne   | La taille de la case à cocher. Comporte deux options : `petit` et `grand`                                  |
+| forme           | chaîne   | La forme de la case à cocher. Comporte deux options : `carrée` et `arrondie`                               |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/color-scheme.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/color-scheme.mdx
new file mode 100644
index 0000000000..eb7b05ae1d
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/color-scheme.mdx
@@ -0,0 +1,73 @@
+---
+title: Schéma de couleurs
+image: /images/user-guide/fields/field.png
+---
+
+<Frame>
+  <img src="/images/user-guide/fields/field.png" alt="Header" />
+</Frame>
+
+## Carte de Schéma de couleurs
+
+Représente différents schémas de couleurs et est spécialement adapté aux thèmes clairs et sombres.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ColorSchemeCard } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return (
+      <ColorSchemeCard
+      variant="Dark"
+      selected={true}
+      />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés                 | Type                                    | Description                                                                                                             | Par défaut |
+| -------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------- |
+| variante                   | chaîne                                  | La variante du schéma de couleurs. Les options incluent `Sombre`, `Clair` et `Système`. | clair      |
+| sélectionné                | booléen                                 | Si `vrai`, affiche une coche pour indiquer le schéma de couleurs sélectionné.                           |            |
+| propriétés supplémentaires | `React.ComponentPropsWithoutRef<'div'>` | Propriétés standard de l'élément HTML `div`.                                                            |            |
+
+</Tab>
+
+</Tabs>
+
+## Sélecteur de Schéma de couleurs
+
+Permet aux utilisateurs de choisir entre différents schémas de couleurs.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ColorSchemePicker } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return <ColorSchemePicker
+  value="Dark"
+  onChange
+  />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés | Type                 | Description                                                                                                                  |
+| ---------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| valeur     | `Schéma de couleurs` | Le schéma de couleurs actuellement sélectionné.                                                              |
+| onChange   | fonction             | La fonction de rappel que vous souhaitez déclencher lorsqu'un utilisateur sélectionne un schéma de couleurs. |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx
new file mode 100644
index 0000000000..d583615c42
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx
@@ -0,0 +1,56 @@
+---
+title: Sélecteur d'icônes
+image: /images/user-guide/github/github-header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/github/github-header.png" alt="Header" />
+</Frame>
+
+Un sélecteur d'icônes basé sur un menu déroulant qui permet aux utilisateurs de sélectionner une icône dans une liste.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+   const [selectedIcon, setSelectedIcon] = useState("");
+   const handleIconChange = ({ iconKey, Icon }) => {
+     console.log("Selected Icon:", iconKey);
+     setSelectedIcon(iconKey);
+   };
+
+  return (
+    <RecoilRoot>
+      <IconPicker
+        disabled={false}
+        onChange={handleIconChange}
+        selectedIconKey={selectedIcon}
+        variant="primary"
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés      | Type     | Description                                                                                                                                                |
+| --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| désactivé       | booléen  | Désactive le sélecteur d'icônes si défini sur `true`                                                                                                       |
+| onChange        | fonction | La fonction de rappel déclenchée lorsque l'utilisateur sélectionne une icône. Elle reçoit un objet avec les propriétés `iconKey` et `Icon` |
+| selectedIconKey | chaîne   | La clé de l'icône initialement sélectionnée                                                                                                                |
+| onClickOutside  | fonction | Fonction de rappel déclenchée lorsque l'utilisateur clique en dehors du menu déroulant                                                                     |
+| onClose         | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est fermé                                                                                          |
+| onOpen          | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est ouvert                                                                                         |
+| variante        | chaîne   | La variante de style visuel de l'icône cliquable. Les options incluent : `primaire`, `secondaire` et `tertiaire`           |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx
new file mode 100644
index 0000000000..c2246c6ee7
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx
@@ -0,0 +1,37 @@
+---
+title: Saisie Image
+image: /images/user-guide/objects/objects.png
+---
+
+<Frame>
+  <img src="/images/user-guide/objects/objects.png" alt="Header" />
+</Frame>
+
+Permet aux utilisateurs de télécharger et de supprimer une image.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ImageInput } from "@/ui/input/components/ImageInput";
+
+export const MyComponent = () => {
+  return <ImageInput/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés    | Type     | Description                                                                                                                                                     |
+| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| photo         | chaîne   | L'URL source de l'image                                                                                                                                         |
+| onUpload      | fonction | La fonction appelée lors du téléchargement d'une nouvelle image par un utilisateur. Elle reçoit l'objet `File` comme paramètre. |
+| onRemove      | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton supprimer.                                                                       |
+| onAbort       | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton annuler pendant le téléchargement de l'image.                                    |
+| isUploading   | booléen  | Indique si une image est en cours de téléchargement.                                                                                            |
+| messageErreur | chaîne   | Un message d'erreur facultatif à afficher sous l'entrée d'image.                                                                                |
+| désactivé     | booléen  | Si `true`, l'entrée entière est désactivée et les boutons ne sont pas cliquables.                                                               |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/radio.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/radio.mdx
new file mode 100644
index 0000000000..818b9731ab
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/radio.mdx
@@ -0,0 +1,104 @@
+---
+title: Radio
+image: /images/user-guide/create-workspace/workspace-cover.png
+---
+
+<Frame>
+  <img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
+</Frame>
+
+Utilisé lorsque les utilisateurs peuvent choisir une seule option parmi une série d'options.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Radio } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+  const handleRadioChange = (event) => {
+    console.log("Radio button changed:", event.target.checked);
+  };
+
+  const handleCheckedChange = (checked) => {
+    console.log("Checked state changed:", checked);
+  };
+
+
+  return (
+    <Radio
+      checked={true}
+      value="Option 1"
+      onChange={handleRadioChange}
+      onCheckedChange={handleCheckedChange}
+      size="large"
+      disabled={false}
+      labelPosition="right"
+    />
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés      | Type                   | Description                                                                                                                   |
+| --------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| style           | propriétés `React.CSS` | Styles inline supplémentaires pour le composant                                                                               |
+| nomDeClasse     | chaîne                 | Classe CSS facultative pour le style supplémentaire                                                                           |
+| coché           | booléen                | Indique si le bouton radio est coché                                                                                          |
+| valeur          | chaîne                 | L'étiquette ou le texte associé au bouton radio                                                                               |
+| onChange        | fonction               | La fonction appelée lorsque le bouton radio sélectionné est modifié                                                           |
+| onCheckedChange | fonction               | La fonction appelée lorsque l'état `checked` du bouton radio change                                                           |
+| taille          | chaîne                 | La taille du bouton radio. Les options incluent : `large` et `small`                          |
+| désactivé       | booléen                | Si `true`, le bouton radio est désactivé et ne peut pas être cliqué                                                           |
+| positionLabel   | chaîne                 | La position du texte du label par rapport au bouton radio. A deux options : `left` et `right` |
+
+</Tab>
+</Tabs>
+
+## Groupe Radio
+
+Regroupe ensemble des boutons radio associés.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import React, { useState } from "react";
+import { Radio, RadioGroup } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+  const [selectedValue, setSelectedValue] = useState("Option 1");
+
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+  };
+  
+  return (
+    <RadioGroup value={selectedValue} onChange={handleChange}>
+      <Radio value="Option 1" />
+      <Radio value="Option 2" />
+      <Radio value="Option 3" />
+    </RadioGroup>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés    | Type              | Description                                                                                                  |
+| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
+| valeur        | chaîne            | La valeur du bouton radio actuellement sélectionné                                                           |
+| onChange      | fonction          | La fonction de rappel déclenchée lorsque le bouton radio est changé                                          |
+| onValueChange | fonction          | La fonction de rappel déclenchée lorsque la valeur sélectionnée dans le groupe change.       |
+| enfants       | `React.ReactNode` | Permet de passer des composants React (tels que Radio) en tant qu'enfants au Groupe Radio |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/select.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..9124594cc1
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: Sélectionner
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+Permet aux utilisateurs de choisir une valeur dans une liste d'options prédéfinies.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+  return (
+    <RecoilRoot>
+      <Select
+        className
+        disabled={false}
+        label="Select an option"
+        options={[
+          { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
+          { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
+        ]}
+        value="option1"
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés  | Type     | Description                                                                                                                                                                                                                                                                               |
+| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nomDeClasse | chaîne   | Classe CSS facultative pour le style supplémentaire                                                                                                                                                                                                                                       |
+| désactivé   | booléen  | Lorsqu'il est réglé sur `true`, cela désactive l'interaction de l'utilisateur avec le composant.                                                                                                                                                                          |
+| étiquette   | chaîne   | L'étiquette pour décrire la fonction du composant `Select`.                                                                                                                                                                                                               |
+| onChange    | fonction | La fonction appelée lorsque les valeurs sélectionnées changent.                                                                                                                                                                                                           |
+| options     | tableau  | Représente les options disponibles pour le composant `Selected`. C'est un tableau d'objets où chaque objet possède une `valeur` (l'identifiant unique), un `label` (l'identifiant unique) et une icône optionnelle. |
+| valeur      | chaîne   | Représente la valeur actuellement sélectionnée. Elle doit correspondre à l'une des propriétés `valeur` dans le tableau `options`.                                                                                                                         |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx
new file mode 100644
index 0000000000..d371a99153
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx
@@ -0,0 +1,153 @@
+---
+title: Texte
+image: /images/user-guide/notes/notes_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
+</Frame>
+
+## Entrée de texte
+
+Permet aux utilisateurs de saisir et de modifier du texte.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+  const handleChange = (text) => {
+    console.log("Input changed:", text);
+  };
+
+  const handleKeyDown = (event) => {
+    console.log("Key pressed:", event.key);
+  };
+
+  return (
+    <RecoilRoot>
+      <TextInput
+        className
+        label="Username"
+        onChange={handleChange}
+        fullWidth={false}
+        disableHotkeys={false}
+        error="Invalid username"
+        onKeyDown={handleKeyDown}
+        RightIcon={null}
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés              | Type           | Description                                                                                                                                           |
+| ----------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nomDeClasse             | chaîne         | Nom facultatif pour un style supplémentaire                                                                                                           |
+| étiquette               | chaîne         | Représente l'étiquette de l'entrée                                                                                                                    |
+| onChange                | fonction       | La fonction appelée lorsque la valeur de l'entrée change                                                                                              |
+| largeurTotale           | booléen        | Indique si l'entrée doit occuper 100% de la largeur                                                                                                   |
+| désactiverLesRaccourcis | booléen        | Indique si les raccourcis sont activés pour l'entrée                                                                                                  |
+| erreur                  | chaîne         | Représente le message d'erreur à afficher. Lorsqu'il est fourni, il ajoute également une icône d'erreur sur le côté droit de l'entrée |
+| surToucheEnfoncée       | fonction       | Appelée lorsqu'une touche est enfoncée alors que le champ de saisie est focalisé. Reçoit un `React.KeyboardEvent` en tant qu'argument |
+| IcôneDroite             | ComposantIcône | Un composant icône facultatif affiché sur le côté droit de l'entrée                                                                                   |
+
+Le composant accepte également d'autres propriétés d'éléments d'entrée HTML.
+
+</Tab>
+
+</Tabs>
+
+## Entrée de texte à taille automatique
+
+Composant d'entrée de texte qui ajuste automatiquement sa hauteur en fonction du contenu.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+  return (
+    <RecoilRoot>
+      <AutosizeTextInput
+        onValidate={() => console.log("onValidate function fired")}
+        minRows={1}
+        placeholder="Write a comment"
+        onFocus={() => console.log("onFocus function fired")}
+        variant="icon"
+        buttonTitle
+        value="Task: "
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés     | Type     | Description                                                                                                    |
+| -------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
+| surValider     | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'utilisateur valide l'entrée                      |
+| minLignes      | nombre   | Le nombre minimum de lignes pour la zone de texte                                                              |
+| espace réservé | chaîne   | Le texte d'espace réservé que vous souhaitez afficher lorsque la zone de texte est vide                        |
+| surFocus       | fonction | La fonction de rappel que vous souhaitez déclencher lorsque la zone de texte prend le focus                    |
+| variante       | chaîne   | La variante de l'entrée. Les options incluent : `défaut`, `icône`, et `bouton` |
+| titreBouton    | chaîne   | Le titre pour le bouton (applicable uniquement à la variante bouton)                        |
+| valeur         | chaîne   | La valeur initiale pour la zone de texte                                                                       |
+
+</Tab>
+
+</Tabs>
+
+## Zone de texte
+
+Vous permet de créer des entrées de texte multiligne.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+  return (
+    <TextArea
+    disabled={false}
+    minRows={4}
+    onChange={()=>console.log('On change function fired')}
+    placeholder="Enter text here"
+    value=""
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés     | Type     | Description                                                                 |
+| -------------- | -------- | --------------------------------------------------------------------------- |
+| désactivé      | booléen  | Indique si la zone de texte est désactivée                                  |
+| minLignes      | nombre   | Nombre minimum de lignes visibles pour la zone de texte.    |
+| onChange       | fonction | Fonction de rappel déclenchée lorsque le contenu de la zone de texte change |
+| espace réservé | chaîne   | Texte de l'espace réservé affiché lorsque la zone de texte est vide         |
+| valeur         | chaîne   | La valeur actuelle de la zone de texte                                      |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..e1264f0997
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigation
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation/breadcrumb.mdx
new file mode 100644
index 0000000000..d0e67a1de2
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation/breadcrumb.mdx
@@ -0,0 +1,44 @@
+---
+title: Fil d'Ariane
+image: /images/user-guide/fields/field.png
+---
+
+<Frame>
+  <img src="/images/user-guide/fields/field.png" alt="Header" />
+</Frame>
+
+Affiche une barre de navigation en fil d'Ariane.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter } from "react-router-dom";
+import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
+
+export const MyComponent = () => {
+  const breadcrumbLinks = [
+    { children: "Home", href: "/" },
+    { children: "Category", href: "/category" },
+    { children: "Subcategory", href: "/category/subcategory" },
+    { children: "Current Page" },
+  ];
+
+  return (
+    <BrowserRouter>
+      <Breadcrumb className links={breadcrumbLinks} />
+    </BrowserRouter>
+    )
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés  | Type    | Description                                                                                                                                                                                                                                                                                |
+| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| nomDeClasse | chaîne  | Nom de classe facultatif pour un style supplémentaire                                                                                                                                                                                                                                      |
+| liens       | tableau | Un tableau d'objets, chacun représentant un lien de fil d'Ariane. Chaque objet a une propriété `children` (le contenu textuel du lien) et une propriété `href` facultative (l'URL vers laquelle naviguer lorsque le lien est cliqué) |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..ef6c6b2ae8
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Liens
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## Lien de contact
+
+Un composant de lien stylisé pour afficher les informations de contact.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés  | Type              | Description                                              |
+| ----------- | ----------------- | -------------------------------------------------------- |
+| nomDeClasse | chaîne            | Nom facultatif pour un style supplémentaire              |
+| href        | chaîne            | L'URL cible ou le chemin du lien                         |
+| onClick     | fonction          | Fonction de rappel à déclencher lors du clic sur le lien |
+| enfants     | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien              |
+
+</Tab>
+
+</Tabs>
+
+## Lien brut
+
+Un composant de lien stylisé pour afficher les liens.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés  | Type              | Description                                              |
+| ----------- | ----------------- | -------------------------------------------------------- |
+| nomDeClasse | chaîne            | Nom facultatif pour un style supplémentaire              |
+| href        | chaîne            | L'URL cible ou le chemin du lien                         |
+| auClique    | fonction          | Fonction de rappel à déclencher lors du clic sur le lien |
+| enfants     | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien              |
+
+</Tab>
+</Tabs>
+
+## Lien arrondi
+
+Un lien de style arrondi avec un composant Chip pour les liens.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés | Type              | Description                                              |
+| ---------- | ----------------- | -------------------------------------------------------- |
+| href       | chaîne            | L'URL cible ou le chemin du lien                         |
+| enfants    | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien              |
+| auClique   | fonction          | Fonction de rappel à déclencher lors du clic sur le lien |
+
+</Tab>
+</Tabs>
+
+## Lien social
+
+Liens sociaux stylisés, avec support pour différents types de liens sociaux, tels que les URL, LinkedIn, et X (ou Twitter).
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés | Type              | Description                                                                                                     |
+| ---------- | ----------------- | --------------------------------------------------------------------------------------------------------------- |
+| href       | chaîne            | L'URL cible ou le chemin du lien                                                                                |
+| enfants    | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien                                                                     |
+| type       | chaîne            | Le type de liens sociaux. Les options incluent: `url`, `LinkedIn`, et `Twitter` |
+| auClique   | fonction          | Fonction de rappel à déclencher lors du clic sur le lien                                                        |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation/menu-item.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation/menu-item.mdx
new file mode 100644
index 0000000000..fd6212fe28
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation/menu-item.mdx
@@ -0,0 +1,458 @@
+---
+title: Élément de menu
+image: /images/user-guide/kanban-views/kanban.png
+---
+
+<Frame>
+  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
+</Frame>
+
+Un élément de menu polyvalent conçu pour être utilisé dans un menu ou une liste de navigation.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { MenuItem } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  const handleMenuItemClick = (event) => {
+    console.log("Menu item clicked!", event);
+  };
+
+  const handleButtonClick = (event) => {
+    console.log("Icon button clicked!", event);
+  };
+
+  return (
+    <MenuItem
+      LeftIcon={IconBell}
+      accent="default"
+      text="Menu item text"
+      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
+      isTooltipOpen={true}
+      testId="menu-item-1"
+      onClick={handleMenuItemClick}
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés    | Type           | Description                                                                                                                                    |
+| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| LeftIcon      | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu                                                                  |
+| accent        | chaîne         | Spécifie la couleur d'accent de l'élément de menu. Les options incluent : `default`, `danger` et `placeholder` |
+| texte         | chaîne         | Le contenu texte de l'élément de menu                                                                                                          |
+| boutonsIcône  | tableau        | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu                                             |
+| isTooltipOpen | booléen        | Contrôle la visibilité de l'infobulle associée à l'élément de menu                                                                             |
+| testId        | chaîne         | L'attribut data-testid à des fins de test                                                                                                      |
+| auClique      | fonction       | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu                                                                           |
+| nomDeClasse   | chaîne         | Nom facultatif pour un style supplémentaire                                                                                                    |
+
+</Tab>
+</Tabs>
+
+## Variantes
+
+Les différentes variantes du composant d'élément de menu incluent les suivantes :
+
+### Commande
+
+Un élément de menu de style commande dans un menu pour indiquer des raccourcis clavier.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { MenuItemCommand } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  const handleCommandClick = () => {
+    console.log("Command clicked!");
+  };
+
+  return (
+    <MenuItemCommand
+      LeftIcon={IconBell}
+      text="First Option"
+      firstHotKey="⌘"
+      secondHotKey="1"
+      isSelected={true}
+      onClick={handleCommandClick}
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés        | Type           | Description                                                                   |
+| ----------------- | -------------- | ----------------------------------------------------------------------------- |
+| LeftIcon          | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte             | chaîne         | Le contenu texte de l'élément de menu                                         |
+| premierRaccourci  | chaîne         | Le premier raccourci clavier associé à la commande                            |
+| deuxièmeRaccourci | chaîne         | Le deuxième raccourci clavier associé à la commande                           |
+| estSélectionné    | booléen        | Indique si l'élément de menu est sélectionné ou surligné                      |
+| onClick           | fonction       | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu          |
+| nomDeClasse       | chaîne         | Nom facultatif pour un style supplémentaire                                   |
+
+</Tab>
+</Tabs>
+
+### Draggable
+
+Un élément de menu draggable conçu pour être utilisé dans un menu ou une liste où les éléments peuvent être glissés, et des actions supplémentaires peuvent être effectuées via les boutons d'icônes.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { MenuItemDraggable } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  const handleMenuItemClick = (event) => {
+    console.log("Menu item clicked!", event);
+  };
+
+  return (
+    <MenuItemDraggable
+      LeftIcon={IconBell}
+      accent="default"
+      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
+      isTooltipOpen={false}
+      onClick={handleMenuItemClick}
+      text="Menu item draggable"
+      isDragDisabled={false}
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés     | Type           | Description                                                                                                   |
+| -------------- | -------------- | ------------------------------------------------------------------------------------------------------------- |
+| LeftIcon       | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu                                 |
+| accent         | chaîne         | La couleur d'accent de l'élément de menu. Elle peut être `défaut`, `placeholder`, et `danger` |
+| boutonsIcône   | tableau        | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu            |
+| isTooltipOpen  | booléen        | Contrôle la visibilité de l'infobulle associée à l'élément de menu                                            |
+| auClique       | fonction       | Fonction de rappel à déclencher lors du clic sur le lien                                                      |
+| texte          | chaîne         | Le contenu texte de l'élément de menu                                                                         |
+| isDragDisabled | booléen        | Indique si le glissement est désactivé                                                                        |
+| nomDeClasse    | chaîne         | Nom facultatif pour un style supplémentaire                                                                   |
+
+</Tab>
+</Tabs>
+
+### Sélection multiple
+
+Fournit un moyen d'implémenter une fonctionnalité de sélection multiple avec une case à cocher associée.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { MenuItemMultiSelect } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+  return (
+    <MenuItemMultiSelect
+      LeftIcon={IconBell}
+      text="First Option"
+      selected={false}
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés     | Type           | Description                                                                   |
+| -------------- | -------------- | ----------------------------------------------------------------------------- |
+| LeftIcon       | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte          | chaîne         | Le contenu texte de l'élément de menu                                         |
+| sélectionné    | booléen        | Indique si l'élément de menu est sélectionné (coché)       |
+| onSelectChange | fonction       | Fonction de rappel déclenchée lorsque l'état de la case à cocher change       |
+| nomDeClasse    | chaîne         | Nom facultatif pour un style supplémentaire                                   |
+
+</Tab>
+</Tabs>
+
+### Sélection multiple avec avatar
+
+Un élément de menu multi-sélection avec un avatar, une case à cocher pour la sélection, et du contenu textuel.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { MenuItemMultiSelectAvatar } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  const imageUrl =
+    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
+
+  return (
+    <MenuItemMultiSelectAvatar
+      avatar={<img src={imageUrl} alt="Avatar" />}
+      text="First Option"
+      selected={false}
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés     | Type        | Description                                                             |
+| -------------- | ----------- | ----------------------------------------------------------------------- |
+| avatar         | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu  |
+| texte          | chaîne      | Le contenu texte de l'élément de menu                                   |
+| sélectionné    | booléen     | Indique si l'élément de menu est sélectionné (coché) |
+| onSelectChange | fonction    | Fonction de rappel déclenchée lorsque l'état de la case à cocher change |
+| nomDeClasse    | chaîne      | Nom facultatif pour un style supplémentaire                             |
+
+</Tab>
+</Tabs>
+
+### Naviguer
+
+Un élément de menu comportant une icône facultative à gauche, un contenu textuel, et une icône de chevron droite.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { MenuItemNavigate } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  const handleNavigation = () => {
+    console.log("Navigate to another page");
+  };
+
+  return (
+    <MenuItemNavigate
+      LeftIcon={IconBell}
+      text="First Option"
+      onClick={handleNavigation}
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés  | Type           | Description                                                                   |
+| ----------- | -------------- | ----------------------------------------------------------------------------- |
+| LeftIcon    | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte       | chaîne         | Le contenu texte de l'élément de menu                                         |
+| auClique    | fonction       | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu        |
+| nomDeClasse | chaîne         | Nom facultatif pour un style supplémentaire                                   |
+
+</Tab>
+</Tabs>
+
+### Sélectionner
+
+Un élément de menu sélectionnable, avec un contenu facultatif à gauche (icône et texte) et un indicateur (icône de coche) pour l'état sélectionné.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconBell } from "@tabler/icons-react";
+import { MenuItemSelect } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  const handleSelection = () => {
+    console.log("Menu item selected");
+  };
+
+  return (
+    <MenuItemSelect
+      LeftIcon={IconBell}
+      text="First Option"
+      selected={true}
+      disabled={false}
+      hovered={false}
+      onClick={handleSelection}
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés  | Type           | Description                                                                   |
+| ----------- | -------------- | ----------------------------------------------------------------------------- |
+| LeftIcon    | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
+| texte       | chaîne         | Le contenu texte de l'élément de menu                                         |
+| sélectionné | booléen        | Indique si l'élément de menu est sélectionné (coché)       |
+| désactivé   | booléen        | Indique si l'élément de menu est désactivé                                    |
+| survolé     | booléen        | Indique si l'élément de menu est actuellement survolé                         |
+| auClique    | fonction       | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu        |
+| nomDeClasse | chaîne         | Nom facultatif pour un style supplémentaire                                   |
+
+</Tab>
+</Tabs>
+
+### Sélectionner Avatar
+
+Un élément de menu sélectionnable avec un avatar, avec un contenu facultatif à gauche (avatar et texte) et un indicateur (icône de coche) pour l'état sélectionné.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { MenuItemSelectAvatar } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  const imageUrl =
+    "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
+
+  const handleSelection = () => {
+    console.log("Menu item selected");
+  };
+
+  return (
+    <MenuItemSelectAvatar
+      avatar={<img src={imageUrl} alt="Avatar" />}
+      text="First Option"
+      selected={true}
+      disabled={false}
+      hovered={false}
+      testId="menu-item-test"
+      onClick={handleSelection}
+      className
+    />
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés  | Type        | Description                                                             |
+| ----------- | ----------- | ----------------------------------------------------------------------- |
+| avatar      | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu  |
+| texte       | chaîne      | Le contenu texte de l'élément de menu                                   |
+| sélectionné | booléen     | Indique si l'élément de menu est sélectionné (coché) |
+| désactivé   | booléen     | Indique si l'élément de menu est désactivé                              |
+| survolé     | booléen     | Indique si l'élément de menu est actuellement survolé                   |
+| testId      | chaîne      | L'attribut data-testid à des fins de test                               |
+| onClick     | fonction    | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu  |
+| nomDeClasse | chaîne      | Nom facultatif pour un style supplémentaire                             |
+
+</Tab>
+</Tabs>
+
+### Sélection de Couleur
+
+Un élément de menu sélectionnable avec un échantillon de couleur pour les scénarios où vous souhaitez que les utilisateurs choisissent une couleur dans un menu.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { MenuItemSelectColor } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  const handleSelection = () => {
+    console.log("Menu item selected");
+  };
+
+  return (
+    <MenuItemSelectColor
+      color="green"
+      selected={true}
+      disabled={false}
+      hovered={true}
+      variant="default"
+      onClick={handleSelection}
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés  | Type     | Description                                                                                                                                                                                                             |
+| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| couleur     | chaîne   | La couleur à thème à afficher comme échantillon dans l'élément de menu. Les options incluent: `vert`, `turquoise`, `ciel`, `bleu`, `violet`, `rose`, `rouge`, `orange`, `jaune`, `gris` |
+| sélectionné | booléen  | Indique si l'élément de menu est sélectionné (coché)                                                                                                                                                 |
+| désactivé   | booléen  | Indique si l'élément de menu est désactivé                                                                                                                                                                              |
+| survolé     | booléen  | Indique si l'élément de menu est actuellement survolé                                                                                                                                                                   |
+| variante    | chaîne   | La variante de l'échantillon de couleur. Elle peut être `défaut` ou `pipeline`                                                                                                                          |
+| onClick     | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu                                                                                                                                                  |
+| nomDeClasse | chaîne   | Nom facultatif pour un style supplémentaire                                                                                                                                                                             |
+
+</Tab>
+</Tabs>
+
+### Basculer
+
+Un élément de menu avec un interrupteur à bascule associé pour permettre aux utilisateurs d'activer ou de désactiver une fonctionnalité spécifique
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconBell } from '@tabler/icons-react';
+
+import { MenuItemToggle } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+
+  return (
+    <MenuItemToggle
+      LeftIcon={IconBell}
+      text="First Option"
+      toggled={true}
+      toggleSize="small"
+      className
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriétés            | Type           | Description                                                                            |
+| --------------------- | -------------- | -------------------------------------------------------------------------------------- |
+| LeftIcon              | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu          |
+| texte                 | chaîne         | Le contenu texte de l'élément de menu                                                  |
+| basculé               | booléen        | Indique si l'interrupteur est en "marche" ou "arrêt".                  |
+| surChangementBasculer | fonction       | Fonction de rappel déclenchée lorsque l'état de l'interrupteur change. |
+| tailleBasculer        | chaîne         | La taille de l'interrupteur à bascule. Cela peut être soit \          |
+| nomDeClasse           | chaîne         | Nom facultatif pour un style supplémentaire                                            |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/fr/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..5dd2e965f5
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Barre d'étape
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Affiche la progression à travers une séquence d'étapes numérotées en surlignant l'étape active. Il affiche un conteneur avec des étapes, chacune représentée par le composant `Step`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+  return (
+    <StepBar activeStep={2}>
+      <StepBar.Step>Step 1</StepBar.Step>
+      <StepBar.Step>Step 2</StepBar.Step>
+      <StepBar.Step>Step 3</StepBar.Step>
+    </StepBar>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés  | Type   | Description                                                                                                               |
+| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------- |
+| étapeActive | nombre | L'index de l'étape actuellement active. Cela détermine quelle étape doit être visuellement mise en valeur |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/fr/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..f2d043bd63
--- /dev/null
+++ b/packages/twenty-docs/l/fr/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Retour d'information
+image: /images/user-guide/emails/emails_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
+</Frame>
+
+Indique le progrès ou le compte à rebours et passe de droite à gauche.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+  return (
+    <ProgressBar
+      duration={6000}
+      delay={0}
+      easing="easeInOut"
+      barHeight={10}
+      barColor="#4bb543"
+      autoStart={true}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés           | Type    | Description                                                                                               | Par défaut |
+| -------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ---------- |
+| durée                | nombre  | La durée totale de l'animation de la barre de progression en millisecondes                                | 3          |
+| délai                | nombre  | Le délai de démarrage de l'animation de la barre de progression en millisecondes                          | 0          |
+| adoucissement        | chaîne  | Fonction d'adoucissement pour l'animation de la barre de progression                                      | easeInOut  |
+| hauteurBarre         | nombre  | La hauteur de la barre en pixels                                                                          | 24         |
+| couleurBarre         | chaîne  | La couleur de la barre                                                                                    | gray80     |
+| démarrageAutomatique | booléen | Si `true`, l'animation de la barre de progression commence automatiquement lorsque le composant est monté | `vrai`     |
+
+</Tab>
+</Tabs>
+
+## Barre de Progression Circulaire
+
+Indique le progrès d'une tâche, souvent utilisé sur des écrans de chargement ou dans des zones où vous souhaitez communiquer des processus en cours à l'utilisateur.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriétés   | Type   | Description                                       | Par défaut      |
+| ------------ | ------ | ------------------------------------------------- | --------------- |
+| taille       | nombre | La taille de la barre de progression circulaire   | 50              |
+| largeurBarre | nombre | La largeur de la ligne de la barre de progression | 5               |
+| couleurBarre | chaîne | La couleur de la barre de progression             | couleurCourante |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/fr/user-guide/settings/capabilities/profile-settings.mdx b/packages/twenty-docs/l/fr/user-guide/settings/capabilities/profile-settings.mdx
new file mode 100644
index 0000000000..ee54d91c18
--- /dev/null
+++ b/packages/twenty-docs/l/fr/user-guide/settings/capabilities/profile-settings.mdx
@@ -0,0 +1,43 @@
+---
+title: Paramètres du profil
+description: Gérez votre profil personnel et vos paramètres de sécurité.
+---
+
+## Informations personnelles
+
+### Nom et e-mail
+
+* **Nom affiché**: Modifiez comment votre nom apparaît aux autres membres de l’espace de travail
+* **Adresse e-mail**: Changez votre e-mail de connexion (nécessite vérification)
+* **Photo de profil**: Téléchargez un avatar personnalisé ou utilisez vos initiales
+
+## Paramètres de sécurité
+
+### Authentification à deux facteurs (2FA)
+
+Activez le 2FA pour ajouter une couche supplémentaire de sécurité à votre compte :
+
+1. Accédez à **Paramètres → Paramètres du profil**
+2. Cliquez sur **Activer le 2FA**
+3. Scannez le code QR avec votre application d'authentification
+4. Entrez le code de vérification pour confirmer
+
+### Gestion des mots de passe
+
+* **Modifier le mot de passe**: Mettez à jour votre mot de passe actuel
+* **Exigences du mot de passe**: Doit contenir au moins 8 caractères
+
+## Gestion du profil
+
+### Supprimer le compte
+
+<Warning>
+  La suppression de votre compte supprimera définitivement votre accès à tous les espaces de travail. Cette action ne peut être annulée, vous perdrez l'accès à tous les espaces de travail où vous êtes membre, et vous devriez envisager de quitter des espaces de travail individuels si vous souhaitez uniquement quitter certaines équipes.
+</Warning>
+
+Pour supprimer votre compte :
+
+1. Accédez à **Paramètres → Paramètres du profil**
+2. Faites défiler jusqu'à **Zone de danger**
+3. Cliquez sur **Supprimer le compte**
+4. Confirmez en tapant votre adresse e-mail
\ No newline at end of file
diff --git a/packages/twenty-docs/l/it/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/it/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..a026a4c13b
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: Etichetta
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Componente per categorizzare o etichettare visivamente i contenuti.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props      | Tipo     | Descrizione                                                                                                                                                                 |
+| ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| nomeClasse | string   | Nome opzionale per stile aggiuntivo                                                                                                                                         |
+| colore     | string   | Colore dell'etichetta. Le opzioni includono: `verde`, `turchese`, `cielo`, `blu`, `viola`, `rosa`, `rosso`, `arancione`, `giallo`, `grigio` |
+| testo      | string   | Il contenuto dell'etichetta                                                                                                                                                 |
+| onClick    | funzione | Funzione opzionale chiamata quando un utente clicca sull'etichetta                                                                                                          |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/it/twenty-ui/input.mdx b/packages/twenty-docs/l/it/twenty-ui/input.mdx
new file mode 100644
index 0000000000..548d44a7e4
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Input
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/it/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/it/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..31e1bc3726
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Editor di blocchi
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Utilizza un editor di testo avanzato basato su blocchi di [BlockNote](https://www.blocknotejs.org/) per permettere agli utenti di modificare e visualizzare blocchi di contenuti.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Props  | Tipo              | Descrizione                                          |
+| ------ | ----------------- | ---------------------------------------------------- |
+| editor | `BlockNoteEditor` | L'istanza o la configurazione dell'editor di blocchi |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/it/twenty-ui/input/text.mdx b/packages/twenty-docs/l/it/twenty-ui/input/text.mdx
new file mode 100644
index 0000000000..d4104cf4a0
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/input/text.mdx
@@ -0,0 +1,153 @@
+---
+title: Testo
+image: /images/user-guide/notes/notes_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
+</Frame>
+
+## Input Testo
+
+Consente agli utenti di inserire e modificare il testo.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+  const handleChange = (text) => {
+    console.log("Input changed:", text);
+  };
+
+  const handleKeyDown = (event) => {
+    console.log("Key pressed:", event.key);
+  };
+
+  return (
+    <RecoilRoot>
+      <TextInput
+        className
+        label="Username"
+        onChange={handleChange}
+        fullWidth={false}
+        disableHotkeys={false}
+        error="Invalid username"
+        onKeyDown={handleKeyDown}
+        RightIcon={null}
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props                | Tipo            | Descrizione                                                                                                                                      |
+| -------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| nomeClasse           | string          | Nome opzionale per stile aggiuntivo                                                                                                              |
+| etichetta            | string          | Rappresenta l'etichetta per l'input                                                                                                              |
+| onChange             | funzione        | La funzione chiamata quando cambia il valore dell'input                                                                                          |
+| larghezzaCompleta    | booleano        | Indica se l'input deve occupare il 100% della larghezza                                                                                          |
+| disattivaTastiRapidi | booleano        | Indica se i tasti rapidi sono abilitati per l'input                                                                                              |
+| errore               | string          | Rappresenta il messaggio di errore da visualizzare. Quando fornito, aggiunge anche un'icona di errore sul lato destro dell'input |
+| premiTasto           | funzione        | Chiamato quando un tasto viene premuto mentre il campo di input è attivo. Riceve un `React.KeyboardEvent` come argomento         |
+| IconaDestra          | IconaComponente | Un componente icona opzionale visualizzato sul lato destro dell'input                                                                            |
+
+Il componente accetta anche altre proprietà dell'elemento di input HTML.
+
+</Tab>
+
+</Tabs>
+
+## Input Testo Autosize
+
+Componente di input testo che regola automaticamente la sua altezza in base al contenuto.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+  return (
+    <RecoilRoot>
+      <AutosizeTextInput
+        onValidate={() => console.log("onValidate function fired")}
+        minRows={1}
+        placeholder="Write a comment"
+        onFocus={() => console.log("onFocus function fired")}
+        variant="icon"
+        buttonTitle
+        value="Task: "
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props          | Tipo     | Descrizione                                                                                                       |
+| -------------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
+| suValida       | funzione | La funzione di callback che si vuole attivare quando l'utente valida l'input                                      |
+| righeMinime    | numero   | Il numero minimo di righe per l'area di testo                                                                     |
+| segnaposto     | string   | Il testo segnaposto che si vuole visualizzare quando l'area di testo è vuota                                      |
+| suFocus        | funzione | La funzione di callback che si vuole attivare quando l'area di testo ottiene il focus                             |
+| variante       | string   | La variante dell'input. Le opzioni includono: `predefinito`, `icona` e `pulsante` |
+| titoloPulsante | string   | Il titolo per il pulsante (applicabile solo per la variante pulsante)                          |
+| valore         | string   | Il valore iniziale per l'area di testo                                                                            |
+
+</Tab>
+
+</Tabs>
+
+## Area di Testo
+
+Consente di creare input di testo multilinea.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+  return (
+    <TextArea
+    disabled={false}
+    minRows={4}
+    onChange={()=>console.log('On change function fired')}
+    placeholder="Enter text here"
+    value=""
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props        | Tipo     | Descrizione                                                                 |
+| ------------ | -------- | --------------------------------------------------------------------------- |
+| disabilitato | booleano | Indica se l'area di testo è disabilitata                                    |
+| righeMinime  | numero   | Numero minimo di righe visibili per l'area di testo.        |
+| onChange     | funzione | Funzione di callback attivata quando il contenuto dell'area di testo cambia |
+| segnaposto   | string   | Il testo segnaposto visualizzato quando l'area di testo è vuota             |
+| valore       | string   | Il valore corrente dell'area di testo                                       |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/it/twenty-ui/navigation.mdx b/packages/twenty-docs/l/it/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..79afc8251b
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigazione
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/it/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/it/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..a6257ab9c3
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Collegamenti
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## Collegamento di Contatto
+
+Un componente di collegamento stilizzato per visualizzare le informazioni di contatto.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Props      | Tipo              | Descrizione                                                         |
+| ---------- | ----------------- | ------------------------------------------------------------------- |
+| nomeClasse | string            | Nome opzionale per stile aggiuntivo                                 |
+| href       | string            | L'URL di destinazione o il percorso per il link                     |
+| onClick    | funzione          | Funzione di callback da attivare quando si fa clic sul collegamento |
+| figli      | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento           |
+
+</Tab>
+
+</Tabs>
+
+## Collegamento Non Elaborato
+
+Un componente di collegamento stilizzato per visualizzare collegamenti.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Props      | Tipo              | Descrizione                                                         |
+| ---------- | ----------------- | ------------------------------------------------------------------- |
+| nomeClasse | string            | Nome opzionale per stile aggiuntivo                                 |
+| href       | string            | L'URL di destinazione o il percorso per il link                     |
+| onClick    | funzione          | Funzione di callback da attivare quando si fa clic sul collegamento |
+| figli      | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento           |
+
+</Tab>
+</Tabs>
+
+## Collegamento Arrotondato
+
+Un collegamento stilizzato arrotondato con un componente Chip per i collegamenti.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props   | Tipo              | Descrizione                                                         |
+| ------- | ----------------- | ------------------------------------------------------------------- |
+| href    | string            | L'URL di destinazione o il percorso per il link                     |
+| figli   | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento           |
+| onClick | funzione          | Funzione di callback da attivare quando si fa clic sul collegamento |
+
+</Tab>
+</Tabs>
+
+## Collegamento Sociale
+
+Collegamenti social stilizzati, con supporto per vari tipi di collegamenti social, come URL, LinkedIn e X (o Twitter).
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Props   | Tipo              | Descrizione                                                                                                          |
+| ------- | ----------------- | -------------------------------------------------------------------------------------------------------------------- |
+| href    | string            | L'URL di destinazione o il percorso per il link                                                                      |
+| figli   | `React.ReactNode` | Il contenuto da visualizzare all'interno del collegamento                                                            |
+| tipo    | string            | Il tipo di collegamenti social. Le opzioni includono: `url`, `LinkedIn`, e `Twitter` |
+| onClick | funzione          | Funzione di callback da attivare quando si fa clic sul collegamento                                                  |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/it/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/it/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..c6ef8d962f
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Barra di navigazione
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Rende una barra di navigazione che contiene più componenti `NavigationBarItem`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Props          | Tipo   | Descrizione                                                                                                                                                                                                                        |
+| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | string | Il nome dell'elemento di navigazione attualmente attivo                                                                                                                                                                            |
+| elementi       | array  | Un array di oggetti che rappresentano ciascun elemento di navigazione. Ogni oggetto contiene il `name`, il componente `Icon` da visualizzare e una funzione `onClick` da chiamare quando l'elemento viene cliccato |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/it/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/it/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..01bfd6ae05
--- /dev/null
+++ b/packages/twenty-docs/l/it/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Feedback
+image: /images/user-guide/emails/emails_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
+</Frame>
+
+Indica progresso o conto alla rovescia e si muove da destra a sinistra.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+  return (
+    <ProgressBar
+      duration={6000}
+      delay={0}
+      easing="easeInOut"
+      barHeight={10}
+      barColor="#4bb543"
+      autoStart={true}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props           | Tipo     | Descrizione                                                                                                | Predefinito |
+| --------------- | -------- | ---------------------------------------------------------------------------------------------------------- | ----------- |
+| durata          | numero   | La durata totale dell'animazione della barra di progresso in millisecondi                                  | 3           |
+| ritardo         | numero   | Il ritardo nell'avvio dell'animazione della barra di progresso in millisecondi                             | 0           |
+| smorzamento     | string   | Funzione di smorzamento per l'animazione della barra di progresso                                          | easeInOut   |
+| altezzaBarra    | numero   | L'altezza della barra in pixel                                                                             | 24          |
+| coloreBarra     | string   | Il colore della barra                                                                                      | gray80      |
+| avvioAutomatico | booleano | Se `true`, l'animazione della barra di progresso inizia automaticamente quando il componente viene montato | `vero`      |
+
+</Tab>
+</Tabs>
+
+## Barra di progresso circolare
+
+Indica il progresso di un'attività, spesso utilizzata in schermate di caricamento o aree in cui si desidera comunicare processi in corso all'utente.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Props          | Tipo   | Descrizione                                       | Predefinito  |
+| -------------- | ------ | ------------------------------------------------- | ------------ |
+| dimensione     | numero | La dimensione della barra di progresso circolare  | 50           |
+| larghezzaBarra | numero | La larghezza della linea della barra di progresso | 5            |
+| coloreBarra    | string | Il colore della barra di progresso                | currentColor |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/ja/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..5f170e5cc2
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: アプリツールチップ
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
+
+ユーザーが要素とやり取りするときに追加情報を表示する短いメッセージ。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| プロパティ            | タイプ                                     | 説明                                                                                                                                                          |
+| ---------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className        | string                                  | 追加のスタイリング用のオプションのCSSクラス                                                                                                                                     |
+| anchorSelect     | CSSセレクタ                                 | ツールチップのアンカー（ツールチップをトリガーする要素）のセレクタ                                                                                                                           |
+| content          | string                                  | ツールチップ内に表示したいコンテンツ                                                                                                                                          |
+| delayHide        | 数                                       | アンカーからカーソルが離れた後、ツールチップを非表示にする前の遅延（秒）                                                                                                                        |
+| offset           | 数                                       | ツールチップの位置を決めるためのオフセット（ピクセル）                                                                                                                                 |
+| noArrow          | ブール型                                    | `true`の場合、ツールチップの矢印を非表示にします                                                                                                                                 |
+| isOpen           | ブール型                                    | `true`の場合、ツールチップはデフォルトで開かれています                                                                                                                              |
+| place            | `react-tooltip`からの`PlacesType`文字列       | ツールチップの配置を指定します。 値は`bottom`、`left`、`right`、`top`、`top-start`、`top-end`、`right-start`、`right-end`、`bottom-start`、`bottom-end`、`left-start`、`left-end`などがあります |
+| positionStrategy | `react-tooltip`からの`PositionStrategy`文字列 | ツールチップの位置戦略。 ツールチップの位置戦略。 2つの値があります: `absolute` と `fixed`                                                                                   |
+
+</Tab>
+
+</Tabs>
+
+## ツールチップを伴うオーバーフローテキスト
+
+オーバーフローテキストを処理し、テキストがオーバーフローしたときにツールチップを表示します。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  const crmTaskDescription =
+    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| プロパティ | タイプ    | 説明                         |
+| ----- | ------ | -------------------------- |
+| テキスト  | string | オーバーフローテキストエリア内に表示したいコンテンツ |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/display/checkmark.mdx b/packages/twenty-docs/l/ja/twenty-ui/display/checkmark.mdx
new file mode 100644
index 0000000000..228d4b883d
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/display/checkmark.mdx
@@ -0,0 +1,69 @@
+---
+title: チェックマーク
+image: '""'
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
+
+成功したまたは完了したアクションを示します。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Checkmark } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  return <Checkmark />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+`div` 要素の全てのプロパティを受け取る他、`React.ComponentPropsWithoutRef<'div'>`を拡張します。
+
+</Tab>
+
+</Tabs>
+
+## アニメーション付きチェックマーク
+
+アニメーション機能を追加したチェックマークアイコンを示します。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { AnimatedCheckmark } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  return (
+    <AnimatedCheckmark
+      isAnimating={true}
+      color="green"
+      duration={0.5}
+      size={30}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| プロパティ      | タイプ    | 説明                    | デフォルト                |
+| ---------- | ------ | --------------------- | -------------------- |
+| アニメーションの有無 | ブール型   | チェックマークのアニメーションを制御します | 偽                    |
+| カラー        | string | チェックマークの色             |                      |
+| 継続時間       | 数      | アニメーションの持続時間（秒）       | 0.5秒 |
+| サイズ        | 数      | チェックマークのサイズ           | 28ピクセル               |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/display/chip.mdx b/packages/twenty-docs/l/ja/twenty-ui/display/chip.mdx
new file mode 100644
index 0000000000..15a73a06c8
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/display/chip.mdx
@@ -0,0 +1,148 @@
+---
+title: チップ
+image: /images/user-guide/github/github-header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/github/github-header.png" alt="Header" />
+</Frame>
+
+ラベル、オプションの左および右コンポーネント、さまざまなスタイルオプションを使用してラベルやタグを表示するクリック可能または非クリック可能なコンテナとして使用できるビジュアル要素。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+  return (
+    <Chip
+      size="large"
+      label="Clickable Chip"
+      clickable={true}
+      variant="highlighted"
+      accent="text-primary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+    />
+  );
+};
+
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| プロパティ        | タイプ                     | 説明                                                                             |
+| ------------ | ----------------------- | ------------------------------------------------------------------------------ |
+| linkToEntity | string                  | エンティティへのリンク                                                                    |
+| entityId     | string                  | エンティティの一意識別子                                                                   |
+| 名前           | string                  | エンティティの名前                                                                      |
+| pictureUrl   | string                  | 写真",                                                                           |
+| avatarType   | アバタータイプ                 | 表示したいアバターのタイプ。 表示したいアバターのタイプ。 オプションは2つ：`rounded` と `squared`                   |
+| バリアント        | `EntityChipVariant` 列挙型 | 表示したいエンティティチップのバリアント。 表示したいエンティティチップのバリアント。 オプションは2つ：`regular` と `transparent` |
+| 左アイコン        | アイコンコンポーネント             | アイコンを表す React コンポーネント。 チップの左側に表示されます チップの左側に表示されます チップの左側に表示されます チップの左側に表示されます |
+
+</Tab>
+</Tabs>
+
+## 例
+
+### 透明無効チップ
+
+```jsx
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+  return (
+      <Chip 
+      size="large"
+      label="Transparent Disabled Chip"
+      clickable={false}
+      variant="rounded"
+      accent="text-secondary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+      />    
+  );
+};
+
+```
+
+<br/>
+
+### ツールチップ付き無効チップ
+
+```jsx
+import { Chip } from "twenty-ui/components";
+  
+export const MyComponent = () => {
+  return (
+      <Chip 
+      size="large"
+      label="Disabled chip that triggers a tooltip when overflowing."
+      clickable={false}
+      variant="regular"
+      accent="text-primary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+      />    
+  );
+};
+```
+
+## エンティティチップ
+
+エンティティに関する情報を表示するチップ風の要素。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+import { IconTwentyStar } from 'twenty-ui/display';
+import { Chip } from 'twenty-ui/components';
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <Chip
+        linkToEntity="/entity-link"
+        entityId="entityTest"
+        name="Entity name"
+        pictureUrl=""
+        avatarType="rounded"
+        variant="regular"
+        LeftIcon={IconTwentyStar}
+      />
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| プロパティ        | タイプ                     | 説明                                                                             |
+| ------------ | ----------------------- | ------------------------------------------------------------------------------ |
+| linkToEntity | string                  | エンティティへのリンク                                                                    |
+| entityId     | string                  | エンティティの一意識別子                                                                   |
+| 名前           | string                  | エンティティの名前                                                                      |
+| pictureUrl   | string                  | 写真",                                                                           |
+| avatarType   | アバタータイプ                 | 表示したいアバターのタイプ。 表示したいアバターのタイプ。 オプションは2つ：`rounded` と `squared`                   |
+| バリアント        | `EntityChipVariant` 列挙型 | 表示したいエンティティチップのバリアント。 表示したいエンティティチップのバリアント。 オプションは2つ：`regular` と `transparent` |
+| 左アイコン        | アイコンコンポーネント             | アイコンを表す React コンポーネント。 チップの左側に表示されます チップの左側に表示されます チップの左側に表示されます チップの左側に表示されます |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/ja/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..be619b2aaf
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: タグ
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+コンテンツを視覚的に分類またはラベル付けするためのコンポーネント。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| プロパティ     | タイプ    | 説明                                                                                                               |
+| --------- | ------ | ---------------------------------------------------------------------------------------------------------------- |
+| className | string | 追加のスタイリングのためのオプション名                                                                                              |
+| カラー       | string | タグの色。 タグの色。 タグの色。 タグの色。 オプションは次のとおりです: `緑`, `トルコ石`, `空`, `青`, `紫`, `ピンク`, `赤`, `オレンジ`, `黄`, `灰色` |
+| テキスト      | string | タグの内容                                                                                                            |
+| onClick   | 機能     | ユーザーがタグをクリックすると呼び出される任意の関数                                                                                       |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/input.mdx b/packages/twenty-docs/l/ja/twenty-ui/input.mdx
new file mode 100644
index 0000000000..00a51fbd15
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: 入力
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ja/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ja/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..93fd70dd8f
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: ブロックエディター
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+ブロックベースのリッチテキストエディター[BlockNote](https://www.blocknotejs.org/)を使用して、ユーザーがコンテンツのブロックを編集および表示できるようにします。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| プロパティ | タイプ               | 説明                   |
+| ----- | ----------------- | -------------------- |
+| エディター | `BlockNoteEditor` | ブロックエディターインスタンスまたは構成 |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/ja/twenty-ui/input/icon-picker.mdx
new file mode 100644
index 0000000000..0def7dafb4
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/input/icon-picker.mdx
@@ -0,0 +1,56 @@
+---
+title: アイコンピッカー
+image: /images/user-guide/github/github-header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/github/github-header.png" alt="Header" />
+</Frame>
+
+ドロップダウンベースのアイコンピッカーで、ユーザーがリストからアイコンを選択できます。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+   const [selectedIcon, setSelectedIcon] = useState("");
+   const handleIconChange = ({ iconKey, Icon }) => {
+     console.log("Selected Icon:", iconKey);
+     setSelectedIcon(iconKey);
+   };
+
+  return (
+    <RecoilRoot>
+      <IconPicker
+        disabled={false}
+        onChange={handleIconChange}
+        selectedIconKey={selectedIcon}
+        variant="primary"
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| プロパティ           | タイプ    | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| --------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| disabled        | ブール型   | `true` に設定されるとアイコンピッカーは無効になります                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| onChange        | 機能     | ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります |
+| selectedIconKey | string | 最初に選択されたアイコンのキー                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| onClickOutside  | 機能     | ユーザーがドロップダウン外をクリックしたときにトリガーされるコールバック関数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| onClose         | 機能     | ドロップダウンが閉じられたときにトリガーされるコールバック関数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| onOpen          | 機能     | ドロップダウンが開かれたときにトリガーされるコールバック関数                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| バリアント           | string | クリック可能なアイコンのビジュアルスタイルバリアント。 オプションには `primary`、 `secondary`、 `tertiary` が含まれます                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/navigation.mdx b/packages/twenty-docs/l/ja/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..54b9d1059d
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: ナビゲーション
+image: '""'
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ja/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/ja/twenty-ui/navigation/breadcrumb.mdx
new file mode 100644
index 0000000000..6dc3976138
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/navigation/breadcrumb.mdx
@@ -0,0 +1,44 @@
+---
+title: ブレッドクラム
+image: /images/user-guide/fields/field.png
+---
+
+<Frame>
+  <img src="/images/user-guide/fields/field.png" alt="Header" />
+</Frame>
+
+ブレッドクラムナビゲーションバーをレンダリングします。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter } from "react-router-dom";
+import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
+
+export const MyComponent = () => {
+  const breadcrumbLinks = [
+    { children: "Home", href: "/" },
+    { children: "Category", href: "/category" },
+    { children: "Subcategory", href: "/category/subcategory" },
+    { children: "Current Page" },
+  ];
+
+  return (
+    <BrowserRouter>
+      <Breadcrumb className links={breadcrumbLinks} />
+    </BrowserRouter>
+    )
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| プロパティ     | タイプ    | 説明                                                                                                                                                                                                                                                 |
+| --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | string | 追加のスタイリングのためのオプションクラス名                                                                                                                                                                                                                             |
+| リンク       | array  | 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトには `children` プロパティ（リンクのテキストコンテンツ）とオプションの `href` プロパティ（リンクをクリックしたときに移動するURL）が含まれています。 |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/ja/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..58812ea080
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: リンク
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## 連絡先リンク
+
+連絡先情報を表示するためのスタイライズされたリンクコンポーネントです。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| プロパティ     | タイプ               | 説明                          |
+| --------- | ----------------- | --------------------------- |
+| className | string            | 追加スタイル用のオプション名              |
+| href      | string            | リンクのターゲットURLまたはパス           |
+| onClick   | 機能                | リンクがクリックされるとトリガーされるコールバック関数 |
+| children  | `React.ReactNode` | リンク内に表示されるコンテンツ             |
+
+</Tab>
+
+</Tabs>
+
+## 生リンク
+
+リンクを表示するためのスタイライズされたリンクコンポーネントです。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| プロパティ     | タイプ               | 説明                          |
+| --------- | ----------------- | --------------------------- |
+| className | string            | 追加のスタイリングのためのオプション名         |
+| href      | string            | リンクのターゲットURLまたはパス           |
+| onClick   | 機能                | リンクがクリックされるとトリガーされるコールバック関数 |
+| children  | `React.ReactNode` | リンク内に表示されるコンテンツ             |
+
+</Tab>
+</Tabs>
+
+## 丸リンク
+
+リンクのためのチップコンポーネントを備えた丸いスタイルのリンクです。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| プロパティ    | タイプ               | 説明                          |
+| -------- | ----------------- | --------------------------- |
+| href     | string            | リンクのターゲットURLまたはパス           |
+| children | `React.ReactNode` | リンク内に表示されるコンテンツ             |
+| onClick  | 機能                | リンクがクリックされるとトリガーされるコールバック関数 |
+
+</Tab>
+</Tabs>
+
+## ソーシャルリンク
+
+URL、LinkedIn、X(またはTwitter)など、さまざまなソーシャルリンクタイプに対応したスタイライズされたソーシャルリンクです。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| プロパティ    | タイプ               | 説明                                                                                                                             |
+| -------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| href     | string            | リンクのターゲットURLまたはパス                                                                                                              |
+| children | `React.ReactNode` | リンク内に表示されるコンテンツ                                                                                                                |
+| タイプ      | string            | ソーシャルリンクの種類です。 ソーシャルリンクの種類です。 オプションには、`url`、`LinkedIn`、`Twitter`があります。 ソーシャルリンクの種類です。 オプションには、`url`、`LinkedIn`、`Twitter`があります。 |
+| onClick  | 機能                | リンクがクリックされるとトリガーされるコールバック関数                                                                                                    |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/ja/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..15631e5092
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: ナビゲーションバー
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+複数の`NavigationBarItem`コンポーネントを含むナビゲーションバーをレンダリングします。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| プロパティ          | タイプ    | 説明                                                                                                                                                                                                                          |
+| -------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | string | 現在アクティブなナビゲーション項目の名前                                                                                                                                                                                                        |
+| アイテム           | array  | 各ナビゲーションアイテムを表すオブジェクトの配列。 各ナビゲーションアイテムを表すオブジェクトの配列。 各ナビゲーションアイテムを表すオブジェクトの配列。 各ナビゲーションアイテムを表すオブジェクトの配列。 各ナビゲーションアイテムを表すオブジェクトの配列。 各オブジェクトには、アイテムの `name`、表示する `Icon` コンポーネント、およびアイテムがクリックされたときに呼び出される `onClick` 関数が含まれています。 |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ja/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/ja/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..bfa215485e
--- /dev/null
+++ b/packages/twenty-docs/l/ja/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: ステップバー
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+アクティブなステップをハイライトして、一連の番号付きステップの進行状況を表示します。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 アクティブなステップをハイライトして、一連の番号付きステップの進行状況を表示します。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+  return (
+    <StepBar activeStep={2}>
+      <StepBar.Step>Step 1</StepBar.Step>
+      <StepBar.Step>Step 2</StepBar.Step>
+      <StepBar.Step>Step 3</StepBar.Step>
+    </StepBar>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| プロパティ     | タイプ | 説明                                                                                     |
+| --------- | --- | -------------------------------------------------------------------------------------- |
+| アクティブステップ | 数   | 現在アクティブなステップのインデックス。 これにより、どのステップを視覚的にハイライトするかが決まります。 これにより、どのステップを視覚的にハイライトするかが決まります。 |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/ko/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..0d9c355e33
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: 앱 툴팁
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
+
+요소와 상호작용할 때 추가 정보를 표시하는 간단한 메시지입니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티   | 유형                                      | 설명                                                                                                                                                                                                        |
+| ------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 클래스 네임 | 문자열                                     | 추가 스타일링을 위한 선택적 CSS 클래스                                                                                                                                                                                   |
+| 앵커 선택  | CSS 선택자                                 | 툴팁 앵커(툴팁을 트리거하는 요소)의 선택자                                                                                                                                                               |
+| 내용     | 문자열                                     | 툴팁 내에 표시할 내용을 입력하세요                                                                                                                                                                                       |
+| 지연 숨기기 | 숫자                                      | 커서가 앵커를 떠난 후 툴팁이 숨겨지기까지의 지연 시간(초)                                                                                                                                                      |
+| 오프셋    | 숫자                                      | 툴팁 위치 조건을 위한 픽셀 단위의 오프셋                                                                                                                                                                                   |
+| 화살표 없음 | 부울                                      | `true`이면 툴팁의 화살표가 숨겨집니다                                                                                                                                                                                   |
+| 열림 여부  | 부울                                      | `true`이면 툴팁이 기본적으로 열려 있습니다                                                                                                                                                                                |
+| 위치     | `react-tooltip`의 `PlacesType` 문자열       | 툴팁의 배치를 지정합니다. 값으로는 `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end` 등이 있습니다. |
+| 위치 전략  | `react-tooltip`의 `PositionStrategy` 문자열 | 툴팁에 대한 위치 전략입니다. 두 가지 값: `absolute` 및 `fixed`                                                                                                                             |
+
+</Tab>
+
+</Tabs>
+
+## 툴팁이 포함된 오버플로 텍스트
+
+텍스트가 넘칠 경우 처리하고 툴팁을 표시합니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  const crmTaskDescription =
+    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티 | 유형  | 설명                         |
+| ---- | --- | -------------------------- |
+| 텍스트  | 문자열 | 오버플로 텍스트 영역에 표시할 내용을 입력하세요 |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/display/checkmark.mdx b/packages/twenty-docs/l/ko/twenty-ui/display/checkmark.mdx
new file mode 100644
index 0000000000..d3bfe602af
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/display/checkmark.mdx
@@ -0,0 +1,69 @@
+---
+title: 체크마크
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
+
+성공하거나 완료된 작업을 나타냅니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Checkmark } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  return <Checkmark />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+`React.ComponentPropsWithoutRef<'div'>` 를 확장하며 일반 `div` 요소의 모든 속성을 수용합니다.
+
+</Tab>
+
+</Tabs>
+
+## 애니메이션 체크마크
+
+애니메이션 기능이 추가된 체크마크 아이콘을 나타냅니다.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { AnimatedCheckmark } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  return (
+    <AnimatedCheckmark
+      isAnimating={true}
+      color="green"
+      duration={0.5}
+      size={30}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티        | 유형  | 설명                                         | 기본값                  |
+| ----------- | --- | ------------------------------------------ | -------------------- |
+| isAnimating | 부울  | 체크마크가 애니메이션 중인지 여부를 제어합니다. | 거짓                   |
+| 색상          | 문자열 | 체크마크의 색상                                   |                      |
+| 지속 시간       | 숫자  | 애니메이션의 지속 시간(초)         | 0.5초 |
+| 크기          | 숫자  | 체크마크의 크기                                   | 28 픽셀                |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/ko/twenty-ui/display/icons.mdx
new file mode 100644
index 0000000000..9b3c77db87
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/display/icons.mdx
@@ -0,0 +1,83 @@
+---
+title: 아이콘들
+image: /images/user-guide/objects/objects.png
+---
+
+<Frame>
+  <img src="/images/user-guide/objects/objects.png" alt="Header" />
+</Frame>
+
+앱 전반에 걸쳐 사용되는 아이콘 목록입니다.
+
+## 타블러 아이콘
+
+앱 전반에 걸쳐 React에 타블러 아이콘을 사용합니다.
+
+<Tabs>
+
+<Tab title="Installation"><br/>
+
+```
+yarn add @tabler/icons-react
+```
+
+</Tab>
+
+<Tab title="Props">
+
+각 아이콘을 컴포넌트로 가져올 수 있습니다. Here's an example: <br />
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return <IconArrowLeft color="red" size={48} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티 | 유형  | 설명                 | 기본값          |
+| ---- | --- | ------------------ | ------------ |
+| 크기   | 숫자  | 픽셀 단위의 아이콘 높이와 너비  | 24           |
+| 색상   | 문자열 | 아이콘의 색상            | currentColor |
+| 스트로크 | 숫자  | 픽셀 단위의 아이콘 스트로크 너비 | 2            |
+
+</Tab>
+
+</Tabs>
+
+## 커스텀 아이콘
+
+타블러 아이콘 외에도 앱에는 일부 커스텀 아이콘이 사용됩니다.
+
+### 아이콘 주소록
+
+주소록 아이콘을 표시합니다.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  return <IconAddressBook size={24} stroke={2} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티 | 유형 | 설명                 | 기본값 |
+| ---- | -- | ------------------ | --- |
+| 크기   | 숫자 | 픽셀 단위의 아이콘 높이와 너비  | 24  |
+| 스트로크 | 숫자 | 픽셀 단위의 아이콘 스트로크 너비 | 2   |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/ko/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..e6c5ac8969
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: 태그
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+콘텐츠를 시각적으로 분류하거나 라벨을 붙이는 구성 요소입니다.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티    | 유형       | 설명                                                                                                                  |
+| ------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
+| 클래스 네임  | 문자열      | 추가 스타일을 위한 선택적 이름                                                                                                   |
+| 색상      | 문자열      | 태그의 색상. 옵션은 `녹색`, `터키옥색`, `하늘색`, `파랑`, `보라색`, `핑크`, `빨강`, `오렌지`, `노랑`, `회색`을 포함합니다. |
+| 텍스트     | 문자열      | 태그의 콘텐츠                                                                                                             |
+| onClick | function | 사용자가 태그를 클릭할 때 호출되는 선택적 함수                                                                                          |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input.mdx b/packages/twenty-docs/l/ko/twenty-ui/input.mdx
new file mode 100644
index 0000000000..61ed0ea41e
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: 입력
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..ebbb0ac9a6
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: 블록 편집기
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+사용자는 [BlockNote](https://www.blocknotejs.org/)의 블록 기반 리치 텍스트 편집기를 사용해 콘텐츠 블록을 편집하고 볼 수 있습니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티 | 유형                | 설명                |
+| ---- | ----------------- | ----------------- |
+| 편집기  | `BlockNoteEditor` | 블록 편집기 인스턴스 또는 구성 |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/checkbox.mdx
new file mode 100644
index 0000000000..c09281d778
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/checkbox.mdx
@@ -0,0 +1,47 @@
+---
+title: 체크박스
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
+
+사용자가 여러 옵션 중 여러 값을 선택해야 할 때 사용됩니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Checkbox } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return (
+    <Checkbox
+      checked={true}
+      indeterminate={false}
+      onChange={() => console.log("onChange function fired")}
+      onCheckedChange={() => console.log("onCheckedChange function fired")}
+      variant="primary"
+      size="small"
+      shape="squared"
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티            | 유형       | 설명                                                                                                 |
+| --------------- | -------- | -------------------------------------------------------------------------------------------------- |
+| 체크됨             | 부울       | 체크박스가 체크된 상태인지 나타냅니다                                                                               |
+| 불확정             | 부울       | 체크박스가 불확정 상태(체크되지 않음과 체크됨의 중간)에 있는지 나타냅니다                                       |
+| onChange        | function | 체크박스 상태가 변경될 때 호출할 콜백 함수입니다.                                                       |
+| onCheckedChange | function | `checked` 상태가 변경될 때 호출할 콜백 함수입니다.                                                  |
+| 변형              | 문자열      | 박스의 시각적 스타일 변형입니다. 옵션에는 `primary`, `secondary`, `tertiary`가 포함됩니다. |
+| 크기              | 문자열      | 체크박스의 크기입니다. 두 가지 옵션이 있습니다: `small`과 `large`                       |
+| 모양              | 문자열      | 체크박스의 모양입니다. 두 가지 옵션이 있습니다: `squared`와 `rounded`                   |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/color-scheme.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/color-scheme.mdx
new file mode 100644
index 0000000000..57edbd6980
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/color-scheme.mdx
@@ -0,0 +1,73 @@
+---
+title: 색 구성표
+image: /images/user-guide/fields/field.png
+---
+
+<Frame>
+  <img src="/images/user-guide/fields/field.png" alt="Header" />
+</Frame>
+
+## 색상 구성표 카드
+
+다양한 색상 구성표를 나타내며, 밝은 테마와 어두운 테마를 위해 특별히 설계되었습니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ColorSchemeCard } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return (
+      <ColorSchemeCard
+      variant="Dark"
+      selected={true}
+      />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티  | 유형                                      | 설명                                                                                  | 기본값 |
+| ----- | --------------------------------------- | ----------------------------------------------------------------------------------- | --- |
+| 변형    | 문자열                                     | 색상 구성표 변형. 옵션에는 `Dark`, `Light`, 및 `System`이 포함됩니다. | 라이트 |
+| 선택됨   | 부울                                      | `true`이면 선택한 색상 구성표를 나타내는 체크 표시가 나타납니다.                             |     |
+| 추가 속성 | `React.ComponentPropsWithoutRef<'div'>` | 기본 HTML `div` 요소 속성                                                                 |     |
+
+</Tab>
+
+</Tabs>
+
+## 색상 구성표 선택기
+
+사용자가 다양한 색상 구성표를 선택할 수 있도록 합니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ColorSchemePicker } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return <ColorSchemePicker
+  value="Dark"
+  onChange
+  />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티     | 유형       | 설명                            |
+| -------- | -------- | ----------------------------- |
+| 값        | `색 구성표`  | 현재 선택된 색상 구성표                 |
+| onChange | function | 사용자가 색상 구성표를 선택할 때 트리거할 콜백 함수 |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/image-input.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/image-input.mdx
new file mode 100644
index 0000000000..7fb33d882f
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/image-input.mdx
@@ -0,0 +1,37 @@
+---
+title: 이미지 입력
+image: /images/user-guide/objects/objects.png
+---
+
+<Frame>
+  <img src="/images/user-guide/objects/objects.png" alt="Header" />
+</Frame>
+
+사용자가 이미지를 업로드하고 제거할 수 있도록 합니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ImageInput } from "@/ui/input/components/ImageInput";
+
+export const MyComponent = () => {
+  return <ImageInput/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티         | 유형       | 설명                                                                                    |
+| ------------ | -------- | ------------------------------------------------------------------------------------- |
+| 사진           | 문자열      | 이미지 소스 URL                                                                            |
+| onUpload     | function | 사용자가 새 이미지를 업로드할 때 호출되는 함수입니다. `File` 객체를 매개변수로 받습니다. |
+| onRemove     | function | 사용자가 제거 버튼을 클릭할 때 호출되는 함수입니다.                                         |
+| onAbort      | function | 사용자가 이미지 업로드 중 중단 버튼을 클릭할 때 호출되는 함수입니다.                               |
+| isUploading  | 부울       | 이미지가 현재 업로드 중인지 여부를 나타냅니다.                                            |
+| errorMessage | 문자열      | 이미지 입력 아래에 표시할 선택적 오류 메시지입니다.                                         |
+| disabled     | 부울       | `true`인 경우 전체 입력이 비활성화되고 버튼을 클릭할 수 없습니다.                              |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/radio.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/radio.mdx
new file mode 100644
index 0000000000..f8c6d0c69e
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/radio.mdx
@@ -0,0 +1,104 @@
+---
+title: 라디오
+image: /images/user-guide/create-workspace/workspace-cover.png
+---
+
+<Frame>
+  <img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
+</Frame>
+
+사용자가 여러 옵션 중에서 하나만 선택할 수 있을 때 사용됩니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Radio } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+  const handleRadioChange = (event) => {
+    console.log("Radio button changed:", event.target.checked);
+  };
+
+  const handleCheckedChange = (checked) => {
+    console.log("Checked state changed:", checked);
+  };
+
+
+  return (
+    <Radio
+      checked={true}
+      value="Option 1"
+      onChange={handleRadioChange}
+      onCheckedChange={handleCheckedChange}
+      size="large"
+      disabled={false}
+      labelPosition="right"
+    />
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티            | 유형             | 설명                                                                                    |
+| --------------- | -------------- | ------------------------------------------------------------------------------------- |
+| 스타일             | `React.CSS` 속성 | 컴포넌트의 추가 인라인 스타일                                                                      |
+| 클래스 네임          | 문자열            | 추가 스타일링을 위한 선택적 CSS 클래스                                                               |
+| 체크됨             | 부울             | 라디오 버튼이 체크되었는지 여부를 나타냅니다                                                              |
+| 값               | 문자열            | 라디오 버튼과 연결된 라벨 또는 텍스트                                                                 |
+| onChange        | function       | 선택된 라디오 버튼이 변경될 때 호출되는 기능                                                             |
+| onCheckedChange | function       | 라디오 버튼의 `체크` 상태가 변경될 때 호출되는 기능                                                        |
+| 크기              | 문자열            | 라디오 버튼의 크기입니다. 옵션에는 `large`와 `small`이 포함됩니다                           |
+| disabled        | 부울             | `참`이면 라디오 버튼이 비활성화되어 클릭할 수 없습니다                                                       |
+| 라벨 위치           | 문자열            | 라벨 텍스트의 라디오 버튼에 대한 상대 위치입니다. 두 가지 옵션: `left`와 `right` |
+
+</Tab>
+</Tabs>
+
+## 라디오 그룹
+
+관련된 라디오 버튼들을 그룹화합니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import React, { useState } from "react";
+import { Radio, RadioGroup } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+  const [selectedValue, setSelectedValue] = useState("Option 1");
+
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+  };
+  
+  return (
+    <RadioGroup value={selectedValue} onChange={handleChange}>
+      <Radio value="Option 1" />
+      <Radio value="Option 2" />
+      <Radio value="Option 3" />
+    </RadioGroup>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티          | 유형                | 설명                                                 |
+| ------------- | ----------------- | -------------------------------------------------- |
+| 값             | 문자열               | 현재 선택된 라디오 버튼의 값                                   |
+| onChange      | function          | 라디오 버튼이 변경될 때 트리거되는 콜백 기능                          |
+| onValueChange | function          | 그룹에서 선택된 값이 변경될 때 트리거되는 콜백 기능.     |
+| children      | `React.ReactNode` | Radio와 같은 React 컴포넌트를 자식으로 Radio Group에 전달할 수 있습니다 |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/input/select.mdx b/packages/twenty-docs/l/ko/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..7e09271450
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: 선택
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+사용자가 미리 정의된 옵션 목록에서 값을 선택할 수 있도록 합니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+  return (
+    <RecoilRoot>
+      <Select
+        className
+        disabled={false}
+        label="Select an option"
+        options={[
+          { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
+          { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
+        ]}
+        value="option1"
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티     | 유형       | 설명                                                                                                                                                                   |
+| -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 클래스 네임   | 문자열      | 추가 스타일링을 위한 선택적 CSS 클래스                                                                                                                                              |
+| disabled | 부울       | `true`로 설정하면 사용자는 이 구성 요소와 상호작용할 수 없습니다.                                                                                                             |
+| 라벨       | 문자열      | `선택` 구성 요소의 목적을 설명하는 라벨                                                                                                                                              |
+| onChange | function | 선택된 값이 변경될 때 호출되는 함수                                                                                                                                                 |
+| 옵션       | 배열       | `선택된` 구성 요소에 사용할 수 있는 옵션들을 나타냅니다. 각 객체에는 `값`(고유 식별자), `라벨`(고유 식별자) 및 선택적 `아이콘`이 포함된 객체의 배열입니다. |
+| 값        | 문자열      | 현재 선택된 값을 나타냅니다. `옵션` 배열에서 하나의 `값` 속성과 일치해야 합니다.                                                                                     |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/navigation.mdx b/packages/twenty-docs/l/ko/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..ddf8d6f1bf
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: 네비게이션
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ko/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/ko/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..216ff17bd0
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: 링크
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## 연락 링크
+
+연락처 정보를 표시하기 위한 스타일화된 링크 구성 요소입니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티     | 유형                | 설명                    |
+| -------- | ----------------- | --------------------- |
+| 클래스 네임   | 문자열               | 추가 스타일링을 위한 선택적 이름    |
+| href     | 문자열               | 링크의 대상 URL 또는 경로      |
+| 클릭 시     | function          | 링크가 클릭될 때 트리거되는 콜백 함수 |
+| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |
+
+</Tab>
+
+</Tabs>
+
+## 원시 링크
+
+링크를 표시하기 위한 스타일화된 링크 구성 요소입니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티     | 유형                | 설명                    |
+| -------- | ----------------- | --------------------- |
+| 클래스 네임   | 문자열               | 추가 스타일을 위한 선택적 이름     |
+| href     | 문자열               | 링크의 대상 URL 또는 경로      |
+| onClick  | function          | 링크가 클릭될 때 트리거되는 콜백 함수 |
+| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |
+
+</Tab>
+</Tabs>
+
+## 둥근 링크
+
+Chip 구성 요소가 있는 라운드 스타일 링크입니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티     | 유형                | 설명                    |
+| -------- | ----------------- | --------------------- |
+| href     | 문자열               | 링크의 대상 URL 또는 경로      |
+| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠        |
+| onClick  | function          | 링크가 클릭될 때 트리거되는 콜백 함수 |
+
+</Tab>
+</Tabs>
+
+## 소셜 링크
+
+URL, LinkedIn 및 X(또는 Twitter)와 같은 다양한 소셜 링크 유형을 지원하는 스타일화된 소셜 링크입니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 프로퍼티     | 유형                | 설명                                                                                      |
+| -------- | ----------------- | --------------------------------------------------------------------------------------- |
+| href     | 문자열               | 링크의 대상 URL 또는 경로                                                                        |
+| children | `React.ReactNode` | 링크 내부에 표시할 콘텐츠                                                                          |
+| 유형       | 문자열               | 소셜 링크 유형입니다. 옵션은 다음과 같습니다: `url`, `LinkedIn`, `Twitter` |
+| 클릭 시     | function          | 링크가 클릭될 때 트리거되는 콜백 함수                                                                   |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ko/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/ko/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..fef13fa1be
--- /dev/null
+++ b/packages/twenty-docs/l/ko/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: 단계 막대
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+활성 단계가 강조 표시되어 있는 다단계 진행 상황을 표시합니다. 각각의 `Step` 구성 요소로 표현되는 단계를 포함하는 컨테이너를 렌더링합니다.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+  return (
+    <StepBar activeStep={2}>
+      <StepBar.Step>Step 1</StepBar.Step>
+      <StepBar.Step>Step 2</StepBar.Step>
+      <StepBar.Step>Step 3</StepBar.Step>
+    </StepBar>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 프로퍼티       | 유형 | 설명                                                                                  |
+| ---------- | -- | ----------------------------------------------------------------------------------- |
+| activeStep | 숫자 | 현재 활성 단계의 인덱스입니다. 어느 단계가 시각적으로 강조 표시되어야 하는지를 결정합니다. |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/pt/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/pt/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..ccabb2baad
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: Dica do Aplicativo
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
+
+Uma mensagem breve que exibe informações adicionais quando um usuário interage com um elemento.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriedades     | Tipo                                         | Descrição                                                                                                                                                                                                                               |
+| ---------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className        | string                                       | Classe CSS opcional para estilização adicional                                                                                                                                                                                          |
+| anchorSelect     | Seleção CSS                                  | Seletor para o âncora da dica (o elemento que aciona a dica)                                                                                                                                                         |
+| conteúdo         | string                                       | O conteúdo que deseja exibir na dica                                                                                                                                                                                                    |
+| delayHide        | número                                       | O atraso em segundos antes de ocultar a dica após o cursor deixar a âncora.                                                                                                                                             |
+| offset           | número                                       | O deslocamento em pixels para posicionar a dica.                                                                                                                                                                        |
+| noArrow          | booleano                                     | Se `true`, oculta a seta na dica.                                                                                                                                                                                       |
+| isOpen           | booleano                                     | Se `true`, a dica está aberta por padrão.                                                                                                                                                                               |
+| local            | string `PlacesType` de `react-tooltip`       | Especifica o posicionamento da dica. Os valores incluem `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, e `left-end`. |
+| positionStrategy | string `PositionStrategy` de `react-tooltip` | Estratégia de posição para a dica. Possui dois valores: `absolute` e `fixed`.                                                                                                           |
+
+</Tab>
+
+</Tabs>
+
+## Texto Overflow com Dica
+
+Lida com texto em excesso e exibe uma dica quando o texto transborda.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  const crmTaskDescription =
+    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriedades | Tipo   | Descrição                                                                     |
+| ------------ | ------ | ----------------------------------------------------------------------------- |
+| texto        | string | O conteúdo que você deseja exibir na área de texto excessivo. |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/pt/twenty-ui/input.mdx b/packages/twenty-docs/l/pt/twenty-ui/input.mdx
new file mode 100644
index 0000000000..e2e309dc53
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Entrada
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/pt/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/pt/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..a8260f22ef
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Editor de Blocos
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Usa um editor de texto rico baseado em blocos do [BlockNote](https://www.blocknotejs.org/) para permitir que os usuários editem e vejam blocos de conteúdo.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriedades | Tipo              | Descrição                                       |
+| ------------ | ----------------- | ----------------------------------------------- |
+| editor       | `BlockNoteEditor` | A instância ou configuração do editor de blocos |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/pt/twenty-ui/navigation.mdx b/packages/twenty-docs/l/pt/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..c1204bd49d
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navegação
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/pt/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/pt/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..c391e5d583
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Links
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## Link de Contato
+
+Um componente de link estilizado para exibir informações de contato.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriedades | Tipo              | Descrição                                                               |
+| ------------ | ----------------- | ----------------------------------------------------------------------- |
+| className    | string            | Nome opcional para estilização adicional.               |
+| href         | string            | A URL ou caminho de destino para o link                                 |
+| onClick      | função            | Função de retorno de chamada para ser disparada quando o link é clicado |
+| filhos       | `React.ReactNode` | O conteúdo a ser exibido dentro do link                                 |
+
+</Tab>
+
+</Tabs>
+
+## Link Puro
+
+Um componente de link estilizado para exibir links.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriedades | Tipo              | Descrição                                                               |
+| ------------ | ----------------- | ----------------------------------------------------------------------- |
+| className    | string            | Nome opcional para estilização adicional.               |
+| href         | string            | A URL ou caminho de destino para o link                                 |
+| aoClicar     | função            | Função de retorno de chamada para ser disparada quando o link é clicado |
+| filhos       | `React.ReactNode` | O conteúdo a ser exibido dentro do link                                 |
+
+</Tab>
+</Tabs>
+
+## Link Arredondado
+
+Um link estilizado de forma arredondada com um componente Chip para links.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriedades | Tipo              | Descrição                                                               |
+| ------------ | ----------------- | ----------------------------------------------------------------------- |
+| href         | string            | A URL ou caminho de destino para o link                                 |
+| filhos       | `React.ReactNode` | O conteúdo a ser exibido dentro do link                                 |
+| aoClicar     | função            | Função de retorno de chamada para ser disparada quando o link é clicado |
+
+</Tab>
+</Tabs>
+
+## Link Social
+
+Links sociais estilizados, com suporte para vários tipos de links sociais, como URLs, LinkedIn e X (ou Twitter).
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Propriedades | Tipo              | Descrição                                                                                              |
+| ------------ | ----------------- | ------------------------------------------------------------------------------------------------------ |
+| href         | string            | A URL ou caminho de destino para o link                                                                |
+| filhos       | `React.ReactNode` | O conteúdo a ser exibido dentro do link                                                                |
+| tipo         | string            | O tipo de links sociais. Opções incluem: `url`, `LinkedIn` e `Twitter` |
+| onClick      | função            | Função de retorno de chamada para ser disparada quando o link é clicado                                |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/pt/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/pt/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..f28e91ef86
--- /dev/null
+++ b/packages/twenty-docs/l/pt/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Barra de Passos
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Exibe o progresso por meio de uma sequência de passos numerados destacando o passo ativo. Ele renderiza um contêiner com passos, cada um representado pelo componente `Step`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+  return (
+    <StepBar activeStep={2}>
+      <StepBar.Step>Step 1</StepBar.Step>
+      <StepBar.Step>Step 2</StepBar.Step>
+      <StepBar.Step>Step 3</StepBar.Step>
+    </StepBar>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Propriedades | Tipo   | Descrição                                                                                                    |
+| ------------ | ------ | ------------------------------------------------------------------------------------------------------------ |
+| passoAtivo   | número | O índice do passo atualmente ativo. Isso determina qual passo deve ser visualmente destacado |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ro/twenty-ui/input.mdx b/packages/twenty-docs/l/ro/twenty-ui/input.mdx
new file mode 100644
index 0000000000..d415a68a00
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Intrare
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ro/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ro/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..6cefde8e80
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Editor de Blocuri
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Folosește un editor de texte îmbogățit, bazat pe blocuri, de la [BlockNote](https://www.blocknotejs.org/) pentru a permite utilizatorilor să editeze și să vizualizeze blocuri de conținut.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Proprietăți | Tip               | Descriere                                       |
+| ----------- | ----------------- | ----------------------------------------------- |
+| editor      | `BlockNoteEditor` | Instanța sau configurarea editorului de blocuri |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ro/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/ro/twenty-ui/input/checkbox.mdx
new file mode 100644
index 0000000000..fccbcfa8ba
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/input/checkbox.mdx
@@ -0,0 +1,47 @@
+---
+title: Bifă
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
+
+Utilizat atunci când un utilizator trebuie să selecteze mai multe valori din mai multe opțiuni.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Checkbox } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return (
+    <Checkbox
+      checked={true}
+      indeterminate={false}
+      onChange={() => console.log("onChange function fired")}
+      onCheckedChange={() => console.log("onCheckedChange function fired")}
+      variant="primary"
+      size="small"
+      shape="squared"
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Proprietăți       | Tip     | Descriere                                                                                                                   |
+| ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
+| bifat             | boolean | Indică dacă bifa este selectată                                                                                             |
+| indeterminat      | boolean | Indică dacă bifa este într-o stare indeterminată (nici bifată, nici nebifată)                            |
+| onChange          | funcție | Funcția de callback pe care doriți să o declanșați când starea bifei se schimbă                                             |
+| laSchimbareBifată | funcție | Funcția de callback pe care doriți să o declanșați când starea `bifat` se schimbă                                           |
+| variantă          | șir     | Variantele vizuale ale stilului cutiei. Opțiunile includ: `primar`, `secundar` și `terțiar` |
+| dimensiune        | șir     | Dimensiunea bifei. Are două opțiuni: `mic` și `mare`                                        |
+| formă             | șir     | Forma bifei. Are două opțiuni: `pătrată` și `rotunjită`                                     |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ro/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/ro/twenty-ui/input/icon-picker.mdx
new file mode 100644
index 0000000000..89c3ea0d95
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/input/icon-picker.mdx
@@ -0,0 +1,56 @@
+---
+title: Selector de iconițe
+image: /images/user-guide/github/github-header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/github/github-header.png" alt="Header" />
+</Frame>
+
+Un selector de iconițe bazat pe listă derulantă care permite utilizatorilor să selecteze o iconiță dintr-o listă.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+   const [selectedIcon, setSelectedIcon] = useState("");
+   const handleIconChange = ({ iconKey, Icon }) => {
+     console.log("Selected Icon:", iconKey);
+     setSelectedIcon(iconKey);
+   };
+
+  return (
+    <RecoilRoot>
+      <IconPicker
+        disabled={false}
+        onChange={handleIconChange}
+        selectedIconKey={selectedIcon}
+        variant="primary"
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Proprietăți           | Tip     | Descriere                                                                                                                                   |
+| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| dezactivat            | boolean | Dezactivează selectorul de iconițe dacă este setat pe `true`                                                                                |
+| onChange              | funcție | Funcția callback declanșată când utilizatorul selectează o iconiță. Primește un obiect cu proprietățile `iconKey` și `Icon` |
+| cheieIconițăSelectată | șir     | Cheia iconiței selectate inițial                                                                                                            |
+| laClickExterior       | funcție | Funcția callback declanșată când utilizatorul face clic în afara listei derulante                                                           |
+| laÎnchidere           | funcție | Funcția callback declanșată când lista derulantă este închisă                                                                               |
+| laDeschidere          | funcție | Funcția callback declanșată când lista derulantă este deschisă                                                                              |
+| variantă              | șir     | Varianta stilului vizual al iconiței clicabile. Opțiunile includ: `primar`, `secundar` și `terțiar`         |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ro/twenty-ui/navigation.mdx b/packages/twenty-docs/l/ro/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..ac547ff8b9
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Navigare
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ro/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/ro/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..ff1454fbaf
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: Linkuri
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## Link de Contact
+
+Un component de link stilizat pentru afișarea informațiilor de contact.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Proprietăți | Tip               | Descriere                                               |
+| ----------- | ----------------- | ------------------------------------------------------- |
+| numeClasa   | șir               | Nume opțional pentru stilizare suplimentară             |
+| href        | șir               | URL-ul sau calea țintă pentru link                      |
+| laClick     | funcție           | Funcția de callback care se declanșează la clic pe link |
+| copii       | `React.ReactNode` | Conținutul de afișat în interiorul linkului             |
+
+</Tab>
+
+</Tabs>
+
+## Link Brut
+
+Un component de link stilizat pentru afișarea linkurilor.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Proprietăți | Tip               | Descriere                                               |
+| ----------- | ----------------- | ------------------------------------------------------- |
+| numeClasa   | șir               | Nume opțional pentru stilizare suplimentară             |
+| href        | șir               | URL-ul sau calea țintă pentru link                      |
+| laClick     | funcție           | Funcția de callback care se declanșează la clic pe link |
+| copii       | `React.ReactNode` | Conținutul de afișat în interiorul linkului             |
+
+</Tab>
+</Tabs>
+
+## Link Rotunjit
+
+Un link stilizat cu margini rotunjite cu un component Chip pentru linkuri.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Proprietăți | Tip               | Descriere                                               |
+| ----------- | ----------------- | ------------------------------------------------------- |
+| href        | șir               | URL-ul sau calea țintă pentru link                      |
+| copii       | `React.ReactNode` | Conținutul de afișat în interiorul linkului             |
+| laClick     | funcție           | Funcția de callback care se declanșează la clic pe link |
+
+</Tab>
+</Tabs>
+
+## Link Social
+
+Linkuri sociale stilizate, cu suport pentru diverse tipuri de linkuri sociale, cum ar fi URL-uri, LinkedIn și X (sau Twitter).
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Proprietăți | Tip               | Descriere                                                                                                  |
+| ----------- | ----------------- | ---------------------------------------------------------------------------------------------------------- |
+| href        | șir               | URL-ul sau calea țintă pentru link                                                                         |
+| copii       | `React.ReactNode` | Conținutul de afișat în interiorul linkului                                                                |
+| tip         | șir               | Tipul linkurilor sociale. Opțiunile includ: `url`, `LinkedIn` și `Twitter` |
+| laClick     | funcție           | Funcția de callback care se declanșează la clic pe link                                                    |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ro/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/ro/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..362116e9ff
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Bară de navigare
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Redă o bară de navigare care conține mai multe componente `NavigationBarItem`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Proprietăți    | Tip   | Descriere                                                                                                                                                                                                                                     |
+| -------------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | șir   | Numele elementului de navigare care este activ în prezent                                                                                                                                                                                     |
+| elemente       | array | O matrice de obiecte care reprezintă fiecare element de navigare. Fiecare obiect conține `numele` elementului, componenta `Icon` pentru afișare și o funcție `onClick` care să fie invocată atunci când elementul este apăsat |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ro/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/ro/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..9e606867f7
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Bară de pași
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Afișează progresul printr-o secvență de pași numerotați prin evidențierea pasului activ. Redă un container cu pași, fiecare fiind reprezentat de componenta `Pas`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+  return (
+    <StepBar activeStep={2}>
+      <StepBar.Step>Step 1</StepBar.Step>
+      <StepBar.Step>Step 2</StepBar.Step>
+      <StepBar.Step>Step 3</StepBar.Step>
+    </StepBar>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Proprietăți | Tip   | Descriere                                                                                                     |
+| ----------- | ----- | ------------------------------------------------------------------------------------------------------------- |
+| pasactiv    | număr | Indexul pasului activ în prezent. Aceasta determină ce pas ar trebui să fie evidențiat vizual |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ro/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/ro/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..d56f5afc7c
--- /dev/null
+++ b/packages/twenty-docs/l/ro/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Feedback
+image: /images/user-guide/emails/emails_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
+</Frame>
+
+Indică progresul sau numărătoarea inversă și se mișcă de la dreapta la stânga.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+  return (
+    <ProgressBar
+      duration={6000}
+      delay={0}
+      easing="easeInOut"
+      barHeight={10}
+      barColor="#4bb543"
+      autoStart={true}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Proprietăți     | Tip     | Descriere                                                                           | Implicit   |
+| --------------- | ------- | ----------------------------------------------------------------------------------- | ---------- |
+| durată          | număr   | Durata totală a animației barei de progres în milisecunde                           | 3          |
+| întârziere      | număr   | Întârzierea în pornirea animației barei de progres în milisecunde                   | 0          |
+| easing          | șir     | Funcția de accelerare (easing) pentru animația barei de progres  | easeInOut  |
+| înălțimeBară    | număr   | Înălțimea barei în pixeli                                                           | 24         |
+| culoareBară     | șir     | Culoarea barei                                                                      | gray80     |
+| pornireAutomată | boolean | Dacă `true`, animația barei de progres pornește automat când componenta se montează | `adevărat` |
+
+</Tab>
+</Tabs>
+
+## Bara de Progres Circulară
+
+Indică progresul unei sarcini, utilizată adesea pe ecranele de încărcare sau în zonele unde doriți să comunicați procesele continue utilizatorului.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Proprietăți | Tip   | Descriere                              | Implicit     |
+| ----------- | ----- | -------------------------------------- | ------------ |
+| dimensiune  | număr | Dimensiunea barei de progres circulare | 50           |
+| lățimeBară  | număr | Lățimea liniei barei de progres        | 5            |
+| culoareBară | șir   | Culoarea barei de progres              | currentColor |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ro/user-guide/settings/capabilities/profile-settings.mdx b/packages/twenty-docs/l/ro/user-guide/settings/capabilities/profile-settings.mdx
new file mode 100644
index 0000000000..10a29ae6dd
--- /dev/null
+++ b/packages/twenty-docs/l/ro/user-guide/settings/capabilities/profile-settings.mdx
@@ -0,0 +1,43 @@
+---
+title: Setări profil
+description: Gestionează setările personale ale profilului și setările de securitate.
+---
+
+## Informații personale
+
+### Nume și adresă de email
+
+* **Nume afișat**: Actualizează modul în care numele tău apare celorlalți membri ai spațiului de lucru
+* **Adresa de email**: Schimbă adresa de email de conectare (necesită verificare)
+* **Poză de profil**: Încarcă un avatar personalizat sau folosește inițialele tale
+
+## Setări de securitate
+
+### Autentificare cu doi factori (2FA)
+
+Activează 2FA pentru a adăuga un strat suplimentar de securitate contului tău:
+
+1. Mergi la **Setări → Setări profil**
+2. Apasă pe **Activează 2FA**
+3. Scanează codul QR cu aplicația ta de autentificare
+4. Introdu codul de verificare pentru a confirma
+
+### Gestionarea parolelor
+
+* **Schimbă parola**: Actualizează parola curentă
+* **Cerințe pentru parolă**: Trebuie să aibă cel puțin 8 caractere
+
+## Gestionarea profilului
+
+### Șterge contul
+
+<Warning>
+  Ștergerea contului va îndepărta permanent accesul la toate spațiile de lucru. Această acțiune nu poate fi anulată, vei pierde accesul la toate spațiile de lucru unde ești membru și ar trebui să iei în considerare părăsirea spațiilor individuale dacă dorești doar să ieși din echipe specifice.
+</Warning>
+
+Pentru a șterge contul tău:
+
+1. Mergi la **Setări → Setări profil**
+2. Derulează până la **Zona de pericol**
+3. Apasă pe **Șterge contul**
+4. Confirmă introducând adresa ta de email
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ru/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/ru/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..3e9c4f7fe6
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: Подсказка приложения
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
+
+Краткое сообщение, которое отображает дополнительную информацию, когда пользователь взаимодействует с элементом.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Свойства         | Тип                                          | Описание                                                                                                                                                                                                                           |
+| ---------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className        | строка                                       | Необязательный CSS-класс для дополнительного стилирования                                                                                                                                                                          |
+| anchorSelect     | CSS-селектор                                 | Селектор для анкера подсказки (элемент, который активирует подсказку)                                                                                                                                           |
+| content          | строка                                       | Содержимое, которое вы хотите отобразить в подсказке                                                                                                                                                                               |
+| delayHide        | число                                        | Задержка в секундах перед скрытием подсказки после того, как курсор покинет анкер                                                                                                                                                  |
+| offset           | число                                        | Смещение в пикселях для позиционирования подсказки                                                                                                                                                                                 |
+| noArrow          | boolean                                      | Если `true`, стрелка на подсказке скрыта                                                                                                                                                                                           |
+| isOpen           | boolean                                      | Если `true`, подсказка открыта по умолчанию                                                                                                                                                                                        |
+| place            | Строка `PlacesType` из `react-tooltip`       | Определяет расположение подсказки. Значения включают: `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end` |
+| positionStrategy | Строка `PositionStrategy` из `react-tooltip` | Стратегия позиционирования для подсказки. Имеет два значения: `absolute` и `fixed`                                                                                                                 |
+
+</Tab>
+
+</Tabs>
+
+## Переполненный текст с подсказкой
+
+Обрабатывает переполненный текст и отображает подсказку, когда текст переполняется.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  const crmTaskDescription =
+    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Свойства | Тип    | Описание                                                                 |
+| -------- | ------ | ------------------------------------------------------------------------ |
+| текст    | строка | Содержимое, которое вы хотите отобразить в области переполненного текста |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input.mdx b/packages/twenty-docs/l/ru/twenty-ui/input.mdx
new file mode 100644
index 0000000000..466af67cb7
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Ввод
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..cfd03c9d24
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Блочный редактор
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Использует блочный текстовый редактор от [BlockNote](https://www.blocknotejs.org/), чтобы пользователи могли редактировать и просматривать блоки контента.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Свойства | Тип               | Описание                                      |
+| -------- | ----------------- | --------------------------------------------- |
+| редактор | `BlockNoteEditor` | Экземпляр или конфигурация блочного редактора |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/color-scheme.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/color-scheme.mdx
new file mode 100644
index 0000000000..efaea98ce0
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/color-scheme.mdx
@@ -0,0 +1,73 @@
+---
+title: Цветовая Схема
+image: /images/user-guide/fields/field.png
+---
+
+<Frame>
+  <img src="/images/user-guide/fields/field.png" alt="Header" />
+</Frame>
+
+## Карточка цветовой схемы
+
+Представляет различные цветовые схемы и специально подходит для светлых и темных тем.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ColorSchemeCard } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return (
+      <ColorSchemeCard
+      variant="Dark"
+      selected={true}
+      />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Свойства                | Тип                                     | Описание                                                                                     | По умолчанию |
+| ----------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------- | ------------ |
+| вариант                 | строка                                  | Вариант цветовой схемы. Варианты включают `Тёмный`, `Светлый`, и `Системный` | светлый      |
+| выбран                  | boolean                                 | Если `true`, отображает галочку, чтобы указать выбранную цветовую схему                      |              |
+| дополнительные свойства | `React.ComponentPropsWithoutRef<'div'>` | Стандартные свойства HTML-элемента `div`                                                     |              |
+
+</Tab>
+
+</Tabs>
+
+## Выбор цветовой схемы
+
+Позволяет пользователям выбирать между различными цветовыми схемами.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ColorSchemePicker } from "twenty-ui/display";
+
+export const MyComponent = () => {
+  return <ColorSchemePicker
+  value="Dark"
+  onChange
+  />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Свойства | Тип              | Описание                                                                                        |
+| -------- | ---------------- | ----------------------------------------------------------------------------------------------- |
+| значение | `Цветовая Схема` | Текущая выбранная цветовая схема                                                                |
+| onChange | функция          | Функция обратного вызова, которую вы хотите вызвать, когда пользователь выбирает цветовую схему |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/icon-picker.mdx
new file mode 100644
index 0000000000..85f45654bc
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/icon-picker.mdx
@@ -0,0 +1,56 @@
+---
+title: Выбор иконки
+image: /images/user-guide/github/github-header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/github/github-header.png" alt="Header" />
+</Frame>
+
+Выпадающий список выбора иконки, который позволяет пользователям выбрать иконку из списка.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+   const [selectedIcon, setSelectedIcon] = useState("");
+   const handleIconChange = ({ iconKey, Icon }) => {
+     console.log("Selected Icon:", iconKey);
+     setSelectedIcon(iconKey);
+   };
+
+  return (
+    <RecoilRoot>
+      <IconPicker
+        disabled={false}
+        onChange={handleIconChange}
+        selectedIconKey={selectedIcon}
+        variant="primary"
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Свойства        | Тип     | Описание                                                                                                                                      |
+| --------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| отключено       | boolean | Отключает выбор иконки, если установлено значение `true`                                                                                      |
+| onChange        | функция | Функция обратного вызова, вызываемая, когда пользователь выбирает иконку. Она получает объект с свойствами `iconKey` и `Icon` |
+| selectedIconKey | строка  | Ключ изначально выбранной иконки                                                                                                              |
+| onClickOutside  | функция | Функция обратного вызова, вызываемая при клике пользователя за пределами выпадающего списка                                                   |
+| onClose         | функция | Функция обратного вызова, вызываемая при закрытии выпадающего списка                                                                          |
+| onOpen          | функция | Функция обратного вызова, вызываемая при открытии выпадающего списка                                                                          |
+| вариант         | строка  | Визуальный стиль варианта кликабельной иконки. Варианты включают: `primary`, `secondary`, и `tertiary`        |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/image-input.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/image-input.mdx
new file mode 100644
index 0000000000..8c2e7591d1
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/image-input.mdx
@@ -0,0 +1,37 @@
+---
+title: Ввод изображения
+image: /images/user-guide/objects/objects.png
+---
+
+<Frame>
+  <img src="/images/user-guide/objects/objects.png" alt="Header" />
+</Frame>
+
+Позволяет пользователям загружать и удалять изображение.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { ImageInput } from "@/ui/input/components/ImageInput";
+
+export const MyComponent = () => {
+  return <ImageInput/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Свойства     | Тип     | Описание                                                                                                                            |
+| ------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| изображение  | строка  | URL источника изображения                                                                                                           |
+| onUpload     | функция | Функция вызывается, когда пользователь загружает новое изображение. Она получает объект `File` в качестве параметра |
+| onRemove     | функция | Функция вызывается, когда пользователь нажимает на кнопку удаления                                                                  |
+| onAbort      | функция | Функция вызывается, когда пользователь нажимает на кнопку отмены во время загрузки изображения                                      |
+| isUploading  | boolean | Указывает, загружается ли в данный момент изображение                                                                               |
+| errorMessage | строка  | Необязательное сообщение об ошибке для отображения под вводом изображения                                                           |
+| отключено    | boolean | Если `true`, весь элемент ввода отключен и кнопки не кликабельны                                                                    |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/select.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..6aadac4d47
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: Выбрать
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+Позволяет пользователям выбирать значение из списка заранее определенных опций.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+  return (
+    <RecoilRoot>
+      <Select
+        className
+        disabled={false}
+        label="Select an option"
+        options={[
+          { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
+          { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
+        ]}
+        value="option1"
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Свойства  | Тип     | Описание                                                                                                                                                                                                                                                      |
+| --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | строка  | Необязательный CSS-класс для дополнительного стилирования                                                                                                                                                                                                     |
+| отключено | boolean | При установке в `true`, отключается взаимодействие пользователя с компонентом                                                                                                                                                                                 |
+| метка     | строка  | Метка для описания назначения компонента `Выбрать`                                                                                                                                                                                                            |
+| onChange  | функция | Функция вызывается при изменении выбранных значений                                                                                                                                                                                                           |
+| настройки | массив  | Представляет доступные варианты для компонента `Выбранное`. Это массив объектов, где каждый объект имеет `value` (уникальный идентификатор), `label` (уникальный идентификатор) и необязательный `Icon` |
+| значение  | строка  | Представляет текущее выбранное значение. Оно должно соответствовать одному из значений `value` в массиве `options`                                                                                                                            |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/input/toggle.mdx b/packages/twenty-docs/l/ru/twenty-ui/input/toggle.mdx
new file mode 100644
index 0000000000..1093111862
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/input/toggle.mdx
@@ -0,0 +1,39 @@
+---
+title: Переключатель
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Toggle } from "twenty-ui/input";
+
+export const MyComponent = () => {
+  return (
+    <Toggle
+    value = {true}
+    onChange = {()=>console.log('On Change event')}
+    color="green"
+    toggleSize = "medium"
+    />
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Свойства            | Тип     | Описание                                                                                                                 | По умолчанию     |
+| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------- |
+| значение            | boolean | Текущее состояние переключателя                                                                                          | `ложь`           |
+| onChange            | функция | Функция обратного вызова, вызываемая при изменении состояния переключателя                                               |                  |
+| цвет                | строка  | Цвет переключателя, когда он\                                                                                           | имеет синий цвет |
+| размерПереключателя | строка  | Размер переключателя, влияющий на высоту и ширину. Есть два варианта: `small` и `medium` | средний          |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/navigation.mdx b/packages/twenty-docs/l/ru/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..63552b6ba1
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Навигация
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/ru/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/ru/twenty-ui/navigation/breadcrumb.mdx
new file mode 100644
index 0000000000..6a950cbb4e
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/navigation/breadcrumb.mdx
@@ -0,0 +1,44 @@
+---
+title: Хлебные крошки
+image: /images/user-guide/fields/field.png
+---
+
+<Frame>
+  <img src="/images/user-guide/fields/field.png" alt="Header" />
+</Frame>
+
+Отображает панель навигации с хлебными крошками.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter } from "react-router-dom";
+import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
+
+export const MyComponent = () => {
+  const breadcrumbLinks = [
+    { children: "Home", href: "/" },
+    { children: "Category", href: "/category" },
+    { children: "Subcategory", href: "/category/subcategory" },
+    { children: "Current Page" },
+  ];
+
+  return (
+    <BrowserRouter>
+      <Breadcrumb className links={breadcrumbLinks} />
+    </BrowserRouter>
+    )
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Свойства  | Тип    | Описание                                                                                                                                                                                                                                                                                |
+| --------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | строка | Дополнительное имя класса для дополнительной стилизации                                                                                                                                                                                                                                 |
+| ссылки    | массив | Массив объектов, каждый из которых представляет собой ссылку-хлебную крошку. Каждый объект имеет свойство `children` (текстовое содержимое ссылки) и необязательное свойство `href` (URL-адрес для перехода по ссылке при щелчке) |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/ru/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..bc0b53718e
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Панель навигации
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Отображает панель навигации, содержащую несколько компонентов `NavigationBarItem`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Свойства       | Тип    | Описание                                                                                                                                                                                                                           |
+| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activeItemName | строка | Имя текущего активного элемента навигации                                                                                                                                                                                          |
+| items          | массив | Массив объектов, представляющих каждый элемент навигации. Каждый объект содержит `name` элемента, компонент `Icon` для отображения и функцию `onClick`, которая вызывается при нажатии на элемент. |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/ru/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..67bf608f53
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: Шаговая панель
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Отображает прогресс через последовательность пронумерованных шагов, выделяя активный шаг. Он отображает контейнер с шагами, каждый из которых представлен компонентом `Step`.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+  return (
+    <StepBar activeStep={2}>
+      <StepBar.Step>Step 1</StepBar.Step>
+      <StepBar.Step>Step 2</StepBar.Step>
+      <StepBar.Step>Step 3</StepBar.Step>
+    </StepBar>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Свойства    | Тип   | Описание                                                                                                              |
+| ----------- | ----- | --------------------------------------------------------------------------------------------------------------------- |
+| активныйШаг | число | Индекс текущего активного шага. Это определяет, какой шаг следует визуально выделить. |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/ru/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/ru/twenty-ui/progress-bar.mdx
new file mode 100644
index 0000000000..7761b99e6d
--- /dev/null
+++ b/packages/twenty-docs/l/ru/twenty-ui/progress-bar.mdx
@@ -0,0 +1,77 @@
+---
+title: Обратная связь
+image: /images/user-guide/emails/emails_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
+</Frame>
+
+Указывает на прогресс или обратный отсчет и перемещается справа налево.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { ProgressBar } from "twenty-ui/feedback";
+
+export const MyComponent = () => {
+  return (
+    <ProgressBar
+      duration={6000}
+      delay={0}
+      easing="easeInOut"
+      barHeight={10}
+      barColor="#4bb543"
+      autoStart={true}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Свойства          | Тип     | Описание                                                                                    | По умолчанию |
+| ----------------- | ------- | ------------------------------------------------------------------------------------------- | ------------ |
+| Продолжительность | число   | Общая продолжительность анимации индикатора прогресса в миллисекундах                       | 3            |
+| Задержка          | число   | Задержка начала анимации индикатора прогресса в миллисекундах                               | 0            |
+| Сглаживание       | строка  | Сглаживающая функция для анимации индикатора прогресса                                      | easeInOut    |
+| Высота индикатора | число   | Высота полосы в пикселях                                                                    | 24           |
+| Цвет полосы       | строка  | Цвет полосы                                                                                 | gray80       |
+| Автозапуск        | boolean | Если `true`, анимация индикатора прогресса начинается автоматически при загрузке компонента | `истина`     |
+
+</Tab>
+</Tabs>
+
+## Круговой индикатор прогресса
+
+Указывает на прогресс задачи, часто используется на экранах загрузки или в областях, где необходимо сообщить пользователю о текущих процессах.
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| Свойства      | Тип    | Описание                              | По умолчанию |
+| ------------- | ------ | ------------------------------------- | ------------ |
+| размер        | число  | Размер кругового индикатора прогресса | 50           |
+| Ширина полосы | число  | Ширина линии индикатора прогресса     | 5            |
+| Цвет полосы   | строка | Цвет индикатора прогресса             | currentColor |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/tr/twenty-ui/input.mdx b/packages/twenty-docs/l/tr/twenty-ui/input.mdx
new file mode 100644
index 0000000000..75a7225ad4
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: Girdi
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/tr/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/tr/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..d385618473
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: Blok Düzenleyici
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+Kullanıcıların içerik bloklarını düzenleyip görüntüleyebilmeleri için [BlockNote](https://www.blocknotejs.org/) tarafından sağlanan blok tabanlı zengin metin düzenleyici kullanır.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Özellikler  | Tür               | Açıklama                                    |
+| ----------- | ----------------- | ------------------------------------------- |
+| düzenleyici | `BlockNoteEditor` | Blok düzenleyici örneği veya yapılandırması |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/tr/twenty-ui/input/select.mdx b/packages/twenty-docs/l/tr/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..15d82abcf4
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: Seç
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+Kullanıcılara önceden tanımlanmış seçeneklerden bir değer seçme olanağı tanır.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+  return (
+    <RecoilRoot>
+      <Select
+        className
+        disabled={false}
+        label="Select an option"
+        options={[
+          { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
+          { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
+        ]}
+        value="option1"
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| Özellikler | Tür      | Açıklama                                                                                                                                                                                                                                               |
+| ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| sınıfAdı   | metin    | Ek stil tanımlamaları için isteğe bağlı CSS sınıfı                                                                                                                                                                                                     |
+| devre dışı | boolean  | `true` olarak ayarlandığında, kullanıcının bileşenle etkileşimini devre dışı bırakır                                                                                                                                                                   |
+| etiket     | metin    | `Seç` bileşeninin amacını açıklamak için etiket                                                                                                                                                                                                        |
+| onChange   | function | Seçilen değerler değiştiğinde çağrılan fonksiyon                                                                                                                                                                                                       |
+| seçenekler | dizi     | `Seç` bileşeni için mevcut seçenekleri temsil eder. Her bir nesnenin bir `değer` (benzersiz tanımlayıcı), `etiket` (benzersiz tanımlayıcı) ve isteğe bağlı bir `Simge` içeren nesneler dizisidir |
+| değer      | metin    | Şu anda seçili olan değeri temsil eder. `options` dizisindeki `değer` özelliklerinden birine eşit olmalıdır.                                                                                                           |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/tr/twenty-ui/navigation.mdx b/packages/twenty-docs/l/tr/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..df9401f3e8
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: Gezinme
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/tr/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/tr/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..7a50004c42
--- /dev/null
+++ b/packages/twenty-docs/l/tr/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: Gezinti Çubuğu
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+Birden fazla `NavigationBarItem` bileşeni içeren bir gezinti çubuğu oluşturur.
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| Özellikler  | Tür   | Açıklama                                                                                                                                                                                                        |
+| ----------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| aktifÖğeAdı | metin | Şu anda aktif olan gezinti öğesinin adı                                                                                                                                                                         |
+| öğeler      | dizi  | Her gezinti öğesini temsil eden nesnelerin dizisi. Her nesne, öğenin adını, gösterilecek `Icon` bileşenini ve öğeye tıklandığında çağrılacak bir `onClick` fonksiyonunu içerir. |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/zh/twenty-ui/display/app-tooltip.mdx
new file mode 100644
index 0000000000..6f9085e39a
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/display/app-tooltip.mdx
@@ -0,0 +1,88 @@
+---
+title: 应用程序提示
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
+
+当用户与一个元素互动时显示额外信息的简要信息。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 属性               | 类型                                       | 描述                                                                                                                                                 |
+| ---------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 类名               | 字符串                                      | 用于额外样式的可选 CSS 类                                                                                                                                    |
+| anchorSelect     | CSS 选择器                                  | 工具提示的锚选择器（触发工具提示的元素）                                                                                                                               |
+| 内容               | 字符串                                      | 您希望在工具提示中显示的内容                                                                                                                                     |
+| delayHide        | 数字                                       | 在光标离开锚后隐藏工具提示的延迟时间（秒）                                                                                                                              |
+| offset           | 数字                                       | 工具提示定位的像素偏移量                                                                                                                                       |
+| noArrow          | 布尔值                                      | 如果为 `true`，则隐藏工具提示上的箭头                                                                                                                             |
+| isOpen           | 布尔值                                      | 如果为 `true`，工具提示默认打开                                                                                                                                |
+| place            | `PlacesType` 字符串来自 `react-tooltip`       | 指定工具提示的位置。 值包括 `bottom`、`left`、`right`、`top`、`top-start`、`top-end`、`right-start`、`right-end`、`bottom-start`、`bottom-end`、`left-start` 和 `left-end` |
+| positionStrategy | `PositionStrategy` 字符串来自 `react-tooltip` | 工具提示的位置策略。 有两个值： `absolute` 和 `fixed`                                                                                                              |
+
+</Tab>
+
+</Tabs>
+
+## 文本溢出与工具提示
+
+处理文本溢出，并在文本溢出时显示工具提示。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+  const crmTaskDescription =
+    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 属性 | 类型  | 描述             |
+| -- | --- | -------------- |
+| 文本 | 字符串 | 想要在文本溢出区域显示的内容 |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/display/soon-pill.mdx b/packages/twenty-docs/l/zh/twenty-ui/display/soon-pill.mdx
new file mode 100644
index 0000000000..4f60dd1870
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/display/soon-pill.mdx
@@ -0,0 +1,18 @@
+---
+title: 即将推出的小徽章或 "药丸"。
+image: /images/user-guide/kanban-views/kanban.png
+---
+
+<Frame>
+  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
+</Frame>
+
+指示某物即将出现的小徽章或 "药丸" 。
+
+```jsx
+import { SoonPill } from "@/ui/display/pill/components/SoonPill";
+
+export const MyComponent = () => {
+  return <SoonPill />;
+};
+```
diff --git a/packages/twenty-docs/l/zh/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/zh/twenty-ui/display/tag.mdx
new file mode 100644
index 0000000000..024720d369
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/display/tag.mdx
@@ -0,0 +1,44 @@
+---
+title: 标签
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+用于可视化分类或标记内容的组件。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 属性      | 类型  | 描述                                                              |
+| ------- | --- | --------------------------------------------------------------- |
+| 类名      | 字符串 | 用于附加样式的可选名称                                                     |
+| 颜色      | 字符串 | 标签的颜色。 选项包括：`绿色`，`绿松石`，`天蓝`，`蓝色`，`紫色`，`粉红色`，`红色`，`橙色`，`黄色`，`灰色` |
+| 文本      | 字符串 | 标签的内容                                                           |
+| onClick | 函数  | 用户点击标签时的可选调用函数                                                  |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/input.mdx b/packages/twenty-docs/l/zh/twenty-ui/input.mdx
new file mode 100644
index 0000000000..59b7855d48
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/input.mdx
@@ -0,0 +1,8 @@
+---
+title: 输入
+image: /images/user-guide/tips/light-bulb.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/zh/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/zh/twenty-ui/input/block-editor.mdx
new file mode 100644
index 0000000000..ed9b82c92e
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/input/block-editor.mdx
@@ -0,0 +1,34 @@
+---
+title: 区块编辑器
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+使用来自 [BlockNote](https://www.blocknotejs.org/) 的基于区块的富文本编辑器，允许用户编辑和查看内容块。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
+export const MyComponent = () => {
+  const BlockNoteEditor = useBlockNote();
+
+  return <BlockEditor editor={BlockNoteEditor} />;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性  | 类型                | 描述         |
+| --- | ----------------- | ---------- |
+| 编辑器 | `BlockNoteEditor` | 区块编辑器实例或配置 |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/zh/twenty-ui/input/icon-picker.mdx
new file mode 100644
index 0000000000..b33a54f43b
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/input/icon-picker.mdx
@@ -0,0 +1,56 @@
+---
+title: 图标选择器
+image: /images/user-guide/github/github-header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/github/github-header.png" alt="Header" />
+</Frame>
+
+一个基于下拉菜单的图标选择器，允许用户从列表中选择图标。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+   const [selectedIcon, setSelectedIcon] = useState("");
+   const handleIconChange = ({ iconKey, Icon }) => {
+     console.log("Selected Icon:", iconKey);
+     setSelectedIcon(iconKey);
+   };
+
+  return (
+    <RecoilRoot>
+      <IconPicker
+        disabled={false}
+        onChange={handleIconChange}
+        selectedIconKey={selectedIcon}
+        variant="primary"
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性              | 类型       | 描述                                                     |
+| --------------- | -------- | ------------------------------------------------------ |
+| disabled        | 布尔值      | 如果设置为 `true`，则禁用图标选择器                                  |
+| onChange        | 函数       | 当用户选择图标时触发的回调函数。 它接收一个具有 `iconKey` 和 `Icon` 属性的对象      |
+| selectedIconKey | 字符串      | 初始选中的图标键                                               |
+| onClickOutside  | 函数       | 当用户点击下拉菜单外部时触发的回调函数                                    |
+| onClose         | 函数       | 当下拉菜单关闭时触发的回调函数                                        |
+| onOpen          | function | 当下拉菜单打开时触发的回调函数                                        |
+| 变体              | 字符串      | 可点击图标的视觉风格变体。 可选项包括：`primary`、`secondary` 和 `tertiary` |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/input/radio.mdx b/packages/twenty-docs/l/zh/twenty-ui/input/radio.mdx
new file mode 100644
index 0000000000..2f7b70688e
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/input/radio.mdx
@@ -0,0 +1,104 @@
+---
+title: 单选按钮
+image: /images/user-guide/create-workspace/workspace-cover.png
+---
+
+<Frame>
+  <img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
+</Frame>
+
+当用户只能从一系列选项中选择一个时使用。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { Radio } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+  const handleRadioChange = (event) => {
+    console.log("Radio button changed:", event.target.checked);
+  };
+
+  const handleCheckedChange = (checked) => {
+    console.log("Checked state changed:", checked);
+  };
+
+
+  return (
+    <Radio
+      checked={true}
+      value="Option 1"
+      onChange={handleRadioChange}
+      onCheckedChange={handleCheckedChange}
+      size="large"
+      disabled={false}
+      labelPosition="right"
+    />
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性              | 类型             | 描述                              |
+| --------------- | -------------- | ------------------------------- |
+| 样式              | `React.CSS` 属性 | 组件的附加行内样式                       |
+| 类名              | 字符串            | 用于额外样式的可选 CSS 类                 |
+| 选中              | 布尔值            | 指示单选按钮是否被选中                     |
+| 值               | 字符串            | 与单选按钮相关联的标签或文本                  |
+| onChange        | function       | 选择的单选按钮改变时调用的函数                 |
+| onCheckedChange | function       | 当单选按钮的 `checked` 状态改变时调用的函数     |
+| 大小              | 字符串            | 单选按钮的尺寸。 选项包括：`大` 和 `小`         |
+| disabled        | 布尔值            | 如果为 `true`，则单选按钮将被禁用且不可点击       |
+| 标签位置            | 字符串            | 标签文字相对于单选按钮的位置。 有两个选项：`左` 和 `右` |
+
+</Tab>
+</Tabs>
+
+## 单选按钮组
+
+将相关的单选按钮组合在一起。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import React, { useState } from "react";
+import { Radio, RadioGroup } from "twenty-ui/display";
+
+export const MyComponent = () => {
+
+  const [selectedValue, setSelectedValue] = useState("Option 1");
+
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+  };
+  
+  return (
+    <RadioGroup value={selectedValue} onChange={handleChange}>
+      <Radio value="Option 1" />
+      <Radio value="Option 2" />
+      <Radio value="Option 3" />
+    </RadioGroup>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性            | 类型                | 描述                               |
+| ------------- | ----------------- | -------------------------------- |
+| 值             | 字符串               | 当前选中单选按钮的值                       |
+| onChange      | function          | 当单选按钮改变时触发的回调函数                  |
+| onValueChange | function          | 当组中选定的值发生变化时触发的回调函数。             |
+| 子元素           | `React.ReactNode` | 允许您将 React 组件（如单选按钮）作为子项传递给单选按钮组 |
+
+</Tab>
+
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/input/select.mdx b/packages/twenty-docs/l/zh/twenty-ui/input/select.mdx
new file mode 100644
index 0000000000..13aca04d2a
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/input/select.mdx
@@ -0,0 +1,54 @@
+---
+title: 选择
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+允许用户从预定义选项列表中选择一个值。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
+
+import { Select } from '@/ui/input/components/Select';
+
+export const MyComponent = () => {
+
+  return (
+    <RecoilRoot>
+      <Select
+        className
+        disabled={false}
+        label="Select an option"
+        options={[
+          { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
+          { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
+        ]}
+        value="option1"
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性       | 类型       | 描述                                                               |
+| -------- | -------- | ---------------------------------------------------------------- |
+| 类名       | 字符串      | 用于额外样式的可选 CSS 类                                                  |
+| disabled | 布尔值      | 当设置为`true`时，禁用用户与组件的交互                                           |
+| 标签       | 字符串      | 描述`选择`组件用途的标签                                                    |
+| onChange | function | 当所选值更改时调用的函数                                                     |
+| 选项       | 数组       | 表示`选择`组件的可用选项。 它是一个对象数组，每个对象具有一个`值`（唯一标识符）、`标签`（唯一标识符）和一个可选的`图标` |
+| 值        | 字符串      | 表示当前选择的值。 它应匹配`选项`数组中的一个`值`属性                                    |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/input/text.mdx b/packages/twenty-docs/l/zh/twenty-ui/input/text.mdx
new file mode 100644
index 0000000000..9baf241037
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/input/text.mdx
@@ -0,0 +1,153 @@
+---
+title: 文本
+image: /images/user-guide/notes/notes_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
+</Frame>
+
+## 文本输入
+
+允许用户输入和编辑文本。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+  const handleChange = (text) => {
+    console.log("Input changed:", text);
+  };
+
+  const handleKeyDown = (event) => {
+    console.log("Key pressed:", event.key);
+  };
+
+  return (
+    <RecoilRoot>
+      <TextInput
+        className
+        label="Username"
+        onChange={handleChange}
+        fullWidth={false}
+        disableHotkeys={false}
+        error="Invalid username"
+        onKeyDown={handleKeyDown}
+        RightIcon={null}
+      />
+    </RecoilRoot>
+  );
+};
+
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 属性             | 类型       | 描述                                             |
+| -------------- | -------- | ---------------------------------------------- |
+| 类名             | 字符串      | 用于附加样式的可选名称                                    |
+| 标签             | 字符串      | 表示输入的标签                                        |
+| onChange       | function | 当输入值更改时调用的函数                                   |
+| fullWidth      | 布尔值      | 指示输入是否应占用100%的宽度                               |
+| disableHotkeys | 布尔值      | 指示输入是否启用热键                                     |
+| 错误             | 字符串      | 表示要显示的错误信息。 提供时，还会在输入的右侧添加一个错误图标               |
+| onKeyDown      | function | 当输入字段获得焦点并按下按键时调用。 接收`React.KeyboardEvent`作为参数 |
+| RightIcon      | 图标组件     | 在输入右侧显示的可选图标组件                                 |
+
+该组件还接受其他HTML输入元素属性。
+
+</Tab>
+
+</Tabs>
+
+## 自动调整大小的文本输入
+
+根据内容自动调整高度的文本输入组件。
+
+<Tabs>
+
+<Tab title="Usage">
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+  return (
+    <RecoilRoot>
+      <AutosizeTextInput
+        onValidate={() => console.log("onValidate function fired")}
+        minRows={1}
+        placeholder="Write a comment"
+        onFocus={() => console.log("onFocus function fired")}
+        variant="icon"
+        buttonTitle
+        value="Task: "
+      />
+    </RecoilRoot>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 属性          | 类型  | 描述                                        |
+| ----------- | --- | ----------------------------------------- |
+| onValidate  | 函数  | 用户验证输入时要触发的回调函数                           |
+| minRows     | 数字  | 文本区域的最小行数                                 |
+| 占位符         | 字符串 | 在文本区域为空时要显示的占位符文本                         |
+| onFocus     | 函数  | 当文本区域获得焦点时要触发的回调函数                        |
+| 变体          | 字符串 | 输入的变体。 选项包括：`default`, `icon`, 和 `button` |
+| buttonTitle | 字符串 | 按钮的标题（仅适用于按钮变体）                           |
+| 值           | 字符串 | 文本区域的初始值                                  |
+
+</Tab>
+
+</Tabs>
+
+## 文本区域
+
+允许你创建多行文本输入。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+  return (
+    <TextArea
+    disabled={false}
+    minRows={4}
+    onChange={()=>console.log('On change function fired')}
+    placeholder="Enter text here"
+    value=""
+    />
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 属性       | 类型       | 描述                |
+| -------- | -------- | ----------------- |
+| disabled | 布尔值      | 指示文本区域是否被禁用       |
+| minRows  | 数字       | 文本区域的最小可见行数。      |
+| onChange | function | 当文本区域内容更改时触发的回调函数 |
+| 占位符      | 字符串      | 当文本区域为空时显示的占位符文本  |
+| 值        | 字符串      | 文本区域的当前值          |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/navigation.mdx b/packages/twenty-docs/l/zh/twenty-ui/navigation.mdx
new file mode 100644
index 0000000000..3c8c43969e
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/navigation.mdx
@@ -0,0 +1,8 @@
+---
+title: 导航
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+<Frame>
+  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
+</Frame>
\ No newline at end of file
diff --git a/packages/twenty-docs/l/zh/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/zh/twenty-ui/navigation/breadcrumb.mdx
new file mode 100644
index 0000000000..cdbb0d8524
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/navigation/breadcrumb.mdx
@@ -0,0 +1,44 @@
+---
+title: 面包屑
+image: /images/user-guide/fields/field.png
+---
+
+<Frame>
+  <img src="/images/user-guide/fields/field.png" alt="Header" />
+</Frame>
+
+呈现一个面包屑导航栏。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter } from "react-router-dom";
+import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
+
+export const MyComponent = () => {
+  const breadcrumbLinks = [
+    { children: "Home", href: "/" },
+    { children: "Category", href: "/category" },
+    { children: "Subcategory", href: "/category/subcategory" },
+    { children: "Current Page" },
+  ];
+
+  return (
+    <BrowserRouter>
+      <Breadcrumb className links={breadcrumbLinks} />
+    </BrowserRouter>
+    )
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性 | 类型  | 描述                                                                               |
+| -- | --- | -------------------------------------------------------------------------------- |
+| 类名 | 字符串 | 用于额外样式的可选类名                                                                      |
+| 链接 | 数组  | 对象数组，每个代表一个面包屑链接。 每个对象都有一个 `children` 属性（链接的文本内容）和一个可选的 `href` 属性（点击链接时导航到的URL）。 |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/zh/twenty-ui/navigation/links.mdx
new file mode 100644
index 0000000000..546d8aea31
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/navigation/links.mdx
@@ -0,0 +1,168 @@
+---
+title: 链接
+image: /images/user-guide/what-is-twenty/20.png
+---
+
+<Frame>
+  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
+</Frame>
+
+## 联系链接
+
+用于显示联系信息的样式化链接组件。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { ContactLink } from 'twenty-ui/navigation';
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log('Contact link clicked!', event);
+  };
+
+  return (
+    <Router>
+      <ContactLink
+        className
+        href="mailto:example@example.com"
+        onClick={handleLinkClick}
+      >
+        example@example.com
+      </ContactLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性      | 类型                | 描述            |
+| ------- | ----------------- | ------------- |
+| 类名      | 字符串               | 用于附加样式的可选名称   |
+| href    | 字符串               | 链接的目标网址或路径    |
+| onClick | 函数                | 链接被点击时触发的回调函数 |
+| 子元素     | `React.ReactNode` | 在链接中显示的内容     |
+
+</Tab>
+
+</Tabs>
+
+## 原始链接
+
+用于显示链接的风格化链接组件。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RawLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RawLink className href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RawLink>
+    </Router>
+  );
+};
+
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性      | 类型                | 描述            |
+| ------- | ----------------- | ------------- |
+| 类名      | 字符串               | 用于附加样式的可选名称   |
+| href    | 字符串               | 链接的目标网址或路径    |
+| onClick | function          | 链接被点击时触发的回调函数 |
+| 子元素     | `React.ReactNode` | 在链接中显示的内容     |
+
+</Tab>
+</Tabs>
+
+## 圆形链接
+
+以 Chip 组件风格显示的圆形链接。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { RoundedLink } from "/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  const handleLinkClick = (event) => {
+    console.log("Contact link clicked!", event);
+  };
+
+  return (
+    <Router>
+      <RoundedLink href="/contact" onClick={handleLinkClick}>
+        Contact Us
+      </RoundedLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 属性      | 类型                | 描述            |
+| ------- | ----------------- | ------------- |
+| href    | 字符串               | 链接的目标网址或路径    |
+| 子元素     | `React.ReactNode` | 在链接中显示的内容     |
+| onClick | 函数                | 链接被点击时触发的回调函数 |
+
+</Tab>
+</Tabs>
+
+## 社交链接
+
+风格化的社交链接，支持各种社交链接类型，如网址、LinkedIn 和 X（或 Twitter）。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { SocialLink } from "twenty-ui/navigation";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <SocialLink
+        type="twitter"
+        href="https://twitter.com/twentycrm"
+      ></SocialLink>
+    </Router>
+  );
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性      | 类型                | 描述                                         |
+| ------- | ----------------- | ------------------------------------------ |
+| href    | 字符串               | 链接的目标网址或路径                                 |
+| 子元素     | `React.ReactNode` | 在链接中显示的内容                                  |
+| 类型      | 字符串               | 社交链接的类型。 选项包括：`url`、`LinkedIn` 和 `Twitter` |
+| onClick | 函数                | 链接被点击时触发的回调函数                              |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/zh/twenty-ui/navigation/navigation-bar.mdx
new file mode 100644
index 0000000000..48eaafede1
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/navigation/navigation-bar.mdx
@@ -0,0 +1,52 @@
+---
+title: 导航栏
+image: /images/user-guide/table-views/table.png
+---
+
+<Frame>
+  <img src="/images/user-guide/table-views/table.png" alt="Header" />
+</Frame>
+
+渲染一个包含多个`NavigationBarItem`组件的导航栏。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
+import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
+
+export const MyComponent = () => {
+
+   const navigationItems = [
+     {
+       name: "Home",
+       Icon: IconHome,
+       onClick: () => console.log("Home clicked"),
+     },
+     {
+       name: "Profile",
+       Icon: IconUser,
+       onClick: () => console.log("Profile clicked"),
+     },
+     {
+       name: "Settings",
+       Icon: IconSettings,
+       onClick: () => console.log("Settings clicked"),
+     },
+   ];
+
+  return <NavigationBar activeItemName="Home" items={navigationItems}/>;
+};
+```
+
+</Tab>
+<Tab title="Props">
+
+| 属性             | 类型  | 描述                                                           |
+| -------------- | --- | ------------------------------------------------------------ |
+| activeItemName | 字符串 | 当前活跃导航项的名称                                                   |
+| 项目             | 数组  | 表示每个导航项目的对象数组。 每个对象包含项目的`名称`、显示的`图标`组件以及项目被点击时调用的`onClick`函数 |
+
+</Tab>
+</Tabs>
diff --git a/packages/twenty-docs/l/zh/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/zh/twenty-ui/navigation/step-bar.mdx
new file mode 100644
index 0000000000..3a359b1ea8
--- /dev/null
+++ b/packages/twenty-docs/l/zh/twenty-ui/navigation/step-bar.mdx
@@ -0,0 +1,38 @@
+---
+title: 步骤条
+image: /images/user-guide/api/api.png
+---
+
+<Frame>
+  <img src="/images/user-guide/api/api.png" alt="Header" />
+</Frame>
+
+通过突出显示活动步骤来显示一系列编号步骤的进度。 它呈现一个包含步骤的容器，每个步骤由 `Step` 组件表示。
+
+<Tabs>
+<Tab title="Usage">
+
+```jsx
+import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
+
+export const MyComponent = () => {
+  return (
+    <StepBar activeStep={2}>
+      <StepBar.Step>Step 1</StepBar.Step>
+      <StepBar.Step>Step 2</StepBar.Step>
+      <StepBar.Step>Step 3</StepBar.Step>
+    </StepBar>
+  );
+};
+```
+
+</Tab>
+
+<Tab title="Props">
+
+| 属性         | 类型 | 描述                        |
+| ---------- | -- | ------------------------- |
+| activeStep | 数字 | 当前活动步骤的索引。 这决定了应突出显示哪个步骤。 |
+
+</Tab>
+</Tabs>