diff --git a/packages/editor/src/styles/drag-drop.css b/packages/editor/src/styles/drag-drop.css
index 9fb8a2c36a..96b40d450b 100644
--- a/packages/editor/src/styles/drag-drop.css
+++ b/packages/editor/src/styles/drag-drop.css
@@ -4,10 +4,7 @@
   display: flex;
   align-items: center;
   opacity: 1;
-  transition:
-    opacity 0.2s ease 0.2s,
-    top 0.2s ease,
-    left 0.2s ease;
+  transition: opacity 0.2s ease 0.2s;
   transform: translateX(-50%);
 
   &.side-menu-hidden {
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 4a56d0adc0..7058784d9c 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -85,10 +85,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               "app-container"
             )}
           >
-            <div className="flex-shrink-0">
               {/* free trial banner */}
               <FreeTrialBanner />
-            </div>
             <div className="w-full h-full overflow-hidden relative">{children}</div>
           </div>
         </AppProvider>
diff --git a/web/ee/components/license/banner/free-trial-banner.tsx b/web/ee/components/license/banner/free-trial-banner.tsx
index b4351476d6..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
@@ -20,9 +18,7 @@ export const FreeTrialBanner: FC = observer(() => {
   const { config } = useInstance();
   const { allowPermissions } = useUserPermissions();
   const { currentWorkspace } = useWorkspace();
-  const { currentWorkspaceSubscribedPlanDetail: subscriptionDetail } = useWorkspaceSubscription();
-  // states
-  const [pricingModalOpen, setPricingModalOpen] = useState(false);
+  const { currentWorkspaceSubscribedPlanDetail: subscriptionDetail, togglePaidPlanModal } = useWorkspaceSubscription();
   // derived values
   const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
@@ -34,10 +30,7 @@ export const FreeTrialBanner: FC = observer(() => {
   if (!subscriptionDetail.show_trial_banner) return <></>;
 
   return (
-    <>
-      {/* This modal is intentionally placed inside the condition to avoid unnecessary calls to list product endpoint.  */}
-      <CloudUpgradeModal isOpen={pricingModalOpen} handleClose={() => setPricingModalOpen(false)} />
-
+    <div className="flex-shrink-0 w-full z-[20] bg-custom-background-100">
       <div className="bg-custom-primary-100/10 text-custom-primary-100 py-2 px-5">
         <div className="relative container mx-auto flex justify-center items-center gap-2">
           <div className="text-sm font-medium">
@@ -48,7 +41,7 @@ export const FreeTrialBanner: FC = observer(() => {
             .
           </div>
           <div className="flex gap-2 flex-shrink-0">
-            <Button variant="outline-primary" size="sm" className="py-1" onClick={() => setPricingModalOpen(true)}>
+            <Button variant="outline-primary" size="sm" className="py-1" onClick={() => togglePaidPlanModal(true)}>
               <Crown className="w-3.5 h-3.5" />
               Upgrade to Pro
             </Button>
@@ -56,7 +49,6 @@ export const FreeTrialBanner: FC = observer(() => {
               href="https://cal.com/plane/"
               target="_blank"
               className={cn(getButtonStyling("neutral-primary", "sm"), "py-1")}
-              onClick={() => setPricingModalOpen(true)}
             >
               <Phone className="w-3.5 h-3.5" />
               Get 1:1 help
@@ -64,6 +56,6 @@ export const FreeTrialBanner: FC = observer(() => {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 });
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>
   );
-};
+});