diff --git a/assets/css/custom.css b/assets/css/custom.css
index 65a1626..ba76059 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,346 +1,155 @@
 :root {
-    --color-bg: #ffffff;
-    --color-text: #1a1a1a;
-    --color-primary: #2563EB; /* Vibrant Blue */
-    --color-secondary: #000000;
-    --color-accent: #A3E635; /* Lime Green */
-    --color-surface: #f8f9fa;
-    --font-heading: 'Space Grotesk', sans-serif;
-    --font-body: 'Inter', sans-serif;
-    --border-width: 2px;
-    --shadow-hard: 5px 5px 0px #000;
-    --shadow-hover: 8px 8px 0px #000;
-    --radius-pill: 50rem;
-    --radius-card: 1rem;
+    --bg-main: #0b0e11;
+    --bg-surface: #161a1e;
+    --bg-surface-light: #1e2329;
+    --text-primary: #eaecef;
+    --text-secondary: #848e9c;
+    --accent-buy: #00ff9d;
+    --accent-sell: #ff3b30;
+    --accent-blue: #3b82f6;
+    --border-color: #2b2f36;
+    --border-radius: 4px;
 }
 
 body {
-    font-family: var(--font-body);
-    background-color: var(--color-bg);
-    color: var(--color-text);
+    background-color: var(--bg-main);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    margin: 0;
     overflow-x: hidden;
 }
 
-h1, h2, h3, h4, h5, h6, .navbar-brand {
-    font-family: var(--font-heading);
-    letter-spacing: -0.03em;
-}
-
-/* Utilities */
-.text-primary { color: var(--color-primary) !important; }
-.bg-black { background-color: #000 !important; }
-.text-white { color: #fff !important; }
-.shadow-hard { box-shadow: var(--shadow-hard); }
-.border-2-black { border: var(--border-width) solid #000; }
-.py-section { padding-top: 5rem; padding-bottom: 5rem; }
-
-/* Navbar */
 .navbar {
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(10px);
-    border-bottom: var(--border-width) solid transparent;
-    transition: all 0.3s;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
+    background-color: var(--bg-surface);
+    border-bottom: 1px solid var(--border-color);
+    padding: 0.5rem 1.5rem;
 }
 
-.navbar.scrolled {
-    border-bottom-color: #000;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
-.brand-text {
-    font-size: 1.5rem;
-    font-weight: 800;
-}
-
-.nav-link {
-    font-weight: 500;
-    color: var(--color-text);
-    margin-left: 1rem;
-    position: relative;
-}
-
-.nav-link:hover, .nav-link.active {
-    color: var(--color-primary);
-}
-
-/* Buttons */
-.btn {
+.navbar-brand {
     font-weight: 700;
-    font-family: var(--font-heading);
-    padding: 0.8rem 2rem;
-    border-radius: var(--radius-pill);
-    border: var(--border-width) solid #000;
-    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
-    box-shadow: var(--shadow-hard);
+    color: var(--accent-buy) !important;
+    letter-spacing: -0.5px;
 }
 
-.btn:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-hover);
+.dashboard-container {
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: 240px 1fr 320px;
+    gap: 1rem;
+    height: calc(100vh - 56px);
 }
 
-.btn:active {
-    transform: translate(2px, 2px);
-    box-shadow: 0 0 0 #000;
+@media (max-width: 1200px) {
+    .dashboard-container {
+        grid-template-columns: 1fr 320px;
+    }
+    .sidebar { display: none; }
 }
 
-.btn-primary {
-    background-color: var(--color-primary);
-    border-color: #000;
-    color: #fff;
+@media (max-width: 768px) {
+    .dashboard-container {
+        grid-template-columns: 1fr;
+        height: auto;
+    }
 }
 
-.btn-primary:hover {
-    background-color: #1d4ed8;
-    border-color: #000;
-    color: #fff;
-}
-
-.btn-outline-dark {
-    background-color: #fff;
-    color: #000;
-}
-
-.btn-cta {
-    background-color: var(--color-accent);
-    color: #000;
-}
-
-.btn-cta:hover {
-    background-color: #8cc629;
-    color: #000;
-}
-
-/* Hero Section */
-.hero-section {
-    min-height: 100vh;
-    padding-top: 80px;
-}
-
-.background-blob {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(80px);
-    opacity: 0.6;
-    z-index: 1;
-}
-
-.blob-1 {
-    top: -10%;
-    right: -10%;
-    width: 600px;
-    height: 600px;
-    background: radial-gradient(circle, var(--color-accent), transparent);
-}
-
-.blob-2 {
-    bottom: 10%;
-    left: -10%;
-    width: 500px;
-    height: 500px;
-    background: radial-gradient(circle, var(--color-primary), transparent);
-}
-
-.highlight-text {
-    background: linear-gradient(120deg, transparent 0%, transparent 40%, var(--color-accent) 40%, var(--color-accent) 100%);
-    background-repeat: no-repeat;
-    background-size: 100% 40%;
-    background-position: 0 88%;
-    padding: 0 5px;
-}
-
-.dot { color: var(--color-primary); }
-
-.badge-pill {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border: 2px solid #000;
-    border-radius: 50px;
-    font-weight: 700;
-    background: #fff;
-    box-shadow: 4px 4px 0 #000;
-    font-family: var(--font-heading);
-    font-size: 0.9rem;
-}
-
-/* Marquee */
-.marquee-container {
-    overflow: hidden;
-    white-space: nowrap;
-    border-top: 2px solid #000;
-    border-bottom: 2px solid #000;
-}
-
-.rotate-divider {
-    transform: rotate(-2deg) scale(1.05);
-    z-index: 10;
-    position: relative;
-    margin-top: -50px;
-    margin-bottom: 30px;
-}
-
-.marquee-content {
-    display: inline-block;
-    animation: marquee 20s linear infinite;
-    font-family: var(--font-heading);
-    font-weight: 700;
-    font-size: 1.5rem;
-    letter-spacing: 2px;
-}
-
-@keyframes marquee {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-50%); }
-}
-
-/* Portfolio Cards */
-.project-card {
-    border: 2px solid #000;
-    border-radius: var(--radius-card);
-    overflow: hidden;
-    background: #fff;
-    transition: transform 0.3s ease;
-    box-shadow: var(--shadow-hard);
-    height: 100%;
+.card-custom {
+    background-color: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     display: flex;
     flex-direction: column;
 }
 
-.project-card:hover {
-    transform: translateY(-10px);
-    box-shadow: 8px 8px 0 #000;
+.card-header-custom {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.card-img-holder {
-    height: 250px;
+.sidebar {
+    background-color: var(--bg-surface);
+    border-right: 1px solid var(--border-color);
+}
+
+.nav-link-custom {
+    padding: 0.75rem 1rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.9rem;
     display: flex;
     align-items: center;
-    justify-content: center;
-    border-bottom: 2px solid #000;
-    position: relative;
-    font-size: 4rem;
+    gap: 0.5rem;
 }
 
-.placeholder-art {
-    transition: transform 0.3s ease;
+.nav-link-custom:hover, .nav-link-custom.active {
+    background-color: var(--bg-surface-light);
+    color: var(--text-primary);
 }
 
-.project-card:hover .placeholder-art {
-    transform: scale(1.2) rotate(10deg);
+.signal-item {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: background 0.2s;
 }
 
-.bg-soft-blue { background-color: #e0f2fe; }
-.bg-soft-green { background-color: #dcfce7; }
-.bg-soft-purple { background-color: #f3e8ff; }
-.bg-soft-yellow { background-color: #fef9c3; }
+.signal-item:hover {
+    background-color: var(--bg-surface-light);
+}
 
-.category-tag {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    background: #000;
-    color: #fff;
-    padding: 5px 12px;
-    border-radius: 20px;
-    font-size: 0.75rem;
+.signal-badge {
+    font-size: 0.7rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 2px;
     font-weight: 700;
 }
 
-.card-body { padding: 1.5rem; }
+.badge-buy { background-color: rgba(0, 255, 157, 0.1); color: var(--accent-buy); }
+.badge-sell { background-color: rgba(255, 59, 48, 0.1); color: var(--accent-sell); }
 
-.link-arrow {
-    text-decoration: none;
-    color: #000;
-    font-weight: 700;
-    display: inline-flex;
-    align-items: center;
-    margin-top: auto;
-}
-
-.link-arrow i { transition: transform 0.2s; margin-left: 5px; }
-.link-arrow:hover i { transform: translateX(5px); }
-
-/* About */
-.about-image-stack {
+.sentiment-meter {
+    height: 8px;
+    background: linear-gradient(to right, var(--accent-sell), #facc15, var(--accent-buy));
+    border-radius: 4px;
     position: relative;
-    height: 400px;
-    width: 100%;
+    margin: 1.5rem 0;
 }
 
-.stack-card {
+.sentiment-pointer {
     position: absolute;
-    width: 80%;
-    height: 100%;
-    border-radius: var(--radius-card);
-    border: 2px solid #000;
-    box-shadow: var(--shadow-hard);
-    left: 10%;
-    transform: rotate(-3deg);
-    background-size: cover;
+    top: -4px;
+    width: 2px;
+    height: 16px;
+    background: white;
+    box-shadow: 0 0 5px rgba(0,0,0,0.5);
+    left: 65%; /* Bullish example */
 }
 
-/* Forms */
-.form-control {
-    border: 2px solid #000;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    font-weight: 500;
-    background: #f8f9fa;
+.text-buy { color: var(--accent-buy); }
+.text-sell { color: var(--accent-sell); }
+
+.price-main { font-size: 1.5rem; font-weight: 700; margin: 0.5rem 0; }
+
+.btn-pulse {
+    background-color: var(--accent-blue);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: var(--border-radius);
+    font-weight: 600;
+    font-size: 0.85rem;
+    transition: filter 0.2s;
 }
 
-.form-control:focus {
-    box-shadow: 4px 4px 0 var(--color-primary);
-    border-color: #000;
-    background: #fff;
-}
+.btn-pulse:hover { filter: brightness(1.2); }
 
-/* Animations */
-.animate-up {
-    opacity: 0;
-    transform: translateY(30px);
-    animation: fadeUp 0.8s ease forwards;
-}
-
-.delay-100 { animation-delay: 0.1s; }
-.delay-200 { animation-delay: 0.2s; }
-
-@keyframes fadeUp {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Social */
-.social-links a {
-    transition: transform 0.2s;
-    display: inline-block;
-}
-.social-links a:hover {
-    transform: scale(1.2) rotate(10deg);
-    color: var(--color-accent) !important;
-}
-
-/* Responsive */
-@media (max-width: 991px) {
-    .rotate-divider {
-        transform: rotate(0);
-        margin-top: 0;
-        margin-bottom: 2rem;
-    }
-    
-    .hero-section {
-        padding-top: 120px;
-        text-align: center;
-        min-height: auto;
-        padding-bottom: 100px;
-    }
-    
-    .display-1 { font-size: 3.5rem; }
-    
-    .blob-1 { width: 300px; height: 300px; right: -20%; }
-    .blob-2 { width: 300px; height: 300px; left: -20%; }
-}
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-main); }
+::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index fdf2cfd..06f7631 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,73 +1,62 @@
 document.addEventListener('DOMContentLoaded', () => {
-    
-    // Smooth scrolling for navigation links
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
-            const targetId = this.getAttribute('href');
-            if (targetId === '#') return;
+    console.log('MarketPulse initialized');
+
+    const refreshBtn = document.getElementById('refresh-signals');
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', () => {
+            refreshBtn.disabled = true;
+            refreshBtn.innerHTML = 'Analyzing...';
             
-            const targetElement = document.querySelector(targetId);
-            if (targetElement) {
-                // Close mobile menu if open
-                const navbarToggler = document.querySelector('.navbar-toggler');
-                const navbarCollapse = document.querySelector('.navbar-collapse');
-                if (navbarCollapse.classList.contains('show')) {
-                    navbarToggler.click();
-                }
+            // Simulate API call
+            setTimeout(() => {
+                refreshBtn.disabled = false;
+                refreshBtn.innerHTML = 'Refresh AI Insights';
+                showToast('Success', 'Market data re-analyzed. 2 new signals found.');
+            }, 1500);
+        });
+    }
 
-                // Scroll with offset
-                const offset = 80;
-                const elementPosition = targetElement.getBoundingClientRect().top;
-                const offsetPosition = elementPosition + window.pageYOffset - offset;
-
-                window.scrollTo({
-                    top: offsetPosition,
-                    behavior: "smooth"
-                });
-            }
+    const signalItems = document.querySelectorAll('.signal-item');
+    signalItems.forEach(item => {
+        item.addEventListener('click', () => {
+            const asset = item.getAttribute('data-asset');
+            updateTradePlan(asset);
+            
+            // Highlight selected
+            signalItems.forEach(i => i.classList.remove('active-signal'));
+            item.classList.add('active-signal');
         });
     });
 
-    // Navbar scroll effect
-    const navbar = document.querySelector('.navbar');
-    window.addEventListener('scroll', () => {
-        if (window.scrollY > 50) {
-            navbar.classList.add('scrolled', 'shadow-sm', 'bg-white');
-            navbar.classList.remove('bg-transparent');
-        } else {
-            navbar.classList.remove('scrolled', 'shadow-sm', 'bg-white');
-            navbar.classList.add('bg-transparent');
-        }
-    });
+    function updateTradePlan(asset) {
+        const title = document.getElementById('plan-asset-title');
+        if (title) title.innerText = asset + ' AI Trade Plan';
+        
+        // Randomize some values for the demo
+        const entry = (Math.random() * 1000).toFixed(2);
+        const sl = (entry * 0.95).toFixed(2);
+        const tp = (entry * 1.1).toFixed(2);
+        
+        document.getElementById('plan-entry').innerText = entry;
+        document.getElementById('plan-sl').innerText = sl;
+        document.getElementById('plan-tp').innerText = tp;
+    }
 
-    // Intersection Observer for fade-up animations
-    const observerOptions = {
-        threshold: 0.1,
-        rootMargin: "0px 0px -50px 0px"
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('animate-up');
-                entry.target.style.opacity = "1";
-                observer.unobserve(entry.target); // Only animate once
-            }
-        });
-    }, observerOptions);
-
-    // Select elements to animate (add a class 'reveal' to them in HTML if not already handled by CSS animation)
-    // For now, let's just make sure the hero animations run. 
-    // If we want scroll animations, we'd add opacity: 0 to elements in CSS and reveal them here.
-    // Given the request, the CSS animation I added runs on load for Hero. 
-    // Let's make the project cards animate in.
-    
-    const projectCards = document.querySelectorAll('.project-card');
-    projectCards.forEach((card, index) => {
-        card.style.opacity = "0";
-        card.style.animationDelay = `${index * 0.1}s`;
-        observer.observe(card);
-    });
-
-});
\ No newline at end of file
+    function showToast(title, message) {
+        // Simple toast implementation or use a library
+        console.log(`${title}: ${message}`);
+        const toast = document.createElement('div');
+        toast.style.position = 'fixed';
+        toast.style.bottom = '20px';
+        toast.style.right = '20px';
+        toast.style.background = 'var(--bg-surface-light)';
+        toast.style.border = '1px solid var(--accent-blue)';
+        toast.style.color = 'white';
+        toast.style.padding = '10px 20px';
+        toast.style.borderRadius = '4px';
+        toast.style.zIndex = '1000';
+        toast.innerHTML = `<strong>${title}</strong>: ${message}`;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 3000);
+    }
+});
diff --git a/db/init_db.php b/db/init_db.php
new file mode 100644
index 0000000..5b37ee0
--- /dev/null
+++ b/db/init_db.php
@@ -0,0 +1,33 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+try {
+    $db = db();
+    
+    // Create signals table
+    $db->exec("CREATE TABLE IF NOT EXISTS signals (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        asset VARCHAR(20) NOT NULL,
+        type ENUM('BUY', 'SELL') NOT NULL,
+        price DECIMAL(20, 8) NOT NULL,
+        sl DECIMAL(20, 8),
+        tp DECIMAL(20, 8),
+        risk_reward DECIMAL(5, 2),
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )");
+
+    // Check if empty and insert mock data
+    $stmt = $db->query("SELECT COUNT(*) FROM signals");
+    if ($stmt->fetchColumn() == 0) {
+        $db->exec("INSERT INTO signals (asset, type, price, sl, tp, risk_reward) VALUES 
+            ('BTC/USDT', 'BUY', 65432.10, 64000.00, 68000.00, 2.5),
+            ('ETH/USDT', 'SELL', 3456.78, 3550.00, 3200.00, 1.8),
+            ('EUR/USD', 'BUY', 1.0850, 1.0820, 1.0920, 2.3),
+            ('AAPL', 'BUY', 185.60, 180.00, 195.00, 1.9),
+            ('XAU/USD', 'SELL', 2035.45, 2050.00, 2000.00, 2.4)
+        ");
+    }
+    echo "Database initialized successfully.";
+} catch (PDOException $e) {
+    echo "Error: " . $e->getMessage();
+}
diff --git a/index.php b/index.php
index 7205f3d..8b9e399 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,262 @@
 <?php
 declare(strict_types=1);
+require_once __DIR__ . '/db/config.php';
+
 @ini_set('display_errors', '1');
 @error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+$db = db();
+$signals = $db->query("SELECT * FROM signals ORDER BY created_at DESC")->fetchAll();
+
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'MarketPulse - AI-powered multi-asset trading companion.';
+$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
 ?>
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>MarketPulse | AI Trading Companion</title>
+    
+    <?php if ($projectDescription): ?>
+    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    <?php endif; ?>
+    
+    <?php if ($projectImageUrl): ?>
+    <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+    <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+    <?php endif; ?>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="assets/css/custom.css?v=<?= time() ?>" rel="stylesheet">
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+
+<nav class="navbar sticky-top">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">MARKETPULSE</a>
+        <div class="d-flex align-items-center">
+            <span class="text-secondary small me-3">Market: <span class="text-buy">Bullish (65%)</span></span>
+            <div class="btn-group">
+                <button class="btn btn-sm btn-outline-secondary dropdown-toggle text-white" type="button" data-bs-toggle="dropdown">
+                    Personal Account
+                </button>
+                <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
+                    <li><a class="dropdown-item" href="#">Profile</a></li>
+                    <li><a class="dropdown-item" href="#">Organization Settings</a></li>
+                    <li><hr class="dropdown-divider"></li>
+                    <li><a class="dropdown-item" href="#">Logout</a></li>
+                </ul>
+            </div>
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+</nav>
+
+<div class="dashboard-container">
+    <!-- Sidebar -->
+    <div class="sidebar d-none d-xl-flex flex-column">
+        <div class="p-3 border-bottom border-secondary">
+            <h6 class="small text-secondary mb-0">ASSETS</h6>
+        </div>
+        <nav class="flex-grow-1 overflow-auto">
+            <a href="#" class="nav-link-custom active">Crypto</a>
+            <a href="#" class="nav-link-custom">Forex</a>
+            <a href="#" class="nav-link-custom">Stocks</a>
+            <a href="#" class="nav-link-custom">Commodities</a>
+            <div class="p-3 mt-4 border-top border-secondary">
+                <h6 class="small text-secondary mb-0">STRATEGY</h6>
+            </div>
+            <a href="#" class="nav-link-custom">Backtesting</a>
+            <a href="#" class="nav-link-custom">Simulation</a>
+            <a href="#" class="nav-link-custom">Portfolio</a>
+        </nav>
+        <div class="p-3 border-top border-secondary mt-auto">
+            <div class="card-custom p-2 text-center bg-surface-light border-0">
+                <p class="small mb-1 text-secondary">PRO TIER ACTIVE</p>
+                <div class="progress mb-2" style="height: 4px; background: #2b2f36;">
+                    <div class="progress-bar bg-primary" style="width: 100%"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+        <div class="row g-3 h-100">
+            <!-- Market Stats -->
+            <div class="col-12 col-lg-8">
+                <div class="card-custom h-100">
+                    <div class="card-header-custom">
+                        <span>MARKET SENTIMENT (REAL-TIME)</span>
+                        <span class="text-buy">Live Updates</span>
+                    </div>
+                    <div class="card-body p-4 text-center">
+                        <h2 class="mb-4">Fear & Greed Index: <span class="text-buy">68 (Greed)</span></h2>
+                        <div class="sentiment-meter">
+                            <div class="sentiment-pointer"></div>
+                        </div>
+                        <div class="d-flex justify-content-between text-secondary small">
+                            <span>EXTREME FEAR</span>
+                            <span>NEUTRAL</span>
+                            <span>EXTREME GREED</span>
+                        </div>
+                        
+                        <div class="row mt-5">
+                            <div class="col-md-4">
+                                <p class="text-secondary small mb-1">BTC/USDT</p>
+                                <p class="h4 mb-0">$65,432.10</p>
+                                <span class="text-buy small">+2.45%</span>
+                            </div>
+                            <div class="col-md-4 border-start border-secondary">
+                                <p class="text-secondary small mb-1">ETH/USDT</p>
+                                <p class="h4 mb-0">$3,456.78</p>
+                                <span class="text-sell small">-1.12%</span>
+                            </div>
+                            <div class="col-md-4 border-start border-secondary">
+                                <p class="text-secondary small mb-1">NASDAQ 100</p>
+                                <p class="h4 mb-0">18,234.50</p>
+                                <span class="text-buy small">+0.85%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Trade Plan -->
+            <div class="col-12 col-lg-4">
+                <div class="card-custom h-100" id="trade-plan-card">
+                    <div class="card-header-custom">
+                        <span id="plan-asset-title">BTC/USDT AI TRADE PLAN</span>
+                        <span class="badge bg-primary text-white">PRO</span>
+                    </div>
+                    <div class="card-body p-3">
+                        <div class="d-flex justify-content-between mb-3">
+                            <div>
+                                <p class="text-secondary small mb-0">Action</p>
+                                <p class="fw-bold text-buy mb-0">STRONG BUY</p>
+                            </div>
+                            <div class="text-end">
+                                <p class="text-secondary small mb-0">R:R Ratio</p>
+                                <p class="fw-bold mb-0">1 : 2.5</p>
+                            </div>
+                        </div>
+                        
+                        <div class="mb-3">
+                            <label class="text-secondary small">Entry Target</label>
+                            <div class="price-main">$<span id="plan-entry">65,432.10</span></div>
+                        </div>
+
+                        <div class="row g-2 mb-4">
+                            <div class="col-6">
+                                <div class="bg-surface-light p-2 border border-secondary rounded">
+                                    <p class="text-secondary x-small mb-0">Stop Loss</p>
+                                    <p class="text-sell fw-bold mb-0">$<span id="plan-sl">64,000.00</span></p>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="bg-surface-light p-2 border border-secondary rounded">
+                                    <p class="text-secondary x-small mb-0">Take Profit</p>
+                                    <p class="text-buy fw-bold mb-0">$<span id="plan-tp">68,000.00</span></p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-2 border border-dashed border-secondary rounded mb-3">
+                            <p class="small text-secondary mb-1 italic">AI Reasoning:</p>
+                            <p class="small mb-0 text-white opacity-75">Strong rejection at $64k support with RSI divergence on 4H chart. Momentum shifting bullish.</p>
+                        </div>
+
+                        <button class="btn btn-pulse w-100 py-2">EXECUTE TRADE (API)</button>
+                        <p class="x-small text-secondary text-center mt-2 mb-0">Ensure your API keys are linked in settings.</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Signal Feed -->
+            <div class="col-12">
+                <div class="card-custom">
+                    <div class="card-header-custom">
+                        <span>LATEST AI SIGNALS</span>
+                        <button id="refresh-signals" class="btn btn-link btn-sm text-decoration-none text-blue p-0">Refresh AI Insights</button>
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="table-responsive">
+                            <table class="table table-dark table-hover mb-0">
+                                <thead>
+                                    <tr class="small text-secondary">
+                                        <th class="ps-4">ASSET</th>
+                                        <th>TYPE</th>
+                                        <th>PRICE</th>
+                                        <th>SL / TP</th>
+                                        <th>R:R</th>
+                                        <th>TIME</th>
+                                        <th class="text-end pe-4">ACTION</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <?php foreach ($signals as $s): ?>
+                                    <tr class="signal-item align-middle" data-asset="<?= htmlspecialchars($s['asset']) ?>">
+                                        <td class="ps-4 fw-bold"><?= htmlspecialchars($s['asset']) ?></td>
+                                        <td>
+                                            <span class="signal-badge <?= $s['type'] === 'BUY' ? 'badge-buy' : 'badge-sell' ?>">
+                                                <?= $s['type'] ?>
+                                            </span>
+                                        </td>
+                                        <td>$<?= number_format((float)$s['price'], 2) ?></td>
+                                        <td class="small">
+                                            <span class="text-sell">$<?= number_format((float)$s['sl'], 2) ?></span> / 
+                                            <span class="text-buy">$<?= number_format((float)$s['tp'], 2) ?></span>
+                                        </td>
+                                        <td><?= $s['risk_reward'] ?></td>
+                                        <td class="text-secondary small"><?= date('H:i:s', strtotime($s['created_at'])) ?></td>
+                                        <td class="text-end pe-4">
+                                            <button class="btn btn-sm btn-outline-secondary py-0">View Plan</button>
+                                        </td>
+                                    </tr>
+                                    <?php endforeach; ?>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Alert Panel -->
+    <div class="alert-panel d-none d-xxl-block">
+        <div class="card-custom h-100">
+            <div class="card-header-custom">
+                <span>NOTIFICATIONS</span>
+                <span class="badge rounded-pill bg-danger">2</span>
+            </div>
+            <div class="card-body p-3 overflow-auto">
+                <div class="p-2 border-bottom border-secondary mb-2">
+                    <p class="x-small text-secondary mb-1">14:05:22</p>
+                    <p class="small mb-0">BTC/USDT hit Target 1. Trailing SL activated.</p>
+                </div>
+                <div class="p-2 border-bottom border-secondary mb-2">
+                    <p class="x-small text-secondary mb-1">13:45:10</p>
+                    <p class="small mb-0">New Signal: EUR/USD Buy. High conviction.</p>
+                </div>
+                <div class="p-2">
+                    <p class="x-small text-secondary mb-1">12:10:05</p>
+                    <p class="small mb-0">Subscription renewed. Welcome back!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<footer class="p-2 text-center border-top border-secondary bg-surface small text-secondary">
+    &copy; <?= date('Y') ?> MarketPulse. For educational purposes only. High risk trading involves loss. 
+    <span class="ms-3">PHP <?= PHP_VERSION ?> | UTC <?= date('H:i:s') ?></span>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script src="assets/js/main.js?v=<?= time() ?>"></script>
 </body>
-</html>
+</html>
\ No newline at end of file