diff --git a/apps/landing/src/app/(public)/_components/header.tsx b/apps/landing/src/app/(public)/_components/header.tsx
index 8a7fb09..1627a86 100644
--- a/apps/landing/src/app/(public)/_components/header.tsx
+++ b/apps/landing/src/app/(public)/_components/header.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { SimpleThemeToggle } from './simple-theme-toggle';
+import { ThemeToggle } from './theme-toggle';
 
 export function Header() {
   const router = useRouter();
@@ -82,7 +82,7 @@ export function Header() {
         </nav>
 
         <div className="flex items-center gap-x-2">
-          <SimpleThemeToggle />
+          <ThemeToggle />
 
           <Button
             className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
diff --git a/apps/landing/src/app/(public)/_components/theme-provider.tsx b/apps/landing/src/app/(public)/_components/theme-provider.tsx
deleted file mode 100644
index 4db6c3c..0000000
--- a/apps/landing/src/app/(public)/_components/theme-provider.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-'use client';
-
-import type { ThemeProviderProps } from 'next-themes';
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}
diff --git a/apps/landing/src/app/(public)/_components/simple-theme-toggle.tsx b/apps/landing/src/app/(public)/_components/theme-toggle.tsx
similarity index 95%
rename from apps/landing/src/app/(public)/_components/simple-theme-toggle.tsx
rename to apps/landing/src/app/(public)/_components/theme-toggle.tsx
index a4c65ce..dc3796b 100644
--- a/apps/landing/src/app/(public)/_components/simple-theme-toggle.tsx
+++ b/apps/landing/src/app/(public)/_components/theme-toggle.tsx
@@ -4,7 +4,7 @@ import { Button, MoonIcon, SunIcon } from '@components';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 
-export function SimpleThemeToggle() {
+export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
diff --git a/apps/landing/src/app/_components/providers.tsx b/apps/landing/src/app/_components/providers.tsx
new file mode 100644
index 0000000..e2ef276
--- /dev/null
+++ b/apps/landing/src/app/_components/providers.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import type { ThemeProviderProps } from 'next-themes';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function Providers({ children }: ThemeProviderProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
+
+function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index 784a906..8b7bc55 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import '@/styles/globals.css';
 import { type Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import { ThemeProvider } from './(public)/_components/theme-provider';
+import { Providers } from './_components/providers';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -18,14 +18,14 @@ export default function RootLayout({
   return (
     <html lang="id" suppressHydrationWarning>
       <body className={inter.className}>
-        <ThemeProvider
+        <Providers
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
           {children}
-        </ThemeProvider>
+        </Providers>
       </body>
     </html>
   );
