release: v1.35.0

2026-07-04 09:58:35 +00:00 · 2024-11-21 21:54:08 +05:30
426 changed files with 6210 additions and 26444 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: helloanoop
--- a/.github/ISSUE_TEMPLATE/BugReport.yaml
+++ b/.github/ISSUE_TEMPLATE/BugReport.yaml
@@ -6,58 +6,26 @@ body:
    attributes:
      value: |
        Thanks for taking the time to fill out this bug report!
-
-        Before submitting, please make sure you've searched existing issues:
-        👉 [Search existing issues](https://github.com/usebruno/bruno/issues?q=is%3Aissue)
-
  - type: checkboxes
    attributes:
      label: 'I have checked the following:'
      options:
-        - label: "I have searched existing issues and found nothing related to my issue."
+        - label: I use the newest version of bruno.
+          required: true
+        - label: I've searched existing issues and found nothing related to my issue.
          required: true
-
-  - type: checkboxes
-    attributes:
-      label: 'This bug is:'
-      options:
-        - label: making Bruno unusable for me
-          required: false
-        - label: slowing me down but I'm able to continue working
-          required: false
-        - label: annoying
-          required: false
-          
-  - type: input
-    attributes:
-      label: Bruno version
-      description: Please specify the version of Bruno you are using in which the issue occurs.
-      placeholder: 1.38.1
-    validations:
-      required: true
-
-  - type: input
-    attributes:
-      label: Operating System
-      description: Information about the operating system the issue occurs on.
-      placeholder: Windows 11 26100.3037 / macOS 15.1 (24B83) / Linux 6.13.1
-    validations:
-      required: true
-
  - type: textarea
    attributes:
      label: Describe the bug
-      description: A clear and concise description of the bug and how it's effecting your work along with steps to reproduce. 
+      description: A clear and concise description of the bug.
    validations:
      required: true
-
  - type: textarea
    attributes:
      label: .bru file to reproduce the bug
-      description: Attach your .bru file here that can reproduce the problem.
+      description: Attach your .bru file here that can reqroduce the problem.
    validations:
      required: false
-
  - type: textarea
    attributes:
      label: Screenshots/Live demo link
--- a/.github/ISSUE_TEMPLATE/FeatureRequest.yaml
+++ b/.github/ISSUE_TEMPLATE/FeatureRequest.yaml
@@ -8,23 +8,13 @@ body:
      options:
        - label: I've searched existing issues and found nothing related to my issue.
          required: true
-  - type: checkboxes
-    attributes:
-      label: 'This feature'
-      options:
-        - label: blocks me from using Bruno 
-          required: false
-        - label: would improve my quality of life in Bruno 
-          required: false
-        - label: is something I've never seen an API client do before
-          required: false
  - type: markdown
    attributes:
      value: |
        Suggest an idea for this project.
  - type: textarea
    attributes:
-      label: Describe the feature you want to add, and how it would change your usage of Bruno 
+      label: Describe the feature you want to add
      description: A clear and concise description of the feature you want to be added.
    validations:
      required: true
@@ -33,4 +23,4 @@ body:
      label: Mockups or Images of the feature
      description: Add some images to support your feature.
    validations:
-      required: false
+      required: true
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,31 +0,0 @@
-version: 2
-
-updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: weekly
-  
-  - package-ecosystem: npm
-    directory: "/"
-    schedule:
-      interval: weekly
-    groups:
-      bruno-dependencies:
-        patterns:
-          - "*usebruno*"
-      babel-dependencies:
-        patterns:
-          - "*babel*"
-      fortawesome-dependencies:
-        patterns:
-          - "*fortawesome*"
-      electron-dependencies:
-        patterns:
-          - "*electron*"
-      rollup-dependencies:
-        patterns:
-          - "*rollup*"
-      jest-dependencies:
-        patterns:
-          - "*jest*"
--- a/.github/workflows/npm-bru-cli.yml
+++ b/.github/workflows/npm-bru-cli.yml
@@ -2,11 +2,6 @@ name: Bru CLI Tests (npm)

 on:
  workflow_dispatch:
-    inputs:
-      build:
-        description: 'Test Bru CLI (npm)'
-        required: true
-        default: 'true'

 # Assign permissions for unit tests to be reported.
 # See https://github.com/dorny/test-reporter/issues/168
@@ -20,13 +15,10 @@ permissions:
 jobs:
  test:
    name: CLI Tests
-    strategy:
-      matrix:
-        os: [ubuntu-latest, macos-latest]
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v3
        with:
          node-version-file: '.nvmrc'

@@ -43,7 +35,7 @@ jobs:
          bru run --env Prod --output junit.xml --format junit

      - name: Publish Test Report
-        uses: dorny/test-reporter@v2
+        uses: dorny/test-reporter@v1
        if: success() || failure()
        with:
          name: Test Report
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -5,13 +5,14 @@ on:
  pull_request:
    branches: [main]

+permissions:
+  contents: read
+
 jobs:
  unit-test:
    name: Unit Tests
    timeout-minutes: 60
    runs-on: ubuntu-latest
-    permissions:
-      contents: read
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
@@ -51,10 +52,6 @@ jobs:
  cli-test:
    name: CLI Tests
    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
--- a/assets/images/sponsors/commit-company.png
+++ b/assets/images/sponsors/commit-company.png
--- a/assets/images/sponsors/samagata.png
+++ b/assets/images/sponsors/samagata.png
--- a/assets/images/sponsors/zuplo.png
+++ b/assets/images/sponsors/zuplo.png
--- a/contributing.md
+++ b/contributing.md
@@ -86,11 +86,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testing

 ```bash
-# run bruno-schema tests
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# run tests over all workspaces
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Raising Pull Requests
--- a/docs/contributing/contributing_bn.md
+++ b/docs/contributing/contributing_bn.md
@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testing (পরীক্ষা)

 ```bash
-# ব্রুনো-স্কিমা পরীক্ষা চালান
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# সমস্ত কর্মক্ষেত্রে পরীক্ষা চালান
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Raising Pull Request (পুল অনুরোধ উত্থাপন)
--- a/docs/contributing/contributing_cn.md
+++ b/docs/contributing/contributing_cn.md
@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### 测试

 ```bash
-# 运行 bruno-schema 测试
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# 在所有工作区上运行测试
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### 提交 Pull Request
--- a/docs/contributing/contributing_de.md
+++ b/docs/contributing/contributing_de.md
@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Testen

 ```bash
-# Führen Sie Bruno-Schema-Tests aus
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# Führen Sie Tests für alle Arbeitsbereiche durch
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
--- a/docs/contributing/contributing_es.md
+++ b/docs/contributing/contributing_es.md
@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Pruebas

 ```bash
-# ejecutar pruebas de esquema bruno
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# ejecutar pruebas en todos los espacios de trabajo
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Crea un Pull Request
--- a/docs/contributing/contributing_fr.md
+++ b/docs/contributing/contributing_fr.md
@@ -73,11 +73,11 @@ find . -type f -name "package-lock.json" -delete
 ### Tests

 ```bash
-# exécuter des tests de schéma bruno
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# exécuter des tests sur tous les espaces de travail
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Ouvrir une Pull Request
--- a/docs/contributing/contributing_hi.md
+++ b/docs/contributing/contributing_hi.md
@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### परिक्षण

 ```bash
-# ब्रूनो-स्कीमा परीक्षण चलाएँ
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# सभी कार्यस्थानों पर परीक्षण चलाएँ
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### पुल अनुरोध प्रक्रिया
--- a/docs/contributing/contributing_it.md
+++ b/docs/contributing/contributing_it.md
@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Tests

 ```bash
-# esegui i test dello schema bruno
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# esegui test su tutti gli spazi di lavoro
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
--- a/docs/contributing/contributing_ja.md
+++ b/docs/contributing/contributing_ja.md
@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### テストを動かすには

 ```bash
-# ブルーノスキーマのテストを実行します
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# すべてのワークスペースでテストを実行します
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### プルリクエストの手順
--- a/docs/contributing/contributing_kr.md
+++ b/docs/contributing/contributing_kr.md
@@ -66,11 +66,11 @@ find . -type f -name "package-lock.json" -delete
 ### 테스팅

 ```bash
-# bruno-schema 테스트 실행
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# 모든 작업 공간에서 테스트 실행
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Pull Requests 요청
--- a/docs/contributing/contributing_nl.md
+++ b/docs/contributing/contributing_nl.md
@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testen

 ```bash
-# voer bruno-schema tests uit
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# voer tests uit over alle werkruimten
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Pull Requests indienen
--- a/docs/contributing/contributing_pl.md
+++ b/docs/contributing/contributing_pl.md
@@ -71,11 +71,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testowanie

 ```bash
-# uruchom testy bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# uruchom testy we wszystkich przestrzeniach roboczych
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Tworzenie Pull Request
--- a/docs/contributing/contributing_pt_br.md
+++ b/docs/contributing/contributing_pt_br.md
@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testando

 ```bash
-# executar testes do bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# executar testes em todos os ambientes de trabalho
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Envio de Pull Request
--- a/docs/contributing/contributing_ro.md
+++ b/docs/contributing/contributing_ro.md
@@ -64,11 +64,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testarea

 ```shell
-# executați teste bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# executați teste peste toate spațiile de lucru
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Crearea unui Pull Request
--- a/docs/contributing/contributing_ru.md
+++ b/docs/contributing/contributing_ru.md
@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Тестирование

 ```bash
-# запустите тесты bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# запустите тесты во всех рабочих пространствах
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
--- a/docs/contributing/contributing_sk.md
+++ b/docs/contributing/contributing_sk.md
@@ -67,11 +67,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testovanie

 ````bash
-# spustiť bruno-schema testy
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# spustiť testy vo všetkých pracovných priestoroch
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Vyrobenie Pull Request
--- a/docs/contributing/contributing_tr.md
+++ b/docs/contributing/contributing_tr.md
@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Test

 ```bash
-# bruno-schema testlerini çalıştır
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# tüm çalışma alanlarında testleri çalıştır
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### Pull Request Oluşturma
--- a/docs/contributing/contributing_ua.md
+++ b/docs/contributing/contributing_ua.md
@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Тестування

 ```bash
-# запустити тести bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# запустити тести у всіх робочих просторах
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
--- a/docs/contributing/contributing_zhtw.md
+++ b/docs/contributing/contributing_zhtw.md
@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### 測試

 ```bash
-# 執行布魯諾架構測試
+# bruno-schema
 npm test --workspace=packages/bruno-schema

-# 對所有工作區執行測試
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

 ### 發送 Pull Request
--- a/docs/publishing/publishing_nl.md
+++ b/docs/publishing/publishing_nl.md
--- a/docs/readme/readme_ua.md
+++ b/docs/readme/readme_ua.md
@@ -29,13 +29,13 @@
 | [日本語](./readme_ja.md)
 | [ქართული](./readme_ka.md)

-Bruno це новий та іноваційний API клієнт, націлений на революційну зміну статусy кво, запровадженого інструментами на кшталт Postman.
+Bruno це новий та іноваційний API клієнт, націлений на революційну зміну статус кво, запровадженого інструментами на кшталт Postman.

 Bruno зберігає ваші колекції напряму у теці на вашому диску. Він використовує текстову мову розмітки Bru для збереження інформації про ваші API запити.

 Ви можете використовувати git або будь-яку іншу систему контролю версій щоб спільно працювати над вашими колекціями API запитів.

-Bruno є повністю автономним. Немає жодних планів додавати будь-які синхронізації через хмару, ніколи. Ми цінуємо приватність ваших даних, і вважаєм, що вони мають залишитись лише на вашому комп'ютері. Дізнатись більше про наше бачення у довготривалій перспективі можна [тут](https://github.com/usebruno/bruno/discussions/269)
+Bruno є повністю автономним. Немає жодних планів додавати будь-які синхронізації через хмару, ніколи. Ми цінуємо приватність ваших даних, і вважаєм, що вони мають залишитись лише на вашому комп'ютері. Взнати більше про наше бачення у довготривалій перспективі можна [тут](https://github.com/usebruno/bruno/discussions/269)

 ![bruno](/assets/images/landing-2.png) <br /><br />

@@ -69,13 +69,13 @@ Bruno є повністю автономним. Немає жодних план

 ### Поділитись відгуками 📣

-Якщо Bruno допоміг у роботі вам або вашій команді, будь ласка не забудьте поділитись вашими [відгуками у github дискусії](https://github.com/usebruno/bruno/discussions/343)
+Якщо Bruno допоміг вам у вашій роботі і вашим командам, будь ласка не забудьте поділитись вашими [відгуками у github дискусії](https://github.com/usebruno/bruno/discussions/343)

 ### Зробити свій внесок 👩‍💻🧑‍💻

 Я радий що ви бажаєте покращити Bruno. Будь ласка переглянте [інструкцію по контрибуції](../contributing/contributing_ua.md)

-Навіть якщо ви не можете зробити свій внесок пишучи код, будь ласка не соромтесь рапортувати про помилки і писати запити на новий функціонал, який потрібен вам у вашій роботі.
+Навіть якщо ви не можете зробити свій внесок пишучи програмний код, будь ласка не соромтесь рапортувати про помилки і писати запити на новий функціонал, який потрібен вам у вашій роботі.

 ### Автори

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -27,16 +27,14 @@
    "pretty-quick": "^3.1.3",
    "randomstring": "^1.2.2",
    "rimraf": "^6.0.1",
-    "ts-jest": "^29.2.6"
+    "ts-jest": "^29.0.5"
  },
  "scripts": {
-    "setup": "node ./scripts/setup.js",
    "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
    "dev:web": "npm run dev --workspace=packages/bruno-app",
    "build:web": "npm run build --workspace=packages/bruno-app",
    "prettier:web": "npm run prettier --workspace=packages/bruno-app",
    "dev:electron": "npm run dev --workspace=packages/bruno-electron",
-    "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
    "build:bruno-common": "npm run build --workspace=packages/bruno-common",
    "build:bruno-query": "npm run build --workspace=packages/bruno-query",
    "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
@@ -47,13 +45,12 @@
    "build:electron:deb": "./scripts/build-electron.sh deb",
    "build:electron:rpm": "./scripts/build-electron.sh rpm",
    "build:electron:snap": "./scripts/build-electron.sh snap",
-    "test:codegen": "npm run dev:web & node ./scripts/playwright-codegen.js",
    "test:e2e": "npx playwright test",
    "test:report": "npx playwright show-report",
    "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
    "prepare": "husky install"
  },
  "overrides": {
-    "rollup": "3.29.5"
+    "rollup":"3.29.5"
  }
 }
--- a/packages/bruno-app/.babelrc
+++ b/packages/bruno-app/.babelrc
@@ -1,4 +1,4 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
 }
--- a/packages/bruno-app/.gitignore
+++ b/packages/bruno-app/.gitignore
@@ -31,6 +31,6 @@ yarn-error.log*

 # next.js
 .next/
-dist/
+out/

 .env
--- a/packages/bruno-app/next.config.js
+++ b/packages/bruno-app/next.config.js
@@ -0,0 +1,22 @@
+module.exports = {
+  output: 'export',
+  reactStrictMode: false,
+  publicRuntimeConfig: {
+    CI: process.env.CI,
+    PLAYWRIGHT: process.env.PLAYWRIGHT,
+    ENV: process.env.ENV
+  },
+  webpack: (config, { isServer }) => {
+    // Fixes npm packages that depend on `fs` module
+    if (!isServer) {
+      config.resolve.fallback.fs = false;
+    }
+    Object.defineProperty(config, 'devtool', {
+      get() {
+          return 'source-map';
+      },
+      set() {},
+    });
+    return config;
+  },
+};
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -1,17 +1,17 @@
 {
  "name": "@usebruno/app",
-  "version": "2.0.0",
+  "version": "0.3.0",
  "private": true,
  "scripts": {
-    "dev": "rsbuild dev",
-    "build": "rsbuild build -m production",
-    "preview": "rsbuild preview",
+    "dev": "cross-env ENV=dev next dev -p 3000",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
    "test": "jest",
    "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
  },
  "dependencies": {
-    "@babel/preset-env": "^7.26.0",
    "@fontsource/inter": "^5.0.15",
    "@prantlf/jsonlint": "^16.0.0",
    "@reduxjs/toolkit": "^1.8.0",
@@ -20,11 +20,11 @@
    "@usebruno/common": "0.1.0",
    "@usebruno/graphql-docs": "0.1.0",
    "@usebruno/schema": "0.7.0",
+    "axios": "1.7.5",
    "classnames": "^2.3.1",
    "codemirror": "5.65.2",
    "codemirror-graphql": "2.1.1",
    "cookie": "0.7.1",
-    "dompurify": "^3.2.4",
    "escape-html": "^1.0.3",
    "file": "^0.2.2",
    "file-dialog": "^0.0.8",
@@ -34,24 +34,22 @@
    "graphiql": "3.7.1",
    "graphql": "^16.6.0",
    "graphql-request": "^3.7.0",
-    "httpsnippet": "^3.0.9",
-    "i18next": "24.1.2",
-    "iconv-lite": "^0.6.3",
+    "httpsnippet": "^3.0.6",
+    "i18next": "^23.14.0",
    "idb": "^7.0.0",
    "immer": "^9.0.15",
    "jsesc": "^3.0.2",
    "jshint": "^2.13.6",
    "json5": "^2.2.3",
    "jsonc-parser": "^3.2.1",
-    "jsonpath-plus": "^10.3.0",
+    "jsonpath-plus": "10.1.0",
    "know-your-http-well": "^0.5.0",
    "lodash": "^4.17.21",
    "markdown-it": "^13.0.2",
    "markdown-it-replace-link": "^1.2.0",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.5.47",
    "mousetrap": "^1.6.5",
-    "nanoid": "3.3.8",
+    "nanoid": "3.3.4",
+    "next": "14.2.16",
    "path": "^0.12.7",
    "pdfjs-dist": "4.4.168",
    "platform": "^1.3.6",
@@ -59,20 +57,19 @@
    "prettier": "^2.7.1",
    "qs": "^6.11.0",
    "query-string": "^7.0.1",
-    "react": "19.0.0",
+    "react": "18.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "19.0.0",
+    "react-dom": "18.2.0",
    "react-hot-toast": "^2.4.0",
    "react-i18next": "^15.0.1",
    "react-inspector": "^6.0.2",
    "react-pdf": "9.1.1",
    "react-player": "^2.16.0",
-    "react-redux": "^7.2.9",
+    "react-redux": "^7.2.6",
    "react-tooltip": "^5.5.2",
    "sass": "^1.46.0",
-    "semver": "^7.7.1",
    "strip-json-comments": "^5.0.1",
    "styled-components": "^5.3.3",
    "system": "^2.0.1",
@@ -82,14 +79,13 @@
    "yup": "^0.32.11"
  },
  "devDependencies": {
-    "@rsbuild/core": "^1.1.2",
-    "@rsbuild/plugin-babel": "^1.0.3",
-    "@rsbuild/plugin-node-polyfill": "^1.2.0",
-    "@rsbuild/plugin-react": "^1.0.7",
-    "@rsbuild/plugin-sass": "^1.1.0",
-    "@rsbuild/plugin-styled-components": "1.1.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-spread": "^7.16.7",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/runtime": "^7.16.3",
    "autoprefixer": "10.4.20",
-    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "babel-loader": "^8.2.3",
    "cross-env": "^7.0.3",
    "css-loader": "7.1.2",
    "file-loader": "^6.2.0",
--- a/packages/bruno-app/rsbuild.config.mjs
+++ b/packages/bruno-app/rsbuild.config.mjs
@@ -1,39 +0,0 @@
-import { defineConfig } from '@rsbuild/core';
-import { pluginReact } from '@rsbuild/plugin-react';
-import { pluginBabel } from '@rsbuild/plugin-babel';
-import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';
-import { pluginSass } from '@rsbuild/plugin-sass';
-import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill'
-
-export default defineConfig({
-  plugins: [
-    pluginNodePolyfill(),
-    pluginReact(),
-    pluginStyledComponents(),
-    pluginSass(),
-    pluginBabel({
-      include: /\.(?:js|jsx|tsx)$/,
-      babelLoaderOptions(opts) {
-        opts.plugins?.unshift('babel-plugin-react-compiler');
-      }
-    })
-  ],
-  source: {
-    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file
-  },
-  html: {
-    title: 'Bruno'
-  },
-  tools: {
-    rspack: {
-      module: {
-        parser: {
-          javascript: {
-            // This loads the JavaScript contents from a library along with the main JavaScript bundle.
-            dynamicImportMode: "eager",
-          },
-        },
-      },
-    },
-  }
-});
--- a/packages/bruno-app/src/components/Accordion/index.js
+++ b/packages/bruno-app/src/components/Accordion/index.js
@@ -1,62 +0,0 @@
-import React, { createContext, useContext, useState } from 'react';
-import { IconChevronDown } from '@tabler/icons';
-import { AccordionItem, AccordionHeader, AccordionContent } from './styledWrapper';
-
-const AccordionContext = createContext();
-
-const Accordion = ({ children, defaultIndex }) => {
-  const [openIndex, setOpenIndex] = useState(defaultIndex);
-
-  const toggleItem = (index) => {
-    setOpenIndex(openIndex === index ? null : index);
-  };
-
-  return (
-    <AccordionContext.Provider value={{ openIndex, toggleItem }}>
-      <div>{children}</div>
-    </AccordionContext.Provider>
-  );
-};
-
-const Item = ({ index, children, ...props }) => {
-  return (
-    <AccordionItem {...props}>
-      {React.Children.map(children, (child) => React.cloneElement(child, { index }))}
-    </AccordionItem>
-  );
-};
-
-export const Header = ({ index, children, ...props }) => {
-  const { openIndex, toggleItem } = useContext(AccordionContext);
-  const isOpen = openIndex === index;
-
-  return (
-    <AccordionHeader onClick={() => toggleItem(index)} {...props} className={isOpen ? 'open' : ''}>
-      <div className="w-full">{children}</div>
-
-      <IconChevronDown
-        className="w-5 h-5 ml-auto"
-        style={{
-          transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
-          transition: 'transform 0.3s ease-in-out'
-        }}
-      />
-    </AccordionHeader>
-  );
-};
-
-const Content = ({ index, children, ...props }) => {
-  const { openIndex } = useContext(AccordionContext);
-  const isOpen = openIndex === index;
-
-  return (
-    <AccordionContent isOpen={isOpen} {...props}>
-      {children}
-    </AccordionContent>
-  );
-};
-
-Accordion.Item = Item;
-Accordion.Header = Header;
-Accordion.Content = Content;
-export default Accordion;
--- a/packages/bruno-app/src/components/Accordion/styledWrapper.js
+++ b/packages/bruno-app/src/components/Accordion/styledWrapper.js
@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-const AccordionItem = styled.div`
-  border: 1px solid ${(props) => props.theme.input.border};
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 1rem;
-`;
-
-const AccordionHeader = styled.button`
-  width: 100%;
-  display: flex;
-  padding: 0.75rem 1rem;
-  background: transparent;
-  cursor: pointer;
-  font-weight: 500;
-
-  &.open, &:hover {
-    background-color: ${(props) => props.theme.plainGrid.hoverBg};
-  }
-`;
-
-const AccordionContent = styled.div`
-  padding: ${(props) => (props.isOpen ? '1rem' : '0')};
-  max-height: ${(props) => (props.isOpen ? 'auto' : '0')};
-`;
-
-export { AccordionItem, AccordionHeader, AccordionContent };
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -8,8 +8,6 @@ const StyledWrapper = styled.div`
    font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
    line-break: anywhere;
    flex: 1 1 0;
-    display: flex;
-    flex-direction: column-reverse;
  }

  /* Removes the glow outline around the folded json */
@@ -28,10 +26,6 @@ const StyledWrapper = styled.div`

  .CodeMirror-dialog {
    overflow: visible;
-    position: relative;
-    top: unset;
-    left: unset;
-
    input {
      background: transparent;
      border: 1px solid #d3d6db;
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -7,12 +7,12 @@

 import React from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
+import { getEnvironmentVariables } from 'utils/collections';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
-import { getAllVariables } from 'utils/collections';

 let CodeMirror;
 const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
@@ -31,7 +31,6 @@ if (!SERVER_RENDERED) {
    'res.body',
    'res.responseTime',
    'res.getStatus()',
-    'res.getStatusText()',
    'res.getHeader(name)',
    'res.getHeaders()',
    'res.getBody()',
@@ -75,16 +74,9 @@ if (!SERVER_RENDERED) {
    'bru.setNextRequest(requestName)',
    'req.disableParsingResponseJson()',
    'bru.getRequestVar(key)',
-    'bru.runRequest(requestPathName)',
-    'bru.getAssertionResults()',
-    'bru.getTestResults()',
    'bru.sleep(ms)',
    'bru.getGlobalEnvVar(key)',
-    'bru.setGlobalEnvVar(key, value)',
-    'bru.runner',
-    'bru.runner.setNextRequest(requestName)',
-    'bru.runner.skipRequest()',
-    'bru.runner.stopExecution()'
+    'bru.setGlobalEnvVar(key, value)'
  ];
  CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
    const cursor = editor.getCursor();
@@ -106,7 +98,7 @@ if (!SERVER_RENDERED) {
    if (curWordBru) {
      hintWords.forEach((h) => {
        if (h.includes('.') == curWordBru.includes('.') && h.startsWith(curWordBru)) {
-          result.list.push(curWordBru.includes('.') ? h.split('.')?.at(-1) : h);
+          result.list.push(curWordBru.includes('.') ? h.split('.')[1] : h);
        }
      });
      result.list?.sort();
@@ -175,21 +167,11 @@ export default class CodeEditor extends React.Component {
          }
        },
        'Cmd-F': (cm) => {
-          if (this._isSearchOpen()) {
-            // replace the older search component with the new one
-            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-            search && search.remove();
-          }
          cm.execCommand('findPersistent');
          this._bindSearchHandler();
          this._appendSearchResultsCount();
        },
        'Ctrl-F': (cm) => {
-          if (this._isSearchOpen()) {
-            // replace the older search component with the new one
-            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-            search && search.remove();
-          }
          cm.execCommand('findPersistent');
          this._bindSearchHandler();
          this._appendSearchResultsCount();
@@ -208,20 +190,8 @@ export default class CodeEditor extends React.Component {
        'Cmd-Y': 'foldAll',
        'Ctrl-I': 'unfoldAll',
        'Cmd-I': 'unfoldAll',
-        'Ctrl-/': () => {
-          if (['application/ld+json', 'application/json'].includes(this.props.mode)) {
-            this.editor.toggleComment({ lineComment: '//', blockComment: '/*' });
-          } else {
-            this.editor.toggleComment();
-          }
-        },
-        'Cmd-/': () => {
-          if (['application/ld+json', 'application/json'].includes(this.props.mode)) {
-            this.editor.toggleComment({ lineComment: '//', blockComment: '/*' });
-          } else {
-            this.editor.toggleComment();
-          }
-        }
+        'Ctrl-/': 'toggleComment',
+        'Cmd-/': 'toggleComment'
      },
      foldOptions: {
        widget: (from, to) => {
@@ -319,7 +289,7 @@ export default class CodeEditor extends React.Component {
    }

    if (this.editor) {
-      let variables = getAllVariables(this.props.collection, this.props.item);
+      let variables = getEnvironmentVariables(this.props.collection);
      if (!isEqual(variables, this.variables)) {
        this.addOverlay();
      }
@@ -359,7 +329,7 @@ export default class CodeEditor extends React.Component {

  addOverlay = () => {
    const mode = this.props.mode || 'application/ld+json';
-    let variables = getAllVariables(this.props.collection, this.props.item);
+    let variables = getEnvironmentVariables(this.props.collection);
    this.variables = variables;

    defineCodeMirrorBrunoVariablesMode(variables, mode);
@@ -376,10 +346,6 @@ export default class CodeEditor extends React.Component {
    }
  };

-  _isSearchOpen = () => {
-    return document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-  };
-
  /**
   * Bind handler to search input to count number of search results
   */
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
@@ -79,15 +79,6 @@ const AuthMode = ({ collection }) => {
          >
            Digest Auth
          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('ntlm');
-            }}
-          >
-            NTLM Auth
-          </div>          
          <div
            className="dropdown-item"
            onClick={() => {
@@ -95,7 +86,7 @@ const AuthMode = ({ collection }) => {
              onModeChange('oauth2');
            }}
          >
-            OAuth 2.0
+            Oauth2
          </div>
          <div
            className="dropdown-item"
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
@@ -1,110 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-
-
-
-
-const NTLMAuth = ({ collection }) => {
-
-
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-
-  const handleUsernameChange = (username) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'ntlm',
-        collectionUid: collection.uid,
-        content: {
-          username: username,
-          password: ntlmAuth.password,
-          domain: ntlmAuth.domain
-
-        }
-      })
-    );
-  };
-
-  const handlePasswordChange = (password) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'ntlm',
-        collectionUid: collection.uid,
-        content: {
-          username: ntlmAuth.username,
-          password: password,
-          domain: ntlmAuth.domain
-        }
-      })
-    );
-  };
-
-  const handleDomainChange = (domain) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'ntlm',
-        collectionUid: collection.uid,
-        content: {
-          username: ntlmAuth.username,
-          password: ntlmAuth.password,
-          domain: domain
-        }
-      })
-    );
-  };  
-
-
-
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={ntlmAuth.username || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleUsernameChange(val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
-        <SingleLineEditor
-          value={ntlmAuth.password || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handlePasswordChange(val)}
-          collection={collection}
-          isSecret={true}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Domain</label>
-      <div className="single-line-editor-wrapper">
-        <SingleLineEditor
-          value={ntlmAuth.domain || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleDomainChange(val)}
-          collection={collection}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default NTLMAuth;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
@@ -4,7 +4,6 @@ const Wrapper = styled.div`
  label {
    font-size: 0.8125rem;
  }
-
  .single-line-editor-wrapper {
    max-width: 400px;
    padding: 0.15rem 0.4rem;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+import { clearOauth2Cache } from 'utils/network/index';
+import toast from 'react-hot-toast';
+
+const OAuth2AuthorizationCode = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendCollectionOauth2Request(collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const { callbackUrl, authorizationUrl, accessTokenUrl, clientId, clientSecret, scope, state, pkce } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'authorization_code',
+          callbackUrl,
+          authorizationUrl,
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          state,
+          pkce,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  const handlePKCEToggle = (e) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'authorization_code',
+          callbackUrl,
+          authorizationUrl,
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          state,
+          pkce: !Boolean(oAuth?.['pkce'])
+        }
+      })
+    );
+  };
+
+  const handleClearCache = (e) => {
+    clearOauth2Cache(collection?.uid)
+      .then(() => {
+        toast.success('cleared cache successfully');
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      });
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label, isSecret } = input;
+        return (
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
+              <SingleLineEditor
+                value={oAuth[key] || ''}
+                theme={storedTheme}
+                onSave={handleSave}
+                onChange={(val) => handleChange(key, val)}
+                onRun={handleRun}
+                collection={collection}
+                isSecret={isSecret}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <div className="flex flex-row w-full gap-4" key="pkce">
+        <label className="block font-medium">Use PKCE</label>
+        <input
+          className="cursor-pointer"
+          type="checkbox"
+          checked={Boolean(oAuth?.['pkce'])}
+          onChange={handlePKCEToggle}
+        />
+      </div>
+      <div className="flex flex-row gap-4">
+        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+          Get Access Token
+        </button>
+        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
+          Clear Cache
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2AuthorizationCode;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/inputsConfig.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/inputsConfig.js
@@ -0,0 +1,33 @@
+const inputsConfig = [
+  {
+    key: 'callbackUrl',
+    label: 'Callback URL'
+  },
+  {
+    key: 'authorizationUrl',
+    label: 'Authorization URL'
+  },
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret',
+    isSecret: true
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  },
+  {
+    key: 'state',
+    label: 'State'
+  }
+];
+
+export { inputsConfig };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/StyledWrapper.js
@@ -4,7 +4,6 @@ const Wrapper = styled.div`
  label {
    font-size: 0.8125rem;
  }
-
  .single-line-editor-wrapper {
    max-width: 400px;
    padding: 0.15rem 0.4rem;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+
+const OAuth2ClientCredentials = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendCollectionOauth2Request(collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const { accessTokenUrl, clientId, clientSecret, scope } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'client_credentials',
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label, isSecret } = input;
+        return (
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
+              <SingleLineEditor
+                value={oAuth[key] || ''}
+                theme={storedTheme}
+                onSave={handleSave}
+                onChange={(val) => handleChange(key, val)}
+                onRun={handleRun}
+                collection={collection}
+                isSecret={isSecret}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2ClientCredentials;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/inputsConfig.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/inputsConfig.js
@@ -0,0 +1,21 @@
+const inputsConfig = [
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret',
+    isSecret: true
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.8125rem;
+
+  .grant-type-mode-selector {
+    padding: 0.5rem 0px;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+
+    .dropdown {
+      width: fit-content;
+
+      div[data-tippy-root] {
+        width: fit-content;
+      }
+      .tippy-box {
+        width: fit-content;
+        max-width: none !important;
+
+        .tippy-content: {
+          width: fit-content;
+          max-width: none !important;
+        }
+      }
+    }
+
+    .grant-type-label {
+      width: fit-content;
+      color: ${(props) => props.theme.colors.text.yellow};
+      justify-content: space-between;
+      padding: 0 0.5rem;
+    }
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+  label {
+    font-size: 0.8125rem;
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/GrantTypeSelector/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/GrantTypeSelector/index.js
@@ -0,0 +1,98 @@
+import React, { useRef, forwardRef } from 'react';
+import get from 'lodash/get';
+import Dropdown from 'components/Dropdown';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import { IconCaretDown } from '@tabler/icons';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { humanizeGrantType } from 'utils/collections';
+import { useEffect } from 'react';
+import { updateCollectionAuth, updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections/index';
+
+const GrantTypeSelector = ({ collection }) => {
+  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-end grant-type-label select-none">
+        {humanizeGrantType(oAuth?.grantType)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onGrantTypeChange = (grantType) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType
+        }
+      })
+    );
+  };
+
+  useEffect(() => {
+    // initialize redux state with a default oauth2 grant type
+    // authorization_code - default option
+    !oAuth?.grantType &&
+      dispatch(
+        updateCollectionAuthMode({
+          mode: 'oauth2',
+          collectionUid: collection.uid
+        })
+      );
+    !oAuth?.grantType &&
+      dispatch(
+        updateCollectionAuth({
+          mode: 'oauth2',
+          collectionUid: collection.uid,
+          content: {
+            grantType: 'authorization_code'
+          }
+        })
+      );
+  }, [oAuth]);
+
+  return (
+    <StyledWrapper>
+      <label className="block font-medium mb-2">Grant Type</label>
+      <div className="inline-flex items-center cursor-pointer grant-type-mode-selector w-fit">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onGrantTypeChange('password');
+            }}
+          >
+            Password Credentials
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onGrantTypeChange('authorization_code');
+            }}
+          >
+            Authorization Code
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onGrantTypeChange('client_credentials');
+            }}
+          >
+            Client Credentials
+          </div>
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default GrantTypeSelector;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
@@ -13,4 +13,4 @@ const Wrapper = styled.div`
  }
 `;

-export default Wrapper; 
+export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+
+const OAuth2AuthorizationCode = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendCollectionOauth2Request(collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const { accessTokenUrl, username, password, clientId, clientSecret, scope } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'password',
+          accessTokenUrl,
+          username,
+          password,
+          clientId,
+          clientSecret,
+          scope,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label, isSecret } = input;
+        return (
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
+              <SingleLineEditor
+                value={oAuth[key] || ''}
+                theme={storedTheme}
+                onSave={handleSave}
+                onChange={(val) => handleChange(key, val)}
+                onRun={handleRun}
+                collection={collection}
+                isSecret={isSecret}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2AuthorizationCode;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js
@@ -0,0 +1,29 @@
+const inputsConfig = [
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'username',
+    label: 'Username'
+  },
+  {
+    key: 'password',
+    label: 'Password'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret',
+    isSecret: true
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js
@@ -1,33 +1,21 @@
 import React from 'react';
 import get from 'lodash/get';
 import StyledWrapper from './StyledWrapper';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import OAuth2AuthorizationCode from 'components/RequestPane/Auth/OAuth2/AuthorizationCode/index';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
-import { useDispatch } from 'react-redux';
-import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/PasswordCredentials/index';
-import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
-import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
-
-const GrantTypeComponentMap = ({collection }) => {
-  const dispatch = useDispatch();
-
-  const save = () => {
-    dispatch(saveCollectionRoot(collection.uid));
-  };
-
-  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
-  const grantType = get(request, 'auth.oauth2.grantType', {});
+import GrantTypeSelector from './GrantTypeSelector/index';
+import OAuth2PasswordCredentials from './PasswordCredentials/index';
+import OAuth2AuthorizationCode from './AuthorizationCode/index';
+import OAuth2ClientCredentials from './ClientCredentials/index';

+const grantTypeComponentMap = (grantType, collection) => {
  switch (grantType) {
    case 'password':
-      return <OAuth2PasswordCredentials save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
+      return <OAuth2PasswordCredentials collection={collection} />;
      break;
    case 'authorization_code':
-      return <OAuth2AuthorizationCode save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
+      return <OAuth2AuthorizationCode collection={collection} />;
      break;
    case 'client_credentials':
-      return <OAuth2ClientCredentials save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
+      return <OAuth2ClientCredentials collection={collection} />;
      break;
    default:
      return <div>TBD</div>;
@@ -36,12 +24,12 @@ const GrantTypeComponentMap = ({collection }) => {
 };

 const OAuth2 = ({ collection }) => {
-  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});

  return (
    <StyledWrapper className="mt-2 w-full">
-      <GrantTypeSelector request={request} updateAuth={updateCollectionAuth} collection={collection} />
-      <GrantTypeComponentMap collection={collection} />
+      <GrantTypeSelector collection={collection} />
+      {grantTypeComponentMap(oAuth?.grantType, collection)}
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/StyledWrapper.js
@@ -1,7 +1,5 @@
 import styled from 'styled-components';

-const Wrapper = styled.div`
-  max-width: 800px;
-`;
+const Wrapper = styled.div``;

 export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
@@ -11,8 +11,6 @@ import ApiKeyAuth from './ApiKeyAuth/';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
-import NTLMAuth from './NTLMAuth';
-

 const Auth = ({ collection }) => {
  const authMode = get(collection, 'root.request.auth.mode');
@@ -34,9 +32,6 @@ const Auth = ({ collection }) => {
      case 'digest': {
        return <DigestAuth collection={collection} />;
      }
-      case 'ntlm': {
-        return <NTLMAuth collection={collection} />;
-      }       
      case 'oauth2': {
        return <OAuth2 collection={collection} />;
      }
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
@@ -8,7 +8,9 @@ import { useState } from 'react';

 import StyledWrapper from './StyledWrapper';
 import { useRef } from 'react';
-import path from 'utils/common/path';
+import path from 'path';
+import slash from 'utils/common/slash';
+import { isWindowsOS } from 'utils/common/platform';

 const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
  const certFilePathInputRef = useRef();
@@ -25,10 +27,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
      passphrase: ''
    },
    validationSchema: Yup.object({
-      domain: Yup.string()
-        .required()
-        .trim()
-        .test('not-empty-after-trim', 'Domain is required', value => value && value.trim().length > 0),
+      domain: Yup.string().required(),
      type: Yup.string().required().oneOf(['cert', 'pfx']),
      certFilePath: Yup.string().when('type', {
        is: (type) => type == 'cert',
@@ -48,7 +47,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
      let relevantValues = {};
      if (values.type === 'cert') {
        relevantValues = {
-          domain: values.domain?.trim(),
+          domain: values.domain,
          type: values.type,
          certFilePath: values.certFilePath,
          keyFilePath: values.keyFilePath,
@@ -56,7 +55,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
        };
      } else {
        relevantValues = {
-          domain: values.domain?.trim(),
+          domain: values.domain,
          type: values.type,
          pfxFilePath: values.pfxFilePath,
          passphrase: values.passphrase
@@ -69,9 +68,13 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
  });

  const getFile = (e) => {
-    const filePath = window?.ipcRenderer?.getFilePath(e?.files?.[0]);
-    if (filePath) {
-      let relativePath = path.relative(root, filePath);
+    if (e.files?.[0]?.path) {
+      let relativePath;
+      if (isWindowsOS()) {
+        relativePath = slash(path.win32.relative(root, e.files[0].path));
+      } else {
+        relativePath = path.posix.relative(root, e.files[0].path);
+      }
      formik.setFieldValue(e.name, relativePath);
    }
  };
@@ -105,23 +108,23 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
      <ul className="mt-4">
        {!clientCertConfig.length
          ? 'No client certificates added'
-          : clientCertConfig.map((clientCert, index) => (
-            <li key={`client-cert-${index}`} className="flex items-center available-certificates p-2 rounded-lg mb-2">
-              <div className="flex items-center w-full justify-between">
-                <div className="flex w-full items-center">
-                  <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
-                  {clientCert.domain}
+          : clientCertConfig.map((clientCert) => (
+              <li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+                <div className="flex items-center w-full justify-between">
+                  <div className="flex w-full items-center">
+                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
+                    {clientCert.domain}
+                  </div>
+                  <div className="flex w-full items-center">
+                    <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
+                    {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
+                  </div>
+                  <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
+                    <IconTrash size={18} strokeWidth={1.5} />
+                  </button>
                </div>
-                <div className="flex w-full items-center">
-                  <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
-                  {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
-                </div>
-                <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
-                  <IconTrash size={18} strokeWidth={1.5} />
-                </button>
-              </div>
-            </li>
-          ))}
+              </li>
+            ))}
      </ul>

      <h1 className="font-semibold mt-8 mb-2">Add Client Certificate</h1>
@@ -130,20 +133,15 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
          <label className="settings-label" htmlFor="domain">
            Domain
          </label>
-          <div className="relative flex items-center">
-            <div className="absolute left-0 pl-2 text-gray-400 pointer-events-none flex items-center h-full">
-              https://
-            </div>
-            <input
-              id="domain"
-              type="text"
-              name="domain"
-              placeholder="example.org"
-              className="block textbox non-passphrase-input !pl-[60px]"
-              onChange={formik.handleChange}
-              value={formik.values.domain || ''}
-            />
-          </div>
+          <input
+            id="domain"
+            type="text"
+            name="domain"
+            placeholder="*.example.org"
+            className="block textbox non-passphrase-input"
+            onChange={formik.handleChange}
+            value={formik.values.domain || ''}
+          />
          {formik.touched.domain && formik.errors.domain ? (
            <div className="ml-1 text-red-500">{formik.errors.domain}</div>
          ) : null}
@@ -199,9 +197,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                  <div className="flex flex-row gap-2 items-center">
                    <div
                      className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(formik.values.certFilePath)}
+                      title={path.basename(slash(formik.values.certFilePath))}
                    >
-                      {path.basename(formik.values.certFilePath)}
+                      {path.basename(slash(formik.values.certFilePath))}
                    </div>
                    <IconTrash
                      size={18}
@@ -239,9 +237,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                  <div className="flex flex-row gap-2 items-center">
                    <div
                      className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(formik.values.keyFilePath)}
+                      title={path.basename(slash(formik.values.keyFilePath))}
                    >
-                      {path.basename(formik.values.keyFilePath)}
+                      {path.basename(slash(formik.values.keyFilePath))}
                    </div>
                    <IconTrash
                      size={18}
@@ -282,9 +280,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                  <div className="flex flex-row gap-2 items-center">
                    <div
                      className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(formik.values.pfxFilePath)}
+                      title={path.basename(slash(formik.values.pfxFilePath))}
                    >
-                      {path.basename(formik.values.pfxFilePath)}
+                      {path.basename(slash(formik.values.pfxFilePath))}
                    </div>
                    <IconTrash
                      size={18}
--- a/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js
@@ -1,9 +1,17 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  div.CodeMirror {
+    /* todo: find a better way */
+    height: calc(100vh - 240px);

+    .CodeMirror-scroll {
+      padding-bottom: 0px;
+    }
+  }
  .editing-mode {
    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
  }
 `;

--- a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
@@ -8,7 +8,6 @@ import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/acti
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
-import { IconEdit, IconX, IconFileText } from '@tabler/icons';

 const Docs = ({ collection }) => {
  const dispatch = useDispatch();
@@ -30,50 +29,19 @@ const Docs = ({ collection }) => {
    );
  };

-  const handleDiscardChanges = () => {
-    dispatch(
-      updateCollectionDocs({
-        collectionUid: collection.uid,
-        docs: docs
-      })
-    );
-    toggleViewMode();
-  }
-
-  const onSave = () => {
-    dispatch(saveCollectionRoot(collection.uid));
-    toggleViewMode();
-  }
+  const onSave = () => dispatch(saveCollectionRoot(collection.uid));

  return (
-    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
-      <div className='flex flex-row w-full justify-between items-center mb-4'>
-        <div className='text-lg font-medium flex items-center gap-2'>
-          <IconFileText size={20} strokeWidth={1.5} />
-          Documentation
-        </div>
-        <div className='flex flex-row gap-2 items-center justify-center'>
-          {isEditing ? (
-            <>
-              <div className="editing-mode" role="tab" onClick={handleDiscardChanges}>
-                <IconX className="cursor-pointer" size={20} strokeWidth={1.5} />
-              </div>
-              <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}>
-                Save
-              </button>
-            </>
-          ) : (
-            <div className="editing-mode" role="tab" onClick={toggleViewMode}>
-              <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} />
-            </div>
-          )}
-        </div>
+    <StyledWrapper className="mt-1 h-full w-full relative">
+      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+        {isEditing ? 'Preview' : 'Edit'}
      </div>
+
      {isEditing ? (
        <CodeEditor
          collection={collection}
          theme={displayedTheme}
-          value={docs}
+          value={docs || ''}
          onEdit={onEdit}
          onSave={onSave}
          mode="application/text"
@@ -81,44 +49,10 @@ const Docs = ({ collection }) => {
          fontSize={get(preferences, 'font.codeFontSize')}
        />
      ) : (
-        <div className='h-full overflow-auto pl-1'>
-          <div className='h-[1px] min-h-[500px]'>
-            {
-              docs?.length > 0 ?
-                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
-                :
-                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
-            }         
-          </div>
-        </div>
+        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
      )}
    </StyledWrapper>
  );
 };

 export default Docs;
-
-
-const documentationPlaceholder = `
-Welcome to your collection documentation! This space is designed to help you document your API collection effectively.
-
-## Overview
-Use this section to provide a high-level overview of your collection. You can describe:
- The purpose of these API endpoints
- Key features and functionalities
- Target audience or users
-
-## Best Practices
- Keep documentation up to date
- Include request/response examples
- Document error scenarios
- Add relevant links and references
-
-## Markdown Support
-This documentation supports Markdown formatting! You can use:
- **Bold** and *italic* text
- \`code blocks\` and syntax highlighting
- Tables and lists
- [Links](https://usebruno.com)
- And more!
-`;
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
@@ -1,8 +1,6 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  max-width: 800px;
-
  table {
    width: 100%;
    border-collapse: collapse;
--- a/packages/bruno-app/src/components/ResponsePane/ClearTimeline/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ClearTimeline/StyledWrapper.js
@@ -1,8 +1,13 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  font-size: 0.8125rem;
-  color: ${(props) => props.theme.requestTabPanel.responseStatus};
+  table {
+    td {
+      &:first-child {
+        width: 120px;
+      }
+    }
+  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Info/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Info/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+import { getTotalRequestCountInCollection } from 'utils/collections/';
+
+const Info = ({ collection }) => {
+  const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
+
+  return (
+    <StyledWrapper className="w-full flex flex-col h-full">
+      <div className="text-xs mb-4 text-muted">General information about the collection.</div>
+      <table className="w-full border-collapse">
+        <tbody>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Name&nbsp;:</td>
+            <td className="py-2 px-2">{collection.name}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Location&nbsp;:</td>
+            <td className="py-2 px-2 break-all">{collection.pathname}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Ignored files&nbsp;:</td>
+            <td className="py-2 px-2 break-all">{collection.brunoConfig?.ignore?.map((x) => `'${x}'`).join(', ')}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Environments&nbsp;:</td>
+            <td className="py-2 px-2">{collection.environments?.length || 0}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Requests&nbsp;:</td>
+            <td className="py-2 px-2">{totalRequestsInCollection}</td>
+          </tr>
+        </tbody>
+      </table>
+    </StyledWrapper>
+  );
+};
+
+export default Info;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
@@ -1,82 +0,0 @@
-import React from "react";
-import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
-import { areItemsLoading, getItemsLoadStats } from "utils/collections/index";
-import { useState } from "react";
-import ShareCollection from "components/ShareCollection/index";
-
-const Info = ({ collection }) => {
-  const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
-
-  const isCollectionLoading = areItemsLoading(collection);
-  const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
-  const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
-  
-  const handleToggleShowShareCollectionModal = (value) => (e) => {
-    toggleShowShareCollectionModal(value);
-  }
-
-  return (
-    <div className="w-full flex flex-col h-fit">
-      <div className="rounded-lg py-6">
-        <div className="grid gap-6">
-          {/* Location Row */}
-          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-              <IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
-            </div>
-            <div className="ml-4">
-              <div className="font-semibold text-sm">Location</div>
-              <div className="mt-1 text-sm text-muted break-all">
-                {collection.pathname}
-              </div>
-            </div>
-          </div>
-
-          {/* Environments Row */}
-          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
-              <IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
-            </div>
-            <div className="ml-4">
-              <div className="font-semibold text-sm">Environments</div>
-              <div className="mt-1 text-sm text-muted">
-                {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured
-              </div>
-            </div>
-          </div>
-
-          {/* Requests Row */}
-          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
-              <IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
-            </div>
-            <div className="ml-4">
-              <div className="font-semibold text-sm">Requests</div>
-              <div className="mt-1 text-sm text-muted font-mono">
-                {
-                  isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
-                }
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-start group cursor-pointer" onClick={handleToggleShowShareCollectionModal(true)}>
-            <div className="flex-shrink-0 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
-              <IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
-            </div>
-            <div className="ml-4 h-full flex flex-col justify-start">
-              <div className="font-semibold text-sm h-fit my-auto">Share</div>
-              <div className="mt-1 text-sm group-hover:underline text-link">
-                Share Collection
-              </div>
-            </div>
-          </div>
-          {showShareCollectionModal && <ShareCollection collection={collection} onClose={handleToggleShowShareCollectionModal(false)} />}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Info;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  &.card {
-    background-color: ${(props) => props.theme.requestTabPanel.card.bg};
-
-    .title {
-      border-top: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-      border-left: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-      border-right: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-    }
-
-    .table {
-      thead {
-        background-color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.bg};
-        color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.color};
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js
@@ -1,80 +0,0 @@
-import React from 'react';
-import { flattenItems } from "utils/collections";
-import { IconAlertTriangle } from '@tabler/icons';
-import StyledWrapper from "./StyledWrapper";
-import { useDispatch, useSelector } from 'react-redux';
-import { isItemARequest, itemIsOpenedInTabs } from 'utils/tabs/index';
-import { getDefaultRequestPaneTab } from 'utils/collections/index';
-import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
-import { hideHomePage } from 'providers/ReduxStore/slices/app';
-
-const RequestsNotLoaded = ({ collection }) => {
-  const dispatch = useDispatch();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const flattenedItems = flattenItems(collection.items);
-  const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading);
-
-  if (!itemsFailedLoading?.length) {
-    return null;
-  }
-
-  const handleRequestClick = (item) => e => {
-    e.preventDefault();
-    if (isItemARequest(item)) {
-      dispatch(hideHomePage());
-      if (itemIsOpenedInTabs(item, tabs)) {
-        dispatch(
-          focusTab({
-            uid: item.uid
-          })
-        );
-        return;
-      }
-      dispatch(
-        addTab({
-          uid: item.uid,
-          collectionUid: collection.uid,
-          requestPaneTab: getDefaultRequestPaneTab(item)
-        })
-      );
-      return;
-    }
-  }
-
-  return (
-    <StyledWrapper className="w-full card my-2">
-      <div className="flex items-center gap-2 px-3 py-2 title bg-yellow-50 dark:bg-yellow-900/20">
-        <IconAlertTriangle size={16} className="text-yellow-500" />
-        <span className="font-medium">Following requests were not loaded</span>
-      </div>
-      <table className="w-full border-collapse">
-        <thead>
-          <tr>
-            <th className="py-2 px-3 text-left font-medium">
-              Pathname
-            </th>
-            <th className="py-2 px-3 text-left font-medium">
-              Size
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {flattenedItems?.map((item, index) => (
-            item?.partial && !item?.loading ? (
-              <tr key={index} className='cursor-pointer' onClick={handleRequestClick(item)}>
-                <td className="py-1.5 px-3">
-                  {item?.pathname?.split(`${collection?.pathname}/`)?.[1]}
-                </td>
-                <td className="py-1.5 px-3">
-                  {item?.size?.toFixed?.(2)}&nbsp;MB
-                </td>
-              </tr>
-            ) : null
-          ))}
-        </tbody>
-      </table>
-    </StyledWrapper>
-  );
-};
-
-export default RequestsNotLoaded;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/StyledWrapper.js
@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .partial {
-    color: ${(props) => props.theme.colors.text.yellow};
-    opacity: 0.8;
-  }
-
-  .loading {
-    color: ${(props) => props.theme.colors.text.muted};
-    opacity: 0.8;
-  }
-
-  .completed {
-    color: ${(props) => props.theme.colors.text.green};
-    opacity: 0.8;
-  }
-
-  .failed {
-    color: ${(props) => props.theme.colors.text.danger};
-    opacity: 0.8;
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
@@ -1,27 +0,0 @@
-import StyledWrapper from "./StyledWrapper";
-import Docs from "../Docs";
-import Info from "./Info";
-import { IconBox } from '@tabler/icons';
-import RequestsNotLoaded from "./RequestsNotLoaded";
-
-const Overview = ({ collection }) => {
-  return (
-    <div className="h-full">
-      <div className="grid grid-cols-5 gap-4 h-full">
-        <div className="col-span-2">
-          <div className="text-xl font-semibold flex items-center gap-2">
-            <IconBox size={24} stroke={1.5} />
-            {collection?.name}
-          </div>
-          <Info collection={collection} />
-          <RequestsNotLoaded collection={collection} />
-        </div>
-        <div className="col-span-3">
-          <Docs collection={collection} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Overview;
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
@@ -1,8 +1,6 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  max-width: 800px;
-
  .settings-label {
    width: 110px;
  }
--- a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
@@ -104,15 +104,18 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
        <div className="mb-3 flex items-center">
          <label className="settings-label flex items-center" htmlFor="enabled">
            Config
-            <InfoTip infotipId="request-var">
+            <InfoTip
+              text={`
              <div>
                <ul>
-                  <li><span style={{width: "50px", display: "inline-block"}}>global</span> - use global proxy config</li>
-                  <li><span style={{width: "50px", display: "inline-block"}}>enabled</span> - use collection proxy config</li>
-                  <li><span style={{width: "50px", display: "inline-block"}}>disable</span> - disable proxy</li>
+                  <li><span style="width: 50px;display:inline-block;">global</span> - use global proxy config</li>
+                  <li><span style="width: 50px;display:inline-block;">enabled</span> - use collection proxy config</li>
+                  <li><span style="width: 50px;display:inline-block;">disable</span> - disable proxy</li>
                </ul>
              </div>
-            </InfoTip>
+            `}
+              infotipId="request-var"
+            />
          </label>
          <div className="flex items-center">
            <label className="flex items-center">
--- a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
@@ -1,8 +1,6 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  max-width: 800px;
-
  div.CodeMirror {
    height: inherit;
  }
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -1,6 +1,8 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  max-width: 800px;
+
  div.tabs {
    div.tab {
      padding: 6px 0px;
--- a/packages/bruno-app/src/components/CollectionSettings/Tests/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/StyledWrapper.js
@@ -1,7 +1,5 @@
 import styled from 'styled-components';

-const StyledWrapper = styled.div`
-  max-width: 800px;
-`;
+const StyledWrapper = styled.div``;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js
@@ -1,8 +1,6 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  max-width: 800px;
-
  div.title {
    color: var(--color-tab-inactive);
  }
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/index.js
@@ -89,7 +89,7 @@ const VarsTable = ({ collection, vars, varType }) => {
              <td>
                <div className="flex items-center">
                  <span>Expr</span>
-                  <InfoTip content="You can write any valid JS Template Literal here" infotipId="request-var" />
+                  <InfoTip text="You can write any valid JS Template Literal here" infotipId="request-var" />
                </div>
              </td>
            )}
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -12,11 +12,12 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
+import Docs from './Docs';
 import Presets from './Presets';
+import Info from './Info';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
 import DotIcon from 'components/Icons/Dot';
-import Overview from './Overview/index';

 const ContentIndicator = () => {
  return (
@@ -96,9 +97,6 @@ const CollectionSettings = ({ collection }) => {

  const getTabPanel = (tab) => {
    switch (tab) {
-      case 'overview': {
-        return <Overview collection={collection} />;
-      }
      case 'headers': {
        return <Headers collection={collection} />;
      }
@@ -130,6 +128,12 @@ const CollectionSettings = ({ collection }) => {
          />
        );
      }
+      case 'docs': {
+        return <Docs collection={collection} />;
+      }
+      case 'info': {
+        return <Info collection={collection} />;
+      }
    }
  };

@@ -142,9 +146,6 @@ const CollectionSettings = ({ collection }) => {
  return (
    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
      <div className="flex flex-wrap items-center tabs" role="tablist">
-      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
-          Overview
-        </div>
        <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
          Headers
          {activeHeadersCount > 0 && <sup className="ml-1 font-medium">{activeHeadersCount}</sup>}
@@ -176,6 +177,13 @@ const CollectionSettings = ({ collection }) => {
          Client Certificates
          {clientCertConfig.length > 0 && <ContentIndicator />}
        </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
+          Docs
+          {hasDocs && <ContentIndicator />}
+        </div>
+        <div className={getTabClassname('info')} role="tab" onClick={() => setTab('info')}>
+          Info
+        </div>
      </div>
      <section className="mt-4 h-full">{getTabPanel(tab)}</section>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js
@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div``;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
+++ b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
@@ -1,371 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import Modal from 'components/Modal/index';
-import { modifyCookie, addCookie, getParsedCookie, createCookieString } from 'providers/ReduxStore/slices/app';
-import { useDispatch } from 'react-redux';
-import toast from 'react-hot-toast';
-import ToggleSwitch from 'components/ToggleSwitch/index';
-import { IconInfoCircle } from '@tabler/icons';
-import moment from 'moment';
-import 'moment-timezone';
-import { Tooltip } from 'react-tooltip';
-import { isEmpty } from 'lodash';
-
-const removeEmptyValues = (obj) => {
-  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== null && value !== undefined));
-};
-
-const ModifyCookieModal = ({ onClose, domain, cookie }) => {
-  const dispatch = useDispatch();
-  const [isRawMode, setIsRawMode] = useState(false);
-  const [cookieString, setCookieString] = useState('');
-  const initialParseRef = useRef(false);
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      ...(cookie ? cookie : {}),
-      key: cookie?.key || '',
-      value: cookie?.value || '',
-      path: cookie?.path || '/',
-      domain: cookie?.domain || domain || '',
-      expires: cookie?.expires ? moment(cookie.expires).format(moment.HTML5_FMT.DATETIME_LOCAL) : '',
-      secure: cookie?.secure || false,
-      httpOnly: cookie?.httpOnly || false
-    },
-    validationSchema: Yup.object({
-      key: Yup.string().required('Key is required'),
-      value: Yup.string().required('Value is required'),
-      domain: Yup.string().required('Domain is required'),
-      secure: Yup.boolean(),
-      httpOnly: Yup.boolean(),
-      expires: Yup.mixed()
-        .nullable()
-        .transform((value) => {
-          if (!value || value === '') return null;
-          return moment(value).isValid() ? moment(value).toDate() : null;
-        })
-        .test('future-date', 'Expiration date must be in the future', (value) => {
-          if (!value) return true;
-          return moment(value).isAfter(moment());
-        })
-    }),
-    onSubmit: (values) => {
-      const modValues = removeEmptyValues({
-        ...(cookie ? cookie : {}),
-        ...values,
-        expires: values.expires
-          ? moment(values.expires).isValid()
-            ? moment(values.expires).toDate()
-            : Infinity
-          : Infinity
-      });
-
-      handleCookieDispatch(cookie, domain, modValues, onClose);
-    }
-  });
-
-  const title = cookie ? 'Modify Cookie' : 'Add Cookie';
-
-  const handleCookieDispatch = (cookie, domain, modValues, onClose) => {
-    if (cookie) {
-      dispatch(modifyCookie(domain, cookie, modValues))
-        .then(() => {
-          toast.success('Cookie modified successfully');
-          onClose();
-        })
-        .catch((err) => {
-          toast.error('An error occurred while modifying cookie');
-          console.error(err);
-        });
-    } else {
-      dispatch(addCookie(domain, modValues))
-        .then(() => {
-          toast.success('Cookie added successfully');
-          onClose();
-        })
-        .catch((err) => {
-          toast.error('An error occurred while adding cookie');
-          console.error(err);
-        });
-    }
-  };
-
-  const onSubmit = async () => {
-    try {
-      if (isRawMode) {
-        const cookieObj = await dispatch(getParsedCookie(cookieString));
-
-        const modifiedCookie = removeEmptyValues({
-          ...formik.values,
-          ...cookieObj,
-          expires: cookieObj?.expires
-            ? moment(cookieObj.expires).isValid()
-              ? moment(cookieObj.expires).toDate()
-              : Infinity
-            : Infinity
-        });
-
-        if (!cookieObj) {
-          toast.error('Please enter a valid cookie string');
-          return;
-        }
-
-        const validationErrors = await formik.setValues(
-          (values) => ({
-            ...values,
-            ...modifiedCookie,
-            expires:
-              modifiedCookie?.expires && moment(modifiedCookie.expires).isValid()
-                ? moment(new Date(modifiedCookie.expires)).format(moment.HTML5_FMT.DATETIME_LOCAL)
-                : ''
-          }),
-          true
-        );
-
-        if (!isEmpty(validationErrors)) {
-          toast.error(Object.values(validationErrors).join("\n"));
-          return;
-        }
-
-        handleCookieDispatch(cookie, domain, modifiedCookie, onClose);
-      } else {
-        formik.handleSubmit();
-      }
-    } catch (error) {
-      const errMsg = error.message || 'An error occurred while parsing cookie string';
-      toast.error(errMsg);
-    }
-  };
-
-  useEffect(() => {
-    if (!isRawMode) return;
-    const loadCookieString = async () => {
-      if (cookie) {
-        const str = await dispatch(createCookieString(cookie));
-        setCookieString(str);
-      }
-      return '';
-    };
-
-    loadCookieString();
-  }, [cookie, isRawMode]);
-
-  // create the cookieString when raw mode is enabled
-  useEffect(() => {
-    if (isRawMode) {
-      const createCookieStr = async () => {
-        const str = await dispatch(createCookieString(formik.values));
-        setCookieString(str);
-      };
-
-      createCookieStr();
-    }
-  }, [isRawMode, formik.values]);
-
-  useEffect(() => {
-    // Reset the ref when raw mode changes
-    if (isRawMode) {
-      initialParseRef.current = false;
-      return;
-    }
-
-    const setParsedCookie = async () => {
-      if (!isRawMode && cookieString && !initialParseRef.current) {
-        initialParseRef.current = true;
-
-        try {
-          const cookieObj = await dispatch(getParsedCookie(cookieString));
-
-          if (!cookieObj) return;
-
-          formik.setValues(
-            (values) => ({
-              ...values,
-              ...removeEmptyValues(cookieObj),
-              expires:
-                cookieObj?.expires && moment(cookieObj.expires).isValid()
-                  ? moment(new Date(cookieObj.expires)).format(moment.HTML5_FMT.DATETIME_LOCAL)
-                  : ''
-            }),
-            true
-          );
-        } catch (error) {
-          const errMsg = error.message || 'An error occurred while parsing cookie string';
-          toast.error(errMsg);
-        }
-      }
-    };
-
-    setParsedCookie();
-  }, [isRawMode, cookieString, dispatch, formik]);
-
-  return (
-    <Modal
-      size="lg"
-      title={title}
-      onClose={onClose}
-      handleCancel={onClose}
-      handleConfirm={onSubmit}
-      customHeader={
-        <div className="flex items-center justify-between w-full">
-          <h2 className="text-sm font-bold">{title}</h2>
-          <div className="ml-auto flex items-center ">
-            <ToggleSwitch
-              className="mr-2"
-              isOn={isRawMode}
-              size="2xs"
-              handleToggle={(e) => {
-                setIsRawMode(e.target.checked);
-              }}
-            />
-            <label className="text-sm font-normal mr-4 normal-case">Edit Raw</label>
-          </div>
-        </div>
-      }
-    >
-      <form onSubmit={(e) => e.preventDefault()} className="px-2">
-        {isRawMode ? (
-          <div>
-            <div className="flex items-center gap-2 mb-1">
-              <label className="block text-sm">Set-Cookie String</label>
-              <IconInfoCircle id="cookie-raw-info" size={16} strokeWidth={1.5} className="text-gray-400" />
-              <Tooltip
-                anchorId="cookie-raw-info"
-                className="tooltip-mod"
-                html="Key, Path, and Domain are immutable properties and cannot be modified for existing cookies"
-              />
-            </div>
-            <textarea
-              value={cookieString}
-              onChange={(e) => setCookieString(e.target.value)}
-              className="block textbox w-full h-24"
-              placeholder="key=value; key2=value2"
-            />
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm mb-1">
-                  Domain<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="domain"
-                  // Auto-focus if its add-new i.e. when domain prop is empty
-                  autoFocus={!domain && !formik.values.domain}
-                  value={formik.values.domain}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.domain && formik.errors.domain && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.domain}</div>
-                )}
-              </div>
-              <div>
-                <label className="block text-sm mb-1">Path</label>
-                <input
-                  type="text"
-                  name="path"
-                  value={formik.values.path}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.path && formik.errors.path && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.path}</div>
-                )}
-              </div>
-              <div>
-                <label className="block text-sm mb-1">
-                  Key<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="key"
-                  // Auto focus when add-for-domain i.e. if domain is already prefilled
-                  autoFocus={!!domain && !formik.values.key}
-                  value={formik.values.key}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.key && formik.errors.key && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.key}</div>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm mb-1">
-                  Value<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="value"
-                  // Auto-focus when its in edit mode i.e. cookie prop is present
-                  autoFocus={!!cookie}
-                  value={formik.values.value}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full"
-                />
-                {formik.touched.value && formik.errors.value && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.value}</div>
-                )}
-              </div>
-            </div>
-
-            {/* Date Picker */}
-            <div className="w-full flex items-end">
-              <div>
-                <label className="block text-sm mb-1">Expiration ({moment.tz.guess()})</label>
-                <input
-                  type="datetime-local"
-                  name="expires"
-                  value={formik.values.expires}
-                  onChange={(e) => {
-                    formik.handleChange(e);
-                  }}
-                  className="block textbox non-passphrase-input w-full"
-                  min={moment().format(moment.HTML5_FMT.DATETIME_LOCAL)}
-                />
-                {formik.touched.expires && formik.errors.expires && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.expires}</div>
-                )}
-              </div>
-
-              {/* Checkboxes */}
-              <div className="flex space-x-4 ml-auto">
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    name="secure"
-                    checked={formik.values.secure}
-                    onChange={formik.handleChange}
-                    className="mr-2"
-                  />
-                  <span className="text-sm">Secure</span>
-                </label>
-
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    name="httpOnly"
-                    checked={formik.values.httpOnly}
-                    onChange={formik.handleChange}
-                    className="mr-2"
-                  />
-                  <span className="text-sm">HTTP Only</span>
-                </label>
-              </div>
-            </div>
-          </div>
-        )}
-      </form>
-    </Modal>
-  );
-};
-
-export default ModifyCookieModal;
--- a/packages/bruno-app/src/components/Cookies/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
@@ -11,65 +11,6 @@ const Wrapper = styled.div`
      user-select: none;
    }
  }
-
-  &.header {
-    input {
-      padding: 0.3rem 0.5rem;
-    }
-  }
-
-  .textbox {
-    line-height: 1.42857143;
-    border: 1px solid #ccc;
-    padding: 0.45rem;
-    box-shadow: none;
-    border-radius: 0px;
-    outline: none;
-    box-shadow: none;
-    transition: border-color ease-in-out 0.1s;
-    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
-
-    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-      outline: none !important;
-    }
-  }
-
-  .scroll-box {
-    max-height: 500px;
-    overflow-y: auto;
-
-    background:
-    /* Shadow Cover TOP */
-    linear-gradient(
-      ${(props) => props.theme.modal.body.bg} 20%,
-      rgba(255, 255, 255, 0)
-    ) center top,
-    
-    /* Shadow Cover BOTTOM */
-    linear-gradient(
-      rgba(255, 255, 255, 0),
-      ${(props) => props.theme.modal.body.bg} 80%
-    ) center bottom,
-    
-    /* Shadow TOP */
-    linear-gradient(
-      rgba(0, 0, 0, 0.1) 0%,
-      rgba(0, 0, 0, 0) 100%
-    ) center top,
-    
-    /* Shadow BOTTOM */
-    linear-gradient(
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0.1) 100%
-    ) center bottom;
-
-    background-repeat: no-repeat;
-    background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px;
-    background-attachment: local, local, scroll, scroll;
-  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/components/Cookies/index.js
+++ b/packages/bruno-app/src/components/Cookies/index.js
@@ -1,331 +1,53 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
+import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Modal from 'components/Modal';
-import Accordion from 'components/Accordion/index';
-import { IconTrash, IconEdit, IconCirclePlus, IconCookieOff, IconAlertTriangle, IconSearch } from '@tabler/icons';
-import { deleteCookiesForDomain, deleteCookie } from 'providers/ReduxStore/slices/app';
+import { IconTrash } from '@tabler/icons';
+import { deleteCookiesForDomain } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
-import ModifyCookieModal from 'components/Cookies/ModifyCookieModal/index';
+
 import StyledWrapper from './StyledWrapper';
-import moment from 'moment';
-import { Tooltip } from 'react-tooltip';
-
-const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
-  <Modal onClose={onClose} handleCancel={onClose} title="Clear Domain Cookies" hideFooter={true}>
-    <div className="flex items-center font-normal">
-      <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
-    </div>
-    <div className="font-normal mt-4">
-      Are you sure you want to clear all cookies for the domain {domain}?
-    </div>
-
-    <div className="flex justify-between mt-6">
-      <div>
-        <button className="btn btn-sm btn-close" onClick={onClose}>
-          Close
-        </button>
-      </div>
-      <div>
-        <button className="btn btn-sm btn-danger" onClick={onClear}>
-          Clear All
-        </button>
-      </div>
-    </div>
-  </Modal>
-);
-
-const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
-  <Modal onClose={onClose} handleCancel={onClose} title="Delete Cookie" hideFooter={true}>
-    <div className="flex items-center font-normal">
-      <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
-    </div>
-    <div className="font-normal mt-4">
-      Are you sure you want to delete the cookie {cookieName}?
-    </div>
-
-    <div className="flex justify-between mt-6">
-      <div>
-        <button className="btn btn-sm btn-close" onClick={onClose}>
-          Close
-        </button>
-      </div>
-      <div>
-        <button className="btn btn-sm btn-danger" onClick={onDelete}>
-          Delete
-        </button>
-      </div>
-    </div>
-  </Modal>
-);

 const CollectionProperties = ({ onClose }) => {
  const dispatch = useDispatch();
  const cookies = useSelector((state) => state.app.cookies) || [];
-  const [isModifyCookieModalOpen, setIsModifyCookieModalOpen] = useState(false);
-  const [currentDomain, setCurrentDomain] = useState(null);
-  const [cookieToEdit, setCookieToEdit] = useState(null);

-  const [domainToClear, setDomainToClear] = useState(null);
-  const [cookieToDelete, setCookieToDelete] = useState(null);
-  const [searchText, setSearchText] = useState(null);
-
-  const handleAddCookie = (domain) => {
-    if(domain) setCurrentDomain(domain);
-    setIsModifyCookieModalOpen(true);
-  };
-
-  const handleEditCookie = (domain, cookie) => {
-    setCurrentDomain(domain);
-    setCookieToEdit(cookie);
-    setIsModifyCookieModalOpen(true);
-  };
-
-  const handleClearDomainCookies = (domain) => {
-    setDomainToClear(domain);
-  };
-
-  const clearDomainCookiesAction = () => {
-    dispatch(deleteCookiesForDomain(domainToClear))
+  const handleDeleteDomain = (domain) => {
+    dispatch(deleteCookiesForDomain(domain))
      .then(() => {
-        toast.success('Domain cookies cleared successfully');
+        toast.success('Domain deleted successfully');
      })
-      .catch((err) => console.log(err) && toast.error('Failed to clear domain cookies'));
-    setDomainToClear(null);
+      .catch((err) => console.log(err) && toast.error('Failed to delete domain'));
  };

-  const handleDeleteCookie = (domain, path, key) => {
-    setCookieToDelete({ key, domain, path });
-  };
-
-  const deleteCookieAction = () => {
-    if (cookieToDelete) {
-      const { domain, path, key } = cookieToDelete;
-      dispatch(deleteCookie(domain, path, key))
-        .then(() => {
-          toast.success('Cookie deleted successfully');
-        })
-        .catch((err) => console.log(err) && toast.error('Failed to delete cookie'));
-    }
-    setCookieToDelete(null);
-  };
-
-  const filteredCookies = useMemo(() => {
-    if (!searchText) return cookies;
-
-    return cookies.filter((cookie) =>
-      cookie.domain.toLowerCase().includes(searchText.toLowerCase())
-    );
-  }, [cookies, searchText]);
-
-  const shouldShowHeader = cookies && cookies.length > 0;
-
  return (
-    <>
-      <Modal
-        size="xl"
-        title="Cookies"
-        hideFooter={true}
-        handleCancel={onClose}
-        customHeader={shouldShowHeader ? (
-          <StyledWrapper className="header flex items-center justify-between w-full">
-            <h2 className="text-xs font-medium">Cookies</h2>
-            <input
-              type="search"
-              placeholder="Search by domain"
-              value={searchText || ''}
-              onChange={(e) => setSearchText(e.target.value)}
-              className="block textbox non-passphrase-input ml-auto font-normal"
-            />
-            <button
-              type="submit"
-              className="submit btn btn-sm btn-secondary flex items-center gap-1 mx-4 font-medium"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleAddCookie();
-              }}
-            >
-              <IconCirclePlus strokeWidth={1.5} size={16} />
-              <span>Add Cookie</span>
-            </button>
-          </StyledWrapper>
-        ) : null}
-      >
-        <StyledWrapper>
-          {!cookies || !cookies.length ? (
-            // No cookies found
-            <div className="flex items-center justify-center flex-col">
-              <IconCookieOff size={48} strokeWidth={1.5} className="text-gray-500" />
-              <h2 className="text-lg font-semibold mt-4">No cookies found</h2>
-              <p className="text-gray-500 mt-2">Add cookies to get started</p>
-              <button
-                type="submit"
-                className="submit btn btn-sm btn-secondary flex items-center gap-1 mt-8"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleAddCookie();
-                }}
-              >
-                <IconCirclePlus strokeWidth={1.5} size={16} />
-                <span>Add Cookie</span>
-              </button>
-            </div>
-          ) : cookies.length && !filteredCookies.length ? (
-            // No search results
-            <div className="flex items-center justify-center flex-col">
-              <IconSearch size={48} />
-              <h2 className="text-lg font-semibold mt-4">No search results</h2>
-              <p className="text-gray-500 mt-2">Try a different search term</p>
-            </div>
-          ) : (
-            // Show cookies list
-            <div className="scroll-box">
-              <Accordion defaultIndex={0}>
-                {filteredCookies.map((domainWithCookies, i) => (
-                  <Accordion.Item key={i} index={i}>
-                    <Accordion.Header index={i} className="flex items-center">
-                      <div className="flex items-center">
-                        <span>{domainWithCookies.domain}</span>
-                        <span className="ml-2 text-xs dark:text-gray-300 text-gray-500">
-                          ({domainWithCookies.cookies.length}{' '}
-                          {domainWithCookies.cookies.length === 1 ? 'cookie' : 'cookies'})
-                        </span>
-                        <div className="ml-auto flex items-center gap-2">
-                          <button
-                            type="submit"
-                            className="flex items-center gap-1 text-gray-500 hover:text-gray-950 dark:text-white dark:hover:text-gray-300"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleAddCookie(domainWithCookies.domain);
-                            }}
-                          >
-                            <IconCirclePlus strokeWidth={1.5} size={16} />
-                          </button>
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleClearDomainCookies(domainWithCookies.domain);
-                            }}
-                            className="text-gray-950 dark:text-white dark:hover:hover:text-red-600 hover:text-red-600  mr-2"
-                          >
-                            <IconTrash strokeWidth={1.5} size={16} />
-                          </button>
-                        </div>
-                      </div>
-                    </Accordion.Header>
-                    <Accordion.Content index={i}>
-                      <div className="flex items-center justify-between">
-                        <table className="w-full">
-                          <thead>
-                            <tr className="text-left border-b border-gray-200 dark:border-neutral-600 text-gray-700 dark:text-gray-300">
-                              <th className="py-2 px-4 font-semibold w-32">Name</th>
-                              <th className="py-2 px-4 font-semibold w-52">Value</th>
-                              <th className="py-2 px-4 font-semibold">Path</th>
-                              <th className="py-2 px-4 font-semibold">Expires</th>
-                              <th className="py-2 px-4 font-semibold text-center">Secure</th>
-                              <th className="py-2 px-4 font-semibold text-center">HTTP Only</th>
-                              <th className="py-2 px-4 font-semibold text-right w-24">Actions</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {domainWithCookies.cookies.map((cookie) => (
-                              <tr key={cookie.key} className="border-b border-gray-200 dark:border-neutral-600 last:border-none">
-                                <td className="py-2 px-4 truncate">
-                                  <span id={`cookie-key-${cookie.key}`}>{cookie.key}</span>
-                                  <Tooltip
-                                    anchorId={`cookie-key-${cookie.key}`}
-                                    className="tooltip-mod"
-                                    html={cookie.key}
-                                  />
-                                </td>
-                                <td className="py-2 px-4 truncate">
-                                  <span id={`cookie-value-${cookie.key}`}>{cookie.value}</span>
-                                  <Tooltip
-                                    anchorId={`cookie-value-${cookie.key}`}
-                                    className="tooltip-mod"
-                                    html={cookie.value}
-                                  />
-                                </td>
-                                <td className="py-2 px-4 truncate">{cookie.path || '/'}</td>
-                                <td className="py-2 px-4 truncate">
-                                  <span id={`cookie-expires-${cookie.key}`}>
-                                    {cookie.expires && moment(cookie.expires).isValid()
-                                      ? new Date(cookie.expires).toLocaleString()
-                                      : 'Session'}
-                                  </span>
-                                  {cookie.expires && moment(cookie.expires).isValid() && (
-                                    <Tooltip
-                                      anchorId={`cookie-expires-${cookie.key}`}
-                                      className="tooltip-mod"
-                                      html={new Date(cookie.expires).toLocaleString()}
-                                    />
-                                  )}
-                                </td>
-                                <td className="py-2 px-4 text-center">{cookie.secure ? '✓' : ''}</td>
-                                <td className="py-2 px-4 text-center">{cookie.httpOnly ? '✓' : ''}</td>
-                                <td className="py-2 px-4">
-                                  <div className="flex items-center justify-end gap-2">
-                                    <button
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleEditCookie(domainWithCookies.domain, cookie);
-                                      }}
-                                      className="text-gray-700  hover:text-gray-950
-                                    dark:text-white dark:hover:text-gray-300"
-                                    >
-                                      <IconEdit strokeWidth={1.5} size={16} />
-                                    </button>
-                                    <button
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleDeleteCookie(domainWithCookies.domain, cookie.path, cookie.key);
-                                      }}
-                                      className="text-gray-950 dark:text-white dark:hover:hover:text-red-600  hover:text-red-600"
-                                    >
-                                      <IconTrash strokeWidth={1.5} size={16} />
-                                    </button>
-                                  </div>
-                                </td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </Accordion.Content>
-                  </Accordion.Item>
-                ))}
-              </Accordion>
-            </div>
-          )}
-        </StyledWrapper>
-      </Modal>
-      {isModifyCookieModalOpen && (
-        <ModifyCookieModal
-          onClose={() => {
-            setCookieToEdit(null);
-            setCurrentDomain(null);
-            setIsModifyCookieModalOpen(false);
-          }}
-          domain={currentDomain}
-          cookie={cookieToEdit}
-        />
-      )}
-      {domainToClear ? (
-        <ClearDomainCookiesModal
-          onClose={() => setDomainToClear(null)}
-          domain={domainToClear}
-          onClear={clearDomainCookiesAction}
-        />
-      ) : null}
-      {cookieToDelete ? (
-        <DeleteCookieModal
-          onClose={() => setCookieToDelete(null)}
-          cookieName={cookieToDelete.key}
-          onDelete={deleteCookieAction}
-        />
-      ) : null}
-    </>
+    <Modal size="md" title="Cookies" hideFooter={true} handleCancel={onClose}>
+      <StyledWrapper>
+        <table className="w-full border-collapse" style={{ marginTop: '-1rem' }}>
+          <thead>
+            <tr>
+              <th className="py-2 px-2 text-left">Domain</th>
+              <th className="py-2 px-2 text-left">Cookie</th>
+              <th className="py-2 px-2 text-center" style={{ width: 80 }}>
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {cookies.map((cookie) => (
+              <tr key={cookie.domain}>
+                <td className="py-2 px-2">{cookie.domain}</td>
+                <td className="py-2 px-2 break-all">{cookie.cookieString}</td>
+                <td className="text-center">
+                  <button tabIndex="-1" onClick={() => handleDeleteDomain(cookie.domain)}>
+                    <IconTrash strokeWidth={1.5} size={20} />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </StyledWrapper>
+    </Modal>
  );
 };

--- a/packages/bruno-app/src/components/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
  .editing-mode {
    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
  }
 `;

--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -19,7 +19,7 @@ const EnvironmentSelector = ({ collection }) => {
  const Icon = forwardRef((props, ref) => {
    return (
      <div ref={ref} className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
-        <p className="text-nowrap truncate max-w-32">{activeEnvironment ? activeEnvironment.name : 'No Environment'}</p>
+        {activeEnvironment ? activeEnvironment.name : 'No Environment'}
        <IconCaretDown className="caret" size={14} strokeWidth={2} />
      </div>
    );
@@ -78,10 +78,7 @@ const EnvironmentSelector = ({ collection }) => {
            <IconDatabaseOff size={18} strokeWidth={1.5} />
            <span className="ml-2">No Environment</span>
          </div>
-          <div className="dropdown-item border-top" onClick={() => {
-            handleSettingsIconClick();
-            dropdownTippyRef.current.hide();
-          }}>
+          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
            <div className="pr-2 text-gray-600">
              <IconSettings size={18} strokeWidth={1.5} />
            </div>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
@@ -6,16 +6,10 @@ import * as Yup from 'yup';
 import { useDispatch } from 'react-redux';
 import Portal from 'components/Portal';
 import Modal from 'components/Modal';
-import { validateName, validateNameError } from 'utils/common/regex';

 const CreateEnvironment = ({ collection, onClose }) => {
  const dispatch = useDispatch();
  const inputRef = useRef();
-
- const validateEnvironmentName = (name) => {
-   return !collection?.environments?.some((env) => env?.name?.toLowerCase().trim() === name?.toLowerCase().trim());
- };
-
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
@@ -23,14 +17,9 @@ const CreateEnvironment = ({ collection, onClose }) => {
    },
    validationSchema: Yup.object({
      name: Yup.string()
-        .min(1, 'Must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function(value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
-        .required('Name is required')
-        .test('duplicate-name', 'Environment already exists', validateEnvironmentName)
+        .min(1, 'must be at least 1 character')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
    }),
    onSubmit: (values) => {
      dispatch(addEnvironment(values.name, collection.uid))
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -1,9 +1,8 @@
 import React, { useRef, useEffect } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
+import { IconTrash, IconAlertCircle } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
@@ -14,7 +13,7 @@ import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions
 import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';

-const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
+const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();
  const addButtonRef = useRef(null);
@@ -85,19 +84,6 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
    formik.setFieldValue(formik.values.length, newVariable, false);
  };

-  const onActivate = () => {
-    dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
-      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-          onClose();
-        } else {
-          toast.success(`No Environments are active now`);
-        }
-      })
-      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
-  };
-
  const handleRemoveVar = (id) => {
    formik.setValues(formik.values.filter((variable) => variable.uid !== id));
  };
@@ -197,19 +183,13 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
        </div>
      </div>

-      <div className="flex items-center">
-        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit}>
-          <IconDeviceFloppy size={16} strokeWidth={1.5} className="mr-1" />
+      <div>
+        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
          Save
        </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset}>
-          <IconRefresh size={16} strokeWidth={1.5} className="mr-1" />
+        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset}>
          Reset
        </button>
-        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate}>
-          <IconCircleCheck size={16} strokeWidth={1.5} className="mr-1" />
-          Activate
-        </button>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -5,7 +5,7 @@ import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';

-const EnvironmentDetails = ({ environment, collection, setIsModified, onClose }) => {
+const EnvironmentDetails = ({ environment, collection, setIsModified }) => {
  const [openEditModal, setOpenEditModal] = useState(false);
  const [openDeleteModal, setOpenDeleteModal] = useState(false);
  const [openCopyModal, setOpenCopyModal] = useState(false);
@@ -38,7 +38,7 @@ const EnvironmentDetails = ({ environment, collection, setIsModified, onClose })
      </div>

      <div>
-        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} onClose={onClose} />
+        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} />
      </div>
    </div>
  );
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -23,10 +23,6 @@ const StyledWrapper = styled.div`
    padding: 8px 10px;
    border-left: solid 2px transparent;
    text-decoration: none;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;

    &:hover {
      text-decoration: none;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -8,10 +8,8 @@ import ImportEnvironment from '../ImportEnvironment';
 import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from './ConfirmSwitchEnv';
-import ToolHint from 'components/ToolHint';
-import { isEqual } from 'lodash';

-const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified, onClose }) => {
+const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified }) => {
  const { environments } = collection;
  const [openCreateModal, setOpenCreateModal] = useState(false);
  const [openImportModal, setOpenImportModal] = useState(false);
@@ -25,11 +23,6 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti

  useEffect(() => {
    if (selectedEnvironment) {
-      const _selectedEnvironment = environments?.find(env => env?.uid === selectedEnvironment?.uid);
-      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
-      if (hasSelectedEnvironmentChanged) {
-        setSelectedEnvironment(_selectedEnvironment);
-      }
      setOriginalEnvironmentVariables(selectedEnvironment.variables);
      return;
    }
@@ -110,15 +103,13 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
            {environments &&
              environments.length &&
              environments.map((env) => (
-                <ToolHint key={env.uid} text={env.name} toolhintId={env.uid} place="right">
-                  <div
-                    id={env.uid}
-                    className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
-                    onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
-                  >
-                      <span className="break-all">{env.name}</span>
-                  </div>
-                </ToolHint>
+                <div
+                  key={env.uid}
+                  className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
+                  onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
+                >
+                  <span className="break-all">{env.name}</span>
+                </div>
              ))}
            <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
              + <span>Create</span>
@@ -141,7 +132,6 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
          collection={collection}
          setIsModified={setIsModified}
          originalEnvironmentVariables={originalEnvironmentVariables}
-          onClose={onClose}
        />
      </div>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
@@ -6,7 +6,6 @@ import { useFormik } from 'formik';
 import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import * as Yup from 'yup';
 import { useDispatch } from 'react-redux';
-import { validateName, validateNameError } from 'utils/common/regex';

 const RenameEnvironment = ({ onClose, environment, collection }) => {
  const dispatch = useDispatch();
@@ -19,11 +18,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
    validationSchema: Yup.object({
      name: Yup.string()
        .min(1, 'must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function(value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
+        .max(50, 'must be 50 characters or less')
        .required('name is required')
    }),
    onSubmit: (values) => {
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -72,7 +72,6 @@ const EnvironmentSettings = ({ collection, onClose }) => {
        collection={collection}
        isModified={isModified}
        setIsModified={setIsModified}
-        onClose={onClose}
      />
    </Modal>
  );
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -1,13 +1,15 @@
 import React from 'react';
-import path from 'utils/common/path';
+import path from 'path';
 import { useDispatch } from 'react-redux';
 import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
+import slash from 'utils/common/slash';

-const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false }) => {
+const FilePickerEditor = ({ value, onChange, collection }) => {
+  value = value || [];
  const dispatch = useDispatch();
-  const filenames = (isSingleFilePicker ? [value] : value || [])
+  const filenames = value
    .filter((v) => v != null && v != '')
    .map((v) => {
      const separator = isWindowsOS() ? '\\' : '/';
@@ -18,7 +20,7 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
  const title = filenames.map((v) => `- ${v}`).join('\n');

  const browse = () => {
-    dispatch(browseFiles([], [!isSingleFilePicker ? "multiSelections": ""]))
+    dispatch(browseFiles())
      .then((filePaths) => {
        // If file is in the collection's directory, then we use relative path
        // Otherwise, we use the absolute path
@@ -26,13 +28,13 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
          const collectionDir = collection.pathname;

          if (filePath.startsWith(collectionDir)) {
-            return path.relative(collectionDir, filePath);
+            return path.relative(slash(collectionDir), slash(filePath));
          }

          return filePath;
        });

-        onChange(isSingleFilePicker ? filePaths[0] : filePaths);
+        onChange(filePaths);
      })
      .catch((error) => {
        console.error(error);
@@ -40,14 +42,14 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
  };

  const clear = () => {
-    onChange(isSingleFilePicker ? '' : []);
+    onChange([]);
  };

  const renderButtonText = (filenames) => {
    if (filenames.length == 1) {
      return filenames[0];
    }
-    return filenames.length + ' file(s) selected';
+    return filenames.length + ' files selected';
  };

  return filenames.length > 0 ? (
@@ -64,9 +66,9 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
    </div>
  ) : (
    <button className="btn btn-secondary px-1" style={{ width: '100%' }} onClick={browse}>
-      {isSingleFilePicker ? 'Select File' : 'Select Files'}
+      Select Files
    </button>
  );
 };

-export default FilePickerEditor;
+export default FilePickerEditor;
--- a/packages/bruno-app/src/components/FolderSettings/Auth/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Auth/index.js
@@ -1,86 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import StyledWrapper from './StyledWrapper';
-import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
-import OAuth2AuthorizationCode from 'components/RequestPane/Auth/OAuth2/AuthorizationCode/index';
-import { updateFolderAuth } from 'providers/ReduxStore/slices/collections';
-import { useDispatch } from 'react-redux';
-import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/PasswordCredentials/index';
-import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
-import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
-import AuthMode from '../AuthMode';
-
-const GrantTypeComponentMap = ({ collection, folder }) => {
-  const dispatch = useDispatch();
-
-  const save = () => {
-    dispatch(saveFolderRoot(collection.uid, folder.uid));
-  };
-
-  let request = get(folder, 'root.request', {});
-  const grantType = get(request, 'auth.oauth2.grantType', 'authorization_code');
-
-  switch (grantType) {
-    case 'password':
-      return <OAuth2PasswordCredentials save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
-    case 'authorization_code':
-      return <OAuth2AuthorizationCode save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
-    case 'client_credentials':
-      return <OAuth2ClientCredentials save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
-    default:
-      return <div>TBD</div>;
-  }
-};
-
-const Auth = ({ collection, folder }) => {
-  const dispatch = useDispatch();
-  let request = get(folder, 'root.request', {});
-  const authMode = get(folder, 'root.request.auth.mode');
-
-  const handleSave = () => {
-    dispatch(saveFolderRoot(collection.uid, folder.uid));
-  };
-
-  const getAuthView = () => {
-    switch (authMode) {
-      case 'oauth2': {
-        return (
-          <>
-            <GrantTypeSelector
-              request={request} 
-              updateAuth={updateFolderAuth} 
-              collection={collection}
-              item={folder}
-            />
-            <GrantTypeComponentMap collection={collection} folder={folder} />
-          </>
-        );
-      }
-      case 'none': {
-        return null;
-      }
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <div className="text-xs mb-4 text-muted">
-        Configures authentication for the entire folder. This applies to all requests using the{' '}
-        <span className="font-medium">Inherit</span> option in the <span className="font-medium">Auth</span> tab.
-      </div>
-      <div className="flex flex-grow justify-start items-center mb-4">
-        <AuthMode collection={collection} folder={folder} />
-      </div>
-      {getAuthView()}
-      <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Auth; 
--- a/packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .auth-mode-selector {
-    border: 1px solid ${({ theme }) => theme.colors.border};
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.8125rem;
-  }
-
-  .auth-mode-label {
-    color: ${({ theme }) => theme.colors.text};
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/FolderSettings/AuthMode/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/AuthMode/index.js
@@ -1,62 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-import get from 'lodash/get';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { useDispatch } from 'react-redux';
-import { updateFolderAuthMode } from 'providers/ReduxStore/slices/collections';
-import { humanizeRequestAuthMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
-
-const AuthMode = ({ collection, folder }) => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = get(folder, 'root.request.auth.mode');
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
-        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const onModeChange = (value) => {
-    dispatch(
-      updateFolderAuthMode({
-        mode: value,
-        collectionUid: collection.uid,
-        folderUid: folder.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">      
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('oauth2');
-            }}
-          >
-            OAuth 2.0
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Auth
-          </div>
-        </Dropdown>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default AuthMode;
--- a/packages/bruno-app/src/components/FolderSettings/Documentation/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Documentation/index.js
@@ -1,66 +0,0 @@
-import 'github-markdown-css/github-markdown.css';
-import get from 'lodash/get';
-import { updateFolderDocs } from 'providers/ReduxStore/slices/collections';
-import { useTheme } from 'providers/Theme';
-import { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
-import Markdown from 'components/MarkDown';
-import CodeEditor from 'components/CodeEditor';
-import StyledWrapper from './StyledWrapper';
-
-const Documentation = ({ collection, folder }) => {
-  const dispatch = useDispatch();
-  const { displayedTheme } = useTheme();
-  const preferences = useSelector((state) => state.app.preferences);
-  const [isEditing, setIsEditing] = useState(false);
-  const docs = get(folder, 'root.docs', '');
-
-  const toggleViewMode = () => {
-    setIsEditing((prev) => !prev);
-  };
-
-  const onEdit = (value) => {
-    dispatch(
-      updateFolderDocs({
-        folderUid: folder.uid,
-        collectionUid: collection.uid,
-        docs: value
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
-
-  if (!folder) {
-    return null;
-  }
-
-  return (
-    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
-      <div className="editing-mode flex justify-between items-center" role="tab" onClick={toggleViewMode}>
-        {isEditing ? 'Preview' : 'Edit'}
-      </div>
-
-      {isEditing ? (
-        <div className="mt-2 flex-1 max-h-[70vh]">
-          <CodeEditor
-            collection={collection}
-            theme={displayedTheme}
-            value={docs || ''}
-            onEdit={onEdit}
-            onSave={onSave}
-            mode="application/text"
-          />
-          <button type="submit" className="submit btn btn-sm btn-secondary my-6" onClick={onSave}>
-            Save
-          </button>
-        </div>
-      ) : (
-        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default Documentation;
--- a/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js
@@ -88,7 +88,7 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
              <td>
                <div className="flex items-center">
                  <span>Expr</span>
-                  <InfoTip content="You can write any valid JS expression here" infotipId="response-var" />
+                  <InfoTip text="You can write any valid JS expression here" infotipId="response-var" />
                </div>
              </td>
            )}
--- a/packages/bruno-app/src/components/FolderSettings/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/index.js
@@ -7,10 +7,7 @@ import Script from './Script';
 import Tests from './Tests';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars';
-import Documentation from './Documentation';
-import Auth from './Auth';
 import DotIcon from 'components/Icons/Dot';
-import get from 'lodash/get';

 const ContentIndicator = () => {
  return (
@@ -39,9 +36,6 @@ const FolderSettings = ({ collection, folder }) => {
  const responseVars = folderRoot?.request?.vars?.res || [];
  const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;

-  const auth = get(folderRoot, 'request.auth.mode');
-  const hasAuth = auth && auth !== 'none';
-
  const setTab = (tab) => {
    dispatch(
      updatedFolderSettingsSelectedTab({
@@ -66,12 +60,6 @@ const FolderSettings = ({ collection, folder }) => {
      case 'vars': {
        return <Vars collection={collection} folder={folder} />;
      }
-      case 'auth': {
-        return <Auth collection={collection} folder={folder} />;
-      }
-      case 'docs': {
-        return <Documentation collection={collection} folder={folder} />;
-      }
    }
  };

@@ -101,13 +89,6 @@ const FolderSettings = ({ collection, folder }) => {
            Vars
            {activeVarsCount > 0 && <sup className="ml-1 font-medium">{activeVarsCount}</sup>}
          </div>
-          <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
-            Auth
-            {hasAuth && <ContentIndicator />}
-          </div>
-          <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
-            Docs
-          </div>
        </div>
        <section className={`flex mt-4 h-full`}>{getTabPanel(tab)}</section>
      </div>
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSelector/index.js
@@ -23,7 +23,7 @@ const EnvironmentSelector = () => {
          <ToolHint text="Global Environments" toolhintId="GlobalEnvironmentsToolhintId" className='flex flex-row'>
            <IconWorld className="globe" size={16} strokeWidth={1.5} />
            {
-              activeEnvironment ? <div className='text-nowrap truncate max-w-32'>{activeEnvironment?.name}</div> : null
+              activeEnvironment ? <div>{activeEnvironment?.name}</div> : null
            }
          </ToolHint>
        </div>
@@ -81,10 +81,7 @@ const EnvironmentSelector = () => {
            <IconDatabaseOff size={18} strokeWidth={1.5} />
            <span className="ml-2">No Environment</span>
          </div>
-          <div className="dropdown-item border-top" onClick={() => {
-            handleSettingsIconClick();
-            dropdownTippyRef.current.hide();
-          }}>
+          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
            <div className="pr-2 text-gray-600">
              <IconSettings size={18} strokeWidth={1.5} />
            </div>
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
@@ -2,20 +2,12 @@ import React, { useEffect, useRef } from 'react';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import Portal from 'components/Portal';
 import Modal from 'components/Modal';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import { validateName, validateNameError } from 'utils/common/regex';

 const CreateEnvironment = ({ onClose }) => {
-  const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
-
-  const validateEnvironmentName = (name) => {
-    const trimmedName = name?.toLowerCase().trim();
-    return globalEnvs.every((env) => env?.name?.toLowerCase().trim() !== trimmedName);
-  };
-
  const dispatch = useDispatch();
  const inputRef = useRef();
  const formik = useFormik({
@@ -25,14 +17,9 @@ const CreateEnvironment = ({ onClose }) => {
    },
    validationSchema: Yup.object({
      name: Yup.string()
-        .min(1, 'Must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function(value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
-        .required('Name is required')
-        .test('duplicate-name', 'Global Environment already exists', validateEnvironmentName)
+        .min(1, 'must be at least 1 character')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
    }),
    onSubmit: (values) => {
      dispatch(addGlobalEnvironment({ name: values.name }))
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -23,10 +23,6 @@ const StyledWrapper = styled.div`
    padding: 8px 10px;
    border-left: solid 2px transparent;
    text-decoration: none;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;

    &:hover {
      text-decoration: none;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/index.js
@@ -8,7 +8,6 @@ import ConfirmSwitchEnv from './ConfirmSwitchEnv';
 import ManageSecrets from 'components/Environments/EnvironmentSettings/ManageSecrets/index';
 import ImportEnvironment from '../ImportEnvironment';
 import { isEqual } from 'lodash';
-import ToolHint from 'components/ToolHint/index';

 const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified }) => {
  const [openCreateModal, setOpenCreateModal] = useState(false);
@@ -113,15 +112,13 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
            {environments &&
              environments.length &&
              environments.map((env) => (
-                <ToolHint key={env.uid} text={env.name} toolhintId={env.uid} place="right">
-                  <div
-                    id={env.uid}
-                    className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
-                    onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle click
-                  >
-                      <span className="break-all">{env.name}</span>
-                  </div>
-                </ToolHint>
+                <div
+                  key={env.uid}
+                  className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
+                  onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
+                >
+                  <span className="break-all">{env.name}</span>
+                </div>
              ))}
            <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
              + <span>Create</span>
--- a/Show More
+++ b/Show More