diff --git a/apps/cs/src/app/index.tsx b/apps/cs/src/app/index.tsx
index d1d5e56e1..5a73f2fdd 100644
--- a/apps/cs/src/app/index.tsx
+++ b/apps/cs/src/app/index.tsx
@@ -1,10 +1,13 @@
 import "./styles/base.css";
 import "./styles/components.css";
 import { AppProvider } from "./providers";
+import { cookies } from "next/headers";
+
+const App = async ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  const theme = (await cookies()).get("site-theme-key");
 
-const App = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
-    <html lang="ko">
+    <html lang="ko" data-theme={theme?.value}>
       <body>
         <AppProvider>{children}</AppProvider>
       </body>
diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 0248a064f..c9a150f58 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -26,7 +26,7 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
     select: (data) => {
       if (data.siteSkn) {
         const siteSkin = data.siteSkn.toLowerCase();
-        setCookie("data-theme", siteSkin);
+        setCookie("site-theme-key", siteSkin);
         document.documentElement.setAttribute("data-theme", siteSkin);
       }
       return data;