diff --git a/upsell.html b/upsell.html
index 28b4a1a..888e966 100644
--- a/upsell.html
+++ b/upsell.html
@@ -1,269 +1,442 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Check and Upgrade Your Plan</title>
-  <style>
-    body {
-      font-family: "Inter", "Segoe UI", Arial, sans-serif;
-      background-color: #f4f5f7;
-      color: #333;
-      margin: 0;
-      padding: 40px;
-      display: flex;
-      justify-content: center;
-    }
+    <head>
+        <meta charset="UTF-8" />
+        <title>Your Plan</title>
+        <style>
+            body {
+                font-family: "Inter", "Segoe UI", Arial, sans-serif;
+                background-color: #f4f5f7;
+                color: #333;
+                margin: 0;
+                padding: 32px 16px;
+            }
 
-    .summary-container {
-      background: #fff;
-      border-radius: 12px;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
-      padding: 40px;
-      max-width: 720px;
-      width: 100%;
-    }
+            .page-title {
+                text-align: center;
+                color: #262626;
+                font-size: 1.45em;
+                font-weight: 700;
+                margin-bottom: 6px;
+            }
 
-    h2 {
-      text-align: center;
-      color: #262626;
-      margin-bottom: 4px;
-      font-weight: 600;
-    }
+            .page-subtitle {
+                text-align: center;
+                font-size: 0.82em;
+                color: #999;
+                margin-bottom: 32px;
+                letter-spacing: 0.01em;
+            }
 
-    /* New small centered contract name */
-    .contract-name {
-      text-align: center;
-      font-size: 0.85em;
-      color: #666;
-      margin-bottom: 25px;
-    }
+            .plans-row {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 18px;
+                justify-content: center;
+                align-items: flex-start;
+            }
 
-    .subtitle {
-      text-align: center;
-      font-size: 0.9em;
-      color: #777;
-      margin-bottom: 30px;
-      line-height: 1.5;
-    }
+            .plan-card {
+                background: #fff;
+                border: 1px solid #e0e0e0;
+                border-radius: 14px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+                padding: 26px 22px 20px;
+                width: 200px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+                transition:
+                    box-shadow 0.2s,
+                    border-color 0.2s;
+            }
 
-    .grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 20px;
-    }
+            .plan-card:hover {
+                box-shadow: 0 6px 22px rgba(0, 0, 0, 0.11);
+            }
 
-    .grid-item {
-      background: #fafafa;
-      border: 1px solid #e2e2e2;
-      border-radius: 8px;
-      padding: 15px 20px;
-    }
+            .plan-card.current {
+                border-color: #875a7b;
+                box-shadow:
+                    0 0 0 3px rgba(135, 90, 123, 0.18),
+                    0 4px 16px rgba(135, 90, 123, 0.12);
+            }
 
-    .grid-item.full {
-      grid-column: 1 / -1;
-    }
+            .plan-name {
+                font-size: 1.05em;
+                font-weight: 700;
+                color: #262626;
+                margin-bottom: 14px;
+                letter-spacing: 0.02em;
+                text-transform: uppercase;
+            }
 
-    .label {
-      font-weight: 600;
-      font-size: 0.9em;
-      color: #555;
-      margin-bottom: 6px;
-    }
+            .plan-price {
+                font-size: 1.55em;
+                font-weight: 800;
+                color: #875a7b;
+                line-height: 1.1;
+                margin-bottom: 2px;
+            }
 
-    .value {
-      font-size: 1.1em;
-      color: #222;
-    }
+            .plan-price-period {
+                font-size: 0.75em;
+                color: #aaa;
+                margin-bottom: 14px;
+            }
 
-    .footer {
-      text-align: center;
-      font-size: 0.9em;
-      color: #888;
-      margin-top: 30px;
-    }
+            .plan-tagline {
+                font-size: 0.8em;
+                color: #666;
+                font-style: italic;
+                margin-bottom: 16px;
+                line-height: 1.5;
+                min-height: 52px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
 
-    /* Button styling */
-    .actions {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-top: 40px;
-      gap: 15px;
-    }
+            .plan-btn {
+                background-color: #875a7b;
+                color: #fff;
+                border: none;
+                border-radius: 7px;
+                padding: 9px 0;
+                font-size: 0.88em;
+                font-weight: 600;
+                cursor: pointer;
+                width: 100%;
+                margin-bottom: 18px;
+                transition:
+                    background-color 0.2s,
+                    transform 0.1s;
+                letter-spacing: 0.01em;
+            }
 
-    .action-row {
-      display: flex;
-      justify-content: center;
-      gap: 20px;
-      flex-wrap: wrap;
-    }
+            .plan-btn:hover:not(:disabled) {
+                background-color: #744e6a;
+                transform: translateY(-1px);
+            }
 
-    .action-btn {
-      background-color: #875A7B; /* Odoo purple */
-      color: white;
-      border: none;
-      border-radius: 8px;
-      padding: 10px 22px;
-      font-size: 15px;
-      cursor: pointer;
-      transition: background-color 0.2s ease, transform 0.1s ease;
-      min-width: 180px;
-    }
+            .plan-btn:disabled {
+                background-color: #bdbdbd;
+                color: #fff;
+                cursor: not-allowed;
+                transform: none;
+            }
 
-    .action-btn:hover {
-      background-color: #744e6a;
-      transform: translateY(-1px);
-    }
+            .plan-btn.is-current-plan:disabled {
+                background-color: #6d9f71;
+            }
 
-    .action-btn.secondary {
-      background-color: #6c757d;
-    }
+            .plan-features {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+                width: 100%;
+                text-align: left;
+            }
 
-    .action-btn.secondary:hover {
-      background-color: #5a636a;
-    }
+            .plan-features li {
+                font-size: 0.78em;
+                color: #555;
+                padding: 5px 0 5px 18px;
+                border-top: 1px solid #f2f2f2;
+                position: relative;
+                line-height: 1.4;
+            }
 
-    .action-btn:disabled {
-      background-color: #ccc;
-      cursor: not-allowed;
-      transform: none;
-    }
-  </style>
-</head>
-<body>
-  <div class="summary-container">
-    <h2>Check and Upgrade Your Plan</h2>
-    <div class="contract-name" id="contractName">Loading...</div>
-    <div class="subtitle">
-      Choose an upgrade. With this upgade you only pay for the <b>remaining days</b> of your current contract. Due to technical reasons, the <b>total price</b> will be included in the payment link sent to your email. If you don’t want to upgrade, simply don’t complete the payment. Current yearly prices are listed on our homepage, and new features will apply when you extend your contract next time.
-    </div>
+            .plan-features li:first-child {
+                border-top: none;
+            }
 
-    <div class="grid">
-      <div class="grid-item">
-        <div class="label">GIT</div>
-        <div class="value" id="gitValue">Loading...</div>
-      </div>
+            .plan-features li::before {
+                content: "–";
+                position: absolute;
+                left: 0;
+                color: #875a7b;
+                font-weight: 700;
+            }
 
-      <div class="grid-item">
-        <div class="label">Domains</div>
-        <div class="value" id="domainsValue">Loading...</div>
-      </div>
+            .plan-guarantee {
+                font-size: 0.68em;
+                color: #bbb;
+                margin-top: 14px;
+                font-style: italic;
+                min-height: 18px;
+            }
 
-      <div class="grid-item">
-        <div class="label">Backup Slots</div>
-        <div class="value" id="backupValue">Loading...</div>
-      </div>
+            .footer-uuid {
+                text-align: center;
+                font-size: 0.75em;
+                color: #ccc;
+                margin-top: 40px;
+                user-select: all;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="page-title">Your Plan, Your Timing: Upgrade Anytime</div>
+        <div class="page-subtitle">Instant setup · satisfied or reimbursed</div>
 
-      <div class="grid-item">
-        <div class="label">Workers</div>
-        <div class="value" id="workersValue">Loading...</div>
-      </div>
+        <div class="plans-row" id="plansRow">
+            <!-- ── Trial ─────────────────────────────────────────────────── -->
+            <div class="plan-card" id="card-trial">
+                <div class="plan-name">Trial</div>
+                <div class="plan-price">4 weeks free</div>
+                <div class="plan-price-period">&nbsp;</div>
+                <div class="plan-tagline">
+                    "I want to see what ODOO can do for my company."
+                </div>
+                <button
+                    class="plan-btn is-current-plan"
+                    id="btn-trial"
+                    disabled
+                >
+                    Your Plan
+                </button>
+                <ul class="plan-features">
+                    <li>ODOO CE hosting</li>
+                    <li>0 Backup Slots</li>
+                    <li>No Domain Mapping</li>
+                    <li>No module installation</li>
+                </ul>
+                <div class="plan-guarantee">&nbsp;</div>
+            </div>
 
-      <div class="grid-item full">
-        <div class="label">HDD (MB)</div>
-        <div class="value" id="hddValue">Loading...</div>
-      </div>
+            <!-- ── Side Hustle ───────────────────────────────────────────── -->
+            <div class="plan-card" id="card-sidehustle">
+                <div class="plan-name">Side Hustle</div>
+                <div class="plan-price">$214.00</div>
+                <div class="plan-price-period">/ year</div>
+                <div class="plan-tagline">
+                    "ODOO Standard .. that is all my business needs"
+                </div>
+                <button class="plan-btn" id="btn-sidehustle">Buy Now</button>
+                <ul class="plan-features">
+                    <li>ODOO CE hosting</li>
+                    <li>1 Backup Slot</li>
+                    <li>1 Domain Mapping, SSL Cert</li>
+                    <li>No module installation</li>
+                </ul>
+                <div class="plan-guarantee">
+                    Instant setup, satisfied or reimbursed.
+                </div>
+            </div>
 
-      <div class="grid-item full">
-        <div class="label">Expires</div>
-        <div class="value" id="expiresValue">Loading...</div>
-      </div>
-    </div>
+            <!-- ── On the Rise ───────────────────────────────────────────── -->
+            <div class="plan-card" id="card-ontherise">
+                <div class="plan-name">On the Rise</div>
+                <div class="plan-price">$395.00</div>
+                <div class="plan-price-period">/ year</div>
+                <div class="plan-tagline">
+                    "I need some modules and professional reports"
+                </div>
+                <button class="plan-btn" id="btn-ontherise">Buy Now</button>
+                <ul class="plan-features">
+                    <li>ODOO CE hosting</li>
+                    <li>4 Backup Slots</li>
+                    <li>3 Domain Mappings, SSL Cert</li>
+                    <li>Module installation via git</li>
+                </ul>
+                <div class="plan-guarantee">
+                    Instant setup, satisfied or reimbursed.
+                </div>
+            </div>
 
-    <!-- Buttons -->
-    <div class="actions">
-      <div class="action-row">
-        <button class="action-btn" id="upgradeRiseBtn">Upgrade to "On the Rise"</button>
-        <button class="action-btn" id="upgradePowerhouseBtn">Upgrade to "Powerhouse"</button>
-      </div>
-      <div class="action-row">
-        <button class="action-btn secondary" id="addDomainBtn">Add a Domain</button>
-        <button class="action-btn secondary" id="addBackupsBtn">Add 5 Backup Slots</button>
-      </div>
-    </div>
+            <!-- ── Powerhouse ────────────────────────────────────────────── -->
+            <div class="plan-card" id="card-powerhouse">
+                <div class="plan-name">Powerhouse</div>
+                <div class="plan-price">$595.00</div>
+                <div class="plan-price-period">/ year</div>
+                <div class="plan-tagline">
+                    "ODOO Enterprise is a must have!"
+                </div>
+                <button class="plan-btn" id="btn-powerhouse">Buy Now</button>
+                <ul class="plan-features">
+                    <li>All of On the Rise</li>
+                    <li>ODOO Enterprise Ready</li>
+                    <li>2 Workers</li>
+                </ul>
+                <div class="plan-guarantee">
+                    Instant setup, satisfied or reimbursed.
+                </div>
+            </div>
 
-    <div class="footer" id="uuidDisplay">
-      UUID: <span id="uuidText">Loading...</span>
-    </div>
-  </div>
+            <!-- ── Empire ────────────────────────────────────────────────── -->
+            <div class="plan-card" id="card-empire">
+                <div class="plan-name">Empire</div>
+                <div class="plan-price">&gt;$950.00</div>
+                <div class="plan-price-period">/ year</div>
+                <div class="plan-tagline">"My house! My Horse! My Server!"</div>
+                <button class="plan-btn" id="btn-empire">Contact Us</button>
+                <ul class="plan-features">
+                    <li>Our service on your server</li>
+                    <li>All modules &amp; features</li>
+                    <li>Unlimited customization</li>
+                </ul>
+                <div class="plan-guarantee">
+                    Instant setup, satisfied or reimbursed.
+                </div>
+            </div>
+        </div>
 
-  <script>
-    const webhookUrl = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/0c8536be-d175-4740-8e78-123159193b23";
-    const webhook_buy = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/2366cc41-bfd9-41c0-b9b4-bea1e60726f1"; 
+        <div class="footer-uuid">UUID: <span id="uuidText">–</span></div>
 
-    const params = new URLSearchParams(window.location.search);
-    const uuid = params.get("uuid");
+        <script>
+            // ── Webhooks ─────────────────────────────────────────────────────────────
+            const getContract_Webhook =
+                "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/0c8536be-d175-4740-8e78-123159193b23";
+            const buy_webhook =
+                "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/2366cc41-bfd9-41c0-b9b4-bea1e60726f1";
 
-    async function loadData() {
-      if (!uuid) {
-        alert("Missing uuid parameter in URL");
-        return;
-      }
+            // ── Plan hierarchy (index = tier, lower = cheaper) ────────────────────────
+            const PLAN_ORDER = [
+                "Trial",
+                "Side Hustle",
+                "On the Rise",
+                "Powerhouse",
+                "Empire",
+            ];
 
-      document.getElementById("uuidText").textContent = uuid;
+            const PLAN_META = {
+                Trial: {
+                    cardId: "card-trial",
+                    btnId: "btn-trial",
+                    productId: null,
+                },
+                "Side Hustle": {
+                    cardId: "card-sidehustle",
+                    btnId: "btn-sidehustle",
+                    productId: "sidehustle",
+                },
+                "On the Rise": {
+                    cardId: "card-ontherise",
+                    btnId: "btn-ontherise",
+                    productId: "ontherise",
+                },
+                Powerhouse: {
+                    cardId: "card-powerhouse",
+                    btnId: "btn-powerhouse",
+                    productId: "powerhouse",
+                },
+                Empire: {
+                    cardId: "card-empire",
+                    btnId: "btn-empire",
+                    productId: null,
+                },
+            };
 
-      try {
-        const res = await fetch(webhookUrl, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ uuid })
-        });
+            // ── UUID from URL ─────────────────────────────────────────────────────────
+            const params = new URLSearchParams(window.location.search);
+            const uuid = params.get("uuid") || "";
+            document.getElementById("uuidText").textContent = uuid || "–";
 
-        if (!res.ok) throw new Error("Failed to fetch data");
-        const data = await res.json();
+            // ── Buy handler ───────────────────────────────────────────────────────────
+            async function buyProduct(productId) {
+                if (!uuid) {
+                    alert("Missing uuid parameter in URL.");
+                    return;
+                }
+                try {
+                    const res = await fetch(buy_webhook, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ uuid, product_id: productId }),
+                    });
+                    if (!res.ok) throw new Error("HTTP " + res.status);
 
-        document.getElementById("gitValue").textContent = data.git ? "Enabled" : "Disabled";
-        document.getElementById("domainsValue").textContent = data.domains || "-";
-        document.getElementById("backupValue").textContent = data.backupSlots || "-";
-        document.getElementById("workersValue").textContent = data.workers || "-";
-        document.getElementById("hddValue").textContent = data.hdd ? `${data.hdd} MB` : "-";
-        document.getElementById("expiresValue").textContent = data.expires || "-";
-        document.getElementById("contractName").textContent = data.contract_name || "-";
+                    document.body.innerHTML = `
+          <div style="text-align:center;padding:80px 20px;background:#fff;border-radius:14px;
+                      max-width:560px;margin:60px auto;box-shadow:0 4px 20px rgba(0,0,0,0.1);
+                      font-family:'Inter','Segoe UI',Arial,sans-serif;">
+            <div style="font-size:3em;margin-bottom:16px;">&#x2705;</div>
+            <h2 style="color:#262626;font-weight:700;margin-bottom:10px;">Request sent!</h2>
+            <p style="color:#777;line-height:1.6;">
+              Please check your email for the payment link and confirmation.<br>
+              New features will be active as soon as the payment is complete.
+            </p>
+          </div>`;
+                } catch (err) {
+                    console.error(err);
+                    alert(
+                        "Something went wrong. Please try again or contact support.",
+                    );
+                }
+            }
 
-        // Disable buttons based on contract_name
-        if (data.contract_name === "On the Rise") {
-          document.getElementById("upgradeRiseBtn").disabled = true;
-        } else if (data.contract_name === "Powerhouse") {
-          document.getElementById("upgradeRiseBtn").disabled = true;
-          document.getElementById("upgradePowerhouseBtn").disabled = true;
-        }
+            // ── Wire buy buttons ──────────────────────────────────────────────────────
+            document
+                .getElementById("btn-sidehustle")
+                .addEventListener("click", () => buyProduct("sidehustle"));
+            document
+                .getElementById("btn-ontherise")
+                .addEventListener("click", () => buyProduct("ontherise"));
+            document
+                .getElementById("btn-powerhouse")
+                .addEventListener("click", () => buyProduct("powerhouse"));
+            document
+                .getElementById("btn-empire")
+                .addEventListener("click", () => {
+                    window.open("https://odoo4projects.com", "_blank");
+                });
 
-      } catch (err) {
-        console.error(err);
-        alert("Error loading data.");
-      }
-    }
+            // ── Apply current-plan state ──────────────────────────────────────────────
+            function applyPlanState(contractName) {
+                const currentIdx = PLAN_ORDER.indexOf(contractName);
+                if (currentIdx === -1) return; // unknown plan – leave defaults
 
-    async function buyProduct(product_id) {
-      if (!uuid) return;
-      try {
-        const res = await fetch(webhook_buy, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ uuid, product_id })
-        });
+                PLAN_ORDER.forEach(function (plan, idx) {
+                    var meta = PLAN_META[plan];
+                    if (!meta) return;
+                    var btn = document.getElementById(meta.btnId);
+                    var card = document.getElementById(meta.cardId);
+                    if (!btn || !card) return;
 
-        if (!res.ok) throw new Error("Failed to send purchase request");
+                    if (idx === currentIdx) {
+                        // Current plan
+                        card.classList.add("current");
+                        btn.textContent = "Your Plan";
+                        btn.disabled = true;
+                        btn.classList.add("is-current-plan");
+                    } else if (idx < currentIdx) {
+                        // Lower tier – no downgrade
+                        btn.textContent = "Your Plan";
+                        btn.disabled = true;
+                        btn.classList.remove("is-current-plan");
+                    }
+                    // Higher tiers: leave as "Buy Now" / "Contact Us" (enabled)
+                });
+            }
 
-        document.body.innerHTML = `
-          <div style="text-align:center;padding:80px;background:#fff;border-radius:12px;max-width:700px;margin:auto;box-shadow:0 4px 12px rgba(0,0,0,0.1);">
-            <h2>✅ Your request has been sent</h2>
-            <p>Please check your email for confirmation.</p>
-          </div>
-        `;
-      } catch (err) {
-        console.error(err);
-        alert("Error sending request.");
-      }
-    }
+            // ── Load contract from webhook ────────────────────────────────────────────
+            async function loadContract() {
+                if (!uuid) return;
+                try {
+                    const res = await fetch(getContract_Webhook, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ uuid }),
+                    });
+                    if (!res.ok) throw new Error("HTTP " + res.status);
 
-    document.getElementById("upgradeRiseBtn").addEventListener("click", () => buyProduct("ontherise"));
-    document.getElementById("upgradePowerhouseBtn").addEventListener("click", () => buyProduct("powerhouse"));
-    document.getElementById("addDomainBtn").addEventListener("click", () => buyProduct("1-domain"));
-    document.getElementById("addBackupsBtn").addEventListener("click", () => buyProduct("5-backup"));
+                    const payload = await res.json();
+                    // Webhook returns: [{ "expires": "YYYY-MM-DD", "contractName": "Trial" }]
+                    const record = Array.isArray(payload)
+                        ? payload[0]
+                        : payload;
+                    if (record && record.contractName) {
+                        applyPlanState(record.contractName);
+                    }
+                } catch (err) {
+                    console.error("Could not load contract data:", err);
+                    // Graceful degradation: page remains usable with default button states
+                }
+            }
 
-    loadData();
-  </script>
-</body>
+            loadContract();
+        </script>
+    </body>
 </html>
-
