diff --git a/apps/builder/app/builder/builder.tsx b/apps/builder/app/builder/builder.tsx
index 5248544ce35d..686844e104bd 100644
--- a/apps/builder/app/builder/builder.tsx
+++ b/apps/builder/app/builder/builder.tsx
@@ -407,7 +407,6 @@ export const Builder = ({
           </Main>
           <Topbar
             project={project}
-            hasProPlan={userPlanFeatures.hasProPlan}
             css={{ gridArea: "header" }}
             loading={
               <LoadingBackground
diff --git a/apps/builder/app/builder/features/project-settings/section-backups.tsx b/apps/builder/app/builder/features/project-settings/section-backups.tsx
index 6986bde16e7b..762204f129a7 100644
--- a/apps/builder/app/builder/features/project-settings/section-backups.tsx
+++ b/apps/builder/app/builder/features/project-settings/section-backups.tsx
@@ -36,7 +36,7 @@ const formatPublishDate = (date: string) => {
 };
 
 export const SectionBackups = () => {
-  const { hasProPlan } = useStore($userPlanFeatures);
+  const { hasPaidPlan } = useStore($userPlanFeatures);
   const { data, load } = trpcClient.project.publishedBuilds.useQuery();
   const projectId = $project.get()?.id ?? "";
   useEffect(() => {
@@ -85,7 +85,7 @@ export const SectionBackups = () => {
         <DialogTrigger asChild>
           <Button
             css={{ justifySelf: "start" }}
-            disabled={!hasProPlan || options.length === 0}
+            disabled={!hasPaidPlan || options.length === 0}
           >
             Restore
           </Button>
@@ -120,7 +120,7 @@ export const SectionBackups = () => {
           </Flex>
         </DialogContent>
       </Dialog>
-      {!hasProPlan && (
+      {!hasPaidPlan && (
         <PanelBanner>
           <img
             src={cmsUpgradeBanner}
diff --git a/apps/builder/app/builder/features/topbar/domain-checkbox.tsx b/apps/builder/app/builder/features/topbar/domain-checkbox.tsx
index 849a3ff339f8..de92d8f8c959 100644
--- a/apps/builder/app/builder/features/topbar/domain-checkbox.tsx
+++ b/apps/builder/app/builder/features/topbar/domain-checkbox.tsx
@@ -21,14 +21,14 @@ interface DomainCheckboxProps {
 }
 
 export const DomainCheckbox = (props: DomainCheckboxProps) => {
-  const hasProPlan = useStore($userPlanFeatures).hasProPlan;
+  const { allowStagingPublish } = useStore($userPlanFeatures);
   const project = useStore($project);
 
   if (project === undefined) {
     return;
   }
 
-  const tooltipContentForFreeUsers = hasProPlan ? undefined : (
+  const tooltipContentForFreeUsers = allowStagingPublish ? undefined : (
     <Flex direction="column" gap="2" css={{ maxWidth: theme.spacing[28] }}>
       <Text variant="titles">Publish to Staging</Text>
       <Text>
@@ -55,13 +55,13 @@ export const DomainCheckbox = (props: DomainCheckboxProps) => {
     </Flex>
   );
 
-  const defaultChecked = hasProPlan ? props.defaultChecked : true;
-  const disabled = hasProPlan ? props.disabled : true;
+  const defaultChecked = allowStagingPublish ? props.defaultChecked : true;
+  const disabled = allowStagingPublish ? props.disabled : true;
 
   const hideDomainCheckbox =
     project.domainsVirtual.filter(
       (domain) => domain.status === "ACTIVE" && domain.verified
-    ).length === 0 && hasProPlan;
+    ).length === 0 && allowStagingPublish;
 
   return (
     <div style={{ display: hideDomainCheckbox ? "none" : "contents" }}>
diff --git a/apps/builder/app/builder/features/topbar/entri.tsx b/apps/builder/app/builder/features/topbar/entri.tsx
index 39af866ed889..a272fb5aade5 100644
--- a/apps/builder/app/builder/features/topbar/entri.tsx
+++ b/apps/builder/app/builder/features/topbar/entri.tsx
@@ -98,7 +98,7 @@ const useEntri = ({ domain, dnsRecords, onClose }: EntriProps) => {
 
 export const Entri = ({ domain, dnsRecords, onClose }: EntriProps) => {
   entriGlobalStyles();
-  const { hasProPlan } = useStore($userPlanFeatures);
+  const { hasPaidPlan } = useStore($userPlanFeatures);
   const { error, isOpen, showDialog } = useEntri({
     domain,
     dnsRecords,
@@ -113,7 +113,7 @@ export const Entri = ({ domain, dnsRecords, onClose }: EntriProps) => {
         color="primary"
         type="button"
         onClick={() => {
-          if (hasProPlan) {
+          if (hasPaidPlan) {
             showDialog();
           } else {
             setRequestUpgrade(true);
diff --git a/apps/builder/app/builder/features/topbar/menu/menu.tsx b/apps/builder/app/builder/features/topbar/menu/menu.tsx
index ca5957c3c0c8..effaa058bff2 100644
--- a/apps/builder/app/builder/features/topbar/menu/menu.tsx
+++ b/apps/builder/app/builder/features/topbar/menu/menu.tsx
@@ -58,7 +58,7 @@ const ViewMenuItem = () => {
 };
 
 export const Menu = () => {
-  const { hasProPlan } = useStore($userPlanFeatures);
+  const { hasPaidPlan } = useStore($userPlanFeatures);
   const authPermit = useStore($authPermit);
   const authTokenPermission = useStore($authTokenPermissions);
   const authToken = useStore($authToken);
@@ -287,7 +287,7 @@ export const Menu = () => {
           </DropdownMenuSubContent>
         </DropdownMenuSub>
 
-        {hasProPlan === false && (
+        {hasPaidPlan === false && (
           <>
             <DropdownMenuSeparator />
             <DropdownMenuItem
diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
index cf5a175130a3..5c28f0a1cd20 100644
--- a/apps/builder/app/builder/features/topbar/publish.tsx
+++ b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -76,11 +76,7 @@ import {
 import { AddDomain } from "./add-domain";
 import { humanizeString } from "~/shared/string-utils";
 import { trpcClient, nativeClient } from "~/shared/trpc/trpc-client";
-import {
-  isPathnamePattern,
-  parseComponentName,
-  type Templates,
-} from "@webstudio-is/sdk";
+import { isPathnamePattern, type Templates } from "@webstudio-is/sdk";
 import { DomainCheckbox, domainToPublishName } from "./domain-checkbox";
 import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard";
 import { $openProjectSettings } from "~/shared/nano-states/project-settings";
@@ -236,9 +232,9 @@ const ChangeProjectDomain = ({
   );
 };
 
-const $usedProFeatures = computed(
-  [$pages, $dataSources, $instances],
-  (pages, dataSources, instances) => {
+const $restrictedFeatures = computed(
+  [$pages, $dataSources, $instances, $userPlanFeatures],
+  (pages, dataSources, instances, userPlanFeatures) => {
     const features = new Map<
       string,
       | undefined
@@ -248,46 +244,38 @@ const $usedProFeatures = computed(
       return features;
     }
     // specified emails for default webhook form
-    if ((pages?.meta?.contactEmail ?? "").trim()) {
+    if (
+      userPlanFeatures.maxContactEmails === 0 &&
+      (pages?.meta?.contactEmail ?? "").trim()
+    ) {
       features.set("Custom contact email", undefined);
     }
-    // pages with dynamic paths
-    for (const page of [pages.homePage, ...pages.pages]) {
-      const awareness = {
-        pageId: page.id,
-        instanceSelector: [page.rootInstanceId],
-      };
-      // allow catch all for 404 pages on free plan
-      if (isPathnamePattern(page.path) && page.path !== "/*") {
-        features.set("Dynamic path", { awareness, view: "pageSettings" });
-      }
-      if (page.meta.redirect && page.meta.redirect !== `""`) {
-        features.set("Redirect", { awareness, view: "pageSettings" });
-      }
-    }
-    // has resource variables
-    for (const dataSource of dataSources.values()) {
-      if (dataSource.type === "resource") {
-        const instanceId = dataSource.scopeInstanceId ?? "";
-        features.set("Resource variable", {
-          awareness: findAwarenessByInstanceId(pages, instances, instanceId),
-        });
+    if (!userPlanFeatures.allowDynamicData) {
+      // pages with dynamic paths
+      for (const page of [pages.homePage, ...pages.pages]) {
+        const awareness = {
+          pageId: page.id,
+          instanceSelector: [page.rootInstanceId],
+        };
+        // allow catch all for 404 pages on free plan
+        if (isPathnamePattern(page.path) && page.path !== "/*") {
+          features.set("Dynamic path", { awareness, view: "pageSettings" });
+        }
+        if (page.meta.redirect && page.meta.redirect !== `""`) {
+          features.set("Redirect", { awareness, view: "pageSettings" });
+        }
       }
-    }
-
-    // Instances with animations.
-    for (const instance of instances.values()) {
-      const [namespace] = parseComponentName(instance.component);
-      if (namespace === "@webstudio-is/sdk-components-animation") {
-        features.set("Animation component", {
-          awareness: findAwarenessByInstanceId(pages, instances, instance.id),
-        });
+      // has resource variables
+      for (const dataSource of dataSources.values()) {
+        if (dataSource.type === "resource") {
+          const instanceId = dataSource.scopeInstanceId ?? "";
+          features.set("Resource variable", {
+            awareness: findAwarenessByInstanceId(pages, instances, instanceId),
+          });
+        }
       }
     }
-
-    // temporary ignore features checks
-    // return features;
-    return new Map() as typeof features;
+    return features;
   }
 );
 
@@ -309,10 +297,10 @@ const Publish = ({
   const [isPublishing, setIsPublishing] = useOptimistic(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [hasSelectedDomains, setHasSelectedDomains] = useState(false);
-  const hasProPlan = useStore($userPlanFeatures).hasProPlan;
+  const { hasPaidPlan, allowStagingPublish } = useStore($userPlanFeatures);
 
   useEffect(() => {
-    if (hasProPlan === false) {
+    if (allowStagingPublish === false) {
       setHasSelectedDomains(true);
       return;
     }
@@ -344,13 +332,13 @@ const Publish = ({
     return () => {
       observer.disconnect();
     };
-  }, [hasProPlan]);
+  }, [allowStagingPublish]);
 
   const handlePublish = async (formData: FormData) => {
     setPublishError(undefined);
     setIsPublishing(true);
 
-    const domains = hasProPlan
+    const domains = allowStagingPublish
       ? formData
           .getAll(domainToPublishName)
           .map((domainEntry) => domainEntry.toString())
@@ -436,7 +424,7 @@ const Publish = ({
         toast.success(
           <>
             The project has been successfully published.{" "}
-            {hasProPlan === false && (
+            {hasPaidPlan === false && (
               <div>
                 On the free plan, you have {timesLeft} out of{" "}
                 {maxPublishesAllowedPerUser} daily publications remaining. The
@@ -641,30 +629,17 @@ const PublishStatic = ({
 
 const useCanAddDomain = () => {
   const { load, data } = trpcClient.domain.countTotalDomains.useQuery();
-  const { maxDomainsAllowedPerUser, hasProPlan } = useStore($userPlanFeatures);
+  const { maxDomainsAllowedPerUser } = useStore($userPlanFeatures);
   const project = useStore($project);
-
   const activeDomainsCount = project?.domainsVirtual.filter(
     (domain) => domain.status === "ACTIVE" && domain.verified
   ).length;
-
   useEffect(() => {
     load();
   }, [load, activeDomainsCount]);
-
-  if (hasProPlan) {
-    return { canAddDomain: true, maxDomainsAllowedPerUser };
-  }
-
-  if (data?.success === false) {
-    return { canAddDomain: false, maxDomainsAllowedPerUser };
-  }
-
-  const withinFreeLimit = data
+  const canAddDomain = data
     ? data.success && data.data < maxDomainsAllowedPerUser
     : true;
-  const canAddDomain = hasProPlan || withinFreeLimit;
-
   return { canAddDomain, maxDomainsAllowedPerUser };
 };
 
@@ -704,7 +679,7 @@ const buttonLinkClass = css({
 }).toString();
 
 const UpgradeBanner = () => {
-  const usedProFeatures = useStore($usedProFeatures);
+  const restrictedFeatures = useStore($restrictedFeatures);
   const { canAddDomain } = useCanAddDomain();
   const { userPublishCount, maxPublishesAllowedPerUser } =
     useUserPublishCount();
@@ -729,7 +704,7 @@ const UpgradeBanner = () => {
     );
   }
 
-  if (usedProFeatures.size > 0) {
+  if (restrictedFeatures.size > 0) {
     return (
       <PanelBanner>
         <img
@@ -740,7 +715,7 @@ const UpgradeBanner = () => {
         />
         <Text variant="regularBold">Following Pro features are used:</Text>
         <Text as="ul" color="destructive" css={{ paddingLeft: "1em" }}>
-          {Array.from(usedProFeatures).map(
+          {Array.from(restrictedFeatures).map(
             ([message, { awareness, view, info } = {}], index) => (
               <li key={index}>
                 <Flex align="center" gap="1">
@@ -813,8 +788,7 @@ const Content = (props: {
   projectId: Project["id"];
   onExportClick: () => void;
 }) => {
-  const usedProFeatures = useStore($usedProFeatures);
-  const { hasProPlan } = useStore($userPlanFeatures);
+  const restrictedFeatures = useStore($restrictedFeatures);
   const [newDomains, setNewDomains] = useState(new Set<string>());
 
   const project = useStore($project);
@@ -859,13 +833,13 @@ const Content = (props: {
           }}
           onExportClick={props.onExportClick}
         />
-        {hasProPlan === false && <UpgradeBanner />}
+        <UpgradeBanner />
         <Publish
           project={project}
           refresh={refreshProject}
           timesLeft={maxPublishesAllowedPerUser - userPublishCount}
           disabled={
-            (usedProFeatures.size > 0 && hasProPlan === false) ||
+            restrictedFeatures.size > 0 ||
             userPublishCount >= maxPublishesAllowedPerUser
           }
         />
diff --git a/apps/builder/app/builder/features/topbar/share.tsx b/apps/builder/app/builder/features/topbar/share.tsx
index 11ef6a3fc362..d8669d883fae 100644
--- a/apps/builder/app/builder/features/topbar/share.tsx
+++ b/apps/builder/app/builder/features/topbar/share.tsx
@@ -13,13 +13,7 @@ import { ShareProjectContainer } from "~/shared/share-project";
 import { $authPermit } from "~/shared/nano-states";
 import { $isShareDialogOpen } from "~/builder/shared/nano-states";
 
-export const ShareButton = ({
-  projectId,
-  hasProPlan,
-}: {
-  projectId: string;
-  hasProPlan: boolean;
-}) => {
+export const ShareButton = ({ projectId }: { projectId: string }) => {
   const isShareDialogOpen = useStore($isShareDialogOpen);
   const authPermit = useStore($authPermit);
 
@@ -50,7 +44,7 @@ export const ShareButton = ({
         sideOffset={Number.parseFloat(rawTheme.spacing[8])}
         css={{ marginRight: theme.spacing[3] }}
       >
-        <ShareProjectContainer projectId={projectId} hasProPlan={hasProPlan} />
+        <ShareProjectContainer projectId={projectId} />
         <PopoverTitle>Share</PopoverTitle>
       </PopoverContent>
     </Popover>
diff --git a/apps/builder/app/builder/features/topbar/topbar.tsx b/apps/builder/app/builder/features/topbar/topbar.tsx
index 6dd722d1a06f..76177dbb3bbe 100644
--- a/apps/builder/app/builder/features/topbar/topbar.tsx
+++ b/apps/builder/app/builder/features/topbar/topbar.tsx
@@ -81,12 +81,11 @@ const hideOnMobile: CSS = {
 
 type TopbarProps = {
   project: Project;
-  hasProPlan: boolean;
   loading: ReactNode;
   css: CSS;
 };
 
-export const Topbar = ({ project, hasProPlan, css, loading }: TopbarProps) => {
+export const Topbar = ({ project, css, loading }: TopbarProps) => {
   const pages = useStore($pages);
   return (
     <nav className={topbarContainerStyle({ css })}>
@@ -125,7 +124,7 @@ export const Topbar = ({ project, hasProPlan, css, loading }: TopbarProps) => {
           <SyncStatus />
 
           <BuilderModeDropDown />
-          <ShareButton projectId={project.id} hasProPlan={hasProPlan} />
+          <ShareButton projectId={project.id} />
           <PublishButton projectId={project.id} />
           <CloneButton />
         </ToolbarToggleGroup>
diff --git a/apps/builder/app/builder/shared/image-manager/image-info.tsx b/apps/builder/app/builder/shared/image-manager/image-info.tsx
index 91959932c7ea..1ea44ebf486c 100644
--- a/apps/builder/app/builder/shared/image-manager/image-info.tsx
+++ b/apps/builder/app/builder/shared/image-manager/image-info.tsx
@@ -260,7 +260,7 @@ const ImageInfoContent = ({
   asset: Asset;
   usages: AssetUsage[];
 }) => {
-  const { hasProPlan } = useStore($userPlanFeatures);
+  const { hasPaidPlan } = useStore($userPlanFeatures);
   const { size, meta, id, name } = asset;
   const { basename, ext } = parseAssetName(name);
   const [filenameError, setFilenameError] = useState<string>();
@@ -311,7 +311,7 @@ const ImageInfoContent = ({
   if (authPermit === "view") {
     downloadError =
       "Unavailable in View mode. Switch to Edit to download assets.";
-  } else if (!hasProPlan) {
+  } else if (!hasPaidPlan) {
     downloadError = "Upgrade to Pro to download assets.";
   }
 
diff --git a/apps/builder/app/dashboard/dashboard.stories.tsx b/apps/builder/app/dashboard/dashboard.stories.tsx
index e6c93a38095c..8325fd00f7a6 100644
--- a/apps/builder/app/dashboard/dashboard.stories.tsx
+++ b/apps/builder/app/dashboard/dashboard.stories.tsx
@@ -26,10 +26,12 @@ const createRouter = (element: JSX.Element, path: string, current?: string) =>
   });
 
 const userPlanFeatures: UserPlanFeatures = {
-  hasProPlan: false,
+  hasPaidPlan: false,
   hasSubscription: false,
-  allowShareAdminLinks: false,
+  allowAdditionalPermissions: false,
   allowDynamicData: false,
+  allowContentMode: false,
+  allowStagingPublish: false,
   maxContactEmails: 0,
   maxDomainsAllowedPerUser: 0,
   maxPublishesAllowedPerUser: 1,
diff --git a/apps/builder/app/dashboard/dashboard.tsx b/apps/builder/app/dashboard/dashboard.tsx
index a96c6bbe524a..c6dc1df8c337 100644
--- a/apps/builder/app/dashboard/dashboard.tsx
+++ b/apps/builder/app/dashboard/dashboard.tsx
@@ -252,11 +252,7 @@ export const Dashboard = () => {
           </PanelBanner>
         </Flex>
         {view === "projects" && (
-          <Projects
-            projects={projects}
-            hasProPlan={userPlanFeatures.hasProPlan}
-            publisherHost={publisherHost}
-          />
+          <Projects projects={projects} publisherHost={publisherHost} />
         )}
         {view === "templates" && <Templates projects={templates} />}
         {view === "welcome" && <Templates projects={templates} welcome />}
diff --git a/apps/builder/app/dashboard/profile-menu.tsx b/apps/builder/app/dashboard/profile-menu.tsx
index 92445f744396..782f0fb8d765 100644
--- a/apps/builder/app/dashboard/profile-menu.tsx
+++ b/apps/builder/app/dashboard/profile-menu.tsx
@@ -68,7 +68,7 @@ export const ProfileMenu = ({
           image={user.image || undefined}
           name={nameOrEmail}
           badge={
-            userPlanFeatures.hasProPlan ? userPlanFeatures.planName : undefined
+            userPlanFeatures.hasPaidPlan ? userPlanFeatures.planName : undefined
           }
         />
       </DropdownMenuTrigger>
@@ -84,7 +84,7 @@ export const ProfileMenu = ({
             Manage Subscription
           </DropdownMenuItem>
         )}
-        {userPlanFeatures.hasProPlan === false && (
+        {userPlanFeatures.hasPaidPlan === false && (
           <DropdownMenuItem
             onSelect={() => {
               window.open("https://webstudio.is/pricing");
diff --git a/apps/builder/app/dashboard/projects/project-card.tsx b/apps/builder/app/dashboard/projects/project-card.tsx
index 8318b44840ab..9a7ee711e2cd 100644
--- a/apps/builder/app/dashboard/projects/project-card.tsx
+++ b/apps/builder/app/dashboard/projects/project-card.tsx
@@ -103,7 +103,6 @@ const formatDate = (date: string) => {
 
 type ProjectCardProps = {
   project: DashboardProject;
-  hasProPlan: boolean;
   publisherHost: string;
 };
 
@@ -117,7 +116,6 @@ export const ProjectCard = ({
     latestBuildVirtual,
     previewImageAsset,
   },
-  hasProPlan,
   publisherHost,
   ...props
 }: ProjectCardProps) => {
@@ -254,7 +252,6 @@ export const ProjectCard = ({
         isOpen={isShareDialogOpen}
         onOpenChange={setIsShareDialogOpen}
         projectId={id}
-        hasProPlan={hasProPlan}
       />
     </Card>
   );
diff --git a/apps/builder/app/dashboard/projects/project-dialogs.tsx b/apps/builder/app/dashboard/projects/project-dialogs.tsx
index eee359dacff3..99f5c24249a6 100644
--- a/apps/builder/app/dashboard/projects/project-dialogs.tsx
+++ b/apps/builder/app/dashboard/projects/project-dialogs.tsx
@@ -376,16 +376,14 @@ export const ShareProjectDialog = ({
   isOpen,
   onOpenChange,
   projectId,
-  hasProPlan,
 }: {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   projectId: string;
-  hasProPlan: boolean;
 }) => {
   return (
     <Dialog title="Share Project" isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ShareProjectContainer hasProPlan={hasProPlan} projectId={projectId} />
+      <ShareProjectContainer projectId={projectId} />
     </Dialog>
   );
 };
diff --git a/apps/builder/app/dashboard/projects/projects.tsx b/apps/builder/app/dashboard/projects/projects.tsx
index 2f22cbf5ff35..d33edb6046f0 100644
--- a/apps/builder/app/dashboard/projects/projects.tsx
+++ b/apps/builder/app/dashboard/projects/projects.tsx
@@ -12,11 +12,7 @@ import { ProjectCard } from "./project-card";
 import { CreateProject } from "./project-dialogs";
 import { Header, Main } from "../shared/layout";
 
-export const ProjectsGrid = ({
-  projects,
-  hasProPlan,
-  publisherHost,
-}: ProjectsProps) => {
+export const ProjectsGrid = ({ projects, publisherHost }: ProjectsProps) => {
   return (
     <List asChild>
       <Grid
@@ -29,11 +25,7 @@ export const ProjectsGrid = ({
         {projects.map((project) => {
           return (
             <ListItem index={0} key={project.id} asChild>
-              <ProjectCard
-                project={project}
-                hasProPlan={hasProPlan}
-                publisherHost={publisherHost}
-              />
+              <ProjectCard project={project} publisherHost={publisherHost} />
             </ListItem>
           );
         })}
@@ -44,7 +36,6 @@ export const ProjectsGrid = ({
 
 type ProjectsProps = {
   projects: Array<DashboardProject>;
-  hasProPlan: boolean;
   publisherHost: string;
 };
 
diff --git a/apps/builder/app/dashboard/search/search-results.tsx b/apps/builder/app/dashboard/search/search-results.tsx
index f2a07617743f..20a8b3826e96 100644
--- a/apps/builder/app/dashboard/search/search-results.tsx
+++ b/apps/builder/app/dashboard/search/search-results.tsx
@@ -21,7 +21,7 @@ const initialSearchResults: SearchResults = {
 
 export const SearchResults = (props: DashboardData) => {
   const [searchParams] = useSearchParams();
-  const { projects, templates, userPlanFeatures, publisherHost } = props;
+  const { projects, templates, publisherHost } = props;
   const search = searchParams.get("q");
 
   const results = useMemo(() => {
@@ -61,7 +61,6 @@ export const SearchResults = (props: DashboardData) => {
             </Text>
             <ProjectsGrid
               projects={results.projects}
-              hasProPlan={userPlanFeatures.hasProPlan}
               publisherHost={publisherHost}
             />
           </>
diff --git a/apps/builder/app/shared/db/user-plan-features.server.ts b/apps/builder/app/shared/db/user-plan-features.server.ts
index 48502613dec6..7e2c2a9d1683 100644
--- a/apps/builder/app/shared/db/user-plan-features.server.ts
+++ b/apps/builder/app/shared/db/user-plan-features.server.ts
@@ -40,8 +40,10 @@ export const getUserPlanFeatures = async (
     );
     const productMetas = products.map((product) => {
       return {
-        allowShareAdminLinks: true,
+        allowAdditionalPermissions: true,
         allowDynamicData: true,
+        allowContentMode: true,
+        allowStagingPublish: true,
         maxContactEmails: 5,
         maxDomainsAllowedPerUser: Number.MAX_SAFE_INTEGER,
         maxPublishesAllowedPerUser: Number.MAX_SAFE_INTEGER,
@@ -49,10 +51,14 @@ export const getUserPlanFeatures = async (
       };
     });
     return {
-      allowShareAdminLinks: productMetas.some(
-        (item) => item.allowShareAdminLinks
+      allowAdditionalPermissions: productMetas.some(
+        (item) => item.allowAdditionalPermissions
       ),
       allowDynamicData: productMetas.some((item) => item.allowDynamicData),
+      allowContentMode: productMetas.some((item) => item.allowContentMode),
+      allowStagingPublish: productMetas.some(
+        (item) => item.allowStagingPublish
+      ),
       maxContactEmails: Math.max(
         ...productMetas.map((item) => item.maxContactEmails)
       ),
@@ -63,31 +69,35 @@ export const getUserPlanFeatures = async (
         ...productMetas.map((item) => item.maxPublishesAllowedPerUser)
       ),
       hasSubscription,
-      hasProPlan: true,
+      hasPaidPlan: true,
       planName: products[0].name,
     };
   }
 
   if (env.USER_PLAN === "pro") {
     return {
-      allowShareAdminLinks: true,
+      allowAdditionalPermissions: true,
       allowDynamicData: true,
+      allowContentMode: true,
+      allowStagingPublish: true,
       maxContactEmails: 5,
       maxDomainsAllowedPerUser: Number.MAX_SAFE_INTEGER,
       maxPublishesAllowedPerUser: Number.MAX_SAFE_INTEGER,
       hasSubscription: true,
-      hasProPlan: true,
+      hasPaidPlan: true,
       planName: "env.USER_PLAN Pro",
     };
   }
 
   return {
-    allowShareAdminLinks: false,
+    allowAdditionalPermissions: false,
     allowDynamicData: false,
+    allowContentMode: false,
+    allowStagingPublish: false,
     maxContactEmails: 0,
     maxDomainsAllowedPerUser: 0,
     maxPublishesAllowedPerUser: 10,
     hasSubscription: false,
-    hasProPlan: false,
+    hasPaidPlan: false,
   };
 };
diff --git a/apps/builder/app/shared/nano-states/misc.ts b/apps/builder/app/shared/nano-states/misc.ts
index ff02c39bd90a..2570a8eb27d8 100644
--- a/apps/builder/app/shared/nano-states/misc.ts
+++ b/apps/builder/app/shared/nano-states/misc.ts
@@ -312,13 +312,15 @@ export const $hoveredInstanceSelector = atom<undefined | InstanceSelector>(
 
 // keep in sync with user-plan-features.server
 export const $userPlanFeatures = atom<UserPlanFeatures>({
-  allowShareAdminLinks: false,
+  allowAdditionalPermissions: false,
   allowDynamicData: false,
+  allowContentMode: false,
+  allowStagingPublish: false,
   maxContactEmails: 0,
   maxDomainsAllowedPerUser: 0,
   maxPublishesAllowedPerUser: 1,
   hasSubscription: false,
-  hasProPlan: false,
+  hasPaidPlan: false,
 });
 
 const builderModes = ["design", "preview", "content"] as const;
@@ -358,7 +360,7 @@ export const $isContentModeAllowed = computed(
     }
 
     // In shared projects, only Pro users can share editable links, so check the plan features of the user who shared the link
-    return userPlanFeatures.hasProPlan === true;
+    return userPlanFeatures.allowContentMode === true;
   }
 );
 
diff --git a/apps/builder/app/shared/share-project/share-project-container.tsx b/apps/builder/app/shared/share-project/share-project-container.tsx
index c601533367ea..435e46476142 100644
--- a/apps/builder/app/shared/share-project/share-project-container.tsx
+++ b/apps/builder/app/shared/share-project/share-project-container.tsx
@@ -3,6 +3,8 @@ import { useDebouncedCallback } from "use-debounce";
 import { builderUrl } from "~/shared/router-utils";
 import { trpcClient } from "../trpc/trpc-client";
 import { ShareProject, type LinkOptions } from "./share-project";
+import { useStore } from "@nanostores/react";
+import { $userPlanFeatures } from "../nano-states";
 
 const useShareProjectContainer = (projectId: string) => {
   const {
@@ -89,17 +91,14 @@ const useShareProjectContainer = (projectId: string) => {
 
 type ShareButtonProps = {
   projectId: string;
-  hasProPlan: boolean;
 };
 
 /**
  * we place the logic inside Popover so that the fetcher does not exist outside of it.
  * Then remix will not call `trpc.findMany.useQuery` if Popover is closed
  */
-export const ShareProjectContainer = ({
-  projectId,
-  hasProPlan,
-}: ShareButtonProps) => {
+export const ShareProjectContainer = ({ projectId }: ShareButtonProps) => {
+  const { allowAdditionalPermissions } = useStore($userPlanFeatures);
   const {
     links,
     handleChangeDebounced,
@@ -110,7 +109,7 @@ export const ShareProjectContainer = ({
 
   return (
     <ShareProject
-      hasProPlan={hasProPlan}
+      allowAdditionalPermissions={allowAdditionalPermissions}
       links={links}
       onChange={handleChangeDebounced}
       onDelete={handleDelete}
diff --git a/apps/builder/app/shared/share-project/share-project.stories.tsx b/apps/builder/app/shared/share-project/share-project.stories.tsx
index b9077b2cd380..da39876a664a 100644
--- a/apps/builder/app/shared/share-project/share-project.stories.tsx
+++ b/apps/builder/app/shared/share-project/share-project.stories.tsx
@@ -96,7 +96,7 @@ export const Empty: StoryFn<typeof ShareProject> = () => {
       <PopoverContent>
         <ShareProject
           {...props}
-          hasProPlan={false}
+          allowAdditionalPermissions={false}
           isPending={false}
           builderUrl={({ authToken, mode }) =>
             `https://blabla.com/${authToken}/${mode}`
@@ -118,7 +118,7 @@ export const WithLinks: StoryFn<typeof ShareProject> = () => {
       <PopoverContent>
         <ShareProject
           {...props}
-          hasProPlan={false}
+          allowAdditionalPermissions={false}
           isPending={false}
           builderUrl={({ authToken, mode }) =>
             `https://blabla.com/${authToken}/${mode}`
@@ -140,7 +140,7 @@ export const WithAsyncLinks: StoryFn<typeof ShareProject> = () => {
       <PopoverContent>
         <ShareProject
           {...props}
-          hasProPlan={false}
+          allowAdditionalPermissions={false}
           isPending={false}
           builderUrl={({ authToken, mode }) =>
             `https://blabla.com/${authToken}/${mode}`
diff --git a/apps/builder/app/shared/share-project/share-project.tsx b/apps/builder/app/shared/share-project/share-project.tsx
index ad9b399a3547..3bf930961e63 100644
--- a/apps/builder/app/shared/share-project/share-project.tsx
+++ b/apps/builder/app/shared/share-project/share-project.tsx
@@ -92,12 +92,18 @@ const Permission = ({
 type MenuProps = {
   name: string;
   value: LinkOptions;
-  hasProPlan: boolean;
+  allowAdditionalPermissions: boolean;
   onChange: (value: LinkOptions) => void;
   onDelete: () => void;
 };
 
-const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
+const Menu = ({
+  name,
+  allowAdditionalPermissions,
+  value,
+  onChange,
+  onDelete,
+}: MenuProps) => {
   const ids = useIds(["name", "canClone", "canCopy", "canPublish"]);
   const [isOpen, setIsOpen] = useState(false);
   const [customLinkName, setCustomLinkName] = useState<string>(name);
@@ -163,7 +169,7 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
             info={
               <Flex direction="column">
                 Recipients can view, copy instances and clone the project.
-                {hasProPlan !== true && (
+                {!allowAdditionalPermissions && (
                   <>
                     <br />
                     <br />
@@ -198,7 +204,9 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
               }}
             >
               <Checkbox
-                disabled={hasProPlan !== true || value.relation !== "viewers"}
+                disabled={
+                  !allowAdditionalPermissions || value.relation !== "viewers"
+                }
                 checked={value.canClone}
                 onCheckedChange={(canClone) => {
                   onChange({ ...value, canClone: Boolean(canClone) });
@@ -207,7 +215,9 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
               />
               <Label
                 htmlFor={ids.canClone}
-                disabled={hasProPlan !== true || value.relation !== "viewers"}
+                disabled={
+                  !allowAdditionalPermissions || value.relation !== "viewers"
+                }
               >
                 Can clone
               </Label>
@@ -221,7 +231,9 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
               }}
             >
               <Checkbox
-                disabled={hasProPlan !== true || value.relation !== "viewers"}
+                disabled={
+                  !allowAdditionalPermissions || value.relation !== "viewers"
+                }
                 checked={value.canCopy}
                 onCheckedChange={(canCopy) => {
                   onChange({ ...value, canCopy: Boolean(canCopy) });
@@ -230,7 +242,9 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
               />
               <Label
                 htmlFor={ids.canCopy}
-                disabled={hasProPlan !== true || value.relation !== "viewers"}
+                disabled={
+                  !allowAdditionalPermissions || value.relation !== "viewers"
+                }
               >
                 Can copy
               </Label>
@@ -238,7 +252,7 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
           </Grid>
 
           <Permission
-            disabled={hasProPlan !== true}
+            disabled={!allowAdditionalPermissions}
             onCheckedChange={handleCheckedChange("editors")}
             checked={value.relation === "editors"}
             title="Content"
@@ -246,7 +260,7 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
               <Flex direction="column">
                 Recipients can edit content only, such as text, images, and
                 predefined components.
-                {hasProPlan !== true && (
+                {!allowAdditionalPermissions && (
                   <>
                     <br />
                     <br />
@@ -281,7 +295,9 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
               }}
             >
               <Checkbox
-                disabled={hasProPlan !== true || value.relation !== "editors"}
+                disabled={
+                  !allowAdditionalPermissions || value.relation !== "editors"
+                }
                 checked={value.canPublish}
                 onCheckedChange={(canPublish) => {
                   onChange({ ...value, canPublish: Boolean(canPublish) });
@@ -290,7 +306,9 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
               />
               <Label
                 htmlFor={ids.canPublish}
-                disabled={hasProPlan !== true || value.relation !== "editors"}
+                disabled={
+                  !allowAdditionalPermissions || value.relation !== "editors"
+                }
               >
                 Can publish
               </Label>
@@ -305,7 +323,7 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
           />
 
           <Permission
-            disabled={hasProPlan !== true}
+            disabled={!allowAdditionalPermissions}
             onCheckedChange={handleCheckedChange("administrators")}
             checked={value.relation === "administrators"}
             title="Admin"
@@ -313,7 +331,7 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
               <Flex direction="column">
                 Recipients can make any changes and can also publish the
                 project.
-                {hasProPlan !== true && (
+                {!allowAdditionalPermissions && (
                   <>
                     <br />
                     <br />
@@ -375,7 +393,7 @@ type SharedLinkItemType = {
   onChange: (value: LinkOptions) => void;
   onDelete: () => void;
   builderUrl: (props: { authToken: string; mode: BuilderMode }) => string;
-  hasProPlan: boolean;
+  allowAdditionalPermissions: boolean;
 };
 
 const relationToMode: Record<Relation, BuilderMode> = {
@@ -390,7 +408,7 @@ const SharedLinkItem = ({
   onChange,
   onDelete,
   builderUrl,
-  hasProPlan,
+  allowAdditionalPermissions,
 }: SharedLinkItemType) => {
   const [currentName, setCurrentName] = useState(value.name);
 
@@ -416,7 +434,7 @@ const SharedLinkItem = ({
           onChange(value);
         }}
         onDelete={onDelete}
-        hasProPlan={hasProPlan}
+        allowAdditionalPermissions={allowAdditionalPermissions}
       />
     </Box>
   );
@@ -429,7 +447,7 @@ type ShareProjectProps = {
   onCreate: () => void;
   builderUrl: SharedLinkItemType["builderUrl"];
   isPending: boolean;
-  hasProPlan: boolean;
+  allowAdditionalPermissions: boolean;
 };
 
 const animateCollapsibleHeight = keyframes({
@@ -456,7 +474,7 @@ export const ShareProject = ({
   onCreate,
   builderUrl,
   isPending,
-  hasProPlan,
+  allowAdditionalPermissions,
 }: ShareProjectProps) => {
   const items = links.map((link) => (
     <Fragment key={link.token}>
@@ -469,7 +487,7 @@ export const ShareProject = ({
         }}
         builderUrl={builderUrl}
         value={link}
-        hasProPlan={hasProPlan}
+        allowAdditionalPermissions={allowAdditionalPermissions}
       />
       <Separator />
     </Fragment>
diff --git a/packages/trpc-interface/src/context/context.server.ts b/packages/trpc-interface/src/context/context.server.ts
index 651bf0844c41..4f1dbc1a902a 100644
--- a/packages/trpc-interface/src/context/context.server.ts
+++ b/packages/trpc-interface/src/context/context.server.ts
@@ -64,18 +64,20 @@ type DeploymentContext = {
 };
 
 type UserPlanFeatures = {
-  allowShareAdminLinks: boolean;
+  allowAdditionalPermissions: boolean;
   allowDynamicData: boolean;
+  allowContentMode: boolean;
+  allowStagingPublish: boolean;
   maxContactEmails: number;
   maxDomainsAllowedPerUser: number;
   maxPublishesAllowedPerUser: number;
   hasSubscription: boolean;
 } & (
   | {
-      hasProPlan: true;
+      hasPaidPlan: true;
       planName: string;
     }
-  | { hasProPlan: false }
+  | { hasPaidPlan: false }
 );
 
 // No strings except planName - no secrets