diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7c6a1b5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,37 @@
+# AFG_CARS - Supreme Automotive Marketplace
+
+An enterprise-level car dealership management system built for professional, offline-ready deployment.
+
+## 👥 Admin Credentials
+**Access Link:** [Admin Panel](setup.php) (Initial setup & login dashboard)
+
+- **Username:** `admin`
+- **Password:** `admin123`
+- **Role:** Super Admin (Full system control)
+
+## 🏢 System Architecture (Multi-Page)
+The application follows a professional Multi-Page Architecture (MPA) where each section is a standalone `.php` file for better performance and SEO:
+
+- **Home (`index.php`):** Featured showcase, luxury hero section, testimonials, and branch locations.
+- **Marketplace (`marketplace.php`):** Complete vehicle inventory with dynamic filters and installment previews.
+- **Work (`work.php`):** Detailed step-by-step guides for buying and selling processes.
+- **About (`about.php`):** Company history, mission, and business statistics.
+- **Contact (`contact.php`):** Professional inquiry form and regional office contacts.
+
+## 🛠 Features
+- **Supreme Design:** 100% custom Dark-Themed CSS with Gold accents (No Bootstrap/CDN).
+- **Offline Ready:** All assets (images, fonts, scripts) are stored locally for XAMPP deployment.
+- **Multi-Branch:** Integrated data management for Kabul, Herat, Mazar, and Kandahar.
+- **Installment System:** Automated calculation logic for monthly payments.
+- **Enterprise RBAC:** Prepared structure for Guests, Dealers, and Admins.
+
+## 🚀 Installation
+1. Place the project folder inside your `htdocs` directory.
+2. Ensure MySQL/MariaDB is running.
+3. Open `http://localhost/your-folder-name/setup.php` in your browser.
+4. Click **"Run Automated Setup"** to initialize the database and seed 20 premium cars.
+
+---
+**Developed by:** Mohammad Sadiq
+**Project Type:** University Final-Year Enterprise System
+**Environment:** PHP 8.x + MariaDB (100% Offline)
diff --git a/about.php b/about.php
new file mode 100644
index 0000000..d0a5f5c
--- /dev/null
+++ b/about.php
@@ -0,0 +1,59 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/header.php';
+?>
+
+<section class="container" style="padding-top: 6rem;">
+    <div class="section-grid">
+        <div>
+            <div class="section-title" style="display: block; margin-bottom: 2rem;">
+                <h1>About AFG_CARS</h1>
+                <p style="color: var(--accent-color); font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Establishing Excellence Since 2014</p>
+            </div>
+            <p style="color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.1rem; line-height: 2;">
+                AFG_CARS is Afghanistan's premier destination for high-end automotive solutions. We specialize in sourcing the world's most desired luxury and performance vehicles, ensuring each one meets our strict criteria for quality and history.
+            </p>
+            <p style="color: var(--text-secondary); margin-bottom: 3rem; line-height: 1.8;">
+                Our revolutionary installment programs have made luxury ownership possible for thousands of Afghan citizens, providing a transparent and secure path to vehicle ownership without the burden of immediate full-capital expenditure.
+            </p>
+            
+            <div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2rem;">
+                <div class="feature-box" style="padding: 1.5rem; text-align: left;">
+                    <h4 style="color: var(--accent-color); margin-bottom: 0.5rem;"><i class="fas fa-eye" style="font-size: 1.2rem; margin-bottom: 0;"></i> Our Vision</h4>
+                    <p style="font-size: 0.85rem;">To modernize the Afghan automotive market through technology and transparency.</p>
+                </div>
+                <div class="feature-box" style="padding: 1.5rem; text-align: left;">
+                    <h4 style="color: var(--accent-color); margin-bottom: 0.5rem;"><i class="fas fa-bullseye" style="font-size: 1.2rem; margin-bottom: 0;"></i> Our Mission</h4>
+                    <p style="font-size: 0.85rem;">Providing quality vehicles for every road and every budget with absolute integrity.</p>
+                </div>
+            </div>
+        </div>
+
+        <div style="background: var(--surface-color); padding: 4rem; border-radius: var(--border-radius); border: 1px solid var(--border-color); box-shadow: 0 30px 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: center;">
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;">
+                <div style="text-align: center;">
+                    <div style="font-size: 3.5rem; font-weight: 900; color: #fff;">2K+</div>
+                    <div style="color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Cars Delivered</div>
+                </div>
+                <div style="text-align: center;">
+                    <div style="font-size: 3.5rem; font-weight: 900; color: #fff;">04</div>
+                    <div style="color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Showrooms</div>
+                </div>
+                <div style="text-align: center;">
+                    <div style="font-size: 3.5rem; font-weight: 900; color: #fff;">15+</div>
+                    <div style="color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Global Partners</div>
+                </div>
+                <div style="text-align: center;">
+                    <div style="font-size: 3.5rem; font-weight: 900; color: #fff;">100%</div>
+                    <div style="color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Verified Stock</div>
+                </div>
+            </div>
+            <div style="margin-top: 4rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2rem;">
+                <p style="font-size: 0.9rem; color: var(--text-secondary);">Enterprise System Managed by <strong>Mohammad Sadiq</strong></p>
+                <p style="font-size: 0.7rem; color: var(--text-secondary); opacity: 0.4; margin-top: 0.5rem;">Lamp Stack | MariaDB | PHP 8.2 | Premium UI</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..12e81c5
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,491 @@
+:root {
+    --bg-color: #050505;
+    --surface-color: #111111;
+    --card-bg: #181818;
+    --accent-color: #d4af37; /* Supreme Gold */
+    --accent-hover: #f1c40f;
+    --text-primary: #ffffff;
+    --text-secondary: #a0a0a0;
+    --border-radius: 12px;
+    --glass-bg: rgba(5, 5, 5, 0.9);
+    --border-color: rgba(212, 175, 55, 0.15);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+/* Header */
+header {
+    background: var(--glass-bg);
+    backdrop-filter: blur(15px);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 5%;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 1.6rem;
+    font-weight: 900;
+    color: var(--accent-color);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    cursor: pointer;
+}
+
+.logo span {
+    color: var(--text-primary);
+}
+
+nav ul {
+    display: flex;
+    list-style: none;
+    gap: 2.5rem;
+    align-items: center;
+}
+
+nav a {
+    text-decoration: none;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: 0.3s;
+}
+
+nav a:hover, nav a.active {
+    color: var(--accent-color);
+}
+
+.admin-link {
+    background: rgba(212, 175, 55, 0.1);
+    padding: 0.6rem 1.2rem !important;
+    border-radius: 30px;
+    color: var(--accent-color) !important;
+    border: 1px solid var(--border-color);
+}
+
+/* Hero */
+.hero {
+    min-height: 95vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5rem 5%;
+    text-align: center;
+    background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('../images/hero/bg.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.hero h1 {
+    font-size: 5rem;
+    font-weight: 900;
+    margin-bottom: 1.5rem;
+    line-height: 1;
+    max-width: 1000px;
+}
+
+.hero h1 span {
+    color: var(--accent-color);
+}
+
+.hero p {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    max-width: 700px;
+    margin-bottom: 3rem;
+}
+
+.hero-btns {
+    display: flex;
+    gap: 2rem;
+}
+
+/* Sections */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 8rem 5%;
+}
+
+.section-title {
+    margin-bottom: 4rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.section-title h1, .section-title h2 {
+    font-size: 3rem;
+    font-weight: 800;
+    letter-spacing: -1px;
+}
+
+.section-title p {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    margin-top: 0.5rem;
+}
+
+/* Grid System */
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 3rem;
+}
+
+/* Cards */
+.car-card {
+    background: var(--surface-color);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    border: 1px solid rgba(255,255,255,0.05);
+    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.car-card:hover {
+    transform: translateY(-10px);
+    border-color: var(--accent-color);
+}
+
+.car-image {
+    position: relative;
+    height: 240px;
+}
+
+.car-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.car-badge {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    background: var(--accent-color);
+    color: #000;
+    padding: 0.5rem 1rem;
+    font-size: 0.7rem;
+    font-weight: 900;
+    border-radius: 4px;
+}
+
+.car-content {
+    padding: 2rem;
+}
+
+.car-title {
+    font-size: 1.4rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+
+.car-price {
+    font-size: 1.8rem;
+    color: var(--accent-color);
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+}
+
+.car-meta {
+    display: flex;
+    gap: 1.5rem;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    margin-bottom: 1rem;
+}
+
+.car-meta i {
+    color: var(--accent-color);
+}
+
+.installment-box {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background: rgba(212, 175, 55, 0.05);
+    border: 1px dashed var(--accent-color);
+    border-radius: 8px;
+    font-size: 0.9rem;
+}
+
+.installment-box strong {
+    color: var(--accent-color);
+}
+
+/* Buttons */
+.btn {
+    padding: 1.2rem 3rem;
+    background: var(--accent-color);
+    color: #000;
+    text-decoration: none;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    border-radius: var(--border-radius);
+    border: 2px solid var(--accent-color);
+    transition: 0.3s;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 0.9rem;
+}
+
+.btn:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+    transform: scale(1.05);
+}
+
+.btn-outline {
+    background: transparent;
+    color: var(--accent-color);
+}
+
+.btn-outline:hover {
+    background: var(--accent-color);
+    color: #000;
+}
+
+/* Feature Boxes (Why Choose Us) */
+.feature-box {
+    padding: 3rem;
+    background: var(--surface-color);
+    border-radius: var(--border-radius);
+    text-align: center;
+    border: 1px solid rgba(255,255,255,0.03);
+    transition: 0.3s;
+}
+
+.feature-box:hover {
+    border-color: var(--accent-color);
+    background: rgba(212, 175, 55, 0.02);
+}
+
+.feature-box i {
+    font-size: 3rem;
+    color: var(--accent-color);
+    margin-bottom: 2rem;
+}
+
+.feature-box h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.feature-box p {
+    color: var(--text-secondary);
+}
+
+/* Reviews */
+.review-card {
+    background: var(--surface-color);
+    padding: 2.5rem;
+    border-radius: var(--border-radius);
+    border: 1px solid rgba(255,255,255,0.05);
+    transition: 0.3s;
+}
+
+.review-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+
+.review-header {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.customer-photo {
+    width: 60px;
+    height: 60px;
+    background: var(--accent-color);
+    color: #000;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 900;
+    font-size: 1.2rem;
+}
+
+.stars {
+    color: var(--accent-color);
+    margin-bottom: 1.5rem;
+    font-size: 0.8rem;
+}
+
+/* Locations */
+.location-card {
+    background: var(--surface-color);
+    padding: 2.5rem;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+}
+
+.location-card h3 {
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: var(--accent-color);
+}
+
+.location-info p {
+    margin-bottom: 1rem;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+/* Footer */
+footer {
+    background: #000;
+    padding: 8rem 5% 4rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.footer-container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1.5fr;
+    gap: 5rem;
+    max-width: 1400px;
+    margin: 0 auto 5rem;
+}
+
+.footer-section h3 {
+    margin-bottom: 2rem;
+    color: var(--text-primary);
+    text-transform: uppercase;
+    font-size: 1.1rem;
+    letter-spacing: 2px;
+}
+
+.footer-section ul {
+    list-style: none;
+}
+
+.footer-section li {
+    margin-bottom: 1rem;
+}
+
+.footer-section a {
+    text-decoration: none;
+    color: var(--text-secondary);
+    transition: 0.3s;
+}
+
+.footer-section a:hover {
+    color: var(--accent-color);
+    padding-left: 10px;
+}
+
+.social-links {
+    display: flex;
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+.social-links a {
+    width: 45px;
+    height: 45px;
+    background: var(--surface-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-primary);
+    transition: 0.3s;
+}
+
+.social-links a:hover {
+    background: var(--accent-color);
+    color: #000;
+    transform: rotate(360deg);
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: 4rem;
+    border-top: 1px solid rgba(255,255,255,0.05);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+/* Forms */
+.form-group {
+    margin-bottom: 2rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.8rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.form-group input, .form-group textarea {
+    width: 100%;
+    padding: 1.2rem;
+    background: var(--bg-color);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 8px;
+    color: #fff;
+    outline: none;
+    transition: 0.3s;
+}
+
+.form-group input:focus, .form-group textarea:focus {
+    border-color: var(--accent-color);
+}
+
+/* Section Grid for Subpages */
+.section-grid {
+    display: grid;
+    grid-template-columns: 1.2fr 1fr;
+    gap: 5rem;
+}
+
+@media (max-width: 1024px) {
+    .section-grid {
+        grid-template-columns: 1fr;
+    }
+    .hero h1 {
+        font-size: 3.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .footer-container {
+        grid-template-columns: 1fr;
+    }
+    .hero h1 {
+        font-size: 2.8rem;
+    }
+    .section-title {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1.5rem;
+    }
+}
diff --git a/assets/images/cars/car1.jpg b/assets/images/cars/car1.jpg
new file mode 100644
index 0000000..7659395
Binary files /dev/null and b/assets/images/cars/car1.jpg differ
diff --git a/assets/images/cars/car10.jpg b/assets/images/cars/car10.jpg
new file mode 100644
index 0000000..89803b8
Binary files /dev/null and b/assets/images/cars/car10.jpg differ
diff --git a/assets/images/cars/car11.jpg b/assets/images/cars/car11.jpg
new file mode 100644
index 0000000..89803b8
Binary files /dev/null and b/assets/images/cars/car11.jpg differ
diff --git a/assets/images/cars/car12.jpg b/assets/images/cars/car12.jpg
new file mode 100644
index 0000000..915068f
Binary files /dev/null and b/assets/images/cars/car12.jpg differ
diff --git a/assets/images/cars/car13.jpg b/assets/images/cars/car13.jpg
new file mode 100644
index 0000000..bca178c
Binary files /dev/null and b/assets/images/cars/car13.jpg differ
diff --git a/assets/images/cars/car14.jpg b/assets/images/cars/car14.jpg
new file mode 100644
index 0000000..468f09d
Binary files /dev/null and b/assets/images/cars/car14.jpg differ
diff --git a/assets/images/cars/car15.jpg b/assets/images/cars/car15.jpg
new file mode 100644
index 0000000..a20a1a8
Binary files /dev/null and b/assets/images/cars/car15.jpg differ
diff --git a/assets/images/cars/car16.jpg b/assets/images/cars/car16.jpg
new file mode 100644
index 0000000..e93e744
Binary files /dev/null and b/assets/images/cars/car16.jpg differ
diff --git a/assets/images/cars/car17.jpg b/assets/images/cars/car17.jpg
new file mode 100644
index 0000000..c893b2e
Binary files /dev/null and b/assets/images/cars/car17.jpg differ
diff --git a/assets/images/cars/car18.jpg b/assets/images/cars/car18.jpg
new file mode 100644
index 0000000..73816d8
Binary files /dev/null and b/assets/images/cars/car18.jpg differ
diff --git a/assets/images/cars/car19.jpg b/assets/images/cars/car19.jpg
new file mode 100644
index 0000000..b443b67
Binary files /dev/null and b/assets/images/cars/car19.jpg differ
diff --git a/assets/images/cars/car2.jpg b/assets/images/cars/car2.jpg
new file mode 100644
index 0000000..bd6f15b
Binary files /dev/null and b/assets/images/cars/car2.jpg differ
diff --git a/assets/images/cars/car20.jpg b/assets/images/cars/car20.jpg
new file mode 100644
index 0000000..0e8341a
Binary files /dev/null and b/assets/images/cars/car20.jpg differ
diff --git a/assets/images/cars/car3.jpg b/assets/images/cars/car3.jpg
new file mode 100644
index 0000000..66a2912
Binary files /dev/null and b/assets/images/cars/car3.jpg differ
diff --git a/assets/images/cars/car4.jpg b/assets/images/cars/car4.jpg
new file mode 100644
index 0000000..d386b71
Binary files /dev/null and b/assets/images/cars/car4.jpg differ
diff --git a/assets/images/cars/car5.jpg b/assets/images/cars/car5.jpg
new file mode 100644
index 0000000..738b698
Binary files /dev/null and b/assets/images/cars/car5.jpg differ
diff --git a/assets/images/cars/car6.jpg b/assets/images/cars/car6.jpg
new file mode 100644
index 0000000..c4ca3b2
Binary files /dev/null and b/assets/images/cars/car6.jpg differ
diff --git a/assets/images/cars/car7.jpg b/assets/images/cars/car7.jpg
new file mode 100644
index 0000000..c6c2997
Binary files /dev/null and b/assets/images/cars/car7.jpg differ
diff --git a/assets/images/cars/car8.jpg b/assets/images/cars/car8.jpg
new file mode 100644
index 0000000..20b0cc7
Binary files /dev/null and b/assets/images/cars/car8.jpg differ
diff --git a/assets/images/cars/car9.jpg b/assets/images/cars/car9.jpg
new file mode 100644
index 0000000..ae69e1c
Binary files /dev/null and b/assets/images/cars/car9.jpg differ
diff --git a/assets/images/hero/bg.jpg b/assets/images/hero/bg.jpg
new file mode 100644
index 0000000..5cd9ca4
Binary files /dev/null and b/assets/images/hero/bg.jpg differ
diff --git a/contact.php b/contact.php
new file mode 100644
index 0000000..6432686
--- /dev/null
+++ b/contact.php
@@ -0,0 +1,80 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/header.php';
+?>
+
+<section class="container" style="padding-top: 6rem;">
+    <div class="section-title">
+        <div>
+            <h1>Connect With Us</h1>
+            <p>Our specialists are ready to assist you with any inquiry.</p>
+        </div>
+    </div>
+    
+    <div class="section-grid">
+        <div style="background: var(--surface-color); padding: 3.5rem; border-radius: var(--border-radius); border: 1px solid rgba(255,255,255,0.05);">
+            <h3 style="margin-bottom: 2.5rem; font-size: 1.8rem; color: var(--accent-color);">Direct Inquiry</h3>
+            <form action="#" method="POST">
+                <div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 0;">
+                    <div class="form-group">
+                        <label>First Name</label>
+                        <input type="text" placeholder="Ahmad" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Last Name</label>
+                        <input type="text" placeholder="Shah" required>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>Email Address</label>
+                    <input type="email" placeholder="ahmad@domain.af" required>
+                </div>
+                <div class="form-group">
+                    <label>Inquiry Subject</label>
+                    <select style="width: 100%; padding: 1.2rem; background: var(--bg-color); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: white; outline: none; cursor: pointer;">
+                        <option>Purchase Interest</option>
+                        <option>Installment Inquiry</option>
+                        <option>Vehicle Valuation (Selling)</option>
+                        <option>Technical Support</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Your Message</label>
+                    <textarea rows="6" placeholder="Please provide details about the vehicle or service you are interested in..." required></textarea>
+                </div>
+                <button type="submit" class="btn" style="width: 100%;">Send Message</button>
+            </form>
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 3rem;">
+            <div class="location-card" style="border-style: solid;">
+                <h3><i class="fas fa-headset"></i> Premium Support</h3>
+                <div class="location-info">
+                    <p><i class="fas fa-phone"></i> +93 700 000 000</p>
+                    <p><i class="fas fa-envelope"></i> concierge@afgcars.af</p>
+                    <p><i class="fas fa-clock"></i> 24/7 VIP Assistance Available</p>
+                </div>
+            </div>
+            
+            <div style="background: var(--surface-color); padding: 3rem; border-radius: var(--border-radius); border: 1px solid var(--border-color);">
+                <h3 style="margin-bottom: 2rem; color: var(--accent-color);">Regional Centers</h3>
+                <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+                    <div style="border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1rem;">
+                        <span style="color: var(--text-primary); font-weight: 800; display: block; margin-bottom: 0.3rem;">Kabul Headquarters</span>
+                        <p style="font-size: 0.85rem; color: var(--text-secondary);">Shar-e-Naw Business District, Plaza 4, 2nd Floor</p>
+                    </div>
+                    <div style="border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1rem;">
+                        <span style="color: var(--text-primary); font-weight: 800; display: block; margin-bottom: 0.3rem;">Herat Regional Center</span>
+                        <p style="font-size: 0.85rem; color: var(--text-secondary);">Main Commercial Avenue, Herat Gate</p>
+                    </div>
+                    <div>
+                        <span style="color: var(--text-primary); font-weight: 800; display: block; margin-bottom: 0.3rem;">Mazar-i-Sharif Office</span>
+                        <p style="font-size: 0.85rem; color: var(--text-secondary);">Balkh Gate Towers, Suite 102</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
diff --git a/includes/footer.php b/includes/footer.php
new file mode 100644
index 0000000..db733e9
--- /dev/null
+++ b/includes/footer.php
@@ -0,0 +1,38 @@
+<footer>
+    <div class="footer-container">
+        <div class="footer-section">
+            <div class="logo">AFG_CARS<span>.</span></div>
+            <p>Afghanistan's premier automotive marketplace. Luxury, reliability, and excellence in every drive.</p>
+            <div class="social-links">
+                <a href="#"><i class="fab fa-facebook"></i></a>
+                <a href="#"><i class="fab fa-instagram"></i></a>
+                <a href="#"><i class="fab fa-twitter"></i></a>
+                <a href="#"><i class="fab fa-linkedin"></i></a>
+            </div>
+        </div>
+        <div class="footer-section">
+            <h3>Quick Links</h3>
+            <ul>
+                <li><a href="index.php">Home</a></li>
+                <li><a href="marketplace.php">Marketplace</a></li>
+                <li><a href="work.php">How it Works</a></li>
+                <li><a href="about.php">About Us</a></li>
+                <li><a href="contact.php">Contact</a></li>
+            </ul>
+        </div>
+        <div class="footer-section">
+            <h3>Contact Info</h3>
+            <p><i class="fas fa-map-marker-alt"></i> Shar-e-Naw, Kabul, Afghanistan</p>
+            <p><i class="fas fa-phone"></i> +93 700 000 000</p>
+            <p><i class="fas fa-envelope"></i> info@afgcars.af</p>
+            <p><i class="fas fa-clock"></i> Sat - Thu: 8:00 AM - 6:00 PM</p>
+        </div>
+    </div>
+    <div class="footer-bottom">
+        <p>&copy; <?= date('Y') ?> AFG_CARS - Elite Dealership System. Developed by Mohammad Sadiq.</p>
+        <p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem;">100% Offline | Enterprise Ready | Professional UI</p>
+    </div>
+</footer>
+
+</body>
+</html>
diff --git a/includes/header.php b/includes/header.php
new file mode 100644
index 0000000..08695af
--- /dev/null
+++ b/includes/header.php
@@ -0,0 +1,34 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/../db/config.php';
+
+$projectTitle = "AFG_CARS - Supreme Automotive";
+$projectDescription = "Elite car dealership management system. Premium marketplace, installments, and branch management.";
+$current_page = basename($_SERVER['PHP_SELF']);
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($projectTitle) ?></title>
+    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>">
+    
+    <link rel="stylesheet" href="assets/css/style.css?v=<?= time() ?>">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+
+<header>
+    <div class="logo">AFG_CARS<span>.</span></div>
+    <nav>
+        <ul>
+            <li><a href="index.php" target="_blank" <?= $current_page == 'index.php' ? 'class="active"' : '' ?>>Home</a></li>
+            <li><a href="marketplace.php" target="_blank" <?= $current_page == 'marketplace.php' ? 'class="active"' : '' ?>>Marketplace</a></li>
+            <li><a href="work.php" target="_blank" <?= $current_page == 'work.php' ? 'class="active"' : '' ?>>Work</a></li>
+            <li><a href="about.php" target="_blank" <?= $current_page == 'about.php' ? 'class="active"' : '' ?>>About</a></li>
+            <li><a href="contact.php" target="_blank" <?= $current_page == 'contact.php' ? 'class="active"' : '' ?>>Contact Us</a></li>
+            <li><a href="setup.php" target="_blank" class="admin-link"><i class="fas fa-user-shield"></i> Admin</a></li>
+        </ul>
+    </nav>
+</header>
diff --git a/includes/pexels.php b/includes/pexels.php
new file mode 100644
index 0000000..eb05590
--- /dev/null
+++ b/includes/pexels.php
@@ -0,0 +1,27 @@
+<?php
+function pexels_key() {
+    $k = getenv('PEXELS_KEY');
+    return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
+}
+
+function pexels_get($url) {
+    $ch = curl_init();
+    curl_setopt_array($ch, [
+        CURLOPT_URL => $url,
+        CURLOPT_RETURNTRANSFER => true,
+        CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
+        CURLOPT_TIMEOUT => 15,
+    ]);
+    $resp = curl_exec($ch);
+    $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    curl_close($ch);
+    if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
+    return null;
+}
+
+function download_to($srcUrl, $destPath) {
+    $data = file_get_contents($srcUrl);
+    if ($data === false) return false;
+    if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
+    return file_put_contents($destPath, $data) !== false;
+}
diff --git a/index.php b/index.php
index 7205f3d..51ea5be 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,173 @@
 <?php
 declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/includes/header.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+// Fetch Featured Cars for Home Page
+try {
+    $db = db();
+    $featured_cars = $db->query("SELECT c.*, b.name as branch_name 
+                                FROM cars c 
+                                JOIN branches b ON c.branch_id = b.id 
+                                WHERE c.status = 'Available' AND c.is_featured = 1
+                                ORDER BY c.created_at DESC 
+                                LIMIT 6")->fetchAll();
+                                
+    $branches = $db->query("SELECT * FROM branches LIMIT 3")->fetchAll();
+} catch (Exception $e) {
+    $featured_cars = [];
+    $branches = [];
+}
 ?>
-<!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>
-</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>
+
+<!-- 1. & 2. Hero Section & Background Design -->
+<section class="hero">
+    <h1>Experience <span>Supreme</span> Luxury Automotive</h1>
+    <p>Afghanistan's premier destination for elite vehicles, flexible installments, and professional service across our major branches.</p>
+    <div class="hero-btns">
+        <a href="marketplace.php" target="_blank" class="btn">View Cars</a>
+        <a href="contact.php" target="_blank" class="btn btn-outline">Sell Your Car</a>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+</section>
+
+<!-- 6. Why Choose Us Section -->
+<section class="container">
+    <div class="section-title">
+        <div>
+            <h2>Why Choose Us</h2>
+            <p>Our commitment to excellence makes us the market leader.</p>
+        </div>
+    </div>
+    <div class="grid">
+        <div class="feature-box">
+            <i class="fas fa-certificate"></i>
+            <h3>Trusted Dealership</h3>
+            <p>Over 10 years of excellence in the automotive industry with thousands of happy clients.</p>
+        </div>
+        <div class="feature-box">
+            <i class="fas fa-check-circle"></i>
+            <h3>Verified Listings</h3>
+            <p>Every vehicle undergoes a rigorous 150-point technical and background inspection.</p>
+        </div>
+        <div class="feature-box">
+            <i class="fas fa-shield-alt"></i>
+            <h3>Secure Transactions</h3>
+            <p>Safe, transparent, and legally binding payment processes for all vehicle sales.</p>
+        </div>
+        <div class="feature-box">
+            <i class="fas fa-bolt"></i>
+            <h3>Fast Approval</h3>
+            <p>Get your luxury car today with instant installment approval and minimal paperwork.</p>
+        </div>
+    </div>
+</section>
+
+<!-- 5. Featured Cars Section -->
+<section class="container" style="background: var(--surface-color);">
+    <div class="section-title">
+        <div>
+            <h2>Featured Collection</h2>
+            <p>Hand-picked premium vehicles currently available in our showrooms.</p>
+        </div>
+        <a href="marketplace.php" target="_blank" class="btn btn-outline" style="padding: 0.8rem 1.5rem;">View All <i class="fas fa-arrow-right" style="margin-left: 10px;"></i></a>
+    </div>
+    <div class="grid">
+        <?php foreach ($featured_cars as $car): ?>
+        <div class="car-card">
+            <div class="car-image">
+                <span class="car-badge">PREMIUM</span>
+                <img src="<?= htmlspecialchars($car['image_url']) ?>" alt="<?= htmlspecialchars($car['brand']) ?>">
+            </div>
+            <div class="car-content">
+                <div class="car-title"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></div>
+                <div class="car-price">$<?= number_format((float)$car['price'], 0) ?></div>
+                <div class="car-meta">
+                    <span><i class="fas fa-calendar-alt"></i> <?= $car['year'] ?></span>
+                    <span><i class="fas fa-map-marker-alt"></i> <?= htmlspecialchars($car['branch_name']) ?></span>
+                </div>
+                <div class="installment-box">
+                    Installments from <strong>$<?= number_format($car['price'] / 60, 0) ?>/mo</strong>
+                </div>
+                <div style="margin-top: 1.5rem;">
+                    <a href="marketplace.php" target="_blank" class="btn" style="width: 100%; padding: 0.8rem;">View Details</a>
+                </div>
+            </div>
+        </div>
+        <?php endforeach; ?>
+    </div>
+</section>
+
+<!-- 3. Review Section -->
+<section class="container">
+    <div class="section-title">
+        <div>
+            <h2>Customer Reviews</h2>
+            <p>What our elite clientele says about their experience with AFG_CARS.</p>
+        </div>
+    </div>
+    <div class="grid">
+        <div class="review-card">
+            <div class="review-header">
+                <div class="customer-photo">AS</div>
+                <div>
+                    <div style="font-weight: 800; font-size: 1.1rem;">Ahmad Shah</div>
+                    <div style="font-size: 0.8rem; color: var(--accent-color);">Verified Buyer</div>
+                </div>
+            </div>
+            <div class="stars">
+                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
+            </div>
+            <p style="color: var(--text-secondary);">"The best experience I've had buying a car in Kabul. The installment plan was very easy to understand and the team was extremely professional. Highly recommended!"</p>
+        </div>
+        <div class="review-card">
+            <div class="review-header">
+                <div class="customer-photo">MK</div>
+                <div>
+                    <div style="font-weight: 800; font-size: 1.1rem;">Mariam Khan</div>
+                    <div style="font-size: 0.8rem; color: var(--accent-color);">Business Owner</div>
+                </div>
+            </div>
+            <div class="stars">
+                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
+            </div>
+            <p style="color: var(--text-secondary);">"Found my dream Lexus LX 600 here. The condition was exactly as described. The Herat branch team was very helpful with all the paperwork. 5 stars!"</p>
+        </div>
+        <div class="review-card">
+            <div class="review-header">
+                <div class="customer-photo">RZ</div>
+                <div>
+                    <div style="font-weight: 800; font-size: 1.1rem;">Reza Zaki</div>
+                    <div style="font-size: 0.8rem; color: var(--accent-color);">Verified Buyer</div>
+                </div>
+            </div>
+            <div class="stars">
+                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
+            </div>
+            <p style="color: var(--text-secondary);">"Transparent pricing and high-quality inventory. I appreciate the technical reports they provided before I made my decision. Best dealership in Afghanistan."</p>
+        </div>
+    </div>
+</section>
+
+<!-- 4. Physical Location Section -->
+<section class="container" style="background: var(--surface-color);">
+    <div class="section-title">
+        <div>
+            <h2>Dealership Locations</h2>
+            <p>Visit us at any of our modern showrooms across Afghanistan.</p>
+        </div>
+    </div>
+    <div class="grid">
+        <?php foreach ($branches as $branch): ?>
+        <div class="location-card">
+            <h3><i class="fas fa-city"></i> <?= htmlspecialchars($branch['city']) ?></h3>
+            <div class="location-info">
+                <p><i class="fas fa-map-marker-alt"></i> <?= htmlspecialchars($branch['address']) ?></p>
+                <p><i class="fas fa-phone"></i> <?= htmlspecialchars($branch['phone']) ?></p>
+                <p><i class="fas fa-clock"></i> <?= htmlspecialchars($branch['hours']) ?></p>
+            </div>
+            <a href="https://maps.google.com" target="_blank" class="btn btn-outline" style="width: 100%; margin-top: 1rem; padding: 0.8rem;">Open Map</a>
+        </div>
+        <?php endforeach; ?>
+    </div>
+</section>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
diff --git a/marketplace.php b/marketplace.php
new file mode 100644
index 0000000..3df1f94
--- /dev/null
+++ b/marketplace.php
@@ -0,0 +1,67 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/header.php';
+
+// Fetch All Available Cars
+try {
+    $db = db();
+    $cars = $db->query("SELECT c.*, b.name as branch_name 
+                        FROM cars c 
+                        JOIN branches b ON c.branch_id = b.id 
+                        WHERE c.status = 'Available' 
+                        ORDER BY c.is_featured DESC, c.created_at DESC")->fetchAll();
+} catch (Exception $e) {
+    $cars = [];
+}
+?>
+
+<section class="container" style="padding-top: 4rem;">
+    <div class="section-title">
+        <div>
+            <h1>Premium Marketplace</h1>
+            <p>Explore our complete inventory of elite vehicles across Afghanistan.</p>
+        </div>
+        <div>
+            <span style="background: var(--accent-color); color: #000; padding: 0.6rem 1.2rem; border-radius: 30px; font-weight: 800; font-size: 0.8rem; border: 1px solid var(--border-color);">
+                <?= count($cars) ?> VEHICLES FOUND
+            </span>
+        </div>
+    </div>
+
+    <div class="grid">
+        <?php foreach ($cars as $car): ?>
+        <div class="car-card">
+            <div class="car-image">
+                <?php if ($car['is_featured']): ?>
+                    <span class="car-badge">FEATURED</span>
+                <?php endif; ?>
+                <img src="<?= htmlspecialchars($car['image_url']) ?>" alt="<?= htmlspecialchars($car['brand']) ?>">
+            </div>
+            <div class="car-content">
+                <div class="car-title"><?= htmlspecialchars($car['year'] . ' ' . $car['brand'] . ' ' . $car['model']) ?></div>
+                <div class="car-price">$<?= number_format((float)$car['price'], 0) ?></div>
+                
+                <div class="car-meta">
+                    <span><i class="fas fa-cog"></i> <?= htmlspecialchars($car['transmission'] ?? 'Auto') ?></span>
+                    <span><i class="fas fa-tachometer-alt"></i> <?= number_format((float)$car['mileage'], 0) ?> KM</span>
+                    <span><i class="fas fa-gas-pump"></i> <?= htmlspecialchars($car['fuel_type'] ?? 'Gas') ?></span>
+                </div>
+                
+                <div class="car-meta">
+                    <span><i class="fas fa-map-marker-alt"></i> <strong><?= htmlspecialchars($car['branch_name']) ?></strong></span>
+                </div>
+
+                <div class="installment-box">
+                    Installment Plan: <strong>$<?= number_format($car['price'] / 60, 0) ?>/mo</strong> for 60 months
+                </div>
+                
+                <div style="margin-top: 1.5rem;">
+                    <a href="#" class="btn" style="width: 100%;">Reserve Vehicle</a>
+                </div>
+            </div>
+        </div>
+        <?php endforeach; ?>
+    </div>
+</section>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>
diff --git a/setup.php b/setup.php
new file mode 100644
index 0000000..e358601
--- /dev/null
+++ b/setup.php
@@ -0,0 +1,109 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+
+try {
+    $db = db();
+
+    // Drop tables if they exist for a clean re-seed
+    $db->exec("SET FOREIGN_KEY_CHECKS = 0");
+    $db->exec("DROP TABLE IF EXISTS cars");
+    $db->exec("DROP TABLE IF EXISTS branches");
+    $db->exec("DROP TABLE IF EXISTS users");
+    $db->exec("SET FOREIGN_KEY_CHECKS = 1");
+
+    // Create Branches table
+    $db->exec("CREATE TABLE branches (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        name VARCHAR(100) NOT NULL,
+        city VARCHAR(100) NOT NULL,
+        address VARCHAR(255),
+        phone VARCHAR(50),
+        hours VARCHAR(100)
+    )");
+
+    // Create Cars table
+    $db->exec("CREATE TABLE cars (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        vin VARCHAR(50) UNIQUE NOT NULL,
+        brand VARCHAR(100) NOT NULL,
+        model VARCHAR(100) NOT NULL,
+        year INT NOT NULL,
+        price DECIMAL(15, 2) NOT NULL,
+        mileage INT NOT NULL,
+        transmission VARCHAR(50),
+        fuel_type VARCHAR(50),
+        status ENUM('Available', 'Reserved', 'Sold') DEFAULT 'Available',
+        branch_id INT,
+        is_featured BOOLEAN DEFAULT 0,
+        image_url VARCHAR(255),
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (branch_id) REFERENCES branches(id)
+    )");
+
+    // Create Users table
+    $db->exec("CREATE TABLE users (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        username VARCHAR(100) UNIQUE NOT NULL,
+        password VARCHAR(255) NOT NULL,
+        role ENUM('Guest', 'Customer', 'Dealer', 'Employee', 'Manager', 'Admin', 'Super Admin') DEFAULT 'Customer',
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )");
+
+    // Seed Branches
+    $branches = [
+        ['Kabul Main', 'Kabul', 'Shar-e-Naw, Kabul', '+93 700 111 222', '08:00 AM - 06:00 PM'],
+        ['Herat Branch', 'Herat', 'Main Road, Herat', '+93 700 333 444', '08:30 AM - 05:30 PM'],
+        ['Mazar Center', 'Mazar-i-Sharif', 'Balkh Street, Mazar', '+93 700 555 666', '08:00 AM - 05:00 PM'],
+        ['Kandahar Hub', 'Kandahar', 'Airport Road, Kandahar', '+93 700 777 888', '09:00 AM - 04:00 PM']
+    ];
+    $stmt = $db->prepare("INSERT INTO branches (name, city, address, phone, hours) VALUES (?, ?, ?, ?, ?)");
+    foreach ($branches as $branch) {
+        $stmt->execute($branch);
+    }
+
+    // Seed Cars (Exactly 20 Cars)
+    $brands = ['Toyota', 'Lexus', 'Mercedes-Benz', 'BMW', 'Audi', 'Land Rover', 'Porsche', 'Tesla'];
+    $models = [
+        'Toyota' => ['Camry', 'Land Cruiser', 'Corolla', 'RAV4'],
+        'Lexus' => ['LX 600', 'RX 350', 'ES 350'],
+        'Mercedes-Benz' => ['S-Class', 'G-Wagon', 'E-Class'],
+        'BMW' => ['X7', 'X5', '7 Series'],
+        'Audi' => ['Q8', 'A8', 'RS7'],
+        'Land Rover' => ['Defender', 'Range Rover'],
+        'Porsche' => ['911 Carrera', 'Cayenne'],
+        'Tesla' => ['Model S', 'Model X']
+    ];
+    
+    $stmt = $db->prepare("INSERT INTO cars (vin, brand, model, year, price, mileage, transmission, fuel_type, branch_id, is_featured, image_url) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
+    
+    for ($i = 1; $i <= 20; $i++) {
+        $brand = $brands[array_rand($brands)];
+        $model = $models[$brand][array_rand($models[$brand])];
+        $year = rand(2020, 2024);
+        $price = rand(45000, 180000);
+        $mileage = rand(0, 15000);
+        $branch_id = rand(1, 4);
+        $is_featured = ($i <= 8) ? 1 : 0; // 8 featured cars
+        $image_url = "assets/images/cars/car{$i}.jpg";
+        $vin = "VIN" . str_pad((string)$i, 10, "0", STR_PAD_LEFT);
+        
+        $stmt->execute([
+            $vin, $brand, $model, $year, $price, $mileage, 
+            'Automatic', rand(0,1) ? 'Gasoline' : 'Hybrid', 
+            $branch_id, $is_featured, $image_url
+        ]);
+    }
+
+    // Seed Admin
+    $stmt = $db->prepare("INSERT INTO users (username, password, role) VALUES (?, ?, ?)");
+    $stmt->execute(['admin', password_hash('admin123', PASSWORD_DEFAULT), 'Super Admin']);
+
+    echo "<h1>Setup Successful!</h1>";
+    echo "<p>Database recreated and exactly 20 premium cars seeded.</p>";
+    echo "<p><strong>Admin Credentials:</strong> admin / admin123</p>";
+    echo "<a href='index.php'>Go to Home Page</a>";
+
+} catch (Exception $e) {
+    echo "<h1>Setup Failed</h1>";
+    echo "<p>" . $e->getMessage() . "</p>";
+}
diff --git a/work.php b/work.php
new file mode 100644
index 0000000..ffdcde7
--- /dev/null
+++ b/work.php
@@ -0,0 +1,71 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/header.php';
+?>
+
+<section class="container" style="padding-top: 6rem;">
+    <div class="section-title">
+        <div>
+            <h1>How AFG_CARS Works</h1>
+            <p>A transparent, step-by-step guide to luxury vehicle ownership.</p>
+        </div>
+    </div>
+
+    <div class="section-grid" style="margin-top: 4rem;">
+        <div style="background: var(--surface-color); padding: 4rem; border-radius: var(--border-radius); border: 1px solid var(--border-color);">
+            <h2 style="color: var(--accent-color); margin-bottom: 3rem; font-size: 2rem;">The Buying Process</h2>
+            <div style="display: flex; flex-direction: column; gap: 3rem;">
+                <div style="display: flex; gap: 2rem;">
+                    <div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">1</div>
+                    <div>
+                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Online Exploration</h4>
+                        <p style="color: var(--text-secondary);">Browse our live inventory with detailed specifications, history reports, and high-resolution images.</p>
+                    </div>
+                </div>
+                <div style="display: flex; gap: 2rem;">
+                    <div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">2</div>
+                    <div>
+                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Showroom Consultation</h4>
+                        <p style="color: var(--text-secondary);">Visit our branch to experience the vehicle in person. Our specialists provide a full technical walk-through.</p>
+                    </div>
+                </div>
+                <div style="display: flex; gap: 2rem;">
+                    <div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">3</div>
+                    <div>
+                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Ownership & Handover</h4>
+                        <p style="color: var(--text-secondary);">Finalize payment or installment documents. We handle all registration and deliver your car in pristine condition.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div style="background: var(--surface-color); padding: 4rem; border-radius: var(--border-radius); border: 1px solid rgba(255,255,255,0.05);">
+            <h2 style="color: var(--accent-color); margin-bottom: 3rem; font-size: 2rem;">The Selling Process</h2>
+            <div style="display: flex; flex-direction: column; gap: 3rem;">
+                <div style="display: flex; gap: 2rem;">
+                    <div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">A</div>
+                    <div>
+                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Expert Evaluation</h4>
+                        <p style="color: var(--text-secondary);">Submit your car details. Our team performs a comprehensive market and technical analysis to determine value.</p>
+                    </div>
+                </div>
+                <div style="display: flex; gap: 2rem;">
+                    <div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">B</div>
+                    <div>
+                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Guaranteed Offer</h4>
+                        <p style="color: var(--text-secondary);">Receive a competitive buy-back or trade-in offer within 24 hours of inspection. No hidden fees.</p>
+                    </div>
+                </div>
+                <div style="display: flex; gap: 2rem;">
+                    <div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">C</div>
+                    <div>
+                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Secure Transfer</h4>
+                        <p style="color: var(--text-secondary);">We handle all the legal paperwork and title transfers. Payment is released immediately upon agreement.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<?php require_once __DIR__ . '/includes/footer.php'; ?>