diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 7d5e95222..7eba995e2 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ToastContainer } from "react-toastify";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, ColorModeScript  } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { Client } from "@langchain/langgraph-sdk";
 
@@ -9,13 +9,16 @@ import { ChatWindow } from "./components/ChatWindow";
 import { LangGraphClientContext } from "./hooks/useLangGraphClient";
 import { apiBaseUrl } from "./utils/constants";
 
+import theme from './theme'
+
 export default function Home() {
   const queryClient = new QueryClient();
   const langGraphClient = new Client({ apiUrl: apiBaseUrl });
   return (
     <LangGraphClientContext.Provider value={langGraphClient}>
       <QueryClientProvider client={queryClient}>
-        <ChakraProvider>
+      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        <ChakraProvider theme={theme}>
           <ToastContainer />
           <ChatWindow />
         </ChakraProvider>
diff --git a/frontend/app/theme.ts b/frontend/app/theme.ts
new file mode 100644
index 000000000..a896d6ec8
--- /dev/null
+++ b/frontend/app/theme.ts
@@ -0,0 +1,11 @@
+import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
+
+const config: ThemeConfig = {
+  initialColorMode: 'system',
+  useSystemColorMode: false,
+}
+
+// 3. extend the theme
+const theme = extendTheme({ config })
+
+export default theme
\ No newline at end of file