diff --git a/.github/workflows/generate-web-controller-preview.yml b/.github/workflows/generate-web-controller-preview.yml
new file mode 100644
index 0000000..4e2bb40
--- /dev/null
+++ b/.github/workflows/generate-web-controller-preview.yml
@@ -0,0 +1,113 @@
+name: Generate Web Controller Preview
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - 'LifeTrac-v25/raspberry_pi_web_controller/static/**'
+      - 'LifeTrac-v25/raspberry_pi_web_controller/templates/**'
+      - 'LifeTrac-v25/raspberry_pi_web_controller/preview/**'
+      - '.github/workflows/generate-web-controller-preview.yml'
+
+jobs:
+  generate-screenshot:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      
+      - name: Install Playwright
+        run: |
+          npm init -y
+          npm install --save-dev @playwright/test
+          npx playwright install --with-deps chromium
+      
+      - name: Start HTTP server
+        run: |
+          cd LifeTrac-v25/raspberry_pi_web_controller/preview
+          python3 -m http.server 8080 &
+          echo "HTTP_SERVER_PID=$!" >> $GITHUB_ENV
+          sleep 2
+      
+      - name: Create screenshot script
+        run: |
+          cat > screenshot.js << 'EOF'
+          const { chromium } = require('@playwright/test');
+
+          (async () => {
+            const browser = await chromium.launch();
+            const context = await browser.newContext({
+              viewport: { width: 1920, height: 1080 }
+            });
+            const page = await context.newPage();
+            
+            console.log('Navigating to page...');
+            await page.goto('http://localhost:8080/standalone.html');
+            
+            console.log('Waiting for page to be ready...');
+            await page.waitForSelector('[data-ready="true"]', { timeout: 10000 });
+            
+            // Wait a bit more for joysticks to fully render
+            await page.waitForTimeout(2000);
+            
+            console.log('Taking screenshot...');
+            await page.screenshot({ 
+              path: 'web-controller-preview.png',
+              fullPage: false
+            });
+            
+            console.log('Screenshot saved!');
+            await browser.close();
+          })();
+          EOF
+      
+      - name: Generate screenshot
+        run: node screenshot.js
+      
+      - name: Verify screenshot was created
+        run: |
+          if [ -f "web-controller-preview.png" ]; then
+            echo "Screenshot created successfully"
+            ls -lh web-controller-preview.png
+          else
+            echo "ERROR: Screenshot was not created"
+            exit 1
+          fi
+      
+      - name: Move screenshot to preview directory
+        run: |
+          mv web-controller-preview.png LifeTrac-v25/raspberry_pi_web_controller/preview/
+      
+      - name: Upload screenshot as artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: web-controller-preview
+          path: LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png
+          retention-days: 90
+      
+      - name: Commit and push screenshot
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git add LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png
+          if ! git diff --staged --quiet; then
+            git commit -m "Update web controller preview screenshot [skip ci]"
+            git push --force-with-lease origin HEAD || { echo "ERROR: git push failed. Please check for conflicts or permission issues."; exit 1; }
+          else
+            echo "No changes to commit."
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      
+      - name: Stop HTTP server
+        if: always()
+        run: |
+          if [ ! -z "$HTTP_SERVER_PID" ]; then
+            kill $HTTP_SERVER_PID || true
+          fi
diff --git a/LifeTrac-v25/README.md b/LifeTrac-v25/README.md
index 92c3c85..aea3892 100644
--- a/LifeTrac-v25/README.md
+++ b/LifeTrac-v25/README.md
@@ -74,6 +74,9 @@ LifeTrac v25 features a comprehensive remote control system with multiple contro
   - WebSocket for real-time communication
   - See [raspberry_pi_web_controller/README.md](raspberry_pi_web_controller/README.md) for setup
 
+![Web Controller Preview](raspberry_pi_web_controller/preview/web-controller-preview.png)
+*Browser-based control interface with live camera feed and on-screen joysticks*
+
 ## ROS2 Integration
 - **ros2_bridge/**: ROS2 packages for BeagleBone control via MQTT
   - **lifetrac_msgs/**: Custom ROS2 message definitions
diff --git a/LifeTrac-v25/raspberry_pi_web_controller/preview/.gitignore b/LifeTrac-v25/raspberry_pi_web_controller/preview/.gitignore
new file mode 100644
index 0000000..c0d7ca7
--- /dev/null
+++ b/LifeTrac-v25/raspberry_pi_web_controller/preview/.gitignore
@@ -0,0 +1,11 @@
+# Node modules (if testing locally)
+node_modules/
+package.json
+package-lock.json
+
+# Temporary files
+*.tmp
+*.log
+
+# Keep the generated screenshot
+!web-controller-preview.png
diff --git a/LifeTrac-v25/raspberry_pi_web_controller/preview/README.md b/LifeTrac-v25/raspberry_pi_web_controller/preview/README.md
new file mode 100644
index 0000000..2d8d088
--- /dev/null
+++ b/LifeTrac-v25/raspberry_pi_web_controller/preview/README.md
@@ -0,0 +1,73 @@
+# Web Controller Preview Assets
+
+This directory contains assets for generating preview screenshots of the LifeTrac v25 web controller interface.
+
+## Files
+
+### camera-placeholder.svg
+An SVG placeholder image that simulates a camera feed view. Used in the standalone HTML to provide a realistic preview without requiring an actual camera connection.
+
+### standalone.html
+A self-contained HTML page that includes:
+- Complete web controller interface styling (embedded CSS)
+- Joystick initialization code (embedded JavaScript)
+- No Flask backend dependencies
+- Uses the camera placeholder image
+
+This page is used by the GitHub Actions workflow to generate screenshots automatically.
+
+### web-controller-preview.png
+Auto-generated screenshot of the web controller interface showing:
+- Header with status indicators
+- Camera feed area with placeholder
+- Left joystick (Tank Steering - green)
+- Right joystick (Hydraulics - orange)
+- Emergency stop button
+- Keyboard shortcuts reference
+
+## Usage
+
+### Manual Screenshot Generation
+
+To generate a screenshot locally:
+
+1. Install Playwright:
+```bash
+npm init -y
+npm install --save-dev @playwright/test
+npx playwright install --with-deps chromium
+```
+
+2. Start a local HTTP server:
+```bash
+cd preview
+python3 -m http.server 8080
+```
+
+3. Run the screenshot script:
+```bash
+node screenshot.js
+```
+
+### Automated Screenshot Generation
+
+The GitHub Actions workflow (`.github/workflows/generate-web-controller-preview.yml`) automatically:
+- Triggers on changes to web controller files
+- Generates a fresh screenshot
+- Uploads it as an artifact
+- Commits it back to the repository
+
+You can also manually trigger the workflow from the GitHub Actions tab.
+
+## Customization
+
+To customize the preview appearance:
+1. Edit `standalone.html` to change the UI layout or styling
+2. Edit `camera-placeholder.svg` to change the placeholder image
+3. Run the screenshot generation process to create a new preview
+
+## Integration
+
+The preview image is referenced in:
+- `LifeTrac-v25/README.md` - Main documentation
+- GitHub repository preview for the web controller feature
diff --git a/LifeTrac-v25/raspberry_pi_web_controller/preview/camera-placeholder.svg b/LifeTrac-v25/raspberry_pi_web_controller/preview/camera-placeholder.svg
new file mode 100644
index 0000000..163510c
--- /dev/null
+++ b/LifeTrac-v25/raspberry_pi_web_controller/preview/camera-placeholder.svg
@@ -0,0 +1,43 @@
+<svg width="1280" height="720" xmlns="http://www.w3.org/2000/svg">
+  <!-- Dark background representing camera view -->
+  <rect width="1280" height="720" fill="#1a1a1a"/>
+  
+  <!-- Grid pattern to simulate terrain -->
+  <defs>
+    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
+      <rect width="80" height="80" fill="none" stroke="#333" stroke-width="1"/>
+    </pattern>
+  </defs>
+  <rect width="1280" height="720" fill="url(#grid)"/>
+  
+  <!-- Horizon line -->
+  <line x1="0" y1="400" x2="1280" y2="400" stroke="#555" stroke-width="2"/>
+  
+  <!-- Sky gradient -->
+  <defs>
+    <linearGradient id="sky" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#34495e;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="1280" height="400" fill="url(#sky)"/>
+  
+  <!-- Ground -->
+  <rect y="400" width="1280" height="320" fill="#3e2723"/>
+  
+  <!-- Camera icon in center -->
+  <g transform="translate(640, 360)">
+    <circle r="60" fill="none" stroke="#4CAF50" stroke-width="3" opacity="0.5"/>
+    <rect x="-40" y="-25" width="80" height="50" rx="5" fill="none" stroke="#4CAF50" stroke-width="3"/>
+    <circle cx="0" cy="0" r="20" fill="none" stroke="#4CAF50" stroke-width="3"/>
+    <rect x="40" y="-10" width="20" height="20" rx="3" fill="none" stroke="#4CAF50" stroke-width="2"/>
+  </g>
+  
+  <!-- Text overlay -->
+  <text x="640" y="500" font-family="Arial, sans-serif" font-size="36" fill="#4CAF50" text-anchor="middle" opacity="0.7">
+    LifeTrac v25 Camera Feed
+  </text>
+  <text x="640" y="550" font-family="Arial, sans-serif" font-size="24" fill="#888" text-anchor="middle">
+    Live view from Arducam IMX335
+  </text>
+</svg>
diff --git a/LifeTrac-v25/raspberry_pi_web_controller/preview/standalone.html b/LifeTrac-v25/raspberry_pi_web_controller/preview/standalone.html
new file mode 100644
index 0000000..682c751
--- /dev/null
+++ b/LifeTrac-v25/raspberry_pi_web_controller/preview/standalone.html
@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>LifeTrac v25 Control - Preview</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.9.0/nipplejs.min.js"></script>
+    <style>
+        /* LifeTrac v25 Web Controller Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            color: #fff;
+            overflow-x: hidden;
+            touch-action: none;
+        }
+
+        #main-container {
+            max-width: 1920px;
+            margin: 0 auto;
+            padding: 10px;
+        }
+
+        /* Header Styles */
+        #header {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        #header h1 {
+            font-size: 2em;
+            color: #ffd700;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+        }
+
+        #status-bar {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+
+        .status-indicator {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 0.9em;
+        }
+
+        .status-connected {
+            color: #00ff00;
+            font-weight: bold;
+        }
+
+        .status-active {
+            color: #00ff00;
+            font-weight: bold;
+        }
+
+        /* Video Feed Styles */
+        #video-container {
+            position: relative;
+            width: 100%;
+            max-width: 1280px;
+            margin: 0 auto 20px;
+            background: #000;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
+        }
+
+        #video-feed {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+
+        /* Control Panel Styles */
+        #control-panel {
+            display: flex;
+            justify-content: space-around;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            gap: 20px;
+            max-width: 1280px;
+            margin: 0 auto;
+        }
+
+        .joystick-container {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 20px;
+            border-radius: 15px;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            min-width: 280px;
+        }
+
+        .joystick-container h3 {
+            margin-bottom: 15px;
+            color: #ffd700;
+            font-size: 1.3em;
+        }
+
+        .joystick {
+            width: 220px;
+            height: 220px;
+            margin: 0 auto 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            position: relative;
+        }
+
+        .joystick-values {
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 10px;
+            font-family: 'Courier New', monospace;
+            font-size: 1.1em;
+        }
+
+        .joystick-labels {
+            font-size: 0.85em;
+            color: #aaa;
+            margin-top: 10px;
+        }
+
+        .joystick-labels div {
+            margin: 5px 0;
+        }
+
+        .emergency-container {
+            background: rgba(0, 0, 0, 0.5);
+            padding: 20px;
+            border-radius: 15px;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            min-width: 280px;
+        }
+
+        .emergency-button {
+            width: 100%;
+            padding: 30px;
+            font-size: 1.5em;
+            font-weight: bold;
+            background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
+            color: #fff;
+            border: 3px solid #fff;
+            border-radius: 15px;
+            cursor: pointer;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+            transition: all 0.2s;
+            user-select: none;
+        }
+
+        .emergency-button:hover {
+            background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.6);
+        }
+
+        .emergency-button:active {
+            transform: translateY(0);
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
+        }
+
+        #keyboard-help {
+            margin-top: 20px;
+            font-size: 0.9em;
+            color: #aaa;
+            line-height: 1.6;
+        }
+
+        /* Debug Console Styles */
+        #debug-console {
+            max-width: 1280px;
+            margin: 20px auto;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        #debug-toggle {
+            width: 100%;
+            padding: 12px;
+            background: rgba(255, 255, 255, 0.1);
+            color: #fff;
+            border: none;
+            cursor: pointer;
+            font-size: 1em;
+            text-align: left;
+            transition: background 0.2s;
+        }
+
+        #debug-toggle:hover {
+            background: rgba(255, 255, 255, 0.15);
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        #debug-content {
+            max-height: 200px;
+            overflow-y: auto;
+        }
+
+        #debug-messages {
+            padding: 15px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.85em;
+            line-height: 1.6;
+        }
+
+        .debug-info { color: #4CAF50; }
+        .debug-warning { color: #FFC107; }
+        .debug-error { color: #f44336; }
+    </style>
+</head>
+<body>
+    <div id="main-container">
+        <!-- Header -->
+        <div id="header">
+            <h1>LifeTrac v25 Control</h1>
+            <div id="status-bar">
+                <span id="mqtt-status" class="status-indicator">MQTT: <span class="status-connected">Connected</span></span>
+                <span id="camera-status" class="status-indicator">Camera: <span class="status-active">Active</span></span>
+                <span id="latency" class="status-indicator">Latency: <span id="latency-value">45</span> ms</span>
+            </div>
+        </div>
+
+        <!-- Video Feed Container -->
+        <div id="video-container">
+            <img id="video-feed" src="camera-placeholder.svg" alt="Camera Feed">
+        </div>
+
+        <!-- Control Panel -->
+        <div id="control-panel">
+            <!-- Left Joystick - Tank Steering -->
+            <div class="joystick-container">
+                <h3>Tank Steering</h3>
+                <div id="left-joystick" class="joystick"></div>
+                <div class="joystick-values">
+                    <span>X: <span id="left-x-value">0.00</span></span>
+                    <span>Y: <span id="left-y-value">0.00</span></span>
+                </div>
+                <div class="joystick-labels">
+                    <div>↑ Forward / ↓ Backward</div>
+                    <div>← Left Turn / → Right Turn</div>
+                </div>
+            </div>
+
+            <!-- Emergency Stop Button -->
+            <div class="emergency-container">
+                <button id="emergency-stop" class="emergency-button">
+                    🛑 EMERGENCY STOP
+                </button>
+                <div id="keyboard-help">
+                    <strong>Keyboard Shortcuts:</strong><br>
+                    WASD: Tank Steering<br>
+                    IJKL: Hydraulics<br>
+                    Space: Emergency Stop
+                </div>
+            </div>
+
+            <!-- Right Joystick - Hydraulics -->
+            <div class="joystick-container">
+                <h3>Hydraulics</h3>
+                <div id="right-joystick" class="joystick"></div>
+                <div class="joystick-values">
+                    <span>X: <span id="right-x-value">0.00</span></span>
+                    <span>Y: <span id="right-y-value">0.00</span></span>
+                </div>
+                <div class="joystick-labels">
+                    <div>↑ Arms Up / ↓ Arms Down</div>
+                    <div>← Bucket Down / → Bucket Up</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Debug Console (collapsible) -->
+        <div id="debug-console">
+            <button id="debug-toggle">Debug Console ▼</button>
+            <div id="debug-content" class="hidden">
+                <div id="debug-messages"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Control state
+        let leftJoystick = null;
+        let rightJoystick = null;
+        let currentControl = {
+            left_x: 0.0,
+            left_y: 0.0,
+            right_x: 0.0,
+            right_y: 0.0
+        };
+
+        /**
+         * Initialize the application
+         */
+        function init() {
+            initJoysticks();
+            initDebugConsole();
+            logDebug('LifeTrac v25 Web Controller initialized (Preview Mode)');
+            
+            // Mark as ready for screenshot
+            document.body.setAttribute('data-ready', 'true');
+        }
+
+        /**
+         * Initialize on-screen joysticks using nipplejs
+         */
+        function initJoysticks() {
+            // Left joystick - Tank steering
+            leftJoystick = nipplejs.create({
+                zone: document.getElementById('left-joystick'),
+                mode: 'static',
+                position: { left: '50%', top: '50%' },
+                color: '#4CAF50',
+                size: 180,
+                threshold: 0.1,
+                fadeTime: 250
+            });
+
+            leftJoystick.on('move', (evt, data) => {
+                if (data.direction) {
+                    const angle = data.angle.radian;
+                    const force = Math.min(data.force, 2) / 2;
+                    
+                    currentControl.left_x = Math.cos(angle) * force;
+                    currentControl.left_y = Math.sin(angle) * force;
+                    
+                    updateJoystickDisplay('left', currentControl.left_x, currentControl.left_y);
+                }
+            });
+
+            leftJoystick.on('end', () => {
+                currentControl.left_x = 0.0;
+                currentControl.left_y = 0.0;
+                updateJoystickDisplay('left', 0.0, 0.0);
+            });
+
+            // Right joystick - Hydraulics
+            rightJoystick = nipplejs.create({
+                zone: document.getElementById('right-joystick'),
+                mode: 'static',
+                position: { left: '50%', top: '50%' },
+                color: '#FF9800',
+                size: 180,
+                threshold: 0.1,
+                fadeTime: 250
+            });
+
+            rightJoystick.on('move', (evt, data) => {
+                if (data.direction) {
+                    const angle = data.angle.radian;
+                    const force = Math.min(data.force, 2) / 2;
+                    
+                    currentControl.right_x = Math.cos(angle) * force;
+                    currentControl.right_y = Math.sin(angle) * force;
+                    
+                    updateJoystickDisplay('right', currentControl.right_x, currentControl.right_y);
+                }
+            });
+
+            rightJoystick.on('end', () => {
+                currentControl.right_x = 0.0;
+                currentControl.right_y = 0.0;
+                updateJoystickDisplay('right', 0.0, 0.0);
+            });
+        }
+
+        /**
+         * Update joystick value displays
+         */
+        function updateJoystickDisplay(side, x, y) {
+            document.getElementById(`${side}-x-value`).textContent = x.toFixed(2);
+            document.getElementById(`${side}-y-value`).textContent = y.toFixed(2);
+        }
+
+        /**
+         * Initialize debug console
+         */
+        function initDebugConsole() {
+            const debugToggle = document.getElementById('debug-toggle');
+            const debugContent = document.getElementById('debug-content');
+            
+            debugToggle.addEventListener('click', () => {
+                debugContent.classList.toggle('hidden');
+                debugToggle.textContent = debugContent.classList.contains('hidden') 
+                    ? 'Debug Console ▼' 
+                    : 'Debug Console ▲';
+            });
+        }
+
+        function logDebug(message, type = 'info') {
+            const debugMessages = document.getElementById('debug-messages');
+            const timestamp = new Date().toLocaleTimeString();
+            const className = `debug-${type}`;
+            const line = `<div class="${className}">[${timestamp}] ${message}</div>`;
+            debugMessages.innerHTML += line;
+            debugMessages.scrollTop = debugMessages.scrollHeight;
+        }
+
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+</body>
+</html>
diff --git a/LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png b/LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png
new file mode 100644
index 0000000..c72b52d
Binary files /dev/null and b/LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png differ