diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f9a76ef1..03f5da752 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,26 @@
 
 All notable changes to Bigcapital server-side will be in this file.
 
+## [1.6.3] - 21-02-2022
+
+### Fixed
+ - `BIG-337` Display billing page once the organization subscription is inactive.
+
+## [1.6.2] - 19-02-2022
+
+### Fixed
+ - fix syled components dependency with imported as default components.
+
+## [1.6.0] - 18-02-2022
+
+### Added
+- Balance sheet comparison of previous period (PP).
+- Balance sheet comparison of previous year (PY).
+- Balance sheet percentage analysis columns and rows basis.
+- Profit & loss sheet comparison of preivous period (PP).
+- Profit & loss sheet comparison of previous year (PY).
+- Profit & loss sheet percentage analysis columns, rows, income and expenses basis.
+
 ## [1.5.8] - 13-01-2022
 
 ### Added
diff --git a/package.json b/package.json
index 77cf277f3..76def75d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bigcapital-client",
-  "version": "1.5.8",
+  "version": "1.6.3",
   "private": true,
   "dependencies": {
     "@babel/core": "7.8.4",
diff --git a/src/components/Dashboard/DashboardAbilityProvider.js b/src/components/Dashboard/DashboardAbilityProvider.js
index 37de0ced2..8fc9dfe8d 100644
--- a/src/components/Dashboard/DashboardAbilityProvider.js
+++ b/src/components/Dashboard/DashboardAbilityProvider.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Ability } from '@casl/ability';
 import { createContextualCan } from '@casl/react';
-import { useDashboardMeta } from '../../hooks/query';
+
+import { useDashboardMetaBoot } from './DashboardBoot';
 
 export const AbilityContext = React.createContext();
 export const Can = createContextualCan(AbilityContext.Consumer);
@@ -11,8 +12,8 @@ export const Can = createContextualCan(AbilityContext.Consumer);
  */
 export function DashboardAbilityProvider({ children }) {
   const {
-    data: { abilities },
-  } = useDashboardMeta();
+    meta: { abilities },
+  } = useDashboardMetaBoot();
 
   // Ability instance.
   const ability = new Ability(abilities);
diff --git a/src/components/Dashboard/DashboardBoot.js b/src/components/Dashboard/DashboardBoot.js
index 6e3d967fb..6e6f45448 100644
--- a/src/components/Dashboard/DashboardBoot.js
+++ b/src/components/Dashboard/DashboardBoot.js
@@ -6,18 +6,26 @@ import {
 } from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
 import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
+import { useSubscription } from '../../hooks/state';
 import { setCookie, getCookie } from '../../utils';
 
 /**
  * Dashboard meta async booting.
+ *  - Fetches the dashboard meta only if the organization subscribe is active.
+ *  - Once the dashboard meta query is loading display dashboard splash screen.
  */
 export function useDashboardMetaBoot() {
+  const { isSubscriptionActive } = useSubscription();
+
   const {
     data: dashboardMeta,
     isLoading: isDashboardMetaLoading,
     isSuccess: isDashboardMetaSuccess,
   } = useDashboardMeta({
     keepPreviousData: true,
+
+    // Avoid run the query if the organization subscription is not active.
+    enabled: isSubscriptionActive,
   });
   const [startLoading, stopLoading] = useSplashLoading();
 
@@ -30,20 +38,12 @@ export function useDashboardMetaBoot() {
   }, isDashboardMetaSuccess);
 
   return {
+    meta: dashboardMeta,
     isLoading: isDashboardMetaLoading,
+    isSuccess: isDashboardMetaSuccess
   };
 }
 
-/**
- * Dashboard async booting.
- * @returns {{ isLoading: boolean }}
- */
-export function useDashboardBoot() {
-  const { isLoading } = useDashboardMetaBoot();
-
-  return { isLoading };
-}
-
 /**
  * Application async booting.
  */
diff --git a/src/components/Dashboard/DashboardProvider.js b/src/components/Dashboard/DashboardProvider.js
index 68c8e5654..7e05fb00c 100644
--- a/src/components/Dashboard/DashboardProvider.js
+++ b/src/components/Dashboard/DashboardProvider.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { DashboardAbilityProvider } from '../../components';
-import { useDashboardBoot } from './DashboardBoot';
+import { useDashboardMetaBoot } from './DashboardBoot';
 
 /**
  * Dashboard provider.
  */
 export default function DashboardProvider({ children }) {
-  const { isLoading } = useDashboardBoot();
+  const { isLoading } = useDashboardMetaBoot();
 
   // Avoid display any dashboard component before complete booting.
   if (isLoading) {
diff --git a/src/containers/Subscriptions/BillingPaymentMethod.js b/src/containers/Subscriptions/BillingPaymentMethod.js
new file mode 100644
index 000000000..5c180cf38
--- /dev/null
+++ b/src/containers/Subscriptions/BillingPaymentMethod.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { T } from 'components';
+import { PaymentMethodTabs } from './SubscriptionTabs';
+
+export default ({ formik, title, description }) => {
+  return (
+    <section class="billing-plans__section">
+      <h1 className="title"><T id={'setup.plans.payment_methods.title'} /></h1>
+      <p className="paragraph"><T id={'setup.plans.payment_methods.description' } /></p>
+
+      <PaymentMethodTabs formik={formik} />
+    </section>
+  );
+};
diff --git a/src/containers/Subscriptions/BillingPlansForm.js b/src/containers/Subscriptions/BillingPlansForm.js
index 6eed7a77c..b26cfc89e 100644
--- a/src/containers/Subscriptions/BillingPlansForm.js
+++ b/src/containers/Subscriptions/BillingPlansForm.js
@@ -1,10 +1,13 @@
 import React from 'react';
+import * as R from 'ramda';
 
 import 'style/pages/Subscription/BillingPlans.scss';
 
 import BillingPlansInput from './BillingPlansInput';
 import BillingPeriodsInput from './BillingPeriodsInput';
-// import BillingPaymentMethod from './BillingPaymentMethod';
+import BillingPaymentMethod from './BillingPaymentMethod';
+
+import withSubscriptions from './withSubscriptions';
 
 /**
  * Billing plans form.
@@ -14,7 +17,24 @@ export default function BillingPlansForm() {
     <div class="billing-plans">
       <BillingPlansInput />
       <BillingPeriodsInput />
-      {/* <BillingPaymentMethod /> */}
+      <BillingPaymentMethodWhenSubscriptionInactive />
     </div>
   );
 }
+
+/**
+ * Billing payment methods when subscription is inactive.
+ * @returns {JSX.Element}
+ */
+function BillingPaymentMethodWhenSubscriptionInactiveJSX({
+  // # withSubscriptions
+  isSubscriptionActive,
+
+  ...props
+}) {
+  return !isSubscriptionActive ? <BillingPaymentMethod {...props} /> : null;
+}
+
+const BillingPaymentMethodWhenSubscriptionInactive = R.compose(
+  withSubscriptions(({ isSubscriptionActive }) => ({ isSubscriptionActive })),
+)(BillingPaymentMethodWhenSubscriptionInactiveJSX);
diff --git a/src/hooks/state/subscriptions.js b/src/hooks/state/subscriptions.js
index 95f2cdd4d..42a9c3f54 100644
--- a/src/hooks/state/subscriptions.js
+++ b/src/hooks/state/subscriptions.js
@@ -1,6 +1,11 @@
 import { useCallback } from "react"
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { setSubscriptions } from 'store/subscription/subscription.actions';
+import {
+  isSubscriptionOnTrialFactory,
+  isSubscriptionInactiveFactory,
+  isSubscriptionActiveFactory,
+} from 'store/subscription/subscription.selectors';
 
 /**
  * Sets subscriptions.
@@ -12,3 +17,20 @@ export const useSetSubscriptions = () => {
     dispatch(setSubscriptions(subscriptions));
   }, [dispatch]);
 }
+
+/**
+ * The organization subscription selector.
+ * @param   {string} slug 
+ * @returns {}
+ */
+export const useSubscription = (slug = 'main') => {
+  const isSubscriptionOnTrial = useSelector(isSubscriptionOnTrialFactory(slug));
+  const isSubscriptionInactive = useSelector(isSubscriptionInactiveFactory(slug));
+  const isSubscriptionActive = useSelector(isSubscriptionActiveFactory(slug));
+
+  return {
+    isSubscriptionActive,
+    isSubscriptionInactive,
+    isSubscriptionOnTrial
+  }
+}
\ No newline at end of file