diff --git a/web/ee/components/license/banner/free-trial-banner.tsx b/web/ee/components/license/banner/free-trial-banner.tsx
index ebac2aedca..4a1d85d530 100644
--- a/web/ee/components/license/banner/free-trial-banner.tsx
+++ b/web/ee/components/license/banner/free-trial-banner.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useState } from "react";
+import { FC } from "react";
 import { observer } from "mobx-react";
 import { Crown, Phone } from "lucide-react";
 import { Button, getButtonStyling } from "@plane/ui";
@@ -8,8 +8,6 @@ import { Button, getButtonStyling } from "@plane/ui";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance, useUserPermissions, useWorkspace } from "@/hooks/store";
-// plane web components
-import { CloudUpgradeModal } from "@/plane-web/components/license";
 // plane web constants
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // plane web hooks
diff --git a/web/ee/components/license/modal/cloud-upgrade-modal.tsx b/web/ee/components/license/modal/cloud-upgrade-modal.tsx
index c878870faa..c272c1da85 100644
--- a/web/ee/components/license/modal/cloud-upgrade-modal.tsx
+++ b/web/ee/components/license/modal/cloud-upgrade-modal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FC, useState } from "react";
+import { observer } from "mobx-react";
 import orderBy from "lodash/orderBy";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -37,7 +38,7 @@ export const calculateYearlyDiscount = (monthlyPrice: number, yearlyPricePerMont
   return Math.floor(discountPercentage);
 };
 
-export const CloudUpgradeModal: FC<CloudUpgradeModalProps> = (props) => {
+export const CloudUpgradeModal: FC<CloudUpgradeModalProps> = observer((props) => {
   const { isOpen, handleClose, handleSuccessModal, canFetchProducts = true } = props;
   // params
   const { workspaceSlug } = useParams();
@@ -48,6 +49,8 @@ export const CloudUpgradeModal: FC<CloudUpgradeModalProps> = (props) => {
   const { captureEvent } = useEventTracker();
   const { workspaceInfoBySlug } = useUserPermissions();
 
+  if (!workspaceSlug) return <></>;
+
   const { currentWorkspaceSubscribedPlanDetail: subscriptionDetail, freeTrialSubscription } =
     useWorkspaceSubscription();
   // derived values
@@ -212,4 +215,4 @@ export const CloudUpgradeModal: FC<CloudUpgradeModalProps> = (props) => {
       </div>
     </ModalCore>
   );
-};
+});
diff --git a/web/ee/components/license/modal/pro-plan-upgrade.tsx b/web/ee/components/license/modal/pro-plan-upgrade.tsx
index 2c12fd14b6..b9b785e38e 100644
--- a/web/ee/components/license/modal/pro-plan-upgrade.tsx
+++ b/web/ee/components/license/modal/pro-plan-upgrade.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FC } from "react";
+import { observer } from "mobx-react";
 import orderBy from "lodash/orderBy";
 import { CheckCircle, Loader } from "lucide-react";
 import { Tab } from "@headlessui/react";
@@ -23,7 +24,7 @@ export type ProPlanUpgradeProps = {
   showTrialButton?: boolean;
 };
 
-export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
+export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = observer((props) => {
   const {
     proProduct,
     basePlan,
@@ -142,4 +143,4 @@ export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
       </Tab.Group>
     </div>
   );
-};
+});
diff --git a/web/ee/components/license/modal/self-host-upgrade-modal.tsx b/web/ee/components/license/modal/self-host-upgrade-modal.tsx
index 579f425bbb..34a9cd0c8f 100644
--- a/web/ee/components/license/modal/self-host-upgrade-modal.tsx
+++ b/web/ee/components/license/modal/self-host-upgrade-modal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FC } from "react";
+import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Dialog } from "@headlessui/react";
 // types
@@ -20,7 +21,7 @@ export type SelfHostUpgradeModalProps = {
   handleClose: () => void;
 };
 
-export const SelfHostUpgradeModal: FC<SelfHostUpgradeModalProps> = (props) => {
+export const SelfHostUpgradeModal: FC<SelfHostUpgradeModalProps> = observer((props) => {
   const { isOpen, handleClose } = props;
   // params
   const { workspaceSlug } = useParams();
@@ -105,4 +106,4 @@ export const SelfHostUpgradeModal: FC<SelfHostUpgradeModalProps> = (props) => {
       </div>
     </ModalCore>
   );
-};
+});