fix: harden sso account deletion reauth

Only allow account deletion SSO reauth for providers that return fresh authentication evidence. Decrypt signed SAML responses before extracting AuthnInstant so encrypted assertions remain supported.

.claude/scheduled_tasks.lock

@@ -1 +0,0 @@
-{"sessionId":"f77248e2-8840-41c6-968b-c3b7d8a9e913","pid":49125,"acquiredAt":1776168010367}

.env.example

@@ -32,54 +32,12 @@ CRON_SECRET=
 # Set the minimum log level(debug, info, warn, error, fatal)
 LOG_LEVEL=info
 
-# BullMQ workers require REDIS_URL (for example `redis://localhost:6379`) to be set.
-# BullMQ worker startup is enabled by default outside tests. Set to 0 to disable.
-# BULLMQ_WORKER_ENABLED=1
-# Set to 1 on web/API pods that only enqueue jobs while a separate BullMQ worker deployment consumes them.
-# BULLMQ_EXTERNAL_WORKER_ENABLED=0
-
-# Number of BullMQ worker instances started per Formbricks server process.
-# BULLMQ_WORKER_COUNT=1
-
-# Number of concurrent jobs each BullMQ worker can process.
-# BULLMQ_WORKER_CONCURRENCY=1
-
-# Survey publish/close scheduling is configured with public build-time env vars because the editor UI
-# also needs to render the selected execution time and timezone.
-# NEXT_PUBLIC_SURVEY_SCHEDULING_TIME_ZONE=Europe/Berlin
-# NEXT_PUBLIC_SURVEY_SCHEDULING_LOCAL_HOUR=0
-# NEXT_PUBLIC_SURVEY_SCHEDULING_LOCAL_MINUTE=0
-
 ##############
 #  DATABASE  #
 ##############
 
 DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=public'
 
-#################
-#  HUB (DEV)    #
-#################
-# The dev stack (pnpm db:up / pnpm go) runs Formbricks Hub on port 8080.
-# Set explicitly to avoid confusion; override as needed when using docker-compose.dev.yml.
-HUB_API_KEY=dev-api-key
-HUB_API_URL=http://localhost:8080
-HUB_DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres?sslmode=disable
-# Hub image tag used by docker-compose.dev.yml (hub + hub-migrate). Leave unset to use the
-# pinned default in the compose file; override here when testing a specific Hub release.
-# HUB_IMAGE_TAG=0.2.0
-
-###########################
-#  CUBE ANALYTICS (XM V5) #
-###########################
-# XM Suite v5 analysis features require Cube.js. The optional xm dev profile exposes Cube on port 4000.
-# Uncomment COMPOSE_PROFILES=xm to run the optional Cube analytics service.
-# COMPOSE_PROFILES=xm
-CUBEJS_API_URL=http://localhost:4000
-# Generate with: openssl rand -hex 32. `pnpm dev:setup` will create/preserve this automatically.
-CUBEJS_API_SECRET=
-CUBEJS_JWT_ISSUER=formbricks-web
-CUBEJS_JWT_AUDIENCE=formbricks-cube
-
 ################
 #  MAIL SETUP  #
 ################
@@ -148,6 +106,13 @@ PASSWORD_RESET_DISABLED=1
 # Organization Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
+###########################################
+# Account deletion reauthentication       #
+###########################################
+
+# Danger: disables fresh SSO reauthentication for passwordless account deletion. Keep unset unless you accept the risk.
+# DISABLE_ACCOUNT_DELETION_SSO_REAUTH=1
+
 
 ##########
 # Other  #
@@ -174,6 +139,9 @@ GITHUB_SECRET=
 # Configure Google Login
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
+# Google only returns the auth_time proof after Auth Platform Security Bundle "Session age claims" is enabled.
+# Keep this unset until that setting is active for the OAuth app.
+# GOOGLE_ACCOUNT_DELETION_REAUTH_ENABLED=1
 
 # Configure Azure Active Directory Login
 AZUREAD_CLIENT_ID=
@@ -182,16 +150,16 @@ AZUREAD_TENANT_ID=
 
 # Configure Formbricks AI at the instance level
 # Set the provider used for AI features on this instance.
-# Accepted values for AI_PROVIDER: aws, google, azure
+# Accepted values for AI_PROVIDER: aws, gcp, azure
 # Set AI_MODEL to the provider-specific model or deployment name and configure the matching credentials below.
-# AI_PROVIDER=google
+# AI_PROVIDER=gcp
 # AI_MODEL=gemini-2.5-flash
 
-# Google Cloud credentials for Gemini models
-# AI_GOOGLE_CLOUD_PROJECT=
-# AI_GOOGLE_CLOUD_LOCATION=
-# AI_GOOGLE_CLOUD_CREDENTIALS_JSON=
-# AI_GOOGLE_CLOUD_APPLICATION_CREDENTIALS=
+# Google Vertex AI credentials
+# AI_GCP_PROJECT=
+# AI_GCP_LOCATION=
+# AI_GCP_CREDENTIALS_JSON=
+# AI_GCP_APPLICATION_CREDENTIALS=
 
 # Amazon Bedrock credentials
 # AI_AWS_REGION=
@@ -310,13 +278,6 @@ REDIS_URL=redis://localhost:6379
 # If the ip should be added in the log or not. Default 0
 # AUDIT_LOG_GET_USER_IP=0
 
-# Optional Cube.js database overrides. The official local docker-compose.dev.yml stack points Cube at the
-# local `postgres` service automatically; set these only when running Cube yourself or changing bundled defaults.
-# CUBEJS_DB_HOST=postgres
-# CUBEJS_DB_PORT=5432
-# CUBEJS_DB_NAME=postgres
-# CUBEJS_DB_USER=postgres
-# CUBEJS_DB_PASS=postgres
 
 # Lingo.dev API key for translation generation
 LINGO_API_KEY=your_api_key_here

.github/actions/cache-build-web/action.yml

@@ -20,12 +20,12 @@ runs:
   using: "composite"
   steps:
     - name: Checkout repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
     - uses: ./.github/actions/dangerous-git-checkout
 
     - name: Cache Build
-      uses: actions/cache@v3
+      uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
       id: cache-build
       env:
         cache-name: prod-build
@@ -43,7 +43,7 @@ runs:
       shell: bash
 
     - name: Setup Node.js 20.x
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
       with:
         node-version: 20.x
       if: steps.cache-build.outputs.cache-hit != 'true'
@@ -53,18 +53,20 @@ runs:
       if: steps.cache-build.outputs.cache-hit != 'true'
 
     - name: Install dependencies
-      run: pnpm install --config.platform=linux --config.architecture=x64
+      run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
       if: steps.cache-build.outputs.cache-hit != 'true'
       shell: bash
 
-    - name: Create .env
-      run: pnpm dev:setup
+    - name: create .env
+      run: cp .env.example .env
       shell: bash
 
-    - name: Fill E2E_TESTING in .env
+    - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
       env:
         E2E_TESTING_MODE: ${{ inputs.e2e_testing_mode }}
       run: |
+        RANDOM_KEY=$(openssl rand -hex 32)
+        sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
         echo "E2E_TESTING=$E2E_TESTING_MODE" >> .env
       shell: bash
 

.github/actions/dangerous-git-checkout/action.yml

@@ -4,7 +4,7 @@ runs:
   using: "composite"
   steps:
     - name: Checkout repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       with:
         ref: ${{ github.event.pull_request.head.sha }}
         fetch-depth: 2

.github/workflows/chromatic.yml

@@ -49,7 +49,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: Run Chromatic
         uses: chromaui/action@4c20b95e9d3209ecfdf9cd6aace6bbde71ba1694 # v13.3.4

.github/workflows/e2e.yml

@@ -57,7 +57,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 22.x
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -65,15 +65,19 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
         shell: bash
 
-      - name: Create .env
-        run: pnpm dev:setup
+      - name: create .env
+        run: cp .env.example .env
         shell: bash
 
-      - name: Fill ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+      - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
         run: |
+          RANDOM_KEY=$(openssl rand -hex 32)
+          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${{ secrets.ENTERPRISE_LICENSE_KEY }}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=redis://localhost:6379|" .env
           echo "" >> .env
@@ -81,65 +85,48 @@ jobs:
           echo "S3_REGION=us-east-1" >> .env
           echo "S3_BUCKET_NAME=formbricks-e2e" >> .env
           echo "S3_ENDPOINT_URL=http://localhost:9000" >> .env
-          echo "S3_ACCESS_KEY=devminio" >> .env
-          echo "S3_SECRET_KEY=devminio123" >> .env
+          echo "S3_ACCESS_KEY=devrustfs-service" >> .env
+          echo "S3_SECRET_KEY=devrustfs-service123" >> .env
           echo "S3_FORCE_PATH_STYLE=1" >> .env
         shell: bash
 
-      - name: Install MinIO client (mc)
-        run: |
-          set -euo pipefail
-          MC_VERSION="RELEASE.2025-08-13T08-35-41Z"
-          MC_BASE="https://dl.min.io/client/mc/release/linux-amd64/archive"
-          MC_BIN="mc.${MC_VERSION}"
-          MC_SUM="${MC_BIN}.sha256sum"
-
-          curl -fsSL "${MC_BASE}/${MC_BIN}" -o "${MC_BIN}"
-          curl -fsSL "${MC_BASE}/${MC_SUM}" -o "${MC_SUM}"
-
-          sha256sum -c "${MC_SUM}"
-
-          chmod +x "${MC_BIN}"
-          sudo mv "${MC_BIN}" /usr/local/bin/mc
-
-      - name: Start MinIO Server
+      - name: Start RustFS Server
         run: |
           set -euo pipefail
 
-          # Start MinIO server in background
+          # Start RustFS server in background
           docker run -d \
-            --name minio-server \
+            --name rustfs-server \
             -p 9000:9000 \
             -p 9001:9001 \
-            -e MINIO_ROOT_USER=devminio \
-            -e MINIO_ROOT_PASSWORD=devminio123 \
-            minio/minio:RELEASE.2025-09-07T16-13-09Z \
-            server /data --console-address :9001
+            -e RUSTFS_ACCESS_KEY=devrustfs \
+            -e RUSTFS_SECRET_KEY=devrustfs123 \
+            -e RUSTFS_ADDRESS=:9000 \
+            -e RUSTFS_CONSOLE_ENABLE=true \
+            -e RUSTFS_CONSOLE_ADDRESS=:9001 \
+            rustfs/rustfs:1.0.0-alpha.93 \
+            /data
 
-          echo "MinIO server started"
+          echo "RustFS server started"
 
-      - name: Wait for MinIO and create S3 bucket
+      - name: Bootstrap RustFS bucket and browser upload CORS
         run: |
           set -euo pipefail
 
-          echo "Waiting for MinIO to be ready..."
-          ready=0
-          for i in {1..60}; do
-            if curl -fsS http://localhost:9000/minio/health/live >/dev/null; then
-              echo "MinIO is up after ${i} seconds"
-              ready=1
-              break
-            fi
-            sleep 1
-          done
-
-          if [ "$ready" -ne 1 ]; then
-            echo "::error::MinIO did not become ready within 60 seconds"
-            exit 1
-          fi
-
-          mc alias set local http://localhost:9000 devminio devminio123
-          mc mb --ignore-existing local/formbricks-e2e
+          docker run --rm \
+            --network host \
+            --entrypoint /bin/sh \
+            -e RUSTFS_ENDPOINT_URL=http://127.0.0.1:9000 \
+            -e RUSTFS_ADMIN_USER=devrustfs \
+            -e RUSTFS_ADMIN_PASSWORD=devrustfs123 \
+            -e RUSTFS_SERVICE_USER=devrustfs-service \
+            -e RUSTFS_SERVICE_PASSWORD=devrustfs-service123 \
+            -e RUSTFS_BUCKET_NAME=formbricks-e2e \
+            -e RUSTFS_POLICY_NAME=formbricks-e2e-policy \
+            -e RUSTFS_CORS_ALLOWED_ORIGINS=http://localhost:3000,http://127.0.0.1:3000 \
+            -v "$PWD/docker/rustfs-init.sh:/tmp/rustfs-init.sh:ro" \
+            minio/mc@sha256:95b5f3f7969a5c5a9f3a700ba72d5c84172819e13385aaf916e237cf111ab868 \
+            /tmp/rustfs-init.sh
 
       - name: Build App
         run: |
@@ -238,8 +225,14 @@ jobs:
         if: failure()
         with:
           name: app-logs
+          if-no-files-found: ignore
           path: app.log
 
       - name: Output App Logs
         if: failure()
-        run: cat app.log
+        run: |
+          if [ -f app.log ]; then
+            cat app.log
+          else
+            echo "app.log not found because the Run App step did not execute or failed before log creation."
+          fi

.github/workflows/lint.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20.x
 
@@ -29,10 +29,17 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: Create .env
-        run: pnpm dev:setup
+      - name: create .env
+        run: cp .env.example .env
+
+      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+        run: |
+          RANDOM_KEY=$(openssl rand -hex 32)
+          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
 
       - name: Lint
         run: pnpm lint

.github/workflows/sonarqube.yml

@@ -25,7 +25,7 @@ jobs:
           fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
 
       - name: Setup Node.js 22.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -33,13 +33,17 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: Create .env
-        run: pnpm dev:setup
+      - name: create .env
+        run: cp .env.example .env
 
-      - name: Adjust CI-specific env values
+      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
         run: |
+          RANDOM_KEY=$(openssl rand -hex 32)
+          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=|" .env
 
       - name: Run tests with coverage

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20.x
 
@@ -30,13 +30,17 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: Create .env
-        run: pnpm dev:setup
+      - name: create .env
+        run: cp .env.example .env
 
-      - name: Adjust CI-specific env values
+      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
         run: |
+          RANDOM_KEY=$(openssl rand -hex 32)
+          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
+          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
+          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=|" .env
 
       - name: Test

.github/workflows/translation-check.yml

@@ -2,6 +2,7 @@ name: Translation Validation
 
 permissions:
   contents: read
+  pull-requests: read
 
 on:
   pull_request:
@@ -39,7 +40,7 @@ jobs:
 
       - name: Setup Node.js 22.x
         if: steps.changes.outputs.translations == 'true'
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -49,7 +50,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.changes.outputs.translations == 'true'
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: Validate translation keys
         if: steps.changes.outputs.translations == 'true'

AGENTS.md

@@ -32,7 +32,6 @@ The `@formbricks/surveys` package is pre-compiled (Vite → UMD + ESM) and the b
 
 TypeScript, React, and Prisma are the primary languages. Use the shared ESLint presets (`@formbricks/eslint-config`) and Prettier preset (110-char width, semicolons, double quotes, sorted import groups). Two-space indentation is standard; prefer `PascalCase` for React components and folders under `modules/`, `camelCase` for functions/variables, and `SCREAMING_SNAKE_CASE` only for constants. When adding mocks, place them inside `__mocks__` so import ordering stays stable.
 We are using SonarQube to identify code smells and security hotspots.
-Always mark React component props as `Readonly<>` (e.g., `({ children }: Readonly<MyProps>)`).
 
 ## Architecture & Patterns
 

apps/storybook/package.json

@@ -11,19 +11,19 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
-    "@storybook/addon-a11y": "10.2.17",
-    "@storybook/addon-links": "10.2.17",
-    "@storybook/addon-onboarding": "10.2.17",
-    "@storybook/react-vite": "10.2.17",
-    "@typescript-eslint/eslint-plugin": "8.57.0",
-    "@tailwindcss/vite": "4.2.1",
-    "@typescript-eslint/parser": "8.57.0",
+    "@chromatic-com/storybook": "5.0.2",
+    "@storybook/addon-a11y": "10.3.5",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/addon-onboarding": "10.3.5",
+    "@storybook/react-vite": "10.3.5",
+    "@tailwindcss/vite": "4.2.4",
+    "@typescript-eslint/eslint-plugin": "8.57.2",
+    "@typescript-eslint/parser": "8.57.2",
     "@vitejs/plugin-react": "5.1.4",
     "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.2.17",
-    "storybook": "10.2.17",
-    "vite": "7.3.2",
-    "@storybook/addon-docs": "10.2.17"
+    "eslint-plugin-storybook": "10.3.5",
+    "storybook": "10.3.5",
+    "vite": "7.3.2"
   }
 }

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks.tsx

@@ -4,20 +4,21 @@ import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { TWorkspaceConfigChannel } from "@formbricks/types/workspace";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TProjectConfigChannel } from "@formbricks/types/project";
 import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
 import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";
 
 interface ConnectWithFormbricksProps {
-  workspaceId: string;
+  environment: TEnvironment;
   publicDomain: string;
   appSetupCompleted: boolean;
-  channel: TWorkspaceConfigChannel;
+  channel: TProjectConfigChannel;
 }
 
 export const ConnectWithFormbricks = ({
-  workspaceId,
+  environment,
   publicDomain,
   appSetupCompleted,
   channel,
@@ -25,7 +26,7 @@ export const ConnectWithFormbricks = ({
   const { t } = useTranslation();
   const router = useRouter();
   const handleFinishOnboarding = async () => {
-    router.push(`/workspaces/${workspaceId}/surveys`);
+    router.push(`/environments/${environment.id}/surveys`);
   };
 
   useEffect(() => {
@@ -47,7 +48,7 @@ export const ConnectWithFormbricks = ({
       <div className="flex w-full space-x-10">
         <div className="flex w-1/2 flex-col space-y-4">
           <OnboardingSetupInstructions
-            workspaceId={workspaceId}
+            environmentId={environment.id}
             publicDomain={publicDomain}
             channel={channel}
             appSetupCompleted={appSetupCompleted}
@@ -60,9 +61,9 @@ export const ConnectWithFormbricks = ({
           )}>
           {appSetupCompleted ? (
             <div>
-              <p className="text-3xl">{t("workspace.connect.congrats")}</p>
+              <p className="text-3xl">{t("environments.connect.congrats")}</p>
               <p className="pt-4 text-sm font-medium text-slate-600">
-                {t("workspace.connect.connection_successful_message")}
+                {t("environments.connect.connection_successful_message")}
               </p>
             </div>
           ) : (
@@ -72,7 +73,7 @@ export const ConnectWithFormbricks = ({
                 <span className="relative inline-flex h-10 w-10 rounded-full bg-slate-500"></span>
               </span>
               <p className="pt-4 text-sm font-medium text-slate-600">
-                {t("workspace.connect.waiting_for_your_signal")}
+                {t("environments.connect.waiting_for_your_signal")}
               </p>
             </div>
           )}
@@ -82,7 +83,9 @@ export const ConnectWithFormbricks = ({
         id="finishOnboarding"
         variant={appSetupCompleted ? "default" : "ghost"}
         onClick={handleFinishOnboarding}>
-        {appSetupCompleted ? t("workspace.connect.finish_onboarding") : t("workspace.connect.do_it_later")}
+        {appSetupCompleted
+          ? t("environments.connect.finish_onboarding")
+          : t("environments.connect.do_it_later")}
         <ArrowRight />
       </Button>
     </div>

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx

@@ -5,7 +5,7 @@ import "prismjs/themes/prism.css";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { TWorkspaceConfigChannel } from "@formbricks/types/workspace";
+import { TProjectConfigChannel } from "@formbricks/types/project";
 import { Button } from "@/modules/ui/components/button";
 import { CodeBlock } from "@/modules/ui/components/code-block";
 import { Html5Icon, NpmIcon } from "@/modules/ui/components/icons";
@@ -17,14 +17,14 @@ const tabs = [
 ];
 
 interface OnboardingSetupInstructionsProps {
-  workspaceId: string;
+  environmentId: string;
   publicDomain: string;
-  channel: TWorkspaceConfigChannel;
+  channel: TProjectConfigChannel;
   appSetupCompleted: boolean;
 }
 
 export const OnboardingSetupInstructions = ({
-  workspaceId,
+  environmentId,
   publicDomain,
   channel,
   appSetupCompleted,
@@ -35,8 +35,8 @@ export const OnboardingSetupInstructions = ({
   <script type="text/javascript">
   !function(){
       var appUrl = "${publicDomain}";
-      var workspaceId = "${workspaceId}";
-      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({workspaceId:workspaceId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
+      var environmentId = "${environmentId}";
+      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
@@ -45,46 +45,46 @@ export const OnboardingSetupInstructions = ({
   <script type="text/javascript">
   !function(){
     var appUrl = "${publicDomain}";
-    var workspaceId = "${workspaceId}";
-    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({workspaceId:workspaceId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
+    var environmentId = "${environmentId}";
+    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
 
   const npmSnippetForAppSurveys = `
   import formbricks from "@formbricks/js";
-
+  
   if (typeof window !== "undefined") {
     formbricks.setup({
-      workspaceId: "${workspaceId}",
+      environmentId: "${environmentId}",
       appUrl: "${publicDomain}",
     });
   }
-
+  
   function App() {
     // your own app
   }
-
+  
   export default App;
   `;
 
   const npmSnippetForWebsiteSurveys = `
   // other imports
   import formbricks from "@formbricks/js";
-
+  
   if (typeof window !== "undefined") {
     formbricks.setup({
-      workspaceId: "${workspaceId}",
+      environmentId: "${environmentId}",
       appUrl: "${publicDomain}",
     });
   }
-
+  
   function App() {
     // your own app
   }
-
+  
   export default App;
-
+  
   `;
 
   return (
@@ -109,7 +109,7 @@ export const OnboardingSetupInstructions = ({
               yarn add @formbricks/js
             </CodeBlock>
             <p className="text-sm text-slate-700">
-              {t("workspace.connect.import_formbricks_and_initialize_the_widget_in_your_component")}
+              {t("environments.connect.import_formbricks_and_initialize_the_widget_in_your_component")}
             </p>
             <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
               {channel === "app" ? npmSnippetForAppSurveys : npmSnippetForWebsiteSurveys}
@@ -126,7 +126,7 @@ export const OnboardingSetupInstructions = ({
         ) : activeTab === "html" ? (
           <div className="prose prose-slate">
             <p className="-mb-1 mt-6 text-sm text-slate-700">
-              {t("workspace.connect.insert_this_code_into_the_head_tag_of_your_website")}
+              {t("environments.connect.insert_this_code_into_the_head_tag_of_your_website")}
             </p>
             <div>
               <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -1,50 +1,56 @@
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { ResourceNotFoundError } from "@formbricks/types/errors";
-import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/workspaces/[workspaceId]/connect/components/ConnectWithFormbricks";
+import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
+import { getEnvironment } from "@/lib/environment/service";
 import { getPublicDomain } from "@/lib/getPublicUrl";
-import { getWorkspace } from "@/lib/workspace/service";
+import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 
 interface ConnectPageProps {
   params: Promise<{
-    workspaceId: string;
+    environmentId: string;
   }>;
 }
 
 const Page = async (props: ConnectPageProps) => {
   const params = await props.params;
   const t = await getTranslate();
+  const environment = await getEnvironment(params.environmentId);
 
-  const workspace = await getWorkspace(params.workspaceId);
-  if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), params.workspaceId);
+  if (!environment) {
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
   }
 
-  const channel = workspace.config.channel || null;
+  const project = await getProjectByEnvironmentId(environment.id);
+  if (!project) {
+    throw new ResourceNotFoundError(t("common.workspace"), null);
+  }
+
+  const channel = project.config.channel || null;
 
   const publicDomain = getPublicDomain();
 
   return (
     <div className="flex min-h-full flex-col items-center justify-center py-10">
-      <Header title={t("workspace.connect.headline")} subtitle={t("workspace.connect.subtitle")} />
+      <Header title={t("environments.connect.headline")} subtitle={t("environments.connect.subtitle")} />
       <div className="space-y-4 text-center">
         <p className="text-4xl font-medium text-slate-800"></p>
         <p className="text-sm text-slate-500"></p>
       </div>
       <ConnectWithFormbricks
-        workspaceId={params.workspaceId}
+        environment={environment}
         publicDomain={publicDomain}
-        appSetupCompleted={workspace.appSetupCompleted}
+        appSetupCompleted={environment.appSetupCompleted}
         channel={channel}
       />
       <Button
         className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
-        <Link href={`/workspaces/${params.workspaceId}`}>
+        <Link href={`/environments/${environment.id}`}>
           <XIcon className="h-7 w-7" strokeWidth={1.5} />
         </Link>
       </Button>

apps/web/app/(app)/(onboarding)/environments/[environmentId]/layout.tsx

@@ -1,11 +1,11 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { AuthorizationError } from "@formbricks/types/errors";
-import { hasUserWorkspaceAccess } from "@/lib/workspace/auth";
+import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
 const OnboardingLayout = async (props: {
-  params: Promise<{ workspaceId: string }>;
+  params: Promise<{ environmentId: string }>;
   children: React.ReactNode;
 }) => {
   const params = await props.params;
@@ -17,9 +17,9 @@ const OnboardingLayout = async (props: {
     return redirect(`/auth/login`);
   }
 
-  const isAuthorized = await hasUserWorkspaceAccess(session.user.id, params.workspaceId);
+  const isAuthorized = await hasUserEnvironmentAccess(session.user.id, params.environmentId);
   if (!isAuthorized) {
-    throw new AuthorizationError("User is not authorized to access this workspace");
+    throw new AuthorizationError("User is not authorized to access this environment");
   }
 
   return <div className="flex-1 bg-slate-50">{children}</div>;

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList.tsx

@@ -5,23 +5,23 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { TProject } from "@formbricks/types/project";
 import { TSurveyCreateInput } from "@formbricks/types/surveys/types";
 import { TXMTemplate } from "@formbricks/types/templates";
 import { TUser } from "@formbricks/types/user";
-import { TWorkspace } from "@formbricks/types/workspace";
+import { replacePresetPlaceholders } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils";
+import { getXMTemplates } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates";
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { replacePresetPlaceholders } from "@/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/lib/utils";
-import { getXMTemplates } from "@/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/lib/xm-templates";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { createSurveyAction } from "@/modules/survey/components/template-list/actions";
 
 interface XMTemplateListProps {
-  workspace: TWorkspace;
+  project: TProject;
   user: TUser;
-  workspaceId: string;
+  environmentId: string;
 }
 
-export const XMTemplateList = ({ workspace, user, workspaceId }: XMTemplateListProps) => {
+export const XMTemplateList = ({ project, user, environmentId }: XMTemplateListProps) => {
   const [activeTemplateId, setActiveTemplateId] = useState<number | null>(null);
   const { t } = useTranslation();
   const router = useRouter();
@@ -33,12 +33,12 @@ export const XMTemplateList = ({ workspace, user, workspaceId }: XMTemplateListP
       createdBy: user.id,
     };
     const createSurveyResponse = await createSurveyAction({
-      workspaceId: workspaceId,
+      environmentId: environmentId,
       surveyBody: augmentedTemplate,
     });
 
     if (createSurveyResponse?.data) {
-      router.push(`/workspaces/${workspaceId}/surveys/${createSurveyResponse.data.id}/edit?mode=cx`);
+      router.push(`/environments/${environmentId}/surveys/${createSurveyResponse.data.id}/edit?mode=cx`);
     } else {
       const errorMessage = getFormattedErrorMessage(createSurveyResponse);
       toast.error(errorMessage);
@@ -48,49 +48,49 @@ export const XMTemplateList = ({ workspace, user, workspaceId }: XMTemplateListP
   const handleTemplateClick = (templateIdx: number) => {
     setActiveTemplateId(templateIdx);
     const template = getXMTemplates(t)[templateIdx];
-    const newTemplate = replacePresetPlaceholders(template, workspace);
+    const newTemplate = replacePresetPlaceholders(template, project);
     createSurvey(newTemplate);
   };
 
   const XMTemplateOptions = [
     {
-      title: t("workspace.xm-templates.nps"),
-      description: t("workspace.xm-templates.nps_description"),
+      title: t("environments.xm-templates.nps"),
+      description: t("environments.xm-templates.nps_description"),
       icon: ShoppingCartIcon,
       onClick: () => handleTemplateClick(0),
       isLoading: activeTemplateId === 0,
     },
     {
-      title: t("workspace.xm-templates.five_star_rating"),
-      description: t("workspace.xm-templates.five_star_rating_description"),
+      title: t("environments.xm-templates.five_star_rating"),
+      description: t("environments.xm-templates.five_star_rating_description"),
       icon: StarIcon,
       onClick: () => handleTemplateClick(1),
       isLoading: activeTemplateId === 1,
     },
     {
-      title: t("workspace.xm-templates.csat"),
-      description: t("workspace.xm-templates.csat_description"),
+      title: t("environments.xm-templates.csat"),
+      description: t("environments.xm-templates.csat_description"),
       icon: ThumbsUpIcon,
       onClick: () => handleTemplateClick(2),
       isLoading: activeTemplateId === 2,
     },
     {
-      title: t("workspace.xm-templates.ces"),
-      description: t("workspace.xm-templates.ces_description"),
+      title: t("environments.xm-templates.ces"),
+      description: t("environments.xm-templates.ces_description"),
       icon: ActivityIcon,
       onClick: () => handleTemplateClick(3),
       isLoading: activeTemplateId === 3,
     },
     {
-      title: t("workspace.xm-templates.smileys"),
-      description: t("workspace.xm-templates.smileys_description"),
+      title: t("environments.xm-templates.smileys"),
+      description: t("environments.xm-templates.smileys_description"),
       icon: SmileIcon,
       onClick: () => handleTemplateClick(4),
       isLoading: activeTemplateId === 4,
     },
     {
-      title: t("workspace.xm-templates.enps"),
-      description: t("workspace.xm-templates.enps_description"),
+      title: t("environments.xm-templates.enps"),
+      description: t("environments.xm-templates.enps_description"),
       icon: UsersIcon,
       onClick: () => handleTemplateClick(5),
       isLoading: activeTemplateId === 5,

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils.test.ts

@@ -1,17 +1,17 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
+import { TProject } from "@formbricks/types/project";
 import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/constants";
 import { TXMTemplate } from "@formbricks/types/templates";
-import { TWorkspace } from "@formbricks/types/workspace";
 import { replacePresetPlaceholders } from "./utils";
 
 // Mock data
-const mockWorkspace: TWorkspace = {
-  id: "workspace1",
+const mockProject: TProject = {
+  id: "project1",
   createdAt: new Date(),
   updatedAt: new Date(),
-  name: "Test Workspace",
+  name: "Test Project",
   organizationId: "org1",
   styling: {
     allowStyleOverwrite: true,
@@ -27,12 +27,12 @@ const mockWorkspace: TWorkspace = {
   placement: "bottomRight",
   clickOutsideClose: true,
   overlay: "none",
-  appSetupCompleted: false,
+  environments: [],
   languages: [],
   logo: null,
 };
 const mockTemplate: TXMTemplate = {
-  name: "$[workspaceName] Survey",
+  name: "$[projectName] Survey",
   blocks: [
     {
       id: "block1",
@@ -42,7 +42,7 @@ const mockTemplate: TXMTemplate = {
           id: "q1",
           type: "openText" as TSurveyElementTypeEnum.OpenText,
           inputType: "text" as const,
-          headline: { default: "$[workspaceName] Question" },
+          headline: { default: "$[projectName] Question" },
           subheader: { default: "" },
           required: false,
           placeholder: { default: "" },
@@ -60,8 +60,8 @@ const mockTemplate: TXMTemplate = {
   ],
   styling: {
     brandColor: { light: "#0000FF" },
-    elementHeadlineColor: { light: "#00FF00" },
-    inputBgColor: { light: "#FF0000" },
+    questionColor: { light: "#00FF00" },
+    inputColor: { light: "#FF0000" },
   },
 };
 
@@ -70,19 +70,19 @@ describe("replacePresetPlaceholders", () => {
     cleanup();
   });
 
-  test("replaces workspaceName placeholder in template name", () => {
-    const result = replacePresetPlaceholders(mockTemplate, mockWorkspace);
-    expect(result.name).toBe("Test Workspace Survey");
+  test("replaces projectName placeholder in template name", () => {
+    const result = replacePresetPlaceholders(mockTemplate, mockProject);
+    expect(result.name).toBe("Test Project Survey");
   });
 
-  test("replaces workspaceName placeholder in element headline", () => {
-    const result = replacePresetPlaceholders(mockTemplate, mockWorkspace);
-    expect(result.blocks[0].elements[0].headline.default).toBe("Test Workspace Question");
+  test("replaces projectName placeholder in element headline", () => {
+    const result = replacePresetPlaceholders(mockTemplate, mockProject);
+    expect(result.blocks[0].elements[0].headline.default).toBe("Test Project Question");
   });
 
   test("returns a new object without mutating the original template", () => {
     const originalTemplate = structuredClone(mockTemplate);
-    const result = replacePresetPlaceholders(mockTemplate, mockWorkspace);
+    const result = replacePresetPlaceholders(mockTemplate, mockProject);
     expect(result).not.toBe(mockTemplate);
     expect(mockTemplate).toEqual(originalTemplate);
   });

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils.ts

@@ -1,16 +1,16 @@
+import { TProject } from "@formbricks/types/project";
 import { TSurveyBlock } from "@formbricks/types/surveys/blocks";
 import { TXMTemplate } from "@formbricks/types/templates";
-import { TWorkspace } from "@formbricks/types/workspace";
 import { replaceElementPresetPlaceholders } from "@/lib/utils/templates";
 
-// replace all occurences of workspaceName with the actual workspace name in the current template
-export const replacePresetPlaceholders = (template: TXMTemplate, workspace: TWorkspace): TXMTemplate => {
+// replace all occurences of projectName with the actual project name in the current template
+export const replacePresetPlaceholders = (template: TXMTemplate, project: TProject): TXMTemplate => {
   const survey = structuredClone(template);
 
   const modifiedBlocks = survey.blocks.map((block: TSurveyBlock) => ({
     ...block,
-    elements: block.elements.map((element) => replaceElementPresetPlaceholders(element, workspace)),
+    elements: block.elements.map((element) => replaceElementPresetPlaceholders(element, project)),
   }));
 
-  return { ...survey, name: survey.name.replace("$[workspaceName]", workspace.name), blocks: modifiedBlocks };
+  return { ...survey, name: survey.name.replace("$[projectName]", project.name), blocks: modifiedBlocks };
 };

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx

@@ -2,9 +2,11 @@ import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Link from "next/link";
 import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { XMTemplateList } from "@/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/components/XMTemplateList";
+import { XMTemplateList } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList";
+import { getEnvironment } from "@/lib/environment/service";
+import { getProjectByEnvironmentId, getUserProjects } from "@/lib/project/service";
 import { getUser } from "@/lib/user/service";
-import { getUserWorkspaces, getWorkspace } from "@/lib/workspace/service";
+import { getOrganizationIdFromEnvironmentId } from "@/lib/utils/helper";
 import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { Button } from "@/modules/ui/components/button";
@@ -12,15 +14,15 @@ import { Header } from "@/modules/ui/components/header";
 
 interface XMTemplatePageProps {
   params: Promise<{
-    workspaceId: string;
+    environmentId: string;
   }>;
 }
 
 const Page = async (props: XMTemplatePageProps) => {
   const params = await props.params;
   const session = await getServerSession(authOptions);
+  const environment = await getEnvironment(params.environmentId);
   const t = await getTranslate();
-
   if (!session) {
     throw new AuthenticationError(t("common.not_authenticated"));
   }
@@ -29,24 +31,29 @@ const Page = async (props: XMTemplatePageProps) => {
   if (!user) {
     throw new AuthenticationError(t("common.not_authenticated"));
   }
-
-  const workspace = await getWorkspace(params.workspaceId);
-  if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), params.workspaceId);
+  if (!environment) {
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
   }
 
-  const workspaces = await getUserWorkspaces(session.user.id, workspace.organizationId);
+  const organizationId = await getOrganizationIdFromEnvironmentId(environment.id);
+
+  const project = await getProjectByEnvironmentId(environment.id);
+  if (!project) {
+    throw new ResourceNotFoundError(t("common.workspace"), null);
+  }
+
+  const projects = await getUserProjects(session.user.id, organizationId);
 
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
-      <Header title={t("workspace.xm-templates.headline")} />
-      <XMTemplateList workspace={workspace} user={user} workspaceId={params.workspaceId} />
-      {workspaces.length >= 2 && (
+      <Header title={t("environments.xm-templates.headline")} />
+      <XMTemplateList project={project} user={user} environmentId={environment.id} />
+      {projects.length >= 2 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
-          <Link href={`/workspaces/${params.workspaceId}/surveys`}>
+          <Link href={`/environments/${environment.id}/surveys`}>
             <XIcon className="h-7 w-7" strokeWidth={1.5} />
           </Link>
         </Button>

apps/web/app/(app)/(onboarding)/lib/onboarding.test.ts

@@ -1,4 +1,4 @@
-import { Prisma } from "@prisma/client";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
 import { DatabaseError } from "@formbricks/types/errors";
@@ -32,7 +32,7 @@ describe("getTeamsByOrganizationId", () => {
 
   test("throws DatabaseError on Prisma error", async () => {
     vi.mocked(prisma.team.findMany).mockRejectedValueOnce(
-      new Prisma.PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
+      new PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
     );
     await expect(getTeamsByOrganizationId("org1")).rejects.toThrow(DatabaseError);
   });

apps/web/app/(app)/(onboarding)/lib/onboarding.ts

@@ -1,6 +1,6 @@
 "use server";
 
-import { Prisma } from "@prisma/client";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
 import { ZId } from "@formbricks/types/common";
@@ -27,7 +27,7 @@ export const getTeamsByOrganizationId = reactCache(
         name: team.name,
       }));
     } catch (error) {
-      if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      if (error instanceof PrismaClientKnownRequestError) {
         throw new DatabaseError(error.message);
       }
 

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx

@@ -1,32 +1,20 @@
 "use client";
 
-import {
-  ArrowUpRightIcon,
-  Building2Icon,
-  ChevronRightIcon,
-  Loader2,
-  LogOutIcon,
-  PlusIcon,
-} from "lucide-react";
+import { ArrowUpRightIcon, ChevronRightIcon, LogOutIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState, useTransition } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
-import { getOrganizationsForSwitcherAction } from "@/app/(app)/workspaces/[workspaceId]/actions";
 import FBLogo from "@/images/formbricks-wordmark.svg";
 import { cn } from "@/lib/cn";
-import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
@@ -34,65 +22,14 @@ import {
 interface LandingSidebarProps {
   user: TUser;
   organization: TOrganization;
-  isMultiOrgEnabled: boolean;
 }
 
-export const LandingSidebar = ({ user, organization, isMultiOrgEnabled }: LandingSidebarProps) => {
-  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
-  const [organizations, setOrganizations] = useState<{ id: string; name: string }[]>([]);
-  const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
-  const [organizationLoadError, setOrganizationLoadError] = useState<string | null>(null);
-  const [isOrgDropdownOpen, setIsOrgDropdownOpen] = useState(false);
-  const [isPending, startTransition] = useTransition();
-  const router = useRouter();
+export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
+  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState<boolean>(false);
 
   const { t } = useTranslation();
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
-  const loadOrganizations = useCallback(async () => {
-    setIsLoadingOrganizations(true);
-    setOrganizationLoadError(null);
-    try {
-      const result = await getOrganizationsForSwitcherAction({ organizationId: organization.id });
-      if (result?.data) {
-        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
-        setOrganizations(sorted);
-      } else {
-        setOrganizationLoadError(
-          getFormattedErrorMessage(result) || t("common.failed_to_load_organizations")
-        );
-      }
-    } catch {
-      setOrganizationLoadError(t("common.failed_to_load_organizations"));
-    } finally {
-      setIsLoadingOrganizations(false);
-    }
-  }, [organization.id, t]);
-
-  useEffect(() => {
-    if (
-      isOrgDropdownOpen &&
-      organizations.length === 0 &&
-      !isLoadingOrganizations &&
-      !organizationLoadError
-    ) {
-      loadOrganizations();
-    }
-  }, [
-    isOrgDropdownOpen,
-    organizations.length,
-    isLoadingOrganizations,
-    organizationLoadError,
-    loadOrganizations,
-  ]);
-
-  const handleOrganizationChange = (orgId: string) => {
-    startTransition(() => {
-      setIsOrgDropdownOpen(false);
-      router.push(`/organizations/${orgId}/`);
-    });
-  };
-
   const dropdownNavigation = [
     {
       label: t("common.documentation"),
@@ -102,109 +39,52 @@ export const LandingSidebar = ({ user, organization, isMultiOrgEnabled }: Landin
     },
   ];
 
-  const switcherTriggerClasses =
-    "w-full border-t px-3 py-3 text-left transition-colors duration-200 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-inset";
-  const switcherIconClasses =
-    "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600";
-
   return (
     <aside
       className={cn(
         "z-40 flex w-sidebar-collapsed flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100"
       )}>
-      <Image src={FBLogo} width={160} height={30} alt={t("workspace.formbricks_logo")} />
+      <Image src={FBLogo} width={160} height={30} alt={t("environments.formbricks_logo")} />
 
-      <div className="flex flex-col">
-        {/* Organization Switcher */}
-        <DropdownMenu onOpenChange={setIsOrgDropdownOpen}>
-          <DropdownMenuTrigger asChild className={switcherTriggerClasses}>
-            <button type="button" className="flex w-full items-center gap-3">
-              <span className={switcherIconClasses}>
-                <Building2Icon className="h-4 w-4" strokeWidth={1.5} />
-              </span>
-              <div className="grow overflow-hidden">
-                <p className="truncate text-sm font-bold text-slate-700">{organization.name}</p>
-                <p className="text-sm text-slate-500">{t("common.organization")}</p>
-              </div>
-              {isPending && <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />}
-              <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
-            <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-              <Building2Icon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-              {t("common.change_organization")}
-            </div>
-            {isLoadingOrganizations && (
-              <div className="flex items-center justify-center py-2">
-                <Loader2 className="h-4 w-4 animate-spin" />
-              </div>
-            )}
-            {!isLoadingOrganizations && organizationLoadError && (
-              <div className="px-2 py-4">
-                <p className="mb-2 text-sm text-red-600">{organizationLoadError}</p>
-                <button
-                  onClick={() => {
-                    setOrganizationLoadError(null);
-                    setOrganizations([]);
-                  }}
-                  className="text-xs text-slate-600 underline hover:text-slate-800">
-                  {t("common.try_again")}
-                </button>
-              </div>
-            )}
-            {!isLoadingOrganizations && !organizationLoadError && (
-              <>
-                <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
-                  {organizations.map((org) => (
-                    <DropdownMenuCheckboxItem
-                      key={org.id}
-                      checked={org.id === organization.id}
-                      onClick={() => handleOrganizationChange(org.id)}
-                      className="cursor-pointer">
-                      {org.name}
-                    </DropdownMenuCheckboxItem>
-                  ))}
-                </DropdownMenuGroup>
-                {isMultiOrgEnabled && (
-                  <DropdownMenuCheckboxItem
-                    onClick={() => setOpenCreateOrganizationModal(true)}
-                    className="w-full cursor-pointer justify-between">
-                    <span>{t("common.create_new_organization")}</span>
-                    <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
-                  </DropdownMenuCheckboxItem>
-                )}
-              </>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        {/* User Dropdown */}
+      <div className="flex items-center">
         <DropdownMenu>
           <DropdownMenuTrigger
             asChild
             id="userDropdownTrigger"
-            className={cn(switcherTriggerClasses, "rounded-br-xl")}>
-            <button type="button" className="flex w-full items-center gap-3">
-              <span className={switcherIconClasses}>
-                <ProfileAvatar userId={user.id} />
-              </span>
+            className="w-full rounded-br-xl border-t p-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+            <button
+              type="button"
+              className={cn("flex w-full cursor-pointer flex-row items-center gap-3 text-left")}
+              aria-haspopup="menu">
+              <ProfileAvatar userId={user.id} />
               <div className="grow overflow-hidden">
                 <p
                   title={user?.email}
-                  className="ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700">
+                  className={cn(
+                    "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
+                  )}>
                   {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
                 </p>
-                <p className="text-sm text-slate-500">{t("common.account")}</p>
+                <p title={organization?.name} className="truncate text-sm text-slate-500">
+                  {organization?.name}
+                </p>
               </div>
-              <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+              <ChevronRightIcon className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")} />
             </button>
           </DropdownMenuTrigger>
 
-          <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+          <DropdownMenuContent
+            id="userDropdownInnerContentWrapper"
+            side="right"
+            sideOffset={10}
+            alignOffset={5}
+            align="end">
+            {/* Dropdown Items */}
+
             {dropdownNavigation.map((link) => (
               <Link
                 key={link.href}
+                id={link.href}
                 href={link.href}
                 target={link.target}
                 rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
@@ -215,6 +95,8 @@ export const LandingSidebar = ({ user, organization, isMultiOrgEnabled }: Landin
                 </DropdownMenuItem>
               </Link>
             ))}
+
+            {/* Logout */}
             <DropdownMenuItem
               onClick={async () => {
                 await signOutWithAudit({
@@ -223,6 +105,7 @@ export const LandingSidebar = ({ user, organization, isMultiOrgEnabled }: Landin
                   organizationId: organization.id,
                   redirect: true,
                   callbackUrl: "/auth/login",
+                  clearEnvironmentId: true,
                 });
               }}
               icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
@@ -231,7 +114,6 @@ export const LandingSidebar = ({ user, organization, isMultiOrgEnabled }: Landin
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-
       <CreateOrganizationModal open={openCreateOrganizationModal} setOpen={setOpenCreateOrganizationModal} />
     </aside>
   );

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/layout.tsx

@@ -1,7 +1,8 @@
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
+import { getEnvironments } from "@/lib/environment/service";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getUserWorkspaces } from "@/lib/workspace/service";
+import { getUserProjects } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
 const LandingLayout = async (props: {
@@ -23,11 +24,16 @@ const LandingLayout = async (props: {
     return notFound();
   }
 
-  const workspaces = await getUserWorkspaces(session.user.id, params.organizationId);
+  const projects = await getUserProjects(session.user.id, params.organizationId);
 
-  if (workspaces.length !== 0) {
-    const firstWorkspace = workspaces[0];
-    return redirect(`/workspaces/${firstWorkspace.id}/`);
+  if (projects.length !== 0) {
+    const firstProject = projects[0];
+    const environments = await getEnvironments(firstProject.id);
+    const prodEnvironment = environments.find((e) => e.type === "production");
+
+    if (prodEnvironment) {
+      return redirect(`/environments/${prodEnvironment.id}/`);
+    }
   }
 
   return <>{children}</>;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/page.tsx

@@ -1,8 +1,9 @@
 import { notFound, redirect } from "next/navigation";
 import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar";
-import { WorkspaceAndOrgSwitch } from "@/app/(app)/workspaces/[workspaceId]/components/workspace-and-org-switch";
+import { ProjectAndOrgSwitch } from "@/app/(app)/environments/[environmentId]/components/project-and-org-switch";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
+import { getAccessFlags } from "@/lib/membership/utils";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
@@ -25,25 +26,29 @@ const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
 
   const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
+  const { isMember, isBilling } = getAccessFlags(membership?.role);
   const isMembershipPending = membership?.role === undefined;
 
   return (
     <div className="flex min-h-full min-w-full flex-row">
-      <LandingSidebar user={user} organization={organization} isMultiOrgEnabled={isMultiOrgEnabled} />
+      <LandingSidebar user={user} organization={organization} />
       <div className="flex-1">
         <div className="flex h-full flex-col">
           <div className="p-6">
-            {/* we only need to render organization breadcrumb on this page, organizations/workspaces are lazy-loaded */}
-            <WorkspaceAndOrgSwitch
+            {/* we only need to render organization breadcrumb on this page, organizations/projects are lazy-loaded */}
+            <ProjectAndOrgSwitch
               currentOrganizationId={organization.id}
               currentOrganizationName={organization.name}
               isMultiOrgEnabled={isMultiOrgEnabled}
-              organizationWorkspacesLimit={0}
+              organizationProjectsLimit={0}
               isFormbricksCloud={IS_FORMBRICKS_CLOUD}
               isLicenseActive={false}
               isOwnerOrManager={false}
               isAccessControlAllowed={false}
+              isMember={isMember}
+              isBilling={isBilling}
               isMembershipPending={isMembershipPending}
+              environments={[]}
             />
           </div>
           <div className="flex h-full flex-col items-center justify-center space-y-12">

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/layout.tsx

@@ -8,7 +8,7 @@ import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ToasterClient } from "@/modules/ui/components/toaster-client";
 
-const WorkspaceOnboardingLayout = async (props: {
+const ProjectOnboardingLayout = async (props: {
   params: Promise<{ organizationId: string }>;
   children: React.ReactNode;
 }) => {
@@ -47,4 +47,4 @@ const WorkspaceOnboardingLayout = async (props: {
   );
 };
 
-export default WorkspaceOnboardingLayout;
+export default ProjectOnboardingLayout;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/channel/page.tsx

@@ -2,7 +2,7 @@ import { PictureInPicture2Icon, SendIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { getUserWorkspaces } from "@/lib/workspace/service";
+import { getUserProjects } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
@@ -39,7 +39,7 @@ const Page = async (props: ChannelPageProps) => {
     },
   ];
 
-  const workspaces = await getUserWorkspaces(session.user.id, params.organizationId);
+  const projects = await getUserProjects(session.user.id, params.organizationId);
 
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
@@ -48,7 +48,7 @@ const Page = async (props: ChannelPageProps) => {
         subtitle={t("organizations.workspaces.new.channel.channel_select_subtitle")}
       />
       <OnboardingOptionsContainer options={channelOptions} />
-      {workspaces.length >= 1 && (
+      {projects.length >= 1 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/layout.tsx

@@ -4,10 +4,10 @@ import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getOrganization } from "@/lib/organization/service";
-import { getOrganizationWorkspacesCount } from "@/lib/workspace/service";
+import { getOrganizationProjectsCount } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
-import { getOrganizationWorkspacesLimit } from "@/modules/ee/license-check/lib/utils";
+import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 
 const OnboardingLayout = async (props: {
   params: Promise<{ organizationId: string }>;
@@ -32,12 +32,12 @@ const OnboardingLayout = async (props: {
     throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
   }
 
-  const [organizationWorkspacesLimit, organizationWorkspacesCount] = await Promise.all([
-    getOrganizationWorkspacesLimit(organization.id),
-    getOrganizationWorkspacesCount(organization.id),
+  const [organizationProjectsLimit, organizationProjectsCount] = await Promise.all([
+    getOrganizationProjectsLimit(organization.id),
+    getOrganizationProjectsCount(organization.id),
   ]);
 
-  if (organizationWorkspacesCount >= organizationWorkspacesLimit) {
+  if (organizationProjectsCount >= organizationProjectsLimit) {
     return redirect(`/`);
   }
 

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/mode/page.tsx

@@ -2,7 +2,7 @@ import { HeartIcon, ListTodoIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { getUserWorkspaces } from "@/lib/workspace/service";
+import { getUserProjects } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
@@ -39,13 +39,13 @@ const Page = async (props: ModePageProps) => {
     },
   ];
 
-  const workspaces = await getUserWorkspaces(session.user.id, params.organizationId);
+  const projects = await getUserProjects(session.user.id, params.organizationId);
 
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header title={t("organizations.workspaces.new.mode.what_are_you_here_for")} />
       <OnboardingOptionsContainer options={channelOptions} />
-      {workspaces.length >= 1 && (
+      {projects.length >= 1 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/plan/components/select-plan-onboarding.tsx

@@ -13,8 +13,8 @@ export const SelectPlanOnboarding = async ({ organizationId }: SelectPlanOnboard
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-8">
       <Header
-        title={t("workspace.settings.billing.select_plan_header_title")}
-        subtitle={t("workspace.settings.billing.select_plan_header_subtitle")}
+        title={t("environments.settings.billing.select_plan_header_title")}
+        subtitle={t("environments.settings.billing.select_plan_header_subtitle")}
       />
       <SelectPlanCard nextUrl={nextUrl} organizationId={organizationId} />
     </div>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/ProjectSettings.tsx

@@ -8,19 +8,19 @@ import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import {
-  TWorkspaceConfigChannel,
-  TWorkspaceConfigIndustry,
-  TWorkspaceMode,
-  TWorkspaceUpdateInput,
-  ZWorkspaceUpdateInput,
-} from "@formbricks/types/workspace";
-import { createWorkspaceAction } from "@/app/(app)/workspaces/[workspaceId]/actions";
+  TProjectConfigChannel,
+  TProjectConfigIndustry,
+  TProjectMode,
+  TProjectUpdateInput,
+  ZProjectUpdateInput,
+} from "@formbricks/types/project";
+import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
 import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
 import { buildStylingFromBrandColor } from "@/lib/styling/constants";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { TOrganizationTeam } from "@/modules/ee/teams/project-teams/types/team";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
-import { TOrganizationTeam } from "@/modules/ee/teams/workspace-teams/types/team";
 import { Button } from "@/modules/ui/components/button";
 import { ColorPicker } from "@/modules/ui/components/color-picker";
 import {
@@ -36,34 +36,34 @@ import { Input } from "@/modules/ui/components/input";
 import { MultiSelect } from "@/modules/ui/components/multi-select";
 import { SurveyInline } from "@/modules/ui/components/survey";
 
-interface WorkspaceSettingsProps {
+interface ProjectSettingsProps {
   organizationId: string;
-  workspaceMode: TWorkspaceMode;
-  channel: TWorkspaceConfigChannel;
-  industry: TWorkspaceConfigIndustry;
+  projectMode: TProjectMode;
+  channel: TProjectConfigChannel;
+  industry: TProjectConfigIndustry;
   defaultBrandColor: string;
   organizationTeams: TOrganizationTeam[];
   isAccessControlAllowed: boolean;
-  userWorkspacesCount: number;
+  userProjectsCount: number;
   publicDomain: string;
 }
 
-export const WorkspaceSettings = ({
+export const ProjectSettings = ({
   organizationId,
-  workspaceMode,
+  projectMode,
   channel,
   industry,
   defaultBrandColor,
   organizationTeams,
   isAccessControlAllowed = false,
-  userWorkspacesCount,
+  userProjectsCount,
   publicDomain,
-}: WorkspaceSettingsProps) => {
+}: ProjectSettingsProps) => {
   const [createTeamModalOpen, setCreateTeamModalOpen] = useState(false);
 
   const router = useRouter();
   const { t } = useTranslation();
-  const addWorkspace = async (data: TWorkspaceUpdateInput) => {
+  const addProject = async (data: TProjectUpdateInput) => {
     try {
       // Build the full styling from the chosen brand color so all derived
       // colours (question, button, input, option, progress, etc.) are persisted.
@@ -71,7 +71,7 @@ export const WorkspaceSettings = ({
       // back to STYLE_DEFAULTS computed from the default brand (#64748b).
       const fullStyling = buildStylingFromBrandColor(data.styling?.brandColor?.light);
 
-      const createWorkspaceResponse = await createWorkspaceAction({
+      const createProjectResponse = await createProjectAction({
         organizationId,
         data: {
           ...data,
@@ -81,21 +81,26 @@ export const WorkspaceSettings = ({
         },
       });
 
-      if (createWorkspaceResponse?.data) {
-        if (globalThis.window !== undefined) {
-          // Remove filters when creating a new workspace
-          localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
+      if (createProjectResponse?.data) {
+        // get production environment
+        const productionEnvironment = createProjectResponse.data.environments.find(
+          (environment) => environment.type === "production"
+        );
+        if (productionEnvironment) {
+          if (globalThis.window !== undefined) {
+            // Rmove filters when creating a new project
+            localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
+          }
         }
-        const workspaceId = createWorkspaceResponse.data.id;
         if (channel === "app" || channel === "website") {
-          router.push(`/workspaces/${workspaceId}/connect`);
+          router.push(`/environments/${productionEnvironment?.id}/connect`);
         } else if (channel === "link") {
-          router.push(`/workspaces/${workspaceId}/surveys`);
-        } else if (workspaceMode === "cx") {
-          router.push(`/workspaces/${workspaceId}/xm-templates`);
+          router.push(`/environments/${productionEnvironment?.id}/surveys`);
+        } else if (projectMode === "cx") {
+          router.push(`/environments/${productionEnvironment?.id}/xm-templates`);
         }
       } else {
-        const errorMessage = getFormattedErrorMessage(createWorkspaceResponse);
+        const errorMessage = getFormattedErrorMessage(createProjectResponse);
         toast.error(errorMessage);
       }
     } catch (error) {
@@ -104,15 +109,15 @@ export const WorkspaceSettings = ({
     }
   };
 
-  const form = useForm<TWorkspaceUpdateInput>({
+  const form = useForm<TProjectUpdateInput>({
     defaultValues: {
       name: "",
       styling: { allowStyleOverwrite: true, brandColor: { light: defaultBrandColor } },
       teamIds: [],
     },
-    resolver: zodResolver(ZWorkspaceUpdateInput),
+    resolver: zodResolver(ZProjectUpdateInput),
   });
-  const workspaceName = form.watch("name");
+  const projectName = form.watch("name");
   const logoUrl = form.watch("logo.url");
   const brandColor = form.watch("styling.brandColor.light") ?? defaultBrandColor;
   const previewStyling = useMemo(() => buildStylingFromBrandColor(brandColor), [brandColor]);
@@ -127,7 +132,7 @@ export const WorkspaceSettings = ({
     <div className="mt-6 flex w-5/6 space-x-10 lg:w-2/3 2xl:w-1/2">
       <div className="flex w-1/2 flex-col space-y-4">
         <FormProvider {...form}>
-          <form onSubmit={form.handleSubmit(addWorkspace)} className="w-full space-y-4">
+          <form onSubmit={form.handleSubmit(addProject)} className="w-full space-y-4">
             <FormField
               control={form.control}
               name="styling.brandColor.light"
@@ -179,7 +184,7 @@ export const WorkspaceSettings = ({
               )}
             />
 
-            {isAccessControlAllowed && userWorkspacesCount > 0 && (
+            {isAccessControlAllowed && userProjectsCount > 0 && (
               <FormField
                 control={form.control}
                 name="teamIds"
@@ -237,7 +242,7 @@ export const WorkspaceSettings = ({
         <SurveyInline
           appUrl={publicDomain}
           isPreviewMode={true}
-          survey={previewSurvey(workspaceName || t("common.my_product"), t)}
+          survey={previewSurvey(projectName || t("common.my_product"), t)}
           styling={previewStyling}
           isBrandingEnabled={false}
           languageCode="default"

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/page.tsx

@@ -2,34 +2,30 @@ import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ResourceNotFoundError } from "@formbricks/types/errors";
-import {
-  TWorkspaceConfigChannel,
-  TWorkspaceConfigIndustry,
-  TWorkspaceMode,
-} from "@formbricks/types/workspace";
+import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
-import { WorkspaceSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/WorkspaceSettings";
+import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/ProjectSettings";
 import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
-import { getUserWorkspaces } from "@/lib/workspace/service";
+import { getUserProjects } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getAccessControlPermission } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 
-interface WorkspaceSettingsPageProps {
+interface ProjectSettingsPageProps {
   params: Promise<{
     organizationId: string;
   }>;
   searchParams: Promise<{
-    channel?: TWorkspaceConfigChannel;
-    industry?: TWorkspaceConfigIndustry;
-    mode?: TWorkspaceMode;
+    channel?: TProjectConfigChannel;
+    industry?: TProjectConfigIndustry;
+    mode?: TProjectMode;
   }>;
 }
 
-const Page = async (props: WorkspaceSettingsPageProps) => {
+const Page = async (props: ProjectSettingsPageProps) => {
   const searchParams = await props.searchParams;
   const params = await props.params;
   const t = await getTranslate();
@@ -43,7 +39,7 @@ const Page = async (props: WorkspaceSettingsPageProps) => {
   const channel = searchParams.channel ?? null;
   const industry = searchParams.industry ?? null;
   const mode = searchParams.mode ?? "surveys";
-  const workspaces = await getUserWorkspaces(session.user.id, params.organizationId);
+  const projects = await getUserProjects(session.user.id, params.organizationId);
 
   const organizationTeams = await getTeamsByOrganizationId(params.organizationId);
 
@@ -61,18 +57,18 @@ const Page = async (props: WorkspaceSettingsPageProps) => {
         title={t("organizations.workspaces.new.settings.workspace_settings_title")}
         subtitle={t("organizations.workspaces.new.settings.workspace_settings_subtitle")}
       />
-      <WorkspaceSettings
+      <ProjectSettings
         organizationId={params.organizationId}
-        workspaceMode={mode}
+        projectMode={mode}
         channel={channel}
         industry={industry}
         defaultBrandColor={DEFAULT_BRAND_COLOR}
         organizationTeams={organizationTeams}
         isAccessControlAllowed={isAccessControlAllowed}
-        userWorkspacesCount={workspaces.length}
+        userProjectsCount={projects.length}
         publicDomain={publicDomain}
       />
-      {workspaces.length >= 1 && (
+      {projects.length >= 1 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/layout.tsx

@@ -0,0 +1,37 @@
+import { redirect } from "next/navigation";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
+import { getEnvironment } from "@/lib/environment/service";
+import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+
+const SurveyEditorEnvironmentLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
+  const params = await props.params;
+
+  const { children } = props;
+
+  const { t, session, user } = await environmentIdLayoutChecks(params.environmentId);
+
+  if (!session) {
+    return redirect(`/auth/login`);
+  }
+
+  if (!user) {
+    throw new AuthenticationError(t("common.not_authenticated"));
+  }
+
+  const environment = await getEnvironment(params.environmentId);
+
+  if (!environment) {
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
+  }
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
+    </div>
+  );
+};
+
+export default SurveyEditorEnvironmentLayout;

apps/web/app/(app)/(survey-editor)/workspaces/[workspaceId]/layout.tsx

@@ -1,37 +0,0 @@
-import { redirect } from "next/navigation";
-import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { getWorkspace } from "@/lib/workspace/service";
-import { workspaceIdLayoutChecks } from "@/modules/workspaces/lib/utils";
-
-const SurveyEditorWorkspaceLayout = async (props: {
-  params: Promise<{ workspaceId: string }>;
-  children: React.ReactNode;
-}) => {
-  const params = await props.params;
-
-  const { children } = props;
-
-  const { t, session, user } = await workspaceIdLayoutChecks(params.workspaceId);
-
-  if (!session) {
-    return redirect(`/auth/login`);
-  }
-
-  if (!user) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  const workspace = await getWorkspace(params.workspaceId);
-
-  if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), params.workspaceId);
-  }
-
-  return (
-    <div className="flex h-screen flex-col">
-      <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
-    </div>
-  );
-};
-
-export default SurveyEditorWorkspaceLayout;

apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx

@@ -6,12 +6,12 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/modules/ui/components/button";
 import { Confetti } from "@/modules/ui/components/confetti";
 
-const BILLING_CONFIRMATION_WORKSPACE_ID_KEY = "billingConfirmationWorkspaceId";
+const BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY = "billingConfirmationEnvironmentId";
 
 export const ConfirmationPage = () => {
   const { t } = useTranslation();
   const [showConfetti, setShowConfetti] = useState(false);
-  const [resolvedWorkspaceId, setResolvedWorkspaceId] = useState<string | null>(null);
+  const [resolvedEnvironmentId, setResolvedEnvironmentId] = useState<string | null>(null);
 
   useEffect(() => {
     setShowConfetti(true);
@@ -20,9 +20,11 @@ export const ConfirmationPage = () => {
       return;
     }
 
-    const storedWorkspaceId = globalThis.window.sessionStorage.getItem(BILLING_CONFIRMATION_WORKSPACE_ID_KEY);
-    if (storedWorkspaceId) {
-      setResolvedWorkspaceId(storedWorkspaceId);
+    const storedEnvironmentId = globalThis.window.sessionStorage.getItem(
+      BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY
+    );
+    if (storedEnvironmentId) {
+      setResolvedEnvironmentId(storedEnvironmentId);
     }
   }, []);
 
@@ -41,7 +43,9 @@ export const ConfirmationPage = () => {
         <Button asChild className="w-full justify-center">
           <Link
             href={
-              resolvedWorkspaceId ? `/workspaces/${resolvedWorkspaceId}/settings/organization/billing` : "/"
+              resolvedEnvironmentId
+                ? `/environments/${resolvedEnvironmentId}/settings/billing`
+                : "/environments"
             }>
             {t("billing_confirmation.back_to_billing_overview")}
           </Link>

apps/web/app/(app)/components/LoadingCard.tsx

@@ -1,4 +1,4 @@
-import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
+import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
 import { cn } from "@/lib/cn";
 
 export const LoadingCard = ({

apps/web/app/(app)/environments/[environmentId]/actions.ts

@@ -7,33 +7,29 @@ import {
   OperationNotAllowedError,
   ResourceNotFoundError,
 } from "@formbricks/types/errors";
-import { ZWorkspaceUpdateInput } from "@formbricks/types/workspace";
+import { ZProjectUpdateInput } from "@formbricks/types/project";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganization } from "@/lib/organization/service";
+import { getOrganizationProjectsCount } from "@/lib/project/service";
 import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
-import { getOrganizationWorkspacesCount } from "@/lib/workspace/service";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
 import {
   getAccessControlPermission,
-  getOrganizationWorkspacesLimit,
+  getOrganizationProjectsLimit,
 } from "@/modules/ee/license-check/lib/utils";
-import { createWorkspace } from "@/modules/workspaces/settings/lib/workspace";
+import { createProject } from "@/modules/projects/settings/lib/project";
 import { getOrganizationsByUserId } from "./lib/organization";
-import { getWorkspacesByUserId } from "./lib/workspace";
+import { getProjectsByUserId } from "./lib/project";
 
-const ZCreateWorkspaceInput = ZWorkspaceUpdateInput.extend({
-  feedbackDirectoryId: ZId.optional(),
-});
-
-const ZCreateWorkspaceAction = z.object({
+const ZCreateProjectAction = z.object({
   organizationId: ZId,
-  data: ZCreateWorkspaceInput,
+  data: ZProjectUpdateInput,
 });
 
-export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCreateWorkspaceAction).action(
-  withAuditLogging("created", "workspace", async ({ ctx, parsedInput }) => {
+export const createProjectAction = authenticatedActionClient.inputSchema(ZCreateProjectAction).action(
+  withAuditLogging("created", "project", async ({ ctx, parsedInput }) => {
     const { user } = ctx;
 
     const organizationId = parsedInput.organizationId;
@@ -44,7 +40,7 @@ export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCrea
       access: [
         {
           data: parsedInput.data,
-          schema: ZCreateWorkspaceInput,
+          schema: ZProjectUpdateInput,
           type: "organization",
           roles: ["owner", "manager"],
         },
@@ -57,10 +53,10 @@ export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCrea
       throw new ResourceNotFoundError("Organization", organizationId);
     }
 
-    const organizationWorkspacesLimit = await getOrganizationWorkspacesLimit(organization.id);
-    const organizationWorkspacesCount = await getOrganizationWorkspacesCount(organization.id);
+    const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.id);
+    const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
 
-    if (organizationWorkspacesCount >= organizationWorkspacesLimit) {
+    if (organizationProjectsCount >= organizationProjectsLimit) {
       throw new OperationNotAllowedError("Organization workspace limit reached");
     }
 
@@ -72,7 +68,7 @@ export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCrea
       }
     }
 
-    const workspace = await createWorkspace(parsedInput.organizationId, parsedInput.data);
+    const project = await createProject(parsedInput.organizationId, parsedInput.data);
     const updatedNotificationSettings = {
       ...user.notificationSettings,
       alert: {
@@ -85,14 +81,14 @@ export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCrea
     });
 
     ctx.auditLoggingCtx.organizationId = organizationId;
-    ctx.auditLoggingCtx.workspaceId = workspace.id;
-    ctx.auditLoggingCtx.newObject = workspace;
-    return workspace;
+    ctx.auditLoggingCtx.projectId = project.id;
+    ctx.auditLoggingCtx.newObject = project;
+    return project;
   })
 );
 
 const ZGetOrganizationsForSwitcherAction = z.object({
-  organizationId: ZId, // Changed from workspaceId to avoid extra query
+  organizationId: ZId, // Changed from environmentId to avoid extra query
 });
 
 /**
@@ -116,16 +112,16 @@ export const getOrganizationsForSwitcherAction = authenticatedActionClient
     return await getOrganizationsByUserId(ctx.user.id);
   });
 
-const ZGetWorkspacesForSwitcherAction = z.object({
-  organizationId: ZId, // Changed from workspaceId to avoid extra query
+const ZGetProjectsForSwitcherAction = z.object({
+  organizationId: ZId, // Changed from environmentId to avoid extra query
 });
 
 /**
- * Fetches workspaces list for switcher dropdown.
- * Called on-demand when user opens the workspace switcher.
+ * Fetches projects list for switcher dropdown.
+ * Called on-demand when user opens the project switcher.
  */
-export const getWorkspacesForSwitcherAction = authenticatedActionClient
-  .inputSchema(ZGetWorkspacesForSwitcherAction)
+export const getProjectsForSwitcherAction = authenticatedActionClient
+  .inputSchema(ZGetProjectsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -138,11 +134,11 @@ export const getWorkspacesForSwitcherAction = authenticatedActionClient
       ],
     });
 
-    // Need membership for getWorkspacesByUserId (1 DB query)
+    // Need membership for getProjectsByUserId (1 DB query)
     const membership = await getMembershipByUserIdOrganizationId(ctx.user.id, parsedInput.organizationId);
     if (!membership) {
       throw new AuthorizationError("Membership not found");
     }
 
-    return await getWorkspacesByUserId(ctx.user.id, membership);
+    return await getProjectsByUserId(ctx.user.id, membership);
   });

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx

@@ -1,32 +1,34 @@
 import { ResourceNotFoundError } from "@formbricks/types/errors";
-import { MainNavigation } from "@/app/(app)/workspaces/[workspaceId]/components/MainNavigation";
-import { TopControlBar } from "@/app/(app)/workspaces/[workspaceId]/components/TopControlBar";
+import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
+import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
 import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getTranslate } from "@/lingodotdev/server";
-import { getOrganizationWorkspacesLimit } from "@/modules/ee/license-check/lib/utils";
+import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
+import { TEnvironmentLayoutData } from "@/modules/environments/types/environment-auth";
 import { LimitsReachedBanner } from "@/modules/ui/components/limits-reached-banner";
 import { PendingDowngradeBanner } from "@/modules/ui/components/pending-downgrade-banner";
-import { TWorkspaceLayoutData } from "@/modules/workspaces/types/workspace-auth";
 
-interface WorkspaceLayoutProps {
-  layoutData: TWorkspaceLayoutData;
+interface EnvironmentLayoutProps {
+  layoutData: TEnvironmentLayoutData;
   children?: React.ReactNode;
 }
 
-export const WorkspaceLayout = async ({ layoutData, children }: WorkspaceLayoutProps) => {
+export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLayoutProps) => {
   const t = await getTranslate();
   const publicDomain = getPublicDomain();
 
   // Destructure all data from props (NO database queries)
   const {
     user,
+    environment,
     organization,
     membership,
-    workspace, // Current workspace details
+    project, // Current project details
+    environments, // All project environments (for environment switcher)
     isAccessControlAllowed,
-    workspacePermission,
+    projectPermission,
     license,
     responseCount,
   } = layoutData;
@@ -36,47 +38,55 @@ export const WorkspaceLayout = async ({ layoutData, children }: WorkspaceLayoutP
 
   const { features, lastChecked, isPendingDowngrade, active, status } = license;
   const isMultiOrgEnabled = features?.isMultiOrgEnabled ?? false;
-  const organizationWorkspacesLimit = await getOrganizationWorkspacesLimit(organization.id);
+  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.id);
   const isOwnerOrManager = isOwner || isManager;
 
-  // Validate that workspace permission exists for members
-  if (isMember && !workspacePermission) {
+  // Validate that project permission exists for members
+  if (isMember && !projectPermission) {
     throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   return (
     <div className="flex h-screen min-h-screen flex-col overflow-hidden">
       {IS_FORMBRICKS_CLOUD && (
-        <LimitsReachedBanner organization={organization} responseCount={responseCount} />
+        <LimitsReachedBanner
+          organization={organization}
+          environmentId={environment.id}
+          responseCount={responseCount}
+        />
       )}
 
       <PendingDowngradeBanner
         lastChecked={lastChecked}
         isPendingDowngrade={isPendingDowngrade ?? false}
         active={active}
+        environmentId={environment.id}
         locale={user.locale}
         status={status}
       />
 
       <div className="flex h-full">
         <MainNavigation
+          environment={environment}
           organization={organization}
           user={user}
-          workspace={{ id: workspace.id, name: workspace.name }}
+          project={{ id: project.id, name: project.name }}
           isFormbricksCloud={IS_FORMBRICKS_CLOUD}
           isDevelopment={IS_DEVELOPMENT}
           membershipRole={membership.role}
           publicDomain={publicDomain}
           isMultiOrgEnabled={isMultiOrgEnabled}
-          organizationWorkspacesLimit={organizationWorkspacesLimit}
+          organizationProjectsLimit={organizationProjectsLimit}
           isLicenseActive={active}
           isAccessControlAllowed={isAccessControlAllowed}
         />
         <div id="mainContent" className="flex flex-1 flex-col overflow-hidden bg-slate-50">
           <TopControlBar
+            environments={environments}
             currentOrganizationId={organization.id}
+            currentProjectId={project.id}
             isMultiOrgEnabled={isMultiOrgEnabled}
-            organizationWorkspacesLimit={organizationWorkspacesLimit}
+            organizationProjectsLimit={organizationProjectsLimit}
             isFormbricksCloud={IS_FORMBRICKS_CLOUD}
             isLicenseActive={active}
             isOwnerOrManager={isOwnerOrManager}

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useEffect } from "react";
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
+
+interface EnvironmentStorageHandlerProps {
+  environmentId: string;
+}
+
+const EnvironmentStorageHandler = ({ environmentId }: EnvironmentStorageHandlerProps) => {
+  useEffect(() => {
+    localStorage.setItem(FORMBRICKS_ENVIRONMENT_ID_LS, environmentId);
+  }, [environmentId]);
+
+  return null;
+};
+
+export default EnvironmentStorageHandler;

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentSwitch.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
+import { cn } from "@/lib/cn";
+import { Label } from "@/modules/ui/components/label";
+import { Switch } from "@/modules/ui/components/switch";
+
+interface EnvironmentSwitchProps {
+  environment: TEnvironment;
+  environments: TEnvironment[];
+}
+
+export const EnvironmentSwitch = ({ environment, environments }: EnvironmentSwitchProps) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const [isEnvSwitchChecked, setIsEnvSwitchChecked] = useState(environment?.type === "development");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleEnvironmentChange = (environmentType: "production" | "development") => {
+    const newEnvironmentId = environments.find((e) => e.type === environmentType)?.id;
+    if (newEnvironmentId) {
+      router.push(`/environments/${newEnvironmentId}/`);
+    }
+  };
+
+  const toggleEnvSwitch = () => {
+    const newEnvironmentType = isEnvSwitchChecked ? "production" : "development";
+    setIsLoading(true);
+    setIsEnvSwitchChecked(!isEnvSwitchChecked);
+    handleEnvironmentChange(newEnvironmentType);
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center space-x-2 rounded-lg p-2",
+        isEnvSwitchChecked ? "bg-slate-100 text-orange-800" : "hover:bg-slate-100"
+      )}>
+      <Label
+        htmlFor="development-mode"
+        className={cn("hover:cursor-pointer", isEnvSwitchChecked && "text-orange-800")}>
+        {t("common.dev_env")}
+      </Label>
+      <Switch
+        className="focus:ring-orange-800 data-[state=checked]:bg-orange-800"
+        id="development-mode"
+        disabled={isLoading}
+        checked={isEnvSwitchChecked}
+        onCheckedChange={toggleEnvSwitch}
+      />
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -0,0 +1,837 @@
+"use client";
+
+import {
+  ArrowUpRightIcon,
+  Building2Icon,
+  ChevronRightIcon,
+  Cog,
+  FoldersIcon,
+  Loader2,
+  LogOutIcon,
+  MessageCircle,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  PlusIcon,
+  RocketIcon,
+  SettingsIcon,
+  UserCircleIcon,
+  UserIcon,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
+import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { TOrganization } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
+import {
+  getOrganizationsForSwitcherAction,
+  getProjectsForSwitcherAction,
+} from "@/app/(app)/environments/[environmentId]/actions";
+import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
+import { isNewerVersion } from "@/app/(app)/environments/[environmentId]/lib/utils";
+import FBLogo from "@/images/formbricks-wordmark.svg";
+import { cn } from "@/lib/cn";
+import { getBillingFallbackPath } from "@/lib/membership/navigation";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
+import { TrialAlert } from "@/modules/ee/billing/components/trial-alert";
+import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
+import { CreateProjectModal } from "@/modules/projects/components/create-project-modal";
+import { ProjectLimitModal } from "@/modules/projects/components/project-limit-modal";
+import { getLatestStableFbReleaseAction } from "@/modules/projects/settings/(setup)/app-connection/actions";
+import { ProfileAvatar } from "@/modules/ui/components/avatars";
+import { Button } from "@/modules/ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
+import packageJson from "../../../../../package.json";
+
+interface NavigationProps {
+  environment: TEnvironment;
+  user: TUser;
+  organization: TOrganization;
+  project: { id: string; name: string };
+  isFormbricksCloud: boolean;
+  isDevelopment: boolean;
+  membershipRole?: TOrganizationRole;
+  publicDomain: string;
+  isMultiOrgEnabled: boolean;
+  organizationProjectsLimit: number;
+  isLicenseActive: boolean;
+  isAccessControlAllowed: boolean;
+}
+
+const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
+  if (pathname.includes("/settings/")) {
+    return false;
+  }
+
+  const pattern = new RegExp(`/workspace/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
+const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
+  const accountSettingsPattern = /\/settings\/(profile|account|notifications|security|appearance)(?:\/|$)/;
+  if (accountSettingsPattern.test(pathname)) {
+    return false;
+  }
+
+  const pattern = new RegExp(`/settings/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
+export const MainNavigation = ({
+  environment,
+  organization,
+  user,
+  project,
+  membershipRole,
+  isFormbricksCloud,
+  isDevelopment,
+  publicDomain,
+  isMultiOrgEnabled,
+  organizationProjectsLimit,
+  isLicenseActive,
+  isAccessControlAllowed,
+}: NavigationProps) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { t } = useTranslation();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isTextVisible, setIsTextVisible] = useState(true);
+  const [latestVersion, setLatestVersion] = useState("");
+  const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
+
+  const [isPending, startTransition] = useTransition();
+  const { isManager, isOwner, isBilling, isMember } = getAccessFlags(membershipRole);
+  const isMembershipPending = membershipRole === undefined;
+  const disabledNavigationMessage = isMembershipPending
+    ? t("common.loading")
+    : t("common.you_are_not_authorized_to_perform_this_action");
+
+  const isOwnerOrManager = isManager || isOwner;
+
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+    localStorage.setItem("isMainNavCollapsed", isCollapsed ? "false" : "true");
+  };
+
+  useEffect(() => {
+    const isCollapsedValueFromLocalStorage = localStorage.getItem("isMainNavCollapsed") === "true";
+    setIsCollapsed(isCollapsedValueFromLocalStorage);
+  }, []);
+
+  useEffect(() => {
+    const toggleTextOpacity = () => {
+      setIsTextVisible(isCollapsed);
+    };
+    const timeoutId = setTimeout(toggleTextOpacity, 150);
+    return () => clearTimeout(timeoutId);
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    // Auto collapse project navbar on org and account settings
+    if (pathname?.includes("/settings")) {
+      setIsCollapsed(true);
+    }
+  }, [pathname]);
+
+  const mainNavigation = useMemo(
+    () => [
+      {
+        name: t("common.surveys"),
+        href: `/environments/${environment.id}/surveys`,
+        icon: MessageCircle,
+        isActive: pathname?.includes("/surveys"),
+        isHidden: false,
+        disabled: isMembershipPending || isBilling,
+      },
+      {
+        href: `/environments/${environment.id}/contacts`,
+        name: t("common.contacts"),
+        icon: UserIcon,
+        isActive:
+          pathname?.includes("/contacts") ||
+          pathname?.includes("/segments") ||
+          pathname?.includes("/attributes"),
+        disabled: isMembershipPending || isBilling,
+      },
+      {
+        name: t("common.configuration"),
+        href: `/environments/${environment.id}/workspace/general`,
+        icon: Cog,
+        isActive: pathname?.includes("/workspace"),
+        disabled: isMembershipPending || isBilling,
+      },
+    ],
+    [t, environment.id, pathname, isMembershipPending, isBilling]
+  );
+
+  const dropdownNavigation = [
+    {
+      label: t("common.account"),
+      href: `/environments/${environment.id}/settings/profile`,
+      icon: UserCircleIcon,
+    },
+    {
+      label: t("common.documentation"),
+      href: "https://formbricks.com/docs",
+      target: "_blank",
+      icon: ArrowUpRightIcon,
+    },
+    {
+      label: t("common.share_feedback"),
+      href: "https://github.com/formbricks/formbricks/issues",
+      target: "_blank",
+      icon: ArrowUpRightIcon,
+    },
+  ];
+
+  const [isWorkspaceDropdownOpen, setIsWorkspaceDropdownOpen] = useState(false);
+  const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
+  const [projects, setProjects] = useState<{ id: string; name: string }[]>([]);
+  const [organizations, setOrganizations] = useState<{ id: string; name: string }[]>([]);
+  const [isLoadingProjects, setIsLoadingProjects] = useState(false);
+  const [hasInitializedProjects, setHasInitializedProjects] = useState(false);
+  const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
+  const [workspaceLoadError, setWorkspaceLoadError] = useState<string | null>(null);
+  const [organizationLoadError, setOrganizationLoadError] = useState<string | null>(null);
+  const [openCreateProjectModal, setOpenCreateProjectModal] = useState(false);
+  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
+  const [openProjectLimitModal, setOpenProjectLimitModal] = useState(false);
+
+  const renderSwitcherError = (error: string, onRetry: () => void, retryLabel: string) => (
+    <div className="px-2 py-4">
+      <p className="mb-2 text-sm text-red-600">{error}</p>
+      <button onClick={onRetry} className="text-xs text-slate-600 underline hover:text-slate-800">
+        {retryLabel}
+      </button>
+    </div>
+  );
+
+  const projectSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${environment.id}/workspace/general`,
+    },
+    {
+      id: "look",
+      label: t("common.look_and_feel"),
+      href: `/environments/${environment.id}/workspace/look`,
+    },
+    {
+      id: "app-connection",
+      label: t("common.website_and_app_connection"),
+      href: `/environments/${environment.id}/workspace/app-connection`,
+    },
+    {
+      id: "integrations",
+      label: t("common.integrations"),
+      href: `/environments/${environment.id}/workspace/integrations`,
+    },
+    {
+      id: "teams",
+      label: t("common.team_access"),
+      href: `/environments/${environment.id}/workspace/teams`,
+    },
+    {
+      id: "languages",
+      label: t("common.survey_languages"),
+      href: `/environments/${environment.id}/workspace/languages`,
+    },
+    {
+      id: "tags",
+      label: t("common.tags"),
+      href: `/environments/${environment.id}/workspace/tags`,
+    },
+  ];
+
+  const organizationSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${environment.id}/settings/general`,
+    },
+    {
+      id: "teams",
+      label: t("common.members_and_teams"),
+      href: `/environments/${environment.id}/settings/teams`,
+    },
+    {
+      id: "api-keys",
+      label: t("common.api_keys"),
+      href: `/environments/${environment.id}/settings/api-keys`,
+      hidden: !isOwnerOrManager,
+    },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${environment.id}/settings/domain`,
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "billing",
+      label: t("common.billing"),
+      href: `/environments/${environment.id}/settings/billing`,
+      hidden: !isFormbricksCloud,
+    },
+    {
+      id: "enterprise",
+      label: t("common.enterprise_license"),
+      href: `/environments/${environment.id}/settings/enterprise`,
+      hidden: isFormbricksCloud || isMember,
+    },
+  ];
+
+  const loadProjects = useCallback(async () => {
+    setIsLoadingProjects(true);
+    setWorkspaceLoadError(null);
+
+    try {
+      const result = await getProjectsForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setProjects(sorted);
+      } else {
+        setWorkspaceLoadError(getFormattedErrorMessage(result) || t("common.failed_to_load_workspaces"));
+      }
+    } catch (error) {
+      const formattedError =
+        typeof error === "object" && error !== null
+          ? getFormattedErrorMessage(error as { serverError?: string; validationErrors?: unknown })
+          : "";
+      setWorkspaceLoadError(
+        formattedError || (error instanceof Error ? error.message : t("common.failed_to_load_workspaces"))
+      );
+    } finally {
+      setIsLoadingProjects(false);
+      setHasInitializedProjects(true);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (!isWorkspaceDropdownOpen || projects.length > 0 || isLoadingProjects || workspaceLoadError) {
+      return;
+    }
+
+    loadProjects();
+  }, [isWorkspaceDropdownOpen, projects.length, isLoadingProjects, workspaceLoadError, loadProjects]);
+
+  const loadOrganizations = useCallback(async () => {
+    setIsLoadingOrganizations(true);
+    setOrganizationLoadError(null);
+
+    try {
+      const result = await getOrganizationsForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setOrganizations(sorted);
+      } else {
+        setOrganizationLoadError(
+          getFormattedErrorMessage(result) || t("common.failed_to_load_organizations")
+        );
+      }
+    } catch (error) {
+      const formattedError =
+        typeof error === "object" && error !== null
+          ? getFormattedErrorMessage(error as { serverError?: string; validationErrors?: unknown })
+          : "";
+      setOrganizationLoadError(
+        formattedError || (error instanceof Error ? error.message : t("common.failed_to_load_organizations"))
+      );
+    } finally {
+      setIsLoadingOrganizations(false);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (
+      !isOrganizationDropdownOpen ||
+      organizations.length > 0 ||
+      isLoadingOrganizations ||
+      organizationLoadError
+    ) {
+      return;
+    }
+
+    loadOrganizations();
+  }, [
+    isOrganizationDropdownOpen,
+    organizations.length,
+    isLoadingOrganizations,
+    organizationLoadError,
+    loadOrganizations,
+  ]);
+
+  useEffect(() => {
+    async function loadReleases() {
+      const res = await getLatestStableFbReleaseAction();
+      if (res?.data) {
+        const latestVersionTag = res.data;
+        const currentVersionTag = `v${packageJson.version}`;
+
+        if (isNewerVersion(currentVersionTag, latestVersionTag)) {
+          setLatestVersion(latestVersionTag);
+        }
+      }
+    }
+    if (isOwnerOrManager) loadReleases();
+  }, [isOwnerOrManager]);
+
+  const trialDaysRemaining = useMemo(() => {
+    if (!isFormbricksCloud || organization.billing?.stripe?.subscriptionStatus !== "trialing") return null;
+    const trialEnd = organization.billing.stripe.trialEnd;
+    if (!trialEnd) return null;
+    const ts = new Date(trialEnd).getTime();
+    if (!Number.isFinite(ts)) return null;
+    const msPerDay = 86_400_000;
+    return Math.ceil((ts - Date.now()) / msPerDay);
+  }, [
+    isFormbricksCloud,
+    organization.billing?.stripe?.subscriptionStatus,
+    organization.billing?.stripe?.trialEnd,
+  ]);
+
+  const mainNavigationLink = isBilling
+    ? getBillingFallbackPath(environment.id, isFormbricksCloud)
+    : `/environments/${environment.id}/surveys/`;
+
+  const handleProjectChange = (projectId: string) => {
+    const targetPath =
+      projectId === project.id ? `/environments/${environment.id}/surveys` : `/workspaces/${projectId}/`;
+    startTransition(() => {
+      setIsWorkspaceDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleOrganizationChange = (organizationId: string) => {
+    const targetPath =
+      organizationId === organization.id
+        ? `/environments/${environment.id}/settings/general`
+        : `/organizations/${organizationId}/`;
+    startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleSettingNavigation = (href: string) => {
+    startTransition(() => {
+      router.push(href);
+    });
+  };
+
+  const handleProjectCreate = () => {
+    if (!hasInitializedProjects || isLoadingProjects) {
+      return;
+    }
+
+    if (projects.length >= organizationProjectsLimit) {
+      setOpenProjectLimitModal(true);
+      return;
+    }
+
+    setOpenCreateProjectModal(true);
+  };
+
+  const projectLimitModalButtons = (): [ModalButton, ModalButton] => {
+    if (isFormbricksCloud) {
+      return [
+        {
+          text: t("environments.settings.billing.upgrade"),
+          href: `/environments/${environment.id}/settings/billing`,
+        },
+        {
+          text: t("common.cancel"),
+          onClick: () => setOpenProjectLimitModal(false),
+        },
+      ];
+    }
+
+    return [
+      {
+        text: t("environments.settings.billing.upgrade"),
+        href: isLicenseActive
+          ? `/environments/${environment.id}/settings/enterprise`
+          : "https://formbricks.com/upgrade-self-hosted-license",
+      },
+      {
+        text: t("common.cancel"),
+        onClick: () => setOpenProjectLimitModal(false),
+      },
+    ];
+  };
+
+  const switcherTriggerClasses = cn(
+    "w-full border-t px-3 py-3 text-left transition-colors duration-200 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-inset",
+    isCollapsed ? "flex items-center justify-center" : ""
+  );
+
+  const switcherIconClasses =
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600";
+  const isInitialProjectsLoading = isWorkspaceDropdownOpen && !hasInitializedProjects && !workspaceLoadError;
+
+  return (
+    <>
+      {project && (
+        <aside
+          className={cn(
+            "z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
+            isCollapsed ? "w-sidebar-expanded" : "w-sidebar-collapsed"
+          )}>
+          <div>
+            {/* Logo and Toggle */}
+
+            <div className="flex items-center justify-between px-3 pb-4">
+              {!isCollapsed && (
+                <Link
+                  href={mainNavigationLink}
+                  className={cn(
+                    "flex items-center justify-center transition-opacity duration-100",
+                    isTextVisible ? "opacity-0" : "opacity-100"
+                  )}>
+                  <Image src={FBLogo} width={160} height={30} alt={t("environments.formbricks_logo")} />
+                </Link>
+              )}
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={toggleSidebar}
+                className={cn(
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
+                )}>
+                {isCollapsed ? (
+                  <PanelLeftOpenIcon strokeWidth={1.5} />
+                ) : (
+                  <PanelLeftCloseIcon strokeWidth={1.5} />
+                )}
+              </Button>
+            </div>
+
+            {/* Main Nav Switch */}
+            <ul>
+              {mainNavigation.map(
+                (item) =>
+                  !item.isHidden && (
+                    <NavigationLink
+                      key={item.name}
+                      href={item.href}
+                      isActive={item.isActive}
+                      isCollapsed={isCollapsed}
+                      isTextVisible={isTextVisible}
+                      disabled={item.disabled}
+                      disabledMessage={item.disabled ? disabledNavigationMessage : undefined}
+                      linkText={item.name}>
+                      <item.icon strokeWidth={1.5} />
+                    </NavigationLink>
+                  )
+              )}
+            </ul>
+          </div>
+
+          <div>
+            {/* New Version Available */}
+            {!isCollapsed && isOwnerOrManager && latestVersion && !isFormbricksCloud && !isDevelopment && (
+              <Link
+                href="https://github.com/formbricks/formbricks/releases"
+                target="_blank"
+                className="m-2 flex items-center space-x-4 rounded-lg border border-slate-200 bg-slate-100 p-2 text-sm text-slate-800 hover:border-slate-300 hover:bg-slate-200">
+                <p className="flex items-center justify-center gap-x-2 text-xs">
+                  <RocketIcon strokeWidth={1.5} className="mx-1 h-6 w-6 text-slate-900" />
+                  {t("common.new_version_available", { version: latestVersion })}
+                </p>
+              </Link>
+            )}
+
+            {/* Trial Days Remaining */}
+            {!isCollapsed && isFormbricksCloud && trialDaysRemaining !== null && (
+              <Link href={`/environments/${environment.id}/settings/billing`} className="m-2 block">
+                <TrialAlert trialDaysRemaining={trialDaysRemaining} size="small" />
+              </Link>
+            )}
+
+            <div className="flex flex-col">
+              <DropdownMenu onOpenChange={setIsWorkspaceDropdownOpen}>
+                <DropdownMenuTrigger asChild id="workspaceDropdownTrigger" className={switcherTriggerClasses}>
+                  <button
+                    type="button"
+                    aria-label={isCollapsed ? t("common.change_workspace") : undefined}
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                    <span className={switcherIconClasses}>
+                      <FoldersIcon className="h-4 w-4" strokeWidth={1.5} />
+                    </span>
+                    {!isCollapsed && !isTextVisible && (
+                      <>
+                        <div className="grow overflow-hidden">
+                          <p className="truncate text-sm font-bold text-slate-700">{project.name}</p>
+                          <p className="text-sm text-slate-500">{t("common.workspace")}</p>
+                        </div>
+                        {isPending && (
+                          <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />
+                        )}
+                        <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                      </>
+                    )}
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+                  <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                    <FoldersIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                    {t("common.change_workspace")}
+                  </div>
+                  {(isLoadingProjects || isInitialProjectsLoading) && (
+                    <div className="flex items-center justify-center py-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    </div>
+                  )}
+                  {!isLoadingProjects &&
+                    !isInitialProjectsLoading &&
+                    workspaceLoadError &&
+                    renderSwitcherError(
+                      workspaceLoadError,
+                      () => {
+                        setWorkspaceLoadError(null);
+                        setProjects([]);
+                      },
+                      t("common.try_again")
+                    )}
+                  {!isLoadingProjects && !isInitialProjectsLoading && !workspaceLoadError && (
+                    <>
+                      <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                        {projects.map((proj) => (
+                          <DropdownMenuCheckboxItem
+                            key={proj.id}
+                            checked={proj.id === project.id}
+                            onClick={() => handleProjectChange(proj.id)}
+                            className="cursor-pointer">
+                            {proj.name}
+                          </DropdownMenuCheckboxItem>
+                        ))}
+                      </DropdownMenuGroup>
+                      {isOwnerOrManager && (
+                        <DropdownMenuCheckboxItem
+                          onClick={handleProjectCreate}
+                          className="w-full cursor-pointer justify-between">
+                          <span>{t("common.add_new_workspace")}</span>
+                          <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                        </DropdownMenuCheckboxItem>
+                      )}
+                    </>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                      <Cog className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                      {t("common.workspace_configuration")}
+                    </div>
+                    {projectSettings.map((setting) => (
+                      <DropdownMenuCheckboxItem
+                        key={setting.id}
+                        checked={isActiveProjectSetting(pathname, setting.id)}
+                        onClick={() => handleSettingNavigation(setting.href)}
+                        className="cursor-pointer">
+                        {setting.label}
+                      </DropdownMenuCheckboxItem>
+                    ))}
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
+                <DropdownMenuTrigger
+                  asChild
+                  id="organizationDropdownTriggerSidebar"
+                  className={switcherTriggerClasses}>
+                  <button
+                    type="button"
+                    aria-label={isCollapsed ? t("common.change_organization") : undefined}
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                    <span className={switcherIconClasses}>
+                      <Building2Icon className="h-4 w-4" strokeWidth={1.5} />
+                    </span>
+                    {!isCollapsed && !isTextVisible && (
+                      <>
+                        <div className="grow overflow-hidden">
+                          <p className="truncate text-sm font-bold text-slate-700">{organization.name}</p>
+                          <p className="text-sm text-slate-500">{t("common.organization")}</p>
+                        </div>
+                        {isPending && (
+                          <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />
+                        )}
+                        <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                      </>
+                    )}
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+                  <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                    <Building2Icon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                    {t("common.change_organization")}
+                  </div>
+                  {isLoadingOrganizations && (
+                    <div className="flex items-center justify-center py-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    </div>
+                  )}
+                  {!isLoadingOrganizations &&
+                    organizationLoadError &&
+                    renderSwitcherError(
+                      organizationLoadError,
+                      () => {
+                        setOrganizationLoadError(null);
+                        setOrganizations([]);
+                      },
+                      t("common.try_again")
+                    )}
+                  {!isLoadingOrganizations && !organizationLoadError && (
+                    <>
+                      <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                        {organizations.map((org) => (
+                          <DropdownMenuCheckboxItem
+                            key={org.id}
+                            checked={org.id === organization.id}
+                            onClick={() => handleOrganizationChange(org.id)}
+                            className="cursor-pointer">
+                            {org.name}
+                          </DropdownMenuCheckboxItem>
+                        ))}
+                      </DropdownMenuGroup>
+                      {isMultiOrgEnabled && (
+                        <DropdownMenuCheckboxItem
+                          onClick={() => setOpenCreateOrganizationModal(true)}
+                          className="w-full cursor-pointer justify-between">
+                          <span>{t("common.create_new_organization")}</span>
+                          <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                        </DropdownMenuCheckboxItem>
+                      )}
+                    </>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                      <SettingsIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                      {t("common.organization_settings")}
+                    </div>
+                    {organizationSettings.map((setting) => {
+                      if (setting.hidden) return null;
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={setting.id}
+                          checked={isActiveOrganizationSetting(pathname, setting.id)}
+                          onClick={() => handleSettingNavigation(setting.href)}
+                          className="cursor-pointer">
+                          {setting.label}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  asChild
+                  id="userDropdownTrigger"
+                  className={cn(switcherTriggerClasses, "rounded-br-xl")}>
+                  <button
+                    type="button"
+                    aria-label={isCollapsed ? t("common.account_settings") : undefined}
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                    <span className={switcherIconClasses}>
+                      <ProfileAvatar userId={user.id} />
+                    </span>
+                    {!isCollapsed && !isTextVisible && (
+                      <>
+                        <div className="grow overflow-hidden">
+                          <p
+                            title={user?.email}
+                            className="ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700">
+                            {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
+                          </p>
+                          <p className="text-sm text-slate-500">{t("common.account")}</p>
+                        </div>
+                        <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                      </>
+                    )}
+                  </button>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent
+                  id="userDropdownInnerContentWrapper"
+                  side="right"
+                  sideOffset={10}
+                  alignOffset={5}
+                  align="end">
+                  {dropdownNavigation.map((link) => (
+                    <Link
+                      href={link.href}
+                      target={link.target}
+                      className="flex w-full items-center"
+                      key={link.label}
+                      rel={link.target === "_blank" ? "noopener noreferrer" : undefined}>
+                      <DropdownMenuItem>
+                        <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
+                        {link.label}
+                      </DropdownMenuItem>
+                    </Link>
+                  ))}
+                  <DropdownMenuItem
+                    onClick={async () => {
+                      const loginUrl = `${publicDomain}/auth/login`;
+                      const route = await signOutWithAudit({
+                        reason: "user_initiated",
+                        redirectUrl: loginUrl,
+                        organizationId: organization.id,
+                        redirect: false,
+                        callbackUrl: loginUrl,
+                        clearEnvironmentId: true,
+                      });
+                      router.push(route?.url || loginUrl); // NOSONAR // We want to check for empty strings
+                    }}
+                    icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
+                    {t("common.logout")}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </aside>
+      )}
+      {openProjectLimitModal && (
+        <ProjectLimitModal
+          open={openProjectLimitModal}
+          setOpen={setOpenProjectLimitModal}
+          buttons={projectLimitModalButtons()}
+          projectLimit={organizationProjectsLimit}
+        />
+      )}
+      {openCreateProjectModal && (
+        <CreateProjectModal
+          open={openCreateProjectModal}
+          setOpen={setOpenCreateProjectModal}
+          organizationId={organization.id}
+          isAccessControlAllowed={isAccessControlAllowed}
+        />
+      )}
+      {openCreateOrganizationModal && (
+        <CreateOrganizationModal
+          open={openCreateOrganizationModal}
+          setOpen={setOpenCreateOrganizationModal}
+        />
+      )}
+    </>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/components/ProjectNavItem.tsx

@@ -1,13 +1,13 @@
 import Link from "next/link";
 import { ReactNode } from "react";
 
-interface WorkspaceNavItemProps {
+interface ProjectNavItemProps {
   href: string;
   children: ReactNode;
   isActive: boolean;
 }
 
-export const WorkspaceNavItem = ({ href, children, isActive }: WorkspaceNavItemProps) => {
+export const ProjectNavItem = ({ href, children, isActive }: ProjectNavItemProps) => {
   const activeClass = "bg-slate-50 font-semibold";
   const inactiveClass = "hover:bg-slate-50";
 

apps/web/app/(app)/environments/[environmentId]/components/TopControlBar.tsx

@@ -1,13 +1,17 @@
 "use client";
 
+import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
-import { WorkspaceAndOrgSwitch } from "@/app/(app)/workspaces/[workspaceId]/components/workspace-and-org-switch";
-import { useWorkspaceContext } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
+import { ProjectAndOrgSwitch } from "@/app/(app)/environments/[environmentId]/components/project-and-org-switch";
+import { useEnvironment } from "@/app/(app)/environments/[environmentId]/context/environment-context";
+import { getAccessFlags } from "@/lib/membership/utils";
 
 interface TopControlBarProps {
+  environments: TEnvironment[];
   currentOrganizationId: string;
+  currentProjectId: string;
   isMultiOrgEnabled: boolean;
-  organizationWorkspacesLimit: number;
+  organizationProjectsLimit: number;
   isFormbricksCloud: boolean;
   isLicenseActive: boolean;
   isOwnerOrManager: boolean;
@@ -16,30 +20,37 @@ interface TopControlBarProps {
 }
 
 export const TopControlBar = ({
+  environments,
   currentOrganizationId,
+  currentProjectId,
   isMultiOrgEnabled,
-  organizationWorkspacesLimit,
+  organizationProjectsLimit,
   isFormbricksCloud,
   isLicenseActive,
   isOwnerOrManager,
   isAccessControlAllowed,
   membershipRole,
 }: TopControlBarProps) => {
-  const { workspace } = useWorkspaceContext();
+  const { isMember, isBilling } = getAccessFlags(membershipRole);
   const isMembershipPending = membershipRole === undefined;
+  const { environment } = useEnvironment();
 
   return (
     <div
       className="flex h-14 w-full items-center justify-between bg-slate-50 px-6"
       data-testid="fb__global-top-control-bar">
-      <WorkspaceAndOrgSwitch
-        currentWorkspaceId={workspace.id}
+      <ProjectAndOrgSwitch
+        currentEnvironmentId={environment.id}
+        environments={environments}
         currentOrganizationId={currentOrganizationId}
+        currentProjectId={currentProjectId}
         isMultiOrgEnabled={isMultiOrgEnabled}
-        organizationWorkspacesLimit={organizationWorkspacesLimit}
+        organizationProjectsLimit={organizationProjectsLimit}
         isFormbricksCloud={isFormbricksCloud}
         isLicenseActive={isLicenseActive}
         isOwnerOrManager={isOwnerOrManager}
+        isMember={isMember}
+        isBilling={isBilling}
         isMembershipPending={isMembershipPending}
         isAccessControlAllowed={isAccessControlAllowed}
       />

apps/web/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator.tsx

@@ -3,32 +3,33 @@
 import { AlertTriangleIcon, CheckIcon, RotateCcwIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
 import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
 
 interface WidgetStatusIndicatorProps {
-  workspace: { appSetupCompleted: boolean };
+  environment: TEnvironment;
 }
 
-export const WidgetStatusIndicator = ({ workspace }: WidgetStatusIndicatorProps) => {
+export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProps) => {
   const { t } = useTranslation();
   const router = useRouter();
   const stati = {
     notImplemented: {
       icon: AlertTriangleIcon,
-      title: t("workspace.app-connection.formbricks_sdk_not_connected"),
-      subtitle: t("workspace.app-connection.formbricks_sdk_not_connected_description"),
+      title: t("environments.workspace.app-connection.formbricks_sdk_not_connected"),
+      subtitle: t("environments.workspace.app-connection.formbricks_sdk_not_connected_description"),
     },
     running: {
       icon: CheckIcon,
-      title: t("workspace.app-connection.receiving_data"),
-      subtitle: t("workspace.app-connection.formbricks_sdk_connected"),
+      title: t("environments.workspace.app-connection.receiving_data"),
+      subtitle: t("environments.workspace.app-connection.formbricks_sdk_connected"),
     },
   };
 
   let status: "notImplemented" | "running";
 
-  if (workspace.appSetupCompleted) {
+  if (environment.appSetupCompleted) {
     status = "running";
   } else {
     status = "notImplemented";
@@ -56,7 +57,7 @@ export const WidgetStatusIndicator = ({ workspace }: WidgetStatusIndicatorProps)
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />
-          {t("workspace.app-connection.recheck")}
+          {t("environments.workspace.app-connection.recheck")}
         </Button>
       )}
     </div>

apps/web/app/(app)/environments/[environmentId]/components/environment-breadcrumb.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { ChevronDownIcon, CircleHelpIcon, Code2Icon, Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
+
+export const EnvironmentBreadcrumb = ({
+  environments,
+  currentEnvironment,
+}: {
+  environments: { id: string; type: string }[];
+  currentEnvironment: { id: string; type: string };
+}) => {
+  const { t } = useTranslation();
+  const [isEnvironmentDropdownOpen, setIsEnvironmentDropdownOpen] = useState(false);
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleEnvironmentChange = (environmentId: string) => {
+    if (environmentId === currentEnvironment.id) return;
+    setIsLoading(true);
+    router.push(`/environments/${environmentId}/`);
+  };
+
+  const developmentTooltip = () => {
+    return (
+      <TooltipProvider>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <CircleHelpIcon className="h-3 w-3" />
+          </TooltipTrigger>
+          <TooltipContent className="mt-2 border-none bg-red-800 text-white">
+            {t("common.development_environment_banner")}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  };
+
+  return (
+    <BreadcrumbItem
+      isActive={isEnvironmentDropdownOpen}
+      isHighlighted={currentEnvironment.type === "development"}>
+      <DropdownMenu onOpenChange={setIsEnvironmentDropdownOpen}>
+        <DropdownMenuTrigger
+          className="flex cursor-pointer items-center gap-1 outline-none"
+          id="environmentDropdownTrigger"
+          asChild>
+          <div className="flex items-center gap-1">
+            <Code2Icon className="h-3 w-3" strokeWidth={1.5} />
+            <span className="capitalize">{currentEnvironment.type}</span>
+            {isLoading && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
+            {currentEnvironment.type === "development" && developmentTooltip()}
+            {isEnvironmentDropdownOpen && <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />}
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="mt-2" align="start">
+          <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+            <Code2Icon className="mr-2 inline h-4 w-4" />
+            {t("common.choose_environment")}
+          </div>
+          <DropdownMenuGroup>
+            {environments.map((env) => (
+              <DropdownMenuCheckboxItem
+                key={env.id}
+                checked={env.type === currentEnvironment.type}
+                onClick={() => handleEnvironmentChange(env.id)}
+                className="cursor-pointer">
+                <div className="flex items-center gap-2 capitalize">
+                  <span>{env.type}</span>
+                </div>
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </BreadcrumbItem>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/components/organization-breadcrumb.tsx

@@ -9,11 +9,11 @@ import {
   PlusIcon,
   SettingsIcon,
 } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { logger } from "@formbricks/logger";
-import { getOrganizationsForSwitcherAction } from "@/app/(app)/workspaces/[workspaceId]/actions";
+import { getOrganizationsForSwitcherAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
@@ -25,24 +25,45 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
-import { useOrganization, useWorkspace } from "../context/workspace-context";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
+import { useOrganization } from "../context/environment-context";
 
 interface OrganizationBreadcrumbProps {
   currentOrganizationId: string;
   currentOrganizationName?: string; // Optional: pass directly if context not available
   isMultiOrgEnabled: boolean;
-  currentWorkspaceId?: string;
+  currentEnvironmentId?: string;
+  isFormbricksCloud: boolean;
+  isMember: boolean;
+  isOwnerOrManager: boolean;
+  isMembershipPending: boolean;
 }
 
+const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
+  // Match /settings/{settingId} or /settings/{settingId}/... but exclude account settings
+  // Exclude paths with /(account)/
+  if (pathname.includes("/(account)/")) {
+    return false;
+  }
+  // Check if path matches /settings/{settingId} (with optional trailing path)
+  const pattern = new RegExp(`/settings/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
 export const OrganizationBreadcrumb = ({
   currentOrganizationId,
   currentOrganizationName,
   isMultiOrgEnabled,
-  currentWorkspaceId,
+  currentEnvironmentId,
+  isFormbricksCloud,
+  isMember,
+  isOwnerOrManager,
+  isMembershipPending,
 }: OrganizationBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
   const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
+  const pathname = usePathname();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
@@ -52,7 +73,6 @@ export const OrganizationBreadcrumb = ({
   // Get current organization name from context OR prop
   // Context is preferred, but prop is fallback for pages without EnvironmentContextWrapper
   const { organization: currentOrganization } = useOrganization();
-  const { workspace } = useWorkspace();
   const organizationName = currentOrganization?.name || currentOrganizationName || "";
 
   // Lazy-load organizations when dropdown opens
@@ -93,13 +113,11 @@ export const OrganizationBreadcrumb = ({
     return;
   }
 
-  const workspaceBasePath = `/workspaces/${workspace?.id}`;
-
   const handleOrganizationChange = (organizationId: string) => {
     startTransition(() => {
       setIsOrganizationDropdownOpen(false);
-      if (organizationId === currentOrganizationId && currentWorkspaceId) {
-        router.push(`/workspaces/${currentWorkspaceId}/settings/organization/general`);
+      if (organizationId === currentOrganizationId && currentEnvironmentId) {
+        router.push(`/environments/${currentEnvironmentId}/settings/general`);
         return;
       }
       router.push(`/organizations/${organizationId}/`);
@@ -116,6 +134,50 @@ export const OrganizationBreadcrumb = ({
     });
   };
 
+  const organizationSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${currentEnvironmentId}/settings/general`,
+    },
+    {
+      id: "teams",
+      label: t("common.members_and_teams"),
+      href: `/environments/${currentEnvironmentId}/settings/teams`,
+    },
+    {
+      id: "api-keys",
+      label: t("common.api_keys"),
+      href: `/environments/${currentEnvironmentId}/settings/api-keys`,
+      disabled: isMembershipPending || !isOwnerOrManager,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
+    },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${currentEnvironmentId}/settings/domain`,
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "billing",
+      label: t("common.billing"),
+      href: `/environments/${currentEnvironmentId}/settings/billing`,
+      hidden: !isFormbricksCloud,
+    },
+    {
+      id: "enterprise",
+      label: t("common.enterprise_license"),
+      href: `/environments/${currentEnvironmentId}/settings/enterprise`,
+      hidden: isFormbricksCloud,
+      disabled: isMembershipPending || isMember,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
+    },
+  ];
+
   return (
     <BreadcrumbItem isActive={isOrganizationDropdownOpen}>
       <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
@@ -184,16 +246,43 @@ export const OrganizationBreadcrumb = ({
               )}
             </>
           )}
-          {currentWorkspaceId && (
-            <>
+          {currentEnvironmentId && (
+            <div>
               {showOrganizationDropdown && <DropdownMenuSeparator />}
-              <DropdownMenuCheckboxItem
-                onClick={() => handleSettingChange(`${workspaceBasePath}/settings/organization/general`)}
-                className="cursor-pointer">
-                <SettingsIcon className="mr-2 h-4 w-4" />
-                {t("common.settings")}
-              </DropdownMenuCheckboxItem>
-            </>
+              <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                <SettingsIcon className="mr-2 inline h-4 w-4" />
+                {t("common.organization_settings")}
+              </div>
+
+              {organizationSettings.map((setting) => {
+                return setting.hidden ? null : (
+                  <div key={setting.id}>
+                    {setting.disabled ? (
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            aria-disabled="true"
+                            className="relative flex w-full cursor-not-allowed select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
+                            {setting.label}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                          {setting.disabledMessage}
+                        </PopoverContent>
+                      </Popover>
+                    ) : (
+                      <DropdownMenuCheckboxItem
+                        checked={isActiveOrganizationSetting(pathname, setting.id)}
+                        onClick={() => handleSettingChange(setting.href)}
+                        className="cursor-pointer">
+                        {setting.label}
+                      </DropdownMenuCheckboxItem>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
           )}
         </DropdownMenuContent>
       </DropdownMenu>

apps/web/app/(app)/environments/[environmentId]/components/project-and-org-switch.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { EnvironmentBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/environment-breadcrumb";
+import { OrganizationBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/organization-breadcrumb";
+import { ProjectBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/project-breadcrumb";
+import { Breadcrumb, BreadcrumbList } from "@/modules/ui/components/breadcrumb";
+
+interface ProjectAndOrgSwitchProps {
+  currentOrganizationId: string;
+  currentOrganizationName?: string; // Optional: for pages without context
+  currentProjectId?: string;
+  currentProjectName?: string; // Optional: for pages without context
+  currentEnvironmentId?: string;
+  environments: { id: string; type: string }[];
+  isMultiOrgEnabled: boolean;
+  organizationProjectsLimit: number;
+  isFormbricksCloud: boolean;
+  isLicenseActive: boolean;
+  isOwnerOrManager: boolean;
+  isMember: boolean;
+  isBilling: boolean;
+  isMembershipPending: boolean;
+  isAccessControlAllowed: boolean;
+}
+
+export const ProjectAndOrgSwitch = ({
+  currentOrganizationId,
+  currentOrganizationName,
+  currentProjectId,
+  currentProjectName,
+  currentEnvironmentId,
+  environments,
+  isMultiOrgEnabled,
+  organizationProjectsLimit,
+  isFormbricksCloud,
+  isLicenseActive,
+  isOwnerOrManager,
+  isAccessControlAllowed,
+  isMember,
+  isBilling,
+  isMembershipPending,
+}: ProjectAndOrgSwitchProps) => {
+  const currentEnvironment = environments.find((env) => env.id === currentEnvironmentId);
+  const showEnvironmentBreadcrumb = currentEnvironment?.type === "development";
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList className="gap-0">
+        <OrganizationBreadcrumb
+          currentOrganizationId={currentOrganizationId}
+          currentOrganizationName={currentOrganizationName}
+          currentEnvironmentId={currentEnvironmentId}
+          isMultiOrgEnabled={isMultiOrgEnabled}
+          isFormbricksCloud={isFormbricksCloud}
+          isMember={isMember}
+          isOwnerOrManager={isOwnerOrManager}
+          isMembershipPending={isMembershipPending}
+        />
+        {currentProjectId && currentEnvironmentId && (
+          <ProjectBreadcrumb
+            currentProjectId={currentProjectId}
+            currentProjectName={currentProjectName}
+            currentOrganizationId={currentOrganizationId}
+            currentEnvironmentId={currentEnvironmentId}
+            isOwnerOrManager={isOwnerOrManager}
+            organizationProjectsLimit={organizationProjectsLimit}
+            isFormbricksCloud={isFormbricksCloud}
+            isLicenseActive={isLicenseActive}
+            isAccessControlAllowed={isAccessControlAllowed}
+            isEnvironmentBreadcrumbVisible={showEnvironmentBreadcrumb}
+            isBilling={isBilling}
+            isMembershipPending={isMembershipPending}
+          />
+        )}
+        {showEnvironmentBreadcrumb && (
+          <EnvironmentBreadcrumb environments={environments} currentEnvironment={currentEnvironment} />
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/components/project-breadcrumb.tsx

@@ -0,0 +1,344 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import { ChevronDownIcon, ChevronRightIcon, CogIcon, FoldersIcon, Loader2, PlusIcon } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState, useTransition } from "react";
+import { useTranslation } from "react-i18next";
+import { logger } from "@formbricks/logger";
+import { getProjectsForSwitcherAction } from "@/app/(app)/environments/[environmentId]/actions";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { CreateProjectModal } from "@/modules/projects/components/create-project-modal";
+import { ProjectLimitModal } from "@/modules/projects/components/project-limit-modal";
+import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
+import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
+import { useProject } from "../context/environment-context";
+
+interface ProjectBreadcrumbProps {
+  currentProjectId: string;
+  currentProjectName?: string; // Optional: pass directly if context not available
+  isOwnerOrManager: boolean;
+  organizationProjectsLimit: number;
+  isFormbricksCloud: boolean;
+  isLicenseActive: boolean;
+  currentOrganizationId: string;
+  currentEnvironmentId: string;
+  isAccessControlAllowed: boolean;
+  isEnvironmentBreadcrumbVisible: boolean;
+  isBilling: boolean;
+  isMembershipPending: boolean;
+}
+
+const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
+  // Match /workspace/{settingId} or /workspace/{settingId}/... but exclude settings paths
+  if (pathname.includes("/settings/")) {
+    return false;
+  }
+  // Check if path matches /workspace/{settingId} (with optional trailing path)
+  const pattern = new RegExp(`/workspace/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
+export const ProjectBreadcrumb = ({
+  currentProjectId,
+  currentProjectName,
+  isOwnerOrManager,
+  organizationProjectsLimit,
+  isFormbricksCloud,
+  isLicenseActive,
+  currentOrganizationId,
+  currentEnvironmentId,
+  isAccessControlAllowed,
+  isEnvironmentBreadcrumbVisible,
+  isBilling,
+  isMembershipPending,
+}: ProjectBreadcrumbProps) => {
+  const { t } = useTranslation();
+  const [isProjectDropdownOpen, setIsProjectDropdownOpen] = useState(false);
+  const [openCreateProjectModal, setOpenCreateProjectModal] = useState(false);
+  const [openLimitModal, setOpenLimitModal] = useState(false);
+  const router = useRouter();
+  const [isLoadingProjects, setIsLoadingProjects] = useState(false);
+  const [projects, setProjects] = useState<{ id: string; name: string }[]>([]);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const pathname = usePathname();
+
+  // Get current project name from context OR prop
+  // Context is preferred, but prop is fallback for pages without EnvironmentContextWrapper
+  const { project: currentProject } = useProject();
+  const projectName = currentProject?.name || currentProjectName || "";
+
+  // Lazy-load projects when dropdown opens
+  useEffect(() => {
+    // Only fetch when dropdown opened for first time (and no error state)
+    if (isProjectDropdownOpen && projects.length === 0 && !isLoadingProjects && !loadError) {
+      setIsLoadingProjects(true);
+      setLoadError(null); // Clear any previous errors
+      getProjectsForSwitcherAction({ organizationId: currentOrganizationId }).then((result) => {
+        if (result?.data) {
+          // Sort projects by name
+          const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+          setProjects(sorted);
+        } else {
+          // Handle server errors or validation errors
+          const errorMessage = getFormattedErrorMessage(result);
+          const error = new Error(errorMessage);
+          logger.error(error, "Failed to load projects");
+          Sentry.captureException(error);
+          setLoadError(errorMessage || t("common.failed_to_load_workspaces"));
+        }
+        setIsLoadingProjects(false);
+      });
+    }
+  }, [isProjectDropdownOpen, currentOrganizationId, projects.length, isLoadingProjects, loadError, t]);
+
+  const projectSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${currentEnvironmentId}/workspace/general`,
+    },
+    {
+      id: "look",
+      label: t("common.look_and_feel"),
+      href: `/environments/${currentEnvironmentId}/workspace/look`,
+    },
+    {
+      id: "app-connection",
+      label: t("common.website_and_app_connection"),
+      href: `/environments/${currentEnvironmentId}/workspace/app-connection`,
+    },
+    {
+      id: "integrations",
+      label: t("common.integrations"),
+      href: `/environments/${currentEnvironmentId}/workspace/integrations`,
+    },
+    {
+      id: "teams",
+      label: t("common.team_access"),
+      href: `/environments/${currentEnvironmentId}/workspace/teams`,
+    },
+    {
+      id: "languages",
+      label: t("common.survey_languages"),
+      href: `/environments/${currentEnvironmentId}/workspace/languages`,
+    },
+    {
+      id: "tags",
+      label: t("common.tags"),
+      href: `/environments/${currentEnvironmentId}/workspace/tags`,
+    },
+  ];
+  const areProjectSettingsDisabled = isMembershipPending || isBilling;
+  const projectSettingsDisabledMessage = isMembershipPending
+    ? t("common.loading")
+    : t("common.you_are_not_authorized_to_perform_this_action");
+
+  if (!currentProject) {
+    const errorMessage = `Workspace not found for workspace id: ${currentProjectId}`;
+    logger.error(errorMessage);
+    Sentry.captureException(new Error(errorMessage));
+    return;
+  }
+
+  const handleProjectChange = (projectId: string) => {
+    const targetPath =
+      projectId === currentProjectId
+        ? `/environments/${currentEnvironmentId}/surveys`
+        : `/workspaces/${projectId}/`;
+    startTransition(() => {
+      setIsProjectDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleAddProject = () => {
+    if (projects.length >= organizationProjectsLimit) {
+      setOpenLimitModal(true);
+      return;
+    }
+    setOpenCreateProjectModal(true);
+  };
+
+  const handleProjectSettingsNavigation = (settingId: string) => {
+    startTransition(() => {
+      router.push(`/environments/${currentEnvironmentId}/workspace/${settingId}`);
+    });
+  };
+
+  const LimitModalButtons = (): [ModalButton, ModalButton] => {
+    if (isFormbricksCloud) {
+      return [
+        {
+          text: t("environments.settings.billing.upgrade"),
+          href: `/environments/${currentEnvironmentId}/settings/billing`,
+        },
+        {
+          text: t("common.cancel"),
+          onClick: () => setOpenLimitModal(false),
+        },
+      ];
+    }
+
+    return [
+      {
+        text: t("environments.settings.billing.upgrade"),
+        href: isLicenseActive
+          ? `/environments/${currentEnvironmentId}/settings/enterprise`
+          : "https://formbricks.com/upgrade-self-hosted-license",
+      },
+      {
+        text: t("common.cancel"),
+        onClick: () => setOpenLimitModal(false),
+      },
+    ];
+  };
+  return (
+    <BreadcrumbItem isActive={isProjectDropdownOpen}>
+      <DropdownMenu onOpenChange={setIsProjectDropdownOpen}>
+        <DropdownMenuTrigger
+          className="flex cursor-pointer items-center gap-1 outline-none"
+          id="projectDropdownTrigger"
+          asChild>
+          <div className="flex items-center gap-1">
+            <FoldersIcon className="h-3 w-3" strokeWidth={1.5} />
+            <span>{projectName}</span>
+            {isPending && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
+            {isEnvironmentBreadcrumbVisible && !isProjectDropdownOpen ? (
+              <ChevronRightIcon className="h-3 w-3" strokeWidth={1.5} />
+            ) : (
+              <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />
+            )}
+          </div>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="start" className="mt-2">
+          <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+            <FoldersIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+            {t("common.choose_workspace")}
+          </div>
+          {isLoadingProjects && (
+            <div className="flex items-center justify-center py-2">
+              <Loader2 className="h-4 w-4 animate-spin" />
+            </div>
+          )}
+          {!isLoadingProjects && loadError && (
+            <div className="px-2 py-4">
+              <p className="mb-2 text-sm text-red-600">{loadError}</p>
+              <button
+                onClick={() => {
+                  setLoadError(null);
+                  setProjects([]);
+                }}
+                className="text-xs text-slate-600 underline hover:text-slate-800">
+                {t("common.try_again")}
+              </button>
+            </div>
+          )}
+          {!isLoadingProjects && !loadError && (
+            <>
+              <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                {projects.map((proj) => (
+                  <DropdownMenuCheckboxItem
+                    key={proj.id}
+                    checked={proj.id === currentProjectId}
+                    onClick={() => handleProjectChange(proj.id)}
+                    className="cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <span>{proj.name}</span>
+                    </div>
+                  </DropdownMenuCheckboxItem>
+                ))}
+              </DropdownMenuGroup>
+              {isMembershipPending || !isOwnerOrManager ? (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      aria-disabled="true"
+                      className="relative flex w-full cursor-not-allowed select-none items-center justify-between rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
+                      <span>{t("common.add_new_workspace")}</span>
+                      <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                    {isMembershipPending
+                      ? t("common.loading")
+                      : t("common.you_are_not_authorized_to_perform_this_action")}
+                  </PopoverContent>
+                </Popover>
+              ) : (
+                <DropdownMenuCheckboxItem
+                  onClick={handleAddProject}
+                  className="w-full cursor-pointer justify-between">
+                  <span>{t("common.add_new_workspace")}</span>
+                  <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                </DropdownMenuCheckboxItem>
+              )}
+            </>
+          )}
+          <DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+              <CogIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+              {t("common.workspace_configuration")}
+            </div>
+            {projectSettings.map((setting) => (
+              <div key={setting.id}>
+                {areProjectSettingsDisabled ? (
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <button
+                        type="button"
+                        aria-disabled="true"
+                        className="relative flex w-full cursor-not-allowed select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
+                        {setting.label}
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                      {projectSettingsDisabledMessage}
+                    </PopoverContent>
+                  </Popover>
+                ) : (
+                  <DropdownMenuCheckboxItem
+                    checked={isActiveProjectSetting(pathname, setting.id)}
+                    onClick={() => handleProjectSettingsNavigation(setting.id)}
+                    className="cursor-pointer">
+                    {setting.label}
+                  </DropdownMenuCheckboxItem>
+                )}
+              </div>
+            ))}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {/* Modals */}
+      {openLimitModal && (
+        <ProjectLimitModal
+          open={openLimitModal}
+          setOpen={setOpenLimitModal}
+          buttons={LimitModalButtons()}
+          projectLimit={organizationProjectsLimit}
+        />
+      )}
+      {openCreateProjectModal && (
+        <CreateProjectModal
+          open={openCreateProjectModal}
+          setOpen={setOpenCreateProjectModal}
+          organizationId={currentOrganizationId}
+          isAccessControlAllowed={isAccessControlAllowed}
+        />
+      )}
+    </BreadcrumbItem>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/context/environment-context.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { createContext, useContext, useMemo } from "react";
+import { TEnvironment } from "@formbricks/types/environment";
+import { TOrganization } from "@formbricks/types/organizations";
+import { TProject } from "@formbricks/types/project";
+
+export interface EnvironmentContextType {
+  environment: TEnvironment;
+  project: TProject;
+  organization: TOrganization;
+  organizationId: string;
+}
+
+const EnvironmentContext = createContext<EnvironmentContextType | null>(null);
+
+export const useEnvironment = () => {
+  const context = useContext(EnvironmentContext);
+  if (!context) {
+    throw new Error("useEnvironment must be used within an EnvironmentProvider");
+  }
+  return context;
+};
+
+export const useProject = () => {
+  const context = useContext(EnvironmentContext);
+  if (!context) {
+    return { project: null };
+  }
+  return { project: context.project };
+};
+
+export const useOrganization = () => {
+  const context = useContext(EnvironmentContext);
+  if (!context) {
+    return { organization: null };
+  }
+  return { organization: context.organization };
+};
+
+// Client wrapper component to be used in server components
+interface EnvironmentContextWrapperProps {
+  environment: TEnvironment;
+  project: TProject;
+  organization: TOrganization;
+  children: React.ReactNode;
+}
+
+export const EnvironmentContextWrapper = ({
+  environment,
+  project,
+  organization,
+  children,
+}: EnvironmentContextWrapperProps) => {
+  const environmentContextValue = useMemo(
+    () => ({
+      environment,
+      project,
+      organization,
+      organizationId: project.organizationId,
+    }),
+    [environment, project, organization]
+  );
+
+  return (
+    <EnvironmentContext.Provider value={environmentContextValue}>{children}</EnvironmentContext.Provider>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/layout.tsx

@@ -0,0 +1,38 @@
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout";
+import { EnvironmentContextWrapper } from "@/app/(app)/environments/[environmentId]/context/environment-context";
+import { authOptions } from "@/modules/auth/lib/authOptions";
+import { getEnvironmentLayoutData } from "@/modules/environments/lib/utils";
+import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
+
+const EnvLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
+  const params = await props.params;
+  const { children } = props;
+
+  // Check session first (required for userId)
+  const session = await getServerSession(authOptions);
+  if (!session?.user) {
+    return redirect(`/auth/login`);
+  }
+
+  // Single consolidated data fetch (replaces ~12 individual fetches)
+  const layoutData = await getEnvironmentLayoutData(params.environmentId, session.user.id);
+
+  return (
+    <>
+      <EnvironmentStorageHandler environmentId={params.environmentId} />
+      <EnvironmentContextWrapper
+        environment={layoutData.environment}
+        project={layoutData.project}
+        organization={layoutData.organization}>
+        <EnvironmentLayout layoutData={layoutData}>{children}</EnvironmentLayout>
+      </EnvironmentContextWrapper>
+    </>
+  );
+};
+
+export default EnvLayout;

apps/web/app/(app)/environments/[environmentId]/lib/project.test.ts

@@ -3,18 +3,18 @@ import { describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
 import { DatabaseError } from "@formbricks/types/errors";
 import { TMembership } from "@formbricks/types/memberships";
-import { getWorkspacesByUserId } from "./workspace";
+import { getProjectsByUserId } from "./project";
 
 vi.mock("@formbricks/database", () => ({
   prisma: {
-    workspace: {
+    project: {
       findMany: vi.fn(),
     },
   },
 }));
 
-describe("Workspace", () => {
-  describe("getUserWorkspaces", () => {
+describe("Project", () => {
+  describe("getUserProjects", () => {
     const mockAdminMembership: TMembership = {
       role: "manager",
       organizationId: "org1",
@@ -29,17 +29,17 @@ describe("Workspace", () => {
       accepted: true,
     };
 
-    test("should return workspaces for admin role", async () => {
-      const mockWorkspaces = [
-        { id: "workspace1", name: "Workspace 1" },
-        { id: "workspace2", name: "Workspace 2" },
+    test("should return projects for admin role", async () => {
+      const mockProjects = [
+        { id: "project1", name: "Project 1" },
+        { id: "project2", name: "Project 2" },
       ];
 
-      vi.mocked(prisma.workspace.findMany).mockResolvedValue(mockWorkspaces as any);
+      vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects as any);
 
-      const result = await getWorkspacesByUserId("user1", mockAdminMembership);
+      const result = await getProjectsByUserId("user1", mockAdminMembership);
 
-      expect(prisma.workspace.findMany).toHaveBeenCalledWith({
+      expect(prisma.project.findMany).toHaveBeenCalledWith({
         where: {
           organizationId: "org1",
         },
@@ -48,20 +48,20 @@ describe("Workspace", () => {
           name: true,
         },
       });
-      expect(result).toEqual(mockWorkspaces);
+      expect(result).toEqual(mockProjects);
     });
 
-    test("should return workspaces for member role with team restrictions", async () => {
-      const mockWorkspaces = [{ id: "workspace1", name: "Workspace 1" }];
+    test("should return projects for member role with team restrictions", async () => {
+      const mockProjects = [{ id: "project1", name: "Project 1" }];
 
-      vi.mocked(prisma.workspace.findMany).mockResolvedValue(mockWorkspaces as any);
+      vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects as any);
 
-      const result = await getWorkspacesByUserId("user1", mockMemberMembership);
+      const result = await getProjectsByUserId("user1", mockMemberMembership);
 
-      expect(prisma.workspace.findMany).toHaveBeenCalledWith({
+      expect(prisma.project.findMany).toHaveBeenCalledWith({
         where: {
           organizationId: "org1",
-          workspaceTeams: {
+          projectTeams: {
             some: {
               team: {
                 teamUsers: {
@@ -78,13 +78,13 @@ describe("Workspace", () => {
           name: true,
         },
       });
-      expect(result).toEqual(mockWorkspaces);
+      expect(result).toEqual(mockProjects);
     });
 
-    test("should return empty array when no workspaces found", async () => {
-      vi.mocked(prisma.workspace.findMany).mockResolvedValue([]);
+    test("should return empty array when no projects found", async () => {
+      vi.mocked(prisma.project.findMany).mockResolvedValue([]);
 
-      const result = await getWorkspacesByUserId("user1", mockAdminMembership);
+      const result = await getProjectsByUserId("user1", mockAdminMembership);
 
       expect(result).toEqual([]);
     });
@@ -95,27 +95,27 @@ describe("Workspace", () => {
         clientVersion: "5.0.0",
       });
 
-      vi.mocked(prisma.workspace.findMany).mockRejectedValue(prismaError);
+      vi.mocked(prisma.project.findMany).mockRejectedValue(prismaError);
 
-      await expect(getWorkspacesByUserId("user1", mockAdminMembership)).rejects.toThrow(
+      await expect(getProjectsByUserId("user1", mockAdminMembership)).rejects.toThrow(
         new DatabaseError("Database error")
       );
     });
 
     test("should re-throw unknown errors", async () => {
       const unknownError = new Error("Unknown error");
-      vi.mocked(prisma.workspace.findMany).mockRejectedValue(unknownError);
+      vi.mocked(prisma.project.findMany).mockRejectedValue(unknownError);
 
-      await expect(getWorkspacesByUserId("user1", mockAdminMembership)).rejects.toThrow(unknownError);
+      await expect(getProjectsByUserId("user1", mockAdminMembership)).rejects.toThrow(unknownError);
     });
 
     test("should validate inputs correctly", async () => {
-      await expect(getWorkspacesByUserId(123 as any, mockAdminMembership)).rejects.toThrow();
+      await expect(getProjectsByUserId(123 as any, mockAdminMembership)).rejects.toThrow();
     });
 
     test("should validate membership input correctly", async () => {
       const invalidMembership = {} as TMembership;
-      await expect(getWorkspacesByUserId("user1", invalidMembership)).rejects.toThrow();
+      await expect(getProjectsByUserId("user1", invalidMembership)).rejects.toThrow();
     });
 
     test("should handle owner role like manager", async () => {
@@ -126,12 +126,12 @@ describe("Workspace", () => {
         accepted: true,
       };
 
-      const mockWorkspaces = [{ id: "workspace1", name: "Workspace 1" }];
-      vi.mocked(prisma.workspace.findMany).mockResolvedValue(mockWorkspaces as any);
+      const mockProjects = [{ id: "project1", name: "Project 1" }];
+      vi.mocked(prisma.project.findMany).mockResolvedValue(mockProjects as any);
 
-      const result = await getWorkspacesByUserId("user1", mockOwnerMembership);
+      const result = await getProjectsByUserId("user1", mockOwnerMembership);
 
-      expect(prisma.workspace.findMany).toHaveBeenCalledWith({
+      expect(prisma.project.findMany).toHaveBeenCalledWith({
         where: {
           organizationId: "org1",
         },
@@ -140,7 +140,7 @@ describe("Workspace", () => {
           name: true,
         },
       });
-      expect(result).toEqual(mockWorkspaces);
+      expect(result).toEqual(mockProjects);
     });
   });
 });

apps/web/app/(app)/environments/[environmentId]/lib/project.ts

@@ -6,15 +6,15 @@ import { DatabaseError } from "@formbricks/types/errors";
 import { TMembership, ZMembership } from "@formbricks/types/memberships";
 import { validateInputs } from "@/lib/utils/validate";
 
-export const getWorkspacesByUserId = reactCache(
+export const getProjectsByUserId = reactCache(
   async (userId: string, orgMembership: TMembership): Promise<{ id: string; name: string }[]> => {
     validateInputs([userId, ZString], [orgMembership, ZMembership]);
 
-    let workspaceWhereClause: Prisma.WorkspaceWhereInput = {};
+    let projectWhereClause: Prisma.ProjectWhereInput = {};
 
     if (orgMembership.role === "member") {
-      workspaceWhereClause = {
-        workspaceTeams: {
+      projectWhereClause = {
+        projectTeams: {
           some: {
             team: {
               teamUsers: {
@@ -29,17 +29,17 @@ export const getWorkspacesByUserId = reactCache(
     }
 
     try {
-      const workspaces = await prisma.workspace.findMany({
+      const projects = await prisma.project.findMany({
         where: {
           organizationId: orgMembership.organizationId,
-          ...workspaceWhereClause,
+          ...projectWhereClause,
         },
         select: {
           id: true,
           name: true,
         },
       });
-      return workspaces;
+      return projects;
     } catch (error) {
       if (error instanceof Prisma.PrismaClientKnownRequestError) {
         throw new DatabaseError(error.message);

apps/web/app/(app)/environments/[environmentId]/page.tsx

@@ -3,20 +3,20 @@ import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getBillingFallbackPath } from "@/lib/membership/navigation";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
-import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 
-const WorkspacePage = async (props: { params: Promise<{ workspaceId: string }> }) => {
+const EnvironmentPage = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
-  const { session, organization } = await getWorkspaceAuth(params.workspaceId);
+  const { session, organization } = await getEnvironmentAuth(params.environmentId);
 
   const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
   const { isBilling } = getAccessFlags(currentUserMembership?.role);
 
   if (isBilling) {
-    return redirect(getBillingFallbackPath(params.workspaceId, IS_FORMBRICKS_CLOUD));
+    return redirect(getBillingFallbackPath(params.environmentId, IS_FORMBRICKS_CLOUD));
   }
 
-  return redirect(`/workspaces/${params.workspaceId}/surveys`);
+  return redirect(`/environments/${params.environmentId}/surveys`);
 };
 
-export default WorkspacePage;
+export default EnvironmentPage;

apps/web/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar.tsx

@@ -2,30 +2,28 @@
 
 import { usePathname } from "next/navigation";
 import { useTranslation } from "react-i18next";
-import { useWorkspace } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
 import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
 
 interface AccountSettingsNavbarProps {
+  environmentId?: string;
   activeId: string;
   loading?: boolean;
 }
 
-export const AccountSettingsNavbar = ({ activeId, loading }: AccountSettingsNavbarProps) => {
+export const AccountSettingsNavbar = ({ environmentId, activeId, loading }: AccountSettingsNavbarProps) => {
   const pathname = usePathname();
   const { t } = useTranslation();
-  const { workspace } = useWorkspace();
-  const workspaceBasePath = `/workspaces/${workspace?.id}`;
   const navigation = [
     {
       id: "profile",
       label: t("common.profile"),
-      href: `${workspaceBasePath}/settings/account/profile`,
+      href: `/environments/${environmentId}/settings/profile`,
       current: pathname?.includes("/profile"),
     },
     {
       id: "notifications",
       label: t("common.notifications"),
-      href: `${workspaceBasePath}/settings/account/notifications`,
+      href: `/environments/${environmentId}/settings/notifications`,
       current: pathname?.includes("/notifications"),
     },
   ];

apps/web/app/(app)/environments/[environmentId]/settings/(account)/layout.tsx

@@ -0,0 +1,38 @@
+import { getServerSession } from "next-auth";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
+import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
+import { getProjectByEnvironmentId } from "@/lib/project/service";
+import { getTranslate } from "@/lingodotdev/server";
+import { authOptions } from "@/modules/auth/lib/authOptions";
+
+const AccountSettingsLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
+  const params = await props.params;
+
+  const { children } = props;
+
+  const t = await getTranslate();
+  const [organization, project, session] = await Promise.all([
+    getOrganizationByEnvironmentId(params.environmentId),
+    getProjectByEnvironmentId(params.environmentId),
+    getServerSession(authOptions),
+  ]);
+
+  if (!organization) {
+    throw new ResourceNotFoundError(t("common.organization"), null);
+  }
+
+  if (!project) {
+    throw new ResourceNotFoundError(t("common.workspace"), null);
+  }
+
+  if (!session) {
+    throw new AuthenticationError(t("common.not_authenticated"));
+  }
+
+  return <>{children}</>;
+};
+
+export default AccountSettingsLayout;

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/components/EditAlerts.tsx

@@ -4,7 +4,6 @@ import { HelpCircleIcon, UsersIcon } from "lucide-react";
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
 import { TUser } from "@formbricks/types/user";
-import { useWorkspace } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 import { Membership } from "../types";
 import { NotificationSwitch } from "./NotificationSwitch";
@@ -12,6 +11,7 @@ import { NotificationSwitch } from "./NotificationSwitch";
 interface EditAlertsProps {
   memberships: Membership[];
   user: TUser;
+  environmentId: string;
   autoDisableNotificationType: string;
   autoDisableNotificationElementId: string;
 }
@@ -19,11 +19,11 @@ interface EditAlertsProps {
 export const EditAlerts = ({
   memberships,
   user,
+  environmentId,
   autoDisableNotificationType,
   autoDisableNotificationElementId,
 }: EditAlertsProps) => {
   const { t } = useTranslation();
-  const { workspace: currentWorkspace } = useWorkspace();
   return (
     <>
       {memberships.map((membership) => (
@@ -37,10 +37,10 @@ export const EditAlerts = ({
 
             <div className="col-span-3 flex items-center justify-end pr-2">
               <p className="pr-4 text-sm text-slate-600">
-                {t("workspace.settings.notifications.auto_subscribe_to_new_surveys")}
+                {t("environments.settings.notifications.auto_subscribe_to_new_surveys")}
               </p>
               <NotificationSwitch
-                surveyOrWorkspaceOrOrganizationId={membership.organization.id}
+                surveyOrProjectOrOrganizationId={membership.organization.id}
                 notificationSettings={user.notificationSettings!}
                 notificationType={"unsubscribedOrganizationIds"}
                 autoDisableNotificationType={autoDisableNotificationType}
@@ -55,38 +55,44 @@ export const EditAlerts = ({
                 <Tooltip>
                   <TooltipTrigger>
                     <div className="col-span-1 flex cursor-default items-center justify-center space-x-2">
-                      <span>{t("workspace.settings.notifications.every_response")}</span>
+                      <span>{t("environments.settings.notifications.every_response")}</span>
                       <HelpCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>
-                    {t("workspace.settings.notifications.every_response_tooltip")}
+                    {t("environments.settings.notifications.every_response_tooltip")}
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
             </div>
 
-            {membership.organization.workspaces.some((workspace) => workspace.surveys.length > 0) ? (
+            {membership.organization.projects.some((project) =>
+              project.environments.some((environment) => environment.surveys.length > 0)
+            ) ? (
               <div className="grid-cols-8 space-y-1 p-2">
-                {membership.organization.workspaces.map((workspace) => (
-                  <div key={workspace.id}>
-                    {workspace.surveys.map((survey) => (
-                      <div
-                        className="grid h-auto w-full cursor-pointer grid-cols-3 place-content-center rounded-lg px-2 py-2 text-left text-sm text-slate-900 hover:bg-slate-50"
-                        key={survey.name}>
-                        <div className="col-span-2 text-left">
-                          <div className="font-medium text-slate-900">{survey.name}</div>
-                          <div className="text-xs text-slate-400">{workspace.name}</div>
-                        </div>
-                        <div className="col-span-1 text-center">
-                          <NotificationSwitch
-                            surveyOrWorkspaceOrOrganizationId={survey.id}
-                            notificationSettings={user.notificationSettings!}
-                            notificationType={"alert"}
-                            autoDisableNotificationType={autoDisableNotificationType}
-                            autoDisableNotificationElementId={autoDisableNotificationElementId}
-                          />
-                        </div>
+                {membership.organization.projects.map((project) => (
+                  <div key={project.id}>
+                    {project.environments.map((environment) => (
+                      <div key={environment.id}>
+                        {environment.surveys.map((survey) => (
+                          <div
+                            className="grid h-auto w-full cursor-pointer grid-cols-3 place-content-center rounded-lg px-2 py-2 text-left text-sm text-slate-900 hover:bg-slate-50"
+                            key={survey.name}>
+                            <div className="col-span-2 text-left">
+                              <div className="font-medium text-slate-900">{survey.name}</div>
+                              <div className="text-xs text-slate-400">{project.name}</div>
+                            </div>
+                            <div className="col-span-1 text-center">
+                              <NotificationSwitch
+                                surveyOrProjectOrOrganizationId={survey.id}
+                                notificationSettings={user.notificationSettings!}
+                                notificationType={"alert"}
+                                autoDisableNotificationType={autoDisableNotificationType}
+                                autoDisableNotificationElementId={autoDisableNotificationElementId}
+                              />
+                            </div>
+                          </div>
+                        ))}
                       </div>
                     ))}
                   </div>
@@ -98,10 +104,8 @@ export const EditAlerts = ({
               </div>
             )}
             <p className="pb-3 pl-4 text-xs text-slate-400">
-              {t("workspace.settings.notifications.want_to_loop_in_organization_mates")}{" "}
-              <Link
-                className="font-semibold"
-                href={`/workspaces/${currentWorkspace?.id}/settings/organization/general`}>
+              {t("environments.settings.notifications.want_to_loop_in_organization_mates")}{" "}
+              <Link className="font-semibold" href={`/environments/${environmentId}/settings/general`}>
                 {t("common.invite_them")}
               </Link>
             </p>

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/components/IntegrationsTip.tsx

@@ -1,22 +1,24 @@
 "use client";
 
 import { useTranslation } from "react-i18next";
-import { useWorkspace } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
 import { SlackIcon } from "@/modules/ui/components/icons";
 
-export const IntegrationsTip = () => {
+interface IntegrationsTipProps {
+  environmentId: string;
+}
+
+export const IntegrationsTip = ({ environmentId }: IntegrationsTipProps) => {
   const { t } = useTranslation();
-  const { workspace } = useWorkspace();
   return (
     <div>
       <div className="flex max-w-4xl items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
         <SlackIcon className="mr-3 h-4 w-4 text-blue-400" />
         <p className="text-sm">
-          {t("workspace.settings.notifications.need_slack_or_discord_notifications")}?
+          {t("environments.settings.notifications.need_slack_or_discord_notifications")}?
           <a
-            href={`/workspaces/${workspace?.id}/settings/workspace/integrations`}
+            href={`/environments/${environmentId}/workspace/integrations`}
             className="ml-1 cursor-pointer text-sm underline">
-            {t("workspace.settings.notifications.use_the_integration")}
+            {t("environments.settings.notifications.use_the_integration")}
           </a>
         </p>
       </div>

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/components/NotificationSwitch.tsx

@@ -10,7 +10,7 @@ import { Switch } from "@/modules/ui/components/switch";
 import { updateNotificationSettingsAction } from "../actions";
 
 interface NotificationSwitchProps {
-  surveyOrWorkspaceOrOrganizationId: string;
+  surveyOrProjectOrOrganizationId: string;
   notificationSettings: TUserNotificationSettings;
   notificationType: "alert" | "unsubscribedOrganizationIds";
   autoDisableNotificationType?: string;
@@ -18,7 +18,7 @@ interface NotificationSwitchProps {
 }
 
 export const NotificationSwitch = ({
-  surveyOrWorkspaceOrOrganizationId,
+  surveyOrProjectOrOrganizationId,
   notificationSettings,
   notificationType,
   autoDisableNotificationType,
@@ -29,8 +29,8 @@ export const NotificationSwitch = ({
   const router = useRouter();
   const isChecked =
     notificationType === "unsubscribedOrganizationIds"
-      ? !notificationSettings.unsubscribedOrganizationIds?.includes(surveyOrWorkspaceOrOrganizationId)
-      : notificationSettings[notificationType]?.[surveyOrWorkspaceOrOrganizationId] === true;
+      ? !notificationSettings.unsubscribedOrganizationIds?.includes(surveyOrProjectOrOrganizationId)
+      : notificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId] === true;
 
   const handleSwitchChange = async () => {
     setIsLoading(true);
@@ -38,21 +38,21 @@ export const NotificationSwitch = ({
     let updatedNotificationSettings = { ...notificationSettings };
     if (notificationType === "unsubscribedOrganizationIds") {
       const unsubscribedOrganizationIds = updatedNotificationSettings.unsubscribedOrganizationIds ?? [];
-      if (unsubscribedOrganizationIds.includes(surveyOrWorkspaceOrOrganizationId)) {
+      if (unsubscribedOrganizationIds.includes(surveyOrProjectOrOrganizationId)) {
         updatedNotificationSettings.unsubscribedOrganizationIds = unsubscribedOrganizationIds.filter(
-          (id) => id !== surveyOrWorkspaceOrOrganizationId
+          (id) => id !== surveyOrProjectOrOrganizationId
         );
       } else {
         updatedNotificationSettings.unsubscribedOrganizationIds = [
           ...unsubscribedOrganizationIds,
-          surveyOrWorkspaceOrOrganizationId,
+          surveyOrProjectOrOrganizationId,
         ];
       }
     } else {
       updatedNotificationSettings[notificationType] = {
         ...updatedNotificationSettings[notificationType],
-        [surveyOrWorkspaceOrOrganizationId]:
-          !updatedNotificationSettings[notificationType]?.[surveyOrWorkspaceOrOrganizationId],
+        [surveyOrProjectOrOrganizationId]:
+          !updatedNotificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId],
       };
     }
 
@@ -60,7 +60,7 @@ export const NotificationSwitch = ({
       notificationSettings: updatedNotificationSettings,
     });
     if (updatedNotificationSettingsActionResponse?.data) {
-      toast.success(t("workspace.settings.notifications.notification_settings_updated"), {
+      toast.success(t("environments.settings.notifications.notification_settings_updated"), {
         id: "notification-switch",
       });
       router.refresh();
@@ -76,16 +76,16 @@ export const NotificationSwitch = ({
   useEffect(() => {
     if (
       autoDisableNotificationType &&
-      autoDisableNotificationElementId === surveyOrWorkspaceOrOrganizationId &&
+      autoDisableNotificationElementId === surveyOrProjectOrOrganizationId &&
       isChecked
     ) {
       switch (notificationType) {
         case "alert":
-          if (notificationSettings[notificationType]?.[surveyOrWorkspaceOrOrganizationId] === true) {
+          if (notificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId] === true) {
             handleSwitchChange();
             toast.success(
               t(
-                "workspace.settings.notifications.you_will_not_receive_any_more_emails_for_responses_on_this_survey"
+                "environments.settings.notifications.you_will_not_receive_any_more_emails_for_responses_on_this_survey"
               ),
               {
                 id: "notification-switch",
@@ -95,13 +95,11 @@ export const NotificationSwitch = ({
           break;
 
         case "unsubscribedOrganizationIds":
-          if (
-            !notificationSettings.unsubscribedOrganizationIds?.includes(surveyOrWorkspaceOrOrganizationId)
-          ) {
+          if (!notificationSettings.unsubscribedOrganizationIds?.includes(surveyOrProjectOrOrganizationId)) {
             handleSwitchChange();
             toast.success(
               t(
-                "workspace.settings.notifications.you_will_not_be_auto_subscribed_to_this_organizations_surveys_anymore"
+                "environments.settings.notifications.you_will_not_be_auto_subscribed_to_this_organizations_surveys_anymore"
               ),
               {
                 id: "notification-switch",

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/loading.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslation } from "react-i18next";
 import { LoadingCard } from "@/app/(app)/components/LoadingCard";
+import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 
@@ -9,15 +10,17 @@ const Loading = () => {
   const { t } = useTranslation();
   const cards = [
     {
-      title: t("workspace.settings.notifications.email_alerts_surveys"),
-      description: t("workspace.settings.notifications.set_up_an_alert_to_get_an_email_on_new_responses"),
+      title: t("environments.settings.notifications.email_alerts_surveys"),
+      description: t("environments.settings.notifications.set_up_an_alert_to_get_an_email_on_new_responses"),
       skeletonLines: [{ classes: "h-6 w-28" }, { classes: "h-10 w-128" }, { classes: "h-10 w-128" }],
     },
   ];
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.notifications")} />
+      <PageHeader pageTitle={t("common.account_settings")}>
+        <AccountSettingsNavbar activeId="notifications" loading />
+      </PageHeader>
       {cards.map((card, index) => (
         <LoadingCard key={index} {...card} />
       ))}

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/page.tsx

@@ -2,15 +2,16 @@ import { getServerSession } from "next-auth";
 import { prisma } from "@formbricks/database";
 import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TUserNotificationSettings } from "@formbricks/types/user";
-import { EditAlerts } from "@/app/(app)/workspaces/[workspaceId]/settings/account/notifications/components/EditAlerts";
-import { IntegrationsTip } from "@/app/(app)/workspaces/[workspaceId]/settings/account/notifications/components/IntegrationsTip";
-import type { Membership } from "@/app/(app)/workspaces/[workspaceId]/settings/account/notifications/types";
-import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
+import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
+import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
+import { EditAlerts } from "./components/EditAlerts";
+import { IntegrationsTip } from "./components/IntegrationsTip";
+import type { Membership } from "./types";
 
 const setCompleteNotificationSettings = (
   notificationSettings: TUserNotificationSettings,
@@ -21,14 +22,16 @@ const setCompleteNotificationSettings = (
     unsubscribedOrganizationIds: notificationSettings.unsubscribedOrganizationIds || [],
   };
   for (const membership of memberships) {
-    for (const workspace of membership.organization.workspaces) {
+    for (const project of membership.organization.projects) {
       // set default values for alerts
-      for (const survey of workspace.surveys) {
-        newNotificationSettings.alert[survey.id] =
-          (notificationSettings as unknown as Record<string, Record<string, boolean>>)[survey.id]
-            ?.responseFinished ||
-          (notificationSettings.alert && notificationSettings.alert[survey.id]) ||
-          false; // check for legacy notification settings w/o "alerts" key
+      for (const environment of project.environments) {
+        for (const survey of environment.surveys) {
+          newNotificationSettings.alert[survey.id] =
+            (notificationSettings as unknown as Record<string, Record<string, boolean>>)[survey.id]
+              ?.responseFinished ||
+            (notificationSettings.alert && notificationSettings.alert[survey.id]) ||
+            false; // check for legacy notification settings w/o "alerts" key
+        }
       }
     }
   }
@@ -44,17 +47,17 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
       },
       OR: [
         {
-          // Fetch all workspaces if user role is owner or manager
+          // Fetch all projects if user role is owner or manager
           role: {
             in: ["owner", "manager"],
           },
         },
         {
-          // Filter workspaces based on team membership if user is not owner or manager
+          // Filter projects based on team membership if user is not owner or manager
           organization: {
-            workspaces: {
+            projects: {
               some: {
-                workspaceTeams: {
+                projectTeams: {
                   some: {
                     team: {
                       teamUsers: {
@@ -76,12 +79,12 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
         select: {
           id: true,
           name: true,
-          workspaces: {
+          projects: {
             // Apply conditional filtering based on user's role
             where: {
               OR: [
                 {
-                  // Fetch all workspaces if user is owner or manager
+                  // Fetch all projects if user is owner or manager
                   organization: {
                     memberships: {
                       some: {
@@ -94,8 +97,8 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
                   },
                 },
                 {
-                  // Only include workspaces accessible through teams if user is not owner or manager
-                  workspaceTeams: {
+                  // Only include projects accessible through teams if user is not owner or manager
+                  projectTeams: {
                     some: {
                       team: {
                         teamUsers: {
@@ -112,10 +115,18 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
             select: {
               id: true,
               name: true,
-              surveys: {
+              environments: {
+                where: {
+                  type: "production",
+                },
                 select: {
                   id: true,
-                  name: true,
+                  surveys: {
+                    select: {
+                      id: true,
+                      name: true,
+                    },
+                  },
                 },
               },
             },
@@ -127,8 +138,12 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
   return memberships;
 };
 
-const Page = async (props: { searchParams: Promise<Record<string, string>> }) => {
+const Page = async (props: {
+  params: Promise<{ environmentId: string }>;
+  searchParams: Promise<Record<string, string>>;
+}) => {
   const searchParams = await props.searchParams;
+  const params = await props.params;
   const t = await getTranslate();
   const session = await getServerSession(authOptions);
   if (!session) {
@@ -151,18 +166,23 @@ const Page = async (props: { searchParams: Promise<Record<string, string>> }) =>
   }
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.notifications")} />
+      <PageHeader pageTitle={t("common.account_settings")}>
+        <AccountSettingsNavbar environmentId={params.environmentId} activeId="notifications" />
+      </PageHeader>
       <SettingsCard
-        title={t("workspace.settings.notifications.email_alerts_surveys")}
-        description={t("workspace.settings.notifications.set_up_an_alert_to_get_an_email_on_new_responses")}>
+        title={t("environments.settings.notifications.email_alerts_surveys")}
+        description={t(
+          "environments.settings.notifications.set_up_an_alert_to_get_an_email_on_new_responses"
+        )}>
         <EditAlerts
           memberships={memberships}
           user={user}
+          environmentId={params.environmentId}
           autoDisableNotificationType={autoDisableNotificationType}
           autoDisableNotificationElementId={autoDisableNotificationElementId}
         />
       </SettingsCard>
-      <IntegrationsTip />
+      <IntegrationsTip environmentId={params.environmentId} />
     </PageContentWrapper>
   );
 };

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/types.ts

@@ -4,12 +4,15 @@ export interface Membership {
   organization: {
     id: string;
     name: string;
-    workspaces: {
+    projects: {
       id: string;
       name: string;
-      surveys: {
+      environments: {
         id: string;
-        name: string;
+        surveys: {
+          id: string;
+          name: string;
+        }[];
       }[];
     }[];
   };

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/actions.ts

@@ -6,11 +6,9 @@ import {
   TUserUpdateInput,
   ZUserPersonalInfoUpdateInput,
 } from "@formbricks/types/user";
-import {
-  getIsEmailUnique,
-  verifyUserPassword,
-} from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/lib/user";
+import { getIsEmailUnique } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user";
 import { EMAIL_VERIFICATION_DISABLED, PASSWORD_RESET_DISABLED } from "@/lib/constants";
+import { verifyUserPassword } from "@/lib/user/password";
 import { getUser, updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity.tsx

@@ -31,11 +31,11 @@ export const AccountSecurity = ({ user }: AccountSecurityProps) => {
         />
         <div className="flex flex-col">
           <h1 className="text-sm font-semibold text-slate-800">
-            {t("workspace.settings.profile.two_factor_authentication")}
+            {t("environments.settings.profile.two_factor_authentication")}
           </h1>
 
           <p className="text-xs text-slate-600">
-            {t("workspace.settings.profile.two_factor_authentication_description")}
+            {t("environments.settings.profile.two_factor_authentication_description")}
           </p>
         </div>
       </div>

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/DeleteAccount.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type { Session } from "next-auth";
+import { useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { TOrganization } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
+import { DeleteAccountModal } from "@/modules/account/components/DeleteAccountModal";
+import {
+  ACCOUNT_DELETION_GOOGLE_REAUTH_NOT_CONFIGURED_ERROR_CODE,
+  ACCOUNT_DELETION_SSO_REAUTH_ERROR_QUERY_PARAM,
+} from "@/modules/account/constants";
+import { Button } from "@/modules/ui/components/button";
+import { TooltipRenderer } from "@/modules/ui/components/tooltip";
+
+interface DeleteAccountProps {
+  session: Session | null;
+  IS_FORMBRICKS_CLOUD: boolean;
+  user: TUser;
+  organizationsWithSingleOwner: TOrganization[];
+  accountDeletionError?: string | string[];
+  isMultiOrgEnabled: boolean;
+  requiresPasswordConfirmation: boolean;
+}
+
+export const DeleteAccount = ({
+  session,
+  IS_FORMBRICKS_CLOUD,
+  user,
+  organizationsWithSingleOwner,
+  accountDeletionError,
+  isMultiOrgEnabled,
+  requiresPasswordConfirmation,
+}: Readonly<DeleteAccountProps>) => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const isDeleteDisabled = !isMultiOrgEnabled && organizationsWithSingleOwner.length > 0;
+  const { t } = useTranslation();
+  const accountDeletionErrorCode = Array.isArray(accountDeletionError)
+    ? accountDeletionError[0]
+    : accountDeletionError;
+  const hasShownAccountDeletionError = useRef(false);
+
+  useEffect(() => {
+    if (!accountDeletionErrorCode || hasShownAccountDeletionError.current) {
+      return;
+    }
+
+    hasShownAccountDeletionError.current = true;
+
+    if (accountDeletionErrorCode === ACCOUNT_DELETION_GOOGLE_REAUTH_NOT_CONFIGURED_ERROR_CODE) {
+      toast.error(t("environments.settings.profile.google_sso_account_deletion_requires_setup"), {
+        id: "account-deletion-sso-reauth-error",
+      });
+    } else {
+      toast.error(t("environments.settings.profile.sso_reauthentication_failed"), {
+        id: "account-deletion-sso-reauth-error",
+      });
+    }
+
+    const url = new URL(globalThis.location.href);
+    url.searchParams.delete(ACCOUNT_DELETION_SSO_REAUTH_ERROR_QUERY_PARAM);
+    globalThis.history.replaceState(null, "", url.toString());
+  }, [accountDeletionErrorCode, t]);
+
+  if (!session) {
+    return null;
+  }
+
+  return (
+    <div>
+      <DeleteAccountModal
+        requiresPasswordConfirmation={requiresPasswordConfirmation}
+        open={isModalOpen}
+        setOpen={setModalOpen}
+        user={user}
+        isFormbricksCloud={IS_FORMBRICKS_CLOUD}
+        organizationsWithSingleOwner={organizationsWithSingleOwner}
+      />
+      <p className="text-sm text-slate-700">
+        <strong>{t("environments.settings.profile.warning_cannot_undo")}</strong>
+      </p>
+      <TooltipRenderer
+        shouldRender={isDeleteDisabled}
+        tooltipContent={t("environments.settings.profile.warning_cannot_delete_account")}>
+        <Button
+          className="mt-4"
+          variant="destructive"
+          size="sm"
+          onClick={() => setModalOpen(!isModalOpen)}
+          disabled={isDeleteDisabled}>
+          {t("environments.settings.profile.confirm_delete_my_account")}
+        </Button>
+      </TooltipRenderer>
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EditProfileDetailsForm.tsx

@@ -8,7 +8,7 @@ import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { TUser, TUserUpdateInput, ZUser, ZUserEmail } from "@formbricks/types/user";
-import { PasswordConfirmationModal } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/password-confirmation-modal";
+import { PasswordConfirmationModal } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal";
 import { appLanguages, sortedAppLanguages } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
@@ -91,13 +91,13 @@ export const EditProfileDetailsForm = ({
       if (!emailVerificationDisabled) {
         toast.success(t("auth.verification-requested.new_email_verification_success"));
       } else {
-        toast.success(t("workspace.settings.profile.email_change_initiated"));
+        toast.success(t("environments.settings.profile.email_change_initiated"));
         await signOutWithAudit({
           reason: "email_change",
           redirectUrl: "/email-change-without-verification-success",
           redirect: true,
           callbackUrl: "/email-change-without-verification-success",
-          clearWorkspaceId: true,
+          clearEnvironmentId: true,
         });
         return;
       }
@@ -124,7 +124,7 @@ export const EditProfileDetailsForm = ({
           toast.error(getFormattedErrorMessage(result));
           return;
         }
-        toast.success(t("workspace.settings.profile.profile_updated_successfully"));
+        toast.success(t("environments.settings.profile.profile_updated_successfully"));
         window.location.reload();
         form.reset(data);
       } catch (error: any) {
@@ -145,7 +145,7 @@ export const EditProfileDetailsForm = ({
         redirectUrl: "/auth/login",
         redirect: true,
         callbackUrl: "/auth/login",
-        clearWorkspaceId: true,
+        clearEnvironmentId: true,
       });
     } else {
       const errorMessage = getFormattedErrorMessage(result);

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user.test.ts

@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { prisma } from "@formbricks/database";
+import { getIsEmailUnique } from "./user";
+
+vi.mock("@formbricks/database", () => ({
+  prisma: {
+    user: {
+      findUnique: vi.fn(),
+    },
+  },
+}));
+
+const mockPrismaUserFindUnique = vi.mocked(prisma.user.findUnique);
+
+describe("User Library Tests", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe("getIsEmailUnique", () => {
+    const email = "test@example.com";
+
+    test("should return false if user exists", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue({
+        id: "some-user-id",
+      } as any);
+
+      const result = await getIsEmailUnique(email);
+      expect(result).toBe(false);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { email },
+        select: { id: true },
+      });
+    });
+
+    test("should return true if user does not exist", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue(null);
+
+      const result = await getIsEmailUnique(email);
+      expect(result).toBe(true);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { email },
+        select: { id: true },
+      });
+    });
+  });
+});

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user.ts

@@ -0,0 +1,15 @@
+import { cache as reactCache } from "react";
+import { prisma } from "@formbricks/database";
+
+export const getIsEmailUnique = reactCache(async (email: string): Promise<boolean> => {
+  const user = await prisma.user.findUnique({
+    where: {
+      email: email.toLowerCase(),
+    },
+    select: {
+      id: true,
+    },
+  });
+
+  return !user;
+});

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/loading.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslation } from "react-i18next";
 import { LoadingCard } from "@/app/(app)/components/LoadingCard";
+import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 
@@ -9,8 +10,8 @@ const Loading = () => {
   const { t } = useTranslation();
   const cards = [
     {
-      title: t("workspace.settings.profile.personal_information"),
-      description: t("workspace.settings.profile.update_personal_info"),
+      title: t("environments.settings.profile.personal_information"),
+      description: t("environments.settings.profile.update_personal_info"),
       skeletonLines: [
         { classes: "h-4 w-28" },
         { classes: "h-6 w-64" },
@@ -19,15 +20,17 @@ const Loading = () => {
       ],
     },
     {
-      title: t("workspace.settings.profile.delete_account"),
-      description: t("workspace.settings.profile.confirm_delete_account"),
+      title: t("environments.settings.profile.delete_account"),
+      description: t("environments.settings.profile.confirm_delete_account"),
       skeletonLines: [{ classes: "h-4 w-60" }, { classes: "h-8 w-24" }],
     },
   ];
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.profile")} />
+      <PageHeader pageTitle={t("common.account_settings")}>
+        <AccountSettingsNavbar activeId="profile" loading />
+      </PageHeader>
       {cards.map((card, index) => (
         <LoadingCard key={index} {...card} />
       ))}

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/page.tsx

@@ -1,25 +1,33 @@
 import { AuthenticationError } from "@formbricks/types/errors";
-import { AccountSecurity } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/AccountSecurity";
-import { DeleteAccount } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/DeleteAccount";
-import { EditProfileDetailsForm } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/EditProfileDetailsForm";
-import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
+import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
+import { AccountSecurity } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity";
 import { EMAIL_VERIFICATION_DISABLED, IS_FORMBRICKS_CLOUD, PASSWORD_RESET_DISABLED } from "@/lib/constants";
 import { getOrganizationsWhereUserIsSingleOwner } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
+import { requiresPasswordConfirmationForAccountDeletion } from "@/modules/account/lib/account-deletion-auth";
 import { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
-import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
+import { SettingsCard } from "../../components/SettingsCard";
+import { DeleteAccount } from "./components/DeleteAccount";
+import { EditProfileDetailsForm } from "./components/EditProfileDetailsForm";
 
-const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
+const Page = async (props: {
+  params: Promise<{ environmentId: string }>;
+  searchParams: Promise<{ accountDeletionError?: string | string[] }>;
+}) => {
   const isTwoFactorAuthEnabled = await getIsTwoFactorAuthEnabled();
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
   const params = await props.params;
+  const searchParams = await props.searchParams;
   const t = await getTranslate();
-  const { session } = await getWorkspaceAuth(params.workspaceId);
+  const { environmentId } = params;
+
+  const { session } = await getEnvironmentAuth(params.environmentId);
 
   const organizationsWithSingleOwner = await getOrganizationsWhereUserIsSingleOwner(session.user.id);
 
@@ -30,15 +38,18 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
   }
 
   const isPasswordResetEnabled = !PASSWORD_RESET_DISABLED && user.identityProvider === "email";
+  const requiresPasswordConfirmation = requiresPasswordConfirmationForAccountDeletion(user);
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.profile")} />
+      <PageHeader pageTitle={t("common.account_settings")}>
+        <AccountSettingsNavbar environmentId={environmentId} activeId="profile" />
+      </PageHeader>
       {user && (
         <div>
           <SettingsCard
-            title={t("workspace.settings.profile.personal_information")}
-            description={t("workspace.settings.profile.update_personal_info")}>
+            title={t("environments.settings.profile.personal_information")}
+            description={t("environments.settings.profile.update_personal_info")}>
             <EditProfileDetailsForm
               user={user}
               emailVerificationDisabled={EMAIL_VERIFICATION_DISABLED}
@@ -48,24 +59,24 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
           {user.identityProvider === "email" && (
             <SettingsCard
               title={t("common.security")}
-              description={t("workspace.settings.profile.security_description")}>
+              description={t("environments.settings.profile.security_description")}>
               {!isTwoFactorAuthEnabled && !user.twoFactorEnabled ? (
                 <UpgradePrompt
-                  title={t("workspace.settings.profile.unlock_two_factor_authentication")}
-                  description={t("workspace.settings.profile.two_factor_authentication_description")}
+                  title={t("environments.settings.profile.unlock_two_factor_authentication")}
+                  description={t("environments.settings.profile.two_factor_authentication_description")}
                   buttons={[
                     {
                       text: IS_FORMBRICKS_CLOUD
                         ? t("common.upgrade_plan")
                         : t("common.request_trial_license"),
                       href: IS_FORMBRICKS_CLOUD
-                        ? `/workspaces/${params.workspaceId}/settings/organization/billing`
+                        ? `/environments/${params.environmentId}/settings/billing`
                         : "https://formbricks.com/upgrade-self-hosting-license",
                     },
                     {
                       text: t("common.learn_more"),
                       href: IS_FORMBRICKS_CLOUD
-                        ? `/workspaces/${params.workspaceId}/settings/organization/billing`
+                        ? `/environments/${params.environmentId}/settings/billing`
                         : "https://formbricks.com/learn-more-self-hosting-license",
                     },
                   ]}
@@ -77,14 +88,16 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
           )}
 
           <SettingsCard
-            title={t("workspace.settings.profile.delete_account")}
-            description={t("workspace.settings.profile.confirm_delete_account")}>
+            title={t("environments.settings.profile.delete_account")}
+            description={t("environments.settings.profile.confirm_delete_account")}>
             <DeleteAccount
               session={session}
               IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
               user={user}
               organizationsWithSingleOwner={organizationsWithSingleOwner}
               isMultiOrgEnabled={isMultiOrgEnabled}
+              accountDeletionError={searchParams.accountDeletionError}
+              requiresPasswordConfirmation={requiresPasswordConfirmation}
             />
           </SettingsCard>
           <IdBadge id={user.id} label={t("common.profile_id")} variant="column" />

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/api-keys/loading.tsx

@@ -0,0 +1,6 @@
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import Loading from "@/modules/organization/settings/api-keys/loading";
+
+export default function LoadingPage() {
+  return <Loading isFormbricksCloud={IS_FORMBRICKS_CLOUD} />;
+}

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/billing/loading.tsx

@@ -1,3 +1,5 @@
+import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
@@ -6,7 +8,9 @@ const Loading = async () => {
   const t = await getTranslate();
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.billing")} />
+      <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
+        <OrganizationSettingsNavbar isFormbricksCloud={IS_FORMBRICKS_CLOUD} activeId="billing" loading />
+      </PageHeader>
       <div className="my-8 h-64 animate-pulse rounded-xl bg-slate-200"></div>
       <div className="my-8 h-96 animate-pulse rounded-md bg-slate-200"></div>
     </PageContentWrapper>

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
+
+interface OrganizationSettingsNavbarProps {
+  environmentId?: string;
+  isFormbricksCloud: boolean;
+  membershipRole?: TOrganizationRole;
+  activeId: string;
+  loading?: boolean;
+}
+
+export const OrganizationSettingsNavbar = ({
+  environmentId,
+  isFormbricksCloud,
+  membershipRole,
+  activeId,
+  loading,
+}: OrganizationSettingsNavbarProps) => {
+  const pathname = usePathname();
+  const { isMember, isOwner, isManager } = getAccessFlags(membershipRole);
+  const isOwnerOrManager = isOwner || isManager;
+  const isMembershipPending = membershipRole === undefined || loading;
+  const { t } = useTranslation();
+
+  const navigation = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${environmentId}/settings/general`,
+      current: pathname?.includes("/general"),
+      hidden: false,
+    },
+    {
+      id: "teams",
+      label: t("common.members_and_teams"),
+      href: `/environments/${environmentId}/settings/teams`,
+      current: pathname?.includes("/teams"),
+    },
+    {
+      id: "api-keys",
+      label: t("common.api_keys"),
+      href: `/environments/${environmentId}/settings/api-keys`,
+      current: pathname?.includes("/api-keys"),
+      disabled: isMembershipPending || !isOwnerOrManager,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
+    },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${environmentId}/settings/domain`,
+      current: pathname?.includes("/domain"),
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "billing",
+      label: t("common.billing"),
+      href: `/environments/${environmentId}/settings/billing`,
+      hidden: !isFormbricksCloud,
+      current: pathname?.includes("/billing"),
+    },
+    {
+      id: "enterprise",
+      label: t("common.enterprise_license"),
+      href: `/environments/${environmentId}/settings/enterprise`,
+      hidden: isFormbricksCloud,
+      disabled: isMembershipPending || isMember,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
+      current: pathname?.includes("/enterprise"),
+    },
+  ];
+
+  return <SecondaryNavigation navigation={navigation} activeId={activeId} loading={loading} />;
+};

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/domain/components/pretty-urls-table.tsx

@@ -11,10 +11,13 @@ interface SurveyWithSlug {
   name: string;
   slug: string | null;
   status: TSurveyStatus;
-  workspace: {
+  environment: {
     id: string;
-    name: string;
-    organizationId: string;
+    type: "production" | "development";
+    project: {
+      id: string;
+      name: string;
+    };
   };
   createdAt: Date;
 }
@@ -26,19 +29,27 @@ interface PrettyUrlsTableProps {
 export const PrettyUrlsTable = ({ surveys }: PrettyUrlsTableProps) => {
   const { t } = useTranslation();
 
+  const getEnvironmentBadgeColor = (type: string) => {
+    return type === "production" ? "bg-green-100 text-green-800" : "bg-blue-100 text-blue-800";
+  };
+
   const tableHeaders = [
     {
-      label: t("workspace.settings.domain.survey_name"),
+      label: t("environments.settings.domain.survey_name"),
       key: "name",
     },
     {
-      label: t("workspace.settings.domain.workspace"),
-      key: "workspace",
+      label: t("environments.settings.domain.workspace"),
+      key: "project",
     },
     {
-      label: t("workspace.settings.domain.pretty_url"),
+      label: t("environments.settings.domain.pretty_url"),
       key: "slug",
     },
+    {
+      label: t("common.environment"),
+      key: "environment",
+    },
   ];
 
   return (
@@ -56,8 +67,8 @@ export const PrettyUrlsTable = ({ surveys }: PrettyUrlsTableProps) => {
         <TableBody className="[&_tr:last-child]:border-b">
           {surveys.length === 0 && (
             <TableRow className="hover:bg-transparent">
-              <TableCell colSpan={3} className="text-center text-slate-500">
-                {t("workspace.settings.domain.no_pretty_urls")}
+              <TableCell colSpan={4} className="text-center text-slate-500">
+                {t("environments.settings.domain.no_pretty_urls")}
               </TableCell>
             </TableRow>
           )}
@@ -65,15 +76,23 @@ export const PrettyUrlsTable = ({ surveys }: PrettyUrlsTableProps) => {
             <TableRow key={survey.id} className="border-slate-200 hover:bg-transparent">
               <TableCell className="font-medium">
                 <Link
-                  href={`/workspaces/${survey.workspace.id}/surveys/${survey.id}/summary`}
+                  href={`/environments/${survey.environment.id}/surveys/${survey.id}/summary`}
                   className="text-slate-900 hover:text-slate-700 hover:underline">
                   {survey.name}
                 </Link>
               </TableCell>
-              <TableCell>{survey.workspace.name}</TableCell>
+              <TableCell>{survey.environment.project.name}</TableCell>
               <TableCell>
                 <IdBadge id={survey.slug ?? ""} />
               </TableCell>
+              <TableCell>
+                <span
+                  className={`rounded px-2 py-1 text-xs font-medium ${getEnvironmentBadgeColor(survey.environment.type)}`}>
+                  {survey.environment.type === "production"
+                    ? t("common.production")
+                    : t("common.development")}
+                </span>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/domain/page.tsx

@@ -1,18 +1,19 @@
 import { notFound } from "next/navigation";
 import { AuthenticationError } from "@formbricks/types/errors";
-import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
-import { PrettyUrlsTable } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/domain/components/pretty-urls-table";
 import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
 import { FaviconCustomizationSettings } from "@/modules/ee/whitelabel/favicon-customization/components/favicon-customization-settings";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { getSurveysWithSlugsByOrganizationId } from "@/modules/survey/lib/slug";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
-import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
+import { SettingsCard } from "../../components/SettingsCard";
+import { OrganizationSettingsNavbar } from "../components/OrganizationSettingsNavbar";
+import { PrettyUrlsTable } from "./components/pretty-urls-table";
 
-const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
 
@@ -20,7 +21,9 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
     return notFound();
   }
 
-  const { session, organization, isOwner, isManager } = await getWorkspaceAuth(params.workspaceId);
+  const { session, currentUserMembership, organization, isOwner, isManager } = await getEnvironmentAuth(
+    params.environmentId
+  );
 
   if (!session) {
     throw new AuthenticationError(t("common.not_authenticated"));
@@ -33,7 +36,14 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.domain")} />
+      <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
+        <OrganizationSettingsNavbar
+          environmentId={params.environmentId}
+          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
+          membershipRole={currentUserMembership?.role}
+          activeId="domain"
+        />
+      </PageHeader>
 
       {!IS_STORAGE_CONFIGURED && (
         <div className="max-w-4xl">
@@ -46,14 +56,14 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
       <FaviconCustomizationSettings
         organization={organization}
         hasWhiteLabelPermission={hasWhiteLabelPermission}
-        workspaceId={params.workspaceId}
+        environmentId={params.environmentId}
         isReadOnly={!isOwnerOrManager}
         isStorageConfigured={IS_STORAGE_CONFIGURED}
       />
 
       <SettingsCard
-        title={t("workspace.settings.domain.title")}
-        description={t("workspace.settings.domain.description")}>
+        title={t("environments.settings.domain.title")}
+        description={t("environments.settings.domain.description")}>
         <PrettyUrlsTable surveys={surveys} />
       </SettingsCard>
     </PageContentWrapper>

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/components/EnterpriseLicenseFeaturesTable.tsx

@@ -3,12 +3,12 @@
 import type { TFunction } from "i18next";
 import Link from "next/link";
 import { useTranslation } from "react-i18next";
-import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
+import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
 import type { TEnterpriseLicenseFeatures } from "@/modules/ee/license-check/types/enterprise-license";
 import { Badge } from "@/modules/ui/components/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/modules/ui/components/table";
 
-type TPublicLicenseFeatureKey = Exclude<keyof TEnterpriseLicenseFeatures, "isMultiOrgEnabled">;
+type TPublicLicenseFeatureKey = Exclude<keyof TEnterpriseLicenseFeatures, "isMultiOrgEnabled" | "ai">;
 
 type TFeatureDefinition = {
   key: TPublicLicenseFeatureKey;
@@ -20,70 +20,60 @@ const getFeatureDefinitions = (t: TFunction): TFeatureDefinition[] => {
   return [
     {
       key: "contacts",
-      labelKey: t("workspace.settings.enterprise.license_feature_contacts"),
+      labelKey: t("environments.settings.enterprise.license_feature_contacts"),
       docsUrl:
         "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/contact-management-segments",
     },
     {
-      key: "workspaces",
-      labelKey: t("workspace.settings.enterprise.license_feature_workspaces"),
+      key: "projects",
+      labelKey: t("environments.settings.enterprise.license_feature_projects"),
       docsUrl: "https://formbricks.com/docs/self-hosting/advanced/license",
     },
     {
       key: "whitelabel",
-      labelKey: t("workspace.settings.enterprise.license_feature_whitelabel"),
+      labelKey: t("environments.settings.enterprise.license_feature_whitelabel"),
       docsUrl:
         "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/whitelabel-email-follow-ups",
     },
     {
       key: "removeBranding",
-      labelKey: t("workspace.settings.enterprise.license_feature_remove_branding"),
+      labelKey: t("environments.settings.enterprise.license_feature_remove_branding"),
       docsUrl:
         "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/hide-powered-by-formbricks",
     },
     {
       key: "twoFactorAuth",
-      labelKey: t("workspace.settings.enterprise.license_feature_two_factor_auth"),
+      labelKey: t("environments.settings.enterprise.license_feature_two_factor_auth"),
       docsUrl: "https://formbricks.com/docs/xm-and-surveys/core-features/user-management/two-factor-auth",
     },
     {
       key: "sso",
-      labelKey: t("workspace.settings.enterprise.license_feature_sso"),
+      labelKey: t("environments.settings.enterprise.license_feature_sso"),
       docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/oidc-sso",
     },
     {
       key: "saml",
-      labelKey: t("workspace.settings.enterprise.license_feature_saml"),
+      labelKey: t("environments.settings.enterprise.license_feature_saml"),
       docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/saml-sso",
     },
     {
       key: "spamProtection",
-      labelKey: t("workspace.settings.enterprise.license_feature_spam_protection"),
+      labelKey: t("environments.settings.enterprise.license_feature_spam_protection"),
       docsUrl: "https://formbricks.com/docs/xm-and-surveys/surveys/general-features/spam-protection",
     },
-    {
-      key: "aiSmartTools",
-      labelKey: t("workspace.settings.general.ai_smart_tools_enabled"),
-      docsUrl: "https://formbricks.com/docs/self-hosting/configuration/ai",
-    },
-    {
-      key: "aiDataAnalysis",
-      labelKey: t("workspace.settings.general.ai_data_analysis_enabled"),
-      docsUrl: "https://formbricks.com/docs/self-hosting/configuration/ai",
-    },
     {
       key: "auditLogs",
-      labelKey: t("workspace.settings.enterprise.license_feature_audit_logs"),
+      labelKey: t("environments.settings.enterprise.license_feature_audit_logs"),
       docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/audit-logging",
     },
     {
       key: "accessControl",
-      labelKey: t("workspace.settings.enterprise.license_feature_access_control"),
+      labelKey: t("environments.settings.enterprise.license_feature_access_control"),
       docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/team-access",
     },
     {
       key: "quotas",
-      labelKey: t("workspace.settings.enterprise.license_feature_quotas"),
+      labelKey: t("environments.settings.enterprise.license_feature_quotas"),
       docsUrl: "https://formbricks.com/docs/xm-and-surveys/surveys/general-features/quota-management",
     },
   ];
@@ -98,15 +88,15 @@ export const EnterpriseLicenseFeaturesTable = ({ features }: EnterpriseLicenseFe
 
   return (
     <SettingsCard
-      title={t("workspace.settings.enterprise.license_features_table_title")}
-      description={t("workspace.settings.enterprise.license_features_table_description")}
+      title={t("environments.settings.enterprise.license_features_table_title")}
+      description={t("environments.settings.enterprise.license_features_table_description")}
       noPadding>
       <Table>
         <TableHeader>
           <TableRow className="hover:bg-white">
-            <TableHead>{t("workspace.settings.enterprise.license_features_table_feature")}</TableHead>
-            <TableHead>{t("workspace.settings.enterprise.license_features_table_access")}</TableHead>
-            <TableHead>{t("workspace.settings.enterprise.license_features_table_value")}</TableHead>
+            <TableHead>{t("environments.settings.enterprise.license_features_table_feature")}</TableHead>
+            <TableHead>{t("environments.settings.enterprise.license_features_table_access")}</TableHead>
+            <TableHead>{t("environments.settings.enterprise.license_features_table_value")}</TableHead>
             <TableHead>{t("common.documentation")}</TableHead>
           </TableRow>
         </TableHeader>
@@ -119,7 +109,7 @@ export const EnterpriseLicenseFeaturesTable = ({ features }: EnterpriseLicenseFe
             if (typeof value === "number") {
               displayValue = value;
             } else if (value === null) {
-              displayValue = t("workspace.settings.enterprise.license_features_table_unlimited");
+              displayValue = t("environments.settings.enterprise.license_features_table_unlimited");
             }
 
             return (
@@ -131,8 +121,8 @@ export const EnterpriseLicenseFeaturesTable = ({ features }: EnterpriseLicenseFe
                     size="normal"
                     text={
                       isEnabled
-                        ? t("workspace.settings.enterprise.license_features_table_enabled")
-                        : t("workspace.settings.enterprise.license_features_table_disabled")
+                        ? t("environments.settings.enterprise.license_features_table_enabled")
+                        : t("environments.settings.enterprise.license_features_table_disabled")
                     }
                   />
                 </TableCell>

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/components/EnterpriseLicenseStatus.tsx

@@ -18,7 +18,7 @@ interface EnterpriseLicenseStatusProps {
   status: TLicenseStatus;
   lastChecked: Date;
   gracePeriodEnd?: Date;
-  workspaceId: string;
+  environmentId: string;
 }
 
 const getBadgeConfig = (
@@ -27,20 +27,20 @@ const getBadgeConfig = (
 ): { type: "success" | "error" | "warning" | "gray"; label: string } => {
   switch (status) {
     case "active":
-      return { type: "success", label: t("workspace.settings.enterprise.license_status_active") };
+      return { type: "success", label: t("environments.settings.enterprise.license_status_active") };
     case "expired":
-      return { type: "error", label: t("workspace.settings.enterprise.license_status_expired") };
+      return { type: "error", label: t("environments.settings.enterprise.license_status_expired") };
     case "instance_mismatch":
       return {
         type: "error",
-        label: t("workspace.settings.enterprise.license_status_instance_mismatch"),
+        label: t("environments.settings.enterprise.license_status_instance_mismatch"),
       };
     case "unreachable":
-      return { type: "warning", label: t("workspace.settings.enterprise.license_status_unreachable") };
+      return { type: "warning", label: t("environments.settings.enterprise.license_status_unreachable") };
     case "invalid_license":
-      return { type: "error", label: t("workspace.settings.enterprise.license_status_invalid") };
+      return { type: "error", label: t("environments.settings.enterprise.license_status_invalid") };
     default:
-      return { type: "gray", label: t("workspace.settings.enterprise.license_status") };
+      return { type: "gray", label: t("environments.settings.enterprise.license_status") };
   }
 };
 
@@ -48,7 +48,7 @@ export const EnterpriseLicenseStatus = ({
   status,
   lastChecked,
   gracePeriodEnd,
-  workspaceId,
+  environmentId,
 }: EnterpriseLicenseStatusProps) => {
   const { t, i18n } = useTranslation();
   const locale = i18n.resolvedLanguage ?? i18n.language ?? "en-US";
@@ -58,29 +58,29 @@ export const EnterpriseLicenseStatus = ({
   const handleRecheck = async () => {
     setIsRechecking(true);
     try {
-      const result = await recheckLicenseAction({ workspaceId });
+      const result = await recheckLicenseAction({ environmentId });
       if (result?.serverError) {
-        toast.error(result.serverError || t("workspace.settings.enterprise.recheck_license_failed"));
+        toast.error(result.serverError || t("environments.settings.enterprise.recheck_license_failed"));
         return;
       }
 
       if (result?.data) {
         if (result.data.status === "unreachable") {
-          toast.error(t("workspace.settings.enterprise.recheck_license_unreachable"));
+          toast.error(t("environments.settings.enterprise.recheck_license_unreachable"));
         } else if (result.data.status === "instance_mismatch") {
-          toast.error(t("workspace.settings.enterprise.recheck_license_instance_mismatch"));
+          toast.error(t("environments.settings.enterprise.recheck_license_instance_mismatch"));
         } else if (result.data.status === "invalid_license") {
-          toast.error(t("workspace.settings.enterprise.recheck_license_invalid"));
+          toast.error(t("environments.settings.enterprise.recheck_license_invalid"));
         } else {
-          toast.success(t("workspace.settings.enterprise.recheck_license_success"));
+          toast.success(t("environments.settings.enterprise.recheck_license_success"));
         }
         router.refresh();
       } else {
-        toast.error(t("workspace.settings.enterprise.recheck_license_failed"));
+        toast.error(t("environments.settings.enterprise.recheck_license_failed"));
       }
     } catch (error) {
       toast.error(
-        error instanceof Error ? error.message : t("workspace.settings.enterprise.recheck_license_failed")
+        error instanceof Error ? error.message : t("environments.settings.enterprise.recheck_license_failed")
       );
     } finally {
       setIsRechecking(false);
@@ -91,8 +91,8 @@ export const EnterpriseLicenseStatus = ({
 
   return (
     <SettingsCard
-      title={t("workspace.settings.enterprise.license_status")}
-      description={t("workspace.settings.enterprise.license_status_description")}>
+      title={t("environments.settings.enterprise.license_status")}
+      description={t("environments.settings.enterprise.license_status_description")}>
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between gap-3">
           <div className="flex flex-col gap-1.5">
@@ -113,12 +113,12 @@ export const EnterpriseLicenseStatus = ({
             {isRechecking ? (
               <>
                 <RotateCcwIcon className="mr-2 h-4 w-4 animate-spin" />
-                {t("workspace.settings.enterprise.rechecking")}
+                {t("environments.settings.enterprise.rechecking")}
               </>
             ) : (
               <>
                 <RotateCcwIcon className="mr-2 h-4 w-4" />
-                {t("workspace.settings.enterprise.recheck_license")}
+                {t("environments.settings.enterprise.recheck_license")}
               </>
             )}
           </Button>
@@ -126,7 +126,7 @@ export const EnterpriseLicenseStatus = ({
         {status === "unreachable" && gracePeriodEnd && (
           <Alert variant="warning" size="small">
             <AlertDescription className="overflow-visible whitespace-normal">
-              {t("workspace.settings.enterprise.license_unreachable_grace_period", {
+              {t("environments.settings.enterprise.license_unreachable_grace_period", {
                 gracePeriodEnd: formatDateForDisplay(new Date(gracePeriodEnd), locale, {
                   year: "numeric",
                   month: "short",
@@ -139,19 +139,19 @@ export const EnterpriseLicenseStatus = ({
         {status === "invalid_license" && (
           <Alert variant="error" size="small">
             <AlertDescription className="overflow-visible whitespace-normal">
-              {t("workspace.settings.enterprise.license_invalid_description")}
+              {t("environments.settings.enterprise.license_invalid_description")}
             </AlertDescription>
           </Alert>
         )}
         {status === "instance_mismatch" && (
           <Alert variant="error" size="small">
             <AlertDescription className="overflow-visible whitespace-normal">
-              {t("workspace.settings.enterprise.license_instance_mismatch_description")}
+              {t("environments.settings.enterprise.license_instance_mismatch_description")}
             </AlertDescription>
           </Alert>
         )}
         <p className="border-t border-slate-100 pt-4 text-sm text-slate-500">
-          {t("workspace.settings.enterprise.questions_please_reach_out_to")}{" "}
+          {t("environments.settings.enterprise.questions_please_reach_out_to")}{" "}
           <a
             className="font-medium text-slate-700 underline hover:text-slate-900"
             href="mailto:hola@formbricks.com">

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/loading.tsx

@@ -1,3 +1,5 @@
+import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
@@ -6,7 +8,9 @@ const Loading = async () => {
   const t = await getTranslate();
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.enterprise_license")} />
+      <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
+        <OrganizationSettingsNavbar isFormbricksCloud={IS_FORMBRICKS_CLOUD} activeId="enterprise" loading />
+      </PageHeader>
       <div className="my-8 h-64 animate-pulse rounded-xl bg-slate-200"></div>
       <div className="my-8 h-96 animate-pulse rounded-md bg-slate-200"></div>
     </PageContentWrapper>

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/page.tsx

@@ -1,24 +1,25 @@
 import { CheckIcon } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { EnterpriseLicenseFeaturesTable } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/components/EnterpriseLicenseFeaturesTable";
-import { EnterpriseLicenseStatus } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/components/EnterpriseLicenseStatus";
+import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
+import { EnterpriseLicenseStatus } from "@/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/components/EnterpriseLicenseStatus";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { GRACE_PERIOD_MS, getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
-import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
+import { EnterpriseLicenseFeaturesTable } from "./components/EnterpriseLicenseFeaturesTable";
 
-const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
   if (IS_FORMBRICKS_CLOUD) {
     return notFound();
   }
 
-  const { isMember } = await getWorkspaceAuth(params.workspaceId);
+  const { isMember, currentUserMembership } = await getEnvironmentAuth(params.environmentId);
 
   const isPricingDisabled = isMember;
 
@@ -31,52 +32,52 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
 
   const paidFeatures = [
     {
-      title: t("workspace.settings.billing.remove_branding"),
+      title: t("environments.settings.billing.remove_branding"),
       comingSoon: false,
       onRequest: false,
     },
     {
-      title: t("workspace.settings.enterprise.sso"),
+      title: t("environments.settings.enterprise.sso"),
       comingSoon: false,
       onRequest: false,
     },
     {
-      title: t("workspace.languages.multi_language_surveys"),
+      title: t("environments.workspace.languages.multi_language_surveys"),
       comingSoon: false,
       onRequest: false,
     },
     {
-      title: t("workspace.settings.enterprise.organization_roles"),
+      title: t("environments.settings.enterprise.organization_roles"),
       comingSoon: false,
       onRequest: false,
     },
     {
-      title: t("workspace.settings.enterprise.teams"),
+      title: t("environments.settings.enterprise.teams"),
       comingSoon: false,
       onRequest: false,
     },
     {
-      title: t("workspace.settings.enterprise.contacts_and_segments"),
+      title: t("environments.settings.enterprise.contacts_and_segments"),
       comingSoon: false,
       onRequest: false,
     },
     {
-      title: t("workspace.settings.enterprise.audit_logs"),
+      title: t("environments.settings.enterprise.audit_logs"),
       comingSoon: false,
       onRequest: true,
     },
     {
-      title: t("workspace.settings.enterprise.saml_sso"),
+      title: t("environments.settings.enterprise.saml_sso"),
       comingSoon: false,
       onRequest: true,
     },
     {
-      title: t("workspace.settings.enterprise.service_level_agreement"),
+      title: t("environments.settings.enterprise.service_level_agreement"),
       comingSoon: false,
       onRequest: true,
     },
     {
-      title: t("workspace.settings.enterprise.soc2_hipaa_iso_27001_compliance_check"),
+      title: t("environments.settings.enterprise.soc2_hipaa_iso_27001_compliance_check"),
       comingSoon: false,
       onRequest: true,
     },
@@ -84,7 +85,14 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.enterprise_license")} />
+      <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
+        <OrganizationSettingsNavbar
+          environmentId={params.environmentId}
+          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
+          membershipRole={currentUserMembership?.role}
+          activeId="enterprise"
+        />
+      </PageHeader>
       {hasLicense ? (
         <>
           <EnterpriseLicenseStatus
@@ -95,7 +103,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
                 ? new Date(licenseState.lastChecked.getTime() + GRACE_PERIOD_MS)
                 : undefined
             }
-            workspaceId={params.workspaceId}
+            environmentId={params.environmentId}
           />
           {licenseState.features && <EnterpriseLicenseFeaturesTable features={licenseState.features} />}
         </>
@@ -122,19 +130,21 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
             </svg>
             <div className="mx-auto text-center lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
               <h2 className="text-2xl font-bold text-white sm:text-3xl">
-                {t("workspace.settings.enterprise.unlock_the_full_power_of_formbricks_free_for_30_days")}
+                {t("environments.settings.enterprise.unlock_the_full_power_of_formbricks_free_for_30_days")}
               </h2>
               <p className="text-md mt-6 leading-8 text-slate-300">
-                {t("workspace.settings.enterprise.keep_full_control_over_your_data_privacy_and_security")}
+                {t("environments.settings.enterprise.keep_full_control_over_your_data_privacy_and_security")}
                 <br />
-                {t("workspace.settings.enterprise.get_an_enterprise_license_to_get_access_to_all_features")}
+                {t(
+                  "environments.settings.enterprise.get_an_enterprise_license_to_get_access_to_all_features"
+                )}
               </p>
             </div>
           </div>
           <div className="mt-8 rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
             <div className="p-8">
               <h2 className="mr-2 inline-flex text-2xl font-bold text-slate-700">
-                {t("workspace.settings.enterprise.enterprise_features")}
+                {t("environments.settings.enterprise.enterprise_features")}
               </h2>
               <ul className="my-4 space-y-4">
                 {paidFeatures.map((feature) => (
@@ -145,12 +155,12 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
                     <span className="ml-2 text-sm text-slate-500 dark:text-slate-400">{feature.title}</span>
                     {feature.comingSoon && (
                       <span className="mx-2 rounded-full bg-blue-100 px-3 py-1 text-xs text-blue-700 dark:bg-slate-700 dark:text-teal-500">
-                        {t("workspace.settings.enterprise.coming_soon")}
+                        {t("environments.settings.enterprise.coming_soon")}
                       </span>
                     )}
                     {feature.onRequest && (
                       <span className="mx-2 rounded-full bg-violet-100 px-3 py-1 text-xs text-violet-700 dark:bg-slate-700 dark:text-teal-500">
-                        {t("workspace.settings.enterprise.on_request")}
+                        {t("environments.settings.enterprise.on_request")}
                       </span>
                     )}
                   </li>
@@ -158,7 +168,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
               </ul>
               <p className="my-6 text-sm text-slate-700">
                 {t(
-                  "workspace.settings.enterprise.no_call_needed_no_strings_attached_request_a_free_30_day_trial_license_to_test_all_features_by_filling_out_this_form"
+                  "environments.settings.enterprise.no_call_needed_no_strings_attached_request_a_free_30_day_trial_license_to_test_all_features_by_filling_out_this_form"
                 )}
               </p>
               <Button asChild>
@@ -167,11 +177,11 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
                   target="_blank"
                   rel="noopener noreferrer nofollow"
                   referrerPolicy="no-referrer">
-                  {t("workspace.settings.enterprise.request_30_day_trial_license")}
+                  {t("environments.settings.enterprise.request_30_day_trial_license")}
                 </Link>
               </Button>
               <p className="mt-2 text-xs text-slate-500">
-                {t("workspace.settings.enterprise.no_credit_card_no_sales_call_just_test_it")}
+                {t("environments.settings.enterprise.no_credit_card_no_sales_call_just_test_it")}
               </p>
             </div>
           </div>

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/actions.ts

@@ -113,7 +113,7 @@ const assertOrganizationAISettingsUpdateAllowed = ({
   t: Awaited<ReturnType<typeof getTranslate>>;
 }) => {
   if (resolvedSettings.isEnablingAnyAISetting && !isInstanceAIConfigured) {
-    throw new OperationNotAllowedError(t("workspace.settings.general.ai_instance_not_configured"));
+    throw new OperationNotAllowedError(t("environments.settings.general.ai_instance_not_configured"));
   }
 };
 
@@ -170,7 +170,7 @@ export const deleteOrganizationAction = authenticatedActionClient
       const isMultiOrgEnabled = await getIsMultiOrgEnabled();
       if (!isMultiOrgEnabled) {
         const t = await getTranslate(ctx.user.locale);
-        throw new OperationNotAllowedError(t("workspace.settings.general.organization_deletion_disabled"));
+        throw new OperationNotAllowedError(t("environments.settings.general.organization_deletion_disabled"));
       }
 
       await checkAuthorizationUpdated({