diff --git a/apps/react/src/app/features/online-board/pages/flight-details-page.scss b/apps/react/src/app/features/online-board/pages/flight-details-page.scss
new file mode 100644
index 000000000..ad9f64938
--- /dev/null
+++ b/apps/react/src/app/features/online-board/pages/flight-details-page.scss
@@ -0,0 +1,180 @@
+.flight-details-page {
+  width: 100%;
+}
+
+.flight-details-page__content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.flight-details-page__mini-list {
+  padding: 16px;
+
+  h3 {
+    margin: 0 0 12px 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1976d2;
+  }
+
+  p {
+    margin: 0 0 8px 0;
+    font-size: 14px;
+    color: #666;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.flight-details-page__header {
+  padding: 20px;
+}
+
+.flight-details-page__header-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.flight-details-page__header-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.flight-details-page__header-label {
+  font-size: 12px;
+  color: #999;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.flight-details-page__header-value {
+  font-size: 18px;
+  color: #333;
+  font-weight: 600;
+}
+
+.flight-details-page__details {
+  padding: 0;
+}
+
+.flight-details-page__crew {
+  padding: 20px;
+
+  h3 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.flight-details-page__crew-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+  }
+
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+
+.flight-details-page__crew-label {
+  font-size: 11px;
+  color: #999;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.flight-details-page__crew-value {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.flight-details-page__seats {
+  padding: 20px;
+
+  h3 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.flight-details-page__seats-info {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+}
+
+.flight-details-page__seats-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.flight-details-page__seats-label {
+  font-size: 11px;
+  color: #999;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.flight-details-page__seats-value {
+  font-size: 16px;
+  color: #333;
+  font-weight: 600;
+}
+
+.flight-details-page__amenities {
+  padding: 20px;
+
+  h3 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.flight-details-page__amenities-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.flight-details-page__amenity-tag {
+  padding: 6px 12px;
+  background: #e3f2fd;
+  color: #1565c0;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+}
diff --git a/apps/react/src/app/features/online-board/pages/flight-details-page.tsx b/apps/react/src/app/features/online-board/pages/flight-details-page.tsx
new file mode 100644
index 000000000..880fcc0bb
--- /dev/null
+++ b/apps/react/src/app/features/online-board/pages/flight-details-page.tsx
@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import axios from 'axios'
+import { Button } from 'primereact/button'
+import { PageLayout } from '@app/components/page-layout'
+import { PageTabs } from '@app/components/page-tabs'
+import { PageLoader } from '@app/components/page-loader'
+import { PageEmptyList } from '@app/components/page-empty-list'
+import { Card } from '@app/components/card'
+import { useTranslation } from 'react-i18next'
+import { BoardFlightBody } from '../components/board-flight-body'
+import './flight-details-page.scss'
+
+interface FlightDetails {
+  id: string
+  flightNumber: string
+  status: string
+  operator?: string
+  aircraft?: string
+  departure: any
+  arrival: any
+  boarding?: any
+  deboarding?: any
+  codesharing?: string[]
+  amenities?: string[]
+  crew?: {
+    captain?: string
+    firstOfficer?: string
+    flightAttendants?: number
+  }
+  seats?: {
+    total: number
+    available: number
+  }
+}
+
+export const FlightDetailsPage: React.FC = () => {
+  const { params: encodedParams } = useParams<{ params: string }>()
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  const [flight, setFlight] = useState<FlightDetails | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!encodedParams) return
+
+    const fetchFlightDetails = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+
+        const decoded = JSON.parse(atob(encodedParams))
+        const flightId = decoded.id
+
+        // Fetch flight details from API
+        const response = await axios.get(`/api/flights/${flightId}`)
+        setFlight(response.data)
+      } catch (err) {
+        console.error('Failed to load flight details:', err)
+        setError('Failed to load flight information')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchFlightDetails()
+  }, [encodedParams])
+
+  const handleBack = () => {
+    navigate(-1)
+  }
+
+  if (loading) {
+    return <PageLoader isLoading={true} />
+  }
+
+  if (error || !flight) {
+    return (
+      <div className="flight-details-page" data-testid="flight-details-page">
+        <PageTabs />
+        <PageEmptyList message={error || 'Flight not found'} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flight-details-page" data-testid="flight-details-page">
+      <PageTabs />
+
+      <PageLayout
+        headerLeft={
+          <Button
+            icon="pi pi-arrow-left"
+            label={t('SHARED.BACK')}
+            onClick={handleBack}
+            className="p-button-text"
+            data-testid="back-button"
+          />
+        }
+        contentLeft={
+          <Card className="flight-details-page__mini-list" data-testid="flight-mini-list">
+            <h3>{flight.flightNumber}</h3>
+            <p>{flight.departure.airport} → {flight.arrival.airport}</p>
+            <p>{flight.status}</p>
+          </Card>
+        }
+      >
+        <div className="flight-details-page__content">
+          {/* Flight Header Info */}
+          <Card className="flight-details-page__header" data-testid="flight-header-card">
+            <div className="flight-details-page__header-grid">
+              <div className="flight-details-page__header-item">
+                <span className="flight-details-page__header-label">{t('SHARED.FLIGHT')}</span>
+                <span className="flight-details-page__header-value">{flight.flightNumber}</span>
+              </div>
+              <div className="flight-details-page__header-item">
+                <span className="flight-details-page__header-label">{t('SHARED.STATUS')}</span>
+                <span className="flight-details-page__header-value">{flight.status}</span>
+              </div>
+              {flight.aircraft && (
+                <div className="flight-details-page__header-item">
+                  <span className="flight-details-page__header-label">{t('SHARED.AIRCRAFT')}</span>
+                  <span className="flight-details-page__header-value">{flight.aircraft}</span>
+                </div>
+              )}
+              {flight.operator && (
+                <div className="flight-details-page__header-item">
+                  <span className="flight-details-page__header-label">{t('SHARED.OPERATOR')}</span>
+                  <span className="flight-details-page__header-value">{flight.operator}</span>
+                </div>
+              )}
+            </div>
+          </Card>
+
+          {/* Flight Details */}
+          <Card className="flight-details-page__details" data-testid="flight-details-card">
+            <BoardFlightBody flight={flight} />
+          </Card>
+
+          {/* Crew Information */}
+          {flight.crew && (
+            <Card className="flight-details-page__crew" data-testid="crew-info-card">
+              <h3>{t('BOARD.CREW_INFORMATION')}</h3>
+              <div className="flight-details-page__crew-grid">
+                {flight.crew.captain && (
+                  <div>
+                    <span className="flight-details-page__crew-label">{t('BOARD.CAPTAIN')}</span>
+                    <span className="flight-details-page__crew-value">{flight.crew.captain}</span>
+                  </div>
+                )}
+                {flight.crew.firstOfficer && (
+                  <div>
+                    <span className="flight-details-page__crew-label">{t('BOARD.FIRST_OFFICER')}</span>
+                    <span className="flight-details-page__crew-value">{flight.crew.firstOfficer}</span>
+                  </div>
+                )}
+                {flight.crew.flightAttendants && (
+                  <div>
+                    <span className="flight-details-page__crew-label">{t('BOARD.FLIGHT_ATTENDANTS')}</span>
+                    <span className="flight-details-page__crew-value">{flight.crew.flightAttendants}</span>
+                  </div>
+                )}
+              </div>
+            </Card>
+          )}
+
+          {/* Seat Information */}
+          {flight.seats && (
+            <Card className="flight-details-page__seats" data-testid="seats-info-card">
+              <h3>{t('BOARD.SEATS')}</h3>
+              <div className="flight-details-page__seats-info">
+                <div className="flight-details-page__seats-item">
+                  <span className="flight-details-page__seats-label">{t('BOARD.TOTAL_SEATS')}</span>
+                  <span className="flight-details-page__seats-value">{flight.seats.total}</span>
+                </div>
+                <div className="flight-details-page__seats-item">
+                  <span className="flight-details-page__seats-label">{t('BOARD.AVAILABLE_SEATS')}</span>
+                  <span className="flight-details-page__seats-value">{flight.seats.available}</span>
+                </div>
+              </div>
+            </Card>
+          )}
+
+          {/* Amenities */}
+          {flight.amenities && flight.amenities.length > 0 && (
+            <Card className="flight-details-page__amenities" data-testid="amenities-card">
+              <h3>{t('BOARD.AMENITIES')}</h3>
+              <div className="flight-details-page__amenities-list">
+                {flight.amenities.map((amenity, idx) => (
+                  <span key={idx} className="flight-details-page__amenity-tag">
+                    {amenity}
+                  </span>
+                ))}
+              </div>
+            </Card>
+          )}
+        </div>
+      </PageLayout>
+    </div>
+  )
+}
diff --git a/apps/react/src/app/features/online-board/pages/index.ts b/apps/react/src/app/features/online-board/pages/index.ts
index ac6d77e88..2cb5b8b2e 100644
--- a/apps/react/src/app/features/online-board/pages/index.ts
+++ b/apps/react/src/app/features/online-board/pages/index.ts
@@ -1,2 +1,3 @@
 export { OnlineBoardStartPage } from './online-board-start-page'
 export { OnlineBoardSearchPage } from './online-board-search-page'
+export { FlightDetailsPage } from './flight-details-page'