chore: bumped version to 1.12.3

Co-authored-by: Stefan Grüttner <stefan.gruettner@deutschebahn.com>

.github/workflows/bump-homebrew-cask.yml

@@ -1,12 +0,0 @@
-name: Bump Homebrew Cask
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  bump:
-    runs-on: macos-10.15
-    steps:
-      - name: Bump Homebrew Cask
-        run: brew bump-cask-pr bruno --version "${GITHUB_REF_NAME#v}"  

.github/workflows/npm-bru-cli.yml

@@ -0,0 +1,48 @@
+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
+permissions:
+  statuses: write
+  checks: write
+  contents: write
+  pull-requests: write
+  actions: write
+
+jobs:
+  test:
+    name: CLI Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install Bru CLI from NPM
+        run: npm install -g @usebruno/cli
+
+      - name: Display Bru CLI Version
+        run: bru --version
+
+      - name: Run tests
+        run: |
+          cd packages/bruno-tests/collection
+          npm install
+          bru run --env Prod --output junit.xml --format junit
+
+      - name: Publish Test Report
+        uses: dorny/test-reporter@v1
+        if: success() || failure()
+        with:
+          name: Test Report
+          path: packages/bruno-tests/collection/junit.xml
+          reporter: java-junit

.github/workflows/playwright.yml

@@ -1,27 +0,0 @@
-name: Playwright Tests
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install dependencies
-      run: npm i --legacy-peer-deps
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npm run test:e2e
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30

.github/workflows/release-snap.yml

@@ -21,13 +21,14 @@ jobs:
           node-version: 18
 
       - name: Check package-lock.json
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Install dependencies
         run: npm install --legacy-peer-deps
 
       - name: Build Electron app
         run: |
+          npm run build:bruno-common
           npm run build:bruno-query
           npm run build:graphql-docs
           npm run build:web

.github/workflows/tests.yml

@@ -0,0 +1,96 @@
+name: Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+# Assign permissions for unit tests to be reported.
+# See https://github.com/dorny/test-reporter/issues/168
+permissions:
+  statuses: write
+  checks: write
+  contents: write
+  pull-requests: write
+  actions: write
+
+jobs:
+  unit-test:
+    name: Unit Tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      # build libraries
+      - name: Build libraries
+        run: |
+          npm run build --workspace=packages/bruno-common
+          npm run build --workspace=packages/bruno-query
+
+      # test
+      - name: Test Package bruno-query
+        run: npm run test --workspace=packages/bruno-query
+      - name: Test Package bruno-lang
+        run: npm run test --workspace=packages/bruno-lang
+      - name: Test Package bruno-schema
+        run: npm run test --workspace=packages/bruno-schema
+      - name: Test Package bruno-app
+        run: npm run test --workspace=packages/bruno-app
+      - name: Test Package bruno-js
+        run: npm run test --workspace=packages/bruno-js
+      - name: Test Package bruno-common
+        run: npm run test --workspace=packages/bruno-common
+      - name: Test Package bruno-cli
+        run: npm run test --workspace=packages/bruno-cli
+      - name: Test Package bruno-electron
+        run: npm run test --workspace=packages/bruno-electron
+
+  cli-test:
+    name: CLI Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build Libraries
+        run: |
+          npm run build --workspace=packages/bruno-query
+          npm run build --workspace=packages/bruno-common
+
+      - name: Run tests
+        run: |
+          cd packages/bruno-tests/collection
+          npm install
+          node ../../bruno-cli/bin/bru.js run --env Prod --output junit.xml --format junit
+
+      - name: Publish Test Report
+        uses: dorny/test-reporter@v1
+        if: success() || failure()
+        with:
+          name: Test Report
+          path: packages/bruno-tests/collection/junit.xml
+          reporter: java-junit
+
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+      - name: Run Prettier
+        run: npm run test:prettier:web

.github/workflows/unit-tests.yml

@@ -1,45 +0,0 @@
-name: Unit Tests
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-jobs:
-  tests:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-      - name: Test Package bruno-query
-        run: npm run test --workspace=packages/bruno-query
-      - name: Build Package bruno-query
-        run: npm run build --workspace=packages/bruno-query
-      - name: Test Package bruno-lang
-        run: npm run test --workspace=packages/bruno-lang
-      - name: Test Package bruno-schema
-        run: npm run test --workspace=packages/bruno-schema
-      - name: Test Package bruno-app
-        run: npm run test --workspace=packages/bruno-app
-      - name: Test Package bruno-js
-        run: npm run test --workspace=packages/bruno-js
-      - name: Test Package bruno-cli
-        run: npm run test --workspace=packages/bruno-cli
-      - name: Test Package bruno-electron
-        run: npm run test --workspace=packages/bruno-electron --passWithNoTests
-
-  prettier:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-      - name: Run Prettier
-        run: npm run test:prettier:web

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+bun.lockb
 node_modules
 yarn.lock
 pnpm-lock.yaml

contributing.md

@@ -1,8 +1,9 @@
 **English** | [Українська](docs/contributing/contributing_ua.md) | [Русский](docs/contributing/contributing_ru.md) | [Türkçe](docs/contributing/contributing_tr.md) | [Deutsch](docs/contributing/contributing_de.md) | [Français](docs/contributing/contributing_fr.md) | [Português (BR)](docs/contributing/contributing_pt_br.md) | [বাংলা](docs/contributing/contributing_bn.md) | [Español](docs/contributing/contributing_es.md) | [Română](docs/contributing/contributing_ro.md) | [Polski](docs/contributing/contributing_pl.md)
- | [简体中文](docs/contributing/contributing_cn.md)
-## Let's make bruno better, together !!
+| [简体中文](docs/contributing/contributing_cn.md) | [正體中文](docs/contributing/contributing_zhtw.md)
 
-We are happy that you are looking to improve bruno. Below are the guidelines to get started bringing up bruno on your computer.
+## Let's make Bruno better, together !!
+
+We are happy that you are looking to improve Bruno. Below are the guidelines to get started bringing up Bruno on your computer.
 
 ### Technology Stack
 
@@ -27,10 +28,6 @@ You would need [Node v18.x or the latest LTS version](https://nodejs.org/en/) an
 
 Bruno is being developed as a desktop app. You need to load the app by running the Next.js app in one terminal and then run the electron app in another terminal.
 
-### Dependencies
-
-- NodeJS v18
-
 ### Local Development
 
 ```bash
@@ -40,11 +37,10 @@ nvm use
 # install deps
 npm i --legacy-peer-deps
 
-# build graphql docs
+# build packages
 npm run build:graphql-docs
-
-# build bruno query
 npm run build:bruno-query
+npm run build:bruno-common
 
 # run next app (terminal 1)
 npm run dev:web
@@ -77,7 +73,7 @@ npm test --workspace=packages/bruno-schema
 npm test --workspace=packages/bruno-lang
 ```
 
-### Raising Pull Request
+### Raising Pull Requests
 
 - Please keep the PR's small and focused on one thing
 - Please follow the format of creating branches

docs/contributing/contributing_zhtw.md

@@ -0,0 +1,91 @@
+[English](/contributing.md) | [Українська](./contributing_ua.md) | [Русский](./contributing_ru.md) | [Türkçe](./contributing_tr.md) | [Deutsch](./contributing_de.md) | [Français](./contributing_fr.md) | [Português (BR)](./contributing_pt_br.md) | [বাংলা](./contributing_bn.md) | [Español](./contributing_es.md) | [Română](./contributing_ro.md) | [Polski](./contributing_pl.md) | [简体中文](./contributing_cn.md) | **正體中文**
+
+## 讓我們一起來讓 Bruno 變得更好！
+
+我們很高興您希望一同改善 Bruno。以下是在您的電腦上開始運行 Bruno 的規則及指南。
+
+### 技術細節
+
+Bruno 使用 Next.js 和 React 構建。我們使用 Electron 來封裝及發佈桌面版本。
+
+我們使用的函式庫：
+
+- CSS - Tailwind
+- 程式碼編輯器 - Codemirror
+- 狀態管理 - Redux
+- Icons - Tabler Icons
+- 表單 - formik
+- 結構驗證- Yup
+- 請求用戶端 - axios
+- 檔案系統監測 - chokidar
+
+### 依賴關係
+
+您需要使用 [Node v18.x 或最新的 LTS 版本](https://nodejs.org/en/) 和 npm 8.x。我們在這個專案中使用 npm 工作區（_npm workspaces_）。
+
+
+## 開發
+
+Bruno 正以桌面應用程式的形式開發。您需要在一個終端機中執行 Next.js 來載入應用程式，然後在另一個終端機中執行 electron 應用程式。
+
+
+### 開發依賴
+
+- NodeJS v18
+
+### 本地開發
+
+```bash
+# 使用 nodejs 第 18 版
+nvm use
+
+# 安裝相依套件（使用--legacy-peer-deps 解決套件相依性問題）
+npm i --legacy-peer-deps
+
+# 建立 graphql 文件
+npm run build:graphql-docs
+
+# 建立 bruno 查詢
+npm run build:bruno-query
+
+# 執行 next 應用程式（終端機 1）
+npm run dev:web
+
+# 執行 electron 應用程式（終端機 2）
+npm run dev:electron
+```
+
+### 故障排除
+
+在執行 `npm install` 時，您可能會遇到 `Unsupported platform` 的錯誤訊息。爲了解決這個問題，您需要刪除 `node_modules` 資料夾和 `package-lock.json` 檔案，然後再執行一次 `npm install`。這應該能重新安裝應用程式所需的套件。
+
+```shell
+# 刪除子資料夾中的 node_modules 資料夾
+find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
+  rm -rf "$dir"
+done
+
+# 刪除子資料夾中的 package-lock.json 檔案
+find . -type f -name "package-lock.json" -delete
+```
+
+
+### 測試
+
+```bash
+# bruno-schema
+npm test --workspace=packages/bruno-schema
+
+# bruno-lang
+npm test --workspace=packages/bruno-lang
+```
+
+
+### 發送 Pull Request
+
+- 請保持 PR 精簡並專注於一個目標
+- 請遵循建立分支的格式：
+  - feature/[feature name]：該分支應包含特定功能的更改
+    - 範例：feature/dark-mode
+  - bugfix/[bug name]：該分支應僅包含特定 bug 的修復
+    - 範例：bugfix/bug-1

docs/publishing/publishing_zhtw.md

@@ -0,0 +1,7 @@
+[English](/publishing.md) | [Português (BR)](docs/publishing/publishing_pt_br.md) | [Română](docs/publishing/publishing_ro.md) | [Polski](docs/publishing/publishing_pl.md) | [বাংলা](docs/publishing/publishing_bn.md) | [Français](docs/publishing/publishing_fr.md) | **正體中文**
+
+### 將 Bruno 發佈到新的套件管理器
+
+雖然我們的程式碼是開源的並且可供所有人使用，但我們懇請您在考慮在新的套件管理器上發布之前與我們聯繫。作為 Bruno 的創建者，我擁有這個專案的 Bruno 商標並希望管理其發行。如果您希望看到 Bruno 使用新的套件管理器，請提出一個 GitHub issue。
+
+雖然我們的大部分功能都是免費和開源（涵蓋 REST 和 GraphQL APIs），但我們努力在開源的原則和永續性之間，取得和諧的平衡 - https://github.com/usebruno/bruno/discussions/269

docs/readme/readme_de.md

@@ -1,16 +1,16 @@
 <br />
-<img src="../../assets/images/logo-transparent.png" width="80"/>
+<img src="/assets/images/logo-transparent.png" width="80"/>
 
 ### Bruno - Opensource IDE zum Erkunden und Testen von APIs.
 
 [![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
-[![CI](https://github.com/usebruno/bruno/actions/workflows/unit-tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/workflows/unit-tests.yml)
+[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/workflows/unit-tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
 [![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
 [![Download](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
 
-[English](/readme.md) | [Українська](/readme_ua.md) | [Русский](/readme_ru.md) | [Türkçe](/readme_tr.md) | **Deutsch** | [Français](/readme_fr.md) | [বাংলা](docs/readme/readme_bn.md)
+[English](/readme.md) | [Українська](./readme_ua.md) | [Русский](./readme_ru.md) | [Türkçe](./readme_tr.md) | **Deutsch** | [Français](./readme_fr.md) | [Português (BR)](./readme_pt_br.md) | [한국어](./readme_kr.md) | [বাংলা](./readme_bn.md) | [Español](./readme_es.md) | [Italiano](./readme_it.md) | [Română](./readme_ro.md) | [Polski](./readme_pl.md) | [简体中文](./readme_cn.md) | [正體中文](./readme_zhtw.md)
 
 Bruno ist ein neuer und innovativer API-Client, der den Status Quo von Postman und ähnlichen Tools revolutionieren soll.
 
@@ -20,8 +20,55 @@ Du kannst Git oder eine andere Versionskontrolle deiner Wahl verwenden, um gemei
 
 Bruno ist ein reines Offline-Tool. Es gibt keine Pläne, Bruno um eine Cloud-Synchronisation zu erweitern. Wir schätzen den Schutz deiner Daten und glauben, dass sie auf deinem Gerät bleiben sollten. Lies unsere Langzeit-Vision [hier](https://github.com/usebruno/bruno/discussions/269).
 
+[Download Bruno](https://www.usebruno.com/downloads)
+
+📢 Sehen Sie sich unseren Vortrag auf der India FOSS 3.0 Conference [hier](https://www.youtube.com/watch?v=7bSMFpbcPiY) an.
+
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
+### Golden Edition ✨
+
+Die meisten unserer Funktionen sind kostenlos und quelloffen.
+Wir bemühen uns um ein Gleichgewicht zwischen [Open-Source-Prinzipien und Nachhaltigkeit](https://github.com/usebruno/bruno/discussions/269)
+
+Sie können die [Golden Edition](https://www.usebruno.com/pricing) vorbestellen ~~$19~~ **$9** ! <br/>
+
+### Installation
+
+Bruno ist als Download [auf unserer Website](https://www.usebruno.com/downloads) für Mac, Windows und Linux verfügbar.
+
+Sie können Bruno auch über Paketmanager wie Homebrew, Chocolatey, Scoop, Snap, Flatpak und Apt installieren.
+
+```sh
+# Auf Mac via Homebrew
+brew install bruno
+
+# Auf Windows via Chocolatey
+choco install bruno
+
+# Auf Windows via Scoop
+scoop bucket add extras
+scoop install bruno
+
+# Auf Windows via winget
+winget install Bruno.Bruno
+
+# Auf Linux via Snap
+snap install bruno
+
+# Auf Linux via Flatpak
+flatpak install com.usebruno.Bruno
+
+# Auf Linux via Apt
+sudo mkdir -p /etc/apt/keyrings
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
+```
+
 ### Einsatz auf verschiedensten Plattformen 🖥️
 
 ![bruno](/assets/images/run-anywhere.png) <br /><br />
@@ -32,6 +79,16 @@ Oder einer Versionskontrolle deiner Wahl
 
 ![bruno](/assets/images/version-control.png) <br /><br />
 
+### Sponsoren
+
+#### Gold Sponsoren
+
+<img src="/assets/images/sponsors/samagata.png" width="150"/>
+
+#### Silber Sponsoren
+
+<img src="/assets/images/sponsors/commit-company.png" width="70"/>
+
 ### Wichtige Links 📌
 
 - [Unsere Langzeit-Vision](https://github.com/usebruno/bruno/discussions/269)

docs/readme/readme_es.md

@@ -10,16 +10,62 @@
 [![Sitio Web](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
 [![Descargas](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
 
-Bruno un cliente de APIs nuevo e innovador, creado con el objetivo de revolucionar el panorama actual representado por Postman y otras herramientas similares.
+[English](/readme.md) | [Українська](./readme_ua.md) | [Русский](./readme_ru.md) | [Türkçe](./readme_tr.md) | [Deutsch](./readme_de.md) | [Français](./readme_fr.md) | [Português (BR)](./readme_pt_br.md) | [한국어](./readme_kr.md) | [বাংলা](./readme_bn.md) | **Español** | [Italiano](./readme_it.md) | [Română](./readme_ro.md) | [Polski](./readme_pl.md)
+
+Bruno es un cliente de APIs nuevo e innovador, creado con el objetivo de revolucionar el panorama actual representado por Postman y otras herramientas similares.
 
 Bruno almacena tus colecciones directamente en una carpeta de tu sistema de archivos. Usamos un lenguaje de marcado de texto plano, llamado Bru, para guardar información sobre las peticiones a tus APIs.
 
 Puedes usar git o cualquier otro sistema de control de versiones que prefieras para colaborar en tus colecciones.
 
-Bruno funciona sin conexión a internet. No tenemos intenciones de añadir sincronización en la nube a Bruno, en ningún momento. Valoramos tu privacidad y creemos que tus datos deben permanecer en tu dispositivo. Puedes leer nuestra visión a largo plazo [aquí](https://github.com/usebruno/bruno/discussions/269)
+Bruno funciona sin conexión a internet. No tenemos intenciones de añadir sincronización en la nube a Bruno, en ningún momento. Valoramos tu privacidad y creemos que tus datos deben permanecer en tu dispositivo. Puedes leer nuestra visión a largo plazo [aquí](https://github.com/usebruno/bruno/discussions/269).
+
+[Descarga Bruno](https://www.usebruno.com/downloads).
+
+📢 Mira nuestra charla en la conferencia India FOSS 3.0 [aquí](https://www.youtube.com/watch?v=7bSMFpbcPiY).
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
+### Golden Edition ✨
+
+La mayoría de nuestras funcionalidades son gratis y de código abierto.
+Queremos alcanzar un equilibrio en armonía entre los [principios open-source y la sostenibilidad](https://github.com/usebruno/bruno/discussions/269).
+
+¡Puedes reservar la [Golden Edition](https://www.usebruno.com/pricing) por ~~$19~~ **$9**! <br/>
+
+### Instalación
+
+Bruno está disponible para su descarga [en nuestro sitio web](https://www.usebruno.com/downloads) para Mac, Windows y Linux.
+
+También puedes instalar Bruno mediante package managers como Homebrew, Chocolatey, Scoop, Flatpak y Apt.
+
+```sh
+# En Mac con Homebrew
+brew install bruno
+
+# En Windows con Chocolatey
+choco install bruno
+
+# En Windows con Scoop
+scoop bucket add extras
+scoop install bruno
+
+# En Linux con Snap
+snap install bruno
+
+# En Linux con Flatpak
+flatpak install com.usebruno.Bruno
+
+# En Linux con Apt
+sudo mkdir -p /etc/apt/keyrings
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
+```
+
 ### Ejecútalo en múltiples plataformas 🖥️
 
 ![bruno](/assets/images/run-anywhere.png) <br /><br />

docs/readme/readme_pt_br.md

@@ -4,7 +4,7 @@
 ### Bruno - IDE de código aberto para explorar e testar APIs.
 
 [![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
-[![CI](https://github.com/usebruno/bruno/actions/workflows/unit-tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/workflows/unit-tests.yml)
+[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/workflows/unit-tests.yml)
 [![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
 [![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
 [![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
@@ -22,6 +22,13 @@ Bruno é totalmente offline. Não há planos de adicionar sincronização em nuv
 
 ![bruno](../../assets/images/landing-2.png) <br /><br />
 
+### Golden Edition ✨
+
+A grande maioria dos nossos recursos são gratuitos e de código aberto.
+Nós nos esforçamos para encontrar um equilíbrio harmônico entre [princípios de código aberto e sustentabilidade](https://github.com/usebruno/bruno/discussions/269)
+
+Você pode pré encomendar o plano [Golden Edition](https://www.usebruno.com/pricing) por ~~USD $19~~ **USD $9** ! <br/>
+
 ### Instalação
 
 Bruno está disponível para download como binário [em nosso site](https://www.usebruno.com/downloads) para Mac, Windows e Linux.
@@ -29,16 +36,26 @@ Bruno está disponível para download como binário [em nosso site](https://www.
 Você também pode instalar o Bruno via gerenciadores de pacotes como Homebrew, Chocolatey, Snap e Apt.
 
 ```sh
-# Mac via Homebrew
+# No Mac via Homebrew
 brew install bruno
 
-# Windows via Chocolatey
+# No Windows via Chocolatey
 choco install bruno
 
-# Linux via Snap
+# No Windows via Scoop
+scoop bucket add extras
+scoop install bruno
+
+# No Windows via winget
+winget install Bruno.Bruno
+
+# No Linux via Snap
 snap install bruno
 
-# Linux via Apt
+# No Linux via Flatpak
+flatpak install com.usebruno.Bruno
+
+# No Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
 
@@ -58,14 +75,26 @@ Ou qualquer sistema de controle de versão de sua escolha.
 
 ![bruno](../../assets/images/version-control.png) <br /><br />
 
+### Apoiadores
+
+#### Apoiadores Gold
+
+<img src="../../assets/images/sponsors/samagata.png" width="150"/>
+
+#### Apoiadores Silver
+
+<img src="../../assets/images/sponsors/commit-company.png" width="70"/>
+
 ### Links Importantes 📌
 
 - [Nossa Visão de Longo Prazo](https://github.com/usebruno/bruno/discussions/269)
 - [Roadmap](https://github.com/usebruno/bruno/discussions/384)
 - [Documentação](https://docs.usebruno.com)
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/bruno)
 - [Website](https://www.usebruno.com)
 - [Preços](https://www.usebruno.com/pricing)
 - [Download](https://www.usebruno.com/downloads)
+- [Github Sponsors](https://github.com/sponsors/helloanoop)
 
 ### Showcase 🎥
 
@@ -75,7 +104,7 @@ Ou qualquer sistema de controle de versão de sua escolha.
 
 ### Apoie ❤️
 
-Au-au! Se você gosta do projeto, clique no botão ⭐!!
+Au-au! Se você gosta do projeto e deseja apoiar nosso trabalho, considere nos ajudando via [Github Sponsors](https://github.com/sponsors/helloanoop).
 
 ### Compartilhe sua experiência 📣
 
@@ -85,20 +114,6 @@ Se o Bruno ajudou no seu trabalho e/ou no trabalho de sua equipe, por favor, nã
 
 Por favor, verifique [aqui](../publishing/publishing_pt_br.md) mais informações.
 
-### Colabore 👩‍💻🧑‍💻
-
-Fico feliz que você queira melhorar o Bruno. Por favor, confira o [guia de colaboração](../contributing/contributing_pt_br.md).
-
-Mesmo que você não possa contribuir codificando, não deixe de relatar problemas e solicitar recursos que precisam ser implementados para atender ao contexto de seu dia a dia.
-
-### Authors
-
-<div align="center">
-    <a href="https://github.com/usebruno/bruno/graphs/contributors">
-        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
-    </a>
-</div>
-
 ### Mantenha Contato 🌐
 
 [𝕏 (Twitter)](https://twitter.com/use_bruno) <br />
@@ -116,6 +131,20 @@ Mesmo que você não possa contribuir codificando, não deixe de relatar problem
 
 A logo é original do [OpenMoji](https://openmoji.org/library/emoji-1F436/). Licença: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).
 
+### Colabore 👩‍💻🧑‍💻
+
+Fico feliz que você queira melhorar o Bruno. Por favor, confira o [guia de colaboração](../contributing/contributing_pt_br.md).
+
+Mesmo que você não possa contribuir codificando, não deixe de relatar problemas e solicitar recursos que precisam ser implementados para atender ao contexto de seu dia a dia.
+
+### Contribuidores
+
+<div align="center">
+    <a href="https://github.com/usebruno/bruno/graphs/contributors">
+        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
+    </a>
+</div>
+
 ### Licença 📄
 
 [MIT](license.md)

docs/readme/readme_zhtw.md

@@ -0,0 +1,129 @@
+<br />
+<img src="../../assets/images/logo-transparent.png" width="80"/>
+
+### Bruno - 探索和測試 API 的開源 IDE 工具
+
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![CI](https://github.com/usebruno/bruno/actions/workflows/unit-tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/workflows/unit-tests.yml)
+[![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
+[![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
+[![网站](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
+[![下载](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
+
+[English](../../readme.md) | [Українська](./readme_ua.md) | [Русский](./readme_ru.md) | [Türkçe](./readme_tr.md) | [Deutsch](./readme_de.md) | [Français](./readme_fr.md) | [Português (BR)](./readme_pt_br.md) | [한국어](./readme_kr.md) | [বাংলা](./readme_bn.md) | [Español](./readme_es.md) | [Italiano](./readme_it.md) | [Română](./readme_ro.md) | [Polski](./readme_pl.md) | [简体中文](./readme_cn.md) | **正體中文**
+
+Bruno 是一個全新且有創新性的 API 用戶端，目的在徹底改變以 Postman 和其他類似工具的現況。
+
+Bruno 將您的 API 集合直接儲存在檔案系統上的資料夾中。我們以純文本標記語言- Bru，來儲存和 API 有關的資訊。
+
+您可以使用 Git 或您選擇的任何版本管理軟體，來管理及協作 API 集合。
+
+Bruno 僅能夠離線使用，永遠不會計劃為 Bruno 增加雲端同步的功能。我們重視您的資料隱私，並相信它應該保留在您的裝置上。瞭解我們的長期願景 [連結](https://github.com/usebruno/bruno/discussions/269)
+
+📢 觀看我們最近在 India FOSS 3.0 研討會上的演講 [連結](https://www.youtube.com/watch?v=7bSMFpbcPiY)
+
+![bruno](../../assets/images/landing-2.png) <br /><br />
+
+### 安装
+
+可以在我們的 [網站上下載](https://www.usebruno.com/downloads) 跨平臺（Mac、Windows 和 Linux）的 Bruno 程式檔。
+
+您也可以透過套件管理程式來安裝 Bruno，如：Homebrew、Chocolatey、Scoop、Snap 和 Apt。
+
+```shell
+# 在 Mac 上使用 Homebrew 安裝
+brew install bruno
+
+# 在 Windows 上使用 Chocolatey 安裝
+choco install bruno
+
+# 在 Windows 上使用 Scoop 安裝
+scoop bucket add extras
+scoop install bruno
+
+# 在 Linux 上使用 Snap 安裝
+snap install bruno
+
+# 在 Linux 上使用 Apt 安裝
+sudo mkdir -p /etc/apt/keyrings
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
+```
+
+### 跨多個平台運行 🖥️
+
+![bruno](../../assets/images/run-anywhere.png) <br /><br />
+
+### 透過 Git 進行協作 👩‍💻🧑‍💻
+
+您選擇的任何版本管理軟體
+
+![bruno](../../assets/images/version-control.png) <br /><br />
+
+### 重要連結 📌
+
+- [我們的長期願景](https://github.com/usebruno/bruno/discussions/269)
+- [藍圖](https://github.com/usebruno/bruno/discussions/384)
+- [說明文件](https://docs.usebruno.com)
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/bruno)
+- [網站](https://www.usebruno.com)
+- [定價](https://www.usebruno.com/pricing)
+- [下載](https://www.usebruno.com/downloads)
+- [Github 贊助](https://github.com/sponsors/helloanoop).
+
+### 展示 🎥
+
+- [Testimonials](https://github.com/usebruno/bruno/discussions/343)
+- [Knowledge Hub](https://github.com/usebruno/bruno/discussions/386)
+- [Scriptmania](https://github.com/usebruno/bruno/discussions/385)
+
+### 贊助支持 ❤️
+
+如果您喜歡 Bruno 和希望支持我們在開源上的工作，請考慮使用 [Github Sponsors](https://github.com/sponsors/helloanoop) 來贊助我們。
+
+### 分享感想 📣
+
+如果 Bruno 在工作和您的團隊中為您提供了幫助，請不要忘記在我們的 [GitHub 討論區](https://github.com/usebruno/bruno/discussions/343) 中分享您的感想。
+
+### 發佈到新的套件管理器
+
+更多資訊，請參考這個 [連結](../publishing/publishing_zhtw.md) 。
+
+### 持續關注 🌐
+
+[𝕏 (Twitter)](https://twitter.com/use_bruno) <br />
+[Website](https://www.usebruno.com) <br />
+[Discord](https://discord.com/invite/KgcZUncpjq) <br />
+[LinkedIn](https://www.linkedin.com/company/usebruno)
+
+### 商標
+
+**名稱**
+
+`Bruno` 是 [Anoop M D](https://www.helloanoop.com/) 持有的商標。
+
+**Logo**
+
+Logo 源自於 [OpenMoji](https://openmoji.org/library/emoji-1F436/)。授權: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
+
+### 提供貢獻 👩‍💻🧑‍💻
+
+我很高興您希望一同改善 Bruno。請參考 [貢獻指南](../contributing/contributing_zhtw.md)。
+
+即使您無法透過程式碼做出貢獻，我們仍然歡迎您提出 Bug 及新的實作需求。
+
+### 作者們
+
+<div align="center">
+    <a href="https://github.com/usebruno/bruno/graphs/contributors">
+        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
+    </a>
+</div>
+
+### 授權許可 📄
+
+[MIT](../../license.md)

package.json

@@ -5,11 +5,12 @@
     "packages/bruno-app",
     "packages/bruno-electron",
     "packages/bruno-cli",
+    "packages/bruno-common",
     "packages/bruno-schema",
     "packages/bruno-query",
     "packages/bruno-js",
     "packages/bruno-lang",
-    "packages/bruno-testbench",
+    "packages/bruno-tests",
     "packages/bruno-toml",
     "packages/bruno-graphql-docs"
   ],
@@ -18,18 +19,20 @@
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.27.1",
+    "@types/jest": "^29.5.11",
+    "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
     "jest": "^29.2.0",
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
-    "ts-jest": "^29.0.5",
-    "fs-extra": "^11.1.1"
+    "ts-jest": "^29.0.5"
   },
   "scripts": {
     "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",
+    "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",
     "build:electron": "node ./scripts/build-electron.js",
@@ -46,5 +49,8 @@
   },
   "overrides": {
     "rollup": "3.2.5"
+  },
+  "dependencies": {
+    "json-bigint": "^1.0.0"
   }
 }

packages/bruno-app/.env.prod

@@ -1,5 +0,0 @@
-ENV=production
-
-NEXT_PUBLIC_ENV=prod
-
-NEXT_PUBLIC_BRUNO_SERVER_API=https://ada.grafnode.com/api

packages/bruno-app/.env.production

@@ -0,0 +1,3 @@
+ENV=production
+
+NEXT_PUBLIC_ENV=prod

packages/bruno-app/package.json

@@ -17,9 +17,11 @@
     "@fortawesome/react-fontawesome": "^0.1.16",
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",
+    "@tailwindcss/forms": "^0.5.7",
     "@tippyjs/react": "^4.2.6",
+    "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
-    "@usebruno/schema": "0.6.0",
+    "@usebruno/schema": "0.7.0",
     "axios": "^1.5.1",
     "classnames": "^2.3.1",
     "codemirror": "5.65.2",
@@ -34,14 +36,14 @@
     "graphiql": "^1.5.9",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
-    "handlebars": "^4.7.8",
     "httpsnippet": "^3.0.1",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "jsesc": "^3.0.2",
-    "jsonpath-plus": "^7.2.0",
     "jshint": "^2.13.6",
+    "json5": "^2.2.3",
     "jsonlint": "^1.6.3",
+    "jsonpath-plus": "^7.2.0",
     "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
@@ -52,6 +54,7 @@
     "pdfjs-dist": "^3.11.174",
     "platform": "^1.3.6",
     "posthog-node": "^2.1.0",
+    "prettier": "^2.7.1",
     "qs": "^6.11.0",
     "query-string": "^7.0.1",
     "react": "18.2.0",
@@ -69,7 +72,6 @@
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "system": "^2.0.1",
-    "tailwindcss": "^2.2.19",
     "url": "^0.11.3",
     "xml-formatter": "^3.5.0",
     "yargs-parser": "^21.1.1",
@@ -81,6 +83,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/runtime": "^7.16.3",
+    "autoprefixer": "^10.4.17",
     "babel-loader": "^8.2.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
@@ -88,8 +91,9 @@
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.5",
-    "prettier": "^2.7.1",
+    "postcss": "^8.4.35",
     "style-loader": "^3.3.1",
+    "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1"
   }

packages/bruno-app/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

packages/bruno-app/src/components/CodeEditor/index.js

@@ -43,6 +43,7 @@ if (!SERVER_RENDERED) {
     'req.getUrl()',
     'req.setUrl(url)',
     'req.getMethod()',
+    'req.getAuthMode()',
     'req.setMethod(method)',
     'req.getHeader(name)',
     'req.getHeaders()',

packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js

@@ -70,6 +70,15 @@ const AuthMode = ({ collection }) => {
           >
             Digest Auth
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('oauth2');
+            }}
+          >
+            Oauth2
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {

packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js

@@ -11,7 +11,7 @@ const BearerAuth = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  const bearerToken = get(collection, 'root.request.auth.bearer.token');
+  const bearerToken = get(collection, 'root.request.auth.bearer.token', '');
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js

@@ -0,0 +1,117 @@
+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, pkce } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'authorization_code',
+          callbackUrl,
+          authorizationUrl,
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          pkce,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  const handlePKCEToggle = (e) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'authorization_code',
+          callbackUrl,
+          authorizationUrl,
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          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 } = 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}
+              />
+            </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;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/inputsConfig.js

@@ -0,0 +1,28 @@
+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'
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js

@@ -0,0 +1,69 @@
+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 } = 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}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2ClientCredentials;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/inputsConfig.js

@@ -0,0 +1,20 @@
+const inputsConfig = [
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret'
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

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;

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(() => {
+    // initalize 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;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js

@@ -0,0 +1,69 @@
+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, scope } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'password',
+          accessTokenUrl,
+          username,
+          password,
+          scope,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label } = 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}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2AuthorizationCode;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js

@@ -0,0 +1,20 @@
+const inputsConfig = [
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'username',
+    label: 'Username'
+  },
+  {
+    key: 'password',
+    label: 'Password'
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import get from 'lodash/get';
+import StyledWrapper from './StyledWrapper';
+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 collection={collection} />;
+      break;
+    case 'authorization_code':
+      return <OAuth2AuthorizationCode collection={collection} />;
+      break;
+    case 'client_credentials':
+      return <OAuth2ClientCredentials collection={collection} />;
+      break;
+    default:
+      return <div>TBD</div>;
+      break;
+  }
+};
+
+const OAuth2 = ({ collection }) => {
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <GrantTypeSelector collection={collection} />
+      {grantTypeComponentMap(oAuth?.grantType, collection)}
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2;

packages/bruno-app/src/components/CollectionSettings/Auth/index.js

@@ -8,6 +8,7 @@ import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
+import OAuth2 from './OAuth2';
 
 const Auth = ({ collection }) => {
   const authMode = get(collection, 'root.request.auth.mode');
@@ -29,6 +30,9 @@ const Auth = ({ collection }) => {
       case 'digest': {
         return <DigestAuth collection={collection} />;
       }
+      case 'oauth2': {
+        return <OAuth2 collection={collection} />;
+      }
     }
   };
 
@@ -38,7 +42,6 @@ const Auth = ({ collection }) => {
         <AuthMode collection={collection} />
       </div>
       {getAuthView()}
-
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
           Save

packages/bruno-app/src/components/CollectionSettings/Docs/index.js

@@ -11,7 +11,7 @@ import StyledWrapper from './StyledWrapper';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
   const docs = get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
@@ -40,7 +40,7 @@ const Docs = ({ collection }) => {
       {isEditing ? (
         <CodeEditor
           collection={collection}
-          theme={storedTheme}
+          theme={displayedTheme}
           value={docs || ''}
           onEdit={onEdit}
           onSave={onSave}

packages/bruno-app/src/components/CollectionSettings/Info/index.js

@@ -33,6 +33,10 @@ const Info = ({ collection }) => {
             <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>

packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js

@@ -181,7 +181,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
               <input
                 type="radio"
                 name="protocol"
-                value="socks5"
+                value="socks4"
                 checked={formik.values.protocol === 'socks4'}
                 onChange={formik.handleChange}
                 className="mr-1"

packages/bruno-app/src/components/CollectionSettings/Script/index.js

@@ -12,7 +12,7 @@ const Script = ({ collection }) => {
   const requestScript = get(collection, 'root.request.script.req', '');
   const responseScript = get(collection, 'root.request.script.res', '');
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onRequestScriptEdit = (value) => {
@@ -44,7 +44,7 @@ const Script = ({ collection }) => {
         <CodeEditor
           collection={collection}
           value={requestScript || ''}
-          theme={storedTheme}
+          theme={displayedTheme}
           onEdit={onRequestScriptEdit}
           mode="javascript"
           onSave={handleSave}
@@ -56,7 +56,7 @@ const Script = ({ collection }) => {
         <CodeEditor
           collection={collection}
           value={responseScript || ''}
-          theme={storedTheme}
+          theme={displayedTheme}
           onEdit={onResponseScriptEdit}
           mode="javascript"
           onSave={handleSave}

packages/bruno-app/src/components/CollectionSettings/Tests/index.js

@@ -11,7 +11,7 @@ const Tests = ({ collection }) => {
   const dispatch = useDispatch();
   const tests = get(collection, 'root.request.tests', '');
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
@@ -30,7 +30,7 @@ const Tests = ({ collection }) => {
       <CodeEditor
         collection={collection}
         value={tests || ''}
-        theme={storedTheme}
+        theme={displayedTheme}
         onEdit={onEdit}
         mode="javascript"
         onSave={handleSave}

packages/bruno-app/src/components/Documentation/index.js

@@ -11,7 +11,7 @@ import StyledWrapper from './StyledWrapper';
 
 const Documentation = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
   const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
   const preferences = useSelector((state) => state.app.preferences);
@@ -45,7 +45,7 @@ const Documentation = ({ item, collection }) => {
       {isEditing ? (
         <CodeEditor
           collection={collection}
-          theme={storedTheme}
+          theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           value={docs || ''}
           onEdit={onEdit}

packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js

@@ -2,6 +2,7 @@ import React, { useRef, forwardRef, useState } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { updateEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
 import { IconSettings, IconCaretDown, IconDatabase, IconDatabaseOff } from '@tabler/icons';
 import EnvironmentSettings from '../EnvironmentSettings';
 import toast from 'react-hot-toast';
@@ -24,6 +25,16 @@ const EnvironmentSelector = ({ collection }) => {
     );
   });
 
+  const handleSettingsIconClick = () => {
+    setOpenSettingsModal(true);
+    dispatch(updateEnvironmentSettingsModalVisibility(true));
+  };
+
+  const handleModalClose = () => {
+    setOpenSettingsModal(false);
+    dispatch(updateEnvironmentSettingsModalVisibility(false));
+  };
+
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
   const onSelect = (environment) => {
@@ -52,7 +63,7 @@ const EnvironmentSelector = ({ collection }) => {
                     dropdownTippyRef.current.hide();
                   }}
                 >
-                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2">{e.name}</span>
+                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2 break-all">{e.name}</span>
                 </div>
               ))
             : null}
@@ -66,7 +77,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={() => setOpenSettingsModal(true)}>
+          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>
@@ -74,7 +85,7 @@ const EnvironmentSelector = ({ collection }) => {
           </div>
         </Dropdown>
       </div>
-      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={() => setOpenSettingsModal(false)} />}
+      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={handleModalClose} />}
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -11,6 +11,7 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { uuid } from 'utils/common';
 import { variableNameRegex } from 'utils/common/regex';
+import { maskInputValue } from 'utils/collections';
 
 const EnvironmentVariables = ({ environment, collection }) => {
   const dispatch = useDispatch();
@@ -81,71 +82,76 @@ const EnvironmentVariables = ({ environment, collection }) => {
 
   return (
     <StyledWrapper className="w-full mt-6 mb-6">
-      <table>
-        <thead>
-          <tr>
-            <td>Enabled</td>
-            <td>Name</td>
-            <td>Value</td>
-            <td>Secret</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {formik.values.map((variable, index) => (
-            <tr key={variable.uid}>
-              <td className="text-center">
-                <input
-                  type="checkbox"
-                  className="mr-3 mousetrap"
-                  name={`${index}.enabled`}
-                  checked={variable.enabled}
-                  onChange={formik.handleChange}
-                />
-              </td>
-              <td>
-                <input
-                  type="text"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck="false"
-                  className="mousetrap"
-                  id={`${index}.name`}
-                  name={`${index}.name`}
-                  value={variable.name}
-                  onChange={formik.handleChange}
-                />
-                <ErrorMessage name={`${index}.name`} />
-              </td>
-              <td>
-                <SingleLineEditor
-                  theme={storedTheme}
-                  collection={collection}
-                  name={`${index}.value`}
-                  value={variable.value}
-                  onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
-                />
-              </td>
-              <td>
-                <input
-                  type="checkbox"
-                  className="mr-3 mousetrap"
-                  name={`${index}.secret`}
-                  checked={variable.secret}
-                  onChange={formik.handleChange}
-                />
-              </td>
-              <td>
-                <button onClick={() => handleRemoveVar(variable.uid)}>
-                  <IconTrash strokeWidth={1.5} size={20} />
-                </button>
-              </td>
+      <div className="h-[50vh] overflow-y-auto w-full">
+        <table>
+          <thead>
+            <tr>
+              <td>Enabled</td>
+              <td>Name</td>
+              <td>Value</td>
+              <td>Secret</td>
+              <td></td>
             </tr>
-          ))}
-        </tbody>
-      </table>
-
+          </thead>
+          <tbody>
+            {formik.values.map((variable, index) => (
+              <tr key={variable.uid}>
+                <td className="text-center">
+                  <input
+                    type="checkbox"
+                    className="mr-3 mousetrap"
+                    name={`${index}.enabled`}
+                    checked={variable.enabled}
+                    onChange={formik.handleChange}
+                  />
+                </td>
+                <td>
+                  <input
+                    type="text"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    spellCheck="false"
+                    className="mousetrap"
+                    id={`${index}.name`}
+                    name={`${index}.name`}
+                    value={variable.name}
+                    onChange={formik.handleChange}
+                  />
+                  <ErrorMessage name={`${index}.name`} />
+                </td>
+                <td>
+                  {variable.secret ? (
+                    <div>{maskInputValue(variable.value)}</div>
+                  ) : (
+                    <SingleLineEditor
+                      theme={storedTheme}
+                      collection={collection}
+                      name={`${index}.value`}
+                      value={variable.value}
+                      onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                    />
+                  )}
+                </td>
+                <td>
+                  <input
+                    type="checkbox"
+                    className="mr-3 mousetrap"
+                    name={`${index}.secret`}
+                    checked={variable.secret}
+                    onChange={formik.handleChange}
+                  />
+                </td>
+                <td>
+                  <button onClick={() => handleRemoveVar(variable.uid)}>
+                    <IconTrash strokeWidth={1.5} size={20} />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
       <div>
         <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addVariable}>
           + Add Variable

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js

@@ -28,7 +28,7 @@ const EnvironmentDetails = ({ environment, collection }) => {
       <div className="flex">
         <div className="flex flex-grow items-center">
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
-          <span className="ml-1 font-semibold">{environment.name}</span>
+          <span className="ml-1 font-semibold break-all">{environment.name}</span>
         </div>
         <div className="flex gap-x-4 pl-4">
           <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js

@@ -66,7 +66,7 @@ const EnvironmentList = ({ collection }) => {
                   className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
                   onClick={() => setSelectedEnvironment(env)}
                 >
-                  <span>{env.name}</span>
+                  <span className="break-all">{env.name}</span>
                 </div>
               ))}
             <div className="btn-create-environment" onClick={() => setOpenCreateModal(true)}>

packages/bruno-app/src/components/FilePickerEditor/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+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 }) => {
+  value = value || [];
+  const dispatch = useDispatch();
+  const filenames = value
+    .filter((v) => v != null && v != '')
+    .map((v) => {
+      const separator = isWindowsOS() ? '\\' : '/';
+      return v.split(separator).pop();
+    });
+
+  // title is shown when hovering over the button
+  const title = filenames.map((v) => `- ${v}`).join('\n');
+
+  const browse = () => {
+    dispatch(browseFiles())
+      .then((filePaths) => {
+        // If file is in the collection's directory, then we use relative path
+        // Otherwise, we use the absolute path
+        filePaths = filePaths.map((filePath) => {
+          const collectionDir = collection.pathname;
+
+          if (filePath.startsWith(collectionDir)) {
+            return path.relative(slash(collectionDir), slash(filePath));
+          }
+
+          return filePath;
+        });
+
+        onChange(filePaths);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  const clear = () => {
+    onChange('');
+  };
+
+  const renderButtonText = (filenames) => {
+    if (filenames.length == 1) {
+      return filenames[0];
+    }
+    return filenames.length + ' files selected';
+  };
+
+  return filenames.length > 0 ? (
+    <div
+      className="btn btn-secondary px-1"
+      style={{ fontWeight: 400, width: '100%', textOverflow: 'ellipsis', overflowX: 'hidden' }}
+      title={title}
+    >
+      <button className="align-middle" onClick={clear}>
+        <IconX size={18} />
+      </button>
+      &nbsp;
+      {renderButtonText(filenames)}
+    </div>
+  ) : (
+    <button className="btn btn-secondary px-1" style={{ width: '100%' }} onClick={browse}>
+      Select Files
+    </button>
+  );
+};
+
+export default FilePickerEditor;

packages/bruno-app/src/components/Modal/index.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import StyledWrapper from './StyledWrapper';
 
-const ModalHeader = ({ title, handleCancel }) => (
+const ModalHeader = ({ title, handleCancel, customHeader }) => (
   <div className="bruno-modal-header">
-    {title ? <div className="bruno-modal-header-title">{title}</div> : null}
+    {customHeader ? customHeader : <>{title ? <div className="bruno-modal-header-title">{title}</div> : null}</>}
     {handleCancel ? (
       <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null}>
         ×
@@ -54,6 +54,7 @@ const ModalFooter = ({
 const Modal = ({
   size,
   title,
+  customHeader,
   confirmText,
   cancelText,
   handleCancel,
@@ -99,7 +100,7 @@ const Modal = ({
   return (
     <StyledWrapper className={classes} onClick={onClick ? (e) => onClick(e) : null}>
       <div className={`bruno-modal-card modal-${size}`}>
-        <ModalHeader title={title} handleCancel={() => closeModal({ type: 'icon' })} />
+        <ModalHeader title={title} handleCancel={() => closeModal({ type: 'icon' })} customHeader={customHeader} />
         <ModalContent>{children}</ModalContent>
         <ModalFooter
           confirmText={confirmText}

packages/bruno-app/src/components/Notifications/StyleWrapper.js

@@ -0,0 +1,85 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .notifications-modal {
+    margin-inline: -1rem;
+    margin-block: -1.5rem;
+    background-color: ${(props) => props.theme.notifications.bg};
+  }
+
+  .notification-count {
+    display: flex;
+    color: white;
+    position: absolute;
+    top: -0.625rem;
+    right: -0.5rem;
+    margin-right: 0.5rem;
+    justify-content: center;
+    font-size: 0.625rem;
+    border-radius: 50%;
+    background-color: ${(props) => props.theme.colors.text.yellow};
+    border: solid 2px ${(props) => props.theme.sidebar.bg};
+    min-width: 1.25rem;
+  }
+
+  button.mark-as-read {
+    font-weight: 400 !important;
+  }
+
+  ul.notifications {
+    background-color: ${(props) => props.theme.notifications.list.bg};
+    border-right: solid 1px ${(props) => props.theme.notifications.list.borderRight};
+    min-height: 400px;
+    height: 100%;
+    max-height: 85vh;
+    overflow-y: auto;
+
+    li {
+      min-width: 150px;
+      cursor: pointer;
+      padding: 0.5rem 0.625rem;
+      border-left: solid 2px transparent;
+      color: ${(props) => props.theme.textLink};
+      border-bottom: solid 1px ${(props) => props.theme.notifications.list.borderBottom};
+      &:hover {
+        background-color: ${(props) => props.theme.notifications.list.hoverBg};
+      }
+
+      &.active {
+        color: ${(props) => props.theme.text} !important;
+        background-color: ${(props) => props.theme.notifications.list.active.bg} !important;
+        border-left: solid 2px ${(props) => props.theme.notifications.list.active.border};
+        &:hover {
+          background-color: ${(props) => props.theme.notifications.list.active.hoverBg} !important;
+        }
+      }
+
+      &.read {
+        color: ${(props) => props.theme.text} !important;
+      }
+
+      .notification-date {
+        font-size: 0.6875rem;
+      }
+    }
+  }
+
+  .notification-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .notification-date {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .pagination {
+    background-color: ${(props) => props.theme.notifications.list.bg};
+    border-right: solid 1px ${(props) => props.theme.notifications.list.borderRight};
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Notifications/index.js

@@ -0,0 +1,192 @@
+import { IconBell } from '@tabler/icons';
+import { useState } from 'react';
+import StyledWrapper from './StyleWrapper';
+import Modal from 'components/Modal/index';
+import { useEffect } from 'react';
+import {
+  fetchNotifications,
+  markAllNotificationsAsRead,
+  markNotificationAsRead
+} from 'providers/ReduxStore/slices/notifications';
+import { useDispatch, useSelector } from 'react-redux';
+import { humanizeDate, relativeDate } from 'utils/common';
+
+const PAGE_SIZE = 5;
+
+const Notifications = () => {
+  const dispatch = useDispatch();
+  const notifications = useSelector((state) => state.notifications.notifications);
+
+  const [showNotificationsModal, setShowNotificationsModal] = useState(false);
+  const [selectedNotification, setSelectedNotification] = useState(null);
+  const [pageNumber, setPageNumber] = useState(1);
+
+  const notificationsStartIndex = (pageNumber - 1) * PAGE_SIZE;
+  const notificationsEndIndex = pageNumber * PAGE_SIZE;
+  const totalPages = Math.ceil(notifications.length / PAGE_SIZE);
+  const unreadNotifications = notifications.filter((notification) => !notification.read);
+
+  useEffect(() => {
+    dispatch(fetchNotifications());
+  }, []);
+
+  useEffect(() => {
+    reset();
+  }, [showNotificationsModal]);
+
+  useEffect(() => {
+    if (!selectedNotification && notifications?.length > 0 && showNotificationsModal) {
+      let firstNotification = notifications[0];
+      setSelectedNotification(firstNotification);
+      dispatch(markNotificationAsRead({ notificationId: firstNotification?.id }));
+    }
+  }, [notifications, selectedNotification, showNotificationsModal]);
+
+  const reset = () => {
+    setSelectedNotification(null);
+    setPageNumber(1);
+  };
+
+  const handlePrev = (e) => {
+    if (pageNumber - 1 < 1) return;
+    setPageNumber(pageNumber - 1);
+  };
+
+  const handleNext = (e) => {
+    if (pageNumber + 1 > totalPages) return;
+    setPageNumber(pageNumber + 1);
+  };
+
+  const handleNotificationItemClick = (notification) => (e) => {
+    e.preventDefault();
+    setSelectedNotification(notification);
+    dispatch(markNotificationAsRead({ notificationId: notification?.id }));
+  };
+
+  const modalCustomHeader = (
+    <div className="flex flex-row gap-8">
+      <div>NOTIFICATIONS</div>
+      {unreadNotifications.length > 0 && (
+        <>
+          <div className="normal-case font-normal">
+            {unreadNotifications.length} <span>unread notifications</span>
+          </div>
+          <button
+            className={`select-none ${1 == 2 ? 'opacity-50' : 'text-link mark-as-read cursor-pointer hover:underline'}`}
+            onClick={() => dispatch(markAllNotificationsAsRead())}
+          >
+            {'Mark all as read'}
+          </button>
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <StyledWrapper>
+      <a
+        title="Notifications"
+        className="relative cursor-pointer"
+        onClick={() => {
+          dispatch(fetchNotifications());
+          setShowNotificationsModal(true);
+        }}
+      >
+        <IconBell
+          size={18}
+          strokeWidth={1.5}
+          className={`mr-2 hover:text-gray-700 ${unreadNotifications?.length > 0 ? 'bell' : ''}`}
+        />
+        {unreadNotifications.length > 0 && (
+          <span className="notification-count text-xs">{unreadNotifications.length}</span>
+        )}
+      </a>
+
+      {showNotificationsModal && (
+        <Modal
+          size="lg"
+          title="Notifications"
+          confirmText={'Close'}
+          handleConfirm={() => {
+            setShowNotificationsModal(false);
+          }}
+          handleCancel={() => {
+            setShowNotificationsModal(false);
+          }}
+          hideFooter={true}
+          customHeader={modalCustomHeader}
+          disableCloseOnOutsideClick={true}
+          disableEscapeKey={true}
+        >
+          <div className="notifications-modal">
+            {notifications?.length > 0 ? (
+              <div className="grid grid-cols-4 flex flex-row text-sm">
+                <div className="col-span-1 flex flex-col">
+                  <ul
+                    className="notifications w-full flex flex-col h-[50vh] max-h-[50vh] overflow-y-auto"
+                    style={{ maxHeight: '50vh', height: '46vh' }}
+                  >
+                    {notifications?.slice(notificationsStartIndex, notificationsEndIndex)?.map((notification) => (
+                      <li
+                        key={notification.id}
+                        className={`p-4 flex flex-col justify-center ${
+                          selectedNotification?.id == notification.id ? 'active' : notification.read ? 'read' : ''
+                        }`}
+                        onClick={handleNotificationItemClick(notification)}
+                      >
+                        <div className="notification-title w-full">{notification?.title}</div>
+                        <div className="notification-date text-xs py-2">{relativeDate(notification?.date)}</div>
+                      </li>
+                    ))}
+                  </ul>
+                  <div className="w-full pagination flex flex-row gap-4 justify-center p-2 items-center text-xs">
+                    <button
+                      className={`pl-2 pr-2 py-3 select-none ${
+                        pageNumber <= 1 ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
+                      }`}
+                      onClick={handlePrev}
+                    >
+                      {'Prev'}
+                    </button>
+                    <div className="flex flex-row items-center justify-center gap-1">
+                      Page
+                      <div className="w-[20px] flex justify-center" style={{ width: '20px' }}>
+                        {pageNumber}
+                      </div>
+                      of
+                      <div className="w-[20px] flex justify-center" style={{ width: '20px' }}>
+                        {totalPages}
+                      </div>
+                    </div>
+                    <button
+                      className={`pl-2 pr-2 py-3 select-none ${
+                        pageNumber == totalPages ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
+                      }`}
+                      onClick={handleNext}
+                    >
+                      {'Next'}
+                    </button>
+                  </div>
+                </div>
+                <div className="flex w-full col-span-3 p-4 flex-col">
+                  <div className="w-full text-lg flex flex-wrap h-fit mb-1">{selectedNotification?.title}</div>
+                  <div className="w-full notification-date text-xs mb-4">
+                    {humanizeDate(selectedNotification?.date)}
+                  </div>
+                  <div
+                    className="flex w-full flex-col flex-wrap h-fit"
+                    dangerouslySetInnerHTML={{ __html: selectedNotification?.description }}
+                  ></div>
+                </div>
+              </div>
+            ) : (
+              <div className="opacity-50 italic text-xs p-12 flex justify-center">No Notifications</div>
+            )}
+          </div>
+        </Modal>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default Notifications;

packages/bruno-app/src/components/Preferences/General/index.js

@@ -21,6 +21,9 @@ const General = ({ close }) => {
       enabled: Yup.boolean(),
       filePath: Yup.string().nullable()
     }),
+    keepDefaultCaCertificates: Yup.object({
+      enabled: Yup.boolean()
+    }),
     storeCookies: Yup.boolean(),
     sendCookies: Yup.boolean(),
     timeout: Yup.mixed()
@@ -43,6 +46,9 @@ const General = ({ close }) => {
         enabled: get(preferences, 'request.customCaCertificate.enabled', false),
         filePath: get(preferences, 'request.customCaCertificate.filePath', null)
       },
+      keepDefaultCaCertificates: {
+        enabled: get(preferences, 'request.keepDefaultCaCertificates.enabled', false)
+      },
       timeout: preferences.request.timeout,
       storeCookies: get(preferences, 'request.storeCookies', true),
       sendCookies: get(preferences, 'request.sendCookies', true)
@@ -68,6 +74,9 @@ const General = ({ close }) => {
             enabled: newPreferences.customCaCertificate.enabled,
             filePath: newPreferences.customCaCertificate.filePath
           },
+          keepDefaultCaCertificates: {
+            enabled: newPreferences.keepDefaultCaCertificates.enabled
+          },
           timeout: newPreferences.timeout,
           storeCookies: newPreferences.storeCookies,
           sendCookies: newPreferences.sendCookies
@@ -158,6 +167,23 @@ const General = ({ close }) => {
             </button>
           </div>
         )}
+        <div className="flex items-center mt-2">
+          <input
+            id="keepDefaultCaCertificatesEnabled"
+            type="checkbox"
+            name="keepDefaultCaCertificates.enabled"
+            checked={formik.values.keepDefaultCaCertificates.enabled}
+            onChange={formik.handleChange}
+            className={`mousetrap mr-0 ${formik.values.customCaCertificate.enabled ? '' : 'opacity-25'}`}
+            disabled={formik.values.customCaCertificate.enabled ? false : true}
+          />
+          <label
+            className={`block ml-2 select-none ${formik.values.customCaCertificate.enabled ? '' : 'opacity-25'}`}
+            htmlFor="keepDefaultCaCertificatesEnabled"
+          >
+            Keep default CA Certificates
+          </label>
+        </div>
         <div className="flex items-center mt-2">
           <input
             id="storeCookies"

packages/bruno-app/src/components/Preferences/ProxySettings/index.js

@@ -144,7 +144,7 @@ const ProxySettings = ({ close }) => {
               <input
                 type="radio"
                 name="protocol"
-                value="socks5"
+                value="socks4"
                 checked={formik.values.protocol === 'socks4'}
                 onChange={formik.handleChange}
                 className="mr-1"

packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js

@@ -4,7 +4,6 @@ const Wrapper = styled.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    font-weight: 600;
     table-layout: fixed;
 
     thead,
@@ -16,6 +15,7 @@ const Wrapper = styled.div`
       color: ${(props) => props.theme.table.thead.color};
       font-size: 0.8125rem;
       user-select: none;
+      font-weight: 600;
     }
     td {
       padding: 6px 10px;

packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js

@@ -38,7 +38,7 @@ const AuthMode = ({ item, collection }) => {
           <div
             className="dropdown-item"
             onClick={() => {
-              dropdownTippyRef.current.hide();
+              dropdownTippyRef?.current?.hide();
               onModeChange('awsv4');
             }}
           >
@@ -47,7 +47,7 @@ const AuthMode = ({ item, collection }) => {
           <div
             className="dropdown-item"
             onClick={() => {
-              dropdownTippyRef.current.hide();
+              dropdownTippyRef?.current?.hide();
               onModeChange('basic');
             }}
           >
@@ -56,7 +56,7 @@ const AuthMode = ({ item, collection }) => {
           <div
             className="dropdown-item"
             onClick={() => {
-              dropdownTippyRef.current.hide();
+              dropdownTippyRef?.current?.hide();
               onModeChange('bearer');
             }}
           >
@@ -65,7 +65,7 @@ const AuthMode = ({ item, collection }) => {
           <div
             className="dropdown-item"
             onClick={() => {
-              dropdownTippyRef.current.hide();
+              dropdownTippyRef?.current?.hide();
               onModeChange('digest');
             }}
           >
@@ -74,7 +74,25 @@ const AuthMode = ({ item, collection }) => {
           <div
             className="dropdown-item"
             onClick={() => {
-              dropdownTippyRef.current.hide();
+              dropdownTippyRef?.current?.hide();
+              onModeChange('oauth2');
+            }}
+          >
+            OAuth 2.0
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('inherit');
+            }}
+          >
+            Inherit
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
               onModeChange('none');
             }}
           >

packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   }
 
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   }
 
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   }
 
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js

@@ -12,8 +12,8 @@ const BearerAuth = ({ item, collection }) => {
   const { storedTheme } = useTheme();
 
   const bearerToken = item.draft
-    ? get(item, 'draft.request.auth.bearer.token')
-    : get(item, 'request.auth.bearer.token');
+    ? get(item, 'draft.request.auth.bearer.token', '')
+    : get(item, 'request.auth.bearer.token', '');
 
   const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));

packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.js

@@ -6,6 +6,7 @@ const Wrapper = styled.div`
   }
 
   .single-line-editor-wrapper {
+    max-width: 400px;
     padding: 0.15rem 0.4rem;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js

@@ -0,0 +1,119 @@
+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 { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import { clearOauth2Cache } from 'utils/network/index';
+import toast from 'react-hot-toast';
+
+const OAuth2AuthorizationCode = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendRequest(item, collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const { callbackUrl, authorizationUrl, accessTokenUrl, clientId, clientSecret, scope, pkce } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          grantType: 'authorization_code',
+          callbackUrl,
+          authorizationUrl,
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          pkce,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  const handlePKCEToggle = (e) => {
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          grantType: 'authorization_code',
+          callbackUrl,
+          authorizationUrl,
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          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 } = 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}
+              />
+            </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;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/inputsConfig.js

@@ -0,0 +1,28 @@
+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'
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/RequestPane/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 { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+
+const OAuth2ClientCredentials = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendRequest(item, collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const { accessTokenUrl, clientId, clientSecret, scope } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.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 } = 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}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2ClientCredentials;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/inputsConfig.js

@@ -0,0 +1,20 @@
+const inputsConfig = [
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret'
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

packages/bruno-app/src/components/RequestPane/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;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js

@@ -0,0 +1,92 @@
+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';
+
+const GrantTypeSelector = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, '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(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          grantType
+        }
+      })
+    );
+  };
+
+  useEffect(() => {
+    // initalize redux state with a default oauth2 grant type
+    // authorization_code - default option
+    !oAuth?.grantType &&
+      dispatch(
+        updateAuth({
+          mode: 'oauth2',
+          collectionUid: collection.uid,
+          itemUid: item.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;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/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 { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+
+const OAuth2AuthorizationCode = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendRequest(item, collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const { accessTokenUrl, username, password, scope } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          grantType: 'password',
+          accessTokenUrl,
+          username,
+          password,
+          scope,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label } = 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}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2AuthorizationCode;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/inputsConfig.js

@@ -0,0 +1,20 @@
+const inputsConfig = [
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'username',
+    label: 'Username'
+  },
+  {
+    key: 'password',
+    label: 'Password'
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import get from 'lodash/get';
+import StyledWrapper from './StyledWrapper';
+import GrantTypeSelector from './GrantTypeSelector/index';
+import OAuth2PasswordCredentials from './PasswordCredentials/index';
+import OAuth2AuthorizationCode from './AuthorizationCode/index';
+import OAuth2ClientCredentials from './ClientCredentials/index';
+
+const grantTypeComponentMap = (grantType, item, collection) => {
+  switch (grantType) {
+    case 'password':
+      return <OAuth2PasswordCredentials item={item} collection={collection} />;
+      break;
+    case 'authorization_code':
+      return <OAuth2AuthorizationCode item={item} collection={collection} />;
+      break;
+    case 'client_credentials':
+      return <OAuth2ClientCredentials item={item} collection={collection} />;
+      break;
+    default:
+      return <div>TBD</div>;
+      break;
+  }
+};
+
+const OAuth2 = ({ item, collection }) => {
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <GrantTypeSelector item={item} collection={collection} />
+      {grantTypeComponentMap(oAuth?.grantType, item, collection)}
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2;

packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js

@@ -1,5 +1,11 @@
 import styled from 'styled-components';
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  .inherit-mode-text {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+  .inherit-mode-label {
+  }
+`;
 
 export default Wrapper;

packages/bruno-app/src/components/RequestPane/Auth/index.js

@@ -6,10 +6,15 @@ import BearerAuth from './BearerAuth';
 import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import StyledWrapper from './StyledWrapper';
+import { humanizeRequestAuthMode } from 'utils/collections/index';
+import OAuth2 from './OAuth2/index';
 
 const Auth = ({ item, collection }) => {
   const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
 
+  const collectionRoot = get(collection, 'root', {});
+  const collectionAuth = get(collectionRoot, 'request.auth');
+
   const getAuthView = () => {
     switch (authMode) {
       case 'awsv4': {
@@ -24,6 +29,29 @@ const Auth = ({ item, collection }) => {
       case 'digest': {
         return <DigestAuth collection={collection} item={item} />;
       }
+      case 'oauth2': {
+        return <OAuth2 collection={collection} item={item} />;
+      }
+      case 'inherit': {
+        return (
+          <div className="flex flex-row w-full mt-2 gap-2">
+            {collectionAuth?.mode === 'oauth2' ? (
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-row gap-1">
+                  <div>Collection level auth is: </div>
+                  <div className="inherit-mode-text">{humanizeRequestAuthMode(collectionAuth?.mode)}</div>
+                </div>
+                <div className="text-sm opacity-50">Cannot inherit Oauth2 from collection.</div>
+              </div>
+            ) : (
+              <>
+                <div>Auth inherited from the Collection: </div>
+                <div className="inherit-mode-text">{humanizeRequestAuthMode(collectionAuth?.mode)}</div>
+              </>
+            )}
+          </div>
+        );
+      }
     }
   };
 
@@ -36,4 +64,5 @@ const Auth = ({ item, collection }) => {
     </StyledWrapper>
   );
 };
+
 export default Auth;

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js

@@ -27,7 +27,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
   const variables = item.draft
     ? get(item, 'draft.request.body.graphql.variables')
     : get(item, 'request.body.graphql.variables');
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const [schema, setSchema] = useState(null);
 
   useEffect(() => {
@@ -61,7 +61,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         return (
           <QueryEditor
             collection={collection}
-            theme={storedTheme}
+            theme={displayedTheme}
             schema={schema}
             width={leftPaneWidth}
             onSave={onSave}

packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js

@@ -10,7 +10,7 @@ import StyledWrapper from './StyledWrapper';
 const GraphQLVariables = ({ variables, item, collection }) => {
   const dispatch = useDispatch();
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
@@ -31,7 +31,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
       <CodeEditor
         collection={collection}
         value={variables || ''}
-        theme={storedTheme}
+        theme={displayedTheme}
         font={get(preferences, 'font.codeFont', 'default')}
         onEdit={onEdit}
         mode="javascript"

packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js

@@ -12,6 +12,7 @@ import {
 import SingleLineEditor from 'components/SingleLineEditor';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
+import FilePickerEditor from 'components/FilePickerEditor';
 
 const MultipartFormParams = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -22,7 +23,18 @@ const MultipartFormParams = ({ item, collection }) => {
     dispatch(
       addMultipartFormParam({
         itemUid: item.uid,
-        collectionUid: collection.uid
+        collectionUid: collection.uid,
+        type: 'text'
+      })
+    );
+  };
+
+  const addFile = () => {
+    dispatch(
+      addMultipartFormParam({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        type: 'file'
       })
     );
   };
@@ -92,24 +104,42 @@ const MultipartFormParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor
-                        onSave={onSave}
-                        theme={storedTheme}
-                        value={param.value}
-                        onChange={(newValue) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            param,
-                            'value'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
-                      />
+                      {param.type === 'file' ? (
+                        <FilePickerEditor
+                          value={param.value}
+                          onChange={(newValue) =>
+                            handleParamChange(
+                              {
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value'
+                            )
+                          }
+                          collection={collection}
+                        />
+                      ) : (
+                        <SingleLineEditor
+                          onSave={onSave}
+                          theme={storedTheme}
+                          value={param.value}
+                          onChange={(newValue) =>
+                            handleParamChange(
+                              {
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value'
+                            )
+                          }
+                          onRun={handleRun}
+                          collection={collection}
+                        />
+                      )}
                     </td>
                     <td>
                       <div className="flex items-center">
@@ -131,9 +161,16 @@ const MultipartFormParams = ({ item, collection }) => {
             : null}
         </tbody>
       </table>
-      <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addParam}>
-        + Add Param
-      </button>
+      <div>
+        <button className="btn-add-param text-link pr-2 pt-3 mt-2 select-none" onClick={addParam}>
+          + Add Param
+        </button>
+      </div>
+      <div>
+        <button className="btn-add-param text-link pr-2 pt-3 select-none" onClick={addFile}>
+          + Add File
+        </button>
+      </div>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/RequestPane/QueryEditor/index.js

@@ -8,9 +8,13 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
 import MD from 'markdown-it';
+import { format } from 'prettier/standalone';
+import prettierPluginGraphql from 'prettier/parser-graphql';
 import { getAllVariables } from 'utils/collections';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
+import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
+import { IconWand } from '@tabler/icons';
 
 import onHasCompletion from './onHasCompletion';
 
@@ -178,6 +182,20 @@ export default class QueryEditor extends React.Component {
     }
   }
 
+  beautifyRequestBody = () => {
+    try {
+      const prettyQuery = format(this.props.value, {
+        parser: 'graphql',
+        plugins: [prettierPluginGraphql]
+      });
+
+      this.editor.setValue(prettyQuery);
+      toast.success('Query prettified');
+    } catch (e) {
+      toast.error('Error occurred while prettifying GraphQL query');
+    }
+  };
+
   // Todo: Overlay is messing up with schema hint
   // Fix this
   addOverlay = () => {
@@ -189,13 +207,23 @@ export default class QueryEditor extends React.Component {
 
   render() {
     return (
-      <StyledWrapper
-        className="h-full w-full"
-        aria-label="Query Editor"
-        ref={(node) => {
-          this._node = node;
-        }}
-      />
+      <>
+        <StyledWrapper
+          className="h-full w-full relative"
+          aria-label="Query Editor"
+          ref={(node) => {
+            this._node = node;
+          }}
+        >
+          <button
+            className="btn-add-param text-link px-4 py-4 select-none absolute top-0 right-0 z-10"
+            onClick={this.beautifyRequestBody}
+            title="prettify"
+          >
+            <IconWand size={20} strokeWidth={1.5} />
+          </button>
+        </StyledWrapper>
+      </>
     );
   }
 

packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js

@@ -8,6 +8,7 @@ import { humanizeRequestBodyMode } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections/index';
 import { toastError } from 'utils/common/error';
+import jsonBigint from 'json-bigint';
 
 const RequestBodyMode = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -37,8 +38,8 @@ const RequestBodyMode = ({ item, collection }) => {
   const onPrettify = () => {
     if (body?.json && bodyMode === 'json') {
       try {
-        const bodyJson = JSON.parse(body.json);
-        const prettyBodyJson = JSON.stringify(bodyJson, null, 2);
+        const bodyJson = jsonBigint.parse(body.json);
+        const prettyBodyJson = jsonBigint.stringify(bodyJson, null, 2);
         dispatch(
           updateRequestBody({
             content: prettyBodyJson,

packages/bruno-app/src/components/RequestPane/RequestBody/index.js

@@ -13,7 +13,7 @@ const RequestBody = ({ item, collection }) => {
   const dispatch = useDispatch();
   const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
   const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
@@ -48,7 +48,7 @@ const RequestBody = ({ item, collection }) => {
       <StyledWrapper className="w-full">
         <CodeEditor
           collection={collection}
-          theme={storedTheme}
+          theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           value={bodyContent[bodyMode] || ''}
           onEdit={onEdit}

packages/bruno-app/src/components/RequestPane/Script/index.js

@@ -12,7 +12,7 @@ const Script = ({ item, collection }) => {
   const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onRequestScriptEdit = (value) => {
@@ -45,7 +45,7 @@ const Script = ({ item, collection }) => {
         <CodeEditor
           collection={collection}
           value={requestScript || ''}
-          theme={storedTheme}
+          theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           onEdit={onRequestScriptEdit}
           mode="javascript"
@@ -58,7 +58,7 @@ const Script = ({ item, collection }) => {
         <CodeEditor
           collection={collection}
           value={responseScript || ''}
-          theme={storedTheme}
+          theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           onEdit={onResponseScriptEdit}
           mode="javascript"

packages/bruno-app/src/components/RequestPane/Tests/index.js

@@ -11,7 +11,7 @@ const Tests = ({ item, collection }) => {
   const dispatch = useDispatch();
   const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
@@ -32,7 +32,7 @@ const Tests = ({ item, collection }) => {
       <CodeEditor
         collection={collection}
         value={tests || ''}
-        theme={storedTheme}
+        theme={displayedTheme}
         font={get(preferences, 'font.codeFont', 'default')}
         onEdit={onEdit}
         mode="javascript"

packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js

@@ -12,6 +12,7 @@ const ConfirmRequestClose = ({ item, onCancel, onCloseWithoutSave, onSaveAndClos
       disableEscapeKey={true}
       disableCloseOnOutsideClick={true}
       closeModalFadeTimeout={150}
+      handleCancel={onCancel}
       onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();

packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

@@ -28,6 +28,19 @@ const RequestTab = ({ tab, collection }) => {
     );
   };
 
+  const handleMouseUp = (e) => {
+    if (e.button === 1) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      dispatch(
+        closeTabs({
+          tabUids: [tab.uid]
+        })
+      );
+    }
+  };
+
   const getMethodColor = (method = '') => {
     const theme = storedTheme === 'dark' ? darkTheme : lightTheme;
 
@@ -124,7 +137,18 @@ const RequestTab = ({ tab, collection }) => {
           }}
         />
       )}
-      <div className="flex items-baseline tab-label pl-2">
+      <div
+        className="flex items-baseline tab-label pl-2"
+        onMouseUp={(e) => {
+          if (!item.draft) return handleMouseUp(e);
+
+          if (e.button === 1) {
+            e.stopPropagation();
+            e.preventDefault();
+            setShowConfirmClose(true);
+          }
+        }}
+      >
         <span className="tab-method uppercase" style={{ color: getMethodColor(method), fontSize: 12 }}>
           {method}
         </span>

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js

@@ -1,8 +1,24 @@
-import { IconFilter } from '@tabler/icons';
+import { IconFilter, IconX } from '@tabler/icons';
 import React, { useMemo } from 'react';
+import { useRef } from 'react';
+import { useState } from 'react';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 
-const QueryResultFilter = ({ onChange, mode }) => {
+const QueryResultFilter = ({ filter, onChange, mode }) => {
+  const inputRef = useRef(null);
+  const [isExpanded, toggleExpand] = useState(false);
+
+  const handleFilterClick = () => {
+    // Toggle filter search bar
+    toggleExpand(!isExpanded);
+    // Reset filter search input
+    onChange({ target: { value: '' } });
+    // Reset input value
+    if (inputRef?.current) {
+      inputRef.current.value = '';
+    }
+  };
+
   const tooltipText = useMemo(() => {
     if (mode.includes('json')) {
       return 'Filter with JSONPath';
@@ -15,27 +31,43 @@ const QueryResultFilter = ({ onChange, mode }) => {
     return null;
   }, [mode]);
 
+  const placeholderText = useMemo(() => {
+    if (mode.includes('json')) {
+      return '$.store.books..author';
+    }
+
+    if (mode.includes('xml')) {
+      return '/store/books//author';
+    }
+
+    return null;
+  }, [mode]);
+
   return (
-    <div className={'response-filter relative'}>
-      <div className="absolute inset-y-0 left-0 pl-4 flex items-center">
-        <div className="text-gray-500 sm:text-sm" id="request-filter-icon">
-          <IconFilter size={16} strokeWidth={1.5} />
-        </div>
-      </div>
-
-      {tooltipText && <ReactTooltip anchorId={'request-filter-icon'} html={tooltipText} />}
-
+    <div
+      className={
+        'response-filter absolute bottom-2 w-full justify-end right-0 flex flex-row items-center gap-2 py-4 px-2'
+      }
+    >
+      {tooltipText && !isExpanded && <ReactTooltip anchorId={'request-filter-icon'} html={tooltipText} />}
       <input
+        ref={inputRef}
         type="text"
         name="response-filter"
         id="response-filter"
+        placeholder={placeholderText}
         autoComplete="off"
         autoCorrect="off"
         autoCapitalize="off"
         spellCheck="false"
-        className="block w-full pl-10 py-1 sm:text-sm"
+        className={`block ml-14 p-2 py-1 sm:text-sm transition-all duration-200 ease-in-out border border-gray-300 rounded-md ${
+          isExpanded ? 'w-full opacity-100' : 'w-[0] opacity-0'
+        }`}
         onChange={onChange}
       />
+      <div className="text-gray-500 sm:text-sm cursor-pointer" id="request-filter-icon" onClick={handleFilterClick}>
+        {isExpanded ? <IconX size={20} strokeWidth={1.5} /> : <IconFilter size={20} strokeWidth={1.5} />}
+      </div>
     </div>
   );
 };

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js

@@ -19,7 +19,7 @@ const QueryResultPreview = ({
   collection,
   mode,
   disableRunEventListener,
-  storedTheme
+  displayedTheme
 }) => {
   const preferences = useSelector((state) => state.app.preferences);
   const dispatch = useDispatch();
@@ -65,13 +65,23 @@ const QueryResultPreview = ({
         </div>
       );
     }
+    case 'preview-audio': {
+      return (
+        <audio controls src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />
+      );
+    }
+    case 'preview-video': {
+      return (
+        <video controls src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />
+      );
+    }
     default:
     case 'raw': {
       return (
         <CodeEditor
           collection={collection}
           font={get(preferences, 'font.codeFont', 'default')}
-          theme={storedTheme}
+          theme={displayedTheme}
           onRun={onRun}
           value={formattedData}
           mode={mode}

packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: ${(props) => (props.queryFilterEnabled ? '1.25rem 1fr 2.25rem' : '1.25rem 1fr')};
+  grid-template-rows: 1.25rem 1fr;
 
   /* This is a hack to force Codemirror to use all available space */
   > div {

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -51,7 +51,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
   const mode = getCodeMirrorModeBasedOnContentType(contentType, data);
   const [filter, setFilter] = useState(null);
   const formattedData = formatResponse(data, mode, filter);
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
 
   const debouncedResultFilterOnChange = debounce((e) => {
     setFilter(e.target.value);
@@ -67,6 +67,10 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
       allowedPreviewModes.unshift('preview-image');
     } else if (contentType.includes('pdf')) {
       allowedPreviewModes.unshift('preview-pdf');
+    } else if (contentType.includes('audio')) {
+      allowedPreviewModes.unshift('preview-audio');
+    } else if (contentType.includes('video')) {
+      allowedPreviewModes.unshift('preview-video');
     }
 
     return allowedPreviewModes;
@@ -132,9 +136,11 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
             collection={collection}
             allowedPreviewModes={allowedPreviewModes}
             disableRunEventListener={disableRunEventListener}
-            storedTheme={storedTheme}
+            displayedTheme={displayedTheme}
           />
-          {queryFilterEnabled && <QueryResultFilter onChange={debouncedResultFilterOnChange} mode={mode} />}
+          {queryFilterEnabled && (
+            <QueryResultFilter filter={filter} onChange={debouncedResultFilterOnChange} mode={mode} />
+          )}
         </>
       )}
     </StyledWrapper>

packages/bruno-app/src/components/ResponsePane/ResponseHeaders/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import StyledWrapper from './StyledWrapper';
 
 const ResponseHeaders = ({ headers }) => {
+  const headersArray = typeof headers === 'object' ? Object.entries(headers) : [];
+
   return (
     <StyledWrapper className="pb-4 w-full">
       <table>
@@ -12,8 +14,8 @@ const ResponseHeaders = ({ headers }) => {
           </tr>
         </thead>
         <tbody>
-          {headers && headers.length
-            ? headers.map((header, index) => {
+          {headersArray && headersArray.length
+            ? headersArray.map((header, index) => {
                 return (
                   <tr key={index}>
                     <td className="key">{header[0]}</td>

packages/bruno-app/src/components/ResponsePane/Timeline/index.js

@@ -5,7 +5,7 @@ import StyledWrapper from './StyledWrapper';
 
 const Timeline = ({ request, response }) => {
   const requestHeaders = [];
-  const responseHeaders = response.headers || [];
+  const responseHeaders = typeof response.headers === 'object' ? Object.entries(response.headers) : [];
 
   request = request || {};
   response = response || {};

packages/bruno-app/src/components/RunnerResults/index.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import path from 'path';
 import { useDispatch } from 'react-redux';
 import { get, cloneDeep } from 'lodash';
-import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/actions';
+import { runCollectionFolder, cancelRunnerExecution } from 'providers/ReduxStore/slices/collections/actions';
 import { resetCollectionRunner } from 'providers/ReduxStore/slices/collections';
 import { findItemInCollection, getTotalRequestCountInCollection } from 'utils/collections';
 import { IconRefresh, IconCircleCheck, IconCircleX, IconCheck, IconX, IconRun } from '@tabler/icons';
@@ -24,14 +24,26 @@ export default function RunnerResults({ collection }) {
   const dispatch = useDispatch();
   const [selectedItem, setSelectedItem] = useState(null);
 
+  // ref for the runner output body
+  const runnerBodyRef = useRef();
+
+  const autoScrollRunnerBody = () => {
+    if (runnerBodyRef?.current) {
+      // mimicks the native terminal scroll style
+      runnerBodyRef.current.scrollTo(0, 100000);
+    }
+  };
+
   useEffect(() => {
     if (!collection.runnerResult) {
       setSelectedItem(null);
     }
+    autoScrollRunnerBody();
   }, [collection, setSelectedItem]);
 
   const collectionCopy = cloneDeep(collection);
   const runnerInfo = get(collection, 'runnerResult.info', {});
+
   const items = cloneDeep(get(collection, 'runnerResult.items', []))
     .map((item) => {
       const info = findItemInCollection(collectionCopy, item.uid);
@@ -81,6 +93,10 @@ export default function RunnerResults({ collection }) {
     );
   };
 
+  const cancelExecution = () => {
+    dispatch(cancelRunnerExecution(runnerInfo.cancelTokenUid));
+  };
+
   const totalRequestsInCollection = getTotalRequestCountInCollection(collectionCopy);
   const passedRequests = items.filter((item) => {
     return item.status !== 'error' && item.testStatus === 'pass' && item.assertionStatus === 'pass';
@@ -91,12 +107,11 @@ export default function RunnerResults({ collection }) {
 
   if (!items || !items.length) {
     return (
-      <StyledWrapper className="px-4">
+      <StyledWrapper className="px-4 pb-4">
         <div className="font-medium mt-6 title flex items-center">
           Runner
           <IconRun size={20} strokeWidth={1.5} className="ml-2" />
         </div>
-
         <div className="mt-6">
           You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
         </div>
@@ -114,13 +129,23 @@ export default function RunnerResults({ collection }) {
 
   return (
     <StyledWrapper className="px-4 pb-4 flex flex-grow flex-col relative">
-      <div className="font-medium mt-6 mb-4 title flex items-center">
-        Runner
-        <IconRun size={20} strokeWidth={1.5} className="ml-2" />
+      <div className="flex flex-row">
+        <div className="font-medium my-6 title flex items-center">
+          Runner
+          <IconRun size={20} strokeWidth={1.5} className="ml-2" />
+        </div>
+        {runnerInfo.status !== 'ended' && runnerInfo.cancelTokenUid && (
+          <button className="btn ml-6 my-4 btn-sm btn-danger" onClick={cancelExecution}>
+            Cancel Execution
+          </button>
+        )}
       </div>
-      <div className="flex flex-1">
-        <div className="flex flex-col flex-1">
-          <div className="py-2 font-medium test-summary">
+      <div className="flex flex-row gap-4">
+        <div
+          className="flex flex-col flex-1 overflow-y-auto h-[calc(100vh_-_12rem)] max-h-[calc(100vh_-_12rem)] w-full"
+          ref={runnerBodyRef}
+        >
+          <div className="pb-2 font-medium test-summary">
             Total Requests: {items.length}, Passed: {passedRequests.length}, Failed: {failedRequests.length}
           </div>
           {items.map((item) => {
@@ -195,7 +220,6 @@ export default function RunnerResults({ collection }) {
               </div>
             );
           })}
-
           {runnerInfo.status === 'ended' ? (
             <div className="mt-2 mb-4">
               <button type="submit" className="submit btn btn-sm btn-secondary mt-6" onClick={runAgain}>
@@ -210,8 +234,8 @@ export default function RunnerResults({ collection }) {
             </div>
           ) : null}
         </div>
-        <div className="flex flex-1" style={{ width: '50%' }}>
-          {selectedItem ? (
+        {selectedItem ? (
+          <div className="flex flex-1 w-[50%]">
             <div className="flex flex-col w-full overflow-auto">
               <div className="flex items-center px-3 mb-4 font-medium">
                 <span className="mr-2">{selectedItem.relativePath}</span>
@@ -226,8 +250,8 @@ export default function RunnerResults({ collection }) {
               {/* <div className='px-3 mb-4 font-medium'>{selectedItem.relativePath}</div> */}
               <ResponsePane item={selectedItem} collection={collection} />
             </div>
-          ) : null}
-        </div>
+          </div>
+        ) : null}
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js

@@ -11,7 +11,7 @@ import { IconCopy } from '@tabler/icons';
 import { findCollectionByItemUid } from '../../../../../../../utils/collections/index';
 
 const CodeView = ({ language, item }) => {
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
   const { target, client, language: lang } = language;
   const requestHeaders = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
@@ -45,7 +45,7 @@ const CodeView = ({ language, item }) => {
           readOnly
           value={snippet}
           font={get(preferences, 'font.codeFont', 'default')}
-          theme={storedTheme}
+          theme={displayedTheme}
           mode={lang}
         />
       </StyledWrapper>

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js

@@ -4,17 +4,19 @@ import CodeView from './CodeView';
 import StyledWrapper from './StyledWrapper';
 import { isValidUrl } from 'utils/url/index';
 import get from 'lodash/get';
-import handlebars from 'handlebars';
 import { findEnvironmentInCollection } from 'utils/collections';
 
+// Todo: Fix this
+// import { interpolate } from '@usebruno/common';
+import brunoCommon from '@usebruno/common';
+const { interpolate } = brunoCommon;
+
 const interpolateUrl = ({ url, envVars, collectionVariables, processEnvVars }) => {
   if (!url || !url.length || typeof url !== 'string') {
     return;
   }
 
-  const template = handlebars.compile(url, { noEscape: true });
-
-  return template({
+  return interpolate(url, {
     ...envVars,
     ...collectionVariables,
     process: {

packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import toast from 'react-hot-toast';
 import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
+import { IconFiles } from '@tabler/icons';
 import { removeCollection } from 'providers/ReduxStore/slices/collections/actions';
 
 const RemoveCollection = ({ onClose, collection }) => {
@@ -10,15 +11,25 @@ const RemoveCollection = ({ onClose, collection }) => {
   const onConfirm = () => {
     dispatch(removeCollection(collection.uid))
       .then(() => {
-        toast.success('Collection removed');
+        toast.success('Collection closed');
         onClose();
       })
-      .catch(() => toast.error('An error occurred while removing the collection'));
+      .catch(() => toast.error('An error occurred while closing the collection'));
   };
 
   return (
-    <Modal size="sm" title="Remove Collection" confirmText="Remove" handleConfirm={onConfirm} handleCancel={onClose}>
-      Are you sure you want to remove collection <span className="font-semibold">{collection.name}</span> ?
+    <Modal size="sm" title="Close Collection" confirmText="Close" handleConfirm={onConfirm} handleCancel={onClose}>
+      <div className="flex items-center">
+        <IconFiles size={18} strokeWidth={1.5} />
+        <span className="ml-2 mr-4 font-semibold">{collection.name}</span>
+      </div>
+      <div className="break-words text-xs mt-1">{collection.pathname}</div>
+      <div className="mt-4">
+        Are you sure you want to close collection <span className="font-semibold">{collection.name}</span> in Bruno?
+      </div>
+      <div className="mt-4">
+        It will still be available in the file system at the above location and can be re-opened later.
+      </div>
     </Modal>
   );
 };

packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js

@@ -217,7 +217,7 @@ const Collection = ({ collection, searchText }) => {
                 setShowRemoveCollectionModal(true);
               }}
             >
-              Remove
+              Close
             </div>
             <div
               className="dropdown-item"

packages/bruno-app/src/components/Sidebar/GoldenEdition/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import Modal from 'components/Modal/index';
 import { PostHog } from 'posthog-node';
 import { uuid } from 'utils/common';
-import { IconHeart, IconUser, IconUsers } from '@tabler/icons';
+import { IconHeart, IconUser, IconUsers, IconPlus } from '@tabler/icons';
 import platformLib from 'platform';
 import StyledWrapper from './StyledWrapper';
 import { useTheme } from 'providers/Theme/index';
@@ -59,7 +59,7 @@ const CheckIcon = () => {
 };
 
 const GoldenEdition = ({ onClose }) => {
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
 
   useEffect(() => {
     const anonymousId = getAnonymousTrackingId();
@@ -85,11 +85,10 @@ const GoldenEdition = ({ onClose }) => {
     });
   };
 
-  const goldenEditon = [
+  const goldenEditonIndividuals = [
     'Inbuilt Bru File Explorer',
     'Visual Git (Like Gitlens for Vscode)',
     'GRPC, Websocket, SocketIO, MQTT',
-    'Intergration with Secret Managers',
     'Load Data from File for Collection Run',
     'Developer Tools',
     'OpenAPI Designer',
@@ -98,16 +97,24 @@ const GoldenEdition = ({ onClose }) => {
     'Custom Themes'
   ];
 
+  const goldenEditonOrganizations = [
+    'Centralized License Management',
+    'Intergration with Secret Managers',
+    'Private Collection Registry',
+    'Request Forms',
+    'Priority Support'
+  ];
+
   const [pricingOption, setPricingOption] = useState('individuals');
 
   const handlePricingOptionChange = (option) => {
     setPricingOption(option);
   };
 
-  const themeBasedContainerClassNames = storedTheme === 'light' ? 'text-gray-900' : 'text-white';
-  const themeBasedTabContainerClassNames = storedTheme === 'light' ? 'bg-gray-200' : 'bg-gray-800';
+  const themeBasedContainerClassNames = displayedTheme === 'light' ? 'text-gray-900' : 'text-white';
+  const themeBasedTabContainerClassNames = displayedTheme === 'light' ? 'bg-gray-200' : 'bg-gray-800';
   const themeBasedActiveTabClassNames =
-    storedTheme === 'light' ? 'bg-white text-gray-900 font-medium' : 'bg-gray-700 text-white font-medium';
+    displayedTheme === 'light' ? 'bg-white text-gray-900 font-medium' : 'bg-gray-700 text-white font-medium';
 
   return (
     <StyledWrapper>
@@ -123,8 +130,7 @@ const GoldenEdition = ({ onClose }) => {
               target="_blank"
               className="flex text-white bg-yellow-600 hover:bg-yellow-700 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer"
             >
-              <IconHeart size={18} strokeWidth={1.5} />{' '}
-              <span className="ml-2">{pricingOption === 'individuals' ? 'Buy' : 'Subscribe'}</span>
+              <IconHeart size={18} strokeWidth={1.5} /> <span className="ml-2">Buy</span>
             </a>
           </div>
           {pricingOption === 'individuals' ? (
@@ -138,9 +144,11 @@ const GoldenEdition = ({ onClose }) => {
           ) : (
             <div>
               <div className="my-4">
-                <span className="text-3xl font-extrabold">$2</span>
+                <span className="text-3xl font-extrabold">$49</span>
+                <span className="ml-2">/&nbsp;user</span>
               </div>
-              <p>/user/month</p>
+              <p className="bg-yellow-200 text-black rounded-md px-2 py-1 mb-2 inline-flex text-sm">One Time Payment</p>
+              <p className="text-sm">perpetual license with 2 years of updates</p>
             </div>
           )}
           <div
@@ -169,12 +177,29 @@ const GoldenEdition = ({ onClose }) => {
               <HeartIcon />
               <span>Support Bruno's Development</span>
             </li>
-            {goldenEditon.map((item, index) => (
-              <li className="flex items-center space-x-3" key={index}>
-                <CheckIcon />
-                <span>{item}</span>
-              </li>
-            ))}
+            {pricingOption === 'individuals' ? (
+              <>
+                {goldenEditonIndividuals.map((item, index) => (
+                  <li className="flex items-center space-x-3" key={index}>
+                    <CheckIcon />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </>
+            ) : (
+              <>
+                <li className="flex items-center space-x-3 pb-4">
+                  <IconPlus size={16} strokeWidth={1.5} style={{ marginLeft: '2px' }} />
+                  <span>Everything in the Individual Plan</span>
+                </li>
+                {goldenEditonOrganizations.map((item, index) => (
+                  <li className="flex items-center space-x-3" key={index}>
+                    <CheckIcon />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </>
+            )}
           </ul>
         </div>
       </Modal>