diff --git a/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts b/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts
new file mode 100644
index 000000000..edc7d5dc0
--- /dev/null
+++ b/packages/server/src/services/Subscription/GetSubscriptionsTransformer.ts
@@ -0,0 +1,11 @@
+import { Transformer } from '@/lib/Transformer/Transformer';
+
+export class GetSubscriptionsTransformer extends Transformer {
+  /**
+   * Include these attributes to sale invoice object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return [];
+  };
+}
diff --git a/packages/server/src/services/Subscription/SubscriptionService.ts b/packages/server/src/services/Subscription/SubscriptionService.ts
index 8e70c55d8..de3b1db93 100644
--- a/packages/server/src/services/Subscription/SubscriptionService.ts
+++ b/packages/server/src/services/Subscription/SubscriptionService.ts
@@ -1,8 +1,13 @@
-import { Service } from 'typedi';
+import { Inject, Service } from 'typedi';
 import { PlanSubscription } from '@/system/models';
+import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
+import { GetSubscriptionsTransformer } from './GetSubscriptionsTransformer';
 
 @Service()
 export default class SubscriptionService {
+  @Inject()
+  private transformer: TransformerInjectable;
+
   /**
    * Retrieve all subscription of the given tenant.
    * @param {number} tenantId
@@ -12,6 +17,10 @@ export default class SubscriptionService {
       'tenant_id',
       tenantId
     );
-    return subscriptions;
+    return this.transformer.transform(
+      tenantId,
+      subscriptions,
+      new GetSubscriptionsTransformer()
+    );
   }
 }
diff --git a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx
index e1f0c07b5..b2d77462a 100644
--- a/packages/webapp/src/containers/Subscriptions/BillingPage.tsx
+++ b/packages/webapp/src/containers/Subscriptions/BillingPage.tsx
@@ -2,6 +2,7 @@
 import * as R from 'ramda';
 import { Button } from '@blueprintjs/core';
 import withAlertActions from '../Alert/withAlertActions';
+import { BillingPageBoot } from './BillingPageBoot';
 
 function BillingPageRoot({ openAlert }) {
   const handleCancelSubBtnClick = () => {
@@ -13,11 +14,13 @@ function BillingPageRoot({ openAlert }) {
   const handleUpdatePaymentMethod = () => {};
 
   return (
-    <h1>
-      <Button onClick={handleCancelSubBtnClick}>Cancel Subscription</Button>
-      <Button onClick={handleResumeSubBtnClick}>Resume Subscription</Button>
-      <Button>Update Payment Method</Button>
-    </h1>
+    <BillingPageBoot>
+      <h1>
+        <Button onClick={handleCancelSubBtnClick}>Cancel Subscription</Button>
+        <Button onClick={handleResumeSubBtnClick}>Resume Subscription</Button>
+        <Button>Update Payment Method</Button>
+      </h1>
+    </BillingPageBoot>
   );
 }
 
diff --git a/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx b/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx
index 93d8d7b1b..7cebf9759 100644
--- a/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx
+++ b/packages/webapp/src/containers/Subscriptions/BillingPageBoot.tsx
@@ -1,3 +1,28 @@
-export function BillingPageBoot() {
-  return null;
+import React, { createContext } from 'react';
+import { useGetSubscriptions } from '@/hooks/query/subscription';
+
+interface BillingBootContextValues {
+  isSubscriptionsLoading: boolean;
+  subscriptions: any;
 }
+
+const BillingBoot = createContext<BillingBootContextValues>(
+  {} as BillingBootContextValues,
+);
+
+interface BillingPageBootProps {
+  children: React.ReactNode;
+}
+
+export function BillingPageBoot({ children }: BillingPageBootProps) {
+  const { isLoading: isSubscriptionsLoading, data: subscriptions } =
+    useGetSubscriptions();
+
+  const value = {
+    isSubscriptionsLoading,
+    subscriptions,
+  };
+  return <BillingBoot.Provider value={value}>{children}</BillingBoot.Provider>;
+}
+
+export const useBillingPageBoot = () => React.useContext(BillingBoot);
diff --git a/packages/webapp/src/hooks/query/subscription.tsx b/packages/webapp/src/hooks/query/subscription.tsx
index 58dbe81ee..050913c7c 100644
--- a/packages/webapp/src/hooks/query/subscription.tsx
+++ b/packages/webapp/src/hooks/query/subscription.tsx
@@ -1,9 +1,12 @@
-// @ts-nocheck
+// @ts-ignore
 import {
   useMutation,
   UseMutationOptions,
   UseMutationResult,
+  useQuery,
   useQueryClient,
+  UseQueryOptions,
+  UseQueryResult,
 } from 'react-query';
 import useApiRequest from '../useRequest';
 
@@ -113,3 +116,29 @@ export function useChangeSubscriptionPlan(
     },
   );
 }
+
+interface GetSubscriptionsQuery {}
+interface GetSubscriptionsResponse {}
+
+/**
+ * Changese the main subscription of the current organization.
+ * @param {UseMutationOptions<ChangeMainSubscriptionPlanValues, Error, ChangeMainSubscriptionPlanResponse>} options -
+ * @returns {UseMutationResult<ChangeMainSubscriptionPlanValues, Error, ChangeMainSubscriptionPlanResponse>}
+ */
+export function useGetSubscriptions(
+  options?: UseQueryOptions<
+    GetSubscriptionsQuery,
+    Error,
+    GetSubscriptionsResponse
+  >,
+): UseQueryResult<GetSubscriptionsResponse, Error> {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetSubscriptionsQuery, Error, GetSubscriptionsResponse>(
+    ['SUBSCRIPTIONS'],
+    (values) => apiRequest.get(`/subscription`).then((res) => res.data),
+    {
+      ...options,
+    },
+  );
+}