research docs & vibed UI

2026-05-11 02:24:13 -05:00 · 2026-01-19 17:47:27 +00:00
2374 changed files with 79658 additions and 177854 deletions
@@ -1 +0,0 @@
-{"sessionId":"f77248e2-8840-41c6-968b-c3b7d8a9e913","pid":49125,"acquiredAt":1776168010367}
@@ -1,9 +0,0 @@
-# THIS IS AUTOGENERATED. DO NOT EDIT MANUALLY
-version = 1
-name = "formbricks"
-
-[setup]
-script = '''
-pnpm install
-pnpm dev:setup
-'''
@@ -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  #
 ################
@@ -136,12 +94,6 @@ EMAIL_VERIFICATION_DISABLED=1
 # Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
 PASSWORD_RESET_DISABLED=1

-# Password reset token lifetime in minutes. Must be between 5 and 120 if set.
-# PASSWORD_RESET_TOKEN_LIFETIME_MINUTES=30
-
-# Development-only helper: log the password reset link to the server console instead of sending reset emails.
-# DEBUG_SHOW_RESET_LINK=1
-
 # Email login. Disable the ability for users to login with email.
 # EMAIL_AUTH_DISABLED=1

@@ -180,32 +132,6 @@ AZUREAD_CLIENT_ID=
 AZUREAD_CLIENT_SECRET=
 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
-# Set AI_MODEL to the provider-specific model or deployment name and configure the matching provider settings below.
-# AI_PROVIDER=google
-# AI_MODEL=gemini-2.5-flash
-
-# Google Cloud settings for Gemini models
-# Credentials are optional when Application Default Credentials are available.
-# AI_GOOGLE_CLOUD_PROJECT=
-# AI_GOOGLE_CLOUD_LOCATION=
-# AI_GOOGLE_CLOUD_CREDENTIALS_JSON=
-# AI_GOOGLE_CLOUD_APPLICATION_CREDENTIALS=
-
-# Amazon Bedrock credentials
-# AI_AWS_REGION=
-# AI_AWS_ACCESS_KEY_ID=
-# AI_AWS_SECRET_ACCESS_KEY=
-# AI_AWS_SESSION_TOKEN=
-
-# Azure AI / Microsoft Foundry credentials
-# AI_AZURE_BASE_URL=
-# AI_AZURE_RESOURCE_NAME=
-# AI_AZURE_API_KEY=
-# AI_AZURE_API_VERSION=v1
-
 # OpenID Connect (OIDC) configuration
 # OIDC_CLIENT_ID=
 # OIDC_CLIENT_SECRET=
@@ -224,7 +150,6 @@ NOTION_OAUTH_CLIENT_ID=
 NOTION_OAUTH_CLIENT_SECRET=

 # Stripe Billing Variables
-STRIPE_PUBLISHABLE_KEY=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=

@@ -259,21 +184,8 @@ ENTERPRISE_LICENSE_KEY=
 # Ignore Rate Limiting across the Formbricks app
 # RATE_LIMITING_DISABLED=1

-# Disable telemetry reporting (usage stats sent to Formbricks). Ignored when an EE license is active.
-# TELEMETRY_DISABLED=1
-
-# Allow webhook URLs to point to internal/private network addresses (e.g. localhost, 192.168.x.x)
-# WARNING: Only enable this if you understand the SSRF risks. Useful for self-hosted instances
-# that need to send webhooks to internal services.
-# DANGEROUSLY_ALLOW_WEBHOOK_INTERNAL_URLS=1
-
-# OpenTelemetry OTLP endpoint (base URL, exporters append /v1/traces and /v1/metrics)
-# OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
-# OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
-# OTEL_SERVICE_NAME=formbricks
-# OTEL_RESOURCE_ATTRIBUTES=deployment.environment=development
-# OTEL_TRACES_SAMPLER=parentbased_traceidratio
-# OTEL_TRACES_SAMPLER_ARG=1
+# OpenTelemetry URL for tracing
+# OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces

 # Unsplash API Key
 UNSPLASH_ACCESS_KEY=
@@ -311,13 +223,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
+LINGODOTDEV_API_KEY=your_api_key_here
@@ -285,14 +285,12 @@ runs:
          encryption_key=${{ env.DUMMY_ENCRYPTION_KEY }}
          redis_url=${{ env.DUMMY_REDIS_URL }}
          sentry_auth_token=${{ env.SENTRY_AUTH_TOKEN }}
-          posthog_key=${{ env.POSTHOG_KEY }}
      env:
        DEPOT_PROJECT_TOKEN: ${{ env.DEPOT_PROJECT_TOKEN }}
        DUMMY_DATABASE_URL: ${{ env.DUMMY_DATABASE_URL }}
        DUMMY_ENCRYPTION_KEY: ${{ env.DUMMY_ENCRYPTION_KEY }}
        DUMMY_REDIS_URL: ${{ env.DUMMY_REDIS_URL }}
        SENTRY_AUTH_TOKEN: ${{ env.SENTRY_AUTH_TOKEN }}
-        POSTHOG_KEY: ${{ env.POSTHOG_KEY }}

    - name: Sign GHCR image (GHCR only)
      if: ${{ inputs.registry_type == 'ghcr' && (github.event_name == 'workflow_call' || github.event_name == 'release' || github.event_name == 'workflow_dispatch') }}
@@ -57,14 +57,16 @@ runs:
      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

@@ -92,4 +92,3 @@ jobs:
          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
          DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
@@ -68,12 +68,16 @@ jobs:
        run: pnpm install --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
@@ -31,8 +31,15 @@ jobs:
      - name: Install dependencies
        run: pnpm install --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
@@ -65,8 +65,8 @@ jobs:
          set -euo pipefail

          echo "Updating Chart.yaml with version: ${VERSION}"
-          yq -i ".version = \"${VERSION}\"" charts/formbricks/Chart.yaml
-          yq -i ".appVersion = \"${VERSION}\"" charts/formbricks/Chart.yaml
+          yq -i ".version = \"${VERSION}\"" helm-chart/Chart.yaml
+          yq -i ".appVersion = \"${VERSION}\"" helm-chart/Chart.yaml

          echo "✅ Successfully updated Chart.yaml"

@@ -77,7 +77,7 @@ jobs:
          set -euo pipefail

          echo "Packaging Helm chart version: ${VERSION}"
-          helm package ./charts/formbricks
+          helm package ./helm-chart

          echo "✅ Successfully packaged formbricks-${VERSION}.tgz"

@@ -9,7 +9,6 @@ on:
  merge_group:
 permissions:
  contents: read
-  pull-requests: read
 jobs:
  sonarqube:
    name: SonarQube
@@ -35,11 +34,15 @@ jobs:
      - name: Install dependencies
        run: pnpm install --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
@@ -47,9 +50,6 @@ jobs:
          pnpm test:coverage
      - name: SonarQube Scan
        uses: SonarSource/sonarqube-scan-action@2500896589ef8f7247069a56136f8dc177c27ccf
-        with:
-          args: >
-            -Dsonar.verbose=true
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
@@ -32,11 +32,15 @@ jobs:
      - name: Install dependencies
        run: pnpm install --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
@@ -6,9 +6,19 @@ permissions:
 on:
  pull_request:
    types: [opened, synchronize, reopened]
+    paths:
+      - "apps/web/**/*.ts"
+      - "apps/web/**/*.tsx"
+      - "apps/web/locales/**/*.json"
+      - "scan-translations.ts"
  push:
    branches:
      - main
+    paths:
+      - "apps/web/**/*.ts"
+      - "apps/web/**/*.tsx"
+      - "apps/web/locales/**/*.json"
+      - "scan-translations.ts"

 jobs:
  validate-translations:
@@ -22,39 +32,32 @@ jobs:
        with:
          egress-policy: audit

-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2

-      - name: Check for relevant changes
-        id: changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      - name: Setup Node.js
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
        with:
-          filters: |
-            translations:
-              - 'apps/web/**/*.ts'
-              - 'apps/web/**/*.tsx'
-              - 'apps/web/locales/**/*.json'
-              - 'packages/surveys/src/**/*.{ts,tsx}'
-              - 'packages/surveys/locales/**/*.json'
-              - 'packages/email/**/*.{ts,tsx}'
+          node-version: 18

-      - name: Setup Node.js 22.x
-        if: steps.changes.outputs.translations == 'true'
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+      - name: Setup pnpm
+        uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d # v3.0.0
        with:
-          node-version: 22.x
-
-      - name: Install pnpm
-        if: steps.changes.outputs.translations == 'true'
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+          version: 9.15.9

      - name: Install dependencies
-        if: steps.changes.outputs.translations == 'true'
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile

      - name: Validate translation keys
-        if: steps.changes.outputs.translations == 'true'
-        run: pnpm run scan-translations
+        run: |
+          echo ""
+          echo "🔍 Validating translation keys..."
+          echo ""
+          pnpm run scan-translations

-      - name: Skip (no translation-related changes)
-        if: steps.changes.outputs.translations != 'true'
-        run: echo "No translation-related files changed — skipping validation."
+      - name: Summary
+        if: success()
+        run: |
+          echo ""
+          echo "✅ Translation validation completed successfully!"
+          echo ""
@@ -13,7 +13,6 @@
 **/.next/
 **/out/
 **/build
-**/next-env.d.ts

 # node
 **/dist/
@@ -45,7 +44,7 @@ yarn-error.log*
 .direnv

 # Playwright
-**/test-results/
+/test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
@@ -64,5 +63,3 @@ packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdat
 .cursorrules
 i18n.cache
 stats.html
-# next-agents-md
-.next-docs/
@@ -0,0 +1,2 @@
+echo "{\"branchName\": \"$(git rev-parse --abbrev-ref HEAD)\"}" > ./branch.json
+prettier --write ./branch.json
@@ -1,13 +1,40 @@
-#!/usr/bin/env sh
+# Load environment variables from .env files
+if [ -f .env ]; then
+  set -a
+  . .env
+  set +a
+fi

-if command -v pnpm >/dev/null 2>&1; then
-  pnpm lint-staged
-elif command -v npm >/dev/null 2>&1; then
-  npm exec --yes pnpm@10.32.1 lint-staged
-elif command -v corepack >/dev/null 2>&1; then
-  corepack pnpm lint-staged
+pnpm lint-staged
+
+# Run Lingo.dev i18n workflow if LINGODOTDEV_API_KEY is set
+if [ -n "$LINGODOTDEV_API_KEY" ]; then
+  echo ""
+  echo "🌍 Running Lingo.dev translation workflow..."
+  echo ""
+  
+  # Run translation generation and validation
+  if pnpm run i18n; then
+    echo ""
+    echo "✅ Translation validation passed"
+    echo ""
+    # Add updated locale files to git
+    git add apps/web/locales/*.json
+  else
+    echo ""
+    echo "❌ Translation validation failed!"
+    echo ""
+    echo "Please fix the translation issues above before committing:"
+    echo "  • Add missing translation keys to your locale files"
+    echo "  • Remove unused translation keys"
+    echo ""
+    echo "Or run 'pnpm i18n' to see the detailed report"
+    echo ""
+    exit 1
+  fi
 else
-  echo "Error: pnpm, npm, and corepack are unavailable in this Git hook PATH."
-  echo "Install Node.js tooling or update your PATH, then retry the commit."
-  exit 127
+  echo ""
+  echo "⚠️  Skipping translation validation: LINGODOTDEV_API_KEY is not set"
+  echo "   (This is expected for community contributors)"
+  echo ""
 fi
@@ -0,0 +1,417 @@
+# Enterprise Feature Access: Status Quo Analysis
+
+## Executive Summary
+
+Formbricks currently uses **two completely different mechanisms** to gate enterprise features depending on deployment type:
+
+| Deployment | Gating Mechanism | Activation | Feature Control |
+|------------|------------------|------------|-----------------|
+| **Cloud** (`IS_FORMBRICKS_CLOUD=1`) | Billing Plan (`organization.billing.plan`) | Stripe subscription | Plan-based (FREE/STARTUP/CUSTOM) |
+| **On-Premise** | License Key (`ENTERPRISE_LICENSE_KEY`) | License API validation | License feature flags |
+
+This dual approach creates **significant complexity**, **code duplication**, and **inconsistent behavior** across the codebase.
+
+---
+
+## 1. Core Architecture
+
+### 1.1 Cloud (Formbricks Cloud)
+
+**Source of Truth:** `organization.billing.plan`
+
+```typescript
+// packages/database/zod/organizations.ts
+plan: z.enum(["free", "startup", "scale", "enterprise"]).default("free")
+```
+
+**Plans and Limits:**
+- `FREE`: 3 projects, 1,500 responses/month, 2,000 MIU
+- `STARTUP`: 3 projects, 5,000 responses/month, 7,500 MIU
+- `CUSTOM`: Unlimited (negotiated limits)
+
+**Activation:** Stripe webhook updates `organization.billing` on checkout/subscription events.
+
+### 1.2 On-Premise (Self-Hosted)
+
+**Source of Truth:** `ENTERPRISE_LICENSE_KEY` environment variable
+
+**License Features Schema:**
+```typescript
+// apps/web/modules/ee/license-check/types/enterprise-license.ts
+{
+  isMultiOrgEnabled: boolean,
+  contacts: boolean,
+  projects: number | null,
+  whitelabel: boolean,
+  removeBranding: boolean,
+  twoFactorAuth: boolean,
+  sso: boolean,
+  saml: boolean,
+  spamProtection: boolean,
+  ai: boolean,
+  auditLogs: boolean,
+  multiLanguageSurveys: boolean,
+  accessControl: boolean,
+  quotas: boolean,
+}
+```
+
+**Activation:** License key validated against `https://ee.formbricks.com/api/licenses/check` (cached for 24h, grace period of 3 days).
+
+---
+
+## 2. Feature Gating Patterns
+
+### 2.1 Pattern A: Dual-Path Check (Most Common)
+
+Features that need **both** Cloud billing **and** on-premise license checks:
+
+```typescript
+// apps/web/modules/ee/license-check/lib/utils.ts
+const getFeaturePermission = async (billingPlan, featureKey) => {
+  const license = await getEnterpriseLicense();
+
+  if (IS_FORMBRICKS_CLOUD) {
+    return license.active && billingPlan !== PROJECT_FEATURE_KEYS.FREE;
+  } else {
+    return license.active && !!license.features?.[featureKey];
+  }
+};
+```
+
+**Used by:**
+- `getRemoveBrandingPermission()` - Remove branding
+- `getWhiteLabelPermission()` - Whitelabel features
+- `getBiggerUploadFileSizePermission()` - Large file uploads
+- `getIsSpamProtectionEnabled()` - reCAPTCHA spam protection
+- `getMultiLanguagePermission()` - Multi-language surveys
+- `getAccessControlPermission()` - Teams & roles
+- `getIsQuotasEnabled()` - Quota management
+- `getOrganizationProjectsLimit()` - Project limits
+
+### 2.2 Pattern B: License-Only Check
+
+Features checked **only** against license (works same for cloud and on-premise):
+
+```typescript
+// apps/web/modules/ee/license-check/lib/utils.ts
+const getSpecificFeatureFlag = async (featureKey) => {
+  const licenseFeatures = await getLicenseFeatures();
+  if (!licenseFeatures) return false;
+  return licenseFeatures[featureKey] ?? false;
+};
+```
+
+**Used by:**
+- `getIsMultiOrgEnabled()` - Multiple organizations
+- `getIsContactsEnabled()` - Contacts & segments
+- `getIsTwoFactorAuthEnabled()` - 2FA
+- `getIsSsoEnabled()` - SSO
+- `getIsAuditLogsEnabled()` - Audit logs
+
+### 2.3 Pattern C: Cloud-Only (No License Check)
+
+Features available only on Cloud, gated purely by billing plan:
+
+```typescript
+// apps/web/modules/survey/lib/permission.ts
+export const getExternalUrlsPermission = async (billingPlan) => {
+  if (IS_FORMBRICKS_CLOUD) return billingPlan !== PROJECT_FEATURE_KEYS.FREE;
+  return true; // Always allowed on self-hosted
+};
+```
+
+**Used by:**
+- External URLs permission
+- Survey follow-ups (Custom plan only)
+
+### 2.4 Pattern D: On-Premise Only (Disabled on Cloud)
+
+Features explicitly disabled on Cloud:
+
+```typescript
+// apps/web/modules/ee/license-check/lib/utils.ts
+export const getIsSamlSsoEnabled = async () => {
+  if (IS_FORMBRICKS_CLOUD) return false; // Never on Cloud
+  const licenseFeatures = await getLicenseFeatures();
+  return licenseFeatures.sso && licenseFeatures.saml;
+};
+```
+
+**Used by:**
+- SAML SSO
+- Pretty URLs (slug feature)
+- Domain/Organization settings page
+
+---
+
+## 3. Files Using Enterprise Features
+
+### 3.1 Core License/Feature Check Files
+
+| File | Purpose |
+|------|---------|
+| `apps/web/modules/ee/license-check/lib/license.ts` | License fetching & caching |
+| `apps/web/modules/ee/license-check/lib/utils.ts` | Permission check functions |
+| `apps/web/modules/ee/license-check/types/enterprise-license.ts` | Type definitions |
+| `apps/web/lib/constants.ts` | `IS_FORMBRICKS_CLOUD`, `ENTERPRISE_LICENSE_KEY` |
+
+### 3.2 Feature-Specific Implementation Files
+
+#### Remove Branding
+- `apps/web/modules/ee/whitelabel/remove-branding/actions.ts`
+- `apps/web/modules/ee/whitelabel/remove-branding/components/branding-settings-card.tsx`
+- `apps/web/modules/projects/settings/look/page.tsx`
+- `apps/web/modules/projects/settings/actions.ts`
+
+#### Whitelabel / Email Customization
+- `apps/web/modules/ee/whitelabel/email-customization/actions.ts`
+- `apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/page.tsx`
+- `apps/web/app/(app)/environments/[environmentId]/settings/(organization)/domain/page.tsx`
+
+#### Multi-Language Surveys
+- `apps/web/modules/ee/multi-language-surveys/lib/actions.ts`
+- `apps/web/modules/ee/multi-language-surveys/components/*.tsx`
+- `apps/web/modules/ee/languages/page.tsx`
+
+#### Contacts & Segments
+- `apps/web/modules/ee/contacts/segments/actions.ts`
+- `apps/web/modules/ee/contacts/page.tsx`
+- `apps/web/modules/ee/contacts/api/v1/**/*.ts`
+- `apps/web/modules/ee/contacts/api/v2/**/*.ts`
+
+#### Teams & Access Control
+- `apps/web/modules/ee/teams/team-list/components/teams-view.tsx`
+- `apps/web/modules/ee/role-management/actions.ts`
+- `apps/web/modules/organization/settings/teams/page.tsx`
+- `apps/web/modules/organization/settings/teams/actions.ts`
+
+#### SSO / SAML
+- `apps/web/modules/ee/sso/lib/sso-handlers.ts`
+- `apps/web/modules/ee/auth/saml/api/**/*.ts`
+- `apps/web/modules/ee/auth/saml/lib/*.ts`
+- `apps/web/modules/auth/lib/authOptions.ts`
+
+#### Two-Factor Authentication
+- `apps/web/modules/ee/two-factor-auth/actions.ts`
+- `apps/web/modules/ee/two-factor-auth/components/*.tsx`
+
+#### Quotas
+- `apps/web/modules/ee/quotas/actions.ts`
+- `apps/web/modules/ee/quotas/components/*.tsx`
+- `apps/web/modules/ee/quotas/lib/*.ts`
+
+#### Audit Logs
+- `apps/web/modules/ee/audit-logs/lib/handler.ts`
+- `apps/web/modules/ee/audit-logs/lib/service.ts`
+
+#### Billing (Cloud Only)
+- `apps/web/modules/ee/billing/page.tsx`
+- `apps/web/modules/ee/billing/api/lib/*.ts`
+- `apps/web/modules/ee/billing/components/*.tsx`
+
+### 3.3 API Routes Using Feature Checks
+
+| Route | Feature Check |
+|-------|---------------|
+| `apps/web/app/api/v1/client/[environmentId]/responses/route.ts` | Spam protection |
+| `apps/web/app/api/v2/client/[environmentId]/responses/route.ts` | Spam protection |
+| `apps/web/app/api/v1/client/[environmentId]/environment/lib/environmentState.ts` | Cloud limits |
+| `apps/web/modules/ee/contacts/api/v1/client/[environmentId]/user/route.ts` | Contacts |
+| `apps/web/modules/api/v2/management/responses/lib/response.ts` | Cloud limits |
+
+### 3.4 UI Pages with Conditional Rendering
+
+| Page | Condition |
+|------|-----------|
+| `apps/web/app/(app)/environments/[environmentId]/settings/(organization)/billing/` | Cloud only |
+| `apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/page.tsx` | On-premise only |
+| `apps/web/app/(app)/environments/[environmentId]/settings/(organization)/domain/page.tsx` | On-premise only |
+| `apps/web/app/p/[slug]/page.tsx` (Pretty URLs) | On-premise only |
+
+---
+
+## 4. Configuration & Environment Variables
+
+### 4.1 Key Environment Variables
+
+| Variable | Purpose | Default |
+|----------|---------|---------|
+| `IS_FORMBRICKS_CLOUD` | Enables cloud mode | `"0"` |
+| `ENTERPRISE_LICENSE_KEY` | License key for on-premise | (empty) |
+| `STRIPE_SECRET_KEY` | Stripe API key (Cloud) | (empty) |
+| `AUDIT_LOG_ENABLED` | Enable audit logs | `"0"` |
+| `SAML_DATABASE_URL` | SAML configuration DB | (empty) |
+
+### 4.2 Database Schema
+
+```prisma
+// Organization billing stored in JSON column
+billing: {
+  stripeCustomerId: string | null,
+  plan: "free" | "startup" | "scale" | "enterprise",
+  period: "monthly" | "yearly",
+  limits: {
+    projects: number | null,
+    monthly: {
+      responses: number | null,
+      miu: number | null,
+    }
+  },
+  periodStart: Date | null
+}
+```
+
+---
+
+## 5. Problems with Current Approach
+
+### 5.1 Code Duplication
+
+Almost every feature check function has this pattern:
+```typescript
+if (IS_FORMBRICKS_CLOUD) {
+  // Check billing plan
+} else {
+  // Check license feature
+}
+```
+
+This is repeated in:
+- 8+ permission check functions in `utils.ts`
+- 30+ files that consume these functions
+- Multiple API routes and pages
+
+### 5.2 Inconsistent Feature Gating
+
+| Feature | Cloud Gating | On-Premise Gating |
+|---------|--------------|-------------------|
+| Remove Branding | `plan !== FREE` | `license.features.removeBranding` |
+| Multi-Language | `plan === CUSTOM` OR `license.multiLanguageSurveys` | `license.multiLanguageSurveys` |
+| Follow-ups | `plan === CUSTOM` | Always allowed |
+| SAML SSO | Never allowed | `license.sso && license.saml` |
+| Teams | `plan === CUSTOM` OR `license.accessControl` | `license.accessControl` |
+
+### 5.3 Confusing License Requirement on Cloud
+
+Cloud deployments still require `ENTERPRISE_LICENSE_KEY` to be set for enterprise features to work:
+```typescript
+// utils.ts - getFeaturePermission
+if (IS_FORMBRICKS_CLOUD) {
+  return license.active && billingPlan !== PROJECT_FEATURE_KEYS.FREE;
+  //     ^^^^^^^^^^^^^^ Still checks license!
+}
+```
+
+This means Cloud needs **both**:
+1. Active billing plan (Stripe subscription)
+2. Active enterprise license
+
+### 5.4 Fallback Logic Complexity
+
+```typescript
+const featureFlagFallback = async (billingPlan) => {
+  const license = await getEnterpriseLicense();
+  if (IS_FORMBRICKS_CLOUD) return license.active && billingPlan === PROJECT_FEATURE_KEYS.CUSTOM;
+  else if (!IS_FORMBRICKS_CLOUD) return license.active;
+  return false;
+};
+```
+
+Features have "fallback" behavior for backwards compatibility, adding another layer of complexity.
+
+### 5.5 Testing Complexity
+
+Tests must mock both:
+- `IS_FORMBRICKS_CLOUD` constant
+- `getEnterpriseLicense()` function
+- `organization.billing.plan` in some cases
+
+See: `apps/web/modules/ee/license-check/lib/utils.test.ts` (400+ lines of test mocking)
+
+---
+
+## 6. Feature Availability Matrix
+
+| Feature | Free (Cloud) | Startup (Cloud) | Custom (Cloud) | No License (On-Prem) | License (On-Prem) |
+|---------|--------------|-----------------|----------------|---------------------|-------------------|
+| Remove Branding | ❌ | ✅ | ✅ | ❌ | ✅* |
+| Whitelabel | ❌ | ✅ | ✅ | ❌ | ✅* |
+| Multi-Language | ❌ | ❌ | ✅ | ❌ | ✅* |
+| Teams & Roles | ❌ | ❌ | ✅ | ❌ | ✅* |
+| Contacts | ❌ | ❌ | ❌ | ❌ | ✅* |
+| SSO (OIDC) | ❌ | ❌ | ❌ | ❌ | ✅* |
+| SAML SSO | ❌ | ❌ | ❌ | ❌ | ✅* |
+| 2FA | ❌ | ❌ | ❌ | ❌ | ✅* |
+| Audit Logs | ❌ | ❌ | ❌ | ❌ | ✅* |
+| Quotas | ❌ | ❌ | ✅ | ❌ | ✅* |
+| Spam Protection | ❌ | ❌ | ✅ | ❌ | ✅* |
+| Follow-ups | ❌ | ❌ | ✅ | ✅ | ✅ |
+| Pretty URLs | ❌ | ❌ | ❌ | ✅ | ✅ |
+| Projects Limit | 3 | 3 | Custom | 3 | Custom* |
+
+*Depends on specific license feature flags
+
+---
+
+## 7. Recommendations for Refactoring
+
+### 7.1 Unified Feature Access Layer
+
+Create a single `FeatureAccess` service that abstracts the deployment type:
+
+```typescript
+interface FeatureAccessService {
+  canAccessFeature(feature: FeatureKey, context: AccessContext): Promise<boolean>;
+  getLimit(limit: LimitKey, context: LimitContext): Promise<number>;
+}
+```
+
+### 7.2 Normalize Feature Flags
+
+Both Cloud and On-Premise should use the same feature flag schema. Cloud billing plans should map to predefined feature sets.
+
+### 7.3 Remove License Requirement from Cloud
+
+Cloud should not need `ENTERPRISE_LICENSE_KEY`. The license server should be bypassed entirely, with features controlled by billing plan.
+
+### 7.4 Consider Feature Entitlements
+
+Move to an "entitlements" model where:
+- Cloud: Stripe subscription metadata defines entitlements
+- On-Premise: License API returns entitlements
+
+Both resolve to the same `TFeatureEntitlements` type.
+
+---
+
+## 8. Files That Would Need Changes
+
+### High Priority (Core Logic)
+1. `apps/web/modules/ee/license-check/lib/license.ts`
+2. `apps/web/modules/ee/license-check/lib/utils.ts`
+3. `apps/web/lib/constants.ts`
+
+### Medium Priority (Feature Implementations)
+4. All files in `apps/web/modules/ee/*/actions.ts`
+5. `apps/web/modules/environments/lib/utils.ts`
+6. `apps/web/modules/survey/lib/permission.ts`
+7. `apps/web/modules/survey/follow-ups/lib/utils.ts`
+
+### Lower Priority (UI Conditional Rendering)
+8. Settings pages with `IS_FORMBRICKS_CLOUD` checks
+9. `UpgradePrompt` component usages
+10. Navigation components
+
+---
+
+## 9. Summary
+
+The current implementation has **organic complexity** from evolving independently for Cloud and On-Premise deployments. A refactor should:
+
+1. **Unify** the feature access mechanism behind a single interface
+2. **Simplify** by removing the dual-check pattern
+3. **Normalize** feature definitions across deployment types
+4. **Test** with a cleaner mocking strategy
+
+This would reduce the 100+ files touching enterprise features to a single source of truth, making the codebase more maintainable and reducing bugs from inconsistent feature gating.
@@ -0,0 +1,428 @@
+I've spent ~2 days iterating over this, setting up Stripe, building our update pricing table, etc. So even though the formatting suggests this to be AI Slob, it's hand-crafted and I've read every line to make sure there is no misleading information 😇
+
+------
+
+### Unified Billing & Feature Access
+
+**Document Version:** 2.1  
+**Last Updated:** January 17, 2026  
+**Status:** Ready for development  
+
+---
+
+## 1. Executive Summary
+
+Formbricks Cloud needs a unified, Stripe-native approach to billing, feature entitlements, and usage metering. The current implementation has billing logic scattered throughout the codebase, making it difficult to maintain pricing consistency and add new features.
+
+This PRD outlines the requirements for:
+1. Using Stripe as the single source of truth for features and billing
+2. Implementing usage-based billing with graduated pricing
+3. Giving customers control through spending caps
+
+**Scope**: This initiative focuses on Formbricks Cloud. On-Premise licensing will be addressed separately.
+
+---
+
+## 2. Problem Statement
+
+### Current Pain Points
+
+1. **Scattered Billing Logic**: Feature availability is determined by code checks against `organization.billing.plan`, requiring code changes for any pricing adjustment.
+
+2. **Inconsistent Feature Gating**: Different features use different patterns to check access, making it unclear what's available on each plan.
+
+3. **No Usage-Based Billing**: Current plans have hard limits. Customers hitting limits must upgrade to a higher tier even if they only need slightly more capacity.
+
+4. **No Spending Controls**: Customers on usage-based plans have no way to cap their spending.
+
+5. **Manual Usage Tracking**: Response and user counts are tracked locally without integration to billing.
+
+---
+
+## 3. Goals
+
+1. **Stripe as Source of Truth**: All feature entitlements and pricing come from Stripe, not hardcoded in the application.
+
+2. **Usage-Based Billing**: Implement graduated pricing where customers pay for what they use beyond included amounts.
+
+3. **Customer Control**: Allow customers to set spending caps to avoid unexpected charges.
+
+4. **Proactive Communication**: Notify customers as they approach usage limits.
+
+---
+
+## 4. Feature Requirements
+
+### 4.1 Stripe as Single Source of Truth
+
+**Requirement**: The Formbricks instance should not contain billing or pricing logic. All feature availability must be determined by querying Stripe.
+
+**What This Means**:
+- No hardcoded plan names or feature mappings in the codebase
+- No `if (plan === 'pro')` style checks
+- Feature checks query Stripe Entitlements API
+- Pricing displayed in UI is fetched from Stripe Products/Prices
+- Plan changes take effect immediately via Stripe webhooks
+
+**Benefits**:
+- Change pricing without code deployment
+- Add new plans without code changes
+- A/B test pricing externally
+- Single source of truth for sales, support, and product
+
+---
+
+### 4.2 Stripe Entitlements for Feature Access
+
+**Requirement**: Use Stripe's Entitlements API to determine which features each customer can access.
+
+**How It Works**:
+1. Define Features in Stripe (see inventory below)
+2. Attach Features to Products via ProductFeature
+3. When customer subscribes, Stripe creates Active Entitlements
+4. Application checks entitlements before enabling features
+5. Stripe is already setup correctly with all Products & Features ✅
+
+**Multi-Item Subscriptions Simplify Entitlements**:
+- Each plan subscription includes multiple prices (flat fee + metered usage) on the **same Product**
+- Since all prices belong to one Product, calling `stripe.entitlements.activeEntitlements.list()` returns all features for that plan automatically
+- No need to check multiple products or stitch together entitlements from separate subscriptions
+
+**Feature Inventory (not up-to-date but you get the idea)**:
+
+| Feature Name | Lookup Key | Description |
+|--------------|------------|-------------|
+| Hide Branding | `hide-branding` | Hide "Powered by Formbricks" |
+| API Access | `api-access` | Gates API key generation & API page access |
+| Integrations | `integrations` | Gates integrations page & configuration |
+| Custom Webhooks | `webhooks` | Webhook integrations |
+| Email Follow-ups | `follow-ups` | Automated email follow-ups |
+| Custom Links in Surveys | `custom-links-in-surveys` | Custom links within surveys |
+| Custom Redirect URL | `custom-redirect-url` | Custom thank-you redirects |
+| Two Factor Auth | `two-fa` | 2FA for user accounts |
+| Contacts & Segments | `contacts` | Contact management & segmentation |
+| Teams & Access Roles | `rbac` | Team-based permissions |
+| Quota Management | `quota-management` | Response quota controls |
+| Spam Protection | `spam-protection` | reCAPTCHA integration |
+| Workspace Limit 1 | `workspace-limit-1` | Up to 1 workspaces |
+| Workspace Limit 3 | `workspace-limit-3` | Up to 3 workspaces |
+| Workspace Limit 5 | `workspace-limit-5` | Up to 5 workspaces |
+
+<img width="915" height="827" alt="Image" src="https://github.com/user-attachments/assets/1f0e17b5-82c3-475c-9c05-968fdc51e948" />
+
+---
+
+### 4.3 Plan Structure
+
+**Plans & Pricing**:
+
+| Plan | Monthly Price | Annual Price | Savings |
+|------|---------------|--------------|---------|
+| **Hobby** | Free | Free | — |
+| **Pro** | $89/month | $890/year | 2 months free |
+| **Scale** | $390/month | $3,900/year | 2 months free |
+
+**Usage Limits**:
+
+| Plan | Workspaces | Responses/mo | Contacts/mo | Overage Billing |
+|------|------------|--------------|-------------|-----------------|
+| **Hobby** | 1 | 250 | — | No |
+| **Pro** | 3 | 2,000 | 5,000 | Yes |
+| **Scale** | 5 | 5,000 | 10,000 | Yes |
+
+**Note**: Hobby plan does not include Respondent Identification or Contact Management. Overage billing is only available on Pro and Scale plans.
+
+<img width="1205" height="955" alt="Image" src="https://github.com/user-attachments/assets/047d4097-f7ee-4022-920a-e2cbeb8ceb5d" />
+
+---
+
+### 4.4 Restricted Features (Hobby & Trial Exclusions)
+
+**Requirement**: Certain high-risk features must be excluded from Free (Hobby) plan AND Trial users to prevent fraud and abuse. Other features are included in Trial to maximize conversion.
+
+**Restricted Features (blocked from Hobby + Trial)**:
+
+| Feature | Lookup Key | Abuse Risk | Why Restricted |
+|---------|------------|------------|----------------|
+| Custom Redirect URL | `custom-redirect-url` | High | Phishing redirects after survey |
+| Custom Links in Surveys | `custom-links-in-surveys` | High | Malicious link distribution in survey content |
+
+**Trial-Included Features (to drive conversion)**:
+
+| Feature | Lookup Key | Why Included in Trial |
+|---------|------------|----------------------|
+| Webhooks | `webhooks` | Low abuse risk, high setup effort = conversion driver |
+| API Access | `api-access` | Low abuse risk, high integration value |
+| Integrations | `integrations` | Low abuse risk, high integration value |
+| Email Follow-ups | `follow-ups` | Requires email verification, monitored |
+| Hide Branding | `hide-branding` | No abuse risk, strong conversion driver |
+| RBAC | `rbac` | No abuse risk, team adoption driver |
+| Spam Protection | `spam-protection` | Actually prevents abuse |
+| Quota Management | `quota-management` | Administrative feature |
+
+**Implementation**:
+- Restricted features are NOT attached to Hobby or Trial products in Stripe
+- Trial includes most Pro/Scale features to maximize value demonstration
+- Application checks entitlements via Stripe API - if feature not present, show existing upgrade UI
+
+---
+
+### 4.5 Usage-Based Billing with Graduated Pricing
+
+<img width="1041" height="125" alt="Image" src="https://github.com/user-attachments/assets/f12a56da-89d2-4784-b3c0-6c55dbee85e6" />
+
+**Requirement**: Implement usage-based billing where customers pay a base fee that includes a usage allowance, with flat overage pricing.
+
+**Metrics to Meter**:
+
+| Metric | Event Name | Description |
+|--------|------------|-------------|
+| **Responses** | `response_created` | Survey responses submitted |
+| **Identified Contacts** | `unique_contact_identified` | Unique contacts identified per month |
+
+**Identified Contacts Definition (ON HOLD)**:
+An identified contact is one that has been identified in the current billing period via:
+- SDK call: `formbricks.setUserId(userId)`
+- Personal Survey Link access
+- This OUT OF SCOPE for the first iteration to not become a blocker. We can add it if all works end-to-end
+
+**Counting Rules**:
+- Each contact identification counts (even if same contact identified multiple times via different methods)
+- Same contact re-accessing their personal link = 1 count (same contact)
+- Billing period is monthly (even for annual subscribers)
+- Meter events sent immediately (real-time)
+
+**Hard Limits via Stripe Metering**:
+- Usage is metered through Stripe for billing AND enforcement
+- When included usage is exhausted, overage rates apply
+- No separate local limit enforcement needed
+
+---
+
+### 4.6 Spending Caps
+
+**Requirement**: Customers must be able to set a maximum monthly spend for usage-based charges.
+
+**Behavior**:
+
+| Cap Setting | Effect |
+|-------------|--------|
+| No cap (default) | Usage billed without limit |
+| Cap with "Warn" | Notifications sent, billing continues |
+| Cap with "Pause" | Surveys paused when cap reached |
+
+**Configuration**:
+- Minimum spending cap: **$10**
+- No grace period when cap is hit
+- Immediate pause if "Pause" mode selected
+- Stripe does not provide spending caps out of the box, this is something we need to custom develop
+
+**When Cap is Reached (Pause mode)**:
+- All surveys for the organization stop collecting responses (needs to be implemented)
+- Existing responses are preserved
+- In-app banner explains the pause
+- Email notification sent to billing contacts
+- Owner can lift pause or increase cap
+
+<img width="925" height="501" alt="Image" src="https://github.com/user-attachments/assets/511d1ec6-4550-4aec-8f31-ab68e8c9e383" />
+
+_The Pause vs. Alert mode is missing so far._
+
+---
+
+### 4.7 Usage Alerts via Stripe Meter Alerts
+
+**Requirement**: Proactively notify customers as they approach their included usage limits.
+
+**Alert Thresholds**:
+
+| Threshold | Notification |
+|-----------|--------------|
+| 80% of included | Email notification |
+| 90% of included | Email + in-app banner |
+| 100% of included | Email + in-app + (if cap) action |
+
+**Notification Content**:
+- Current usage vs included amount
+- What happens next (overage pricing applies)
+- Link to upgrade or adjust spending cap
+
+<img width="415" height="348" alt="Image" src="https://github.com/user-attachments/assets/7bd990b4-7150-4357-af84-9c5e98f75140" />
+
+---
+
+### 4.8 Annual Billing with Monthly Limits
+
+**Requirement**: Support annual payment option while keeping all usage limits monthly.
+
+**Behavior**:
+- Annual subscribers pay upfront for 12 months
+- **2 months free** discount (annual = 10x monthly price)
+- Usage limits reset monthly (same as monthly subscribers)
+- Overage is billed monthly
+- Example: Annual Pro pays $890/year, gets 2,000 responses/month every month
+
+<img width="1033" height="429" alt="Image" src="https://github.com/user-attachments/assets/58df55c7-e20f-448c-953d-e62c57268421" />
+
+---
+
+### 4.9 Reverse Trial Experience
+
+**Requirement**: New users should experience premium features immediately through a Reverse Trial model.
+
+**Trigger**: We have UI to present to them to opt into the free trial
+
+**Trial Terms**:
+- Duration: 14 days
+- Features: Enroll to Trial Product (free)
+- Limits: We have to see how to enforce those, gotta check what Stripe API offers us. Probably a dedicated Trial Meter
+- No payment required to start
+- Stripe customer created immediately (for metering)
+
+**Post-Trial (No Conversion)**:
+- Downgrade to Hobby (Free) tier immediately
+- Pro features disabled immediately
+- Data preserved but locked behind upgrade
+
+---
+
+### 4.10 Stripe Customer Creation on Signup
+
+**Requirement**: Create a Stripe customer immediately when a new organization is created.
+
+**Rationale**: 
+- Enables usage metering from day one
+- Stripe handles hard limits via metering
+- Simplifies upgrade flow (customer already exists)
+
+**What Gets Created**:
+- Stripe Customer with organization ID in metadata
+- No subscription (Hobby tier has no subscription)
+- No payment method (added on first upgrade)
+
+---
+
+### 5.1 Subscription Architecture: Multi-Item Subscriptions
+
+**Key Insight**: Each plan uses a **Subscription with Multiple Items** — one flat-fee price and metered usage prices, all belonging to the same Product. This allows us to charge for the base plan, meter and charge per used item.
+
+**How It Works**:
+
+```javascript
+// Creating a Pro subscription with flat fee + usage metering
+const subscription = await stripe.subscriptions.create({
+  customer: 'cus_12345',
+  items: [
+    { price: 'price_pro_monthly' },           // $89/mo flat fee
+    { price: 'price_pro_responses_usage' }, // Metered responses
+    { price: 'price_pro_contacts_usage' },  // Metered contacts 
+  ],
+});
+```
+
+**Why This Matters for Entitlements**:
+- All prices belong to the **same Product** (e.g., `prod_ProPlan`)
+- Stripe Entitlements API automatically returns all features attached to that Product
+- No need to check multiple products or subscriptions
+- Single source of truth for feature access
+
+**What Customers See** (Single Invoice):
+
+| Description | Qty | Amount |
+|-------------|-----|--------|
+| Pro Plan (Jan 1 - Feb 1) | 1 | $89.00 |
+| Pro Plan - Responses (Jan 1 - Feb 1) | 1,500 (First 1,000 included) | $40.00 |
+| Pro Plan - Contacts (Jan 1 - Feb 1) | 2,500 (All included) | $0.00 |
+| **Total** | | **$129.00** |
+
+### 5.2 Products & Prices
+
+Each plan Product contains multiple Prices:
+
+| Product | Stripe ID | Prices |
+|---------|-----------|--------|
+| **Hobby Tier** | `prod_ToYKB5ESOMZZk5` | Free (no subscription required) |
+| **Pro Tier** | `prod_ToYKQ8WxS3ecgf` | `price_pro_monthly` ($89), `price_pro_yearly` ($890), `price_pro_usage_responses`, `price_pro_usage_contacts` |
+| **Scale Tier** | `prod_ToYLW5uCQTMa6v` | `price_scale_monthly` ($390), `price_scale_yearly` ($3,900), `price_scale_usage_responses`, `price_scale_usage_contacts` |
+| **Trial Tier** | `prod_TodVcJiEnK5ABK` | `price_trial_free` ($0), metered prices for tracking |
+
+**Note**: Response and Contact metered prices use **graduated tiers** where the first N units are included (priced at $0), then overage rates apply.
+
+
+---
+
+## 6. Non-Functional Requirements
+
+### 6.1 Performance
+
+- Entitlement checks: <100ms (p50), <200ms (p99) with caching
+- Usage metering: Non-blocking, immediate send
+- Spending cap checks: <50ms
+
+### 6.2 Reliability
+
+- Stripe unavailable: Use cached entitlements (max 5 min stale)
+- Meter event fails: Queue for retry (at-least-once delivery)
+- Webhook missed: Entitlements auto-refresh on access
+
+### 6.3 Data Consistency
+
+- Stripe is source of truth
+- Local `organization.billing` is a cache only
+- Cache invalidated via webhooks
+
+---
+
+## 7. Migration Considerations
+
+### Existing Customers with Custom Limits
+
+**Problem**: Some existing customers have negotiated custom limits that don't fit the new plan structure.
+
+**Approach**: Grandfather indefinitely on legacy pricing until they choose to migrate.
+
+- Existing customers keep their current plans and limits
+- No forced migration
+- New billing system only applies to new signups and customers who voluntarily upgrade/change plans
+- Legacy customers get a simplified view with the new usage meters UI and a the "Manage subscription" button. We hide all of the other UI and prompt them to reach out to Support to change their pricing (Alert component)
+
+---
+
+## 8. Key Decisions
+
+| Topic | Decision |
+|-------|----------|
+| Free tier metering | Use Stripe for hard limits (no local enforcement) |
+| Annual discount | 2 months free |
+| Minimum spending cap | $10 |
+| Cap grace period | None (immediate) |
+| Contact identification counting | Each identification counts |
+| Personal link re-access | Same contact = 1 count |
+| Downgrade behavior for restricted features | Immediate disable |
+| Meter event timing | Immediate (real-time) |
+| Currency | USD only |
+| Default spending cap | No cap |
+| Overage visibility | Billing page |
+| Migration for custom limits | Grandfather indefinitely |
+
+---
+
+## 9. Out of Scope
+
+1. **On-Premise licensing**: Will be addressed separately
+2. **Self-serve downgrade**: Handled via Stripe Customer Portal
+3. **Refunds**: Handled via Stripe Dashboard
+4. **Tax calculation**: Handled by Stripe Tax
+5. **Invoice customization**: Handled via Stripe settings
+
+---
+
+## 10. Setting up
+
+**Stripe** Sandbox Cloud: Dev
+
+<img width="300" height="180" alt="Image" src="https://github.com/user-attachments/assets/3e6a7fb6-8efb-4cb5-acf0-ccc2a5efabd2" />
+
+In this branch you find;
+- All of the dummy UI screenshotted here. Make sure to clean up after it was successfully implemented (has dummy UI code)
+- A comprehensive analysis of our current, inconsistent feature flagging called ENTERPRISE_FEATURE_ANALYSIS
@@ -127,10 +127,34 @@ Formbricks has a hosted cloud offering with a generous free plan to get you up a

 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.

+If you opt for self-hosting Formbricks, here are a few options to consider:
+
 #### Docker

 To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).

+#### Community-managed One Click Hosting
+
+##### Railway
+
+You can deploy Formbricks on [Railway](https://railway.app) using the button below.
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
+
+##### RepoCloud
+
+Or you can also deploy Formbricks on [RepoCloud](https://repocloud.io) using the button below.
+
+[![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=254)
+
+##### Zeabur
+
+Or you can also deploy Formbricks on [Zeabur](https://zeabur.com) using the button below.
+
+[![Deploy to Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/G4TUJL)
+
+<a id="development"></a>
+
 ## 👨‍💻 Development

 ### Prerequisites
@@ -223,4 +247,4 @@ We currently do not offer Formbricks white-labeled. That means that we don't sel

 The Enterprise Edition allows us to fund the development of Formbricks sustainably. It guarantees that the free and open-source surveying infrastructure we're building will be around for decades to come.

-<a id="readme-de"></a>
+<p align="right"><a href="#top">🔼 Back to top</a></p>
@@ -10,20 +10,25 @@
    "build-storybook": "storybook build",
    "clean": "rimraf .turbo node_modules dist storybook-static"
  },
+  "dependencies": {
+    "@formbricks/survey-ui": "workspace:*"
+  },
  "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",
-    "@vitejs/plugin-react": "5.1.4",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-links": "10.1.11",
+    "@storybook/addon-onboarding": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
+    "@typescript-eslint/eslint-plugin": "8.53.0",
+    "@tailwindcss/vite": "4.1.18",
+    "@typescript-eslint/parser": "8.53.0",
+    "@vitejs/plugin-react": "5.1.2",
+    "esbuild": "0.27.2",
    "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.1.11",
+    "prop-types": "15.8.1",
+    "storybook": "10.1.11",
+    "vite": "7.3.1",
+    "@storybook/addon-docs": "10.1.11"
  }
 }
@@ -1,4 +1,20 @@
 module.exports = {
  extends: ["@formbricks/eslint-config/legacy-next.js"],
  ignorePatterns: ["**/package.json", "**/tsconfig.json"],
+  overrides: [
+    {
+      files: ["locales/*.json"],
+      plugins: ["i18n-json"],
+      rules: {
+        "i18n-json/identical-keys": [
+          "error",
+          {
+            filePath: require("path").join(__dirname, "locales", "en-US.json"),
+            checkExtraKeys: false,
+            checkMissingKeys: true,
+          },
+        ],
+      },
+    },
+  ],
 };
@@ -1,6 +0,0 @@
-const baseConfig = require("../../.prettierrc.js");
-
-module.exports = {
-  ...baseConfig,
-  tailwindConfig: "./tailwind.config.js",
-};
@@ -1,4 +1,4 @@
-FROM node:24-alpine3.23 AS base
+FROM node:22-alpine3.22 AS base

 #
 ## step 1: Prune monorepo
@@ -18,9 +18,9 @@ FROM node:24-alpine3.23 AS base
 FROM base AS installer

 # Enable corepack and prepare pnpm
-RUN npm install --ignore-scripts -g corepack@latest
+RUN npm install --ignore-scripts -g corepack@latest 
 RUN corepack enable
-RUN corepack prepare pnpm@10.28.2 --activate
+RUN corepack prepare pnpm@9.15.9 --activate

 # Install necessary build tools and compilers
 RUN apk update && apk add --no-cache cmake g++ gcc jq make openssl-dev python3
@@ -67,18 +67,22 @@ RUN --mount=type=secret,id=database_url \
    --mount=type=secret,id=encryption_key \
    --mount=type=secret,id=redis_url \
    --mount=type=secret,id=sentry_auth_token \
-    --mount=type=secret,id=posthog_key \
    /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...

+# Extract Prisma version
+RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_version.txt
+
 #
 ## step 3: setup production runner
 #
 FROM base AS runner

-# Upgrade Alpine system packages to pick up security patches, update npm to latest, then create user
-# Note: npm's bundled tar has a known vulnerability but npm is only used during build, not at runtime
-RUN apk update && apk upgrade --no-cache \
-    && npm install --ignore-scripts -g npm@latest \
+RUN npm install --ignore-scripts -g corepack@latest && \
+    corepack enable
+
+RUN apk add --no-cache curl \
+    && apk add --no-cache supercronic \
+    # && addgroup --system --gid 1001 nodejs \
    && addgroup -S nextjs \
    && adduser -S -u 1001 -G nextjs nextjs

@@ -103,56 +107,31 @@ RUN chown -R nextjs:nextjs ./apps/web/public && chmod -R 755 ./apps/web/public
 # Create packages/database directory structure with proper ownership for runtime migrations
 RUN mkdir -p ./packages/database/migrations && chown -R nextjs:nextjs ./packages/database

-COPY --from=installer /app/packages/database/package.json ./packages/database/package.json
-RUN chown nextjs:nextjs ./packages/database/package.json && chmod 644 ./packages/database/package.json
-
 COPY --from=installer /app/packages/database/schema.prisma ./packages/database/schema.prisma
 RUN chown nextjs:nextjs ./packages/database/schema.prisma && chmod 644 ./packages/database/schema.prisma

 COPY --from=installer /app/packages/database/dist ./packages/database/dist
 RUN chown -R nextjs:nextjs ./packages/database/dist && chmod -R 755 ./packages/database/dist

-# Copy prisma client packages
 COPY --from=installer /app/node_modules/@prisma/client ./node_modules/@prisma/client
 RUN chown -R nextjs:nextjs ./node_modules/@prisma/client && chmod -R 755 ./node_modules/@prisma/client

 COPY --from=installer /app/node_modules/.prisma ./node_modules/.prisma
 RUN chown -R nextjs:nextjs ./node_modules/.prisma && chmod -R 755 ./node_modules/.prisma

+COPY --from=installer /prisma_version.txt .
+RUN chown nextjs:nextjs ./prisma_version.txt && chmod 644 ./prisma_version.txt
+
 COPY --from=installer /app/node_modules/@paralleldrive/cuid2 ./node_modules/@paralleldrive/cuid2
 RUN chmod -R 755 ./node_modules/@paralleldrive/cuid2

-# Runtime migrations import uuid v7 from the database package, so copy the
-# database package's resolved install instead of the repo-root hoisted version.
-COPY --from=installer /app/packages/database/node_modules/uuid ./node_modules/uuid
-RUN chmod -R 755 ./node_modules/uuid \
-    && node --input-type=module -e "import('uuid').then((module) => { if (typeof module.v7 !== 'function') throw new Error('uuid v7 missing in runtime image'); })"
-
 COPY --from=installer /app/node_modules/@noble/hashes ./node_modules/@noble/hashes
 RUN chmod -R 755 ./node_modules/@noble/hashes

 COPY --from=installer /app/node_modules/zod ./node_modules/zod
 RUN chmod -R 755 ./node_modules/zod

-# Pino loads transport code in worker threads via dynamic require().
-# Next.js file tracing only traces static imports, missing runtime-loaded files
-# (e.g. pino/lib/transport-stream.js, transport targets).
-# Copy the full packages to ensure all runtime files are available.
-COPY --from=installer /app/node_modules/pino ./node_modules/pino
-RUN chmod -R 755 ./node_modules/pino
-
-COPY --from=installer /app/node_modules/pino-opentelemetry-transport ./node_modules/pino-opentelemetry-transport
-RUN chmod -R 755 ./node_modules/pino-opentelemetry-transport
-
-COPY --from=installer /app/node_modules/pino-abstract-transport ./node_modules/pino-abstract-transport
-RUN chmod -R 755 ./node_modules/pino-abstract-transport
-
-COPY --from=installer /app/node_modules/otlp-logger ./node_modules/otlp-logger
-RUN chmod -R 755 ./node_modules/otlp-logger
-
-# Install prisma CLI globally for database migrations and fix permissions for nextjs user
-RUN npm install --ignore-scripts -g prisma@6 \
-    && chown -R nextjs:nextjs /usr/local/lib/node_modules/prisma
+RUN npm install -g prisma@6

 # Create a startup script to handle the conditional logic
 COPY --from=installer /app/apps/web/scripts/docker/next-start.sh /home/nextjs/start.sh
@@ -162,11 +141,13 @@ EXPOSE 3000
 ENV HOSTNAME="0.0.0.0"
 USER nextjs

+# Prepare pnpm as the nextjs user to ensure it's available at runtime
 # Prepare volumes for uploads and SAML connections
-RUN mkdir -p /home/nextjs/apps/web/uploads/ && \
+RUN corepack prepare pnpm@9.15.9 --activate && \
+    mkdir -p /home/nextjs/apps/web/uploads/ && \
    mkdir -p /home/nextjs/apps/web/saml-connection

 VOLUME /home/nextjs/apps/web/uploads/
 VOLUME /home/nextjs/apps/web/saml-connection

-CMD ["/home/nextjs/start.sh"]
+CMD ["/home/nextjs/start.sh"]
@@ -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,19 +61,19 @@ 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>
          ) : (
            <div className="flex animate-pulse flex-col items-center space-y-4">
              <span className="relative flex h-10 w-10">
-                <span className="absolute inline-flex h-full w-full animate-ping-slow rounded-full bg-slate-400 opacity-75"></span>
+                <span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-slate-400 opacity-75"></span>
                <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>
@@ -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">
@@ -1,50 +1,55 @@
 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 Error(t("common.environment_not_found"));
  }

-  const channel = workspace.config.channel || null;
+  const project = await getProjectByEnvironmentId(environment.id);
+  if (!project) {
+    throw new Error(t("common.workspace_not_found"));
+  }
+
+  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"
+        className="absolute top-5 right-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>
@@ -1,13 +1,10 @@
 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 }>;
-  children: React.ReactNode;
-}) => {
+const OnboardingLayout = async (props) => {
  const params = await props.params;

  const { children } = props;
@@ -17,9 +14,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>;
@@ -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,
@@ -1,17 +1,16 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
-import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/constants";
+import { TProject } from "@formbricks/types/project";
 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,
@@ -26,13 +25,13 @@ const mockWorkspace: TWorkspace = {
  },
  placement: "bottomRight",
  clickOutsideClose: true,
-  overlay: "none",
-  appSetupCompleted: false,
+  darkOverlay: false,
+  environments: [],
  languages: [],
  logo: null,
 };
 const mockTemplate: TXMTemplate = {
-  name: "$[workspaceName] Survey",
+  name: "$[projectName] Survey",
  blocks: [
    {
      id: "block1",
@@ -40,13 +39,13 @@ const mockTemplate: TXMTemplate = {
      elements: [
        {
          id: "q1",
-          type: "openText" as TSurveyElementTypeEnum.OpenText,
+          type: "openText" as const,
          inputType: "text" as const,
-          headline: { default: "$[workspaceName] Question" },
+          headline: { default: "$[projectName] Question" },
          subheader: { default: "" },
          required: false,
          placeholder: { default: "" },
-          charLimit: { enabled: true, max: 1000 },
+          charLimit: 1000,
        },
      ],
    },
@@ -60,8 +59,8 @@ const mockTemplate: TXMTemplate = {
  ],
  styling: {
    brandColor: { light: "#0000FF" },
-    elementHeadlineColor: { light: "#00FF00" },
-    inputBgColor: { light: "#FF0000" },
+    questionColor: { light: "#00FF00" },
+    inputColor: { light: "#FF0000" },
  },
 };

@@ -70,19 +69,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);
  });
@@ -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 };
 };
@@ -14,7 +14,7 @@ describe("xm-templates", () => {
  });

  test("getXMSurveyDefault returns default survey template", () => {
-    const tMock = vi.fn((key: string) => key) as unknown as TFunction;
+    const tMock = vi.fn((key) => key) as TFunction;
    const result = getXMSurveyDefault(tMock);

    expect(result).toEqual({
@@ -29,7 +29,7 @@ describe("xm-templates", () => {
  });

  test("getXMTemplates returns all templates", () => {
-    const tMock = vi.fn((key: string) => key) as unknown as TFunction;
+    const tMock = vi.fn((key) => key) as TFunction;
    const result = getXMTemplates(tMock);

    expect(result).toHaveLength(6);
@@ -44,7 +44,7 @@ describe("xm-templates", () => {
  test("getXMTemplates handles errors gracefully", async () => {
    const tMock = vi.fn(() => {
      throw new Error("Test error");
-    }) as unknown as TFunction;
+    }) as TFunction;

    const result = getXMTemplates(tMock);

@@ -0,0 +1,64 @@
+import { XIcon } from "lucide-react";
+import { getServerSession } from "next-auth";
+import Link from "next/link";
+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 { getOrganizationIdFromEnvironmentId } from "@/lib/utils/helper";
+import { getTranslate } from "@/lingodotdev/server";
+import { authOptions } from "@/modules/auth/lib/authOptions";
+import { Button } from "@/modules/ui/components/button";
+import { Header } from "@/modules/ui/components/header";
+
+interface XMTemplatePageProps {
+  params: Promise<{
+    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 Error(t("common.session_not_found"));
+  }
+
+  const user = await getUser(session.user.id);
+  if (!user) {
+    throw new Error(t("common.user_not_found"));
+  }
+  if (!environment) {
+    throw new Error(t("common.environment_not_found"));
+  }
+
+  const organizationId = await getOrganizationIdFromEnvironmentId(environment.id);
+
+  const project = await getProjectByEnvironmentId(environment.id);
+  if (!project) {
+    throw new Error(t("common.workspace_not_found"));
+  }
+
+  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("environments.xm-templates.headline")} />
+      <XMTemplateList project={project} user={user} environmentId={environment.id} />
+      {projects.length >= 2 && (
+        <Button
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          variant="ghost"
+          asChild>
+          <Link href={`/environments/${environment.id}/surveys`}>
+            <XIcon className="h-7 w-7" strokeWidth={1.5} />
+          </Link>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Page;
@@ -19,8 +19,8 @@ describe("getTeamsByOrganizationId", () => {

  test("returns mapped teams", async () => {
    const mockTeams = [
-      { id: "t1", name: "Team 1", createdAt: new Date(), updatedAt: new Date(), organizationId: "org1" },
-      { id: "t2", name: "Team 2", createdAt: new Date(), updatedAt: new Date(), organizationId: "org1" },
+      { id: "t1", name: "Team 1" },
+      { id: "t2", name: "Team 2" },
    ];
    vi.mocked(prisma.team.findMany).mockResolvedValueOnce(mockTeams);
    const result = await getTeamsByOrganizationId("org1");
@@ -22,10 +22,12 @@ export const getTeamsByOrganizationId = reactCache(
        },
      });

-      return teams.map((team: TOrganizationTeam) => ({
+      const projectTeams = teams.map((team) => ({
        id: team.id,
        name: team.name,
      }));
+
+      return projectTeams;
    } catch (error) {
      if (error instanceof Prisma.PrismaClientKnownRequestError) {
        throw new DatabaseError(error.message);
@@ -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"
+        "w-sidebar-collapsed 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"
      )}>
-      <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>
  );
@@ -1,13 +1,11 @@
 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: {
-  params: Promise<{ organizationId: string }>;
-  children: React.ReactNode;
-}) => {
+const LandingLayout = async (props) => {
  const params = await props.params;

  const { children } = props;
@@ -23,11 +21,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}</>;
@@ -1,15 +1,16 @@
 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";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Header } from "@/modules/ui/components/header";

-const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
+const Page = async (props) => {
  const params = await props.params;
  const t = await getTranslate();

@@ -25,25 +26,26 @@ const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
  const isMultiOrgEnabled = await getIsMultiOrgEnabled();

  const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
-  const isMembershipPending = membership?.role === undefined;
+  const { isMember } = getAccessFlags(membership?.role);

  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}
-              isMembershipPending={isMembershipPending}
+              isMember={isMember}
+              environments={[]}
            />
          </div>
          <div className="flex h-full flex-col items-center justify-center space-y-12">
@@ -1,6 +1,6 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
-import { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
+import { AuthorizationError } from "@formbricks/types/errors";
 import { canUserAccessOrganization } from "@/lib/organization/auth";
 import { getOrganization } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
@@ -8,10 +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: {
-  params: Promise<{ organizationId: string }>;
-  children: React.ReactNode;
-}) => {
+const ProjectOnboardingLayout = async (props) => {
  const params = await props.params;

  const { children } = props;
@@ -25,7 +22,7 @@ const WorkspaceOnboardingLayout = async (props: {

  const user = await getUser(session.user.id);
  if (!user) {
-    throw new AuthenticationError(t("common.not_authenticated"));
+    throw new Error(t("common.user_not_found"));
  }

  const isAuthorized = await canUserAccessOrganization(session.user.id, params.organizationId);
@@ -36,7 +33,7 @@ const WorkspaceOnboardingLayout = async (props: {

  const organization = await getOrganization(params.organizationId);
  if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
+    throw new Error(t("common.organization_not_found"));
  }

  return (
@@ -47,4 +44,4 @@ const WorkspaceOnboardingLayout = async (props: {
  );
 };

-export default WorkspaceOnboardingLayout;
+export default ProjectOnboardingLayout;
@@ -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,9 +48,9 @@ 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"
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
          variant="ghost"
          asChild>
          <Link href={"/"}>
@@ -1,18 +1,14 @@
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
-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 }>;
-  children: React.ReactNode;
-}) => {
+const OnboardingLayout = async (props) => {
  const params = await props.params;

  const { children } = props;
@@ -29,15 +25,13 @@ const OnboardingLayout = async (props: {

  const organization = await getOrganization(params.organizationId);
  if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
+    throw new Error(t("common.organization_not_found"));
  }

-  const [organizationWorkspacesLimit, organizationWorkspacesCount] = await Promise.all([
-    getOrganizationWorkspacesLimit(organization.id),
-    getOrganizationWorkspacesCount(organization.id),
-  ]);
+  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
+  const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);

-  if (organizationWorkspacesCount >= organizationWorkspacesLimit) {
+  if (organizationProjectsCount >= organizationProjectsLimit) {
    return redirect(`/`);
  }

@@ -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,15 +39,15 @@ 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"
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
          variant="ghost"
          asChild>
          <Link href={"/"}>
@@ -1,4 +1,3 @@
-import { getTranslate } from "@/lingodotdev/server";
 import { SelectPlanCard } from "@/modules/ee/billing/components/select-plan-card";
 import { Header } from "@/modules/ui/components/header";

@@ -6,17 +5,16 @@ interface SelectPlanOnboardingProps {
  organizationId: string;
 }

-export const SelectPlanOnboarding = async ({ organizationId }: SelectPlanOnboardingProps) => {
-  const t = await getTranslate();
+export const SelectPlanOnboarding = ({ organizationId }: SelectPlanOnboardingProps) => {
  const nextUrl = `/organizations/${organizationId}/workspaces/new/mode`;

  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="Ship professional, unbranded surveys today!"
+        subtitle="No credit card required, no strings attached."
      />
-      <SelectPlanCard nextUrl={nextUrl} organizationId={organizationId} />
+      <SelectPlanCard nextUrl={nextUrl} />
    </div>
  );
 };
@@ -1,12 +1,8 @@
 import { redirect } from "next/navigation";
-import { TCloudBillingPlan } from "@formbricks/types/organizations";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getOrganizationBillingWithReadThroughSync } from "@/modules/ee/billing/lib/organization-billing";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { SelectPlanOnboarding } from "./components/select-plan-onboarding";

-const PAID_PLANS = new Set<TCloudBillingPlan>(["pro", "scale", "custom"]);
-
 interface PlanPageProps {
  params: Promise<{
    organizationId: string;
@@ -16,6 +12,7 @@ interface PlanPageProps {
 const Page = async (props: PlanPageProps) => {
  const params = await props.params;

+  // Only show on Cloud
  if (!IS_FORMBRICKS_CLOUD) {
    return redirect(`/organizations/${params.organizationId}/workspaces/new/mode`);
  }
@@ -26,16 +23,6 @@ const Page = async (props: PlanPageProps) => {
    return redirect(`/auth/login`);
  }

-  // Users with an existing paid/trial subscription should not be shown the trial page.
-  // Redirect them directly to the next onboarding step.
-  const billing = await getOrganizationBillingWithReadThroughSync(params.organizationId);
-  const currentPlan = billing?.stripe?.plan;
-  const hasExistingSubscription = currentPlan !== undefined && PAID_PLANS.has(currentPlan);
-
-  if (hasExistingSubscription) {
-    return redirect(`/organizations/${params.organizationId}/workspaces/new/mode`);
-  }
-
  return <SelectPlanOnboarding organizationId={params.organizationId} />;
 };

@@ -3,24 +3,23 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 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,66 +35,64 @@ 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.
-      // Without this, only brandColor is saved and the look-and-feel page falls
-      // 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,
-          styling: fullStyling,
          config: { channel, industry },
          teamIds: data.teamIds,
        },
      });

-      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,18 +101,17 @@ 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]);
  const { isSubmitting } = form.formState;

  const organizationTeamsOptions = organizationTeams.map((team) => ({
@@ -127,7 +123,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 +175,7 @@ export const WorkspaceSettings = ({
              )}
            />

-            {isAccessControlAllowed && userWorkspacesCount > 0 && (
+            {isAccessControlAllowed && userProjectsCount > 0 && (
              <FormField
                control={form.control}
                name="teamIds"
@@ -223,27 +219,29 @@ export const WorkspaceSettings = ({
        </FormProvider>
      </div>

-      <div className="relative flex w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 p-6 shadow">
+      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow">
        {logoUrl && (
          <Image
            src={logoUrl}
            alt="Logo"
            width={256}
            height={56}
-            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
          />
        )}
        <p className="text-sm text-slate-400">{t("common.preview")}</p>
-        <SurveyInline
-          appUrl={publicDomain}
-          isPreviewMode={true}
-          survey={previewSurvey(workspaceName || t("common.my_product"), t)}
-          styling={previewStyling}
-          isBrandingEnabled={false}
-          languageCode="default"
-          onFileUpload={async (file) => file.name}
-          autoFocus={false}
-        />
+        <div className="z-0 h-3/4 w-3/4">
+          <SurveyInline
+            appUrl={publicDomain}
+            isPreviewMode={true}
+            survey={previewSurvey(projectName || "my Product", t)}
+            styling={{ brandColor: { light: brandColor } }}
+            isBrandingEnabled={false}
+            languageCode="default"
+            onFileUpload={async (file) => file.name}
+            autoFocus={false}
+          />
+        </div>
      </div>
      <CreateTeamModal
        open={createTeamModalOpen}
@@ -1,35 +1,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,14 +38,14 @@ 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);

-  const isAccessControlAllowed = await getAccessControlPermission(organization.id);
+  const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);

  if (!organizationTeams) {
-    throw new ResourceNotFoundError(t("common.team"), null);
+    throw new Error(t("common.organization_teams_not_found"));
  }

  const publicDomain = getPublicDomain();
@@ -61,20 +56,20 @@ 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"
+          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
          variant="ghost"
          asChild>
          <Link href={"/"}>
@@ -16,7 +16,7 @@ interface OnboardingOptionsContainerProps {
 }

 export const OnboardingOptionsContainer = ({ options }: OnboardingOptionsContainerProps) => {
-  const getOptionCard = (option: OnboardingOptionsContainerProps["options"][number]) => {
+  const getOptionCard = (option) => {
    const Icon = option.icon;
    return (
      <OptionCard
@@ -1,7 +1,7 @@
 import { z } from "zod";

 export const ZOrganizationTeam = z.object({
-  id: z.cuid2(),
+  id: z.string().cuid2(),
  name: z.string(),
 });

@@ -1,58 +0,0 @@
-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 { getUser } from "@/lib/user/service";
-import { getUserWorkspaces, getWorkspace } from "@/lib/workspace/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-import { Button } from "@/modules/ui/components/button";
-import { Header } from "@/modules/ui/components/header";
-
-interface XMTemplatePageProps {
-  params: Promise<{
-    workspaceId: string;
-  }>;
-}
-
-const Page = async (props: XMTemplatePageProps) => {
-  const params = await props.params;
-  const session = await getServerSession(authOptions);
-  const t = await getTranslate();
-
-  if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  const user = await getUser(session.user.id);
-  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);
-  }
-
-  const workspaces = await getUserWorkspaces(session.user.id, workspace.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 && (
-        <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`}>
-            <XIcon className="h-7 w-7" strokeWidth={1.5} />
-          </Link>
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default Page;
@@ -0,0 +1,33 @@
+import { redirect } from "next/navigation";
+import { getEnvironment } from "@/lib/environment/service";
+import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+
+const SurveyEditorEnvironmentLayout = async (props) => {
+  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 Error(t("common.user_not_found"));
+  }
+
+  const environment = await getEnvironment(params.environmentId);
+
+  if (!environment) {
+    throw new Error(t("common.environment_not_found"));
+  }
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
+    </div>
+  );
+};
+
+export default SurveyEditorEnvironmentLayout;
@@ -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;
@@ -6,24 +6,15 @@ 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";
+interface ConfirmationPageProps {
+  environmentId: string;
+}

-export const ConfirmationPage = () => {
+export const ConfirmationPage = ({ environmentId }: ConfirmationPageProps) => {
  const { t } = useTranslation();
  const [showConfetti, setShowConfetti] = useState(false);
-  const [resolvedWorkspaceId, setResolvedWorkspaceId] = useState<string | null>(null);
-
  useEffect(() => {
    setShowConfetti(true);
-
-    if (globalThis.window === undefined) {
-      return;
-    }
-
-    const storedWorkspaceId = globalThis.window.sessionStorage.getItem(BILLING_CONFIRMATION_WORKSPACE_ID_KEY);
-    if (storedWorkspaceId) {
-      setResolvedWorkspaceId(storedWorkspaceId);
-    }
  }, []);

  return (
@@ -39,10 +30,7 @@ export const ConfirmationPage = () => {
          </p>
        </div>
        <Button asChild className="w-full justify-center">
-          <Link
-            href={
-              resolvedWorkspaceId ? `/workspaces/${resolvedWorkspaceId}/settings/organization/billing` : "/"
-            }>
+          <Link href={`/environments/${environmentId}/settings/billing`}>
            {t("billing_confirmation.back_to_billing_overview")}
          </Link>
        </Button>
@@ -3,10 +3,13 @@ import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper

 export const dynamic = "force-dynamic";

-const Page = async () => {
+const Page = async (props) => {
+  const searchParams = await props.searchParams;
+  const { environmentId } = searchParams;
+
  return (
    <PageContentWrapper>
-      <ConfirmationPage />
+      <ConfirmationPage environmentId={environmentId?.toString()} />
    </PageContentWrapper>
  );
 };
@@ -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 = ({
@@ -0,0 +1,145 @@
+"use server";
+
+import { z } from "zod";
+import { ZId } from "@formbricks/types/common";
+import { OperationNotAllowedError } from "@formbricks/types/errors";
+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 { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
+import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
+import {
+  getAccessControlPermission,
+  getOrganizationProjectsLimit,
+} from "@/modules/ee/license-check/lib/utils";
+import { createProject } from "@/modules/projects/settings/lib/project";
+import { getOrganizationsByUserId } from "./lib/organization";
+import { getProjectsByUserId } from "./lib/project";
+
+const ZCreateProjectAction = z.object({
+  organizationId: ZId,
+  data: ZProjectUpdateInput,
+});
+
+export const createProjectAction = authenticatedActionClient.schema(ZCreateProjectAction).action(
+  withAuditLogging(
+    "created",
+    "project",
+    async ({ ctx, parsedInput }: { ctx: AuthenticatedActionClientCtx; parsedInput: Record<string, any> }) => {
+      const { user } = ctx;
+
+      const organizationId = parsedInput.organizationId;
+
+      await checkAuthorizationUpdated({
+        userId: user.id,
+        organizationId: parsedInput.organizationId,
+        access: [
+          {
+            data: parsedInput.data,
+            schema: ZProjectUpdateInput,
+            type: "organization",
+            roles: ["owner", "manager"],
+          },
+        ],
+      });
+
+      const organization = await getOrganization(organizationId);
+
+      if (!organization) {
+        throw new Error("Organization not found");
+      }
+
+      const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
+      const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
+
+      if (organizationProjectsCount >= organizationProjectsLimit) {
+        throw new OperationNotAllowedError("Organization workspace limit reached");
+      }
+
+      if (parsedInput.data.teamIds && parsedInput.data.teamIds.length > 0) {
+        const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);
+
+        if (!isAccessControlAllowed) {
+          throw new OperationNotAllowedError("You do not have permission to manage roles");
+        }
+      }
+
+      const project = await createProject(parsedInput.organizationId, parsedInput.data);
+      const updatedNotificationSettings = {
+        ...user.notificationSettings,
+        alert: {
+          ...user.notificationSettings?.alert,
+        },
+      };
+
+      await updateUser(user.id, {
+        notificationSettings: updatedNotificationSettings,
+      });
+
+      ctx.auditLoggingCtx.organizationId = organizationId;
+      ctx.auditLoggingCtx.projectId = project.id;
+      ctx.auditLoggingCtx.newObject = project;
+      return project;
+    }
+  )
+);
+
+const ZGetOrganizationsForSwitcherAction = z.object({
+  organizationId: ZId, // Changed from environmentId to avoid extra query
+});
+
+/**
+ * Fetches organizations list for switcher dropdown.
+ * Called on-demand when user opens the organization switcher.
+ */
+export const getOrganizationsForSwitcherAction = authenticatedActionClient
+  .schema(ZGetOrganizationsForSwitcherAction)
+  .action(async ({ ctx, parsedInput }) => {
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId: parsedInput.organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager", "member", "billing"],
+        },
+      ],
+    });
+
+    return await getOrganizationsByUserId(ctx.user.id);
+  });
+
+const ZGetProjectsForSwitcherAction = z.object({
+  organizationId: ZId, // Changed from environmentId to avoid extra query
+});
+
+/**
+ * Fetches projects list for switcher dropdown.
+ * Called on-demand when user opens the project switcher.
+ */
+export const getProjectsForSwitcherAction = authenticatedActionClient
+  .schema(ZGetProjectsForSwitcherAction)
+  .action(async ({ ctx, parsedInput }) => {
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId: parsedInput.organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager", "member", "billing"],
+        },
+      ],
+    });
+
+    // Need membership for getProjectsByUserId (1 DB query)
+    const membership = await getMembershipByUserIdOrganizationId(ctx.user.id, parsedInput.organizationId);
+    if (!membership) {
+      throw new Error("Membership not found");
+    }
+
+    return await getProjectsByUserId(ctx.user.id, membership);
+  });
@@ -1,82 +1,88 @@
-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,
+    peopleCount,
    responseCount,
  } = layoutData;

  // Calculate derived values (no queries)
  const { isMember, isOwner, isManager } = getAccessFlags(membership.role);

-  const { features, lastChecked, isPendingDowngrade, active, status } = license;
+  const { features, lastChecked, isPendingDowngrade, active } = license;
  const isMultiOrgEnabled = features?.isMultiOrgEnabled ?? false;
-  const organizationWorkspacesLimit = await getOrganizationWorkspacesLimit(organization.id);
+  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
  const isOwnerOrManager = isOwner || isManager;

-  // Validate that workspace permission exists for members
-  if (isMember && !workspacePermission) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
+  // Validate that project permission exists for members
+  if (isMember && !projectPermission) {
+    throw new Error(t("common.workspace_permission_not_found"));
  }

  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}
+          peopleCount={peopleCount}
+          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}
-          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}
@@ -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;
@@ -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>
+  );
+};
@@ -0,0 +1,313 @@
+"use client";
+
+import {
+  ArrowUpRightIcon,
+  ChevronRightIcon,
+  Cog,
+  LogOutIcon,
+  MessageCircle,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  RocketIcon,
+  UserCircleIcon,
+  UserIcon,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } 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 { 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 { getAccessFlags } from "@/lib/membership/utils";
+import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
+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,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+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;
+}
+
+export const MainNavigation = ({
+  environment,
+  organization,
+  user,
+  project,
+  membershipRole,
+  isFormbricksCloud,
+  isDevelopment,
+  publicDomain,
+}: 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 { isManager, isOwner, isBilling } = getAccessFlags(membershipRole);
+
+  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,
+      },
+      {
+        href: `/environments/${environment.id}/contacts`,
+        name: t("common.contacts"),
+        icon: UserIcon,
+        isActive: pathname?.includes("/contacts") || pathname?.includes("/segments"),
+      },
+      {
+        name: t("common.configuration"),
+        href: `/environments/${environment.id}/workspace/general`,
+        icon: Cog,
+        isActive: pathname?.includes("/project"),
+      },
+    ],
+    [t, environment.id, pathname]
+  );
+
+  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,
+    },
+  ];
+
+  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 mainNavigationLink = `/environments/${environment.id}/${isBilling ? "settings/billing/" : "surveys/"}`;
+
+  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:ring-0 focus:ring-transparent focus:outline-none"
+                )}>
+                {isCollapsed ? (
+                  <PanelLeftOpenIcon strokeWidth={1.5} />
+                ) : (
+                  <PanelLeftCloseIcon strokeWidth={1.5} />
+                )}
+              </Button>
+            </div>
+
+            {/* Main Nav Switch */}
+            {!isBilling && (
+              <ul>
+                {mainNavigation.map(
+                  (item) =>
+                    !item.isHidden && (
+                      <NavigationLink
+                        key={item.name}
+                        href={item.href}
+                        isActive={item.isActive}
+                        isCollapsed={isCollapsed}
+                        isTextVisible={isTextVisible}
+                        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>
+            )}
+
+            {/* User Switch */}
+            <div className="flex items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  asChild
+                  id="userDropdownTrigger"
+                  className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+                  <div
+                    className={cn(
+                      "flex cursor-pointer flex-row items-center gap-3",
+                      isCollapsed ? "justify-center px-2" : "px-4"
+                    )}>
+                    <ProfileAvatar userId={user.id} />
+                    {!isCollapsed && !isTextVisible && (
+                      <>
+                        <div
+                          className={cn(isTextVisible ? "opacity-0" : "opacity-100", "grow overflow-hidden")}>
+                          <p
+                            title={user?.email}
+                            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-700">{t("common.account")}</p>
+                        </div>
+                        <ChevronRightIcon
+                          className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")}
+                        />
+                      </>
+                    )}
+                  </div>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent
+                  id="userDropdownInnerContentWrapper"
+                  side="right"
+                  sideOffset={10}
+                  alignOffset={5}
+                  align="end">
+                  {/* Dropdown Items */}
+
+                  {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>
+                  ))}
+                  {/* Logout */}
+                  <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>
+      )}
+    </>
+  );
+};
@@ -0,0 +1,66 @@
+import Link from "next/link";
+import React from "react";
+import { cn } from "@/lib/cn";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
+
+interface NavigationLinkProps {
+  href: string;
+  isActive: boolean;
+  isCollapsed: boolean;
+  children: React.ReactNode;
+  linkText: string;
+  isTextVisible: boolean;
+}
+
+export const NavigationLink = ({
+  href,
+  isActive,
+  isCollapsed = false,
+  children,
+  linkText,
+  isTextVisible = true,
+}: NavigationLinkProps) => {
+  const activeClass = "bg-slate-50 border-r-4 border-brand-dark font-semibold text-slate-900";
+  const inactiveClass =
+    "hover:bg-slate-50 border-r-4 border-transparent hover:border-slate-300 transition-all duration-150 ease-in-out";
+
+  return (
+    <>
+      {isCollapsed ? (
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <li
+                className={cn(
+                  "mb-1 ml-2 rounded-l-md py-2 pl-2 text-sm text-slate-700 hover:text-slate-900",
+                  isActive ? activeClass : inactiveClass
+                )}>
+                <Link href={href} className="flex items-center">
+                  {children}
+                </Link>
+              </li>
+            </TooltipTrigger>
+            <TooltipContent side="right">{linkText}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        <li
+          className={cn(
+            "mb-1 rounded-l-md py-2 pl-5 text-sm text-slate-600 hover:text-slate-900",
+            isActive ? activeClass : inactiveClass
+          )}>
+          <Link href={href} className="flex items-center">
+            {children}
+            <span
+              className={cn(
+                "ml-2 flex transition-opacity duration-100",
+                isTextVisible ? "opacity-0" : "opacity-100"
+              )}>
+              {linkText}
+            </span>
+          </Link>
+        </li>
+      )}
+    </>
+  );
+};
@@ -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";

@@ -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,31 +20,35 @@ interface TopControlBarProps {
 }

 export const TopControlBar = ({
+  environments,
  currentOrganizationId,
+  currentProjectId,
  isMultiOrgEnabled,
-  organizationWorkspacesLimit,
+  organizationProjectsLimit,
  isFormbricksCloud,
  isLicenseActive,
  isOwnerOrManager,
  isAccessControlAllowed,
  membershipRole,
 }: TopControlBarProps) => {
-  const { workspace } = useWorkspaceContext();
-  const isMembershipPending = membershipRole === undefined;
+  const { isMember } = getAccessFlags(membershipRole);
+  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}
-        isMembershipPending={isMembershipPending}
+        isMember={isMember}
        isAccessControlAllowed={isAccessControlAllowed}
      />
    </div>
@@ -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";
@@ -52,11 +53,11 @@ export const WidgetStatusIndicator = ({ workspace }: WidgetStatusIndicatorProps)
        <currentStatus.icon />
      </div>
      <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
-      <p className="w-2/3 text-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-sm text-balance text-slate-600">{currentStatus.subtitle}</p>
      {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>
@@ -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>
+  );
+};
@@ -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,42 @@ import {
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
-import { useOrganization, useWorkspace } from "../context/workspace-context";
+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;
 }

+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,
 }: 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 +70,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
@@ -64,7 +81,7 @@ export const OrganizationBreadcrumb = ({
      getOrganizationsForSwitcherAction({ organizationId: currentOrganizationId }).then((result) => {
        if (result?.data) {
          // Sort organizations by name
-          const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+          const sorted = result.data.toSorted((a, b) => a.name.localeCompare(b.name));
          setOrganizations(sorted);
        } else {
          // Handle server errors or validation errors
@@ -93,15 +110,9 @@ export const OrganizationBreadcrumb = ({
    return;
  }

-  const workspaceBasePath = `/workspaces/${workspace?.id}`;
-
  const handleOrganizationChange = (organizationId: string) => {
+    if (organizationId === currentOrganizationId) return;
    startTransition(() => {
-      setIsOrganizationDropdownOpen(false);
-      if (organizationId === currentOrganizationId && currentWorkspaceId) {
-        router.push(`/workspaces/${currentWorkspaceId}/settings/organization/general`);
-        return;
-      }
      router.push(`/organizations/${organizationId}/`);
    });
  };
@@ -116,6 +127,43 @@ 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`,
+      hidden: !isOwnerOrManager,
+    },
+    {
+      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 || isMember,
+    },
+  ];
+
  return (
    <BreadcrumbItem isActive={isOrganizationDropdownOpen}>
      <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
@@ -184,16 +232,27 @@ 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 : (
+                  <DropdownMenuCheckboxItem
+                    key={setting.id}
+                    checked={isActiveOrganizationSetting(pathname, setting.id)}
+                    hidden={setting.hidden}
+                    onClick={() => handleSettingChange(setting.href)}
+                    className="cursor-pointer">
+                    {setting.label}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+            </div>
          )}
        </DropdownMenuContent>
      </DropdownMenu>
@@ -0,0 +1,74 @@
+"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;
+  isAccessControlAllowed: boolean;
+}
+
+export const ProjectAndOrgSwitch = ({
+  currentOrganizationId,
+  currentOrganizationName,
+  currentProjectId,
+  currentProjectName,
+  currentEnvironmentId,
+  environments,
+  isMultiOrgEnabled,
+  organizationProjectsLimit,
+  isFormbricksCloud,
+  isLicenseActive,
+  isOwnerOrManager,
+  isAccessControlAllowed,
+  isMember,
+}: 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}
+        />
+        {currentProjectId && currentEnvironmentId && (
+          <ProjectBreadcrumb
+            currentProjectId={currentProjectId}
+            currentProjectName={currentProjectName}
+            currentOrganizationId={currentOrganizationId}
+            currentEnvironmentId={currentEnvironmentId}
+            isOwnerOrManager={isOwnerOrManager}
+            organizationProjectsLimit={organizationProjectsLimit}
+            isFormbricksCloud={isFormbricksCloud}
+            isLicenseActive={isLicenseActive}
+            isAccessControlAllowed={isAccessControlAllowed}
+            isEnvironmentBreadcrumbVisible={showEnvironmentBreadcrumb}
+          />
+        )}
+        {showEnvironmentBreadcrumb && (
+          <EnvironmentBreadcrumb environments={environments} currentEnvironment={currentEnvironment} />
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
@@ -0,0 +1,297 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import { ChevronDownIcon, ChevronRightIcon, CogIcon, HotelIcon, 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 { 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;
+}
+
+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,
+}: 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.toSorted((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`,
+    },
+  ];
+
+  if (!currentProject) {
+    const errorMessage = `Workspace not found for workspace id: ${currentProjectId}`;
+    logger.error(errorMessage);
+    Sentry.captureException(new Error(errorMessage));
+    return;
+  }
+
+  const handleProjectChange = (projectId: string) => {
+    if (projectId === currentProjectId) return;
+    startTransition(() => {
+      router.push(`/workspaces/${projectId}/`);
+    });
+  };
+
+  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">
+            <HotelIcon 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">
+            <HotelIcon 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>
+              {isOwnerOrManager && (
+                <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) => (
+              <DropdownMenuCheckboxItem
+                key={setting.id}
+                checked={isActiveProjectSetting(pathname, setting.id)}
+                onClick={() => handleProjectSettingsNavigation(setting.id)}
+                className="cursor-pointer">
+                {setting.label}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </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>
+  );
+};
@@ -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>
+  );
+};
@@ -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;
@@ -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);
    });
  });
 });
@@ -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);
@@ -0,0 +1,25 @@
+import { redirect } from "next/navigation";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+
+const EnvironmentPage = async (props) => {
+  const params = await props.params;
+  const { session, organization } = await getEnvironmentAuth(params.environmentId);
+
+  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
+  const { isBilling } = getAccessFlags(currentUserMembership?.role);
+
+  if (isBilling) {
+    if (IS_FORMBRICKS_CLOUD) {
+      return redirect(`/environments/${params.environmentId}/settings/billing`);
+    } else {
+      return redirect(`/environments/${params.environmentId}/settings/enterprise`);
+    }
+  }
+
+  return redirect(`/environments/${params.environmentId}/surveys`);
+};
+
+export default EnvironmentPage;
@@ -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"),
    },
  ];
@@ -0,0 +1,34 @@
+import { getServerSession } from "next-auth";
+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) => {
+  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 Error(t("common.organization_not_found"));
+  }
+
+  if (!project) {
+    throw new Error(t("common.workspace_not_found"));
+  }
+
+  if (!session) {
+    throw new Error(t("common.session_not_found"));
+  }
+
+  return <>{children}</>;
+};
+
+export default AccountSettingsLayout;
@@ -0,0 +1,37 @@
+"use server";
+
+import { z } from "zod";
+import { ZUserNotificationSettings } from "@formbricks/types/user";
+import { getUser, updateUser } from "@/lib/user/service";
+import { authenticatedActionClient } from "@/lib/utils/action-client";
+import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
+import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
+
+const ZUpdateNotificationSettingsAction = z.object({
+  notificationSettings: ZUserNotificationSettings,
+});
+
+export const updateNotificationSettingsAction = authenticatedActionClient
+  .schema(ZUpdateNotificationSettingsAction)
+  .action(
+    withAuditLogging(
+      "updated",
+      "user",
+      async ({
+        ctx,
+        parsedInput,
+      }: {
+        ctx: AuthenticatedActionClientCtx;
+        parsedInput: Record<string, any>;
+      }) => {
+        const oldObject = await getUser(ctx.user.id);
+        const result = await updateUser(ctx.user.id, {
+          notificationSettings: parsedInput.notificationSettings,
+        });
+        ctx.auditLoggingCtx.userId = ctx.user.id;
+        ctx.auditLoggingCtx.oldObject = oldObject;
+        ctx.auditLoggingCtx.newObject = result;
+        return result;
+      }
+    )
+  );
@@ -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>
@@ -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>
@@ -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,29 +38,26 @@ 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],
-      };
+      updatedNotificationSettings[notificationType][surveyOrProjectOrOrganizationId] =
+        !updatedNotificationSettings[notificationType][surveyOrProjectOrOrganizationId];
    }

    const updatedNotificationSettingsActionResponse = await updateNotificationSettingsAction({
      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 +73,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 +92,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",
@@ -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} />
      ))}
@@ -1,34 +1,35 @@
 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,
  memberships: Membership[]
 ): TUserNotificationSettings => {
-  const newNotificationSettings: TUserNotificationSettings = {
-    alert: {} as Record<string, boolean>,
+  const newNotificationSettings = {
+    alert: {},
    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[survey.id]?.responseFinished ||
+            (notificationSettings.alert && notificationSettings.alert[survey.id]) ||
+            false; // check for legacy notification settings w/o "alerts" key
+        }
      }
    }
  }
@@ -44,17 +45,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 +77,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 +95,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 +113,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,23 +136,24 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
  return memberships;
 };

-const Page = async (props: { searchParams: Promise<Record<string, string>> }) => {
+const Page = async (props) => {
  const searchParams = await props.searchParams;
+  const params = await props.params;
  const t = await getTranslate();
  const session = await getServerSession(authOptions);
  if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
+    throw new Error(t("common.session_not_found"));
  }
  const autoDisableNotificationType = searchParams["type"];
  const autoDisableNotificationElementId = searchParams["elementId"];

  const [user, memberships] = await Promise.all([getUser(session.user.id), getMemberships(session.user.id)]);
  if (!user) {
-    throw new AuthenticationError(t("common.not_authenticated"));
+    throw new Error(t("common.user_not_found"));
  }

  if (!memberships) {
-    throw new ResourceNotFoundError(t("common.membership"), null);
+    throw new Error(t("common.membership_not_found"));
  }

  if (user?.notificationSettings) {
@@ -151,18 +161,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>
  );
 };
@@ -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;
+        }[];
      }[];
    }[];
  };
@@ -9,19 +9,18 @@ import {
 import {
  getIsEmailUnique,
  verifyUserPassword,
-} from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/lib/user";
-import { EMAIL_VERIFICATION_DISABLED, PASSWORD_RESET_DISABLED } from "@/lib/constants";
+} from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user";
+import { EMAIL_VERIFICATION_DISABLED } from "@/lib/constants";
 import { getUser, updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
-import { requestPasswordReset } from "@/modules/auth/forgot-password/lib/password-reset-service";
 import { updateBrevoCustomer } from "@/modules/auth/lib/brevo";
 import { applyRateLimit } from "@/modules/core/rate-limit/helpers";
 import { rateLimitConfigs } from "@/modules/core/rate-limit/rate-limit-configs";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
-import { sendVerificationNewEmail } from "@/modules/email";
+import { sendForgotPasswordEmail, sendVerificationNewEmail } from "@/modules/email";

-function buildUserUpdatePayload(parsedInput: TUserPersonalInfoUpdateInput): TUserUpdateInput {
+function buildUserUpdatePayload(parsedInput: any): TUserUpdateInput {
  return {
    ...(parsedInput.name && { name: parsedInput.name }),
    ...(parsedInput.locale && { locale: parsedInput.locale }),
@@ -59,45 +58,55 @@ async function handleEmailUpdate({
    payload.email = inputEmail;
    await updateBrevoCustomer({ id: ctx.user.id, email: inputEmail });
  } else {
-    await sendVerificationNewEmail(ctx.user.id, inputEmail, ctx.user.locale);
+    await sendVerificationNewEmail(ctx.user.id, inputEmail);
  }
  return payload;
 }

-export const updateUserAction = authenticatedActionClient.inputSchema(ZUserPersonalInfoUpdateInput).action(
-  withAuditLogging("updated", "user", async ({ ctx, parsedInput }) => {
-    const oldObject = await getUser(ctx.user.id);
-    let payload = buildUserUpdatePayload(parsedInput);
-    payload = await handleEmailUpdate({ ctx, parsedInput, payload });
+export const updateUserAction = authenticatedActionClient.schema(ZUserPersonalInfoUpdateInput).action(
+  withAuditLogging(
+    "updated",
+    "user",
+    async ({
+      ctx,
+      parsedInput,
+    }: {
+      ctx: AuthenticatedActionClientCtx;
+      parsedInput: TUserPersonalInfoUpdateInput;
+    }) => {
+      const oldObject = await getUser(ctx.user.id);
+      let payload = buildUserUpdatePayload(parsedInput);
+      payload = await handleEmailUpdate({ ctx, parsedInput, payload });

-    // Only proceed with updateUser if we have actual changes to make
-    let newObject = oldObject;
-    if (Object.keys(payload).length > 0) {
-      newObject = await updateUser(ctx.user.id, payload);
+      // Only proceed with updateUser if we have actual changes to make
+      let newObject = oldObject;
+      if (Object.keys(payload).length > 0) {
+        newObject = await updateUser(ctx.user.id, payload);
+      }
+
+      ctx.auditLoggingCtx.userId = ctx.user.id;
+      ctx.auditLoggingCtx.oldObject = oldObject;
+      ctx.auditLoggingCtx.newObject = newObject;
+
+      return true;
    }
-
-    ctx.auditLoggingCtx.userId = ctx.user.id;
-    ctx.auditLoggingCtx.oldObject = oldObject;
-    ctx.auditLoggingCtx.newObject = newObject;
-
-    return true;
-  })
+  )
 );

 export const resetPasswordAction = authenticatedActionClient.action(
-  withAuditLogging("passwordReset", "user", async ({ ctx }) => {
-    if (PASSWORD_RESET_DISABLED) {
-      throw new OperationNotAllowedError("Password reset is disabled");
+  withAuditLogging(
+    "passwordReset",
+    "user",
+    async ({ ctx }: { ctx: AuthenticatedActionClientCtx; parsedInput: undefined }) => {
+      if (ctx.user.identityProvider !== "email") {
+        throw new OperationNotAllowedError("Password reset is not allowed for this user.");
+      }
+
+      await sendForgotPasswordEmail(ctx.user);
+
+      ctx.auditLoggingCtx.userId = ctx.user.id;
+
+      return { success: true };
    }
-
-    if (ctx.user.identityProvider !== "email") {
-      throw new OperationNotAllowedError("Password reset is not allowed for this user.");
-    }
-
-    await requestPasswordReset(ctx.user, "profile");
-
-    ctx.auditLoggingCtx.userId = ctx.user.id;
-
-    return { success: true };
-  })
+  )
 );
@@ -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>
@@ -39,18 +39,18 @@ export const DeleteAccount = ({
        organizationsWithSingleOwner={organizationsWithSingleOwner}
      />
      <p className="text-sm text-slate-700">
-        <strong>{t("workspace.settings.profile.warning_cannot_undo")}</strong>
+        <strong>{t("environments.settings.profile.warning_cannot_undo")}</strong>
      </p>
      <TooltipRenderer
        shouldRender={isDeleteDisabled}
-        tooltipContent={t("workspace.settings.profile.warning_cannot_delete_account")}>
+        tooltipContent={t("environments.settings.profile.warning_cannot_delete_account")}>
        <Button
          className="mt-4"
          variant="destructive"
          size="sm"
          onClick={() => setModalOpen(!isModalOpen)}
          disabled={isDeleteDisabled}>
-          {t("workspace.settings.profile.confirm_delete_my_account")}
+          {t("environments.settings.profile.confirm_delete_my_account")}
        </Button>
      </TooltipRenderer>
    </div>
@@ -8,8 +8,8 @@ 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 { appLanguages, sortedAppLanguages } from "@/lib/i18n/utils";
+import { PasswordConfirmationModal } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal";
+import { appLanguages } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { Button } from "@/modules/ui/components/button";
@@ -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;
      }
@@ -116,15 +116,11 @@ export const EditProfileDetailsForm = ({
      setShowModal(true);
    } else {
      try {
-        const result = await updateUserAction({
+        await updateUserAction({
          ...data,
          name: data.name.trim(),
        });
-        if (result?.serverError) {
-          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 +141,7 @@ export const EditProfileDetailsForm = ({
        redirectUrl: "/auth/login",
        redirect: true,
        callbackUrl: "/auth/login",
-        clearWorkspaceId: true,
+        clearEnvironmentId: true,
      });
    } else {
      const errorMessage = getFormattedErrorMessage(result);
@@ -202,54 +198,41 @@ export const EditProfileDetailsForm = ({
          <FormField
            control={form.control}
            name="locale"
-            render={({ field }) => {
-              const selectedLanguage = appLanguages.find((l) => l.code === field.value);
-
-              return (
-                <FormItem className="mt-4">
-                  <FormLabel>{t("common.language")}</FormLabel>
-                  <FormControl>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          className="h-10 w-full border border-slate-300 px-3 text-left">
-                          <div className="flex w-full items-center justify-between">
-                            {selectedLanguage ? (
-                              <>
-                                {selectedLanguage.label["en-US"]}
-                                {selectedLanguage.label.native !== selectedLanguage.label["en-US"] &&
-                                  ` (${selectedLanguage.label.native})`}
-                              </>
-                            ) : (
-                              t("common.select")
-                            )}
-                            <ChevronDownIcon className="h-4 w-4 text-slate-500" />
-                          </div>
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
-                        align="start">
-                        <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
-                          {sortedAppLanguages.map((lang) => (
-                            <DropdownMenuRadioItem
-                              key={lang.code}
-                              value={lang.code}
-                              className="min-h-8 cursor-pointer">
-                              {lang.label["en-US"]}
-                              {lang.label.native !== lang.label["en-US"] && ` (${lang.label.native})`}
-                            </DropdownMenuRadioItem>
-                          ))}
-                        </DropdownMenuRadioGroup>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </FormControl>
-                  <FormError />
-                </FormItem>
-              );
-            }}
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel>{t("common.language")}</FormLabel>
+                <FormControl>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        className="h-10 w-full border border-slate-300 px-3 text-left">
+                        <div className="flex w-full items-center justify-between">
+                          {appLanguages.find((l) => l.code === field.value)?.label["en-US"] ?? "NA"}
+                          <ChevronDownIcon className="h-4 w-4 text-slate-500" />
+                        </div>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
+                      align="start">
+                      <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
+                        {appLanguages.map((lang) => (
+                          <DropdownMenuRadioItem
+                            key={lang.code}
+                            value={lang.code}
+                            className="min-h-8 cursor-pointer">
+                            {lang.label["en-US"]}
+                          </DropdownMenuRadioItem>
+                        ))}
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </FormControl>
+                <FormError />
+              </FormItem>
+            )}
          />

          {isPasswordResetEnabled && (
@@ -98,7 +98,7 @@ export const PasswordConfirmationModal = ({
                            aria-label="password"
                            aria-required="true"
                            required
-                            className="block w-full rounded-md border-slate-300 shadow-sm focus:border-brand-dark focus:ring-brand-dark sm:text-sm"
+                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
                            value={field.value}
                            onChange={(password) => field.onChange(password)}
                          />
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`{"sessionId":"f77248e2-8840-41c6-968b-c3b7d8a9e913","pid":49125,"acquiredAt":1776168010367}`