diff --git a/templates/corporate/comparison_table_integrated.html b/templates/corporate/comparison_table_integrated.html
index 3d5b5d93d1..360fff3ee9 100644
--- a/templates/corporate/comparison_table_integrated.html
+++ b/templates/corporate/comparison_table_integrated.html
@@ -14,19 +14,19 @@
     </div>
 
     <div class="comparison-tabs">
-        <button class="comparison-tab" data-label="tab-cloud" type="button">
+        <button class="comparison-tab comparison-tab-cloud" data-label="tab-cloud" type="button">
             <span class="grouped-icons">
                 <i class="icon icon-plan icon-cloud"></i>
             </span>
             Cloud
         </button>
-        <button class="comparison-tab" data-label="tab-hosted" type="button">
+        <button class="comparison-tab comparison-tab-self-hosted" data-label="tab-hosted" type="button">
             <span class="grouped-icons">
                 <i class="icon icon-plan icon-self-hosted"></i>
             </span>
             Self-hosted
         </button>
-        <button class="comparison-tab" data-label="tab-all" type="button">
+        <button class="comparison-tab comparison-tab-all" data-label="tab-all" type="button">
             <span class="grouped-icons">
                 <i class="icon icon-plan icon-cloud"></i>
                 <i class="icon icon-plan icon-self-hosted"></i>
@@ -39,7 +39,7 @@
     <table class="comparison-table">
         <colgroup>
             <col />
-            <col span="7" />
+            <col class="features-col-group" span="7" />
         </colgroup>
         <thead>
             <tr>
diff --git a/web/src/portico/landing-page.js b/web/src/portico/landing-page.js
index 739a0daa9d..2e395b69ca 100644
--- a/web/src/portico/landing-page.js
+++ b/web/src/portico/landing-page.js
@@ -147,6 +147,19 @@ $(() => {
         const $pricing_wrapper = $(".portico-pricing");
         $pricing_wrapper.removeClass("showing-cloud showing-self-hosted");
         $pricing_wrapper.addClass(`showing-${tab_to_show.slice(1)}`);
+
+        const $comparison_table = $(".zulip-plans-comparison");
+
+        // Not all pages that show plans include the comparison
+        // table, but when it's present, make sure to align the
+        // comparison table with the current active plans tab
+        if ($comparison_table.length > 0) {
+            const plans_columns_count = tab_to_show.slice(1) === "self-hosted" ? 4 : 3;
+
+            // Set the correct values for span and colspan
+            $(".features-col-group").attr("span", plans_columns_count);
+            $(".subheader-filler").attr("colspan", plans_columns_count);
+        }
     }
 });
 
@@ -162,5 +175,41 @@ $(document).on("click", ".pricing-tab", function () {
     const $pricing_wrapper = $(".portico-pricing");
     $pricing_wrapper.removeClass("showing-cloud showing-self-hosted");
     $pricing_wrapper.addClass(`showing-${id}`);
+
+    const $comparison_table = $(".zulip-plans-comparison");
+    const comparison_table_id = $comparison_table.attr(id);
+
+    // Not all pages that show plans include the comparison
+    // table, but when it's present, make sure to set the
+    // comparison table features to match the current active tab
+    // However, once a user has begun to interact with the
+    // comparison table, giving the `id` attribute a value, we
+    // no longer apply this logic
+    if ($comparison_table.length > 0 && !comparison_table_id) {
+        const plans_columns_count = id === "self-hosted" ? 4 : 3;
+
+        // Set the correct values for span and colspan
+        $(".features-col-group").attr("span", plans_columns_count);
+        $(".subheader-filler").attr("colspan", plans_columns_count);
+    }
+
     history.pushState(null, null, `#${id}`);
 });
+
+$(document).on("click", ".comparison-tab", function () {
+    const plans_columns_counts = {
+        "tab-cloud": 3,
+        "tab-hosted": 4,
+        "tab-all": 7,
+    };
+
+    const tab_label = $(this)[0].dataset.label;
+    const plans_columns_count = plans_columns_counts[tab_label];
+    const visible_plans_id = `showing-${tab_label}`;
+
+    $(".zulip-plans-comparison").attr("id", visible_plans_id);
+
+    // Set the correct values for span and colspan
+    $(".features-col-group").attr("span", plans_columns_count);
+    $(".subheader-filler").attr("colspan", plans_columns_count);
+});
diff --git a/web/styles/portico/comparison_table.css b/web/styles/portico/comparison_table.css
index 19c013f34f..ce3759e925 100644
--- a/web/styles/portico/comparison_table.css
+++ b/web/styles/portico/comparison_table.css
@@ -122,7 +122,7 @@
         color: hsl(223deg 40% 30%);
         font-weight: 600;
         border: none;
-        background-color: hsl(0deg 0% 100%);
+        background-color: hsl(0deg 0% 100% / 0%);
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -202,6 +202,10 @@
         transition: all 200ms ease-out;
     }
 
+    .comparison-table th .icon {
+        display: none;
+    }
+
     .subheader-filler {
         background: hsl(209deg 41% 94%);
     }
@@ -421,19 +425,117 @@
 /* Change comparison-table visibility on /plans
    based on active plan tab. */
 
-.showing-cloud {
+#showing-tab-cloud,
+#showing-tab-hosted,
+#showing-tab-all {
+    .comparison-tab-cloud,
+    .comparison-tab-self-hosted,
+    .comparison-tab-all {
+        background-color: hsl(0deg 0% 100% / 0%);
+        cursor: pointer;
+
+        &:hover {
+            background-color: hsl(0deg 0% 100% / 40%);
+        }
+    }
+}
+
+.showing-cloud,
+#showing-tab-cloud {
+    .comparison-tab-cloud {
+        background-color: hsl(0deg 0% 100%);
+        cursor: default;
+
+        &:hover {
+            background-color: hsl(0deg 0% 100%);
+        }
+    }
+
     #self-hosted-plan-comparison,
     #all-plan-comparison,
+    .subheader-open-source,
+    .subheader-self-hosted-legend,
     .self-hosted-feature-only,
     .self-hosted-cell {
         display: none;
     }
+
+    #cloud-plan-comparison,
+    .cloud-cell {
+        display: revert;
+    }
+
+    /* When only Cloud plans appear in the comparison table,
+       we need to set the border-radius here that is otherwise
+       displayed on the table itself.
+
+       TODO: Unset this property when the header row is stuck,
+       so that the little flutter of feature-table lines cannot
+       be seen by eagle-eyed users. */
+    th.last-cloud-th {
+        border-top-right-radius: var(--border-radius-table);
+    }
 }
 
-.showing-self-hosted {
+.showing-self-hosted,
+#showing-tab-hosted {
+    .comparison-tab-self-hosted {
+        background-color: hsl(0deg 0% 100%);
+        cursor: default;
+
+        &:hover {
+            background-color: hsl(0deg 0% 100%);
+        }
+    }
+
     #cloud-plan-comparison,
     #all-plan-comparison,
     .cloud-cell {
         display: none;
     }
+
+    #self-hosted-plan-comparison,
+    .subheader-open-source,
+    .subheader-self-hosted-legend,
+    .self-hosted-feature-only,
+    .self-hosted-cell {
+        display: revert;
+    }
+
+    th.last-cloud-th {
+        border-top-right-radius: unset;
+    }
+}
+
+#showing-tab-all {
+    .comparison-tab-all {
+        background-color: hsl(0deg 0% 100%);
+        cursor: default;
+
+        &:hover {
+            background-color: hsl(0deg 0% 100%);
+        }
+    }
+
+    #cloud-plan-comparison,
+    #self-hosted-plan-comparison {
+        display: none;
+    }
+
+    .subheader-open-source,
+    .subheader-self-hosted-legend,
+    #all-plan-comparison,
+    .cloud-cell,
+    .self-hosted-cell,
+    .self-hosted-feature-only {
+        display: revert;
+    }
+
+    th.last-cloud-th {
+        border-top-right-radius: unset;
+    }
+
+    .comparison-table th .icon {
+        display: revert;
+    }
 }