diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f5d631c..373c531 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -29,6 +29,10 @@ jobs:
             flags: "--all-features"
     steps:
       - uses: actions/checkout@v4
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libasound2-dev libudev-dev
       - uses: dtolnay/rust-toolchain@master
         with:
           toolchain: ${{ matrix.rust }}
@@ -50,6 +54,10 @@ jobs:
       LLVMCOV_VERSION: 0.5.14
     steps:
       - uses: actions/checkout@v4
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libasound2-dev libudev-dev
       - uses: dtolnay/rust-toolchain@stable
         with:
           toolchain: stable
@@ -74,6 +82,10 @@ jobs:
     timeout-minutes: 30
     steps:
       - uses: actions/checkout@v4
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libasound2-dev libudev-dev
       - uses: dtolnay/rust-toolchain@stable
       - uses: taiki-e/install-action@cargo-hack
       - uses: Swatinem/rust-cache@v2
@@ -87,6 +99,10 @@ jobs:
     timeout-minutes: 30
     steps:
       - uses: actions/checkout@v4
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libasound2-dev libudev-dev
       - uses: dtolnay/rust-toolchain@clippy
       - uses: Swatinem/rust-cache@v2
         with:
@@ -98,6 +114,10 @@ jobs:
     timeout-minutes: 30
     steps:
       - uses: actions/checkout@v4
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libasound2-dev libudev-dev
       - uses: dtolnay/rust-toolchain@nightly
       - uses: Swatinem/rust-cache@v2
         with:
@@ -111,6 +131,10 @@ jobs:
     timeout-minutes: 30
     steps:
       - uses: actions/checkout@v4
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libasound2-dev libudev-dev
       - uses: dtolnay/rust-toolchain@nightly
         with:
           components: rustfmt
@@ -118,7 +142,7 @@ jobs:
 
   build-and-deploy:
     name: Build and Deploy
-    needs: [test, coverage, feature-checks, clippy, docs, fmt]
+    needs: [ test, coverage, feature-checks, clippy, docs, fmt ]
     runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/master'
     permissions:
@@ -126,29 +150,27 @@ jobs:
     concurrency: ci-${{ github.ref }}
     steps:
       - uses: actions/checkout@v4
-
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libasound2-dev libudev-dev
       - name: Install wasm-pack
         uses: jetli/wasm-pack-action@v0.4.0
-
       - uses: dtolnay/rust-toolchain@stable
         with:
           targets: wasm32-unknown-unknown
-
       - uses: Swatinem/rust-cache@v2
         with:
           cache-on-failure: true
-
       - name: Build wasm
         run: |
           cargo build --release --target wasm32-unknown-unknown
           wasm-bindgen --out-dir ./dist --target web target/wasm32-unknown-unknown/release/rusty_pong.wasm
-
       - name: Prepare deployment
         run: |
           mkdir -p dist/assets
           cp -r assets/* dist/assets/
           cp web/index.html dist/
-
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..7b3aeef
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rusty Pong</title>
+    <style>
+        :root {
+            --bg-color: #0f0f0f;
+            --text-color: #ffffff;
+            --accent-color: #ffffff;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-family: 'Courier New', monospace;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            line-height: 1.6;
+        }
+
+        #game-container {
+            position: relative;
+            width: 100%;
+            max-width: 800px;
+            aspect-ratio: 16/10;
+            margin: 20px auto;
+        }
+
+        canvas {
+            background-color: black;
+            width: 100%;
+            height: 100%;
+        }
+
+        #loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 1.5em;
+            color: var(--accent-color);
+        }
+
+        .controls {
+            margin: 20px;
+            padding: 20px;
+            border: 1px solid var(--accent-color);
+            border-radius: 4px;
+            max-width: 600px;
+            text-align: center;
+        }
+
+        h1 {
+            color: var(--accent-color);
+            text-align: center;
+            font-size: 2.5em;
+            margin-bottom: 0;
+            letter-spacing: 0.2em;
+        }
+
+        kbd {
+            background-color: #333;
+            border-radius: 3px;
+            border: 1px solid #666;
+            padding: 2px 6px;
+            font-family: monospace;
+        }
+
+        .footer {
+            margin-top: 20px;
+            font-size: 0.8em;
+            opacity: 0.7;
+        }
+
+        .footer a {
+            color: var(--accent-color);
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        @media (max-width: 600px) {
+            h1 { font-size: 1.8em; }
+            .controls { margin: 10px; padding: 10px; }
+        }
+    </style>
+</head>
+<body>
+<h1>RUSTY PONG</h1>
+
+<div id="game-container">
+    <canvas id="bevy">
+        Javascript and WebGL support required
+    </canvas>
+    <div id="loading">Loading...</div>
+</div>
+
+<div class="controls">
+    <p>
+        <kbd>W</kbd>/<kbd>S</kbd> or <kbd>↑</kbd>/<kbd>↓</kbd> - Move Paddle<br>
+        <kbd>Space</kbd> - Pause/Start<br>
+        <kbd>M</kbd> - Toggle Music
+    </p>
+</div>
+
+<div class="footer">
+    Made with Bevy & Rust • <a href="https://github.com/0xAlcibiades/rusty-pong">Source</a>
+</div>
+
+<script>
+    // Initialize loading animation
+    const loading = document.getElementById('loading');
+    let dots = 0;
+    const loadingInterval = setInterval(() => {
+        dots = (dots + 1) % 4;
+        loading.textContent = 'Loading' + '.'.repeat(dots);
+    }, 500);
+
+    // Load and start the Bevy game
+    async function run() {
+        const script = document.createElement('script');
+        script.src = 'rusty_pong.js';
+        script.type = 'module';
+
+        script.onload = () => {
+            clearInterval(loadingInterval);
+            loading.style.display = 'none';
+        };
+
+        document.head.appendChild(script);
+    }
+
+    run();
+</script>
+</body>
+</html>
\ No newline at end of file
