diff --git a/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor.tsx b/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor.tsx
index 44425baa4..543c4772e 100644
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor.tsx
@@ -1,10 +1,10 @@
 import { SettingsServerlessFunctionCodeEditorContainer } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer';
 import { useGetAvailablePackages } from '@/settings/serverless-functions/hooks/useGetAvailablePackages';
-import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
 import { EditorProps, Monaco } from '@monaco-editor/react';
 import dotenv from 'dotenv';
 import { editor, MarkerSeverity } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';
+import { CodeEditor } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 export type File = {
diff --git a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
index 8eb0fdfdc..d9fffdb06 100644
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
@@ -6,7 +6,6 @@ import { SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/settings/s
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { CoreEditorHeader } from '@/ui/input/code-editor/components/CodeEditorHeader';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -16,6 +15,7 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import {
   Button,
+  CoreEditorHeader,
   H2Title,
   IconGitCommit,
   IconPlayerPlay,
diff --git a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx
index badf2e785..863483c3f 100644
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx
@@ -1,4 +1,11 @@
-import { Button, H2Title, IconPlayerPlay, Section } from 'twenty-ui';
+import {
+  Button,
+  CodeEditor,
+  CoreEditorHeader,
+  H2Title,
+  IconPlayerPlay,
+  Section,
+} from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { SettingsServerlessFunctionCodeEditorContainer } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditorContainer';
@@ -9,8 +16,6 @@ import { settingsServerlessFunctionOutputState } from '@/settings/serverless-fun
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
-import { CoreEditorHeader } from '@/ui/input/code-editor/components/CodeEditorHeader';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx
index 1a49c030a..11b73f7a8 100644
--- a/packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowRunOutputVisualizer.tsx
@@ -1,7 +1,6 @@
-import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
 import styled from '@emotion/styled';
-import { isDefined } from 'twenty-ui';
+import { CodeEditor, isDefined } from 'twenty-ui';
 
 const StyledSourceCodeContainer = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
diff --git a/packages/twenty-front/src/modules/ui/input/code-editor/components/CodeEditor.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
similarity index 86%
rename from packages/twenty-front/src/modules/ui/input/code-editor/components/CodeEditor.tsx
rename to packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
index dc846b9c0..3d1131064 100644
--- a/packages/twenty-front/src/modules/ui/input/code-editor/components/CodeEditor.tsx
+++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
@@ -1,7 +1,11 @@
-import { codeEditorTheme } from '@/ui/input/code-editor/utils/codeEditorTheme';
 import { useTheme } from '@emotion/react';
 import Editor, { EditorProps } from '@monaco-editor/react';
-import { isDefined } from 'twenty-ui';
+import { codeEditorTheme } from '@ui/input';
+import { isDefined } from '@ui/utilities';
+
+export type CodeEditorPackage = {
+  [packageName: string]: string;
+};
 
 type CodeEditorProps = Omit<EditorProps, 'onChange'> & {
   onChange?: (value: string) => void;
diff --git a/packages/twenty-front/src/modules/ui/input/code-editor/components/CodeEditorHeader.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/input/code-editor/components/CodeEditorHeader.tsx
rename to packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx
diff --git a/packages/twenty-ui/src/input/code-editor/index.ts b/packages/twenty-ui/src/input/code-editor/index.ts
new file mode 100644
index 000000000..d5f85820f
--- /dev/null
+++ b/packages/twenty-ui/src/input/code-editor/index.ts
@@ -0,0 +1,3 @@
+export * from './components/CodeEditor';
+export * from './components/CodeEditorHeader';
+export * from './theme/utils/codeEditorTheme';
diff --git a/packages/twenty-front/src/modules/ui/input/code-editor/utils/codeEditorTheme.ts b/packages/twenty-ui/src/input/code-editor/theme/utils/codeEditorTheme.ts
similarity index 95%
rename from packages/twenty-front/src/modules/ui/input/code-editor/utils/codeEditorTheme.ts
rename to packages/twenty-ui/src/input/code-editor/theme/utils/codeEditorTheme.ts
index bb4bd9092..f26da9b5f 100644
--- a/packages/twenty-front/src/modules/ui/input/code-editor/utils/codeEditorTheme.ts
+++ b/packages/twenty-ui/src/input/code-editor/theme/utils/codeEditorTheme.ts
@@ -1,5 +1,5 @@
+import { ThemeType } from '@ui/theme';
 import { editor } from 'monaco-editor';
-import { ThemeType } from 'twenty-ui';
 
 export const codeEditorTheme = (theme: ThemeType) => {
   return {
diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts
index 8fa2e1601..feac4f3f0 100644
--- a/packages/twenty-ui/src/input/index.ts
+++ b/packages/twenty-ui/src/input/index.ts
@@ -12,6 +12,9 @@ export * from './button/components/LightIconButton';
 export * from './button/components/LightIconButtonGroup';
 export * from './button/components/MainButton';
 export * from './button/components/RoundedIconButton';
+export * from './code-editor/components/CodeEditor';
+export * from './code-editor/components/CodeEditorHeader';
+export * from './code-editor/theme/utils/codeEditorTheme';
 export * from './color-scheme/components/ColorSchemeCard';
 export * from './color-scheme/components/ColorSchemePicker';
 export * from './components/Toggle';