app now responsive for mobile and small devices.

frontend/src/app/[locale]/(dashboard)/appointments/page.tsx

@@ -283,7 +283,7 @@ export default function AppointmentsPage() {
   return (
     <div className="space-y-6">
       <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
         <p className="text-sm text-text-secondary">{t('subtitle')}</p>
       </div>
 

frontend/src/app/[locale]/(dashboard)/billing/page.tsx

@@ -1,6 +1,7 @@
 // src/app/(dashboard)/billing/page.tsx
 'use client';
-import { useState } from 'react';
+
+import { useMemo, useState } from 'react';
 import { Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/shared/Button';
 import { Badge } from '@/components/ui/shared/Badge';
@@ -9,206 +10,287 @@ import { Table } from '@/components/ui/shared/Table';
 import { SearchBar } from '@/components/ui/shared/SearchBar';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { hasPermission } from '@/components/shared/permissions';
-// Mock data matching your design
-const invoices = [
-    { id: '#123456', patient: 'Ali Rahmani', date: '24/9/2026', service: 'Hygiene', amount: 300, paid: 0, status: 'unpaid' },
-    { id: '#123457', patient: 'Neda Akbari', date: '01/10/2026', service: 'Filling', amount: 700, paid: 400, status: 'overdue' },
-    { id: '#123458', patient: 'Nima Haghi', date: '09/12/2026', service: 'Extraction', amount: 450, paid: 450, status: 'paid' },
+
+type InvoiceStatus = 'paid' | 'unpaid' | 'overdue';
+
+type Invoice = {
+  id: string;
+  patient: string;
+  date: string;
+  service: string;
+  amount: number;
+  paid: number;
+  status: InvoiceStatus;
+};
+
+const invoices: Invoice[] = [
+  { id: '#123456', patient: 'Ali Rahmani', date: '24/9/2026', service: 'Hygiene', amount: 300, paid: 0, status: 'unpaid' },
+  { id: '#123457', patient: 'Neda Akbari', date: '01/10/2026', service: 'Filling', amount: 700, paid: 400, status: 'overdue' },
+  { id: '#123458', patient: 'Nima Haghi', date: '09/12/2026', service: 'Extraction', amount: 450, paid: 450, status: 'paid' },
 ];
+
 const statusColors = {
-    paid: 'success',
-    unpaid: 'warning',
-    overdue: 'danger',
+  paid: 'success',
+  unpaid: 'warning',
+  overdue: 'danger',
 } as const;
+
+const statusFilters = ['all', 'paid', 'unpaid', 'overdue'] as const;
+
 type StatCardColor = 'blue' | 'yellow' | 'green' | 'red';
 
 interface StatCardProps {
-    title: string;
-    count: number;
-    amount: number;
-    color: StatCardColor;
+  title: string;
+  count: number;
+  amount: number;
+  color: StatCardColor;
 }
-export default function BillingPage() {
-    const { currentOrganization } = useAuth();
-    const [search, setSearch] = useState('');
-    const [statusFilter, setStatusFilter] = useState('all');
-    const canEditBilling = hasPermission(currentOrganization, 'TAB_BILLING_EDIT');
-    const stats = {
-        total: { count: 235, amount: 80900 },
-        unpaid: { count: 30, amount: 2800 },
-        paid: { count: 190, amount: 80900 },
-        overdue: { count: 235, amount: 80900 },
-    };
-    return (
-        <div className="space-y-6">
-            {/* Header */}
-            <div className="flex justify-between items-center">
-                <h1 className="text-2xl font-semibold text-text-primary">Billing</h1>
-                <Button
-                    variant="primary"
-                    disabled={!canEditBilling}
-                    title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
-                >
-                    New Invoice
-                </Button>
-            </div>
-            {/* Stats Cards - Matching your design */}
-            <div className="grid grid-cols-4 gap-4">
-                <StatCard
-                    title="Total Invoices"
-                    count={stats.total.count}
-                    amount={stats.total.amount}
-                    color="blue"
-                />
-                <StatCard
-                    title="Unpaid Invoices"
-                    count={stats.unpaid.count}
-                    amount={stats.unpaid.amount}
-                    color="yellow"
-                />
-                <StatCard
-                    title="Paid Invoices"
-                    count={stats.paid.count}
-                    amount={stats.paid.amount}
-                    color="green"
-                />
-                <StatCard
-                    title="Overdue Invoices"
-                    count={stats.overdue.count}
-                    amount={stats.overdue.amount}
-                    color="red"
-                />
-            </div>
-            {/* Filters */}
-            <SearchBar
-                value={search}
-                onChange={setSearch}
-                placeholder="Search patients..."
-                actions={(
-                    <>
-                        {['all', 'paid', 'unpaid', 'overdue'].map((status) => (
-                            <button
-                                key={status}
-                                onClick={() => setStatusFilter(status)}
-                                className={`px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium capitalize border ${statusFilter === status
-                                    ? 'bg-primary-soft text-primary border-primary/50'
-                                    : 'text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border'
-                                    }`}
-                            >
-                                {status}
-                            </button>
-                        ))}
-                    </>
-                )}
-            />
-            {/* Invoices Table - Matching your design */}
-            <Table
-                headers={
-                    <tr>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                                Invoice ID
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                                Patient name
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                                Date
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                                Service
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                                Total amount
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                                Paid
-                            </th>
-                            <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
-                                Status
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                                Action
-                            </th>
-                        </tr>
-                }
-                body={
-                    <>
-                        {invoices.map((invoice) => (
-                        <tr key={invoice.id} className="hover:bg-background-secondary/45">
-                                <td className="px-6 py-1.5 text-sm font-medium text-text-primary">
-                                    {invoice.id}
-                                </td>
-                                <td className="px-6 py-1.5 text-sm text-text-primary">
-                                    {invoice.patient}
-                                </td>
-                                <td className="px-6 py-1.5 text-sm text-text-secondary">
-                                    {invoice.date}
-                                </td>
-                                <td className="px-6 py-1.5 text-sm text-text-primary">
-                                    {invoice.service}
-                                </td>
-                                <td className="px-6 py-1.5 text-sm text-text-primary">
-                                    ${invoice.amount}
-                                </td>
-                                <td className="px-6 py-1.5 text-sm text-text-primary">
-                                    ${invoice.paid}
-                                </td>
-                                <td className="px-6 py-1.5 text-center align-middle">
-                                    <Badge
-                                        variant={statusColors[invoice.status as keyof typeof statusColors]}
-                                        className="capitalize"
-                                    >
-                                        {invoice.status}
-                                    </Badge>
-                                </td>
-                                <td className="px-6 py-1.5">
-                                    <button
-                                        className={`p-2 rounded-md ${canEditBilling
-                                            ? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
-                                            : 'text-text-muted cursor-not-allowed opacity-50'}`}
-                                        disabled={!canEditBilling}
-                                        title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
-                                        aria-label="Edit invoice"
-                                    >
-                                        <Pencil className="w-4 h-4" />
-                                    </button>
-                                </td>
-                        </tr>
-                        ))}
-                    </>
-                }
-                footer={(
-                    <>
-                    <button className="text-sm text-text-secondary hover:text-text-primary">
-                        ← Previous
-                    </button>
-                    <div className="text-sm text-text-secondary">
-                        Page 1 of 10
-                    </div>
-                    <button className="text-sm text-text-secondary hover:text-text-primary">
-                        Next →
-                    </button>
-                    </>
-                )}
-            />
-        </div>
-    );
-}
-function StatCard({ title, count, amount, color }: StatCardProps) {
-    const colors: Record<StatCardColor, string> = {
-        blue: '!bg-purpose-visit-bg !text-purpose-visit-fg !border-purpose-visit-border',
-        yellow: '!bg-badge-warning-bg !text-badge-warning-fg !border-badge-warning-border',
-        green: '!bg-badge-success-bg !text-badge-success-fg !border-badge-success-border',
-        red: '!bg-badge-danger-bg !text-badge-danger-fg !border-badge-danger-border',
-    };
 
-    return (
-        <Card className={`${colors[color]}`}>
-            <p className="text-sm font-medium">{title}</p>
-            <p className="text-2xl font-bold mt-1">{count}</p>
-            <p className="text-sm font-medium mt-1">
-                ${amount.toLocaleString()}
-            </p>
-        </Card>
-    );
+export default function BillingPage() {
+  const { currentOrganization } = useAuth();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<(typeof statusFilters)[number]>('all');
+  const canEditBilling = hasPermission(currentOrganization, 'TAB_BILLING_EDIT');
+
+  const stats = {
+    total: { count: 235, amount: 80900 },
+    unpaid: { count: 30, amount: 2800 },
+    paid: { count: 190, amount: 80900 },
+    overdue: { count: 235, amount: 80900 },
+  };
+
+  const filteredInvoices = useMemo(() => {
+    const query = search.trim().toLowerCase();
+
+    return invoices.filter((invoice) => {
+      const matchesStatus = statusFilter === 'all' || invoice.status === statusFilter;
+      const matchesSearch =
+        !query ||
+        invoice.patient.toLowerCase().includes(query) ||
+        invoice.id.toLowerCase().includes(query) ||
+        invoice.service.toLowerCase().includes(query);
+
+      return matchesStatus && matchesSearch;
+    });
+  }, [search, statusFilter]);
+
+  return (
+    <div className="space-y-4 sm:space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">Billing</h1>
+        <Button
+          variant="primary"
+          disabled={!canEditBilling}
+          className="w-full sm:w-auto shrink-0"
+          title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
+        >
+          New Invoice
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4">
+        <StatCard title="Total Invoices" count={stats.total.count} amount={stats.total.amount} color="blue" />
+        <StatCard title="Unpaid Invoices" count={stats.unpaid.count} amount={stats.unpaid.amount} color="yellow" />
+        <StatCard title="Paid Invoices" count={stats.paid.count} amount={stats.paid.amount} color="green" />
+        <StatCard title="Overdue Invoices" count={stats.overdue.count} amount={stats.overdue.amount} color="red" />
+      </div>
+
+      <SearchBar
+        value={search}
+        onChange={setSearch}
+        placeholder="Search patients..."
+        actions={(
+          <>
+            {statusFilters.map((status) => (
+              <button
+                key={status}
+                type="button"
+                onClick={() => setStatusFilter(status)}
+                className={`px-3 py-1.5 sm:px-4 sm:py-2 rounded-[var(--radius-sm)] text-xs sm:text-sm font-medium capitalize border ${
+                  statusFilter === status
+                    ? 'bg-primary-soft text-primary border-primary/50'
+                    : 'text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border'
+                }`}
+              >
+                {status}
+              </button>
+            ))}
+          </>
+        )}
+      />
+
+      <div className="lg:hidden space-y-3">
+        {filteredInvoices.length === 0 ? (
+          <div className="surface-card p-4 text-sm text-text-muted">No invoices match your filters.</div>
+        ) : (
+          filteredInvoices.map((invoice) => (
+            <InvoiceMobileCard
+              key={invoice.id}
+              invoice={invoice}
+              canEditBilling={canEditBilling}
+            />
+          ))
+        )}
+        <InvoicePagination className="surface-card px-3 py-3 sm:px-6" />
+      </div>
+
+      <div className="hidden lg:block">
+        <Table
+          headers={
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                Invoice ID
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                Patient name
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                Date
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                Service
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                Total amount
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                Paid
+              </th>
+              <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
+                Status
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                Action
+              </th>
+            </tr>
+          }
+          body={
+            <>
+              {filteredInvoices.map((invoice) => (
+                <tr key={invoice.id} className="hover:bg-background-secondary/45">
+                  <td className="px-6 py-1.5 text-sm font-medium text-text-primary">{invoice.id}</td>
+                  <td className="px-6 py-1.5 text-sm text-text-primary">{invoice.patient}</td>
+                  <td className="px-6 py-1.5 text-sm text-text-secondary">{invoice.date}</td>
+                  <td className="px-6 py-1.5 text-sm text-text-primary">{invoice.service}</td>
+                  <td className="px-6 py-1.5 text-sm text-text-primary">${invoice.amount}</td>
+                  <td className="px-6 py-1.5 text-sm text-text-primary">${invoice.paid}</td>
+                  <td className="px-6 py-1.5 text-center align-middle">
+                    <Badge variant={statusColors[invoice.status]} className="capitalize">
+                      {invoice.status}
+                    </Badge>
+                  </td>
+                  <td className="px-6 py-1.5">
+                    <InvoiceEditButton canEditBilling={canEditBilling} />
+                  </td>
+                </tr>
+              ))}
+            </>
+          }
+          footer={<InvoicePagination />}
+        />
+      </div>
+    </div>
+  );
+}
+
+function InvoiceMobileCard({
+  invoice,
+  canEditBilling,
+}: {
+  invoice: Invoice;
+  canEditBilling: boolean;
+}) {
+  const remaining = invoice.amount - invoice.paid;
+
+  return (
+    <Card padding="sm" className="space-y-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-text-primary truncate">{invoice.patient}</p>
+          <p className="text-xs text-text-muted mt-0.5">{invoice.id}</p>
+        </div>
+        <Badge variant={statusColors[invoice.status]} fixedWidth={false} className="capitalize shrink-0">
+          {invoice.status}
+        </Badge>
+      </div>
+
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-text-secondary">
+        <span>{invoice.service}</span>
+        <span aria-hidden>·</span>
+        <span>{invoice.date}</span>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 text-sm">
+        <div>
+          <p className="text-xs text-text-muted">Total</p>
+          <p className="font-medium text-text-primary">${invoice.amount}</p>
+        </div>
+        <div>
+          <p className="text-xs text-text-muted">Paid</p>
+          <p className="font-medium text-text-primary">${invoice.paid}</p>
+        </div>
+        <div>
+          <p className="text-xs text-text-muted">Due</p>
+          <p className="font-medium text-text-primary">${remaining}</p>
+        </div>
+      </div>
+
+      <div className="flex justify-end pt-1 border-t border-border/60">
+        <InvoiceEditButton canEditBilling={canEditBilling} />
+      </div>
+    </Card>
+  );
+}
+
+function InvoiceEditButton({ canEditBilling }: { canEditBilling: boolean }) {
+  return (
+    <button
+      type="button"
+      className={`p-2 rounded-md ${
+        canEditBilling
+          ? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
+          : 'text-text-muted cursor-not-allowed opacity-50'
+      }`}
+      disabled={!canEditBilling}
+      title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
+      aria-label="Edit invoice"
+    >
+      <Pencil className="w-4 h-4" />
+    </button>
+  );
+}
+
+function InvoicePagination({ className = '' }: { className?: string }) {
+  return (
+    <div
+      className={`flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-center ${className}`.trim()}
+    >
+      <button type="button" className="text-sm text-text-secondary hover:text-text-primary">
+        ← Previous
+      </button>
+      <div className="text-sm text-text-secondary text-center">Page 1 of 10</div>
+      <button type="button" className="text-sm text-text-secondary hover:text-text-primary">
+        Next →
+      </button>
+    </div>
+  );
+}
+
+function StatCard({ title, count, amount, color }: StatCardProps) {
+  const colors: Record<StatCardColor, string> = {
+    blue: '!bg-purpose-visit-bg !text-purpose-visit-fg !border-purpose-visit-border',
+    yellow: '!bg-badge-warning-bg !text-badge-warning-fg !border-badge-warning-border',
+    green: '!bg-badge-success-bg !text-badge-success-fg !border-badge-success-border',
+    red: '!bg-badge-danger-bg !text-badge-danger-fg !border-badge-danger-border',
+  };
+
+  return (
+    <Card className={`min-w-0 ${colors[color]}`}>
+      <p className="text-xs sm:text-sm font-medium leading-snug">{title}</p>
+      <p className="text-xl sm:text-2xl font-bold mt-1 tabular-nums">{count}</p>
+      <p className="text-xs sm:text-sm font-medium mt-1 tabular-nums truncate">
+        ${amount.toLocaleString()}
+      </p>
+    </Card>
+  );
 }

frontend/src/app/[locale]/(dashboard)/cases/page.tsx

@@ -19,6 +19,7 @@ import { tasksApi } from '@/lib/api/tasks';
 import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
 import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
 import { Button } from '@/components/ui/shared/Button';
+import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
 import { FORM_SELECT_CLASS } from '@/components/ui/shared/formSelectStyles';
 import { SearchBar } from '@/components/ui/shared/SearchBar';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
@@ -60,6 +61,7 @@ export default function CasesPage() {
   const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
 
   const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
   const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
   const [loadingList, setLoadingList] = useState(false);
   const [loadingDetail, setLoadingDetail] = useState(false);
@@ -146,9 +148,16 @@ export default function CasesPage() {
     const caseIdFromUrl = searchParams.get('caseId');
     if (caseIdFromUrl) {
       setSelectedCaseId(caseIdFromUrl);
+      setMobileDetailOpen(true);
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    if (!selectedCaseId) {
+      setMobileDetailOpen(false);
+    }
+  }, [selectedCaseId]);
+
   useEffect(() => {
     const timeout = setTimeout(() => {
       void loadCases({
@@ -220,12 +229,16 @@ export default function CasesPage() {
   return (
     <div className="space-y-4">
       <div>
-        <h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
         <p className="text-sm text-text-muted mt-1">{t('subtitle')}</p>
       </div>
 
       <div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr]">
-        <section className="rounded-lg border border-border bg-surface p-4 space-y-3 flex flex-col min-h-0">
+        <section
+          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 ${
+            mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
+          }`}
+        >
           <SearchBar
             embedded
             value={search}
@@ -322,7 +335,10 @@ export default function CasesPage() {
                     <li key={item.id}>
                       <button
                         type="button"
-                        onClick={() => setSelectedCaseId(item.id)}
+                        onClick={() => {
+                          setSelectedCaseId(item.id);
+                          setMobileDetailOpen(true);
+                        }}
                         className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${
                           isActive
                             ? 'border-primary bg-primary/5'
@@ -385,7 +401,14 @@ export default function CasesPage() {
           ) : null}
         </section>
 
-        <section className="rounded-lg border border-border bg-surface p-4 min-h-[420px]">
+        <section
+          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 min-h-[320px] lg:min-h-[420px] ${
+            selectedCaseId && !mobileDetailOpen ? 'hidden lg:block' : ''
+          }`}
+        >
+          {mobileDetailOpen && selectedCaseId ? (
+            <MobileDetailBackButton onClick={() => setMobileDetailOpen(false)} />
+          ) : null}
           {!selectedCaseId ? (
             <p className="text-sm text-text-muted">{t('selectCaseHint')}</p>
           ) : loadingDetail || !selectedCase ? (

frontend/src/app/[locale]/(dashboard)/layout.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { Menu } from 'lucide-react';
 import { usePathname, useRouter } from '@/i18n/navigation';
 import { useAuth } from '@/lib/hooks/useAuth';
 import Sidebar from '@/components/ui/shared/Sidebar';
@@ -17,6 +18,22 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const { user, currentOrganization, isAuthReady } = useAuth();
   const router = useRouter();
   const pathname = usePathname();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    setSidebarOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!sidebarOpen) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [sidebarOpen]);
 
   useEffect(() => {
     if (!isAuthReady) return;
@@ -53,14 +70,26 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   }
 
   return (
-    <div className="flex h-screen app-web-bg text-text-primary">
-      <Sidebar />
+    <div className="flex h-[100dvh] app-web-bg text-text-primary">
+      {sidebarOpen ? (
+        <button
+          type="button"
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          aria-label={t('closeMenu')}
+          onClick={() => setSidebarOpen(false)}
+        />
+      ) : null}
 
-      <div className="flex-1 flex flex-col">
-        <DashboardHeader organizationName={currentOrganization.name} />
+      <Sidebar mobileOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
-        <main className="p-6 flex-1 min-h-0 overflow-y-auto">
-          <div className="surface-panel p-6">
+      <div className="flex-1 flex flex-col min-w-0">
+        <DashboardHeader
+          organizationName={currentOrganization.name}
+          onOpenSidebar={() => setSidebarOpen(true)}
+        />
+
+        <main className="p-3 sm:p-4 lg:p-6 flex-1 min-h-0 overflow-y-auto">
+          <div className="surface-panel p-3 sm:p-4 lg:p-6 min-w-0">
             {children}
           </div>
         </main>
@@ -71,14 +100,28 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
 const DashboardHeader = memo(function DashboardHeader({
   organizationName,
+  onOpenSidebar,
 }: {
   organizationName: string;
+  onOpenSidebar: () => void;
 }) {
-  return (
-    <header className="relative z-40 h-[71px] flex justify-between items-center gap-4 px-6 border-b border-border/70 backdrop-blur-sm">
-      <h2 className="text-lg font-medium truncate min-w-0">{organizationName}</h2>
+  const t = useTranslations('common');
 
-      <div className="flex items-center gap-3 shrink-0">
+  return (
+    <header className="relative z-50 h-[71px] flex justify-between items-center gap-2 sm:gap-4 px-3 sm:px-6 border-b border-border/70 backdrop-blur-sm shrink-0">
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        <button
+          type="button"
+          className="lg:hidden inline-flex items-center justify-center h-10 w-10 rounded-[var(--radius-md)] border border-border/70 text-text-primary hover:bg-background-card/80 shrink-0"
+          onClick={onOpenSidebar}
+          aria-label={t('openMenu')}
+        >
+          <Menu className="h-5 w-5 icon-flat" />
+        </button>
+        <h2 className="text-base sm:text-lg font-medium truncate min-w-0">{organizationName}</h2>
+      </div>
+
+      <div className="flex items-center gap-2 sm:gap-3 shrink-0">
         <TopBarControls />
         <DashboardAccountMenu />
       </div>

frontend/src/app/[locale]/(dashboard)/organizations/page.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/lib/api/organization';
 import { invitationTargetFromConnectionRow } from '@/components/invitations/organizationInviteLinks';
 import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
+import { OrganizationConnectionsMobileList } from '@/components/ui/organizations/OrganizationConnectionsMobileList';
 import { InvitationHistoryDialog } from '@/components/ui/organizations/InvitationHistoryDialog';
 import { ConnectionCaseHistoryContent } from '@/components/ui/organizations/ConnectionCaseHistoryContent';
 import { Button } from '@/components/ui/shared/Button';
@@ -306,10 +307,10 @@ export default function OrganizationsPage() {
     <div className="space-y-6">
       <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-text-primary">{tabLabel}</h1>
+          <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{tabLabel}</h1>
           <p className="text-sm text-text-secondary mt-1">{t('subtitle')}</p>
         </div>
-        <Button type="button" size="sm" onClick={() => void openInvitationHistory()}>
+        <Button type="button" size="sm" className="w-full sm:w-auto shrink-0" onClick={() => void openInvitationHistory()}>
           {t('invitationHistory')}
         </Button>
       </div>
@@ -344,6 +345,53 @@ export default function OrganizationsPage() {
         }
       />
 
+      <OrganizationConnectionsMobileList
+        loading={loading}
+        mode={mode}
+        existingRows={existingRows}
+        searchResults={searchResults}
+        currentOrganizationId={currentOrganization.id}
+        counterpart={counterpart}
+        pendingConnectionRowId={pendingConnectionRowId}
+        deleteConnectionRowId={deleteConnectionRowId}
+        copiedId={copiedId}
+        copyingInvitationId={copyingInvitationId}
+        showInviteForm={showInviteForm}
+        manualOrganizationName={manualOrganizationName}
+        manualOwnerEmail={manualOwnerEmail}
+        inviteLoading={inviteLoading}
+        formatConnectionStatusLabel={formatConnectionStatusLabel}
+        formatTableDate={formatTableDate}
+        getInvitationTarget={(row) => invitationTargetFromConnectionRow(row, currentOrganization.id)}
+        onCopyInvitation={(row) => void handleCopyInvitationFromRow(row)}
+        onRespond={(rowId, action) => void respondToPendingConnection(rowId, action)}
+        onViewCaseHistory={setCaseHistoryConnection}
+        onDeleteConnection={(rowId) => void deleteConnection(rowId)}
+        onSendConnectionRequest={(orgId) => void submitConnectionRequest(orgId)}
+        onToggleInviteForm={() => setShowInviteForm((v) => !v)}
+        onManualOrganizationNameChange={setManualOrganizationName}
+        onManualOwnerEmailChange={setManualOwnerEmail}
+        onSendInvite={() => void sendInvite()}
+        labels={{
+          loading: tCommon('loadingEllipsis'),
+          emptyConnections: t('emptyConnections'),
+          noDirectoryResults: t('noDirectoryResults'),
+          hideInvitationFields: t('hideInvitationFields'),
+          sendInvitationLink: t('sendInvitationLink'),
+          counterpartNameLabel: t('counterpartNameLabel', { counterpart }),
+          ownerEmailLabel: t('ownerEmailLabel'),
+          sendInvitation: t('sendInvitation'),
+          sendRequest: t('sendRequest'),
+          acceptRequest: t('acceptRequest'),
+          declineRequest: t('declineRequest'),
+          viewCaseHistory: t('viewCaseHistory'),
+          removeConnection: t('removeConnection'),
+          statusToday: t('statusToday'),
+          statusFound: t('statusFound'),
+        }}
+      />
+
+      <div className="hidden lg:block">
       <Table
         headers={
             <tr>
@@ -537,6 +585,7 @@ export default function OrganizationsPage() {
           </>
         }
       />
+      </div>
 
       <InvitationHistoryDialog
         open={historyOpen}

frontend/src/app/[locale]/(dashboard)/patients/page.tsx

@@ -106,8 +106,8 @@ export default function PatientsPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between gap-3">
-        <h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
         <Button
           variant="primary"
           disabled={!canEditPatients}

frontend/src/app/[locale]/(dashboard)/reports/page.tsx

@@ -1,7 +1,7 @@
 export default function ReportsPage() {
   return (
     <div className="space-y-3">
-      <h1 className="text-2xl font-semibold text-text-primary">Reports</h1>
+      <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">Reports</h1>
       <p className="text-sm text-text-secondary">
         Reports module is coming soon.
       </p>

frontend/src/app/[locale]/(dashboard)/settings/account/page.tsx

@@ -120,13 +120,13 @@ export default function AccountSettingsPage() {
         <Link href="/today" className="text-sm text-primary hover:opacity-90">
           {tCommon('backToApp')}
         </Link>
-        <h1 className="text-2xl font-semibold text-text-primary mt-4">{t('accountTitle')}</h1>
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary mt-4">{t('accountTitle')}</h1>
         <p className="text-text-secondary text-sm mt-2">
           {isResetFlow ? t('resetPasswordSubtitle') : t('accountSubtitle')}
         </p>
       </div>
 
-      <div className="surface-card p-6 sm:p-8 max-w-lg">
+      <div className="surface-card p-4 sm:p-6 max-w-lg">
         <h2 className="text-lg font-medium text-text-primary mb-1">
           {isResetFlow ? t('resetPasswordTitle') : t('changePasswordTitle')}
         </h2>

frontend/src/app/[locale]/(dashboard)/settings/subscriptions/page.tsx

@@ -80,20 +80,20 @@ export default function SubscriptionsSettingsPage() {
         >
           {tCommon('backToApp')}
         </Link>
-        <h1 className="text-2xl font-semibold text-text-primary mt-4">{t('subscriptionsTitle')}</h1>
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary mt-4">{t('subscriptionsTitle')}</h1>
         <p className="text-text-secondary text-sm mt-2">
           {t('subscriptionsSubtitle', { orgName: currentOrganization.name })}
         </p>
       </div>
 
-      <div className="surface-card p-6 space-y-4">
+      <div className="surface-card p-4 sm:p-6 space-y-4">
         {!hasActiveSubscription && (
           <div className="rounded-[var(--radius-md)] border border-amber-500/30 bg-amber-500/10 p-4">
             <p className="text-sm text-amber-200">{t('noSubscriptionNotice')}</p>
           </div>
         )}
 
-        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+        <div className="grid gap-4 grid-cols-2 lg:grid-cols-5">
           <div>
             <p className="text-xs text-text-muted uppercase tracking-wide">{t('currentPlan')}</p>
             <p className="text-lg font-medium text-text-primary capitalize">

frontend/src/app/[locale]/(dashboard)/staff/page.tsx

@@ -36,6 +36,7 @@ import { Checkbox } from '@/components/ui/shared/Checkbox';
 import { Table } from '@/components/ui/shared/Table';
 import { ToastStack } from '@/components/ui/shared/Toast';
 import { formatApiErrorMessage } from '@/components/shared/formatApiError';
+import { StaffMembersMobileList } from '@/components/staff/StaffMembersMobileList';
 import { useToast } from '@/lib/hooks/useToast';
 
 type StoredInviteLink = {
@@ -502,7 +503,7 @@ export default function StaffPage() {
     <div className="space-y-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
+          <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
           <p className="text-sm text-text-secondary mt-1">{t('subtitle')}</p>
         </div>
         <Button
@@ -619,6 +620,42 @@ export default function StaffPage() {
       {loading ? (
         <p className="text-sm text-text-secondary">{t('loadingTeam')}</p>
       ) : (
+        <>
+          <StaffMembersMobileList
+            members={members}
+            canEdit={canEdit}
+            organizationType={currentOrganization?.type}
+            copiedInviteMembershipId={copiedInviteMembershipId}
+            copyingInviteMembershipId={copyingInviteMembershipId}
+            enablingMembershipId={enablingMembershipId}
+            disablingMembershipId={disablingMembershipId}
+            formatAccessSummary={(member) =>
+              formatAccessSummary(member.permissions, currentOrganization?.type, tFeatures)
+            }
+            canShareInviteLink={canShareStaffInviteLink}
+            canEnable={canEnableStaff}
+            canDisable={canDisableStaff}
+            onCopyInviteLink={(member) => void copyStaffInviteLink(member)}
+            onEnable={setEnableTarget}
+            onDisable={setDisableTarget}
+            onEdit={openEdit}
+            onDelete={() => handleDeleteMember()}
+            labels={{
+              roleOwner: t('roleOwner'),
+              roleStaff: t('roleStaff'),
+              statusActive: t('statusActive'),
+              statusPending: t('statusPending'),
+              statusDisabled: t('statusDisabled'),
+              statusExpired: t('statusExpired'),
+              allFeatures: t('allFeatures'),
+              copyInviteLink: t('copyInviteLinkTitle'),
+              enableMemberTitle: t('enableMemberTitle'),
+              disableMemberTitle: t('disableMemberTitle'),
+              editMemberAria: t('editMemberAria'),
+              deleteMemberAria: t('deleteMemberAria'),
+            }}
+          />
+          <div className="hidden lg:block">
         <Table
           headers={
             <tr>
@@ -763,12 +800,14 @@ export default function StaffPage() {
             </>
           }
         />
+          </div>
+        </>
       )}
 
       {inviteOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50">
           <div
-            className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+            className="w-full sm:max-w-lg max-h-[90dvh] overflow-y-auto rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-md)] border border-border bg-background-secondary p-4 sm:p-6 shadow-xl space-y-4"
             role="dialog"
             aria-modal="true"
             aria-labelledby="invite-staff-title"
@@ -824,7 +863,7 @@ export default function StaffPage() {
               />
             )}
 
-            <div className="flex justify-end gap-2 pt-2">
+            <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-2">
               <Button
                 variant="outline"
                 type="button"
@@ -884,9 +923,9 @@ export default function StaffPage() {
       )}
 
       {enableTarget && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
+        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/55">
           <div
-            className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
+            className="surface-card w-full sm:max-w-md max-h-[90dvh] overflow-y-auto p-4 sm:p-5 space-y-4 shadow-xl rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-lg)]"
             role="dialog"
             aria-modal="true"
             aria-labelledby="enable-staff-title"
@@ -913,7 +952,7 @@ export default function StaffPage() {
             {!hasAvailableSeat && (
               <p className="text-sm text-amber-600 dark:text-amber-400">{t('noSeatsAvailable')}</p>
             )}
-            <div className="flex justify-end gap-2 pt-1">
+            <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-1">
               <Button
                 type="button"
                 variant="outline"
@@ -937,9 +976,9 @@ export default function StaffPage() {
       )}
 
       {disableTarget && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
+        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/55">
           <div
-            className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
+            className="surface-card w-full sm:max-w-md max-h-[90dvh] overflow-y-auto p-4 sm:p-5 space-y-4 shadow-xl rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-lg)]"
             role="dialog"
             aria-modal="true"
             aria-labelledby="disable-staff-title"
@@ -963,7 +1002,7 @@ export default function StaffPage() {
               <li>{t('disableBullet2')}</li>
               <li>{t('disableBullet3')}</li>
             </ul>
-            <div className="flex justify-end gap-2 pt-1">
+            <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-1">
               <Button
                 type="button"
                 variant="outline"
@@ -987,9 +1026,9 @@ export default function StaffPage() {
       )}
 
       {editing && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+        <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50">
           <div
-            className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+            className="w-full sm:max-w-lg max-h-[90dvh] overflow-y-auto rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-md)] border border-border bg-background-secondary p-4 sm:p-6 shadow-xl space-y-4"
             role="dialog"
             aria-modal="true"
           >
@@ -1038,7 +1077,7 @@ export default function StaffPage() {
               />
             )}
 
-            <div className="flex justify-end gap-2 pt-2">
+            <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-2">
               <Button
                 variant="outline"
                 type="button"

frontend/src/app/[locale]/(dashboard)/tasks/page.tsx

@@ -159,7 +159,7 @@ export default function TasksPage() {
   return (
     <div className="space-y-4">
       <header className="space-y-1">
-        <h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
         <p className="text-sm text-text-secondary">{t('subtitle')}</p>
       </header>
 
@@ -250,7 +250,7 @@ export default function TasksPage() {
 
               return (
                 <li key={task.id}>
-                  <div className="grid grid-cols-[minmax(0,1fr)_132px_auto] items-center gap-x-3 gap-y-0.5 px-3 py-2">
+                  <div className="flex flex-col gap-3 px-3 py-3 sm:grid sm:grid-cols-[minmax(0,1fr)_132px_auto] sm:items-center sm:gap-x-3 sm:gap-y-0.5 sm:py-2">
                     <div className="min-w-0">
                       <div className="flex flex-wrap items-center gap-1.5">
                         <p className="text-sm font-medium text-text-primary">
@@ -280,7 +280,7 @@ export default function TasksPage() {
                       </p>
                     </div>
 
-                    <div className="flex justify-center">
+                    <div className="flex sm:justify-center">
                       {canEdit ? (
                         <select
                           value={task.status}
@@ -288,7 +288,7 @@ export default function TasksPage() {
                           onChange={(e) =>
                             void handleStatusUpdate(task.id, e.target.value as LabTaskStatus)
                           }
-                          className={`${FORM_SELECT_CLASS} w-full max-w-[132px] font-medium`}
+                          className={`${FORM_SELECT_CLASS} w-full sm:max-w-[132px] font-medium`}
                           style={labTaskStatusSelectStyle(task.status)}
                         >
                           {statusOptions.map((opt) => (
@@ -305,7 +305,7 @@ export default function TasksPage() {
                       )}
                     </div>
 
-                    <div className="flex items-center gap-1.5 shrink-0 justify-end">
+                    <div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end">
                       {canEdit ? (
                         <button
                           type="button"
@@ -327,7 +327,7 @@ export default function TasksPage() {
                         truncate
                         title={task.prosthesisTypeLabel}
                         style={prosthesisTypeBadgeStyle(task.prosthesisTypeCode, index)}
-                        className="w-[7rem]"
+                        className="w-full max-w-[8rem] sm:w-[7rem]"
                       >
                         {task.prosthesisTypeLabel}
                       </Badge>

frontend/src/app/[locale]/(dashboard)/today/page.tsx

@@ -13,7 +13,7 @@ export default function TodayPage() {
 
   return (
     <div>
-      <h1 className="text-2xl font-semibold mb-6">
+      <h1 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6">
         {t('welcomeBack')}
       </h1>
 

frontend/src/app/[locale]/(public)/accept-invite/page.tsx

@@ -99,9 +99,9 @@ function AcceptInviteContent() {
   };
 
   return (
-    <div className="min-h-screen app-web-bg flex items-center justify-center p-4">
-      <div className="w-full max-w-md surface-card p-6 space-y-5">
-        <h1 className="text-xl font-semibold text-text-primary">{t('acceptInviteTitle')}</h1>
+    <div className="min-h-[100dvh] app-web-bg flex items-center justify-center px-4 py-8">
+      <div className="w-full max-w-md surface-card p-4 sm:p-6 space-y-5">
+        <h1 className="text-lg sm:text-xl font-semibold text-text-primary">{t('acceptInviteTitle')}</h1>
 
         {loading ? (
           <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
@@ -168,7 +168,7 @@ function AcceptInviteContent() {
 function AcceptInviteFallback() {
   const t = useTranslations('auth');
   return (
-    <div className="min-h-screen app-web-bg flex items-center justify-center">
+    <div className="min-h-[100dvh] app-web-bg flex items-center justify-center px-4">
       <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
     </div>
   );

frontend/src/app/[locale]/(public)/accept-organization-invite/page.tsx

@@ -9,6 +9,7 @@ import type { OrganizationDetailsFormValues } from '@/components/ui/auth/Organiz
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import { Lock, Mail, User } from 'lucide-react';
+import { AuthPageShell } from '@/components/ui/auth/AuthPageShell';
 import { Button } from '@/components/ui/shared/Button';
 import { Input } from '@/components/ui/shared/Input';
 import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
@@ -160,126 +161,126 @@ function AcceptOrganizationInviteContent() {
   };
 
   return (
-    <div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
-        </Link>
-        <h2 className="mt-6 text-center text-2xl font-semibold text-text-primary">
-          {t('acceptOrganizationTitle')}
-        </h2>
-        <p className="mt-2 text-center text-sm text-text-secondary">
-          {t('alreadyHaveAccount')}{' '}
-          <Link href="/login" className="font-medium text-primary hover:opacity-90">
-            {t('signInLink')}
+    <AuthPageShell
+      header={
+        <>
+          <Link href="/" className="flex justify-center">
+            <span className="text-2xl sm:text-3xl font-semibold text-text-primary">
+              {tCommon('appName')}
+            </span>
           </Link>
-        </p>
-      </div>
+          <h2 className="mt-4 sm:mt-6 text-center text-2xl sm:text-3xl font-semibold text-text-primary">
+            {t('acceptOrganizationTitle')}
+          </h2>
+          <p className="mt-2 text-center text-sm text-text-secondary">
+            {t('alreadyHaveAccount')}{' '}
+            <Link href="/login" className="font-medium text-primary hover:opacity-90">
+              {t('signInLink')}
+            </Link>
+          </p>
+        </>
+      }
+    >
+      <div className="surface-card py-6 sm:py-8 px-4 sm:px-10">
+        {loading ? (
+          <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
+        ) : (
+          <>
+            {inviteInfo && (
+              <div className="mb-5 sm:mb-6 rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
+                <p>
+                  {t('invitedBy')}{' '}
+                  <span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
+                </p>
+              </div>
+            )}
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="surface-card py-8 px-4 sm:px-10">
-          {loading ? (
-            <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
-          ) : (
-            <>
-              {inviteInfo && (
-                <div className="mb-6 rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
-                  <p>
-                    {t('invitedBy')}{' '}
-                    <span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
-                  </p>
-                </div>
-              )}
+            {inviteInfo?.status !== 'ACCEPTED' && <RegistrationProgressSteps step={step} />}
 
-              {inviteInfo?.status !== 'ACCEPTED' && (
-                <RegistrationProgressSteps step={step} />
-              )}
+            {error && (
+              <div className="mb-4 p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
+                <p className="text-sm text-red-400">{error}</p>
+              </div>
+            )}
+            {success && (
+              <div className="mb-4 rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
+                {success}
+              </div>
+            )}
 
-              {error && (
-                <div className="mb-4 p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
-                  <p className="text-sm text-red-600">{error}</p>
-                </div>
-              )}
-              {success && (
-                <div className="mb-4 rounded-[var(--radius-md)] border border-primary/30 bg-primary-soft/40 px-3 py-2 text-sm text-text-primary">
-                  {success}
-                </div>
-              )}
+            {inviteInfo?.status !== 'ACCEPTED' && (
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 sm:space-y-6">
+                {step === 1 && (
+                  <>
+                    <Input
+                      label={t('ownerEmail')}
+                      value={inviteInfo?.ownerEmail ?? ''}
+                      readOnly
+                      disabled
+                      icon={<Mail className="h-5 w-5 icon-flat" />}
+                    />
+                    <Input
+                      label={t('fullName')}
+                      {...register('ownerName')}
+                      placeholder={t('namePlaceholder')}
+                      error={errors.ownerName?.message}
+                      icon={<User className="h-5 w-5 icon-flat" />}
+                    />
+                    <Input
+                      label={t('password')}
+                      {...register('password')}
+                      type="password"
+                      placeholder={t('passwordPlaceholder')}
+                      error={errors.password?.message}
+                      icon={<Lock className="h-5 w-5 icon-flat" />}
+                      passwordToggleLabels={passwordToggleLabels}
+                    />
+                    <Input
+                      label={t('confirmPassword')}
+                      {...register('confirmPassword')}
+                      type="password"
+                      placeholder={t('passwordPlaceholder')}
+                      error={errors.confirmPassword?.message}
+                      icon={<Lock className="h-5 w-5 icon-flat" />}
+                      passwordToggleLabels={passwordToggleLabels}
+                    />
+                    <Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
+                      {tCommon('continue')}
+                    </Button>
+                  </>
+                )}
 
-              {inviteInfo?.status !== 'ACCEPTED' && (
-                <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-                  {step === 1 && (
-                    <>
-                      <Input
-                        label={t('ownerEmail')}
-                        value={inviteInfo?.ownerEmail ?? ''}
-                        readOnly
-                        disabled
-                        icon={<Mail className="h-5 w-5 icon-flat" />}
-                      />
-                      <Input
-                        label={t('fullName')}
-                        {...register('ownerName')}
-                        placeholder={t('namePlaceholder')}
-                        error={errors.ownerName?.message}
-                        icon={<User className="h-5 w-5 icon-flat" />}
-                      />
-                      <Input
-                        label={t('password')}
-                        {...register('password')}
-                        type="password"
-                        placeholder={t('passwordPlaceholder')}
-                        error={errors.password?.message}
-                        icon={<Lock className="h-5 w-5 icon-flat" />}
-                        passwordToggleLabels={passwordToggleLabels}
-                      />
-                      <Input
-                        label={t('confirmPassword')}
-                        {...register('confirmPassword')}
-                        type="password"
-                        placeholder={t('passwordPlaceholder')}
-                        error={errors.confirmPassword?.message}
-                        icon={<Lock className="h-5 w-5 icon-flat" />}
-                        passwordToggleLabels={passwordToggleLabels}
-                      />
-                      <Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
-                        {tCommon('continue')}
+                {step === 2 && (
+                  <>
+                    <OrganizationDetailsFields
+                      register={register as unknown as UseFormRegister<OrganizationDetailsFormValues>}
+                      errors={errors as FieldErrors<OrganizationDetailsFormValues>}
+                      organizationType={organizationType}
+                      setValue={setValue as unknown as UseFormSetValue<OrganizationDetailsFormValues>}
+                    />
+                    <div className="flex flex-col-reverse gap-3 sm:flex-row">
+                      <Button type="button" variant="outline" onClick={() => setStep(1)}>
+                        {tCommon('back')}
                       </Button>
-                    </>
-                  )}
-
-                  {step === 2 && (
-                    <>
-                      <OrganizationDetailsFields
-                        register={register as unknown as UseFormRegister<OrganizationDetailsFormValues>}
-                        errors={errors as FieldErrors<OrganizationDetailsFormValues>}
-                        organizationType={organizationType}
-                        setValue={setValue as unknown as UseFormSetValue<OrganizationDetailsFormValues>}
-                      />
-                      <div className="flex gap-3">
-                        <Button type="button" variant="outline" onClick={() => setStep(1)}>
-                          {tCommon('back')}
-                        </Button>
-                        <Button type="submit" variant="primary" isLoading={submitting} fullWidth>
-                          {t('activateOrganization')}
-                        </Button>
-                      </div>
-                    </>
-                  )}
-                </form>
-              )}
-            </>
-          )}
-        </div>
+                      <Button type="submit" variant="primary" isLoading={submitting} fullWidth>
+                        {t('activateOrganization')}
+                      </Button>
+                    </div>
+                  </>
+                )}
+              </form>
+            )}
+          </>
+        )}
       </div>
-    </div>
+    </AuthPageShell>
   );
 }
 
 function AcceptOrganizationInviteFallback() {
   const t = useTranslations('auth');
   return (
-    <div className="min-h-screen app-web-bg flex items-center justify-center">
+    <div className="min-h-[100dvh] app-web-bg flex items-center justify-center px-4">
       <p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
     </div>
   );

frontend/src/app/[locale]/(public)/forgot-password/page.tsx

@@ -9,9 +9,9 @@ import { Link, useRouter } from '@/i18n/navigation';
 import { Phone, ShieldCheck } from 'lucide-react';
 import { authApi } from '@/lib/api/auth';
 import { useAuth } from '@/lib/hooks/useAuth';
+import { AuthPageShell } from '@/components/ui/auth/AuthPageShell';
 import { Button } from '@/components/ui/shared/Button';
 import { Input } from '@/components/ui/shared/Input';
-import { TopBarControls } from '@/components/ui/shared/TopBarControls';
 
 type ForgotPasswordForm = {
   mobile: string;
@@ -124,83 +124,81 @@ export default function ForgotPasswordPage() {
   };
 
   return (
-    <div className="relative min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="absolute top-4 right-4">
-        <TopBarControls />
+    <AuthPageShell
+      header={
+        <>
+          <Link href="/" className="flex justify-center">
+            <span className="text-2xl sm:text-3xl font-semibold text-text-primary">
+              {tCommon('appName')}
+            </span>
+          </Link>
+          <h2 className="mt-4 sm:mt-6 text-center text-2xl sm:text-3xl font-semibold text-text-primary">
+            {t('forgotPasswordTitle')}
+          </h2>
+          <p className="mt-2 text-center text-sm text-text-secondary">
+            {step === 'mobile' ? t('forgotPasswordSubtitle') : t('codeSentHint')}
+          </p>
+        </>
+      }
+    >
+      <div className="surface-card py-6 sm:py-8 px-4 sm:px-10">
+        <form
+          className="space-y-5 sm:space-y-6"
+          onSubmit={handleSubmit(step === 'code' ? onVerify : () => undefined)}
+        >
+          {step === 'mobile' ? (
+            <Input
+              label={t('mobile')}
+              {...register('mobile')}
+              type="tel"
+              inputMode="tel"
+              autoComplete="tel"
+              placeholder={t('mobilePlaceholder')}
+              error={errors.mobile?.message}
+              icon={<Phone className="h-5 w-5 icon-flat" />}
+            />
+          ) : (
+            <Input
+              label={t('verificationCode')}
+              {...register('code')}
+              type="text"
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              placeholder={t('verificationCodePlaceholder')}
+              error={errors.code?.message}
+              icon={<ShieldCheck className="h-5 w-5 icon-flat" />}
+            />
+          )}
+
+          {error && (
+            <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
+              <p className="text-sm text-red-400">{error}</p>
+            </div>
+          )}
+
+          {step === 'mobile' ? (
+            <Button
+              type="button"
+              variant="primary"
+              isLoading={isSending}
+              fullWidth
+              onClick={() => void onSendCode()}
+            >
+              {t('sendCode')}
+            </Button>
+          ) : (
+            <Button type="submit" variant="primary" isLoading={isVerifying} fullWidth>
+              {t('verifyAndContinue')}
+            </Button>
+          )}
+
+          <p className="text-center text-sm text-text-secondary">
+            <Link href="/login" className="font-medium text-primary hover:opacity-90">
+              {t('backToSignIn')}
+            </Link>
+          </p>
+        </form>
       </div>
-
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
-        </Link>
-        <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
-          {t('forgotPasswordTitle')}
-        </h2>
-        <p className="mt-2 text-center text-sm text-text-secondary">
-          {step === 'mobile' ? t('forgotPasswordSubtitle') : t('codeSentHint')}
-        </p>
-      </div>
-
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="surface-card py-8 px-4 sm:px-10">
-          <form
-            className="space-y-6"
-            onSubmit={handleSubmit(step === 'code' ? onVerify : () => undefined)}
-          >
-            {step === 'mobile' ? (
-              <Input
-                label={t('mobile')}
-                {...register('mobile')}
-                type="tel"
-                inputMode="tel"
-                autoComplete="tel"
-                placeholder={t('mobilePlaceholder')}
-                error={errors.mobile?.message}
-                icon={<Phone className="h-5 w-5 icon-flat" />}
-              />
-            ) : (
-              <Input
-                label={t('verificationCode')}
-                {...register('code')}
-                type="text"
-                inputMode="numeric"
-                autoComplete="one-time-code"
-                placeholder={t('verificationCodePlaceholder')}
-                error={errors.code?.message}
-                icon={<ShieldCheck className="h-5 w-5 icon-flat" />}
-              />
-            )}
-
-            {error && (
-              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
-                <p className="text-sm text-red-600">{error}</p>
-              </div>
-            )}
-
-            {step === 'mobile' ? (
-              <Button
-                type="button"
-                variant="primary"
-                isLoading={isSending}
-                fullWidth
-                onClick={() => void onSendCode()}
-              >
-                {t('sendCode')}
-              </Button>
-            ) : (
-              <Button type="submit" variant="primary" isLoading={isVerifying} fullWidth>
-                {t('verifyAndContinue')}
-              </Button>
-            )}
-
-            <p className="text-center text-sm text-text-secondary">
-              <Link href="/login" className="font-medium text-primary hover:opacity-90">
-                {t('backToSignIn')}
-              </Link>
-            </p>
-          </form>
-        </div>
-      </div>
-    </div>
+    </AuthPageShell>
   );
 }

frontend/src/app/[locale]/(public)/login/page.tsx

@@ -10,10 +10,10 @@ import { Link } from '@/i18n/navigation';
 import { Mail, Lock } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { getRememberedEmail } from '@/lib/auth/rememberMe';
+import { AuthPageShell } from '@/components/ui/auth/AuthPageShell';
 import { Button } from '@/components/ui/shared/Button';
 import { Checkbox } from '@/components/ui/shared/Checkbox';
 import { Input } from '@/components/ui/shared/Input';
-import { TopBarControls } from '@/components/ui/shared/TopBarControls';
 
 type LoginForm = {
   email: string;
@@ -74,82 +74,80 @@ export default function LoginPage() {
 
   if (!isAuthReady) {
     return (
-      <div className="min-h-screen app-web-bg flex items-center justify-center">
+      <div className="min-h-[100dvh] app-web-bg flex items-center justify-center px-4">
         <p className="text-text-secondary">{tCommon('loading')}</p>
       </div>
     );
   }
 
   return (
-    <div className="relative min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="absolute top-4 right-4">
-        <TopBarControls />
-      </div>
-
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
-        </Link>
-        <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
-          {t('signInTitle')}
-        </h2>
-        <p className="mt-2 text-center text-sm text-text-secondary">
-          {tCommon('or')}{' '}
-          <Link href="/register" className="font-medium text-primary hover:opacity-90">
-            {t('startTrialLink')}
+    <AuthPageShell
+      header={
+        <>
+          <Link href="/" className="flex justify-center">
+            <span className="text-2xl sm:text-3xl font-semibold text-text-primary">
+              {tCommon('appName')}
+            </span>
           </Link>
-        </p>
-      </div>
+          <h2 className="mt-4 sm:mt-6 text-center text-2xl sm:text-3xl font-semibold text-text-primary">
+            {t('signInTitle')}
+          </h2>
+          <p className="mt-2 text-center text-sm text-text-secondary">
+            {tCommon('or')}{' '}
+            <Link href="/register" className="font-medium text-primary hover:opacity-90">
+              {t('startTrialLink')}
+            </Link>
+          </p>
+        </>
+      }
+    >
+      <div className="surface-card py-6 sm:py-8 px-4 sm:px-10">
+        <form className="space-y-5 sm:space-y-6" onSubmit={handleSubmit(onSubmit)}>
+          <Input
+            label={t('email')}
+            {...register('email')}
+            type="email"
+            placeholder={t('emailPlaceholder')}
+            error={errors.email?.message}
+            icon={<Mail className="h-5 w-5 icon-flat" />}
+          />
+          <Input
+            label={t('password')}
+            {...register('password')}
+            type="password"
+            placeholder={t('passwordPlaceholder')}
+            error={errors.password?.message}
+            icon={<Lock className="h-5 w-5 icon-flat" />}
+            passwordToggleLabels={{
+              show: t('showPassword'),
+              hide: t('hidePassword'),
+            }}
+          />
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="surface-card py-8 px-4 sm:px-10">
-          <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
-            <Input
-              label={t('email')}
-              {...register('email')}
-              type="email"
-              placeholder={t('emailPlaceholder')}
-              error={errors.email?.message}
-              icon={<Mail className="h-5 w-5 icon-flat" />}
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <Checkbox
+              checked={rememberMe}
+              onChange={(checked) => setValue('rememberMe', checked)}
+              label={t('rememberMe')}
             />
-            <Input
-              label={t('password')}
-              {...register('password')}
-              type="password"
-              placeholder={t('passwordPlaceholder')}
-              error={errors.password?.message}
-              icon={<Lock className="h-5 w-5 icon-flat" />}
-              passwordToggleLabels={{
-                show: t('showPassword'),
-                hide: t('hidePassword'),
-              }}
-            />
-
-            <div className="flex items-center justify-between">
-              <Checkbox
-                checked={rememberMe}
-                onChange={(checked) => setValue('rememberMe', checked)}
-                label={t('rememberMe')}
-              />
-              <div className="text-sm">
-                <Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
-                  {t('forgotPassword')}
-                </Link>
-              </div>
+            <div className="text-sm">
+              <Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
+                {t('forgotPassword')}
+              </Link>
             </div>
+          </div>
 
-            {error && (
-              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
-                <p className="text-sm text-red-600">{error}</p>
-              </div>
-            )}
+          {error && (
+            <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
+              <p className="text-sm text-red-400">{error}</p>
+            </div>
+          )}
 
-            <Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
-              {t('signIn')}
-            </Button>
-          </form>
-        </div>
+          <Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
+            {t('signIn')}
+          </Button>
+        </form>
       </div>
-    </div>
+    </AuthPageShell>
   );
 }

frontend/src/app/[locale]/(public)/page.tsx

@@ -14,26 +14,33 @@ export default function HomePage() {
   const { user } = useAuth();
 
   return (
-    <div className="min-h-screen app-web-bg text-text-primary">
+    <div className="min-h-[100dvh] app-web-bg text-text-primary">
       <header className="border-b border-border/70 bg-background-secondary/65 backdrop-blur-sm fixed top-0 w-full z-10">
-        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-          <div className="text-2xl font-semibold text-text-primary">
+        <div className="container mx-auto px-4 py-3 sm:py-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
+          <Link href="/" className="text-xl sm:text-2xl font-semibold text-text-primary shrink-0">
             {tCommon('appName')}
-          </div>
+          </Link>
 
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 sm:gap-3 ml-auto shrink-0">
             <TopBarControls />
             {user ? (
               <Link href="/today">
-                <Button variant="primary">{tAuth('dashboard')}</Button>
+                <Button variant="primary" size="sm" className="sm:px-4 sm:py-2 sm:text-sm">
+                  {tAuth('dashboard')}
+                </Button>
               </Link>
             ) : (
               <>
-                <Link href="/login">
-                  <Button variant="outline">{tAuth('login')}</Button>
+                <Link href="/login" className="hidden sm:block">
+                  <Button variant="outline" size="sm" className="whitespace-nowrap">
+                    {tAuth('login')}
+                  </Button>
                 </Link>
                 <Link href="/register">
-                  <Button variant="primary">{tAuth('startTrial')}</Button>
+                  <Button variant="primary" size="sm" className="whitespace-nowrap">
+                    <span className="sm:hidden">{tAuth('startTrialShort')}</span>
+                    <span className="hidden sm:inline">{tAuth('startTrial')}</span>
+                  </Button>
                 </Link>
               </>
             )}
@@ -41,27 +48,34 @@ export default function HomePage() {
         </div>
       </header>
 
-      <main className="container mx-auto px-4 pt-32 pb-20">
+      <main className="container mx-auto px-4 pt-28 sm:pt-32 pb-16 sm:pb-20">
         <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-5xl md:text-6xl font-semibold mb-6 leading-tight">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-semibold mb-4 sm:mb-6 leading-tight">
             {t('heroTitle')}
             <span className="text-primary"> {t('heroHighlight')}</span>
           </h1>
 
-          <p className="text-lg text-text-secondary mb-8 max-w-2xl mx-auto">
+          <p className="text-base sm:text-lg text-text-secondary mb-6 sm:mb-8 max-w-2xl mx-auto">
             {t('heroSubtitle')}
           </p>
 
           {!user && (
-            <Link href="/register">
-              <Button size="lg" variant="primary" className="px-8">
-                {tAuth('startFreeTrial')}
-              </Button>
-            </Link>
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3">
+              <Link href="/register" className="w-full sm:w-auto">
+                <Button size="lg" variant="primary" fullWidth className="sm:w-auto sm:px-8">
+                  {tAuth('startFreeTrial')}
+                </Button>
+              </Link>
+              <Link href="/login" className="w-full sm:hidden">
+                <Button variant="outline" size="lg" fullWidth>
+                  {tAuth('login')}
+                </Button>
+              </Link>
+            </div>
           )}
         </div>
 
-        <div className="mt-20 grid md:grid-cols-3 gap-6">
+        <div className="mt-12 sm:mt-20 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
           <FeatureCard
             icon={<Building2 className="h-6 w-6 icon-flat" />}
             title={t('featureClinicsTitle')}

frontend/src/app/[locale]/(public)/register/page.tsx

@@ -8,11 +8,11 @@ import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/navigation';
 import { Mail, Lock, User, Phone } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
+import { AuthPageShell } from '@/components/ui/auth/AuthPageShell';
 import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
 import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
 import { Button } from '@/components/ui/shared/Button';
 import { Input } from '@/components/ui/shared/Input';
-import { TopBarControls } from '@/components/ui/shared/TopBarControls';
 
 type RegisterForm = {
   name: string;
@@ -121,133 +121,139 @@ export default function RegisterPage() {
   };
 
   return (
-    <div className="relative min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="absolute top-4 right-4">
-        <TopBarControls />
-      </div>
+    <AuthPageShell
+      header={
+        <>
+          <Link href="/" className="flex justify-center">
+            <span className="text-2xl sm:text-3xl font-semibold text-text-primary">
+              {tCommon('appName')}
+            </span>
+          </Link>
+          <h2 className="mt-4 sm:mt-6 text-center text-2xl sm:text-3xl font-semibold text-text-primary">
+            {t('registerTitle')}
+          </h2>
+          <p className="mt-2 text-center text-sm text-text-secondary">
+            {t('registerPrompt')}{' '}
+            <Link href="/login" className="font-medium text-primary hover:opacity-90">
+              {t('signInLink')}
+            </Link>
+          </p>
+        </>
+      }
+    >
+      <div className="surface-card py-6 sm:py-8 px-4 sm:px-10">
+        <RegistrationProgressSteps step={step} />
+        <div className="mb-5 sm:mb-6 p-3 sm:p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
+          <h3 className="text-sm font-medium text-text-primary mb-2">{t('trialIncludes')}</h3>
+          <ul className="text-sm text-text-secondary space-y-1">
+            <li className="flex items-start gap-2">
+              <span className="shrink-0">✓</span>
+              <span>{t('trialTeamMembers')}</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="shrink-0">✓</span>
+              <span>{t('trialFullAccess')}</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="shrink-0">✓</span>
+              <span>{t('trialNoCard')}</span>
+            </li>
+          </ul>
+        </div>
 
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
-        </Link>
-        <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
-          {t('registerTitle')}
-        </h2>
-        <p className="mt-2 text-center text-sm text-text-secondary">
-          {t('registerPrompt')}{' '}
-          <Link href="/login" className="font-medium text-primary hover:opacity-90">
-            {t('signInLink')}
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 sm:space-y-6">
+          {step === 1 && (
+            <>
+              <Input
+                label={t('fullName')}
+                {...register('name')}
+                placeholder={t('namePlaceholder')}
+                error={errors.name?.message}
+                icon={<User className="h-5 w-5 icon-flat" />}
+              />
+              <Input
+                label={t('email')}
+                {...register('email')}
+                type="email"
+                placeholder={t('emailPlaceholder')}
+                error={errors.email?.message}
+                icon={<Mail className="h-5 w-5 icon-flat" />}
+              />
+              <Input
+                label={t('mobile')}
+                {...register('mobile')}
+                type="tel"
+                inputMode="tel"
+                autoComplete="tel"
+                placeholder={t('mobilePlaceholder')}
+                error={errors.mobile?.message}
+                icon={<Phone className="h-5 w-5 icon-flat" />}
+              />
+              <Input
+                label={t('password')}
+                {...register('password')}
+                type="password"
+                placeholder={t('passwordPlaceholder')}
+                error={errors.password?.message}
+                icon={<Lock className="h-5 w-5 icon-flat" />}
+                passwordToggleLabels={passwordToggleLabels}
+              />
+              <Input
+                label={t('confirmPassword')}
+                {...register('confirmPassword')}
+                type="password"
+                placeholder={t('passwordPlaceholder')}
+                error={errors.confirmPassword?.message}
+                icon={<Lock className="h-5 w-5 icon-flat" />}
+                passwordToggleLabels={passwordToggleLabels}
+              />
+              <Button type="button" variant="primary" onClick={handleNext} fullWidth>
+                {tCommon('continue')}
+              </Button>
+            </>
+          )}
+
+          {step === 2 && (
+            <>
+              <OrganizationDetailsFields
+                register={register as never}
+                errors={errors as never}
+                organizationType={organizationType}
+                setValue={setValue as never}
+              />
+              {error && (
+                <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
+                  <p className="text-sm text-red-400">{error}</p>
+                </div>
+              )}
+              <div className="flex flex-col-reverse gap-3 sm:flex-row">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setStep(1)}
+                  className="sm:shrink-0"
+                >
+                  {tCommon('back')}
+                </Button>
+                <Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
+                  {t('startMyFreeTrial')}
+                </Button>
+              </div>
+            </>
+          )}
+        </form>
+
+        <p className="mt-5 sm:mt-6 text-xs text-center text-text-muted leading-relaxed">
+          {t('termsIntro')}{' '}
+          <Link href="/terms" className="text-primary hover:opacity-90">
+            {t('termsOfService')}
+          </Link>{' '}
+          {tCommon('and')}{' '}
+          <Link href="/privacy" className="text-primary hover:opacity-90">
+            {t('privacyPolicy')}
           </Link>
         </p>
       </div>
-
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="surface-card py-8 px-4 sm:px-10">
-          <RegistrationProgressSteps step={step} />
-          <div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
-            <h3 className="text-sm font-medium text-text-primary mb-2">{t('trialIncludes')}</h3>
-            <ul className="text-sm text-text-secondary space-y-1">
-              <li className="flex items-center">
-                <span className="mr-2">✓</span> {t('trialTeamMembers')}
-              </li>
-              <li className="flex items-center">
-                <span className="mr-2">✓</span> {t('trialFullAccess')}
-              </li>
-              <li className="flex items-center">
-                <span className="mr-2">✓</span> {t('trialNoCard')}
-              </li>
-            </ul>
-          </div>
-
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
-            {step === 1 && (
-              <>
-                <Input
-                  label={t('fullName')}
-                  {...register('name')}
-                  placeholder={t('namePlaceholder')}
-                  error={errors.name?.message}
-                  icon={<User className="h-5 w-5 icon-flat" />}
-                />
-                <Input
-                  label={t('email')}
-                  {...register('email')}
-                  type="email"
-                  placeholder={t('emailPlaceholder')}
-                  error={errors.email?.message}
-                  icon={<Mail className="h-5 w-5 icon-flat" />}
-                />
-                <Input
-                  label={t('mobile')}
-                  {...register('mobile')}
-                  type="tel"
-                  inputMode="tel"
-                  autoComplete="tel"
-                  placeholder={t('mobilePlaceholder')}
-                  error={errors.mobile?.message}
-                  icon={<Phone className="h-5 w-5 icon-flat" />}
-                />
-                <Input
-                  label={t('password')}
-                  {...register('password')}
-                  type="password"
-                  placeholder={t('passwordPlaceholder')}
-                  error={errors.password?.message}
-                  icon={<Lock className="h-5 w-5 icon-flat" />}
-                  passwordToggleLabels={passwordToggleLabels}
-                />
-                <Input
-                  label={t('confirmPassword')}
-                  {...register('confirmPassword')}
-                  type="password"
-                  placeholder={t('passwordPlaceholder')}
-                  error={errors.confirmPassword?.message}
-                  icon={<Lock className="h-5 w-5 icon-flat" />}
-                  passwordToggleLabels={passwordToggleLabels}
-                />
-                <Button type="button" variant="primary" onClick={handleNext} fullWidth>
-                  {tCommon('continue')}
-                </Button>
-              </>
-            )}
-
-            {step === 2 && (
-              <>
-                <OrganizationDetailsFields
-                  register={register as never}
-                  errors={errors as never}
-                  organizationType={organizationType}
-                  setValue={setValue as never}
-                />
-                {error && (
-                  <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
-                    <p className="text-sm text-red-600">{error}</p>
-                  </div>
-                )}
-                <div className="flex gap-3">
-                  <Button type="button" variant="outline" onClick={() => setStep(1)}>
-                    {tCommon('back')}
-                  </Button>
-                  <Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
-                    {t('startMyFreeTrial')}
-                  </Button>
-                </div>
-              </>
-            )}
-          </form>
-
-          <p className="mt-6 text-xs text-center text-text-muted">
-            {t('termsIntro')}{' '}
-            <Link href="/terms" className="text-primary hover:opacity-90">
-              {t('termsOfService')}
-            </Link>{' '}
-            {tCommon('and')}{' '}
-            <Link href="/privacy" className="text-primary hover:opacity-90">
-              {t('privacyPolicy')}
-            </Link>
-          </p>
-        </div>
-      </div>
-    </div>
+    </AuthPageShell>
   );
 }

frontend/src/app/[locale]/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, setRequestLocale } from 'next-intl/server';
 import { hasLocale } from 'next-intl';
@@ -16,6 +16,11 @@ export const metadata: Metadata = {
   description: 'Connect dental clinics and laboratories seamlessly',
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+};
+
 export function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
 }