diff --git a/apps/edr-passenger-web/portal/public/README.md b/apps/edr-passenger-web/portal/public/README.md
new file mode 100644
index 000000000..7ea9c3ab4
--- /dev/null
+++ b/apps/edr-passenger-web/portal/public/README.md
@@ -0,0 +1,12 @@
+# Banner Image
+
+Place your banner image as `banner.jpg` in this directory.
+
+## Recommended Specifications:
+- **Filename**: `banner.jpg` (or `banner.png`)
+- **Dimensions**: 1920x1080px or higher
+- **Aspect Ratio**: 16:9 or similar
+- **Content**: Railway/train themed image, Ethio-Djibouti Railway scenery
+- **Format**: JPG or PNG
+
+The image will be used as a background on the login page with a green overlay.
diff --git a/apps/edr-passenger-web/portal/public/banner.jpg b/apps/edr-passenger-web/portal/public/banner.jpg
new file mode 100644
index 000000000..09c6add92
Binary files /dev/null and b/apps/edr-passenger-web/portal/public/banner.jpg differ
diff --git a/apps/edr-passenger-web/portal/src/app/about/page.tsx b/apps/edr-passenger-web/portal/src/app/about/page.tsx
new file mode 100644
index 000000000..00430aadc
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/app/about/page.tsx
@@ -0,0 +1,411 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getTranslation, Language, useLanguage } from '@/lib/i18n';
+import Link from 'next/link';
+import { Target, Globe, Leaf, Users } from 'lucide-react';
+
+const styles = `
+  .about-hero {
+    padding: 60px 20px;
+    background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
+    text-align: center;
+    color: #111827;
+  }
+  
+  .dark .about-hero {
+    color: #f3f4f6;
+  }
+  
+  .about-hero h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+    color: #111827;
+  }
+  
+  .dark .about-hero h1 {
+    color: #f3f4f6;
+  }
+  
+  .about-hero p {
+    font-size: 1.125rem;
+    color: #6b7280;
+  }
+  
+  .dark .about-hero p {
+    color: #9ca3af;
+  }
+  
+  .values-grid {
+    max-width: 80rem;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 32px;
+    padding: 60px 20px;
+    background-color: white;
+  }
+  
+  .dark .values-grid {
+    background-color: #111827;
+  }
+  
+  .value-card {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 18px;
+    padding: 24px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+  
+  .dark .value-card {
+    background: #1f2937;
+    border-color: #374151;
+  }
+  
+  .value-card:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  .value-icon {
+    width: 48px;
+    height: 48px;
+    background: rgb(20, 113, 76);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+  
+  .value-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: #111827;
+  }
+  
+  .dark .value-card h3 {
+    color: #f3f4f6;
+  }
+  
+  .value-card p {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  .dark .value-card p {
+    color: #9ca3af;
+  }
+  
+  .stats-section {
+    padding: 60px 20px;
+    background-color: #f9fafb;
+  }
+  
+  .dark .stats-section {
+    background-color: #0f1117;
+  }
+  
+  .stats-container {
+    max-width: 80rem;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 32px;
+    text-align: center;
+  }
+  
+  .stat {
+    padding: 20px;
+  }
+  
+  .stat-number {
+    font-size: 2rem;
+    font-weight: 700;
+    color: rgb(20, 113, 76);
+    margin-bottom: 8px;
+  }
+  
+  .stat-label {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  .dark .stat-label {
+    color: #9ca3af;
+  }
+  
+  .timeline-section {
+    padding: 60px 20px;
+    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+  }
+  
+  .dark .timeline-section {
+    background: linear-gradient(135deg, #111827 0%, #0f1117 100%);
+  }
+  
+  .timeline-title {
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 48px;
+    color: #111827;
+  }
+  
+  .dark .timeline-title {
+    color: #f3f4f6;
+  }
+  
+  .timeline {
+    max-width: 48rem;
+    margin: 0 auto;
+    position: relative;
+  }
+  
+  .timeline::before {
+    content: '';
+    position: absolute;
+    left: 8px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(180deg, rgb(20, 113, 76), rgb(20, 113, 76) 50%, transparent);
+  }
+  
+  .timeline-item {
+    display: flex;
+    margin-bottom: 40px;
+    position: relative;
+    padding-left: 56px;
+    animation: slideInLeft 0.6s ease-out forwards;
+    opacity: 0;
+  }
+  
+  .timeline-item:nth-child(1) { animation-delay: 0.1s; }
+  .timeline-item:nth-child(2) { animation-delay: 0.2s; }
+  .timeline-item:nth-child(3) { animation-delay: 0.3s; }
+  .timeline-item:nth-child(4) { animation-delay: 0.4s; }
+  .timeline-item:nth-child(5) { animation-delay: 0.5s; }
+  
+  @keyframes slideInLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  .timeline-dot {
+    position: absolute;
+    left: -4px;
+    top: 8px;
+    width: 24px;
+    height: 24px;
+    background: white;
+    border-radius: 50%;
+    border: 3px solid rgb(20, 113, 76);
+    box-shadow: 0 0 0 2px rgb(20, 113, 76), 0 4px 12px rgba(20, 113, 76, 0.3);
+    transition: all 0.3s ease;
+  }
+  
+  .timeline-item:hover .timeline-dot {
+    box-shadow: 0 0 0 2px rgb(20, 113, 76), 0 8px 24px rgba(20, 113, 76, 0.5);
+    transform: scale(1.15);
+  }
+  
+  .dark .timeline-dot {
+    background: #1f2937;
+  }
+  
+  .timeline-content {
+    background: white;
+    border-radius: 12px;
+    padding: 20px 24px;
+    border: 2px solid transparent;
+    border-left: 4px solid rgb(20, 113, 76);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    flex: 1;
+  }
+  
+  .timeline-item:hover .timeline-content {
+    border-color: rgb(20, 113, 76);
+    box-shadow: 0 8px 24px rgba(20, 113, 76, 0.15);
+    transform: translateY(-4px);
+  }
+  
+  .dark .timeline-content {
+    background: #1f2937;
+    border-left-color: rgb(20, 113, 76);
+  }
+  
+  .timeline-year {
+    font-weight: 700;
+    color: rgb(20, 113, 76);
+    font-size: 1.125rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .timeline-year::before {
+    content: '📅';
+  }
+  
+  .timeline-event {
+    color: #6b7280;
+    margin-top: 8px;
+    font-size: 0.95rem;
+    font-weight: 500;
+  }
+  
+  .dark .timeline-event {
+    color: #d1d5db;
+  }
+  
+  .cta-blue {
+    background-color: rgb(20, 113, 76);
+    color: white;
+    padding: 60px 20px;
+    text-align: center;
+  }
+  
+  .cta-blue h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  
+  .cta-blue p {
+    font-size: 1.125rem;
+    margin-bottom: 32px;
+    max-width: 42rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .button-white {
+    display: inline-block;
+    padding: 16px 32px;
+    background-color: white;
+    color: rgb(20, 113, 76);
+    font-weight: 700;
+    border-radius: 12px;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+  
+  .button-white:hover {
+    transform: scale(1.05);
+  }
+  
+  @media (max-width: 768px) {
+    .values-grid {
+      grid-template-columns: 1fr;
+    }
+    
+    .about-hero h1 {
+      font-size: 1.875rem;
+    }
+  }
+`;
+
+export default function About() {
+  const [lang, setLang] = useState<Language>('en');
+  const { getLang } = useLanguage();
+  const t = (key: string) => getTranslation(lang, key);
+
+  useEffect(() => {
+    setLang(getLang());
+    const handleLanguageChange = (e: any) => setLang(e.detail);
+    window.addEventListener('languageChange', handleLanguageChange);
+    return () => window.removeEventListener('languageChange', handleLanguageChange);
+  }, [getLang]);
+
+  const values = [
+    { icon: Target, title: t('about.mission'), desc: t('about.missionText') },
+    { icon: Globe, title: t('about.network'), desc: t('about.networkText') },
+    { icon: Users, title: t('about.comfort'), desc: t('about.comfortText') },
+    { icon: Leaf, title: t('about.eco'), desc: t('about.ecoText') },
+  ];
+
+  return (
+    <>
+      <style>{styles}</style>
+      <main>
+        <section className="about-hero">
+          <h1>{t('about.title')}</h1>
+          <p>{t('about.subtitle')}</p>
+        </section>
+
+        <section className="values-grid">
+          {values.map((value, idx) => {
+            const Icon = value.icon;
+            return (
+              <div key={idx} className="value-card">
+                <div className="value-icon">
+                  <Icon size={24} color="white" />
+                </div>
+                <h3>{value.title}</h3>
+                <p>{value.desc}</p>
+              </div>
+            );
+          })}
+        </section>
+
+        <section className="stats-section">
+          <div className="stats-container">
+            <div className="stat">
+              <div className="stat-number">21</div>
+              <div className="stat-label">Railway Stations</div>
+            </div>
+            <div className="stat">
+              <div className="stat-number">360+</div>
+              <div className="stat-label">Comfortable Seats</div>
+            </div>
+            <div className="stat">
+              <div className="stat-number">3</div>
+              <div className="stat-label">Seat Classes</div>
+            </div>
+            <div className="stat">
+              <div className="stat-number">24/7</div>
+              <div className="stat-label">Customer Support</div>
+            </div>
+          </div>
+        </section>
+
+        <section className="timeline-section">
+          <h2 className="timeline-title">Our Journey</h2>
+          <div className="timeline">
+            {[
+              { year: '2020', event: 'EDR Platform Launched' },
+              { year: '2021', event: 'Reached 10,000+ Passengers' },
+              { year: '2022', event: 'Introduced Multi-Currency Support' },
+              { year: '2023', event: 'Launched Loyalty Program' },
+              { year: '2024', event: 'Age-Based Pricing & Verifayda Integration' },
+            ].map((item, idx) => (
+              <div key={idx} className="timeline-item">
+                <div className="timeline-dot" />
+                <div className="timeline-content">
+                  <div className="timeline-year">{item.year}</div>
+                  <div className="timeline-event">{item.event}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="cta-blue">
+          <h2>Join Our Community</h2>
+          <p>Be part of the modern railway revolution in East Africa.</p>
+          <Link href="/booking/search" className="button-white">Book Your First Journey</Link>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
index e4a829320..8addae4de 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
@@ -82,7 +82,7 @@ export default function ConfirmationPage() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
       <div className="container mx-auto px-4">
-        <div className="max-w-5xl mx-auto">
+        <div className="max-w-6xl mx-auto">
           {/* Success Header */}
           <div className="text-center mb-8">
             <div className="flex justify-center mb-4">
diff --git a/apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx
index bad056215..79649c4b0 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx
@@ -343,7 +343,7 @@ export default function PassengersPage() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
       <div className="container mx-auto px-4">
-        <div className="max-w-4xl mx-auto">
+        <div className="max-w-6xl mx-auto">
           <h1 className="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Passenger details</h1>
 
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
diff --git a/apps/edr-passenger-web/portal/src/app/booking/payment/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/payment/page.tsx
index e74c5b550..34f1fada1 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/payment/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/payment/page.tsx
@@ -160,7 +160,7 @@ export default function PaymentPage() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
       <div className="container mx-auto px-4">
-        <div className="max-w-3xl mx-auto">
+        <div className="max-w-6xl mx-auto">
           <h1 className="text-3xl font-bold mb-2 text-gray-900 dark:text-gray-100">Complete payment</h1>
           <p className="text-gray-600 dark:text-gray-400 mb-6">
             Booking reference: <span className="font-bold text-primary">{pnr}</span>
diff --git a/apps/edr-passenger-web/portal/src/app/booking/results/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/results/page.tsx
index c3054f23b..c8161bb34 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/results/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/results/page.tsx
@@ -155,7 +155,7 @@ export default function ResultsPage() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-4 md:py-6">
       <div className="container mx-auto px-4">
-        <div className="max-w-5xl mx-auto">
+        <div className="max-w-6xl mx-auto">
           <div className="mb-8">
             <button 
               onClick={() => router.push(buildSearchUrl())} 
@@ -202,7 +202,7 @@ export default function ResultsPage() {
                   <div className="flex flex-col lg:flex-row lg:items-center gap-6">
                     <div className="flex-1">
                       <div className="flex items-center gap-3 mb-4">
-                        <div className="w-10 h-10 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
+                        <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
                           <Clock className="w-5 h-5 text-primary" />
                         </div>
                         <div>
@@ -295,9 +295,9 @@ export default function ResultsPage() {
                                 disabled={!isAvailable}
                                 className={`relative p-4 rounded-lg border-2 text-left transition-all ${
                                   isSelected
-                                    ? 'border-primary bg-primary-50 dark:bg-primary-900/20 shadow-md'
+                                    ? 'border-primary bg-blue-50 dark:bg-blue-900/20 shadow-md'
                                     : isAvailable
-                                    ? 'border-gray-200 dark:border-gray-700 hover:border-primary-300 hover:shadow-sm'
+                                    ? 'border-gray-200 dark:border-gray-700 hover:border-blue-300 hover:shadow-sm'
                                     : 'border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 opacity-60 cursor-not-allowed'
                                 }`}
                               >
diff --git a/apps/edr-passenger-web/portal/src/app/booking/review/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/review/page.tsx
index 55882a914..6f9c2a265 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/review/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/review/page.tsx
@@ -328,7 +328,7 @@ export default function ReviewPage() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
       <div className="container mx-auto px-4">
-        <div className="max-w-4xl mx-auto">
+        <div className="max-w-6xl mx-auto">
           <h1 className="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Review your booking</h1>
 
           {seatHold && (
diff --git a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
index 4617d9dd1..fa48c7610 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
@@ -9,8 +9,8 @@ import { useAuthStore } from '@/lib/auth-store';
 import { apiClient } from '@/lib/api-client';
 import { useBookingStore } from '@/lib/booking-store';
 import { Station } from '@/types';
-import { Train, MapPin, Calendar, ArrowRight, ArrowLeftRight, Plus, Minus, Search } from 'lucide-react';
-import { useEffect } from 'react';
+import { Train, MapPin, ArrowRight, Plus, Minus, Search, Users, ChevronDown } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import ModernDatePicker from '@/components/ModernDatePicker';
 
 const searchSchema = z.object({
@@ -32,6 +32,7 @@ export default function SearchPage() {
   const searchParams = useSearchParams();
   const setSearchCriteria = useBookingStore((s) => s.setSearchCriteria);
   const { user, isAuthenticated } = useAuthStore();
+  const [isPassengerOpen, setIsPassengerOpen] = useState(false);
 
   const { data: stations, isLoading, error } = useQuery<Station[]>({
     queryKey: ['stations'],
@@ -51,11 +52,9 @@ export default function SearchPage() {
     },
   });
 
-  // Set user's nationality after component mounts and user data is available
   useEffect(() => {
     if (isAuthenticated && user?.nationality) {
       const normalized = user.nationality.toUpperCase().trim();
-      console.log('User nationality from store:', user.nationality, 'Normalized:', normalized);
       if (normalized.includes('DJIBOUTIAN') || normalized === 'DJIBOUTIAN') {
         setValue('nationality', 'DJIBOUTIAN');
       } else if (normalized.includes('ETHIOPIAN') || normalized === 'ETHIOPIAN') {
@@ -66,7 +65,6 @@ export default function SearchPage() {
     }
   }, [isAuthenticated, user?.nationality, setValue]);
 
-  // Restore previous search values from URL params
   useEffect(() => {
     const origin = searchParams.get('origin');
     const destination = searchParams.get('destination');
@@ -84,19 +82,9 @@ export default function SearchPage() {
   }, [searchParams, setValue]);
 
   const originId = watch('originStationId');
-  const destinationId = watch('destinationStationId');
   const adultCount = watch('adultCount');
   const childCount = watch('childCount');
 
-  const swapStations = () => {
-    if (originId && destinationId) {
-      const tempOrigin = originId;
-      const tempDestination = destinationId;
-      setValue('originStationId', tempDestination);
-      setValue('destinationStationId', tempOrigin);
-    }
-  };
-
   const onSubmit = (data: SearchForm) => {
     setSearchCriteria(data);
     const params = new URLSearchParams({
@@ -134,11 +122,13 @@ export default function SearchPage() {
     { from: 'Diredawa', to: 'Nagad', duration: '4h' },
   ];
 
+
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Search Section */}
       <div className="container mx-auto px-4 py-8 md:py-12">
-        <div className="max-w-5xl mx-auto">
+        <div className="max-w-6xl mx-auto">
           {/* Search Card */}
           <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-visible">
             {/* Header inside card */}
@@ -161,17 +151,19 @@ export default function SearchPage() {
             )}
             
             <form onSubmit={handleSubmit(onSubmit)} className="p-6 md:p-8">
-              <div className="grid md:grid-cols-[1fr_auto_1fr] gap-4 items-end mb-6">
-                <div className="space-y-2">
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">From</label>
+              {/* First Row: From, To, Date */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end mb-4">
+                {/* From */}
+                <div className="space-y-2 md:col-span-1">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">From</label>
                   <div className="relative">
-                    <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" />
+                    <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-primary" />
                     <select 
                       {...register('originStationId')} 
                       className="w-full pl-11 pr-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                       disabled={isLoading}
                     >
-                      <option value="">Select departure station</option>
+                      <option value="">Select departure</option>
                       {stations?.map((s) => (
                         <option key={s.id} value={s.id}>{s.name}</option>
                       ))}
@@ -182,25 +174,17 @@ export default function SearchPage() {
                   )}
                 </div>
 
-                <button
-                  type="button"
-                  onClick={swapStations}
-                  className="hidden md:flex items-center justify-center w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 hover:border-primary transition-all mb-2"
-                  title="Swap stations"
-                >
-                  <ArrowLeftRight className="w-5 h-5 text-gray-600 dark:text-gray-300" />
-                </button>
-
-                <div className="space-y-2">
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">To</label>
+                {/* To */}
+                <div className="space-y-2 md:col-span-1">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">To</label>
                   <div className="relative">
-                    <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" />
+                    <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-primary" />
                     <select 
                       {...register('destinationStationId')} 
                       className="w-full pl-11 pr-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                       disabled={isLoading}
                     >
-                      <option value="">Select arrival station</option>
+                      <option value="">Select arrival</option>
                       {stations?.map((s) => (
                         <option key={s.id} value={s.id} disabled={s.id === originId}>{s.name}</option>
                       ))}
@@ -210,11 +194,10 @@ export default function SearchPage() {
                     <p className="text-red-600 dark:text-red-400 text-sm">{errors.destinationStationId.message}</p>
                   )}
                 </div>
-              </div>
 
-              <div className="grid md:grid-cols-2 gap-6 mb-6">
-                <div className="space-y-2 relative z-10">
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Departure Date</label>
+                {/* Date */}
+                <div className="space-y-2 relative z-30 md:col-span-1">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Date</label>
                   <ModernDatePicker
                     value={watch('departureDate') ? new Date(watch('departureDate') + 'T00:00:00') : undefined}
                     onChange={(date) => {
@@ -224,99 +207,142 @@ export default function SearchPage() {
                       setValue('departureDate', `${year}-${month}-${day}`);
                     }}
                     minDate={new Date()}
-                    placeholder="Select departure date"
+                    placeholder="Select date"
                   />
                   {errors.departureDate && (
                     <p className="text-red-600 dark:text-red-400 text-sm">{errors.departureDate.message}</p>
                   )}
                 </div>
+              </div>
 
+              {/* Second Row: Passengers, Nationality, Promo Code */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end mb-4">
+                {/* Passengers Dropdown */}
+                <div className="space-y-2 relative z-20">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Passengers</label>
+                  <button
+                    type="button"
+                    onClick={() => setIsPassengerOpen(!isPassengerOpen)}
+                    className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 flex items-center justify-between hover:border-primary transition-colors"
+                  >
+                    <span className="flex items-center gap-2">
+                      <Users className="w-4 h-4 text-primary" />
+                      {(adultCount || 1) + (childCount || 0)} Passenger{((adultCount || 1) + (childCount || 0)) !== 1 ? 's' : ''}
+                    </span>
+                    <ChevronDown className={`w-4 h-4 transition-transform text-primary ${isPassengerOpen ? 'rotate-180' : ''}`} />
+                  </button>
+
+                  {/* Passenger Dropdown Menu */}
+                  {isPassengerOpen && (
+                    <>
+                      <div className="fixed inset-0 z-40" onClick={() => setIsPassengerOpen(false)} />
+                      <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg z-50 p-4 space-y-4">
+                        {/* Adults */}
+                        <div>
+                          <div className="flex items-center justify-between mb-2">
+                            <div>
+                              <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Adults</div>
+                              <div className="text-xs text-gray-500 dark:text-gray-400">≥5 years</div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  const current = adultCount || 1;
+                                  if (current > 1) setValue('adultCount', current - 1);
+                                }}
+                                className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+                                disabled={(adultCount || 1) <= 1}
+                              >
+                                <Minus className="w-4 h-4 text-primary" />
+                              </button>
+                              <span className="w-6 text-center font-semibold text-gray-900 dark:text-gray-100">{adultCount || 1}</span>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  const current = adultCount || 1;
+                                  if (current < 9) setValue('adultCount', current + 1);
+                                }}
+                                className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+                                disabled={(adultCount || 1) >= 9}
+                              >
+                                <Plus className="w-4 h-4 text-primary" />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Children */}
+                        <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Children</div>
+                              <div className="text-xs text-gray-500 dark:text-gray-400">&lt;5 years • First free</div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  const current = childCount || 0;
+                                  if (current > 0) setValue('childCount', current - 1);
+                                }}
+                                className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+                                disabled={(childCount || 0) <= 0}
+                              >
+                                <Minus className="w-4 h-4 text-primary" />
+                              </button>
+                              <span className="w-6 text-center font-semibold text-gray-900 dark:text-gray-100">{childCount || 0}</span>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  const current = childCount || 0;
+                                  if (current < 9) setValue('childCount', current + 1);
+                                }}
+                                className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+                                disabled={(childCount || 0) >= 9}
+                              >
+                                <Plus className="w-4 h-4 text-primary" />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+
+                {/* Nationality */}
                 <div className="space-y-2">
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Passengers</label>
-                  <div className="border border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-white dark:bg-gray-700">
-                    <div className="flex items-center justify-between mb-3">
-                      <div>
-                        <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Adults</div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400">≥5 years</div>
-                      </div>
-                      <div className="flex items-center gap-3">
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const current = adultCount || 1;
-                            if (current > 1) setValue('adultCount', current - 1);
-                          }}
-                          className="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50"
-                          disabled={(adultCount || 1) <= 1}
-                        >
-                          <Minus className="w-4 h-4 text-gray-700 dark:text-gray-300" />
-                        </button>
-                        <span className="w-8 text-center font-semibold text-gray-900 dark:text-gray-100">{adultCount || 1}</span>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const current = adultCount || 1;
-                            if (current < 9) setValue('adultCount', current + 1);
-                          }}
-                          className="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50"
-                          disabled={(adultCount || 1) >= 9}
-                        >
-                          <Plus className="w-4 h-4 text-gray-700 dark:text-gray-300" />
-                        </button>
-                      </div>
-                    </div>
-                    <div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-gray-600">
-                      <div>
-                        <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Children</div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400">&lt;5 years • First child free</div>
-                      </div>
-                      <div className="flex items-center gap-3">
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const current = childCount || 0;
-                            if (current > 0) setValue('childCount', current - 1);
-                          }}
-                          className="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50"
-                          disabled={(childCount || 0) <= 0}
-                        >
-                          <Minus className="w-4 h-4 text-gray-700 dark:text-gray-300" />
-                        </button>
-                        <span className="w-8 text-center font-semibold text-gray-900 dark:text-gray-100">{childCount || 0}</span>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const current = childCount || 0;
-                            if (current < 9) setValue('childCount', current + 1);
-                          }}
-                          className="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50"
-                          disabled={(childCount || 0) >= 9}
-                        >
-                          <Plus className="w-4 h-4 text-gray-700 dark:text-gray-300" />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Nationality</label>
+                  <select {...register('nationality')} className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
+                    <option value="ETHIOPIAN">Ethiopian</option>
+                    <option value="DJIBOUTIAN">Djiboutian</option>
+                    <option value="OTHER">Other</option>
+                  </select>
+                </div>
+
+                {/* Promo Code */}
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Promo Code (Optional)</label>
+                  <input
+                    type="text"
+                    placeholder="Enter promo code"
+                    className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
+                  />
                 </div>
               </div>
 
-              <div className="space-y-2 mb-6">
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Nationality</label>
-                <select {...register('nationality')} className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
-                  <option value="">Select nationality</option>
-                  <option value="ETHIOPIAN">Ethiopian</option>
-                  <option value="DJIBOUTIAN">Djiboutian</option>
-                  <option value="OTHER">Other</option>
-                </select>
+              {/* Third Row: Search Button */}
+              <div>
+                <button type="submit" className="w-full bg-[rgb(20_113_76)] hover:bg-[rgb(16_89_60)] text-white font-semibold py-3.5 px-6 rounded-lg transition-all duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-xl">
+                  <Search className="w-5 h-5 text-white" />
+                  <span>Search Train</span>
+                </button>
               </div>
-
-              <button type="submit" className="w-full bg-primary hover:bg-primary-700 text-white font-semibold py-4 px-6 rounded-lg transition-all duration-200 flex items-center justify-center gap-2 text-lg shadow-lg hover:shadow-xl">
-                <Search className="w-5 h-5" />
-                <span>Search Trains</span>
-              </button>
             </form>
           </div>
 
+          {/* Popular Routes */}
           <div className="mt-12">
             <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">Popular Routes</h2>
             <div className="grid md:grid-cols-3 gap-4">
@@ -330,7 +356,7 @@ export default function SearchPage() {
                   <div className="flex items-start justify-between mb-3">
                     <div className="flex-1">
                       <div className="font-semibold text-gray-900 dark:text-gray-100 mb-1">{route.from}</div>
-                      <ArrowRight className="w-4 h-4 text-gray-400 dark:text-gray-500 my-2" />
+                      <ArrowRight className="w-4 h-4 text-primary my-2" />
                       <div className="font-semibold text-gray-900 dark:text-gray-100">{route.to}</div>
                     </div>
                     <Train className="w-5 h-5 text-primary opacity-0 group-hover:opacity-100 transition-opacity" />
@@ -341,29 +367,6 @@ export default function SearchPage() {
             </div>
           </div>
 
-          <div className="mt-12 grid md:grid-cols-3 gap-6">
-            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6">
-              <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center mb-4">
-                <Train className="w-6 h-6 text-primary" />
-              </div>
-              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">Modern Fleet</h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400">Comfortable trains with modern amenities</p>
-            </div>
-            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6">
-              <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center mb-4">
-                <MapPin className="w-6 h-6 text-primary" />
-              </div>
-              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">21 Stations</h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400">Connecting Ethiopia and Djibouti</p>
-            </div>
-            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6">
-              <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center mb-4">
-                <Calendar className="w-6 h-6 text-primary" />
-              </div>
-              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">Easy Booking</h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400">Book tickets in just a few clicks</p>
-            </div>
-          </div>
         </div>
       </div>
     </div>
diff --git a/apps/edr-passenger-web/portal/src/app/contact/page.tsx b/apps/edr-passenger-web/portal/src/app/contact/page.tsx
new file mode 100644
index 000000000..f2c0f4296
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/app/contact/page.tsx
@@ -0,0 +1,375 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getTranslation, Language, useLanguage } from '@/lib/i18n';
+import { Phone, Mail, MapPin, Send, Loader } from 'lucide-react';
+
+const styles = `
+  .contact-hero {
+    padding: 60px 20px;
+    background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
+    text-align: center;
+    color: #111827;
+  }
+  
+  .dark .contact-hero {
+    color: #f3f4f6;
+  }
+  
+  .contact-hero h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+    color: #111827;
+  }
+  
+  .dark .contact-hero h1 {
+    color: #f3f4f6;
+  }
+  
+  .contact-hero p {
+    font-size: 1.125rem;
+    color: #6b7280;
+  }
+  
+  .dark .contact-hero p {
+    color: #9ca3af;
+  }
+  
+  .contact-grid {
+    max-width: 80rem;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 24px;
+    padding: 60px 20px;
+    background-color: white;
+  }
+  
+  .dark .contact-grid {
+    background-color: #111827;
+  }
+  
+  .contact-card {
+    background: white;
+    border: 2px solid #f3f4f6;
+    border-radius: 18px;
+    padding: 24px;
+    cursor: pointer;
+    text-align: center;
+    transition: all 0.2s;
+  }
+  
+  .dark .contact-card {
+    background: #1f2937;
+    border-color: #374151;
+  }
+  
+  .contact-card:hover {
+    border-color: rgb(20, 113, 76);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+  
+  .contact-icon {
+    width: 48px;
+    height: 48px;
+    background: rgb(20, 113, 76);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 16px;
+  }
+  
+  .contact-card h3 {
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: #111827;
+  }
+  
+  .dark .contact-card h3 {
+    color: #f3f4f6;
+  }
+  
+  .contact-card p {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  .dark .contact-card p {
+    color: #9ca3af;
+  }
+  
+  .contact-card a {
+    color: #6b7280;
+    text-decoration: none;
+  }
+  
+  .contact-card a:hover {
+    color: rgb(20, 113, 76);
+  }
+  
+  .form-section {
+    padding: 60px 20px;
+    background-color: #f9fafb;
+  }
+  
+  .dark .form-section {
+    background-color: #0f1117;
+  }
+  
+  .form-container {
+    max-width: 42rem;
+    margin: 0 auto;
+    background: white;
+    border-radius: 18px;
+    padding: 32px;
+    border: 1px solid #e5e7eb;
+  }
+  
+  .dark .form-container {
+    background: #1f2937;
+    border-color: #374151;
+  }
+  
+  .form-container h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 24px;
+    color: #111827;
+  }
+  
+  .dark .form-container h2 {
+    color: #f3f4f6;
+  }
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  .form-group label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 8px;
+  }
+  
+  .dark .form-group label {
+    color: #d1d5db;
+  }
+  
+  .form-group input,
+  .form-group textarea {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid #e5e7eb;
+    border-radius: 12px;
+    font-size: 1rem;
+    font-family: inherit;
+    transition: all 0.2s;
+    box-sizing: border-box;
+    background: white;
+    color: #111827;
+  }
+  
+  .dark .form-group input,
+  .dark .form-group textarea {
+    background: #111827;
+    color: #f3f4f6;
+    border-color: #374151;
+  }
+  
+  .form-group input:focus,
+  .form-group textarea:focus {
+    outline: none;
+    border-color: rgb(20, 113, 76);
+    box-shadow: 0 0 0 3px rgba(20, 113, 76, 0.1);
+  }
+  
+  .form-submit {
+    width: 100%;
+    padding: 14px 20px;
+    background-color: rgb(20, 113, 76);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 8px;
+  }
+  
+  .form-submit:hover {
+    background-color: rgb(16, 89, 60);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+  
+  .form-submit:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  .alert {
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    font-size: 0.875rem;
+  }
+  
+  .alert-success {
+    background-color: #dbeafe;
+    color: #1e40af;
+  }
+  
+  .dark .alert-success {
+    background-color: rgba(20, 113, 76, 0.1);
+    color: #a7f3d0;
+  }
+  
+  .alert-error {
+    background-color: #fee2e2;
+    color: #991b1b;
+  }
+  
+  .dark .alert-error {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: #fca5a5;
+  }
+`;
+
+export default function Contact() {
+  const [lang, setLang] = useState<Language>('en');
+  const [formData, setFormData] = useState({ name: '', email: '', subject: '', message: '' });
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const { getLang } = useLanguage();
+  const t = (key: string) => getTranslation(lang, key);
+
+  useEffect(() => {
+    setLang(getLang());
+    const handleLanguageChange = (e: any) => setLang(e.detail);
+    window.addEventListener('languageChange', handleLanguageChange);
+    return () => window.removeEventListener('languageChange', handleLanguageChange);
+  }, [getLang]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    
+    try {
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      setMessage({ type: 'success', text: t('contact.success') });
+      setFormData({ name: '', email: '', subject: '', message: '' });
+    } catch (error) {
+      setMessage({ type: 'error', text: t('contact.error') });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const contactInfo = [
+    { icon: Phone, title: t('contact.phone'), value: '+251 911 000 000', link: 'tel:+251911000000' },
+    { icon: Mail, title: t('contact.email'), value: 'support@edr.et', link: 'mailto:support@edr.et' },
+    { icon: MapPin, title: t('contact.address'), value: 'Addis Ababa, Ethiopia', link: '#' },
+  ];
+
+  return (
+    <>
+      <style>{styles}</style>
+      <main>
+        <section className="contact-hero">
+          <h1>{t('contact.title')}</h1>
+          <p>{t('contact.subtitle')}</p>
+        </section>
+
+        <section className="contact-grid">
+          {contactInfo.map((info, idx) => {
+            const Icon = info.icon;
+            return (
+              <a key={idx} href={info.link} className="contact-card">
+                <div className="contact-icon">
+                  <Icon size={24} color="white" />
+                </div>
+                <h3>{info.title}</h3>
+                <p>{info.value}</p>
+              </a>
+            );
+          })}
+        </section>
+
+        <section className="form-section">
+          <div className="form-container">
+            <h2>{t('contact.form')}</h2>
+
+            {message && (
+              <div className={`alert alert-${message.type === 'success' ? 'success' : 'error'}`}>
+                {message.text}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit}>
+              <div className="form-group">
+                <label>{t('contact.name')}</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                />
+              </div>
+
+              <div className="form-group">
+                <label>{t('contact.emailField')}</label>
+                <input
+                  type="email"
+                  required
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                />
+              </div>
+
+              <div className="form-group">
+                <label>{t('contact.subject')}</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.subject}
+                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
+                />
+              </div>
+
+              <div className="form-group">
+                <label>{t('contact.message')}</label>
+                <textarea
+                  required
+                  rows={5}
+                  value={formData.message}
+                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                />
+              </div>
+
+              <button type="submit" disabled={loading} className="form-submit">
+                {loading ? (
+                  <>
+                    <Loader size={18} />
+                    {t('contact.sending')}
+                  </>
+                ) : (
+                  <>
+                    <Send size={18} />
+                    {t('contact.send')}
+                  </>
+                )}
+              </button>
+            </form>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/app/globals.css b/apps/edr-passenger-web/portal/src/app/globals.css
index d640e86dc..84d3484db 100644
--- a/apps/edr-passenger-web/portal/src/app/globals.css
+++ b/apps/edr-passenger-web/portal/src/app/globals.css
@@ -10,27 +10,47 @@
 
 @layer components {
   .btn-primary {
-    @apply bg-primary hover:bg-primary-700 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
+    @apply inline-flex items-center gap-2 px-6 py-3 bg-[rgb(20_113_76)] text-white font-semibold rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
+  }
+  
+  .btn-primary:hover {
+    @apply bg-[rgb(16_89_60)];
   }
   
   .btn-secondary {
-    @apply bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold py-3 px-6 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed border-2 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 shadow-md hover:shadow-lg;
+    @apply bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 font-semibold py-3 px-6 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed border-2 border-gray-200 dark:border-gray-700 shadow-md hover:shadow-lg;
+  }
+  
+  .btn-secondary:hover {
+    @apply bg-gray-50 dark:bg-gray-700 border-[rgb(20_113_76)] dark:border-[rgb(20_113_76)];
   }
   
   .btn-ghost {
-    @apply text-primary hover:bg-primary-50 dark:hover:bg-primary-900/20 font-medium py-2 px-4 rounded-lg transition-colors;
+    @apply text-[rgb(20_113_76)] font-medium py-2 px-4 rounded-lg transition-colors;
+  }
+  
+  .btn-ghost:hover {
+    @apply bg-[rgb(20_113_76)] bg-opacity-10 dark:bg-[rgb(20_113_76)] dark:bg-opacity-20;
   }
   
   .input-field {
-    @apply w-full px-4 py-3 border-2 border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-all duration-200 text-base bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
+    @apply w-full px-4 py-3 border-2 border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-[rgb(20_113_76)] focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-all duration-200 text-base bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
   }
   
   .card {
-    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 border border-gray-100 dark:border-gray-700 hover:shadow-md transition-shadow duration-200;
+    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 border border-gray-100 dark:border-gray-700;
+  }
+  
+  .card:hover {
+    @apply shadow-md;
   }
   
   .card-interactive {
-    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 border-2 border-gray-100 dark:border-gray-700 hover:border-primary hover:shadow-lg transition-all duration-200 cursor-pointer;
+    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-6 border-2 border-gray-100 dark:border-gray-700 cursor-pointer transition-all duration-200;
+  }
+  
+  .card-interactive:hover {
+    @apply border-[rgb(20_113_76)] shadow-lg;
   }
   
   .badge {
@@ -62,4 +82,79 @@
   .text-balance {
     text-wrap: balance;
   }
+  
+  @keyframes bounce-in {
+    0% {
+      opacity: 0;
+      transform: translateY(20px) scale(0.9);
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  @keyframes float {
+    0%, 100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+  
+  @keyframes shimmer {
+    0% {
+      background-position: -1000px 0;
+    }
+    100% {
+      background-position: 1000px 0;
+    }
+  }
+  
+  @keyframes slide-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  @keyframes slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  .animate-bounce-in {
+    animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+  
+  .animate-shimmer {
+    background-size: 1000px 100%;
+    animation: shimmer 2s infinite;
+  }
+  
+  .animate-slide-in-left {
+    animation: slide-in-left 0.5s ease-out;
+  }
+  
+  .animate-slide-in-right {
+    animation: slide-in-right 0.5s ease-out;
+  }
 }
diff --git a/apps/edr-passenger-web/portal/src/app/help/page.tsx b/apps/edr-passenger-web/portal/src/app/help/page.tsx
new file mode 100644
index 000000000..be49c34f3
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/app/help/page.tsx
@@ -0,0 +1,424 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getTranslation, Language, useLanguage } from '@/lib/i18n';
+import Link from 'next/link';
+import { ChevronDown, Search, MessageCircle } from 'lucide-react';
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+interface FAQCategory {
+  title: string;
+  items: FAQItem[];
+}
+
+const styles = `
+  .help-hero {
+    padding: 60px 20px;
+    background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
+    text-align: center;
+    color: #111827;
+  }
+  
+  .dark .help-hero {
+    color: #f3f4f6;
+  }
+  
+  .help-hero h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+    color: #111827;
+  }
+  
+  .dark .help-hero h1 {
+    color: #f3f4f6;
+  }
+  
+  .help-hero p {
+    font-size: 1.125rem;
+    color: #6b7280;
+  }
+  
+  .dark .help-hero p {
+    color: #9ca3af;
+  }
+  
+  .search-section {
+    padding: 30px 20px;
+    background-color: white;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  
+  .dark .search-section {
+    background-color: #111827;
+    border-bottom-color: #374151;
+  }
+  
+  .search-box {
+    max-width: 42rem;
+    margin: 0 auto;
+    position: relative;
+  }
+  
+  .search-box input {
+    width: 100%;
+    padding: 12px 40px 12px 12px;
+    border: 2px solid #e5e7eb;
+    border-radius: 12px;
+    font-size: 1rem;
+    transition: all 0.2s;
+    box-sizing: border-box;
+    background: white;
+    color: #111827;
+  }
+  
+  .dark .search-box input {
+    background: #1f2937;
+    color: #f3f4f6;
+    border-color: #374151;
+  }
+  
+  .search-box input:focus {
+    outline: none;
+    border-color: rgb(20, 113, 76);
+    box-shadow: 0 0 0 3px rgba(20, 113, 76, 0.1);
+  }
+  
+  .search-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    pointer-events: none;
+  }
+  
+  .faq-section {
+    padding: 60px 20px;
+    background-color: white;
+  }
+  
+  .dark .faq-section {
+    background-color: #111827;
+  }
+  
+  .faq-container {
+    max-width: 48rem;
+    margin: 0 auto;
+  }
+  
+  .faq-category {
+    margin-bottom: 40px;
+  }
+  
+  .faq-category h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 24px;
+    color: #111827;
+  }
+  
+  .dark .faq-category h2 {
+    color: #f3f4f6;
+  }
+  
+  .faq-item {
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    overflow: hidden;
+    transition: all 0.2s;
+  }
+  
+  .dark .faq-item {
+    border-color: #374151;
+  }
+  
+  .faq-item:hover {
+    border-color: rgb(20, 113, 76);
+  }
+  
+  .faq-question {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    background-color: white;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+    width: 100%;
+    text-align: left;
+    font-weight: 600;
+    color: #111827;
+  }
+  
+  .dark .faq-question {
+    background-color: #1f2937;
+    color: #f3f4f6;
+  }
+  
+  .faq-question:hover {
+    background-color: #f9fafb;
+  }
+  
+  .dark .faq-question:hover {
+    background-color: #374151;
+  }
+  
+  .faq-chevron {
+    transition: transform 0.3s;
+    flex-shrink: 0;
+    margin-left: 12px;
+  }
+  
+  .faq-chevron.open {
+    transform: rotate(180deg);
+  }
+  
+  .faq-answer {
+    padding: 16px;
+    background-color: #f9fafb;
+    border-top: 1px solid #e5e7eb;
+    color: #6b7280;
+    font-size: 0.875rem;
+    line-height: 1.6;
+  }
+  
+  .dark .faq-answer {
+    background-color: #0f1117;
+    border-top-color: #374151;
+    color: #9ca3af;
+  }
+  
+  .help-section {
+    padding: 60px 20px;
+    background-color: #f9fafb;
+  }
+  
+  .dark .help-section {
+    background-color: #0f1117;
+  }
+  
+  .help-card {
+    max-width: 42rem;
+    margin: 0 auto;
+    background: white;
+    border-radius: 18px;
+    padding: 32px;
+    border: 1px solid #e5e7eb;
+    text-align: center;
+  }
+  
+  .dark .help-card {
+    background: #1f2937;
+    border-color: #374151;
+  }
+  
+  .help-icon {
+    width: 64px;
+    height: 64px;
+    background: rgb(20, 113, 76);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 16px;
+  }
+  
+  .help-card h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: #111827;
+  }
+  
+  .dark .help-card h2 {
+    color: #f3f4f6;
+  }
+  
+  .help-card p {
+    color: #6b7280;
+    margin-bottom: 24px;
+  }
+  
+  .dark .help-card p {
+    color: #9ca3af;
+  }
+  
+  .button-primary {
+    display: inline-block;
+    padding: 12px 32px;
+    background-color: rgb(20, 113, 76);
+    color: white;
+    font-weight: 700;
+    border-radius: 12px;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+  
+  .button-primary:hover {
+    background-color: rgb(16, 89, 60);
+    transform: scale(1.05);
+  }
+  
+  .no-results {
+    text-align: center;
+    padding: 40px 20px;
+    color: #6b7280;
+  }
+  
+  .dark .no-results {
+    color: #9ca3af;
+  }
+  
+  @media (max-width: 768px) {
+    .help-hero h1 {
+      font-size: 1.875rem;
+    }
+  }
+`;
+
+export default function Help() {
+  const [lang, setLang] = useState<Language>('en');
+  const [openIndexes, setOpenIndexes] = useState<number[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const { getLang } = useLanguage();
+  const t = (key: string) => getTranslation(lang, key);
+
+  useEffect(() => {
+    setLang(getLang());
+    const handleLanguageChange = (e: any) => setLang(e.detail);
+    window.addEventListener('languageChange', handleLanguageChange);
+    return () => window.removeEventListener('languageChange', handleLanguageChange);
+  }, [getLang]);
+
+  const faqCategories: FAQCategory[] = [
+    {
+      title: t('help.bookingFaq'),
+      items: [
+        { question: t('help.how'), answer: t('help.howAnswer') },
+        { question: t('help.modify'), answer: t('help.modifyAnswer') },
+        { question: t('help.cancel'), answer: t('help.cancelAnswer') },
+      ],
+    },
+    {
+      title: t('help.paymentFaq'),
+      items: [
+        { question: t('help.payMethods'), answer: t('help.payMethodsAnswer') },
+        { question: t('help.refund'), answer: t('help.refundAnswer') },
+      ],
+    },
+    {
+      title: t('help.other'),
+      items: [
+        { question: t('help.docs'), answer: t('help.docsAnswer') },
+      ],
+    },
+  ];
+
+  const toggleFAQ = (index: number) => {
+    if (openIndexes.includes(index)) {
+      setOpenIndexes(openIndexes.filter(i => i !== index));
+    } else {
+      setOpenIndexes([...openIndexes, index]);
+    }
+  };
+
+  let flatFAQs: (FAQItem & { id: number })[] = [];
+  faqCategories.forEach((cat) => {
+    cat.items.forEach((item) => {
+      flatFAQs.push({ ...item, id: flatFAQs.length });
+    });
+  });
+
+  const filteredFAQs = flatFAQs.filter(
+    (faq) =>
+      faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <>
+      <style>{styles}</style>
+      <main>
+        <section className="help-hero">
+          <h1>{t('help.title')}</h1>
+          <p>{t('help.subtitle')}</p>
+        </section>
+
+        <section className="search-section">
+          <div className="search-box">
+            <input
+              type="text"
+              placeholder="Search FAQs..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Search className="search-icon" size={20} />
+          </div>
+        </section>
+
+        <section className="faq-section">
+          <div className="faq-container">
+            {searchTerm ? (
+              <>
+                {filteredFAQs.length > 0 ? (
+                  filteredFAQs.map((faq) => (
+                    <div key={faq.id} className="faq-item">
+                      <div className="faq-question">
+                        <span>{faq.question}</span>
+                      </div>
+                      <div className="faq-answer">{faq.answer}</div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="no-results">
+                    No FAQs found for &quot;{searchTerm}&quot;
+                  </div>
+                )}
+              </>
+            ) : (
+              faqCategories.map((category, catIdx) => (
+                <div key={catIdx} className="faq-category">
+                  <h2>{category.title}</h2>
+                  {category.items.map((item, itemIdx) => {
+                    const globalIdx = catIdx * 100 + itemIdx;
+                    const isOpen = openIndexes.includes(globalIdx);
+                    return (
+                      <div key={itemIdx} className="faq-item">
+                        <button
+                          className="faq-question"
+                          onClick={() => toggleFAQ(globalIdx)}
+                        >
+                          <span>{item.question}</span>
+                          <ChevronDown className={`faq-chevron ${isOpen ? 'open' : ''}`} size={20} color="rgb(20, 113, 76)" />
+                        </button>
+                        {isOpen && <div className="faq-answer">{item.answer}</div>}
+                      </div>
+                    );
+                  })}
+                </div>
+              ))
+            )}
+          </div>
+        </section>
+
+        <section className="help-section">
+          <div className="help-card">
+            <div className="help-icon">
+              <MessageCircle size={32} color="white" />
+            </div>
+            <h2>{t('help.help')}</h2>
+            <p>{t('help.contact')}</p>
+            <Link href="/contact" className="button-primary">Contact Support</Link>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/app/layout.tsx b/apps/edr-passenger-web/portal/src/app/layout.tsx
index 0deb26481..da774c15f 100644
--- a/apps/edr-passenger-web/portal/src/app/layout.tsx
+++ b/apps/edr-passenger-web/portal/src/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from 'next';
 import './globals.css';
 import { Providers } from './providers';
 import AppHeader from '@/components/AppHeader';
+import { Footer } from '@/components/Footer';
+import { LoadingIndicator } from '@/components/LoadingIndicator';
 
 export const metadata: Metadata = {
   title: 'EDR Passenger Portal - Book your train journey',
@@ -15,7 +17,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="font-sans antialiased">
+      <body className="font-sans antialiased flex flex-col min-h-screen">
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -39,8 +41,12 @@ export default function RootLayout({
           }}
         />
         <Providers>
+          <LoadingIndicator />
           <AppHeader />
-          {children}
+          <main className="flex-1">
+            {children}
+          </main>
+          <Footer />
         </Providers>
       </body>
     </html>
diff --git a/apps/edr-passenger-web/portal/src/app/login/page.tsx b/apps/edr-passenger-web/portal/src/app/login/page.tsx
index b387d9e41..77cd2fcad 100644
--- a/apps/edr-passenger-web/portal/src/app/login/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/login/page.tsx
@@ -41,11 +41,13 @@ function LoginContent() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center py-12 px-4">
+    <div className="min-h-screen bg-gradient-to-br from-[rgb(20_113_76)] from-10% via-transparent to-[rgb(20_113_76)] to-90% dark:from-gray-900 dark:to-gray-800 flex items-center justify-center py-12 px-4">
       <div className="max-w-md w-full">
         <div className="text-center mb-8">
           <div className="flex justify-center mb-4">
-            <Train className="w-12 h-12 text-primary" />
+            <div className="w-12 h-12 bg-[rgb(20_113_76)] rounded-lg flex items-center justify-center">
+              <Train className="w-6 h-6 text-white" />
+            </div>
           </div>
           <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Sign in</h1>
           <p className="text-gray-600 dark:text-gray-400 mt-2">Welcome back</p>
@@ -106,10 +108,12 @@ function LoginContent() {
 
 export default function LoginPage() {
   return (
-    <Suspense fallback={
-      <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
+      <Suspense fallback={
+      <div className="min-h-screen bg-gradient-to-br from-[rgb(20_113_76)] from-10% via-transparent to-[rgb(20_113_76)] to-90% dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
         <div className="text-center">
-          <Train className="w-12 h-12 text-primary animate-pulse mx-auto mb-4" />
+          <div className="w-12 h-12 bg-white rounded-lg flex items-center justify-center mx-auto mb-4">
+            <Train className="w-6 h-6 text-[rgb(20_113_76)]" />
+          </div>
           <p className="text-gray-600 dark:text-gray-400">Loading...</p>
         </div>
       </div>
diff --git a/apps/edr-passenger-web/portal/src/app/page.tsx b/apps/edr-passenger-web/portal/src/app/page.tsx
index 1ff7e1357..b86db2ffe 100644
--- a/apps/edr-passenger-web/portal/src/app/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/page.tsx
@@ -1,5 +1,438 @@
-import { redirect } from 'next/navigation';
+'use client';
 
-export default function HomePage() {
-  redirect('/booking/search');
+import { useEffect, useState } from 'react';
+import { getTranslation, Language, useLanguage } from '@/lib/i18n';
+import Link from 'next/link';
+import { SearchWidget } from '@/components/SearchWidget';
+import { Zap, Heart, Shield, Clock, ArrowRight, Train, MapPin, Calendar } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api-client';
+import { Station } from '@/types';
+
+const styles = `
+  .hero-section {
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
+    padding: 80px 20px;
+    text-align: center;
+    color: #111827;
+  }
+  
+  .dark .hero-section {
+    background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
+    color: #f3f4f6;
+  }
+  
+  .hero-content {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+  
+  .hero-heading {
+    font-size: clamp(1rem, 3vw, 2.75rem);
+    font-weight: 700;
+    margin-bottom: 24px;
+    color: #ffffff;
+    line-height: 1.2;
+  }
+  
+  .dark .hero-heading {
+    color: #ffffff;
+  }
+  
+  .hero-subheading {
+    font-size: clamp(1rem, 3vw, 1.5rem);
+    color: #4b5563;
+    margin-bottom: 32px;
+  }
+  
+  .dark .hero-subheading {
+    color: #9ca3af;
+  }
+  
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    padding: 32px 16px;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+    margin-top: 48px;
+  }
+  
+  .dark .stats-grid {
+    border-top-color: #374151;
+    border-bottom-color: #374151;
+  }
+  
+  .stat-item {
+    text-align: center;
+  }
+  
+  .stat-number {
+    font-size: 2rem;
+    font-weight: 700;
+    color: rgb(20, 113, 76);
+  }
+  
+  .stat-label {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  .dark .stat-label {
+    color: #9ca3af;
+  }
+  
+  .features-section {
+    padding: 80px 20px;
+    background-color: #ffffff;
+  }
+  
+  .dark .features-section {
+    background-color: #111827;
+  }
+  
+  .section-title {
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 40px;
+    color: #111827;
+  }
+  
+  .dark .section-title {
+    color: #f3f4f6;
+  }
+  
+  .features-grid {
+    max-width: 72rem;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 24px;
+  }
+  
+  .feature-card {
+    background-color: white;
+    border: 2px solid #f3f4f6;
+    border-radius: 18px;
+    padding: 24px;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    text-align: left;
+  }
+  
+  .dark .feature-card {
+    background-color: #1f2937;
+    border-color: #374151;
+  }
+  
+  .feature-card:hover {
+    border-color: rgb(20, 113, 76);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    transform: translateY(-8px);
+  }
+  
+  .feature-icon-bg {
+    width: 48px;
+    height: 48px;
+    background-color: rgb(20, 113, 76);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+  
+  .feature-title {
+    font-weight: 700;
+    color: #111827;
+    margin-bottom: 8px;
+    font-size: 1.125rem;
+  }
+  
+  .dark .feature-title {
+    color: #f3f4f6;
+  }
+  
+  .feature-desc {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+  
+  .dark .feature-desc {
+    color: #9ca3af;
+  }
+  
+  .cta-section {
+    padding: 80px 20px;
+    background: #f3f4f6;
+    text-align: center;
+  }
+  
+  .dark .cta-section {
+    background: #111827;
+  }
+  
+  .cta-content {
+    max-width: 42rem;
+    margin: 0 auto;
+  }
+  
+  .cta-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 24px;
+    color: #111827;
+  }
+  
+  .dark .cta-title {
+    color: white;
+  }
+  
+  .cta-text {
+    font-size: 1.125rem;
+    color: #4b5563;
+    margin-bottom: 32px;
+  }
+  
+  .dark .cta-text {
+    color: #e0e7ff;
+  }
+  
+  .cta-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 32px;
+    background-color: white;
+    color: rgb(20 113 76 / var(--tw-bg-opacity, 1));
+    font-weight: 700;
+    border-radius: 12px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    text-decoration: none;
+  }
+  
+  .cta-button:hover {
+    background-color: #f0f9ff;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
+    transform: scale(1.05);
+  }
+  
+  @media (max-width: 640px) {
+    .stats-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+  
+  .bounce {
+    animation: bounce 2s infinite;
+  }
+  
+  .bounce:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  
+  .bounce:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+  
+  .search-widget-transparent {
+    background-color: rgba(255, 255, 255, 0.95) !important;
+    backdrop-filter: blur(10px);
+    border-color: rgba(255, 255, 255, 0.2) !important;
+  }
+  
+  .dark .search-widget-transparent {
+    background-color: rgba(31, 41, 55, 0.95) !important;
+    border-color: rgba(55, 65, 81, 0.2) !important;
+  }
+`;
+
+export default function Home() {
+  const [lang, setLang] = useState<Language>('en');
+  const { getLang } = useLanguage();
+  const t = (key: string) => getTranslation(lang, key);
+
+  useEffect(() => {
+    setLang(getLang());
+    const handleLanguageChange = (e: any) => setLang(e.detail);
+    window.addEventListener('languageChange', handleLanguageChange);
+    return () => window.removeEventListener('languageChange', handleLanguageChange);
+  }, [getLang]);
+
+  const { data: stations } = useQuery<Station[]>({
+    queryKey: ['stations'],
+    queryFn: async () => await apiClient.get('/stations') as Station[],
+  });
+
+  const getStationByName = (name: string) => {
+    if (!stations) return null;
+    const exactMatch = stations.find(s => s.name.toLowerCase() === name.toLowerCase());
+    if (exactMatch) return exactMatch;
+    return stations.find(s => s.name.toLowerCase().includes(name.toLowerCase()));
+  };
+
+  const handlePopularRoute = (fromName: string, toName: string) => {
+    const origin = getStationByName(fromName);
+    const destination = getStationByName(toName);
+    
+    if (origin && destination) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  const popularRoutes = [
+    { from: 'Sebeta', to: 'Nagad', duration: '12h' },
+    { from: 'Sebeta', to: 'Diredawa', duration: '8h' },
+    { from: 'Diredawa', to: 'Nagad', duration: '4h' },
+  ];
+
+  const features = [
+    {
+      icon: Heart,
+      title: t('home.comfortable'),
+      desc: t('home.comfortDesc'),
+    },
+    {
+      icon: Zap,
+      title: t('home.affordable'),
+      desc: t('home.affordableDesc'),
+    },
+    {
+      icon: Shield,
+      title: t('home.safe'),
+      desc: t('home.safeDesc'),
+    },
+    {
+      icon: Clock,
+      title: t('home.fast'),
+      desc: t('home.fastDesc'),
+    },
+  ];
+
+  const highlights = [
+    {
+      icon: Train,
+      title: 'Modern fleet',
+      desc: 'Comfortable trains with modern amenities',
+    },
+    {
+      icon: MapPin,
+      title: '21 stations',
+      desc: 'Connecting Ethiopia and Djibouti',
+    },
+    {
+      icon: Calendar,
+      title: 'Easy booking',
+      desc: 'Book tickets in just a few clicks',
+    },
+  ];
+
+  return (
+    <>
+      <style>{styles}</style>
+      <main>
+        {/* Hero Section */}
+        <section className="hero-section">
+          <div className="hero-content">
+            <h1 className="hero-heading">{t('home.hero')}</h1>
+            <p className="hero-subheading">{t('home.heroSub')}</p>
+
+            <SearchWidget />
+
+            {/* Highlights */}
+            <div className="grid md:grid-cols-3 gap-6 mt-12 max-w-6xl mx-auto">
+              {highlights.map((highlight, idx) => {
+                const Icon = highlight.icon;
+                return (
+                  <div key={idx} className="feature-card">
+                    <div className="feature-icon-bg">
+                      <Icon size={24} color="white" />
+                    </div>
+                    <h3 className="feature-title">{highlight.title}</h3>
+                    <p className="feature-desc">{highlight.desc}</p>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* Popular Routes Section */}
+        <section className="py-16 bg-gray-50 dark:bg-gray-900">
+          <div className="max-w-6xl mx-auto px-4">
+            <h2 className="section-title">Popular Routes</h2>
+            <div className="grid md:grid-cols-3 gap-4">
+              {popularRoutes.map((route, idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => handlePopularRoute(route.from, route.to)}
+                  className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-5 hover:border-primary hover:shadow-md transition-all text-left group"
+                >
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex-1">
+                      <div className="font-semibold text-gray-900 dark:text-gray-100 mb-1">{route.from}</div>
+                      <ArrowRight className="w-4 h-4 text-primary my-2" />
+                      <div className="font-semibold text-gray-900 dark:text-gray-100">{route.to}</div>
+                    </div>
+                    <Train className="w-5 h-5 text-primary opacity-0 group-hover:opacity-100 transition-opacity" />
+                  </div>
+                  <div className="text-sm text-gray-500 dark:text-gray-400">{route.duration} journey</div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Features Section */}
+        <section className="features-section">
+          <h2 className="section-title">{t('home.features')}</h2>
+          <div className="features-grid">
+            {features.map((feature, idx) => {
+              const Icon = feature.icon;
+              return (
+                <div key={idx} className="feature-card">
+                  <div className="feature-icon-bg">
+                    <Icon size={24} color="white" />
+                  </div>
+                  <h3 className="feature-title">{feature.title}</h3>
+                  <p className="feature-desc">{feature.desc}</p>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="cta-section">
+          <div className="cta-content">
+            <h2 className="cta-title">Ready to start your journey?</h2>
+            <p className="cta-text">Book your train tickets in just a few minutes and enjoy a comfortable ride.</p>
+            <Link href="/booking/search" className="cta-button">
+              {t('home.cta')}
+              <ArrowRight size={20} />
+            </Link>
+          </div>
+        </section>
+      </main>
+    </>
+  );
 }
diff --git a/apps/edr-passenger-web/portal/src/app/profile/page.tsx b/apps/edr-passenger-web/portal/src/app/profile/page.tsx
index fc2863d25..91daf1d16 100644
--- a/apps/edr-passenger-web/portal/src/app/profile/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/profile/page.tsx
@@ -65,9 +65,7 @@ export default function ProfilePage() {
     if (!isInitialized) return;
     
     if (isAuthenticated && user) {
-      // Fetch fresh profile data
       fetchProfile().catch(() => {
-        // If fetch fails, redirect to login
         router.push('/login?redirect=/profile');
       });
       
@@ -200,7 +198,6 @@ export default function ProfilePage() {
       message: 'Are you sure you want to sign out?',
       onConfirm: async () => {
         await logout();
-        // Navigation will be handled by logout function
       },
     });
     setShowModal(true);
@@ -245,7 +242,7 @@ export default function ProfilePage() {
   if (!isInitialized || !user) {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[rgb(20_113_76)]"></div>
       </div>
     );
   }
@@ -258,7 +255,7 @@ export default function ProfilePage() {
           <div className="card mb-6">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-4">
-                <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center">
+                <div className="w-16 h-16 bg-[rgb(20_113_76)] rounded-full flex items-center justify-center">
                   <User className="w-8 h-8 text-white" />
                 </div>
                 <div>
@@ -289,7 +286,7 @@ export default function ProfilePage() {
                 onClick={() => setActiveTab('bookings')}
                 className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
                   activeTab === 'bookings'
-                    ? 'bg-primary text-white'
+                    ? 'bg-[rgb(20_113_76)] text-white'
                     : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
                 }`}
               >
@@ -300,7 +297,7 @@ export default function ProfilePage() {
                 onClick={() => setActiveTab('profile')}
                 className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
                   activeTab === 'profile'
-                    ? 'bg-primary text-white'
+                    ? 'bg-[rgb(20_113_76)] text-white'
                     : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
                 }`}
               >
@@ -311,7 +308,7 @@ export default function ProfilePage() {
                 onClick={() => setActiveTab('settings')}
                 className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
                   activeTab === 'settings'
-                    ? 'bg-primary text-white'
+                    ? 'bg-[rgb(20_113_76)] text-white'
                     : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
                 }`}
               >
@@ -328,7 +325,7 @@ export default function ProfilePage() {
               
               {loadingBookings ? (
                 <div className="card text-center py-12">
-                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+                  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[rgb(20_113_76)] mx-auto"></div>
                   <p className="text-gray-600 dark:text-gray-400 mt-4">Loading bookings...</p>
                 </div>
               ) : bookings && Array.isArray(bookings) && bookings.length > 0 ? (
@@ -482,7 +479,7 @@ export default function ProfilePage() {
                         onChange={(e) => setSettings({ ...settings, notifications: e.target.checked })}
                         className="sr-only peer"
                       />
-                      <div className="w-12 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer peer-checked:bg-primary transition-colors"></div>
+                      <div className="w-12 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer peer-checked:bg-[rgb(20_113_76)] transition-colors"></div>
                       <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div>
                     </div>
                   </label>
@@ -495,7 +492,7 @@ export default function ProfilePage() {
                         onChange={(e) => setSettings({ ...settings, emailNotifications: e.target.checked })}
                         className="sr-only peer"
                       />
-                      <div className="w-12 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer peer-checked:bg-primary transition-colors"></div>
+                      <div className="w-12 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer peer-checked:bg-[rgb(20_113_76)] transition-colors"></div>
                       <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div>
                     </div>
                   </label>
@@ -508,7 +505,7 @@ export default function ProfilePage() {
                         onChange={(e) => setSettings({ ...settings, smsNotifications: e.target.checked })}
                         className="sr-only peer"
                       />
-                      <div className="w-12 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer peer-checked:bg-primary transition-colors"></div>
+                      <div className="w-12 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer peer-checked:bg-[rgb(20_113_76)] transition-colors"></div>
                       <div className="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform peer-checked:translate-x-6"></div>
                     </div>
                   </label>
diff --git a/apps/edr-passenger-web/portal/src/app/services/page.tsx b/apps/edr-passenger-web/portal/src/app/services/page.tsx
new file mode 100644
index 000000000..85a34ed75
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/app/services/page.tsx
@@ -0,0 +1,309 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getTranslation, Language, useLanguage } from '@/lib/i18n';
+import Link from 'next/link';
+import { BookOpen, CreditCard, Headphones, Star, MapPin, Radio, ArrowRight } from 'lucide-react';
+
+const styles = `
+  .service-hero {
+    padding: 60px 20px;
+    background: linear-gradient(to bottom right, rgb(20, 113, 76), transparent);
+    text-align: center;
+    color: #111827;
+  }
+  
+  .dark .service-hero {
+    color: #f3f4f6;
+  }
+  
+  .service-hero h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+    color: #111827;
+  }
+  
+  .dark .service-hero h1 {
+    color: #f3f4f6;
+  }
+  
+  .service-hero p {
+    font-size: 1.125rem;
+    color: #6b7280;
+    max-width: 48rem;
+    margin: 0 auto;
+  }
+  
+  .dark .service-hero p {
+    color: #9ca3af;
+  }
+  
+  .service-grid {
+    max-width: 80rem;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 24px;
+    padding: 60px 20px;
+    background-color: white;
+  }
+  
+  .dark .service-grid {
+    background-color: #111827;
+  }
+  
+  .service-card {
+    background: white;
+    border: 2px solid #f3f4f6;
+    border-radius: 18px;
+    padding: 24px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .dark .service-card {
+    background: #1f2937;
+    border-color: #374151;
+  }
+  
+  .service-card:hover {
+    border-color: rgb(20, 113, 76);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+  }
+  
+  .service-icon {
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    margin-bottom: 16px;
+  }
+  
+  .service-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: #111827;
+  }
+  
+  .dark .service-card h3 {
+    color: #f3f4f6;
+  }
+  
+  .service-card p {
+    font-size: 0.875rem;
+    color: #6b7280;
+    margin-bottom: 16px;
+  }
+  
+  .dark .service-card p {
+    color: #9ca3af;
+  }
+  
+  .service-card a {
+    color: rgb(20, 113, 76);
+    font-weight: 600;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .service-card a:hover {
+    text-decoration: underline;
+  }
+  
+  .info-section {
+    padding: 60px 20px;
+    background-color: #f9fafb;
+  }
+  
+  .dark .info-section {
+    background-color: #0f1117;
+  }
+  
+  .info-grid {
+    max-width: 80rem;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 32px;
+  }
+  
+  .info-box {
+    background: white;
+    border-radius: 18px;
+    padding: 32px;
+    border: 1px solid #e5e7eb;
+  }
+  
+  .dark .info-box {
+    background: #1f2937;
+    border-color: #374151;
+  }
+  
+  .info-box h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+    color: #111827;
+  }
+  
+  .dark .info-box h3 {
+    color: #f3f4f6;
+  }
+  
+  .info-box p {
+    color: #6b7280;
+    margin-bottom: 16px;
+  }
+  
+  .dark .info-box p {
+    color: #9ca3af;
+  }
+  
+  .info-box ul {
+    list-style: none;
+    padding: 0;
+  }
+  
+  .info-box li {
+    font-size: 0.875rem;
+    color: #6b7280;
+    padding: 8px 0;
+  }
+  
+  .dark .info-box li {
+    color: #9ca3af;
+  }
+  
+  .cta-bg {
+    background-color: rgb(20, 113, 76);
+    color: white;
+    padding: 60px 20px;
+    text-align: center;
+  }
+  
+  .cta-bg h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  
+  .cta-bg p {
+    font-size: 1.125rem;
+    margin-bottom: 32px;
+    max-width: 42rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .button-white {
+    display: inline-block;
+    padding: 16px 32px;
+    background-color: white;
+    color: rgb(20, 113, 76);
+    font-weight: 700;
+    border-radius: 12px;
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+  
+  .button-white:hover {
+    transform: scale(1.05);
+  }
+  
+  @media (max-width: 768px) {
+    .info-grid {
+      grid-template-columns: 1fr;
+    }
+    
+    .service-hero h1 {
+      font-size: 1.875rem;
+    }
+  }
+`;
+
+export default function Services() {
+  const [lang, setLang] = useState<Language>('en');
+  const { getLang } = useLanguage();
+  const t = (key: string) => getTranslation(lang, key);
+
+  useEffect(() => {
+    setLang(getLang());
+    const handleLanguageChange = (e: any) => setLang(e.detail);
+    window.addEventListener('languageChange', handleLanguageChange);
+    return () => window.removeEventListener('languageChange', handleLanguageChange);
+  }, [getLang]);
+
+  const services = [
+    { icon: BookOpen, title: t('services.booking'), desc: t('services.bookingDesc'), color: '#3b82f6' },
+    { icon: MapPin, title: t('services.seats'), desc: t('services.seatsDesc'), color: '#10b981' },
+    { icon: CreditCard, title: t('services.payment'), desc: t('services.paymentDesc'), color: '#a855f7' },
+    { icon: Headphones, title: t('services.support'), desc: t('services.supportDesc'), color: '#f97316' },
+    { icon: Star, title: t('services.loyalty'), desc: t('services.loyaltyDesc'), color: '#ec4899' },
+    { icon: Radio, title: t('services.tracking'), desc: t('services.trackingDesc'), color: '#ef4444' },
+  ];
+
+  return (
+    <>
+      <style>{styles}</style>
+      <main>
+        <section className="service-hero">
+          <h1>{t('services.title')}</h1>
+          <p>{t('services.subtitle')}</p>
+        </section>
+
+        <div className="service-grid">
+          {services.map((service, idx) => {
+            const Icon = service.icon;
+            return (
+              <div key={idx} className="service-card">
+                <div className="service-icon" style={{ background: `${service.color}20` }}>
+                  <Icon size={28} color={service.color} />
+                </div>
+                <h3>{service.title}</h3>
+                <p>{service.desc}</p>
+                <Link href="/booking/search">
+                  Learn More <ArrowRight size={16} />
+                </Link>
+              </div>
+            );
+          })}
+        </div>
+
+        <section className="info-section">
+          <div className="info-grid">
+            <div className="info-box">
+              <h3>Multi-Currency Support</h3>
+              <p>Book in multiple currencies with real-time exchange rates.</p>
+              <ul>
+                <li>✓ ETB (Ethiopian Birr)</li>
+                <li>✓ DJF (Djiboutian Franc)</li>
+                <li>✓ USD (US Dollar)</li>
+              </ul>
+            </div>
+            <div className="info-box">
+              <h3>Age-Based Pricing</h3>
+              <p>Smart pricing for families with special rates for children.</p>
+              <ul>
+                <li>✓ Adults (≥5 years): Full fare</li>
+                <li>✓ Children (&lt;5 years): First free</li>
+                <li>✓ Automatic age calculation</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        <section className="cta-bg">
+          <h2>Experience the Difference</h2>
+          <p>Start booking your train journey today and discover our premium services.</p>
+          <Link href="/booking/search" className="button-white">Book Your Trip Now</Link>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/components/AppHeader.tsx b/apps/edr-passenger-web/portal/src/components/AppHeader.tsx
index 48b4042e7..ac9abf822 100644
--- a/apps/edr-passenger-web/portal/src/components/AppHeader.tsx
+++ b/apps/edr-passenger-web/portal/src/components/AppHeader.tsx
@@ -1,69 +1,172 @@
 'use client';
 
-import { Train, User, BookOpen, LogIn } from 'lucide-react';
-import ThemeToggle from './ThemeToggle';
+import { Train, Menu, X, Moon, Sun, HelpCircle } from 'lucide-react';
 import Link from 'next/link';
-import { useAuthStore } from '@/lib/auth-store';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { LanguageSwitcher } from './LanguageSwitcher';
 
 export default function AppHeader() {
-  const { user, isAuthenticated, initialize } = useAuthStore();
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isDark, setIsDark] = useState(false);
 
   useEffect(() => {
-    initialize();
-  }, [initialize]);
-  return (
-    <header className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm">
-      <div className="container mx-auto px-4">
-        <div className="max-w-5xl mx-auto">
-          <div className="flex items-center justify-between h-16">
-          {/* Logo and Brand */}
-          <Link href="/booking/search" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
-            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
-              <Train className="w-6 h-6 text-white" />
-            </div>
-            <div>
-              <h1 className="text-lg font-bold text-gray-900 dark:text-gray-100">
-                Ethio-Djibouti Railway
-              </h1>
-              <p className="text-xs text-gray-600 dark:text-gray-400">
-                Book train tickets across East Africa
-              </p>
-            </div>
-          </Link>
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    setIsDark(isDarkMode);
+  }, []);
 
-          {/* Right side actions */}
-          <div className="flex items-center gap-2">
-            {!isAuthenticated ? (
-              <Link
-                href="/login"
-                className="p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
-                title="Sign in"
-              >
-                <LogIn className="w-5 h-5" />
-              </Link>
-            ) : (
-              <Link
-                href="/profile"
-                className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
-                title="Profile"
-              >
-                <User className="w-4 h-4 text-gray-600 dark:text-gray-400" />
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
-                  {user?.fullName}
-                </span>
-              </Link>
-            )}            
-            <ThemeToggle />
-            <Link
-              href="/guide"
-              className="p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
-              title="How to Book"
+  const toggleTheme = () => {
+    const html = document.documentElement;
+    const isDarkMode = html.classList.contains('dark');
+    if (isDarkMode) {
+      html.classList.remove('dark');
+      setIsDark(false);
+      localStorage.setItem('theme', 'light');
+    } else {
+      html.classList.add('dark');
+      setIsDark(true);
+      localStorage.setItem('theme', 'dark');
+    }
+  };
+
+  const isLandingPage = ['/', '/services', '/about', '/contact', '/help'].includes(pathname);
+  
+  return (
+    <header className="sticky top-0 z-50 bg-[rgb(20_113_76)] dark:bg-gray-900 border-b border-[rgb(16_89_60)] dark:border-gray-800 shadow-sm">
+      <div className="container mx-auto px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center justify-between h-16">
+            {/* Logo */}
+            <Link 
+              href="/" 
+              className="flex items-center gap-3 hover:opacity-80 transition-opacity"
             >
-              <BookOpen className="w-5 h-5" />
+              <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
+                <Train className="w-6 h-6 text-[rgb(20_113_76)]" />
+              </div>
+              <div>
+                <h1 className="text-lg font-bold text-white">
+                  Ethio-Djibouti Railway
+                </h1>
+                <p className="text-xs text-gray-100">
+                  Book your train journey with us
+                </p>
+              </div>
             </Link>
+
+            {/* Desktop Menu - only show for landing pages */}
+            {isLandingPage && (
+              <div className="hidden md:flex items-center gap-8">
+                <Link
+                  href="/"
+                  className="text-sm font-medium text-gray-100 hover:text-white transition-colors"
+                >
+                  Home
+                </Link>
+                <Link
+                  href="/services"
+                  className="text-sm font-medium text-gray-100 hover:text-white transition-colors"
+                >
+                  Services
+                </Link>
+                <Link
+                  href="/about"
+                  className="text-sm font-medium text-gray-100 hover:text-white transition-colors"
+                >
+                  About
+                </Link>
+                <Link
+                  href="/contact"
+                  className="text-sm font-medium text-gray-100 hover:text-white transition-colors"
+                >
+                  Contact
+                </Link>
+              </div>
+            )}
+
+            {/* Right Actions */}
+            <div className="flex items-center gap-2">
+              {/* Help Link */}
+              <Link
+                href="/help"
+                className="hidden sm:flex items-center justify-center p-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg transition-colors"
+                title="Help & FAQ"
+              >
+                <HelpCircle className="w-5 h-5" />
+              </Link>
+
+              {/* Language Switcher */}
+              <LanguageSwitcher />
+
+              {/* Theme Toggler */}
+              <button
+                onClick={toggleTheme}
+                className="p-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg transition-colors"
+                title={isDark ? 'Light mode' : 'Dark mode'}
+              >
+                {isDark ? (
+                  <Sun className="w-5 h-5" />
+                ) : (
+                  <Moon className="w-5 h-5" />
+                )}
+              </button>
+
+              {/* Mobile Menu Button */}
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="md:hidden p-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg"
+              >
+                {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+              </button>
+            </div>
           </div>
-          </div>
+
+          {/* Mobile Menu */}
+          {isOpen && (
+            <div className="md:hidden border-t border-white border-opacity-20 dark:border-gray-700 py-4 space-y-2 animate-in slide-in-from-top-2 duration-200">
+              {isLandingPage && (
+                <>
+                  <Link
+                    href="/"
+                    className="block px-4 py-2 text-gray-100 dark:text-gray-300 hover:bg-white hover:bg-opacity-10 dark:hover:bg-gray-800 rounded-lg transition-colors"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Home
+                  </Link>
+                  <Link
+                    href="/services"
+                    className="block px-4 py-2 text-gray-100 dark:text-gray-300 hover:bg-white hover:bg-opacity-10 dark:hover:bg-gray-800 rounded-lg transition-colors"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Services
+                  </Link>
+                  <Link
+                    href="/about"
+                    className="block px-4 py-2 text-gray-100 dark:text-gray-300 hover:bg-white hover:bg-opacity-10 dark:hover:bg-gray-800 rounded-lg transition-colors"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    About
+                  </Link>
+                  <Link
+                    href="/contact"
+                    className="block px-4 py-2 text-gray-100 dark:text-gray-300 hover:bg-white hover:bg-opacity-10 dark:hover:bg-gray-800 rounded-lg transition-colors"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Contact
+                  </Link>
+                </>
+              )}
+              
+              <Link
+                href="/help"
+                className="block px-4 py-2 text-gray-100 dark:text-gray-300 hover:bg-white hover:bg-opacity-10 dark:hover:bg-gray-800 rounded-lg transition-colors"
+                onClick={() => setIsOpen(false)}
+              >
+                Help
+              </Link>
+            </div>
+          )}
         </div>
       </div>
     </header>
diff --git a/apps/edr-passenger-web/portal/src/components/Footer.tsx b/apps/edr-passenger-web/portal/src/components/Footer.tsx
new file mode 100644
index 000000000..00784682f
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/components/Footer.tsx
@@ -0,0 +1,165 @@
+'use client';
+
+import { Facebook, Twitter, Instagram, Linkedin, Mail, Phone, MapPin } from 'lucide-react';
+import Link from 'next/link';
+import { useLanguage, getTranslation, Language } from '@/lib/i18n';
+import { useEffect, useState } from 'react';
+
+export function Footer() {
+  const { getLang } = useLanguage();
+  const [lang, setLang] = useState<Language>('en');
+  const t = (key: string) => getTranslation(lang, key);
+
+  useEffect(() => {
+    setLang(getLang());
+    const handleLanguageChange = (e: any) => setLang(e.detail);
+    window.addEventListener('languageChange', handleLanguageChange);
+    return () => window.removeEventListener('languageChange', handleLanguageChange);
+  }, [getLang]);
+
+  return (
+    <footer className="bg-[rgb(20_113_76)] dark:bg-gray-900 text-white py-12">
+      <div className="container mx-auto px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+            {/* Company Info */}
+            <div>
+              <h4 className="font-semibold mb-2">
+                Ethio-Djibouti Railway
+              </h4>
+              <p className="text-sm text-gray-100 my-3">Connecting East Africa with train travel.
+              </p>
+              <div className="space-y-2 text-sm">
+                <div className="flex items-center gap-2 text-gray-100">
+                  <Phone className="w-4 h-4" />
+                  <a href="tel:9546" className="hover:text-gray-200 transition">
+                    9546
+                  </a>
+                </div>
+                <div className="flex items-center gap-2 text-gray-100">
+                  <Mail className="w-4 h-4" />
+                  <a href="mailto:edr_@edrsc.com" className="hover:text-gray-200 transition">
+                    edr_@edrsc.com
+                  </a>
+                </div>
+                <div className="flex items-center gap-2 text-gray-100">
+                  <MapPin className="w-4 h-4" />
+                  <span>Furi, Sheger City</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Links */}
+            <div>
+              <h4 className="font-semibold mb-4">{t('nav.home')}</h4>
+              <ul className="space-y-2 text-sm text-gray-100">
+                <li>
+                  <Link href="/" className="hover:text-gray-200 transition">
+                    {t('nav.home')}
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/services" className="hover:text-gray-200 transition">
+                    {t('nav.services')}
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/about" className="hover:text-gray-200 transition">
+                    {t('nav.about')}
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/contact" className="hover:text-gray-200 transition">
+                    {t('nav.contact')}
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            {/* Support */}
+            <div>
+              <h4 className="font-semibold mb-4">{t('footer.support')}</h4>
+              <ul className="space-y-2 text-sm text-gray-100">
+                <li>
+                  <Link href="/help" className="hover:text-gray-200 transition">
+                    {t('nav.help')}
+                  </Link>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-gray-200 transition">
+                    {t('footer.privacy')}
+                  </a>
+                </li>
+                <li>
+                  <a href="#" className="hover:text-gray-200 transition">
+                    {t('footer.terms')}
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            {/* Social Media */}
+            <div>
+              <h4 className="font-semibold mb-4">{t('footer.follow')}</h4>
+              <div className="flex gap-3">
+                <a
+                  href="https://web.facebook.com/ethiodjiboutirailwaysc"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110"
+                  aria-label="Facebook"
+                >
+                  <Facebook className="w-5 h-5" />
+                </a>
+                <a
+                  href="https://twitter.com/edr"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110"
+                  aria-label="Twitter"
+                >
+                  <Twitter className="w-5 h-5" />
+                </a>
+                <a
+                  href="https://instagram.com/edr"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110"
+                  aria-label="Instagram"
+                >
+                  <Instagram className="w-5 h-5" />
+                </a>
+                <a
+                  href="https://linkedin.com/company/edr"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110"
+                  aria-label="LinkedIn"
+                >
+                  <Linkedin className="w-5 h-5" />
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div className="border-t border-white border-opacity-20 dark:border-gray-700 pt-8">
+            <div className="flex flex-col md:flex-row justify-between items-center text-sm text-gray-100">
+              <p>
+                &copy; 2024 Ethio-Djibouti Railway. {t('footer.rights')}
+              </p>
+              <div className="flex gap-6 mt-4 md:mt-0">
+                <a href="#" className="hover:text-gray-200 transition">
+                  {t('footer.privacy')}
+                </a>
+                <a href="#" className="hover:text-gray-200 transition">
+                  {t('footer.terms')}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/components/LandingNav.tsx b/apps/edr-passenger-web/portal/src/components/LandingNav.tsx
new file mode 100644
index 000000000..76d5fabb9
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/components/LandingNav.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import { Train, Menu, X, Moon, Sun, HelpCircle } from 'lucide-react';
+import Link from 'next/link';
+import { useState, useEffect } from 'react';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { getTranslation, Language } from '@/lib/i18n';
+import { useLanguage } from '@/lib/i18n';
+
+export function LandingNav() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [lang, setLang] = useState<Language>('en');
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const { getLang } = useLanguage();
+  const t = (key: string) => getTranslation(lang, key);
+
+  useEffect(() => {
+    setMounted(true);
+    setLang(getLang());
+    const handleLanguageChange = (e: any) => setLang(e.detail);
+    window.addEventListener('languageChange', handleLanguageChange);
+    return () => window.removeEventListener('languageChange', handleLanguageChange);
+  }, [getLang]);
+
+  useEffect(() => {
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    setIsDark(isDarkMode);
+  }, []);
+
+  const toggleTheme = () => {
+    const html = document.documentElement;
+    const isDarkMode = html.classList.contains('dark');
+    if (isDarkMode) {
+      html.classList.remove('dark');
+      setIsDark(false);
+      localStorage.setItem('theme', 'light');
+    } else {
+      html.classList.add('dark');
+      setIsDark(true);
+      localStorage.setItem('theme', 'dark');
+    }
+  };
+
+  const menuItems = [
+    { label: t('nav.home'), href: '/' },
+    { label: t('nav.services'), href: '/services' },
+    { label: t('nav.about'), href: '/about' },
+    { label: t('nav.contact'), href: '/contact' },
+  ];
+
+  if (!mounted) return null;
+
+  return (
+    <nav className="sticky top-0 z-40 bg-[rgb(20_113_76)] border-b border-[rgb(16_89_60)] shadow-sm">
+      <div className="container mx-auto px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center justify-between h-16">
+            {/* Logo */}
+            <Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
+              <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
+                <Train className="w-6 h-6 text-[rgb(20_113_76)]" />
+              </div>
+              <div>
+                <h1 className="text-lg font-bold text-white">
+                  Ethio-Djibouti Railway
+                </h1>
+                <p className="text-xs text-gray-100">
+                  Book your train journey with us
+                </p>
+              </div>
+            </Link>
+
+            {/* Desktop Menu */}
+            <div className="hidden md:flex items-center gap-8">
+              {menuItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="text-sm font-medium text-gray-100 hover:text-white transition-colors"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+
+            {/* Right Actions */}
+            <div className="flex items-center gap-3">
+              <LanguageSwitcher />
+              
+              {/* Help Link */}
+              <Link
+                href="/help"
+                className="hidden sm:flex items-center gap-1.5 px-3 py-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg transition-colors"
+                title="Help & FAQ"
+              >
+                <HelpCircle className="w-5 h-5" />
+              </Link>
+
+              {/* Theme Toggler */}
+              <button
+                onClick={toggleTheme}
+                className="p-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg transition-colors"
+                title={isDark ? 'Light mode' : 'Dark mode'}
+              >
+                {isDark ? (
+                  <Sun className="w-5 h-5" />
+                ) : (
+                  <Moon className="w-5 h-5" />
+                )}
+              </button>
+
+              <Link
+                href="/booking/search"
+                className="hidden sm:block px-4 py-2 bg-white text-[rgb(20_113_76)] text-sm font-medium rounded-lg transition-all duration-200 transform hover:scale-105 hover:bg-gray-100"
+              >
+                {t('nav.bookNow')}
+              </Link>
+
+              {/* Mobile Menu Button */}
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="md:hidden p-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg"
+              >
+                {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+              </button>
+            </div>
+          </div>
+
+          {/* Mobile Menu */}
+          {isOpen && (
+            <div className="md:hidden border-t border-white border-opacity-20 py-4 space-y-2 animate-in slide-in-from-top-2 duration-200">
+              {menuItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="block px-4 py-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg transition-colors"
+                  onClick={() => setIsOpen(false)}
+                >
+                  {item.label}
+                </Link>
+              ))}
+              <Link
+                href="/help"
+                className="block px-4 py-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg transition-colors"
+                onClick={() => setIsOpen(false)}
+              >
+                {t('nav.help')}
+              </Link>
+              <Link
+                href="/booking/search"
+                className="block px-4 py-2 bg-white text-[rgb(20_113_76)] font-medium rounded-lg transition-colors hover:bg-gray-100"
+                onClick={() => setIsOpen(false)}
+              >
+                {t('nav.bookNow')}
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/components/LanguageSwitcher.tsx b/apps/edr-passenger-web/portal/src/components/LanguageSwitcher.tsx
new file mode 100644
index 000000000..c841e39ba
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/components/LanguageSwitcher.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useLanguage, Language } from '@/lib/i18n';
+import { Globe } from 'lucide-react';
+
+const languages: { code: Language; label: string }[] = [
+  { code: 'en', label: 'English' },
+  { code: 'am', label: 'አማርኛ' },
+  { code: 'om', label: 'Afan Oromo' },
+  { code: 'fr', label: 'Français' },
+];
+
+export function LanguageSwitcher() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentLang, setCurrentLang] = useState<Language>('en');
+  const { getLang, setLang } = useLanguage();
+
+  useEffect(() => {
+    setCurrentLang(getLang());
+  }, [getLang]);
+
+  const handleLanguageChange = (lang: Language) => {
+    setLang(lang);
+    setCurrentLang(lang);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="p-2 text-gray-100 hover:bg-white hover:bg-opacity-10 rounded-lg transition-colors"
+        title="Change language"
+        aria-label="Change language"
+      >
+        <Globe className="w-5 h-5" />
+      </button>
+
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-30"
+            onClick={() => setIsOpen(false)}
+          />
+          <div className="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-40 animate-in fade-in zoom-in-95 duration-200">
+            {languages.map((lang) => (
+              <button
+                key={lang.code}
+                onClick={() => handleLanguageChange(lang.code)}
+                className={`w-full text-left px-4 py-2.5 transition-all duration-200 ${
+                  currentLang === lang.code
+                    ? 'bg-primary text-white font-medium'
+                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                }`}
+              >
+                {lang.label}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/components/LoadingIndicator.tsx b/apps/edr-passenger-web/portal/src/components/LoadingIndicator.tsx
new file mode 100644
index 000000000..9fa5c466e
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/components/LoadingIndicator.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function LoadingIndicator() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleStart = () => setIsVisible(true);
+    const handleEnd = () => setIsVisible(false);
+
+    window.addEventListener('beforeunload', handleStart);
+    window.addEventListener('load', handleEnd);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleStart);
+      window.removeEventListener('load', handleEnd);
+    };
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-[9999]">
+      <div className="h-1 bg-gradient-to-r from-primary via-primary/70 to-primary animate-pulse">
+        <div className="h-full bg-gradient-to-r from-primary to-primary/50 animate-[shimmer_2s_infinite]" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx b/apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx
index 21bce57be..a9a1f4253 100644
--- a/apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx
+++ b/apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx
@@ -27,7 +27,7 @@ export function ProgressIndicator({ currentStep }: ProgressIndicatorProps) {
 
   return (
     <nav aria-label="Progress" className="py-6">
-      <ol className="flex items-center max-w-4xl mx-auto">
+      <ol className="flex items-center max-w-6xl mx-auto">
         {steps.map((step, index) => {
           const isComplete = index < currentIndex;
           const isCurrent = index === currentIndex;
diff --git a/apps/edr-passenger-web/portal/src/components/SearchWidget.tsx b/apps/edr-passenger-web/portal/src/components/SearchWidget.tsx
new file mode 100644
index 000000000..5967fe331
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/components/SearchWidget.tsx
@@ -0,0 +1,279 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useRouter } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api-client';
+import { useBookingStore } from '@/lib/booking-store';
+import { Station } from '@/types';
+import { MapPin, Users, Search, Plus, Minus, ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+import ModernDatePicker from '@/components/ModernDatePicker';
+
+const searchSchema = z.object({
+  originStationId: z.string().min(1),
+  destinationStationId: z.string().min(1),
+  departureDate: z.string().min(1),
+  adultCount: z.number().min(1).max(9),
+  childCount: z.number().min(0).max(9),
+  nationality: z.enum(['ETHIOPIAN', 'DJIBOUTIAN', 'OTHER']),
+}).refine((data) => data.originStationId !== data.destinationStationId, {
+  message: 'Origin and destination must be different',
+  path: ['destinationStationId'],
+});
+
+type SearchForm = z.infer<typeof searchSchema>;
+
+interface SearchWidgetProps {
+  fullWidth?: boolean;
+  onSearch?: () => void;
+}
+
+export function SearchWidget({ fullWidth = false, onSearch }: SearchWidgetProps) {
+  const router = useRouter();
+  const setSearchCriteria = useBookingStore((s) => s.setSearchCriteria);
+  const [isPassengerOpen, setIsPassengerOpen] = useState(false);
+
+  const { data: stations, isLoading } = useQuery<Station[]>({
+    queryKey: ['stations'],
+    queryFn: async () => await apiClient.get('/stations') as Station[],
+  });
+
+  const { register, handleSubmit, watch, setValue, formState: { errors } } = useForm<SearchForm>({
+    resolver: zodResolver(searchSchema),
+    defaultValues: {
+      adultCount: 1,
+      childCount: 0,
+      nationality: 'ETHIOPIAN',
+      departureDate: new Date().toISOString().split('T')[0],
+    },
+  });
+
+  const originId = watch('originStationId');
+  const adultCount = watch('adultCount');
+  const childCount = watch('childCount');
+
+  const onSubmit = (data: SearchForm) => {
+    setSearchCriteria({
+      ...data,
+      adultCount: data.adultCount,
+      childCount: data.childCount,
+      nationality: data.nationality,
+    });
+    const params = new URLSearchParams({
+      origin: data.originStationId,
+      destination: data.destinationStationId,
+      date: data.departureDate,
+      adults: data.adultCount.toString(),
+      children: data.childCount.toString(),
+      nationality: data.nationality,
+    });
+    if (onSearch) onSearch();
+    router.push(`/booking/results?${params}`);
+  };
+
+  return (
+    <div className={fullWidth ? 'w-full' : 'w-full max-w-6xl mx-auto'}>
+      <form onSubmit={handleSubmit(onSubmit)} className="bg-white/95 dark:bg-gray-800/95 rounded-2xl shadow-lg border border-gray-200/20 dark:border-gray-700/20 overflow-visible backdrop-blur-sm">
+        <div className="p-6 md:p-8 overflow-visible">
+          {/* Row 1: From, To, Date */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end mb-4">
+            {/* From */}
+            <div className="space-y-2 md:col-span-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">From</label>
+              <div className="relative">
+                <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-primary" />
+                <select
+                  {...register('originStationId')}
+                  className="w-full pl-11 pr-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  disabled={isLoading}
+                >
+                  <option value="">Select departure</option>
+                  {stations?.map((s) => (
+                    <option key={s.id} value={s.id}>{s.name}</option>
+                  ))}
+                </select>
+              </div>
+              {errors.originStationId && (
+                <p className="text-red-600 dark:text-red-400 text-sm">{errors.originStationId.message}</p>
+              )}
+            </div>
+
+            {/* To */}
+            <div className="space-y-2 md:col-span-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">To</label>
+              <div className="relative">
+                <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-primary" />
+                <select
+                  {...register('destinationStationId')}
+                  className="w-full pl-11 pr-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  disabled={isLoading}
+                >
+                  <option value="">Select arrival</option>
+                  {stations?.map((s) => (
+                    <option key={s.id} value={s.id} disabled={s.id === originId}>{s.name}</option>
+                  ))}
+                </select>
+              </div>
+              {errors.destinationStationId && (
+                <p className="text-red-600 dark:text-red-400 text-sm">{errors.destinationStationId.message}</p>
+              )}
+            </div>
+
+            {/* Date */}
+            <div className="space-y-2 relative z-30 md:col-span-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Date</label>
+              <ModernDatePicker
+                value={watch('departureDate') ? new Date(watch('departureDate') + 'T00:00:00') : undefined}
+                onChange={(date) => {
+                  const year = date.getFullYear();
+                  const month = String(date.getMonth() + 1).padStart(2, '0');
+                  const day = String(date.getDate()).padStart(2, '0');
+                  setValue('departureDate', `${year}-${month}-${day}`);
+                }}
+                minDate={new Date()}
+                placeholder="Select date"
+              />
+              {errors.departureDate && (
+                <p className="text-red-600 dark:text-red-400 text-sm">{errors.departureDate.message}</p>
+              )}
+            </div>
+          </div>
+
+          {/* Row 2: Passengers, Nationality, Promo Code */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end mb-4">
+            {/* Passengers Dropdown */}
+            <div className="space-y-2 relative z-20">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Passengers</label>
+              <button
+                type="button"
+                onClick={() => setIsPassengerOpen(!isPassengerOpen)}
+                className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 flex items-center justify-between hover:border-primary transition-colors"
+              >
+                <span className="flex items-center gap-2">
+                  <Users className="w-4 h-4 text-primary" />
+                  {(adultCount || 1) + (childCount || 0)} Passenger{((adultCount || 1) + (childCount || 0)) !== 1 ? 's' : ''}
+                </span>
+                <ChevronDown className={`w-4 h-4 transition-transform text-primary ${isPassengerOpen ? 'rotate-180' : ''}`} />
+              </button>
+
+              {/* Passenger Dropdown Menu */}
+              {isPassengerOpen && (
+                <>
+                  <div className="fixed inset-0 z-40" onClick={() => setIsPassengerOpen(false)} />
+                  <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg z-50 p-4 space-y-4">
+                    {/* Adults */}
+                    <div>
+                      <div className="flex items-center justify-between mb-2">
+                        <div>
+                          <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Adults</div>
+                          <div className="text-xs text-gray-500 dark:text-gray-400">≥5 years</div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const current = adultCount || 1;
+                              if (current > 1) setValue('adultCount', current - 1);
+                            }}
+                            className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+                            disabled={(adultCount || 1) <= 1}
+                          >
+                            <Minus className="w-4 h-4 text-primary" />
+                          </button>
+                          <span className="w-6 text-center font-semibold text-gray-900 dark:text-gray-100">{adultCount || 1}</span>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const current = adultCount || 1;
+                              if (current < 9) setValue('adultCount', current + 1);
+                            }}
+                            className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+                            disabled={(adultCount || 1) >= 9}
+                          >
+                            <Plus className="w-4 h-4 text-primary" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Children */}
+                    <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Children</div>
+                          <div className="text-xs text-gray-500 dark:text-gray-400">&lt;5 years • First free</div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const current = childCount || 0;
+                              if (current > 0) setValue('childCount', current - 1);
+                            }}
+                            className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+                            disabled={(childCount || 0) <= 0}
+                          >
+                            <Minus className="w-4 h-4 text-primary" />
+                          </button>
+                          <span className="w-6 text-center font-semibold text-gray-900 dark:text-gray-100">{childCount || 0}</span>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const current = childCount || 0;
+                              if (current < 9) setValue('childCount', current + 1);
+                            }}
+                            className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+                            disabled={(childCount || 0) >= 9}
+                          >
+                            <Plus className="w-4 h-4 text-primary" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Nationality */}
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Nationality</label>
+              <select
+                {...register('nationality')}
+                className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+              >
+                <option value="ETHIOPIAN">Ethiopian</option>
+                <option value="DJIBOUTIAN">Djiboutian</option>
+                <option value="OTHER">Other</option>
+              </select>
+            </div>
+
+            {/* Promo Code */}
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Promo Code (Optional)</label>
+              <input
+                type="text"
+                placeholder="Enter promo code"
+                className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
+              />
+            </div>
+          </div>
+
+          {/* Row 3: Search Button */}
+          <div>
+            <button
+              type="submit"
+              className="w-full bg-primary hover:bg-primary/90 text-white font-semibold py-3.5 px-6 rounded-lg transition-all duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-xl"
+            >
+              <Search className="w-5 h-5 text-white" />
+              <span>Search Train</span>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/lib/i18n.ts b/apps/edr-passenger-web/portal/src/lib/i18n.ts
new file mode 100644
index 000000000..c13a4a66f
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/lib/i18n.ts
@@ -0,0 +1,419 @@
+export type Language = 'en' | 'am' | 'om' | 'fr';
+
+const translations = {
+  en: {
+    nav: {
+      home: 'Home',
+      services: 'Services',
+      about: 'About',
+      contact: 'Contact',
+      help: 'Help',
+      bookNow: 'Book now',
+    },
+    home: {
+      hero: 'Travel across the East Africa',
+      heroSub: 'Experience seamless train travel from Ethiopia to Djibouti',
+      cta: 'Start booking',
+      searchNow: 'Search trips',
+      features: 'Why choose EDR?',
+      comfortable: 'Comfortable journey',
+      comfortDesc: 'Modern coaches with seating and sleeping berths',
+      affordable: 'Affordable pricing',
+      affordableDesc: 'Competitive fares with discounts for families',
+      safe: 'Safe and reliable',
+      safeDesc: 'On-time arrivals with 24/7 customer support',
+      fast: 'Quick booking',
+      fastDesc: 'Book in minutes, pay with multiple methods',
+    },
+    services: {
+      title: 'Our services',
+      subtitle: 'Everything you need for a great journey',
+      booking: 'Easy booking',
+      bookingDesc: 'Simple online booking with instant confirmation',
+      seats: 'Seat selection',
+      seatsDesc: 'Choose from economy, standard, and VIP coaches',
+      payment: 'Flexible payment',
+      paymentDesc: 'Pay with Telebirr, CBE Birr, cards, or wallet',
+      support: 'Customer support',
+      supportDesc: 'Live chat and 24/7 assistance available',
+      loyalty: 'Loyalty rewards',
+      loyaltyDesc: 'Earn points and unlock exclusive benefits',
+      tracking: 'Live tracking',
+      trackingDesc: 'Real-time updates on your train journey',
+    },
+    about: {
+      title: 'About EDR',
+      subtitle: 'Connecting East Africa',
+      mission: 'Our mission',
+      missionText: 'To provide reliable, affordable, and comfortable train travel connecting Ethiopia and Djibouti.',
+      network: 'Extensive network',
+      networkText: '21 stations across Ethiopia and Djibouti with modern infrastructure.',
+      comfort: 'Comfort first',
+      comfortText: 'Modern coaches designed for your comfort with multiple classes.',
+      eco: 'Eco-friendly',
+      ecoText: 'Sustainable travel option that reduces carbon footprint.',
+    },
+    contact: {
+      title: 'Get in touch',
+      subtitle: 'We are here to help',
+      email: 'Email',
+      phone: 'Phone',
+      address: 'Address',
+      form: 'Send us a message',
+      name: 'Full Name',
+      emailField: 'Email address',
+      subject: 'Subject',
+      message: 'Message',
+      send: 'Send message',
+      sending: 'Sending...',
+      success: 'Message sent successfully!',
+      error: 'Failed to send message',
+    },
+    help: {
+      title: 'Help and FAQs',
+      subtitle: 'Find answers to common questions',
+      bookingFaq: 'Booking questions',
+      how: 'How do I book a ticket?',
+      howAnswer: 'Visit our booking page, search for available trips, select your seats, and complete payment.',
+      modify: 'Can I modify my booking?',
+      modifyAnswer: 'Yes, you can modify bookings up to 24 hours before departure from your profile.',
+      cancel: 'What is the cancellation policy?',
+      cancelAnswer: 'Cancellations made 48 hours before departure receive full refund.',
+      paymentFaq: 'Payment questions',
+      payMethods: 'What payment methods do you accept?',
+      payMethodsAnswer: 'We accept Telebirr, CBE Birr, eBirr, credit/debit cards, and wallet balance.',
+      refund: 'When will I receive my refund?',
+      refundAnswer: 'Refunds are processed within 5-7 business days.',
+      other: 'Other questions',
+      docs: 'What documents do I need?',
+      docsAnswer: 'Valid national ID, passport, or travel permit required.',
+      help: 'Still need help?',
+      contact: 'Contact our support team',
+    },
+    footer: {
+      about: 'About',
+      support: 'Support',
+      privacy: 'Privacy policy',
+      terms: 'Terms of service',
+      follow: 'Follow us',
+      rights: 'All rights reserved.',
+    },
+  },
+  am: {
+    nav: {
+      home: 'ቤት',
+      services: 'አገልግሎቶች',
+      about: 'ስለ ኛ',
+      contact: 'አግኙን',
+      help: 'ርዳታ',
+      bookNow: 'አሁን ይመዝገቡ',
+    },
+    home: {
+      hero: 'በምስራቅ አፍሪካ ውስጥ ይጓዙ',
+      heroSub: 'ከኢትዮጵያ ወደ ጂቡቲ ello seamless train travel ያስተዋውቁ',
+      cta: 'ቁጠባ ይጀምሩ',
+      searchNow: 'ጉብኝቶች ይፈልጉ',
+      features: 'ለምን ኢደር ይምረጡ?',
+      comfortable: 'ምቹ ጉዞ',
+      comfortDesc: 'ዘመናዊ ሕንፃዎች ወንበር እና ማተም ወራጆች ጋር',
+      affordable: 'ርካሽ ዋጋ',
+      affordableDesc: 'ለቤተሰቦች ምጣኔ ሞገድ እና ቅናሾች',
+      safe: 'ደህንነተኛ & አስተማማኝ',
+      safeDesc: 'በጊዜ ምጡና 24/7 ደንበኛ ድጋፍ',
+      fast: 'ፈጣን ቁጠባ',
+      fastDesc: 'በደቂቃዎች ይመዝገቡ፣ ብዙ ዘዴዎችን ይከፍሉ',
+    },
+    services: {
+      title: 'አገልግሎቶቻችን',
+      subtitle: 'ታላቅ ጉዞ ለሚፈልጉ ሁሉ ነገር',
+      booking: 'ቀላል ቁጠባ',
+      bookingDesc: 'ቀላል የመስመር ላይ ቁጠባ ወቅታዊ ማረጋገጫ ጋር',
+      seats: 'ወንበር ምርጫ',
+      seatsDesc: 'ኢኮኖሚ፣ መደበኛ እና VIP ሕንፃዎች ምረጡ',
+      payment: '유연한ከጊዜ ወደ ጊዜ ክፍያ',
+      paymentDesc: 'Telebirr፣ CBE Birr፣ ካርዶች ወይም ዋሌት ይከፍሉ',
+      support: 'ደንበኛ ድጋፍ',
+      supportDesc: 'ライブ ቻት እና 24/7 ረዳት ይገኛሉ',
+      loyalty: 'ታማኝነት ሽልማቶች',
+      loyaltyDesc: 'ነጥቦች ያዙ እና ብቁ ጥቅሞች ያስከፍቱ',
+      tracking: 'ライブ ትንተና',
+      trackingDesc: 'የእርስዎ ባቡር ጉዞ ውስጥ ወቅታዊ ማሻሻያዎች',
+    },
+    about: {
+      title: 'ስለ ኢትዮጵያ-ጂቡቲ ባቡር',
+      subtitle: 'ምስራቅ አፍሪካ ያገናኙ',
+      mission: 'ራሳችን መጠን',
+      missionText: 'ኢትዮጵያ እና ጂቡቲን የሚያገናኙ አስተማማኝ፣ ርካሽ እና ምቹ ባቡር ጉዞ ይሰጡ።',
+      network: 'ሰፊ አውታር',
+      networkText: 'ኢትዮጵያ እና ጂቡቲ ውስጥ 21 ጣቢያዎች ዘመናዊ መሰረተ ልማት ጋር።',
+      comfort: 'ምቹ ሞላላ',
+      comfortText: 'ብዙ ክፍሎች ጋር የእርስዎ comfort ለ ዲዛይን ዘመናዊ ሕንፃዎች።',
+      eco: 'ପରିବେश __ 친화적',
+      ecoText: 'ካርቦን እግድ ሪሞት የሚቀንስ sustainable ጉዞ አማራጭ።',
+    },
+    contact: {
+      title: 'ከኛ ጋር ግንኙነት ወስጥ ደርሱ',
+      subtitle: 'እኛ ረድ ለ ልንሆን ሞገዱ',
+      email: 'ኢሜይል',
+      phone: 'ስልክ',
+      address: 'አድራሻ',
+      form: 'ለኛ መልእክት ይላኩ',
+      name: 'ሙሉ ስም',
+      emailField: 'ኢሜይል አድራሻ',
+      subject: 'ርዕስ',
+      message: 'መልእክት',
+      send: 'መልእክት ይላኩ',
+      sending: 'በመላክ ላይ...',
+      success: 'መልእክት በተሳካ ተልኩ!',
+      error: 'መልእክት ወደ ላክ ያልተሳካ',
+    },
+    help: {
+      title: 'ርዳታ & FAQs',
+      subtitle: 'ከ general ጥያቄዎች የሚመለስ መልስ ይፈልጉ',
+      bookingFaq: 'ቁጠባ ጥያቄዎች',
+      how: 'ስንት በየት ላይ ቁጠባ?',
+      howAnswer: 'ቁጠባ ገጽ ይጎብኙ፣ ዞሯ ለ ይፈልጉ ፣ ወንበር ይምረጡ ዝሕ ክፍያ።',
+      modify: 'እኔ ቁጠባ እንደገና ማስተካከል ይችላሉ?',
+      modifyAnswer: 'አዎ፣ መውጫ 24 ሰዓታት በፊት ቁጠባ እንደገና ማስተካከል ይችላሉ።',
+      cancel: 'cancellation ወሳኔ ምንድ ነው?',
+      cancelAnswer: 'አስመልከት 48 ሰዓታት በፊት አውጪ ሙሉ መልስ ያገኛሉ።',
+      paymentFaq: 'ክፍያ ጥያቄዎች',
+      payMethods: 'Telebirr, CBE Birr, eBirr, ክレジット/ዲቢት ካርዶች, እና ዋሌት ሚዛን ኤ acceptedይገቡ।',
+      payMethodsAnswer: 'Telebirr, CBE Birr, eBirr, credit/debit ካርዶች፣ እና ዋሌት ሚዛን ยอมrับ',
+      refund: 'my አሌ ሥራ refund?',
+      refundAnswer: 'Refund በ 5-7 ሥራ ቀናት ውስጥ ተወስኖልት።',
+      other: 'ሌሎች ጥያቄዎች',
+      docs: 'ኔ ወሰደ ምን documentation?',
+      docsAnswer: 'ዋጋ ብሔር ID፣ ፓስፖርት ወይም ጉዞ permit አስፈላጊ።',
+      help: 'አሁንም ረዳታ ፈልገው?',
+      contact: 'ደንበኛ ድጋፍ ቡድን ጋር ማንቲ',
+    },
+    footer: {
+      about: 'ስለ',
+      contact: 'አግኙን',
+      privacy: 'ግላዊነት ፖሊሲ',
+      terms: 'service ውል',
+      follow: 'ከሱ ተከተሉ',
+      rights: 'ሁሉ ሙሉ።',
+    },
+  },
+  om: {
+    nav: {
+      home: 'Mana',
+      services: 'Tajaajilaa',
+      about: 'Waa',
+      contact: 'Nu Ilaali',
+      help: 'Gargaarsa',
+      bookNow: 'Amma Qindeessuu',
+    },
+    home: {
+      hero: 'Kaasaa Baafata Gidiraa',
+      heroSub: 'Kunoosni caraa qammateen Itoophiyaa hoo Jibuuraa jira.',
+      cta: 'Qindeessuu Jalqabi',
+      searchNow: 'Naannoo Barbaadi',
+      features: 'Maaliif EDR Filachuu?',
+      comfortable: 'Wantaa Mijataa',
+      comfortDesc: 'Haalaan biraa konkolaata mooniisa seeda jira.',
+      affordable: 'Gatii Gabbina',
+      affordableDesc: 'Karoora muummichaa jala maallaqa qabeenya.',
+      safe: 'Nageenya & Jidha',
+      safeDesc: 'Yeroo jilbaa dhumaasuu fi gargaarsa 24/7 deggara.',
+      fast: 'Qindeessuu Abadii',
+      fastDesc: 'Yeroo giddu gidduu qindeessuu, mallaatoo ijaa gadii.',
+    },
+    services: {
+      title: 'Tajaajilaa Keenya',
+      subtitle: 'Waa waliigalaan wantoota gid caraa mijataa',
+      booking: 'Qindeessuu Salphaa',
+      bookingDesc: 'Qindeessuu interneetii salphaa jidha gaafatama',
+      seats: 'Filannoo Teessaa',
+      seatsDesc: 'Ekonomii, idileessaa jala VIP konkolaata filachuu',
+      payment: 'Maallaqa Giddu Gidduu',
+      paymentDesc: 'Telebirr, CBE Birr, kaardii ykn wallaattii jalqabi',
+      support: 'Gargaarsa Fayyadhaa',
+      supportDesc: 'Haftuu liixii jala gargaarsa 24/7 jira',
+      loyalty: 'Gammachiisa Jidha',
+      loyaltyDesc: 'Qooda qabu jila waan gaarii gargaara',
+      tracking: 'Jidha Liixii',
+      trackingDesc: 'Jiraataa kunoosni caraa qammateen gammachisu',
+    },
+    about: {
+      title: 'Waa Baafata Itoophiyaa-Jibuuraa',
+      subtitle: 'Baafata Gidiraa Yoo Wal Qabu',
+      mission: 'Kora Keenya',
+      missionText: 'Nageenya jidha, gatii gabbina, jidha mijataa Itoophiyaa jala Jibuuraa tajaajili.',
+      network: 'Shabdalee Babaasaa',
+      networkText: '21 taasaa Itoophiyaa jala Jibuuraa keessatti konkolaata biraa.',
+      comfort: 'Mirga Jalqabaa',
+      comfortText: 'Konkolaata mooniisa mijataa kee waraqsa gidduu jira.',
+      eco: 'Kaasaalee Mijataa',
+      ecoText: 'Caraa ijaa yoo sadarka karbuuni muraa gidduu.',
+    },
+    contact: {
+      title: 'Nu Ilaali',
+      subtitle: 'Nu gargaaruufi barbaachisaa',
+      email: 'Imeelii',
+      phone: 'Bilbila',
+      address: 'Tuulaa',
+      form: 'Naaraan Itti Ergi',
+      name: 'Maqaa Guutuu',
+      emailField: 'Imeelii tuula',
+      subject: 'Mata',
+      message: 'Itti Ergi',
+      send: 'Naaraan Ergi',
+      sending: 'Erguun jira...',
+      success: 'Naaraan gaafatama jira!',
+      error: 'Naaraan erguu hin raasuu',
+    },
+    help: {
+      title: 'Gargaarsa & FAQs',
+      subtitle: 'Gaaffii guutuu jala deebii barbaadi',
+      bookingFaq: 'Gaaffii Qindeessuu',
+      how: 'Akkamitti qindeessuu?',
+      howAnswer: 'Fuula qindeessuu dhugi, naannoo barbaadi, teessaa filachuu, maallaqa xumura.',
+      modify: 'Qindeessuu koo maratti jidha adeemsa?',
+      modifyAnswer: 'Eenyee, walta 24 sa itti fufu qindeessuu maratti jidha adeemsa dandeenya.',
+      cancel: 'Hoggansa gaafatama maal jira?',
+      cancelAnswer: 'Walta 48 sa itti fufu walitti erga dhumaasuu guutuu arguu jidha.',
+      paymentFaq: 'Gaaffii Maallaqa',
+      payMethods: 'Maallaqa keessaa maallaqa hayyamaa?',
+      payMethodsAnswer: 'Telebirr, CBE Birr, eBirr, kaardii kreediitii/dibati, jala wallaattii haa jira.',
+      refund: 'Yeroo maallaqa deebina?',
+      refundAnswer: 'Maallaaq 5-7 guyyaa hojii keessatti deebi.',
+      other: 'Gaaffii Biraa',
+      docs: 'Waraqaa maal barbaachisa?',
+      docsAnswer: 'Kaardii ID bakka, paaspoortii ykn walii haa barbaachisaa.',
+      help: 'Haaluma facaasin gargaarsa Barbaadi?',
+      contact: 'Gargaarsa fayyadhaa mana waliin ilaali',
+    },
+    footer: {
+      about: 'Waa',
+      contact: 'Nu Ilaali',
+      privacy: 'Kabaja Kunnamuu',
+      terms: 'Seera Tajaajila',
+      follow: 'Isaa Hordofu',
+      rights: 'Hundi moodeewwan.',
+    },
+  },
+  fr: {
+    nav: {
+      home: 'Accueil',
+      services: 'Services',
+      about: 'À Propos',
+      contact: 'Contact',
+      help: 'Aide',
+      bookNow: 'Réserver Maintenant',
+    },
+    home: {
+      hero: 'Voyagez à travers l\'Afrique de l\'Est',
+      heroSub: 'Découvrez les voyages en train sans interruption d\'Éthiopie à Djibouti',
+      cta: 'Commencer la Réservation',
+      searchNow: 'Rechercher des Trajets',
+      features: 'Pourquoi Choisir EDR?',
+      comfortable: 'Voyage Confortable',
+      comfortDesc: 'Autobus modernes avec sièges et couchettes',
+      affordable: 'Prix Abordables',
+      affordableDesc: 'Tarifs compétitifs avec réductions pour familles',
+      safe: 'Sûr & Fiable',
+      safeDesc: 'Arrivées à l\'heure avec support client 24/7',
+      fast: 'Réservation Rapide',
+      fastDesc: 'Réservez en minutes, payez par plusieurs méthodes',
+    },
+    services: {
+      title: 'Nos Services',
+      subtitle: 'Tout ce dont vous avez besoin pour un excellent voyage',
+      booking: 'Réservation Facile',
+      bookingDesc: 'Réservation en ligne simple avec confirmation instantanée',
+      seats: 'Sélection des Sièges',
+      seatsDesc: 'Choisissez parmi les autobus économique, standard et VIP',
+      payment: 'Paiement Flexible',
+      paymentDesc: 'Payez avec Telebirr, CBE Birr, cartes ou portefeuille',
+      support: 'Support Client',
+      supportDesc: 'Chat en direct et assistance 24/7 disponibles',
+      loyalty: 'Récompenses de Fidélité',
+      loyaltyDesc: 'Gagnez des points et déverrouillez des avantages exclusifs',
+      tracking: 'Suivi en Direct',
+      trackingDesc: 'Mises à jour en temps réel de votre voyage en train',
+    },
+    about: {
+      title: 'À Propos du Chemin de Fer Éthiopie-Djibouti',
+      subtitle: 'Connecter l\'Afrique de l\'Est',
+      mission: 'Notre Mission',
+      missionText: 'Offrir des voyages en train fiables, abordables et confortables reliant l\'Éthiopie et Djibouti.',
+      network: 'Réseau Étendu',
+      networkText: '21 gares à travers l\'Éthiopie et Djibouti avec infrastructure moderne.',
+      comfort: 'Confort D\'Abord',
+      comfortText: 'Autobus modernes conçus pour votre confort avec plusieurs catégories.',
+      eco: 'Écologique',
+      ecoText: 'Option de voyage durable qui réduit l\'empreinte carbone.',
+    },
+    contact: {
+      title: 'Contactez-Nous',
+      subtitle: 'Nous sommes là pour vous aider',
+      email: 'Email',
+      phone: 'Téléphone',
+      address: 'Adresse',
+      form: 'Envoyez-Nous un Message',
+      name: 'Nom Complet',
+      emailField: 'Adresse E-mail',
+      subject: 'Sujet',
+      message: 'Message',
+      send: 'Envoyer le Message',
+      sending: 'Envoi en cours...',
+      success: 'Message envoyé avec succès!',
+      error: 'Échec de l\'envoi du message',
+    },
+    help: {
+      title: 'Aide & Questions Fréquentes',
+      subtitle: 'Trouvez des réponses aux questions courantes',
+      bookingFaq: 'Questions de Réservation',
+      how: 'Comment réserver un billet?',
+      howAnswer: 'Visitez notre page de réservation, recherchez les trajets disponibles, sélectionnez vos sièges et complétez le paiement.',
+      modify: 'Puis-je modifier ma réservation?',
+      modifyAnswer: 'Oui, vous pouvez modifier les réservations jusqu\'à 24 heures avant le départ.',
+      cancel: 'Quelle est la politique d\'annulation?',
+      cancelAnswer: 'Les annulations effectuées 48 heures avant le départ reçoivent un remboursement complet.',
+      paymentFaq: 'Questions de Paiement',
+      payMethods: 'Quels modes de paiement acceptez-vous?',
+      payMethodsAnswer: 'Nous acceptons Telebirr, CBE Birr, eBirr, cartes bancaires et portefeuille.',
+      refund: 'Quand recevrai-je mon remboursement?',
+      refundAnswer: 'Les remboursements sont traités dans les 5-7 jours ouvrables.',
+      other: 'Autres Questions',
+      docs: 'Quels documents dois-je avoir?',
+      docsAnswer: 'Une carte d\'identité nationale, un passeport ou un permis de voyage valide est requis.',
+      help: 'Avez-vous toujours besoin d\'aide?',
+      contact: 'Contactez notre équipe d\'assistance',
+    },
+    footer: {
+      about: 'À Propos',
+      contact: 'Contact',
+      privacy: 'Politique de Confidentialité',
+      terms: 'Conditions d\'Utilisation',
+      follow: 'Suivez-Nous',
+      rights: 'Tous droits réservés.',
+    },
+  },
+};
+
+export function getTranslation(lang: Language, key: string): string {
+  const keys = key.split('.');
+  let value: any = translations[lang];
+  for (const k of keys) {
+    value = value?.[k];
+  }
+  return value || key;
+}
+
+export function useLanguage() {
+  const getLang = (): Language => {
+    if (typeof window === 'undefined') return 'en';
+    return (localStorage.getItem('language') as Language) || 'en';
+  };
+
+  const setLang = (lang: Language) => {
+    localStorage.setItem('language', lang);
+    window.dispatchEvent(new CustomEvent('languageChange', { detail: lang }));
+  };
+
+  return { getLang, setLang };
+}
diff --git a/apps/edr-passenger-web/portal/tailwind.config.js b/apps/edr-passenger-web/portal/tailwind.config.js
new file mode 100644
index 000000000..ed5d063f7
--- /dev/null
+++ b/apps/edr-passenger-web/portal/tailwind.config.js
@@ -0,0 +1,88 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'rgb(20 113 76)',
+      },
+      backgroundColor: {
+        primary: 'rgb(20 113 76)',
+      },
+      textColor: {
+        primary: 'rgb(20 113 76)',
+      },
+      borderColor: {
+        primary: 'rgb(20 113 76)',
+      },
+      ringColor: {
+        primary: 'rgb(20 113 76)',
+      },
+      animation: {
+        'bounce-in': 'bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
+        'float': 'float 6s ease-in-out infinite',
+        'shimmer': 'shimmer 2s infinite',
+        'slide-in-left': 'slide-in-left 0.5s ease-out',
+        'slide-in-right': 'slide-in-right 0.5s ease-out',
+      },
+      keyframes: {
+        'bounce-in': {
+          '0%': {
+            opacity: '0',
+            transform: 'translateY(20px) scale(0.9)',
+          },
+          '50%': {
+            opacity: '1',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateY(0) scale(1)',
+          },
+        },
+        'float': {
+          '0%, 100%': {
+            transform: 'translateY(0px)',
+          },
+          '50%': {
+            transform: 'translateY(-20px)',
+          },
+        },
+        'shimmer': {
+          '0%': {
+            'background-position': '-1000px 0',
+          },
+          '100%': {
+            'background-position': '1000px 0',
+          },
+        },
+        'slide-in-left': {
+          'from': {
+            opacity: '0',
+            transform: 'translateX(-20px)',
+          },
+          'to': {
+            opacity: '1',
+            transform: 'translateX(0)',
+          },
+        },
+        'slide-in-right': {
+          'from': {
+            opacity: '0',
+            transform: 'translateX(20px)',
+          },
+          'to': {
+            opacity: '1',
+            transform: 'translateX(0)',
+          },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77423360d..f16059fb8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -183,6 +183,9 @@ importers:
       class-validator:
         specifier: ^0.14.0
         version: 0.14.4
+      express:
+        specifier: ^4.18.2
+        version: 4.22.2
       jose:
         specifier: ^5.10.0
         version: 5.10.0
@@ -203,7 +206,7 @@ importers:
         version: 7.8.2
       swagger-ui-express:
         specifier: ^5.0.0
-        version: 5.0.1(express@5.2.1)
+        version: 5.0.1(express@4.22.2)
       tsconfig-paths:
         specifier: ^4.2.0
         version: 4.2.0
@@ -2007,6 +2010,10 @@ packages:
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -2296,6 +2303,9 @@ packages:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
 
+  array-flatten@1.1.1:
+    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+
   array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
@@ -2456,6 +2466,10 @@ packages:
   bluebird@3.4.7:
     resolution: {integrity: sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==}
 
+  body-parser@1.20.5:
+    resolution: {integrity: sha512-3grm+/2tUOvu2cjJkvsIxrv/wVpfXQW4PsQHYm7yk4vfpu7Ekl6nEsYBoJUL6qDwZUx8wUhQ8tR2qz+ad9c9OA==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
   body-parser@2.2.2:
     resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
     engines: {node: '>=18'}
@@ -2755,6 +2769,10 @@ packages:
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
 
+  content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+
   content-disposition@1.1.0:
     resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
     engines: {node: '>=18'}
@@ -2783,6 +2801,9 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie-signature@1.0.7:
+    resolution: {integrity: sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==}
+
   cookie-signature@1.2.2:
     resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
     engines: {node: '>=6.6.0'}
@@ -3047,6 +3068,10 @@ packages:
   destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
+  destroy@1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -3418,6 +3443,10 @@ packages:
     resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  express@4.22.2:
+    resolution: {integrity: sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==}
+    engines: {node: '>= 0.10.0'}
+
   express@5.2.1:
     resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
     engines: {node: '>= 18'}
@@ -3511,6 +3540,10 @@ packages:
     resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
     engines: {node: '>=0.10.0'}
 
+  finalhandler@1.3.2:
+    resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
+    engines: {node: '>= 0.8'}
+
   finalhandler@2.1.1:
     resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
     engines: {node: '>= 18.0.0'}
@@ -3593,6 +3626,10 @@ packages:
     resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==}
     engines: {node: '>=0.10.0'}
 
+  fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
@@ -3867,6 +3904,10 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
   iconv-lite@0.7.2:
     resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
     engines: {node: '>=0.10.0'}
@@ -4733,6 +4774,9 @@ packages:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
 
+  merge-descriptors@1.0.3:
+    resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
+
   merge-descriptors@2.0.0:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
@@ -4772,6 +4816,11 @@ packages:
     resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
     engines: {node: '>=18'}
 
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   mime@2.6.0:
     resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
     engines: {node: '>=4.0.0'}
@@ -4877,6 +4926,10 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
   negotiator@1.0.0:
     resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
     engines: {node: '>= 0.6'}
@@ -5154,6 +5207,9 @@ packages:
     resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
     engines: {node: 18 || 20 || >=22}
 
+  path-to-regexp@0.1.13:
+    resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
+
   path-to-regexp@3.3.0:
     resolution: {integrity: sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==}
 
@@ -5400,6 +5456,10 @@ packages:
   rapiq@0.9.0:
     resolution: {integrity: sha512-k4oT4RarFBrlLMJ49xUTeQpa/us0uU4I70D/UEnK3FWQ4GENzei01rEQAmvPKAIzACo4NMW+YcYJ7EVfSa7EFg==}
 
+  raw-body@2.5.3:
+    resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
+    engines: {node: '>= 0.8'}
+
   raw-body@3.0.2:
     resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
     engines: {node: '>= 0.10'}
@@ -5649,10 +5709,18 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  send@0.19.2:
+    resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
+    engines: {node: '>= 0.8.0'}
+
   send@1.2.1:
     resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
     engines: {node: '>= 18'}
 
+  serve-static@1.16.3:
+    resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
+    engines: {node: '>= 0.8.0'}
+
   serve-static@2.2.1:
     resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
     engines: {node: '>= 18'}
@@ -8385,6 +8453,11 @@ snapshots:
 
   abbrev@1.1.1: {}
 
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.2
@@ -8695,6 +8768,8 @@ snapshots:
       call-bound: 1.0.4
       is-array-buffer: 3.0.5
 
+  array-flatten@1.1.1: {}
+
   array-ify@1.0.0: {}
 
   array-includes@3.1.9:
@@ -8916,6 +8991,23 @@ snapshots:
 
   bluebird@3.4.7: {}
 
+  body-parser@1.20.5:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.15.2
+      raw-body: 2.5.3
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   body-parser@2.2.2:
     dependencies:
       bytes: 3.1.2
@@ -9243,6 +9335,10 @@ snapshots:
 
   console-control-strings@1.1.0: {}
 
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
   content-disposition@1.1.0: {}
 
   content-type@1.0.5: {}
@@ -9266,6 +9362,8 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cookie-signature@1.0.7: {}
+
   cookie-signature@1.2.2: {}
 
   cookie@0.7.2: {}
@@ -9495,6 +9593,8 @@ snapshots:
 
   destr@2.0.5: {}
 
+  destroy@1.2.0: {}
+
   detect-libc@2.1.2: {}
 
   detect-newline@3.1.0: {}
@@ -10014,6 +10114,42 @@ snapshots:
       jest-message-util: 29.7.0
       jest-util: 29.7.0
 
+  express@4.22.2:
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.5
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.0.7
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.3.2
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      merge-descriptors: 1.0.3
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.13
+      proxy-addr: 2.0.7
+      qs: 6.15.2
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.19.2
+      serve-static: 1.16.3
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   express@5.2.1:
     dependencies:
       accepts: 2.0.0
@@ -10146,6 +10282,18 @@ snapshots:
 
   filter-obj@1.1.0: {}
 
+  finalhandler@1.3.2:
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   finalhandler@2.1.1:
     dependencies:
       debug: 4.4.3
@@ -10241,6 +10389,8 @@ snapshots:
     dependencies:
       map-cache: 0.2.2
 
+  fresh@0.5.2: {}
+
   fresh@2.0.0: {}
 
   fs-constants@1.0.0: {}
@@ -10573,6 +10723,10 @@ snapshots:
 
   husky@9.1.7: {}
 
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
   iconv-lite@0.7.2:
     dependencies:
       safer-buffer: 2.1.2
@@ -11600,6 +11754,8 @@ snapshots:
 
   meow@12.1.1: {}
 
+  merge-descriptors@1.0.3: {}
+
   merge-descriptors@2.0.0: {}
 
   merge-stream@2.0.0: {}
@@ -11643,6 +11799,8 @@ snapshots:
     dependencies:
       mime-db: 1.54.0
 
+  mime@1.6.0: {}
+
   mime@2.6.0: {}
 
   mimic-fn@2.1.0: {}
@@ -11753,6 +11911,8 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  negotiator@0.6.3: {}
+
   negotiator@1.0.0: {}
 
   neo-async@2.6.2: {}
@@ -12043,6 +12203,8 @@ snapshots:
       lru-cache: 11.5.0
       minipass: 7.1.3
 
+  path-to-regexp@0.1.13: {}
+
   path-to-regexp@3.3.0: {}
 
   path-to-regexp@8.4.2: {}
@@ -12249,6 +12411,13 @@ snapshots:
       ebec: 1.1.1
       smob: 1.6.2
 
+  raw-body@2.5.3:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+
   raw-body@3.0.2:
     dependencies:
       bytes: 3.1.2
@@ -12525,6 +12694,24 @@ snapshots:
 
   semver@7.8.1: {}
 
+  send@0.19.2:
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   send@1.2.1:
     dependencies:
       debug: 4.4.3
@@ -12541,6 +12728,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  serve-static@1.16.3:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 0.19.2
+    transitivePeerDependencies:
+      - supports-color
+
   serve-static@2.2.1:
     dependencies:
       encodeurl: 2.0.0
@@ -12906,9 +13102,9 @@ snapshots:
     dependencies:
       '@scarf/scarf': 1.4.0
 
-  swagger-ui-express@5.0.1(express@5.2.1):
+  swagger-ui-express@5.0.1(express@4.22.2):
     dependencies:
-      express: 5.2.1
+      express: 4.22.2
       swagger-ui-dist: 5.32.6
 
   symbol-observable@4.0.0: {}