diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 32f9979..2d2dfa9 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -14,6 +14,8 @@ import {
 } from "./ui/accordion";
 import { capitalize } from "../lib/utils";
 import toast from "react-hot-toast";
+import { IS_RUNNING_ON_CLOUD } from "../config";
+import { Badge } from "./ui/badge";
 
 function displayCSSOption(option: CSSOption) {
   switch (option) {
@@ -44,6 +46,11 @@ interface Props {
 
 function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   const onCSSValueChange = (value: string) => {
+    if (IS_RUNNING_ON_CLOUD) {
+      toast.error("Upgrade to the Business plan to change CSS framework.");
+      return;
+    }
+
     setOutputSettings((prev) => {
       if (prev.js === JSFrameworkOption.REACT) {
         if (value !== CSSOption.TAILWIND) {
@@ -65,6 +72,11 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   };
 
   const onJsFrameworkChange = (value: string) => {
+    if (IS_RUNNING_ON_CLOUD) {
+      toast.error("Upgrade to the Business plan to change JS framework.");
+      return;
+    }
+
     if (value === JSFrameworkOption.REACT) {
       setOutputSettings(() => ({
         css: CSSOption.TAILWIND,
@@ -81,7 +93,12 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   return (
     <Accordion type="single" collapsible className="w-full">
       <AccordionItem value="item-1">
-        <AccordionTrigger>Output Settings</AccordionTrigger>
+        <AccordionTrigger>
+          <div className="flex gap-x-2">
+            Output Settings{" "}
+            {IS_RUNNING_ON_CLOUD && <Badge variant="outline">Pro</Badge>}
+          </div>
+        </AccordionTrigger>
         <AccordionContent className="gap-y-2 flex flex-col pt-2">
           <div className="flex justify-between items-center pr-2">
             <span className="text-sm">CSS</span>
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }