diff --git a/src/Web/autopilot-monitor-web/app/apps/components/InstallsTab.tsx b/src/Web/autopilot-monitor-web/app/apps/components/InstallsTab.tsx
index 81492e94..741d79a2 100644
--- a/src/Web/autopilot-monitor-web/app/apps/components/InstallsTab.tsx
+++ b/src/Web/autopilot-monitor-web/app/apps/components/InstallsTab.tsx
@@ -275,55 +275,57 @@ export default function InstallsTab({ scope, timeRange }: InstallsTabProps) {
           </div>
         ) : (
           <>
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
-              <tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                <th className="px-4 py-3 cursor-pointer select-none" onClick={() => toggleSort("appName")}>App {sortIndicator("appName")}</th>
-                <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("totalInstalls")}>Installs {sortIndicator("totalInstalls")}</th>
-                <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("succeeded")}>Succeeded {sortIndicator("succeeded")}</th>
-                <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("failed")}>Failed {sortIndicator("failed")}</th>
-                <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("failureRate")}>Failure Rate {sortIndicator("failureRate")}</th>
-                <th
-                  className="px-4 py-3 cursor-pointer select-none text-right"
-                  onClick={() => toggleSort("avgDurationSeconds")}
-                  title="Average duration of the final install attempt. IME evaluation passes and time queued behind other apps are not counted."
-                >
-                  Avg Install Time {sortIndicator("avgDurationSeconds")}
-                </th>
-                <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("trend")}>Trend {sortIndicator("trend")}</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-200">
-              {pageRows.map((row) => (
-                <tr key={row.appName} onClick={() => openApp(row.appName)} className="hover:bg-gray-50 cursor-pointer text-sm">
-                  <td className="px-4 py-3 text-gray-900">
-                    <span className="font-medium">{row.appName}</span>
-                    {appTypeBadge(row.appType)}
-                  </td>
-                  <td className="px-4 py-3 text-right text-gray-700">{row.totalInstalls}</td>
-                  <td className="px-4 py-3 text-right text-emerald-700">
-                    {row.succeeded}
-                    {row.skipped > 0 && (
-                      <span
-                        className="ml-1 text-xs text-gray-400 dark:text-gray-500"
-                        title={`${row.skipped} skipped (not applicable) — excluded from failure rate and durations`}
-                      >
-                        +{row.skipped}s
-                      </span>
-                    )}
-                  </td>
-                  <td className="px-4 py-3 text-right text-red-700">{row.failed}</td>
-                  <td className="px-4 py-3 text-right">
-                    <span className={row.failureRate >= 20 ? "text-red-700 font-semibold" : row.failureRate >= 5 ? "text-amber-700" : "text-gray-700"}>
-                      {row.failureRate.toFixed(1)}%
-                    </span>
-                  </td>
-                  <td className="px-4 py-3 text-right text-gray-700">{formatDuration(row.avgDurationSeconds, "—")}</td>
-                  <td className="px-4 py-3 text-right">{trendBadge(row)}</td>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <th className="px-4 py-3 cursor-pointer select-none" onClick={() => toggleSort("appName")}>App {sortIndicator("appName")}</th>
+                  <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("totalInstalls")}>Installs {sortIndicator("totalInstalls")}</th>
+                  <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("succeeded")}>Succeeded {sortIndicator("succeeded")}</th>
+                  <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("failed")}>Failed {sortIndicator("failed")}</th>
+                  <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("failureRate")}>Failure Rate {sortIndicator("failureRate")}</th>
+                  <th
+                    className="px-4 py-3 cursor-pointer select-none text-right"
+                    onClick={() => toggleSort("avgDurationSeconds")}
+                    title="Average duration of the final install attempt. IME evaluation passes and time queued behind other apps are not counted."
+                  >
+                    Avg Install Time {sortIndicator("avgDurationSeconds")}
+                  </th>
+                  <th className="px-4 py-3 cursor-pointer select-none text-right" onClick={() => toggleSort("trend")}>Trend {sortIndicator("trend")}</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {pageRows.map((row) => (
+                  <tr key={row.appName} onClick={() => openApp(row.appName)} className="hover:bg-gray-50 cursor-pointer text-sm">
+                    <td className="px-4 py-3 text-gray-900">
+                      <span className="font-medium">{row.appName}</span>
+                      {appTypeBadge(row.appType)}
+                    </td>
+                    <td className="px-4 py-3 text-right text-gray-700">{row.totalInstalls}</td>
+                    <td className="px-4 py-3 text-right text-emerald-700">
+                      {row.succeeded}
+                      {row.skipped > 0 && (
+                        <span
+                          className="ml-1 text-xs text-gray-400 dark:text-gray-500"
+                          title={`${row.skipped} skipped (not applicable) — excluded from failure rate and durations`}
+                        >
+                          +{row.skipped}s
+                        </span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-right text-red-700">{row.failed}</td>
+                    <td className="px-4 py-3 text-right">
+                      <span className={row.failureRate >= 20 ? "text-red-700 font-semibold" : row.failureRate >= 5 ? "text-amber-700" : "text-gray-700"}>
+                        {row.failureRate.toFixed(1)}%
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-right text-gray-700">{formatDuration(row.avgDurationSeconds, "—")}</td>
+                    <td className="px-4 py-3 text-right">{trendBadge(row)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
           {pageCount > 1 && (
             <div className="flex items-center justify-between px-4 py-3 text-sm text-gray-600 border-t border-gray-200">
               <span>{filteredAndSorted.length} apps · page {page + 1} of {pageCount}</span>
diff --git a/src/Web/autopilot-monitor-web/app/apps/components/InventoryTab.tsx b/src/Web/autopilot-monitor-web/app/apps/components/InventoryTab.tsx
index 1ca9d538..8e50c6a6 100644
--- a/src/Web/autopilot-monitor-web/app/apps/components/InventoryTab.tsx
+++ b/src/Web/autopilot-monitor-web/app/apps/components/InventoryTab.tsx
@@ -151,36 +151,38 @@ export default function InventoryTab({ scope }: { scope: SoftwareTabScope }) {
           </div>
         ) : (
           <>
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
-                <tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  <th className="px-4 py-3">Software</th>
-                  <th className="px-4 py-3">Version</th>
-                  <th className="px-4 py-3">Publisher</th>
-                  <th className="px-4 py-3 text-right">Sessions</th>
-                  <th className="px-4 py-3 text-right">Last seen</th>
-                  <th className="px-4 py-3 text-right">CPE</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200">
-                {pageRows.map((row, idx) => (
-                  <tr key={`${row.normalizedVendor}|${row.normalizedName}|${row.normalizedVersion}|${idx}`} className="text-sm">
-                    <td className="px-4 py-3 text-gray-900 font-medium">{row.displayName || row.normalizedName}</td>
-                    <td className="px-4 py-3 text-gray-700">{row.normalizedVersion || "—"}</td>
-                    <td className="px-4 py-3 text-gray-700">{row.publisher || "—"}</td>
-                    <td className="px-4 py-3 text-right text-gray-700">{row.sessionCount}</td>
-                    <td className="px-4 py-3 text-right text-gray-500">{formatDate(row.lastSeenAt)}</td>
-                    <td className="px-4 py-3 text-right">
-                      {row.cpeUri ? (
-                        <span className="inline-block px-1.5 py-0.5 rounded text-xs bg-emerald-100 text-emerald-800">mapped</span>
-                      ) : (
-                        <span className="inline-block px-1.5 py-0.5 rounded text-xs bg-amber-100 text-amber-800">unmatched</span>
-                      )}
-                    </td>
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <th className="px-4 py-3">Software</th>
+                    <th className="px-4 py-3">Version</th>
+                    <th className="px-4 py-3">Publisher</th>
+                    <th className="px-4 py-3 text-right">Sessions</th>
+                    <th className="px-4 py-3 text-right">Last seen</th>
+                    <th className="px-4 py-3 text-right">CPE</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {pageRows.map((row, idx) => (
+                    <tr key={`${row.normalizedVendor}|${row.normalizedName}|${row.normalizedVersion}|${idx}`} className="text-sm">
+                      <td className="px-4 py-3 text-gray-900 font-medium">{row.displayName || row.normalizedName}</td>
+                      <td className="px-4 py-3 text-gray-700">{row.normalizedVersion || "—"}</td>
+                      <td className="px-4 py-3 text-gray-700">{row.publisher || "—"}</td>
+                      <td className="px-4 py-3 text-right text-gray-700">{row.sessionCount}</td>
+                      <td className="px-4 py-3 text-right text-gray-500">{formatDate(row.lastSeenAt)}</td>
+                      <td className="px-4 py-3 text-right">
+                        {row.cpeUri ? (
+                          <span className="inline-block px-1.5 py-0.5 rounded text-xs bg-emerald-100 text-emerald-800">mapped</span>
+                        ) : (
+                          <span className="inline-block px-1.5 py-0.5 rounded text-xs bg-amber-100 text-amber-800">unmatched</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
             {pageCount > 1 && (
               <div className="flex items-center justify-between px-4 py-3 text-sm text-gray-600 border-t border-gray-200">
                 <span>{filtered.length} titles · page {page + 1} of {pageCount}</span>
diff --git a/src/Web/autopilot-monitor-web/app/apps/detail/page.tsx b/src/Web/autopilot-monitor-web/app/apps/detail/page.tsx
index 217973e2..245cfb3f 100644
--- a/src/Web/autopilot-monitor-web/app/apps/detail/page.tsx
+++ b/src/Web/autopilot-monitor-web/app/apps/detail/page.tsx
@@ -459,12 +459,12 @@ function AppDetailContent() {
             >
               ← Back to all apps
             </button>
-            <div className="flex items-center justify-between">
-              <div>
-                <h1 className="text-2xl font-normal text-gray-900 inline-flex items-center">
-                  {appName}
+            <div className="flex flex-wrap items-center justify-between gap-y-3">
+              <div className="min-w-0">
+                <h1 className="text-2xl font-normal text-gray-900 flex flex-wrap items-center gap-x-3 gap-y-1">
+                  <span className="break-words">{appName}</span>
                   {analytics?.appType && (
-                    <span className="ml-3 px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-800">
+                    <span className="px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-800">
                       {analytics.appType}
                     </span>
                   )}
@@ -475,7 +475,7 @@ function AppDetailContent() {
                     : ""}
                 </p>
               </div>
-              <div className="flex items-center gap-3">
+              <div className="flex flex-wrap items-center gap-2 sm:gap-3">
                 <TenantScopeSelector scope={scope} allowAggregated />
                 {([7, 30, 90] as const).map((d) => (
                   <button
@@ -679,69 +679,71 @@ function AppDetailContent() {
               {/* Top failure codes table */}
               <Card title="Top Failure Codes">
                 {analytics.topFailureCodes.length > 0 ? (
-                  <table className="min-w-full text-sm">
-                    <thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
-                      <tr>
-                        <th className="px-3 py-2">Code</th>
-                        <th className="px-3 py-2">Description</th>
-                        <th className="px-3 py-2">Exit Code</th>
-                        <th className="px-3 py-2 text-right">Count</th>
-                        <th className="px-3 py-2">Sample Message</th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-100">
-                      {analytics.topFailureCodes.map((row) => {
-                        const entry = getErrorCodeEntry(row.code);
-                        return (
-                          <tr key={row.code}>
-                            <td className="px-3 py-2 font-mono text-xs text-gray-900">
-                              {formatErrorCode(row.code)}
-                            </td>
-                            <td className="px-3 py-2 text-gray-700">
-                              {entry ? (
-                                <>
-                                  {entry.description}
-                                  <span
-                                    className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
-                                      entry.confidence === "high"
-                                        ? "bg-emerald-100 text-emerald-800"
-                                        : entry.confidence === "medium"
-                                        ? "bg-amber-100 text-amber-800"
-                                        : "bg-gray-100 text-gray-700"
-                                    }`}
-                                    title={`Source: ${entry.source}`}
-                                  >
-                                    {entry.confidence}
-                                  </span>
-                                </>
-                              ) : (
-                                <span className="text-gray-400">Unknown code</span>
-                              )}
-                            </td>
-                            <td className="px-3 py-2 font-mono text-xs">
-                              {row.exitCode != null ? (
-                                (() => {
-                                  const ec = getErrorCodeEntry(row.exitCode);
-                                  return (
-                                    <span title={ec?.description ?? ""}>
-                                      {row.exitCode}
-                                      {ec ? ` (${ec.description.slice(0, 24)}${ec.description.length > 24 ? "…" : ""})` : ""}
+                  <div className="overflow-x-auto">
+                    <table className="min-w-full text-sm">
+                      <thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
+                        <tr>
+                          <th className="px-3 py-2">Code</th>
+                          <th className="px-3 py-2">Description</th>
+                          <th className="px-3 py-2">Exit Code</th>
+                          <th className="px-3 py-2 text-right">Count</th>
+                          <th className="px-3 py-2">Sample Message</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-gray-100">
+                        {analytics.topFailureCodes.map((row) => {
+                          const entry = getErrorCodeEntry(row.code);
+                          return (
+                            <tr key={row.code}>
+                              <td className="px-3 py-2 font-mono text-xs text-gray-900">
+                                {formatErrorCode(row.code)}
+                              </td>
+                              <td className="px-3 py-2 text-gray-700">
+                                {entry ? (
+                                  <>
+                                    {entry.description}
+                                    <span
+                                      className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
+                                        entry.confidence === "high"
+                                          ? "bg-emerald-100 text-emerald-800"
+                                          : entry.confidence === "medium"
+                                          ? "bg-amber-100 text-amber-800"
+                                          : "bg-gray-100 text-gray-700"
+                                      }`}
+                                      title={`Source: ${entry.source}`}
+                                    >
+                                      {entry.confidence}
                                     </span>
-                                  );
-                                })()
-                              ) : (
-                                <span className="text-gray-400">—</span>
-                              )}
-                            </td>
-                            <td className="px-3 py-2 text-right text-gray-900">{row.count}</td>
-                            <td className="px-3 py-2 text-gray-500 text-xs truncate max-w-md" title={row.sampleMessage}>
-                              {row.sampleMessage || "—"}
-                            </td>
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </table>
+                                  </>
+                                ) : (
+                                  <span className="text-gray-400">Unknown code</span>
+                                )}
+                              </td>
+                              <td className="px-3 py-2 font-mono text-xs">
+                                {row.exitCode != null ? (
+                                  (() => {
+                                    const ec = getErrorCodeEntry(row.exitCode);
+                                    return (
+                                      <span title={ec?.description ?? ""}>
+                                        {row.exitCode}
+                                        {ec ? ` (${ec.description.slice(0, 24)}${ec.description.length > 24 ? "…" : ""})` : ""}
+                                      </span>
+                                    );
+                                  })()
+                                ) : (
+                                  <span className="text-gray-400">—</span>
+                                )}
+                              </td>
+                              <td className="px-3 py-2 text-right text-gray-900">{row.count}</td>
+                              <td className="px-3 py-2 text-gray-500 text-xs truncate max-w-md" title={row.sampleMessage}>
+                                {row.sampleMessage || "—"}
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
                 ) : (
                   <EmptyState text="No failures recorded" />
                 )}
@@ -750,44 +752,46 @@ function AppDetailContent() {
               {/* Device model breakdown */}
               <Card title="Device Model Correlation">
                 {analytics.deviceModelBreakdown.length > 0 ? (
-                  <table className="min-w-full text-sm">
-                    <thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
-                      <tr>
-                        <th className="px-3 py-2">Manufacturer</th>
-                        <th className="px-3 py-2">Model</th>
-                        <th className="px-3 py-2 text-right">Installs</th>
-                        <th className="px-3 py-2 text-right">Failed</th>
-                        <th className="px-3 py-2 text-right">Failure Rate</th>
-                        <th className="px-3 py-2 text-right">Lift vs baseline</th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-100">
-                      {analytics.deviceModelBreakdown.map((row, i) => (
-                        <tr key={`${row.manufacturer}-${row.model}-${i}`}>
-                          <td className="px-3 py-2 text-gray-700">{row.manufacturer}</td>
-                          <td className="px-3 py-2 text-gray-900">{row.model}</td>
-                          <td className="px-3 py-2 text-right text-gray-700">{row.installs}</td>
-                          <td className="px-3 py-2 text-right text-red-700">{row.failed}</td>
-                          <td className="px-3 py-2 text-right text-gray-900">
-                            {row.failureRate.toFixed(1)}%
-                          </td>
-                          <td className="px-3 py-2 text-right">
-                            <span
-                              className={`px-2 py-0.5 rounded text-xs font-medium ${
-                                row.liftVsBaseline >= 2
-                                  ? "bg-red-100 text-red-800"
-                                  : row.liftVsBaseline >= 1.2
-                                  ? "bg-amber-100 text-amber-800"
-                                  : "bg-emerald-100 text-emerald-800"
-                              }`}
-                            >
-                              {row.liftVsBaseline.toFixed(2)}×
-                            </span>
-                          </td>
+                  <div className="overflow-x-auto">
+                    <table className="min-w-full text-sm">
+                      <thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
+                        <tr>
+                          <th className="px-3 py-2">Manufacturer</th>
+                          <th className="px-3 py-2">Model</th>
+                          <th className="px-3 py-2 text-right">Installs</th>
+                          <th className="px-3 py-2 text-right">Failed</th>
+                          <th className="px-3 py-2 text-right">Failure Rate</th>
+                          <th className="px-3 py-2 text-right">Lift vs baseline</th>
                         </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                      </thead>
+                      <tbody className="divide-y divide-gray-100">
+                        {analytics.deviceModelBreakdown.map((row, i) => (
+                          <tr key={`${row.manufacturer}-${row.model}-${i}`}>
+                            <td className="px-3 py-2 text-gray-700">{row.manufacturer}</td>
+                            <td className="px-3 py-2 text-gray-900">{row.model}</td>
+                            <td className="px-3 py-2 text-right text-gray-700">{row.installs}</td>
+                            <td className="px-3 py-2 text-right text-red-700">{row.failed}</td>
+                            <td className="px-3 py-2 text-right text-gray-900">
+                              {row.failureRate.toFixed(1)}%
+                            </td>
+                            <td className="px-3 py-2 text-right">
+                              <span
+                                className={`px-2 py-0.5 rounded text-xs font-medium ${
+                                  row.liftVsBaseline >= 2
+                                    ? "bg-red-100 text-red-800"
+                                    : row.liftVsBaseline >= 1.2
+                                    ? "bg-amber-100 text-amber-800"
+                                    : "bg-emerald-100 text-emerald-800"
+                                }`}
+                              >
+                                {row.liftVsBaseline.toFixed(2)}×
+                              </span>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
                 ) : (
                   <EmptyState text="Not enough installs per device model to compute correlation" />
                 )}
@@ -795,7 +799,7 @@ function AppDetailContent() {
 
               {/* Affected sessions panel */}
               <Card title="Affected Sessions">
-                <div className="flex items-center gap-2 mb-3">
+                <div className="flex flex-wrap items-center gap-2 mb-3">
                   {(["failed", "all", "succeeded"] as const).map((s) => (
                     <button
                       key={s}
@@ -868,117 +872,119 @@ function AppDetailContent() {
                   <div className="text-center text-gray-500 p-4">Loading sessions…</div>
                 ) : sessions && sessions.items.length > 0 ? (
                   <>
-                    <table className="min-w-full text-sm">
-                      <thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
-                        <tr>
-                          {activeSessionColumns.map((col) => (
-                            <th
-                              key={col.key}
-                              className={`px-3 py-2 ${col.numeric ? "text-right" : ""}`}
-                            >
-                              {col.label}
-                            </th>
-                          ))}
-                        </tr>
-                      </thead>
-                      <tbody className="divide-y divide-gray-100">
-                        {sessions.items.map((row) => {
-                          const entry = row.failureCode ? getErrorCodeEntry(row.failureCode) : null;
-                          return (
-                            <tr
-                              key={`${row.tenantId}-${row.sessionId}`}
-                              onClick={() => router.push(sessionUrl(row.sessionId))}
-                              className="hover:bg-gray-50 cursor-pointer"
-                            >
-                              {activeSessionColumns.map((col) => {
-                                switch (col.key) {
-                                  case "device":
-                                    return (
-                                      <td key={col.key} className="px-3 py-2 text-gray-900">
-                                        {row.deviceName || "—"}
-                                      </td>
-                                    );
-                                  case "tenant": {
-                                    const friendly = tenantLookup.get(row.tenantId);
-                                    return (
-                                      <td
-                                        key={col.key}
-                                        className="px-3 py-2 text-gray-700 text-xs"
-                                        title={row.tenantId}
-                                      >
-                                        {friendly || `${row.tenantId.substring(0, 8)}…`}
-                                      </td>
-                                    );
-                                  }
-                                  case "model":
-                                    return (
-                                      <td key={col.key} className="px-3 py-2 text-gray-700 text-xs">
-                                        {row.manufacturer} {row.model}
-                                      </td>
-                                    );
-                                  case "version":
-                                    return (
-                                      <td key={col.key} className="px-3 py-2 text-gray-700 font-mono text-xs">
-                                        {row.appVersion || "—"}
-                                      </td>
-                                    );
-                                  case "status":
-                                    return (
-                                      <td key={col.key} className="px-3 py-2">
-                                        <span
-                                          className={`px-2 py-0.5 rounded text-xs ${
-                                            row.status === "Failed"
-                                              ? "bg-red-100 text-red-800"
-                                              : row.status === "Succeeded"
-                                              ? "bg-emerald-100 text-emerald-800"
-                                              : "bg-gray-100 text-gray-700"
-                                          }`}
+                    <div className="overflow-x-auto">
+                      <table className="min-w-full text-sm">
+                        <thead className="text-left text-xs text-gray-500 uppercase tracking-wider border-b">
+                          <tr>
+                            {activeSessionColumns.map((col) => (
+                              <th
+                                key={col.key}
+                                className={`px-3 py-2 ${col.numeric ? "text-right" : ""}`}
+                              >
+                                {col.label}
+                              </th>
+                            ))}
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-100">
+                          {sessions.items.map((row) => {
+                            const entry = row.failureCode ? getErrorCodeEntry(row.failureCode) : null;
+                            return (
+                              <tr
+                                key={`${row.tenantId}-${row.sessionId}`}
+                                onClick={() => router.push(sessionUrl(row.sessionId))}
+                                className="hover:bg-gray-50 cursor-pointer"
+                              >
+                                {activeSessionColumns.map((col) => {
+                                  switch (col.key) {
+                                    case "device":
+                                      return (
+                                        <td key={col.key} className="px-3 py-2 text-gray-900">
+                                          {row.deviceName || "—"}
+                                        </td>
+                                      );
+                                    case "tenant": {
+                                      const friendly = tenantLookup.get(row.tenantId);
+                                      return (
+                                        <td
+                                          key={col.key}
+                                          className="px-3 py-2 text-gray-700 text-xs"
+                                          title={row.tenantId}
                                         >
-                                          {row.status}
-                                        </span>
-                                      </td>
-                                    );
-                                  case "attempts":
-                                    return (
-                                      <td key={col.key} className="px-3 py-2 text-right text-gray-700">
-                                        {row.attemptNumber || "—"}
-                                      </td>
-                                    );
-                                  case "failureCode":
-                                    return (
-                                      <td key={col.key} className="px-3 py-2 font-mono text-xs">
-                                        {row.failureCode ? (
-                                          <span title={entry?.description ?? ""}>
-                                            {formatErrorCode(row.failureCode)}
-                                          </span>
-                                        ) : (
-                                          <span className="text-gray-400">—</span>
-                                        )}
-                                      </td>
-                                    );
-                                  case "duration":
-                                    return (
-                                      <td key={col.key} className="px-3 py-2 text-right text-gray-700">
-                                        {formatDuration(row.durationSeconds)}
-                                        {(row.installPassCount ?? 0) > 1 && (
+                                          {friendly || `${row.tenantId.substring(0, 8)}…`}
+                                        </td>
+                                      );
+                                    }
+                                    case "model":
+                                      return (
+                                        <td key={col.key} className="px-3 py-2 text-gray-700 text-xs">
+                                          {row.manufacturer} {row.model}
+                                        </td>
+                                      );
+                                    case "version":
+                                      return (
+                                        <td key={col.key} className="px-3 py-2 text-gray-700 font-mono text-xs">
+                                          {row.appVersion || "—"}
+                                        </td>
+                                      );
+                                    case "status":
+                                      return (
+                                        <td key={col.key} className="px-3 py-2">
                                           <span
-                                            className="ml-1 text-xs text-gray-400 dark:text-gray-500"
-                                            title={`Processed in ${row.installPassCount} IME passes (evaluation + install) — install time counts only the final attempt`}
+                                            className={`px-2 py-0.5 rounded text-xs ${
+                                              row.status === "Failed"
+                                                ? "bg-red-100 text-red-800"
+                                                : row.status === "Succeeded"
+                                                ? "bg-emerald-100 text-emerald-800"
+                                                : "bg-gray-100 text-gray-700"
+                                            }`}
                                           >
-                                            ×{row.installPassCount}
+                                            {row.status}
                                           </span>
-                                        )}
-                                      </td>
-                                    );
-                                  default:
-                                    return null;
-                                }
-                              })}
-                            </tr>
-                          );
-                        })}
-                      </tbody>
-                    </table>
+                                        </td>
+                                      );
+                                    case "attempts":
+                                      return (
+                                        <td key={col.key} className="px-3 py-2 text-right text-gray-700">
+                                          {row.attemptNumber || "—"}
+                                        </td>
+                                      );
+                                    case "failureCode":
+                                      return (
+                                        <td key={col.key} className="px-3 py-2 font-mono text-xs">
+                                          {row.failureCode ? (
+                                            <span title={entry?.description ?? ""}>
+                                              {formatErrorCode(row.failureCode)}
+                                            </span>
+                                          ) : (
+                                            <span className="text-gray-400">—</span>
+                                          )}
+                                        </td>
+                                      );
+                                    case "duration":
+                                      return (
+                                        <td key={col.key} className="px-3 py-2 text-right text-gray-700">
+                                          {formatDuration(row.durationSeconds)}
+                                          {(row.installPassCount ?? 0) > 1 && (
+                                            <span
+                                              className="ml-1 text-xs text-gray-400 dark:text-gray-500"
+                                              title={`Processed in ${row.installPassCount} IME passes (evaluation + install) — install time counts only the final attempt`}
+                                            >
+                                              ×{row.installPassCount}
+                                            </span>
+                                          )}
+                                        </td>
+                                      );
+                                    default:
+                                      return null;
+                                  }
+                                })}
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
                     {/* Pagination */}
                     {sessions.total > SESSIONS_PAGE_SIZE && (
                       <div className="flex items-center justify-between mt-3 text-xs text-gray-600">
diff --git a/src/Web/autopilot-monitor-web/app/sla/page.tsx b/src/Web/autopilot-monitor-web/app/sla/page.tsx
index 86651aa8..8708a003 100644
--- a/src/Web/autopilot-monitor-web/app/sla/page.tsx
+++ b/src/Web/autopilot-monitor-web/app/sla/page.tsx
@@ -494,18 +494,18 @@ function OverallStatusBanner({ metrics }: { metrics: SlaMetricsResponse }) {
   const metCount = checks.filter(c => c.met).length;
 
   return (
-    <div className={`rounded-lg shadow p-4 mb-8 flex items-center justify-between ${
+    <div className={`rounded-lg shadow p-4 mb-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between ${
       allMet
         ? "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800"
         : "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
     }`}>
-      <div className="flex items-center space-x-3">
+      <div className="flex items-center gap-3">
         {allMet ? (
-          <svg className="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg className="h-8 w-8 shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
           </svg>
         ) : (
-          <svg className="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg className="h-8 w-8 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
           </svg>
         )}
@@ -518,19 +518,19 @@ function OverallStatusBanner({ metrics }: { metrics: SlaMetricsResponse }) {
           </span>
         </div>
       </div>
-      <div className="flex items-center space-x-4">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 sm:justify-end">
         {checks.map((c) => (
-          <div key={c.label} className="flex items-center space-x-1.5">
+          <div key={c.label} className="flex items-center gap-1.5">
             {c.met ? (
-              <svg className="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg className="h-4 w-4 shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
               </svg>
             ) : (
-              <svg className="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg className="h-4 w-4 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
               </svg>
             )}
-            <span className={`text-sm ${c.met ? "text-green-700 dark:text-green-400" : "text-red-700 dark:text-red-400"}`}>
+            <span className={`text-sm whitespace-nowrap ${c.met ? "text-green-700 dark:text-green-400" : "text-red-700 dark:text-red-400"}`}>
               {c.label}
             </span>
           </div>