diff --git a/apps/web/src/app/hotel/[id]/escrow/[escrowId]/page.tsx b/apps/web/src/app/hotel/[id]/escrow/[escrowId]/page.tsx
new file mode 100644
index 0000000..52dac08
--- /dev/null
+++ b/apps/web/src/app/hotel/[id]/escrow/[escrowId]/page.tsx
@@ -0,0 +1,297 @@
+// TODO: replace stub views with real components once merged in frontend-SafeTrust
+// Sources:
+//   frontend-SafeTrust/src/components/escrow/views/EscrowPaidView.tsx
+//   frontend-SafeTrust/src/components/escrow/views/EscrowBlockedView.tsx
+//   frontend-SafeTrust/src/components/escrow/views/EscrowReleasedView.tsx
+//   frontend-SafeTrust/src/components/escrow/RealTimeEscrowStatus.tsx
+//
+// Status-to-view mapping (when wired):
+//   funded      -> EscrowPaidView     (Payment batch)
+//   active      -> EscrowBlockedView  (Deposit blocked)
+//   completed   -> EscrowReleasedView (Deposit released)
+//   default     -> redirect to /hotel/[id]/escrow/create
+//
+// Real-time: RealTimeEscrowStatus (Hasura subscription) drives automatic transitions
+
+import { InvoiceHeader } from '@/components/escrow/InvoiceHeader';
+import { ProcessStepper } from '@/components/escrow/ProcessStepper';
+import type { CSSProperties } from 'react';
+
+type StubStatus = 'paid' | 'blocked' | 'released';
+
+type ViewConfig = {
+  label: StubStatus;
+  step: 2 | 3 | 4;
+  title: string;
+};
+
+const styles = {
+  page: {
+    maxWidth: '72rem',
+    margin: '0 auto',
+    padding: '2rem 1.5rem 3rem',
+    color: '#111827',
+  } satisfies CSSProperties,
+  grid: {
+    display: 'grid',
+    gap: '1.5rem',
+    marginTop: '1.5rem',
+    alignItems: 'start',
+  } satisfies CSSProperties,
+  panel: {
+    border: '1px solid #fed7aa',
+    borderRadius: '1rem',
+    backgroundColor: '#ffffff',
+    padding: '1.5rem',
+  } satisfies CSSProperties,
+  splitGrid: {
+    display: 'grid',
+    gap: '1rem',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(13rem, 1fr))',
+  } satisfies CSSProperties,
+  table: {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: '0.95rem',
+  } satisfies CSSProperties,
+  input: {
+    width: '100%',
+    border: '1px solid #d1d5db',
+    borderRadius: '0.75rem',
+    padding: '0.75rem',
+    font: 'inherit',
+    resize: 'vertical',
+    minHeight: '6rem',
+  } satisfies CSSProperties,
+  buttonRow: {
+    display: 'flex',
+    gap: '0.75rem',
+    marginTop: '0.75rem',
+    flexWrap: 'wrap',
+  } satisfies CSSProperties,
+  secondaryButton: {
+    border: '1px solid #d1d5db',
+    backgroundColor: '#ffffff',
+    color: '#111827',
+    borderRadius: '0.75rem',
+    padding: '0.6rem 1rem',
+    fontWeight: 600,
+  } satisfies CSSProperties,
+  primaryButton: {
+    border: '1px solid #f97316',
+    backgroundColor: '#f97316',
+    color: '#ffffff',
+    borderRadius: '0.75rem',
+    padding: '0.6rem 1rem',
+    fontWeight: 700,
+  } satisfies CSSProperties,
+} as const;
+
+function getStubView(status: string | undefined): ViewConfig {
+  switch (status) {
+    case 'blocked':
+      return { label: 'blocked', step: 3, title: 'Payment batch - Escrow Status' };
+    case 'released':
+      return { label: 'released', step: 4, title: 'Deposit / Escrow Released' };
+    case 'paid':
+    default:
+      return { label: 'paid', step: 2, title: 'Payment batch January 2025' };
+  }
+}
+
+function InfoPair({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <p style={{ margin: 0, color: '#6b7280', fontSize: '0.85rem' }}>{label}</p>
+      <p style={{ margin: '0.35rem 0 0', fontWeight: 600 }}>{value}</p>
+    </div>
+  );
+}
+
+function PaidStubView() {
+  return (
+    <div style={{ display: 'grid', gap: '1.5rem' }}>
+      <div style={styles.splitGrid}>
+        <InfoPair label="Billed to" value="John_s@gmail.com" />
+        <InfoPair label="Invoice Number" value="INV4257-09-012" />
+        <InfoPair label="Billing details" value="John Smith" />
+        <InfoPair label="Currency" value="IDR - Dollar" />
+      </div>
+
+      <div style={{ border: '1px solid #fed7aa', borderRadius: '1rem', overflow: 'hidden' }}>
+        <table style={styles.table}>
+          <thead style={{ backgroundColor: '#fff7ed' }}>
+            <tr>
+              <th style={{ textAlign: 'left', padding: '0.9rem' }}>PRODUCT</th>
+              <th style={{ textAlign: 'right', padding: '0.9rem' }}>PRICE / MONTH</th>
+              <th style={{ textAlign: 'right', padding: '0.9rem' }}>DEPOSIT</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td style={{ padding: '0.9rem', borderTop: '1px solid #fed7aa' }}>La sabana apartment</td>
+              <td style={{ padding: '0.9rem', textAlign: 'right', borderTop: '1px solid #fed7aa' }}>
+                $4,000
+              </td>
+              <td style={{ padding: '0.9rem', textAlign: 'right', borderTop: '1px solid #fed7aa' }}>
+                $4,000
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ fontSize: '0.95rem' }}>
+        <strong>Total: $8,000</strong>
+      </div>
+    </div>
+  );
+}
+
+function BlockedStubView() {
+  return (
+    <div style={{ display: 'grid', gap: '1.5rem' }}>
+      <div style={styles.splitGrid}>
+        <InfoPair label="Creation date" value="25 January 2025" />
+        <InfoPair label="Amount blocked" value="$4,000" />
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gap: '1.5rem',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))',
+          borderTop: '1px solid #fed7aa',
+          paddingTop: '1.5rem',
+        }}
+      >
+        <div>
+          <h3 style={{ marginTop: 0 }}>Tenant Information</h3>
+          <div style={{ display: 'grid', gap: '0.75rem' }}>
+            <InfoPair label="Tenant name" value="John Smith" />
+            <InfoPair label="Wallet Address" value="MJE...XN32" />
+            <InfoPair label="Email" value="John_s@gmail.com" />
+          </div>
+        </div>
+        <div>
+          <h3 style={{ marginTop: 0 }}>Owner Information</h3>
+          <div style={{ display: 'grid', gap: '0.75rem' }}>
+            <InfoPair label="Owner name" value="Alberto Casas" />
+            <InfoPair label="Wallet Address" value="MJE...XN32" />
+            <InfoPair label="Email" value="albertoCasas100@gmail.com" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ReleasedStubView() {
+  return (
+    <div style={{ display: 'grid', gap: '1.5rem' }}>
+      <div>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '1rem',
+            marginBottom: '0.75rem',
+            flexWrap: 'wrap',
+          }}
+        >
+          <h3 style={{ margin: 0 }}>Escrow Justification</h3>
+          <button type="button" disabled style={{ ...styles.secondaryButton, opacity: 0.5 }}>
+            PDF
+          </button>
+        </div>
+        <textarea style={styles.input} placeholder="Justification..." />
+      </div>
+
+      <div style={{ display: 'grid', gap: '1.5rem', gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}>
+        <div>
+          <h3 style={{ marginTop: 0 }}>Beneficiary Information</h3>
+          <div style={{ display: 'grid', gap: '0.75rem' }}>
+            <InfoPair label="Name" value="John Smith" />
+            <InfoPair label="Wallet" value="MJE...XN32" />
+            <InfoPair label="Released date" value="20 January 2025" />
+            <InfoPair label="Deposit" value="$4,000" />
+          </div>
+        </div>
+
+        <div>
+          <h3 id="claims-label" style={{ marginTop: 0 }}>Claims</h3>
+          <textarea
+            aria-labelledby="claims-label"
+            style={{ ...styles.input, minHeight: '5rem' }}
+            placeholder="Claims..."
+          />
+          <div style={styles.buttonRow}>
+            <button type="button" style={styles.secondaryButton}>
+              Clean
+            </button>
+            <button type="button" style={styles.primaryButton}>
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function EscrowDetailPage({
+  params,
+  searchParams,
+}: {
+  params: { id: string; escrowId: string };
+  searchParams: { status?: string };
+}) {
+  const view = getStubView(searchParams?.status);
+
+  return (
+    <div style={styles.page}>
+      <InvoiceHeader
+        invoiceNumber="INV4257-09-012"
+        status={view.label}
+        paidAt={`${params.escrowId} · 25 Jan 2025`}
+      />
+
+      <div style={{ ...styles.grid, gridTemplateColumns: 'minmax(0, 2fr) minmax(18rem, 1fr)' }}>
+        <div style={styles.panel}>
+          <p
+            style={{
+              marginTop: 0,
+              marginBottom: '0.5rem',
+              fontSize: '0.8rem',
+              letterSpacing: '0.08em',
+              textTransform: 'uppercase',
+              color: '#9ca3af',
+            }}
+          >
+            Hotel {params.id}
+          </p>
+          <h2 style={{ marginTop: 0, marginBottom: '1.5rem', fontSize: '1.5rem' }}>{view.title}</h2>
+
+          {/* TODO: swap placeholder sections for real escrow views once frontend-SafeTrust is merged */}
+          {view.label === 'paid' && <PaidStubView />}
+          {view.label === 'blocked' && <BlockedStubView />}
+          {view.label === 'released' && <ReleasedStubView />}
+        </div>
+
+        <div style={{ display: 'grid', gap: '1rem' }}>
+          <div style={styles.panel}>
+            <h3 id="notes-heading" style={{ marginTop: 0 }}>Notes</h3>
+            <textarea aria-labelledby="notes-heading" style={styles.input} placeholder="Notes..." />
+          </div>
+          <ProcessStepper currentStep={view.step} />
+        </div>
+      </div>
+
+      <p style={{ marginTop: '1rem', color: '#6b7280', fontSize: '0.85rem' }}>
+        Dev: append <code>?status=paid</code>, <code>?status=blocked</code>, or{' '}
+        <code>?status=released</code> to preview each view state.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/hotel/[id]/page.tsx b/apps/web/src/app/hotel/[id]/page.tsx
new file mode 100644
index 0000000..22c8471
--- /dev/null
+++ b/apps/web/src/app/hotel/[id]/page.tsx
@@ -0,0 +1,189 @@
+// TODO: replace with real detail components once merged in frontend-SafeTrust
+// Sources:
+//   frontend-SafeTrust/src/components/hotel/ApartmentDetail.tsx
+//   frontend-SafeTrust/src/components/hotel/ImageGallery.tsx
+//   frontend-SafeTrust/src/components/hotel/SuggestionsList.tsx
+//   frontend-SafeTrust/src/components/hotel/AmenityIcons.tsx
+//
+// Data source (when wired):
+//   Apollo query: GET_APARTMENT_BY_ID -> public.apartments (Hasura)
+
+import Link from 'next/link';
+import type { CSSProperties } from 'react';
+
+const STUB_APARTMENT = {
+  name: 'La sabana sur',
+  address: '329 Calle santos, paseo colón, San José',
+  price: 4058,
+  bedrooms: 2,
+  bathrooms: 1,
+  petFriendly: true,
+  owner: {
+    name: 'Alberto Casas',
+    email: 'albertoCasas100@gmail.com',
+    phone: '+506 64852179',
+  },
+  description:
+    'Beautiful apartment in the heart of San José with modern amenities and stunning views.',
+};
+
+const styles = {
+  page: {
+    display: 'flex',
+    minHeight: '100vh',
+    backgroundColor: '#fff7ed',
+    color: '#111827',
+  } satisfies CSSProperties,
+  aside: {
+    width: '18rem',
+    borderRight: '1px solid #fed7aa',
+    padding: '1rem',
+    flexShrink: 0,
+    display: 'none',
+  } satisfies CSSProperties,
+  suggestionCard: {
+    display: 'flex',
+    gap: '0.5rem',
+    padding: '0.5rem',
+    marginBottom: '0.5rem',
+    border: '1px solid #fdba74',
+    borderRadius: '0.75rem',
+    backgroundColor: '#ffffff',
+    fontSize: '0.75rem',
+  } satisfies CSSProperties,
+  imagePlaceholder: {
+    backgroundColor: '#fed7aa',
+    borderRadius: '1rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#9a3412',
+  } satisfies CSSProperties,
+  main: {
+    flex: 1,
+    maxWidth: '64rem',
+    padding: '1.5rem',
+  } satisfies CSSProperties,
+  gallery: {
+    display: 'grid',
+    gridTemplateColumns: '2fr 1fr',
+    gap: '0.5rem',
+    marginBottom: '1.5rem',
+  } satisfies CSSProperties,
+  thumbs: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.5rem',
+  } satisfies CSSProperties,
+  header: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: '1rem',
+    marginBottom: '1rem',
+  } satisfies CSSProperties,
+  button: {
+    display: 'inline-block',
+    backgroundColor: '#f97316',
+    color: '#ffffff',
+    fontWeight: 700,
+    padding: '0.75rem 1.5rem',
+    borderRadius: '0.75rem',
+  } satisfies CSSProperties,
+  metaRow: {
+    display: 'flex',
+    gap: '1rem',
+    marginBottom: '1rem',
+    flexWrap: 'wrap',
+  } satisfies CSSProperties,
+} as const;
+
+export default function ApartmentDetailPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  return (
+    <div style={styles.page}>
+      {/* TODO: replace with <SuggestionsList /> */}
+      <aside style={styles.aside} className="desktop-suggestions">
+        <p style={{ marginBottom: '0.25rem', fontSize: '0.875rem', fontWeight: 600 }}>
+          Suggestions
+        </p>
+        <p style={{ marginBottom: '1rem', fontSize: '0.75rem', color: '#78716c' }}>
+          More than 200 available
+        </p>
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div key={i} style={styles.suggestionCard}>
+            <div
+              style={{
+                width: '3rem',
+                height: '3rem',
+                flexShrink: 0,
+                borderRadius: '0.75rem',
+                backgroundColor: '#fed7aa',
+              }}
+            />
+            <div>
+              <p style={{ margin: 0, fontWeight: 500 }}>Los yoses</p>
+              <p style={{ margin: '0.25rem 0', color: '#78716c' }}>
+                329 Calle santos, San José
+              </p>
+              <p style={{ margin: 0, color: '#ea580c', fontWeight: 600 }}>$4.000</p>
+            </div>
+          </div>
+        ))}
+      </aside>
+
+      <main style={styles.main}>
+        {/* TODO: replace with <ImageGallery images={apartment.images} /> */}
+        <div style={styles.gallery}>
+          <div style={{ ...styles.imagePlaceholder, minHeight: '16rem' }}>
+            <span style={{ fontSize: '0.75rem' }}>Main image</span>
+          </div>
+          <div style={styles.thumbs}>
+            {[1, 2, 3].map((i) => (
+              <div key={i} style={{ ...styles.imagePlaceholder, flex: 1, minHeight: '5rem' }}>
+                <span style={{ fontSize: '0.75rem' }}>Thumb {i}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div style={styles.header}>
+          <div>
+            <h1 style={{ margin: 0, fontSize: '2rem', fontWeight: 700 }}>{STUB_APARTMENT.name}</h1>
+            <p style={{ marginTop: '0.5rem', color: '#ea580c', fontWeight: 600 }}>
+              ${STUB_APARTMENT.price.toLocaleString()}.00 Per month
+            </p>
+          </div>
+
+          <Link href="#" style={styles.button}>
+            BOOK
+          </Link>
+        </div>
+
+        {/* TODO: replace with <AmenityIcons /> */}
+        <div style={{ ...styles.metaRow, color: '#57534e', fontSize: '0.95rem' }}>
+          <span>📍 {STUB_APARTMENT.address}</span>
+        </div>
+        <div style={{ ...styles.metaRow, fontSize: '0.95rem' }}>
+          <span>🛏 {STUB_APARTMENT.bedrooms} bd</span>
+          <span>🐾 {STUB_APARTMENT.petFriendly ? 'pet friendly' : 'no pets'}</span>
+          <span>🚿 {STUB_APARTMENT.bathrooms} ba</span>
+        </div>
+
+        <div style={{ marginBottom: '1rem' }}>
+          <p style={{ marginBottom: '0.25rem', fontWeight: 600 }}>
+            Owner: {STUB_APARTMENT.owner.name}
+          </p>
+        </div>
+
+        <div>
+          <h2 style={{ marginBottom: '0.25rem', fontWeight: 600 }}>Apartment details</h2>
+          <p style={{ color: '#57534e', lineHeight: 1.6 }}>{STUB_APARTMENT.description}</p>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/escrow/InvoiceHeader.tsx b/apps/web/src/components/escrow/InvoiceHeader.tsx
new file mode 100644
index 0000000..a10f87d
--- /dev/null
+++ b/apps/web/src/components/escrow/InvoiceHeader.tsx
@@ -0,0 +1,93 @@
+import type { CSSProperties } from 'react';
+
+type InvoiceStatus = 'paid' | 'blocked' | 'released';
+
+const STATUS_STYLES: Record<InvoiceStatus, { label: string; style: CSSProperties }> = {
+  paid: {
+    label: 'Paid',
+    style: {
+      backgroundColor: '#ffedd5',
+      color: '#9a3412',
+      border: '1px solid #fdba74',
+    },
+  },
+  blocked: {
+    label: 'Deposit blocked',
+    style: {
+      backgroundColor: '#fef3c7',
+      color: '#92400e',
+      border: '1px solid #fcd34d',
+    },
+  },
+  released: {
+    label: 'Deposit released',
+    style: {
+      backgroundColor: '#dcfce7',
+      color: '#166534',
+      border: '1px solid #86efac',
+    },
+  },
+};
+
+export function InvoiceHeader({
+  invoiceNumber,
+  paidAt,
+  status,
+}: {
+  invoiceNumber: string;
+  paidAt: string;
+  status: InvoiceStatus;
+}) {
+  const badge = STATUS_STYLES[status];
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '1rem',
+        padding: '1.25rem 1.5rem',
+        borderRadius: '1rem',
+        border: '1px solid #fed7aa',
+        backgroundColor: '#ffffff',
+      }}
+    >
+      <div>
+        <p
+          style={{
+            margin: 0,
+            fontSize: '0.8rem',
+            letterSpacing: '0.08em',
+            textTransform: 'uppercase',
+            color: '#9ca3af',
+          }}
+        >
+          Invoice number
+        </p>
+        <h1 style={{ margin: '0.35rem 0 0', fontSize: '1.75rem' }}>{invoiceNumber}</h1>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
+        <span
+          style={{
+            ...badge.style,
+            display: 'inline-flex',
+            alignItems: 'center',
+            borderRadius: '999px',
+            padding: '0.35rem 0.75rem',
+            fontSize: '0.875rem',
+            fontWeight: 700,
+          }}
+        >
+          {badge.label}
+        </span>
+        <div style={{ textAlign: 'right' }}>
+          <p style={{ margin: 0, fontSize: '0.8rem', color: '#9ca3af' }}>Updated</p>
+          <p style={{ margin: '0.25rem 0 0', fontWeight: 600 }}>{paidAt}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/escrow/ProcessStepper.tsx b/apps/web/src/components/escrow/ProcessStepper.tsx
new file mode 100644
index 0000000..1e22c69
--- /dev/null
+++ b/apps/web/src/components/escrow/ProcessStepper.tsx
@@ -0,0 +1,68 @@
+import type { CSSProperties } from 'react';
+
+const STEPS = [
+  { step: 1, title: 'Create escrow' },
+  { step: 2, title: 'Payment batch' },
+  { step: 3, title: 'Deposit blocked' },
+  { step: 4, title: 'Deposit released' },
+] as const;
+
+export function ProcessStepper({ currentStep }: { currentStep: 1 | 2 | 3 | 4 }) {
+  return (
+    <div
+      style={{
+        border: '1px solid #fed7aa',
+        borderRadius: '1rem',
+        backgroundColor: '#ffffff',
+        padding: '1.25rem',
+      }}
+    >
+      <h3 style={{ marginTop: 0, marginBottom: '1rem', fontSize: '1rem' }}>Process</h3>
+      <div style={{ display: 'grid', gap: '0.9rem' }}>
+        {STEPS.map(({ step, title }) => {
+          const isActive = step === currentStep;
+          const isComplete = step < currentStep;
+          const markerStyle: CSSProperties = isActive
+            ? { backgroundColor: '#f97316', color: '#ffffff', border: '1px solid #f97316' }
+            : isComplete
+              ? { backgroundColor: '#ffedd5', color: '#9a3412', border: '1px solid #fdba74' }
+              : { backgroundColor: '#ffffff', color: '#9ca3af', border: '1px solid #d1d5db' };
+
+          return (
+            <div key={step} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+              <div
+                style={{
+                  ...markerStyle,
+                  width: '2rem',
+                  height: '2rem',
+                  borderRadius: '999px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontWeight: 700,
+                  flexShrink: 0,
+                }}
+              >
+                {step}
+              </div>
+              <div>
+                <p
+                  style={{
+                    margin: 0,
+                    fontWeight: isActive ? 700 : 600,
+                    color: isActive ? '#111827' : '#374151',
+                  }}
+                >
+                  {title}
+                </p>
+                <p style={{ margin: '0.2rem 0 0', color: '#9ca3af', fontSize: '0.8rem' }}>
+                  {isActive ? 'Current step' : isComplete ? 'Completed' : 'Pending'}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}