diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..1f9d0f0
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,252 @@
+:root {
+    --navy-blue: #0A2342;
+    --dark-orange: #FF8C00;
+    --white: #FFFFFF;
+    --light-gray: #f4f4f4;
+    --text-color: #333;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+    background-color: var(--light-gray);
+    color: var(--text-color);
+    position: relative; /* For watermark positioning */
+}
+
+body::before {
+    content: "FuelCo";
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-45deg);
+    font-size: 12rem;
+    font-weight: 900;
+    color: rgba(10, 35, 66, 0.07); /* Navy blue with low opacity */
+    pointer-events: none;
+    z-index: 0;
+    white-space: nowrap;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 2rem auto; /* Added top/bottom margin */
+    background-color: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    position: relative; /* Ensure container is above watermark */
+    z-index: 1;
+}
+
+header {
+    background-color: var(--navy-blue);
+    color: var(--white);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 2rem;
+}
+
+.logo h1 {
+    margin: 0;
+    font-size: 1.8rem;
+}
+
+.logo a {
+    color: var(--white);
+    text-decoration: none;
+}
+
+nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+nav li {
+    display: inline-block;
+    margin-left: 1.5rem;
+}
+
+nav a {
+    color: var(--white);
+    text-decoration: none;
+    font-weight: 700;
+    transition: color 0.3s;
+    padding-bottom: 5px;
+}
+
+nav a:hover, nav a.active {
+    color: var(--dark-orange);
+    border-bottom: 2px solid var(--dark-orange);
+}
+
+section {
+    padding: 4rem 2rem;
+    border-bottom: 1px solid #eee;
+}
+
+section:nth-of-type(even) {
+    background-color: rgba(248, 249, 250, 0.8);
+}
+
+section:last-of-type {
+    border-bottom: none;
+}
+
+#hero {
+    text-align: center;
+    padding: 8rem 2rem;
+    background-image: url('https://images.pexels.com/photos/38280/pexels-photo-38280.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
+    background-size: cover;
+    background-position: center;
+    color: var(--white);
+    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    border-radius: 10px 10px 0 0; /* Rounded top corners */
+}
+
+#hero h1 {
+    font-size: 3.5rem;
+    color: var(--white);
+}
+
+#about .about-content {
+    display: flex;
+    gap: 2rem;
+    align-items: flex-start;
+}
+
+.about-text {
+    flex-grow: 1;
+}
+
+.sidebar {
+    flex-basis: 300px;
+    flex-shrink: 0;
+    background-color: rgba(255, 255, 255, 0.7);
+    padding: 1.5rem;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+}
+
+.sidebar h3 {
+    color: var(--navy-blue);
+    border-bottom: 2px solid var(--dark-orange);
+    padding-bottom: 0.5rem;
+    margin-top: 0;
+}
+
+.did-you-know-item {
+    margin-bottom: 1.5rem;
+}
+
+.did-you-know-item p {
+    margin: 0.5rem 0 0;
+    font-size: 0.9rem;
+}
+
+h1, h2 {
+    color: var(--navy-blue);
+}
+
+#gallery .gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+}
+
+.gallery-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.gallery-item img:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
+}
+
+#contact ul {
+    list-style: none;
+    padding: 0;
+}
+
+#contact li {
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+}
+
+#contact a {
+    color: var(--dark-orange);
+    text-decoration: none;
+}
+
+.account-form .form-group {
+    margin-bottom: 1.5rem;
+}
+
+.account-form label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+    color: var(--navy-blue);
+}
+
+.account-form input[type="text"],
+.account-form input[type="email"],
+.account-form input[type="tel"],
+.account-form input[type="file"] {
+    width: 100%;
+    padding: 0.8rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.account-form small {
+    display: block;
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.btn {
+    background-color: var(--dark-orange);
+    color: var(--white);
+    padding: 0.8rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn:hover {
+    background-color: #E57C00; /* A slightly darker orange */
+}
+
+footer {
+    text-align: center;
+    padding: 2rem 1rem;
+    background-color: var(--navy-blue);
+    color: var(--white);
+    border-radius: 0 0 10px 10px; /* Rounded bottom corners */
+}
diff --git a/index.php b/index.php
index 7205f3d..f404b8e 100644
--- a/index.php
+++ b/index.php
@@ -12,139 +12,125 @@ $now = date('Y-m-d H:i:s');
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
+  <title>Fuel Management System</title>
 <?php
 // Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Welcome to our Fuel Management System. Please log in to access your account.';
 $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
 ?>
 <?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
+  <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
   <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>
+  <link rel="stylesheet" href="assets/css/style.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>
+
+  <header>
+    <div class="header-container">
+        <div class="logo">
+            <h1><a href="index.php">FuelCo</a></h1>
+        </div>
+        <nav>
+            <ul>
+                <li><a href="#about">About</a></li>
+                <li><a href="#gallery">Gallery</a></li>
+                <li><a href="#contact">Contact</a></li>
+                <li><a href="#request-account">Request Account</a></li>
+                <li><a href="login.php">Login</a></li>
+            </ul>
+        </nav>
     </div>
-  </main>
+  </header>
+
+  <div class="container">
+    <section id="hero">
+        <h1>Your Reliable Partner for Bulk Fuel</h1>
+        <p>FuelCo provides top-quality diesel and petrol for commercial needs. Our portal allows you to manage orders, view real-time pricing, and track deliveries with ease.</p>
+    </section>
+
+    <section id="about">
+        <h2>About Us</h2>
+        <div class="about-content">
+            <div class="about-text">
+                <p>Founded in 2005, FuelCo has grown to be a leading distributor of commercial fuel. We are committed to reliability, competitive pricing, and outstanding customer service. Our state-of-the-art logistics network ensures timely deliveries to keep your business moving.</p>
+                <p>We serve a wide range of industries, from transportation and construction to agriculture and power generation. Our team of experts is always ready to help you find the best fuel solutions for your specific needs.</p>
+            </div>
+            <aside class="sidebar">
+              <h3>Did You Know?</h3>
+              <div class="did-you-know-item">
+                <p><strong>Regular vehicle maintenance</strong> can improve fuel efficiency by up to 4%.</p>
+              </div>
+              <div class="did-you-know-item">
+                <p>The first gas pump was invented by Sylvanus Bowser in 1885.</p>
+              </div>
+            </aside>
+        </div>
+    </section>
+
+    <section id="gallery">
+        <h2>Gallery</h2>
+        <div class="gallery-grid">
+            <div class="gallery-item"><img src="https://images.pexels.com/photos/2109099/pexels-photo-2109099.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Fuel truck"></div>
+            <div class="gallery-item"><img src="https://images.pexels.com/photos/38280/pexels-photo-38280.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Gas station at night"></div>
+            <div class="gallery-item"><img src="https://images.pexels.com/photos/1578533/pexels-photo-1578533.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Fuel nozzle"></div>
+            <div class="gallery-item"><img src="https://images.pexels.com/photos/2414036/pexels-photo-2414036.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Oil refinery"></div>
+        </div>
+    </section>
+
+    <section id="contact">
+        <h2>Contact Us</h2>
+        <p>Have questions? Get in touch with our team.</p>
+        <ul>
+            <li><strong>Email:</strong> <a href="mailto:sales@fuelco.net">sales@fuelco.net</a></li>
+            <li><strong>Phone:</strong> (800) 555-0199</li>
+            <li><strong>Address:</strong> 123 Fuel Way, Houston, TX 77002</li>
+        </ul>
+    </section>
+
+    <section id="request-account">
+        <h2>Request a Customer Account</h2>
+        <p>Fill out the form below to request a new account. We will review your submission and get back to you shortly.</p>
+        <form action="handle_request.php" method="post" enctype="multipart/form-data" class="account-form">
+            <div class="form-group">
+                <label for="name">Your Full Name</label>
+                <input type="text" id="name" name="name" required>
+            </div>
+            <div class="form-group">
+                <label for="company_name">Company Name</label>
+                <input type="text" id="company_name" name="company_name" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            <div class="form-group">
+                <label for="phone">Phone Number</label>
+                <input type="tel" id="phone" name="phone" required>
+            </div>
+            <div class="form-group">
+                <label for="documents">Company Documentation</label>
+                <input type="file" id="documents" name="documents" required>
+                <small>Please upload relevant company registration documents.</small>
+            </div>
+            <div class="form-group">
+                <button type="submit" class="btn">Submit Request</button>
+            </div>
+        </form>
+    </section>
+  </div>
+
   <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+    <p>&copy; <?= date('Y') ?> FuelCo. All rights reserved.</p>
   </footer>
+
 </body>
-</html>
+</html>
\ No newline at end of file