diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f097b00..79a2d39 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,13 @@
 import "@/styles/globals.css";
 import PlausibleProvider from "next-plausible";
-import { type Metadata } from "next";
+import { type Metadata, type Viewport } from "next";
 import { Geist } from "next/font/google";
 import { WebVitals } from "./components/web-vitals";
 
+export const viewport: Viewport = {
+  themeColor: [{ color: "oklch(0.97 0.0228 95.96)" }],
+};
+
 export const metadata: Metadata = {
   title:
     "InvestingFIRE Calculator | Plan Your Financial Independence & Early Retirement",