diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 0661f649..70bb534e 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/components/providers/ThemeProvider";
 import { QueryProvider } from "@/providers/QueryProvider";
 import { RegistryProvider } from "./registry-provider";
 import { Toaster } from "sonner";
@@ -39,14 +40,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="ko" className="h-full">
-      <body className={`${inter.variable} ${jetbrainsMono.variable} h-full bg-white font-sans antialiased`}>
+    <html lang="ko" className="h-full" suppressHydrationWarning>
+      <body className={`${inter.variable} ${jetbrainsMono.variable} h-full bg-background font-sans antialiased`}>
         <div id="root" className="h-full">
-          <QueryProvider>
-            <RegistryProvider>{children}</RegistryProvider>
-            <Toaster position="top-right" />
-            <ScreenModal />
-          </QueryProvider>
+          <ThemeProvider>
+            <QueryProvider>
+              <RegistryProvider>{children}</RegistryProvider>
+              <Toaster position="top-right" />
+              <ScreenModal />
+            </QueryProvider>
+          </ThemeProvider>
           {/* Portal 컨테이너 */}
           <div id="portal-root" data-radix-portal="true" />
         </div>
diff --git a/frontend/components/providers/ThemeProvider.tsx b/frontend/components/providers/ThemeProvider.tsx
new file mode 100644
index 00000000..a3a3fa3a
--- /dev/null
+++ b/frontend/components/providers/ThemeProvider.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="light"
+      enableSystem={false}
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
