diff --git a/apps/client/index.html b/apps/client/index.html
index 7053111d3..478f5f38d 100644
--- a/apps/client/index.html
+++ b/apps/client/index.html
@@ -4,9 +4,10 @@
     <meta charset="utf-8" />
     <base href="/" />
     <link rel="icon" href="favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#101010" />
     <meta name="ontime" content="ontime - time keeping for live events" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <link rel="apple-touch-icon" href="ontime-logo.png" />
     <link rel="icon" type="image/png" href="ontime-logo.png" />
     <link rel="manifest" href="site.webmanifest" />
diff --git a/apps/client/public/manifest.json b/apps/client/public/manifest.json
index 44d458dd5..c364cc60a 100644
--- a/apps/client/public/manifest.json
+++ b/apps/client/public/manifest.json
@@ -15,5 +15,5 @@
   "start_url": "./",
   "display": "",
   "theme_color": "#121212",
-  "background_color": "#ffffff"
+  "background_color": "#101010"
 }
diff --git a/apps/client/public/site.webmanifest b/apps/client/public/site.webmanifest
index 88ea7c3b1..de7dd5e47 100644
--- a/apps/client/public/site.webmanifest
+++ b/apps/client/public/site.webmanifest
@@ -2,7 +2,7 @@
   "name": "",
   "short_name": "",
   "icons": [{ "src": "ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
-  "theme_color": "#2B5ABC",
+  "theme_color": "#121212",
   "background_color": "#101010",
   "display": "standalone"
 }
diff --git a/apps/client/src/index.scss b/apps/client/src/index.scss
index 3a719f98d..291ce9563 100644
--- a/apps/client/src/index.scss
+++ b/apps/client/src/index.scss
@@ -81,6 +81,7 @@ html,
   user-select: none;
   -webkit-app-region: drag;
   isolation: isolate;
+  background-color: $ui-black; // prevent the safari from showing white background
 }
 
 // reset button styles
diff --git a/apps/client/src/views/ViewLoader.tsx b/apps/client/src/views/ViewLoader.tsx
index 6743492d9..ed2a5c6ae 100644
--- a/apps/client/src/views/ViewLoader.tsx
+++ b/apps/client/src/views/ViewLoader.tsx
@@ -24,16 +24,18 @@ export default function ViewLoader({ children }: PropsWithChildren) {
   const colourFromParams = searchParams.get('keyColour') ?? '#101010';
 
   return (
-    <Suspense
-      fallback={
-        <>
-          <style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
-          <Loader />
-        </>
-      }
-    >
-      <OverrideStyles />
-      {children}
-    </Suspense>
+    <>
+      <style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
+      <Suspense
+        fallback={
+          <>
+            <Loader />
+          </>
+        }
+      >
+        <OverrideStyles />
+        {children}
+      </Suspense>
+    </>
   );
 }