diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx
index f784685..35181ee 100644
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@@ -75,11 +75,11 @@ function Header() {
 }
 
 export default function DefaultLayout({ children }: { children: React.ReactNode }) {
-  const { urlPathname } = usePageContext();
+  const { urlPathname, cookies } = usePageContext();
   const isHomePage = urlPathname === "/";
 
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultTheme={cookies.theme}>
       <div className="flex w-full flex-col font-sans">
         <Header />
 
diff --git a/app/providers/ThemeProvider.tsx b/app/providers/ThemeProvider.tsx
index 9d248f4..4dfc2ea 100644
--- a/app/providers/ThemeProvider.tsx
+++ b/app/providers/ThemeProvider.tsx
@@ -1,4 +1,5 @@
 import { ThemeContext, type Theme } from "@/contexts/ThemeContext";
+import { usePageContext } from "vike-react/usePageContext";
 import React, { useEffect, useState } from "react";
 
 type ThemeProviderProps = {
@@ -7,6 +8,7 @@ type ThemeProviderProps = {
 };
 
 export function ThemeProvider(props: ThemeProviderProps) {
+  const { cookies } = usePageContext();
   const [theme, setTheme] = useState<Theme>(props.defaultTheme || "light");
 
   useEffect(() => {
@@ -14,6 +16,10 @@ export function ThemeProvider(props: ThemeProviderProps) {
 
     rootElement.classList.toggle("dark", theme === "dark");
     rootElement.classList.toggle("light", theme === "light");
+
+    if (cookies.consent.customization) {
+      // TODO: update the theme in the cookies
+    }
   }, [theme]);
 
   return <ThemeContext.Provider value={{ theme, setTheme }}>{props.children}</ThemeContext.Provider>;