diff --git a/index.html b/index.html
index 3bcf9b6..8ed07ee 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/icons/icon-192.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="theme-color" content="#16a34a" />
     <link rel="manifest" href="/site.webmanifest" />
     <title>منتایم</title>
diff --git a/src/api/business-registrations.ts b/src/api/business-registrations.ts
index 5ccc366..b763177 100644
--- a/src/api/business-registrations.ts
+++ b/src/api/business-registrations.ts
@@ -11,6 +11,12 @@ export function fetchMyBusinessRegistrations() {
 export function submitBusinessRegistration(payload: CreateBusinessRegistrationPayload) {
   return api<BusinessRegistrationRequest>('/business-registration-requests', {
     method: 'POST',
-    body: JSON.stringify(payload),
+    body: JSON.stringify({
+      title: payload.businessTitle,
+      categoryId: payload.categoryId,
+      description: payload.description,
+      address: payload.address,
+      contactPhone: payload.phone,
+    }),
   });
 }
diff --git a/src/api/business-service-requests.ts b/src/api/business-service-requests.ts
index d7f14c7..e68299c 100644
--- a/src/api/business-service-requests.ts
+++ b/src/api/business-service-requests.ts
@@ -11,6 +11,11 @@ export function fetchMyServiceRequests() {
 export function createServiceRequest(payload: CreateBusinessServiceRequestPayload) {
   return api<BusinessServiceRequest>('/business-service-requests', {
     method: 'POST',
-    body: JSON.stringify(payload),
+    body: JSON.stringify({
+      title: payload.title,
+      description: payload.description,
+      price: payload.price,
+      durationMinutes: payload.durationMinutes,
+    }),
   });
 }
diff --git a/src/components/shell/AppShell.vue b/src/components/shell/AppShell.vue
index 953a35a..019664e 100644
--- a/src/components/shell/AppShell.vue
+++ b/src/components/shell/AppShell.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="min-h-dvh w-full bg-surface-2 lg:bg-surface-3">
+  <div class="app-shell-root min-h-[100dvh] w-full bg-surface-2 lg:bg-surface-3">
     <div
-      class="mx-auto flex h-dvh max-h-dvh w-full min-w-0 max-w-full flex-col overflow-hidden bg-surface shadow-xl shadow-black/5 dark:shadow-black/30 max-w-app lg:max-w-none lg:shadow-none"
+      class="app-shell-frame mx-auto flex h-[100dvh] max-h-[100dvh] w-full min-w-0 max-w-full flex-col overflow-hidden bg-surface shadow-xl shadow-black/5 dark:shadow-black/30 max-w-app lg:max-w-none lg:shadow-none"
     >
       <slot />
     </div>
diff --git a/src/layouts/WebAppLayout.vue b/src/layouts/WebAppLayout.vue
index 49ae724..bbad6ba 100644
--- a/src/layouts/WebAppLayout.vue
+++ b/src/layouts/WebAppLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <AppShell>
     <header
-      class="z-20 flex shrink-0 items-center justify-between border-b border-border bg-surface/95 px-4 py-3 backdrop-blur"
+      class="z-20 flex shrink-0 items-center justify-between border-b border-border bg-surface/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-surface/80 pt-[max(0.75rem,env(safe-area-inset-top))]"
     >
       <div class="flex min-w-0 items-center gap-3">
         <AppLogo variant="horizontal" class="h-9 shrink-0" />
@@ -12,14 +12,14 @@
       </div>
     </header>
 
-    <main class="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-y-contain lg:px-0">
+    <main class="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-y-contain [-webkit-overflow-scrolling:touch] lg:px-0">
       <div class="mx-auto min-w-0 w-full max-w-full px-4 py-4 lg:max-w-7xl lg:px-8 lg:py-0">
         <slot />
       </div>
     </main>
 
     <nav
-      class="z-20 shrink-0 border-t border-border bg-surface/95 px-2 py-2 backdrop-blur"
+      class="z-20 shrink-0 border-t border-border bg-surface/95 px-2 py-2 backdrop-blur supports-[backdrop-filter]:bg-surface/80 pb-[max(0.5rem,env(safe-area-inset-bottom))]"
     >
       <div class="grid gap-1" :class="mobileNavGridClass">
         <template v-for="item in mobileNavItems" :key="`mobile-${item.key}`">
diff --git a/src/styles/main.css b/src/styles/main.css
index 3034507..3dcc13a 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -29,6 +29,28 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
     -webkit-overflow-scrolling: touch;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  @supports (-webkit-touch-callout: none) {
+    html,
+    body,
+    #app {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .app-shell-root {
+      min-height: 100%;
+      min-height: -webkit-fill-available;
+    }
+
+    .app-shell-frame {
+      height: 100%;
+      max-height: 100%;
+      min-height: -webkit-fill-available;
+    }
   }
 
   html::-webkit-scrollbar {
@@ -66,5 +88,7 @@
 
   #app {
     min-height: 100dvh;
+    height: 100%;
+    overflow: hidden;
   }
 }
diff --git a/src/utils/service-pricing.ts b/src/utils/service-pricing.ts
index e68e9fd..3f5d59a 100644
--- a/src/utils/service-pricing.ts
+++ b/src/utils/service-pricing.ts
@@ -177,8 +177,7 @@ export function totalPriceForServices(
   classes: BusinessServiceClass[],
   classId?: string | null,
 ): number | null {
-  if (usesServiceClasses(classesEnabled, classes)) {
-    if (!classId) return null;
+  if (classId && (classesEnabled || usesServiceClasses(classesEnabled, classes))) {
     let total = 0;
     for (const service of services) {
       const price = resolvedServicePrice(service, classId);
@@ -209,10 +208,10 @@ export function sumServicesPrice(
   classId?: string,
 ): number {
   if (perClass && classId) {
-    return (
-      totalPriceForServices(services, true, [], classId) ??
-      services.reduce((sum, service) => sum + Number.parseFloat(service.price), 0)
-    );
+    return services.reduce((sum, service) => {
+      const price = resolvedServicePrice(service, classId) ?? service.price;
+      return sum + Number.parseFloat(price);
+    }, 0);
   }
   return services.reduce((sum, service) => sum + Number.parseFloat(service.price), 0);
 }