diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..0536329
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,104 @@
+:root {
+    --bs-dark-rgb: 17, 24, 39;
+    --bs-body-bg: #111827;
+    --bs-body-color: #F9FAFB;
+    --primary-color: #00A8E8;
+    --surface-color: #1F2937;
+}
+
+body {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.navbar {
+    background-color: rgba(17, 24, 39, 0.8);
+    backdrop-filter: blur(10px);
+}
+
+.navbar-brand {
+    font-weight: bold;
+}
+
+#hero {
+    padding: 100px 0;
+    background: linear-gradient(180deg, var(--bs-body-bg) 0%, var(--surface-color) 100%);
+}
+
+#hero h1 {
+    font-weight: 700;
+    color: #fff;
+}
+
+.lead {
+    color: #d1d5db;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    padding: 12px 30px;
+    font-weight: bold;
+    border-radius: 0.5rem;
+    transition: background-color 0.3s, border-color 0.3s;
+}
+
+.btn-primary:hover {
+    background-color: #0077b6;
+    border-color: #0077b6;
+}
+
+section {
+    border-bottom: 1px solid var(--surface-color);
+}
+
+.bg-dark-surface {
+    background-color: var(--surface-color);
+}
+
+.card {
+    background-color: #374151;
+    border: none;
+    border-radius: 0.5rem;
+    color: var(--bs-body-color);
+}
+
+.form-control {
+    background-color: #4b5563;
+    border-color: #6b7280;
+    color: #fff;
+    border-radius: 0.5rem;
+}
+
+.form-control:focus {
+    background-color: #4b5563;
+    border-color: var(--primary-color);
+    color: #fff;
+    box-shadow: 0 0 0 0.25rem rgba(0, 168, 232, 0.25);
+}
+
+.form-control::placeholder {
+    color: #9ca3af;
+}
+
+.form-label {
+    color: #d1d5db;
+}
+
+.text-primary {
+    color: var(--primary-color) !important;
+}
+
+footer {
+    background-color: var(--surface-color);
+    color: #9ca3af;
+}
+
+.alert {
+    border-radius: 0;
+    position: fixed;
+    top: 56px; /* Height of navbar */
+    width: 100%;
+    z-index: 1031; /* Above sticky navbar */
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..3bcb657
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,15 @@
+document.querySelectorAll('a.nav-link').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+
+        const targetId = this.getAttribute('href');
+        const targetElement = document.querySelector(targetId);
+
+        if (targetElement) {
+            window.scrollTo({
+                top: targetElement.offsetTop - 70, // Adjust for sticky navbar height
+                behavior: 'smooth'
+            });
+        }
+    });
+});
diff --git a/contact.php b/contact.php
new file mode 100644
index 0000000..867f80f
--- /dev/null
+++ b/contact.php
@@ -0,0 +1,26 @@
+<?php
+require_once __DIR__ . '/mail/MailService.php';
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $name = filter_var(trim($_POST["name"]), FILTER_SANITIZE_STRING);
+    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
+    $message = filter_var(trim($_POST["message"]), FILTER_SANITIZE_STRING);
+
+    if (empty($name) || !filter_var($email, FILTER_VALIDATE_EMAIL) || empty($message)) {
+        header("Location: index.php?status=error");
+        exit;
+    }
+
+    // The MailService will use the default recipient from the .env file
+    // It will use the sender's email as the Reply-To address.
+    $res = MailService::sendContactMessage($name, $email, $message);
+
+    if (!empty($res['success'])) {
+        header("Location: index.php?status=success#contact");
+    } else {
+        // In a real app, you would log the error stored in $res['error']
+        header("Location: index.php?status=error#contact");
+    }
+} else {
+    header("Location: index.php");
+}
diff --git a/index.php b/index.php
index 7205f3d..0c7122f 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,149 @@
-<?php
-declare(strict_types=1);
-@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');
-?>
-<!doctype html>
+<!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.0">
+    <title>PaperTrade Lab</title>
+    <meta name="description" content="PaperTrade Lab - The ultimate platform for paper trading crypto, forex, and stocks. Real-time charts, news, and portfolio tracking.">
+    <meta name="keywords" content="paper trading, crypto simulator, forex trading, stock market game, investment learning, trading practice, Borsa Istanbul, financial markets">
+    <meta property="og:title" content="PaperTrade Lab">
+    <meta property="og:description" content="The ultimate platform for paper trading crypto, forex, and stocks.">
+    <meta property="og:image" content="">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </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>
-    </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
+        <div class="container">
+            <a class="navbar-brand" href="#">PaperTrade Lab</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link" href="#hero">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <main>
+        <?php if (isset($_GET['status']) && $_GET['status'] == 'success'): ?>
+            <div class="alert alert-success alert-dismissible fade show" role="alert">
+                <strong>Thank you!</strong> Your message has been sent successfully.
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        <?php elseif (isset($_GET['status']) && $_GET['status'] == 'error'): ?>
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                <strong>Error!</strong> There was a problem sending your message. Please try again.
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+        <?php endif; ?>
+
+        <section id="hero" class="text-center">
+            <div class="container">
+                <h1 class="display-4">Welcome to PaperTrade Lab</h1>
+                <p class="lead">Your personal sandbox for mastering the financial markets. Practice trading crypto, forex, and stocks with zero risk.</p>
+                <a href="#contact" class="btn btn-primary btn-lg">Get Early Access</a>
+            </div>
+        </section>
+
+        <section id="about" class="py-5">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-md-6">
+                        <h2>About The Project</h2>
+                        <p>PaperTrade Lab is a mobile-first application designed for both aspiring and experienced traders. It provides a hyper-realistic simulation of trading environments across various markets, including cryptocurrencies, forex, and the Borsa Istanbul. Our goal is to empower you to test strategies, learn market dynamics, and build confidence without risking real capital.</p>
+                    </div>
+                    <div class="col-md-6 text-center">
+                        <i class="bi bi-phone-stack display-1 text-primary"></i>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="features" class="py-5 bg-dark-surface">
+            <div class="container">
+                <h2 class="text-center mb-5">Features</h2>
+                <div class="row">
+                    <div class="col-md-4 mb-4">
+                        <div class="card h-100">
+                            <div class="card-body text-center">
+                                <i class="bi bi-graph-up-arrow display-4 text-primary mb-3"></i>
+                                <h5 class="card-title">Real-Time Charts</h5>
+                                <p class="card-text">Interactive candlestick charts with professional-grade indicators to analyze market movements.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4 mb-4">
+                        <div class="card h-100">
+                            <div class="card-body text-center">
+                                <i class="bi bi-safe2 display-4 text-primary mb-3"></i>
+                                <h5 class="card-title">Risk-Free Trading</h5>
+                                <p class="card-text">Execute market and limit orders with a mock portfolio to track your P&L and trade history.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4 mb-4">
+                        <div class="card h-100">
+                            <div class="card-body text-center">
+                                <i class="bi bi-newspaper display-4 text-primary mb-3"></i>
+                                <h5 class="card-title">Curated News Feed</h5>
+                                <p class="card-text">Stay informed with a news feed filtered by the markets and instruments you follow.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="contact" class="py-5">
+            <div class="container">
+                <h2 class="text-center mb-4">Contact Us</h2>
+                <div class="row justify-content-center">
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-body">
+                                <form action="contact.php" method="POST">
+                                    <div class="mb-3">
+                                        <label for="name" class="form-label">Name</label>
+                                        <input type="text" class="form-control" id="name" name="name" required>
+                                    </div>
+                                    <div class="mb-3">
+                                        <label for="email" class="form-label">Email</label>
+                                        <input type="email" class="form-control" id="email" name="email" required>
+                                    </div>
+                                    <div class="mb-3">
+                                        <label for="message" class="form-label">Message</label>
+                                        <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
+                                    </div>
+                                    <div class="d-grid">
+                                        <button type="submit" class="btn btn-primary">Send Message</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="text-center py-4">
+        <div class="container">
+            <p>&copy; 2025 PaperTrade Lab. All Rights Reserved.</p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
-</html>
+</html>
\ No newline at end of file