diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/share-project-button.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/share-project-button.tsx
index 48a6a22aa8..1e5abcad5e 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/share-project-button.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/share-project-button.tsx
@@ -7,12 +7,14 @@ import { useTranslation } from 'react-i18next'
 import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 import { useEditorContext } from '@/shared/context/editor-context'
 import { useProjectContext } from '@/shared/context/project-context'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
 
 export default function ShareProjectButton() {
   const { t } = useTranslation()
   const { sendEventOnce } = useEditorAnalytics()
   const { isProjectOwner } = useEditorContext()
   const { project } = useProjectContext()
+  const isDisabledDueToNetworkStall = useIsNetworkStalled()
 
   const [showShareModal, setShowShareModal] = useState(false)
 
@@ -53,6 +55,7 @@ export default function ShareProjectButton() {
           variant="primary"
           leadingIcon={<MaterialIcon type="person_add" />}
           onClick={handleOpenShareModal}
+          disabled={isDisabledDueToNetworkStall}
         >
           {t('share')}
           {accessRequestCount > 0 && (
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/upgrade-button.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/upgrade-button.tsx
index 4661218e2a..c485199f26 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/upgrade-button.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/upgrade-button.tsx
@@ -1,6 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 import OLButton from '@/shared/components/ol/ol-button'
+import classNames from 'classnames'
+import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled'
 
 export default function UpgradeButton({
   className = '',
@@ -12,6 +14,7 @@ export default function UpgradeButton({
   source?: string
 }) {
   const { t } = useTranslation()
+  const isDisabledDueToNetworkStall = useIsNetworkStalled()
 
   function handleClick() {
     eventTracking.send('subscription-funnel', source, 'upgrade')
@@ -23,11 +26,18 @@ export default function UpgradeButton({
       <OLButton
         variant="premium"
         size="sm"
-        href={`/user/subscription/choose-your-plan?itm_referrer=${referrer}&paywall-type=${source}`}
+        href={
+          isDisabledDueToNetworkStall
+            ? undefined
+            : `/user/subscription/choose-your-plan?itm_referrer=${referrer}&paywall-type=${source}`
+        }
         target="_blank"
         rel="noreferrer"
         onClick={handleClick}
-        className={className}
+        disabled={isDisabledDueToNetworkStall}
+        className={classNames(className, {
+          disabled: isDisabledDueToNetworkStall,
+        })}
       >
         {t('upgrade')}
       </OLButton>
diff --git a/services/web/frontend/stylesheets/components/button.scss b/services/web/frontend/stylesheets/components/button.scss
index 8bdd49256c..5a63eba2cd 100644
--- a/services/web/frontend/stylesheets/components/button.scss
+++ b/services/web/frontend/stylesheets/components/button.scss
@@ -195,6 +195,11 @@
     &:hover {
       background: var(--btn-premium-hover-background);
     }
+
+    &:disabled,
+    &.disabled {
+      background: var(--bs-btn-disabled-bg);
+    }
   }
 
   &.btn-premium-secondary {