diff --git a/index.html b/index.html
index d692994..e7cbe8f 100644
--- a/index.html
+++ b/index.html
@@ -677,6 +677,70 @@
                 }
             }
 
+            /* ---- Billing Toggle ---- */
+            .billing-toggle-wrap {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 0.75rem;
+                margin-bottom: 1.5rem;
+            }
+            .toggle-label {
+                font-size: 0.82rem;
+                font-weight: 500;
+                color: rgba(33,37,41,0.6);
+                cursor: pointer;
+                transition: color 0.2s;
+                user-select: none;
+            }
+            .toggle-label.active {
+                color: var(--dark);
+                font-weight: 600;
+            }
+            .toggle-label small {
+                display: block;
+                font-size: 0.62rem;
+                font-weight: 400;
+                color: #28a745;
+                margin-top: 0.1rem;
+            }
+            .toggle-switch {
+                width: 48px;
+                height: 26px;
+                background: var(--border);
+                border-radius: 13px;
+                cursor: pointer;
+                position: relative;
+                transition: background 0.25s;
+                flex-shrink: 0;
+            }
+            .toggle-switch.yearly {
+                background: var(--primary);
+            }
+            .toggle-switch .thumb {
+                position: absolute;
+                top: 3px;
+                left: 3px;
+                width: 20px;
+                height: 20px;
+                background: #fff;
+                border-radius: 50%;
+                transition: left 0.25s;
+                box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+            }
+            .toggle-switch.yearly .thumb {
+                left: 25px;
+            }
+            .price-save {
+                font-size: 0.6rem;
+                font-weight: 700;
+                color: #28a745;
+                margin-top: 0.15rem;
+            }
+            .price-period {
+                color: rgba(33,37,41,0.55);
+                font-size: 0.68rem;
+            }
             /* ---- Blog Section ---- */
             .blog-section {
                 padding: 3rem 0;
@@ -1238,14 +1302,22 @@
                     <div class="hr"></div>
                     <h2>Your Plan, Your Timing: Upgrade Anytime</h2>
                 </div>
+                <div class="billing-toggle-wrap">
+                    <span class="toggle-label toggle-label-monthly active">Monthly</span>
+                    <div class="toggle-switch" id="billingSwitch">
+                        <div class="thumb"></div>
+                    </div>
+                    <span class="toggle-label toggle-label-yearly">Yearly <small>1 month free</small></span>
+                </div>
                 <div class="pgrid">
                     <div class="pcard">
                         <div class="pcard-body">
                             <h3>Side Hustle</h3>
                             <div class="price">
-                                <strong>$ 214.00</strong>
-                                <small class="text-muted">/ year</small>
-                            </div>
+                                    <strong class="price-amount" data-monthly="19.62" data-yearly="214.00">$ 19.62</strong>
+                                    <small class="price-period">/ month</small>
+                                    <div class="price-save" style="display:none;">1 month free</div>
+                                </div>
                             <p class="desc">
                                 &ldquo;ODOO Standard .. that is all my business
                                 needs&rdquo;
@@ -1294,9 +1366,10 @@
                         <div class="pcard-body">
                             <h3>On the Rise</h3>
                             <div class="price">
-                                <strong>$ 395.00</strong>
-                                <small class="text-muted">/ year</small>
-                            </div>
+                                    <strong class="price-amount" data-monthly="36.21" data-yearly="395.00">$ 36.21</strong>
+                                    <small class="price-period">/ month</small>
+                                    <div class="price-save" style="display:none;">1 month free</div>
+                                </div>
                             <p class="desc">
                                 &ldquo;I need some modules and professional
                                 reports&rdquo;
@@ -1345,9 +1418,10 @@
                         <div class="pcard-body">
                             <h3>Powerhouse</h3>
                             <div class="price">
-                                <strong>$ 595.00</strong>
-                                <small class="text-muted">/ year</small>
-                            </div>
+                                    <strong class="price-amount" data-monthly="54.54" data-yearly="595.00">$ 54.54</strong>
+                                    <small class="price-period">/ month</small>
+                                    <div class="price-save" style="display:none;">1 month free</div>
+                                </div>
                             <p class="desc">
                                 &ldquo;ODOO Enterprise is a must have!&rdquo;
                             </p>
@@ -1389,9 +1463,10 @@
                         <div class="pcard-body">
                             <h3>Empire</h3>
                             <div class="price">
-                                <strong>&gt;$ 950.00</strong>
-                                <small class="text-muted">/ year</small>
-                            </div>
+                                    <strong class="price-amount" data-monthly="86.67" data-yearly="950.00">&gt;$ 86.67</strong>
+                                    <small class="price-period">/ month</small>
+                                    <div class="price-save" style="display:none;">1 month free</div>
+                                </div>
                             <p class="desc">
                                 &ldquo;My house! My Horse! My Server!&rdquo;
                             </p>
@@ -1685,6 +1760,55 @@
                 });
             });
 
+            /* ---- Billing Toggle ---- */
+            var yearlyMode = false;
+            var biSwitch = document.getElementById("billingSwitch");
+            var labels = document.querySelectorAll(".toggle-label");
+            var monthlyLabel = document.querySelector(".toggle-label-monthly");
+            var yearlyLabel = document.querySelector(".toggle-label-yearly");
+
+            function updatePrices(yearly) {
+                var amounts = document.querySelectorAll(".price-amount");
+                for (var k = 0; k < amounts.length; k++) {
+                    var el = amounts[k];
+                    var val = yearly ? el.getAttribute("data-yearly") : el.getAttribute("data-monthly");
+                    var prefix = el.textContent.trim().charAt(0) === ">" ? ">" : "";
+                    el.textContent = prefix + "$ " + parseFloat(val).toFixed(2);
+                }
+                var periods = document.querySelectorAll(".price-period");
+                for (var k = 0; k < periods.length; k++) {
+                    periods[k].textContent = yearly ? "/ year" : "/ month";
+                }
+                var saves = document.querySelectorAll(".price-save");
+                for (var k = 0; k < saves.length; k++) {
+                    saves[k].style.display = yearly ? "block" : "none";
+                }
+            }
+
+            function setBilling(yearly) {
+                yearlyMode = yearly;
+                if (yearly) {
+                    biSwitch.classList.add("yearly");
+                    monthlyLabel.classList.remove("active");
+                    yearlyLabel.classList.add("active");
+                } else {
+                    biSwitch.classList.remove("yearly");
+                    monthlyLabel.classList.add("active");
+                    yearlyLabel.classList.remove("active");
+                }
+                updatePrices(yearly);
+            }
+
+            biSwitch.addEventListener("click", function () {
+                setBilling(!yearlyMode);
+            });
+            monthlyLabel.addEventListener("click", function () {
+                setBilling(false);
+            });
+            yearlyLabel.addEventListener("click", function () {
+                setBilling(true);
+            });
+
             /* ---- Blog Module ---- */
             var blogState = {
                 allPosts: [],