diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index d47c3e2b..4a1501b0 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -8,10 +8,11 @@ defineProps<{
 </script>
 
 <template>
-  <div relative>
+  <div>
     <div
-      sticky top-0 z10
-      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]" backdrop-blur
+      sticky top-0 z10 backdrop-blur
+      pt="[env(safe-area-inset-top,0)]"
+      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>
diff --git a/composables/setups.ts b/composables/setups.ts
index 1adbd554..b2ec9122 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -44,5 +44,8 @@ export function setupPageHeader() {
     },
     titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
     link,
+    meta: [
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+    ],
   })
 }