diff --git a/.copilot-instructions.md b/.copilot-instructions.md
new file mode 100644
index 0000000..5791bea
--- /dev/null
+++ b/.copilot-instructions.md
@@ -0,0 +1,255 @@
+# PPR API Documentation for Copilot
+
+General Information
+
+As you perform more tests, document in this file the steps you are taking to avoid repetition. 
+
+## API Base URL
+- Development: `http://localhost:8001/api/v1`
+- Authentication: Bearer token required for most endpoints
+
+## Authentication
+
+### Get Access Token
+```bash
+curl -X POST "http://localhost:8001/api/v1/auth/login" \
+  -H "Content-Type: application/x-www-form-urlencoded" \
+  -d "username=admin&password=admin123"
+```
+
+**Response:**
+```json
+{
+  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+  "token_type": "bearer"
+}
+```
+
+## PPR Management Endpoints
+
+### Create New PPR Entry
+
+**Endpoint:** `POST /api/v1/pprs/`
+
+**Headers:**
+- `Content-Type: application/json`
+- `Authorization: Bearer {access_token}`
+
+**Required Fields:**
+- `ac_reg` (string): Aircraft registration (e.g., "G-TEST")
+- `ac_type` (string): Aircraft type (e.g., "C172")
+- `captain` (string): Captain's name
+- `in_from` (string): Origin airport ICAO code (e.g., "EGKB")
+- `eta` (datetime): Estimated time of arrival (ISO format: "2025-10-21T14:30:00")
+- `pob_in` (integer): Persons on board inbound
+
+**Optional Fields:**
+- `ac_call` (string): Aircraft callsign
+- `fuel` (string): Fuel requirements
+- `out_to` (string): Destination airport ICAO code
+- `etd` (datetime): Estimated time of departure
+- `pob_out` (integer): Persons on board outbound
+- `email` (string): Contact email
+- `phone` (string): Contact phone
+- `notes` (string): Additional notes
+
+**Example Request:**
+```bash
+curl -X POST "http://localhost:8001/api/v1/pprs/" \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer {token}" \
+  -d '{
+    "ac_reg": "G-TEST",
+    "ac_type": "C172",
+    "ac_call": "TEST01",
+    "captain": "John Smith",
+    "fuel": "FULL",
+    "in_from": "EGKB",
+    "eta": "2025-10-21T14:30:00",
+    "pob_in": 2,
+    "out_to": "EGGW",
+    "etd": "2025-10-21T16:00:00", 
+    "pob_out": 2,
+    "email": "john.smith@example.com",
+    "phone": "+44123456789",
+    "notes": "Test PPR entry created via API"
+  }'
+```
+
+**Success Response (201):**
+```json
+{
+  "ac_reg": "G-TEST",
+  "ac_type": "C172",
+  "ac_call": "TEST01",
+  "captain": "John Smith",
+  "fuel": "FULL",
+  "in_from": "EGKB",
+  "eta": "2025-10-21T14:30:00",
+  "pob_in": 2,
+  "out_to": "EGGW",
+  "etd": "2025-10-21T16:00:00",
+  "pob_out": 2,
+  "email": "john.smith@example.com",
+  "phone": "+44123456789",
+  "notes": "Test PPR entry created via API",
+  "id": 2,
+  "status": "NEW",
+  "landed_dt": null,
+  "departed_dt": null,
+  "created_by": "admin",
+  "submitted_dt": "2025-10-21T19:45:46"
+}
+```
+
+### Get All PPRs
+
+**Endpoint:** `GET /api/v1/pprs/`
+
+**Query Parameters:**
+- `skip` (int): Number of records to skip (default: 0)
+- `limit` (int): Maximum records to return (default: 100)
+- `status` (string): Filter by status (NEW, CONFIRMED, CANCELED, LANDED, DELETED, DEPARTED)
+- `date_from` (date): Filter from date (YYYY-MM-DD)
+- `date_to` (date): Filter to date (YYYY-MM-DD)
+
+### Get Specific PPR
+
+**Endpoint:** `GET /api/v1/pprs/{ppr_id}`
+
+### Update PPR
+
+**Endpoint:** `PUT /api/v1/pprs/{ppr_id}` (full update)
+**Endpoint:** `PATCH /api/v1/pprs/{ppr_id}` (partial update)
+
+### Update PPR Status
+
+**Endpoint:** `PATCH /api/v1/pprs/{ppr_id}/status`
+
+**Request Body:**
+```json
+{
+  "status": "LANDED"
+}
+```
+
+**Available Statuses:**
+- `NEW`: Newly submitted PPR
+- `CONFIRMED`: PPR confirmed by tower
+- `CANCELED`: PPR canceled
+- `LANDED`: Aircraft has landed
+- `DEPARTED`: Aircraft has departed
+- `DELETED`: PPR deleted (soft delete)
+
+### Delete PPR
+
+**Endpoint:** `DELETE /api/v1/pprs/{ppr_id}` (soft delete - sets status to DELETED)
+
+## Public Endpoints (No Authentication Required)
+
+### Get Today's Arrivals
+
+**Endpoint:** `GET /api/v1/public/arrivals`
+
+Returns all PPRs with status "NEW" and ETA for today.
+
+### Get Today's Departures
+
+**Endpoint:** `GET /api/v1/public/departures`
+
+Returns all PPRs with status "LANDED" and ETD for today.
+
+## Data Models
+
+### PPR Status Enum
+```
+NEW -> CONFIRMED -> LANDED -> DEPARTED
+    -> CANCELED
+    -> DELETED
+```
+
+### Datetime Format
+All datetime fields use ISO 8601 format: `YYYY-MM-DDTHH:MM:SS`
+
+### Airport Codes
+Use ICAO 4-letter codes (e.g., EGKB, EGGW, EGLL) for airport identifiers.
+
+## Error Responses
+
+**401 Unauthorized:**
+```json
+{
+  "detail": "Could not validate credentials"
+}
+```
+
+**404 Not Found:**
+```json
+{
+  "detail": "PPR record not found"
+}
+```
+
+**422 Validation Error:**
+```json
+{
+  "detail": [
+    {
+      "loc": ["body", "ac_reg"],
+      "msg": "Aircraft registration is required",
+      "type": "value_error"
+    }
+  ]
+}
+```
+
+## WebSocket Real-time Updates
+
+The API sends real-time updates via WebSocket for:
+- `ppr_created`: New PPR created
+- `ppr_updated`: PPR updated
+- `status_update`: PPR status changed
+- `ppr_deleted`: PPR deleted
+
+## Default Users
+
+- **Username:** `admin`
+- **Password:** `admin123`
+
+## Development URLs
+
+- API Base: http://localhost:8001/api/v1
+- Public Web Interface: http://localhost:8082
+- API Documentation: http://localhost:8001/docs
+- Database: localhost:3307 (MySQL)
+
+## Example Workflow
+
+1. Get access token
+2. Create PPR entry (status: NEW) → Shows on arrivals board
+3. Update status to LANDED → Shows on departures board
+4. Update status to DEPARTED → Removes from departures board
+
+## Testing Commands
+
+```bash
+# Store token
+TOKEN=$(curl -s -X POST "http://localhost:8001/api/v1/auth/login" \
+  -H "Content-Type: application/x-www-form-urlencoded" \
+  -d "username=admin&password=admin123" | jq -r '.access_token')
+
+# Create PPR
+curl -X POST "http://localhost:8001/api/v1/pprs/" \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $TOKEN" \
+  -d '{"ac_reg":"G-TEST","ac_type":"C172","captain":"Test Pilot","in_from":"EGKB","eta":"2025-10-21T14:30:00","pob_in":2}'
+
+# Check arrivals
+curl -s "http://localhost:8001/api/v1/public/arrivals" | jq .
+
+# Update status to LANDED
+curl -X PATCH "http://localhost:8001/api/v1/pprs/1/status" \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $TOKEN" \
+  -d '{"status":"LANDED"}'
+```
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 431e3b7..21bbf89 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -57,6 +57,21 @@ services:
     networks:
       - ppr_network
 
+  # Nginx web server for public frontend
+  web:
+    image: nginx:alpine
+    container_name: ppr_nextgen_web
+    restart: unless-stopped
+    ports:
+      - "8082:80"  # Public web interface
+    volumes:
+      - ./web:/usr/share/nginx/html
+      - ./nginx.conf:/etc/nginx/nginx.conf
+    depends_on:
+      - api
+    networks:
+      - ppr_network
+
 volumes:
   mysql_data:
 
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..8684f39
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,65 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    # Logging
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+
+    # Basic settings
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Serve static files
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Proxy API requests to FastAPI backend
+        location /api/ {
+            proxy_pass http://api:8000;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # WebSocket support for real-time updates
+        location /ws/ {
+            proxy_pass http://api:8000;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # Security headers
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header Referrer-Policy "no-referrer-when-downgrade" always;
+        add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
+    }
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..b1d0df8
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,388 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Airfield PPR - Arrivals & Departures</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #333;
+            min-height: 100vh;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+
+        .header p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+
+        .boards {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .boards {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .board {
+            background: white;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+        }
+
+        .board-header {
+            background: linear-gradient(45deg, #28a745, #20c997);
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+
+        .board-header.departures {
+            background: linear-gradient(45deg, #dc3545, #fd7e14);
+        }
+
+        .board-header h2 {
+            font-size: 1.5rem;
+            margin-bottom: 5px;
+        }
+
+        .board-content {
+            min-height: 400px;
+            position: relative;
+        }
+
+        .loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 400px;
+            font-size: 1.1rem;
+            color: #666;
+        }
+
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin-right: 10px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .ppr-list {
+            padding: 0;
+        }
+
+        .ppr-item {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+            gap: 15px;
+            padding: 15px 20px;
+            border-bottom: 1px solid #eee;
+            align-items: center;
+        }
+
+        .ppr-item:last-child {
+            border-bottom: none;
+        }
+
+        .ppr-item:hover {
+            background: #f8f9fa;
+        }
+
+        .ppr-field {
+            font-size: 0.9rem;
+        }
+
+        .ppr-field strong {
+            display: block;
+            color: #495057;
+            font-size: 0.8rem;
+            margin-bottom: 2px;
+            text-transform: uppercase;
+            font-weight: 600;
+        }
+
+        .ppr-field span {
+            font-size: 1rem;
+            color: #212529;
+        }
+
+        .status {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 12px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .status.new { background: #e3f2fd; color: #1565c0; }
+        .status.confirmed { background: #e8f5e8; color: #2e7d32; }
+        .status.landed { background: #fff3e0; color: #ef6c00; }
+        .status.departed { background: #fce4ec; color: #c2185b; }
+
+        .no-data {
+            text-align: center;
+            padding: 40px 20px;
+            color: #666;
+        }
+
+        .no-data i {
+            font-size: 3rem;
+            margin-bottom: 15px;
+            opacity: 0.3;
+        }
+
+        .last-updated {
+            text-align: center;
+            color: white;
+            opacity: 0.8;
+            margin-top: 20px;
+        }
+
+        .auto-refresh {
+            background: rgba(255,255,255,0.1);
+            color: white;
+            border: 1px solid rgba(255,255,255,0.2);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>✈️ Airfield PPR System</h1>
+            <p>Real-time Arrivals & Departures Board</p>
+        </div>
+
+        <div class="boards">
+            <!-- Arrivals Board -->
+            <div class="board">
+                <div class="board-header">
+                    <h2>🛬 Today's Arrivals</h2>
+                    <div id="arrivals-count">Loading...</div>
+                </div>
+                <div class="board-content">
+                    <div id="arrivals-loading" class="loading">
+                        <div class="spinner"></div>
+                        Loading arrivals...
+                    </div>
+                    <div id="arrivals-list" class="ppr-list" style="display: none;"></div>
+                </div>
+            </div>
+
+            <!-- Departures Board -->
+            <div class="board">
+                <div class="board-header departures">
+                    <h2>🛫 Today's Departures</h2>
+                    <div id="departures-count">Loading...</div>
+                </div>
+                <div class="board-content">
+                    <div id="departures-loading" class="loading">
+                        <div class="spinner"></div>
+                        Loading departures...
+                    </div>
+                    <div id="departures-list" class="ppr-list" style="display: none;"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="last-updated">
+            <div>Last updated: <span id="last-updated">Never</span></div>
+            <div class="auto-refresh">🔄 Auto-refresh every 30 seconds</div>
+        </div>
+    </div>
+
+    <script>
+        let refreshInterval;
+
+        // Format datetime for display
+        function formatDateTime(dateStr) {
+            if (!dateStr) return 'N/A';
+            const date = new Date(dateStr);
+            return date.toLocaleTimeString('en-GB', { 
+                hour: '2-digit', 
+                minute: '2-digit' 
+            });
+        }
+
+        // Format status for display
+        function formatStatus(status) {
+            return `<span class="status ${status.toLowerCase()}">${status}</span>`;
+        }
+
+        // Create PPR item HTML
+        function createPPRItem(ppr) {
+            return `
+                <div class="ppr-item">
+                    <div class="ppr-field">
+                        <strong>Aircraft</strong>
+                        <span>${ppr.ac_reg}</span>
+                    </div>
+                    <div class="ppr-field">
+                        <strong>Type</strong>
+                        <span>${ppr.ac_type}</span>
+                    </div>
+                    <div class="ppr-field">
+                        <strong>Time</strong>
+                        <span>${formatDateTime(ppr.eta || ppr.etd)}</span>
+                    </div>
+                    <div class="ppr-field">
+                        <strong>Status</strong>
+                        <span>${formatStatus(ppr.status)}</span>
+                    </div>
+                </div>
+            `;
+        }
+
+        // Create no data message
+        function createNoDataMessage(type) {
+            return `
+                <div class="no-data">
+                    <div style="font-size: 3rem; margin-bottom: 15px; opacity: 0.3;">
+                        ${type === 'arrivals' ? '🛬' : '🛫'}
+                    </div>
+                    <div>No ${type} scheduled for today</div>
+                </div>
+            `;
+        }
+
+        // Fetch and display arrivals
+        async function loadArrivals() {
+            try {
+                const response = await fetch('/api/v1/public/arrivals');
+                const arrivals = await response.json();
+                
+                const loadingEl = document.getElementById('arrivals-loading');
+                const listEl = document.getElementById('arrivals-list');
+                const countEl = document.getElementById('arrivals-count');
+                
+                loadingEl.style.display = 'none';
+                listEl.style.display = 'block';
+                
+                if (arrivals.length === 0) {
+                    listEl.innerHTML = createNoDataMessage('arrivals');
+                    countEl.textContent = '0 flights';
+                } else {
+                    listEl.innerHTML = arrivals.map(createPPRItem).join('');
+                    countEl.textContent = `${arrivals.length} flight${arrivals.length !== 1 ? 's' : ''}`;
+                }
+            } catch (error) {
+                console.error('Error loading arrivals:', error);
+                document.getElementById('arrivals-list').innerHTML = `
+                    <div class="no-data">
+                        <div style="color: #dc3545;">❌ Error loading arrivals</div>
+                    </div>
+                `;
+                document.getElementById('arrivals-loading').style.display = 'none';
+                document.getElementById('arrivals-list').style.display = 'block';
+            }
+        }
+
+        // Fetch and display departures
+        async function loadDepartures() {
+            try {
+                const response = await fetch('/api/v1/public/departures');
+                const departures = await response.json();
+                
+                const loadingEl = document.getElementById('departures-loading');
+                const listEl = document.getElementById('departures-list');
+                const countEl = document.getElementById('departures-count');
+                
+                loadingEl.style.display = 'none';
+                listEl.style.display = 'block';
+                
+                if (departures.length === 0) {
+                    listEl.innerHTML = createNoDataMessage('departures');
+                    countEl.textContent = '0 flights';
+                } else {
+                    listEl.innerHTML = departures.map(createPPRItem).join('');
+                    countEl.textContent = `${departures.length} flight${departures.length !== 1 ? 's' : ''}`;
+                }
+            } catch (error) {
+                console.error('Error loading departures:', error);
+                document.getElementById('departures-list').innerHTML = `
+                    <div class="no-data">
+                        <div style="color: #dc3545;">❌ Error loading departures</div>
+                    </div>
+                `;
+                document.getElementById('departures-loading').style.display = 'none';
+                document.getElementById('departures-list').style.display = 'block';
+            }
+        }
+
+        // Load both arrivals and departures
+        async function loadData() {
+            await Promise.all([loadArrivals(), loadDepartures()]);
+            document.getElementById('last-updated').textContent = new Date().toLocaleTimeString('en-GB');
+        }
+
+        // Initialize the page
+        async function init() {
+            await loadData();
+            
+            // Set up auto-refresh every 30 seconds
+            refreshInterval = setInterval(loadData, 30000);
+        }
+
+        // Start the application
+        init();
+
+        // Handle page visibility change to pause/resume refresh
+        document.addEventListener('visibilitychange', function() {
+            if (document.visibilityState === 'visible') {
+                if (!refreshInterval) {
+                    loadData();
+                    refreshInterval = setInterval(loadData, 30000);
+                }
+            } else {
+                if (refreshInterval) {
+                    clearInterval(refreshInterval);
+                    refreshInterval = null;
+                }
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file