diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ff26ec9..4ffc162 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -28,12 +28,7 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
     width: 'device-width',
     initialScale: 1,
-    maximumScale: 1,
-    viewportFit: 'cover',
-    themeColor: [
-        { color: 'var(--background)', media: '(prefers-color-scheme: light)' },
-        { color: 'var(--background)', media: '(prefers-color-scheme: dark)' },
-    ],
+    viewportFit: 'cover'
 };
 
 export default async function RootLayout({
diff --git a/src/app/theme-provider.tsx b/src/app/theme-provider.tsx
index 71b4456..1e74f37 100644
--- a/src/app/theme-provider.tsx
+++ b/src/app/theme-provider.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { ThemeProvider as NextThemeProvider } from "next-themes";
+import { ThemeProvider as NextThemeProvider, useTheme } from "next-themes";
 import { ComponentProps, ReactNode, useEffect } from "react";
 
 const MetaThemeProvider = ({
@@ -7,29 +7,28 @@ const MetaThemeProvider = ({
 }: {
     children: ReactNode
 }) => {
+    const { resolvedTheme } = useTheme();
+
     useEffect(() => {
-        const updateThemeColor = () => {
-            const bgColor = window.getComputedStyle(document.body).backgroundColor;
-            const metaThemeColor = document.querySelector("meta[name=theme-color]");
-            metaThemeColor?.setAttribute("content", bgColor);
-        };
+        let themeColorMeta = document.querySelector(
+            'meta[name="theme-color"]',
+        ) as HTMLMetaElement;
 
-        const observer = new MutationObserver(updateThemeColor);
+        if (!themeColorMeta) {
+            themeColorMeta = document.createElement('meta');
+            themeColorMeta.name = 'theme-color';
+            document.head.appendChild(themeColorMeta);
+        }
 
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"]
-        });
-
-        return () => observer.disconnect();
-    }, []);
+        themeColorMeta.content = resolvedTheme === 'dark' ? '#171717' : '#fff';
+    }, [resolvedTheme]);
 
     return children;
 }
 
 const ThemeProvider = (props: ComponentProps<typeof NextThemeProvider>): ReactNode => {
     return (
-       <NextThemeProvider {...props} attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+        <NextThemeProvider {...props} attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
             <MetaThemeProvider>
                 {props.children}
             </MetaThemeProvider>