diff --git a/index.php b/index.php
index b3a6e19..be088a2 100644
--- a/index.php
+++ b/index.php
@@ -14,56 +14,99 @@ $now        = date('Y-m-d H:i:s');
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>LAMP Workspace</title>
+  <title>Welcome to the LAMP Stack!</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
   <style>
-    :root { color-scheme: light dark; }
-    body { margin: 0; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
-    header { background:#111; color:#fff; padding:16px 24px; }
-    main { max-width: 880px; margin: 32px auto; padding: 0 16px; }
-    h1 { margin: 0 0 8px; font-size: 22px; }
-    h2 { margin-top: 28px; font-size: 18px; }
-    p { margin: 8px 0; }
-    code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
-    pre { background: #0b1020; color: #cfe7ff; padding: 12px; border-radius: 8px; overflow:auto; }
-    .grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-    .card { border:1px solid #ddd; border-radius:8px; padding:12px; }
-    .muted { color:#666; }
-    .kv { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #e3e3e3; }
-    .kv:last-child { border-bottom:0; }
-    footer { color:#777; margin: 28px 0 40px; text-align:center; font-size: 13px; }
+    body {
+      background-color: #f8f9fa;
+    }
+    .hero {
+      background: linear-gradient(to right, #6a11cb, #2575fc);
+      color: white;
+      padding: 4rem 2rem;
+      text-align: center;
+    }
+    .info-card {
+      background-color: white;
+      border-radius: 0.5rem;
+      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+      padding: 2rem;
+      margin-top: -2rem;
+      z-index: 10;
+    }
   </style>
 </head>
 <body>
-  <header>
-    <h1>LAMP stack is ready</h1>
-  </header>
+  <div class="hero">
+    <div class="container">
+      <h1 class="display-4">Behold the Power of LAMP!</h1>
+      <p class="lead">This page is a testament to the flexibility and power of the classic LAMP stack, styled with a modern touch.</p>
+    </div>
+  </div>
 
-  <main>
-    <section class="grid">
-      <div class="card">
-        <h2>Stack</h2>
-        <div class="kv"><span>Web server</span><code><?= htmlspecialchars($server) ?></code></div>
-        <div class="kv"><span>PHP</span><code><?= htmlspecialchars($phpVersion) ?></code></div>
+  <div class="container">
+    <div class="info-card">
+      <h2 class="text-center mb-4">Dynamic Server Information</h2>
+      <div class="row">
+        <div class="col-md-4 text-center">
+          <h5><span class="badge bg-primary">Web Server</span></h5>
+          <p class="fs-4"><?= htmlspecialchars($server) ?></p>
+        </div>
+        <div class="col-md-4 text-center">
+          <h5><span class="badge bg-success">PHP Version</span></h5>
+          <p class="fs-4"><?= htmlspecialchars($phpVersion) ?></p>
+        </div>
+        <div class="col-md-4 text-center">
+          <h5><span class="badge bg-info">Server Time</span></h5>
+          <p class="fs-4"><?= htmlspecialchars($now) ?> (UTC)</p>
+        </div>
       </div>
+    </div>
+
+    <div class="my-5">
+      <h2 class="text-center mb-4">Fun with PHP Loops!</h2>
       <div class="card">
-        <h2>Tips</h2>
-        <p>• Put your app files into this folder.</p>
-        <p>• <code>.htaccess</code> is enabled; <code>index.php</code> has priority.</p>
-        <p>• Errors are shown for development (disable in production).</p>
+        <div class="card-body">
+          <h5 class="card-title">Color Palette</h5>
+          <p class="card-text">Here is a dynamically generated table of colors, created with a simple PHP loop and styled with Bootstrap.</p>
+          <table class="table table-bordered table-striped table-hover">
+            <thead class="table-dark">
+              <tr>
+                <th>Color Name</th>
+                <th>Hex Code</th>
+                <th>Preview</th>
+              </tr>
+            </thead>
+            <tbody>
+              <?php
+              $colors = [
+                  "Crimson" => "#DC143C",
+                  "Gold" => "#FFD700",
+                  "LimeGreen" => "#32CD32",
+                  "DeepSkyBlue" => "#00BFFF",
+                  "MediumOrchid" => "#BA55D3",
+                  "Tomato" => "#FF6347",
+              ];
+
+              foreach ($colors as $name => $hex) {
+                  echo "<tr>";
+                  echo "<td>" . htmlspecialchars($name) . "</td>";
+                  echo "<td>" . htmlspecialchars($hex) . "</td>";
+                  echo "<td style=\"background-color:" . htmlspecialchars($hex) . "\"></td>";
+                  echo "</tr>";
+              }
+              ?>
+            </tbody>
+          </table>
+        </div>
       </div>
-    </section>
+    </div>
+  </div>
 
-    <section>
-      <h2>Try ideas</h2>
-      <p class="muted">You can ask the assistant to generate or modify code. Example requests:</p>
-      <pre><code>"Create a simple landing page with a hero section and a contact form."
-"Build an engineering calculator (e.g., beam deflection or resistor color code)."
-"Refactor the current PHP file for better readability and error handling."
-"Scan the project and list potential security issues in configuration."
-"Add basic routing and a simple controller to serve multiple pages."</code></pre>
-    </section>
+  <footer class="text-center text-muted py-4">
+    <p>Generated by Flatlogic & Gemini</p>
+  </footer>
 
-    <footer>Updated at <?= htmlspecialchars($now) ?> (UTC)</footer>
-  </main>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
