diff --git a/.github/workflows/sparrowadmin-staging.yml b/.github/workflows/sparrowadmin-staging.yml
new file mode 100644
index 00000000..0d35a1b8
--- /dev/null
+++ b/.github/workflows/sparrowadmin-staging.yml
@@ -0,0 +1,57 @@
+name: Sparrow-admin-Stg
+on:
+  push:
+    branches:
+      - release/2.34.0 
+  workflow_dispatch:
+    
+jobs:
+   build:
+      runs-on: ubuntu-latest
+      environment: sparrow_admin_app_stg
+      steps:
+         - uses: actions/checkout@master
+
+         - uses: Azure/docker-login@v1
+           with:
+              login-server: sparrowprod.azurecr.io
+              username: ${{ secrets.REGISTRY_USERNAME }}
+              password: ${{ secrets.REGISTRY_PASSWORD }}
+
+         - run: |
+              docker build \
+              --build-arg VITE_SPARROW_LAUNCH_URL=${{ vars.VITE_SPARROW_LAUNCH_URL }} \
+              --build-arg VITE_API_BASE_URL=${{ vars.VITE_API_BASE_URL }} \
+              --build-arg VITE_LOGIN_REDIRECT=${{ vars.VITE_LOGIN_REDIRECT }} \
+              --build-arg VITE_SPARROW_DOCS_URL=${{ vars.VITE_SPARROW_DOCS_URL }} \
+              --build-arg VITE_ENVIRONMENT=${{ vars.VITE_ENVIRONMENT }} \
+              --build-arg VITE_POSTHOG_CONNECTION_API_KEY=${{ vars.VITE_POSTHOG_CONNECTION_API_KEY }} \
+              --build-arg VITE_SPARROW_MARKETING_URL=${{ vars.VITE_SPARROW_MARKETING_URL }} \
+              --build-arg VITE_APP_EDITION=${{ vars.VITE_APP_EDITION }} \
+              -t sparrowprod.azurecr.io/sparrow-admin-app:${{ github.run_number }} .
+
+              docker push sparrowprod.azurecr.io/sparrow-admin-app:${{ github.run_number }}
+
+   deploy:
+      needs: build
+      runs-on: ubuntu-latest
+      steps:
+         - uses: actions/checkout@master
+         - uses: richardrigutins/replace-in-files@v1
+           with:
+              files: "./deployment/deployment.yml"
+              search-text: '_BUILD__ID_'
+              replacement-text: '${{ github.run_number }}'
+
+         - uses: azure/setup-kubectl@v2.0
+
+         - uses: Azure/k8s-set-context@v2
+           with:
+              kubeconfig: ${{ secrets.KUBE_CONFIG }}
+
+         - uses: Azure/k8s-deploy@v4
+           with:
+              action: deploy
+              namespace: sparrow-staging
+              manifests: |
+                 ./deployment/deployment.yml
diff --git a/package.json b/package.json
index e60d14ba..e176074d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sparrow-admin-app",
   "private": true,
-  "version": "2.33.0",
+  "version": "2.34.0",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
diff --git a/src/assets/icons/ErrorCircleIcon.svelte b/src/assets/icons/ErrorCircleIcon.svelte
new file mode 100644
index 00000000..4007810f
--- /dev/null
+++ b/src/assets/icons/ErrorCircleIcon.svelte
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="16" fill="#31353F" />
+  <path
+    d="M16 6C21.523 6 26 10.478 26 16C26 21.522 21.523 26 16 26C10.477 26 6 21.522 6 16C6 10.478 10.477 6 16 6ZM16.0018 19.0037C15.4503 19.0037 15.0031 19.4508 15.0031 20.0024C15.0031 20.5539 15.4503 21.001 16.0018 21.001C16.5533 21.001 17.0005 20.5539 17.0005 20.0024C17.0005 19.4508 16.5533 19.0037 16.0018 19.0037ZM15.9996 11C15.4868 11.0002 15.0643 11.3864 15.0067 11.8837L15 12.0004L15.0018 17.0012L15.0086 17.1179C15.0665 17.6152 15.4893 18.0011 16.0022 18.0009C16.515 18.0007 16.9375 17.6145 16.9951 17.1171L17.0018 17.0005L17 11.9996L16.9932 11.883C16.9353 11.3857 16.5125 10.9998 15.9996 11Z"
+    fill="#EB5651"
+  />
+</svg>
diff --git a/src/components/DowngradePlan/ChooseActiveMembersModal.svelte b/src/components/DowngradePlan/ChooseActiveMembersModal.svelte
new file mode 100644
index 00000000..80921499
--- /dev/null
+++ b/src/components/DowngradePlan/ChooseActiveMembersModal.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+  import DowngradeModalButtons from '@/ui/DowngradeModalButtons/DowngradeModalButtons.svelte';
+  import TableModalCommonLayout from './Common/TableModalCommonLayout.svelte';
+  import { hubsService } from '@/services/hubs.service';
+  import { userService, UserService } from '@/services/users.service';
+  import { createQuery } from '@/services/api.common';
+
+  export let isOpen: boolean = false;
+  export let planLimits: [];
+  export let users = [];
+  export let hubId: string;
+  export let hubOwner: any;
+  export let expiryDate: string;
+  let maxSelectable = 0
+
+  const dispatch = createEventDispatcher();
+  let selected = new Set();
+  $: {
+    if (typeof planLimits === 'number') {
+      maxSelectable = planLimits;
+    } else if (planLimits && typeof planLimits === 'object' && planLimits?.usersPerHub) {
+      maxSelectable = planLimits?.usersPerHub?.value;
+    } else {
+      maxSelectable = 0;
+    }
+  }  
+  $: filteredUsers = Array.isArray(users) ? users : [];
+
+  const toggleMember = (id: string) => {
+    if (selected.has(id)) {
+      selected.delete(id);
+    } else if (selected.size < maxSelectable) {
+      selected.add(id);
+    }
+    selected = new Set(selected);
+  };
+
+  const getLastActive = async () => {
+    try {
+      const res = await userService.getUsers();
+      if (res?.data?.users?.length) {
+        users = users.map((u) => {
+          const match = res.data.users.find(
+            (apiUser) => apiUser.id === u.id || apiUser._id === u._id || apiUser.email === u.email,
+          );
+
+          return {
+            ...u,
+            lastActiveAt: match?.lastActive || u.lastActiveAt || '',
+          };
+        });
+      }
+    } catch (err) {
+      console.error('Error fetching last active users:', err);
+    }
+  };
+
+  const handleNext = () => {
+    const selectedMembers = filteredUsers
+      .filter((ws) => selected.has(ws.id))
+      .map((ws) => ({
+        id: ws.id,
+        email: ws.email,
+      }));
+    dispatch('next', { selected: selectedMembers });
+  };
+  function getFirstName(fullNameOrEmail: string): string {
+    if (!fullNameOrEmail) return '';
+    if (fullNameOrEmail.includes('@')) {
+      return fullNameOrEmail.split('@')[0];
+    }
+    return fullNameOrEmail.split(' ')[0];
+  }
+
+  function getTimeDifference(lastActiveAt: string): string {
+    if (!lastActiveAt) return 'Never';
+    const lastActiveDate = new Date(lastActiveAt);
+    const now = new Date();
+    const diffInMinutes = Math.floor((now.getTime() - lastActiveDate.getTime()) / (1000 * 60));
+
+    if (diffInMinutes < 1) return 'Just now';
+    if (diffInMinutes < 60) return `${diffInMinutes} minute${diffInMinutes > 1 ? 's' : ''} ago`;
+
+    const diffInHours = Math.floor(diffInMinutes / 60);
+    if (diffInHours < 24) return `${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`;
+
+    const diffInDays = Math.floor(diffInHours / 24);
+    if (diffInDays === 1) return '1 day ago';
+    return `${diffInDays} days ago`;
+  }
+
+  function getRoleLabel(role: string): string {
+    const r = role?.toLowerCase?.() || '';
+    if (r === 'owner') return 'Owner';
+    if (r === 'admin') return 'Admin';
+    return 'Member';
+  }
+
+  $: isConfirmEnabled = (() => {
+    if (!filteredUsers.length) return true;
+    if (filteredUsers.length <= maxSelectable) {
+      return selected.size >= 1; // must select at least one
+    }
+
+    return selected.size === maxSelectable; // must select exactly 4
+  })();
+
+</script>
+
+<TableModalCommonLayout
+  {isOpen}
+  title="Choose Your Active Members"
+  subheading1="Your new plan includes {maxSelectable} active members (plus you as the Hub Owner). Please select the team members to keep active."
+  subheading2="Unselected members will be removed from the Hub on {expiryDate}."
+  {maxSelectable}
+  stepIndicator={true}
+  selectedCount={selected.size}
+  isPrimaryDisabled={!isConfirmEnabled}
+  confirmText="Confirm Selections"
+  on:confirm={handleNext}
+  on:close={() => dispatch('close')}
+>
+  <div slot="stepIndicator" class="flex items-center gap-2">
+    <span class="text-fs-ds-14 text-gray-400">Step 1</span>
+    <div class="mx-2 h-px w-12 bg-gray-600"></div>
+    <div class="flex items-center gap-1">
+      <div
+        class="text-fs-ds-12 flex h-5 w-5 items-center justify-center rounded-full bg-[#2B74FF] font-medium"
+      >
+        2
+      </div>
+      <span class="text-fs-ds-14 font-medium text-gray-300">Step 2</span>
+    </div>
+  </div>
+  <div class="flex-grow overflow-y-auto">
+    {#if filteredUsers.length > 0}
+      {#each filteredUsers as user}
+        <div
+          class="flex cursor-pointer items-center justify-between px-4 py-3 hover:bg-[#2A2F3A] text-left"
+          on:click={() => toggleMember(user.id)}
+        >
+          <div class="flex items-center gap-3">
+            <label class="relative flex items-center justify-center">
+            <input
+              type="checkbox"
+              checked={selected.has(user.id)}
+              on:click|stopPropagation={() => toggleMember(user.id)}
+              disabled={!selected.has(user.id) && selected.size >= maxSelectable}
+              class="peer h-4 w-4 cursor-pointer appearance-none rounded-sm border border-[#2A2F3A] bg-[#1E222C] checked:border-[#2B74FF] checked:bg-[#2B74FF] focus:outline-none"
+            />
+            <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="pointer-events-none absolute h-3 w-3 text-black opacity-0 transition-opacity peer-checked:opacity-100"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </label>
+            <div>
+              <span class="text-[12px] font-medium text-white">
+                {getFirstName(user.name || user.email)}
+              </span>
+              <span class="text-[12px] text-gray-400">({getRoleLabel(user.role)})</span>
+              <div class="truncate text-[11px] text-gray-500">{user.email}</div>
+            </div>
+          </div>
+          <div class="text-[12px] text-gray-400 text-left">
+            Last active: {getTimeDifference(user.lastActiveAt)}
+          </div>
+        </div>
+      {/each}
+    {:else}
+      <div class="flex items-center justify-center py-8 text-sm text-gray-400 italic">
+        No active members present for the selected workspaces.
+      </div>
+    {/if}
+  </div>
+</TableModalCommonLayout>
diff --git a/src/components/DowngradePlan/ChooseActiveWorkspaceModal.svelte b/src/components/DowngradePlan/ChooseActiveWorkspaceModal.svelte
new file mode 100644
index 00000000..eeb84697
--- /dev/null
+++ b/src/components/DowngradePlan/ChooseActiveWorkspaceModal.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+  import TableModalCommonLayout from './Common/TableModalCommonLayout.svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { hubsService } from '@/services/hubs.service';
+
+  export let isOpen;
+  export let currentPlan;
+  export let selectedPlan;
+  export let workspaces = [];
+  export let hubId;
+  export let planLimits:[];
+  let maxSelectable = 0
+  const dispatch = createEventDispatcher();
+  let selected = new Set();
+  let workspaceDetails = new Map();
+  let loading = false;
+
+  $: {
+    if (typeof planLimits === 'number') {
+      maxSelectable = planLimits;
+    } else if (planLimits && typeof planLimits === 'object' && planLimits.workspacesPerHub) {
+      maxSelectable = planLimits?.workspacesPerHub?.value;
+    } else {
+      maxSelectable = 0;
+    }
+  }
+  const toggleWorkspace = (id) => {
+    if (selected.has(id)) selected.delete(id);
+    else if (selected.size < maxSelectable) selected.add(id);
+    selected = new Set(selected);
+  };
+
+  const handleNext = async () => {
+    const selectedWorkspaces = workspaces.filter((ws) => selected.has(ws.id));
+    const unselected = workspaces.filter((ws) => !selected.has(ws.id));
+
+    const isDowngradeToCommunity = selectedPlan?.toLowerCase?.() === 'community';
+    let allMembers: any[] = [];
+
+    if (isDowngradeToCommunity && selectedWorkspaces.length) {
+      try {
+        const results = await Promise.all(
+          selectedWorkspaces.map(async (ws) => {
+            const res = await hubsService.getWorkspaceDetails({
+              workspaceId: ws.id,
+              hubId,
+              tab: 'members',
+              page: 1,
+              limit: 50,
+              sortBy: 'updatedAt',
+              sortOrder: 'desc',
+            });
+
+            const members = res?.data?.users || [];
+            return members.map((m) => ({
+              id: m._id,
+              email: m.email,
+              name: m.name || m.user || '',
+              role: m.role || 'member',
+            }));
+          }),
+        );
+
+        const flattened = results.flat();
+        const uniqueMembers = flattened.filter(
+          (user, i, self) =>
+            i ===
+            self.findIndex((u) => u.email === user.email || u.id === user.id)
+        );
+        allMembers = uniqueMembers.filter((u) => (u.role || '').toLowerCase() !== 'owner');
+      } catch (error) {
+        console.error('Error fetching workspace members:', error);
+      }
+    }
+    dispatch('next', {
+      selected: selectedWorkspaces,
+      unselected,
+      members: allMembers,
+    });
+  };
+
+
+  function getTimeDifference(updatedAt) {
+    const updatedDate = new Date(updatedAt);
+    const now = new Date();
+    const diffInDays = Math.floor((now - updatedDate) / (1000 * 60 * 60 * 24));
+    if (diffInDays === 0) return 'Today';
+    if (diffInDays === 1) return '1 day ago';
+    return `${diffInDays} days ago`;
+  }
+  onMount(async () => {
+    const promises = workspaces.map(async (ws) => {
+      try {
+        const res = await hubsService.getWorkspaceDetails({
+          workspaceId: ws.id,
+        });
+      } catch (error) {
+        console.error('Error fetching workspace details:', error);
+      }
+    });
+  });
+
+  onMount(async () => {
+    if (!workspaces?.length) return;
+    loading = true;
+    const promises = workspaces.map(async (ws) => {
+      try {
+        const res = await hubsService.getWorkspaceSummary({ workspaceId: ws.id, hubId });
+        const data = res?.data;
+        workspaceDetails.set(ws.id, {
+          collections: data?.totalCollections ?? '-',
+          contributors: data?.totalContributors ?? '-',
+          updated: data?.updatedAt ? getTimeDifference(data.updatedAt) : '-',
+        });
+        workspaceDetails = new Map(workspaceDetails);
+      } catch (err) {
+        console.error(`Failed to fetch ${ws.name}`, err);
+      }
+    });
+    await Promise.all(promises);
+    loading = false;
+  });
+</script>
+
+<TableModalCommonLayout
+  {isOpen}
+  title="Choose Your Active Workspaces"
+  subheading1="Your new plan includes {maxSelectable} active private workspaces. Please select the ones you want to keep active below."
+  subheading2="Unselected workspaces will be safely archived and can be restored anytime by upgrading."
+  {maxSelectable}
+  stepIndicator={maxSelectable === 3 ? true : false}
+  selectedCount={selected.size}
+  isPrimaryDisabled={selected.size !== maxSelectable}
+  confirmText="Next: Choose Members"
+  on:confirm={handleNext}
+  on:close={() => dispatch('close')}
+>
+  <div slot="stepIndicator" class="flex items-center gap-2">
+    <div class="flex items-center gap-1">
+      <div
+        class="text-fs-ds-12 flex h-5 w-5 items-center justify-center rounded-full bg-[#2B74FF] font-medium"
+      >
+        1
+      </div>
+      <span class="text-fs-ds-14 font-medium text-gray-300">Step 1</span>
+    </div>
+    <div class="mx-2 h-px w-12 border-t border-dotted bg-gray-600"></div>
+    <span class="text-fs-ds-14 text-gray-400">Step 2</span>
+  </div>
+  <!-- Slot: table content -->
+  <div class="flex-grow overflow-y-auto">
+    <table class="text-fs-ds-12 w-full border-collapse text-white">
+      <thead class="sticky top-0 z-10 bg-[#181C26] text-left text-gray-400">
+        <tr>
+          <th class="w-[20px] py-3"></th>
+          <th class="px-4 py-3">Workspaces</th>
+          <th class="px-4 py-3">Collections</th>
+          <th class="px-4 py-3">Contributors</th>
+          <th class="px-3 py-3">Last updated</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each workspaces as ws}
+          <tr
+            class="cursor-pointer transition-colors hover:bg-[#2A2F3A]"
+            on:click={() => toggleWorkspace(ws.id)}
+          >
+            <td class="relative px-2 py-2 text-center">
+              <label class="relative flex items-center justify-center">
+                <input
+                  type="checkbox"
+                  checked={selected.has(ws.id)}
+                  on:change={(e) => {
+                    e.stopPropagation();
+                    toggleWorkspace(ws.id)
+                  }}
+                  disabled={!selected.has(ws.id) && selected.size >= maxSelectable}
+                  class="peer h-[13px] w-[13px] cursor-pointer appearance-none rounded-xs border border-neutral-400 bg-[#181C26] checked:border-[#2B74FF] checked:bg-[#2B74FF] focus:outline-none"
+                />
+                <!-- Checkmark icon -->
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="pointer-events-none absolute h-3 w-3 text-black opacity-0 transition-opacity peer-checked:opacity-100"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </label>
+            </td>
+
+            <td class="px-4 py-3 font-bold">{ws.name}</td>
+            <td class="px-4 py-3 font-bold">{workspaceDetails.get(ws.id)?.collections ?? '-'}</td>
+            <td class="px-4 py-3 font-bold">{workspaceDetails.get(ws.id)?.contributors ?? '-'}</td>
+            <td class="px-4 py-3 font-bold">{workspaceDetails.get(ws.id)?.updated ?? '-'}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</TableModalCommonLayout>
diff --git a/src/components/DowngradePlan/Common/TableModalCommonLayout.svelte b/src/components/DowngradePlan/Common/TableModalCommonLayout.svelte
new file mode 100644
index 00000000..83eea7aa
--- /dev/null
+++ b/src/components/DowngradePlan/Common/TableModalCommonLayout.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+  import DowngradeModalButtons from '@/ui/DowngradeModalButtons/DowngradeModalButtons.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let isOpen: boolean = false;
+  export let title: string;
+  export let stepIndicator: boolean = false;
+  export let subheading1: string;
+  export let subheading2: string;
+  export let selectedCount: number;
+  export let maxSelectable: number;
+  export let isPrimaryDisabled: boolean = false;
+  export let confirmText: string = 'Confirm Selection';
+  export let cancelText: string = 'Cancel';
+  export let supportText: string = 'Contact Support';
+  export let showSupport: boolean = true;
+  export let primaryVariant: string = 'filled-primary';
+
+  const dispatch = createEventDispatcher();
+
+  const handleClose = () => dispatch('close');
+  const handleBackdropClick = (e: MouseEvent) => {
+    if (e.target === e.currentTarget) handleClose();
+  };
+</script>
+
+{#if isOpen}
+  <div
+    class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-xs"
+    on:click={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      class="bg-[#181C26] relative mx-auto flex h-[602px] w-[533px] flex-col gap-4 rounded-lg p-6 text-white shadow-2xl"
+      role="dialog"
+      aria-modal="true"
+    >
+      <!-- Header -->
+      {#if stepIndicator}
+        <!-- With Step Indicator -->
+        <div class="flex items-start justify-between">
+          <slot name="stepIndicator"></slot>
+
+          <button
+            on:click={handleClose}
+            class="text-fs-ds-20 text-gray-400 transition hover:text-white"
+            type="button"
+          >
+            ✕
+          </button>
+        </div>
+
+        <!-- Title below Step Indicator -->
+        <div class="flex flex-col gap-y-2">
+          <h2 class="text-fs-ds-20 leading-tight font-semibold">{title}</h2>
+          <p class="mt-2 text-fs-ds-12 leading-snug text-gray-400">{subheading1}</p>
+          <p class="mt-1 text-fs-ds-12 leading-snug text-gray-400">{subheading2}</p>
+        </div>
+      {:else}
+        <!-- Without Step Indicator -->
+        <div class="flex items-start justify-between">
+          <h2 class="text-fs-ds-20 leading-tight font-semibold">{title}</h2>
+
+          <button
+            on:click={handleClose}
+            class="text-fs-ds-20 text-gray-400 transition hover:text-white"
+            type="button"
+          >
+            ✕
+          </button>
+        </div>
+
+        <!-- Description just below -->
+        <div class="flex flex-col gap-y-2">
+          <p class="text-fs-ds-12 leading-snug text-gray-400 mt-1">{subheading1}</p>
+          <p class="mt-1 text-fs-ds-12 leading-snug text-gray-400">{subheading2}</p>
+        </div>
+      {/if}
+
+      <!-- Unique content (table or list) -->
+      <div
+        class="flex h-[320px] max-w-[492px] flex-grow flex-col overflow-hidden rounded-md border border-[#2A2F3A]"
+      >
+        <slot></slot>
+      </div>
+
+      <!-- Selection Counter -->
+      <p class="text-right text-fs-ds-12 text-gray-500">
+        You have selected {selectedCount} of {maxSelectable}
+      </p>
+
+      <!-- Action Buttons -->
+      <DowngradeModalButtons
+        {showSupport}
+        {supportText}
+        {cancelText}
+        {confirmText}
+        {primaryVariant}
+        {isPrimaryDisabled}
+        on:cancel={handleClose}
+        on:confirm={() => dispatch('confirm')}
+        on:support={() => dispatch('support')}
+      />
+    </div>
+  </div>
+{/if} 
\ No newline at end of file
diff --git a/src/components/DowngradePlan/DowngradePlanModal.svelte b/src/components/DowngradePlan/DowngradePlanModal.svelte
new file mode 100644
index 00000000..58f41b37
--- /dev/null
+++ b/src/components/DowngradePlan/DowngradePlanModal.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+  import ErrorCircleIcon from '@/assets/icons/ErrorCircleIcon.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import DowngradeModalButtons from '@/ui/DowngradeModalButtons/DowngradeModalButtons.svelte';
+
+  export let currentPlan: string;
+  export let selectedPlan: string;
+  export let hubName: string;
+  export let hubWorkspaces: [];
+  export let hubId: string;
+  export let expiryDate: string;
+  export let planLimits:[];
+
+  const dispatch = createEventDispatcher();
+
+  function getDowngradeLimitations(currentPlan: string, selectedPlan: string) {
+  const curr = currentPlan?.trim()?.toLowerCase();
+  const next = selectedPlan?.trim()?.toLowerCase();
+  const { usersPerHub, workspacesPerHub } = planLimits || {};
+  const usersLimit = usersPerHub?.value ?? 'N/A';
+  const workspaceLimit = workspacesPerHub?.value ?? 'N/A';
+
+  if (curr === 'standard') {
+    return [
+      `Collaborators: Limited to ${usersLimit} active collaborators`,
+      `Workspaces: Limited to ${workspaceLimit} workspaces`,
+      `Test Flows: Limited to 3 per workspace`,
+      'AI Models: All model access will be limited to Deepseek',
+      'Support: Support will change to our basic community support',
+    ];
+  }
+
+  if (curr === 'professional' && next === 'standard') {
+    return [
+      'No Private hubs',
+      'Up to 10 test flows',
+      'No AI-powered mock server',
+      'No Env Vault for secure environment variable management',
+      'No Active sync',
+    ];
+  }
+
+  if (curr === 'professional' && next === 'community') {
+    return [
+      'No Private hubs',
+      'No AI-powered mock server',
+      'No Env Vault for secure environment variable management',
+      'No Active sync',
+      'Reduced collaborators and workspace limit',
+      'Limited collections',
+    ];
+  }
+
+  if (curr === 'enterprise' && ['standard', 'professional', 'community'].includes(next)) {
+    return [
+      'No Unlimited Private hubs',
+      'No Unlimited test flows',
+      'No Hub-level access management',
+      'No Service Level Agreement (SLA) support',
+    ];
+  }
+
+  return ['Feature details not available for this downgrade.'];
+}
+
+  function handleCancel() {
+    dispatch('cancel');
+  }
+
+  function handleClose() {
+    dispatch('close');
+  }
+
+  function handleContinueDowngrade() {
+    dispatch('continue');
+  }
+</script>
+
+<div class="bg-[#181C26] flex w-full flex-col gap-4 rounded-lg p-8 text-white md:p-6">
+  <div class="flex items-start justify-between">
+    <h2 class="font-inter text-fs-ds-20 font-medium text-neutral-50">
+      Downgrade to {selectedPlan === 'community' ? 'Community Edition' : `${selectedPlan} Plan`}
+    </h2>
+    <button
+      class="cursor-pointer text-fs-ds-20 mt-1 leading-none text-neutral-400 hover:text-neutral-200"
+      on:click={handleClose}
+    >
+      ✕
+    </button>
+  </div>
+
+  <!-- Hub details -->
+  <div class="font-inter mt-2 grid grid-cols-2 text-fs-ds-12 font-medium text-neutral-300">
+    <div class="flex flex-col">
+      <p class="text-neutral-300">Hub Name</p>
+      <p class="mt-0.5 text-fs-ds-16 font-medium text-neutral-50">{hubName}</p>
+    </div>
+
+    <div class="flex flex-col text-left">
+      <p class="text-neutral-300">Current Plan</p>
+      <p class="mt-0.5 text-fs-ds-16 font-medium text-neutral-50 capitalize">{currentPlan}</p>
+    </div>
+  </div>
+
+  <!-- Description -->
+  <p class="font-inter mt-2 text-fs-ds-12 leading-relaxed font-light text-neutral-200">
+    Are you sure you want to downgrade your plan from {currentPlan} to {selectedPlan}? Some features and access will
+    change after the downgrade.
+  </p>
+
+  <!-- Limitations list -->
+  <p class="font-inter mt-2 text-fs-ds-12 leading-relaxed font-light text-neutral-200">
+    Here's the major limitations compared to {currentPlan}:
+  </p>
+
+  <ul class="font-inter mt-1 ml-5 list-decimal space-y-1 text-fs-ds-12 font-light text-neutral-300">
+    {#each getDowngradeLimitations(currentPlan, selectedPlan) as limitation}
+      <li>{limitation}</li>
+    {/each}
+  </ul>
+
+  <p class="font-inter mt-2 text-fs-ds-12 leading-relaxed font-light text-neutral-300">
+    Not sure what's included in each plan? Take a quick look to
+    <a href="https://sparrowapp.dev/pricing/" target="_blank" class="ml-1 text-blue-300 underline">
+      compare plans
+    </a>
+    before downgrading.
+  </p>
+
+  <!-- Warning box -->
+  {#if currentPlan !== 'Enterprise'}
+    <div class="relative mt-2 flex items-start gap-3 overflow-hidden rounded-md bg-[#1D212B] p-3 shadow-2xl">
+      <div
+        class="absolute top-0 left-0 h-full w-[4px] rounded-l-md bg-gradient-to-b from-[#EB5651] to-[#8B3A36]"
+      ></div>
+      <div class="relative flex h-8 w-8 flex-shrink-0 items-center justify-center">
+        <ErrorCircleIcon width="24" height="24" />
+      </div>
+      <p class="font-inter text-fs-ds-12 leading-relaxed font-light text-neutral-100">
+        You're downgrading <span class="font-medium">'{hubName}'</span>. Paid features stay active
+        until
+        <span class="font-medium">{expiryDate}</span>, after which your hub will move
+        to the {selectedPlan} plan.
+      </p>
+    </div>
+  {/if}
+  <DowngradeModalButtons
+    showSupport={true}
+    disableSupport={currentPlan === 'Enterprise'}
+    supportText="Contact Support"
+    cancelText="Cancel"
+    confirmText={currentPlan !== 'Enterprise' ? 'Continue to Downgrade' : 'Contact Sales'}
+    primaryVariant="filled-primary"
+    on:cancel={handleCancel}
+    on:confirm={currentPlan !== 'Enterprise' ? handleContinueDowngrade : undefined}
+    class="mt-3"
+  />
+</div>
diff --git a/src/components/DowngradePlan/ReviewScheduledDowngradeModal.svelte b/src/components/DowngradePlan/ReviewScheduledDowngradeModal.svelte
new file mode 100644
index 00000000..56b0ed69
--- /dev/null
+++ b/src/components/DowngradePlan/ReviewScheduledDowngradeModal.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import DowngradeModalButtons from '@/ui/DowngradeModalButtons/DowngradeModalButtons.svelte';
+
+  export let currentPlan: string;
+  export let selectedPlan: string;
+  export let hubName: string;
+  export let hubWorkspaces: [];
+  export let expiryDate: string;
+  export let selectedWorkspaces: [];
+  export let selectedMembers: [];
+  export let isOpen: boolean = false;
+
+  const dispatch = createEventDispatcher();
+  let feedback = '';
+  const maxChars = 3500;
+
+  function handleCancel() {
+    dispatch('close');
+  }
+
+  function handleConfirm() {
+    dispatch('confirm', { feedback });
+  }
+  $: modalHeight = selectedPlan?.toLowerCase() === 'community' ? 'h-[555px]' : 'h-[485px]';
+</script>
+
+{#if isOpen}
+  <div
+    class="w-[533px] bg-[#181C26] ${modalHeight} flex flex-col gap-4 rounded-md p-6 text-white shadow-2xl"
+  >
+    <!-- Header -->
+    <div class="flex items-start justify-between">
+      <h2 class="font-inter text-fs-ds-20 font-medium text-neutral-50">
+        Please Review Your Scheduled Downgrade
+      </h2>
+      <button
+        class="text-fs-ds-20 mt-1 h-[11px] w-[11px] cursor-pointer leading-none text-neutral-400 hover:text-neutral-200"
+        on:click={handleCancel}
+      >
+        ✕
+      </button>
+    </div>
+
+    <!-- Info -->
+    <p class="font-inter text-fs-ds-12 leading-relaxed font-light text-neutral-200">
+      You are about to schedule your downgrade plan from
+      <span>{currentPlan}</span> edition to
+      <span>{selectedPlan}</span> edition for
+      <span>{expiryDate}</span>. Please review the changes below before you confirm. You can go back
+      to make changes.
+    </p>
+
+    <!-- Active Workspaces -->
+    <div class="mt-2">
+      <p class="font-inter text-fs-ds-14 font-medium text-neutral-100">Active Workspaces</p>
+      {#if selectedWorkspaces.length === 0}
+        <p class="text-fs-ds-12 mt-2 ml-2 text-neutral-400 italic">
+          No active workspaces for this hub
+        </p>
+      {:else}
+        <div class="text-fs-ds-12 mt-2 ml-2 flex flex-wrap gap-x-4 gap-y-2 text-neutral-300">
+          {#each selectedWorkspaces as ws}
+            <span>• {ws.name || ws}</span>
+          {/each}
+        </div>
+      {/if}
+    </div>
+
+    {#if selectedPlan?.toLowerCase() === 'community'}
+      <div class="mt-3">
+        <p class="font-inter text-fs-ds-14 font-medium text-neutral-100">Active Members</p>
+
+        {#if selectedMembers.length === 0}
+          <p class="text-fs-ds-12 mt-2 ml-2 text-neutral-400 italic">
+            No active members for this hub
+          </p>
+        {:else}
+          <div class="text-fs-ds-12 mt-2 ml-2 flex flex-wrap gap-x-4 gap-y-2 text-neutral-300">
+            {#each selectedMembers as member}
+              <span>• {member.email || member}</span>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Feedback -->
+    <div class="mt-4">
+      <p class="font-inter text-fs-ds-14 mb-1 font-medium text-neutral-100">Share Feedback</p>
+      <textarea
+        bind:value={feedback}
+        maxlength={maxChars}
+        placeholder="We're always looking to improve. We'd be grateful to know the main reason for your downgrade."
+        class="text-fs-ds-14 w-full resize-none rounded-md bg-[#222630] p-3 text-neutral-100 outline-none focus:ring-neutral-500"
+        rows="4"
+      ></textarea>
+      <p class="text-right text-[11px] text-neutral-500 mt-1">{feedback.length}/{maxChars}</p>
+    </div>
+
+    <!-- Footer -->
+    <div class="mt-auto">
+      <DowngradeModalButtons
+        showSupport={true}
+        disableSupport={false}
+        supportText="Contact Support"
+        cancelText="Make Changes"
+        confirmText="Confirm Downgrade"
+        primaryVariant="filled-tertiary"
+        on:cancel={handleCancel}
+        on:confirm={handleConfirm}
+        on:support={() => window.open('mailto:contactus@sparrowapp.dev', '_blank')}
+      />
+    </div>
+  </div>
+{/if}
diff --git a/src/components/Modal/Modal.svelte b/src/components/Modal/Modal.svelte
index b8f9ae47..b7bca190 100644
--- a/src/components/Modal/Modal.svelte
+++ b/src/components/Modal/Modal.svelte
@@ -18,7 +18,7 @@
   });
 </script>
 
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs">
   <div class="w-full {width}" bind:this={modalRef} transition:scale={{ duration: 300 }}>
     <slot />
   </div>
diff --git a/src/components/PlanUpdateStatus/PlanDowngradeFailed.svelte b/src/components/PlanUpdateStatus/PlanDowngradeFailed.svelte
new file mode 100644
index 00000000..d3c04cda
--- /dev/null
+++ b/src/components/PlanUpdateStatus/PlanDowngradeFailed.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    import Button from '@/ui/Button/Button.svelte';
+    import CloseIcon from '@/assets/icons/CloseIcon.svelte';
+    import CloseIconV2 from '@/assets/icons/CloseIconV2.svelte';
+  
+    const dispatch = createEventDispatcher<{
+      close: void;
+      tryAgain: void;
+      contactSupport: void;
+    }>();
+  
+    // Props
+    export let hubName: string = '';
+  
+    function handleClose() {
+      dispatch('close');
+    }
+  
+    function handleTryAgain() {
+      dispatch('tryAgain');
+    }
+  
+    function handleContactSupport() {
+      dispatch('contactSupport');
+    }
+  </script>
+  
+  <div class="bg-surface-600 max-w-xl rounded-lg p-7 text-white">
+    <!-- Header -->
+    <div class="mb-3 flex items-start justify-between">
+      <div class="flex items-center gap-2">
+        <h2 class="text-fs-ds-20 font-inter font-fw-ds-500 text-neutral-50">
+          Failed to Schedule Downgrade
+        </h2>
+      </div>
+  
+      <button class="cursor-pointer" on:click={handleClose}>
+        <CloseIcon />
+      </button>
+    </div>
+  
+    <!-- Description -->
+    <p class="text-fs-ds-12 font-fw-ds-300 font-inter mt-2 text-neutral-400">
+      We're sorry, but we were unable to schedule the downgrade for '{hubName}' at this time.
+    </p>
+    <p class="text-fs-ds-12 font-fw-ds-300 font-inter mt-2 mb-6 text-neutral-400">
+      Your plan has not been changed. Please try again. If the problem continues, our support team is
+      ready to help.
+    </p>
+  
+    <!-- Buttons -->
+    <div class="flex items-center justify-between">
+      <a
+        href="mailto:contactus@sparrowapp.dev"
+        class="text-fs-ds-14 font-inter font-fw-ds-400 text-gray-400 underline"
+        on:click={handleContactSupport}
+      >
+        Contact Support
+      </a>
+  
+      <div class="flex items-center gap-3">
+        <Button variant="outlined-secondary" size="medium" on:click={handleClose}>Cancel</Button>
+        <Button variant="filled-primary" size="medium" on:click={handleTryAgain}>Try Again</Button>
+      </div>
+    </div>
+  </div>  
\ No newline at end of file
diff --git a/src/components/PlanUpdateStatus/PlanUpdateSuccess.svelte b/src/components/PlanUpdateStatus/PlanUpdateSuccess.svelte
index 12454426..a1693276 100644
--- a/src/components/PlanUpdateStatus/PlanUpdateSuccess.svelte
+++ b/src/components/PlanUpdateStatus/PlanUpdateSuccess.svelte
@@ -16,6 +16,10 @@
   export let nextBillingDate: string = '';
   export let fromPlan: string = '';
   export let toPlan: string = '';
+  export let PlanUpdateTitle: string = '';
+  export let description: string = '';
+  export let isUpgrade: boolean = false;
+  export let buttonText: string = '';
 
   function handleClose() {
     dispatch('close');
@@ -38,19 +42,23 @@
   <!-- Header with success -->
   <div class="mb-3 flex items-start justify-between">
     <div class="flex items-center gap-2">
-      <div class="h-5 w-5">
-        <SelectIcon />
-      </div>
-      <h2 class="text-fs-ds-20 font-inter font-fw-ds-500 text-neutral-50">Plan Updated</h2>
+      {#if isUpgrade}
+        <div class="h-5 w-5">
+          <SelectIcon />
+        </div>
+      {/if}
+      <h2 class="text-fs-ds-20 font-inter font-fw-ds-500 text-neutral-50">{PlanUpdateTitle}</h2>
     </div>
 
     <button class="cursor-pointer" on:click={handleClose}>
       <CloseIcon />
     </button>
   </div>
-  <p class="text-fs-ds-12 font-fw-ds-300 font-inter mt-2 mb-3 text-neutral-400">
-    You've successfully switched from the {fromPlan} to the {toPlan} plan.
-  </p>
+  {#if isUpgrade}
+    <p class="text-fs-ds-12 font-fw-ds-300 font-inter mt-2 mb-3 text-neutral-400">
+      You've successfully switched from the {fromPlan} to the {toPlan} plan.
+    </p>
+  {/if}
 
   <!-- Plan details -->
   <div class="mb-6 grid grid-cols-2 gap-y-4">
@@ -70,10 +78,16 @@
     </div>
   </div>
 
+  {#if description}
+    <p class="text-fs-ds-12 font-inter font-fw-ds-400 text-neutral-300 mb-4">
+      {description}
+    </p>
+  {/if}
+
   <!-- Action button -->
   <div class="flex items-center justify-end">
-    <Button variant="filled-primary" size="medium" on:click={handleGoToDashboard}
-      >Go to Dashboard</Button
-    >
+    <Button variant="filled-primary" size="medium" on:click={handleGoToDashboard}>
+      {buttonText}
+    </Button>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/components/PlanUpdateStatus/index.ts b/src/components/PlanUpdateStatus/index.ts
index aa4cdaee..fa7c3d8d 100644
--- a/src/components/PlanUpdateStatus/index.ts
+++ b/src/components/PlanUpdateStatus/index.ts
@@ -1,3 +1,4 @@
 export { default as PlanUpdateFailed } from './PlanUpdateFailed.svelte';
 export { default as PlanUpdateSuccess } from './PlanUpdateSuccess.svelte';
 export { default as PlanScheduleSuccess } from './PlanScheduleSuccess.svelte';
+export { default as PlanDowngradeFailed} from './PlanDowngradeFailed.svelte'
\ No newline at end of file
diff --git a/src/pages/Hubs/WorkSpaceOverview/BottomWorkspace.svelte b/src/pages/Hubs/WorkSpaceOverview/BottomWorkspace.svelte
index 536fbc33..bc5ccc5a 100644
--- a/src/pages/Hubs/WorkSpaceOverview/BottomWorkspace.svelte
+++ b/src/pages/Hubs/WorkSpaceOverview/BottomWorkspace.svelte
@@ -111,7 +111,6 @@
           teamName: 'Members',
           workspaces: data?.users || [],
         };
-
   $: columns =
     selectedTab === 'resources'
       ? [
diff --git a/src/pages/Hubs/WorkSpaceOverview/WorkSpaceOverview.svelte b/src/pages/Hubs/WorkSpaceOverview/WorkSpaceOverview.svelte
index e94bd02a..6aec81ac 100644
--- a/src/pages/Hubs/WorkSpaceOverview/WorkSpaceOverview.svelte
+++ b/src/pages/Hubs/WorkSpaceOverview/WorkSpaceOverview.svelte
@@ -150,7 +150,6 @@
       tab: queryState.tab,
       resources: queryState.resourceType,
     };
-
     return hubsService.getWorkspaceDetails(queryParams);
   });
 
diff --git a/src/pages/Payment/Overview/Overview.svelte b/src/pages/Payment/Overview/Overview.svelte
index 9d71a893..2f051e92 100644
--- a/src/pages/Payment/Overview/Overview.svelte
+++ b/src/pages/Payment/Overview/Overview.svelte
@@ -15,6 +15,7 @@
     processSubscriptionData,
     getCurrentPlanDetails,
     initializePlanDetails,
+    DEFAULT_PLAN_DETAILS
   } from '@/utils/pricing';
   import { getDynamicCssClasses } from '@/utils/planTagStyles';
   import { captureEvent } from '@/utils/posthogConfig';
@@ -38,6 +39,9 @@
   import RedirectIcon from '@/assets/icons/RedirectIcon.svelte';
   import CircularLoader from '@/ui/CircularLoader/CircularLoader.svelte';
   import GreenCheckIconFill from '@/assets/icons/GreenCheckIconFill.svelte';
+    import ChooseActiveWorkspaceModal from '@/components/DowngradePlan/ChooseActiveWorkspaceModal.svelte';
+    import ChooseActiveMembersModal from '@/components/DowngradePlan/ChooseActiveMembersModal.svelte';
+    import ReviewScheduledDowngradeModal from '@/components/DowngradePlan/ReviewScheduledDowngradeModal.svelte';
 
   // ===== CONSTANTS =====
   const location = useLocation();
@@ -65,7 +69,16 @@
   let invoiceUrl = '';
   let isScheduledDowngrade = false;
   let promoDiscount = null;
-
+  let workspaces = [];
+  let selectedWorkspaces = [];
+  let unSelectedWorkspaces = [];
+  let selectedMembers = [];
+  let membersFromSelectedWorkspaces = [];
+  let hubOwner = null
+  let hubUsers = []
+  let showMembersModal = false
+  let createdAt = null
+  let feedback = ''
   // UI state
   let isLoadingSubscription = false;
   let hasRedirected = false; // Prevent multiple redirects
@@ -75,13 +88,16 @@
 
   // Cancel subscription state
   let showCancelConfirmModal = false;
+  let showWorkspaceModal = false;
   let showCancelSuccessModal = false;
   let cancelInProgress = false;
+  let showReviewModal = false;
 
   // Resubscribe state
   let showResubscribeModal = false;
   let resubscribeInProgress = false;
 
+
   // Animation stores for cards
   const cardOpacity = tweened(0, {
     duration: 600,
@@ -181,12 +197,41 @@
     }
   }
 
+  function getExpiryDate(createdAt){
+    if (!createdAt) return '-';
+    const created = new Date(createdAt);
+    const expiry = new Date(created);
+    expiry.setDate(expiry.getDate() + 30);
+
+    // Format like "28 Aug 2025, 10:00 AM UTC"
+    const options= {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+      timeZone: 'UTC',
+    };
+
+    // Calculate days left
+    const now = new Date();
+    const diffInMs = expiry.getTime() - now.getTime();
+    const daysLeft = Math.max(Math.ceil(diffInMs / (1000 * 60 * 60 * 24)), 0); // avoid negative
+
+    const formattedExpiry = expiry.toLocaleString('en-GB', options) + ' UTC';
+    return `${formattedExpiry} (${daysLeft} day${daysLeft !== 1 ? 's' : ''} left)`;
+  }
   // Process hub data when it changes
   $: if ($hubData !== undefined) {
     currentHubData = $hubData?.data || null;
     hubName = currentHubData?.name || '';
     userCount = $hubData?.data?.users?.length + $hubData?.data?.invites?.length || 1;
     planStatus = currentHubData?.billing?.status;
+    workspaces = currentHubData?.workspaces;
+    hubUsers = currentHubData?.users;
+    hubOwner = currentHubData?.owner;
+    createdAt = currentHubData?.createdAt;
     // Use plan name from the database
     currentPlan = currentHubData?.plan?.name || 'Community';
     invoiceUrl =
@@ -209,7 +254,6 @@
     ) {
       // Process subscription data using the utility function
       const processedData = processSubscriptionData(subscriptionData, currentPlan);
-
       // Update all subscription-related variables
       subscriptionId = processedData.subscriptionId;
       // Don't override currentPlan from the database
@@ -266,6 +310,8 @@
     }
   }
 
+  $: expiryDate = getExpiryDate(createdAt);
+
   // Add animation trigger
   $: if (!$isFetchingSubscription && !$isFetchingHub && $hubData?.data) {
     setTimeout(() => {
@@ -294,32 +340,156 @@
       status: subscriptionStatus,
       userCount: userCount.toString(),
       inTrial: $hubData?.data?.billing?.in_trial ? 'true' : 'false',
+      mode: 'upgrade',
     });
 
     navigate(`/billing/billingInformation/changePlan/${hubId}?${searchParams.toString()}`);
   }
 
+  function handleChangePlanClick() {
+    captureUserClickUpgradePlan();
+    if (planStatus === 'payment_failed' || planStatus === 'action_required') {
+      if (isRedirecting) {
+        isRedirecting = false;
+        return;
+      } else {
+        notification.error('Please resolve the payment issue before changing your plan.');
+      }
+      return; 
+    }
+    const searchParams = new URLSearchParams({
+      currentPlan,
+      currentBillingCycle,
+      subscriptionId: subscriptionId || '',
+      status: subscriptionStatus,
+      userCount: userCount.toString(),
+      inTrial: $hubData?.data?.billing?.in_trial ? 'true' : 'false',
+      mode: 'change-plan',
+      isScheduledDowngrade: isScheduledDowngrade ? 'true' : 'false',
+      isScheduledCancelled: subscriptionData?.cancel_at_period_end ? 'true' : 'false'
+    });
+
+    navigate(`/billing/billingInformation/changePlan/${hubId}?${searchParams.toString()}`);
+  }
+
+  $: plans = DEFAULT_PLAN_DETAILS;
+
   // Cancel subscription functions
   function openCancelModal() {
     showCancelConfirmModal = true;
+  } 
+
+  function openWorkspaceModal(){
+    showWorkspaceModal = true;
+  }
+
+  function openMembersModal(){
+    showMembersModal = true;
+  }
+
+  function openReviewModal(){
+    showReviewModal = true;
   }
 
   function closeCancelConfirmModal() {
     showCancelConfirmModal = false;
   }
 
+  function closeActiveWorkspaceModal(){
+    showWorkspaceModal = false;
+    cancelInProgress = false;
+  }
+
+  function closeActiveMembersModal(){
+    showMembersModal = false;
+    cancelInProgress = false;
+  }
+
+  function closeReviewModal(){
+    showReviewModal = false;
+  }
+
   function closeCancelSuccessModal() {
     showCancelSuccessModal = false;
   }
 
-  async function confirmCancelSubscription() {
+  function removeAdminFromMembersList(hubOwner, members = []) {
+    if (!hubOwner) return members;
+    return members.filter((member) => member.id !== hubOwner);
+  }
+
+  function confirmWorkspaceSelection(e){
+    selectedWorkspaces = e.detail.selected;
+    unSelectedWorkspaces = e.detail.unselected;
+    membersFromSelectedWorkspaces = removeAdminFromMembersList(hubOwner, e.detail.members) || [];
+    closeActiveWorkspaceModal();
+    if(membersFromSelectedWorkspaces?.length > plans.community.monthly.collaborators){
+      openMembersModal()
+    }else{
+      selectedMembers = membersFromSelectedWorkspaces;
+      openReviewModal()
+    }
+  }
+
+  function confirmMemberSelection(e){
+    selectedMembers = e.detail.selected;
+    closeActiveMembersModal();
+    openReviewModal()
+  }
+
+  function confirmCancelSubscription() {
     cancelInProgress = true;
+    closeCancelConfirmModal()
+    if(workspaces.length > plans.community.monthly.workspaces){
+      openWorkspaceModal()
+    }else{
+      selectedWorkspaces = workspaces;
+      if(hubUsers?.length > plans.community.monthly.collaborators){
+        openMembersModal()
+      }else{
+        selectedMembers = removeAdminFromMembersList(hubOwner, hubUsers) || [];
+        openReviewModal()
+      }
+    }
+  }
+
+  function closeReviewScheduledDowngradeModal(){
+    if (hubUsers?.length > plans.community.monthly.collaborators) {
+      closeReviewModal();
+      openMembersModal();
+      if (workspaces.length > plans.community.monthly.workspaces) {
+        closeActiveMembersModal();
+        openWorkspaceModal();
+      }
+    } else if (workspaces.length > plans.community.monthly.workspaces) {
+      closeReviewModal();
+      openWorkspaceModal();
+    } else {
+      closeReviewModal();
+    }
+  }
+
+  async function confirmDowngradeToCommunity(e){
+    feedback = e.detail.feedback;
+
+    const downgradePayload = {
+      teamId: hubId,
+      workspaces: selectedWorkspaces.map((ws) => ({
+        id: ws._id || ws.id,
+        name: ws.name,
+      })),
+      users: selectedMembers.map((user) => ({
+        id: user._id || user.id,
+        email: user.email,
+      })),
+    };
+
     try {
       // Call the cancel subscription API
-      await billingService.cancelSubscription({ subscriptionId });
+      await billingService.cancelSubscription({ subscriptionId, ...downgradePayload });
 
-      // Close confirmation modal and show success modal
-      closeCancelConfirmModal();
+      // Close review modal and show success modal
+      closeReviewModal();
       showCancelSuccessModal = true;
 
       // Update local state
@@ -436,7 +606,7 @@
   </div>
 {/if}
 
-{#if $hubData?.data}
+{#if $hubData?.data && currentHubData}
   <section class="payment-information text-white">
     <div class="mb-6 flex items-end justify-between">
       <div>
@@ -530,21 +700,27 @@
             </div>
 
             {#if !isScheduledDowngrade}
-              {#if subscriptionId && subscriptionData?.status === 'active' && !subscriptionData?.cancel_at_period_end}
-                <button
-                  class="text-fs-ds-12 font-inter font-fw-ds-400 cursor-pointer text-neutral-200 underline"
-                  on:click={openCancelModal}
-                >
-                  Cancel Subscription
-                </button>
-              {/if}
-              {#if subscriptionId && subscriptionData?.cancel_at_period_end}
-                <button
-                  class="text-fs-ds-12 font-inter font-fw-ds-400 cursor-pointer text-neutral-200 underline"
-                  on:click={openResubscribeModal}
-                >
-                  Resubscribe
-                </button>
+              {#if currentPlan !== 'Community'}
+                {#if subscriptionId && subscriptionData?.status === 'active' && !subscriptionData?.cancel_at_period_end}
+                  <button
+                    class="text-fs-ds-12 font-inter font-fw-ds-400 cursor-pointer text-neutral-200 underline"
+                    on:click={openCancelModal}
+                  >
+                    Cancel Subscription
+                  </button>
+                {/if}
+                {#if subscriptionId && subscriptionData?.cancel_at_period_end}
+                  <button
+                    class="text-fs-ds-12 font-inter font-fw-ds-400 cursor-pointer text-neutral-200 underline"
+                    on:click={openResubscribeModal}
+                  >
+                    Resubscribe
+                  </button>
+                {/if}
+              {:else}
+                <span class="text-fs-ds-12 font-inter font-fw-ds-400 text-neutral-400 italic">
+                  Community plan — upgrade to unlock premium features
+                </span>
               {/if}
             {/if}
           </div>
@@ -592,14 +768,12 @@
               </p>
             </div>
             <div class="mt-2 flex items-center gap-4">
-              {#if !isScheduledDowngrade && subscriptionData?.cancel_at_period_end && subscriptionData?.status === 'canceled'}
-                <button
-                  class="text-fs-ds-12 font-inter font-fw-ds-400 cursor-pointer text-blue-300"
-                  on:click={handleUpgradeClick}
-                >
-                  Change plan
-                </button>
-              {/if}
+              <button
+                class="text-fs-ds-12 font-inter font-fw-ds-400 cursor-pointer text-blue-300"
+                on:click={handleChangePlanClick}
+              >
+                Change plan
+              </button>
             </div>
           </div>
         </div>
@@ -621,11 +795,6 @@
             on:click={handleUpgradeClick}
             disabled={isScheduledDowngrade ||
               (subscriptionData?.cancel_at_period_end && subscriptionData?.status !== 'canceled')}
-            tooltipText={isScheduledDowngrade
-              ? `Scheduled plan change. Your subscription will downgrade on ${nextBillingDate}. Plan changes are locked until then.`
-              : ''}
-            tooltipPosition="bottom"
-            tooltipDelay={100}
           >
             Upgrade
           </Button>
@@ -745,6 +914,49 @@
       </Modal>
     {/if}
 
+    {#if showWorkspaceModal}
+        <ChooseActiveWorkspaceModal
+          {hubId}
+          {currentPlan}
+          selectedPlan="Community"
+          planLimits = {plans.community.monthly.workspaces}
+          isOpen={showWorkspaceModal}
+          workspaces={workspaces}
+          on:close={closeActiveWorkspaceModal}
+          on:next={confirmWorkspaceSelection}
+        />
+    {/if}
+
+    {#if showMembersModal}
+        <ChooseActiveMembersModal
+          users={workspaces.length > plans.community.monthly.workspaces
+            ? membersFromSelectedWorkspaces
+            : removeAdminFromMembersList(hubOwner, hubUsers)}          
+          planLimits = {plans.community.monthly.collaborators}
+          isOpen={showMembersModal}
+          expiryDate={expiryDate}
+          on:close={closeActiveMembersModal}
+          on:next={confirmMemberSelection}
+        />
+    {/if}
+
+    {#if showReviewModal}
+      <Modal on:close={closeReviewModal}>
+        <ReviewScheduledDowngradeModal
+          isOpen={showReviewModal}
+          currentPlan={currentPlan}
+          selectedPlan="Community"
+          hubName={hubName}
+          selectedWorkspaces={selectedWorkspaces}
+          selectedMembers={selectedMembers}
+          expiryDate={expiryDate}
+          hubWorkspaces={workspaces}
+          on:close={closeReviewScheduledDowngradeModal}
+          on:confirm={confirmDowngradeToCommunity}
+        />
+      </Modal>
+    {/if}
+
     <!-- Cancel Subscription Success Modal -->
     {#if showCancelSuccessModal}
       <Modal on:close={closeCancelSuccessModal}>
diff --git a/src/pages/Payment/PaymentInformation/ChangePlanPage.svelte b/src/pages/Payment/PaymentInformation/ChangePlanPage.svelte
index 4e4078ab..229020db 100644
--- a/src/pages/Payment/PaymentInformation/ChangePlanPage.svelte
+++ b/src/pages/Payment/PaymentInformation/ChangePlanPage.svelte
@@ -7,9 +7,10 @@
 
   // Components
   import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs.svelte';
+  import { hubsService } from '@/services/hubs.service';
   import Tag from '@/ui/Tag/Tag.svelte';
   import Button from '@/ui/Button/Button.svelte';
-
+  import Modal from '@/components/Modal/Modal.svelte';
   // Icons
   import CheckIcon from '@/assets/icons/Check.svelte';
 
@@ -25,6 +26,17 @@
     type BillingCycleType,
   } from '@/utils/pricing';
   import { captureEvent } from '@/utils/posthogConfig';
+  import DowngradePlan from '@/components/DowngradePlan/DowngradePlanModal.svelte';
+  import { createQuery } from '@/services/api.common';
+  import DowngradePlanModal from '@/components/DowngradePlan/DowngradePlanModal.svelte';
+  import ChooseActiveWorkspaceModal from '@/components/DowngradePlan/ChooseActiveWorkspaceModal.svelte';
+  import ChooseActiveMembersModal from '@/components/DowngradePlan/ChooseActiveMembersModal.svelte';
+  import ReviewScheduledDowngradeModal from '@/components/DowngradePlan/ReviewScheduledDowngradeModal.svelte';
+  import { billingService } from '@/services/billing.service';
+  import { notification } from '@/components/Toast';
+  import PaymentProcessingModal from '@/components/PaymentProcessingModal/PaymentProcessingModal.svelte';
+  import { PlanUpdateSuccess } from '@/components/PlanUpdateStatus';
+  import { PlanDowngradeFailed } from '@/components/PlanUpdateStatus';
 
   const location = useLocation();
 
@@ -64,6 +76,35 @@
   let subscriptionStatus: string = '';
   let userCount: number = 1;
   let inTrial: boolean = false;
+  let downgradeModal: boolean = false;
+  let allowDowngrade: boolean = false;
+  let selectedPlan: string = '';
+  let hubName: string = '';
+  let hubWorkspaces: [];
+  let mode: string = 'change-plan';
+  let isScheduledDowngrade: boolean = false;
+  let isScheduledCancelled: boolean = false;
+  let createdAt: string;
+  let hubUsers: [];
+  let hubOwner: string;
+  let downgradeFlow = {
+    downgradeModal: false,
+    chooseWorkspaceModal: false,
+    chooseMembersModal: false,
+    reviewModal: false,
+    showProcessingModal: false,
+    showDowngradeConfirmModal: false,
+    showDowngradeFailedModal: false,
+  };
+  let priceId: string;
+  let downgradeData = {
+    selectedWorkspaces: [],
+    unselectedWorkspaces: [],
+    selectedMembers: [],
+    feedback: '',
+    members: [],
+  };
+  let planLimits: [];
 
   // URL parsing
   $: {
@@ -86,17 +127,43 @@
     subscriptionStatus = searchParams.get('status') || '';
     userCount = parseInt(searchParams.get('userCount') || '1', 10);
     inTrial = searchParams.get('inTrial') === 'true';
+    mode = searchParams.get('mode') || 'change-plan';
+    isScheduledDowngrade = searchParams.get('isScheduledDowngrade') === 'true';
+    isScheduledCancelled = searchParams.get('isScheduledCancelled') === 'true';
   }
 
+  $: pageHeading = mode === 'upgrade' ? 'Upgrade Plan' : 'Change Your Plan';
+  $: pageDescription =
+    mode === 'upgrade'
+      ? "You're ready for the next level. Upgrade to access more and features. You can switch plans at any time."
+      : 'Select a different plan that fits your needs. Your current plan is highlighted below. The new plan will take effect immediately or at the start of your next billing cycle depending on your billing terms.';
+
   // Plan details for comparison
   let planDetails = getCurrentPlanDetails();
 
-  // Initialize plan details with API data
   onMount(async () => {
     await initializePlanDetails();
     planDetails = getCurrentPlanDetails();
+    if (hubId) await getHubName(hubId);
   });
 
+  async function getHubName(hubId: string) {
+    try {
+      const response = await hubsService.getHubDetails(hubId);
+      if (response?.data) {
+        const data = response.data;
+        hubOwner = data.owner;
+        hubName = data.name || ' ';
+        hubWorkspaces = data.workspaces;
+        hubUsers = data.users;
+        createdAt = data.createdAt;
+        currentPlan = data.plan.name;
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   // State
   let billingCycle: BillingCycleType = currentBillingCycle;
 
@@ -118,22 +185,24 @@
 
   // Handle plan selection
   function selectPlan(plan) {
+    selectedPlan = plan;
+    const selectedPlanLimits = planDetails?.[plan]?.[billingCycle] ?? {};
+    planLimits = {
+      workspacesPerHub: { value: selectedPlanLimits.workspaces },
+      usersPerHub: { value: selectedPlanLimits.collaborators },
+    };
     if (plan === 'enterprise') {
       captureUserPlanUpgradeClick(currentPlan, plan);
-      // Open contact form in a new tab
       window.open('mailto:contactus@sparrowapp.dev', '_blank');
     } else {
       const targetPlanId = getPlanId(plan, billingCycle);
 
-      // Don't allow selecting the current plan
       if (targetPlanId !== currentPlanId) {
-        // Get the price ID based on billing cycle
-        const priceId =
+        priceId =
           billingCycle === 'monthly'
             ? planDetails[plan].monthly.priceId
             : planDetails[plan].annual.priceId;
 
-        // Determine if this is a downgrade
         const isDowngradeChange = isDowngrade(
           currentPlanLower,
           plan,
@@ -141,17 +210,35 @@
           billingCycle,
         );
 
-        if (!isDowngradeChange) {
+        if (isDowngradeChange) {
+          const selectedPlanLimits = planDetails?.[plan]?.[billingCycle] ?? {};
+          const maxWorkspaces = selectedPlanLimits.workspaces ?? 0;
+          const maxUsers = selectedPlanLimits.collaborators ?? 0;
+
+          const currentWorkspaceCount = hubWorkspaces?.length || 0;
+          const currentUserCount = hubUsers?.length || 0;
+
+          const hasWorkspaces = currentWorkspaceCount > 0;
+          const hasMembers = currentUserCount > 0;
+          downgradeFlow.downgradeModal = true;
+          downgradeData.selectedWorkspaces = [];
+          downgradeData.selectedMembers = [];
+          if (!hasWorkspaces && !hasMembers) {
+            downgradeFlow.downgradeModal = false;
+            downgradeFlow.reviewModal = true;
+            return;
+          }
+
+          return;
+        } else {
           captureUserPlanUpgradeClick(currentPlan, plan);
         }
 
-        // Store current Change Plan page URL in session storage
         const url = new URL(window.location.href);
         const searchParamsChangePlan = new URLSearchParams(url.search);
         const updatedUrl = url.pathname + '?' + searchParamsChangePlan.toString();
         sessionStorage.setItem('changePlanPageUrl', updatedUrl);
 
-        // Navigate to payment method selection page
         const searchParams = new URLSearchParams({
           plan: capitalizeFirstLetter(plan),
           billingCycle: billingCycle,
@@ -170,12 +257,21 @@
     }
   }
 
-  // Check if a plan is selectable based on current plan and billing cycle
-  function isPlanSelectable(plan) {
-    return checkPlanSelectable(currentPlanLower, plan, billingCycle, currentBillingCycle);
+  function isPlanSelectable(plan: string) {
+    if (isScheduledDowngrade) {
+      if (currentPlan === 'Professional' && (plan === 'community' || plan === 'standard')) {
+        return false;
+      }
+      return true;
+    } else if (isScheduledCancelled) {
+      if (plan === 'community') {
+        return false;
+      }
+      return true;
+    }
+    return true;
   }
 
-  // Get button text for a plan
   function getButtonText(plan) {
     const isCurrentPlan = plan === currentPlanLower && billingCycle === currentBillingCycle;
 
@@ -194,16 +290,16 @@
     if (targetPlanValue > currentPlanValue) {
       return 'Upgrade';
     } else if (targetPlanValue < currentPlanValue) {
-      return 'Downgrade';
+      return 'Select Plan';
     } else {
       return 'Your plan';
     }
   }
 
-  // Prepare breadcrumb navigation
+  $: breadcrumbLabel = mode === 'upgrade' ? 'Upgrade Plan' : 'Change Plan';
   $: breadcrumbItems = [
     { label: 'Billing', path: `/billing/billingOverview/${hubId}` },
-    { label: 'Change Plan', path: '' },
+    { label: breadcrumbLabel, path: '' },
   ];
 
   // Make plan values reactive
@@ -259,6 +355,68 @@
     };
     captureEvent('admin_plan_upgraded', eventProperties);
   };
+
+  function getExpiryDate(createdAt: string): string {
+    if (!createdAt) return '-';
+    const created = new Date(createdAt);
+    const expiry = new Date(created);
+    expiry.setDate(expiry.getDate() + 30);
+
+    // Format like "28 Aug 2025, 10:00 AM UTC"
+    const options: Intl.DateTimeFormatOptions = {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+      timeZone: 'UTC',
+    };
+
+    // Calculate days left
+    const now = new Date();
+    const diffInMs = expiry.getTime() - now.getTime();
+    const daysLeft = Math.max(Math.ceil(diffInMs / (1000 * 60 * 60 * 24)), 0); // avoid negative
+
+    const formattedExpiry = expiry.toLocaleString('en-GB', options) + ' UTC';
+    return `${formattedExpiry} (${daysLeft} day${daysLeft !== 1 ? 's' : ''} left)`;
+  }
+  $: expiryDate = getExpiryDate(createdAt);
+  function removeAdminFromMembersList(hubOwner, members = []) {
+    if (!hubOwner) return members;
+    return members.filter((member) => member.id !== hubOwner);
+  }
+
+  function filterOutOwners(users) {
+    return (users || []).filter((u) => (u.role || '').toLowerCase() !== 'owner');
+  }
+
+  function getDowngradeConstraints() {
+    const workspaceCount = hubWorkspaces?.length || 0;
+    const memberCount = hubUsers?.length || 0;
+    const maxWorkspaces = planLimits?.workspacesPerHub?.value || 0;
+    const maxUsers = planLimits?.usersPerHub?.value || 0;
+
+    const withinWorkspaceLimit = workspaceCount <= maxWorkspaces;
+    const withinUserLimit = memberCount <= maxUsers;
+    const isCommunity = selectedPlan?.toLowerCase() === 'community';
+    const isStandard = selectedPlan?.toLowerCase() === 'standard';
+    const hasWorkspaces = workspaceCount > 0;
+    const hasMembers = memberCount > 0;
+
+    return {
+      workspaceCount,
+      memberCount,
+      maxWorkspaces,
+      maxUsers,
+      withinWorkspaceLimit,
+      withinUserLimit,
+      isCommunity,
+      isStandard,
+      hasWorkspaces,
+      hasMembers,
+    };
+  }
 </script>
 
 <div
@@ -268,11 +426,8 @@
   <Breadcrumbs items={breadcrumbItems} />
 
   <div class="mt-6">
-    <h1 class="text-fs-ds-20 font-inter font-fw-ds-500 text-white">Upgrade Plan</h1>
-    <p class="text-fs-ds-14 font-inter font-fw-ds-300 text-neutral-400">
-      You're ready for the next level. Upgrade to access more and features. You can switch plans at
-      any time.
-    </p>
+    <h1 class="text-fs-ds-20 font-inter font-fw-ds-500 text-white">{pageHeading}</h1>
+    <p class="text-fs-ds-14 font-inter font-fw-ds-300 text-neutral-400">{pageDescription}</p>
 
     <div class="mt-6">
       <!-- Billing toggle with smooth sliding animation -->
@@ -310,12 +465,12 @@
       >
         {#each planValues as { plan, planName, isCurrentPlan, planPrice, planUnit, buttonText, hasDiscount, discount }, index}
           <div
-            class={`hover:bg-surface-600 hover:border-surface-50 overflow-hidden rounded-[10px] transition-all duration-200 ${isCurrentPlan ? 'border-2 border-neutral-50' : 'border-surface-500 border-2'}`}
-            style="
-              transform: scale({hoveredCardIndex === index ? $cardScale : 1});
-              animation: cardSlideIn 300ms ease-out forwards {index * 100}ms;
-            "
-            on:mouseenter={() => handleCardHover(index, true)}
+            class={`hover:border-surface-50 overflow-hidden rounded-[10px] border-2 transition-all duration-200
+          ${isCurrentPlan ? 'border-neutral-50' : 'border-surface-500'}
+          ${!isPlanSelectable(plan) && !isCurrentPlan ? 'opacity-70' : 'hover:bg-surface-600'}
+        `}
+            style="transform: scale({hoveredCardIndex === index ? $cardScale : 1});"
+            on:mouseenter={() => isPlanSelectable(plan) && handleCardHover(index, true)}
             on:mouseleave={() => handleCardHover(index, false)}
           >
             <!-- Plan Header -->
@@ -366,9 +521,11 @@
                     </Button>
                   {:else}
                     <Button
-                      variant="filled-primary"
-                      on:click={() => selectPlan(plan)}
-                      disabled={plan === 'community' || (inTrial && buttonText === 'Downgrade')}
+                      variant={buttonText === 'Upgrade' ? 'filled-primary' : 'outline-primary'}
+                      class={buttonText !== 'Upgrade' ? '!text-white' : ''}
+                      on:click={() => isPlanSelectable(plan) && selectPlan(plan)}
+                      disabled={!isPlanSelectable(plan) ||
+                        (inTrial && buttonText === 'Select Plan')}
                     >
                       {buttonText}
                     </Button>
@@ -456,6 +613,255 @@
   </div>
 </div>
 
+{#if downgradeFlow.downgradeModal}
+  <Modal on:close={() => (downgradeFlow.downgradeModal = false)}>
+    <DowngradePlanModal
+      {hubId}
+      {currentPlan}
+      {selectedPlan}
+      {hubName}
+      {hubWorkspaces}
+      {planLimits}
+      {expiryDate}
+      on:close={() => (downgradeFlow.downgradeModal = false)}
+      on:cancel={() => (downgradeFlow.downgradeModal = false)}
+      on:continue={() => {
+        downgradeFlow.downgradeModal = false;
+        const c = getDowngradeConstraints();
+
+        // Handle workspaces
+        if (c.withinWorkspaceLimit) {
+          downgradeData.selectedWorkspaces = hubWorkspaces || [];
+          downgradeData.members = filterOutOwners(hubUsers) || [];
+        } else {
+          downgradeFlow.chooseWorkspaceModal = true;
+          return;
+        }
+
+        // Handle members
+        if (c.isCommunity) {
+          if (c.withinUserLimit) {
+            downgradeData.selectedMembers = filterOutOwners(hubUsers) || [];
+            downgradeFlow.reviewModal = true;
+          } else {
+            downgradeFlow.chooseMembersModal = true;
+          }
+        } else if (c.isStandard) {
+          downgradeData.selectedMembers =
+            c.workspaceCount > 0 ? [] : filterOutOwners(hubUsers) || [];
+          downgradeFlow.reviewModal = true;
+        }
+      }}
+    />
+  </Modal>
+{/if}
+
+{#if downgradeFlow.chooseWorkspaceModal}
+  <ChooseActiveWorkspaceModal
+    {hubId}
+    {currentPlan}
+    {selectedPlan}
+    {planLimits}
+    isOpen={downgradeFlow.chooseWorkspaceModal}
+    workspaces={hubWorkspaces}
+    on:close={() => {
+      downgradeFlow.chooseWorkspaceModal = false;
+    }}
+    on:next={(e) => {
+      downgradeData.selectedWorkspaces = e.detail.selected;
+      downgradeData.unselectedWorkspaces = e.detail.unselected;
+      downgradeData.members = removeAdminFromMembersList(hubOwner, e.detail.members) || [];
+      downgradeFlow.chooseWorkspaceModal = false;
+
+      const c = getDowngradeConstraints();
+
+      if (c.isCommunity) {
+        const workspaceMemberCount = downgradeData.members?.length || 0;
+        const withinUserLimit = workspaceMemberCount <= c.maxUsers;
+
+        if (workspaceMemberCount === 0) {
+          downgradeData.selectedMembers = [];
+          downgradeFlow.reviewModal = true;
+        } else if (withinUserLimit) {
+          downgradeData.selectedMembers = downgradeData.members;
+          downgradeFlow.reviewModal = true;
+        } else {
+          downgradeFlow.chooseMembersModal = true;
+        }
+      } else if (c.isStandard) {
+        downgradeFlow.reviewModal = true;
+      }
+    }}
+  />
+{/if}
+
+{#if downgradeFlow.chooseMembersModal}
+  <ChooseActiveMembersModal
+    {hubId}
+    {currentPlan}
+    {selectedPlan}
+    {planLimits}
+    {expiryDate}
+    isOpen={downgradeFlow.chooseMembersModal}
+    hubOwner={hubUsers.find((u) => u.role === 'owner')}
+    users={downgradeData.members.length > 0
+      ? filterOutOwners(downgradeData.members)
+      : filterOutOwners(hubUsers)}
+    on:close={() => {
+      downgradeFlow.chooseMembersModal = false;
+      const c = getDowngradeConstraints();
+      if (c.workspaceCount > c.maxWorkspaces) downgradeFlow.chooseWorkspaceModal = true;
+    }}
+    on:next={(e) => {
+      downgradeData.selectedMembers = e.detail.selected;
+      downgradeFlow.chooseMembersModal = false;
+      downgradeFlow.reviewModal = true;
+    }}
+  />
+{/if}
+
+{#if downgradeFlow.reviewModal}
+  <Modal on:close={() => (downgradeFlow.reviewModal = false)}>
+    <ReviewScheduledDowngradeModal
+      isOpen={downgradeFlow.reviewModal}
+      {hubName}
+      {hubWorkspaces}
+      {currentPlan}
+      {selectedPlan}
+      {expiryDate}
+      selectedWorkspaces={downgradeData.selectedWorkspaces}
+      selectedMembers={downgradeData.selectedMembers}
+      on:close={() => {
+        downgradeFlow.reviewModal = false;
+        const c = getDowngradeConstraints();
+
+        if (c.isStandard) {
+          if (c.workspaceCount > c.maxWorkspaces) downgradeFlow.chooseWorkspaceModal = true;
+          else downgradeFlow.downgradeModal = true;
+        } else if (c.isCommunity) {
+          if (downgradeData.members?.length > c.maxUsers) downgradeFlow.chooseMembersModal = true;
+          else if (c.workspaceCount > c.maxWorkspaces) downgradeFlow.chooseWorkspaceModal = true;
+          else downgradeFlow.downgradeModal = true;
+        }
+      }}
+      on:confirm={async (e) => {
+        downgradeData.feedback = e.detail.feedback;
+        let updatePlanName;
+        if(selectedPlan?.toLowerCase() === 'standard'){
+          updatePlanName = "Standard"
+        }
+        const metadata = {
+          hubId,
+          userCount: userCount.toString(),
+          planName: updatePlanName,
+          trial_period_days: 0,
+          trial_end_date: null,
+        };
+        const downgradePayload = {
+          teamId: hubId,
+          workspaces: downgradeData.selectedWorkspaces.map((ws) => ({
+            id: ws._id || ws.id,
+            name: ws.name,
+          })),
+          users: filterOutOwners(downgradeData.selectedMembers).map((user) => ({
+            id: user._id || user.id,
+            email: user.email,
+          })),
+        };
+        downgradeFlow.reviewModal = false;
+        downgradeFlow.showProcessingModal = true;
+        try {
+          if (selectedPlan?.toLowerCase() === 'community') {
+            await billingService.cancelSubscription({
+              subscriptionId,
+              ...downgradePayload,
+            });
+            downgradeFlow.showProcessingModal = false;
+            downgradeFlow.showDowngradeConfirmModal = true;
+          } else if (selectedPlan?.toLowerCase() === 'standard') {
+            await billingService.updateSubscription({
+              priceId,
+              subscriptionId,
+              metadata,
+              isDowngrade: true,
+              ...downgradePayload,
+            });
+            downgradeFlow.showProcessingModal = false;
+            downgradeFlow.showDowngradeConfirmModal = true;
+          }
+        } catch (error) {
+          downgradeFlow.showProcessingModal = false;
+          downgradeFlow.showDowngradeFailedModal = true;
+        }
+      }}
+    />
+  </Modal>
+{/if}
+
+{#if downgradeFlow.showProcessingModal}
+  <Modal width="max-w-xl" on:close={() => (downgradeFlow.showProcessingModal = false)}>
+    <PaymentProcessingModal
+      title="Finalizing Your Downgrade"
+      description="Please don't close this window, We're saving your selections and scheduling your plan change. This will only take a moment."
+      on:close={() => (downgradeFlow.showProcessingModal = false)}
+    />
+  </Modal>
+{/if}
+{#if downgradeFlow.showDowngradeConfirmModal}
+  <Modal
+    width="max-w-xl"
+    on:close={() => {
+      downgradeFlow.showDowngradeConfirmModal = false;
+      navigate(`/billing/billingOverview/${hubId}`);
+    }}
+  >
+    <PlanUpdateSuccess
+      {hubName}
+      {currentPlan}
+      nextBillingDate={expiryDate}
+      fromPlan={currentPlan}
+      toPlan={selectedPlan}
+      PlanUpdateTitle="Your Downgrade is Scheduled"
+      description={`You've successfully scheduled the ${hubName} to downgrade to the ${selectedPlan} edition. This change will take effect on ${expiryDate}.
+        You can upgrade anytime and continue with the features.`}
+      buttonText="Got it"
+      on:close={() => {
+        downgradeFlow.showDowngradeConfirmModal = false;
+        navigate(`/billing/billingOverview/${hubId}`);
+      }}
+      on:goToDashboard={() => {
+        downgradeFlow.showDowngradeConfirmModal = false;
+        navigate(`/billing/billingOverview/${hubId}`);
+      }}
+    />
+  </Modal>
+{/if}
+
+{#if downgradeFlow.showDowngradeFailedModal}
+  <Modal
+    width="max-w-xl"
+    on:close={() => {
+      downgradeFlow.showDowngradeFailedModal = false;
+      navigate(`/billing/billingOverview/${hubId}`);
+    }}
+  >
+    <PlanDowngradeFailed 
+      {hubName} 
+      on:close={() => {
+        downgradeFlow.showDowngradeFailedModal = false;
+        navigate(`/billing/billingOverview/${hubId}`);
+      }}
+      on:contactSupport={() => {
+        window.open('mailto:contactus@sparrowapp.dev', '_blank');
+      }}
+      on:tryAgain={() => {
+        downgradeFlow.showDowngradeFailedModal = false;
+        downgradeFlow.reviewModal = true;
+      }}
+    />
+  </Modal>
+{/if}
+
 <style>
   @keyframes cardSlideIn {
     from {
diff --git a/src/pages/Payment/PaymentInformation/PaymentMethodSelectionPage.svelte b/src/pages/Payment/PaymentInformation/PaymentMethodSelectionPage.svelte
index 885f7367..67f8a8ce 100644
--- a/src/pages/Payment/PaymentInformation/PaymentMethodSelectionPage.svelte
+++ b/src/pages/Payment/PaymentInformation/PaymentMethodSelectionPage.svelte
@@ -589,6 +589,9 @@
         nextBillingDate={selectedPlanDetails.nextBilling}
         fromPlan={selectedPlanDetails.fromPlan}
         toPlan={selectedPlanDetails?.toPlan}
+        PlanUpdateTitle="Plan Updated"
+        isUpgrade
+        buttonText="Go to Dashboard"
         on:close={() => {
           showSubscriptionConfirmModal = false;
           navigate(`/billing/billingOverview/${hubId}`);
diff --git a/src/services/api.common.ts b/src/services/api.common.ts
index d89fc77d..679dcffc 100644
--- a/src/services/api.common.ts
+++ b/src/services/api.common.ts
@@ -266,7 +266,7 @@ export const makeRequest = async (
     case 'PUT':
       return httpClient.put(endpoint, data, requestConfig);
     case 'DELETE':
-      return httpClient.delete(endpoint, requestConfig);
+      return httpClient.delete(endpoint, data, requestConfig);
     case 'PATCH':
       return httpClient.patch(endpoint, data, requestConfig);
     default:
diff --git a/src/services/billing.service.ts b/src/services/billing.service.ts
index d0b03721..799fcb8c 100644
--- a/src/services/billing.service.ts
+++ b/src/services/billing.service.ts
@@ -27,12 +27,16 @@ interface CreateSubscriptionParams {
 
 interface UpdateSubscriptionParams {
   subscriptionId: string;
-  priceId: string;
-  paymentMethodId: string;
-  metadata?: any;
   isDowngrade?: boolean;
+  priceId?: string;
+  paymentMethodId?: string;
+  metadata?: any;
   seats?: number;
   paymentBehavior?: 'default_incomplete' | 'allow_incomplete';
+  // For downgrade
+  teamId?: string;
+  workspaces?: Array<{ workspaceId: string; name: string; }>;
+  users?: Array<{ id: string; email: string; }>;
 }
 
 // Add response interfaces for subscription operations that may require 3DS
@@ -45,6 +49,9 @@ interface SubscriptionResponse {
 
 interface CancelSubscriptionParams {
   subscriptionId: string;
+  teamId: string;
+  workspaces?: Array<{ workspaceId: string; name: string; }>;
+  users?: Array<{ id: string; email: string; }>;
 }
 
 interface ReactivateSubscriptionParams {
@@ -220,31 +227,48 @@ export class BillingService {
    */
   public async updateSubscription(params: UpdateSubscriptionParams): Promise<any> {
     const url = `/api/stripe/subscriptions/${params.subscriptionId}`;
-    const requestBody: any = {
-      priceId: params.priceId,
-      paymentMethodId: params.paymentMethodId,
-      metadata: params.metadata,
-      seats: params.seats,
-      paymentBehavior: params.paymentBehavior,
-    };
-
-    // If this is a downgrade, set it to happen at the end of the billing cycle
+    let requestBody: any = {};
     if (params.isDowngrade) {
-      requestBody.prorationBehavior = 'none';
-      requestBody.atPeriodEnd = true;
+      requestBody = {
+        priceId: params.priceId,
+        teamID: params.teamId,
+        metadata: params.metadata,
+        workspaces: params.workspaces,
+        users: params.users,
+        prorationBehavior: 'none',
+        atPeriodEnd: true,
+      };
+    } else {
+      requestBody = {
+        priceId: params.priceId,
+        paymentMethodId: params.paymentMethodId,
+        metadata: params.metadata,
+        seats: params.seats,
+        paymentBehavior: params.paymentBehavior,
+      };
     }
 
     const res = await makeRequest('PUT', url, requestBody);
     return res?.data;
   }
 
+
   /**
    * Cancel a subscription
    * @param params Cancel parameters including subscriptionId and cancelImmediately flag
    */
   public async cancelSubscription(params: CancelSubscriptionParams): Promise<any> {
     const url = `/api/stripe/subscriptions/${params.subscriptionId}`;
-    const res = await makeRequest('DELETE', url);
+
+    // Prepare the request body
+    const body = {
+      cancelImmediately: false,
+      teamId: params.teamId,
+      workspaces: params.workspaces,
+      users: params.users,
+    };
+
+    const res = await makeRequest('POST', url, body);
     return res?.data;
   }
 
diff --git a/src/ui/DowngradeModalButtons/DowngradeModalButtons.svelte b/src/ui/DowngradeModalButtons/DowngradeModalButtons.svelte
new file mode 100644
index 00000000..2e874de0
--- /dev/null
+++ b/src/ui/DowngradeModalButtons/DowngradeModalButtons.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import Button from '@/ui/Button/Button.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let cancelText: string = 'Cancel';
+  export let confirmText: string = 'Confirm';
+  export let showSupport: boolean = false;
+  export let disableSupport: boolean = false;
+  export let supportText: string = 'Contact Support';
+  export let isPrimaryDisabled: boolean = false;
+
+  export let primaryVariant: 'filled-primary' | 'outlined-primary' = 'filled-primary';
+
+  // For edge cases like "Contact Sales"
+  export let overridePrimaryText: string | null = null;
+
+  const dispatch = createEventDispatcher();
+
+  const handleCancel = () => dispatch('cancel');
+  const handleConfirm = () => dispatch('confirm');
+  function handleSupport() {
+    if (disableSupport) return;
+    window.open("mailto:contactus@sparrowapp.dev", "_blank");
+  }
+</script>
+
+<!-- Footer layout -->
+<div class="mt-3 flex w-full items-center justify-between">
+  {#if showSupport}
+    <Button
+      variant="link-secondary"
+      size="medium"
+      on:click={handleSupport}
+      disabled={disableSupport}
+    >
+      {supportText}
+    </Button>
+  {/if}
+
+  <div class="ml-auto flex gap-3">
+    <Button
+      variant="filled-secondary"
+      size="medium"
+      on:click={handleCancel}
+      class="bg-[#272935] !text-white hover:!bg-[#20242E]"
+    >
+      {cancelText}
+    </Button>
+
+    <Button
+      variant={primaryVariant}
+      size="medium"
+      disabled={isPrimaryDisabled}
+      on:click={() => {
+        if (confirmText === 'Contact Sales') {
+          window.open("mailto:contactus@sparrowapp.dev", "_blank");
+        } else {
+          handleConfirm();
+        }
+      }}
+    >
+      {overridePrimaryText ? overridePrimaryText : confirmText}
+    </Button>
+  </div>
+</div>
+
+<style>
+  /* keeps consistent modal footer spacing */
+  :global(.modal-footer) {
+    margin-top: 1rem;
+  }
+</style>