diff --git a/apps/mail/app/layout.tsx b/apps/mail/app/layout.tsx
index 638bb6e33..1c18c6ffd 100644
--- a/apps/mail/app/layout.tsx
+++ b/apps/mail/app/layout.tsx
@@ -7,6 +7,7 @@ import { siteConfig } from '@/lib/site-config';
 import { Toast } from '@/components/ui/toast';
 import { Providers } from '@/lib/providers';
 import { headers } from 'next/headers';
+import type { Viewport } from 'next';
 import { cn } from '@/lib/utils';
 import './globals.css';
 
@@ -22,6 +23,13 @@ const geistMono = Geist_Mono({
 
 export const metadata = siteConfig;
 
+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,
   cookies,