diff --git a/frontend/src/components/RuntimePresentation.tsx b/frontend/src/components/RuntimePresentation.tsx
index 14d4d48..17d53cf 100644
--- a/frontend/src/components/RuntimePresentation.tsx
+++ b/frontend/src/components/RuntimePresentation.tsx
@@ -548,20 +548,34 @@ export default function RuntimePresentation({
 
   if (isLoading) {
     return (
-      <div className='flex items-center justify-center min-h-screen bg-gray-900'>
-        <div className='text-white text-xl'>Loading presentation...</div>
-      </div>
+      <>
+        <Head>
+          <meta name='theme-color' content='#000000' />
+          <meta name='color-scheme' content='dark' />
+          <style>{`html, body { background-color: #000000 !important; }`}</style>
+        </Head>
+        <div className='flex items-center justify-center min-h-screen bg-black'>
+          <div className='text-white text-xl'>Loading presentation...</div>
+        </div>
+      </>
     );
   }
 
   if (error) {
     return (
-      <div className='flex items-center justify-center min-h-screen bg-gray-900'>
-        <CardBox className='max-w-md'>
-          <h2 className='text-xl font-bold text-red-500 mb-4'>Error</h2>
-          <p className='text-gray-300'>{error}</p>
-        </CardBox>
-      </div>
+      <>
+        <Head>
+          <meta name='theme-color' content='#000000' />
+          <meta name='color-scheme' content='dark' />
+          <style>{`html, body { background-color: #000000 !important; }`}</style>
+        </Head>
+        <div className='flex items-center justify-center min-h-screen bg-black'>
+          <CardBox className='max-w-md'>
+            <h2 className='text-xl font-bold text-red-500 mb-4'>Error</h2>
+            <p className='text-gray-300'>{error}</p>
+          </CardBox>
+        </div>
+      </>
     );
   }
 
@@ -572,6 +586,13 @@ export default function RuntimePresentation({
 
       <Head>
         <title>{project?.name || 'Presentation'}</title>
+        {/* Dark theme for browser UI and background */}
+        <meta name='theme-color' content='#000000' />
+        <meta name='color-scheme' content='dark' />
+        <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
+        <style>{`
+          html, body { background-color: #000000 !important; }
+        `}</style>
         {faviconUrl && <link key='favicon' rel='icon' href={faviconUrl} />}
         {ogImageUrl && (
           <>
diff --git a/frontend/src/pages/p/[projectSlug]/index.tsx b/frontend/src/pages/p/[projectSlug]/index.tsx
index 860898b..437a55d 100644
--- a/frontend/src/pages/p/[projectSlug]/index.tsx
+++ b/frontend/src/pages/p/[projectSlug]/index.tsx
@@ -5,6 +5,7 @@
 
 import { ReactElement } from 'react';
 import { useRouter } from 'next/router';
+import Head from 'next/head';
 import RuntimePresentation from '../../../components/RuntimePresentation';
 import LayoutGuest from '../../../layouts/Guest';
 
@@ -14,9 +15,16 @@ export default function ProductionPresentation() {
 
   if (!projectSlug || typeof projectSlug !== 'string') {
     return (
-      <div className='flex items-center justify-center min-h-screen bg-gray-900'>
-        <div className='text-white'>Loading...</div>
-      </div>
+      <>
+        <Head>
+          <meta name='theme-color' content='#000000' />
+          <meta name='color-scheme' content='dark' />
+          <style>{`html, body { background-color: #000000 !important; }`}</style>
+        </Head>
+        <div className='flex items-center justify-center min-h-screen bg-black'>
+          <div className='text-white'>Loading...</div>
+        </div>
+      </>
     );
   }
 
diff --git a/frontend/src/pages/p/[projectSlug]/stage.tsx b/frontend/src/pages/p/[projectSlug]/stage.tsx
index 1a93e02..ff8cff3 100644
--- a/frontend/src/pages/p/[projectSlug]/stage.tsx
+++ b/frontend/src/pages/p/[projectSlug]/stage.tsx
@@ -5,6 +5,7 @@
 
 import { ReactElement } from 'react';
 import { useRouter } from 'next/router';
+import Head from 'next/head';
 import RuntimePresentation from '../../../components/RuntimePresentation';
 import LayoutAuthenticated from '../../../layouts/Authenticated';
 
@@ -14,9 +15,16 @@ export default function StagePresentation() {
 
   if (!projectSlug || typeof projectSlug !== 'string') {
     return (
-      <div className='flex items-center justify-center min-h-screen bg-gray-900'>
-        <div className='text-white'>Loading...</div>
-      </div>
+      <>
+        <Head>
+          <meta name='theme-color' content='#000000' />
+          <meta name='color-scheme' content='dark' />
+          <style>{`html, body { background-color: #000000 !important; }`}</style>
+        </Head>
+        <div className='flex items-center justify-center min-h-screen bg-black'>
+          <div className='text-white'>Loading...</div>
+        </div>
+      </>
     );
   }
 
