app now responsive for mobile and small devices.

frontend/messages/en.json

@@ -30,7 +30,9 @@
     "copied": "Copied",
     "copyLink": "Copy link",
     "none": "None",
-    "preview": "Preview"
+    "preview": "Preview",
+    "openMenu": "Open menu",
+    "closeMenu": "Close menu"
   },
   "language": {
     "label": "Language",
@@ -64,6 +66,7 @@
     "signOut": "Log out",
     "register": "Register",
     "startTrial": "Start Trial",
+    "startTrialShort": "Try free",
     "startFreeTrial": "Start Free Trial",
     "dashboard": "Dashboard",
     "signInTitle": "Sign in to your account",

frontend/messages/fa.json

@@ -30,7 +30,9 @@
     "copied": "کپی شد",
     "copyLink": "کپی لینک",
     "none": "هیچکدام",
-    "preview": "پیش‌نمایش"
+    "preview": "پیش‌نمایش",
+    "openMenu": "باز کردن منو",
+    "closeMenu": "بستن منو"
   },
   "language": {
     "label": "زبان",
@@ -64,6 +66,7 @@
     "signOut": "خروج",
     "register": "ثبت‌نام",
     "startTrial": "شروع دوره آزمایشی",
+    "startTrialShort": "آزمایشی",
     "startFreeTrial": "شروع دوره آزمایشی رایگان",
     "dashboard": "داشبورد",
     "signInTitle": "به حساب کاربری خود وارد شوید",

frontend/messages/nl.json

@@ -30,7 +30,9 @@
     "copied": "Gekopieerd",
     "copyLink": "Link kopiëren",
     "none": "Geen",
-    "preview": "Voorbeeld"
+    "preview": "Voorbeeld",
+    "openMenu": "Menu openen",
+    "closeMenu": "Menu sluiten"
   },
   "language": {
     "label": "Taal",
@@ -64,6 +66,7 @@
     "signOut": "Uitloggen",
     "register": "Registreren",
     "startTrial": "Proefperiode starten",
+    "startTrialShort": "Gratis proberen",
     "startFreeTrial": "Gratis proefperiode starten",
     "dashboard": "Dashboard",
     "signInTitle": "Meld u aan bij uw account",

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,17 +10,33 @@ 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 = [
+
+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',
 } as const;
+
+const statusFilters = ['all', 'paid', 'unpaid', 'overdue'] as const;
+
 type StatCardColor = 'blue' | 'yellow' | 'green' | 'red';
 
 interface StatCardProps {
@@ -28,69 +45,69 @@ interface StatCardProps {
   amount: number;
   color: StatCardColor;
 }
+
 export default function BillingPage() {
   const { currentOrganization } = useAuth();
   const [search, setSearch] = useState('');
-    const [statusFilter, setStatusFilter] = useState('all');
+  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-6">
-            {/* Header */}
-            <div className="flex justify-between items-center">
-                <h1 className="text-2xl font-semibold text-text-primary">Billing</h1>
+    <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>
-            {/* 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 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>
-            {/* Filters */}
+
       <SearchBar
         value={search}
         onChange={setSearch}
         placeholder="Search patients..."
         actions={(
           <>
-                        {['all', 'paid', 'unpaid', 'overdue'].map((status) => (
+            {statusFilters.map((status) => (
               <button
                 key={status}
+                type="button"
                 onClick={() => setStatusFilter(status)}
-                                className={`px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium capitalize border ${statusFilter === 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'
                 }`}
@@ -101,7 +118,23 @@ export default function BillingPage() {
           </>
         )}
       />
-            {/* Invoices Table - Matching your design */}
+
+      <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>
@@ -133,67 +166,116 @@ export default function BillingPage() {
           }
           body={
             <>
-                        {invoices.map((invoice) => (
+              {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-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"
-                                    >
+                    <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
-                                        className={`p-2 rounded-md ${canEditBilling
+      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'}`}
+          : '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">
+  );
+}
+
+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">
-                        Page 1 of 10
-                    </div>
-                    <button className="text-sm text-text-secondary hover:text-text-primary">
+      <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',
@@ -203,10 +285,10 @@ function StatCard({ title, count, amount, color }: StatCardProps) {
   };
 
   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">
+    <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,12 +161,15 @@ 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">
+    <AuthPageShell
+      header={
+        <>
           <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
+            <span className="text-2xl sm:text-3xl font-semibold text-text-primary">
+              {tCommon('appName')}
+            </span>
           </Link>
-        <h2 className="mt-6 text-center text-2xl font-semibold text-text-primary">
+          <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">
@@ -174,16 +178,16 @@ function AcceptOrganizationInviteContent() {
               {t('signInLink')}
             </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">
+        </>
+      }
+    >
+      <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-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">
+              <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>
@@ -191,13 +195,11 @@ function AcceptOrganizationInviteContent() {
               </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-600">{error}</p>
+                <p className="text-sm text-red-400">{error}</p>
               </div>
             )}
             {success && (
@@ -207,7 +209,7 @@ function AcceptOrganizationInviteContent() {
             )}
 
             {inviteInfo?.status !== 'ACCEPTED' && (
-                <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 sm:space-y-6">
                 {step === 1 && (
                   <>
                     <Input
@@ -256,7 +258,7 @@ function AcceptOrganizationInviteContent() {
                       organizationType={organizationType}
                       setValue={setValue as unknown as UseFormSetValue<OrganizationDetailsFormValues>}
                     />
-                      <div className="flex gap-3">
+                    <div className="flex flex-col-reverse gap-3 sm:flex-row">
                       <Button type="button" variant="outline" onClick={() => setStep(1)}>
                         {tCommon('back')}
                       </Button>
@@ -271,15 +273,14 @@ function AcceptOrganizationInviteContent() {
           </>
         )}
       </div>
-      </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,27 +124,26 @@ 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 />
-      </div>
-
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+    <AuthPageShell
+      header={
+        <>
           <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
+            <span className="text-2xl sm:text-3xl font-semibold text-text-primary">
+              {tCommon('appName')}
+            </span>
           </Link>
-        <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
+          <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>
-
-      <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">
+        </>
+      }
+    >
+      <div className="surface-card py-6 sm:py-8 px-4 sm:px-10">
         <form
-            className="space-y-6"
+          className="space-y-5 sm:space-y-6"
           onSubmit={handleSubmit(step === 'code' ? onVerify : () => undefined)}
         >
           {step === 'mobile' ? (
@@ -172,8 +171,8 @@ export default function ForgotPasswordPage() {
           )}
 
           {error && (
-              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
-                <p className="text-sm text-red-600">{error}</p>
+            <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>
           )}
 
@@ -200,7 +199,6 @@ export default function ForgotPasswordPage() {
           </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,23 +74,22 @@ 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">
+    <AuthPageShell
+      header={
+        <>
           <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
+            <span className="text-2xl sm:text-3xl font-semibold text-text-primary">
+              {tCommon('appName')}
+            </span>
           </Link>
-        <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
+          <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">
@@ -99,11 +98,11 @@ export default function LoginPage() {
               {t('startTrialLink')}
             </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">
-          <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
+        </>
+      }
+    >
+      <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')}
@@ -125,7 +124,7 @@ export default function LoginPage() {
             }}
           />
 
-            <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <Checkbox
               checked={rememberMe}
               onChange={(checked) => setValue('rememberMe', checked)}
@@ -139,8 +138,8 @@ export default function LoginPage() {
           </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 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>
           )}
 
@@ -149,7 +148,6 @@ export default function LoginPage() {
           </Button>
         </form>
       </div>
-      </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">
+            <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,16 +121,15 @@ 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>
-
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+    <AuthPageShell
+      header={
+        <>
           <Link href="/" className="flex justify-center">
-          <span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
+            <span className="text-2xl sm:text-3xl font-semibold text-text-primary">
+              {tCommon('appName')}
+            </span>
           </Link>
-        <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
+          <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">
@@ -139,27 +138,30 @@ export default function RegisterPage() {
               {t('signInLink')}
             </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">
+        </>
+      }
+    >
+      <div className="surface-card py-6 sm: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">
+        <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-center">
-                <span className="mr-2">✓</span> {t('trialTeamMembers')}
+            <li className="flex items-start gap-2">
+              <span className="shrink-0">✓</span>
+              <span>{t('trialTeamMembers')}</span>
             </li>
-              <li className="flex items-center">
-                <span className="mr-2">✓</span> {t('trialFullAccess')}
+            <li className="flex items-start gap-2">
+              <span className="shrink-0">✓</span>
+              <span>{t('trialFullAccess')}</span>
             </li>
-              <li className="flex items-center">
-                <span className="mr-2">✓</span> {t('trialNoCard')}
+            <li className="flex items-start gap-2">
+              <span className="shrink-0">✓</span>
+              <span>{t('trialNoCard')}</span>
             </li>
           </ul>
         </div>
 
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 sm:space-y-6">
           {step === 1 && (
             <>
               <Input
@@ -221,11 +223,16 @@ export default function RegisterPage() {
               />
               {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>
+                  <p className="text-sm text-red-400">{error}</p>
                 </div>
               )}
-                <div className="flex gap-3">
-                  <Button type="button" variant="outline" onClick={() => setStep(1)}>
+              <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>
@@ -236,7 +243,7 @@ export default function RegisterPage() {
           )}
         </form>
 
-          <p className="mt-6 text-xs text-center text-text-muted">
+        <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')}
@@ -247,7 +254,6 @@ export default function RegisterPage() {
           </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 }));
 }

frontend/src/components/staff/StaffMembersMobileList.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { Check, Copy, Pencil, Trash2, UserCheck, UserX } from 'lucide-react';
+import type { StaffMemberDto } from '@/lib/api/staff';
+import { Badge } from '@/components/ui/shared/Badge';
+import { Card } from '@/components/ui/shared/Card';
+
+type StaffMembersMobileListProps = {
+  members: StaffMemberDto[];
+  canEdit: boolean;
+  organizationType: string | undefined;
+  copiedInviteMembershipId: string | null;
+  copyingInviteMembershipId: string | null;
+  enablingMembershipId: string | null;
+  disablingMembershipId: string | null;
+  formatAccessSummary: (member: StaffMemberDto) => string;
+  canShareInviteLink: (member: StaffMemberDto) => boolean;
+  canEnable: (member: StaffMemberDto) => boolean;
+  canDisable: (member: StaffMemberDto) => boolean;
+  onCopyInviteLink: (member: StaffMemberDto) => void;
+  onEnable: (member: StaffMemberDto) => void;
+  onDisable: (member: StaffMemberDto) => void;
+  onEdit: (member: StaffMemberDto) => void;
+  onDelete: (member: StaffMemberDto) => void;
+  labels: {
+    roleOwner: string;
+    roleStaff: string;
+    statusActive: string;
+    statusPending: string;
+    statusDisabled: string;
+    statusExpired: string;
+    allFeatures: string;
+    copyInviteLink: string;
+    enableMemberTitle: string;
+    disableMemberTitle: string;
+    editMemberAria: string;
+    deleteMemberAria: string;
+  };
+};
+
+function memberStatusBadge(
+  member: StaffMemberDto,
+  labels: StaffMembersMobileListProps['labels'],
+) {
+  if (member.isOwner || member.invitationStatus === 'ACTIVE') {
+    return <Badge variant="success">{labels.statusActive}</Badge>;
+  }
+  if (member.invitationStatus === 'PENDING') {
+    return <Badge variant="warning">{labels.statusPending}</Badge>;
+  }
+  if (member.invitationStatus === 'DISABLED') {
+    return <Badge variant="default">{labels.statusDisabled}</Badge>;
+  }
+  return <Badge variant="danger">{labels.statusExpired}</Badge>;
+}
+
+export function StaffMembersMobileList({
+  members,
+  canEdit,
+  copiedInviteMembershipId,
+  copyingInviteMembershipId,
+  enablingMembershipId,
+  disablingMembershipId,
+  formatAccessSummary,
+  canShareInviteLink,
+  canEnable,
+  canDisable,
+  onCopyInviteLink,
+  onEnable,
+  onDisable,
+  onEdit,
+  onDelete,
+  labels,
+}: StaffMembersMobileListProps) {
+  return (
+    <ul className="space-y-3 lg:hidden">
+      {members.map((member) => (
+        <li key={member.id}>
+          <Card padding="sm" className="space-y-3">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <p className="font-medium text-text-primary truncate">{member.name}</p>
+                <p className="text-sm text-text-secondary truncate mt-0.5">{member.email}</p>
+                <p className="text-xs text-text-muted mt-1">
+                  {member.isOwner ? labels.roleOwner : labels.roleStaff}
+                </p>
+              </div>
+              {memberStatusBadge(member, labels)}
+            </div>
+
+            <p className="text-sm text-text-secondary line-clamp-3">
+              {member.isOwner ? labels.allFeatures : formatAccessSummary(member)}
+            </p>
+
+            {!member.isOwner ? (
+              <div className="flex flex-wrap items-center gap-1.5 pt-1 border-t border-border/60">
+                {canShareInviteLink(member) ? (
+                  <button
+                    type="button"
+                    className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
+                    disabled={copyingInviteMembershipId === member.id}
+                    onClick={() => onCopyInviteLink(member)}
+                    aria-label={labels.copyInviteLink}
+                    title={labels.copyInviteLink}
+                  >
+                    {copiedInviteMembershipId === member.id ? (
+                      <Check className="w-4 h-4" />
+                    ) : (
+                      <Copy className="w-4 h-4" />
+                    )}
+                  </button>
+                ) : null}
+                {canEnable(member) ? (
+                  <button
+                    type="button"
+                    className={`p-2 rounded-md ${
+                      canEdit
+                        ? 'text-text-secondary hover:bg-background-card/80 hover:text-primary'
+                        : 'text-text-muted opacity-50 cursor-not-allowed'
+                    }`}
+                    aria-label={labels.enableMemberTitle}
+                    disabled={!canEdit || enablingMembershipId === member.id}
+                    title={labels.enableMemberTitle}
+                    onClick={() => {
+                      if (!canEdit) return;
+                      onEnable(member);
+                    }}
+                  >
+                    <UserCheck className="w-4 h-4" />
+                  </button>
+                ) : null}
+                {canDisable(member) ? (
+                  <button
+                    type="button"
+                    className={`p-2 rounded-md ${
+                      canEdit
+                        ? 'text-text-secondary hover:bg-background-card/80 hover:text-amber-600'
+                        : 'text-text-muted opacity-50 cursor-not-allowed'
+                    }`}
+                    aria-label={labels.disableMemberTitle}
+                    disabled={!canEdit || disablingMembershipId === member.id}
+                    title={labels.disableMemberTitle}
+                    onClick={() => {
+                      if (!canEdit) return;
+                      onDisable(member);
+                    }}
+                  >
+                    <UserX className="w-4 h-4" />
+                  </button>
+                ) : null}
+                <button
+                  type="button"
+                  className={`p-2 rounded-md ${
+                    canEdit
+                      ? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
+                      : 'text-text-muted opacity-50 cursor-not-allowed'
+                  }`}
+                  aria-label={labels.editMemberAria}
+                  disabled={!canEdit}
+                  onClick={() => {
+                    if (!canEdit) return;
+                    onEdit(member);
+                  }}
+                >
+                  <Pencil className="w-4 h-4" />
+                </button>
+                <button
+                  type="button"
+                  className={`p-2 rounded-md ${
+                    canEdit
+                      ? 'text-text-secondary hover:bg-red-500/15 hover:text-red-600'
+                      : 'text-text-muted opacity-50 cursor-not-allowed'
+                  }`}
+                  aria-label={labels.deleteMemberAria}
+                  disabled={!canEdit}
+                  onClick={() => {
+                    if (!canEdit) return;
+                    onDelete(member);
+                  }}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              </div>
+            ) : null}
+          </Card>
+        </li>
+      ))}
+    </ul>
+  );
+}

frontend/src/components/staff/WorkingHoursEditor.tsx

@@ -82,8 +82,8 @@ export function WorkingHoursEditor({
             key={day.dayOfWeek}
             className="rounded-[var(--radius-md)] border border-border/60 bg-background-card/40 px-3 py-3 space-y-3"
           >
-            <div className="flex items-center justify-between gap-3">
-              <span className="text-sm font-medium text-text-primary w-10">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <span className="text-sm font-medium text-text-primary w-10 shrink-0">
                 {t(WEEKDAY_KEYS[day.dayOfWeek])}
               </span>
               <Checkbox

frontend/src/components/ui/appointments/AppointmentBookingModal.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import { ResponsiveDialogOverlay, ResponsiveDialogPanel } from '@/components/ui/shared/ResponsiveDialog';
 import { Dropdown } from '@/components/ui/shared/Dropdown';
 import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
@@ -162,12 +163,13 @@ export function AppointmentBookingModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
-      <div
-        className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
+    <ResponsiveDialogOverlay onBackdropClick={onClose} className="bg-black/55">
+      <ResponsiveDialogPanel
+        maxWidthClass="sm:max-w-md"
         role="dialog"
         aria-modal="true"
         aria-labelledby="appointment-modal-title"
+        className="surface-card space-y-4"
       >
         <div className="flex items-start justify-between gap-2">
           <h2 id="appointment-modal-title" className="text-lg font-semibold text-text-primary pr-2">
@@ -194,7 +196,7 @@ export function AppointmentBookingModal({
           </p>
         </div>
 
-        <div className="grid grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div>
             <label className="block text-sm font-medium text-text-secondary mb-1">
               {t('startLabel')}
@@ -240,7 +242,7 @@ export function AppointmentBookingModal({
 
         {error && <p className="text-sm text-red-400">{error}</p>}
 
-        <div className="flex flex-wrap items-center gap-2 justify-between">
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
           {editingAppointment && canDelete && onDelete ? (
             <Button
               type="button"
@@ -248,14 +250,21 @@ export function AppointmentBookingModal({
               onClick={() => void onDelete()}
               disabled={loading || deleting}
               isLoading={deleting}
+              fullWidth
+              className="sm:w-auto"
             >
               {tCommon('delete')}
             </Button>
-          ) : (
-            <span />
-          )}
-          <div className="flex gap-2 ml-auto">
-            <Button type="button" variant="ghost" onClick={onClose} disabled={loading || deleting}>
+          ) : null}
+          <div className="flex flex-col-reverse sm:flex-row gap-2 sm:ml-auto w-full sm:w-auto">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onClose}
+              disabled={loading || deleting}
+              fullWidth
+              className="sm:w-auto"
+            >
               {tCommon('cancel')}
             </Button>
             <Button
@@ -264,12 +273,14 @@ export function AppointmentBookingModal({
               onClick={() => void handleSubmit()}
               isLoading={loading}
               disabled={deleting}
+              fullWidth
+              className="sm:w-auto"
             >
               {tCommon('save')}
             </Button>
           </div>
         </div>
-      </div>
-    </div>
+      </ResponsiveDialogPanel>
+    </ResponsiveDialogOverlay>
   );
 }

frontend/src/components/ui/auth/AuthPageShell.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { TopBarControls } from '@/components/ui/shared/TopBarControls';
+
+type AuthPageShellProps = {
+  header: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export function AuthPageShell({ header, children }: AuthPageShellProps) {
+  return (
+    <div className="relative min-h-[100dvh] app-web-bg flex flex-col justify-center px-4 pb-8 pt-16 sm:px-6 sm:py-12 sm:pt-12 lg:px-8">
+      <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-10">
+        <TopBarControls />
+      </div>
+
+      <div className="w-full max-w-md mx-auto">
+        {header}
+        <div className="mt-6 sm:mt-8">{children}</div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ui/auth/OrganizationDetailsFields.tsx

@@ -48,7 +48,7 @@ export function OrganizationDetailsFields({
           {t('organizationType')}
         </label>
         <input type="hidden" {...register('organizationType')} />
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <button
             type="button"
             onClick={() => {

frontend/src/components/ui/auth/RegistrationProgressSteps.tsx

@@ -17,11 +17,11 @@ export function RegistrationProgressSteps({
   const t = useTranslations('auth');
 
   return (
-    <div className="mb-8">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center">
+    <div className="mb-6 sm:mb-8">
+      <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:flex sm:justify-between">
+        <div className="flex items-center min-w-0">
           <div
-            className={`w-8 h-8 rounded-full flex items-center justify-center ${
+            className={`w-7 h-7 sm:w-8 sm:h-8 shrink-0 rounded-full flex items-center justify-center text-sm ${
               step >= 1
                 ? 'bg-primary text-primary-contrast'
                 : 'bg-background-secondary text-text-secondary border border-border'
@@ -30,17 +30,17 @@ export function RegistrationProgressSteps({
             1
           </div>
           <div
-            className={`ml-2 text-sm font-medium ${
+            className={`ml-1.5 sm:ml-2 text-xs sm:text-sm font-medium truncate ${
               step >= 1 ? 'text-primary' : 'text-text-muted'
             }`}
           >
             {firstLabel ?? t('stepAccount')}
           </div>
         </div>
-        <ChevronRight className="h-5 w-5 text-text-muted icon-flat" />
-        <div className="flex items-center">
+        <ChevronRight className="h-4 w-4 sm:h-5 sm:w-5 text-text-muted icon-flat shrink-0" />
+        <div className="flex items-center min-w-0 justify-end sm:justify-start">
           <div
-            className={`w-8 h-8 rounded-full flex items-center justify-center ${
+            className={`w-7 h-7 sm:w-8 sm:h-8 shrink-0 rounded-full flex items-center justify-center text-sm ${
               step >= 2
                 ? 'bg-primary text-primary-contrast'
                 : 'bg-background-secondary text-text-secondary border border-border'
@@ -49,7 +49,7 @@ export function RegistrationProgressSteps({
             2
           </div>
           <div
-            className={`ml-2 text-sm font-medium ${
+            className={`ml-1.5 sm:ml-2 text-xs sm:text-sm font-medium truncate ${
               step >= 2 ? 'text-primary' : 'text-text-muted'
             }`}
           >

frontend/src/components/ui/dashboard/DashboardAccountMenu.tsx

@@ -101,7 +101,7 @@ export function DashboardAccountMenu() {
       {open && (
         <div
           role="menu"
-          className="absolute right-0 mt-2 w-72 rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-2 shadow-lg z-[200] backdrop-blur-sm"
+          className="absolute right-0 mt-2 w-[min(18rem,calc(100vw-1.5rem))] rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-2 shadow-lg z-[200] backdrop-blur-sm"
         >
           <div className="px-3 py-2 border-b border-border/60">
             <p className="text-xs text-text-muted">{t('signedIn')}</p>

frontend/src/components/ui/lab/CaseDetailPanel.tsx

@@ -83,7 +83,7 @@ export function CaseDetailPanel({
 
   return (
     <div className="space-y-4">
-      <header className="flex flex-wrap items-start justify-between gap-4 border-b border-border pb-3">
+      <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between border-b border-border pb-3">
         <div className="min-w-0 flex-1 space-y-1">
           <h2 className="text-lg font-semibold text-text-primary">
             {formatPatientName(labCase.patient)}
@@ -114,7 +114,7 @@ export function CaseDetailPanel({
           </div>
         </div>
 
-        <div className="flex shrink-0 flex-col items-end gap-2">
+        <div className="flex w-full sm:w-auto shrink-0 flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-start gap-2">
           {showCommentsButton && onCommentsClick ? (
             <Button type="button" variant="outline" size="sm" onClick={onCommentsClick}>
               <MessageSquare className="h-4 w-4 me-1.5" />
@@ -136,7 +136,7 @@ export function CaseDetailPanel({
             <button
               type="button"
               onClick={() => setAttachmentsDialogOpen(true)}
-              className="aspect-square w-32 cursor-pointer rounded-[var(--radius-md)] border border-border/60 overflow-hidden transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              className="aspect-square w-24 sm:w-32 cursor-pointer rounded-[var(--radius-md)] border border-border/60 overflow-hidden transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
               title={previewAttachment.fileName}
               aria-label={t('viewAttachments')}
             >

frontend/src/components/ui/lab/LabCaseAttachmentsDialog.tsx

@@ -4,6 +4,10 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Download, FileText } from 'lucide-react';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import {
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPanel,
+} from '@/components/ui/shared/ResponsiveDialog';
 import { Button } from '@/components/ui/shared/Button';
 import type { LabCaseAttachmentMeta } from '@/types/cases';
 
@@ -159,12 +163,13 @@ export function LabCaseAttachmentsDialog({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-      <div
-        className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+    <ResponsiveDialogOverlay onBackdropClick={onClose}>
+      <ResponsiveDialogPanel
+        maxWidthClass="sm:max-w-3xl"
         role="dialog"
         aria-modal="true"
         aria-labelledby="case-attachments-title"
+        className="space-y-4"
       >
         <div className="flex items-start justify-between gap-3">
           <div>
@@ -173,7 +178,7 @@ export function LabCaseAttachmentsDialog({
             </h2>
             <p className="text-sm text-text-muted mt-1">{t('attachmentsDialogSubtitle')}</p>
           </div>
-          <div className="flex items-center gap-2 shrink-0">
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 shrink-0">
             {sortedAttachments.length > 1 ? (
               <Button
                 type="button"
@@ -205,7 +210,7 @@ export function LabCaseAttachmentsDialog({
             ))}
           </div>
         )}
-      </div>
-    </div>
+      </ResponsiveDialogPanel>
+    </ResponsiveDialogOverlay>
   );
 }

frontend/src/components/ui/organizations/ConnectionCaseHistoryContent.tsx

@@ -10,6 +10,7 @@ import { organizationApi } from '@/lib/api/organization';
 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 { SearchBar } from '@/components/ui/shared/SearchBar';
 import { ToastStack } from '@/components/ui/shared/Toast';
 import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
@@ -51,6 +52,7 @@ export function ConnectionCaseHistoryContent({
     totalPages: 1,
   });
   const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
   const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
   const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
   const [loadingList, setLoadingList] = useState(false);
@@ -152,6 +154,12 @@ export function ConnectionCaseHistoryContent({
     };
   }, [selectedCaseId, connection.id, showError, setError]);
 
+  useEffect(() => {
+    if (!selectedCaseId) {
+      setMobileDetailOpen(false);
+    }
+  }, [selectedCaseId]);
+
   function scrollToComments() {
     document.getElementById('case-comments')?.scrollIntoView({ behavior: 'smooth' });
   }
@@ -193,7 +201,7 @@ export function ConnectionCaseHistoryContent({
       </div>
 
       <div>
-        <h1 className="text-2xl font-semibold text-text-primary">
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">
           {t('caseHistoryTitle', { name: connection.organizationName })}
         </h1>
         <p className="text-sm text-text-secondary mt-1">
@@ -204,7 +212,11 @@ export function ConnectionCaseHistoryContent({
       <ToastStack {...toastMessages} />
 
       <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}
@@ -229,7 +241,10 @@ export function ConnectionCaseHistoryContent({
                     <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'
@@ -292,7 +307,14 @@ export function ConnectionCaseHistoryContent({
           ) : 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">{tCases('selectCaseHint')}</p>
           ) : loadingDetail || !selectedCase ? (

frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx

@@ -2,6 +2,11 @@
 
 import { useTranslations } from 'next-intl';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import { Card } from '@/components/ui/shared/Card';
+import {
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPanel,
+} from '@/components/ui/shared/ResponsiveDialog';
 import { ToastStack, type ToastMessages } from '@/components/ui/shared/Toast';
 import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
 import { Badge, organizationConnectionStatusVariant } from '@/components/ui/shared/Badge';
@@ -51,12 +56,13 @@ export function InvitationHistoryDialog({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-      <div
-        className="w-full max-w-[min(56rem,calc(100vw-15rem))] max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+    <ResponsiveDialogOverlay onBackdropClick={onClose}>
+      <ResponsiveDialogPanel
+        maxWidthClass="sm:max-w-4xl"
         role="dialog"
         aria-modal="true"
         aria-labelledby="invitation-history-title"
+        className="space-y-4"
       >
         <div className="flex items-start justify-between gap-3">
           <h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary pr-2">
@@ -72,6 +78,35 @@ export function InvitationHistoryDialog({
         ) : items.length === 0 ? (
           <p className="text-sm text-text-secondary">{t('historyEmpty')}</p>
         ) : (
+          <>
+            <ul className="space-y-3 lg:hidden">
+              {items.map((inv) => (
+                <li key={inv.id}>
+                  <Card padding="sm" className="space-y-2">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <p className="font-medium text-text-primary truncate">{inv.organizationName}</p>
+                        <p className="text-sm text-text-secondary truncate mt-0.5">{inv.ownerEmail}</p>
+                        <p className="text-xs text-text-muted mt-1">{formatTableDate(inv.createdAt)}</p>
+                      </div>
+                      <Badge variant={organizationConnectionStatusVariant(inv.status)} fixedWidth={false}>
+                        {formatInvitationStatusLabel(inv.status)}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-end pt-1 border-t border-border/60">
+                      <CopyInvitationLinkButton
+                        invitation={inv}
+                        copied={copiedId === inv.id}
+                        copying={copyingInvitationId === inv.id}
+                        onCopy={() => onCopy(inv)}
+                      />
+                    </div>
+                  </Card>
+                </li>
+              ))}
+            </ul>
+
+            <div className="hidden lg:block">
               <Table
                 headers={
                   <tr>
@@ -119,8 +154,10 @@ export function InvitationHistoryDialog({
                   </>
                 }
               />
+            </div>
+          </>
         )}
-      </div>
-    </div>
+      </ResponsiveDialogPanel>
+    </ResponsiveDialogOverlay>
   );
 }

frontend/src/components/ui/organizations/OrganizationConnectionsMobileList.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { Check, History, Trash2, UserPlus, X } from 'lucide-react';
+import type {
+  CounterpartItemDto,
+  CounterpartSearchResultDto,
+} from '@/lib/api/organization';
+import { Badge, organizationConnectionStatusVariant } from '@/components/ui/shared/Badge';
+import { Button } from '@/components/ui/shared/Button';
+import { Card } from '@/components/ui/shared/Card';
+import { Input } from '@/components/ui/shared/Input';
+import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
+import type { InvitationLinkTarget } from '@/components/invitations/organizationInviteLinks';
+
+type OrganizationConnectionsMobileListProps = {
+  loading: boolean;
+  mode: 'existing' | 'search';
+  existingRows: CounterpartItemDto[];
+  searchResults: CounterpartSearchResultDto[];
+  currentOrganizationId: string;
+  counterpart: string;
+  pendingConnectionRowId: string | null;
+  deleteConnectionRowId: string | null;
+  copiedId: string | null;
+  copyingInvitationId: string | null;
+  showInviteForm: boolean;
+  manualOrganizationName: string;
+  manualOwnerEmail: string;
+  inviteLoading: boolean;
+  formatConnectionStatusLabel: (row: CounterpartItemDto, orgId: string) => string;
+  formatTableDate: (value: string) => string;
+  getInvitationTarget: (row: CounterpartItemDto) => InvitationLinkTarget | null;
+  onCopyInvitation: (row: CounterpartItemDto) => void;
+  onRespond: (rowId: string, action: 'ACCEPT' | 'REJECT') => void;
+  onViewCaseHistory: (row: CounterpartItemDto) => void;
+  onDeleteConnection: (rowId: string) => void;
+  onSendConnectionRequest: (orgId: string) => void;
+  onToggleInviteForm: () => void;
+  onManualOrganizationNameChange: (value: string) => void;
+  onManualOwnerEmailChange: (value: string) => void;
+  onSendInvite: () => void;
+  labels: {
+    loading: string;
+    emptyConnections: string;
+    noDirectoryResults: string;
+    hideInvitationFields: string;
+    sendInvitationLink: string;
+    counterpartNameLabel: string;
+    ownerEmailLabel: string;
+    sendInvitation: string;
+    sendRequest: string;
+    acceptRequest: string;
+    declineRequest: string;
+    viewCaseHistory: string;
+    removeConnection: string;
+    statusToday: string;
+    statusFound: string;
+  };
+};
+
+export function OrganizationConnectionsMobileList({
+  loading,
+  mode,
+  existingRows,
+  searchResults,
+  currentOrganizationId,
+  counterpart,
+  pendingConnectionRowId,
+  deleteConnectionRowId,
+  copiedId,
+  copyingInvitationId,
+  showInviteForm,
+  manualOrganizationName,
+  manualOwnerEmail,
+  inviteLoading,
+  formatConnectionStatusLabel,
+  formatTableDate,
+  getInvitationTarget,
+  onCopyInvitation,
+  onRespond,
+  onViewCaseHistory,
+  onDeleteConnection,
+  onSendConnectionRequest,
+  onToggleInviteForm,
+  onManualOrganizationNameChange,
+  onManualOwnerEmailChange,
+  onSendInvite,
+  labels,
+}: OrganizationConnectionsMobileListProps) {
+  if (loading) {
+    return <p className="text-sm text-text-secondary lg:hidden">{labels.loading}</p>;
+  }
+
+  if (mode === 'existing') {
+    if (existingRows.length === 0) {
+      return (
+        <p className="text-sm text-text-secondary lg:hidden surface-card p-4">
+          {labels.emptyConnections}
+        </p>
+      );
+    }
+
+    return (
+      <ul className="space-y-3 lg:hidden">
+        {existingRows.map((row) => {
+          const canRespond =
+            row.status === 'PENDING' &&
+            row.requestedByOrganizationId !== null &&
+            row.requestedByOrganizationId !== currentOrganizationId;
+          const invitationTarget = getInvitationTarget(row);
+
+          return (
+            <li key={row.id}>
+              <Card padding="sm" className="space-y-3">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="font-medium text-text-primary truncate">{row.organizationName}</p>
+                    <p className="text-sm text-text-secondary truncate mt-0.5">{row.ownerEmail}</p>
+                    <p className="text-xs text-text-muted mt-1">{formatTableDate(row.createdAt)}</p>
+                  </div>
+                  <Badge variant={organizationConnectionStatusVariant(row.status)} fixedWidth={false}>
+                    {formatConnectionStatusLabel(row, currentOrganizationId)}
+                  </Badge>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-1.5 pt-1 border-t border-border/60">
+                  {invitationTarget ? (
+                    <CopyInvitationLinkButton
+                      invitation={invitationTarget}
+                      copied={copiedId === invitationTarget.id}
+                      copying={copyingInvitationId === invitationTarget.id}
+                      onCopy={() => onCopyInvitation(row)}
+                    />
+                  ) : null}
+                  {canRespond ? (
+                    <>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
+                        disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
+                        onClick={() => onRespond(row.id, 'ACCEPT')}
+                        aria-label={labels.acceptRequest}
+                        title={labels.acceptRequest}
+                      >
+                        <Check className="w-4 h-4" />
+                      </button>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
+                        disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
+                        onClick={() => onRespond(row.id, 'REJECT')}
+                        aria-label={labels.declineRequest}
+                        title={labels.declineRequest}
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </>
+                  ) : null}
+                  {row.status === 'ACTIVE' ? (
+                    <>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
+                        onClick={() => onViewCaseHistory(row)}
+                        aria-label={labels.viewCaseHistory}
+                        title={labels.viewCaseHistory}
+                      >
+                        <History className="w-4 h-4" />
+                      </button>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
+                        disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
+                        onClick={() => onDeleteConnection(row.id)}
+                        aria-label={labels.removeConnection}
+                        title={labels.removeConnection}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </>
+                  ) : null}
+                </div>
+              </Card>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  if (searchResults.length > 0) {
+    return (
+      <ul className="space-y-3 lg:hidden">
+        {searchResults.map((result) => (
+          <li key={result.id}>
+            <Card padding="sm" className="space-y-3">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="font-medium text-text-primary truncate">{result.name}</p>
+                  <p className="text-sm text-text-secondary truncate mt-0.5">{result.owner.email}</p>
+                  <p className="text-xs text-text-muted mt-1">{labels.statusToday}</p>
+                </div>
+                <Badge variant="default" fixedWidth={false}>
+                  {labels.statusFound}
+                </Badge>
+              </div>
+              <div className="flex justify-end pt-1 border-t border-border/60">
+                <button
+                  type="button"
+                  className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
+                  disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== result.id}
+                  onClick={() => onSendConnectionRequest(result.id)}
+                  aria-label={labels.sendRequest}
+                  title={labels.sendRequest}
+                >
+                  <UserPlus className="w-4 h-4" />
+                </button>
+              </div>
+            </Card>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <div className="lg:hidden surface-card p-4 space-y-3">
+      <p className="text-sm text-text-secondary">{labels.noDirectoryResults}</p>
+      <Button type="button" onClick={onToggleInviteForm} className="w-full sm:w-auto">
+        {showInviteForm ? labels.hideInvitationFields : labels.sendInvitationLink}
+      </Button>
+      {showInviteForm ? (
+        <div className="grid gap-3">
+          <Input
+            label={labels.counterpartNameLabel}
+            value={manualOrganizationName}
+            onChange={(e) => onManualOrganizationNameChange(e.target.value)}
+          />
+          <Input
+            label={labels.ownerEmailLabel}
+            type="email"
+            value={manualOwnerEmail}
+            onChange={(e) => onManualOwnerEmailChange(e.target.value)}
+          />
+          <Button
+            type="button"
+            isLoading={inviteLoading}
+            disabled={!manualOrganizationName.trim() || !manualOwnerEmail.trim()}
+            onClick={onSendInvite}
+            className="w-full"
+          >
+            {labels.sendInvitation}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx

@@ -62,7 +62,7 @@ export function OrganizationSelectorContent() {
     <div className="space-y-6">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-semibold text-text-primary">{t('selectorTitle')}</h1>
+          <h1 className="text-2xl sm:text-3xl font-semibold text-text-primary">{t('selectorTitle')}</h1>
           <p className="text-text-secondary mt-2">
             {canCreateOrganization ? t('selectorSubtitleWithCreate') : t('selectorSubtitleSelectOnly')}
           </p>
@@ -71,6 +71,7 @@ export function OrganizationSelectorContent() {
           <Button
             type="button"
             variant={isCreateOpen ? 'outline' : 'primary'}
+            className="w-full sm:w-auto shrink-0"
             onClick={() => {
               clearError();
               setIsCreateOpen((prev) => !prev);
@@ -82,7 +83,7 @@ export function OrganizationSelectorContent() {
       </div>
 
       {canCreateOrganization && isCreateOpen && (
-        <div className="surface-card p-6 space-y-4">
+        <div className="surface-card p-4 sm:p-6 space-y-4">
           <Input
             label={tAuth('organizationName')}
             value={organizationName}
@@ -102,7 +103,7 @@ export function OrganizationSelectorContent() {
             <label className="block text-sm font-medium text-text-secondary mb-2">
               {tAuth('organizationType')}
             </label>
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <button
                 type="button"
                 onClick={() => setOrganizationType('CLINIC')}
@@ -132,13 +133,14 @@ export function OrganizationSelectorContent() {
               <p className="text-sm text-red-600">{error}</p>
             </div>
           )}
-          <div className="flex justify-end">
+          <div className="flex flex-col sm:flex-row sm:justify-end">
             <Button
               type="button"
               variant="primary"
               onClick={handleCreateOrganization}
               isLoading={isLoading}
               disabled={!organizationName.trim() || !organizationEmail.trim()}
+              className="w-full sm:w-auto"
             >
               {t('createAndContinue')}
             </Button>
@@ -158,14 +160,14 @@ export function OrganizationSelectorContent() {
             <button
               key={org.id}
               onClick={() => selectOrganization(org.id)}
-              className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
+              className="surface-card p-4 sm:p-6 transition-all text-left flex items-center gap-3 sm:gap-4 hover:border-primary/60 w-full min-w-0"
             >
-              <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
+              <div className="p-2.5 sm:p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary shrink-0">
                 {getIcon(org.type)}
               </div>
 
-              <div className="flex-1">
-                <h3 className="text-lg font-semibold text-text-primary">
+              <div className="flex-1 min-w-0">
+                <h3 className="text-base sm:text-lg font-semibold text-text-primary truncate">
                   {org.name}
                 </h3>
                 <p className="text-sm text-text-secondary">
@@ -173,7 +175,7 @@ export function OrganizationSelectorContent() {
                 </p>
               </div>
 
-              <div className="text-primary text-sm">
+              <div className="text-primary text-sm shrink-0 hidden sm:block">
                 {t('continueArrow')}
               </div>
             </button>

frontend/src/components/ui/patient/CreatePatientModal.tsx

@@ -4,6 +4,10 @@ import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
 import { Input } from '@/components/ui/shared/Input';
+import {
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPanel,
+} from '@/components/ui/shared/ResponsiveDialog';
 import { CreatePatientInput } from '@/types/patient';
 import { isValidMobile, normalizeMobile } from '@/lib/phone';
 
@@ -63,17 +67,23 @@ function CreatePatientFormFields({
         />
       </div>
 
-      <div className="flex gap-2">
+      <div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center">
         <Button
           variant="primary"
           onClick={onSubmit}
           isLoading={loading}
-          disabled={!formData.firstName || !formData.lastName || !isValidMobile(normalizeMobile(formData.mobile || '') ?? '')}
+          fullWidth
+          className="sm:w-auto"
+          disabled={
+            !formData.firstName ||
+            !formData.lastName ||
+            !isValidMobile(normalizeMobile(formData.mobile || '') ?? '')
+          }
         >
           {t('savePatient')}
         </Button>
         {showCancel && (
-          <Button variant="ghost" onClick={onClose}>
+          <Button variant="ghost" onClick={onClose} fullWidth className="sm:w-auto">
             {tCommon('cancel')}
           </Button>
         )}
@@ -99,21 +109,13 @@ export function CreatePatientModal({
 
   if (variant === 'dialog') {
     return (
-      <div
-        className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/55"
-        role="presentation"
-        onMouseDown={(e) => {
-          if (e.target === e.currentTarget) {
-            onClose();
-          }
-        }}
-      >
-        <div
-          className="surface-card w-full max-w-[min(56rem,calc(100vw-15rem))] p-5 space-y-4 shadow-xl"
+      <ResponsiveDialogOverlay onBackdropClick={onClose} zIndexClass="z-[60]" className="bg-black/55">
+        <ResponsiveDialogPanel
+          maxWidthClass="sm:max-w-2xl"
           role="dialog"
           aria-modal="true"
           aria-labelledby="create-patient-dialog-title"
-          onMouseDown={(e) => e.stopPropagation()}
+          className="surface-card space-y-4"
         >
           <div className="flex items-start justify-between gap-2">
             <h2
@@ -133,13 +135,13 @@ export function CreatePatientModal({
             loading={loading}
             showCancel={false}
           />
-        </div>
-      </div>
+        </ResponsiveDialogPanel>
+      </ResponsiveDialogOverlay>
     );
   }
 
   return (
-    <div className="surface-card p-4 space-y-3">
+    <div className="surface-card p-3 sm:p-4 space-y-3">
       <CreatePatientFormFields
         formData={formData}
         onChange={onChange}

frontend/src/components/ui/shared/Dropdown.tsx

@@ -32,7 +32,7 @@ export const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>(
               form-select w-full appearance-none rounded-[var(--radius-md)] border
               ${error ? 'border-red-500' : 'border-border'}
               bg-background-card text-text-primary
-              pl-4 pr-14 py-2 text-sm
+              pl-4 pr-14 py-2.5 sm:py-2 text-base sm:text-sm
               focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-all duration-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]

frontend/src/components/ui/shared/Input.tsx

@@ -91,7 +91,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
               ${error ? 'border-red-500' : 'border-border'}
               bg-background-secondary/90 text-text-primary
 
-              ${icon ? 'pl-10' : 'pl-4'} ${resolvedEndIcon ? 'pr-10' : 'pr-4'} py-2
+              ${icon ? 'pl-10' : 'pl-4'} ${resolvedEndIcon ? 'pr-10' : 'pr-4'} py-2.5 sm:py-2 text-base sm:text-sm
 
               placeholder:text-text-muted
 

frontend/src/components/ui/shared/LanguageToggle.tsx

@@ -70,7 +70,7 @@ export function LanguageToggle() {
         <ul
           role="listbox"
           aria-label={t('selectLanguage')}
-          className="absolute right-0 z-[200] mt-2 min-w-[10rem] rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-1 shadow-lg backdrop-blur-sm"
+          className="absolute right-0 z-[200] mt-2 w-[min(10rem,calc(100vw-2rem))] rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-1 shadow-lg backdrop-blur-sm"
         >
           {LOCALE_OPTIONS.map((option) => {
             const selected = option === locale;

frontend/src/components/ui/shared/MobileDetailBackButton.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { ChevronLeft } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+export function MobileDetailBackButton({ onClick }: { onClick: () => void }) {
+  const t = useTranslations('common');
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="lg:hidden inline-flex items-center gap-1 text-sm text-primary hover:opacity-90 mb-3"
+    >
+      <ChevronLeft className="h-4 w-4 icon-flat" />
+      {t('back')}
+    </button>
+  );
+}

frontend/src/components/ui/shared/ResponsiveDialog.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+type ResponsiveDialogOverlayProps = {
+  children: ReactNode;
+  onBackdropClick?: () => void;
+  className?: string;
+  zIndexClass?: string;
+};
+
+type ResponsiveDialogPanelProps = {
+  children: ReactNode;
+  className?: string;
+  maxWidthClass?: string;
+  role?: string;
+  'aria-modal'?: boolean | 'true' | 'false';
+  'aria-labelledby'?: string;
+};
+
+export function ResponsiveDialogOverlay({
+  children,
+  onBackdropClick,
+  className = '',
+  zIndexClass = 'z-50',
+}: ResponsiveDialogOverlayProps) {
+  return (
+    <div
+      className={`fixed inset-0 ${zIndexClass} flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50 ${className}`.trim()}
+      role="presentation"
+      onMouseDown={(e) => {
+        if (onBackdropClick && e.target === e.currentTarget) {
+          onBackdropClick();
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ResponsiveDialogPanel({
+  children,
+  className = '',
+  maxWidthClass = 'sm:max-w-lg',
+  role,
+  'aria-modal': ariaModal,
+  'aria-labelledby': ariaLabelledby,
+}: ResponsiveDialogPanelProps) {
+  return (
+    <div
+      className={`w-full ${maxWidthClass} 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 ${className}`.trim()}
+      role={role}
+      aria-modal={ariaModal}
+      aria-labelledby={ariaLabelledby}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}

frontend/src/components/ui/shared/SearchBar.tsx

@@ -21,8 +21,8 @@ export function SearchBar({
   embedded = false,
 }: SearchBarProps) {
   const field = (
-    <div className={`flex gap-4 items-center ${embedded ? '' : 'flex-1'}`}>
-      <div className="flex-1 min-w-0">
+    <div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 sm:items-center ${embedded ? '' : 'flex-1'}`}>
+      <div className="flex-1 min-w-0 w-full">
         <Input
           placeholder={placeholder}
           value={value}
@@ -33,7 +33,7 @@ export function SearchBar({
           icon={<Search className="h-4 w-4 icon-flat" />}
         />
       </div>
-      {actions && <div className="flex gap-2 shrink-0">{actions}</div>}
+      {actions && <div className="flex flex-wrap gap-2 shrink-0 w-full sm:w-auto">{actions}</div>}
     </div>
   );
 
@@ -41,5 +41,5 @@ export function SearchBar({
     return field;
   }
 
-  return <div className="surface-card p-4">{field}</div>;
+  return <div className="surface-card p-3 sm:p-4">{field}</div>;
 }

frontend/src/components/ui/shared/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   CreditCard,
   Package,
   ListTodo,
+  X,
 } from 'lucide-react';
 import type { OrgTypeName } from '@/components/shared/permissions';
 import { useAuth } from '@/lib/hooks/useAuth';
@@ -36,7 +37,12 @@ type MenuItem = {
   orgTypes: OrgTypeName[];
 };
 
-function Sidebar() {
+type SidebarProps = {
+  mobileOpen?: boolean;
+  onClose?: () => void;
+};
+
+function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
   const t = useTranslations('nav');
   const tCommon = useTranslations('common');
   const pathname = usePathname();
@@ -87,9 +93,23 @@ function Sidebar() {
   );
 
   return (
-    <aside className="w-56 min-w-56 shrink-0 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col">
-      <div className="h-[71px] px-4 flex items-center">
-        <h1 className="text-lg font-medium tracking-tight">{tCommon('appName')}</h1>
+    <aside
+      className={`fixed inset-y-0 left-0 z-50 w-56 min-w-56 shrink-0 bg-background-secondary/95 border-r border-border text-text-primary flex flex-col backdrop-blur-sm transition-transform duration-200 ease-out lg:relative lg:translate-x-0 lg:z-auto ${
+        mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+      }`}
+    >
+      <div className="h-[71px] px-4 flex items-center justify-between gap-2">
+        <h1 className="text-lg font-medium tracking-tight truncate">{tCommon('appName')}</h1>
+        {onClose ? (
+          <button
+            type="button"
+            className="lg:hidden inline-flex items-center justify-center h-9 w-9 rounded-[var(--radius-md)] border border-border/70 text-text-primary hover:bg-background-card/80 shrink-0"
+            onClick={onClose}
+            aria-label={tCommon('closeMenu')}
+          >
+            <X className="h-5 w-5 icon-flat" />
+          </button>
+        ) : null}
       </div>
       <div className="mx-4 border-b border-border/70" />
 
@@ -105,6 +125,7 @@ function Sidebar() {
               key={item.path}
               href={item.path}
               prefetch
+              onClick={onClose}
               className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] border transition-colors ${
                 isActive
                   ? 'bg-primary-soft border-primary/60 text-text-primary'

frontend/src/components/ui/shared/Table.tsx

@@ -9,7 +9,8 @@ interface TableProps {
 export function Table({ headers, body, footer }: TableProps) {
   return (
     <div className="surface-card overflow-hidden">
-      <table className="w-full">
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[36rem] [&_th]:px-3 sm:[&_th]:px-6 [&_td]:px-3 sm:[&_td]:px-6">
           <thead className="bg-background-secondary/70 border-b border-border">
             {headers}
           </thead>
@@ -17,8 +18,9 @@ export function Table({ headers, body, footer }: TableProps) {
             {body}
           </tbody>
         </table>
+      </div>
       {footer && (
-        <div className="px-6 py-3 border-t border-border/60 flex justify-between items-center bg-background-secondary/70">
+        <div className="px-3 sm:px-6 py-3 border-t border-border/60 flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-center bg-background-secondary/70">
           {footer}
         </div>
       )}

frontend/src/components/ui/treatment/AppointmentsStrip.tsx

@@ -104,7 +104,7 @@ export function AppointmentsStrip({
               padding="none"
               style={treatmentTypeBannerStyle(a.purpose, purposeIndex < 0 ? 0 : purposeIndex)}
               className={`
-                text-left rounded-[var(--radius-sm)] px-3 py-2 min-w-[200px] max-w-[280px] transition-shadow min-h-[52px]
+                text-left rounded-[var(--radius-sm)] px-3 py-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[280px] transition-shadow min-h-[52px]
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                 ${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
               `}

frontend/src/components/ui/treatment/LabCasesDispatchPanel.tsx

@@ -445,7 +445,7 @@ export function LabCasesDispatchPanel({
                                       e.target.value,
                                     )
                                   }
-                                  className={`${FORM_SELECT_CLASS} w-full min-w-[160px]`}
+                                  className={`${FORM_SELECT_CLASS} w-full min-w-0 sm:min-w-[160px]`}
                                 >
                                   <option value="">{t('prosthesisSelectPlaceholder')}</option>
                                   {prosthesisOptions.map((opt) => (

frontend/src/components/ui/treatment/TreatmentDetailsEditor.tsx

@@ -60,13 +60,20 @@ export function TreatmentDetailsEditor({
   const showPendingLabHint = isLabDependent && !locked && !readOnly;
 
   return (
-    <div className="surface-card p-4 space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-3">
+    <div className="surface-card p-3 sm:p-4 space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
         <div>
           <h3 className="text-sm font-semibold text-text-primary">{t('detailsTitle')}</h3>
           <p className="text-xs text-text-muted mt-0.5">{t('detailsSubtitle')}</p>
         </div>
-        <Button type="button" variant="primary" disabled={!canEdit || disabled} onClick={onAddDetail}>
+        <Button
+          type="button"
+          variant="primary"
+          disabled={!canEdit || disabled}
+          onClick={onAddDetail}
+          fullWidth
+          className="sm:w-auto shrink-0"
+        >
           {t('addDetail')}
         </Button>
       </div>

frontend/src/components/ui/treatment/TreatmentWorkspace.tsx

@@ -1107,7 +1107,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   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">
           {canEdit ? t('subtitleEditPhase4') : t('subtitleReadOnly')}
         </p>

frontend/src/styles/globals.css

@@ -251,6 +251,14 @@ select.form-select,
 select {
   color: var(--color-text-primary);
   background-color: var(--color-background-card);
+  font-size: 1rem;
+}
+
+@media (min-width: 640px) {
+  select.form-select,
+  select {
+    font-size: 0.875rem;
+  }
 }
 
 select option {