diff --git a/Services/Main/MainHub.Api/Services/ServiceHistoryService.cs b/Services/Main/MainHub.Api/Services/ServiceHistoryService.cs
index 4efc7c816..5b3d317a2 100644
--- a/Services/Main/MainHub.Api/Services/ServiceHistoryService.cs
+++ b/Services/Main/MainHub.Api/Services/ServiceHistoryService.cs
@@ -255,4 +255,4 @@ Guid serviceHistoryId
       Price = r.Price
     }).ToList();
   }
-}
+}
\ No newline at end of file
diff --git a/Services/Main/MainHub.Api/Validators/CreateVehicleDtoValidator.cs b/Services/Main/MainHub.Api/Validators/CreateVehicleDtoValidator.cs
index 55217e6fc..679e161b6 100644
--- a/Services/Main/MainHub.Api/Validators/CreateVehicleDtoValidator.cs
+++ b/Services/Main/MainHub.Api/Validators/CreateVehicleDtoValidator.cs
@@ -1,4 +1,3 @@
-using System.Data;
 using System.Text.RegularExpressions;
 using FluentValidation;
 using MainHub.Api.DTOs;
@@ -61,12 +60,12 @@ public CreateVehicleDtoValidator()
       .When(x => x.BoughtAt.HasValue);
 
     RuleFor(x => x.EngineCapacity)
-      .NotEmpty()
-      .WithMessage("Engine capacity is required.")
-      .GreaterThan(0)
-      .WithMessage("Engine capacity must be greater than 0.")
-      .LessThanOrEqualTo(10000)
-      .WithMessage("Engine capacity must be less than or equal to 10000.");
+    .NotEmpty().WithMessage("Engine capacity is required.")
+    .LessThanOrEqualTo(10000).WithMessage("Engine capacity must be less than or equal to 10000.")
+    .GreaterThan(0).WithMessage("Engine capacity must be greater than 0.")
+        .When(x => x.FuelType is not FuelType.Electric and not FuelType.Hydrogen)
+    .Equal(0).WithMessage("Engine capacity must be 0 for Electric/Hydrogen vehicles.")
+        .When(x => x.FuelType is FuelType.Electric or FuelType.Hydrogen);
 
     RuleFor(x => x.Mileage)
       .NotEmpty()
diff --git a/apps/AdminWebUi/src/App.tsx b/apps/AdminWebUi/src/App.tsx
index 9630cc9cf..57d38541c 100644
--- a/apps/AdminWebUi/src/App.tsx
+++ b/apps/AdminWebUi/src/App.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter } from "react-router-dom";
 import { AuthProvider } from "./auth/AuthContext";
 import { StoProvider } from "./context/StoContext";
 import { StoVehicleProvider } from "./context/StoVehicleContext";
+import { BookingRequestProvider } from "./context/BookingRequestContext";
 import { queryClient } from "./lib/queryClient";
 import { AppRouter } from "./routes/AppRouter";
 import { persistor, store } from "./store";
@@ -19,7 +20,9 @@ function App() {
             <AuthProvider>
               <StoProvider>
                 <StoVehicleProvider>
-                  <AppRouter />
+                  <BookingRequestProvider>
+                    <AppRouter />
+                  </BookingRequestProvider>
                 </StoVehicleProvider>
               </StoProvider>
             </AuthProvider>
diff --git a/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.module.css b/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.module.css
new file mode 100644
index 000000000..4cd79dee1
--- /dev/null
+++ b/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.module.css
@@ -0,0 +1,233 @@
+.section {
+  margin: 20px 24px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-lg);
+  background-color: #1a1c1e;
+  overflow: hidden;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px;
+  border: none;
+  background: linear-gradient(
+    180deg,
+    rgba(74, 222, 158, 0.04) 0%,
+    transparent 100%
+  );
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.toggle:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.toggleMain {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.toggleTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+
+.countBadge {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background-color: rgba(74, 222, 158, 0.12);
+  border: 1px solid rgba(74, 222, 158, 0.24);
+}
+
+.toggleHint {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.4;
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text-secondary);
+  transition:
+    transform 0.3s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.chevronExpanded {
+  transform: rotate(180deg);
+  color: var(--accent-primary);
+  border-color: rgba(74, 222, 158, 0.24);
+}
+
+.bodyWrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.32s ease;
+}
+
+.bodyWrapperExpanded {
+  grid-template-rows: 1fr;
+}
+
+.bodyInner {
+  overflow: hidden;
+  min-height: 0;
+  opacity: 0;
+  transition: opacity 0.24s ease;
+}
+
+.bodyWrapperExpanded .bodyInner {
+  opacity: 1;
+}
+
+.body {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.scrollArea {
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 12px 16px 16px;
+}
+
+.scrollArea::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.12);
+  border-radius: 3px;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.entry {
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  gap: 12px;
+  padding: 12px 4px;
+  position: relative;
+}
+
+.entry:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: 9px;
+  top: 32px;
+  bottom: -4px;
+  width: 2px;
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 1px;
+}
+
+.marker {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 4px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
+}
+
+.entryMain {
+  min-width: 0;
+}
+
+.entryHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.entryTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.35;
+}
+
+.entryTime {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.entryMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.actorName {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.actorRole {
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--text-tertiary);
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.entryDescription {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+.empty {
+  padding: 20px 16px;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  text-align: center;
+}
diff --git a/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.tsx b/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.tsx
new file mode 100644
index 000000000..baf778282
--- /dev/null
+++ b/apps/AdminWebUi/src/components/ActivityLog/ActivityLog.tsx
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import type { StoVehicleActivityEntry, StoVehicleActivityType } from "../../types/stoVehicle";
+import { ACTIVITY_ACTOR_ROLE_LABELS } from "../../utils/stoVehicleActivityLog";
+import { formatEventDateTime } from "../../utils/stoVehicleLabels";
+import styles from "./ActivityLog.module.css";
+
+const ACTIVITY_DOT_COLORS: Record<StoVehicleActivityType, string> = {
+  vehicle_created: "#6e7681",
+  appointment_scheduled: "#58a6ff",
+  vehicle_arrived: "#4ade9e",
+  status_changed: "#a371f7",
+  mechanic_assigned: "#d29922",
+  approval_requested: "#ffa657",
+  approval_sent_to_client: "#58a6ff",
+  approval_approved: "#4ade9e",
+  approval_rejected: "#f85149",
+};
+
+interface ActivityLogProps {
+  entries: StoVehicleActivityEntry[];
+  hint?: string;
+}
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <span
+      className={[styles.chevron, expanded ? styles.chevronExpanded : ""]
+        .filter(Boolean)
+        .join(" ")}
+      aria-hidden="true"
+    >
+      <svg viewBox="0 0 16 16" width="14" height="14">
+        <path
+          d="M4 6l4 4 4-4"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </span>
+  );
+}
+
+export function ActivityLog({
+  entries,
+  hint = "Повний життєвий цикл: статуси, погодження, призначення механіка",
+}: ActivityLogProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <section className={styles.section}>
+      <button
+        type="button"
+        className={styles.toggle}
+        onClick={() => setIsExpanded((current) => !current)}
+        aria-expanded={isExpanded}
+      >
+        <div>
+          <div className={styles.toggleMain}>
+            <h3 className={styles.toggleTitle}>Журнал дій</h3>
+            <span className={styles.countBadge}>{entries.length}</span>
+          </div>
+          <p className={styles.toggleHint}>{hint}</p>
+        </div>
+        <ChevronIcon expanded={isExpanded} />
+      </button>
+
+      <div
+        className={[
+          styles.bodyWrapper,
+          isExpanded ? styles.bodyWrapperExpanded : "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        <div className={styles.bodyInner}>
+          <div className={styles.body}>
+            {entries.length === 0 ? (
+              <p className={styles.empty}>Записів у журналі поки немає.</p>
+            ) : (
+              <div className={styles.scrollArea}>
+                <ul className={styles.list}>
+                  {entries.map((entry) => (
+                    <li key={entry.id} className={styles.entry}>
+                      <div className={styles.marker}>
+                        <span
+                          className={styles.dot}
+                          style={{ backgroundColor: ACTIVITY_DOT_COLORS[entry.type] }}
+                        />
+                      </div>
+                      <div className={styles.entryMain}>
+                        <div className={styles.entryHeader}>
+                          <p className={styles.entryTitle}>{entry.title}</p>
+                          <time className={styles.entryTime} dateTime={entry.occurredAt}>
+                            {formatEventDateTime(entry.occurredAt)}
+                          </time>
+                        </div>
+                        <div className={styles.entryMeta}>
+                          <span className={styles.actorName}>{entry.actorName}</span>
+                          <span className={styles.actorRole}>
+                            {ACTIVITY_ACTOR_ROLE_LABELS[entry.actorRole]}
+                          </span>
+                        </div>
+                        {entry.description ? (
+                          <p className={styles.entryDescription}>{entry.description}</p>
+                        ) : null}
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/ActivityLog/index.ts b/apps/AdminWebUi/src/components/ActivityLog/index.ts
new file mode 100644
index 000000000..bf5f12d23
--- /dev/null
+++ b/apps/AdminWebUi/src/components/ActivityLog/index.ts
@@ -0,0 +1 @@
+export { ActivityLog } from "./ActivityLog";
diff --git a/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.module.css b/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.module.css
new file mode 100644
index 000000000..535fe375e
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.module.css
@@ -0,0 +1,152 @@
+.card {
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.card:hover {
+  border-color: rgba(74, 222, 158, 0.28);
+  transform: translateY(-1px);
+}
+
+.cardPending {
+  border-color: rgba(255, 166, 87, 0.2);
+}
+
+.cardHeader {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  background-color: rgba(74, 222, 158, 0.1);
+  border-radius: var(--radius-md);
+  color: var(--accent-primary);
+}
+
+.icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.headerContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.titleRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.vehicleTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+
+.plateBadge {
+  flex-shrink: 0;
+  padding: 3px 8px;
+  background-color: #1a4038;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-primary);
+}
+
+.clientName {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.reason {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.metaGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.metaItem {
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.metaLabel {
+  display: block;
+  margin-bottom: 2px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.metaValue {
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.35;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.createdAt {
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.footerMeta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.attachments {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+@media (max-width: 700px) {
+  .metaGrid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.tsx b/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.tsx
new file mode 100644
index 000000000..05490f94f
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestCard/BookingRequestCard.tsx
@@ -0,0 +1,74 @@
+import type { BookingRequest } from "../../types/bookingRequest";
+import {
+  formatPreferredSlot,
+  PARTS_OPTION_LABELS,
+  VISIT_REASON_LABELS,
+} from "../../utils/bookingLabels";
+import { formatEventDateTime, formatStoVehicleTitle } from "../../utils/stoVehicleLabels";
+import { BookingStatusBadge } from "../BookingStatusBadge";
+import styles from "./BookingRequestCard.module.css";
+
+interface BookingRequestCardProps {
+  request: BookingRequest;
+  onOpen: (request: BookingRequest) => void;
+}
+
+export function BookingRequestCard({ request, onOpen }: BookingRequestCardProps) {
+  const title = formatStoVehicleTitle(request.brand, request.model, request.year);
+  const preferredSlot = formatPreferredSlot(request.preferredDate, request.preferredTimeSlot);
+
+  return (
+    <article
+      className={[
+        styles.card,
+        request.status === "pending" ? styles.cardPending : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      onClick={() => onOpen(request)}
+    >
+      <div className={styles.cardHeader}>
+        <div className={styles.icon} aria-hidden="true">
+          <svg viewBox="0 0 24 24">
+            <path
+              d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11zM7 11h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+        <div className={styles.headerContent}>
+          <div className={styles.titleRow}>
+            <h3 className={styles.vehicleTitle}>{title}</h3>
+            <span className={styles.plateBadge}>{request.licensePlate}</span>
+          </div>
+          <p className={styles.clientName}>{request.clientName}</p>
+        </div>
+      </div>
+
+      <p className={styles.reason}>
+        {VISIT_REASON_LABELS[request.visitReason]} — {request.problemDescription}
+      </p>
+
+      <div className={styles.metaGrid}>
+        <div className={styles.metaItem}>
+          <span className={styles.metaLabel}>Зручно водію</span>
+          <span className={styles.metaValue}>{preferredSlot}</span>
+        </div>
+        <div className={styles.metaItem}>
+          <span className={styles.metaLabel}>Запчастини</span>
+          <span className={styles.metaValue}>{PARTS_OPTION_LABELS[request.partsOption]}</span>
+        </div>
+      </div>
+
+      <div className={styles.footer}>
+        <BookingStatusBadge status={request.status} />
+        <div className={styles.footerMeta}>
+          {request.attachmentsCount ? (
+            <span className={styles.attachments}>📎 {request.attachmentsCount}</span>
+          ) : null}
+          <span className={styles.createdAt}>{formatEventDateTime(request.createdAt)}</span>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/BookingRequestCard/index.ts b/apps/AdminWebUi/src/components/BookingRequestCard/index.ts
new file mode 100644
index 000000000..ced5ac6ff
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestCard/index.ts
@@ -0,0 +1 @@
+export { BookingRequestCard } from "./BookingRequestCard";
diff --git a/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.module.css b/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.module.css
new file mode 100644
index 000000000..6f54eabec
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.module.css
@@ -0,0 +1,358 @@
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  min-height: 480px;
+}
+
+.topBar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 24px 20px;
+  border-bottom: 1px solid var(--border-secondary);
+  background: linear-gradient(
+    180deg,
+    rgba(74, 222, 158, 0.06) 0%,
+    transparent 100%
+  );
+}
+
+.topBarMain {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.topBarIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  background-color: rgba(74, 222, 158, 0.12);
+  color: var(--accent-primary);
+}
+
+.topBarIcon svg {
+  width: 26px;
+  height: 26px;
+}
+
+.topBarTitle {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.topBarMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.plateBadge {
+  padding: 4px 10px;
+  background-color: #1a4038;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-primary);
+}
+
+.sourcePill {
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #58a6ff;
+  background-color: rgba(88, 166, 255, 0.14);
+  border: 1px solid rgba(88, 166, 255, 0.28);
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.closeButton:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-quaternary);
+}
+
+.summaryGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.summaryCard {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.summaryLabel {
+  margin: 0 0 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--accent-primary);
+}
+
+.summaryList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+}
+
+.summaryRow {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 12px;
+}
+
+.summaryRow dt {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.summaryRow dd {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.problemSection {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.sectionTitle {
+  margin: 0 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+
+.problemCard {
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.reasonBadge {
+  display: inline-block;
+  margin-bottom: 8px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background-color: rgba(74, 222, 158, 0.12);
+  border: 1px solid rgba(74, 222, 158, 0.24);
+}
+
+.problemText {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.schedulingSection {
+  padding: 20px 24px 24px;
+}
+
+.schedulingGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.preferenceCard,
+.confirmCard {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.preferenceCard {
+  background-color: rgba(88, 166, 255, 0.06);
+  border-color: rgba(88, 166, 255, 0.18);
+}
+
+.confirmCard {
+  background-color: rgba(74, 222, 158, 0.05);
+  border-color: rgba(74, 222, 158, 0.18);
+}
+
+.cardTitle {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.preferenceCard .cardTitle {
+  color: #58a6ff;
+}
+
+.confirmCard .cardTitle {
+  color: var(--accent-primary);
+}
+
+.preferenceValue {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.preferenceHint {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.datetimeInput {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-primary);
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.datetimeInput:focus {
+  outline: none;
+  border-color: var(--border-focus);
+}
+
+.fieldError {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--accent-error);
+}
+
+.noteTextarea {
+  width: 100%;
+  margin-top: 12px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-primary);
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+}
+
+.noteTextarea:focus {
+  outline: none;
+  border-color: var(--border-focus);
+}
+
+.attachmentsNote {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--text-secondary);
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-top: 4px;
+}
+
+.rejectForm {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex-basis: 100%;
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  background-color: rgba(248, 81, 73, 0.06);
+  border: 1px solid rgba(248, 81, 73, 0.18);
+}
+
+.rejectHint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.resolvedBanner {
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.resolvedTitle {
+  margin: 0 0 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.resolvedText {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+.successMessage {
+  margin: 0;
+  flex-basis: 100%;
+  font-size: 13px;
+  color: var(--accent-primary);
+}
+
+@media (max-width: 700px) {
+  .summaryGrid,
+  .schedulingGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .summaryRow {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+}
diff --git a/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.tsx b/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.tsx
new file mode 100644
index 000000000..e8ad5ab46
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestDetailModal/BookingRequestDetailModal.tsx
@@ -0,0 +1,293 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+import { BookingStatusBadge } from "../BookingStatusBadge";
+import type { BookingRequest } from "../../types/bookingRequest";
+import {
+  formatBookingDateTime,
+  formatPreferredSlot,
+  fromDatetimeLocalValue,
+  PARTS_OPTION_LABELS,
+  suggestedAppointmentIso,
+  toDatetimeLocalValue,
+  VISIT_REASON_LABELS,
+} from "../../utils/bookingLabels";
+import { formatEventDateTime, formatStoVehicleTitle } from "../../utils/stoVehicleLabels";
+import styles from "./BookingRequestDetailModal.module.css";
+
+interface BookingRequestDetailModalProps {
+  request: BookingRequest | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (requestId: string, appointmentAt: string, managerNote?: string) => void;
+  onReject: (requestId: string, reason: string) => void;
+}
+
+export function BookingRequestDetailModal({
+  request,
+  isOpen,
+  onClose,
+  onConfirm,
+  onReject,
+}: BookingRequestDetailModalProps) {
+  const [appointmentLocal, setAppointmentLocal] = useState("");
+  const [managerNote, setManagerNote] = useState("");
+  const [appointmentError, setAppointmentError] = useState<string | null>(null);
+  const [showRejectForm, setShowRejectForm] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!request) return;
+    const suggested = suggestedAppointmentIso(request.preferredDate, request.preferredTimeSlot);
+    setAppointmentLocal(toDatetimeLocalValue(suggested));
+    setManagerNote("");
+    setAppointmentError(null);
+    setShowRejectForm(false);
+    setRejectReason("");
+    setSuccessMessage(null);
+  }, [request?.id]);
+
+  if (!request) return null;
+
+  const vehicleTitle = formatStoVehicleTitle(request.brand, request.model, request.year);
+  const preferredSlot = formatPreferredSlot(request.preferredDate, request.preferredTimeSlot);
+  const isPending = request.status === "pending";
+
+  const handleConfirm = () => {
+    if (!appointmentLocal) {
+      setAppointmentError("Вкажіть дату та час запису на СТО");
+      return;
+    }
+
+    setAppointmentError(null);
+    onConfirm(request.id, fromDatetimeLocalValue(appointmentLocal), managerNote);
+    setSuccessMessage("Запис підтверджено. Авто додано до черги зі статусом «Записано».");
+    setShowRejectForm(false);
+  };
+
+  const handleReject = () => {
+    if (!rejectReason.trim()) return;
+    onReject(request.id, rejectReason.trim());
+    setShowRejectForm(false);
+  };
+
+  return (
+    <Modal isOpen={isOpen} title="" onClose={onClose} size="large" hideHeader>
+      <div className={styles.modalContent}>
+        <header className={styles.topBar}>
+          <div className={styles.topBarMain}>
+            <div className={styles.topBarIcon} aria-hidden="true">
+              <svg viewBox="0 0 24 24">
+                <path
+                  d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div>
+              <h2 className={styles.topBarTitle}>Онлайн-запис</h2>
+              <div className={styles.topBarMeta}>
+                <span className={styles.plateBadge}>{request.licensePlate}</span>
+                <BookingStatusBadge status={request.status} />
+                <span className={styles.sourcePill}>Додаток водія</span>
+              </div>
+            </div>
+          </div>
+          <button
+            type="button"
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Закрити"
+          >
+            ×
+          </button>
+        </header>
+
+        <div className={styles.summaryGrid}>
+          <section className={styles.summaryCard}>
+            <h3 className={styles.summaryLabel}>Автомобіль</h3>
+            <dl className={styles.summaryList}>
+              <div className={styles.summaryRow}>
+                <dt>Марка / модель</dt>
+                <dd>{vehicleTitle}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Номер</dt>
+                <dd>{request.licensePlate}</dd>
+              </div>
+              {request.vin ? (
+                <div className={styles.summaryRow}>
+                  <dt>VIN</dt>
+                  <dd>{request.vin}</dd>
+                </div>
+              ) : null}
+              <div className={styles.summaryRow}>
+                <dt>Запчастини</dt>
+                <dd>{PARTS_OPTION_LABELS[request.partsOption]}</dd>
+              </div>
+            </dl>
+          </section>
+
+          <section className={styles.summaryCard}>
+            <h3 className={styles.summaryLabel}>Водій</h3>
+            <dl className={styles.summaryList}>
+              <div className={styles.summaryRow}>
+                <dt>Ім'я</dt>
+                <dd>{request.clientName}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Телефон</dt>
+                <dd>{request.clientPhone ?? "—"}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Надіслано</dt>
+                <dd>{formatEventDateTime(request.createdAt)}</dd>
+              </div>
+              {request.attachmentsCount ? (
+                <div className={styles.summaryRow}>
+                  <dt>Медіа</dt>
+                  <dd>{request.attachmentsCount} фото/відео від водія</dd>
+                </div>
+              ) : null}
+            </dl>
+          </section>
+        </div>
+
+        <section className={styles.problemSection}>
+          <h3 className={styles.sectionTitle}>Опис проблеми</h3>
+          <div className={styles.problemCard}>
+            <span className={styles.reasonBadge}>
+              {VISIT_REASON_LABELS[request.visitReason]}
+            </span>
+            <p className={styles.problemText}>{request.problemDescription}</p>
+          </div>
+        </section>
+
+        <section className={styles.schedulingSection}>
+          <h3 className={styles.sectionTitle}>Планування візиту</h3>
+
+          {request.attachmentsCount ? (
+            <p className={styles.attachmentsNote}>
+              Водій додав {request.attachmentsCount} медіафайл(ів) до запиту. Перегляд вкладень
+              буде доступний після підключення API.
+            </p>
+          ) : null}
+
+          <div className={styles.schedulingGrid}>
+            <div className={styles.preferenceCard}>
+              <h4 className={styles.cardTitle}>Зручний час для водія</h4>
+              <p className={styles.preferenceValue}>{preferredSlot}</p>
+              <p className={styles.preferenceHint}>
+                Врахуйте побажання клієнта при підтвердженні запису
+              </p>
+            </div>
+
+            <div className={styles.confirmCard}>
+              <h4 className={styles.cardTitle}>Реальний час на СТО</h4>
+              {isPending ? (
+                <>
+                  <input
+                    type="datetime-local"
+                    className={styles.datetimeInput}
+                    value={appointmentLocal}
+                    onChange={(event) => {
+                      setAppointmentLocal(event.target.value);
+                      setAppointmentError(null);
+                    }}
+                  />
+                  {appointmentError ? (
+                    <p className={styles.fieldError}>{appointmentError}</p>
+                  ) : null}
+                  <textarea
+                    className={styles.noteTextarea}
+                    placeholder="Коментар менеджера (необов'язково), напр.: підтвердив по телефону"
+                    value={managerNote}
+                    onChange={(event) => setManagerNote(event.target.value)}
+                    rows={2}
+                  />
+                </>
+              ) : request.managerAppointmentAt ? (
+                <p className={styles.preferenceValue}>
+                  {formatBookingDateTime(request.managerAppointmentAt)}
+                </p>
+              ) : (
+                <p className={styles.preferenceHint}>Час запису не вказано</p>
+              )}
+            </div>
+          </div>
+
+          {isPending ? (
+            <div className={styles.actions}>
+              <Button onClick={handleConfirm}>Підтвердити та додати в чергу</Button>
+              {!showRejectForm ? (
+                <Button variant="secondary" onClick={() => setShowRejectForm(true)}>
+                  Відхилити запит
+                </Button>
+              ) : (
+                <div className={styles.rejectForm}>
+                  <p className={styles.rejectHint}>
+                    Вкажіть причину відхилення — водій побачить її в додатку
+                  </p>
+                  <textarea
+                    className={styles.noteTextarea}
+                    placeholder="Причина відхилення"
+                    value={rejectReason}
+                    onChange={(event) => setRejectReason(event.target.value)}
+                    rows={2}
+                  />
+                  <div className={styles.actions}>
+                    <Button
+                      variant="secondary"
+                      onClick={handleReject}
+                      disabled={!rejectReason.trim()}
+                    >
+                      Підтвердити відхилення
+                    </Button>
+                    <Button variant="ghost" onClick={() => setShowRejectForm(false)}>
+                      Скасувати
+                    </Button>
+                  </div>
+                </div>
+              )}
+              {successMessage ? (
+                <p className={styles.successMessage}>
+                  {successMessage}{" "}
+                  <Link to="/sto/queue">Перейти до черги СТО →</Link>
+                </p>
+              ) : null}
+            </div>
+          ) : (
+            <div className={styles.resolvedBanner}>
+              {request.status === "confirmed" ? (
+                <>
+                  <p className={styles.resolvedTitle}>Запис підтверджено</p>
+                  <p className={styles.resolvedText}>
+                    {request.managerAppointmentAt
+                      ? `Прийом заплановано на ${formatBookingDateTime(request.managerAppointmentAt)}.`
+                      : "Авто додано до черги СТО."}
+                    {request.managerNote ? ` ${request.managerNote}` : ""}
+                    {request.queueVehicleId ? (
+                      <>
+                        {" "}
+                        <Link to="/sto/queue">Відкрити чергу СТО →</Link>
+                      </>
+                    ) : null}
+                  </p>
+                </>
+              ) : (
+                <>
+                  <p className={styles.resolvedTitle}>Запит відхилено</p>
+                  <p className={styles.resolvedText}>
+                    {request.rejectionReason ?? "Причину не вказано."}
+                  </p>
+                </>
+              )}
+            </div>
+          )}
+        </section>
+      </div>
+    </Modal>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/BookingRequestDetailModal/index.ts b/apps/AdminWebUi/src/components/BookingRequestDetailModal/index.ts
new file mode 100644
index 000000000..135849a2a
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingRequestDetailModal/index.ts
@@ -0,0 +1 @@
+export { BookingRequestDetailModal } from "./BookingRequestDetailModal";
diff --git a/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.module.css b/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.module.css
new file mode 100644
index 000000000..b1f4230e0
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.module.css
@@ -0,0 +1,18 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
diff --git a/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.tsx b/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.tsx
new file mode 100644
index 000000000..1d6511a1d
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingStatusBadge/BookingStatusBadge.tsx
@@ -0,0 +1,49 @@
+import type { BookingRequestStatus } from "../../types/bookingRequest";
+import { BOOKING_STATUS_LABELS } from "../../utils/bookingLabels";
+import styles from "./BookingStatusBadge.module.css";
+
+const BADGE_STYLES: Record<
+  BookingRequestStatus,
+  { backgroundColor: string; borderColor: string; textColor: string; dotColor: string }
+> = {
+  pending: {
+    backgroundColor: "rgba(255, 166, 87, 0.14)",
+    borderColor: "rgba(255, 166, 87, 0.28)",
+    textColor: "#ffa657",
+    dotColor: "#ffa657",
+  },
+  confirmed: {
+    backgroundColor: "rgba(74, 222, 158, 0.15)",
+    borderColor: "rgba(74, 222, 158, 0.3)",
+    textColor: "#4ade9e",
+    dotColor: "#4ade9e",
+  },
+  rejected: {
+    backgroundColor: "rgba(248, 81, 73, 0.12)",
+    borderColor: "rgba(248, 81, 73, 0.28)",
+    textColor: "#f85149",
+    dotColor: "#f85149",
+  },
+};
+
+interface BookingStatusBadgeProps {
+  status: BookingRequestStatus;
+}
+
+export function BookingStatusBadge({ status }: BookingStatusBadgeProps) {
+  const style = BADGE_STYLES[status];
+
+  return (
+    <span
+      className={styles.badge}
+      style={{
+        backgroundColor: style.backgroundColor,
+        borderColor: style.borderColor,
+        color: style.textColor,
+      }}
+    >
+      <span className={styles.dot} style={{ backgroundColor: style.dotColor }} />
+      {BOOKING_STATUS_LABELS[status]}
+    </span>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/BookingStatusBadge/index.ts b/apps/AdminWebUi/src/components/BookingStatusBadge/index.ts
new file mode 100644
index 000000000..bcbe1a02a
--- /dev/null
+++ b/apps/AdminWebUi/src/components/BookingStatusBadge/index.ts
@@ -0,0 +1 @@
+export { BookingStatusBadge } from "./BookingStatusBadge";
diff --git a/apps/AdminWebUi/src/components/DataTable/DataTable.module.css b/apps/AdminWebUi/src/components/DataTable/DataTable.module.css
index e92cca42e..c2efe6a59 100644
--- a/apps/AdminWebUi/src/components/DataTable/DataTable.module.css
+++ b/apps/AdminWebUi/src/components/DataTable/DataTable.module.css
@@ -26,6 +26,15 @@
   padding: 20px;
 }
 
+.clickableRow {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.clickableRow:hover {
+  background-color: rgba(74, 222, 158, 0.05);
+}
+
 .actionsCell {
   display: flex;
   gap: 6px;
diff --git a/apps/AdminWebUi/src/components/DataTable/DataTable.tsx b/apps/AdminWebUi/src/components/DataTable/DataTable.tsx
index 422c17ab9..61533cdcf 100644
--- a/apps/AdminWebUi/src/components/DataTable/DataTable.tsx
+++ b/apps/AdminWebUi/src/components/DataTable/DataTable.tsx
@@ -14,6 +14,7 @@ interface DataTableProps<T> {
   getRowKey: (row: T) => string;
   emptyMessage: string;
   minWidth?: number | string;
+  onRowClick?: (row: T) => void;
 }
 
 export function DataTable<T>({
@@ -22,6 +23,7 @@ export function DataTable<T>({
   getRowKey,
   emptyMessage,
   minWidth,
+  onRowClick,
 }: DataTableProps<T>) {
   const tableStyle = minWidth ? { minWidth } : undefined;
 
@@ -40,7 +42,11 @@ export function DataTable<T>({
         <tbody>
           {data.length > 0 ? (
             data.map((row) => (
-              <tr key={getRowKey(row)}>
+              <tr
+                key={getRowKey(row)}
+                className={onRowClick ? styles.clickableRow : undefined}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+              >
                 {columns.map((column) => (
                   <td key={column.key} className={column.className}>
                     {column.render(row)}
diff --git a/apps/AdminWebUi/src/components/StoVehicleActivityLog/StoVehicleActivityLog.tsx b/apps/AdminWebUi/src/components/StoVehicleActivityLog/StoVehicleActivityLog.tsx
new file mode 100644
index 000000000..4966c1c72
--- /dev/null
+++ b/apps/AdminWebUi/src/components/StoVehicleActivityLog/StoVehicleActivityLog.tsx
@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { ActivityLog } from "../ActivityLog";
+import type { StoQueueVehicle } from "../../types/stoVehicle";
+import { buildVehicleActivityLog } from "../../utils/stoVehicleActivityLog";
+
+interface StoVehicleActivityLogProps {
+  vehicle: StoQueueVehicle;
+}
+
+export function StoVehicleActivityLog({ vehicle }: StoVehicleActivityLogProps) {
+  const entries = useMemo(() => buildVehicleActivityLog(vehicle), [vehicle]);
+
+  return (
+    <ActivityLog
+      entries={entries}
+      hint="Повний життєвий цикл: статуси, погодження, призначення механіка"
+    />
+  );
+}
diff --git a/apps/AdminWebUi/src/components/StoVehicleActivityLog/index.ts b/apps/AdminWebUi/src/components/StoVehicleActivityLog/index.ts
new file mode 100644
index 000000000..74ffad021
--- /dev/null
+++ b/apps/AdminWebUi/src/components/StoVehicleActivityLog/index.ts
@@ -0,0 +1 @@
+export { StoVehicleActivityLog } from "./StoVehicleActivityLog";
diff --git a/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.module.css b/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.module.css
index 25b3e8f17..9da852ae6 100644
--- a/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.module.css
+++ b/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.module.css
@@ -272,7 +272,7 @@
 
 .stepPanel {
   display: flex;
-  margin: 20px 24px 24px;
+  margin: 20px 24px 0;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-lg);
   overflow: hidden;
diff --git a/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.tsx b/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.tsx
index c1e6bb046..9cf2d52d4 100644
--- a/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.tsx
+++ b/apps/AdminWebUi/src/components/StoVehicleDetailModal/StoVehicleDetailModal.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ApprovalRequestCard } from "../ApprovalRequestCard";
 import { Button } from "../Button";
 import { Modal } from "../Modal";
+import { StoVehicleActivityLog } from "../StoVehicleActivityLog";
 import { StoVehicleStatusBadge } from "../StoVehicleStatusBadge";
 import type {
   StoQueueVehicle,
@@ -539,6 +540,8 @@ export function StoVehicleDetailModal({
             ) : null}
           </div>
         </section>
+
+        <StoVehicleActivityLog vehicle={vehicle} />
       </div>
     </Modal>
   );
diff --git a/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.module.css b/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.module.css
new file mode 100644
index 000000000..170304772
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.module.css
@@ -0,0 +1,248 @@
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  min-height: 420px;
+}
+
+.topBar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 24px 20px;
+  border-bottom: 1px solid var(--border-secondary);
+  background: linear-gradient(
+    180deg,
+    rgba(74, 222, 158, 0.06) 0%,
+    transparent 100%
+  );
+}
+
+.topBarMain {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.topBarIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  background-color: rgba(74, 222, 158, 0.12);
+  color: var(--accent-primary);
+}
+
+.topBarIcon svg {
+  width: 26px;
+  height: 26px;
+}
+
+.topBarTitle {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.topBarMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.plateBadge {
+  padding: 4px 10px;
+  background-color: #1a4038;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-primary);
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.closeButton:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-quaternary);
+}
+
+.summaryGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.summaryCard {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.summaryLabel {
+  margin: 0 0 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--accent-primary);
+}
+
+.summaryList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+}
+
+.summaryRow {
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 12px;
+}
+
+.summaryRow dt {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.summaryRow dd {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.recordsSection {
+  padding: 20px 24px 0;
+}
+
+.sectionTitle {
+  margin: 0 0 14px;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+
+.recordsPanel {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background-color: color-mix(in srgb, var(--accent-primary) 4%, #1a1c1e);
+}
+
+.recordsPanelAccent {
+  height: 4px;
+  background-color: var(--accent-primary);
+}
+
+.recordsList {
+  display: flex;
+  flex-direction: column;
+}
+
+.recordRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.recordRow:last-child {
+  border-bottom: none;
+}
+
+.recordTitle {
+  margin: 0 0 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.recordDescription {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+.recordPrice {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  white-space: nowrap;
+}
+
+.totalRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px;
+  background-color: rgba(74, 222, 158, 0.06);
+  border-top: 1px solid rgba(74, 222, 158, 0.16);
+}
+
+.totalLabel {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.totalValue {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--accent-primary);
+}
+
+.emptyRecords {
+  padding: 24px 18px;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+@media (max-width: 700px) {
+  .summaryGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .summaryRow {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .recordRow {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
diff --git a/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.tsx b/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.tsx
new file mode 100644
index 000000000..34d582da9
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitDetailModal/VisitDetailModal.tsx
@@ -0,0 +1,161 @@
+import { useMemo } from "react";
+import { Modal } from "../Modal";
+import { ActivityLog } from "../ActivityLog";
+import { VisitStatusBadge } from "../VisitStatusBadge";
+import type { VisitListItem } from "../../types/visit";
+import { buildVisitActivityLog } from "../../utils/visitActivityLog";
+import {
+  calcVisitTotal,
+  formatVisitDateTime,
+  formatVisitPrice,
+  formatVisitTitle,
+} from "../../utils/visitLabels";
+import styles from "./VisitDetailModal.module.css";
+
+interface VisitDetailModalProps {
+  visit: VisitListItem | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function VisitDetailModal({ visit, isOpen, onClose }: VisitDetailModalProps) {
+  const activityEntries = useMemo(
+    () => (visit ? buildVisitActivityLog(visit) : []),
+    [visit],
+  );
+
+  if (!visit) return null;
+
+  const vehicleTitle = formatVisitTitle(visit.brand, visit.model, visit.year);
+  const total = calcVisitTotal(visit.records);
+
+  return (
+    <Modal isOpen={isOpen} title="" onClose={onClose} size="large" hideHeader>
+      <div className={styles.modalContent}>
+        <header className={styles.topBar}>
+          <div className={styles.topBarMain}>
+            <div className={styles.topBarIcon} aria-hidden="true">
+              <svg viewBox="0 0 24 24">
+                <path
+                  d="M14 6h4v4h-4V6zm-8 4h4v8H6v-8zm8 0h4v8h-4v-8zM4 4h6v2H4V4zm10 0h6v2h-6V4z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div>
+              <h2 className={styles.topBarTitle}>{visit.title}</h2>
+              <div className={styles.topBarMeta}>
+                <span className={styles.plateBadge}>{visit.licensePlate}</span>
+                <VisitStatusBadge status={visit.status} />
+              </div>
+            </div>
+          </div>
+          <button
+            type="button"
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Закрити"
+          >
+            ×
+          </button>
+        </header>
+
+        <div className={styles.summaryGrid}>
+          <section className={styles.summaryCard}>
+            <h3 className={styles.summaryLabel}>Візит</h3>
+            <dl className={styles.summaryList}>
+              <div className={styles.summaryRow}>
+                <dt>СТО</dt>
+                <dd>{visit.stoName}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Механік</dt>
+                <dd>{visit.mechanicName ?? "Не призначено"}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Початок</dt>
+                <dd>{formatVisitDateTime(visit.createdAt)}</dd>
+              </div>
+              {visit.completedAt ? (
+                <div className={styles.summaryRow}>
+                  <dt>Завершено</dt>
+                  <dd>{formatVisitDateTime(visit.completedAt)}</dd>
+                </div>
+              ) : visit.updatedAt ? (
+                <div className={styles.summaryRow}>
+                  <dt>Оновлено</dt>
+                  <dd>{formatVisitDateTime(visit.updatedAt)}</dd>
+                </div>
+              ) : null}
+              {visit.description ? (
+                <div className={styles.summaryRow}>
+                  <dt>Опис</dt>
+                  <dd>{visit.description}</dd>
+                </div>
+              ) : null}
+            </dl>
+          </section>
+
+          <section className={styles.summaryCard}>
+            <h3 className={styles.summaryLabel}>Авто та клієнт</h3>
+            <dl className={styles.summaryList}>
+              <div className={styles.summaryRow}>
+                <dt>Автомобіль</dt>
+                <dd>{vehicleTitle}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Номер</dt>
+                <dd>{visit.licensePlate}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Клієнт</dt>
+                <dd>{visit.clientName}</dd>
+              </div>
+              <div className={styles.summaryRow}>
+                <dt>Телефон</dt>
+                <dd>{visit.clientPhone ?? "—"}</dd>
+              </div>
+            </dl>
+          </section>
+        </div>
+
+        <section className={styles.recordsSection}>
+          <h3 className={styles.sectionTitle}>
+            Роботи та деталі ({visit.records.length})
+          </h3>
+          <div className={styles.recordsPanel}>
+            <div className={styles.recordsPanelAccent} />
+            {visit.records.length > 0 ? (
+              <>
+                <div className={styles.recordsList}>
+                  {visit.records.map((record) => (
+                    <div key={record.id} className={styles.recordRow}>
+                      <div>
+                        <p className={styles.recordTitle}>{record.title}</p>
+                        {record.description ? (
+                          <p className={styles.recordDescription}>{record.description}</p>
+                        ) : null}
+                      </div>
+                      <p className={styles.recordPrice}>{formatVisitPrice(record.price)}</p>
+                    </div>
+                  ))}
+                </div>
+                <div className={styles.totalRow}>
+                  <p className={styles.totalLabel}>Загальна сума</p>
+                  <p className={styles.totalValue}>{formatVisitPrice(total)}</p>
+                </div>
+              </>
+            ) : (
+              <p className={styles.emptyRecords}>Список робіт порожній.</p>
+            )}
+          </div>
+        </section>
+
+        <ActivityLog
+          entries={activityEntries}
+          hint="Повний життєвий цикл візиту: статуси, кошторис, оплата та завершення"
+        />
+      </div>
+    </Modal>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/VisitDetailModal/index.ts b/apps/AdminWebUi/src/components/VisitDetailModal/index.ts
new file mode 100644
index 000000000..08418336d
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitDetailModal/index.ts
@@ -0,0 +1 @@
+export { VisitDetailModal } from "./VisitDetailModal";
diff --git a/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.module.css b/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.module.css
new file mode 100644
index 000000000..b1f4230e0
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.module.css
@@ -0,0 +1,18 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
diff --git a/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.tsx b/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.tsx
new file mode 100644
index 000000000..1d6b8093f
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitStatusBadge/VisitStatusBadge.tsx
@@ -0,0 +1,28 @@
+import type { VisitStatus } from "../../types/visit";
+import { getVisitStatusBadgeStyle, VISIT_STATUS_LABELS } from "../../utils/visitLabels";
+import styles from "./VisitStatusBadge.module.css";
+
+interface VisitStatusBadgeProps {
+  status: VisitStatus;
+  showDot?: boolean;
+}
+
+export function VisitStatusBadge({ status, showDot = true }: VisitStatusBadgeProps) {
+  const badgeStyle = getVisitStatusBadgeStyle(status);
+
+  return (
+    <span
+      className={styles.badge}
+      style={{
+        backgroundColor: badgeStyle.backgroundColor,
+        borderColor: badgeStyle.borderColor,
+        color: badgeStyle.textColor,
+      }}
+    >
+      {showDot ? (
+        <span className={styles.dot} style={{ backgroundColor: badgeStyle.dotColor }} />
+      ) : null}
+      {VISIT_STATUS_LABELS[status]}
+    </span>
+  );
+}
diff --git a/apps/AdminWebUi/src/components/VisitStatusBadge/index.ts b/apps/AdminWebUi/src/components/VisitStatusBadge/index.ts
new file mode 100644
index 000000000..15a25ace4
--- /dev/null
+++ b/apps/AdminWebUi/src/components/VisitStatusBadge/index.ts
@@ -0,0 +1 @@
+export { VisitStatusBadge } from "./VisitStatusBadge";
diff --git a/apps/AdminWebUi/src/config/navigation.ts b/apps/AdminWebUi/src/config/navigation.ts
index 1dc1b9f00..eda650a69 100644
--- a/apps/AdminWebUi/src/config/navigation.ts
+++ b/apps/AdminWebUi/src/config/navigation.ts
@@ -27,6 +27,20 @@ export const NAV_ITEMS: NavItemConfig[] = [
     icon: "M4 6h16v2h2v10H6V8H4V6zm4 2h8v2H8V8zm0 4h8v2H8v-2zm0 4h5v2H8v-2z",
     requiredPermissions: [Permission.StoView],
   },
+  {
+    id: "booking-requests",
+    label: "Онлайн-записи",
+    path: "/sto/bookings",
+    icon: "M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11zM7 11h5v2H7v-2zm7 0h5v2h-5v-2z",
+    requiredPermissions: [Permission.StoView],
+  },
+  {
+    id: "visits",
+    label: "Візити",
+    path: "/visits",
+    icon: "M4 4h16v2H4V4zm0 4h10v2H4V8zm0 4h14v2H4v-2zm0 4h8v2H4v-2z",
+    requiredPermissions: [Permission.StoView],
+  },
   {
     id: "users",
     label: "Клієнти",
diff --git a/apps/AdminWebUi/src/context/BookingRequestContext.tsx b/apps/AdminWebUi/src/context/BookingRequestContext.tsx
new file mode 100644
index 000000000..f97775c2f
--- /dev/null
+++ b/apps/AdminWebUi/src/context/BookingRequestContext.tsx
@@ -0,0 +1,119 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { MOCK_BOOKING_REQUESTS } from "../data/mockBookingRequests";
+import { useStoVehicles } from "./StoVehicleContext";
+import type { BookingRequest, BookingRequestStatus } from "../types/bookingRequest";
+import { buildProblemSummary } from "../utils/bookingLabels";
+
+interface BookingRequestContextValue {
+  requests: BookingRequest[];
+  getRequestsBySto: (stoId: string, status?: BookingRequestStatus) => BookingRequest[];
+  confirmRequest: (
+    requestId: string,
+    appointmentAt: string,
+    managerNote?: string,
+  ) => BookingRequest | null;
+  rejectRequest: (requestId: string, reason: string) => void;
+}
+
+const BookingRequestContext = createContext<BookingRequestContextValue | null>(null);
+
+export function BookingRequestProvider({ children }: { children: ReactNode }) {
+  const { addVehicle } = useStoVehicles();
+  const [requests, setRequests] = useState<BookingRequest[]>(
+    () => [...MOCK_BOOKING_REQUESTS],
+  );
+
+  const getRequestsBySto = useCallback(
+    (stoId: string, status?: BookingRequestStatus) => {
+      const filtered = requests.filter((request) => request.stoId === stoId);
+      if (!status) return filtered;
+      return filtered.filter((request) => request.status === status);
+    },
+    [requests],
+  );
+
+  const confirmRequest = useCallback(
+    (requestId: string, appointmentAt: string, managerNote?: string) => {
+      const request = requests.find((item) => item.id === requestId);
+      if (!request || request.status !== "pending") return null;
+
+      const vehicle = addVehicle({
+        stoId: request.stoId,
+        brand: request.brand,
+        model: request.model,
+        year: request.year,
+        licensePlate: request.licensePlate,
+        clientName: request.clientName,
+        clientPhone: request.clientPhone,
+        problemSummary: buildProblemSummary(request.visitReason, request.problemDescription),
+        status: "scheduled",
+        appointmentAt,
+        isManualEntry: false,
+      });
+
+      const now = new Date().toISOString();
+      const updated: BookingRequest = {
+        ...request,
+        status: "confirmed",
+        managerAppointmentAt: appointmentAt,
+        managerNote: managerNote?.trim() || undefined,
+        queueVehicleId: vehicle.id,
+        updatedAt: now,
+      };
+
+      setRequests((current) =>
+        current.map((item) => (item.id === requestId ? updated : item)),
+      );
+
+      return updated;
+    },
+    [requests, addVehicle],
+  );
+
+  const rejectRequest = useCallback((requestId: string, reason: string) => {
+    const now = new Date().toISOString();
+    setRequests((current) =>
+      current.map((request) =>
+        request.id === requestId && request.status === "pending"
+          ? {
+              ...request,
+              status: "rejected",
+              rejectionReason: reason.trim(),
+              updatedAt: now,
+            }
+          : request,
+      ),
+    );
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      requests,
+      getRequestsBySto,
+      confirmRequest,
+      rejectRequest,
+    }),
+    [requests, getRequestsBySto, confirmRequest, rejectRequest],
+  );
+
+  return (
+    <BookingRequestContext.Provider value={value}>
+      {children}
+    </BookingRequestContext.Provider>
+  );
+}
+
+export function useBookingRequests(): BookingRequestContextValue {
+  const context = useContext(BookingRequestContext);
+  if (!context) {
+    throw new Error("useBookingRequests must be used within BookingRequestProvider");
+  }
+  return context;
+}
diff --git a/apps/AdminWebUi/src/context/StoVehicleContext.tsx b/apps/AdminWebUi/src/context/StoVehicleContext.tsx
index 21e24efa2..0e2f75bc2 100644
--- a/apps/AdminWebUi/src/context/StoVehicleContext.tsx
+++ b/apps/AdminWebUi/src/context/StoVehicleContext.tsx
@@ -86,7 +86,7 @@ export function StoVehicleProvider({ children }: { children: ReactNode }) {
               ? 100
               : undefined,
       approvalRequests: [],
-      isManualEntry: true,
+      isManualEntry: payload.isManualEntry ?? true,
       createdAt: now,
       updatedAt: now,
     };
diff --git a/apps/AdminWebUi/src/data/mockBookingRequests.ts b/apps/AdminWebUi/src/data/mockBookingRequests.ts
new file mode 100644
index 000000000..b241c9b98
--- /dev/null
+++ b/apps/AdminWebUi/src/data/mockBookingRequests.ts
@@ -0,0 +1,124 @@
+import type { BookingRequest } from "../types/bookingRequest";
+
+export const MOCK_BOOKING_REQUESTS: BookingRequest[] = [
+  {
+    id: "br-001",
+    stoId: "sto-001",
+    vehicleId: "veh-m-001",
+    driverId: "drv-001",
+    brand: "Toyota",
+    model: "Camry",
+    year: 2019,
+    licensePlate: "AA 1234 BC",
+    vin: "JTDBR32E720123456",
+    clientName: "Олександр Коваленко",
+    clientPhone: "+380 67 111 2233",
+    visitReason: "suspension",
+    problemDescription: "Стукає справа попереду на нерівностях, веде вліво на швидкості.",
+    preferredDate: "2026-07-05",
+    preferredTimeSlot: "morning",
+    partsOption: "shop",
+    attachmentsCount: 2,
+    status: "pending",
+    createdAt: "2026-07-01T08:20:00.000Z",
+    updatedAt: "2026-07-01T08:20:00.000Z",
+  },
+  {
+    id: "br-002",
+    stoId: "sto-001",
+    vehicleId: "veh-m-002",
+    driverId: "drv-002",
+    brand: "Volkswagen",
+    model: "Passat",
+    year: 2017,
+    licensePlate: "KA 5678 AB",
+    vin: "WVWZZZ3CZHE123789",
+    clientName: "Марія Петренко",
+    clientPhone: "+380 50 444 5566",
+    visitReason: "maintenance",
+    problemDescription: "Планове ТО, пробіг 95 000 км. Потрібна заміна масла та фільтрів.",
+    preferredDate: "2026-07-04",
+    preferredTimeSlot: "day",
+    partsOption: "shop",
+    attachmentsCount: 0,
+    status: "pending",
+    createdAt: "2026-07-01T10:45:00.000Z",
+    updatedAt: "2026-07-01T10:45:00.000Z",
+  },
+  {
+    id: "br-003",
+    stoId: "sto-001",
+    brand: "BMW",
+    model: "X5",
+    year: 2021,
+    licensePlate: "BC 9012 DE",
+    clientName: "Ігор Сидоренко",
+    clientPhone: "+380 63 777 8899",
+    visitReason: "diagnostics",
+    problemDescription: "Горить Check Engine, інколи троїть на холостих. Потрібна комп'ютерна діагностика.",
+    preferredDate: "2026-07-06",
+    preferredTimeSlot: "evening",
+    partsOption: "own",
+    attachmentsCount: 1,
+    status: "pending",
+    createdAt: "2026-07-01T14:10:00.000Z",
+    updatedAt: "2026-07-01T14:10:00.000Z",
+  },
+  {
+    id: "br-004",
+    stoId: "sto-002",
+    brand: "Audi",
+    model: "A4",
+    year: 2020,
+    licensePlate: "BC 7788 PQ",
+    clientName: "Сергій Ткаченко",
+    clientPhone: "+380 96 555 4433",
+    visitReason: "other",
+    problemDescription: "Після ДТП не закривається багажник, потрібна оцінка кузовних робіт.",
+    preferredDate: "2026-07-07",
+    preferredTimeSlot: "morning",
+    partsOption: "shop",
+    attachmentsCount: 3,
+    status: "pending",
+    createdAt: "2026-07-01T16:30:00.000Z",
+    updatedAt: "2026-07-01T16:30:00.000Z",
+  },
+  {
+    id: "br-005",
+    stoId: "sto-001",
+    brand: "Hyundai",
+    model: "Tucson",
+    year: 2020,
+    licensePlate: "AI 3456 FG",
+    clientName: "Анна Мельник",
+    visitReason: "maintenance",
+    problemDescription: "Заміна гальмівних колодок, скрипить при гальмуванні.",
+    preferredDate: "2026-06-28",
+    preferredTimeSlot: "day",
+    partsOption: "shop",
+    status: "confirmed",
+    managerAppointmentAt: "2026-06-29T09:10:00.000Z",
+    managerNote: "Запис підтверджено телефоном",
+    queueVehicleId: "sv-004",
+    createdAt: "2026-06-27T18:00:00.000Z",
+    updatedAt: "2026-06-28T09:00:00.000Z",
+  },
+  {
+    id: "br-006",
+    stoId: "sto-001",
+    brand: "Ford",
+    model: "Focus",
+    year: 2015,
+    licensePlate: "AA 5566 NO",
+    clientName: "Катерина Лисенко",
+    visitReason: "diagnostics",
+    problemDescription: "Не працює кондиціонер, потрібна діагностика.",
+    preferredDate: "2026-06-30",
+    preferredTimeSlot: "evening",
+    partsOption: "own",
+    status: "rejected",
+    rejectionReason: "Немає вільного вікна у зазначений час. Запропоновано іншу дату — клієнт відмовився.",
+    createdAt: "2026-06-29T11:00:00.000Z",
+    updatedAt: "2026-06-29T15:20:00.000Z",
+  },
+];
diff --git a/apps/AdminWebUi/src/data/mockVisits.ts b/apps/AdminWebUi/src/data/mockVisits.ts
new file mode 100644
index 000000000..19fc70e10
--- /dev/null
+++ b/apps/AdminWebUi/src/data/mockVisits.ts
@@ -0,0 +1,209 @@
+import type { VisitListItem } from "../types/visit";
+
+export const MOCK_VISITS: VisitListItem[] = [
+  {
+    id: "visit-001",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-001",
+    brand: "Mercedes-Benz",
+    model: "E-Class",
+    year: 2018,
+    licensePlate: "AA 7890 HI",
+    clientName: "Віктор Бондаренко",
+    clientPhone: "+380 97 222 3344",
+    title: "Ремонт кондиціонера",
+    description: "Діагностика та заміна компресора кондиціонера, вакуумування системи.",
+    status: "in_progress",
+    mechanicName: "Петро Механік",
+    records: [
+      { id: "vr-001-1", title: "Діагностика системи кондиціонування", price: 800 },
+      { id: "vr-001-2", title: "Заміна компресора", price: 3200 },
+      { id: "vr-001-3", title: "Вакуумування та заправка фреоном", price: 1400 },
+    ],
+    createdAt: "2026-06-28T11:00:00.000Z",
+    updatedAt: "2026-06-29T07:30:00.000Z",
+  },
+  {
+    id: "visit-002",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-002",
+    brand: "Mazda",
+    model: "CX-5",
+    year: 2018,
+    licensePlate: "KA 4455 RS",
+    clientName: "Юрій Романюк",
+    clientPhone: "+380 68 333 4455",
+    title: "Заміна ГРМ",
+    description: "Заміна комплекту ГРМ, помпи охолодження та усунення витоку ОР.",
+    status: "in_progress",
+    mechanicName: "Андрій Сервіс",
+    records: [
+      { id: "vr-002-1", title: "Зняття/встановлення ГРМ", price: 4500 },
+      { id: "vr-002-2", title: "Заміна помпи охолодження", price: 2800 },
+      { id: "vr-002-3", title: "Промивка системи охолодження", price: 1800 },
+      { id: "vr-002-4", title: "Комплект ГРМ (деталі)", price: 7200 },
+      { id: "vr-002-5", title: "Помпа охолодження (деталь)", price: 3400 },
+    ],
+    createdAt: "2026-06-27T09:30:00.000Z",
+    updatedAt: "2026-06-29T10:20:00.000Z",
+  },
+  {
+    id: "visit-003",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-003",
+    brand: "BMW",
+    model: "X5",
+    year: 2021,
+    licensePlate: "BC 9012 DE",
+    clientName: "Ігор Сидоренко",
+    clientPhone: "+380 63 777 8899",
+    title: "Діагностика двигуна",
+    description: "Комп'ютерна діагностика, зчитування помилок Check Engine.",
+    status: "waiting_payment",
+    mechanicName: "Олег Діагност",
+    records: [
+      { id: "vr-003-1", title: "Комп'ютерна діагностика", price: 900 },
+      { id: "vr-003-2", title: "Заміна свічок запалення", price: 2200 },
+      { id: "vr-003-3", title: "Діагностика котушок запалювання", price: 800 },
+    ],
+    createdAt: "2026-06-26T12:00:00.000Z",
+    updatedAt: "2026-06-29T09:20:00.000Z",
+  },
+  {
+    id: "visit-004",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-004",
+    brand: "Ford",
+    model: "Focus",
+    year: 2015,
+    licensePlate: "AA 5566 NO",
+    clientName: "Катерина Лисенко",
+    clientPhone: "+380 93 888 9900",
+    title: "Заміна акумулятора",
+    description: "Заміна акумулятора, перевірка системи зарядки.",
+    status: "completed",
+    mechanicName: "Петро Механік",
+    records: [
+      { id: "vr-004-1", title: "Діагностика електросистеми", price: 500 },
+      { id: "vr-004-2", title: "Заміна акумулятора", price: 4200 },
+    ],
+    createdAt: "2026-06-26T16:00:00.000Z",
+    updatedAt: "2026-06-29T09:45:00.000Z",
+    completedAt: "2026-06-29T09:45:00.000Z",
+  },
+  {
+    id: "visit-005",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-005",
+    brand: "Renault",
+    model: "Duster",
+    year: 2019,
+    licensePlate: "AB 3344 LM",
+    clientName: "Дмитро Гриценко",
+    title: "ТО-2",
+    description: "Планове технічне обслуговування: заміна масла, фільтрів, перевірка ходової.",
+    status: "completed",
+    records: [
+      { id: "vr-005-1", title: "Заміна моторної оливи", price: 1200 },
+      { id: "vr-005-2", title: "Заміна масляного фільтра", price: 350 },
+      { id: "vr-005-3", title: "Заміна повітряного фільтра", price: 450 },
+      { id: "vr-005-4", title: "Заміна салонного фільтра", price: 380 },
+      { id: "vr-005-5", title: "Перевірка ходової частини", price: 600 },
+    ],
+    createdAt: "2026-06-23T11:00:00.000Z",
+    updatedAt: "2026-06-29T10:00:00.000Z",
+    completedAt: "2026-06-29T10:00:00.000Z",
+  },
+  {
+    id: "visit-006",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-006",
+    brand: "Skoda",
+    model: "Octavia",
+    year: 2016,
+    licensePlate: "KA 1122 JK",
+    clientName: "Олена Шевченко",
+    clientPhone: "+380 66 555 6677",
+    title: "Заміна зчеплення",
+    description: "Заміна комплекту зчеплення, перевірка маховика.",
+    status: "in_progress",
+    mechanicName: "Андрій Сервіс",
+    records: [
+      { id: "vr-006-1", title: "Зняття КПП", price: 3800 },
+      { id: "vr-006-2", title: "Заміна комплекту зчеплення", price: 5200 },
+      { id: "vr-006-3", title: "Комплект зчеплення (деталі)", price: 8900 },
+    ],
+    createdAt: "2026-06-24T14:00:00.000Z",
+    updatedAt: "2026-06-29T06:00:00.000Z",
+  },
+  {
+    id: "visit-007",
+    stoId: "sto-002",
+    stoName: "ProMotors Lviv",
+    vehicleId: "veh-007",
+    brand: "Audi",
+    model: "A4",
+    year: 2020,
+    licensePlate: "BC 7788 PQ",
+    clientName: "Сергій Ткаченко",
+    title: "Діагностика ходової",
+    description: "Перевірка підвіски, рульового управління та гальмівної системи.",
+    status: "in_progress",
+    mechanicName: "Михайло Львів",
+    records: [
+      { id: "vr-007-1", title: "Діагностика ходової частини", price: 700 },
+      { id: "vr-007-2", title: "Перевірка гальмівних механізмів", price: 500 },
+    ],
+    createdAt: "2026-06-28T17:00:00.000Z",
+    updatedAt: "2026-06-29T10:00:00.000Z",
+  },
+  {
+    id: "visit-008",
+    stoId: "sto-002",
+    stoName: "ProMotors Lviv",
+    vehicleId: "veh-008",
+    brand: "Toyota",
+    model: "Camry",
+    year: 2019,
+    licensePlate: "AA 1234 BC",
+    clientName: "Олександр Коваленко",
+    clientPhone: "+380 67 111 2233",
+    title: "Перевірка підвіски",
+    description: "Клієнт скасував візит після попередньої оцінки вартості.",
+    status: "cancelled",
+    records: [
+      { id: "vr-008-1", title: "Огляд підвіски", price: 600 },
+    ],
+    createdAt: "2026-06-28T10:00:00.000Z",
+    updatedAt: "2026-06-28T14:30:00.000Z",
+  },
+  {
+    id: "visit-009",
+    stoId: "sto-001",
+    stoName: "AutoService Kyiv",
+    vehicleId: "veh-009",
+    brand: "Hyundai",
+    model: "Tucson",
+    year: 2020,
+    licensePlate: "AI 3456 FG",
+    clientName: "Анна Мельник",
+    title: "Заміна гальмівних колодок",
+    description: "Заміна передніх і задніх гальмівних колодок.",
+    status: "waiting_payment",
+    mechanicName: "Петро Механік",
+    records: [
+      { id: "vr-009-1", title: "Заміна передніх колодок", price: 1600 },
+      { id: "vr-009-2", title: "Заміна задніх колодок", price: 1400 },
+      { id: "vr-009-3", title: "Передні колодки (деталі)", price: 2100 },
+      { id: "vr-009-4", title: "Задні колодки (деталі)", price: 1800 },
+    ],
+    createdAt: "2026-06-28T08:30:00.000Z",
+    updatedAt: "2026-06-29T09:10:00.000Z",
+  },
+];
diff --git a/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.module.css b/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.module.css
new file mode 100644
index 000000000..16030029c
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.module.css
@@ -0,0 +1,175 @@
+.page {
+  width: 100%;
+  max-width: none;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+.headerText {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  font-size: 15px;
+  color: var(--text-secondary);
+  max-width: 560px;
+}
+
+.headerActions {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.stoSelect {
+  min-width: 220px;
+}
+
+.stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.statCard {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 150px;
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.statCardAttention {
+  border-color: rgba(255, 166, 87, 0.28);
+  background-color: rgba(255, 166, 87, 0.04);
+}
+
+.statLabel {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.statValue {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(300px, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+
+.columnHeader {
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.columnTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.columnTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.columnCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+.columnDescription {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.4;
+}
+
+.columnCards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.emptyColumn {
+  padding: 24px 16px;
+  border-radius: var(--radius-md);
+  border: 1px dashed rgba(255, 255, 255, 0.1);
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+
+.hint {
+  margin: 0 0 16px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+@media (max-width: 1100px) {
+  .board {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 700px) {
+  .header {
+    flex-direction: column;
+  }
+
+  .headerActions {
+    width: 100%;
+  }
+
+  .stoSelect {
+    width: 100%;
+  }
+}
diff --git a/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.tsx b/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.tsx
new file mode 100644
index 000000000..e2bee7594
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/BookingRequestsPage/BookingRequestsPage.tsx
@@ -0,0 +1,185 @@
+import { useMemo, useState } from "react";
+import { BookingRequestCard } from "../../components/BookingRequestCard";
+import { BookingRequestDetailModal } from "../../components/BookingRequestDetailModal";
+import { Select, type SelectOption } from "../../components/Select";
+import { useBookingRequests } from "../../context/BookingRequestContext";
+import { useStos } from "../../context/StoContext";
+import type { BookingRequest, BookingRequestStatus } from "../../types/bookingRequest";
+import { BOOKING_STATUS_LABELS } from "../../utils/bookingLabels";
+import styles from "./BookingRequestsPage.module.css";
+
+const COLUMN_ORDER: BookingRequestStatus[] = ["pending", "confirmed", "rejected"];
+
+const COLUMN_DESCRIPTIONS: Record<BookingRequestStatus, string> = {
+  pending: "Нові запити з мобільного додатку — потребують рішення менеджера",
+  confirmed: "Підтверджені записи, авто додані до черги «Записано»",
+  rejected: "Відхилені запити з поясненням для водія",
+};
+
+interface BookingColumnProps {
+  status: BookingRequestStatus;
+  requests: BookingRequest[];
+  onOpen: (request: BookingRequest) => void;
+}
+
+function BookingColumn({ status, requests, onOpen }: BookingColumnProps) {
+  const label = BOOKING_STATUS_LABELS[status];
+
+  return (
+    <section className={styles.column}>
+      <div className={styles.columnHeader}>
+        <div className={styles.columnTitleRow}>
+          <h2 className={styles.columnTitle}>{label}</h2>
+          <span className={styles.columnCount}>{requests.length}</span>
+        </div>
+        <p className={styles.columnDescription}>{COLUMN_DESCRIPTIONS[status]}</p>
+      </div>
+
+      <div className={styles.columnCards}>
+        {requests.length === 0 ? (
+          <div className={styles.emptyColumn}>Немає запитів</div>
+        ) : (
+          requests.map((request) => (
+            <BookingRequestCard key={request.id} request={request} onOpen={onOpen} />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function BookingRequestsPage() {
+  const { stos } = useStos();
+  const { getRequestsBySto, confirmRequest, rejectRequest } = useBookingRequests();
+
+  const activeStos = useMemo(
+    () => stos.filter((sto) => sto.status === "active"),
+    [stos],
+  );
+
+  const [selectedStoId, setSelectedStoId] = useState(
+    () => activeStos[0]?.id ?? stos[0]?.id ?? "",
+  );
+  const [selectedRequest, setSelectedRequest] = useState<BookingRequest | null>(null);
+
+  const stoOptions: SelectOption[] = useMemo(
+    () =>
+      (activeStos.length > 0 ? activeStos : stos).map((sto) => ({
+        value: sto.id,
+        label: sto.name,
+      })),
+    [activeStos, stos],
+  );
+
+  const allRequests = useMemo(
+    () => getRequestsBySto(selectedStoId),
+    [getRequestsBySto, selectedStoId],
+  );
+
+  const requestsByStatus = useMemo(() => {
+    const grouped = Object.fromEntries(
+      COLUMN_ORDER.map((status) => [status, [] as BookingRequest[]]),
+    ) as Record<BookingRequestStatus, BookingRequest[]>;
+
+    for (const request of allRequests) {
+      grouped[request.status].push(request);
+    }
+
+    for (const status of COLUMN_ORDER) {
+      grouped[status].sort(
+        (left, right) =>
+          new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime(),
+      );
+    }
+
+    return grouped;
+  }, [allRequests]);
+
+  const detailRequest = useMemo(() => {
+    if (!selectedRequest) return null;
+    return allRequests.find((request) => request.id === selectedRequest.id) ?? selectedRequest;
+  }, [allRequests, selectedRequest]);
+
+  const selectedSto = stos.find((sto) => sto.id === selectedStoId);
+  const pendingCount = requestsByStatus.pending.length;
+
+  const handleConfirm = (requestId: string, appointmentAt: string, managerNote?: string) => {
+    const updated = confirmRequest(requestId, appointmentAt, managerNote);
+    if (updated) {
+      setSelectedRequest(updated);
+    }
+  };
+
+  const handleReject = (requestId: string, reason: string) => {
+    rejectRequest(requestId, reason);
+    setSelectedRequest((current) =>
+      current?.id === requestId
+        ? { ...current, status: "rejected", rejectionReason: reason }
+        : current,
+    );
+  };
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <div className={styles.headerText}>
+          <h1 className={styles.title}>Онлайн-записи</h1>
+          <p className={styles.subtitle}>
+            Запити від водіїв через додаток — підтвердження, час прийому та додавання в чергу
+            {selectedSto ? ` · ${selectedSto.name}` : ""}
+          </p>
+        </div>
+        <div className={styles.headerActions}>
+          <div className={styles.stoSelect}>
+            <Select
+              label="СТО"
+              value={selectedStoId}
+              onChange={setSelectedStoId}
+              options={stoOptions}
+            />
+          </div>
+        </div>
+      </header>
+
+      <div className={styles.stats}>
+        <div className={`${styles.statCard} ${pendingCount > 0 ? styles.statCardAttention : ""}`}>
+          <span className={styles.statLabel}>Очікують обробки</span>
+          <span className={styles.statValue}>{pendingCount}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>Підтверджено</span>
+          <span className={styles.statValue}>{requestsByStatus.confirmed.length}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>Відхилено</span>
+          <span className={styles.statValue}>{requestsByStatus.rejected.length}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>Всього</span>
+          <span className={styles.statValue}>{allRequests.length}</span>
+        </div>
+      </div>
+
+      <p className={styles.hint}>Натисніть на картку запиту, щоб переглянути деталі та обробити</p>
+
+      <div className={styles.board}>
+        {COLUMN_ORDER.map((status) => (
+          <BookingColumn
+            key={status}
+            status={status}
+            requests={requestsByStatus[status]}
+            onOpen={setSelectedRequest}
+          />
+        ))}
+      </div>
+
+      <BookingRequestDetailModal
+        request={detailRequest}
+        isOpen={selectedRequest !== null}
+        onClose={() => setSelectedRequest(null)}
+        onConfirm={handleConfirm}
+        onReject={handleReject}
+      />
+    </div>
+  );
+}
diff --git a/apps/AdminWebUi/src/pages/BookingRequestsPage/index.ts b/apps/AdminWebUi/src/pages/BookingRequestsPage/index.ts
new file mode 100644
index 000000000..e3b428790
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/BookingRequestsPage/index.ts
@@ -0,0 +1 @@
+export { BookingRequestsPage } from "./BookingRequestsPage";
diff --git a/apps/AdminWebUi/src/pages/DriversPage/DriversPage.module.css b/apps/AdminWebUi/src/pages/DriversPage/DriversPage.module.css
index 5a5067058..73201a74d 100644
--- a/apps/AdminWebUi/src/pages/DriversPage/DriversPage.module.css
+++ b/apps/AdminWebUi/src/pages/DriversPage/DriversPage.module.css
@@ -31,6 +31,30 @@
   padding: 16px;
 }
 
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th,
+.table td {
+  text-align: left;
+  padding: 10px 8px;
+  border-bottom: 1px solid var(--border-secondary);
+  font-size: 14px;
+}
+
+.table th {
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.empty {
+  text-align: center;
+  color: var(--text-secondary);
+  padding: 20px;
+}
+
 .footer {
   margin-top: 14px;
   display: flex;
@@ -53,3 +77,20 @@
   display: flex;
   gap: 8px;
 }
+
+.linkButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  color: var(--text-primary);
+  background-color: var(--bg-tertiary);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.linkButton:hover {
+  background-color: var(--interactive-secondary-hover);
+}
diff --git a/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.module.css b/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.module.css
new file mode 100644
index 000000000..4d3d3de3f
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.module.css
@@ -0,0 +1,124 @@
+.page {
+  width: 100%;
+  max-width: none;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+
+.headerText {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  font-size: 15px;
+  color: var(--text-secondary);
+  max-width: 560px;
+}
+
+.headerActions {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.stoSelect {
+  min-width: 220px;
+}
+
+.stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.statCard {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 140px;
+  padding: 14px 16px;
+  border-radius: var(--radius-md);
+  background-color: #1a1c1e;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.statLabel {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.statValue {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.tableCard {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-lg);
+  background-color: #1a1c1e;
+  padding: 4px 16px 16px;
+  overflow: hidden;
+}
+
+.plateCell {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-primary);
+  background-color: #1a4038;
+}
+
+.amountCell {
+  font-weight: 600;
+  color: var(--accent-primary);
+  white-space: nowrap;
+}
+
+.hint {
+  margin: 0 0 12px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.empty {
+  padding: 32px 16px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+@media (max-width: 700px) {
+  .header {
+    flex-direction: column;
+  }
+
+  .headerActions {
+    width: 100%;
+  }
+
+  .stoSelect {
+    width: 100%;
+  }
+}
diff --git a/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.tsx b/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.tsx
new file mode 100644
index 000000000..941591431
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/VisitsPage/VisitsPage.tsx
@@ -0,0 +1,162 @@
+import { useMemo, useState } from "react";
+import { DataTable, type DataTableColumn } from "../../components/DataTable";
+import { Select, type SelectOption } from "../../components/Select";
+import { VisitDetailModal } from "../../components/VisitDetailModal";
+import { VisitStatusBadge } from "../../components/VisitStatusBadge";
+import { useStos } from "../../context/StoContext";
+import { MOCK_VISITS } from "../../data/mockVisits";
+import type { VisitListItem, VisitStatus } from "../../types/visit";
+import {
+  calcVisitTotal,
+  formatVisitDate,
+  formatVisitPrice,
+  formatVisitTitle,
+  VISIT_STATUS_LABELS,
+} from "../../utils/visitLabels";
+import styles from "./VisitsPage.module.css";
+
+const VISIT_COLUMNS: DataTableColumn<VisitListItem>[] = [
+    {
+      key: "createdAt",
+      header: "Дата",
+      render: (visit) => formatVisitDate(visit.createdAt),
+    },
+    {
+      key: "vehicle",
+      header: "Автомобіль",
+      render: (visit) => (
+        <>
+          <div>{formatVisitTitle(visit.brand, visit.model, visit.year)}</div>
+          <span className={styles.plateCell}>{visit.licensePlate}</span>
+        </>
+      ),
+    },
+    {
+      key: "client",
+      header: "Клієнт",
+      render: (visit) => visit.clientName,
+    },
+    {
+      key: "title",
+      header: "Візит",
+      render: (visit) => visit.title,
+    },
+    {
+      key: "sto",
+      header: "СТО",
+      render: (visit) => visit.stoName,
+    },
+    {
+      key: "mechanic",
+      header: "Механік",
+      render: (visit) => visit.mechanicName ?? "—",
+    },
+    {
+      key: "status",
+      header: "Статус",
+      render: (visit) => <VisitStatusBadge status={visit.status} />,
+    },
+    {
+      key: "total",
+      header: "Сума",
+      render: (visit) => (
+        <span className={styles.amountCell}>{formatVisitPrice(calcVisitTotal(visit.records))}</span>
+      ),
+    },
+  ];
+
+function countByStatus(visits: VisitListItem[], status: VisitStatus): number {
+  return visits.filter((visit) => visit.status === status).length;
+}
+
+export function VisitsPage() {
+  const { stos } = useStos();
+  const [selectedStoId, setSelectedStoId] = useState("all");
+  const [selectedVisit, setSelectedVisit] = useState<VisitListItem | null>(null);
+
+  const activeStos = useMemo(
+    () => stos.filter((sto) => sto.status === "active"),
+    [stos],
+  );
+
+  const stoOptions: SelectOption[] = useMemo(
+    () => [
+      { value: "all", label: "Усі СТО" },
+      ...(activeStos.length > 0 ? activeStos : stos).map((sto) => ({
+        value: sto.id,
+        label: sto.name,
+      })),
+    ],
+    [activeStos, stos],
+  );
+
+  const visits = useMemo(() => {
+    const sorted = [...MOCK_VISITS].sort(
+      (left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime(),
+    );
+    if (selectedStoId === "all") return sorted;
+    return sorted.filter((visit) => visit.stoId === selectedStoId);
+  }, [selectedStoId]);
+
+  const columns = VISIT_COLUMNS;
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <div className={styles.headerText}>
+          <h1 className={styles.title}>Візити</h1>
+          <p className={styles.subtitle}>
+            Усі візити клієнтів на СТО — перегляд деталей, робіт та сум
+          </p>
+        </div>
+        <div className={styles.headerActions}>
+          <div className={styles.stoSelect}>
+            <Select
+              label="СТО"
+              value={selectedStoId}
+              onChange={setSelectedStoId}
+              options={stoOptions}
+            />
+          </div>
+        </div>
+      </header>
+
+      <div className={styles.stats}>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>Всього</span>
+          <span className={styles.statValue}>{visits.length}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>{VISIT_STATUS_LABELS.in_progress}</span>
+          <span className={styles.statValue}>{countByStatus(visits, "in_progress")}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>{VISIT_STATUS_LABELS.waiting_payment}</span>
+          <span className={styles.statValue}>{countByStatus(visits, "waiting_payment")}</span>
+        </div>
+        <div className={styles.statCard}>
+          <span className={styles.statLabel}>{VISIT_STATUS_LABELS.completed}</span>
+          <span className={styles.statValue}>{countByStatus(visits, "completed")}</span>
+        </div>
+      </div>
+
+      <div className={styles.tableCard}>
+        <p className={styles.hint}>Натисніть на рядок, щоб відкрити деталі візиту</p>
+        <DataTable
+          columns={columns}
+          data={visits}
+          getRowKey={(visit) => visit.id}
+          emptyMessage="Візитів за обраним СТО не знайдено."
+          minWidth={980}
+          onRowClick={setSelectedVisit}
+        />
+      </div>
+
+      <VisitDetailModal
+        visit={selectedVisit}
+        isOpen={selectedVisit !== null}
+        onClose={() => setSelectedVisit(null)}
+      />
+    </div>
+  );
+}
diff --git a/apps/AdminWebUi/src/pages/VisitsPage/index.ts b/apps/AdminWebUi/src/pages/VisitsPage/index.ts
new file mode 100644
index 000000000..ebab7d7e9
--- /dev/null
+++ b/apps/AdminWebUi/src/pages/VisitsPage/index.ts
@@ -0,0 +1 @@
+export { VisitsPage } from "./VisitsPage";
diff --git a/apps/AdminWebUi/src/routes/AppRouter.tsx b/apps/AdminWebUi/src/routes/AppRouter.tsx
index e20166348..4f5ab3425 100644
--- a/apps/AdminWebUi/src/routes/AppRouter.tsx
+++ b/apps/AdminWebUi/src/routes/AppRouter.tsx
@@ -8,8 +8,10 @@ import { LoginPage } from "../pages/LoginPage";
 import { PlaceholderPage } from "../pages/PlaceholderPage";
 import { StoListPage } from "../pages/StoListPage";
 import { StoQueuePage } from "../pages/StoQueuePage";
+import { BookingRequestsPage } from "../pages/BookingRequestsPage";
 import { VehicleServiceHistoryPage } from "../pages/VehicleServiceHistoryPage";
 import { VehiclesPage } from "../pages/VehiclesPage";
+import { VisitsPage } from "../pages/VisitsPage";
 import { PermissionGate } from "./PermissionGate";
 import { ProtectedRoute } from "./ProtectedRoute";
 
@@ -45,6 +47,24 @@ export function AppRouter() {
           }
         />
 
+        <Route
+          path="/sto/bookings"
+          element={
+            <PermissionGate requiredPermissions={[Permission.StoView]}>
+              <BookingRequestsPage />
+            </PermissionGate>
+          }
+        />
+
+        <Route
+          path="/visits"
+          element={
+            <PermissionGate requiredPermissions={[Permission.StoView]}>
+              <VisitsPage />
+            </PermissionGate>
+          }
+        />
+
         <Route
           path="/users"
           element={
diff --git a/apps/AdminWebUi/src/types/bookingRequest.ts b/apps/AdminWebUi/src/types/bookingRequest.ts
new file mode 100644
index 000000000..195ce397a
--- /dev/null
+++ b/apps/AdminWebUi/src/types/bookingRequest.ts
@@ -0,0 +1,34 @@
+export type VisitReasonId = "maintenance" | "suspension" | "diagnostics" | "other";
+
+export type TimeSlotId = "morning" | "day" | "evening";
+
+export type PartsOption = "shop" | "own";
+
+export type BookingRequestStatus = "pending" | "confirmed" | "rejected";
+
+export interface BookingRequest {
+  id: string;
+  stoId: string;
+  vehicleId?: string;
+  driverId?: string;
+  brand: string;
+  model: string;
+  year?: number;
+  licensePlate: string;
+  vin?: string;
+  clientName: string;
+  clientPhone?: string;
+  visitReason: VisitReasonId;
+  problemDescription: string;
+  preferredDate: string;
+  preferredTimeSlot: TimeSlotId;
+  partsOption: PartsOption;
+  attachmentsCount?: number;
+  status: BookingRequestStatus;
+  managerAppointmentAt?: string;
+  managerNote?: string;
+  rejectionReason?: string;
+  queueVehicleId?: string;
+  createdAt: string;
+  updatedAt: string;
+}
diff --git a/apps/AdminWebUi/src/types/stoVehicle.ts b/apps/AdminWebUi/src/types/stoVehicle.ts
index 94600b477..5c1264ab3 100644
--- a/apps/AdminWebUi/src/types/stoVehicle.ts
+++ b/apps/AdminWebUi/src/types/stoVehicle.ts
@@ -46,6 +46,34 @@ export interface StoMechanic {
   fullName: string;
 }
 
+export type StoVehicleActivityType =
+  | "vehicle_created"
+  | "appointment_scheduled"
+  | "vehicle_arrived"
+  | "status_changed"
+  | "mechanic_assigned"
+  | "approval_requested"
+  | "approval_sent_to_client"
+  | "approval_approved"
+  | "approval_rejected";
+
+export type StoVehicleActivityActorRole =
+  | "system"
+  | "operator"
+  | "manager"
+  | "mechanic"
+  | "client";
+
+export interface StoVehicleActivityEntry {
+  id: string;
+  type: StoVehicleActivityType;
+  occurredAt: string;
+  actorName: string;
+  actorRole: StoVehicleActivityActorRole;
+  title: string;
+  description?: string;
+}
+
 export interface StoQueueVehicle {
   id: string;
   stoId: string;
@@ -63,6 +91,8 @@ export interface StoQueueVehicle {
   mechanicName?: string;
   progress?: number;
   approvalRequests?: StoVehicleApprovalRequest[];
+  /** Журнал дій з API; якщо відсутній — будується на фронтенді з наявних полів */
+  activityLog?: StoVehicleActivityEntry[];
   isManualEntry?: boolean;
   createdAt: string;
   updatedAt: string;
@@ -79,4 +109,5 @@ export interface CreateStoQueueVehiclePayload {
   problemSummary?: string;
   status: StoVehicleQueueStatus;
   appointmentAt?: string;
+  isManualEntry?: boolean;
 }
diff --git a/apps/AdminWebUi/src/types/visit.ts b/apps/AdminWebUi/src/types/visit.ts
new file mode 100644
index 000000000..abd8df3dd
--- /dev/null
+++ b/apps/AdminWebUi/src/types/visit.ts
@@ -0,0 +1,33 @@
+import type { StoVehicleActivityEntry } from "./stoVehicle";
+
+export type VisitStatus = "in_progress" | "completed" | "cancelled" | "waiting_payment";
+
+export interface VisitRecord {
+  id: string;
+  title: string;
+  description?: string;
+  price: number;
+}
+
+export interface VisitListItem {
+  id: string;
+  stoId: string;
+  stoName: string;
+  vehicleId: string;
+  brand: string;
+  model: string;
+  year?: number;
+  licensePlate: string;
+  clientName: string;
+  clientPhone?: string;
+  title: string;
+  description: string;
+  status: VisitStatus;
+  mechanicName?: string;
+  records: VisitRecord[];
+  /** Журнал дій з API; якщо відсутній — будується на фронтенді */
+  activityLog?: StoVehicleActivityEntry[];
+  createdAt: string;
+  updatedAt?: string;
+  completedAt?: string;
+}
diff --git a/apps/AdminWebUi/src/utils/bookingLabels.ts b/apps/AdminWebUi/src/utils/bookingLabels.ts
new file mode 100644
index 000000000..7b9829211
--- /dev/null
+++ b/apps/AdminWebUi/src/utils/bookingLabels.ts
@@ -0,0 +1,82 @@
+import type {
+  BookingRequestStatus,
+  PartsOption,
+  TimeSlotId,
+  VisitReasonId,
+} from "../types/bookingRequest";
+
+export const VISIT_REASON_LABELS: Record<VisitReasonId, string> = {
+  maintenance: "Регулярне ТО",
+  suspension: "Ходова та підвіска",
+  diagnostics: "Діагностика / Електрика",
+  other: "Інше / Складна поломка",
+};
+
+export const TIME_SLOT_LABELS: Record<TimeSlotId, string> = {
+  morning: "Ранок",
+  day: "День",
+  evening: "Вечір",
+};
+
+export const TIME_SLOT_RANGES: Record<TimeSlotId, string> = {
+  morning: "09:00 – 13:00",
+  day: "13:00 – 17:00",
+  evening: "17:00 – 19:00",
+};
+
+export const PARTS_OPTION_LABELS: Record<PartsOption, string> = {
+  shop: "Запчастини від СТО",
+  own: "Свої запчастини",
+};
+
+export const BOOKING_STATUS_LABELS: Record<BookingRequestStatus, string> = {
+  pending: "Очікує обробки",
+  confirmed: "Підтверджено",
+  rejected: "Відхилено",
+};
+
+export function formatPreferredSlot(date: string, slot: TimeSlotId): string {
+  const formattedDate = new Intl.DateTimeFormat("uk-UA", {
+    weekday: "short",
+    day: "2-digit",
+    month: "long",
+  }).format(new Date(`${date}T12:00:00`));
+
+  return `${formattedDate}, ${TIME_SLOT_LABELS[slot]} (${TIME_SLOT_RANGES[slot]})`;
+}
+
+export function buildProblemSummary(
+  visitReason: VisitReasonId,
+  problemDescription: string,
+): string {
+  return `${VISIT_REASON_LABELS[visitReason]}: ${problemDescription}`;
+}
+
+export function suggestedAppointmentIso(date: string, slot: TimeSlotId): string {
+  const hour = slot === "morning" ? 11 : slot === "day" ? 15 : 18;
+  const local = new Date(`${date}T${String(hour).padStart(2, "0")}:00:00`);
+  return local.toISOString();
+}
+
+export function toDatetimeLocalValue(isoDate: string): string {
+  const date = new Date(isoDate);
+  if (Number.isNaN(date.getTime())) return "";
+
+  const pad = (value: number) => String(value).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+export function fromDatetimeLocalValue(value: string): string {
+  return new Date(value).toISOString();
+}
+
+export function formatBookingDateTime(isoDate: string): string {
+  return new Intl.DateTimeFormat("uk-UA", {
+    weekday: "short",
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(isoDate));
+}
diff --git a/apps/AdminWebUi/src/utils/stoVehicleActivityLog.ts b/apps/AdminWebUi/src/utils/stoVehicleActivityLog.ts
new file mode 100644
index 000000000..509dccf90
--- /dev/null
+++ b/apps/AdminWebUi/src/utils/stoVehicleActivityLog.ts
@@ -0,0 +1,214 @@
+import type {
+  StoQueueVehicle,
+  StoVehicleActivityEntry,
+  StoVehicleApprovalRequest,
+} from "../types/stoVehicle";
+import { APPROVAL_TYPE_LABELS, formatPriceUah } from "./stoVehicleApprovals";
+import {
+  formatEventDateTime,
+  getVehicleStepIndex,
+  STO_VEHICLE_STATUS_LABELS,
+  STO_VEHICLE_STATUS_ORDER,
+} from "./stoVehicleLabels";
+
+function interpolateIsoTime(startIso: string, endIso: string, ratio: number): string {
+  const start = new Date(startIso).getTime();
+  const end = new Date(endIso).getTime();
+  if (Number.isNaN(start) || Number.isNaN(end) || end <= start) {
+    return endIso;
+  }
+  return new Date(start + (end - start) * ratio).toISOString();
+}
+
+function formatApprovalItemsSummary(request: StoVehicleApprovalRequest): string | undefined {
+  const items = request.lineItems ?? [];
+  if (items.length === 0) return undefined;
+
+  const preview = items
+    .slice(0, 3)
+    .map((item) => {
+      const qty = item.quantity && item.quantity > 1 ? ` ×${item.quantity}` : "";
+      return `${item.title}${qty}`;
+    })
+    .join(", ");
+
+  const suffix = items.length > 3 ? ` та ще ${items.length - 3}` : "";
+  const total = request.totalAmount;
+  const totalPart = total != null ? ` · ${formatPriceUah(total)}` : "";
+
+  return `${preview}${suffix}${totalPart}`;
+}
+
+function buildApprovalEntries(
+  vehicle: StoQueueVehicle,
+  request: StoVehicleApprovalRequest,
+): StoVehicleActivityEntry[] {
+  const entries: StoVehicleActivityEntry[] = [];
+  const typeLabel = APPROVAL_TYPE_LABELS[request.type];
+  const itemsSummary = formatApprovalItemsSummary(request);
+
+  entries.push({
+    id: `${request.id}-requested`,
+    type: "approval_requested",
+    occurredAt: request.createdAt,
+    actorName: request.requestedBy,
+    actorRole: "mechanic",
+    title: `Створено запит: ${typeLabel}`,
+    description: itemsSummary ?? request.description,
+  });
+
+  if (request.sentToClientAt) {
+    entries.push({
+      id: `${request.id}-sent`,
+      type: "approval_sent_to_client",
+      occurredAt: request.sentToClientAt,
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: `Надіслано клієнту на погодження: ${typeLabel}`,
+      description: `Очікує відповіді від ${vehicle.clientName}`,
+    });
+  }
+
+  if (request.clientNotifiedAt) {
+    entries.push({
+      id: `${request.id}-notified`,
+      type: "approval_sent_to_client",
+      occurredAt: request.clientNotifiedAt,
+      actorName: "Система",
+      actorRole: "system",
+      title: `Нагадування клієнту: ${typeLabel}`,
+      description: `Повторне сповіщення для ${vehicle.clientName}`,
+    });
+  }
+
+  if (request.status === "approved" && request.reviewedAt) {
+    const byManager = request.approverRole === "manager";
+    entries.push({
+      id: `${request.id}-approved`,
+      type: "approval_approved",
+      occurredAt: request.reviewedAt,
+      actorName: request.approvedByName ?? (byManager ? "Менеджер СТО" : vehicle.clientName),
+      actorRole: byManager ? "manager" : "client",
+      title: `Погоджено: ${typeLabel}`,
+      description: request.managerOverrideReason ?? itemsSummary,
+    });
+  }
+
+  if (request.status === "rejected" && request.reviewedAt) {
+    entries.push({
+      id: `${request.id}-rejected`,
+      type: "approval_rejected",
+      occurredAt: request.reviewedAt,
+      actorName: request.approvedByName ?? vehicle.clientName,
+      actorRole: request.approverRole === "manager" ? "manager" : "client",
+      title: `Відхилено: ${typeLabel}`,
+      description: request.rejectionReason,
+    });
+  }
+
+  return entries;
+}
+
+function buildDerivedActivityLog(vehicle: StoQueueVehicle): StoVehicleActivityEntry[] {
+  const entries: StoVehicleActivityEntry[] = [];
+
+  entries.push({
+    id: `${vehicle.id}-created`,
+    type: "vehicle_created",
+    occurredAt: vehicle.createdAt,
+    actorName: vehicle.isManualEntry ? "Оператор СТО" : "Система",
+    actorRole: vehicle.isManualEntry ? "operator" : "system",
+    title: vehicle.isManualEntry ? "Автомобіль додано вручну" : "Автомобіль зареєстровано в черзі",
+    description: vehicle.problemSummary,
+  });
+
+  if (vehicle.appointmentAt) {
+    entries.push({
+      id: `${vehicle.id}-appointment`,
+      type: "appointment_scheduled",
+      occurredAt: vehicle.appointmentAt,
+      actorName: vehicle.clientName,
+      actorRole: "client",
+      title: "Запис на прийом",
+      description: formatEventDateTime(vehicle.appointmentAt),
+    });
+  }
+
+  if (vehicle.arrivedAt) {
+    entries.push({
+      id: `${vehicle.id}-arrived`,
+      type: "vehicle_arrived",
+      occurredAt: vehicle.arrivedAt,
+      actorName: "Оператор СТО",
+      actorRole: "operator",
+      title: "Автомобіль прибув на СТО",
+    });
+  }
+
+  const currentIndex = getVehicleStepIndex(vehicle.status);
+  const statusesToLog = STO_VEHICLE_STATUS_ORDER.slice(0, currentIndex + 1);
+  const statusTimelineEnd = vehicle.updatedAt;
+
+  statusesToLog.forEach((status, index) => {
+    const ratio =
+      statusesToLog.length === 1 ? 0 : index / Math.max(statusesToLog.length - 1, 1);
+    const occurredAt = interpolateIsoTime(vehicle.createdAt, statusTimelineEnd, ratio);
+    const label = STO_VEHICLE_STATUS_LABELS[status];
+
+    entries.push({
+      id: `${vehicle.id}-status-${status}`,
+      type: "status_changed",
+      occurredAt,
+      actorName: "Оператор СТО",
+      actorRole: "operator",
+      title:
+        index === 0
+          ? `Початковий етап: ${label}`
+          : `Етап змінено на «${label}»`,
+    });
+  });
+
+  if (vehicle.mechanicName) {
+    const mechanicTime = vehicle.arrivedAt
+      ? interpolateIsoTime(vehicle.arrivedAt, vehicle.updatedAt, 0.35)
+      : interpolateIsoTime(vehicle.createdAt, vehicle.updatedAt, 0.4);
+
+    entries.push({
+      id: `${vehicle.id}-mechanic`,
+      type: "mechanic_assigned",
+      occurredAt: mechanicTime,
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: "Призначено механіка",
+      description: vehicle.mechanicName,
+    });
+  }
+
+  for (const request of vehicle.approvalRequests ?? []) {
+    entries.push(...buildApprovalEntries(vehicle, request));
+  }
+
+  return entries;
+}
+
+export function buildVehicleActivityLog(vehicle: StoQueueVehicle): StoVehicleActivityEntry[] {
+  const entries =
+    vehicle.activityLog && vehicle.activityLog.length > 0
+      ? [...vehicle.activityLog]
+      : buildDerivedActivityLog(vehicle);
+
+  return entries.sort(
+    (left, right) => new Date(right.occurredAt).getTime() - new Date(left.occurredAt).getTime(),
+  );
+}
+
+export const ACTIVITY_ACTOR_ROLE_LABELS: Record<
+  StoVehicleActivityEntry["actorRole"],
+  string
+> = {
+  system: "Система",
+  operator: "Оператор",
+  manager: "Менеджер",
+  mechanic: "Механік",
+  client: "Клієнт",
+};
diff --git a/apps/AdminWebUi/src/utils/visitActivityLog.ts b/apps/AdminWebUi/src/utils/visitActivityLog.ts
new file mode 100644
index 000000000..3dbeec842
--- /dev/null
+++ b/apps/AdminWebUi/src/utils/visitActivityLog.ts
@@ -0,0 +1,131 @@
+import type { StoVehicleActivityEntry } from "../types/stoVehicle";
+import type { VisitListItem, VisitStatus } from "../types/visit";
+import { formatVisitPrice, VISIT_STATUS_LABELS } from "./visitLabels";
+
+function interpolateIsoTime(startIso: string, endIso: string, ratio: number): string {
+  const start = new Date(startIso).getTime();
+  const end = new Date(endIso).getTime();
+  if (Number.isNaN(start) || Number.isNaN(end) || end <= start) {
+    return endIso;
+  }
+  return new Date(start + (end - start) * ratio).toISOString();
+}
+
+const VISIT_STATUS_ORDER: VisitStatus[] = [
+  "in_progress",
+  "waiting_payment",
+  "completed",
+];
+
+function getVisitStatusIndex(status: VisitStatus): number {
+  if (status === "cancelled") return -1;
+  return VISIT_STATUS_ORDER.indexOf(status);
+}
+
+function buildDerivedVisitActivityLog(visit: VisitListItem): StoVehicleActivityEntry[] {
+  const entries: StoVehicleActivityEntry[] = [];
+  const endTime = visit.completedAt ?? visit.updatedAt ?? visit.createdAt;
+
+  entries.push({
+    id: `${visit.id}-created`,
+    type: "vehicle_created",
+    occurredAt: visit.createdAt,
+    actorName: "Оператор СТО",
+    actorRole: "operator",
+    title: "Візит відкрито",
+    description: visit.description || visit.title,
+  });
+
+  if (visit.mechanicName) {
+    entries.push({
+      id: `${visit.id}-mechanic`,
+      type: "mechanic_assigned",
+      occurredAt: interpolateIsoTime(visit.createdAt, endTime, 0.15),
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: "Призначено механіка",
+      description: visit.mechanicName,
+    });
+  }
+
+  const currentIndex = getVisitStatusIndex(visit.status);
+  if (currentIndex >= 0) {
+    const statusesToLog = VISIT_STATUS_ORDER.slice(0, currentIndex + 1);
+    statusesToLog.forEach((status, index) => {
+      const ratio =
+        statusesToLog.length === 1 ? 0.25 : 0.2 + index / Math.max(statusesToLog.length, 1) * 0.35;
+
+      entries.push({
+        id: `${visit.id}-status-${status}`,
+        type: "status_changed",
+        occurredAt: interpolateIsoTime(visit.createdAt, endTime, ratio),
+        actorName: "Оператор СТО",
+        actorRole: "operator",
+        title: `Статус: ${VISIT_STATUS_LABELS[status]}`,
+      });
+    });
+  }
+
+  visit.records.forEach((record, index) => {
+    const ratio = 0.35 + (index / Math.max(visit.records.length, 1)) * 0.4;
+    entries.push({
+      id: `${visit.id}-record-${record.id}`,
+      type: "approval_requested",
+      occurredAt: interpolateIsoTime(visit.createdAt, endTime, ratio),
+      actorName: visit.mechanicName ?? "Механік",
+      actorRole: "mechanic",
+      title: `Додано до кошторису: ${record.title}`,
+      description: formatVisitPrice(record.price),
+    });
+  });
+
+  if (visit.status === "waiting_payment") {
+    entries.push({
+      id: `${visit.id}-payment`,
+      type: "approval_sent_to_client",
+      occurredAt: visit.updatedAt ?? endTime,
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: "Надіслано клієнту на оплату",
+      description: `Очікує оплати від ${visit.clientName}`,
+    });
+  }
+
+  if (visit.status === "completed" && visit.completedAt) {
+    entries.push({
+      id: `${visit.id}-completed`,
+      type: "approval_approved",
+      occurredAt: visit.completedAt,
+      actorName: visit.clientName,
+      actorRole: "client",
+      title: "Візит завершено",
+      description: `Загальна сума: ${formatVisitPrice(
+        visit.records.reduce((sum, record) => sum + record.price, 0),
+      )}`,
+    });
+  }
+
+  if (visit.status === "cancelled") {
+    entries.push({
+      id: `${visit.id}-cancelled`,
+      type: "approval_rejected",
+      occurredAt: visit.updatedAt ?? endTime,
+      actorName: "Менеджер СТО",
+      actorRole: "manager",
+      title: "Візит скасовано",
+    });
+  }
+
+  return entries;
+}
+
+export function buildVisitActivityLog(visit: VisitListItem): StoVehicleActivityEntry[] {
+  const entries =
+    visit.activityLog && visit.activityLog.length > 0
+      ? [...visit.activityLog]
+      : buildDerivedVisitActivityLog(visit);
+
+  return entries.sort(
+    (left, right) => new Date(right.occurredAt).getTime() - new Date(left.occurredAt).getTime(),
+  );
+}
diff --git a/apps/AdminWebUi/src/utils/visitLabels.ts b/apps/AdminWebUi/src/utils/visitLabels.ts
new file mode 100644
index 000000000..0471b20be
--- /dev/null
+++ b/apps/AdminWebUi/src/utils/visitLabels.ts
@@ -0,0 +1,82 @@
+import type { VisitStatus } from "../types/visit";
+
+export const VISIT_STATUS_LABELS: Record<VisitStatus, string> = {
+  in_progress: "В роботі",
+  completed: "Завершено",
+  cancelled: "Скасовано",
+  waiting_payment: "Очікує оплати",
+};
+
+export interface VisitStatusBadgeStyle {
+  backgroundColor: string;
+  borderColor: string;
+  textColor: string;
+  dotColor: string;
+}
+
+export function getVisitStatusBadgeStyle(status: VisitStatus): VisitStatusBadgeStyle {
+  switch (status) {
+    case "in_progress":
+      return {
+        backgroundColor: "rgba(88, 166, 255, 0.15)",
+        borderColor: "rgba(88, 166, 255, 0.3)",
+        textColor: "#58a6ff",
+        dotColor: "#58a6ff",
+      };
+    case "completed":
+      return {
+        backgroundColor: "rgba(74, 222, 158, 0.15)",
+        borderColor: "rgba(74, 222, 158, 0.3)",
+        textColor: "#4ade9e",
+        dotColor: "#4ade9e",
+      };
+    case "waiting_payment":
+      return {
+        backgroundColor: "rgba(255, 166, 87, 0.14)",
+        borderColor: "rgba(255, 166, 87, 0.28)",
+        textColor: "#ffa657",
+        dotColor: "#ffa657",
+      };
+    case "cancelled":
+      return {
+        backgroundColor: "rgba(248, 81, 73, 0.12)",
+        borderColor: "rgba(248, 81, 73, 0.28)",
+        textColor: "#f85149",
+        dotColor: "#f85149",
+      };
+  }
+}
+
+export function formatVisitTitle(brand: string, model: string, year?: number): string {
+  return year ? `${brand} ${model} · ${year}` : `${brand} ${model}`;
+}
+
+export function formatVisitPrice(amount: number): string {
+  return new Intl.NumberFormat("uk-UA", {
+    style: "currency",
+    currency: "UAH",
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+export function calcVisitTotal(records: { price: number }[]): number {
+  return records.reduce((sum, record) => sum + record.price, 0);
+}
+
+export function formatVisitDate(isoDate: string): string {
+  return new Intl.DateTimeFormat("uk-UA", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  }).format(new Date(isoDate));
+}
+
+export function formatVisitDateTime(isoDate: string): string {
+  return new Intl.DateTimeFormat("uk-UA", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(isoDate));
+}
diff --git a/apps/Mobile/App.tsx b/apps/Mobile/App.tsx
index 7b74a8327..9964ce802 100644
--- a/apps/Mobile/App.tsx
+++ b/apps/Mobile/App.tsx
@@ -6,6 +6,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { AuthProvider } from "./src/context/AuthContext";
 import { CarProvider } from "./src/context/CarContext";
 import { NotificationsProvider } from "./src/context/NotificationsContext";
+import { AppAlertProvider } from "./src/components/AppAlert";
 import AppNavigator from "./src/navigation/AppNavigator";
 import { queryClient } from "./src/lib/queryClient";
 import { configureStatusBar } from "./src/styles/globalStyles";
@@ -26,8 +27,10 @@ export default function App() {
           <AuthProvider>
             <CarProvider>
               <NotificationsProvider>
-                <StatusBar style="light" backgroundColor="#0D1117" />
-                <AppNavigator />
+                <AppAlertProvider>
+                  <StatusBar style="light" backgroundColor="#0D1117" />
+                  <AppNavigator />
+                </AppAlertProvider>
               </NotificationsProvider>
             </CarProvider>
           </AuthProvider>
diff --git a/apps/Mobile/src/api/authTokenBridge.ts b/apps/Mobile/src/api/authTokenBridge.ts
new file mode 100644
index 000000000..721fd44e7
--- /dev/null
+++ b/apps/Mobile/src/api/authTokenBridge.ts
@@ -0,0 +1,15 @@
+type RefreshAccessTokenFn = () => Promise<string | null>;
+
+let refreshAccessTokenFn: RefreshAccessTokenFn | null = null;
+
+export function registerRefreshAccessToken(fn: RefreshAccessTokenFn): void {
+  refreshAccessTokenFn = fn;
+}
+
+export async function tryRefreshAccessToken(): Promise<string | null> {
+  if (!refreshAccessTokenFn) {
+    return null;
+  }
+
+  return refreshAccessTokenFn();
+}
diff --git a/apps/Mobile/src/api/client.ts b/apps/Mobile/src/api/client.ts
index ff6e92b27..74bd9b06b 100644
--- a/apps/Mobile/src/api/client.ts
+++ b/apps/Mobile/src/api/client.ts
@@ -1,7 +1,10 @@
 import { API_CONFIG, getNgrokHeaders } from "../config/api";
+import { tryRefreshAccessToken } from "./authTokenBridge";
 
 const API_BASE_URL = API_CONFIG.BASE_URL;
 
+type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
+
 export class ApiClient {
   private baseURL: string;
   private getAccessToken: () => Promise<string | null>;
@@ -14,149 +17,89 @@ export class ApiClient {
     this.getAccessToken = getAccessToken;
   }
 
-  private async getHeaders(): Promise<HeadersInit> {
-    const token = await this.getAccessToken();
+  private async getHeaders(token?: string | null): Promise<HeadersInit> {
+    const accessToken = token ?? (await this.getAccessToken());
 
     return {
       "Content-Type": "application/json",
       ...getNgrokHeaders(),
-      ...(token && { Authorization: `Bearer ${token}` }),
+      ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
     };
   }
 
-  async get<T>(endpoint: string): Promise<T> {
-    const response = await fetch(`${this.baseURL}${endpoint}`, {
-      method: "GET",
-      headers: await this.getHeaders(),
-    });
-
-    if (!response.ok) {
-      // Спробуємо отримати текст помилки
-      let errorMessage = `HTTP error! status: ${response.status}`;
-      try {
-        const errorText = await response.text();
-        if (errorText) {
-          errorMessage = errorText;
-        }
-      } catch (e) {
-        // Ігноруємо помилки парсингу тексту
+  private async readErrorMessage(response: Response): Promise<string> {
+    let errorMessage = `HTTP error! status: ${response.status}`;
+    try {
+      const errorText = await response.text();
+      if (errorText) {
+        errorMessage = errorText;
       }
-      throw new Error(errorMessage);
-    }
-
-    // Перевіряємо чи відповідь є JSON
-    const contentType = response.headers.get("content-type");
-    if (!contentType || !contentType.includes("application/json")) {
-      const responseText = await response.text();
-      throw new Error(
-        `Expected JSON response but got: ${contentType}. Response: ${responseText.substring(0, 200)}...`
-      );
+    } catch {
+      // Ignore body read errors.
     }
-
-    return response.json();
+    return errorMessage;
   }
 
-  async post<T>(endpoint: string, data: any): Promise<T> {
+  private async request<T>(
+    method: HttpMethod,
+    endpoint: string,
+    body?: unknown,
+    hasRetried = false
+  ): Promise<T> {
     const response = await fetch(`${this.baseURL}${endpoint}`, {
-      method: "POST",
+      method,
       headers: await this.getHeaders(),
-      body: JSON.stringify(data),
+      ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
     });
 
-    if (!response.ok) {
-      // Спробуємо отримати текст помилки
-      let errorMessage = `HTTP error! status: ${response.status}`;
-      try {
-        const errorText = await response.text();
-        if (errorText) {
-          errorMessage = errorText;
-        }
-      } catch (e) {
-        // Ігноруємо помилки парсингу тексту
+    if (response.status === 401 && !hasRetried) {
+      const refreshedToken = await tryRefreshAccessToken();
+      if (refreshedToken) {
+        return this.request<T>(method, endpoint, body, true);
       }
-      throw new Error(errorMessage);
     }
 
-    // Перевіряємо чи є контент для парсингу
-    const contentType = response.headers.get("content-type");
-    const contentLength = response.headers.get("content-length");
-
-    // Якщо немає контенту або content-length = 0, повертаємо порожній об'єкт
-    if (!contentLength || contentLength === "0") {
-      return {} as T;
-    }
-
-    // Перевіряємо чи відповідь є JSON
-    if (!contentType || !contentType.includes("application/json")) {
-      const responseText = await response.text();
-      throw new Error(
-        `Expected JSON response but got: ${contentType}. Response: ${responseText.substring(0, 200)}...`
-      );
+    if (!response.ok) {
+      throw new Error(await this.readErrorMessage(response));
     }
 
-    return response.json();
-  }
-
-  async put<T>(endpoint: string, data: any): Promise<T> {
-    const response = await fetch(`${this.baseURL}${endpoint}`, {
-      method: "PUT",
-      headers: await this.getHeaders(),
-      body: JSON.stringify(data),
-    });
-
-    if (!response.ok) {
-      // Спробуємо отримати текст помилки
-      let errorMessage = `HTTP error! status: ${response.status}`;
-      try {
-        const errorText = await response.text();
-        if (errorText) {
-          errorMessage = errorText;
-        }
-      } catch (e) {
-        // Ігноруємо помилки парсингу тексту
-      }
-      throw new Error(errorMessage);
+    if (response.status === 204) {
+      return {} as T;
     }
 
-    // Перевіряємо чи є контент для парсингу
     const contentType = response.headers.get("content-type");
-    const contentLength = response.headers.get("content-length");
+    const responseText = await response.text();
 
-    // Якщо немає контенту або content-length = 0, повертаємо порожній об'єкт
-    if (!contentLength || contentLength === "0") {
+    if (!responseText) {
       return {} as T;
     }
 
-    // Перевіряємо чи відповідь є JSON
     if (!contentType || !contentType.includes("application/json")) {
-      const responseText = await response.text();
       throw new Error(
         `Expected JSON response but got: ${contentType}. Response: ${responseText.substring(0, 200)}...`
       );
     }
 
-    return response.json();
+    return JSON.parse(responseText) as T;
   }
 
-  async delete<T>(endpoint: string): Promise<T> {
-    const response = await fetch(`${this.baseURL}${endpoint}`, {
-      method: "DELETE",
-      headers: await this.getHeaders(),
-    });
+  async get<T>(endpoint: string): Promise<T> {
+    return this.request<T>("GET", endpoint);
+  }
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
+  async post<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.request<T>("POST", endpoint, data);
+  }
 
-    // 204 No Content — тіла немає, не викликаємо .json()
-    if (response.status === 204) {
-      return {} as T;
-    }
-    return response.json();
+  async put<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.request<T>("PUT", endpoint, data);
+  }
+
+  async delete<T>(endpoint: string): Promise<T> {
+    return this.request<T>("DELETE", endpoint);
   }
 }
 
-// Функція для створення API клієнта з токеном
 export const createApiClient = (
   getAccessToken: () => Promise<string | null>
 ) => {
diff --git a/apps/Mobile/src/components/AppAlert/AppAlert.tsx b/apps/Mobile/src/components/AppAlert/AppAlert.tsx
new file mode 100644
index 000000000..69a033f1e
--- /dev/null
+++ b/apps/Mobile/src/components/AppAlert/AppAlert.tsx
@@ -0,0 +1,178 @@
+import React from "react";
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { globalStyles } from "../../styles/globalStyles";
+
+export type AppAlertButtonStyle = "default" | "cancel" | "destructive";
+
+export interface AppAlertButton {
+  text: string;
+  onPress?: () => void;
+  style?: AppAlertButtonStyle;
+}
+
+export interface AppAlertProps {
+  visible: boolean;
+  title: string;
+  message?: string;
+  buttons?: AppAlertButton[];
+  onDismiss: () => void;
+}
+
+export function AppAlert({
+  visible,
+  title,
+  message,
+  buttons = [{ text: "OK", style: "default" }],
+  onDismiss,
+}: AppAlertProps) {
+  const handlePress = (button: AppAlertButton) => {
+    onDismiss();
+    button.onPress?.();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onDismiss}
+    >
+      <View style={styles.overlay}>
+        <TouchableOpacity
+          style={styles.backdrop}
+          activeOpacity={1}
+          onPress={onDismiss}
+        />
+        <View style={styles.card}>
+          <Text style={[globalStyles.textLarge, styles.title]}>{title}</Text>
+          {message ? (
+            <Text style={[globalStyles.textSecondary, styles.message]}>
+              {message}
+            </Text>
+          ) : null}
+
+          <View
+            style={[
+              styles.actions,
+              buttons.length > 1 && styles.actionsMultiple,
+            ]}
+          >
+            {buttons.map((button, index) => {
+              const isDestructive = button.style === "destructive";
+              const isCancel = button.style === "cancel";
+              const isPrimary = !isCancel && !isDestructive;
+
+              return (
+                <TouchableOpacity
+                  key={`${button.text}-${index}`}
+                  style={[
+                    styles.actionButton,
+                    buttons.length > 1 && styles.actionButtonMultiple,
+                    isPrimary && styles.actionButtonPrimary,
+                    isCancel && styles.actionButtonSecondary,
+                    isDestructive && styles.actionButtonDestructive,
+                  ]}
+                  onPress={() => handlePress(button)}
+                  activeOpacity={0.85}
+                >
+                  <Text
+                    style={[
+                      styles.actionButtonText,
+                      isPrimary && styles.actionButtonTextPrimary,
+                      isCancel && styles.actionButtonTextSecondary,
+                      isDestructive && styles.actionButtonTextDestructive,
+                    ]}
+                  >
+                    {button.text}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 24,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+  card: {
+    width: "100%",
+    maxWidth: 360,
+    backgroundColor: "#161B22",
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "#30363D",
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 16,
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  message: {
+    textAlign: "center",
+    lineHeight: 22,
+    marginBottom: 20,
+  },
+  actions: {
+    gap: 10,
+  },
+  actionsMultiple: {
+    flexDirection: "column-reverse",
+  },
+  actionButton: {
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  actionButtonMultiple: {
+    width: "100%",
+  },
+  actionButtonPrimary: {
+    backgroundColor: "#4ade9e",
+  },
+  actionButtonSecondary: {
+    backgroundColor: "#21262D",
+    borderWidth: 1,
+    borderColor: "#30363D",
+  },
+  actionButtonDestructive: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "#F85149",
+  },
+  actionButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  actionButtonTextPrimary: {
+    color: "#121212",
+  },
+  actionButtonTextSecondary: {
+    color: "#FFFFFF",
+  },
+  actionButtonTextDestructive: {
+    color: "#F85149",
+  },
+});
diff --git a/apps/Mobile/src/components/AppAlert/AppAlertContext.tsx b/apps/Mobile/src/components/AppAlert/AppAlertContext.tsx
new file mode 100644
index 000000000..3f5101694
--- /dev/null
+++ b/apps/Mobile/src/components/AppAlert/AppAlertContext.tsx
@@ -0,0 +1,94 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+import { AppAlert, AppAlertButton } from "./AppAlert";
+
+export interface ShowAppAlertOptions {
+  title: string;
+  message?: string;
+  buttons?: AppAlertButton[];
+}
+
+interface AppAlertState extends ShowAppAlertOptions {
+  visible: boolean;
+}
+
+interface AppAlertContextValue {
+  showAlert: (options: ShowAppAlertOptions) => void;
+  showError: (message: string, title?: string) => void;
+  showSuccess: (
+    message: string,
+    title?: string,
+    buttons?: AppAlertButton[]
+  ) => void;
+  hideAlert: () => void;
+}
+
+const AppAlertContext = createContext<AppAlertContextValue | null>(null);
+
+export function AppAlertProvider({ children }: { children: React.ReactNode }) {
+  const [alertState, setAlertState] = useState<AppAlertState | null>(null);
+
+  const hideAlert = useCallback(() => {
+    setAlertState(null);
+  }, []);
+
+  const showAlert = useCallback((options: ShowAppAlertOptions) => {
+    setAlertState({
+      ...options,
+      visible: true,
+      buttons: options.buttons ?? [{ text: "OK", style: "default" }],
+    });
+  }, []);
+
+  const showError = useCallback(
+    (message: string, title = "Помилка") => {
+      showAlert({ title, message });
+    },
+    [showAlert]
+  );
+
+  const showSuccess = useCallback(
+    (message: string, title = "Успішно!", buttons?: AppAlertButton[]) => {
+      showAlert({
+        title,
+        message,
+        buttons: buttons ?? [{ text: "OK", style: "default" }],
+      });
+    },
+    [showAlert]
+  );
+
+  const value: AppAlertContextValue = {
+    showAlert,
+    showError,
+    showSuccess,
+    hideAlert,
+  };
+
+  return (
+    <AppAlertContext.Provider value={value}>
+      {children}
+      {alertState ? (
+        <AppAlert
+          visible={alertState.visible}
+          title={alertState.title}
+          message={alertState.message}
+          buttons={alertState.buttons}
+          onDismiss={hideAlert}
+        />
+      ) : null}
+    </AppAlertContext.Provider>
+  );
+}
+
+export function useAppAlert() {
+  const context = useContext(AppAlertContext);
+  if (!context) {
+    throw new Error("useAppAlert must be used within an AppAlertProvider");
+  }
+  return context;
+}
diff --git a/apps/Mobile/src/components/AppAlert/index.ts b/apps/Mobile/src/components/AppAlert/index.ts
new file mode 100644
index 000000000..e74dbad36
--- /dev/null
+++ b/apps/Mobile/src/components/AppAlert/index.ts
@@ -0,0 +1,4 @@
+export { AppAlert } from "./AppAlert";
+export type { AppAlertButton, AppAlertButtonStyle, AppAlertProps } from "./AppAlert";
+export { AppAlertProvider, useAppAlert } from "./AppAlertContext";
+export type { ShowAppAlertOptions } from "./AppAlertContext";
diff --git a/apps/Mobile/src/components/AppAlert/useAppAlert.tsx b/apps/Mobile/src/components/AppAlert/useAppAlert.tsx
new file mode 100644
index 000000000..f74c9fa18
--- /dev/null
+++ b/apps/Mobile/src/components/AppAlert/useAppAlert.tsx
@@ -0,0 +1,2 @@
+export { AppAlertProvider, useAppAlert } from "./AppAlertContext";
+export type { ShowAppAlertOptions } from "./AppAlertContext";
diff --git a/apps/Mobile/src/components/Select/Select.styles.ts b/apps/Mobile/src/components/Select/Select.styles.ts
index c88bcac21..98c9c04b2 100644
--- a/apps/Mobile/src/components/Select/Select.styles.ts
+++ b/apps/Mobile/src/components/Select/Select.styles.ts
@@ -72,9 +72,12 @@ export const styles = StyleSheet.create({
     borderWidth: 1,
     borderBottomWidth: 0,
     borderColor: "rgba(255, 255, 255, 0.08)",
-    maxHeight: "85%",
+    height: "85%",
     overflow: "hidden",
   },
+  optionsBody: {
+    flex: 1,
+  },
   handle: {
     alignSelf: "center",
     width: 40,
@@ -83,23 +86,27 @@ export const styles = StyleSheet.create({
     backgroundColor: "rgba(255, 255, 255, 0.15)",
     marginTop: 10,
     marginBottom: 4,
+    flexShrink: 0,
   },
   sheetHeader: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "space-between",
     paddingHorizontal: 16,
     paddingTop: 8,
     paddingBottom: 12,
+    flexShrink: 0,
   },
   sheetHeaderContent: {
     flex: 1,
+    minWidth: 0,
+    marginRight: 12,
   },
   sheetTitle: {
     color: "#FFFFFF",
     fontSize: 18,
     fontWeight: "700",
-    flex: 1,
+    lineHeight: 24,
   },
   sheetSubtitle: {
     color: "#8E8E93",
@@ -113,10 +120,12 @@ export const styles = StyleSheet.create({
     backgroundColor: "rgba(255, 255, 255, 0.06)",
     alignItems: "center",
     justifyContent: "center",
+    marginTop: 2,
   },
   searchContainer: {
     paddingHorizontal: 16,
     paddingBottom: 12,
+    flexShrink: 0,
   },
   searchInputWrapper: {
     flexDirection: "row",
@@ -135,7 +144,7 @@ export const styles = StyleSheet.create({
     paddingVertical: 11,
   },
   optionsList: {
-    flexGrow: 0,
+    flex: 1,
   },
   optionsListContent: {
     paddingHorizontal: 12,
@@ -167,9 +176,11 @@ export const styles = StyleSheet.create({
     fontWeight: "600",
   },
   noResultsContainer: {
+    flex: 1,
     paddingVertical: 36,
     paddingHorizontal: 24,
     alignItems: "center",
+    justifyContent: "center",
     gap: 8,
   },
   noResultsTitle: {
@@ -187,6 +198,7 @@ export const styles = StyleSheet.create({
     paddingTop: 8,
     borderTopWidth: 1,
     borderTopColor: "rgba(255, 255, 255, 0.06)",
+    flexShrink: 0,
   },
   doneButton: {
     alignItems: "center",
diff --git a/apps/Mobile/src/components/Select/Select.tsx b/apps/Mobile/src/components/Select/Select.tsx
index af48ca048..7d3324ef9 100644
--- a/apps/Mobile/src/components/Select/Select.tsx
+++ b/apps/Mobile/src/components/Select/Select.tsx
@@ -6,8 +6,6 @@ import {
   TouchableOpacity,
   Modal,
   FlatList,
-  Platform,
-  Dimensions,
 } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -70,7 +68,6 @@ export const Select: React.FC<SelectProps> = ({
   const selectedOption = options.find((option) => option.value === value);
   const showSearch = options.length > searchThreshold;
   const modalTitle = label || "Виберіть опцію";
-  const listMaxHeight = Dimensions.get("window").height * 0.42;
 
   const filteredOptions = useMemo(() => {
     if (!searchQuery.trim()) {
@@ -211,7 +208,6 @@ export const Select: React.FC<SelectProps> = ({
                     onChangeText={setSearchQuery}
                     autoCapitalize="none"
                     autoCorrect={false}
-                    autoFocus={Platform.OS === "ios"}
                   />
                   {searchQuery.length > 0 ? (
                     <TouchableOpacity
@@ -225,25 +221,27 @@ export const Select: React.FC<SelectProps> = ({
               </View>
             ) : null}
 
-            {filteredOptions.length > 0 ? (
-              <FlatList
-                data={filteredOptions}
-                keyExtractor={(item) => String(item.value)}
-                style={[styles.optionsList, { maxHeight: listMaxHeight }]}
-                contentContainerStyle={styles.optionsListContent}
-                renderItem={renderOption}
-                keyboardShouldPersistTaps="handled"
-                showsVerticalScrollIndicator={false}
-              />
-            ) : (
-              <View style={styles.noResultsContainer}>
-                <Feather name="search" size={28} color="#8E8E93" />
-                <Text style={styles.noResultsTitle}>Нічого не знайдено</Text>
-                <Text style={styles.noResultsText}>
-                  Спробуйте інший пошуковий запит
-                </Text>
-              </View>
-            )}
+            <View style={styles.optionsBody}>
+              {filteredOptions.length > 0 ? (
+                <FlatList
+                  data={filteredOptions}
+                  keyExtractor={(item) => String(item.value)}
+                  style={styles.optionsList}
+                  contentContainerStyle={styles.optionsListContent}
+                  renderItem={renderOption}
+                  keyboardShouldPersistTaps="handled"
+                  showsVerticalScrollIndicator={false}
+                />
+              ) : (
+                <View style={styles.noResultsContainer}>
+                  <Feather name="search" size={28} color="#8E8E93" />
+                  <Text style={styles.noResultsTitle}>Нічого не знайдено</Text>
+                  <Text style={styles.noResultsText}>
+                    Спробуйте інший пошуковий запит
+                  </Text>
+                </View>
+              )}
+            </View>
 
             <View
               style={[
diff --git a/apps/Mobile/src/components/VinDecoder/VinDecoder.tsx b/apps/Mobile/src/components/VinDecoder/VinDecoder.tsx
index 664e50afb..e1e83b2fd 100644
--- a/apps/Mobile/src/components/VinDecoder/VinDecoder.tsx
+++ b/apps/Mobile/src/components/VinDecoder/VinDecoder.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, Alert, ActivityIndicator, StyleSheet } from "react-native";
+import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
 import { useTheme } from "../../hooks/useTheme";
 import { globalStyles } from "../../styles/globalStyles";
 import { Input } from "../Input";
 import { decodeVinExtended, VinDecodeData } from "../../api/services/nhtsaService";
+import { useAppAlert } from "../AppAlert";
 
 interface VinDecoderProps {
   onDecodeSuccess: (data: {
@@ -25,6 +26,7 @@ export const VinDecoder: React.FC<VinDecoderProps> = ({
   containerStyle,
 }) => {
   const theme = useTheme();
+  const { showSuccess, showError } = useAppAlert();
   const [vinDecode, setVinDecode] = useState("");
   const [isDecodingVin, setIsDecodingVin] = useState(false);
 
@@ -54,14 +56,14 @@ export const VinDecoder: React.FC<VinDecoderProps> = ({
           driveType: vinData.DriveType,
         });
 
-        Alert.alert("Успішно!", "Дані про автомобіль отримано та заповнено");
+        showSuccess("Дані про автомобіль отримано та заповнено", "Успішно!");
       } catch (error) {
         console.error("Error decoding VIN:", error);
         const errorMessage =
           error instanceof Error
             ? error.message
             : "Не вдалося розшифрувати VIN номер. Перевірте правильність введення.";
-        Alert.alert("Помилка", errorMessage);
+        showError(errorMessage);
       } finally {
         setIsDecodingVin(false);
       }
@@ -75,7 +77,7 @@ export const VinDecoder: React.FC<VinDecoderProps> = ({
     }, 500); // 500ms затримка після останнього введення
 
     return () => clearTimeout(timeoutId);
-  }, [vinDecode, onDecodeSuccess]);
+  }, [vinDecode, onDecodeSuccess, showSuccess, showError]);
 
   return (
     <View style={[styles.container, containerStyle]}>
diff --git a/apps/Mobile/src/context/AuthContext.tsx b/apps/Mobile/src/context/AuthContext.tsx
index 032a14019..0ab5d8d5b 100644
--- a/apps/Mobile/src/context/AuthContext.tsx
+++ b/apps/Mobile/src/context/AuthContext.tsx
@@ -15,6 +15,7 @@ import {
   refreshAccessToken,
 } from "../api/services/authService";
 import { queryClient } from "../lib/queryClient";
+import { registerRefreshAccessToken } from "../api/authTokenBridge";
 
 interface AuthContextType {
   isAuthenticated: boolean;
@@ -137,6 +138,10 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     checkAuthStatus();
   }, [checkAuthStatus]);
 
+  useEffect(() => {
+    registerRefreshAccessToken(refreshSession);
+  }, [refreshSession]);
+
   const login = async () => {
     const result = await WebBrowser.openAuthSessionAsync(
       `${API_CONFIG.BASE_URL}/auth/login`,
diff --git a/apps/Mobile/src/queries/vehicleQueries.ts b/apps/Mobile/src/queries/vehicleQueries.ts
index 901fea998..aa5389d7d 100644
--- a/apps/Mobile/src/queries/vehicleQueries.ts
+++ b/apps/Mobile/src/queries/vehicleQueries.ts
@@ -11,9 +11,10 @@ export const useVehicles = () => {
 
   return useQuery({
     queryKey: queryKeys.vehicles,
-    queryFn: () => {
+    queryFn: async () => {
       const apiClient = createApiClient(getAccessToken);
-      return apiClient.get<VehicleListItem[]>(ENDPOINTS.VEHICLES);
+      const result = await apiClient.get<VehicleListItem[]>(ENDPOINTS.VEHICLES);
+      return Array.isArray(result) ? result : [];
     },
     staleTime: CACHE_STALE_TIME_MS,
   });
@@ -66,6 +67,7 @@ export const useDeleteVehicle = () => {
     },
     onSuccess: (_, vehicleId) => {
       queryClient.removeQueries({ queryKey: queryKeys.vehicle(vehicleId) });
+      queryClient.removeQueries({ queryKey: queryKeys.serviceHistory(vehicleId) });
       queryClient.invalidateQueries({ queryKey: queryKeys.vehicles });
     },
   });
diff --git a/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.styles.ts b/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.styles.ts
index d17f853e8..bd4c3b959 100644
--- a/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.styles.ts
+++ b/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.styles.ts
@@ -1,90 +1,219 @@
 import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme";
 
 export const styles = StyleSheet.create({
-  scrollContainer: {
-    flexGrow: 1,
-    paddingHorizontal: 24,
+  contentContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 24,
   },
-  header: {
-    alignItems: "center",
-    marginTop: 20,
-    marginBottom: 40,
+  pageTitle: {
+    color: "#FFFFFF",
+    fontSize: 24,
+    fontWeight: "700",
+    marginBottom: 4,
   },
-  title: {
-    marginBottom: 8,
-    textAlign: "center",
-  },
-  subtitle: {
-    textAlign: "center",
+  pageSubtitle: {
+    color: "#8E8E93",
+    fontSize: 14,
+    marginBottom: 18,
+    lineHeight: 20,
+  },
+  stepHeader: {
+    marginBottom: 14,
+    gap: 6,
+  },
+  stepCounter: {
+    color: theme.colors.accent.primary,
+    fontSize: 12,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  stepTitle: {
+    color: "#FFFFFF",
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  stepProgress: {
+    flexDirection: "row",
+    gap: 6,
+    marginTop: 4,
   },
-  form: {
+  stepDot: {
     flex: 1,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
   },
-  imageSection: {
-    alignItems: "center",
-    marginBottom: 32,
-  },
-  imageContainer: {
-    width: 200,
-    height: 120,
-    borderRadius: 12,
-    borderWidth: 2,
-    borderColor: "#30363D", // Using theme color directly
-    borderStyle: "dashed",
-    justifyContent: "center",
-    alignItems: "center",
+  stepDotCompleted: {
+    backgroundColor: theme.colors.accent.primary,
+  },
+  stepDotActive: {
+    backgroundColor: "#FFFFFF",
+  },
+  section: {
+    backgroundColor: "#1A1C1E",
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 14,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)",
+    gap: 14,
+  },
+  field: {
+    gap: 6,
   },
-  carImage: {
-    width: 196,
-    height: 116,
+  label: {
+    color: "#8E8E93",
+    fontSize: 13,
+  },
+  input: {
+    backgroundColor: "#232527",
     borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.08)",
+    color: "#FFFFFF",
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 15,
+  },
+  dateInput: {
+    justifyContent: "center",
   },
-  placeholderImage: {
-    alignItems: "center",
+  dateInputText: {
+    color: "#FFFFFF",
+    fontSize: 15,
   },
-  placeholderText: {
-    fontSize: 32,
-    marginBottom: 8,
+  selectContainer: {
+    marginBottom: 0,
   },
-  placeholderLabel: {
-    fontSize: 14,
-    color: "#8B949E", // Using theme color directly
+  loadingIndicator: {
+    marginTop: 4,
+    alignItems: "flex-start",
   },
-  inputContainer: {
-    marginBottom: 20,
+  photoCard: {
+    borderRadius: 14,
+    overflow: "hidden",
+    backgroundColor: "#121212",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.06)",
+  },
+  photoImage: {
+    width: "100%",
+    height: 180,
+    backgroundColor: "#121212",
+  },
+  photoPlaceholder: {
+    width: "100%",
+    height: 180,
+    backgroundColor: theme.colors.accent.dark,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
   },
-  label: {
-    marginBottom: 8,
+  photoPlaceholderText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "500",
   },
-  input: {
-    // Additional input styles if needed
+  photoOverlay: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 12,
+    backgroundColor: "rgba(0, 0, 0, 0.55)",
+  },
+  photoOverlayText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
   },
-  vinDecodeContainer: {
+  actionsRow: {
     flexDirection: "row",
-    gap: 12,
-    alignItems: "flex-start",
+    gap: 10,
+    marginTop: 4,
   },
-  vinDecodeInput: {
+  halfButton: {
     flex: 1,
   },
-  decodeButton: {
-    minWidth: 120,
-    justifyContent: "center",
+  primaryButton: {
+    flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 16,
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: theme.colors.interactive.primary,
+    borderRadius: 14,
+    paddingVertical: 14,
   },
-  decodeButtonDisabled: {
-    opacity: 0.6,
+  primaryButtonText: {
+    color: theme.colors.text.inverse,
+    fontSize: 15,
+    fontWeight: "600",
   },
-  buttonContainer: {
+  secondaryButton: {
     flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: 20,
-    marginBottom: 40,
-    gap: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: theme.colors.accent.dark,
+    borderRadius: 14,
+    paddingVertical: 14,
+    borderWidth: 1,
+    borderColor: "rgba(74, 222, 158, 0.15)",
+  },
+  secondaryButtonText: {
+    color: theme.colors.accent.primary,
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  datePickerModalRoot: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  datePickerBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.55)",
+  },
+  datePickerSheet: {
+    backgroundColor: "#1A1C1E",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderWidth: 1,
+    borderBottomWidth: 0,
+    borderColor: "rgba(255, 255, 255, 0.08)",
+    paddingBottom: 24,
+  },
+  datePickerHandle: {
+    alignSelf: "center",
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+    marginTop: 10,
+    marginBottom: 8,
   },
-  loadingIndicator: {
-    marginTop: 8,
+  datePickerHeader: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  datePickerDoneText: {
+    color: theme.colors.accent.primary,
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
     alignItems: "center",
+    paddingHorizontal: 24,
   },
 });
diff --git a/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.tsx b/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.tsx
index b90b320eb..e378468db 100644
--- a/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.tsx
+++ b/apps/Mobile/src/screens/CarCardScreen/CarCardScreen.tsx
@@ -1,23 +1,29 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   View,
   Text,
   TextInput,
   TouchableOpacity,
   Image,
-  Alert,
   Platform,
   ActivityIndicator,
+  Animated,
+  Easing,
+  Modal,
 } from "react-native";
+import ReanimatedAnimated, { FadeIn } from "react-native-reanimated";
+import { Feather } from "@expo/vector-icons";
 import { FormScreen } from "../../components/FormScreen";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import * as ImagePicker from "expo-image-picker";
 import { useAuth } from "../../context/AuthContext";
 import { useTheme } from "../../hooks/useTheme";
+import { useStatusBar } from "../../hooks/useStatusBar";
 import { globalStyles } from "../../styles/globalStyles";
 import { styles } from "./CarCardScreen.styles";
 import { CarCardScreenProps } from "../../navigation/types";
 import { Select, SelectOption } from "../../components/Select";
+import { useAppAlert } from "../../components/AppAlert";
 import {
   getAllMakes,
   getModelsForMakeId,
@@ -33,6 +39,21 @@ import {
   TransmissionType,
   WheelDriveType,
 } from "../../types/api";
+import {
+  isValidVin,
+  normalizeVinInput,
+  VIN_VALIDATION_MESSAGE,
+} from "../../utils/vinUtils";
+import { parseApiErrorMessage } from "../../utils/apiErrorUtils";
+import {
+  getEnginePowerLabel,
+  getTransmissionOptionsForFuel,
+  isTransmissionAllowedForFuel,
+  normalizeFuelType,
+  normalizeTransmissionType,
+  requiresEngineDisplacement,
+  resolveEngineCapacityCc,
+} from "../../utils/vehicleFormUtils";
 
 const COLOR_OPTIONS: SelectOption[] = [
   { label: "Білий", value: "white" },
@@ -50,15 +71,15 @@ const COLOR_OPTIONS: SelectOption[] = [
 ];
 
 const BODY_CLASS_OPTIONS: SelectOption[] = [
-  { label: "Sedan", value: "Sedan" },
-  { label: "Hatchback", value: "Hatchback" },
-  { label: "Universal", value: "Universal" },
-  { label: "Coupe", value: "Coupe" },
-  { label: "Convertible", value: "Convertible" },
-  { label: "SUV", value: "SUV" },
-  { label: "Crossover", value: "Crossover" },
-  { label: "Minivan", value: "Minivan" },
-  { label: "Pickup", value: "Pickup" },
+  { label: "Седан", value: "Sedan" },
+  { label: "Хетчбек", value: "Hatchback" },
+  { label: "Універсал", value: "Universal" },
+  { label: "Купе", value: "Coupe" },
+  { label: "Кабріолет", value: "Convertible" },
+  { label: "Позашляховик", value: "SUV" },
+  { label: "Кросовер", value: "Crossover" },
+  { label: "Мінівен", value: "Minivan" },
+  { label: "Пікап", value: "Pickup" },
 ];
 
 // Відповідають enum FuelType на бекенді (0–5)
@@ -86,10 +107,22 @@ const WHEEL_DRIVE_API_OPTIONS: SelectOption[] = [
   { label: "4WD", value: WheelDriveType.FourWD },
 ];
 
+const TOTAL_STEPS = 6;
+const STEP_TITLES = [
+  "Базова інформація",
+  "Ідентифікація авто",
+  "Історія використання",
+  "Двигун",
+  "Трансмісія та привід",
+  "Фото та завершення",
+];
+
 export default function CarCardScreen({ navigation }: CarCardScreenProps) {
+  useStatusBar();
   const { getAccessToken } = useAuth();
   const queryClient = useQueryClient();
   const theme = useTheme();
+  const { showAlert, showError, showSuccess } = useAppAlert();
   const [carImage, setCarImage] = useState<string | null>(null);
   const [brand, setBrand] = useState<string | number | undefined>(undefined);
   const [model, setModel] = useState<string | number | undefined>(undefined);
@@ -97,12 +130,17 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
   const [color, setColor] = useState<string | number | undefined>(undefined);
   const [licensePlate, setLicensePlate] = useState("");
   const [vin, setVin] = useState("");
-  const [bodyClass, setBodyClass] = useState<string | number | undefined>(undefined);
+  const [bodyClass, setBodyClass] = useState<string | number | undefined>(
+    undefined
+  );
   const [fuelType, setFuelType] = useState<number | undefined>(undefined);
   const [displacement, setDisplacement] = useState("");
-  const [transmission, setTransmission] = useState<number | undefined>(undefined);
+  const [transmission, setTransmission] = useState<number | undefined>(
+    undefined
+  );
   const [driveType, setDriveType] = useState<number | undefined>(undefined);
-  const [boughtAt, setBoughtAt] = useState<Date | null>(null);
+  const [boughtAt, setBoughtAt] = useState(() => new Date());
+  const [pickerDate, setPickerDate] = useState(() => new Date());
   const [showBoughtAtPicker, setShowBoughtAtPicker] = useState(false);
   const [mileage, setMileage] = useState("");
   const [enginePower, setEnginePower] = useState("");
@@ -114,6 +152,8 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
   const [yearOptions] = useState<SelectOption[]>(generateYearOptions());
   const [isLoadingBrands, setIsLoadingBrands] = useState(false);
   const [isLoadingModels, setIsLoadingModels] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const stepAnimation = useRef(new Animated.Value(1)).current;
 
   // Завантаження марок при монтуванні компонента
   useEffect(() => {
@@ -128,17 +168,14 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
         setBrandOptions(options);
       } catch (error) {
         console.error("Error loading brands:", error);
-        Alert.alert(
-          "Помилка",
-          "Не вдалося завантажити список марок. Спробуйте пізніше."
-        );
+        showError("Не вдалося завантажити список марок. Спробуйте пізніше.");
       } finally {
         setIsLoadingBrands(false);
       }
     };
 
     loadBrands();
-  }, []);
+  }, [showError]);
 
   // Завантаження моделей при зміні марки
   useEffect(() => {
@@ -146,10 +183,10 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
       if (!brand || typeof brand !== "number") {
         setModelOptions([]);
         setModel(undefined);
-      return;
-    }
+        return;
+      }
 
-    try {
+      try {
         setIsLoadingModels(true);
         const models = await getModelsForMakeId(brand);
         const options: SelectOption[] = models.map((model) => ({
@@ -161,10 +198,7 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
         setModel(undefined);
       } catch (error) {
         console.error("Error loading models:", error);
-        Alert.alert(
-          "Помилка",
-          "Не вдалося завантажити список моделей. Спробуйте пізніше."
-        );
+        showError("Не вдалося завантажити список моделей. Спробуйте пізніше.");
         setModelOptions([]);
       } finally {
         setIsLoadingModels(false);
@@ -172,7 +206,17 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
     };
 
     loadModels();
-  }, [brand]);
+  }, [brand, showError]);
+
+  useEffect(() => {
+    if (!requiresEngineDisplacement(fuelType)) {
+      setDisplacement("");
+    }
+
+    if (!isTransmissionAllowedForFuel(fuelType, transmission)) {
+      setTransmission(undefined);
+    }
+  }, [fuelType, transmission]);
 
   // const handleVinDecodeSuccess = async (data: {
   //   brand: string;
@@ -252,12 +296,26 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
   //   }
   // };
 
+  const openBoughtAtPicker = () => {
+    setPickerDate(boughtAt);
+    setShowBoughtAtPicker(true);
+  };
+
+  const closeBoughtAtPicker = () => {
+    setShowBoughtAtPicker(false);
+  };
+
+  const confirmBoughtAtPicker = () => {
+    setBoughtAt(pickerDate);
+    setShowBoughtAtPicker(false);
+  };
+
   const pickImage = async () => {
     const permissionResult =
       await ImagePicker.requestMediaLibraryPermissionsAsync();
 
     if (permissionResult.granted === false) {
-      Alert.alert("Дозвіл потрібен", "Потрібен дозвіл для доступу до галереї!");
+      showError("Потрібен дозвіл для доступу до галереї!", "Дозвіл потрібен");
       return;
     }
 
@@ -283,14 +341,13 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
       vin.trim() ||
       carImage ||
       mileage.trim() !== "" ||
-      enginePower.trim() !== "" ||
-      boughtAt !== null;
+      enginePower.trim() !== "";
 
     if (hasData) {
-      Alert.alert(
-        "Скасувати створення?",
-        "Ви вже ввели деякі дані. Ви впевнені, що хочете скасувати?",
-        [
+      showAlert({
+        title: "Скасувати створення?",
+        message: "Ви вже ввели деякі дані. Ви впевнені, що хочете скасувати?",
+        buttons: [
           {
             text: "Продовжити редагування",
             style: "cancel",
@@ -300,8 +357,8 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
             style: "destructive",
             onPress: () => navigation.navigate("Home"),
           },
-        ]
-      );
+        ],
+      });
     } else {
       navigation.navigate("Home");
     }
@@ -309,71 +366,74 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
 
   const handleSave = async () => {
     if (!brand) {
-      Alert.alert("Помилка", "Будь ласка, вибери марку автомобіля");
+      showError("Будь ласка, вибери марку автомобіля");
       return;
     }
     if (!model) {
-      Alert.alert("Помилка", "Будь ласка, вибери модель автомобіля");
+      showError("Будь ласка, вибери модель автомобіля");
       return;
     }
     if (!year) {
-      Alert.alert("Помилка", "Будь ласка, вибери рік випуску");
+      showError("Будь ласка, вибери рік випуску");
       return;
     }
     if (!color) {
-      Alert.alert("Помилка", "Будь ласка, вибери колір автомобіля");
+      showError("Будь ласка, вибери колір автомобіля");
       return;
     }
     if (!licensePlate.trim()) {
-      Alert.alert("Помилка", "Будь ласка, введи номерний знак");
+      showError("Будь ласка, введи номерний знак");
       return;
     }
     if (vin.trim().length !== 0 && vin.trim().length !== 17) {
-      Alert.alert("Помилка", "VIN має містити рівно 17 символів");
+      showError("VIN має містити рівно 17 символів");
       return;
     }
     if (!vin.trim()) {
-      Alert.alert("Помилка", "Будь ласка, введи VIN номер (17 символів)");
+      showError("Будь ласка, введи VIN номер (17 символів)");
+      return;
+    }
+    if (!isValidVin(vin)) {
+      showError(VIN_VALIDATION_MESSAGE);
       return;
     }
     if (fuelType === undefined) {
-      Alert.alert("Помилка", "Будь ласка, вибери тип палива");
+      showError("Будь ласка, вибери тип палива");
       return;
     }
     if (transmission === undefined) {
-      Alert.alert("Помилка", "Будь ласка, вибери коробку передач");
+      showError("Будь ласка, вибери коробку передач");
       return;
     }
-    if (driveType === undefined) {
-      Alert.alert("Помилка", "Будь ласка, вибери тип приводу");
+    if (!isTransmissionAllowedForFuel(fuelType, transmission)) {
+      showError("Для електрокарів доступні лише автомат або CVT");
       return;
     }
-    const displacementNum = displacement.trim() ? parseFloat(displacement.replace(",", ".")) : 0;
-    if (!displacement.trim() || isNaN(displacementNum) || displacementNum <= 0) {
-      Alert.alert("Помилка", "Введіть об'єм двигуна в літрах (наприклад 2.0)");
+    if (driveType === undefined) {
+      showError("Будь ласка, вибери тип приводу");
       return;
     }
-    const engineCapacityCc = Math.round(displacementNum * 1000);
-    if (engineCapacityCc <= 0 || engineCapacityCc > 10000) {
-      Alert.alert("Помилка", "Об'єм двигуна має бути від 0.001 до 10 л");
+    const engineCapacityCc = resolveEngineCapacityCc(fuelType, displacement);
+    if (requiresEngineDisplacement(fuelType) && engineCapacityCc === null) {
+      showError("Введіть об'єм двигуна в літрах (наприклад 2.0)");
       return;
     }
     const mileageNum = parseInt(mileage.trim(), 10);
     if (mileage.trim() === "" || isNaN(mileageNum) || mileageNum < 0) {
-      Alert.alert("Помилка", "Введіть пробіг (км)");
+      showError("Введіть пробіг (км)");
       return;
     }
     if (mileageNum > 1000000) {
-      Alert.alert("Помилка", "Пробіг не може перевищувати 1 000 000 км");
+      showError("Пробіг не може перевищувати 1 000 000 км");
       return;
     }
     const enginePowerNum = parseInt(enginePower.trim(), 10);
     if (!enginePower.trim() || isNaN(enginePowerNum) || enginePowerNum <= 0) {
-      Alert.alert("Помилка", "Введіть потужність двигуна (к.с.)");
+      showError("Введіть потужність двигуна (к.с.)");
       return;
     }
     if (enginePowerNum > 1000) {
-      Alert.alert("Помилка", "Потужність не може перевищувати 1000 к.с.");
+      showError("Потужність не може перевищувати 1000 к.с.");
       return;
     }
 
@@ -384,26 +444,30 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
         brandOptions.find((opt) => opt.value === brand)?.label || String(brand);
       const modelLabel =
         modelOptions.find((opt) => opt.value === model)?.label || String(model);
-      const yearNum = typeof year === "number" ? year : parseInt(String(year), 10);
+      const yearNum =
+        typeof year === "number" ? year : parseInt(String(year), 10);
       const colorLabel =
         COLOR_OPTIONS.find((opt) => opt.value === color)?.label ||
         String(color);
 
       const dto: CreateVehicleDto = {
         licensePlate: licensePlate.trim(),
-        vin: vin.trim(),
+        vin: vin.trim().toUpperCase(),
         brand: brandLabel,
         model: modelLabel,
         year: yearNum,
-        boughtAt: boughtAt ? boughtAt.toISOString() : null,
+        boughtAt: boughtAt.toISOString(),
         wheelDriveType: driveType as WheelDriveType,
-        engineCapacity: engineCapacityCc,
+        engineCapacity: engineCapacityCc ?? 0,
         fuelType: fuelType as FuelType,
         enginePower: enginePowerNum,
         color: colorLabel,
         transmissionType: transmission as TransmissionType,
         mileage: mileageNum,
-        photoUrl: carImage && (carImage.startsWith("http") ? carImage : null) ? carImage : null,
+        photoUrl:
+          carImage && (carImage.startsWith("http") ? carImage : null)
+            ? carImage
+            : null,
       };
 
       const apiClient = createApiClient(getAccessToken);
@@ -411,7 +475,7 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
 
       queryClient.invalidateQueries({ queryKey: queryKeys.vehicles });
 
-      Alert.alert("Успішно!", "Автомобіль додано в базу", [
+      showSuccess("Автомобіль додано в базу", "Успішно!", [
         {
           text: "OK",
           onPress: () => navigation.navigate("Home"),
@@ -419,20 +483,152 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
       ]);
     } catch (error) {
       console.error("Error saving vehicle:", error);
-      const message = error instanceof Error ? error.message : "Не вдалося зберегти дані";
-      Alert.alert("Помилка", message);
+      showError(parseApiErrorMessage(error));
     } finally {
       setIsLoading(false);
     }
   };
 
+  const validateStep = (step: number): boolean => {
+    if (step === 0) {
+      if (!brand) {
+        showError("Будь ласка, вибери марку автомобіля");
+        return false;
+      }
+      if (!model) {
+        showError("Будь ласка, вибери модель автомобіля");
+        return false;
+      }
+      if (!year) {
+        showError("Будь ласка, вибери рік випуску");
+        return false;
+      }
+      return true;
+    }
+
+    if (step === 1) {
+      if (!color) {
+        showError("Будь ласка, вибери колір автомобіля");
+        return false;
+      }
+      if (!licensePlate.trim()) {
+        showError("Будь ласка, введи номерний знак");
+        return false;
+      }
+      if (vin.trim().length !== 0 && vin.trim().length !== 17) {
+        showError("VIN має містити рівно 17 символів");
+        return false;
+      }
+      if (!vin.trim()) {
+        showError("Будь ласка, введи VIN номер (17 символів)");
+        return false;
+      }
+      if (!isValidVin(vin)) {
+        showError(VIN_VALIDATION_MESSAGE);
+        return false;
+      }
+      return true;
+    }
+
+    if (step === 2) {
+      if (
+        mileage.trim() === "" ||
+        isNaN(parseInt(mileage.trim(), 10)) ||
+        parseInt(mileage.trim(), 10) < 0
+      ) {
+        showError("Введіть пробіг (км)");
+        return false;
+      }
+      if (parseInt(mileage.trim(), 10) > 1000000) {
+        showError("Пробіг не може перевищувати 1 000 000 км");
+        return false;
+      }
+      return true;
+    }
+
+    if (step === 3) {
+      if (fuelType === undefined) {
+        showError("Будь ласка, вибери тип палива");
+        return false;
+      }
+      if (requiresEngineDisplacement(fuelType)) {
+        const engineCapacityCc = resolveEngineCapacityCc(fuelType, displacement);
+        if (engineCapacityCc === null) {
+          showError("Введіть об'єм двигуна в літрах (наприклад 2.0)");
+          return false;
+        }
+      }
+      const enginePowerNum = parseInt(enginePower.trim(), 10);
+      if (!enginePower.trim() || isNaN(enginePowerNum) || enginePowerNum <= 0) {
+        showError("Введіть потужність двигуна (к.с.)");
+        return false;
+      }
+      if (enginePowerNum > 1000) {
+        showError("Потужність не може перевищувати 1000 к.с.");
+        return false;
+      }
+      return true;
+    }
+
+    if (step === 4) {
+      if (transmission === undefined) {
+        showError("Будь ласка, вибери коробку передач");
+        return false;
+      }
+      if (!isTransmissionAllowedForFuel(fuelType, transmission)) {
+        showError("Для електрокарів доступні лише автомат або CVT");
+        return false;
+      }
+      if (driveType === undefined) {
+        showError("Будь ласка, вибери тип приводу");
+        return false;
+      }
+      return true;
+    }
+
+    return true;
+  };
+
+  const animateStepTransition = (nextStep: number) => {
+    Animated.sequence([
+      Animated.timing(stepAnimation, {
+        toValue: 0,
+        duration: 140,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true,
+      }),
+      Animated.timing(stepAnimation, {
+        toValue: 1,
+        duration: 220,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start();
+    setCurrentStep(nextStep);
+  };
+
+  const handleNextStep = () => {
+    if (!validateStep(currentStep)) {
+      return;
+    }
+    if (currentStep < TOTAL_STEPS - 1) {
+      animateStepTransition(currentStep + 1);
+    }
+  };
+
+  const handlePreviousStep = () => {
+    if (currentStep > 0) {
+      animateStepTransition(currentStep - 1);
+    }
+  };
+
   if (isLoading) {
     return (
       <View
         style={[
           globalStyles.container,
           globalStyles.pageBackground,
-          globalStyles.loadingContainer,
+          styles.loadingContainer,
         ]}
       >
         <ActivityIndicator size="large" color={theme.colors.accent.primary} />
@@ -444,268 +640,394 @@ export default function CarCardScreen({ navigation }: CarCardScreenProps) {
   return (
     <FormScreen
       style={[globalStyles.container, globalStyles.pageBackground]}
-      contentContainerStyle={styles.scrollContainer}
+      contentContainerStyle={styles.contentContainer}
     >
-        <View style={styles.header}>
-          <Text style={[globalStyles.textLarge, styles.title]}>
-            Додай свій автомобіль
-          </Text>
-          <Text style={[globalStyles.textSecondary, styles.subtitle]}>
-            Створи картку твого авто
-          </Text>
-        </View>
-
-        <View style={styles.form}>
-          {/* VIN Decode Field */}
-          {/* <VinDecoder onDecodeSuccess={handleVinDecodeSuccess} /> */}
-
-          {/* Car Image */}
-          <View style={styles.imageSection}>
-            <TouchableOpacity style={styles.imageContainer} onPress={pickImage}>
-              {carImage ? (
-                <Image source={{ uri: carImage }} style={styles.carImage} />
-              ) : (
-                <View style={styles.placeholderImage}>
-                  <Text style={styles.placeholderText}>🚗</Text>
-                  <Text style={styles.placeholderLabel}>Фото авто</Text>
-                </View>
-              )}
-            </TouchableOpacity>
-          </View>
+      <ReanimatedAnimated.View entering={FadeIn.duration(280)}>
+        <Text style={styles.pageTitle}>Додай свій автомобіль</Text>
+        <Text style={styles.pageSubtitle}>Створи картку твого авто</Text>
+      </ReanimatedAnimated.View>
 
-          {/* Brand Field */}
-          <View style={styles.inputContainer}>
-            <Select
-              label="Марка *"
-              options={brandOptions}
-              value={brand}
-              onValueChange={setBrand}
-              placeholder={
-                isLoadingBrands
-                  ? "Завантаження марок..."
-                  : "Виберіть марку автомобіля"
-              }
+      <View style={styles.stepHeader}>
+        <Text style={styles.stepCounter}>
+          Крок {currentStep + 1} з {TOTAL_STEPS}
+        </Text>
+        <Text style={styles.stepTitle}>{STEP_TITLES[currentStep]}</Text>
+        <View style={styles.stepProgress}>
+          {Array.from({ length: TOTAL_STEPS }).map((_, index) => (
+            <View
+              key={index}
+              style={[
+                styles.stepDot,
+                index < currentStep && styles.stepDotCompleted,
+                index === currentStep && styles.stepDotActive,
+              ]}
             />
-            {isLoadingBrands && (
-              <View style={styles.loadingIndicator}>
-                <ActivityIndicator
-                  size="small"
-                  color={theme.colors.accent.primary}
+          ))}
+        </View>
+      </View>
+
+      <Animated.View
+        style={{
+          opacity: stepAnimation,
+          transform: [
+            {
+              translateY: stepAnimation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [14, 0],
+              }),
+            },
+          ],
+        }}
+      >
+        <View style={styles.section}>
+          {currentStep === 0 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Марка *</Text>
+                <Select
+                  options={brandOptions}
+                  value={brand}
+                  onValueChange={setBrand}
+                  placeholder={
+                    isLoadingBrands
+                      ? "Завантаження марок..."
+                      : "Виберіть марку автомобіля"
+                  }
+                  containerStyle={styles.selectContainer}
                 />
+                {isLoadingBrands ? (
+                  <View style={styles.loadingIndicator}>
+                    <ActivityIndicator
+                      size="small"
+                      color={theme.colors.accent.primary}
+                    />
+                  </View>
+                ) : null}
               </View>
-            )}
-          </View>
 
-          {/* Model Field */}
-          <View style={styles.inputContainer}>
-            <Select
-              label="Модель *"
-              options={modelOptions}
-              value={model}
-              onValueChange={setModel}
-              placeholder={
-                !brand
-                  ? "Спочатку виберіть марку"
-                  : isLoadingModels
-                    ? "Завантаження моделей..."
-                    : "Виберіть модель автомобіля"
-              }
-              disabled={!brand || isLoadingModels}
-            />
-            {isLoadingModels && (
-              <View style={styles.loadingIndicator}>
-                <ActivityIndicator
-                  size="small"
-                  color={theme.colors.accent.primary}
+              <View style={styles.field}>
+                <Text style={styles.label}>Модель *</Text>
+                <Select
+                  options={modelOptions}
+                  value={model}
+                  onValueChange={setModel}
+                  placeholder={
+                    !brand
+                      ? "Спочатку виберіть марку"
+                      : isLoadingModels
+                        ? "Завантаження моделей..."
+                        : "Виберіть модель автомобіля"
+                  }
+                  disabled={!brand || isLoadingModels}
+                  containerStyle={styles.selectContainer}
                 />
+                {isLoadingModels ? (
+                  <View style={styles.loadingIndicator}>
+                    <ActivityIndicator
+                      size="small"
+                      color={theme.colors.accent.primary}
+                    />
+                  </View>
+                ) : null}
               </View>
-            )}
-          </View>
 
-          {/* Year Field */}
-          <Select
-            label="Рік випуску *"
-            options={yearOptions}
-              value={year}
-            onValueChange={setYear}
-            placeholder="Виберіть рік випуску"
-          />
+              <View style={styles.field}>
+                <Text style={styles.label}>Рік випуску *</Text>
+                <Select
+                  options={yearOptions}
+                  value={year}
+                  onValueChange={setYear}
+                  placeholder="Виберіть рік випуску"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
+            </>
+          )}
 
-          {/* Color Field */}
-          <Select
-            label="Колір *"
-            options={COLOR_OPTIONS}
-              value={color}
-            onValueChange={setColor}
-            placeholder="Виберіть колір автомобіля"
-            />
+          {currentStep === 1 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Колір *</Text>
+                <Select
+                  options={COLOR_OPTIONS}
+                  value={color}
+                  onValueChange={setColor}
+                  placeholder="Виберіть колір автомобіля"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
 
-          {/* License Plate Field */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Номерний знак *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={licensePlate}
-              onChangeText={setLicensePlate}
-              placeholder="Наприклад: АА1234ВВ"
-              placeholderTextColor={theme.colors.special.placeholder}
-              autoCapitalize="characters"
-            />
-          </View>
+              <View style={styles.field}>
+                <Text style={styles.label}>Номерний знак *</Text>
+                <TextInput
+                  style={styles.input}
+                  value={licensePlate}
+                  onChangeText={setLicensePlate}
+                  placeholder="Наприклад: АА1234ВВ"
+                  placeholderTextColor="#8E8E93"
+                  autoCapitalize="characters"
+                />
+              </View>
 
-          {/* VIN Field */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              VIN номер *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={vin}
-              onChangeText={setVin}
-              placeholder="17 символів (обов'язково)"
-              placeholderTextColor={theme.colors.special.placeholder}
-              autoCapitalize="characters"
-              maxLength={17}
-            />
-          </View>
+              <View style={styles.field}>
+                <Text style={styles.label}>VIN номер *</Text>
+                <TextInput
+                  style={styles.input}
+                  value={vin}
+                  onChangeText={(text) => setVin(normalizeVinInput(text))}
+                  placeholder="17 символів (латиниця, без I, O, Q)"
+                  placeholderTextColor="#8E8E93"
+                  autoCapitalize="characters"
+                  maxLength={17}
+                />
+              </View>
+            </>
+          )}
 
-          {/* Date bought */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Дата купівлі
-            </Text>
-            <TouchableOpacity
-              style={[globalStyles.input, styles.input]}
-              onPress={() => setShowBoughtAtPicker(true)}
-            >
-              <Text
-                style={
-                  boughtAt
-                    ? [globalStyles.textPrimary, { paddingVertical: 12 }]
-                    : [
-                        { color: theme.colors.special.placeholder, paddingVertical: 12 },
-                      ]
-                }
-              >
-                {boughtAt
-                  ? boughtAt.toLocaleDateString("uk-UA")
-                  : "Оберіть дату (необов'язково)"}
-              </Text>
-            </TouchableOpacity>
-            {showBoughtAtPicker && (
-              <DateTimePicker
-                value={boughtAt ?? new Date()}
-                mode="date"
-                display={Platform.OS === "ios" ? "spinner" : "default"}
-                maximumDate={new Date()}
-                onChange={(_, date) => {
-                  setShowBoughtAtPicker(Platform.OS === "ios");
-                  if (date) setBoughtAt(date);
-                }}
-              />
-            )}
-          </View>
+          {currentStep === 2 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Дата купівлі</Text>
+                <TouchableOpacity
+                  style={[styles.input, styles.dateInput]}
+                  onPress={openBoughtAtPicker}
+                  activeOpacity={0.8}
+                >
+                  <Text style={styles.dateInputText}>
+                    {boughtAt.toLocaleDateString("uk-UA")}
+                  </Text>
+                </TouchableOpacity>
+              </View>
 
-          {/* Mileage */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Пробіг (км) *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={mileage}
-              onChangeText={setMileage}
-              placeholder="Наприклад: 50000"
-              placeholderTextColor={theme.colors.special.placeholder}
-              keyboardType="number-pad"
-            />
-          </View>
+              <View style={styles.field}>
+                <Text style={styles.label}>Пробіг (км) *</Text>
+                <TextInput
+                  style={styles.input}
+                  value={mileage}
+                  onChangeText={setMileage}
+                  placeholder="Наприклад: 50000"
+                  placeholderTextColor="#8E8E93"
+                  keyboardType="number-pad"
+                />
+              </View>
+            </>
+          )}
 
-          {/* Engine power */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Потужність двигуна (к.с.) *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={enginePower}
-              onChangeText={setEnginePower}
-              placeholder="Наприклад: 150"
-              placeholderTextColor={theme.colors.special.placeholder}
-              keyboardType="number-pad"
-            />
-          </View>
+          {currentStep === 3 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Тип палива *</Text>
+                <Select
+                  options={FUEL_TYPE_OPTIONS}
+                  value={fuelType}
+                  onValueChange={(value) =>
+                    setFuelType(normalizeFuelType(value))
+                  }
+                  placeholder="Виберіть тип палива"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
 
-          {/* Body Class Field */}
-          <Select
-            label="Тип кузова"
-            options={BODY_CLASS_OPTIONS}
-            value={bodyClass}
-            onValueChange={setBodyClass}
-            placeholder="Виберіть тип кузова"
-          />
+              <View style={styles.field}>
+                <Text style={styles.label}>{getEnginePowerLabel(fuelType)}</Text>
+                <TextInput
+                  style={styles.input}
+                  value={enginePower}
+                  onChangeText={setEnginePower}
+                  placeholder="Наприклад: 150"
+                  placeholderTextColor="#8E8E93"
+                  keyboardType="number-pad"
+                />
+              </View>
 
-          {/* Fuel Type Field */}
-          <Select
-            label="Тип палива *"
-            options={FUEL_TYPE_OPTIONS}
-            value={fuelType}
-            onValueChange={(v) => setFuelType(v as number)}
-            placeholder="Виберіть тип палива"
-          />
+              {requiresEngineDisplacement(fuelType) ? (
+                <View style={styles.field}>
+                  <Text style={styles.label}>Об&apos;єм двигуна (л) *</Text>
+                  <TextInput
+                    style={styles.input}
+                    value={displacement}
+                    onChangeText={setDisplacement}
+                    placeholder="Наприклад: 2.0, 3.5"
+                    placeholderTextColor="#8E8E93"
+                    keyboardType="decimal-pad"
+                  />
+                </View>
+              ) : null}
 
-          {/* Displacement Field */}
-          <View style={styles.inputContainer}>
-            <Text style={[globalStyles.textPrimary, styles.label]}>
-              Об&apos;єм двигуна (л) *
-            </Text>
-            <TextInput
-              style={[globalStyles.input, styles.input]}
-              value={displacement}
-              onChangeText={setDisplacement}
-              placeholder="Наприклад: 2.0, 3.5"
-              placeholderTextColor={theme.colors.special.placeholder}
-              keyboardType="decimal-pad"
-            />
-          </View>
+              <View style={styles.field}>
+                <Text style={styles.label}>Тип кузова</Text>
+                <Select
+                  options={BODY_CLASS_OPTIONS}
+                  value={bodyClass}
+                  onValueChange={setBodyClass}
+                  placeholder="Виберіть тип кузова"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
+            </>
+          )}
 
-          {/* Transmission Field */}
-          <Select
-            label="Коробка передач *"
-            options={TRANSMISSION_API_OPTIONS}
-            value={transmission}
-            onValueChange={(v) => setTransmission(v as number)}
-            placeholder="Виберіть коробку передач"
-          />
+          {currentStep === 4 && (
+            <>
+              <View style={styles.field}>
+                <Text style={styles.label}>Коробка передач *</Text>
+                <Select
+                  options={getTransmissionOptionsForFuel(
+                    fuelType,
+                    TRANSMISSION_API_OPTIONS
+                  )}
+                  value={transmission}
+                  onValueChange={(value) =>
+                    setTransmission(normalizeTransmissionType(value))
+                  }
+                  placeholder={
+                    normalizeFuelType(fuelType) === FuelType.Electric
+                      ? "Для електрокарів — автомат або CVT"
+                      : "Виберіть коробку передач"
+                  }
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
 
-          {/* Drive Type Field */}
-          <Select
-            label="Привід *"
-            options={WHEEL_DRIVE_API_OPTIONS}
-            value={driveType}
-            onValueChange={(v) => setDriveType(v as number)}
-            placeholder="Виберіть тип приводу"
-          />
+              <View style={styles.field}>
+                <Text style={styles.label}>Привід *</Text>
+                <Select
+                  options={WHEEL_DRIVE_API_OPTIONS}
+                  value={driveType}
+                  onValueChange={(v) => setDriveType(v as number)}
+                  placeholder="Виберіть тип приводу"
+                  containerStyle={styles.selectContainer}
+                />
+              </View>
+            </>
+          )}
 
-          {/* Action Buttons */}
-          <View style={styles.buttonContainer}>
+          {currentStep === 5 && (
             <TouchableOpacity
-              style={globalStyles.buttonSecondary}
-              onPress={handleCancel}
+              style={styles.photoCard}
+              onPress={pickImage}
+              activeOpacity={0.9}
             >
-              <Text style={globalStyles.buttonSecondaryText}>Скасувати</Text>
+              {carImage ? (
+                <Image source={{ uri: carImage }} style={styles.photoImage} />
+              ) : (
+                <View style={styles.photoPlaceholder}>
+                  <Feather
+                    name="image"
+                    size={32}
+                    color={theme.colors.accent.primary}
+                  />
+                  <Text style={styles.photoPlaceholderText}>
+                    Додати фото автомобіля
+                  </Text>
+                </View>
+              )}
+              <View style={styles.photoOverlay}>
+                <Feather name="camera" size={16} color="#FFFFFF" />
+                <Text style={styles.photoOverlayText}>
+                  {carImage ? "Змінити фото" : "Обрати фото"}
+                </Text>
+              </View>
             </TouchableOpacity>
+          )}
+        </View>
+      </Animated.View>
 
+      <View style={styles.actionsRow}>
+        <TouchableOpacity
+          style={[styles.secondaryButton, styles.halfButton]}
+          onPress={currentStep === 0 ? handleCancel : handlePreviousStep}
+          activeOpacity={0.85}
+        >
+          <Feather
+            name={currentStep === 0 ? "x" : "arrow-left"}
+            size={18}
+            color={theme.colors.accent.primary}
+          />
+          <Text style={styles.secondaryButtonText}>
+            {currentStep === 0 ? "Скасувати" : "Назад"}
+          </Text>
+        </TouchableOpacity>
+
+        {currentStep < TOTAL_STEPS - 1 ? (
+          <TouchableOpacity
+            style={[styles.primaryButton, styles.halfButton]}
+            onPress={handleNextStep}
+            activeOpacity={0.85}
+          >
+            <Text style={styles.primaryButtonText}>Далі</Text>
+            <Feather
+              name="arrow-right"
+              size={18}
+              color={theme.colors.text.inverse}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            style={[styles.primaryButton, styles.halfButton]}
+            onPress={handleSave}
+            activeOpacity={0.85}
+          >
+            <Feather
+              name="check"
+              size={18}
+              color={theme.colors.text.inverse}
+            />
+            <Text style={styles.primaryButtonText}>Зберегти</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {Platform.OS === "ios" ? (
+        <Modal
+          visible={showBoughtAtPicker}
+          transparent
+          animationType="slide"
+          onRequestClose={closeBoughtAtPicker}
+        >
+          <View style={styles.datePickerModalRoot}>
             <TouchableOpacity
-              style={globalStyles.buttonPrimary}
-              onPress={handleSave}
-            >
-              <Text style={globalStyles.buttonPrimaryText}>Зберегти</Text>
-            </TouchableOpacity>
+              style={styles.datePickerBackdrop}
+              activeOpacity={1}
+              onPress={closeBoughtAtPicker}
+            />
+            <View style={styles.datePickerSheet}>
+              <View style={styles.datePickerHandle} />
+              <View style={styles.datePickerHeader}>
+                <TouchableOpacity onPress={confirmBoughtAtPicker}>
+                  <Text style={styles.datePickerDoneText}>Готово</Text>
+                </TouchableOpacity>
+              </View>
+              <DateTimePicker
+                value={pickerDate}
+                mode="date"
+                display="spinner"
+                maximumDate={new Date()}
+                themeVariant="dark"
+                textColor={theme.colors.text.primary}
+                onChange={(_, date) => {
+                  if (date) setPickerDate(date);
+                }}
+              />
+            </View>
           </View>
-        </View>
+        </Modal>
+      ) : (
+        showBoughtAtPicker && (
+          <DateTimePicker
+            value={pickerDate}
+            mode="date"
+            display="default"
+            maximumDate={new Date()}
+            onChange={(event, date) => {
+              setShowBoughtAtPicker(false);
+              if (event.type === "set" && date) {
+                setBoughtAt(date);
+              }
+            }}
+          />
+        )
+      )}
     </FormScreen>
   );
 }
diff --git a/apps/Mobile/src/screens/CarEditScreen/CarEditScreen.tsx b/apps/Mobile/src/screens/CarEditScreen/CarEditScreen.tsx
index 9d16e9a29..292ff7f25 100644
--- a/apps/Mobile/src/screens/CarEditScreen/CarEditScreen.tsx
+++ b/apps/Mobile/src/screens/CarEditScreen/CarEditScreen.tsx
@@ -5,7 +5,6 @@ import {
   TextInput,
   TouchableOpacity,
   Image,
-  Alert,
   Platform,
   ActivityIndicator,
 } from "react-native";
@@ -22,6 +21,7 @@ import { CarEditScreenProps } from "../../navigation/types";
 import { Select, SelectOption } from "../../components/Select";
 import { useVehicle, useUpdateVehicle, useDeleteVehicle } from "../../queries";
 import { formatVinShort } from "../HomeScreen/homeScreenUtils";
+import { useAppAlert } from "../../components/AppAlert";
 
 const COLOR_OPTIONS: SelectOption[] = [
   { label: "Білий", value: "white" },
@@ -44,6 +44,7 @@ export default function CarEditScreen({
 }: CarEditScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showAlert, showError, showSuccess } = useAppAlert();
   const { carId } = route.params;
   const {
     data: vehicle,
@@ -75,7 +76,7 @@ export default function CarEditScreen({
     const permissionResult =
       await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (permissionResult.granted === false) {
-      Alert.alert("Дозвіл потрібен", "Потрібен дозвіл для доступу до галереї!");
+      showError("Потрібен дозвіл для доступу до галереї!", "Дозвіл потрібен");
       return;
     }
     const result = await ImagePicker.launchImageLibraryAsync({
@@ -114,18 +115,18 @@ export default function CarEditScreen({
 
   const handleCancel = () => {
     if (hasChanges()) {
-      Alert.alert(
-        "Скасувати зміни?",
-        "Ви внесли зміни. Ви впевнені, що хочете скасувати?",
-        [
+      showAlert({
+        title: "Скасувати зміни?",
+        message: "Ви внесли зміни. Ви впевнені, що хочете скасувати?",
+        buttons: [
           { text: "Продовжити редагування", style: "cancel" },
           {
             text: "Скасувати",
             style: "destructive",
             onPress: () => navigation.goBack(),
           },
-        ]
-      );
+        ],
+      });
     } else {
       navigation.goBack();
     }
@@ -133,16 +134,16 @@ export default function CarEditScreen({
 
   const handleSave = async () => {
     if (!licensePlate.trim()) {
-      Alert.alert("Помилка", "Введіть номерний знак");
+      showError("Введіть номерний знак");
       return;
     }
     const mileageNum = parseInt(mileage.trim(), 10);
     if (mileage.trim() === "" || isNaN(mileageNum) || mileageNum < 0) {
-      Alert.alert("Помилка", "Введіть коректний пробіг (км)");
+      showError("Введіть коректний пробіг (км)");
       return;
     }
     if (mileageNum > 1000000) {
-      Alert.alert("Помилка", "Пробіг не може перевищувати 1 000 000 км");
+      showError("Пробіг не може перевищувати 1 000 000 км");
       return;
     }
 
@@ -160,22 +161,22 @@ export default function CarEditScreen({
 
     try {
       await updateVehicle.mutateAsync({ vehicleId: carId, data: dto });
-      Alert.alert("Успішно!", "Дані автомобіля оновлені", [
+      showSuccess("Дані автомобіля оновлені", "Успішно!", [
         { text: "OK", onPress: () => navigation.goBack() },
       ]);
     } catch (e) {
-      Alert.alert(
-        "Помилка",
+      showError(
         e instanceof Error ? e.message : "Не вдалося зберегти зміни"
       );
     }
   };
 
   const handleDelete = () => {
-    Alert.alert(
-      "Видалити автомобіль?",
-      "Ви впевнені, що хочете видалити цей автомобіль? Цю дію неможливо скасувати.",
-      [
+    showAlert({
+      title: "Видалити автомобіль?",
+      message:
+        "Ви впевнені, що хочете видалити цей автомобіль? Цю дію неможливо скасувати.",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         {
           text: "Видалити",
@@ -185,15 +186,14 @@ export default function CarEditScreen({
               await deleteVehicle.mutateAsync(carId);
               navigation.navigate("Home");
             } catch (e) {
-              Alert.alert(
-                "Помилка",
+              showError(
                 e instanceof Error ? e.message : "Не вдалося видалити"
               );
             }
           },
         },
-      ]
-    );
+      ],
+    });
   };
 
   if (isLoadingVehicle || !vehicle) {
@@ -377,10 +377,7 @@ export default function CarEditScreen({
       <Animated.View entering={FadeIn.duration(300).delay(240)}>
         <View style={styles.actionsSection}>
           <TouchableOpacity
-            style={[
-              styles.saveButton,
-              isSaving && styles.saveButtonDisabled,
-            ]}
+            style={[styles.saveButton, isSaving && styles.saveButtonDisabled]}
             onPress={handleSave}
             disabled={isSaving}
             activeOpacity={0.85}
@@ -397,11 +394,7 @@ export default function CarEditScreen({
             disabled={isSaving}
             activeOpacity={0.85}
           >
-            <Feather
-              name="x"
-              size={18}
-              color={theme.colors.accent.primary}
-            />
+            <Feather name="x" size={18} color={theme.colors.accent.primary} />
             <Text style={styles.cancelButtonText}>Скасувати</Text>
           </TouchableOpacity>
         </View>
diff --git a/apps/Mobile/src/screens/HomeScreen/GarageContent.tsx b/apps/Mobile/src/screens/HomeScreen/GarageContent.tsx
index 07061cc25..25efd5d25 100644
--- a/apps/Mobile/src/screens/HomeScreen/GarageContent.tsx
+++ b/apps/Mobile/src/screens/HomeScreen/GarageContent.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Alert,
   Image,
   RefreshControl,
   ScrollView,
@@ -34,7 +33,9 @@ import {
   TRANSMISSION_LABELS,
   WHEEL_DRIVE_LABELS,
 } from "./homeScreenUtils";
+import { formatEngineDisplay } from "../../utils/vehicleFormUtils";
 import { styles } from "./GarageContent.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const CAR_PLACEHOLDER_SVG = `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.849 420.849">
@@ -120,6 +121,7 @@ export function GarageContent({
   contentContainerStyle,
 }: GarageContentProps) {
   const theme = useTheme();
+  const { showAlert } = useAppAlert();
   const insets = useSafeAreaInsets();
   const pickerRef = React.useRef<View>(null);
   const [isPickerOpen, setIsPickerOpen] = React.useState(false);
@@ -138,7 +140,7 @@ export function GarageContent({
 
   const handleCopyVin = () => {
     if (car?.vin) {
-      Alert.alert("VIN-код", car.vin, [{ text: "OK" }]);
+      showAlert({ title: "VIN-код", message: car.vin, buttons: [{ text: "OK" }] });
     }
   };
 
@@ -487,8 +489,11 @@ export function GarageContent({
                         <View style={styles.infoContent}>
                           <Text style={styles.infoLabel}>Двигун</Text>
                           <Text style={styles.infoValue}>
-                            {(car.engineCapacity / 1000).toFixed(1)} л,{" "}
-                            {car.enginePower} к.с.
+                            {formatEngineDisplay(
+                              car.engineCapacity,
+                              car.enginePower,
+                              car.fuelType as FuelType
+                            )}
                           </Text>
                         </View>
                       </View>
diff --git a/apps/Mobile/src/screens/HomeScreen/HomeScreen.tsx b/apps/Mobile/src/screens/HomeScreen/HomeScreen.tsx
index b716e2555..0ec148e63 100644
--- a/apps/Mobile/src/screens/HomeScreen/HomeScreen.tsx
+++ b/apps/Mobile/src/screens/HomeScreen/HomeScreen.tsx
@@ -4,7 +4,6 @@ import {
   View,
   TouchableOpacity,
   ActivityIndicator,
-  Alert,
 } from "react-native";
 import Animated, { FadeIn } from "react-native-reanimated";
 import { SvgXml } from "react-native-svg";
@@ -23,6 +22,7 @@ import { GarageContent } from "./GarageContent";
 import { useTheme } from "../../hooks/useTheme";
 import { NotificationBellButton } from "../../components/NotificationBellButton";
 import { useNotifications } from "../../context/NotificationsContext";
+import { useAppAlert } from "../../components/AppAlert";
 
 const CAR_PLACEHOLDER_SVG = `
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.849 420.849">
@@ -38,6 +38,7 @@ const CAR_PLACEHOLDER_SVG = `
 export default function HomeScreen({ navigation }: HomeScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showError } = useAppAlert();
   const insets = useSafeAreaInsets();
   const { unreadCount } = useNotifications();
   const [selectedVehicleId, setSelectedVehicleId] = React.useState<
@@ -97,9 +98,9 @@ export default function HomeScreen({ navigation }: HomeScreenProps) {
 
   const openServiceHistory = () => {
     if (!activeVehicleId) {
-      Alert.alert(
-        "Немає автомобіля",
-        "Додайте авто, щоб переглядати історію обслуговування."
+      showError(
+        "Додайте авто, щоб переглядати історію обслуговування.",
+        "Немає автомобіля"
       );
       return;
     }
diff --git a/apps/Mobile/src/screens/LoginScreen/LoginScreen.tsx b/apps/Mobile/src/screens/LoginScreen/LoginScreen.tsx
index 27a7c1118..17598bebc 100644
--- a/apps/Mobile/src/screens/LoginScreen/LoginScreen.tsx
+++ b/apps/Mobile/src/screens/LoginScreen/LoginScreen.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import {
   ActivityIndicator,
-  Alert,
   Image,
   Text,
   View,
@@ -11,9 +10,11 @@ import { useAuth } from "../../context/AuthContext";
 import { useStatusBar } from "../../hooks/useStatusBar";
 import { globalStyles } from "../../styles/globalStyles";
 import { styles } from "./LoginScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function LoginScreen() {
   const { login } = useAuth();
+  const { showError } = useAppAlert();
   const [loading, setLoading] = useState(false);
   const handleLogin = async () => {
     try {
@@ -23,11 +24,11 @@ export default function LoginScreen() {
       if (error instanceof Error && error.message.includes("cancel")) {
         // user cancelled
       } else {
-        Alert.alert(
-          "Login Failed",
+        showError(
           error instanceof Error
             ? error.message
-            : "Failed to login. Please try again."
+            : "Failed to login. Please try again.",
+          "Login Failed"
         );
       }
     } finally {
diff --git a/apps/Mobile/src/screens/MechanicActiveWorkScreen/MechanicActiveWorkContent.tsx b/apps/Mobile/src/screens/MechanicActiveWorkScreen/MechanicActiveWorkContent.tsx
index 479c31c94..fd1bf18b4 100644
--- a/apps/Mobile/src/screens/MechanicActiveWorkScreen/MechanicActiveWorkContent.tsx
+++ b/apps/Mobile/src/screens/MechanicActiveWorkScreen/MechanicActiveWorkContent.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  Alert,
   Image,
   ScrollView,
   Text,
@@ -37,6 +36,7 @@ import {
   PART_ORDER_STATUS_ORDER,
 } from "./mechanicPartsUtils";
 import { styles } from "./MechanicActiveWorkContent.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const MAX_PHOTOS = 6;
 
@@ -593,10 +593,12 @@ function EstimateWorkItemRow({ item, onPriceChange }: EstimateWorkItemProps) {
   );
 }
 
-async function pickPhoto(): Promise<string | null> {
+async function pickPhoto(
+  showPermissionError: (message: string, title?: string) => void
+): Promise<string | null> {
   const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
   if (!permission.granted) {
-    Alert.alert("Дозвіл потрібен", "Потрібен дозвіл для доступу до галереї");
+    showPermissionError("Потрібен дозвіл для доступу до галереї", "Дозвіл потрібен");
     return null;
   }
 
@@ -613,6 +615,7 @@ export function MechanicActiveWorkContent({
   contentContainerStyle,
 }: MechanicActiveWorkContentProps) {
   const theme = useTheme();
+  const { showAlert, showError } = useAppAlert();
   const insets = useSafeAreaInsets();
   const scrollTopInset = 16 + insets.top;
 
@@ -642,19 +645,19 @@ export function MechanicActiveWorkContent({
 
   const handlePickWorkItemPhoto = async (workItemId: string, currentCount: number) => {
     if (currentCount >= MAX_PHOTOS) {
-      Alert.alert("Ліміт", `Можна додати до ${MAX_PHOTOS} фото`);
+      showError(`Можна додати до ${MAX_PHOTOS} фото`, "Ліміт");
       return;
     }
-    const uri = await pickPhoto();
+    const uri = await pickPhoto(showError);
     if (uri) addWorkItemPhoto(workItemId, uri);
   };
 
   const handlePickConclusionPhoto = async () => {
     if ((session?.conclusionPhotos.length ?? 0) >= MAX_PHOTOS) {
-      Alert.alert("Ліміт", `Можна додати до ${MAX_PHOTOS} фото`);
+      showError(`Можна додати до ${MAX_PHOTOS} фото`, "Ліміт");
       return;
     }
-    const uri = await pickPhoto();
+    const uri = await pickPhoto(showError);
     if (uri) addConclusionPhoto(uri);
   };
 
@@ -663,18 +666,19 @@ export function MechanicActiveWorkContent({
     const hasValidWork = planned.some((item) => item.title.trim().length > 0);
 
     if (!hasValidWork) {
-      Alert.alert("Помилка", "Додайте хоча б одну роботу з назвою перед погодженням");
+      showError("Додайте хоча б одну роботу з назвою перед погодженням");
       return;
     }
 
-    Alert.alert(
-      "Погодити кошторис?",
-      "Клієнт отримає список робіт та приблизну вартість для підтвердження.",
-      [
+    showAlert({
+      title: "Погодити кошторис?",
+      message:
+        "Клієнт отримає список робіт та приблизну вартість для підтвердження.",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         { text: "Погодити", onPress: approveDiagnostics },
-      ]
-    );
+      ],
+    });
   };
 
   const handleCompleteRepair = () => {
@@ -684,14 +688,15 @@ export function MechanicActiveWorkContent({
       ) ?? [];
 
     if (planned.length > 0) {
-      Alert.alert(
-        "Незавершені роботи",
-        "Деякі роботи ще не позначені як виконані. Все одно перейти до фінальної перевірки?",
-        [
+      showAlert({
+        title: "Незавершені роботи",
+        message:
+          "Деякі роботи ще не позначені як виконані. Все одно перейти до фінальної перевірки?",
+        buttons: [
           { text: "Скасувати", style: "cancel" },
           { text: "Перейти", onPress: completeRepair },
-        ]
-      );
+        ],
+      });
       return;
     }
 
@@ -699,14 +704,15 @@ export function MechanicActiveWorkContent({
   };
 
   const handleReturnToRepair = () => {
-    Alert.alert(
-      "Повернутись до ремонту?",
-      "Ви зможете змінити статуси робіт, додати фото та продовжити ремонт.",
-      [
+    showAlert({
+      title: "Повернутись до ремонту?",
+      message:
+        "Ви зможете змінити статуси робіт, додати фото та продовжити ремонт.",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         { text: "Повернутись", onPress: returnToRepair },
-      ]
-    );
+      ],
+    });
   };
 
   const handleStartWaitingParts = () => {
@@ -725,14 +731,15 @@ export function MechanicActiveWorkContent({
       session?.partOrders.filter((item) => item.status !== "received") ?? [];
 
     if (pending.length > 0) {
-      Alert.alert(
-        "Деталі ще не всі отримані",
-        "Деякі позиції ще не позначені як «Отримано». Продовжити ремонт?",
-        [
+      showAlert({
+        title: "Деталі ще не всі отримані",
+        message:
+          "Деякі позиції ще не позначені як «Отримано». Продовжити ремонт?",
+        buttons: [
           { text: "Скасувати", style: "cancel" },
           { text: "Продовжити", onPress: returnToRepair },
-        ]
-      );
+        ],
+      });
       return;
     }
 
@@ -741,18 +748,19 @@ export function MechanicActiveWorkContent({
 
   const handleFinishWork = () => {
     if (!session?.conclusion.trim()) {
-      Alert.alert("Помилка", "Напишіть висновок для водія перед завершенням");
+      showError("Напишіть висновок для водія перед завершенням");
       return;
     }
 
-    Alert.alert(
-      "Завершити роботу?",
-      "Водій побачить кошторис, висновок та фото. Статус зміниться на «Завершено».",
-      [
+    showAlert({
+      title: "Завершити роботу?",
+      message:
+        "Водій побачить кошторис, висновок та фото. Статус зміниться на «Завершено».",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         { text: "Завершити", onPress: finishWork },
-      ]
-    );
+      ],
+    });
   };
 
   if (!activeVehicle || !session) {
diff --git a/apps/Mobile/src/screens/MechanicActiveWorkScreen/mechanicSessionConfig.ts b/apps/Mobile/src/screens/MechanicActiveWorkScreen/mechanicSessionConfig.ts
index 2d2dc5c2f..89d8c76be 100644
--- a/apps/Mobile/src/screens/MechanicActiveWorkScreen/mechanicSessionConfig.ts
+++ b/apps/Mobile/src/screens/MechanicActiveWorkScreen/mechanicSessionConfig.ts
@@ -63,8 +63,9 @@ export function mapSessionToDriverStatus(
     case "diagnostics":
       return "diagnostics";
     case "repair":
-    case "waiting_parts":
       return "in_progress";
+    case "waiting_parts":
+      return "waiting_parts";
     case "final_check":
       return "quality_check";
     case "estimate":
diff --git a/apps/Mobile/src/screens/ProfileEditScreen/ProfileEditScreen.tsx b/apps/Mobile/src/screens/ProfileEditScreen/ProfileEditScreen.tsx
index 789829868..5aaab8b8d 100644
--- a/apps/Mobile/src/screens/ProfileEditScreen/ProfileEditScreen.tsx
+++ b/apps/Mobile/src/screens/ProfileEditScreen/ProfileEditScreen.tsx
@@ -4,7 +4,6 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
-  Alert,
   ActivityIndicator,
 } from "react-native";
 import Animated, { FadeIn } from "react-native-reanimated";
@@ -17,12 +16,14 @@ import { globalStyles } from "../../styles/globalStyles";
 import { styles } from "./ProfileEditScreen.styles";
 import { ProfileEditScreenProps } from "../../navigation/types";
 import { formatPhone } from "../ProfileScreen/profileUtils";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function ProfileEditScreen({
   navigation,
 }: ProfileEditScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showAlert, showError, showSuccess } = useAppAlert();
   const { data: meData, isLoading: isLoadingMe } = useMe();
   const updateUserMutation = useUpdateUserProfile();
 
@@ -42,12 +43,12 @@ export default function ProfileEditScreen({
 
   const handleSave = async () => {
     if (!name.trim()) {
-      Alert.alert("Помилка", "Будь ласка, введіть ваше ім'я");
+      showError("Будь ласка, введіть ваше ім'я");
       return;
     }
 
     if (!email.trim()) {
-      Alert.alert("Помилка", "Будь ласка, введіть вашу пошту");
+      showError("Будь ласка, введіть вашу пошту");
       return;
     }
 
@@ -57,7 +58,7 @@ export default function ProfileEditScreen({
         email: email.trim(),
       });
 
-      Alert.alert("Успішно!", "Профіль успішно оновлено", [
+      showSuccess("Профіль успішно оновлено", "Успішно!", [
         { text: "OK", onPress: () => navigation.goBack() },
       ]);
     } catch (error) {
@@ -80,7 +81,7 @@ export default function ProfileEditScreen({
         }
       }
 
-      Alert.alert("Помилка", errorMessage);
+      showError(errorMessage);
     }
   };
 
@@ -89,18 +90,18 @@ export default function ProfileEditScreen({
       name !== (meData?.name || "") || email !== (meData?.email || "");
 
     if (hasChanges) {
-      Alert.alert(
-        "Скасувати зміни?",
-        "Ви вже внесли зміни. Ви впевнені, що хочете скасувати?",
-        [
+      showAlert({
+        title: "Скасувати зміни?",
+        message: "Ви вже внесли зміни. Ви впевнені, що хочете скасувати?",
+        buttons: [
           { text: "Продовжити редагування", style: "cancel" },
           {
             text: "Скасувати",
             style: "destructive",
             onPress: () => navigation.goBack(),
           },
-        ]
-      );
+        ],
+      });
     } else {
       navigation.goBack();
     }
diff --git a/apps/Mobile/src/screens/ProfileScreen/ProfileScreen.tsx b/apps/Mobile/src/screens/ProfileScreen/ProfileScreen.tsx
index 404c4ba8c..f24915503 100644
--- a/apps/Mobile/src/screens/ProfileScreen/ProfileScreen.tsx
+++ b/apps/Mobile/src/screens/ProfileScreen/ProfileScreen.tsx
@@ -4,7 +4,6 @@ import {
   View,
   TouchableOpacity,
   ScrollView,
-  Alert,
   ActivityIndicator,
   Image,
   RefreshControl,
@@ -20,12 +19,14 @@ import { globalStyles } from "../../styles/globalStyles";
 import { styles } from "./ProfileScreen.styles";
 import { ProfileScreenProps } from "../../navigation/types";
 import { formatPhone, getProfileInitials } from "./profileUtils";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function ProfileScreen({ navigation }: ProfileScreenProps) {
   useStatusBar();
   const { logout } = useAuth();
   const { data: meData, isLoading, error, refetch } = useMe();
   const theme = useTheme();
+  const { showAlert } = useAppAlert();
 
   const refreshProfile = React.useCallback(async () => {
     await refetch();
@@ -38,10 +39,14 @@ export default function ProfileScreen({ navigation }: ProfileScreenProps) {
   };
 
   const handleLogout = () => {
-    Alert.alert("Вийти з акаунту?", "Ви впевнені, що хочете вийти?", [
-      { text: "Скасувати", style: "cancel" },
-      { text: "Вийти", style: "destructive", onPress: logout },
-    ]);
+    showAlert({
+      title: "Вийти з акаунту?",
+      message: "Ви впевнені, що хочете вийти?",
+      buttons: [
+        { text: "Скасувати", style: "cancel" },
+        { text: "Вийти", style: "destructive", onPress: logout },
+      ],
+    });
   };
 
   if (isLoading) {
diff --git a/apps/Mobile/src/screens/ProfileSetupScreen/ProfileSetupScreen.tsx b/apps/Mobile/src/screens/ProfileSetupScreen/ProfileSetupScreen.tsx
index bfef9209a..2a7e17dd0 100644
--- a/apps/Mobile/src/screens/ProfileSetupScreen/ProfileSetupScreen.tsx
+++ b/apps/Mobile/src/screens/ProfileSetupScreen/ProfileSetupScreen.tsx
@@ -4,7 +4,6 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
-  Alert,
   ActivityIndicator,
 } from "react-native";
 import { FormScreen } from "../../components/FormScreen";
@@ -13,12 +12,14 @@ import { useAuth } from "../../context/AuthContext";
 import { useUpdateUserProfile } from "../../queries/userQueries";
 import { styles } from "./ProfileSetupScreen.styles";
 import { ProfileSetupScreenProps } from "../../navigation/types";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function ProfileSetupScreen({
   navigation,
 }: ProfileSetupScreenProps) {
   const { meData } = useAuth();
   const updateUserMutation = useUpdateUserProfile();
+  const { showAlert, showError } = useAppAlert();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [isLoadingProfile, setIsLoadingProfile] = useState(true);
@@ -36,10 +37,10 @@ export default function ProfileSetupScreen({
     const hasData = name.trim() || email.trim();
 
     if (hasData) {
-      Alert.alert(
-        "Скасувати створення профілю?",
-        "Ви вже ввели деякі дані. Ви впевнені, що хочете скасувати?",
-        [
+      showAlert({
+        title: "Скасувати створення профілю?",
+        message: "Ви вже ввели деякі дані. Ви впевнені, що хочете скасувати?",
+        buttons: [
           {
             text: "Продовжити редагування",
             style: "cancel",
@@ -49,8 +50,8 @@ export default function ProfileSetupScreen({
             style: "destructive",
             onPress: () => navigation.navigate("Home"),
           },
-        ]
-      );
+        ],
+      });
     } else {
       navigation.navigate("Home");
     }
@@ -58,11 +59,11 @@ export default function ProfileSetupScreen({
 
   const handleContinue = async () => {
     if (!name.trim()) {
-      Alert.alert("Error", "Будь ласка, введи своє імʼя");
+      showError("Будь ласка, введи своє імʼя", "Error");
       return;
     }
     if (!email.trim()) {
-      Alert.alert("Error", "Будь ласка, введи свою пошту");
+      showError("Будь ласка, введи свою пошту", "Error");
       return;
     }
 
@@ -94,7 +95,7 @@ export default function ProfileSetupScreen({
         }
       }
 
-      Alert.alert("Помилка", errorMessage);
+      showError(errorMessage);
     }
   };
 
diff --git a/apps/Mobile/src/screens/ServiceBookingScreen/ServiceBookingScreen.tsx b/apps/Mobile/src/screens/ServiceBookingScreen/ServiceBookingScreen.tsx
index a5804d836..4da3caaae 100644
--- a/apps/Mobile/src/screens/ServiceBookingScreen/ServiceBookingScreen.tsx
+++ b/apps/Mobile/src/screens/ServiceBookingScreen/ServiceBookingScreen.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Alert,
   Image,
   Text,
   TextInput,
@@ -31,6 +30,7 @@ import {
   VISIT_REASON_OPTIONS,
 } from "./serviceBookingConfig";
 import { styles } from "./ServiceBookingScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const MAX_PHOTO_ATTACHMENTS = 3;
 
@@ -44,6 +44,7 @@ export default function ServiceBookingScreen({
 }: ServiceBookingScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showError, showSuccess } = useAppAlert();
   const { serviceId, serviceName } = route.params;
   void serviceId;
 
@@ -88,16 +89,16 @@ export default function ServiceBookingScreen({
 
   const handlePickMedia = async () => {
     if (attachments.length >= MAX_PHOTO_ATTACHMENTS) {
-      Alert.alert(
-        "Ліміт досягнуто",
-        `Можна додати до ${MAX_PHOTO_ATTACHMENTS} фото або відео`
+      showError(
+        `Можна додати до ${MAX_PHOTO_ATTACHMENTS} фото або відео`,
+        "Ліміт досягнуто"
       );
       return;
     }
 
     const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!permission.granted) {
-      Alert.alert("Дозвіл потрібен", "Потрібен дозвіл для доступу до галереї");
+      showError("Потрібен дозвіл для доступу до галереї", "Дозвіл потрібен");
       return;
     }
 
@@ -126,27 +127,27 @@ export default function ServiceBookingScreen({
 
   const handleSubmit = async () => {
     if (!selectedVehicleId || !selectedVehicle) {
-      Alert.alert("Помилка", "Оберіть автомобіль для запису");
+      showError("Оберіть автомобіль для запису");
       return;
     }
     if (!visitReason) {
-      Alert.alert("Помилка", "Оберіть причину візиту");
+      showError("Оберіть причину візиту");
       return;
     }
     if (!problemDescription.trim()) {
-      Alert.alert("Помилка", "Опишіть проблему своїми словами");
+      showError("Опишіть проблему своїми словами");
       return;
     }
     if (!selectedDateKey) {
-      Alert.alert("Помилка", "Оберіть бажану дату");
+      showError("Оберіть бажану дату");
       return;
     }
     if (!timeSlot) {
-      Alert.alert("Помилка", "Оберіть часовий слот");
+      showError("Оберіть часовий слот");
       return;
     }
     if (!partsOption) {
-      Alert.alert("Помилка", "Вкажіть, чи потрібні запчастини від СТО");
+      showError("Вкажіть, чи потрібні запчастини від СТО");
       return;
     }
 
@@ -154,9 +155,9 @@ export default function ServiceBookingScreen({
     try {
       await new Promise((resolve) => setTimeout(resolve, 600));
 
-      Alert.alert(
-        "Заявку надіслано",
+      showSuccess(
         `${serviceName ?? "СТО"} отримає вашу заявку. Адміністратор зателефонує, щоб підтвердити точний час.`,
+        "Заявку надіслано",
         [{ text: "OK", onPress: () => navigation.goBack() }]
       );
     } finally {
diff --git a/apps/Mobile/src/screens/ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.tsx b/apps/Mobile/src/screens/ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.tsx
index 2aedc61d9..22689bece 100644
--- a/apps/Mobile/src/screens/ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.tsx
+++ b/apps/Mobile/src/screens/ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Alert, ActivityIndicator, Text, View } from "react-native";
+import { ActivityIndicator, Text, View } from "react-native";
 import { FormScreen } from "../../components/FormScreen";
 import { useServiceHistoryCreateDraft } from "../../hooks/useServiceHistoryCreateDraft";
 import { useStatusBar } from "../../hooks/useStatusBar";
@@ -9,6 +9,7 @@ import { globalStyles } from "../../styles/globalStyles";
 import { useTheme } from "../../hooks/useTheme";
 import { ServiceHistoryForm } from "./ServiceHistoryForm";
 import { styles } from "./ServiceHistoryCreateScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function ServiceHistoryCreateScreen({
   navigation,
@@ -16,6 +17,7 @@ export default function ServiceHistoryCreateScreen({
 }: ServiceHistoryCreateScreenProps) {
   useStatusBar();
   const theme = useTheme();
+  const { showError, showSuccess } = useAppAlert();
   const { vehicleId, vehicleTitle } = route.params;
   const createServiceHistory = useCreateServiceHistory();
   const {
@@ -35,7 +37,7 @@ export default function ServiceHistoryCreateScreen({
 
   const handleSave = async () => {
     if (!title.trim()) {
-      Alert.alert("Помилка", "Вкажіть назву візиту або сервісу.");
+      showError("Вкажіть назву візиту або сервісу.");
       return;
     }
 
@@ -49,7 +51,7 @@ export default function ServiceHistoryCreateScreen({
     });
 
     if (!parsedRecords.length) {
-      Alert.alert("Помилка", "Додайте хоча б одну виконану роботу.");
+      showError("Додайте хоча б одну виконану роботу.");
       return;
     }
 
@@ -62,8 +64,7 @@ export default function ServiceHistoryCreateScreen({
     );
 
     if (invalidRecord) {
-      Alert.alert(
-        "Помилка",
+      showError(
         `Перевірте пункт #${invalidRecord.index + 1}: вкажіть назву роботи та ціну більше 0.`
       );
       return;
@@ -87,12 +88,11 @@ export default function ServiceHistoryCreateScreen({
 
       await clearDraft();
 
-      Alert.alert("Успіх", "Запис обслуговування збережено у базі.", [
+      showSuccess("Запис обслуговування збережено у базі.", "Успіх", [
         { text: "OK", onPress: () => navigation.goBack() },
       ]);
     } catch (error) {
-      Alert.alert(
-        "Помилка",
+      showError(
         error instanceof Error
           ? error.message
           : "Не вдалося зберегти запис обслуговування"
diff --git a/apps/Mobile/src/screens/ServiceHistoryEditScreen/ServiceHistoryEditScreen.tsx b/apps/Mobile/src/screens/ServiceHistoryEditScreen/ServiceHistoryEditScreen.tsx
index 12be27718..7981a01ee 100644
--- a/apps/Mobile/src/screens/ServiceHistoryEditScreen/ServiceHistoryEditScreen.tsx
+++ b/apps/Mobile/src/screens/ServiceHistoryEditScreen/ServiceHistoryEditScreen.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Alert } from "react-native";
 import { FormScreen } from "../../components/FormScreen";
 import { useStatusBar } from "../../hooks/useStatusBar";
 import { useUpdateServiceHistory } from "../../queries";
@@ -10,6 +9,7 @@ import {
   ServiceHistoryWorkInput,
 } from "../ServiceHistoryCreateScreen/ServiceHistoryForm";
 import { styles } from "../ServiceHistoryCreateScreen/ServiceHistoryCreateScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const createEmptyWork = (): ServiceHistoryWorkInput => ({
   id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
@@ -36,6 +36,7 @@ export default function ServiceHistoryEditScreen({
   route,
 }: ServiceHistoryEditScreenProps) {
   useStatusBar();
+  const { showError, showSuccess } = useAppAlert();
   const { vehicleId, vehicleTitle, visit } = route.params;
   const updateServiceHistory = useUpdateServiceHistory();
 
@@ -71,7 +72,7 @@ export default function ServiceHistoryEditScreen({
 
   const handleSave = async () => {
     if (!title.trim()) {
-      Alert.alert("Помилка", "Вкажіть назву візиту або сервісу.");
+      showError("Вкажіть назву візиту або сервісу.");
       return;
     }
 
@@ -85,7 +86,7 @@ export default function ServiceHistoryEditScreen({
     });
 
     if (!parsedRecords.length) {
-      Alert.alert("Помилка", "Додайте хоча б одну виконану роботу.");
+      showError("Додайте хоча б одну виконану роботу.");
       return;
     }
 
@@ -98,8 +99,7 @@ export default function ServiceHistoryEditScreen({
     );
 
     if (invalidRecord) {
-      Alert.alert(
-        "Помилка",
+      showError(
         `Перевірте пункт #${invalidRecord.index + 1}: вкажіть назву роботи та ціну більше 0.`
       );
       return;
@@ -122,12 +122,11 @@ export default function ServiceHistoryEditScreen({
         },
       });
 
-      Alert.alert("Успіх", "Запис обслуговування оновлено.", [
+      showSuccess("Запис обслуговування оновлено.", "Успіх", [
         { text: "OK", onPress: () => navigation.goBack() },
       ]);
     } catch (error) {
-      Alert.alert(
-        "Помилка",
+      showError(
         error instanceof Error
           ? error.message
           : "Не вдалося оновити запис обслуговування"
diff --git a/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryContent.tsx b/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryContent.tsx
index d7c71d850..83b076694 100644
--- a/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryContent.tsx
+++ b/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryContent.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Alert,
   RefreshControl,
   ScrollView,
   Text,
@@ -22,6 +21,7 @@ import { globalStyles } from "../../styles/globalStyles";
 import { ServiceHistorySwipeableVisit } from "./ServiceHistorySwipeableVisit";
 import { formatVisitCount } from "./serviceHistoryUtils";
 import { styles } from "./ServiceHistoryScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 export interface ServiceHistoryContentProps {
   vehicleId: string;
@@ -39,6 +39,7 @@ export function ServiceHistoryContent({
   contentContainerStyle,
 }: ServiceHistoryContentProps) {
   const theme = useTheme();
+  const { showAlert, showError } = useAppAlert();
   const insets = useSafeAreaInsets();
   const deleteServiceHistory = useDeleteServiceHistory();
   const swipeableRefs = React.useRef<Map<string, Swipeable | null>>(new Map());
@@ -68,10 +69,10 @@ export function ServiceHistoryContent({
   const handleDeletePress = (visit: ServiceHistoryVisitDto) => {
     swipeableRefs.current.get(visit.id)?.close();
 
-    Alert.alert(
-      "Видалити запис?",
-      `Запис «${visit.title}» буде видалено без можливості відновлення.`,
-      [
+    showAlert({
+      title: "Видалити запис?",
+      message: `Запис «${visit.title}» буде видалено без можливості відновлення.`,
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         {
           text: "Видалити",
@@ -83,8 +84,7 @@ export function ServiceHistoryContent({
                 serviceHistoryId: visit.id,
               });
             } catch (deleteError) {
-              Alert.alert(
-                "Помилка",
+              showError(
                 deleteError instanceof Error
                   ? deleteError.message
                   : "Не вдалося видалити запис обслуговування"
@@ -92,8 +92,8 @@ export function ServiceHistoryContent({
             }
           },
         },
-      ]
-    );
+      ],
+    });
   };
 
   const handleEditPress = (visit: ServiceHistoryVisitDto) => {
diff --git a/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryVisitBody.tsx b/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryVisitBody.tsx
index 3dd8a4258..d6a9a3a02 100644
--- a/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryVisitBody.tsx
+++ b/apps/Mobile/src/screens/ServiceHistoryScreen/ServiceHistoryVisitBody.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import {
   ActivityIndicator,
-  Alert,
   LayoutChangeEvent,
   Text,
   TouchableOpacity,
@@ -24,6 +23,7 @@ import {
   getRecordsTotalPrice,
 } from "./serviceHistoryUtils";
 import { styles } from "./ServiceHistoryScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 const EXPAND_DURATION_MS = 320;
 
@@ -37,6 +37,7 @@ export function ServiceHistoryVisitBody({
   vehicleId,
 }: ServiceHistoryVisitBodyProps) {
   const theme = useTheme();
+  const { showError } = useAppAlert();
   const detailsMutation = useServiceHistoryDetails();
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [records, setRecords] = React.useState<ServiceWorkItemDto[] | null>(
@@ -93,8 +94,7 @@ export function ServiceHistoryVisitBody({
       setRecords(details.records ?? []);
       setIsExpanded(true);
     } catch (error) {
-      Alert.alert(
-        "Помилка",
+      showError(
         error instanceof Error
           ? error.message
           : "Не вдалося завантажити виконані роботи"
diff --git a/apps/Mobile/src/screens/ServiceShopDetailScreen/ServiceShopDetailScreen.tsx b/apps/Mobile/src/screens/ServiceShopDetailScreen/ServiceShopDetailScreen.tsx
index 4b7558d86..ec60cf68e 100644
--- a/apps/Mobile/src/screens/ServiceShopDetailScreen/ServiceShopDetailScreen.tsx
+++ b/apps/Mobile/src/screens/ServiceShopDetailScreen/ServiceShopDetailScreen.tsx
@@ -6,7 +6,6 @@ import {
   Text,
   TouchableOpacity,
   View,
-  Alert,
 } from "react-native";
 import Animated, { FadeInDown } from "react-native-reanimated";
 import { Feather, FontAwesome5 } from "@expo/vector-icons";
@@ -21,6 +20,7 @@ import {
   SERVICE_TAG_LABELS,
 } from "../ServicesScreen/serviceShopUtils";
 import { styles } from "./ServiceShopDetailScreen.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 type SocialPlatform = "instagram" | "facebook" | "telegram" | "website";
 
@@ -43,6 +43,7 @@ export default function ServiceShopDetailScreen({
   route,
 }: ServiceShopDetailScreenProps) {
   const theme = useTheme();
+  const { showError } = useAppAlert();
   const { serviceId } = route.params;
   const service = getServiceById(serviceId);
 
@@ -71,10 +72,10 @@ export default function ServiceShopDetailScreen({
       if (canOpen) {
         await Linking.openURL(url);
       } else {
-        Alert.alert("Помилка", "Не вдалося відкрити телефонний дзвінок");
+        showError("Не вдалося відкрити телефонний дзвінок");
       }
     } catch {
-      Alert.alert("Помилка", "Не вдалося відкрити телефонний дзвінок");
+      showError("Не вдалося відкрити телефонний дзвінок");
     }
   };
 
@@ -86,7 +87,7 @@ export default function ServiceShopDetailScreen({
         await Linking.openURL(url);
       }
     } catch {
-      Alert.alert("Помилка", "Не вдалося відкрити посилання");
+      showError("Не вдалося відкрити посилання");
     }
   };
 
diff --git a/apps/Mobile/src/screens/ServiceStatusScreen/ServiceStatusContent.tsx b/apps/Mobile/src/screens/ServiceStatusScreen/ServiceStatusContent.tsx
index d6ad908d7..191c45f1b 100644
--- a/apps/Mobile/src/screens/ServiceStatusScreen/ServiceStatusContent.tsx
+++ b/apps/Mobile/src/screens/ServiceStatusScreen/ServiceStatusContent.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  Alert,
   Linking,
   ScrollView,
   Text,
@@ -18,7 +17,10 @@ import Animated, {
 import { Feather } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "../../hooks/useTheme";
-import { ActiveServiceSession, ServiceStatusId } from "../../types/serviceStatus";
+import {
+  ActiveServiceSession,
+  ServiceStatusId,
+} from "../../types/serviceStatus";
 import { MOCK_ACTIVE_SESSION } from "./mockServiceStatus";
 import {
   getStatusContextMessage,
@@ -27,6 +29,7 @@ import {
   SERVICE_STATUS_STEPS,
 } from "./serviceStatusConfig";
 import { styles } from "./ServiceStatusContent.styles";
+import { useAppAlert } from "../../components/AppAlert";
 
 export interface ServiceStatusContentProps {
   contentContainerStyle?: ViewStyle;
@@ -51,11 +54,7 @@ function PulsingDot() {
   const opacity = useSharedValue(1);
 
   React.useEffect(() => {
-    opacity.value = withRepeat(
-      withTiming(0.35, { duration: 900 }),
-      -1,
-      true
-    );
+    opacity.value = withRepeat(withTiming(0.35, { duration: 900 }), -1, true);
   }, [opacity]);
 
   const animatedStyle = useAnimatedStyle(() => ({
@@ -69,6 +68,7 @@ export function ServiceStatusContent({
   contentContainerStyle,
 }: ServiceStatusContentProps) {
   const theme = useTheme();
+  const { showAlert, showError } = useAppAlert();
   const insets = useSafeAreaInsets();
   const scrollTopInset = 16 + insets.top;
 
@@ -97,10 +97,10 @@ export function ServiceStatusContent({
   const handleApprove = () => {
     if (!session?.estimateItems?.length) return;
 
-    Alert.alert(
-      "Затвердити кошторис?",
-      "Після підтвердження СТО розпочне виконання погоджених робіт.",
-      [
+    showAlert({
+      title: "Затвердити кошторис?",
+      message: "Після підтвердження СТО розпочне виконання погоджених робіт.",
+      buttons: [
         { text: "Скасувати", style: "cancel" },
         {
           text: "Затвердити",
@@ -110,14 +110,14 @@ export function ServiceStatusContent({
                 ? {
                     ...prev,
                     isApproved: true,
-                    currentStatus: "in_progress",
+                    currentStatus: "waiting_parts",
                   }
                 : prev
             );
           },
         },
-      ]
-    );
+      ],
+    });
   };
 
   const handleNavigate = () => {
@@ -125,14 +125,14 @@ export function ServiceStatusContent({
     const query = encodeURIComponent(session.serviceAddress);
     const url = `https://maps.google.com/?q=${query}`;
     Linking.openURL(url).catch(() => {
-      Alert.alert("Помилка", "Не вдалося відкрити карту");
+      showError("Не вдалося відкрити карту");
     });
   };
 
   const handleCall = () => {
     if (!session?.servicePhone) return;
     Linking.openURL(`tel:${session.servicePhone.replace(/\s/g, "")}`).catch(
-      () => Alert.alert("Помилка", "Не вдалося відкрити дзвінок")
+      () => showError("Не вдалося відкрити дзвінок")
     );
   };
 
@@ -208,7 +208,9 @@ export function ServiceStatusContent({
                   </View>
                   <View style={styles.liveBadge}>
                     <PulsingDot />
-                    <Text style={styles.liveBadgeText}>Оновлення в реальному часі</Text>
+                    <Text style={styles.liveBadgeText}>
+                      Оновлення в реальному часі
+                    </Text>
                   </View>
                   <Text style={styles.sessionVehicle}>
                     Прийнято о {formatAcceptedAt(session.acceptedAt)}
@@ -340,7 +342,7 @@ export function ServiceStatusContent({
                       color={theme.colors.text.inverse}
                     />
                     <Text style={styles.primaryButtonText}>
-                      Переглянути та затвердити перелік робіт
+                      Затвердити перелік робіт
                     </Text>
                   </TouchableOpacity>
                 </Animated.View>
diff --git a/apps/Mobile/src/screens/ServiceStatusScreen/serviceStatusConfig.ts b/apps/Mobile/src/screens/ServiceStatusScreen/serviceStatusConfig.ts
index e8857ca82..595ef23fd 100644
--- a/apps/Mobile/src/screens/ServiceStatusScreen/serviceStatusConfig.ts
+++ b/apps/Mobile/src/screens/ServiceStatusScreen/serviceStatusConfig.ts
@@ -26,6 +26,12 @@ export const SERVICE_STATUS_STEPS: ServiceStatusStepConfig[] = [
     title: "Погодження",
     shortTitle: "Кошторис",
   },
+  {
+    id: "waiting_parts",
+    emoji: "📦",
+    title: "Очікуємо деталей",
+    shortTitle: "Деталі",
+  },
   {
     id: "in_progress",
     emoji: "🔧",
@@ -67,6 +73,8 @@ export function getStatusContextMessage(
       return "Майстер проводить огляд. Очікуйте на результати та кошторис.";
     case "approval":
       return "Діагностику завершено. Перегляньте перелік робіт і затвердіть кошторис.";
+    case "waiting_parts":
+      return "Очікуємо постачання деталей. Ремонт розпочнеться одразу після їх отримання.";
     case "in_progress":
       return currentWork
         ? `Зараз виконується: ${currentWork}`
diff --git a/apps/Mobile/src/screens/UserCheckScreen/UserCheckScreen.tsx b/apps/Mobile/src/screens/UserCheckScreen/UserCheckScreen.tsx
index d2173799f..45267b91f 100644
--- a/apps/Mobile/src/screens/UserCheckScreen/UserCheckScreen.tsx
+++ b/apps/Mobile/src/screens/UserCheckScreen/UserCheckScreen.tsx
@@ -3,7 +3,6 @@ import {
   View,
   Text,
   ActivityIndicator,
-  Alert,
   TouchableOpacity,
 } from "react-native";
 import { useMe } from "../../queries/userQueries";
@@ -11,10 +10,12 @@ import { useAuth } from "../../context/AuthContext";
 import { theme } from "../../styles/theme";
 import { styles } from "./UserCheckScreen.styles";
 import { UserCheckScreenProps } from "../../navigation/types";
+import { useAppAlert } from "../../components/AppAlert";
 
 export default function UserCheckScreen({ navigation }: UserCheckScreenProps) {
   const { data: meData, isLoading, error } = useMe();
   const { logout } = useAuth();
+  const { showAlert } = useAppAlert();
   const [showSkipButton, setShowSkipButton] = useState(false);
 
   useEffect(() => {
@@ -93,34 +94,39 @@ export default function UserCheckScreen({ navigation }: UserCheckScreenProps) {
       }
 
       // Показуємо повідомлення користувачу
-      Alert.alert("Помилка", errorMessage, [
-        {
-          text: "Скасувати",
-          style: "cancel",
-          onPress: async () => {
-            await logout();
-          },
-        },
-        {
-          text: buttonText,
-          onPress: async () => {
-            if (buttonText === "Увійти знову") {
+      showAlert({
+        title: "Помилка",
+        message: errorMessage,
+        buttons: [
+          {
+            text: "Скасувати",
+            style: "cancel",
+            onPress: async () => {
               await logout();
-            } else {
-              // Спробувати знову - просто закриваємо Alert, query автоматично повториться
-              // React Query автоматично повторить запит через retry логіку
-            }
+            },
           },
-        },
-      ]);
+          {
+            text: buttonText,
+            onPress: async () => {
+              if (buttonText === "Увійти знову") {
+                await logout();
+              } else {
+                // Спробувати знову - просто закриваємо Alert, query автоматично повториться
+                // React Query автоматично повторить запит через retry логіку
+              }
+            },
+          },
+        ],
+      });
     }
-  }, [error, isLoading, logout, navigation]);
+  }, [error, isLoading, logout, navigation, showAlert]);
 
   const handleSkip = () => {
-    Alert.alert(
-      "Пропустити перевірку",
-      "Ви впевнені, що хочете пропустити перевірку профілю? Це може призвести до проблем з функціональністю додатку.",
-      [
+    showAlert({
+      title: "Пропустити перевірку",
+      message:
+        "Ви впевнені, що хочете пропустити перевірку профілю? Це може призвести до проблем з функціональністю додатку.",
+      buttons: [
         {
           text: "Скасувати",
           style: "cancel",
@@ -130,8 +136,8 @@ export default function UserCheckScreen({ navigation }: UserCheckScreenProps) {
           style: "destructive",
           onPress: () => navigation.replace("ProfileSetup"),
         },
-      ]
-    );
+      ],
+    });
   };
 
   return (
diff --git a/apps/Mobile/src/types/serviceStatus.ts b/apps/Mobile/src/types/serviceStatus.ts
index 3ee0e41ba..c4c204ebf 100644
--- a/apps/Mobile/src/types/serviceStatus.ts
+++ b/apps/Mobile/src/types/serviceStatus.ts
@@ -2,6 +2,7 @@ export type ServiceStatusId =
   | "received"
   | "diagnostics"
   | "approval"
+  | "waiting_parts"
   | "in_progress"
   | "quality_check"
   | "ready";
diff --git a/apps/Mobile/src/utils/apiErrorUtils.ts b/apps/Mobile/src/utils/apiErrorUtils.ts
new file mode 100644
index 000000000..824ae9775
--- /dev/null
+++ b/apps/Mobile/src/utils/apiErrorUtils.ts
@@ -0,0 +1,49 @@
+const API_ERROR_MESSAGES_UK: Record<string, string> = {
+  "Vin is required.": "Введіть VIN номер.",
+  "Vin must be 17 characters long.": "VIN має містити рівно 17 символів.",
+  "Vin must not exceed 17 characters.": "VIN має містити рівно 17 символів.",
+  "Vin must be a valid 17-character VIN.":
+    "VIN має містити 17 символів: латинські літери (без I, O, Q) та цифри.",
+  "License plate is required.": "Введіть номерний знак.",
+  "License plate must not exceed 10 characters.":
+    "Номерний знак не може перевищувати 10 символів.",
+};
+
+function translateApiMessage(message: string): string {
+  return API_ERROR_MESSAGES_UK[message] ?? message;
+}
+
+export function parseApiErrorMessage(error: unknown): string {
+  if (!(error instanceof Error)) {
+    return "Не вдалося зберегти дані";
+  }
+
+  try {
+    const parsed = JSON.parse(error.message) as {
+      title?: string;
+      errors?: Record<string, string[]>;
+    };
+
+    if (parsed.errors) {
+      const messages = Object.values(parsed.errors)
+        .flat()
+        .map(translateApiMessage);
+
+      if (messages.length > 0) {
+        return messages.join("\n");
+      }
+    }
+
+    if (parsed.title) {
+      return translateApiMessage(parsed.title);
+    }
+  } catch {
+    // Response is not JSON — use raw message below.
+  }
+
+  if (error.message.includes("401")) {
+    return "Сесія закінчилася. Будь ласка, увійдіть знову.";
+  }
+
+  return translateApiMessage(error.message);
+}
diff --git a/apps/Mobile/src/utils/vehicleFormUtils.ts b/apps/Mobile/src/utils/vehicleFormUtils.ts
new file mode 100644
index 000000000..8cc08fd74
--- /dev/null
+++ b/apps/Mobile/src/utils/vehicleFormUtils.ts
@@ -0,0 +1,134 @@
+import { SelectOption } from "../components/Select";
+import { FuelType, TransmissionType } from "../types/api";
+
+export function normalizeFuelType(
+  fuelType?: string | number | null
+): number | undefined {
+  if (fuelType === undefined || fuelType === null || fuelType === "") {
+    return undefined;
+  }
+
+  if (typeof fuelType === "number") {
+    return fuelType;
+  }
+
+  const parsed = Number(fuelType);
+  return Number.isNaN(parsed) ? undefined : parsed;
+}
+
+export function normalizeTransmissionType(
+  transmission?: string | number | null
+): number | undefined {
+  if (transmission === undefined || transmission === null || transmission === "") {
+    return undefined;
+  }
+
+  if (typeof transmission === "number") {
+    return transmission;
+  }
+
+  const parsed = Number(transmission);
+  return Number.isNaN(parsed) ? undefined : parsed;
+}
+
+export function requiresEngineDisplacement(
+  fuelType?: string | number | null
+): boolean {
+  const normalizedFuelType = normalizeFuelType(fuelType);
+
+  if (normalizedFuelType === undefined) {
+    return false;
+  }
+
+  return (
+    normalizedFuelType !== FuelType.Electric &&
+    normalizedFuelType !== FuelType.Hydrogen
+  );
+}
+
+export function getEnginePowerLabel(fuelType?: string | number | null): string {
+  const normalizedFuelType = normalizeFuelType(fuelType);
+
+  if (normalizedFuelType === FuelType.Electric) {
+    return "Потужність електромотора (к.с.) *";
+  }
+
+  if (normalizedFuelType === FuelType.Hydrogen) {
+    return "Потужність силової установки (к.с.) *";
+  }
+
+  return "Потужність двигуна (к.с.) *";
+}
+
+export function getTransmissionOptionsForFuel(
+  fuelType: string | number | undefined,
+  allOptions: SelectOption[]
+): SelectOption[] {
+  if (normalizeFuelType(fuelType) === FuelType.Electric) {
+    return allOptions.filter(
+      (option) =>
+        normalizeTransmissionType(option.value) === TransmissionType.Automatic ||
+        normalizeTransmissionType(option.value) === TransmissionType.CVT
+    );
+  }
+
+  return allOptions;
+}
+
+export function isTransmissionAllowedForFuel(
+  fuelType: string | number | undefined,
+  transmission: string | number | undefined
+): boolean {
+  if (normalizeFuelType(fuelType) !== FuelType.Electric) {
+    return true;
+  }
+
+  const normalizedTransmission = normalizeTransmissionType(transmission);
+  if (normalizedTransmission === undefined) {
+    return true;
+  }
+
+  return (
+    normalizedTransmission === TransmissionType.Automatic ||
+    normalizedTransmission === TransmissionType.CVT
+  );
+}
+
+export function resolveEngineCapacityCc(
+  fuelType: string | number,
+  displacement: string
+): number | null {
+  if (!requiresEngineDisplacement(fuelType)) {
+    return 0;
+  }
+
+  const displacementNum = displacement.trim()
+    ? parseFloat(displacement.replace(",", "."))
+    : NaN;
+
+  if (!displacement.trim() || isNaN(displacementNum) || displacementNum <= 0) {
+    return null;
+  }
+
+  const engineCapacityCc = Math.round(displacementNum * 1000);
+
+  if (engineCapacityCc <= 0 || engineCapacityCc > 10000) {
+    return null;
+  }
+
+  return engineCapacityCc;
+}
+
+export function formatEngineDisplay(
+  engineCapacity: number,
+  enginePower: number,
+  fuelType: FuelType
+): string {
+  const power = `${enginePower} к.с.`;
+
+  if (!requiresEngineDisplacement(fuelType) || engineCapacity <= 0) {
+    return power;
+  }
+
+  return `${(engineCapacity / 1000).toFixed(1)} л, ${power}`;
+}
diff --git a/apps/Mobile/src/utils/vinUtils.ts b/apps/Mobile/src/utils/vinUtils.ts
new file mode 100644
index 000000000..1c494516b
--- /dev/null
+++ b/apps/Mobile/src/utils/vinUtils.ts
@@ -0,0 +1,12 @@
+const VIN_REGEX = /^[A-HJ-NPR-Z0-9]{17}$/i;
+
+export function normalizeVinInput(value: string): string {
+  return value.toUpperCase().replace(/[^A-HJ-NPR-Z0-9]/gi, "").slice(0, 17);
+}
+
+export function isValidVin(vin: string): boolean {
+  return VIN_REGEX.test(vin.trim());
+}
+
+export const VIN_VALIDATION_MESSAGE =
+  "VIN має містити 17 символів: латинські літери (без I, O, Q) та цифри";