diff --git a/public/index.html b/public/index.html
index bf88b37cd..239328b3e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -121,26 +121,36 @@
 
     <!-- start of linkedIn insight tag -->
     <script type="text/javascript">
-      _linkedin_partner_id = "5847546";
-      window._linkedin_data_partner_ids =
-        window._linkedin_data_partner_ids || [];
-      window._linkedin_data_partner_ids.push(_linkedin_partner_id);
+      if (
+        window.location.hostname === "dataxplorer.org" ||
+        window.location.hostname === "www.dataxplorer.org"
+      ) {
+        _linkedin_partner_id = "5847546";
+        window._linkedin_data_partner_ids =
+          window._linkedin_data_partner_ids || [];
+        window._linkedin_data_partner_ids.push(_linkedin_partner_id);
+      }
     </script>
     <script type="text/javascript">
-      (function (l) {
-        if (!l) {
-          window.lintrk = function (a, b) {
-            window.lintrk.q.push([a, b]);
-          };
-          window.lintrk.q = [];
-        }
-        var s = document.getElementsByTagName("script")[0];
-        var b = document.createElement("script");
-        b.type = "text/javascript";
-        b.async = true;
-        b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
-        s.parentNode.insertBefore(b, s);
-      })(window.lintrk);
+      if (
+        window.location.hostname === "dataxplorer.org" ||
+        window.location.hostname === "www.dataxplorer.org"
+      ) {
+        (function (l) {
+          if (!l) {
+            window.lintrk = function (a, b) {
+              window.lintrk.q.push([a, b]);
+            };
+            window.lintrk.q = [];
+          }
+          var s = document.getElementsByTagName("script")[0];
+          var b = document.createElement("script");
+          b.type = "text/javascript";
+          b.async = true;
+          b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
+          s.parentNode.insertBefore(b, s);
+        })(window.lintrk);
+      }
     </script>
     <noscript>
       <img
@@ -153,7 +163,12 @@
     </noscript>
     <!-- start of linkedIn insight tag -->
     <script>
-      window.lintrk("track", { conversion_id: 16130146 });
+      if (
+        window.location.hostname === "dataxplorer.org" ||
+        window.location.hostname === "www.dataxplorer.org"
+      ) {
+        window.lintrk("track", { conversion_id: 16130146 });
+      }
     </script>
     <!-- end of linkedIn track tag -->
     <!-- LiveSession.io code -->
diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx
index 58f84c734..1afdf07da 100755
--- a/src/app/Routes.tsx
+++ b/src/app/Routes.tsx
@@ -27,6 +27,7 @@ import {
 } from "app/modules/callback-module/payment";
 import { useRecoilValue } from "recoil";
 import { fetchPlanLoadingAtom } from "./state/recoil/atoms";
+import { APPLICATION_JSON } from "./state/api";
 
 const LandingModule = lazy(
   () => import("app/modules/home-module/sub-modules/landing")
@@ -184,7 +185,7 @@ const IntercomBootupComponent = () => {
         `${process.env.REACT_APP_API}/users/intercom-hash`,
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${newToken}`,
           },
         }
diff --git a/src/app/hooks/useChartsRawData.tsx b/src/app/hooks/useChartsRawData.tsx
index 1f3d96bac..634966344 100644
--- a/src/app/hooks/useChartsRawData.tsx
+++ b/src/app/hooks/useChartsRawData.tsx
@@ -11,6 +11,7 @@ import {
   ChartRenderedItem,
 } from "app/modules/chart-module/data";
 import { isEqual } from "lodash";
+import { APPLICATION_JSON } from "app/state/api";
 
 const getValidMapping = (
   chartFromAPI: ChartRenderedItem | null,
@@ -157,7 +158,7 @@ export function useChartsRawData(props: {
         }/${id}`,
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
         }
@@ -235,7 +236,7 @@ export function useChartsRawData(props: {
         {
           signal: abortControllerRef.current.signal,
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
         }
diff --git a/src/app/hooks/useCheckUserPlan.tsx b/src/app/hooks/useCheckUserPlan.tsx
index db7e2c29f..a3b371a82 100644
--- a/src/app/hooks/useCheckUserPlan.tsx
+++ b/src/app/hooks/useCheckUserPlan.tsx
@@ -1,4 +1,5 @@
 import { useAuth0 } from "@auth0/auth0-react";
+import { APPLICATION_JSON } from "app/state/api";
 import { fetchPlanLoadingAtom, planDialogAtom } from "app/state/recoil/atoms";
 import { useStoreState } from "app/state/store/hooks";
 import axios from "axios";
@@ -55,7 +56,7 @@ export function useCheckUserPlan() {
     axios
       .get(`${process.env.REACT_APP_API}/users/plan-data`, {
         headers: {
-          "Content-Type": "application/json",
+          "Content-Type": APPLICATION_JSON,
           Authorization: `Bearer ${token}`,
         },
       })
diff --git a/src/app/hooks/useGetChartsStoriesCountByDataset.tsx b/src/app/hooks/useGetChartsStoriesCountByDataset.tsx
index 704286cd3..d7699a04e 100644
--- a/src/app/hooks/useGetChartsStoriesCountByDataset.tsx
+++ b/src/app/hooks/useGetChartsStoriesCountByDataset.tsx
@@ -1,3 +1,4 @@
+import { APPLICATION_JSON } from "app/state/api";
 import { useStoreState } from "app/state/store/hooks";
 import axios from "axios";
 import { get } from "lodash";
@@ -18,7 +19,7 @@ const useGetChartsStoriesCountByDataset = (datasetId: string) => {
         `${process.env.REACT_APP_API}/datasets/${datasetId}/charts-stories/count`,
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
         }
diff --git a/src/app/hooks/useGetDatasetContent.tsx b/src/app/hooks/useGetDatasetContent.tsx
index 20c2cad6a..3bed0f553 100644
--- a/src/app/hooks/useGetDatasetContent.tsx
+++ b/src/app/hooks/useGetDatasetContent.tsx
@@ -1,3 +1,4 @@
+import { APPLICATION_JSON } from "app/state/api";
 import { useStoreState } from "app/state/store/hooks";
 import axios from "axios";
 import React, { useEffect } from "react";
@@ -21,7 +22,7 @@ const useGetDatasetContent = (datasetId: string, pageSize: number = 10) => {
         }/${datasetId}/data?page=${nextPageToken}&pageSize=${pageSize}`,
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
         }
diff --git a/src/app/hooks/useSearchMediaSources.tsx b/src/app/hooks/useSearchMediaSources.tsx
index 1a95468af..2de29e6bc 100644
--- a/src/app/hooks/useSearchMediaSources.tsx
+++ b/src/app/hooks/useSearchMediaSources.tsx
@@ -1,3 +1,4 @@
+import { APPLICATION_JSON } from "app/state/api";
 import { useStoreState } from "app/state/store/hooks";
 import axios from "axios";
 import { get } from "lodash";
@@ -17,7 +18,7 @@ export function useSearchMediaSources(source: string, elementType: string) {
 
   const DEFAULT_SEARCH_QUERY = "figma";
 
-  const contentType = "application/json";
+  const contentType = APPLICATION_JSON;
 
   const getYoutubeVideos = async (q: string, nextPage: boolean) => {
     await axios
diff --git a/src/app/modules/callback-module/index.tsx b/src/app/modules/callback-module/index.tsx
index ad7bc2436..3fb361846 100644
--- a/src/app/modules/callback-module/index.tsx
+++ b/src/app/modules/callback-module/index.tsx
@@ -5,6 +5,7 @@ import { useAuth0 } from "@auth0/auth0-react";
 import { PageLoader } from "app/modules/common/page-loader";
 import axios from "axios";
 import { useCookie, useTitle } from "react-use";
+import { APPLICATION_JSON } from "app/state/api";
 
 function AuthCallbackModule() {
   useTitle("DX Dataxplorer - Auth Callback");
@@ -24,7 +25,7 @@ function AuthCallbackModule() {
         `${process.env.REACT_APP_API}/users/duplicate-landing-story/${id}`,
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${newToken}`,
           },
         }
@@ -45,7 +46,7 @@ function AuthCallbackModule() {
         {},
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${newToken}`,
           },
         }
diff --git a/src/app/modules/callback-module/payment.tsx b/src/app/modules/callback-module/payment.tsx
index b2f084cc9..9d2e73372 100644
--- a/src/app/modules/callback-module/payment.tsx
+++ b/src/app/modules/callback-module/payment.tsx
@@ -7,6 +7,7 @@ import Container from "@material-ui/core/Container";
 import { PageLoader } from "app/modules/common/page-loader";
 import HomeFooter from "app/modules/home-module/components/Footer";
 import BgEllipses from "app/modules/home-module/assets/full-bg-ellipses.svg";
+import { APPLICATION_JSON } from "app/state/api";
 
 const CommonLink = (props: { to: string; text: string; replace?: boolean }) => {
   return (
@@ -41,7 +42,7 @@ const CommonLink = (props: { to: string; text: string; replace?: boolean }) => {
 
 export function PaymentSuccessCallbackModule() {
   const history = useHistory();
-  const { isAuthenticated, getAccessTokenSilently } = useAuth0();
+  const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
 
   const [loading, setLoading] = React.useState(true);
   const [success, setSuccess] = React.useState(false);
@@ -61,7 +62,7 @@ export function PaymentSuccessCallbackModule() {
             },
             {
               headers: {
-                "Content-Type": "application/json",
+                "Content-Type": APPLICATION_JSON,
                 Authorization: `Bearer ${token}`,
               },
             }
@@ -75,6 +76,19 @@ export function PaymentSuccessCallbackModule() {
             setError(error.message);
             setLoading(false);
           });
+        axios
+          .get(
+            `${process.env.REACT_APP_API}/stripe/auto-update-address/${user?.sub}`,
+            {
+              headers: {
+                "Content-Type": APPLICATION_JSON,
+                Authorization: `Bearer ${token}`,
+              },
+            }
+          )
+          .catch((error) => {
+            console.error(error);
+          });
       });
     }
   }, [isAuthenticated]);
diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx
index a9e30630d..3d38553a0 100644
--- a/src/app/modules/chart-module/index.tsx
+++ b/src/app/modules/chart-module/index.tsx
@@ -60,6 +60,7 @@ import {
   planDialogAtom,
 } from "app/state/recoil/atoms";
 import { IDatasetDetails } from "./components/toolbox/steps/panels-content/SelectDataset";
+import { APPLICATION_JSON } from "app/state/api";
 
 export default function ChartModule() {
   const { user, isLoading, isAuthenticated } = useAuth0();
@@ -286,7 +287,7 @@ export default function ChartModule() {
       try {
         return await axios.post(`${process.env.REACT_APP_API}/chart/`, chart, {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
         });
diff --git a/src/app/modules/common/newsletterForm/index.tsx b/src/app/modules/common/newsletterForm/index.tsx
index 295f61e1f..839863c25 100644
--- a/src/app/modules/common/newsletterForm/index.tsx
+++ b/src/app/modules/common/newsletterForm/index.tsx
@@ -1,4 +1,5 @@
 import { yupResolver } from "@hookform/resolvers/yup";
+import { APPLICATION_JSON } from "app/state/api";
 import { emailSchema } from "app/utils/emailValidation";
 import axios, { AxiosResponse, AxiosError } from "axios";
 import React from "react";
@@ -55,7 +56,7 @@ export default function NewsletterForm(
         },
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
           },
         }
       )
diff --git a/src/app/modules/dataset-module/routes/edit/index.tsx b/src/app/modules/dataset-module/routes/edit/index.tsx
index 31fddaf80..0bdbd8794 100644
--- a/src/app/modules/dataset-module/routes/edit/index.tsx
+++ b/src/app/modules/dataset-module/routes/edit/index.tsx
@@ -1,5 +1,6 @@
 import { Container } from "@material-ui/core";
 import MetaData from "app/modules/dataset-module/routes/upload-module/upload-steps/metaData";
+import { APPLICATION_JSON } from "app/state/api";
 import { allAssetsSortBy } from "app/state/recoil/atoms";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import axios from "axios";
@@ -71,7 +72,7 @@ export default function EditMetaData() {
         { ...formDetails },
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
         }
diff --git a/src/app/modules/dataset-module/routes/upload-module/component/dropzone/index.tsx b/src/app/modules/dataset-module/routes/upload-module/component/dropzone/index.tsx
index eab0872c9..f9e8ae2d9 100644
--- a/src/app/modules/dataset-module/routes/upload-module/component/dropzone/index.tsx
+++ b/src/app/modules/dataset-module/routes/upload-module/component/dropzone/index.tsx
@@ -9,6 +9,7 @@ import {
 import { uploadAreacss } from "app/modules/dataset-module/routes/upload-module/style";
 import { ReactComponent as UploadIcon } from "app/modules/dataset-module/routes/upload-module/assets/upload.svg";
 import { formatBytes } from "app/utils/formatBytes";
+import { APPLICATION_JSON } from "app/state/api";
 
 interface DropzoneProps {
   uploadError: boolean;
@@ -19,7 +20,7 @@ interface DropzoneProps {
 export const DropZone = (props: DropzoneProps) => {
   const ACCEPTED_FILES = {
     "text/csv": [".csv"],
-    "application/json": [".json"],
+    [APPLICATION_JSON]: [".json"],
     "application/vnd.oasis.opendocument.spreadsheet": [".ods"],
     "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
       ".xlsx",
diff --git a/src/app/modules/dataset-module/routes/upload-module/upload-steps/index.tsx b/src/app/modules/dataset-module/routes/upload-module/upload-steps/index.tsx
index 8dc789c6a..8af5d7f7e 100644
--- a/src/app/modules/dataset-module/routes/upload-module/upload-steps/index.tsx
+++ b/src/app/modules/dataset-module/routes/upload-module/upload-steps/index.tsx
@@ -29,6 +29,7 @@ import { dataUploadTabAtom, planDialogAtom } from "app/state/recoil/atoms";
 import BasicSwitch from "app/components/Switch/BasicSwitch";
 import Search from "@material-ui/icons/Search";
 import DesktopWindowsIcon from "@material-ui/icons/DesktopWindows";
+import { APPLICATION_JSON } from "app/state/api";
 
 interface Props {
   datasetId: string;
@@ -171,7 +172,7 @@ function DatasetUploadSteps(props: Props) {
         { ...formDetails, authId: user?.sub, id: props.datasetId },
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
         }
@@ -279,7 +280,7 @@ function DatasetUploadSteps(props: Props) {
         { ...externalDataset, id },
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
           onUploadProgress,
diff --git a/src/app/modules/home-module/sub-modules/contact/index.tsx b/src/app/modules/home-module/sub-modules/contact/index.tsx
index b77485eb5..72790bcad 100644
--- a/src/app/modules/home-module/sub-modules/contact/index.tsx
+++ b/src/app/modules/home-module/sub-modules/contact/index.tsx
@@ -14,6 +14,7 @@ import { useTitle } from "react-use";
 import { PageLoader } from "app/modules/common/page-loader";
 import NewsletterBlock from "./newsletterBlock";
 import { FieldErrors } from "react-hook-form";
+import { APPLICATION_JSON } from "app/state/api";
 
 const CssTextField = withStyles({
   root: {
@@ -80,7 +81,7 @@ export default function ContactModule() {
         contactFormDetails,
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
           },
         }
       )
diff --git a/src/app/modules/home-module/sub-modules/pricing/index.tsx b/src/app/modules/home-module/sub-modules/pricing/index.tsx
index 56f8dec3e..1a41e3998 100644
--- a/src/app/modules/home-module/sub-modules/pricing/index.tsx
+++ b/src/app/modules/home-module/sub-modules/pricing/index.tsx
@@ -14,8 +14,9 @@ import TGFLogo from "./assets/tgf-logo";
 import IATILogo from "./assets/iati-logo";
 import { useHistory } from "react-router-dom";
 import MobilePlanCard from "./components/mobile-plan-card";
+import { APPLICATION_JSON } from "app/state/api";
 
-const views = [
+const VIEWS = [
   {
     name: "Monthly Plan",
     key: "monthly",
@@ -26,6 +27,57 @@ const views = [
   },
 ];
 
+const PLANS = [
+  {
+    name: "Free Plan",
+    yearlyPrice: "Free forever",
+    monthlyPrice: "Free forever",
+    text: "For individuals or teams just getting started in Dataxplorer",
+    current: false,
+    recommended: false,
+    buttonText: "Activate",
+    discount: "",
+    key: "free",
+    available: true,
+  },
+  {
+    name: "Pro",
+    yearlyPrice: "€720",
+    monthlyPrice: "€75",
+    text: "For individual users.",
+    current: false,
+    recommended: true,
+    buttonText: "Activate a free trial",
+    discount: "(Save 20%)",
+    key: "pro",
+    available: true,
+  },
+  {
+    name: "Team",
+    yearlyPrice: "€576",
+    monthlyPrice: "€60",
+    text: "Scale up to 100 users and connect your team.",
+    current: false,
+    recommended: false,
+    buttonText: "Activate free trial",
+    discount: "(Save 20%)",
+    key: "team",
+    available: true,
+  },
+  {
+    name: "Enterprise",
+    yearlyPrice: "Custom",
+    monthlyPrice: "Custom",
+    text: "For organisations looking scale into powerful data visualization, with full support and security",
+    current: false,
+    recommended: false,
+    buttonText: "Contact us",
+    discount: "",
+    key: "enterprise",
+    available: true,
+  },
+];
+
 export default function PricingModule() {
   useTitle("DX Dataxplorer - Pricing");
 
@@ -33,6 +85,9 @@ export default function PricingModule() {
   const isMobile = useMediaQuery("(max-width: 1030px)");
 
   const [subscriptionPlan, setSubscriptionPlan] = React.useState("monthly");
+  const [currentPlan, setCurrentPlan] = React.useState(
+    isAuthenticated ? PLANS[0].name : ""
+  );
 
   const token = useStoreState((state) => state.AuthToken.value);
 
@@ -48,7 +103,7 @@ export default function PricingModule() {
       },
       {
         headers: {
-          "Content-Type": "application/json",
+          "Content-Type": APPLICATION_JSON,
           Authorization: `Bearer ${token}`,
         },
       }
@@ -56,56 +111,25 @@ export default function PricingModule() {
     return customerCreationResponse.data.data;
   };
 
-  const plans = [
-    {
-      name: "Free Plan",
-      yearlyPrice: "Free forever",
-      monthlyPrice: "Free forever",
-      text: "For individuals or teams just getting started in Dataxplorer",
-      current: isAuthenticated ? true : false,
-      recommended: isAuthenticated ? false : true,
-      buttonText: "Activate",
-      discount: "",
-      key: "free",
-      available: true,
-    },
-    {
-      name: "Pro",
-      yearlyPrice: "€720",
-      monthlyPrice: "€75",
-      text: "For individual users.",
-      current: false,
-      recommended: false,
-      buttonText: "Activate a free trial",
-      discount: "(Save 20%)",
-      key: "pro",
-      available: false,
-    },
-    {
-      name: "Team",
-      yearlyPrice: "€576",
-      monthlyPrice: "€60",
-      text: "Scale up to 100 users and connect your team.",
-      current: false,
-      recommended: false,
-      buttonText: "Activate free trial",
-      discount: "(Save 20%)",
-      key: "team",
-      available: false,
-    },
-    {
-      name: "Enterprise",
-      yearlyPrice: "Custom",
-      monthlyPrice: "Custom",
-      text: "For organisations looking scale into powerful data visualization, with full support and security",
-      current: false,
-      recommended: false,
-      buttonText: "Contact us",
-      discount: "",
-      key: "enterprise",
-      available: false,
-    },
-  ];
+  const getCurrentSubscriptionPlan = async () => {
+    await axios
+      .get(`${process.env.REACT_APP_API}/stripe/subscription/${user?.sub}`, {
+        headers: {
+          "Content-Type": APPLICATION_JSON,
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((response) => {
+        setCurrentPlan(
+          response.data.data.plan === "Free"
+            ? "Free Plan"
+            : response.data.data.plan
+        );
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
 
   const createStripeCheckoutSession = async (
     customerId: string,
@@ -122,7 +146,7 @@ export default function PricingModule() {
       },
       {
         headers: {
-          "Content-Type": "application/json",
+          "Content-Type": APPLICATION_JSON,
           Authorization: `Bearer ${token}`,
         },
       }
@@ -136,22 +160,45 @@ export default function PricingModule() {
         `/onboarding/signin?to=${window.location.pathname}${window.location.search}`
       );
     }
+    if (currentPlan !== PLANS[0].name) {
+      history.push("/user-management/billing");
+      return;
+    }
     switch (key) {
       case plans[0].key:
+      case plans[1].key:
+      case plans[2].key:
         const customerId = await createNewStripeCustomer();
         if (customerId) {
           const sessionUrl = await createStripeCheckoutSession(customerId, key);
           if (sessionUrl) window.location.href = sessionUrl;
         }
         break;
-      case plans[1].key:
-      case plans[2].key:
       case plans[3].key:
+        history.push("/contact");
+        break;
       default:
         break;
     }
   };
 
+  const plans = React.useMemo(() => {
+    return PLANS.map((plan) => {
+      return {
+        ...plan,
+        current: plan.name === currentPlan,
+      };
+    });
+  }, [currentPlan]);
+
+  React.useEffect(() => {
+    if (isAuthenticated) {
+      getCurrentSubscriptionPlan();
+    } else {
+      setCurrentPlan(PLANS[0].name);
+    }
+  }, [isAuthenticated]);
+
   return (
     <section
       css={`
@@ -276,7 +323,7 @@ export default function PricingModule() {
               }
             `}
           >
-            {views.map((view) => (
+            {VIEWS.map((view) => (
               <button
                 key={view.key}
                 css={`
@@ -319,7 +366,6 @@ export default function PricingModule() {
                 />
               ))}
             </div>
-
             <Features />
             <Box height={100} />
             <div>
diff --git a/src/app/modules/story-module/components/chart-wrapper/useLoadDatasetDetailsAPI.tsx b/src/app/modules/story-module/components/chart-wrapper/useLoadDatasetDetailsAPI.tsx
index d766ba20c..cb6fd972a 100644
--- a/src/app/modules/story-module/components/chart-wrapper/useLoadDatasetDetailsAPI.tsx
+++ b/src/app/modules/story-module/components/chart-wrapper/useLoadDatasetDetailsAPI.tsx
@@ -1,4 +1,5 @@
 import { DatasetListItemAPIModel } from "app/modules/dataset-module/data";
+import { APPLICATION_JSON } from "app/state/api";
 import axios from "axios";
 import { isEmpty } from "lodash";
 import React from "react";
@@ -23,7 +24,7 @@ export const useLoadDatasetDetails = (
         `${process.env.REACT_APP_API}/datasets${token ? "" : "/public"}/${id}`,
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: (token ? `Bearer ${token}` : undefined) as string,
           },
         }
diff --git a/src/app/modules/story-module/components/chart-wrapper/useRenderChartFromAPI.ts b/src/app/modules/story-module/components/chart-wrapper/useRenderChartFromAPI.ts
index e309086c4..01502a644 100644
--- a/src/app/modules/story-module/components/chart-wrapper/useRenderChartFromAPI.ts
+++ b/src/app/modules/story-module/components/chart-wrapper/useRenderChartFromAPI.ts
@@ -1,4 +1,5 @@
 import { ChartRenderedItem } from "app/modules/chart-module/data";
+import { APPLICATION_JSON } from "app/state/api";
 import { loadedChartsInStoryAtom } from "app/state/recoil/atoms";
 import axios from "axios";
 import isEmpty from "lodash/isEmpty";
@@ -42,7 +43,7 @@ export const useRenderChartFromAPI = (
         {
           signal: abortControllerRef.current.signal,
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${token}`,
           },
         }
diff --git a/src/app/modules/user-profile-module/component/table.tsx b/src/app/modules/user-profile-module/component/table.tsx
index 6a47867d4..765739aea 100644
--- a/src/app/modules/user-profile-module/component/table.tsx
+++ b/src/app/modules/user-profile-module/component/table.tsx
@@ -1,101 +1,58 @@
 import React from "react";
+// @ts-ignore
+import domtoimage from "dom-to-image";
 import Table from "@material-ui/core/Table";
-import { ReactComponent as InfoIcon } from "app/modules/user-profile-module/asset/info-icon.svg";
+import Tooltip from "@material-ui/core/Tooltip";
+import SaveAlt from "@material-ui/icons/SaveAlt";
+import Checkbox from "@material-ui/core/Checkbox";
 import TableRow from "@material-ui/core/TableRow";
 import TableHead from "@material-ui/core/TableHead";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
-import TableContainer from "@material-ui/core/TableContainer";
-import { Checkbox, Tooltip } from "@material-ui/core";
-import { SaveAlt } from "@material-ui/icons";
-import { PrintIcon } from "./icons";
 import { Tooltip as SpeechBubble } from "react-tooltip";
+import TableContainer from "@material-ui/core/TableContainer";
+import { PrintIcon } from "app/modules/user-profile-module/component/icons";
+import { ReactComponent as InfoIcon } from "app/modules/user-profile-module/asset/info-icon.svg";
 import { InfoSnackbar } from "app/modules/story-module/components/storySubHeaderToolbar/infosnackbar";
 import { ISnackbarState } from "app/modules/dataset-module/routes/upload-module/upload-steps/previewFragment";
 
-interface IData {
-  id: string;
-  name: string;
-  description?: string;
-  createdDate: Date;
-  type: string;
+const dataCols = [
+  { key: "date", label: "Date" },
+  { key: "name", label: "File Name" },
+  { key: "plan", label: "Plan" },
+];
+
+interface InvoiceTableProps {
+  tableData: {
+    id: string;
+    date: string;
+    url: string;
+    hostedUrl: string;
+    checked?: boolean;
+  }[];
 }
-export function InvoiceTable() {
-  const dataCols = [
-    { key: "date", label: "Date" },
-    { key: "fileName", label: "File Name" },
-    { key: "plan", label: "Plan" },
-  ];
-  const date = "20/03/2021";
-  const tableData = [
-    {
-      id: "1",
-      // eslint-disable-next-line sonarjs/no-duplicate-string
-      date,
-      fileName: "Invoice 0112",
-      plan: "Pro",
-      checked: false,
-    },
-    {
-      id: "2",
-      date,
-      fileName: "Invoice 0111",
-      plan: "Pro",
-      checked: false,
-    },
-    {
-      id: "3",
-      date,
-      fileName: "Invoice 0110",
-      plan: "Pro",
-      checked: false,
-    },
-    {
-      id: "4",
-      date,
-      fileName: "Invoice 0109",
-      plan: "Pro",
-      checked: false,
-    },
-    {
-      id: "5",
-      date,
-      fileName: "Invoice 0108",
-      plan: "Invoice 0108",
-      checked: false,
-    },
-    {
-      id: "6",
-      date,
-      fileName: "Invoice 0107",
-      plan: "Invoice 0107",
-      checked: false,
-    },
-  ];
+
+export function InvoiceTable(props: InvoiceTableProps) {
+  const { tableData } = props;
+
+  const [tableDataState, setTableDataState] = React.useState<
+    InvoiceTableProps["tableData"]
+  >([]);
   const [snackbarState, setSnackbarState] = React.useState<ISnackbarState>({
     open: false,
     vertical: "bottom",
     horizontal: "center",
   });
-  const [tableDataState, setTableDataState] = React.useState(tableData);
-  const isEveryItemChecked = tableDataState.every((val) => val.checked);
+
   const handleCheckUncheckAll = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.checked) {
-      setTableDataState((prev) => {
-        return prev.map((val) => ({
-          ...val,
-          checked: true,
-        }));
-      });
-    } else {
-      setTableDataState((prev) => {
-        return prev.map((val) => ({
-          ...val,
-          checked: false,
-        }));
-      });
-    }
+    setTableDataState((prev) => {
+      return prev.map((val) => ({
+        ...val,
+        checked: e.target.checked,
+      }));
+    });
   };
+
   const handleCheckUncheck = (
     e: React.ChangeEvent<HTMLInputElement>,
     index: number
@@ -107,17 +64,159 @@ export function InvoiceTable() {
     });
   };
 
-  const handleDownload = () => {
+  const handleRowClick = (url: string) => (e: any) => {
+    if (e.target.tagName !== "INPUT") window.open(url, "_blank");
+  };
+
+  const downloadInvoice = (invoice: any) => {
+    const link = document.createElement("a");
+    link.style.display = "none";
+    link.href = invoice.url;
+    link.download = invoice.name;
+    link.click();
+    link.remove();
+  };
+
+  const onDownloadClick = () => {
     const isEveryItemUnchecked = tableDataState.every((val) => !val.checked);
     if (isEveryItemUnchecked) {
       setSnackbarState({ ...snackbarState, open: true });
-    } else {
-      console.log("Downloaded");
+      return;
     }
+    const selectedInvoices = tableDataState.filter((val) => val.checked);
+    selectedInvoices.forEach((invoice) => downloadInvoice(invoice));
   };
 
+  const onPrintClick = () => {
+    const t = document.getElementById("invoice-table");
+    if (t) {
+      domtoimage
+        .toPng(t, {
+          bgcolor: "#fff",
+          filename: "dataxplorer-invoices",
+        })
+        .then((dataUrl: any) => {
+          const link = document.createElement("a");
+          link.download = "dataxplorer-invoices.png";
+          link.href = dataUrl;
+          link.click();
+        })
+        .catch((error: any) => {
+          console.error("oops, something went wrong", error);
+        });
+    }
+  };
+
+  const isEveryItemChecked = React.useMemo(() => {
+    if (tableDataState.length === 0) return false;
+    return tableDataState.every((val) => val.checked);
+  }, [tableDataState]);
+
+  const table = React.useMemo(() => {
+    return (
+      <Table
+        id="invoice-table"
+        data-cy="homepage-table"
+        css={`
+          border-spacing: 0;
+          border-style: hidden;
+          border-collapse: collapse;
+
+          tr > td {
+            padding: 0px 16px;
+            height: 56px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            &:nth-of-type(1) {
+              width: 75px;
+            }
+            &:nth-of-type(2) {
+              width: 105px;
+            }
+            &:nth-of-type(3) {
+              width: 352px;
+            }
+            &:nth-of-type(4) {
+              width: 200px;
+            }
+          }
+        `}
+      >
+        <TableHead
+          css={`
+            background: #dadaf8;
+
+            > tr > th {
+              font-size: 14px;
+              padding: 0px 16px;
+              height: 56px;
+              font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
+            }
+          `}
+        >
+          <TableRow>
+            <TableCell>
+              <Checkbox
+                color="primary"
+                checked={isEveryItemChecked}
+                onChange={handleCheckUncheckAll}
+              />
+            </TableCell>
+            {dataCols.map((val) => (
+              <TableCell key={val.key} css={``}>
+                {val.label}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody
+          css={`
+            background: #fff;
+          `}
+        >
+          {tableDataState.map((data, index) => (
+            <TableRow
+              key={data.id}
+              onClick={handleRowClick(data.hostedUrl)}
+              css={`
+                &:hover {
+                  cursor: pointer;
+                  background: #f1f3f5;
+                }
+              `}
+            >
+              <TableCell>
+                <Checkbox
+                  color="primary"
+                  checked={data.checked}
+                  onChange={(e) => handleCheckUncheck(e, index)}
+                />
+              </TableCell>
+              {dataCols.map((val) => (
+                <TableCell key={val.key}>
+                  <p title={val.key}>{data[val.key as keyof typeof data]}</p>
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  }, [
+    isEveryItemChecked,
+    handleCheckUncheckAll,
+    handleCheckUncheck,
+    handleRowClick,
+    tableDataState,
+  ]);
+
+  React.useEffect(() => {
+    setTableDataState(tableData);
+  }, [tableData]);
+
   return (
-    <>
+    <React.Fragment>
       <div
         css={`
           display: flex;
@@ -171,16 +270,16 @@ export function InvoiceTable() {
             }
           `}
         >
-          <button onClick={handleDownload}>
-            <Tooltip title="Download">
+          <Tooltip title="Download">
+            <button onClick={onDownloadClick}>
               <SaveAlt htmlColor="#262c34" />
-            </Tooltip>
-          </button>
-          <button>
-            <Tooltip title="Print">
+            </button>
+          </Tooltip>
+          <Tooltip title="Print">
+            <button onClick={onPrintClick}>
               <PrintIcon />
-            </Tooltip>
-          </button>
+            </button>
+          </Tooltip>
         </div>
       </div>
       <TableContainer
@@ -188,96 +287,7 @@ export function InvoiceTable() {
           border-radius: 8px;
         `}
       >
-        <Table
-          css={`
-            border-spacing: 0;
-            border-style: hidden;
-            border-collapse: collapse;
-
-            tr > td {
-              padding: 0px 16px;
-              height: 56px;
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              &:nth-of-type(1) {
-                /* width: 75px; */
-              }
-              &:nth-of-type(2) {
-                width: 135px;
-              }
-              &:nth-of-type(3) {
-                width: 352px;
-              }
-              &:nth-of-type(4) {
-                width: 200px;
-              }
-            }
-          `}
-          data-cy="homepage-table"
-        >
-          <TableHead
-            css={`
-              background: #dadaf8;
-
-              > tr > th {
-                font-size: 14px;
-                padding: 0px 16px;
-                height: 56px;
-                font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
-              }
-            `}
-          >
-            <TableRow>
-              <TableCell>
-                {" "}
-                <Checkbox
-                  color="primary"
-                  checked={isEveryItemChecked}
-                  onChange={handleCheckUncheckAll}
-                />
-              </TableCell>
-              {dataCols.map((val) => (
-                <TableCell key={val.key} css={``}>
-                  {val.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody
-            css={`
-              background: #fff;
-            `}
-          >
-            {tableDataState.map((data, index) => (
-              <TableRow
-                key={data.id}
-                css={`
-                  &:hover {
-                    cursor: pointer;
-                    background: #f1f3f5;
-                  }
-                `}
-              >
-                <TableCell>
-                  {" "}
-                  <Checkbox
-                    color="primary"
-                    checked={data.checked}
-                    onChange={(e) => handleCheckUncheck(e, index)}
-                  />
-                </TableCell>
-                {dataCols.map((val) => (
-                  <TableCell key={val.key}>
-                    <p title={data[val.key as keyof typeof data] as string}>
-                      {data[val.key as keyof typeof data]}
-                    </p>
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        {table}
       </TableContainer>
       <div
         css={`
@@ -285,15 +295,15 @@ export function InvoiceTable() {
         `}
       />
       <InfoSnackbar
+        open={snackbarState.open}
+        key={snackbarState.vertical + snackbarState.horizontal}
+        message="Please select the invoice you want to download!"
+        onClose={() => setSnackbarState({ ...snackbarState, open: false })}
         anchorOrigin={{
           vertical: snackbarState.vertical,
           horizontal: snackbarState.horizontal,
         }}
-        open={snackbarState.open}
-        onClose={() => setSnackbarState({ ...snackbarState, open: false })}
-        message={`Please select the invoice you want to print!`}
-        key={snackbarState.vertical + snackbarState.horizontal}
       />
-    </>
+    </React.Fragment>
   );
 }
diff --git a/src/app/modules/user-profile-module/style.ts b/src/app/modules/user-profile-module/style.ts
index bb394b3bc..2070dab94 100644
--- a/src/app/modules/user-profile-module/style.ts
+++ b/src/app/modules/user-profile-module/style.ts
@@ -3,6 +3,7 @@ import { css } from "styled-components";
 export const layoutcss = css`
   margin-top: 3rem;
 `;
+
 export const tabcss = (active: boolean, disabled: boolean) => css`
   width: 224px;
   height: 48px;
@@ -24,6 +25,7 @@ export const tabcss = (active: boolean, disabled: boolean) => css`
     width: 100%;
   }
 `;
+
 export const profilecss = css`
   font-style: normal;
   width: 72%;
@@ -67,6 +69,11 @@ export const billingcss = css`
     font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
     font-size: 12px;
     cursor: pointer;
+
+    :disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
   }
   & > div:nth-of-type(1),
   & > div:nth-of-type(3),
@@ -77,13 +84,13 @@ export const billingcss = css`
     margin-bottom: 24px;
     p {
       margin: 0;
+      font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
     }
     p:nth-child(1) {
       width: 134px;
     }
     p:nth-child(2) {
       color: #231d2c;
-      font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
       font-size: 14px;
     }
   }
@@ -125,6 +132,7 @@ export const flexContainercss = css`
     grid-template-columns: 45% auto;
   }
 `;
+
 export const bigAvicss = css`
   width: 223px;
   height: 223px;
@@ -133,12 +141,14 @@ export const bigAvicss = css`
   display: flex;
   align-items: center;
   justify-content: center;
+  text-transform: uppercase;
   p {
     font-weight: 500;
     font-size: 96px;
     color: #231d2c;
   }
 `;
+
 export const avicss = css`
   width: 52px;
   height: 52px;
@@ -154,6 +164,7 @@ export const avicss = css`
   b {
   }
 `;
+
 export const inputcss = css`
   border: 1px solid #231d2c;
   border-radius: 10px;
diff --git a/src/app/modules/user-profile-module/sub-module/billing.tsx b/src/app/modules/user-profile-module/sub-module/billing.tsx
index 375312918..9893bfa07 100644
--- a/src/app/modules/user-profile-module/sub-module/billing.tsx
+++ b/src/app/modules/user-profile-module/sub-module/billing.tsx
@@ -1,50 +1,235 @@
 import React from "react";
+import axios from "axios";
+import { useAuth0 } from "@auth0/auth0-react";
+import { useHistory } from "react-router-dom";
+import { useStoreState } from "app/state/store/hooks";
+import { PageLoader } from "app/modules/common/page-loader";
 import { billingcss } from "app/modules/user-profile-module/style";
 import { InvoiceTable } from "app/modules/user-profile-module/component/table";
+import { APPLICATION_JSON } from "app/state/api";
 
 export default function Billing() {
-  return (
-    <div css={billingcss}>
-      <h4>Billing</h4>
-      <div>
-        <p>Dataxplorer Plan</p>
-        <p>Pro</p>
-      </div>
+  const { user } = useAuth0();
+  const history = useHistory();
 
-      <div>
-        <button>RENEW PLAN</button>
-        <button>UPGRADE PLAN</button>
-        <button>CANCEL PLAN</button>
-      </div>
+  const [loading, setLoading] = React.useState(false);
+  const [paymentMethod, setPaymentMethod] = React.useState<null | {
+    method: string;
+    number: string;
+  }>(null);
+  const [billingInfo, setBillingInfo] = React.useState<null | {
+    city: string;
+    country: string;
+    line1: string;
+    line2: string;
+    postal_code: string;
+    state: string;
+  }>(null);
+  const [invoices, setInvoices] = React.useState<
+    { id: string; name: string; url: string; hostedUrl: string; date: string }[]
+  >([]);
+  const [currentPlan, setCurrentPlan] = React.useState("");
+  const [planMessage, setPlanMessage] = React.useState("");
+
+  const token = useStoreState((state) => state.AuthToken.value);
+
+  const getStripePaymentMethod = async () => {
+    setLoading(true);
+    const response = await axios.get(
+      `${process.env.REACT_APP_API}/stripe/payment-method/${user?.sub}`,
+      {
+        headers: {
+          "Content-Type": APPLICATION_JSON,
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    setPaymentMethod(response.data.data);
+    setLoading(false);
+  };
+
+  const getStripeBillingInfo = async () => {
+    setLoading(true);
+    const response = await axios.get(
+      `${process.env.REACT_APP_API}/stripe/${user?.sub}/billing`,
+      {
+        headers: {
+          "Content-Type": APPLICATION_JSON,
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    setBillingInfo(response.data.data);
+    setLoading(false);
+  };
 
-      <div>
-        <p>Payment method</p>
+  const changePaymentMethod = async () => {
+    setLoading(true);
+    const response = await axios.post(
+      `${process.env.REACT_APP_API}/stripe/portal-session`,
+      {
+        userId: user?.sub,
+        flowDataType: "payment_method_update",
+        returnUrl: `${window.location.origin}/user-management/billing`,
+      },
+      {
+        headers: {
+          "Content-Type": APPLICATION_JSON,
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    if (response.data.data) {
+      window.location.href = response.data.data;
+      setLoading(false);
+    }
+  };
 
+  const getGenericPortal = async () => {
+    if (!isOnPaidPlan) {
+      history.push("/pricing");
+    }
+    setLoading(true);
+    const response = await axios.post(
+      `${process.env.REACT_APP_API}/stripe/portal-session`,
+      {
+        userId: user?.sub,
+        returnUrl: `${window.location.origin}/user-management/billing`,
+      },
+      {
+        headers: {
+          "Content-Type": APPLICATION_JSON,
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    if (response.data.data) {
+      window.location.href = response.data.data;
+      setLoading(false);
+    }
+  };
+
+  const getStripeInvoices = async () => {
+    setLoading(true);
+    const response = await axios.get(
+      `${process.env.REACT_APP_API}/stripe/invoices/${user?.sub}`,
+      {
+        headers: {
+          "Content-Type": APPLICATION_JSON,
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    setInvoices(response.data.data);
+    setLoading(false);
+  };
+
+  const getCurrentSubscriptionPlan = async () => {
+    await axios
+      .get(`${process.env.REACT_APP_API}/stripe/subscription/${user?.sub}`, {
+        headers: {
+          "Content-Type": APPLICATION_JSON,
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((response) => {
+        setCurrentPlan(response.data.data.plan);
+        setPlanMessage(response.data.data.message);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  const isOnPaidPlan = React.useMemo(() => {
+    return currentPlan !== "Free" && currentPlan !== "";
+  }, [currentPlan]);
+
+  React.useEffect(() => {
+    getStripePaymentMethod();
+    getStripeBillingInfo();
+    getStripeInvoices();
+    getCurrentSubscriptionPlan();
+  }, []);
+
+  return (
+    <React.Fragment>
+      {loading && <PageLoader />}
+      <div css={billingcss}>
+        <h4>Billing</h4>
         <div>
-          <p>icon</p>
-          <p>ING (Direct Debit) ••3076</p>
+          <p>Dataxplorer Plan</p>
+          <p>
+            {currentPlan}
+            {planMessage ? ` (${planMessage})` : ""}
+          </p>
         </div>
-      </div>
-
-      <div>
-        <button>Change payment method</button>
-      </div>
-      <div>
-        <p>Billing info</p>
         <div>
-          <p>Boerhaavelaan 7,</p>
-          <p>2500 DL Den Haag, The Netherlands</p>
+          <button disabled={!isOnPaidPlan} onClick={getGenericPortal}>
+            RENEW PLAN
+          </button>
+          <button onClick={getGenericPortal}>UPGRADE PLAN</button>
+          <button disabled={!isOnPaidPlan} onClick={getGenericPortal}>
+            CANCEL PLAN
+          </button>
         </div>
+        <div>
+          <p>Payment method</p>
+          <div>
+            <p
+              css={`
+                text-transform: uppercase;
+              `}
+            >
+              {isOnPaidPlan
+                ? `${paymentMethod?.method} ••${paymentMethod?.number}`
+                : "-"}
+            </p>
+          </div>
+        </div>
+        <div>
+          <button disabled={!isOnPaidPlan} onClick={changePaymentMethod}>
+            CHANGE PAYMENT METHOD
+          </button>
+        </div>
+        <div>
+          <p>Billing info</p>
+          <div>
+            {isOnPaidPlan ? (
+              <React.Fragment>
+                <p>
+                  {billingInfo?.line1},
+                  {billingInfo?.line2 ? (
+                    <React.Fragment>
+                      <br />
+                      <p>{billingInfo?.line2},</p>
+                    </React.Fragment>
+                  ) : (
+                    <React.Fragment />
+                  )}
+                </p>
+                <p>
+                  {billingInfo?.postal_code} {billingInfo?.city}{" "}
+                  {billingInfo?.state}, {billingInfo?.country}
+                </p>
+              </React.Fragment>
+            ) : (
+              "-"
+            )}
+          </div>
+        </div>
+        <div>
+          <button disabled={!isOnPaidPlan} onClick={getGenericPortal}>
+            CHANGE BILLING INFO
+          </button>
+        </div>
+        <div
+          css={`
+            height: 48px;
+          `}
+        />
+        <InvoiceTable tableData={invoices} />
       </div>
-      <div>
-        <button>Change billing info</button>
-      </div>
-      <div
-        css={`
-          height: 48px;
-        `}
-      />
-      <InvoiceTable />
-    </div>
+    </React.Fragment>
   );
 }
diff --git a/src/app/modules/user-profile-module/sub-module/settings.tsx b/src/app/modules/user-profile-module/sub-module/settings.tsx
index 5ac67ba0c..0fbf3f721 100644
--- a/src/app/modules/user-profile-module/sub-module/settings.tsx
+++ b/src/app/modules/user-profile-module/sub-module/settings.tsx
@@ -2,6 +2,7 @@ import { useAuth0 } from "@auth0/auth0-react";
 import DeleteAccountDialog from "app/components/Dialogs/deleteAccountDialog";
 import { PrimaryButton } from "app/components/Styled/button";
 import { PageLoader } from "app/modules/common/page-loader";
+import { APPLICATION_JSON } from "app/state/api";
 import { useStoreActions } from "app/state/store/hooks";
 import axios from "axios";
 import React from "react";
@@ -43,7 +44,7 @@ export default function Settings() {
         {},
         {
           headers: {
-            "Content-Type": "application/json",
+            "Content-Type": APPLICATION_JSON,
             Authorization: `Bearer ${newToken}`,
           },
         }
diff --git a/src/app/state/api/index.ts b/src/app/state/api/index.ts
index bd38f7958..64efdc9fe 100644
--- a/src/app/state/api/index.ts
+++ b/src/app/state/api/index.ts
@@ -9,7 +9,7 @@ import {
   ResponseData,
 } from "app/state/api/interfaces";
 
-const applicationJson = "application/json";
+export const APPLICATION_JSON = "application/json";
 
 export const APIModel = <QueryModel, ResponseModel>(
   url: string
@@ -87,7 +87,7 @@ export const APIModel = <QueryModel, ResponseModel>(
         }${query.filterString ? "?" : ""}${query.filterString ?? ""}`,
         {
           headers: {
-            "Content-Type": applicationJson,
+            "Content-Type": APPLICATION_JSON,
             Authorization: Authorization as string,
           },
         }
@@ -133,7 +133,7 @@ export const APIModel = <QueryModel, ResponseModel>(
           }`,
           {
             headers: {
-              "Content-Type": applicationJson,
+              "Content-Type": APPLICATION_JSON,
             },
           }
         )
@@ -152,7 +152,7 @@ export const APIModel = <QueryModel, ResponseModel>(
     axios
       .post(url, query.values, {
         headers: {
-          "Content-Type": applicationJson,
+          "Content-Type": APPLICATION_JSON,
           Authorization: `Bearer ${get(query, "token", undefined)}`,
         },
       })
@@ -175,7 +175,7 @@ export const APIModel = <QueryModel, ResponseModel>(
     axios
       .patch(`${url}/${query.patchId}`, query.values, {
         headers: {
-          "Content-Type": applicationJson,
+          "Content-Type": APPLICATION_JSON,
           Authorization: `Bearer ${get(query, "token", undefined)}`,
         },
       })
@@ -190,7 +190,7 @@ export const APIModel = <QueryModel, ResponseModel>(
     axios
       .delete(`${url}/${query.deleteId}`, {
         headers: {
-          "Content-Type": applicationJson,
+          "Content-Type": APPLICATION_JSON,
           Authorization: `Bearer ${get(query, "token", undefined)}`,
         },
       })