diff --git a/packages/twenty-ui/README.md b/packages/twenty-ui/README.md
index 6f0abfa1d3..c21b3a3cd2 100644
--- a/packages/twenty-ui/README.md
+++ b/packages/twenty-ui/README.md
@@ -122,6 +122,30 @@ diff cleanly against their sources).
 - Tokens live in `src/theme/` (`THEME_LIGHT` / `THEME_DARK`); the `--t-*` CSS variables and the `themeCssVariables` accessor are static files mirrored token-for-token from `twenty-ui-deprecated` (matching its own static-CSS approach).
 - A theme parity test asserts the theme CSS and `themeCssVariables` stay identical to `twenty-ui-deprecated`'s `--t-*` values.
 
+### Consuming the theme
+
+- Wrap the app once in `ThemeProvider` and import `twenty-ui/theme-light.css` and `twenty-ui/theme-dark.css`.
+- Read theme values with the public hooks, not the raw context:
+  - `useTheme()` returns the resolved `ThemeType` (numeric tokens such as `theme.icon.size.sm`). Outside a provider it yields the default light theme.
+  - `useThemeColorScheme()` returns the active `'light' | 'dark'`.
+- Colors are consumed as `var(--t-*)` strings via `themeCssVariables` (the browser resolves them against the in-scope `--t-*`), so overriding the variables re-themes color automatically.
+
+### Customizing the theme (`--t-*` override contract)
+
+The supported way to re-theme is to override the `--t-*` CSS variables. Their names are exactly the keys declared in `theme-light.css` / `theme-dark.css`. Two mechanisms:
+
+1. **Globally** — ship a stylesheet that redefines `--t-*` under `.light` / `.dark`. This covers the whole document, including overlays portaled to `document.body`.
+2. **Per `ThemeProvider`** — pass `overrides` (a `ThemeOverrides` map of `--t-*` name to value). The variables are applied to the provider's subtree.
+
+`ThemeProvider` props:
+
+- `colorScheme: 'light' | 'dark'` — required.
+- `applyToRoot?: boolean` (default `true`) — toggles the `.light` / `.dark` class on `document.documentElement`. Keep it `true` so the whole document, including portaled overlays (tooltips, dropdowns, modals) rendered to `document.body`, stays themed. Set it `false` when the host manages its own color-scheme class or when mounting more than one provider, so the providers don't clobber the root.
+- `overrides?: ThemeOverrides` — `--t-*` variable overrides scoped to this provider's subtree.
+- `className?: string` — extra class on the scoped wrapper.
+
+**Scoped theming and portals.** When `applyToRoot` is `false` or `overrides` is set, the provider scopes the variables to a wrapper element. Overlays portal to `document.body` (outside that wrapper), so for them to inherit the scoped variables the provider also exposes a themed portal container via `ThemeScopeContext`; read it with `useThemeContainer()` and pass it as the overlay's portal container. The library's `AppTooltip` and `Modal` already do this, falling back to `document.body` when no scoped provider is present (the default global path is unchanged).
+
 ## Component migration map
 
 Components split into two buckets. *(The migration is complete; see
diff --git a/packages/twenty-ui/src/data-display/AnimatedCheckmark/AnimatedCheckmark.tsx b/packages/twenty-ui/src/data-display/AnimatedCheckmark/AnimatedCheckmark.tsx
index 4a1faa110c..94b3d7e4b1 100644
--- a/packages/twenty-ui/src/data-display/AnimatedCheckmark/AnimatedCheckmark.tsx
+++ b/packages/twenty-ui/src/data-display/AnimatedCheckmark/AnimatedCheckmark.tsx
@@ -1,6 +1,5 @@
 import { motion } from 'framer-motion';
-import { useContext } from 'react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 export type AnimatedCheckmarkProps = React.ComponentProps<
   typeof motion.path
@@ -17,7 +16,7 @@ export const AnimatedCheckmark = ({
   duration = 0.5,
   size = 28,
 }: AnimatedCheckmarkProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <svg
diff --git a/packages/twenty-ui/src/data-display/Avatar/Avatar.tsx b/packages/twenty-ui/src/data-display/Avatar/Avatar.tsx
index a0bcf47f7e..618ef2da06 100644
--- a/packages/twenty-ui/src/data-display/Avatar/Avatar.tsx
+++ b/packages/twenty-ui/src/data-display/Avatar/Avatar.tsx
@@ -1,12 +1,12 @@
 import { isNonEmptyString, isNull, isUndefined } from '@sniptt/guards';
 import { clsx } from 'clsx';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 
 import { handleClickableElementKeyDown } from '@ui/accessibility/utils/handleClickableElementKeyDown';
 import { type AvatarSize } from '@ui/data-display/Avatar/types/AvatarSize';
 import { type AvatarType } from '@ui/data-display/Avatar/types/AvatarType';
 import { type IconComponent } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { stringToThemeColorP3String } from '@ui/utilities';
 import { type Nullable } from '@ui/utilities/types/Nullable';
 
@@ -41,7 +41,7 @@ export const Avatar = ({
   backgroundColor,
   borderColor,
 }: AvatarProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   const [erroredAvatarImageURI, setErroredAvatarImageURI] = useState<
     string | null
diff --git a/packages/twenty-ui/src/data-display/AvatarOrIcon/AvatarOrIcon.tsx b/packages/twenty-ui/src/data-display/AvatarOrIcon/AvatarOrIcon.tsx
index c7fdd14e8e..9311072b3c 100644
--- a/packages/twenty-ui/src/data-display/AvatarOrIcon/AvatarOrIcon.tsx
+++ b/packages/twenty-ui/src/data-display/AvatarOrIcon/AvatarOrIcon.tsx
@@ -4,9 +4,8 @@ import { handleClickableElementKeyDown } from '@ui/accessibility/utils/handleCli
 import { Avatar } from '@ui/data-display/Avatar/Avatar';
 import { type AvatarType } from '@ui/data-display/Avatar/types/AvatarType';
 import { type IconComponent } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { type Nullable } from '@ui/utilities';
-import { useContext } from 'react';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 
 import styles from './AvatarOrIcon.module.scss';
@@ -34,7 +33,7 @@ export const AvatarOrIcon = ({
   IconBackgroundColor,
   onClick,
 }: AvatarOrIconProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   if (!isDefined(Icon)) {
     return (
diff --git a/packages/twenty-ui/src/data-display/Checkmark/Checkmark.tsx b/packages/twenty-ui/src/data-display/Checkmark/Checkmark.tsx
index 9e2582c45c..6e161ceae2 100644
--- a/packages/twenty-ui/src/data-display/Checkmark/Checkmark.tsx
+++ b/packages/twenty-ui/src/data-display/Checkmark/Checkmark.tsx
@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 
 import { clsx } from 'clsx';
 
 import { IconCheck } from '@ui/icon/components/TablerIcons';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './Checkmark.module.scss';
 
@@ -12,7 +12,7 @@ export type CheckmarkProps = React.ComponentPropsWithoutRef<'div'> & {
 };
 
 export const Checkmark = ({ className }: CheckmarkProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <div className={clsx(styles.root, className)}>
diff --git a/packages/twenty-ui/src/data-display/Tag/Tag.tsx b/packages/twenty-ui/src/data-display/Tag/Tag.tsx
index 93cc7c4152..3d74772527 100644
--- a/packages/twenty-ui/src/data-display/Tag/Tag.tsx
+++ b/packages/twenty-ui/src/data-display/Tag/Tag.tsx
@@ -1,9 +1,8 @@
 import { type IconComponent } from '@ui/icon/types/IconComponent';
 import { OverflowingTextWithTooltip } from '@ui/surfaces/OverflowingTextWithTooltip/OverflowingTextWithTooltip';
 import { type ThemeColor } from '@ui/theme';
-import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { themeCssVariables, useTheme } from '@ui/theme-constants';
 import { clsx } from 'clsx';
-import { useContext } from 'react';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 
 import styles from './Tag.module.scss';
@@ -35,7 +34,7 @@ export const Tag = ({
   preventShrink,
   preventPadding,
 }: TagProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   const tagBackground =
     color === 'transparent'
diff --git a/packages/twenty-ui/src/data-display/TintedIconTile/TintedIconTile.tsx b/packages/twenty-ui/src/data-display/TintedIconTile/TintedIconTile.tsx
index 3f1c9eae5c..23ce0e6747 100644
--- a/packages/twenty-ui/src/data-display/TintedIconTile/TintedIconTile.tsx
+++ b/packages/twenty-ui/src/data-display/TintedIconTile/TintedIconTile.tsx
@@ -2,8 +2,7 @@ import { type IconComponent } from '@ui/icon/types/IconComponent';
 import { StyledTintedIconTileContainer } from '@ui/data-display/StyledTintedIconTileContainer/StyledTintedIconTileContainer';
 import { getIconTileColorShades } from '@ui/data-display/TintedIconTile/utils/getIconTileColorShades';
 import { DEFAULT_THEME_COLOR_FALLBACK } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
-import { useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 
 export type TintedIconTileProps = {
@@ -19,7 +18,7 @@ export const TintedIconTile = ({
   size: sizeFromProps,
   stroke: strokeFromProps,
 }: TintedIconTileProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const style = getIconTileColorShades(color);
   const iconSize = sizeFromProps ?? theme.icon.size.md;
   const iconStroke = strokeFromProps ?? theme.icon.stroke.md;
diff --git a/packages/twenty-ui/src/feedback/AnimatedPlaceholder/AnimatedPlaceholder.tsx b/packages/twenty-ui/src/feedback/AnimatedPlaceholder/AnimatedPlaceholder.tsx
index 7857f943ca..48103dd170 100644
--- a/packages/twenty-ui/src/feedback/AnimatedPlaceholder/AnimatedPlaceholder.tsx
+++ b/packages/twenty-ui/src/feedback/AnimatedPlaceholder/AnimatedPlaceholder.tsx
@@ -1,12 +1,12 @@
 import { clsx } from 'clsx';
 import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { BACKGROUND } from '@ui/feedback/AnimatedPlaceholder/constants/Background';
 import { DARK_BACKGROUND } from '@ui/feedback/AnimatedPlaceholder/constants/DarkBackground';
 import { DARK_MOVING_IMAGE } from '@ui/feedback/AnimatedPlaceholder/constants/DarkMovingImage';
 import { MOVING_IMAGE } from '@ui/feedback/AnimatedPlaceholder/constants/MovingImage';
-import { ThemeContext } from '@ui/theme-constants';
+import { useThemeColorScheme } from '@ui/theme-constants';
 
 import styles from './AnimatedPlaceholder.module.scss';
 
@@ -22,7 +22,7 @@ type AnimatedPlaceholderProps = {
 };
 
 export const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
-  const { colorScheme } = useContext(ThemeContext);
+  const colorScheme = useThemeColorScheme();
 
   const x = useMotionValue(window.innerWidth / 2);
   const y = useMotionValue(window.innerHeight / 2);
diff --git a/packages/twenty-ui/src/feedback/Info/Info.tsx b/packages/twenty-ui/src/feedback/Info/Info.tsx
index 70c67ed6a2..8616dbc342 100644
--- a/packages/twenty-ui/src/feedback/Info/Info.tsx
+++ b/packages/twenty-ui/src/feedback/Info/Info.tsx
@@ -1,9 +1,9 @@
 import { clsx } from 'clsx';
 import { IconInfoCircle } from '@ui/icon/components/TablerIcons';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import { Button } from '@ui/input/Button/Button';
-import React, { useContext } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import styles from './Info.module.scss';
@@ -29,7 +29,7 @@ export const Info = ({
   onClick,
   to,
 }: InfoProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <div className={clsx(styles.info, INFO_ACCENT_CLASS_NAMES[accent])}>
diff --git a/packages/twenty-ui/src/feedback/InlineBanner/InlineBanner.tsx b/packages/twenty-ui/src/feedback/InlineBanner/InlineBanner.tsx
index eece4d1f40..cfcee4e333 100644
--- a/packages/twenty-ui/src/feedback/InlineBanner/InlineBanner.tsx
+++ b/packages/twenty-ui/src/feedback/InlineBanner/InlineBanner.tsx
@@ -1,6 +1,5 @@
 import { clsx } from 'clsx';
-import { useContext } from 'react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { Button } from '@ui/input/Button/Button';
 import { type IconComponent } from '@ui/icon/types/IconComponent';
 import { IconInfoCircle } from '@ui/icon/components/TablerIcons';
@@ -27,7 +26,7 @@ export const InlineBanner = ({
   LeftIcon = IconInfoCircle,
   className,
 }: InlineBannerProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <Banner
diff --git a/packages/twenty-ui/src/icon/components/IconAddressBook.tsx b/packages/twenty-ui/src/icon/components/IconAddressBook.tsx
index e2ca2fc2ae..d125c261bc 100644
--- a/packages/twenty-ui/src/icon/components/IconAddressBook.tsx
+++ b/packages/twenty-ui/src/icon/components/IconAddressBook.tsx
@@ -1,8 +1,6 @@
-import { useContext } from 'react';
-
 import IconAddressBookRaw from '@assets/icons/address-book.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconAddressBookProps = Pick<
   IconComponentProps,
@@ -10,7 +8,7 @@ type IconAddressBookProps = Pick<
 >;
 
 export const IconAddressBook = (props: IconAddressBookProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? 24;
   const stroke = props.stroke ?? theme.icon.stroke.md;
 
diff --git a/packages/twenty-ui/src/icon/components/IconBrandAnthropic.tsx b/packages/twenty-ui/src/icon/components/IconBrandAnthropic.tsx
index aae6cdf4ed..f7980f71f1 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandAnthropic.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandAnthropic.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconAnthropicRaw from '@assets/icons/anthropic.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconBrandAnthropicProps = Pick<IconComponentProps, 'size'>;
 
 export const IconBrandAnthropic = (props: IconBrandAnthropicProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconAnthropicRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandGemini.tsx b/packages/twenty-ui/src/icon/components/IconBrandGemini.tsx
index 950fc9c83e..4dd6e526bd 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandGemini.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandGemini.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconBrandGeminiRaw from '@assets/icons/gemini.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconBrandGeminiProps = Pick<IconComponentProps, 'size'>;
 
 export const IconBrandGemini = (props: IconBrandGeminiProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconBrandGeminiRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandGroq.tsx b/packages/twenty-ui/src/icon/components/IconBrandGroq.tsx
index a6c420da20..610a4ffd43 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandGroq.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandGroq.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconBrandGroqRaw from '@assets/icons/groq.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconBrandGroqProps = Pick<IconComponentProps, 'size'>;
 
 export const IconBrandGroq = (props: IconBrandGroqProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconBrandGroqRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandMistral.tsx b/packages/twenty-ui/src/icon/components/IconBrandMistral.tsx
index dfe4dbe44a..e5c390a51b 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandMistral.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandMistral.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconBrandMistralRaw from '@assets/icons/mistral.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconBrandMistralProps = Pick<IconComponentProps, 'size'>;
 
 export const IconBrandMistral = (props: IconBrandMistralProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconBrandMistralRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandXai.tsx b/packages/twenty-ui/src/icon/components/IconBrandXai.tsx
index 9570edcd57..cccbcbc953 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandXai.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandXai.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconBrandXaiRaw from '@assets/icons/xai.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconBrandXaiProps = Pick<IconComponentProps, 'size' | 'color'>;
 
 export const IconBrandXai = (props: IconBrandXaiProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return (
diff --git a/packages/twenty-ui/src/icon/components/IconChartBarHorizontal.tsx b/packages/twenty-ui/src/icon/components/IconChartBarHorizontal.tsx
index 268b4d839a..94f3d32c76 100644
--- a/packages/twenty-ui/src/icon/components/IconChartBarHorizontal.tsx
+++ b/packages/twenty-ui/src/icon/components/IconChartBarHorizontal.tsx
@@ -1,8 +1,6 @@
-import { useContext } from 'react';
-
 import { IconChartBar } from '@ui/icon/components/TablerIcons';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './IconChartBarHorizontal.module.scss';
 
@@ -12,7 +10,7 @@ type IconChartBarHorizontalProps = Pick<
 >;
 
 export const IconChartBarHorizontal = (props: IconChartBarHorizontalProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.md;
   const stroke = props.stroke ?? theme.icon.stroke.sm;
 
diff --git a/packages/twenty-ui/src/icon/components/IconGmail.tsx b/packages/twenty-ui/src/icon/components/IconGmail.tsx
index c270f9efc0..79b2680650 100644
--- a/packages/twenty-ui/src/icon/components/IconGmail.tsx
+++ b/packages/twenty-ui/src/icon/components/IconGmail.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconGmailRaw from '@assets/icons/gmail.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconGmailProps = Pick<IconComponentProps, 'size'>;
 
 export const IconGmail = (props: IconGmailProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconGmailRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconGoogle.tsx b/packages/twenty-ui/src/icon/components/IconGoogle.tsx
index 3547b2dece..d88bda5f05 100644
--- a/packages/twenty-ui/src/icon/components/IconGoogle.tsx
+++ b/packages/twenty-ui/src/icon/components/IconGoogle.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconGoogleRaw from '@assets/icons/google.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconGoogleProps = Pick<IconComponentProps, 'size'>;
 
 export const IconGoogle = (props: IconGoogleProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconGoogleRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconGoogleCalendar.tsx b/packages/twenty-ui/src/icon/components/IconGoogleCalendar.tsx
index d9d3599de9..86f2de6843 100644
--- a/packages/twenty-ui/src/icon/components/IconGoogleCalendar.tsx
+++ b/packages/twenty-ui/src/icon/components/IconGoogleCalendar.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconGoogleCalendarRaw from '@assets/icons/google-calendar.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconGoogleCalendarProps = Pick<IconComponentProps, 'size'>;
 
 export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconGoogleCalendarRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconLock.tsx b/packages/twenty-ui/src/icon/components/IconLock.tsx
index 7afe848b60..810b5eeaab 100644
--- a/packages/twenty-ui/src/icon/components/IconLock.tsx
+++ b/packages/twenty-ui/src/icon/components/IconLock.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconLockRaw from '@assets/icons/lock.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconLockCustomProps = Pick<IconComponentProps, 'size'>;
 
 export const IconLockCustom = (props: IconLockCustomProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconLockRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconMicrosoft.tsx b/packages/twenty-ui/src/icon/components/IconMicrosoft.tsx
index 5bc803f493..e322fe2e41 100644
--- a/packages/twenty-ui/src/icon/components/IconMicrosoft.tsx
+++ b/packages/twenty-ui/src/icon/components/IconMicrosoft.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IconMicrosoftRaw from '@assets/icons/microsoft.svg?react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 interface IconMicrosoftProps {
   size?: number | string;
 }
 
 export const IconMicrosoft = (props: IconMicrosoftProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconMicrosoftRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconMicrosoftCalendar.tsx b/packages/twenty-ui/src/icon/components/IconMicrosoftCalendar.tsx
index 894fbebfda..484a191932 100644
--- a/packages/twenty-ui/src/icon/components/IconMicrosoftCalendar.tsx
+++ b/packages/twenty-ui/src/icon/components/IconMicrosoftCalendar.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IconMicrosoftCalendarRaw from '@assets/icons/microsoft-calendar.svg?react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 interface IconMicrosoftCalendarProps {
   size?: number | string;
 }
 
 export const IconMicrosoftCalendar = (props: IconMicrosoftCalendarProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconMicrosoftCalendarRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconMicrosoftOutlook.tsx b/packages/twenty-ui/src/icon/components/IconMicrosoftOutlook.tsx
index 4e04adac43..65adbbf4d5 100644
--- a/packages/twenty-ui/src/icon/components/IconMicrosoftOutlook.tsx
+++ b/packages/twenty-ui/src/icon/components/IconMicrosoftOutlook.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IconMicrosoftOutlookRaw from '@assets/icons/microsoft-outlook.svg?react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 interface IconMicrosoftOutlookProps {
   size?: number | string;
 }
 
 export const IconMicrosoftOutlook = (props: IconMicrosoftOutlookProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconMicrosoftOutlookRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconModelClaude.tsx b/packages/twenty-ui/src/icon/components/IconModelClaude.tsx
index ebdc8d08a1..a363c1adf0 100644
--- a/packages/twenty-ui/src/icon/components/IconModelClaude.tsx
+++ b/packages/twenty-ui/src/icon/components/IconModelClaude.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconModelClaudeRaw from '@assets/icons/claude.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconModelClaudeProps = Pick<IconComponentProps, 'size'>;
 
 export const IconModelClaude = (props: IconModelClaudeProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return <IconModelClaudeRaw height={size} width={size} />;
diff --git a/packages/twenty-ui/src/icon/components/IconProviderOpenai.tsx b/packages/twenty-ui/src/icon/components/IconProviderOpenai.tsx
index b2cfd06877..e335b02c57 100644
--- a/packages/twenty-ui/src/icon/components/IconProviderOpenai.tsx
+++ b/packages/twenty-ui/src/icon/components/IconProviderOpenai.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconOpenaiRaw from '@assets/icons/openai.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconProviderOpenaiProps = Pick<IconComponentProps, 'size' | 'color'>;
 
 export const IconProviderOpenai = (props: IconProviderOpenaiProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return (
diff --git a/packages/twenty-ui/src/icon/components/IconRelationManyToOne.tsx b/packages/twenty-ui/src/icon/components/IconRelationManyToOne.tsx
index c29ad2ef8e..9366126b89 100644
--- a/packages/twenty-ui/src/icon/components/IconRelationManyToOne.tsx
+++ b/packages/twenty-ui/src/icon/components/IconRelationManyToOne.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconRelationManyToOneRaw from '@assets/icons/many-to-one.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconRelationManyToOneProps = Pick<IconComponentProps, 'size' | 'stroke'>;
 
 export const IconRelationManyToOne = (props: IconRelationManyToOneProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? 24;
   const stroke = props.stroke ?? theme.icon.stroke.md;
 
diff --git a/packages/twenty-ui/src/icon/components/IconTrashXOff.tsx b/packages/twenty-ui/src/icon/components/IconTrashXOff.tsx
index 576ca872cd..35bd053da1 100644
--- a/packages/twenty-ui/src/icon/components/IconTrashXOff.tsx
+++ b/packages/twenty-ui/src/icon/components/IconTrashXOff.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconTrashXOffRaw from '@assets/icons/trash-x-off.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconTrashXOffProps = Pick<IconComponentProps, 'size' | 'stroke'>;
 
 export const IconTrashXOff = (props: IconTrashXOffProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   const stroke = props.stroke ?? theme.icon.stroke.md;
 
diff --git a/packages/twenty-ui/src/icon/components/IconTwentyStar.tsx b/packages/twenty-ui/src/icon/components/IconTwentyStar.tsx
index 04ee48ec5e..c6ea2bbc9a 100644
--- a/packages/twenty-ui/src/icon/components/IconTwentyStar.tsx
+++ b/packages/twenty-ui/src/icon/components/IconTwentyStar.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconTwentyStarRaw from '@assets/icons/twenty-star.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconTwentyStarProps = Pick<IconComponentProps, 'size' | 'stroke'>;
 
 export const IconTwentyStar = (props: IconTwentyStarProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? 24;
   const stroke = props.stroke ?? theme.icon.stroke.md;
 
diff --git a/packages/twenty-ui/src/icon/components/IconTwentyStarFilled.tsx b/packages/twenty-ui/src/icon/components/IconTwentyStarFilled.tsx
index 10564ab4d6..7c75f77081 100644
--- a/packages/twenty-ui/src/icon/components/IconTwentyStarFilled.tsx
+++ b/packages/twenty-ui/src/icon/components/IconTwentyStarFilled.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
 import IconTwentyStarFilledRaw from '@assets/icons/twenty-star-filled.svg?react';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IconTwentyStarFilledProps = Pick<IconComponentProps, 'size' | 'stroke'>;
 
 export const IconTwentyStarFilled = (props: IconTwentyStarFilledProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? 24;
   const stroke = props.stroke ?? theme.icon.stroke.md;
 
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconArray.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconArray.tsx
index ecc730a065..ba5b52d493 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconArray.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconArray.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconArrayRaw from '@assets/icons/illustration-array.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconArrayProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconArray = (props: IllustrationIconArrayProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconCalendarEvent.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconCalendarEvent.tsx
index aa3fb1904b..44fc355989 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconCalendarEvent.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconCalendarEvent.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
 import IllustrationIconCalendarEventRaw from '@assets/icons/illustration-calendar-event.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconCalendarEventProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconCalendarEvent = (
   props: IllustrationIconCalendarEventProps,
 ) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconCalendarTime.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconCalendarTime.tsx
index ec963a74be..410233b579 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconCalendarTime.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconCalendarTime.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
 import IllustrationIconCalendarTimeRaw from '@assets/icons/illustration-calendar-time.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconCalendarTimeProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconCalendarTime = (
   props: IllustrationIconCalendarTimeProps,
 ) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconCurrency.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconCurrency.tsx
index 52e06af18f..d9652899c5 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconCurrency.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconCurrency.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
 import IllustrationIconCurrencyRaw from '@assets/icons/illustration-currency.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconCurrencyProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconCurrency = (
   props: IllustrationIconCurrencyProps,
 ) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconFile.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconFile.tsx
index 9b846e7e41..f276815bdb 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconFile.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconFile.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconFileRaw from '@assets/icons/illustration-file.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconFileProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconFile = (props: IllustrationIconFileProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconJson.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconJson.tsx
index 66a4377b85..f1b7602d9d 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconJson.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconJson.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconJsonRaw from '@assets/icons/illustration-json.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconJsonProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconJson = (props: IllustrationIconJsonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconLink.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconLink.tsx
index caee86596d..3b7ce44a71 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconLink.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconLink.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconLinkRaw from '@assets/icons/illustration-link.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconLinkProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconLink = (props: IllustrationIconLinkProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconMail.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconMail.tsx
index 4cf10ad02b..cba3a82042 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconMail.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconMail.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconMailRaw from '@assets/icons/illustration-mail.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconMailProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconMail = (props: IllustrationIconMailProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconManyToMany.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconManyToMany.tsx
index d7ee64bb3d..2eed205207 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconManyToMany.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconManyToMany.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
 import IllustrationIconManyToManyRaw from '@assets/icons/illustration-many-to-many.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconManyToManyProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconManyToMany = (
   props: IllustrationIconManyToManyProps,
 ) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconMap.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconMap.tsx
index 0474b6370c..2c62067865 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconMap.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconMap.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconMapRaw from '@assets/icons/illustration-map.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconMapProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconMap = (props: IllustrationIconMapProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconNumbers.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconNumbers.tsx
index 5d5a820c6e..5dfeb026db 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconNumbers.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconNumbers.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
 import IllustrationIconNumbersRaw from '@assets/icons/illustration-numbers.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconNumbersProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconNumbers = (
   props: IllustrationIconNumbersProps,
 ) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconOneToMany.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconOneToMany.tsx
index 8c2503b6eb..90eab8e7a0 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconOneToMany.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconOneToMany.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
 import IllustrationIconOneToManyRaw from '@assets/icons/illustration-one-to-many.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconOneToManyProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconOneToMany = (
   props: IllustrationIconOneToManyProps,
 ) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconOneToOne.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconOneToOne.tsx
index 4307d64b82..bbdcda978f 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconOneToOne.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconOneToOne.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
 import IllustrationIconOneToOneRaw from '@assets/icons/illustration-one-to-one.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconOneToOneProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconOneToOne = (
   props: IllustrationIconOneToOneProps,
 ) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconPhone.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconPhone.tsx
index 414ae0820e..3a1ac82fd3 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconPhone.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconPhone.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconPhoneRaw from '@assets/icons/illustration-phone.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconPhoneProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconSetting.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconSetting.tsx
index 795fbafbcf..55b86f8af7 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconSetting.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconSetting.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
 import IllustrationIconSettingRaw from '@assets/icons/illustration-setting.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconSettingProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconSetting = (
   props: IllustrationIconSettingProps,
 ) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconStar.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconStar.tsx
index 5e69da23b4..56312c55ea 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconStar.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconStar.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconStarRaw from '@assets/icons/illustration-star.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconStarProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconStar = (props: IllustrationIconStarProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
 
   return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconTag.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconTag.tsx
index f663914eba..65b546346e 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconTag.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconTag.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconTagRaw from '@assets/icons/illustration-tag.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconTagProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconTag = (props: IllustrationIconTagProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconTags.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconTags.tsx
index bcd9d9c326..dc03e6ab0a 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconTags.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconTags.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconTagsRaw from '@assets/icons/illustration-tags.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconTagsProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconTags = (props: IllustrationIconTagsProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconText.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconText.tsx
index 0af7fc87f8..8c2cfe8f21 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconText.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconText.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconTextRaw from '@assets/icons/illustration-text.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconTextProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconText = (props: IllustrationIconTextProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconToggle.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconToggle.tsx
index 28ed2eb818..1da007fa37 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconToggle.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconToggle.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconToggleRaw from '@assets/icons/illustration-toggle.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconToggleProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconUid.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconUid.tsx
index c2dfbbe042..09a132ee65 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconUid.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconUid.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconUidRaw from '@assets/icons/illustration-uid.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconUidProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconUid = (props: IllustrationIconUidProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconUser.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconUser.tsx
index 42aea42c90..f2d11828f5 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconUser.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconUser.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
 import IllustrationIconUserRaw from '@assets/icons/illustration-user.svg?react';
 import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type IllustrationIconUserProps = Pick<IconComponentProps, 'size'>;
 
 export const IllustrationIconUser = (props: IllustrationIconUserProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
   return (
     <IllustrationIconWrapper>
diff --git a/packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx
index 6f6261d3dd..61a3fd155f 100644
--- a/packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx
+++ b/packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx
@@ -1,7 +1,7 @@
 import { Toggle } from '@ui/input';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { clsx } from 'clsx';
-import { useContext, useId } from 'react';
+import { useId } from 'react';
 
 import styles from './AdvancedSettingsToggle.module.scss';
 
@@ -18,7 +18,7 @@ export const AdvancedSettingsToggle = ({
   label = 'Advanced',
   className,
 }: AdvancedSettingsToggleProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   const onChange = (newValue: boolean) => {
     setIsAdvancedModeEnabled(newValue);
diff --git a/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.tsx b/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.tsx
index ba7df8d57f..337753d234 100644
--- a/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.tsx
+++ b/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.tsx
@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
 import { type MotionProps, motion } from 'framer-motion';
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Pill } from '@ui/data-display/Pill/Pill';
-import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { themeCssVariables, useTheme } from '@ui/theme-constants';
 import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
 import { useIsMobile } from '@ui/utilities';
 import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator';
@@ -335,7 +335,7 @@ export const AnimatedButton = ({
   dataGloballyPreventClickOutside,
   soonLabel = 'Soon',
 }: AnimatedButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const isMobile = useIsMobile();
   const isDisabled = soon || disabled;
 
diff --git a/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.tsx b/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.tsx
index 22fdcde6ac..6873d1d466 100644
--- a/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.tsx
+++ b/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.tsx
@@ -1,13 +1,13 @@
 import { clsx } from 'clsx';
 import { motion, type MotionProps } from 'framer-motion';
-import { type ComponentProps, type MouseEvent, useContext } from 'react';
+import { type ComponentProps, type MouseEvent } from 'react';
 
 import { type IconComponent } from '@ui/icon';
 import {
   type LightIconButtonAccent,
   type LightIconButtonSize,
 } from '@ui/input/LightIconButton/LightIconButton';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './AnimatedLightIconButton.module.scss';
 
@@ -40,7 +40,7 @@ export const AnimatedLightIconButton = ({
   onClick,
   title,
 }: AnimatedLightIconButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <button
diff --git a/packages/twenty-ui/src/input/Button/internal/ButtonIcon.tsx b/packages/twenty-ui/src/input/Button/internal/ButtonIcon.tsx
index f5a815dd3a..1e214130e1 100644
--- a/packages/twenty-ui/src/input/Button/internal/ButtonIcon.tsx
+++ b/packages/twenty-ui/src/input/Button/internal/ButtonIcon.tsx
@@ -1,7 +1,6 @@
 import { type IconComponent } from '@ui/icon';
 import { Loader } from '@ui/feedback';
-import { ThemeContext } from '@ui/theme-constants';
-import { useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './ButtonIcon.module.scss';
 
@@ -12,7 +11,7 @@ export const ButtonIcon = ({
   Icon?: IconComponent;
   isLoading?: boolean;
 }) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <div className={styles.iconWrapper}>
diff --git a/packages/twenty-ui/src/input/CodeEditor/CodeEditor.tsx b/packages/twenty-ui/src/input/CodeEditor/CodeEditor.tsx
index 1011d08656..35130ba8b2 100644
--- a/packages/twenty-ui/src/input/CodeEditor/CodeEditor.tsx
+++ b/packages/twenty-ui/src/input/CodeEditor/CodeEditor.tsx
@@ -4,9 +4,13 @@ import { BASE_CODE_EDITOR_THEME_ID } from '@ui/input/CodeEditor/constants/BaseCo
 import { getBaseCodeEditorTheme } from '@ui/input/CodeEditor/utils/getBaseCodeEditorTheme';
 import { ResizeHandle } from '@ui/layout/ResizeHandle/ResizeHandle';
 import { useResizeHandle } from '@ui/layout/ResizeHandle/hooks/useResizeHandle';
-import { ThemeContext, type ThemeType } from '@ui/theme-constants';
+import {
+  useTheme,
+  useThemeColorScheme,
+  type ThemeType,
+} from '@ui/theme-constants';
 import { type editor } from 'monaco-editor';
-import { type KeyboardEvent, useContext, useEffect, useState } from 'react';
+import { type KeyboardEvent, useEffect, useState } from 'react';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 
 import styles from './CodeEditor.module.scss';
@@ -56,7 +60,8 @@ export const CodeEditor = ({
   contentPadding = 'default',
   autoHeight = false,
 }: CodeEditorProps) => {
-  const { theme, colorScheme } = useContext(ThemeContext);
+  const theme = useTheme();
+  const colorScheme = useThemeColorScheme();
   const [monaco, setMonaco] = useState<Monaco | undefined>(undefined);
   const [editor, setEditor] = useState<
     editor.IStandaloneCodeEditor | undefined
diff --git a/packages/twenty-ui/src/input/FloatingButton/FloatingButton.tsx b/packages/twenty-ui/src/input/FloatingButton/FloatingButton.tsx
index 9672100e6d..e3fe82c9f1 100644
--- a/packages/twenty-ui/src/input/FloatingButton/FloatingButton.tsx
+++ b/packages/twenty-ui/src/input/FloatingButton/FloatingButton.tsx
@@ -1,9 +1,8 @@
 import { clsx } from 'clsx';
-import { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './FloatingButton.module.scss';
 
@@ -37,7 +36,7 @@ export const FloatingButton = ({
   focus = false,
   to,
 }: FloatingButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   // Replaces the legacy Linaria `as` polymorphism: react-router Link when a
   // `to` is provided, a native button otherwise. Typed as any to forward all
diff --git a/packages/twenty-ui/src/input/FloatingIconButton/FloatingIconButton.tsx b/packages/twenty-ui/src/input/FloatingIconButton/FloatingIconButton.tsx
index 9d73057f1d..7e95a417d8 100644
--- a/packages/twenty-ui/src/input/FloatingIconButton/FloatingIconButton.tsx
+++ b/packages/twenty-ui/src/input/FloatingIconButton/FloatingIconButton.tsx
@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
-import React, { useContext } from 'react';
+import React from 'react';
 
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './FloatingIconButton.module.scss';
 
@@ -40,7 +40,7 @@ export const FloatingIconButton = ({
   onClick,
   isActive,
 }: FloatingIconButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <button
diff --git a/packages/twenty-ui/src/input/IconButton/IconButton.tsx b/packages/twenty-ui/src/input/IconButton/IconButton.tsx
index d52ebfc542..cd6d69f30c 100644
--- a/packages/twenty-ui/src/input/IconButton/IconButton.tsx
+++ b/packages/twenty-ui/src/input/IconButton/IconButton.tsx
@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
-import React, { useContext } from 'react';
+import React from 'react';
 
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './IconButton.module.scss';
 
@@ -40,7 +40,7 @@ export const IconButton = ({
   onClick,
   to,
 }: IconButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <button
diff --git a/packages/twenty-ui/src/input/InsideButton/InsideButton.tsx b/packages/twenty-ui/src/input/InsideButton/InsideButton.tsx
index 3e34c86743..b91f0cf20b 100644
--- a/packages/twenty-ui/src/input/InsideButton/InsideButton.tsx
+++ b/packages/twenty-ui/src/input/InsideButton/InsideButton.tsx
@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
-import React, { useContext } from 'react';
+import React from 'react';
 
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './InsideButton.module.scss';
 
@@ -21,7 +21,7 @@ export const InsideButton = ({
   onClick,
   disabled = false,
 }: InsideButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <button
diff --git a/packages/twenty-ui/src/input/LightButton/LightButton.tsx b/packages/twenty-ui/src/input/LightButton/LightButton.tsx
index b087312a86..b943c7a90f 100644
--- a/packages/twenty-ui/src/input/LightButton/LightButton.tsx
+++ b/packages/twenty-ui/src/input/LightButton/LightButton.tsx
@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
-import { type MouseEvent, useContext } from 'react';
+import { type MouseEvent } from 'react';
 
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './LightButton.module.scss';
 
@@ -31,7 +31,7 @@ export const LightButton = ({
   type = 'button',
   onClick,
 }: LightButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <button
diff --git a/packages/twenty-ui/src/input/LightIconButton/LightIconButton.tsx b/packages/twenty-ui/src/input/LightIconButton/LightIconButton.tsx
index 72895b9842..9d5586c315 100644
--- a/packages/twenty-ui/src/input/LightIconButton/LightIconButton.tsx
+++ b/packages/twenty-ui/src/input/LightIconButton/LightIconButton.tsx
@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
-import { type ComponentProps, type MouseEvent, useContext } from 'react';
+import { type ComponentProps, type MouseEvent } from 'react';
 
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './LightIconButton.module.scss';
 
@@ -35,7 +35,7 @@ export const LightIconButton = ({
   onClick,
   title,
 }: LightIconButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <button
diff --git a/packages/twenty-ui/src/input/MainButton/MainButton.tsx b/packages/twenty-ui/src/input/MainButton/MainButton.tsx
index 95deb913a0..55d439e375 100644
--- a/packages/twenty-ui/src/input/MainButton/MainButton.tsx
+++ b/packages/twenty-ui/src/input/MainButton/MainButton.tsx
@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
-import React, { type FunctionComponent, useContext } from 'react';
+import React, { type FunctionComponent } from 'react';
 
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './MainButton.module.scss';
 
@@ -31,7 +31,7 @@ export const MainButton = ({
   disabled,
   className,
 }: MainButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   // Replicates the legacy ternary exactly: fullWidth wins over width, and a
   // falsy width (0) falls back to the 'auto' default.
diff --git a/packages/twenty-ui/src/input/RoundedIconButton/RoundedIconButton.tsx b/packages/twenty-ui/src/input/RoundedIconButton/RoundedIconButton.tsx
index 7dbec2e706..ac9cd1d118 100644
--- a/packages/twenty-ui/src/input/RoundedIconButton/RoundedIconButton.tsx
+++ b/packages/twenty-ui/src/input/RoundedIconButton/RoundedIconButton.tsx
@@ -1,8 +1,8 @@
 import { clsx } from 'clsx';
-import React, { useContext } from 'react';
+import React from 'react';
 
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './RoundedIconButton.module.scss';
 
@@ -21,7 +21,7 @@ export const RoundedIconButton = ({
   size = 'small',
   'aria-label': ariaLabel,
 }: RoundedIconButtonProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <button
diff --git a/packages/twenty-ui/src/input/SearchInput/SearchInput.tsx b/packages/twenty-ui/src/input/SearchInput/SearchInput.tsx
index 098ca227c2..e19cd41693 100644
--- a/packages/twenty-ui/src/input/SearchInput/SearchInput.tsx
+++ b/packages/twenty-ui/src/input/SearchInput/SearchInput.tsx
@@ -1,10 +1,10 @@
 import { Input } from '@base-ui/react/input';
 import { clsx } from 'clsx';
-import { type ReactNode, useContext, useId, useState } from 'react';
+import { type ReactNode, useId, useState } from 'react';
 
 import { IconFilter, IconSearch } from '@ui/icon';
 import { IconButton } from '@ui/input/IconButton/IconButton';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './SearchInput.module.scss';
 
@@ -35,7 +35,7 @@ export const SearchInput = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
 }: SearchInputProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const [isFocused, setIsFocused] = useState(false);
   const generatedId = useId();
   const inputId = id ?? generatedId;
diff --git a/packages/twenty-ui/src/input/TabButton/parts/TabContent.tsx b/packages/twenty-ui/src/input/TabButton/parts/TabContent.tsx
index 758c2a8cb4..5bf925eb0e 100644
--- a/packages/twenty-ui/src/input/TabButton/parts/TabContent.tsx
+++ b/packages/twenty-ui/src/input/TabButton/parts/TabContent.tsx
@@ -1,8 +1,8 @@
 import { Pill } from '@ui/data-display/Pill/Pill';
 import { Avatar } from '@ui/data-display';
 import { type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
-import { type ReactElement, useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
+import { type ReactElement } from 'react';
 import { StyledTabHover } from '@ui/input/TabButton/parts/StyledTabBase';
 
 export type TabContentProps = {
@@ -29,7 +29,7 @@ export const TabContent = ({
   contentSize = 'sm',
   className,
 }: TabContentProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   const iconColor = active
     ? theme.font.color.primary
diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx
index 5d1a18455c..4d586b784d 100644
--- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx
+++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx
@@ -1,9 +1,8 @@
 import { VisibilityHidden } from '@ui/accessibility';
 import { IconChevronDown } from '@ui/icon';
 import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow';
-import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { themeCssVariables, useTheme } from '@ui/theme-constants';
 import { clsx } from 'clsx';
-import { useContext } from 'react';
 
 import styles from './JsonArrow.module.scss';
 
@@ -16,7 +15,7 @@ export const JsonArrow = ({
   onClick: () => void;
   variant?: 'blue' | 'red';
 }) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const { arrowButtonCollapsedLabel, arrowButtonExpandedLabel } =
     useJsonTreeContextOrThrow();
 
diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx
index 5dbd95f633..d5e1bf056c 100644
--- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx
+++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx
@@ -1,8 +1,7 @@
 import { type IconComponent } from '@ui/icon';
 import { type JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { clsx } from 'clsx';
-import { useContext } from 'react';
 
 import styles from './JsonNodeLabel.module.scss';
 
@@ -15,7 +14,7 @@ export const JsonNodeLabel = ({
   Icon: IconComponent;
   highlighting?: JsonNodeHighlighting | undefined;
 }) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <span
diff --git a/packages/twenty-ui/src/layout/AnimatedCircleLoading/AnimatedCircleLoading.tsx b/packages/twenty-ui/src/layout/AnimatedCircleLoading/AnimatedCircleLoading.tsx
index 9bb35c6eef..ef8173f6bf 100644
--- a/packages/twenty-ui/src/layout/AnimatedCircleLoading/AnimatedCircleLoading.tsx
+++ b/packages/twenty-ui/src/layout/AnimatedCircleLoading/AnimatedCircleLoading.tsx
@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion';
-import React, { useContext } from 'react';
+import React from 'react';
 
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './AnimatedCircleLoading.module.scss';
 
@@ -10,7 +10,7 @@ export const AnimatedCircleLoading = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <motion.div
diff --git a/packages/twenty-ui/src/layout/AnimatedEaseIn/AnimatedEaseIn.tsx b/packages/twenty-ui/src/layout/AnimatedEaseIn/AnimatedEaseIn.tsx
index 2548b0aff0..490a44dc30 100644
--- a/packages/twenty-ui/src/layout/AnimatedEaseIn/AnimatedEaseIn.tsx
+++ b/packages/twenty-ui/src/layout/AnimatedEaseIn/AnimatedEaseIn.tsx
@@ -1,7 +1,6 @@
 import { motion } from 'framer-motion';
-import { useContext } from 'react';
 import { type AnimationDuration } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type AnimatedEaseInProps = Omit<
   React.ComponentProps<typeof motion.div>,
@@ -14,7 +13,7 @@ export const AnimatedEaseIn = ({
   children,
   duration = 'normal',
 }: AnimatedEaseInProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   const initial = { opacity: 0 };
   const animate = { opacity: 1 };
diff --git a/packages/twenty-ui/src/layout/AnimatedEaseInOut/AnimatedEaseInOut.tsx b/packages/twenty-ui/src/layout/AnimatedEaseInOut/AnimatedEaseInOut.tsx
index 9754b0d1d2..fd2ffdd636 100644
--- a/packages/twenty-ui/src/layout/AnimatedEaseInOut/AnimatedEaseInOut.tsx
+++ b/packages/twenty-ui/src/layout/AnimatedEaseInOut/AnimatedEaseInOut.tsx
@@ -1,7 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import { useContext } from 'react';
 import { type AnimationDuration } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type AnimatedEaseInOutProps = {
   isOpen: boolean;
@@ -20,7 +19,7 @@ export const AnimatedEaseInOut = ({
   duration = 'normal',
   initial = true,
 }: AnimatedEaseInOutProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <AnimatePresence initial={initial}>
diff --git a/packages/twenty-ui/src/layout/AnimatedExpandableContainer/AnimatedExpandableContainer.tsx b/packages/twenty-ui/src/layout/AnimatedExpandableContainer/AnimatedExpandableContainer.tsx
index 9d6291bee7..57b13a528a 100644
--- a/packages/twenty-ui/src/layout/AnimatedExpandableContainer/AnimatedExpandableContainer.tsx
+++ b/packages/twenty-ui/src/layout/AnimatedExpandableContainer/AnimatedExpandableContainer.tsx
@@ -4,9 +4,9 @@ import { type AnimationDurations } from '@ui/layout/AnimatedExpandableContainer/
 import { type AnimationMode } from '@ui/layout/AnimatedExpandableContainer/types/AnimationMode';
 import { type AnimationSize } from '@ui/layout/AnimatedExpandableContainer/types/AnimationSize';
 import { getExpandableAnimationConfig } from '@ui/layout/AnimatedExpandableContainer/utils/getExpandableAnimationConfig';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { AnimatePresence, motion } from 'framer-motion';
-import { type ReactNode, useContext, useRef, useState } from 'react';
+import { type ReactNode, useRef, useState } from 'react';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 
 type AnimatedExpandableContainerProps = {
@@ -28,7 +28,7 @@ export const AnimatedExpandableContainer = ({
   containAnimation = true,
   initial = true,
 }: AnimatedExpandableContainerProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const contentRef = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState<AnimationSize>(0);
 
diff --git a/packages/twenty-ui/src/layout/AnimatedFadeOut/AnimatedFadeOut.tsx b/packages/twenty-ui/src/layout/AnimatedFadeOut/AnimatedFadeOut.tsx
index d3e3ffb35d..44d623735d 100644
--- a/packages/twenty-ui/src/layout/AnimatedFadeOut/AnimatedFadeOut.tsx
+++ b/packages/twenty-ui/src/layout/AnimatedFadeOut/AnimatedFadeOut.tsx
@@ -1,7 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import { useContext } from 'react';
 import { type AnimationDuration } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type AnimatedFadeOutProps = {
   isOpen: boolean;
@@ -18,7 +17,7 @@ export const AnimatedFadeOut = ({
   marginBottom,
   marginTop,
 }: AnimatedFadeOutProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <AnimatePresence>
diff --git a/packages/twenty-ui/src/layout/AnimatedIconCrossfade/AnimatedIconCrossfade.tsx b/packages/twenty-ui/src/layout/AnimatedIconCrossfade/AnimatedIconCrossfade.tsx
index db283578ab..bf0fa38706 100644
--- a/packages/twenty-ui/src/layout/AnimatedIconCrossfade/AnimatedIconCrossfade.tsx
+++ b/packages/twenty-ui/src/layout/AnimatedIconCrossfade/AnimatedIconCrossfade.tsx
@@ -1,8 +1,8 @@
 import { motion } from 'framer-motion';
-import React, { useContext } from 'react';
+import React from 'react';
 
 import { type IconComponent } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './AnimatedIconCrossfade.module.scss';
 
@@ -19,7 +19,7 @@ export const AnimatedIconCrossfade = ({
   InactiveIcon,
   size,
 }: AnimatedIconCrossfadeProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   const iconSize = size ?? theme.icon.size.sm;
 
diff --git a/packages/twenty-ui/src/layout/AnimatedRotate/AnimatedRotate.tsx b/packages/twenty-ui/src/layout/AnimatedRotate/AnimatedRotate.tsx
index 0b872bdd12..e2ce2a700c 100644
--- a/packages/twenty-ui/src/layout/AnimatedRotate/AnimatedRotate.tsx
+++ b/packages/twenty-ui/src/layout/AnimatedRotate/AnimatedRotate.tsx
@@ -1,7 +1,7 @@
 import { type HTMLMotionProps, motion } from 'framer-motion';
 import { type AnimationDuration } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
-import { type JSX, useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
+import { type JSX } from 'react';
 
 import styles from './AnimatedRotate.module.scss';
 
@@ -18,7 +18,7 @@ export const AnimatedRotate = ({
   duration = 'fast',
   animateOnHover,
 }: AnimatedRotateProps): JSX.Element => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   const initial = { opacity: 0, rotate: -90 };
   const animate = { opacity: 1, rotate: 0 };
diff --git a/packages/twenty-ui/src/layout/AnimatedTranslation/AnimatedTranslation.tsx b/packages/twenty-ui/src/layout/AnimatedTranslation/AnimatedTranslation.tsx
index 03e226f643..934294f0d6 100644
--- a/packages/twenty-ui/src/layout/AnimatedTranslation/AnimatedTranslation.tsx
+++ b/packages/twenty-ui/src/layout/AnimatedTranslation/AnimatedTranslation.tsx
@@ -1,13 +1,12 @@
 import { motion } from 'framer-motion';
-import { useContext } from 'react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 type AnimatedTranslationProps = {
   children: React.ReactNode;
 };
 
 export const AnimatedTranslation = ({ children }: AnimatedTranslationProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <motion.div
diff --git a/packages/twenty-ui/src/navigation/GithubVersionLink/GithubVersionLink.tsx b/packages/twenty-ui/src/navigation/GithubVersionLink/GithubVersionLink.tsx
index 3eb654e875..f9133bb1e8 100644
--- a/packages/twenty-ui/src/navigation/GithubVersionLink/GithubVersionLink.tsx
+++ b/packages/twenty-ui/src/navigation/GithubVersionLink/GithubVersionLink.tsx
@@ -1,15 +1,14 @@
 import { IconBrandGithub } from '@ui/icon';
 import { ClickToActionLink } from '@ui/navigation/ClickToActionLink/ClickToActionLink';
 import { GITHUB_LINK } from '@ui/navigation/Link/constants/GithubLink';
-import { ThemeContext } from '@ui/theme-constants';
-import { useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
 
 interface GithubVersionLinkProps {
   version: string;
 }
 
 export const GithubVersionLink = ({ version }: GithubVersionLinkProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <ClickToActionLink href={GITHUB_LINK} target="_blank" rel="noreferrer">
diff --git a/packages/twenty-ui/src/navigation/MenuItem/MenuItem.tsx b/packages/twenty-ui/src/navigation/MenuItem/MenuItem.tsx
index 2e39ce760f..130316b123 100644
--- a/packages/twenty-ui/src/navigation/MenuItem/MenuItem.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItem/MenuItem.tsx
@@ -6,12 +6,11 @@ import {
   type MouseEvent,
   type ReactElement,
   type ReactNode,
-  useContext,
 } from 'react';
 
 import { MenuItemHotKeys } from '@ui/navigation/MenuItemHotKeys/MenuItemHotKeys';
 import { type ThemeColor } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { clsx } from 'clsx';
 import { type Nullable } from '@ui/utilities/types/Nullable';
 import { MenuItemLeftContent } from '@ui/navigation/MenuItem/parts/MenuItemLeftContent';
@@ -98,7 +97,7 @@ export const MenuItem = ({
   hotKeys,
   isSubMenuOpened = false,
 }: MenuItemProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
   const handleMenuItemClick = (event: MouseEvent<HTMLDivElement>) => {
diff --git a/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemIcon.tsx b/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemIcon.tsx
index 71a20d92e6..8bd453b67b 100644
--- a/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemIcon.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemIcon.tsx
@@ -1,8 +1,7 @@
 import { TintedIconTile } from '@ui/data-display';
 import { type IconComponent } from '@ui/icon';
 import { type ThemeColor } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
-import { useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 import { MenuItemIconBoxContainer } from '@ui/navigation/MenuItem/parts/MenuItemIconBoxContainer';
 
@@ -19,7 +18,7 @@ export const MenuItemIcon = ({
   withContainer = false,
   withContainerBackground = true,
 }: MenuItemIconProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   if (!Icon) {
     return null;
diff --git a/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemIconWithGripSwap.tsx b/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemIconWithGripSwap.tsx
index 20e16c8b9a..86258e80da 100644
--- a/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemIconWithGripSwap.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemIconWithGripSwap.tsx
@@ -1,9 +1,8 @@
 import { TintedIconTile } from '@ui/data-display';
 import { type IconComponent, IconGripVertical } from '@ui/icon';
 import { type ThemeColor } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { clsx } from 'clsx';
-import { useContext } from 'react';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 import { MenuItemIconBoxContainer } from '@ui/navigation/MenuItem/parts/MenuItemIconBoxContainer';
 
@@ -22,7 +21,7 @@ export const MenuItemIconWithGripSwap = ({
   withIconContainer = false,
   gripIconColor,
 }: MenuItemIconWithGripSwapProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   if (!LeftIcon) {
     return null;
diff --git a/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemLeftContent.tsx b/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemLeftContent.tsx
index 16c0d4a8bb..12cb51cc6a 100644
--- a/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemLeftContent.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItem/parts/MenuItemLeftContent.tsx
@@ -1,10 +1,10 @@
 import { isNonEmptyString, isString } from '@sniptt/guards';
-import { type ReactNode, useContext } from 'react';
+import { type ReactNode } from 'react';
 
 import { type IconComponent, IconGripVertical } from '@ui/icon';
 import { OverflowingTextWithTooltip } from '@ui/surfaces';
 import { type ThemeColor } from '@ui/theme';
-import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { themeCssVariables, useTheme } from '@ui/theme-constants';
 import { type MenuItemDraggableGripMode } from '@ui/navigation/MenuItem/types/MenuItemDraggableGripMode';
 import { MenuItemIcon } from '@ui/navigation/MenuItem/parts/MenuItemIcon';
 import { MenuItemIconBoxContainer } from '@ui/navigation/MenuItem/parts/MenuItemIconBoxContainer';
@@ -46,7 +46,7 @@ export const MenuItemLeftContent = ({
   gripMode = 'never',
   disabled = false,
 }: MenuItemLeftContentProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   const gripIconColor = withIconContainer
     ? themeCssVariables.font.color.tertiary
diff --git a/packages/twenty-ui/src/navigation/MenuItemNavigate/MenuItemNavigate.tsx b/packages/twenty-ui/src/navigation/MenuItemNavigate/MenuItemNavigate.tsx
index 34eda6e56f..87e77aa0db 100644
--- a/packages/twenty-ui/src/navigation/MenuItemNavigate/MenuItemNavigate.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItemNavigate/MenuItemNavigate.tsx
@@ -1,6 +1,5 @@
 import { IconChevronRight, type IconComponent } from '@ui/icon';
-import { ThemeContext } from '@ui/theme-constants';
-import { useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
 import { MenuItemLeftContent } from '@ui/navigation/MenuItem/parts/MenuItemLeftContent';
 import {
   StyledMenuItemBase,
@@ -22,7 +21,7 @@ export const MenuItemNavigate = ({
   className,
   onClick,
 }: MenuItemNavigateProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <StyledMenuItemBase onClick={onClick} className={className}>
diff --git a/packages/twenty-ui/src/navigation/MenuItemSelect/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/MenuItemSelect/MenuItemSelect.tsx
index b0501412e6..7053628780 100644
--- a/packages/twenty-ui/src/navigation/MenuItemSelect/MenuItemSelect.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItemSelect/MenuItemSelect.tsx
@@ -2,12 +2,11 @@ import { isString } from '@sniptt/guards';
 import { IconCheck, IconChevronRight, type IconComponent } from '@ui/icon';
 import { OverflowingTextWithTooltip } from '@ui/surfaces';
 import { type ThemeColor } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { clsx } from 'clsx';
 import {
   type ComponentPropsWithoutRef,
   forwardRef,
-  useContext,
   type ReactNode,
 } from 'react';
 import { MenuItemLeftContent } from '@ui/navigation/MenuItem/parts/MenuItemLeftContent';
@@ -77,7 +76,7 @@ export const MenuItemSelect = ({
   contextualText,
   contextualTextPosition = 'left',
 }: MenuItemSelectProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <StyledMenuItemSelect
diff --git a/packages/twenty-ui/src/navigation/MenuItemSelectAvatar/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/MenuItemSelectAvatar/MenuItemSelectAvatar.tsx
index ff2e9efa02..43fd7b6fd1 100644
--- a/packages/twenty-ui/src/navigation/MenuItemSelectAvatar/MenuItemSelectAvatar.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItemSelectAvatar/MenuItemSelectAvatar.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useContext } from 'react';
+import { type ReactNode } from 'react';
 
 import {
   StyledMenuItemIconCheck,
@@ -8,7 +8,7 @@ import {
 } from '@ui/navigation/MenuItem/parts/StyledMenuItemBase';
 
 import { OverflowingTextWithTooltip } from '@ui/surfaces';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 import { StyledMenuItemSelect } from '@ui/navigation/MenuItemSelect/MenuItemSelect';
 
 import styles from './MenuItemSelectAvatar.module.scss';
@@ -36,7 +36,7 @@ export const MenuItemSelectAvatar = ({
   focused,
   testId,
 }: MenuItemSelectAvatarProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <StyledMenuItemSelect
diff --git a/packages/twenty-ui/src/navigation/MenuItemSelectColor/MenuItemSelectColor.tsx b/packages/twenty-ui/src/navigation/MenuItemSelectColor/MenuItemSelectColor.tsx
index 0a9cc2f954..b93eb8dd1e 100644
--- a/packages/twenty-ui/src/navigation/MenuItemSelectColor/MenuItemSelectColor.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItemSelectColor/MenuItemSelectColor.tsx
@@ -6,8 +6,7 @@ import {
 
 import { ColorSample, type ColorSampleVariant } from '@ui/data-display';
 import { type ThemeColor } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
-import { useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
 import {
   DEFAULT_COLOR_LABELS,
   type ColorLabels,
@@ -35,7 +34,7 @@ export const MenuItemSelectColor = ({
   variant = 'default',
   colorLabels = DEFAULT_COLOR_LABELS,
 }: MenuItemSelectColorProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <StyledMenuItemSelect
diff --git a/packages/twenty-ui/src/navigation/MenuItemSelectTag/MenuItemSelectTag.tsx b/packages/twenty-ui/src/navigation/MenuItemSelectTag/MenuItemSelectTag.tsx
index b72e475c59..deab86ae53 100644
--- a/packages/twenty-ui/src/navigation/MenuItemSelectTag/MenuItemSelectTag.tsx
+++ b/packages/twenty-ui/src/navigation/MenuItemSelectTag/MenuItemSelectTag.tsx
@@ -6,8 +6,7 @@ import {
 import { Tag } from '@ui/data-display';
 import { type IconComponent } from '@ui/icon';
 import { type ThemeColor } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
-import { useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
 import { StyledMenuItemSelect } from '@ui/navigation/MenuItemSelect/MenuItemSelect';
 
 type MenuItemSelectTagProps = {
@@ -33,7 +32,7 @@ export const MenuItemSelectTag = ({
   variant = 'solid',
   LeftIcon,
 }: MenuItemSelectTagProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <StyledMenuItemSelect
diff --git a/packages/twenty-ui/src/navigation/MenuPicker/MenuPicker.tsx b/packages/twenty-ui/src/navigation/MenuPicker/MenuPicker.tsx
index d51df0b810..b68591c7e7 100644
--- a/packages/twenty-ui/src/navigation/MenuPicker/MenuPicker.tsx
+++ b/packages/twenty-ui/src/navigation/MenuPicker/MenuPicker.tsx
@@ -1,11 +1,10 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { clsx } from 'clsx';
-import { useContext } from 'react';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 
 import { type IconComponent } from '@ui/icon';
 import { AppTooltip, TooltipDelay, TooltipPosition } from '@ui/surfaces';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
 
 import styles from './MenuPicker.module.scss';
 
@@ -38,7 +37,7 @@ export const MenuPicker = ({
   tooltipDelay = TooltipDelay.noDelay,
   tooltipOffset = 5,
 }: MenuPickerProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <>
diff --git a/packages/twenty-ui/src/navigation/NavigationBarItem/NavigationBarItem.tsx b/packages/twenty-ui/src/navigation/NavigationBarItem/NavigationBarItem.tsx
index 047d9ba214..e8de973219 100644
--- a/packages/twenty-ui/src/navigation/NavigationBarItem/NavigationBarItem.tsx
+++ b/packages/twenty-ui/src/navigation/NavigationBarItem/NavigationBarItem.tsx
@@ -1,7 +1,5 @@
-import { useContext } from 'react';
-
 import { type IconComponent } from '@ui/icon/types/IconComponent';
-import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { themeCssVariables, useTheme } from '@ui/theme-constants';
 
 import styles from './NavigationBarItem.module.scss';
 
@@ -18,7 +16,7 @@ export const NavigationBarItem = ({
   onClick,
   ariaLabel,
 }: NavigationBarItemProps) => {
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
 
   return (
     <button
diff --git a/packages/twenty-ui/src/surfaces/AppTooltip/AppTooltip.tsx b/packages/twenty-ui/src/surfaces/AppTooltip/AppTooltip.tsx
index 492892148b..1946355374 100644
--- a/packages/twenty-ui/src/surfaces/AppTooltip/AppTooltip.tsx
+++ b/packages/twenty-ui/src/surfaces/AppTooltip/AppTooltip.tsx
@@ -2,6 +2,7 @@ import { Tooltip } from '@base-ui/react/tooltip';
 import { isNonEmptyString } from '@sniptt/guards';
 import { clsx } from 'clsx';
 import { useEffect, useRef, useState } from 'react';
+import { useThemeContainer } from '@ui/theme-constants';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 
 import styles from './AppTooltip.module.scss';
@@ -88,6 +89,8 @@ export const AppTooltip = ({
     }
   };
 
+  const themeContainer = useThemeContainer();
+
   const [show, setShow] = useState(false);
   const [anchorElements, setAnchorElements] = useState<Element[]>([]);
   const [activeAnchor, setActiveAnchor] = useState<Element | null>(null);
@@ -283,7 +286,7 @@ export const AppTooltip = ({
         }
       }}
     >
-      <Tooltip.Portal>
+      <Tooltip.Portal container={themeContainer ?? undefined}>
         <Tooltip.Positioner
           anchor={activeAnchor}
           side={side}
diff --git a/packages/twenty-ui/src/surfaces/Modal/Modal.tsx b/packages/twenty-ui/src/surfaces/Modal/Modal.tsx
index 351a86542f..617c5c5e04 100644
--- a/packages/twenty-ui/src/surfaces/Modal/Modal.tsx
+++ b/packages/twenty-ui/src/surfaces/Modal/Modal.tsx
@@ -1,6 +1,7 @@
 import { Dialog } from '@base-ui/react/dialog';
 import { clsx } from 'clsx';
 import { useRef } from 'react';
+import { useThemeContainer } from '@ui/theme-constants';
 import { isDefined } from '@ui/utilities/utils/isDefined';
 
 import { type ModalOverlay } from '@ui/surfaces/Modal/types/ModalOverlay';
@@ -63,6 +64,11 @@ export const Modal = ({
   const internalRef = useRef<HTMLDivElement>(null);
   const resolvedRef = externalRef ?? internalRef;
 
+  const themeContainer = useThemeContainer();
+  const resolvedContainer = isDefined(container)
+    ? container
+    : (themeContainer ?? undefined);
+
   const handleBackdropMouseDown = (e: React.MouseEvent) => {
     e.stopPropagation();
     onBackdropMouseDown?.(e);
@@ -73,7 +79,7 @@ export const Modal = ({
   // Modal, open/close is fully controlled by the isOpen prop
   return (
     <Dialog.Root open={isOpen} modal={false} disablePointerDismissal>
-      <Dialog.Portal container={isDefined(container) ? container : undefined}>
+      <Dialog.Portal container={resolvedContainer}>
         <ModalBackdrop
           data-testid={backdropTestId}
           data-click-outside-id={backdropClickOutsideId}
diff --git a/packages/twenty-ui/src/theme-constants/ThemeProvider.tsx b/packages/twenty-ui/src/theme-constants/ThemeProvider.tsx
index 3bfa3d79d7..6ee85764a8 100644
--- a/packages/twenty-ui/src/theme-constants/ThemeProvider.tsx
+++ b/packages/twenty-ui/src/theme-constants/ThemeProvider.tsx
@@ -1,5 +1,9 @@
-import { createContext, useLayoutEffect, useState } from 'react';
+import { clsx } from 'clsx';
+import { createContext, useLayoutEffect, useRef, useState } from 'react';
 
+import { isDefined } from '@ui/utilities/utils/isDefined';
+
+import { ThemeScopeContext } from './ThemeScopeContext';
 import { themeCssVariables } from './themeCssVariables';
 
 type StringLeaves<T> = {
@@ -47,7 +51,9 @@ export type ThemeContextType = {
   colorScheme: 'light' | 'dark';
 };
 
-const computeThemeFromCss = (): ThemeType => {
+export type ThemeOverrides = Record<string, string | number>;
+
+const computeThemeFromCss = (sourceElement?: HTMLElement): ThemeType => {
   if (
     typeof document === 'undefined' ||
     typeof getComputedStyle !== 'function'
@@ -55,7 +61,9 @@ const computeThemeFromCss = (): ThemeType => {
     return themeCssVariables as unknown as ThemeType;
   }
 
-  const computedStyle = getComputedStyle(document.documentElement);
+  const computedStyle = getComputedStyle(
+    sourceElement ?? document.documentElement,
+  );
 
   const resolve = (obj: Record<string, unknown>): Record<string, unknown> => {
     const result: Record<string, unknown> = {};
@@ -99,23 +107,68 @@ export const ThemeContext = createContext<ThemeContextType>({
 export const ThemeProvider = ({
   children,
   colorScheme,
+  applyToRoot = true,
+  overrides,
+  className,
 }: {
   children: React.ReactNode;
   colorScheme: 'light' | 'dark';
+  applyToRoot?: boolean;
+  overrides?: ThemeOverrides;
+  className?: string;
 }) => {
+  const isScoped = isDefined(overrides) || !applyToRoot;
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
   const [theme, setTheme] = useState<ThemeType>(() => {
-    applyColorSchemeClass(colorScheme);
+    if (applyToRoot) {
+      applyColorSchemeClass(colorScheme);
+    }
     return computeThemeFromCss();
   });
+  const [scopeContainer, setScopeContainer] = useState<HTMLElement | null>(
+    null,
+  );
+
+  const overridesKey = isDefined(overrides) ? JSON.stringify(overrides) : '';
 
   useLayoutEffect(() => {
-    applyColorSchemeClass(colorScheme);
-    setTheme(computeThemeFromCss());
-  }, [colorScheme]);
+    if (applyToRoot) {
+      applyColorSchemeClass(colorScheme);
+    }
+
+    setTheme(
+      computeThemeFromCss(
+        isScoped ? (wrapperRef.current ?? undefined) : undefined,
+      ),
+    );
+    setScopeContainer(isScoped ? wrapperRef.current : null);
+  }, [colorScheme, applyToRoot, isScoped, overridesKey]);
+
+  const contextValue = { theme, colorScheme };
+
+  if (!isScoped) {
+    return (
+      <ThemeContext.Provider value={contextValue}>
+        {children}
+      </ThemeContext.Provider>
+    );
+  }
+
+  const overridesStyle = (overrides ?? {}) as React.CSSProperties;
 
   return (
-    <ThemeContext.Provider value={{ theme, colorScheme }}>
-      {children}
+    <ThemeContext.Provider value={contextValue}>
+      <ThemeScopeContext.Provider value={scopeContainer}>
+        <div
+          ref={wrapperRef}
+          className={clsx(applyToRoot ? undefined : colorScheme, className)}
+          style={{ display: 'contents', ...overridesStyle }}
+        >
+          {children}
+        </div>
+      </ThemeScopeContext.Provider>
     </ThemeContext.Provider>
   );
 };
diff --git a/packages/twenty-ui/src/theme-constants/ThemeScopeContext.ts b/packages/twenty-ui/src/theme-constants/ThemeScopeContext.ts
new file mode 100644
index 0000000000..ffd07d85c3
--- /dev/null
+++ b/packages/twenty-ui/src/theme-constants/ThemeScopeContext.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ThemeScopeContext = createContext<HTMLElement | null>(null);
diff --git a/packages/twenty-ui/src/theme-constants/index.ts b/packages/twenty-ui/src/theme-constants/index.ts
index 7e804abded..c2b3e77867 100644
--- a/packages/twenty-ui/src/theme-constants/index.ts
+++ b/packages/twenty-ui/src/theme-constants/index.ts
@@ -10,5 +10,13 @@
 export { MOBILE_VIEWPORT } from './constants';
 export { getNextThemeColor } from './getNextThemeColor';
 export { themeCssVariables } from './themeCssVariables';
-export type { ThemeType, ThemeContextType } from './ThemeProvider';
+export type {
+  ThemeType,
+  ThemeContextType,
+  ThemeOverrides,
+} from './ThemeProvider';
 export { ThemeContext, ThemeProvider } from './ThemeProvider';
+export { ThemeScopeContext } from './ThemeScopeContext';
+export { useTheme } from './useTheme';
+export { useThemeColorScheme } from './useThemeColorScheme';
+export { useThemeContainer } from './useThemeContainer';
diff --git a/packages/twenty-ui/src/theme-constants/useTheme.ts b/packages/twenty-ui/src/theme-constants/useTheme.ts
new file mode 100644
index 0000000000..d4897f15c5
--- /dev/null
+++ b/packages/twenty-ui/src/theme-constants/useTheme.ts
@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { ThemeContext, type ThemeType } from './ThemeProvider';
+
+export const useTheme = (): ThemeType => useContext(ThemeContext).theme;
diff --git a/packages/twenty-ui/src/theme-constants/useThemeColorScheme.ts b/packages/twenty-ui/src/theme-constants/useThemeColorScheme.ts
new file mode 100644
index 0000000000..0d47bff346
--- /dev/null
+++ b/packages/twenty-ui/src/theme-constants/useThemeColorScheme.ts
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { ThemeContext } from './ThemeProvider';
+
+export const useThemeColorScheme = (): 'light' | 'dark' =>
+  useContext(ThemeContext).colorScheme;
diff --git a/packages/twenty-ui/src/theme-constants/useThemeContainer.ts b/packages/twenty-ui/src/theme-constants/useThemeContainer.ts
new file mode 100644
index 0000000000..fd1cc8a882
--- /dev/null
+++ b/packages/twenty-ui/src/theme-constants/useThemeContainer.ts
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { ThemeScopeContext } from './ThemeScopeContext';
+
+export const useThemeContainer = (): HTMLElement | null =>
+  useContext(ThemeScopeContext);