diff --git a/apps/admin/app/layout.tsx b/apps/admin/app/layout.tsx
index 6ee8617..0d29837 100644
--- a/apps/admin/app/layout.tsx
+++ b/apps/admin/app/layout.tsx
@@ -4,7 +4,7 @@ import { currentUser } from '@/services/admin/user';
 import { getGlobalConfig } from '@/services/common/common';
 import '@shadcn/ui/globals.css';
 import { Toaster } from '@shadcn/ui/sonner';
-import { Metadata } from 'next';
+import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getLocale, getMessages } from 'next-intl/server';
 import { PublicEnvScript } from 'next-runtime-env';
@@ -45,15 +45,18 @@ export async function generateMetadata(): Promise<Metadata> {
       apple: site?.site_logo || '/apple-touch-icon.png',
     },
     manifest: '/site.webmanifest',
-    themeColor: [
-      { media: '(prefers-color-scheme: light)', color: '#FFFFFF' },
-      { media: '(prefers-color-scheme: dark)', color: '#000000' },
-    ],
   };
 
   return defaultMetadata;
 }
 
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#FFFFFF' },
+    { media: '(prefers-color-scheme: dark)', color: '#000000' },
+  ],
+};
+
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const locale = await getLocale();
   const messages = await getMessages();
diff --git a/apps/user/app/layout.tsx b/apps/user/app/layout.tsx
index caaa059..4e8fab5 100644
--- a/apps/user/app/layout.tsx
+++ b/apps/user/app/layout.tsx
@@ -8,7 +8,7 @@ import { NextIntlClientProvider } from 'next-intl';
 import { getLocale, getMessages } from 'next-intl/server';
 import { PublicEnvScript } from 'next-runtime-env';
 import { cookies } from 'next/headers';
-import { Metadata } from 'next/types';
+import { Metadata, Viewport } from 'next/types';
 import NextTopLoader from 'nextjs-toploader';
 import React from 'react';
 
@@ -45,14 +45,17 @@ export async function generateMetadata(): Promise<Metadata> {
       apple: site?.site_logo || '/apple-touch-icon.png',
     },
     manifest: '/site.webmanifest',
-    themeColor: [
-      { media: '(prefers-color-scheme: light)', color: '#FFFFFF' },
-      { media: '(prefers-color-scheme: dark)', color: '#000000' },
-    ],
   };
   return defaultMetadata;
 }
 
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#FFFFFF' },
+    { media: '(prefers-color-scheme: dark)', color: '#000000' },
+  ],
+};
+
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const locale = await getLocale();
   const messages = await getMessages();