diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
index 891d69d957..c049f8d895 100644
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
+++ b/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
@@ -1,9 +1,8 @@
-import { H2Title } from 'twenty-ui';
+import { ColorSchemePicker, H2Title } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { ColorSchemePicker } from '@/ui/input/color-scheme/components/ColorSchemePicker';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx
index 597f9d2cd8..53c921e4f5 100644
--- a/packages/twenty-front/tsup.ui.index.tsx
+++ b/packages/twenty-front/tsup.ui.index.tsx
@@ -4,8 +4,6 @@ export { ThemeProvider } from '@emotion/react';
 export * from 'twenty-ui';
 export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar';
 export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar';
-export * from './src/modules/ui/input/color-scheme/components/ColorSchemeCard';
-export * from './src/modules/ui/input/color-scheme/components/ColorSchemePicker';
 export * from './src/modules/ui/input/components/AutosizeTextInput';
 export * from './src/modules/ui/input/components/Checkbox';
 export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput';
diff --git a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
similarity index 97%
rename from packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx
rename to packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
index 85bb45a675..10614c5e23 100644
--- a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import { Checkmark } from '@ui/display/checkmark/components/Checkmark';
+import { ColorScheme } from '@ui/input/types/ColorScheme';
 import {
   AnimatePresence,
   AnimationControls,
   motion,
   useAnimation,
 } from 'framer-motion';
-import { Checkmark } from 'twenty-ui';
-
-import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
+import React from 'react';
 
 const StyledColorSchemeBackground = styled.div<
   Pick<ColorSchemeCardProps, 'variant'>
diff --git a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx
similarity index 91%
rename from packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx
rename to packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx
index 4835fab247..d6e29dc55f 100644
--- a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
-import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
-
+import { ColorScheme } from '@ui/input/types/ColorScheme';
+import { MOBILE_VIEWPORT } from '@ui/theme';
 import { ColorSchemeCard } from './ColorSchemeCard';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   display: flex;
diff --git a/packages/twenty-front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
similarity index 95%
rename from packages/twenty-front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
rename to packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
index 700845eb03..81a36fbb34 100644
--- a/packages/twenty-front/src/modules/ui/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
+++ b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
+import { ComponentDecorator } from '@ui/testing';
 
 import { ColorSchemeCard } from '../ColorSchemeCard';
 
diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts
index 0733094165..8fa2e16019 100644
--- a/packages/twenty-ui/src/input/index.ts
+++ b/packages/twenty-ui/src/input/index.ts
@@ -12,4 +12,7 @@ export * from './button/components/LightIconButton';
 export * from './button/components/LightIconButtonGroup';
 export * from './button/components/MainButton';
 export * from './button/components/RoundedIconButton';
+export * from './color-scheme/components/ColorSchemeCard';
+export * from './color-scheme/components/ColorSchemePicker';
 export * from './components/Toggle';
+export * from './types/ColorScheme';
diff --git a/packages/twenty-ui/src/input/types/ColorScheme.ts b/packages/twenty-ui/src/input/types/ColorScheme.ts
new file mode 100644
index 0000000000..0a5f3723d7
--- /dev/null
+++ b/packages/twenty-ui/src/input/types/ColorScheme.ts
@@ -0,0 +1 @@
+export type ColorScheme = 'Dark' | 'Light' | 'System';
diff --git a/packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx b/packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx
index 8edd3c5501..2a8f27a405 100644
--- a/packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx
+++ b/packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx
@@ -11,7 +11,7 @@ Represents different color schemes and is specially tailored for light and dark
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
+<SandpackEditor content={`import { ColorSchemeCard } from "twenty-ui";
 
 export const MyComponent = () => {
   return (
@@ -43,7 +43,7 @@ Allows users to choose between different color schemes.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
+<SandpackEditor content={`import { ColorSchemePicker } from "twenty-ui";
 
 export const MyComponent = () => {
   return <ColorSchemePicker