diff --git a/apps/sample/src/pages/_app.tsx b/apps/sample/src/pages/_app.tsx
index 6fa2c0544..851f73dc6 100644
--- a/apps/sample/src/pages/_app.tsx
+++ b/apps/sample/src/pages/_app.tsx
@@ -11,8 +11,8 @@
  * https://nextjs.org/docs/advanced-features/custom-app
  */
 
-import { CustomThemeProvider } from "@/providers/theme";
 import { GlobalStyle } from "@/styles/globalstyles";
+import { StyleProvider } from "@ledgerhq/react-ui/index";
 import type { AppProps } from "next/app";
 import { Inter } from "next/font/google";
 
@@ -21,10 +21,10 @@ const inter = Inter({ subsets: ["latin"] });
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <main className={inter.className}>
-      <CustomThemeProvider>
+      <StyleProvider selectedPalette="dark">
         <GlobalStyle />
         <Component {...pageProps} />
-      </CustomThemeProvider>
+      </StyleProvider>
     </main>
   );
 }
diff --git a/apps/sample/src/providers/theme.tsx b/apps/sample/src/providers/theme.tsx
deleted file mode 100644
index 3b18345e5..000000000
--- a/apps/sample/src/providers/theme.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { useMemo } from "react";
-import { defaultTheme, palettes } from "@ledgerhq/react-ui/styles/index";
-import { DefaultTheme, ThemeProvider } from "styled-components";
-
-interface CustomThemeProviderProps {
-  children: React.ReactNode;
-}
-
-export const CustomThemeProvider: React.FC<CustomThemeProviderProps> = ({
-  children,
-}) => {
-  const selectedPalettes: "dark" | "light" = "dark";
-
-  const theme = useMemo<DefaultTheme>(
-    () => ({
-      ...defaultTheme,
-      theme: selectedPalettes,
-      colors: {
-        ...defaultTheme.colors,
-        ...palettes[selectedPalettes],
-      },
-    }),
-    []
-  );
-
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-};