diff --git a/integrations-live.html b/integrations-live.html
new file mode 100644
index 0000000..25a0c2c
--- /dev/null
+++ b/integrations-live.html
@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>🔗 Live Integrations Hub - BlackRoad OS</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --gradient: linear-gradient(135deg, #FF9D00, #FF6B00, #FF0066, #D600AA, #7700FF, #0066FF);
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #02030a;
+      color: white;
+      min-height: 100vh;
+    }
+
+    #blackroad-nav { position: sticky; top: 0; z-index: 1000; }
+
+    .hero {
+      padding: 64px 32px;
+      text-align: center;
+      background: linear-gradient(180deg, rgba(255, 0, 102, 0.2) 0%, transparent 100%);
+    }
+    .hero h1 {
+      font-size: 64px;
+      font-weight: 900;
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 16px;
+    }
+    .hero p {
+      font-size: 20px;
+      opacity: 0.8;
+    }
+
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 48px 32px;
+    }
+
+    .integrations-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+      gap: 32px;
+    }
+
+    .integration-card {
+      background: rgba(255,255,255,0.05);
+      border: 2px solid rgba(255,255,255,0.1);
+      border-radius: 20px;
+      padding: 32px;
+      transition: all 0.3s;
+    }
+    .integration-card:hover {
+      transform: translateY(-8px);
+      border-color: #FF0066;
+      box-shadow: 0 20px 40px rgba(255, 0, 102, 0.3);
+    }
+    .integration-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+    .integration-icon {
+      font-size: 48px;
+    }
+    .integration-title {
+      font-size: 28px;
+      font-weight: 700;
+    }
+    .integration-status {
+      display: inline-block;
+      padding: 6px 12px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 700;
+      background: rgba(0, 255, 136, 0.2);
+      color: #00ff88;
+      border: 1px solid #00ff88;
+    }
+
+    .integration-content {
+      margin: 24px 0;
+    }
+    .integration-actions {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .action-btn {
+      padding: 12px 24px;
+      border-radius: 10px;
+      border: none;
+      background: var(--gradient);
+      color: white;
+      font-weight: 700;
+      cursor: pointer;
+      transition: transform 0.2s;
+      font-size: 14px;
+    }
+    .action-btn:hover {
+      transform: scale(1.05);
+    }
+    .action-btn.secondary {
+      background: rgba(255,255,255,0.1);
+      border: 1px solid rgba(255,255,255,0.3);
+    }
+
+    input, textarea {
+      width: 100%;
+      padding: 12px;
+      border-radius: 10px;
+      border: 1px solid rgba(255,255,255,0.2);
+      background: rgba(255,255,255,0.05);
+      color: white;
+      font-size: 14px;
+      margin: 8px 0;
+      font-family: inherit;
+    }
+    input:focus, textarea:focus {
+      outline: none;
+      border-color: #FF0066;
+    }
+
+    .data-display {
+      background: rgba(0,0,0,0.3);
+      border-radius: 12px;
+      padding: 16px;
+      margin: 16px 0;
+      font-family: monospace;
+      font-size: 13px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    .data-item {
+      padding: 8px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.1);
+    }
+    .data-item:last-child {
+      border-bottom: none;
+    }
+
+    .loading {
+      text-align: center;
+      padding: 24px;
+      opacity: 0.7;
+    }
+    .spinner {
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      border: 3px solid rgba(255,255,255,0.1);
+      border-top-color: #FF0066;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .repo-card {
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.2);
+      border-radius: 10px;
+      padding: 16px;
+      margin: 8px 0;
+      transition: all 0.2s;
+    }
+    .repo-card:hover {
+      border-color: #7700FF;
+      background: rgba(119, 0, 255, 0.1);
+    }
+    .repo-name {
+      font-weight: 700;
+      font-size: 16px;
+      color: #00ff88;
+      margin-bottom: 8px;
+    }
+    .repo-stats {
+      display: flex;
+      gap: 16px;
+      font-size: 13px;
+      opacity: 0.7;
+    }
+
+    .weather-display {
+      text-align: center;
+      padding: 24px;
+    }
+    .weather-temp {
+      font-size: 64px;
+      font-weight: 900;
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .weather-desc {
+      font-size: 20px;
+      margin: 16px 0;
+    }
+    .weather-details {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+      gap: 16px;
+      margin-top: 24px;
+    }
+    .weather-detail {
+      text-align: center;
+    }
+
+    .email-preview {
+      background: rgba(255,255,255,0.05);
+      border-left: 3px solid #FF0066;
+      padding: 12px;
+      margin: 8px 0;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .email-preview:hover {
+      background: rgba(255,255,255,0.1);
+    }
+    .email-subject {
+      font-weight: 700;
+      margin-bottom: 4px;
+    }
+    .email-from {
+      font-size: 13px;
+      opacity: 0.7;
+    }
+  </style>
+</head>
+<body>
+  <div id="blackroad-nav"></div>
+
+  <div class="hero">
+    <h1>🔗 Live Integrations Hub</h1>
+    <p>Connect BlackRoad OS to your favorite services</p>
+  </div>
+
+  <div class="container">
+    <div class="integrations-grid">
+
+      <!-- GitHub Integration -->
+      <div class="integration-card">
+        <div class="integration-header">
+          <div class="integration-icon">🐙</div>
+          <div>
+            <div class="integration-title">GitHub</div>
+            <span class="integration-status">LIVE</span>
+          </div>
+        </div>
+        <div class="integration-content">
+          <p style="margin-bottom: 16px;">View your GitHub repositories in real-time</p>
+          <input type="text" id="githubUsername" placeholder="Enter GitHub username" value="blackboxprogramming" />
+          <div class="integration-actions">
+            <button class="action-btn" onclick="loadGitHubRepos()">Load Repos</button>
+            <button class="action-btn secondary" onclick="openGitHub()">Open GitHub</button>
+          </div>
+          <div id="githubData" class="data-display" style="display: none;"></div>
+        </div>
+      </div>
+
+      <!-- Weather Integration -->
+      <div class="integration-card">
+        <div class="integration-header">
+          <div class="integration-icon">🌤️</div>
+          <div>
+            <div class="integration-title">Weather</div>
+            <span class="integration-status">LIVE</span>
+          </div>
+        </div>
+        <div class="integration-content">
+          <p style="margin-bottom: 16px;">Real-time weather from OpenWeatherMap</p>
+          <input type="text" id="weatherCity" placeholder="Enter city name" value="San Francisco" />
+          <div class="integration-actions">
+            <button class="action-btn" onclick="loadWeather()">Get Weather</button>
+            <button class="action-btn secondary" onclick="getMyLocation()">Use My Location</button>
+          </div>
+          <div id="weatherData" style="display: none;"></div>
+        </div>
+      </div>
+
+      <!-- Crypto Prices Integration -->
+      <div class="integration-card">
+        <div class="integration-header">
+          <div class="integration-icon">₿</div>
+          <div>
+            <div class="integration-title">Crypto Prices</div>
+            <span class="integration-status">LIVE</span>
+          </div>
+        </div>
+        <div class="integration-content">
+          <p style="margin-bottom: 16px;">Live cryptocurrency prices from CoinGecko</p>
+          <div class="integration-actions">
+            <button class="action-btn" onclick="loadCryptoPrices()">Load Prices</button>
+            <button class="action-btn secondary" onclick="refreshCrypto()">Refresh</button>
+          </div>
+          <div id="cryptoData" class="data-display" style="display: none;"></div>
+        </div>
+      </div>
+
+      <!-- News Integration -->
+      <div class="integration-card">
+        <div class="integration-header">
+          <div class="integration-icon">📰</div>
+          <div>
+            <div class="integration-title">Tech News</div>
+            <span class="integration-status">LIVE</span>
+          </div>
+        </div>
+        <div class="integration-content">
+          <p style="margin-bottom: 16px;">Latest tech news from Hacker News</p>
+          <div class="integration-actions">
+            <button class="action-btn" onclick="loadNews()">Load News</button>
+            <button class="action-btn secondary" onclick="window.open('https://news.ycombinator.com', '_blank')">Open HN</button>
+          </div>
+          <div id="newsData" class="data-display" style="display: none;"></div>
+        </div>
+      </div>
+
+      <!-- Quote of the Day -->
+      <div class="integration-card">
+        <div class="integration-header">
+          <div class="integration-icon">💭</div>
+          <div>
+            <div class="integration-title">Quote of the Day</div>
+            <span class="integration-status">LIVE</span>
+          </div>
+        </div>
+        <div class="integration-content">
+          <p style="margin-bottom: 16px;">Inspirational quotes for motivation</p>
+          <div class="integration-actions">
+            <button class="action-btn" onclick="loadQuote()">Get Quote</button>
+            <button class="action-btn secondary" onclick="loadRandomQuote()">Random Quote</button>
+          </div>
+          <div id="quoteData" class="data-display" style="display: none;"></div>
+        </div>
+      </div>
+
+      <!-- AI Image Generator -->
+      <div class="integration-card">
+        <div class="integration-header">
+          <div class="integration-icon">🎨</div>
+          <div>
+            <div class="integration-title">AI Images</div>
+            <span class="integration-status">DEMO</span>
+          </div>
+        </div>
+        <div class="integration-content">
+          <p style="margin-bottom: 16px;">Generate AI images (placeholder UI)</p>
+          <input type="text" id="imagePrompt" placeholder="Describe your image..." />
+          <div class="integration-actions">
+            <button class="action-btn" onclick="generateImage()">Generate</button>
+            <button class="action-btn secondary" onclick="alert('Coming soon with DALL-E integration!')">Settings</button>
+          </div>
+          <div id="imageData" style="display: none; text-align: center; padding: 24px;">
+            <div style="width: 100%; height: 200px; background: linear-gradient(45deg, #FF9D00, #7700FF); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px;">
+              AI Generated Image Preview
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <script src="/blackroad-api.js"></script>
+  <script src="/blackroad-nav.js"></script>
+  <script>
+    // GitHub Integration
+    async function loadGitHubRepos() {
+      const username = document.getElementById('githubUsername').value.trim();
+      const dataDiv = document.getElementById('githubData');
+
+      if (!username) {
+        alert('Please enter a GitHub username');
+        return;
+      }
+
+      dataDiv.innerHTML = '<div class="loading"><div class="spinner"></div><p>Loading repos...</p></div>';
+      dataDiv.style.display = 'block';
+
+      try {
+        const response = await fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=10`);
+        if (!response.ok) throw new Error('Failed to load repos');
+
+        const repos = await response.json();
+
+        dataDiv.innerHTML = repos.map(repo => `
+          <div class="repo-card" onclick="window.open('${repo.html_url}', '_blank')">
+            <div class="repo-name">📦 ${repo.name}</div>
+            <div style="font-size: 13px; opacity: 0.8; margin: 8px 0;">${repo.description || 'No description'}</div>
+            <div class="repo-stats">
+              <span>⭐ ${repo.stargazers_count}</span>
+              <span>🔀 ${repo.forks_count}</span>
+              <span>${repo.language || 'Unknown'}</span>
+            </div>
+          </div>
+        `).join('');
+      } catch (error) {
+        dataDiv.innerHTML = `<div style="color: #FF0066;">Error: ${error.message}</div>`;
+      }
+    }
+
+    function openGitHub() {
+      const username = document.getElementById('githubUsername').value.trim() || 'blackboxprogramming';
+      window.open(`https://github.com/${username}`, '_blank');
+    }
+
+    // Weather Integration
+    async function loadWeather() {
+      const city = document.getElementById('weatherCity').value.trim();
+      const dataDiv = document.getElementById('weatherData');
+
+      if (!city) {
+        alert('Please enter a city name');
+        return;
+      }
+
+      dataDiv.innerHTML = '<div class="loading"><div class="spinner"></div><p>Loading weather...</p></div>';
+      dataDiv.style.display = 'block';
+
+      try {
+        // Using free weather API (no key needed for demo)
+        const response = await fetch(`https://wttr.in/${encodeURIComponent(city)}?format=j1`);
+        if (!response.ok) throw new Error('Failed to load weather');
+
+        const data = await response.json();
+        const current = data.current_condition[0];
+
+        dataDiv.innerHTML = `
+          <div class="weather-display">
+            <div class="weather-temp">${current.temp_F}°F</div>
+            <div class="weather-desc">${current.weatherDesc[0].value}</div>
+            <div class="weather-details">
+              <div class="weather-detail">
+                <div style="font-size: 24px;">💨</div>
+                <div>${current.windspeedMiles} mph</div>
+              </div>
+              <div class="weather-detail">
+                <div style="font-size: 24px;">💧</div>
+                <div>${current.humidity}%</div>
+              </div>
+              <div class="weather-detail">
+                <div style="font-size: 24px;">👁️</div>
+                <div>${current.visibility} mi</div>
+              </div>
+            </div>
+          </div>
+        `;
+      } catch (error) {
+        dataDiv.innerHTML = `<div style="color: #FF0066;">Error: ${error.message}</div>`;
+      }
+    }
+
+    function getMyLocation() {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(async (position) => {
+          const { latitude, longitude } = position.coords;
+          document.getElementById('weatherCity').value = `${latitude},${longitude}`;
+          await loadWeather();
+        }, () => {
+          alert('Unable to get your location');
+        });
+      } else {
+        alert('Geolocation is not supported by your browser');
+      }
+    }
+
+    // Crypto Prices Integration
+    async function loadCryptoPrices() {
+      const dataDiv = document.getElementById('cryptoData');
+      dataDiv.innerHTML = '<div class="loading"><div class="spinner"></div><p>Loading prices...</p></div>';
+      dataDiv.style.display = 'block';
+
+      try {
+        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana,cardano,polkadot&vs_currencies=usd&include_24hr_change=true');
+        if (!response.ok) throw new Error('Failed to load prices');
+
+        const data = await response.json();
+
+        const coins = {
+          bitcoin: { name: 'Bitcoin', symbol: '₿' },
+          ethereum: { name: 'Ethereum', symbol: 'Ξ' },
+          solana: { name: 'Solana', symbol: 'SOL' },
+          cardano: { name: 'Cardano', symbol: 'ADA' },
+          polkadot: { name: 'Polkadot', symbol: 'DOT' }
+        };
+
+        dataDiv.innerHTML = Object.entries(data).map(([id, info]) => {
+          const change = info.usd_24h_change;
+          const changeColor = change >= 0 ? '#00ff88' : '#FF0066';
+          return `
+            <div class="data-item">
+              <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div>
+                  <strong>${coins[id].symbol} ${coins[id].name}</strong>
+                </div>
+                <div style="text-align: right;">
+                  <div style="font-size: 18px; font-weight: 700;">$${info.usd.toLocaleString()}</div>
+                  <div style="color: ${changeColor}; font-size: 13px;">
+                    ${change >= 0 ? '↗' : '↘'} ${Math.abs(change).toFixed(2)}%
+                  </div>
+                </div>
+              </div>
+            </div>
+          `;
+        }).join('');
+      } catch (error) {
+        dataDiv.innerHTML = `<div style="color: #FF0066;">Error: ${error.message}</div>`;
+      }
+    }
+
+    function refreshCrypto() {
+      loadCryptoPrices();
+    }
+
+    // News Integration
+    async function loadNews() {
+      const dataDiv = document.getElementById('newsData');
+      dataDiv.innerHTML = '<div class="loading"><div class="spinner"></div><p>Loading news...</p></div>';
+      dataDiv.style.display = 'block';
+
+      try {
+        const response = await fetch('https://hacker-news.firebaseio.com/v0/topstories.json');
+        if (!response.ok) throw new Error('Failed to load news');
+
+        const storyIds = await response.json();
+        const topStories = storyIds.slice(0, 10);
+
+        const stories = await Promise.all(
+          topStories.map(id =>
+            fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`).then(r => r.json())
+          )
+        );
+
+        dataDiv.innerHTML = stories.map(story => `
+          <div class="data-item" onclick="window.open('${story.url || `https://news.ycombinator.com/item?id=${story.id}`}', '_blank')" style="cursor: pointer;">
+            <div style="font-weight: 700; margin-bottom: 4px;">📰 ${story.title}</div>
+            <div style="font-size: 12px; opacity: 0.6;">
+              ${story.score} points • ${story.descendants || 0} comments
+            </div>
+          </div>
+        `).join('');
+      } catch (error) {
+        dataDiv.innerHTML = `<div style="color: #FF0066;">Error: ${error.message}</div>`;
+      }
+    }
+
+    // Quote Integration
+    async function loadQuote() {
+      const dataDiv = document.getElementById('quoteData');
+      dataDiv.innerHTML = '<div class="loading"><div class="spinner"></div><p>Loading quote...</p></div>';
+      dataDiv.style.display = 'block';
+
+      try {
+        const response = await fetch('https://api.quotable.io/random?tags=technology,inspirational');
+        if (!response.ok) throw new Error('Failed to load quote');
+
+        const data = await response.json();
+
+        dataDiv.innerHTML = `
+          <div style="padding: 16px;">
+            <div style="font-size: 20px; font-style: italic; margin-bottom: 16px; line-height: 1.6;">
+              "${data.content}"
+            </div>
+            <div style="text-align: right; opacity: 0.8;">
+              — ${data.author}
+            </div>
+          </div>
+        `;
+      } catch (error) {
+        dataDiv.innerHTML = `<div style="color: #FF0066;">Error: ${error.message}</div>`;
+      }
+    }
+
+    function loadRandomQuote() {
+      loadQuote();
+    }
+
+    // AI Image Generator (Demo)
+    function generateImage() {
+      const prompt = document.getElementById('imagePrompt').value.trim();
+      if (!prompt) {
+        alert('Please enter an image description');
+        return;
+      }
+
+      const dataDiv = document.getElementById('imageData');
+      dataDiv.style.display = 'block';
+
+      alert(`Image generation coming soon!\n\nYour prompt: "${prompt}"\n\nWill integrate with DALL-E API or Stable Diffusion`);
+    }
+  </script>
+</body>
+</html>
