fix: Code Generation for Basic Auth (#6474 )

* Adding interpolation utilities * Refactor interpolation * Refactor interpolation * updating tests * updating tests * minor refinements to interpolation logic * update snippet generator to handle basic auth credentials * move interpolation upstream
fix: openapi query param import (#6241 )
2026-07-03 01:18:32 +00:00 · 2026-01-21 18:37:49 +05:30 · 2026-01-21 17:53:14 +05:30 · 2026-01-21 12:38:45 +05:30 · 2026-01-21 12:23:05 +05:30 · 2026-01-21 11:32:33 +05:30
629 changed files with 28268 additions and 6832 deletions
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -58,6 +58,8 @@ jobs:
        run: npm run test --workspace=packages/bruno-converters
      - name: Test Package bruno-electron
        run: npm run test --workspace=packages/bruno-electron
+      - name: Test Package bruno-requests
+        run: npm run test --workspace=packages/bruno-requests

  cli-test:
    name: CLI Tests
--- a/.gitignore
+++ b/.gitignore
@@ -48,6 +48,7 @@ yarn-error.log*
 bruno.iml
 .idea
 .vscode
+.cursor

 # Playwright
 /blob-report/
--- a/assets/images/landing-2-dark.png
+++ b/assets/images/landing-2-dark.png
--- a/assets/images/landing-2-light.png
+++ b/assets/images/landing-2-light.png
--- a/assets/images/landing-2.png
+++ b/assets/images/landing-2.png
--- a/docs/readme/readme_ar.md
+++ b/docs/readme/readme_ar.md
@@ -3,7 +3,7 @@

 ### برونو - بيئة تطوير مفتوحة المصدر لاستكشاف واختبار واجهات برمجة التطبيقات (APIs).

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_bn.md
+++ b/docs/readme/readme_bn.md
@@ -3,7 +3,7 @@

 ### ব্রুনো - API অন্বেষণ এবং পরীক্ষা করার জন্য ওপেনসোর্স IDE।

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_cn.md
+++ b/docs/readme/readme_cn.md
@@ -3,7 +3,7 @@

 ### Bruno - 开源 IDE，用于探索和测试 API。

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_de.md
+++ b/docs/readme/readme_de.md
@@ -3,7 +3,7 @@

 ### 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)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_es.md
+++ b/docs/readme/readme_es.md
@@ -3,7 +3,7 @@

 ### Bruno - IDE de código abierto para explorar y probar APIs.

-[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![Versión en Github](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
 [![Actividad de Commits](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)
--- a/docs/readme/readme_fa.md
+++ b/docs/readme/readme_fa.md
@@ -3,7 +3,7 @@

 ### برونو یا Bruno - محیط توسعه متن باز برای تست و توسعه API ها

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_fr.md
+++ b/docs/readme/readme_fr.md
@@ -3,7 +3,7 @@

 ### Bruno - IDE Opensource pour explorer et tester des APIs.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_it.md
+++ b/docs/readme/readme_it.md
@@ -3,7 +3,7 @@

 ### Bruno - Opensource IDE per esplorare e testare gli APIs.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_ja.md
+++ b/docs/readme/readme_ja.md
@@ -3,7 +3,7 @@

 ### Bruno - API の検証・動作テストのためのオープンソース IDE.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_ka.md
+++ b/docs/readme/readme_ka.md
@@ -3,7 +3,7 @@

 ### ბრუნო - ღია წყაროების IDE API-ების შესწავლისა და ტესტირებისათვის.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_kr.md
+++ b/docs/readme/readme_kr.md
@@ -3,7 +3,7 @@

 ### Bruno - API 탐색 및 테스트를 위한 오픈소스 IDE.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_nl.md
+++ b/docs/readme/readme_nl.md
@@ -3,7 +3,7 @@

 ### Bruno - Open source IDE voor het verkennen en testen van API's.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_pl.md
+++ b/docs/readme/readme_pl.md
@@ -3,7 +3,7 @@

 ### Bruno - Otwartoźródłowe IDE do eksploracji i testów APIs.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_pt_br.md
+++ b/docs/readme/readme_pt_br.md
@@ -3,7 +3,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)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_ro.md
+++ b/docs/readme/readme_ro.md
@@ -3,7 +3,7 @@

 ### Bruno - Mediu integrat de dezvoltare cu sursă deschisă pentru explorarea și testarea API-urilor.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_ru.md
+++ b/docs/readme/readme_ru.md
@@ -3,7 +3,7 @@

 ### Bruno - IDE с открытым исходным кодом для изучения и тестирования API.

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_tr.md
+++ b/docs/readme/readme_tr.md
@@ -3,7 +3,7 @@

 ### Bruno - API'leri keşfetmek ve test etmek için açık kaynaklı IDE.

-[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub sürümü](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_ua.md
+++ b/docs/readme/readme_ua.md
@@ -3,7 +3,7 @@

 ### Bruno - IDE із відкритим кодом для тестування та дослідження API

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/docs/readme/readme_zhtw.md
+++ b/docs/readme/readme_zhtw.md
@@ -3,7 +3,7 @@

 ### Bruno - 探索和測試 API 的開源 IDE 工具

-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
 [![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/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)
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,10 +22,14 @@
        "packages/bruno-requests",
        "packages/bruno-filestore"
      ],
+      "dependencies": {
+        "ajv": "^8.17.1"
+      },
      "devDependencies": {
        "@eslint/compat": "^1.3.2",
        "@faker-js/faker": "^7.6.0",
        "@jest/globals": "^29.2.0",
+        "@opencollection/types": "~0.7.0",
        "@playwright/test": "^1.51.1",
        "@rollup/plugin-json": "^6.1.0",
        "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -6096,9 +6100,9 @@
      }
    },
    "node_modules/@opencollection/types": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.5.0.tgz",
-      "integrity": "sha512-9rpu5agMrMLcMVU2UgyV+PYV3Zf/sHBJDHMQoq8XiMEUH8lt9f7yGtlerm/9dS3SHMpGX4A8ik0OFtc0dX4r1Q==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.7.0.tgz",
+      "integrity": "sha512-CSwdaHNPa2bNNBAOy++t6W9gBTExUJZW3aPkWyhAjasusThbvjymD/0uCLR50gCXSs0ezv61jsd19m9x+2DMtQ==",
      "dev": true,
      "license": "MIT"
    },
@@ -6454,56 +6458,6 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
-    "node_modules/@postman/form-data": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@postman/form-data/-/form-data-3.1.1.tgz",
-      "integrity": "sha512-vjh8Q2a8S6UCm/KKs31XFJqEEgmbjBmpPNVV2eVav6905wyFAwaUOBGA1NPBI4ERH9MMZc6w0umFgM6WbEPMdg==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@postman/tough-cookie": {
-      "version": "4.1.3-postman.1",
-      "resolved": "https://registry.npmjs.org/@postman/tough-cookie/-/tough-cookie-4.1.3-postman.1.tgz",
-      "integrity": "sha512-txpgUqZOnWYnUHZpHjkfb0IwVH4qJmyq77pPnJLlfhMtdCLMFTEeQHlzQiK906aaNCe4NEB5fGJHo9uzGbFMeA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@postman/tough-cookie/node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/@postman/tunnel-agent": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/@postman/tunnel-agent/-/tunnel-agent-0.6.4.tgz",
-      "integrity": "sha512-CJJlq8V7rNKhAw4sBfjixKpJW00SHqebqNUQKxMoepgeWZIbdPcD+rguRcivGhS4N12PymDcKgUgSD4rVC+RjQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/@prantlf/jsonlint": {
      "version": "16.0.0",
      "resolved": "https://registry.npmjs.org/@prantlf/jsonlint/-/jsonlint-16.0.0.tgz",
@@ -11425,15 +11379,6 @@
      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
      "license": "MIT"
    },
-    "node_modules/asn1": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
-      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
    "node_modules/asn1.js": {
      "version": "4.10.1",
      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -11472,6 +11417,7 @@
      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
      "license": "MIT",
+      "optional": true,
      "engines": {
        "node": ">=0.8"
      }
@@ -11622,15 +11568,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/aws4": {
      "version": "1.13.2",
      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
@@ -12024,15 +11961,6 @@
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
      "license": "MIT"
    },
-    "node_modules/bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
    "node_modules/big.js": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -12225,15 +12153,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/brotli": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
-      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.1.2"
-      }
-    },
    "node_modules/browserify-aes": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
@@ -12746,12 +12665,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
-      "license": "Apache-2.0"
-    },
    "node_modules/chai": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/chai/-/chai-4.5.0.tgz",
@@ -14371,18 +14284,6 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
      "license": "MIT"
    },
-    "node_modules/dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
    "node_modules/data-urls": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
@@ -15106,22 +15007,6 @@
      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
      "license": "MIT"
    },
-    "node_modules/ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
-      "license": "MIT",
-      "dependencies": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
-    "node_modules/ecc-jsbn/node_modules/jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "license": "MIT"
-    },
    "node_modules/ecdsa-sig-formatter": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -16420,12 +16305,6 @@
        "node": ">= 0.6"
      }
    },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "license": "MIT"
-    },
    "node_modules/extract-files": {
      "version": "9.0.0",
      "resolved": "https://registry.npmjs.org/extract-files/-/extract-files-9.0.0.tgz",
@@ -16551,6 +16430,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/fast-levenshtein": {
@@ -17033,15 +16913,6 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
-    "node_modules/forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/fork-ts-checker-webpack-plugin": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-9.1.0.tgz",
@@ -17520,15 +17391,6 @@
        "node": ">=6.0"
      }
    },
-    "node_modules/getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0"
-      }
-    },
    "node_modules/github-markdown-css": {
      "version": "5.8.1",
      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-5.8.1.tgz",
@@ -17811,57 +17673,12 @@
        "@grpc/grpc-js": "^1.12.6"
      }
    },
-    "node_modules/har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/har-validator": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-      "deprecated": "this library is no longer supported",
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^6.12.3",
-        "har-schema": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/har-validator-compiled": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/har-validator-compiled/-/har-validator-compiled-1.0.0.tgz",
      "integrity": "sha512-dher7nFSx+Ef6OoqVveLClh8itAR3vd8Qx70Lh/hEgP1iGeARAolbci7Y8JBrHIYgFCT6xRdvvL16AR9Zh07Dw==",
      "license": "MIT"
    },
-    "node_modules/har-validator/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/har-validator/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "license": "MIT"
-    },
    "node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -18334,20 +18151,6 @@
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
      "license": "MIT"
    },
-    "node_modules/http-signature": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz",
-      "integrity": "sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==",
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^2.0.2",
-        "sshpk": "^1.14.1"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
    "node_modules/http2-wrapper": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
@@ -19164,12 +18967,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "license": "MIT"
-    },
    "node_modules/is-valid-path": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/is-valid-path/-/is-valid-path-0.1.1.tgz",
@@ -19232,12 +19029,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-      "license": "MIT"
-    },
    "node_modules/istanbul-lib-coverage": {
      "version": "3.2.2",
      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -20818,12 +20609,6 @@
        "node": "*"
      }
    },
-    "node_modules/json-schema": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "license": "(AFL-2.1 OR BSD-3-Clause)"
-    },
    "node_modules/json-schema-traverse": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -20847,7 +20632,9 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "license": "ISC"
+      "dev": true,
+      "license": "ISC",
+      "optional": true
    },
    "node_modules/json5": {
      "version": "2.2.3",
@@ -20879,42 +20666,13 @@
        "graceful-fs": "^4.1.6"
      }
    },
-    "node_modules/jsprim": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
-      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
-      "engines": [
-        "node >=0.6.0"
-      ],
+    "node_modules/jsonschema": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.5.0.tgz",
+      "integrity": "sha512-K+A9hhqbn0f3pJX17Q/7H6yQfD/5OXgdrR5UE12gMXCiN9D5Xq2o5mddV2QEcX/bjla99ASsAAQUyMCCRWAEhw==",
      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.4.0",
-        "verror": "1.10.0"
-      }
-    },
-    "node_modules/jsprim/node_modules/extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT"
-    },
-    "node_modules/jsprim/node_modules/verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
+      "engines": {
+        "node": "*"
      }
    },
    "node_modules/jszip": {
@@ -22017,15 +21775,6 @@
        "node": ">= 6.0.0"
      }
    },
-    "node_modules/mustache": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
-      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
-      "license": "MIT",
-      "bin": {
-        "mustache": "bin/mustache"
-      }
-    },
    "node_modules/mz": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -22246,44 +21995,6 @@
      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
      "license": "MIT"
    },
-    "node_modules/node-vault": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/node-vault/-/node-vault-0.10.2.tgz",
-      "integrity": "sha512-//uc9/YImE7Dx0QHdwMiAzLaOumiKUnOUP8DymgtkZ8nsq6/V2LKvEu6kw91Lcruw8lWUfj4DO7CIXNPRWBuuA==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.3.4",
-        "mustache": "^4.2.0",
-        "postman-request": "^2.88.1-postman.33",
-        "tv4": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 16.0.0"
-      }
-    },
-    "node_modules/node-vault/node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/node-vault/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
    "node_modules/normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -22354,15 +22065,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -23077,12 +22779,6 @@
      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
      "license": "MIT"
    },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "license": "MIT"
-    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -24062,57 +23758,6 @@
        "node": ">=15.0.0"
      }
    },
-    "node_modules/postman-request": {
-      "version": "2.88.1-postman.40",
-      "resolved": "https://registry.npmjs.org/postman-request/-/postman-request-2.88.1-postman.40.tgz",
-      "integrity": "sha512-uE4AiIqhjtHKp4pj9ei7fkdfNXEX9IqDBlK1plGAQne6y79UUlrTdtYLhwXoO0AMOvqyl9Ar+BU6Eo6P/MPgfg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@postman/form-data": "~3.1.1",
-        "@postman/tough-cookie": "~4.1.3-postman.1",
-        "@postman/tunnel-agent": "^0.6.4",
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.12.0",
-        "brotli": "^1.3.3",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "har-validator": "~5.1.3",
-        "http-signature": "~1.3.1",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "^2.1.35",
-        "oauth-sign": "~0.9.0",
-        "performance-now": "^2.1.0",
-        "qs": "~6.5.3",
-        "safe-buffer": "^5.1.2",
-        "stream-length": "^1.0.2",
-        "uuid": "^8.3.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      }
-    },
-    "node_modules/postman-request/node_modules/qs": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/postman-request/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
    "node_modules/prelude-ls": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -24414,6 +24059,7 @@
      "version": "1.15.0",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "punycode": "^2.3.1"
@@ -24458,6 +24104,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=6"
@@ -27373,37 +27020,6 @@
      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
      "license": "BSD-3-Clause"
    },
-    "node_modules/sshpk": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
-      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
-      "license": "MIT",
-      "dependencies": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
-      },
-      "bin": {
-        "sshpk-conv": "bin/sshpk-conv",
-        "sshpk-sign": "bin/sshpk-sign",
-        "sshpk-verify": "bin/sshpk-verify"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sshpk/node_modules/jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "license": "MIT"
-    },
    "node_modules/stable": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -27574,21 +27190,6 @@
        "node": ">= 6"
      }
    },
-    "node_modules/stream-length": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/stream-length/-/stream-length-1.0.2.tgz",
-      "integrity": "sha512-aI+qKFiwoDV4rsXiS7WRoCt+v2RX1nUj17+KJC5r2gfh5xoSJIfP6Y3Do/HtvesFcTSWthIuJ3l1cvKQY/+nZg==",
-      "license": "WTFPL",
-      "dependencies": {
-        "bluebird": "^2.6.2"
-      }
-    },
-    "node_modules/stream-length/node_modules/bluebird": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz",
-      "integrity": "sha512-UfFSr22dmHPQqPP9XWHRhq+gWnHCYguQGkXQlbyPtW5qTnhFWA8/iXg765tH0cAjy7l/zPJ1aBTO0g5XgA7kvQ==",
-      "license": "MIT"
-    },
    "node_modules/streamsearch": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -29171,12 +28772,6 @@
        "node": ">= 0.8.0"
      }
    },
-    "node_modules/tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-      "license": "Unlicense"
-    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -29441,6 +29036,7 @@
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "devOptional": true,
      "license": "BSD-2-Clause",
      "dependencies": {
        "punycode": "^2.1.0"
@@ -30447,6 +30043,7 @@
        "json5": "^2.2.3",
        "jsonc-parser": "^3.2.1",
        "jsonpath-plus": "^10.3.0",
+        "jsonschema": "^1.5.0",
        "know-your-http-well": "^0.5.0",
        "linkify-it": "^5.0.0",
        "lodash": "^4.17.21",
@@ -30463,7 +30060,7 @@
        "polished": "^4.3.1",
        "posthog-node": "4.2.1",
        "prettier": "^2.7.1",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
        "query-string": "^7.0.1",
        "react": "19.0.0",
        "react-copy-to-clipboard": "^5.1.0",
@@ -30478,6 +30075,7 @@
        "react-player": "^2.16.0",
        "react-redux": "^7.2.9",
        "react-tooltip": "^5.5.2",
+        "react-virtuoso": "^4.18.1",
        "sass": "^1.46.0",
        "semver": "^7.7.1",
        "shell-quote": "^1.8.3",
@@ -31918,6 +31516,31 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "packages/bruno-app/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "packages/bruno-app/node_modules/react-virtuoso": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.18.1.tgz",
+      "integrity": "sha512-KF474cDwaSb9+SJ380xruBB4P+yGWcVkcu26HtMqYNMTYlYbrNy8vqMkE+GpAApPPufJqgOLMoWMFG/3pJMXUA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18 || >= 19",
+        "react-dom": ">=16 || >=17 || >= 18 || >=19"
+      }
+    },
    "packages/bruno-app/node_modules/semver": {
      "version": "7.7.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -32003,7 +31626,7 @@
        "iconv-lite": "^0.6.3",
        "js-yaml": "^4.1.1",
        "lodash": "^4.17.21",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
        "socks-proxy-agent": "^8.0.2",
        "xmlbuilder": "^15.1.1",
        "yargs": "^17.6.2"
@@ -33053,6 +32676,21 @@
        "node": ">=12"
      }
    },
+    "packages/bruno-cli/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "packages/bruno-common": {
      "name": "@usebruno/common",
      "version": "0.1.0",
@@ -33067,6 +32705,7 @@
        "@rollup/plugin-typescript": "^12.1.2",
        "@types/jest": "^29.5.14",
        "babel-jest": "^29.7.0",
+        "form-data": "^4.0.0",
        "is-ip": "^5.0.1",
        "moment": "^2.29.4",
        "rollup": "3.29.5",
@@ -33629,10 +33268,17 @@
        "typescript": "^4.8.4"
      }
    },
+    "packages/bruno-converters/node_modules/@opencollection/types": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.5.0.tgz",
+      "integrity": "sha512-9rpu5agMrMLcMVU2UgyV+PYV3Zf/sHBJDHMQoq8XiMEUH8lt9f7yGtlerm/9dS3SHMpGX4A8ik0OFtc0dX4r1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
    "packages/bruno-converters/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
      "dev": true,
      "license": "ISC",
      "dependencies": {
@@ -33735,7 +33381,7 @@
        "lodash": "^4.17.21",
        "mime-types": "^2.1.35",
        "nanoid": "3.3.8",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
        "socks-proxy-agent": "^8.0.2",
        "tough-cookie": "^6.0.0",
        "uuid": "^9.0.0",
@@ -35221,6 +34867,21 @@
      "dev": true,
      "license": "MIT"
    },
+    "packages/bruno-electron/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "packages/bruno-electron/node_modules/semver": {
      "version": "7.7.2",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -35259,7 +34920,6 @@
      "devDependencies": {
        "@babel/preset-env": "^7.22.0",
        "@babel/preset-typescript": "^7.22.0",
-        "@opencollection/types": "~0.5.0",
        "@rollup/plugin-commonjs": "^23.0.2",
        "@rollup/plugin-json": "^6.1.0",
        "@rollup/plugin-node-resolve": "^15.0.1",
@@ -35471,7 +35131,6 @@
        "moment": "^2.29.4",
        "nanoid": "3.3.8",
        "node-fetch": "^2.7.0",
-        "node-vault": "^0.10.2",
        "path": "^0.12.7",
        "quickjs-emscripten": "^0.29.2",
        "tv4": "^1.3.0",
@@ -35586,7 +35245,10 @@
        "debug": "^4.4.3",
        "google-protobuf": "^4.0.0",
        "grpc-js-reflection-client": "^1.3.0",
+        "http-proxy-agent": "~7.0.2",
+        "https-proxy-agent": "~7.0.6",
        "is-ip": "^5.0.1",
+        "socks-proxy-agent": "~8.0.5",
        "system-ca": "^2.0.1",
        "tough-cookie": "^6.0.0",
        "ws": "^8.18.3"
@@ -35686,9 +35348,7 @@
      "version": "0.7.0",
      "license": "MIT",
      "dependencies": {
-        "nanoid": "3.3.8"
-      },
-      "peerDependencies": {
+        "nanoid": "3.3.8",
        "yup": "^0.32.11"
      }
    },
@@ -35983,4 +35643,4 @@
      }
    }
  }
-}
+}
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "@eslint/compat": "^1.3.2",
    "@faker-js/faker": "^7.6.0",
    "@jest/globals": "^29.2.0",
+    "@opencollection/types": "~0.7.0",
    "@playwright/test": "^1.51.1",
    "@rollup/plugin-json": "^6.1.0",
    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
@@ -53,7 +54,7 @@
  "scripts": {
    "setup": "node ./scripts/setup.js",
    "watch:converters": "npm run watch --workspace=packages/bruno-converters",
-    "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
+    "dev": "node ./scripts/dev.js",
    "watch": "npm run dev:watch",
    "dev:watch": "node ./scripts/dev-hot-reload.js",
    "dev:web": "npm run dev --workspace=packages/bruno-app",
@@ -61,6 +62,7 @@
    "prettier:web": "npm run prettier --workspace=packages/bruno-app",
    "dev:electron": "npm run dev --workspace=packages/bruno-electron",
    "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
+    "storybook": "npm run storybook --workspace=packages/bruno-app",
    "build:bruno-common": "npm run build --workspace=packages/bruno-common",
    "build:bruno-requests": "npm run build --workspace=packages/bruno-requests",
    "build:bruno-filestore": "npm run build --workspace=packages/bruno-filestore",
@@ -76,6 +78,7 @@
    "build:electron:rpm": "./scripts/build-electron.sh rpm",
    "build:electron:snap": "./scripts/build-electron.sh snap",
    "watch:common": "npm run watch --workspace=packages/bruno-common",
+    "watch:requests": "npm run watch --workspace=packages/bruno-requests",
    "test:codegen": "node playwright/codegen.ts",
    "test:e2e": "playwright test --project=default",
    "test:e2e:ssl": "playwright test --project=ssl",
@@ -96,5 +99,8 @@
        "json-schema-typed": "8.0.1"
      }
    }
+  },
+  "dependencies": {
+    "ajv": "^8.17.1"
  }
 }
--- a/packages/bruno-app/.gitignore
+++ b/packages/bruno-app/.gitignore
@@ -34,4 +34,5 @@ yarn-error.log*
 .next/
 dist/

-.env
+.env
+storybook-static/
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -52,6 +52,7 @@
    "json5": "^2.2.3",
    "jsonc-parser": "^3.2.1",
    "jsonpath-plus": "^10.3.0",
+    "jsonschema": "^1.5.0",
    "know-your-http-well": "^0.5.0",
    "linkify-it": "^5.0.0",
    "lodash": "^4.17.21",
@@ -68,7 +69,7 @@
    "polished": "^4.3.1",
    "posthog-node": "4.2.1",
    "prettier": "^2.7.1",
-    "qs": "^6.11.0",
+    "qs": "^6.14.1",
    "query-string": "^7.0.1",
    "react": "19.0.0",
    "react-copy-to-clipboard": "^5.1.0",
@@ -83,6 +84,7 @@
    "react-player": "^2.16.0",
    "react-redux": "^7.2.9",
    "react-tooltip": "^5.5.2",
+    "react-virtuoso": "^4.18.1",
    "sass": "^1.46.0",
    "semver": "^7.7.1",
    "shell-quote": "^1.8.3",
--- a/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js
@@ -55,10 +55,10 @@ const StyledWrapper = styled.div`
  }

  .cm-variable-valid {
-    color: green;
+    color: ${(props) => props.theme.codemirror.variable.valid};
  }
  .cm-variable-invalid {
-    color: red;
+    color: ${(props) => props.theme.codemirror.variable.invalid};
  }
 `;

--- a/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js
@@ -37,7 +37,7 @@ const FileEditor = ({ apiSpec }) => {
      />
      <IconDeviceFloppy
        onClick={onSave}
-        color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+        color={hasChanges ? theme.draftColor : theme.requestTabs.icon.color}
        strokeWidth={1.5}
        size={22}
        className={`absolute right-0 top-0 m-4 ${
--- a/packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
  }

  div.dropdown-item.menu-item {
-    color: ${(props) => props.theme.colors.danger};
+    color: ${(props) => props.theme.colors.text.danger};
    &:hover {
      background-color: ${(props) => props.theme.colors.bg.danger};
      color: white;
--- a/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
@@ -246,12 +246,6 @@ const Wrapper = styled.div`
      color: white;
    }
  }
-
-  .dropdown-item-active {
-    font-weight: 400 !important;
-    background-color: ${(props) => props.theme.dropdown.selectedBg} !important;
-    color: ${(props) => props.theme.dropdown.selectedColor} !important;
-  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/components/AppTitleBar/index.js
+++ b/packages/bruno-app/src/components/AppTitleBar/index.js
@@ -18,9 +18,9 @@ import ImportWorkspace from 'components/WorkspaceSidebar/ImportWorkspace';

 import IconBottombarToggle from 'components/Icons/IconBottombarToggle/index';
 import StyledWrapper from './StyledWrapper';
-import { toTitleCase } from 'utils/common/index';
 import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
 import { isMacOS, isWindowsOS, isLinuxOS } from 'utils/common/platform';
+import classNames from 'classnames';

 const getOsClass = () => {
  if (isMacOS()) return 'os-mac';
@@ -29,6 +29,12 @@ const getOsClass = () => {
  return 'os-other';
 };

+// Helper to get display name for workspace
+export const getWorkspaceDisplayName = (name) => {
+  if (!name) return 'Untitled Workspace';
+  return name;
+};
+
 const AppTitleBar = () => {
  const dispatch = useDispatch();
  const [isFullScreen, setIsFullScreen] = useState(false);
@@ -115,7 +121,7 @@ const AppTitleBar = () => {
  const WorkspaceName = forwardRef((props, ref) => {
    return (
      <div ref={ref} className="workspace-name-container" {...props}>
-        <span className="workspace-name">{toTitleCase(activeWorkspace?.name) || 'Default Workspace'}</span>
+        <span data-testid="workspace-name" className={classNames('workspace-name', { 'italic text-muted': !activeWorkspace?.name })}>{getWorkspaceDisplayName(activeWorkspace?.name)}</span>
        <IconChevronDown size={14} stroke={1.5} className="chevron-icon" />
      </div>
    );
@@ -127,7 +133,7 @@ const AppTitleBar = () => {

  const handleWorkspaceSwitch = (workspaceUid) => {
    dispatch(switchWorkspace(workspaceUid));
-    toast.success(`Switched to ${workspaces.find((w) => w.uid === workspaceUid)?.name}`);
+    toast.success(`Switched to ${getWorkspaceDisplayName(workspaces.find((w) => w.uid === workspaceUid)?.name)}`);
  };

  const handleOpenWorkspace = async () => {
@@ -178,7 +184,7 @@ const AppTitleBar = () => {

      return {
        id: workspace.uid,
-        label: toTitleCase(workspace.name),
+        label: getWorkspaceDisplayName(workspace.name),
        onClick: () => handleWorkspaceSwitch(workspace.uid),
        className: `workspace-item ${isActive ? 'active' : ''}`,
        rightSection: (
@@ -190,11 +196,7 @@ const AppTitleBar = () => {
                label={isPinned ? 'Unpin workspace' : 'Pin workspace'}
                size="sm"
              >
-                {isPinned ? (
-                  <IconPinned size={14} stroke={1.5} />
-                ) : (
-                  <IconPin size={14} stroke={1.5} />
-                )}
+                {isPinned ? <IconPinned size={14} stroke={1.5} /> : <IconPin size={14} stroke={1.5} />}
              </ActionIcon>
            )}
            {isActive && <IconCheck size={16} stroke={1.5} className="check-icon" />}
@@ -247,12 +249,7 @@ const AppTitleBar = () => {
      <div className="titlebar-content">
        {/* Left section: Home + Workspace */}
        <div className="titlebar-left">
-          <ActionIcon
-            onClick={handleHomeClick}
-            label="Home"
-            size="lg"
-            className="home-button"
-          >
+          <ActionIcon onClick={handleHomeClick} label="Home" size="lg" className="home-button">
            <IconHome size={16} stroke={1.5} />
          </ActionIcon>

--- a/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js
@@ -19,7 +19,7 @@ const StyledWrapper = styled.div`
    }

    .selected-body-mode {
-      color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.primary.text};
    }

    .dropdown-icon {
--- a/packages/bruno-app/src/components/BulkEditor/index.js
+++ b/packages/bruno-app/src/components/BulkEditor/index.js
@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import get from 'lodash/get';
 import CodeEditor from 'components/CodeEditor';
 import { useTheme } from 'providers/Theme';
 import { useSelector } from 'react-redux';
@@ -21,7 +22,8 @@ const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
        <CodeEditor
          mode="text/plain"
          theme={displayedTheme}
-          font={preferences.codeFont || 'default'}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
          value={parsedParams}
          onEdit={handleEdit}
          onSave={onSave}
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -36,12 +36,12 @@ const StyledWrapper = styled.div`

  /* Style line numbers when there's a lint issue */
  .CodeMirror-lint-line-error .CodeMirror-linenumber {
-    color: #d32f2f !important;
+    color: ${(props) => props.theme.colors.text.danger} !important;
    text-decoration: underline;
  }

  .CodeMirror-lint-line-warning .CodeMirror-linenumber {
-    color: #f57c00 !important;
+    color: ${(props) => props.theme.colors.text.warning} !important;
    text-decoration: underline;
  }

@@ -116,7 +116,7 @@ const StyledWrapper = styled.div`
    span.cm-atom {
      color: ${(props) => props.theme.codemirror.tokens.atom} !important;
    }
-    span.cm-variable {
+    span.cm-variable, span.cm-variable-2 {
      color: ${(props) => props.theme.codemirror.tokens.variable} !important;
    }
    span.cm-keyword {
@@ -128,14 +128,20 @@ const StyledWrapper = styled.div`
    span.cm-operator {
      color: ${(props) => props.theme.codemirror.tokens.operator} !important;
    }
+    span.cm-tag {
+      color: ${(props) => props.theme.codemirror.tokens.tag} !important;
+    }
+    span.cm-tag.cm-bracket {
+      color: ${(props) => props.theme.codemirror.tokens.tagBracket} !important;
+    }
  }

  /* Variable validation colors */
  .cm-variable-valid {
-    color: #5fad89 !important; /* Soft sage */
+    color: ${(props) => props.theme.codemirror.variable.valid} !important;
  }
  .cm-variable-invalid {
-    color: #d17b7b !important; /* Soft coral */
+    color: ${(props) => props.theme.codemirror.variable.invalid} !important;
  }

  .CodeMirror-search-hint {
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -8,7 +8,7 @@
 import React from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import { setupAutoComplete } from 'utils/codemirror/autocomplete';
+import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
@@ -111,8 +111,12 @@ export default class CodeEditor extends React.Component {
            : cm.replaceSelection('  ', 'end');
        },
        'Shift-Tab': 'indentLess',
-        'Ctrl-Space': 'autocomplete',
-        'Cmd-Space': 'autocomplete',
+        'Ctrl-Space': (cm) => {
+          showRootHints(cm, this.props.showHintsFor);
+        },
+        'Cmd-Space': (cm) => {
+          showRootHints(cm, this.props.showHintsFor);
+        },
        'Ctrl-Y': 'foldAll',
        'Cmd-Y': 'foldAll',
        'Ctrl-I': 'unfoldAll',
--- a/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeMirrorSearch/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';

 const StyledWrapper = styled.div`
  .bruno-search-bar {
@@ -9,15 +10,15 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
-    padding: 0 2px;
-    min-height: 36px;
-    background: ${(props) => props.theme.sidebar.search.bg} !important;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.sidebar.search.bg} !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    gap: 0;
+    padding: 1px 3px;
    width: auto;
-    min-width: 180px;
    max-width: 320px;
+    min-height: 22px;
+    background: ${(props) => props.theme.background.base};
+    color: ${(props) => props.theme.text.base};
+    border: solid 1px ${(props) => props.theme.border.border2};
+    border-radius: ${(props) => props.theme.border.radius.sm};
  }

  .bruno-search-bar input {
@@ -38,7 +39,7 @@ const StyledWrapper = styled.div`
    padding: 0 1px;
    margin: 0 1px;
    cursor: pointer;
-    color: #aaa;
+    color: ${(props) => props.theme.colors.text.subtext1};
    border-radius: 3px;
    height: 18px;
    width: 18px;
@@ -51,27 +52,14 @@ const StyledWrapper = styled.div`
    min-width: 28px;
    text-align: center;
    font-size: ${(props) => props.theme.font.size.xs};
-    color: #aaa;
+    color: ${(props) => props.theme.colors.text.subtext1};
    margin: 0 8px 0 1px; 
    white-space: nowrap;
  }

-  .bruno-search-bar.compact {
-    background: ${(props) => props.theme.codemirror.bg};
-    color: ${(props) => props.theme.codemirror.text || props.theme.text};
-    border: none;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    border-radius: 4px;
-    padding: 1px 3px;
-    min-height: 22px;
-    display: flex;
-    align-items: center;
-    gap: 0;
-  }
-
  .bruno-search-bar input {
    background: transparent;
-    color: inherit;
+    color: ${(props) => props.theme.colors.text.subtext2};
    border: none;
    outline: none;
    font-size: ${(props) => props.theme.font.size.base};
@@ -92,7 +80,9 @@ const StyledWrapper = styled.div`
  }

  .searchbar-icon-btn.active {
-    color: #f39c12 !important;
+    color: ${(props) => props.theme.brand};
+    background-color: ${(props) => rgba(props.theme.brand, 0.1)};
+    font-weight: 500;
  }
 `;

--- a/packages/bruno-app/src/components/CodeMirrorSearch/index.js
+++ b/packages/bruno-app/src/components/CodeMirrorSearch/index.js
@@ -166,7 +166,7 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {

  return (
    <StyledWrapper>
-      <div className="bruno-search-bar compact">
+      <div className="bruno-search-bar">
        <input
          autoFocus
          type="text"
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
  }

  .single-line-editor-wrapper {
@@ -13,7 +14,8 @@ const Wrapper = styled.div`
  }

  .auth-placement-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
    border-radius: 3px;
    border: solid 1px ${(props) => props.theme.input.border};
    background-color: ${(props) => props.theme.input.bg};
@@ -37,7 +39,6 @@ const Wrapper = styled.div`

    .auth-type-label {
      width: fit-content;
-      color: ${(props) => props.theme.colors.text.yellow};
      justify-content: space-between;
      padding: 0 0.5rem;
    }
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js
@@ -57,29 +57,31 @@ const ApiKeyAuth = ({ collection }) => {

  return (
    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Key</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Key</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={apikeyAuth.key || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleAuthChange('key', val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Value</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Value</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={apikeyAuth.value || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleAuthChange('value', val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Add To</label>
+      <label className="block mb-1">Add To</label>
      <div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
          <div
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
    background: transparent;

    .auth-mode-label {
-      color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.primary.text};

      .caret {
        color: rgb(140, 140, 140);
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
  }

  .single-line-editor-wrapper {
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
@@ -123,19 +123,20 @@ const AwsV4Auth = ({ collection }) => {

  return (
    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Access Key ID</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={awsv4Auth.accessKeyId || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleAccessKeyIdChange(val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2 flex items-center">
+      <label className="block mb-1">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-3 flex items-center">
        <SingleLineEditor
          value={awsv4Auth.secretAccessKey || ''}
          theme={storedTheme}
@@ -143,51 +144,56 @@ const AwsV4Auth = ({ collection }) => {
          onChange={(val) => handleSecretAccessKeyChange(val)}
          collection={collection}
          isSecret={true}
+          isCompact
        />
        {showWarning && <SensitiveFieldWarning fieldName="awsv4-secret-access-key" warningMessage={warningMessage} />}
      </div>

-      <label className="block font-medium mb-2">Session Token</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Session Token</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={awsv4Auth.sessionToken || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleSessionTokenChange(val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Service</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Service</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={awsv4Auth.service || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleServiceChange(val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Region</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Region</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={awsv4Auth.region || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleRegionChange(val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Profile Name</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Profile Name</label>
+      <div className="single-line-editor-wrapper">
        <SingleLineEditor
          value={awsv4Auth.profileName || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleProfileNameChange(val)}
          collection={collection}
+          isCompact
        />
      </div>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
  }

  .single-line-editor-wrapper {
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
@@ -47,18 +47,19 @@ const BasicAuth = ({ collection }) => {

  return (
    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={basicAuth.username || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleUsernameChange(val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
      <div className="single-line-editor-wrapper flex items-center">
        <SingleLineEditor
          value={basicAuth.password || ''}
@@ -67,6 +68,7 @@ const BasicAuth = ({ collection }) => {
          onChange={(val) => handlePasswordChange(val)}
          collection={collection}
          isSecret={true}
+          isCompact
        />
        {showWarning && <SensitiveFieldWarning fieldName="basic-password" warningMessage={warningMessage} />}
      </div>
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
  }

  .single-line-editor-wrapper {
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
@@ -33,7 +33,7 @@ const BearerAuth = ({ collection }) => {

  return (
    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Token</label>
+      <label className="block mb-1">Token</label>
      <div className="single-line-editor-wrapper flex items-center">
        <SingleLineEditor
          value={bearerToken}
@@ -42,6 +42,7 @@ const BearerAuth = ({ collection }) => {
          onChange={(val) => handleTokenChange(val)}
          collection={collection}
          isSecret={true}
+          isCompact
        />
        {showWarning && <SensitiveFieldWarning fieldName="bearer-token" warningMessage={warningMessage} />}
      </div>
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
  }

  .single-line-editor-wrapper {
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js
@@ -47,18 +47,19 @@ const DigestAuth = ({ collection }) => {

  return (
    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={digestAuth.username || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleUsernameChange(val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
      <div className="single-line-editor-wrapper flex items-center">
        <SingleLineEditor
          value={digestAuth.password || ''}
@@ -67,6 +68,7 @@ const DigestAuth = ({ collection }) => {
          onChange={(val) => handlePasswordChange(val)}
          collection={collection}
          isSecret={true}
+          isCompact
        />
        {showWarning && <SensitiveFieldWarning fieldName="digest-password" warningMessage={warningMessage} />}
      </div>
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
  }

  .single-line-editor-wrapper {
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
@@ -64,19 +64,20 @@ const NTLMAuth = ({ collection }) => {

  return (
    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={ntlmAuth.username || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleUsernameChange(val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper flex items-center">
+      <label className="block mb-1">Password</label>
+      <div className="single-line-editor-wrapper mb-3 flex items-center">
        <SingleLineEditor
          value={ntlmAuth.password || ''}
          theme={storedTheme}
@@ -84,11 +85,12 @@ const NTLMAuth = ({ collection }) => {
          onChange={(val) => handlePasswordChange(val)}
          collection={collection}
          isSecret={true}
+          isCompact
        />
        {showWarning && <SensitiveFieldWarning fieldName="ntlm-password" warningMessage={warningMessage} />}
      </div>

-      <label className="block font-medium mb-2">Domain</label>
+      <label className="block mb-1">Domain</label>
      <div className="single-line-editor-wrapper">
        <SingleLineEditor
          value={ntlmAuth.domain || ''}
@@ -96,6 +98,7 @@ const NTLMAuth = ({ collection }) => {
          onSave={handleSave}
          onChange={(val) => handleDomainChange(val)}
          collection={collection}
+          isCompact
        />
      </div>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.js
@@ -2,7 +2,8 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  label {
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
  }

  .single-line-editor-wrapper {
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js
@@ -47,18 +47,19 @@ const WsseAuth = ({ collection }) => {

  return (
    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
+      <label className="block mb-1">Username</label>
+      <div className="single-line-editor-wrapper mb-3">
        <SingleLineEditor
          value={wsseAuth.username || ''}
          theme={storedTheme}
          onSave={handleSave}
          onChange={(val) => handleUserChange(val)}
          collection={collection}
+          isCompact
        />
      </div>

-      <label className="block font-medium mb-2">Password</label>
+      <label className="block mb-1">Password</label>
      <div className="single-line-editor-wrapper flex items-center">
        <SingleLineEditor
          value={wsseAuth.password || ''}
@@ -67,6 +68,7 @@ const WsseAuth = ({ collection }) => {
          onChange={(val) => handlePasswordChange(val)}
          collection={collection}
          isSecret={true}
+          isCompact
        />
        {showWarning && <SensitiveFieldWarning fieldName="wsse-password" warningMessage={warningMessage} />}
      </div>
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
@@ -30,11 +30,11 @@ const StyledWrapper = styled.div`
    box-shadow: none;
    transition: border-color ease-in-out 0.1s;
    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};

    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
      outline: none !important;
    }
  }
--- a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
@@ -9,6 +9,8 @@ import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
 import { IconEdit, IconX, IconFileText } from '@tabler/icons';
+import Button from 'ui/Button/index';
+import ActionIcon from 'ui/ActionIcon/index';

 const Docs = ({ collection }) => {
  const dispatch = useDispatch();
@@ -55,17 +57,17 @@ const Docs = ({ collection }) => {
        <div className="flex flex-row gap-2 items-center justify-center">
          {isEditing ? (
            <>
-              <div className="editing-mode" role="tab" onClick={handleDiscardChanges}>
-                <IconX className="cursor-pointer" size={20} strokeWidth={1.5} />
-              </div>
-              <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}>
+              <Button type="button" color="secondary" onClick={handleDiscardChanges}>
+                Cancel
+              </Button>
+              <Button type="button" onClick={onSave}>
                Save
-              </button>
+              </Button>
            </>
          ) : (
-            <div className="editing-mode" role="tab" onClick={toggleViewMode}>
-              <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} />
-            </div>
+            <ActionIcon className="editing-mode" onClick={toggleViewMode}>
+              <IconEdit className="cursor-pointer" size={16} strokeWidth={1.5} />
+            </ActionIcon>
          )}
        </div>
      </div>
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/StyledWrapper.js
@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+const StyledWrapper = styled.div`
+  .icon-box {
+    &.location {
+      background-color: ${(props) => rgba(props.theme.textLink, 0.08)};
+      border: 1px solid ${(props) => rgba(props.theme.textLink, 0.09)};
+
+      svg {
+        color: ${(props) => props.theme.textLink};
+      }
+    }
+
+    &.environments {
+      background-color: ${(props) => rgba(props.theme.colors.text.green, 0.08)};
+      border: 1px solid ${(props) => rgba(props.theme.colors.text.green, 0.09)};
+
+      svg {
+        color: ${(props) => props.theme.colors.text.green};
+      }
+    }
+
+    &.requests {
+      background-color: ${(props) => rgba(props.theme.colors.text.purple, 0.08)};
+      border: 1px solid ${(props) => rgba(props.theme.colors.text.purple, 0.09)};
+
+      svg {
+        color: ${(props) => props.theme.colors.text.purple};
+      }
+    }
+
+    &.share {
+      background-color: ${(props) => rgba(props.theme.textLink, 0.08)};
+      border: 1px solid ${(props) => rgba(props.theme.textLink, 0.09)};
+
+      svg {
+        color: ${(props) => props.theme.textLink};
+      }
+    }
+
+    &.generate-docs {
+      background-color: ${(props) => rgba(props.theme.accents.primary, 0.08)};
+      border: 1px solid ${(props) => rgba(props.theme.accents.primary, 0.09)};
+
+      svg {
+        color: ${(props) => props.theme.accents.primary};
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
+import { IconFolder, IconWorld, IconApi, IconShare, IconBook } from '@tabler/icons';
 import { areItemsLoading, getItemsLoadStats } from 'utils/collections/index';
 import { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import ShareCollection from 'components/ShareCollection/index';
+import GenerateDocumentation from 'components/Sidebar/Collections/Collection/GenerateDocumentation';
 import { addTab } from 'providers/ReduxStore/slices/tabs';
+import StyledWrapper from './StyledWrapper';

 const Info = ({ collection }) => {
  const dispatch = useDispatch();
@@ -14,6 +16,7 @@ const Info = ({ collection }) => {
  const isCollectionLoading = areItemsLoading(collection);
  const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
  const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
+  const [showGenerateDocumentationModal, setShowGenerateDocumentationModal] = useState(false);

  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);

@@ -25,17 +28,17 @@ const Info = ({ collection }) => {
  };

  return (
-    <div className="w-full flex flex-col h-fit">
+    <StyledWrapper className="w-full flex flex-col h-fit">
      <div className="rounded-lg py-6">
        <div className="grid gap-5">
          {/* Location Row */}
          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-              <IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
+            <div className="icon-box location flex-shrink-0 p-3 rounded-lg">
+              <IconFolder className="w-5 h-5" stroke={1.5} />
            </div>
            <div className="ml-4">
              <div className="font-medium">Location</div>
-              <div className="mt-1 text-muted break-all text-xs">
+              <div className="mt-1 text-muted break-all">
                {collection.pathname}
              </div>
            </div>
@@ -43,15 +46,15 @@ const Info = ({ collection }) => {

          {/* Environments Row */}
          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
-              <IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
+            <div className="icon-box environments flex-shrink-0 p-3 rounded-lg">
+              <IconWorld className="w-5 h-5" stroke={1.5} />
            </div>
            <div className="ml-4">
-              <div className="font-medium text-sm">Environments</div>
+              <div className="font-medium">Environments</div>
              <div className="mt-1 flex flex-col gap-1">
                <button
                  type="button"
-                  className="text-sm text-link cursor-pointer hover:underline text-left bg-transparent"
+                  className="text-link cursor-pointer hover:underline text-left bg-transparent"
                  onClick={() => {
                    dispatch(
                      addTab({
@@ -66,7 +69,7 @@ const Info = ({ collection }) => {
                </button>
                <button
                  type="button"
-                  className="text-sm text-link cursor-pointer hover:underline text-left bg-transparent"
+                  className="text-link cursor-pointer hover:underline text-left bg-transparent"
                  onClick={() => {
                    dispatch(
                      addTab({
@@ -85,12 +88,12 @@ const Info = ({ collection }) => {

          {/* Requests Row */}
          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
-              <IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
+            <div className="icon-box requests flex-shrink-0 p-3 rounded-lg">
+              <IconApi className="w-5 h-5" stroke={1.5} />
            </div>
            <div className="ml-4">
              <div className="font-medium">Requests</div>
-              <div className="mt-1 text-muted text-xs">
+              <div className="mt-1 text-muted">
                {
                  isCollectionLoading ? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
                }
@@ -99,20 +102,33 @@ const Info = ({ collection }) => {
          </div>

          <div className="flex items-start group cursor-pointer" onClick={handleToggleShowShareCollectionModal(true)}>
-            <div className="flex-shrink-0 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
-              <IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
+            <div className="icon-box share flex-shrink-0 p-3 rounded-lg">
+              <IconShare className="w-5 h-5" stroke={1.5} />
            </div>
            <div className="ml-4 h-full flex flex-col justify-start">
              <div className="font-medium h-fit my-auto">Share</div>
-              <div className="group-hover:underline text-link text-xs">
+              <div className="group-hover:underline text-link">
                Share Collection
              </div>
            </div>
          </div>
          {showShareCollectionModal && <ShareCollection collectionUid={collection.uid} onClose={handleToggleShowShareCollectionModal(false)} />}
+
+          <div className="flex items-start group cursor-pointer" onClick={() => setShowGenerateDocumentationModal(true)}>
+            <div className="icon-box generate-docs flex-shrink-0 p-3 rounded-lg">
+              <IconBook className="w-5 h-5" stroke={1.5} />
+            </div>
+            <div className="ml-4 h-full flex flex-col justify-start">
+              <div className="font-medium h-fit my-auto">Documentation</div>
+              <div className="group-hover:underline text-link">
+                Generate Docs
+              </div>
+            </div>
+          </div>
+          {showGenerateDocumentationModal && <GenerateDocumentation collectionUid={collection.uid} onClose={() => setShowGenerateDocumentationModal(false)} />}
        </div>
      </div>
-    </div>
+    </StyledWrapper>
  );
 };

--- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
@@ -1,22 +1,29 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';

 const StyledWrapper = styled.div`
  &.card {
    background-color: ${(props) => props.theme.requestTabPanel.card.bg};

    .title {
-      border-top: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-      border-left: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-      border-right: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+      border-top: 1px solid ${(props) => props.theme.table.border};
+      border-left: 1px solid ${(props) => props.theme.table.border};
+      border-right: 1px solid ${(props) => props.theme.table.border};

      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
+
+      background-color: ${(props) => props.theme.status.warning.background};
+    }
+
+    .warning-icon {
+      color: ${(props) => props.theme.status.warning.text};
    }

    .table {
      thead {
-        background-color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.bg};
-        color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.color};
+        color: ${(props) => props.theme.table.thead.color} !important;
+        background: ${(props) => props.theme.sidebar.bg};
      }
    }
  }
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js
@@ -41,8 +41,8 @@ const RequestsNotLoaded = ({ collection }) => {

  return (
    <StyledWrapper className="w-full card my-2">
-      <div className="flex items-center gap-2 px-3 py-2 title bg-yellow-50 dark:bg-yellow-900/20">
-        <IconAlertTriangle size={16} className="text-yellow-500" />
+      <div className="flex items-center gap-2 px-3 py-2 title">
+        <IconAlertTriangle size={16} className="warning-icon" />
        <span className="font-medium">Following requests were not loaded</span>
      </div>
      <table className="w-full border-collapse">
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
@@ -16,11 +16,11 @@ const StyledWrapper = styled.div`
    box-shadow: none;
    transition: border-color ease-in-out 0.1s;
    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};

    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
      outline: none !important;
    }
  }
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
@@ -36,7 +36,7 @@ const PresetsSettings = ({ collection }) => {

  return (
    <StyledWrapper className="h-full w-full">
-      <div className="text-xs mb-4 mt-4 text-muted">
+      <div className="text-xs mb-4 text-muted">
        These presets will be used as the default values for new requests in this collection.
      </div>
      <div className="bruno-form">
--- a/packages/bruno-app/src/components/CollectionSettings/Protobuf/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Protobuf/StyledWrapper.js
@@ -8,6 +8,151 @@ const StyledWrapper = styled.div`
      color: ${(props) => props.theme.colors.text.danger};
    }
  }
+
+  /* Section labels */
+  label {
+    color: ${(props) => props.theme.text};
+  }
+
+  /* Tooltip icon */
+  .tooltip-icon {
+    color: ${(props) => props.theme.colors.text.muted};
+    cursor: pointer;
+  }
+
+  /* Error messages */
+  .error-message {
+    color: ${(props) => props.theme.colors.text.danger};
+    background-color: ${(props) => props.theme.bg};
+    border-radius: ${(props) => props.theme.border.radius.base};
+  }
+
+  /* Tables */
+  table {
+    width: 100%;
+    border-collapse: collapse;
+
+    thead {
+      th {
+        text-align: left;
+        font-size: ${(props) => props.theme.font.size.xs};
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${(props) => props.theme.table.thead.color};
+        border: 1px solid ${(props) => props.theme.table.border};
+        padding: 0.5rem 0.75rem;
+
+        &.text-right {
+          text-align: right;
+        }
+      }
+    }
+
+    tbody {
+      td {
+        border: 1px solid ${(props) => props.theme.table.border};
+        padding: 0.5rem 0.75rem;
+
+        &.text-center {
+          text-align: center;
+        }
+
+        &.text-right {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  /* File/Directory icons */
+  .file-icon,
+  .folder-icon {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  /* File/Directory names */
+  .file-name,
+  .directory-name {
+    font-weight: 500;
+    color: ${(props) => props.theme.text};
+  }
+
+  /* Path text */
+  .path-text {
+    font-size: ${(props) => props.theme.font.size.xs};
+    color: ${(props) => props.theme.colors.text.muted};
+    font-family: monospace;
+  }
+
+  /* Empty state */
+  .empty-state {
+    .empty-icon {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .empty-text {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+  }
+
+  /* Invalid file indicator */
+  .invalid-indicator {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+
+  /* Action buttons */
+  .action-button {
+    padding: 0.25rem;
+    border-radius: ${(props) => props.theme.border.radius.base};
+    transition: all 0.2s;
+
+    &.replace-button {
+      color: ${(props) => props.theme.colors.text.danger};
+
+      &:hover {
+        color: ${(props) => props.theme.colors.text.danger};
+        background-color: ${(props) => props.theme.colors.bg.danger}20;
+      }
+    }
+
+    &.remove-button {
+      color: ${(props) => props.theme.colors.text.muted};
+
+      &:hover {
+        color: ${(props) => props.theme.text};
+        background-color: ${(props) => props.theme.dropdown.hoverBg};
+      }
+    }
+  }
+
+  /* Checkbox */
+  input[type='checkbox'] {
+    cursor: pointer;
+    accent-color: ${(props) => props.theme.colors.accent};
+    border-color: ${(props) => props.theme.table.border};
+
+    &:focus {
+      outline: none;
+      border-color: ${(props) => props.theme.primary.solid};
+    }
+  }
+
+  /* Add button */
+  .btn-add-param {
+    color: ${(props) => props.theme.textLink};
+    padding-right: 0.5rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    margin-top: 0.5rem;
+    user-select: none;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: ${(props) => props.theme.primary.solid};
+    }
+  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js
@@ -113,12 +113,12 @@ const ProtobufSettings = ({ collection }) => {
      <div className="mb-6" data-testid="protobuf-proto-files-section">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center">
-            <label className="font-medium flex items-center" htmlFor="protoFiles">
+            <label className="flex items-center" htmlFor="protoFiles">
              Proto Files (
              {protoFiles.length}
              )
              <span id="proto-files-tooltip" className="ml-2">
-                <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
+                <IconAlertCircle size={16} className="tooltip-icon" />
              </span>
              <Tooltip
                anchorId="proto-files-tooltip"
@@ -131,7 +131,7 @@ const ProtobufSettings = ({ collection }) => {

        <div>
          {protoFiles.some((file) => !file.exists) && (
-            <div className="text-xs text-red-600 dark:text-red-400 mb-2 flex items-center p-2 rounded" data-testid="protobuf-invalid-files-message">
+            <div className="error-message text-xs mb-2 flex items-center p-2" data-testid="protobuf-invalid-files-message">
              <IconAlertCircle size={14} className="mr-1" />
              Some proto files cannot be found. Use the replace option to update their locations.
            </div>
@@ -140,13 +140,13 @@ const ProtobufSettings = ({ collection }) => {
          <table className="w-full border-collapse" data-testid="protobuf-proto-files-table">
            <thead>
              <tr>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                <th>
                  File
                </th>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                <th>
                  Path
                </th>
-                <th className="text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                <th className="text-right">
                  Actions
                </th>
              </tr>
@@ -154,10 +154,10 @@ const ProtobufSettings = ({ collection }) => {
            <tbody>
              {protoFiles.length === 0 ? (
                <tr>
-                  <td colSpan="3" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
-                    <div className="flex flex-col items-center">
-                      <IconFile size={24} className="text-gray-400 mb-2" />
-                      <span className="text-gray-500 dark:text-gray-400">No proto files added</span>
+                  <td colSpan="3" className="text-center">
+                    <div className="empty-state flex flex-col items-center">
+                      <IconFile size={24} className="empty-icon mb-2" />
+                      <span className="empty-text">No proto files added</span>
                    </div>
                  </td>
                </tr>
@@ -167,27 +167,27 @@ const ProtobufSettings = ({ collection }) => {

                  return (
                    <tr key={index}>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                      <td>
                        <div className="flex items-center">
-                          <IconFile size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
-                          <span className="font-medium text-gray-900 dark:text-gray-100" data-testid="protobuf-proto-file-name">
+                          <IconFile size={16} className="file-icon mr-2" />
+                          <span className="file-name" data-testid="protobuf-proto-file-name">
                            {getBasename(collection.pathname, file.path)}
                          </span>
-                          {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
+                          {!isValid && <IconAlertCircle size={12} className="invalid-indicator ml-2" />}
                        </div>
                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
-                        <div className="text-xs text-gray-600 dark:text-gray-400 font-mono">
+                      <td>
+                        <div className="path-text">
                          {file.path}
                        </div>
                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2 text-right">
+                      <td className="text-right">
                        <div className="flex items-center justify-end space-x-1">
                          {!isValid && (
                            <button
                              type="button"
                              onClick={() => handleReplaceProtoFile(index)}
-                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-1 rounded"
+                              className="action-button replace-button"
                              title="Replace file"
                            >
                              <IconFileImport size={14} />
@@ -196,7 +196,7 @@ const ProtobufSettings = ({ collection }) => {
                          <button
                            type="button"
                            onClick={() => handleRemoveProtoFile(index)}
-                            className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 p-1 rounded"
+                            className="action-button remove-button"
                            title="Remove file"
                            data-testid="protobuf-remove-file-button"
                          >
@@ -220,12 +220,12 @@ const ProtobufSettings = ({ collection }) => {
      <div className="mb-6" data-testid="protobuf-import-paths-section">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center">
-            <label className="font-medium flex items-center" htmlFor="importPaths">
+            <label className="flex items-center" htmlFor="importPaths">
              Import Paths (
              {importPaths.length}
              )
              <span id="import-paths-tooltip" className="ml-2">
-                <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
+                <IconAlertCircle size={16} className="tooltip-icon" />
              </span>
              <Tooltip
                anchorId="import-paths-tooltip"
@@ -238,7 +238,7 @@ const ProtobufSettings = ({ collection }) => {

        <div>
          {importPaths.some((path) => !path.exists) && (
-            <div className="text-xs text-red-600 dark:text-red-400 mb-2 flex items-center p-2 rounded" data-testid="protobuf-invalid-import-paths-message">
+            <div className="error-message text-xs mb-2 flex items-center p-2" data-testid="protobuf-invalid-import-paths-message">
              <IconAlertCircle size={14} className="mr-1" />
              Some import paths cannot be found at their specified locations.
            </div>
@@ -247,15 +247,15 @@ const ProtobufSettings = ({ collection }) => {
          <table className="w-full border-collapse" data-testid="protobuf-import-paths-table">
            <thead>
              <tr>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                <th>
                </th>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                <th>
                  Directory
                </th>
-                <th className="text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                <th>
                  Path
                </th>
-                <th className="text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border border-gray-200 dark:border-gray-700 px-3 py-2">
+                <th className="text-right">
                  Actions
                </th>
              </tr>
@@ -263,10 +263,10 @@ const ProtobufSettings = ({ collection }) => {
            <tbody>
              {importPaths.length === 0 ? (
                <tr>
-                  <td colSpan="4" className="border border-gray-200 dark:border-gray-700 px-3 py-8 text-center">
-                    <div className="flex flex-col items-center">
-                      <IconFolder size={24} className="text-gray-400 mb-2" />
-                      <span className="text-gray-500 dark:text-gray-400">No import paths added</span>
+                  <td colSpan="4" className="text-center">
+                    <div className="empty-state flex flex-col items-center">
+                      <IconFolder size={24} className="empty-icon mb-2" />
+                      <span className="empty-text">No import paths added</span>
                    </div>
                  </td>
                </tr>
@@ -276,37 +276,37 @@ const ProtobufSettings = ({ collection }) => {

                  return (
                    <tr key={index}>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                      <td>
                        <input
                          type="checkbox"
                          checked={importPath.enabled}
                          onChange={() => handleToggleImportPath(index)}
-                          className="h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300 dark:border-gray-600 rounded"
+                          className="h-4 w-4"
                          title={importPath.enabled ? 'Disable this import path' : 'Enable this import path'}
                          data-testid="protobuf-import-path-checkbox"
                        />
                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
+                      <td>
                        <div className="flex items-center">
-                          <IconFolder size={16} className="text-gray-500 dark:text-gray-400 mr-2" />
-                          <span className="font-medium text-gray-900 dark:text-gray-100">
+                          <IconFolder size={16} className="folder-icon mr-2" />
+                          <span className="directory-name">
                            {getBasename(collection.pathname, importPath.path)}
                          </span>
-                          {!isValid && <IconAlertCircle size={12} className="text-red-600 dark:text-red-400 ml-2" />}
+                          {!isValid && <IconAlertCircle size={12} className="invalid-indicator ml-2" />}
                        </div>
                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2">
-                        <div className="text-xs text-gray-600 dark:text-gray-400 font-mono">
+                      <td>
+                        <div className="path-text">
                          {importPath.path}
                        </div>
                      </td>
-                      <td className="border border-gray-200 dark:border-gray-700 px-3 py-2 text-right">
+                      <td className="text-right">
                        <div className="flex items-center justify-end space-x-1">
                          {!isValid && (
                            <button
                              type="button"
                              onClick={() => handleReplaceImportPath(index)}
-                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 p-1 rounded"
+                              className="action-button replace-button"
                              title="Replace directory"
                            >
                              <IconFileImport size={14} />
@@ -315,7 +315,7 @@ const ProtobufSettings = ({ collection }) => {
                          <button
                            type="button"
                            onClick={() => handleRemoveImportPath(index)}
-                            className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 p-1 rounded"
+                            className="action-button remove-button"
                            title="Remove import path"
                            data-testid="protobuf-remove-import-path-button"
                          >
--- a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js
@@ -14,11 +14,11 @@ const StyledWrapper = styled.div`
    box-shadow: none;
    transition: border-color ease-in-out 0.1s;
    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};

    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
      outline: none !important;
    }
  }
--- a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
@@ -8,7 +8,7 @@ const StyledWrapper = styled.div`
  }

  div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
  }
 `;

--- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@@ -56,7 +56,7 @@ const Script = ({ collection }) => {
  };

  return (
-    <StyledWrapper className="w-full flex flex-col h-full pt-4">
+    <StyledWrapper className="w-full flex flex-col h-full">
      <div className="text-xs mb-4 text-muted">
        Write pre and post-request scripts that will run before and after any request in this collection is sent.
      </div>
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
      border: none;
      border-bottom: solid 2px transparent;
      margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
      cursor: pointer;

      &:focus,
@@ -19,6 +19,10 @@ const StyledWrapper = styled.div`
        box-shadow: none !important;
      }

+      &:hover {
+        color: ${(props) => props.theme.tabs.active.color} !important;
+      }
+
      &.active {
        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
@@ -40,6 +44,11 @@ const StyledWrapper = styled.div`
  .muted {
    color: ${(props) => props.theme.colors.text.muted};
  }
+
+  input[type='radio'] {
+    cursor: pointer;
+    accent-color: ${(props) => props.theme.primary.solid};
+  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js
@@ -4,7 +4,7 @@ const StyledWrapper = styled.div`
  max-width: 800px;

  div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
  }
 `;

--- a/packages/bruno-app/src/components/CollectionSettings/Vars/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/index.js
@@ -14,7 +14,7 @@ const Vars = ({ collection }) => {

  return (
    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
+      <div className="flex-1">
        <div className="mb-3 title text-xs">Pre Request</div>
        <VarsTable collection={collection} vars={requestVars} varType="request" />
      </div>
--- a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js
@@ -1,5 +1,26 @@
 import styled from 'styled-components';

-const StyledWrapper = styled.div``;
+const StyledWrapper = styled.div`
+  /* Info icon */
+  .info-icon {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  /* Required field asterisk */
+  .required-asterisk {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+
+  /* Error messages */
+  .error-message {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+
+  /* Checkbox */
+  input[type='checkbox'] {
+    cursor: pointer;
+    accent-color: ${(props) => props.theme.primary.solid};
+  }
+`;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
+++ b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
@@ -11,6 +11,7 @@ import moment from 'moment';
 import 'moment-timezone';
 import { Tooltip } from 'react-tooltip';
 import { isEmpty } from 'lodash';
+import StyledWrapper from './StyledWrapper';

 const removeEmptyValues = (obj) => {
  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== null && value !== undefined));
@@ -225,145 +226,147 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
        </div>
      )}
    >
-      <form onSubmit={(e) => e.preventDefault()} className="px-2">
-        {isRawMode ? (
-          <div>
-            <div className="flex items-center gap-2 mb-1">
-              <label className="block">Set-Cookie String</label>
-              <IconInfoCircle id="cookie-raw-info" size={16} strokeWidth={1.5} className="text-gray-400" />
-              <Tooltip
-                anchorId="cookie-raw-info"
-                className="tooltip-mod"
-                html="Key, Path, and Domain are immutable properties and cannot be modified for existing cookies"
+      <StyledWrapper>
+        <form onSubmit={(e) => e.preventDefault()} className="px-2">
+          {isRawMode ? (
+            <div>
+              <div className="flex items-center gap-2 mb-1">
+                <label className="block">Set-Cookie String</label>
+                <IconInfoCircle id="cookie-raw-info" size={16} strokeWidth={1.5} className="info-icon" />
+                <Tooltip
+                  anchorId="cookie-raw-info"
+                  className="tooltip-mod"
+                  html="Key, Path, and Domain are immutable properties and cannot be modified for existing cookies"
+                />
+              </div>
+              <textarea
+                value={cookieString}
+                onChange={(e) => setCookieString(e.target.value)}
+                className="block textbox w-full h-24"
+                placeholder="key=value; key2=value2"
              />
            </div>
-            <textarea
-              value={cookieString}
-              onChange={(e) => setCookieString(e.target.value)}
-              className="block textbox w-full h-24"
-              placeholder="key=value; key2=value2"
-            />
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block mb-1">
-                  Domain<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="domain"
-                  // Auto-focus if its add-new i.e. when domain prop is empty
-                  autoFocus={!domain && !formik.values.domain}
-                  value={formik.values.domain}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.domain && formik.errors.domain && (
-                  <div className="text-red-500 mt-1">{formik.errors.domain}</div>
-                )}
-              </div>
-              <div>
-                <label className="block mb-1">Path</label>
-                <input
-                  type="text"
-                  name="path"
-                  value={formik.values.path}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.path && formik.errors.path && (
-                  <div className="text-red-500 mt-1">{formik.errors.path}</div>
-                )}
-              </div>
-              <div>
-                <label className="block mb-1">
-                  Key<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="key"
-                  // Auto focus when add-for-domain i.e. if domain is already prefilled
-                  autoFocus={!!domain && !formik.values.key}
-                  value={formik.values.key}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.key && formik.errors.key && (
-                  <div className="text-red-500 mt-1">{formik.errors.key}</div>
-                )}
+          ) : (
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block mb-1">
+                    Domain<span className="required-asterisk">*</span>{' '}
+                  </label>
+                  <input
+                    type="text"
+                    name="domain"
+                    // Auto-focus if its add-new i.e. when domain prop is empty
+                    autoFocus={!domain && !formik.values.domain}
+                    value={formik.values.domain}
+                    onChange={formik.handleChange}
+                    className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                    disabled={!!cookie}
+                  />
+                  {formik.touched.domain && formik.errors.domain && (
+                    <div className="error-message mt-1">{formik.errors.domain}</div>
+                  )}
+                </div>
+                <div>
+                  <label className="block mb-1">Path</label>
+                  <input
+                    type="text"
+                    name="path"
+                    value={formik.values.path}
+                    onChange={formik.handleChange}
+                    className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                    disabled={!!cookie}
+                  />
+                  {formik.touched.path && formik.errors.path && (
+                    <div className="error-message mt-1">{formik.errors.path}</div>
+                  )}
+                </div>
+                <div>
+                  <label className="block mb-1">
+                    Key<span className="required-asterisk">*</span>{' '}
+                  </label>
+                  <input
+                    type="text"
+                    name="key"
+                    // Auto focus when add-for-domain i.e. if domain is already prefilled
+                    autoFocus={!!domain && !formik.values.key}
+                    value={formik.values.key}
+                    onChange={formik.handleChange}
+                    className="block textbox non-passphrase-input w-full disabled:opacity-50"
+                    disabled={!!cookie}
+                  />
+                  {formik.touched.key && formik.errors.key && (
+                    <div className="error-message mt-1">{formik.errors.key}</div>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block mb-1">
+                    Value<span className="required-asterisk">*</span>{' '}
+                  </label>
+                  <input
+                    type="text"
+                    name="value"
+                    // Auto-focus when its in edit mode i.e. cookie prop is present
+                    autoFocus={!!cookie}
+                    value={formik.values.value}
+                    onChange={formik.handleChange}
+                    className="block textbox non-passphrase-input w-full"
+                  />
+                  {formik.touched.value && formik.errors.value && (
+                    <div className="error-message mt-1">{formik.errors.value}</div>
+                  )}
+                </div>
              </div>

-              <div>
-                <label className="block mb-1">
-                  Value<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="value"
-                  // Auto-focus when its in edit mode i.e. cookie prop is present
-                  autoFocus={!!cookie}
-                  value={formik.values.value}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full"
-                />
-                {formik.touched.value && formik.errors.value && (
-                  <div className="text-red-500 mt-1">{formik.errors.value}</div>
-                )}
+              {/* Date Picker */}
+              <div className="w-full flex items-end">
+                <div>
+                  <label className="block mb-1">Expiration ({moment.tz.guess()})</label>
+                  <input
+                    type="datetime-local"
+                    name="expires"
+                    value={formik.values.expires}
+                    onChange={(e) => {
+                      formik.handleChange(e);
+                    }}
+                    className="block textbox non-passphrase-input w-full"
+                    min={moment().format(moment.HTML5_FMT.DATETIME_LOCAL)}
+                  />
+                  {formik.touched.expires && formik.errors.expires && (
+                    <div className="error-message mt-1">{formik.errors.expires}</div>
+                  )}
+                </div>
+
+                {/* Checkboxes */}
+                <div className="flex space-x-4 ml-auto">
+                  <label className="flex items-center">
+                    <input
+                      type="checkbox"
+                      name="secure"
+                      checked={formik.values.secure}
+                      onChange={formik.handleChange}
+                      className="mr-2"
+                    />
+                    <span>Secure</span>
+                  </label>
+
+                  <label className="flex items-center">
+                    <input
+                      type="checkbox"
+                      name="httpOnly"
+                      checked={formik.values.httpOnly}
+                      onChange={formik.handleChange}
+                      className="mr-2"
+                    />
+                    <span>HTTP Only</span>
+                  </label>
+                </div>
              </div>
            </div>
-
-            {/* Date Picker */}
-            <div className="w-full flex items-end">
-              <div>
-                <label className="block mb-1">Expiration ({moment.tz.guess()})</label>
-                <input
-                  type="datetime-local"
-                  name="expires"
-                  value={formik.values.expires}
-                  onChange={(e) => {
-                    formik.handleChange(e);
-                  }}
-                  className="block textbox non-passphrase-input w-full"
-                  min={moment().format(moment.HTML5_FMT.DATETIME_LOCAL)}
-                />
-                {formik.touched.expires && formik.errors.expires && (
-                  <div className="text-red-500 mt-1">{formik.errors.expires}</div>
-                )}
-              </div>
-
-              {/* Checkboxes */}
-              <div className="flex space-x-4 ml-auto">
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    name="secure"
-                    checked={formik.values.secure}
-                    onChange={formik.handleChange}
-                    className="mr-2"
-                  />
-                  <span>Secure</span>
-                </label>
-
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    name="httpOnly"
-                    checked={formik.values.httpOnly}
-                    onChange={formik.handleChange}
-                    className="mr-2"
-                  />
-                  <span>HTTP Only</span>
-                </label>
-              </div>
-            </div>
-          </div>
-        )}
-      </form>
+          )}
+        </form>
+      </StyledWrapper>
    </Modal>
  );
 };
--- a/packages/bruno-app/src/components/Cookies/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
@@ -28,11 +28,11 @@ const Wrapper = styled.div`
    box-shadow: none;
    transition: border-color ease-in-out 0.1s;
    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};

    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
      outline: none !important;
    }
  }
@@ -70,6 +70,92 @@ const Wrapper = styled.div`
    background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px;
    background-attachment: local, local, scroll, scroll;
  }
+
+  /* Warning icon */
+  .warning-icon {
+    color: ${(props) => props.theme.colors.text.warning};
+  }
+
+  /* Empty state */
+  .empty-icon {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .empty-text {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  /* Domain count text */
+  .domain-count {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  /* Action buttons */
+  .action-button {
+    color: ${(props) => props.theme.colors.text.muted};
+    transition: color 0.2s;
+    cursor: pointer;
+
+    &:hover {
+      color: ${(props) => props.theme.text};
+    }
+  }
+
+  .action-button-danger {
+    color: ${(props) => props.theme.text};
+    transition: color 0.2s;
+    cursor: pointer;
+
+    &:hover {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+
+  /* Table styles */
+  table {
+    thead {
+      tr {
+        border-bottom: 1px solid ${(props) => props.theme.table.border};
+        color: ${(props) => props.theme.table.thead.color};
+
+        th {
+          color: ${(props) => props.theme.table.thead.color};
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        border-bottom: 1px solid ${(props) => props.theme.table.border};
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+
+  /* Edit button */
+  .edit-button {
+    color: ${(props) => props.theme.text};
+    transition: color 0.2s;
+    cursor: pointer;
+
+    &:hover {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+  }
+
+  /* Delete button */
+  .delete-button {
+    color: ${(props) => props.theme.text};
+    transition: color 0.2s;
+    cursor: pointer;
+
+    &:hover {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/components/Cookies/index.js
+++ b/packages/bruno-app/src/components/Cookies/index.js
@@ -14,7 +14,7 @@ import Button from 'ui/Button';
 const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
  <Modal onClose={onClose} handleCancel={onClose} title="Clear Domain Cookies" hideFooter={true}>
    <div className="flex items-center font-normal">
-      <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+      <IconAlertTriangle size={32} strokeWidth={1.5} className="warning-icon" />
      <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
    </div>
    <div className="font-normal mt-4">
@@ -23,12 +23,12 @@ const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (

    <div className="flex justify-between mt-6">
      <div>
-        <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
+        <Button color="secondary" variant="ghost" onClick={onClose}>
          Close
        </Button>
      </div>
      <div>
-        <Button size="sm" color="danger" onClick={onClear}>
+        <Button color="danger" onClick={onClear}>
          Clear All
        </Button>
      </div>
@@ -39,7 +39,7 @@ const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
 const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
  <Modal onClose={onClose} handleCancel={onClose} title="Delete Cookie" hideFooter={true}>
    <div className="flex items-center font-normal">
-      <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+      <IconAlertTriangle size={32} strokeWidth={1.5} className="warning-icon" />
      <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
    </div>
    <div className="font-normal mt-4">
@@ -48,12 +48,12 @@ const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (

    <div className="flex justify-between mt-6">
      <div>
-        <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
+        <Button color="secondary" variant="ghost" onClick={onClose}>
          Close
        </Button>
      </div>
      <div>
-        <Button size="sm" color="danger" onClick={onDelete}>
+        <Button color="danger" onClick={onDelete}>
          Delete
        </Button>
      </div>
@@ -159,9 +159,9 @@ const CollectionProperties = ({ onClose }) => {
          {!cookies || !cookies.length ? (
            // No cookies found
            <div className="flex items-center justify-center flex-col">
-              <IconCookieOff size={48} strokeWidth={1.5} className="text-gray-500" />
+              <IconCookieOff size={48} strokeWidth={1.5} className="empty-icon" />
              <h2 className="text-lg font-medium mt-4">No cookies found</h2>
-              <p className="text-gray-500 mt-2">Add cookies to get started</p>
+              <p className="empty-text mt-2">Add cookies to get started</p>
              <Button
                type="submit"
                size="sm"
@@ -180,7 +180,7 @@ const CollectionProperties = ({ onClose }) => {
            <div className="flex items-center justify-center flex-col">
              <IconSearch size={48} />
              <h2 className="text-lg font-medium mt-4">No search results</h2>
-              <p className="text-gray-500 mt-2">Try a different search term</p>
+              <p className="empty-text mt-2">Try a different search term</p>
            </div>
          ) : (
            // Show cookies list
@@ -191,14 +191,14 @@ const CollectionProperties = ({ onClose }) => {
                    <Accordion.Header index={i} className="flex items-center">
                      <div className="flex items-center">
                        <span>{domainWithCookies.domain}</span>
-                        <span className="ml-2 text-xs dark:text-gray-300 text-gray-500">
+                        <span className="domain-count ml-2 text-xs">
                          ({domainWithCookies.cookies.length}{' '}
                          {domainWithCookies.cookies.length === 1 ? 'cookie' : 'cookies'})
                        </span>
                        <div className="ml-auto flex items-center gap-2">
                          <button
                            type="submit"
-                            className="flex items-center gap-1 text-gray-500 hover:text-gray-950 dark:text-white dark:hover:text-gray-300"
+                            className="action-button flex items-center gap-1"
                            onClick={(e) => {
                              e.stopPropagation();
                              handleAddCookie(domainWithCookies.domain);
@@ -211,7 +211,7 @@ const CollectionProperties = ({ onClose }) => {
                              e.stopPropagation();
                              handleClearDomainCookies(domainWithCookies.domain);
                            }}
-                            className="text-gray-950 dark:text-white dark:hover:hover:text-red-600 hover:text-red-600  mr-2"
+                            className="action-button-danger mr-2"
                          >
                            <IconTrash strokeWidth={1.5} size={16} />
                          </button>
@@ -222,7 +222,7 @@ const CollectionProperties = ({ onClose }) => {
                      <div className="flex items-center justify-between">
                        <table className="w-full">
                          <thead>
-                            <tr className="text-left border-b border-gray-200 dark:border-neutral-600 text-gray-700 dark:text-gray-300">
+                            <tr className="text-left">
                              <th className="py-2 px-4 font-medium w-32">Name</th>
                              <th className="py-2 px-4 font-medium w-52">Value</th>
                              <th className="py-2 px-4 font-medium">Path</th>
@@ -234,7 +234,7 @@ const CollectionProperties = ({ onClose }) => {
                          </thead>
                          <tbody>
                            {domainWithCookies.cookies.map((cookie) => (
-                              <tr key={cookie.key} className="border-b border-gray-200 dark:border-neutral-600 last:border-none">
+                              <tr key={cookie.key}>
                                <td className="py-2 px-4 truncate">
                                  <span id={`cookie-key-${cookie.key}`}>{cookie.key}</span>
                                  <Tooltip
@@ -275,8 +275,7 @@ const CollectionProperties = ({ onClose }) => {
                                        e.stopPropagation();
                                        handleEditCookie(domainWithCookies.domain, cookie);
                                      }}
-                                      className="text-gray-700  hover:text-gray-950
-                                    dark:text-white dark:hover:text-gray-300"
+                                      className="edit-button"
                                    >
                                      <IconEdit strokeWidth={1.5} size={16} />
                                    </button>
@@ -285,7 +284,7 @@ const CollectionProperties = ({ onClose }) => {
                                        e.stopPropagation();
                                        handleDeleteCookie(domainWithCookies.domain, cookie.path, cookie.key);
                                      }}
-                                      className="text-gray-950 dark:text-white dark:hover:hover:text-red-600  hover:text-red-600"
+                                      className="delete-button"
                                    >
                                      <IconTrash strokeWidth={1.5} size={16} />
                                    </button>
--- a/packages/bruno-app/src/components/Devtools/Console/DebugTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/DebugTab/StyledWrapper.js
@@ -38,20 +38,6 @@ const StyledWrapper = styled.div`
    gap: 8px;
  }

-  .control-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    background: transparent;
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
  .debug-content {
    flex: 1;
    overflow: hidden;
--- a/packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/NetworkTab/StyledWrapper.js
@@ -32,12 +32,6 @@ const StyledWrapper = styled.div`
    }
  }

-  .network-controls {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
  .network-content {
    flex: 1;
    overflow: hidden;
@@ -81,11 +75,10 @@ const StyledWrapper = styled.div`
    display: grid;
    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
    gap: 12px;
-    padding: 8px 16px;
+    padding: 4px 16px;
    background: ${(props) => props.theme.console.headerBg};
    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: ${(props) => props.theme.font.size.xs};
-    font-weight: 500;
+    font-size: 10px;
    color: ${(props) => props.theme.console.titleColor};
    text-transform: uppercase;
    letter-spacing: 0.5px;
@@ -103,8 +96,7 @@ const StyledWrapper = styled.div`
    display: grid;
    grid-template-columns: 80px 80px 150px 1fr 100px 80px 80px;
    gap: 12px;
-    padding: 6px 16px;
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    padding: 2px 16px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    font-size: ${(props) => props.theme.font.size.sm};
@@ -115,7 +107,8 @@ const StyledWrapper = styled.div`
    }

    &.selected {
-      background: ${(props) => props.theme.console.buttonHoverBg};
+      padding-left: 13px;
+      background: ${(props) => props.theme.console.logHoverBg};
      border-left: 3px solid ${(props) => props.theme.console.checkboxColor};
    }
  }
@@ -123,25 +116,19 @@ const StyledWrapper = styled.div`
  .method-badge {
    display: inline-flex;
    align-items: center;
-    justify-content: center;
-    padding: 2px 6px;
-    border-radius: 4px;
+    justify-content: start;
    font-size: 10px;
-    font-weight: 500;
-    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 45px;
  }

  .status-badge {
-    font-weight: 500;
    font-size: ${(props) => props.theme.font.size.sm};
  }

  .request-domain {
    color: ${(props) => props.theme.console.messageColor};
-    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -174,120 +161,6 @@ const StyledWrapper = styled.div`
    font-size: ${(props) => props.theme.font.size.xs};
    text-align: right;
  }
-
-  .filter-dropdown {
-    position: relative;
-  }
-
-  .filter-dropdown-trigger {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 8px;
-    background: transparent;
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: ${(props) => props.theme.font.size.sm};
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-    }
-
-    .filter-summary {
-      font-weight: 500;
-      min-width: 24px;
-      text-align: center;
-    }
-  }
-
-  .filter-dropdown-menu {
-    position: absolute;
-    top: calc(100% + 4px);
-    right: 0;
-    min-width: 200px;
-    max-width: 250px;
-    background: ${(props) => props.theme.console.dropdownBg};
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    overflow: hidden;
-  }
-
-  .filter-dropdown-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    background: ${(props) => props.theme.console.dropdownHeaderBg};
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
-    color: ${(props) => props.theme.console.titleColor};
-  }
-
-  .filter-toggle-all {
-    background: transparent;
-    border: none;
-    color: ${(props) => props.theme.console.buttonColor};
-    cursor: pointer;
-    font-size: ${(props) => props.theme.font.size.xs};
-    font-weight: 500;
-    padding: 2px 4px;
-    border-radius: 2px;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-    }
-  }
-
-  .filter-dropdown-options {
-    padding: 4px 0;
-  }
-
-  .filter-option {
-    display: flex;
-    align-items: center;
-    padding: 6px 12px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.console.optionHoverBg};
-    }
-
-    input[type="checkbox"] {
-      margin: 0 8px 0 0;
-      width: 14px;
-      height: 14px;
-      accent-color: ${(props) => props.theme.console.checkboxColor};
-    }
-  }
-
-  .filter-option-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex: 1;
-  }
-
-  .filter-option-label {
-    color: ${(props) => props.theme.console.optionLabelColor};
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 400;
-  }
-
-  .filter-option-count {
-    color: ${(props) => props.theme.console.optionCountColor};
-    font-size: ${(props) => props.theme.font.size.xs};
-    font-weight: 400;
-    margin-left: auto;
-  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/Devtools/Console/NetworkTab/index.js
+++ b/packages/bruno-app/src/components/Devtools/Console/NetworkTab/index.js
@@ -1,128 +1,33 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import {
-  IconFilter,
-  IconChevronDown,
  IconNetwork
 } from '@tabler/icons';
 import {
-  updateNetworkFilter,
-  toggleAllNetworkFilters,
  setSelectedRequest
 } from 'providers/ReduxStore/slices/logs';
 import StyledWrapper from './StyledWrapper';

 const MethodBadge = ({ method }) => {
-  const getMethodColor = (method) => {
-    switch (method?.toUpperCase()) {
-      case 'GET': return '#10b981';
-      case 'POST': return '#8b5cf6';
-      case 'PUT': return '#f59e0b';
-      case 'DELETE': return '#ef4444';
-      case 'PATCH': return '#06b6d4';
-      case 'HEAD': return '#6b7280';
-      case 'OPTIONS': return '#84cc16';
-      default: return '#6b7280';
-    }
-  };
+  const methodLower = method?.toLowerCase() || 'get';

  return (
-    <span
-      className="method-badge"
-      style={{ backgroundColor: getMethodColor(method) }}
-    >
+    <span className={`method-badge ${methodLower}`}>
      {method?.toUpperCase() || 'GET'}
    </span>
  );
 };

 const StatusBadge = ({ status, statusCode }) => {
-  const getStatusColor = (code) => {
-    if (code >= 200 && code < 300) return '#10b981';
-    if (code >= 300 && code < 400) return '#f59e0b';
-    if (code >= 400 && code < 500) return '#ef4444';
-    if (code >= 500) return '#dc2626';
-    return '#6b7280';
-  };
-
  const displayStatus = statusCode || status;

  return (
-    <span
-      className="status-badge"
-      style={{ color: getStatusColor(statusCode) }}
-    >
+    <span className="status-badge">
      {displayStatus}
    </span>
  );
 };

-const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggleAll }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-
-  const allFiltersEnabled = Object.values(filters).every((f) => f);
-  const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  return (
-    <div className="filter-dropdown" ref={dropdownRef}>
-      <button
-        className="filter-dropdown-trigger"
-        onClick={() => setIsOpen(!isOpen)}
-        title="Filter requests by method"
-      >
-        <IconFilter size={16} strokeWidth={1.5} />
-        <span className="filter-summary">
-          {activeFilters.length === Object.keys(filters).length ? 'All' : `${activeFilters.length}/${Object.keys(filters).length}`}
-        </span>
-        <IconChevronDown size={14} strokeWidth={1.5} />
-      </button>
-
-      {isOpen && (
-        <div className="filter-dropdown-menu right">
-          <div className="filter-dropdown-header">
-            <span>Filter by Method</span>
-            <button
-              className="filter-toggle-all"
-              onClick={() => onToggleAll(!allFiltersEnabled)}
-            >
-              {allFiltersEnabled ? 'Hide All' : 'Show All'}
-            </button>
-          </div>
-
-          <div className="filter-dropdown-options">
-            {Object.keys(filters).map((method) => (
-              <label key={method} className="filter-option">
-                <input
-                  type="checkbox"
-                  checked={filters[method]}
-                  onChange={(e) => onFilterToggle(method, e.target.checked)}
-                />
-                <div className="filter-option-content">
-                  <MethodBadge method={method} />
-                  <span className="filter-option-label">{method}</span>
-                  <span className="filter-option-count">({requestCounts[method] || 0})</span>
-                </div>
-              </label>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
 const RequestRow = ({ request, isSelected, onClick }) => {
  const { data } = request;
  const { request: req, response: res, timestamp } = data;
@@ -241,22 +146,6 @@ const NetworkTab = () => {
    });
  }, [allRequests, networkFilters]);

-  const requestCounts = useMemo(() => {
-    return allRequests.reduce((counts, request) => {
-      const method = request.data?.request?.method?.toUpperCase() || 'GET';
-      counts[method] = (counts[method] || 0) + 1;
-      return counts;
-    }, {});
-  }, [allRequests]);
-
-  const handleFilterToggle = (method, enabled) => {
-    dispatch(updateNetworkFilter({ method, enabled }));
-  };
-
-  const handleToggleAllFilters = (enabled) => {
-    dispatch(toggleAllNetworkFilters(enabled));
-  };
-
  const handleRequestClick = (request) => {
    dispatch(setSelectedRequest(request));
  };
--- a/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
@@ -15,7 +15,7 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 8px 16px;
+    padding: 2px 8px;
    background: ${(props) => props.theme.console.headerBg};
    border-bottom: 1px solid ${(props) => props.theme.console.border};
    flex-shrink: 0;
@@ -27,7 +27,6 @@ const StyledWrapper = styled.div`
    gap: 8px;
    color: ${(props) => props.theme.console.titleColor};
    font-size: ${(props) => props.theme.font.size.base};
-    font-weight: 500;

    .request-time {
      color: ${(props) => props.theme.console.countColor};
@@ -66,7 +65,7 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    gap: 6px;
-    padding: 8px 16px;
+    padding: 4px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
@@ -92,7 +91,7 @@ const StyledWrapper = styled.div`
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
-    padding: 16px;
+    padding: 8px;
    min-height: 0;
    height: 0;
  }
@@ -170,8 +169,7 @@ const StyledWrapper = styled.div`
        z-index: 10;

        td {
-          padding: 8px 12px;
-          font-weight: 500;
+          padding: 4px 8px;
          color: ${(props) => props.theme.console.titleColor};
          text-transform: uppercase;
          font-size: ${(props) => props.theme.font.size.xs};
@@ -198,7 +196,7 @@ const StyledWrapper = styled.div`
        }

        td {
-          padding: 8px 12px;
+          padding: 2px 8px;
          vertical-align: top;
          word-break: break-word;
        }
@@ -256,7 +254,7 @@ const StyledWrapper = styled.div`
  }

  .response-body-container {
-    border-radius: 4px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
    overflow: hidden;
    height: 400px;
    display: flex;
@@ -270,7 +268,7 @@ const StyledWrapper = styled.div`
    }

    div[role="tablist"] {
-      padding: 8px 12px;
+      padding: 4px 8px;
      border-bottom: 1px solid ${(props) => props.theme.console.border};
      display: flex !important;
      gap: 8px !important;
@@ -305,7 +303,7 @@ const StyledWrapper = styled.div`
    }
  }

-  .network-logs-container {
+  .network-logs-wrapper {
    border: 1px solid ${(props) => props.theme.console.border};
    border-radius: 4px;
    overflow: hidden;
@@ -313,17 +311,17 @@ const StyledWrapper = styled.div`
    min-height: 200px;
    max-height: 400px;

-    .network-logs {
+    .network-logs-container {
      background: ${(props) => props.theme.console.contentBg} !important;
      color: ${(props) => props.theme.console.messageColor} !important;
      height: 100% !important;
      max-height: 400px !important;
-      
-      pre {
+      padding: 0.5rem !important;
+
+      .network-logs-pre {
        color: ${(props) => props.theme.console.messageColor} !important;
        font-size: ${(props) => props.theme.font.size.xs} !important;
        line-height: 1.4 !important;
-        padding: 12px !important;
      }
    }
  }
--- a/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js
+++ b/packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js
@@ -141,7 +141,7 @@ const NetworkTab = ({ response }) => {
    <div className="tab-content">
      <div className="section">
        <h4>Network Logs</h4>
-        <div className="network-logs-container">
+        <div className="network-logs-wrapper">
          {timeline.length > 0 ? (
            <Network logs={timeline} />
          ) : (
--- a/packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/StyledWrapper.js
@@ -13,7 +13,7 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 0 16px;
+    padding: 0 8px;
    background: ${(props) => props.theme.console.headerBg};
    border-bottom: 1px solid ${(props) => props.theme.console.border};
    flex-shrink: 0;
@@ -30,7 +30,7 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    gap: 6px;
-    padding: 6px 12px;
+    padding: 4px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
@@ -38,8 +38,6 @@ const StyledWrapper = styled.div`
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
-    border-radius: 4px 4px 0 0;

    &:hover {
      background: ${(props) => props.theme.console.buttonHoverBg};
@@ -47,9 +45,9 @@ const StyledWrapper = styled.div`
    }

    &.active {
-      color: ${(props) => props.theme.console.checkboxColor};
-      border-bottom-color: ${(props) => props.theme.console.checkboxColor};
-      background: ${(props) => props.theme.console.contentBg};
+      color: ${(props) => props.theme.primary.strong};
+      border-bottom-color: ${(props) => props.theme.primary.strong};
+      background: ${(props) => props.theme.background.mantle};
    }
  }

@@ -144,9 +142,6 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    gap: 4px;
-    margin-right: 8px;
-    padding-right: 8px;
-    border-right: 1px solid ${(props) => props.theme.console.border};
  }

  .action-controls {
@@ -159,23 +154,21 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
-    width: 28px;
-    height: 28px;
+    width: 24px;
+    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
+    color: ${(props) => props.theme.text};
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
+      background: ${(props) => props.theme.background.surface0};
    }

    &.close-button:hover {
-      background: #e81123;
-      color: white;
+      background: ${(props) => props.theme.background.surface0};
    }
  }

@@ -187,19 +180,17 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    gap: 6px;
-    padding: 6px 8px;
+    padding: 2px 8px;
    background: transparent;
-    border: 1px solid ${(props) => props.theme.console.border};
-    border-radius: 4px;
-    color: ${(props) => props.theme.console.buttonColor};
+    border: 1px solid ${(props) => props.theme.border.border0};
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    color: ${(props) => props.theme.text};
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: ${(props) => props.theme.font.size.sm};

    &:hover {
-      background: ${(props) => props.theme.console.buttonHoverBg};
-      color: ${(props) => props.theme.console.buttonHoverColor};
-      border-color: ${(props) => props.theme.console.border};
+      background: ${(props) => props.theme.background.surface0};
    }

    .filter-summary {
@@ -232,7 +223,7 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 8px 12px;
+    padding: 4px 12px;
    background: ${(props) => props.theme.console.dropdownHeaderBg};
    border-bottom: 1px solid ${(props) => props.theme.console.border};
    font-size: ${(props) => props.theme.font.size.sm};
@@ -263,7 +254,7 @@ const StyledWrapper = styled.div`
  .filter-option {
    display: flex;
    align-items: center;
-    padding: 6px 12px;
+    padding: 4px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;

@@ -325,20 +316,6 @@ const StyledWrapper = styled.div`
  .logs-container {
    padding: 8px 0;
  }
-    
-  .method-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: 10px;
-    font-weight: 500;
-    color: white;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    min-width: 45px;
-  }

  .log-entry {
    display: flex;
--- a/packages/bruno-app/src/components/Devtools/Console/TerminalTab/SessionList.js
+++ b/packages/bruno-app/src/components/Devtools/Console/TerminalTab/SessionList.js
@@ -5,10 +5,9 @@ import ToolHint from 'components/ToolHint/index';

 const StyledSessionList = styled.div`
  .session-list-item {
-    padding: 10px 12px;
+    padding: 2px 6px;
    cursor: pointer;
    border-bottom: 1px solid ${(props) => props.theme.border || 'rgba(255, 255, 255, 0.05)'};
-    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
@@ -24,7 +23,8 @@ const StyledSessionList = styled.div`

    &.active {
      background: ${(props) => props.theme.sidebarActive || 'rgba(59, 142, 234, 0.12)'};
-      border-left: 2px solid ${(props) => props.theme.brandColor || '#3b8eea'};
+      border-left: 2px solid ${(props) => props.theme.primary.subtle};
+      padding-left: 4px;
    }

    &:last-child {
--- a/packages/bruno-app/src/components/Devtools/Console/TerminalTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Devtools/Console/TerminalTab/StyledWrapper.js
@@ -30,7 +30,7 @@ const StyledWrapper = styled.div`
  }

  .terminal-sessions-header {
-    padding: 12px;
+    padding: 6px 8px;
    font-weight: 600;
    font-size: 13px;
    color: ${(props) => props.theme.text};
--- a/packages/bruno-app/src/components/Devtools/Console/index.js
+++ b/packages/bruno-app/src/components/Devtools/Console/index.js
@@ -182,19 +182,6 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
  const allFiltersEnabled = Object.values(filters).every((f) => f);
  const activeFilters = Object.entries(filters).filter(([_, enabled]) => enabled);

-  const getMethodColor = (method) => {
-    switch (method?.toUpperCase()) {
-      case 'GET': return '#10b981';
-      case 'POST': return '#8b5cf6';
-      case 'PUT': return '#f59e0b';
-      case 'DELETE': return '#ef4444';
-      case 'PATCH': return '#06b6d4';
-      case 'HEAD': return '#6b7280';
-      case 'OPTIONS': return '#84cc16';
-      default: return '#6b7280';
-    }
-  };
-
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -241,9 +228,6 @@ const NetworkFilterDropdown = ({ filters, requestCounts, onFilterToggle, onToggl
                  onChange={(e) => onFilterToggle(method, e.target.checked)}
                />
                <div className="filter-option-content">
-                  <span className="method-badge" style={{ backgroundColor: getMethodColor(method) }}>
-                    {method}
-                  </span>
                  <span className="filter-option-label">{method}</span>
                  <span className="filter-option-count">({requestCounts[method] || 0})</span>
                </div>
--- a/packages/bruno-app/src/components/Devtools/index.js
+++ b/packages/bruno-app/src/components/Devtools/index.js
@@ -1,6 +1,8 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { darken } from 'polished';
 import Console from './Console';
+import { useTheme } from 'providers/Theme';

 const MIN_DEVTOOLS_HEIGHT = 150;
 const MAX_DEVTOOLS_HEIGHT = window.innerHeight * 0.7;
@@ -10,6 +12,9 @@ const Devtools = ({ mainSectionRef }) => {
  const isDevtoolsOpen = useSelector((state) => state.logs.isConsoleOpen);
  const [devtoolsHeight, setDevtoolsHeight] = useState(DEFAULT_DEVTOOLS_HEIGHT);
  const [isResizingDevtools, setIsResizingDevtools] = useState(false);
+  const { theme } = useTheme();
+
+  const dragHandleColor = useMemo(() => darken(0.1, theme.primary.subtle), [theme.primary.subtle]);

  const handleDevtoolsResizeStart = useCallback((e) => {
    e.preventDefault();
@@ -68,15 +73,15 @@ const Devtools = ({ mainSectionRef }) => {
      <div
        onMouseDown={handleDevtoolsResizeStart}
        style={{
-          height: '4px',
+          height: '2px',
          cursor: 'row-resize',
-          backgroundColor: isResizingDevtools ? '#0078d4' : 'transparent',
+          backgroundColor: isResizingDevtools ? dragHandleColor : 'transparent',
          transition: 'background-color 0.2s ease',
          zIndex: 20,
          position: 'relative'
        }}
-        onMouseEnter={(e) => e.target.style.backgroundColor = '#0078d4'}
-        onMouseLeave={(e) => e.target.style.backgroundColor = isResizingDevtools ? '#0078d4' : 'transparent'}
+        onMouseEnter={(e) => e.target.style.backgroundColor = dragHandleColor}
+        onMouseLeave={(e) => e.target.style.backgroundColor = isResizingDevtools ? dragHandleColor : 'transparent'}
      />
      <div style={{ height: `${devtoolsHeight}px`, overflow: 'hidden', position: 'relative' }}>
        <Console />
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -1,12 +1,20 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';

 const Wrapper = styled.div`
  min-width: 160px;
-  font-size: ${(props) => props.theme.font.size.base};
+  font-size: ${(props) => props.theme.font.size.sm};
  color: ${(props) => props.theme.dropdown.color};
  background-color: ${(props) => props.theme.dropdown.bg};
-  box-shadow: ${(props) => props.theme.shadow.sm};
+  ${(props) =>
+    props.theme.dropdown.shadow && props.theme.dropdown.shadow !== 'none'
+      ? `box-shadow: ${props.theme.dropdown.shadow};`
+      : ''}
  border-radius: ${(props) => props.theme.border.radius.base};
+  ${(props) =>
+    props.theme.dropdown.border && props.theme.dropdown.border !== 'none'
+      ? `border: 1px solid ${props.theme.dropdown.border};`
+      : ''}
  max-height: 90vh;
  overflow-y: auto;
  max-width: unset !important;
@@ -45,7 +53,7 @@ const Wrapper = styled.div`
    cursor: pointer;
    border-radius: 6px;
    margin: 0.0625rem 0;
-    font-size: 0.8125rem;
+    font-size: ${(props) => props.theme.font.size.sm};

    &.active {
      color: ${(props) => props.theme.colors.text.yellow} !important;
@@ -136,17 +144,21 @@ const Wrapper = styled.div`

    /* Active/selected state - applied to the currently selected item */
    &.dropdown-item-active {
-      color: ${({ theme }) => theme.colors.text.yellow};
-      background-color: ${({ theme }) => theme.dropdown.activeBg};
-      font-weight: 500;
+      color: ${({ theme }) => theme.dropdown.selectedColor} !important;
+      background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important;
      .dropdown-icon {
-        color: ${({ theme }) => theme.colors.text.yellow};
+        color: ${({ theme }) => theme.dropdown.selectedColor} !important;
+      }
+
+      &:hover {
+        color: ${({ theme }) => theme.dropdown.selectedColor} !important;
+        background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important;
      }
    }

    /* Combined state - when active item is also focused */
    &.dropdown-item-active.dropdown-item-focused {
-      background-color: ${({ theme }) => theme.dropdown.activeHoverBg};
+      background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important;
    }

    /* Focus visible for accessibility */
--- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
  .table-container {
    overflow-y: auto;
    border-radius: ${(props) => props.theme.border.radius.base};
-    border: ${(props) => props.theme.workspace.environments.indentBorder};
+    border: solid 1px ${(props) => props.theme.border.border0};
  }

  table {
@@ -31,8 +31,8 @@ const StyledWrapper = styled.div`
      padding: 5px 10px !important;
      border-top: none !important;
      border-left: none !important;
-      border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-      border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+      border-bottom: solid 1px ${(props) => props.theme.border.border0};
+      border-right: solid 1px ${(props) => props.theme.border.border0};
      vertical-align: middle;

      &:last-child {
@@ -58,8 +58,8 @@ const StyledWrapper = styled.div`
        padding: 1px 10px !important;
        border-top: none !important;
        border-left: none !important;
-        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+        border-bottom: solid 1px ${(props) => props.theme.border.border0};
+        border-right: solid 1px ${(props) => props.theme.border.border0};
        vertical-align: middle;

        &:last-child {
@@ -83,7 +83,6 @@ const StyledWrapper = styled.div`
  }

  .tooltip-mod {
-    font-size: 11px !important;
    max-width: 200px !important;
  }

--- a/packages/bruno-app/src/components/EditableTable/index.js
+++ b/packages/bruno-app/src/components/EditableTable/index.js
@@ -12,6 +12,7 @@ const EditableTable = ({
  getRowError,
  showCheckbox = true,
  showDelete = true,
+  disableCheckbox = false,
  checkboxLabel = '',
  checkboxKey = 'enabled',
  reorderable = false,
@@ -288,6 +289,7 @@ const EditableTable = ({
                          className="mousetrap"
                          data-testid="column-checkbox"
                          checked={row[checkboxKey] ?? true}
+                          disabled={disableCheckbox}
                          onChange={(e) => handleCheckboxChange(row.uid, e.target.checked)}
                        />
                      )}
--- a/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js
@@ -26,15 +26,15 @@ const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose,

        <div className="flex justify-between mt-6">
          <div>
-            <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
+            <Button color="danger" onClick={onCloseWithoutSave}>
              Don't Save
            </Button>
          </div>
-          <div>
+          <div className="flex gap-2">
            <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
              Cancel
            </Button>
-            <Button size="sm" onClick={onSaveAndClose}>
+            <Button onClick={onSaveAndClose}>
              Save
            </Button>
          </div>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
@@ -33,7 +33,7 @@ const EnvironmentListContent = ({
                {environments.map((env) => (
                  <div
                    key={env.uid}
-                    className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'active' : ''}`}
+                    className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'dropdown-item-active' : ''}`}
                    onClick={() => onEnvironmentSelect(env)}
                    data-tooltip-content={env.name}
                    data-tooltip-hidden={env.name?.length < 90}
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -65,35 +65,6 @@ const Wrapper = styled.div`
    overflow: hidden;
  }

-  .tippy-box .tippy-content {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .dropdown-item {
-      display: flex;
-      align-items: center;
-      padding: 0.35rem 0.6rem;
-      cursor: pointer;
-      font-size: ${(props) => props.theme.font.size.base};
-      color: ${(props) => props.theme.dropdown.primaryText};
-
-      &:hover:not(:disabled) {
-        background-color: ${(props) => props.theme.dropdown.hoverBg};
-      }
-
-      &.active {
-        background-color: ${(props) => props.theme.dropdown.selectedBg};
-        color: ${(props) => props.theme.dropdown.selectedColor};
-      }
-
-      &.no-environment {
-        color: ${(props) => props.theme.dropdown.mutedText};
-      }
-    }
-  }
-
  .configure-button {
    position: absolute;
    bottom: 0;
@@ -109,7 +80,7 @@ const Wrapper = styled.div`
    }

    button {
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
      display: flex;
      align-items: center;
      justify-content: center;
@@ -119,8 +90,8 @@ const Wrapper = styled.div`
  }

  .tab-button {
-    color: var(--color-tab-inactive);
-    font-size: ${(props) => props.theme.font.size.base};
+    color: ${(props) => props.theme.colors.text.subtext0};
+    font-size: ${(props) => props.theme.font.size.sm};

    .tab-content-wrapper {
      position: relative;
@@ -170,7 +141,7 @@ const Wrapper = styled.div`
    min-height: 12.5rem;

    h3 {
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 0.5rem;
@@ -178,7 +149,7 @@ const Wrapper = styled.div`
    }

    p {
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
      opacity: 0.75;
      font-size: ${(props) => props.theme.font.size.xs};
      line-height: 1.5;
@@ -194,9 +165,9 @@ const Wrapper = styled.div`
    }

    .space-y-2 > button {
-      border: 0.0625rem solid ${(props) => props.theme.dropdown.primaryText};
+      border: 0.0625rem solid ${(props) => props.theme.text};
      background: transparent;
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      width: 100%;
@@ -224,7 +195,7 @@ const Wrapper = styled.div`
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
-    color: ${(props) => props.theme.dropdown.primaryText};
+    color: ${(props) => props.theme.text};
    font-size: ${(props) => props.theme.font.size.base};
    line-height: 1.5;
    text-align: center;
@@ -232,7 +203,7 @@ const Wrapper = styled.div`

    svg {
      margin: 0 auto 1rem auto;
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
      opacity: 0.5;
    }
  }
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -186,7 +186,7 @@ const EnvironmentSelector = ({ collection }) => {
      <div className="environment-selector flex align-center cursor-pointer">
        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
          {/* Tab Headers */}
-          <div className="tab-header flex p-[0.75rem]">
+          <div className="tab-header flex pt-3 pb-2 px-3">
            {tabs.map((tab) => (
              <button
                key={tab.id}
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
@@ -59,7 +59,7 @@ const CreateEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
  return (
    <Portal>
      <Modal
-        size="sm"
+        size="md"
        title="Create Environment"
        confirmText="Create"
        handleConfirm={onSubmit}
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
@@ -26,6 +26,7 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
          confirmText="Delete"
          handleConfirm={onConfirm}
          handleCancel={onClose}
+          confirmButtonColor="danger"
        >
          Are you sure you want to delete <span className="font-medium">{environment.name}</span> ?
        </Modal>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
  .table-container {
    overflow-y: auto;
    border-radius: 8px;
-    border: ${(props) => props.theme.workspace.environments.indentBorder};
+    border: solid 1px ${(props) => props.theme.border.border0};
  }

  table {
@@ -46,8 +46,8 @@ const Wrapper = styled.div`

      td {
        padding: 5px 10px !important;
-        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+        border-bottom: solid 1px ${(props) => props.theme.border.border0};
+        border-right: solid 1px ${(props) => props.theme.border.border0};

        &:last-child {
          border-right: none;
@@ -64,8 +64,8 @@ const Wrapper = styled.div`
        }

        td {
-          border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-          border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+          border-bottom: solid 1px ${(props) => props.theme.border.border0};
+          border-right: solid 1px ${(props) => props.theme.border.border0};

          &:last-child {
            border-right: none;
@@ -75,28 +75,7 @@ const Wrapper = styled.div`
    }
  }

-  .btn-add-param {
-    font-size: 12px;
-    color: ${(props) => props.theme.textLink};
-    font-weight: 500;
-    padding: 7px 14px;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    border-radius: 6px;
-    border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
-    background: transparent;
-    transition: all 0.15s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-      border-color: ${(props) => props.theme.textLink};
-    }
-  }
-
  .tooltip-mod {
-    font-size: 11px !important;
    max-width: 200px !important;
  }

@@ -175,7 +154,7 @@ const Wrapper = styled.div`
    border-radius: ${(props) => props.theme.border.radius.base};
    background: transparent;
    color: ${(props) => props.theme.text};
-    border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+    border: 1px solid ${(props) => props.theme.border.border1};
    cursor: pointer;
    transition: all 0.15s ease;

--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useMemo, useEffect } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
 import cloneDeep from 'lodash/cloneDeep';
 import { get } from 'lodash';
 import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
@@ -18,14 +19,28 @@ import { getGlobalEnvironmentVariables, flattenItems, isItemARequest } from 'uti
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 import { sensitiveFields } from './constants';

+const TableRow = React.memo(({ children, item }) => <tr key={item.uid} data-testid={`env-var-row-${item.name}`}>{children}</tr>, (prevProps, nextProps) => {
+  const prevUid = prevProps?.item?.uid;
+  const nextUid = nextProps?.item?.uid;
+  return prevUid === nextUid && prevProps.children === nextProps.children;
+});
+
+const MIN_H = 35 * 2; // 2 rows worth of height
+
 const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();
  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);

+  const [tableHeight, setTableHeight] = React.useState(MIN_H);
+
  const environmentsDraft = collection?.environmentsDraft;
  const hasDraftForThisEnv = environmentsDraft?.environmentUid === environment.uid;

+  const handleTotalHeightChanged = React.useCallback((h) => {
+    setTableHeight(h);
+  }, []);
+
  // Track environment changes for draft restoration
  const prevEnvUidRef = React.useRef(null);
  const mountedRef = React.useRef(false);
@@ -384,111 +399,114 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {

  return (
    <StyledWrapper>
-      <div className="table-container">
-        <table>
-          <thead>
-            <tr>
-              <td className="text-center"></td>
-              <td>Name</td>
-              <td>Value</td>
-              <td className="text-center">Secret</td>
-              <td></td>
-            </tr>
-          </thead>
-          <tbody>
-            {formik.values.map((variable, index) => {
-              const isLastRow = index === formik.values.length - 1;
-              const isEmptyRow = !variable.name || variable.name.trim() === '';
-              const isLastEmptyRow = isLastRow && isEmptyRow;
+      <TableVirtuoso
+        className="table-container"
+        style={{ height: tableHeight }}
+        components={{ TableRow }}
+        data={formik.values}
+        totalListHeightChanged={handleTotalHeightChanged}
+        fixedHeaderContent={() => (
+          <tr>
+            <td className="text-center"></td>
+            <td>Name</td>
+            <td>Value</td>
+            <td className="text-center">Secret</td>
+            <td></td>
+          </tr>
+        )}
+        fixedItemHeight={35}
+        computeItemKey={(index, variable) => variable.uid}
+        itemContent={(index, variable) => {
+          const isLastRow = index === formik.values.length - 1;
+          const isEmptyRow = !variable.name || variable.name.trim() === '';
+          const isLastEmptyRow = isLastRow && isEmptyRow;

-              return (
-                <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
-                  <td className="text-center">
-                    {!isLastEmptyRow && (
-                      <input
-                        type="checkbox"
-                        className="mousetrap"
-                        name={`${index}.enabled`}
-                        checked={variable.enabled}
-                        onChange={formik.handleChange}
-                      />
-                    )}
-                  </td>
-                  <td>
-                    <div className="flex items-center">
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        className="mousetrap"
-                        id={`${index}.name`}
-                        name={`${index}.name`}
-                        value={variable.name}
-                        placeholder={isLastEmptyRow ? 'Name' : ''}
-                        onChange={(e) => handleNameChange(index, e)}
-                        onBlur={() => handleNameBlur(index)}
-                        onKeyDown={(e) => handleNameKeyDown(index, e)}
-                      />
-                      <ErrorMessage name={`${index}.name`} index={index} />
-                    </div>
-                  </td>
-                  <td className="flex flex-row flex-nowrap items-center">
-                    <div className="overflow-hidden grow w-full relative">
-                      <MultiLineEditor
-                        theme={storedTheme}
-                        collection={_collection}
-                        name={`${index}.value`}
-                        value={variable.value}
-                        placeholder={isLastEmptyRow ? 'Value' : ''}
-                        isSecret={variable.secret}
-                        readOnly={typeof variable.value !== 'string'}
-                        onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
-                        onSave={handleSave}
-                      />
-                    </div>
-                    {typeof variable.value !== 'string' && (
-                      <span className="ml-2 flex items-center">
-                        <IconInfoCircle id={`${variable.uid}-disabled-info-icon`} className="text-muted" size={16} />
-                        <Tooltip
-                          anchorId={`${variable.uid}-disabled-info-icon`}
-                          content="Non-string values set via scripts are read-only and can only be updated through scripts."
-                          place="top"
-                        />
-                      </span>
-                    )}
-                    {!variable.secret && hasSensitiveUsage(variable.name) && (
-                      <SensitiveFieldWarning
-                        fieldName={variable.name}
-                        warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
-                      />
-                    )}
-                  </td>
-                  <td className="text-center">
-                    {!isLastEmptyRow && (
-                      <input
-                        type="checkbox"
-                        className="mousetrap"
-                        name={`${index}.secret`}
-                        checked={variable.secret}
-                        onChange={formik.handleChange}
-                      />
-                    )}
-                  </td>
-                  <td>
-                    {!isLastEmptyRow && (
-                      <button onClick={() => handleRemoveVar(variable.uid)}>
-                        <IconTrash strokeWidth={1.5} size={18} />
-                      </button>
-                    )}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
+          return (
+            <>
+              <td className="text-center">
+                {!isLastEmptyRow && (
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${index}.enabled`}
+                    checked={variable.enabled}
+                    onChange={formik.handleChange}
+                  />
+                )}
+              </td>
+              <td>
+                <div className="flex items-center">
+                  <input
+                    type="text"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    spellCheck="false"
+                    className="mousetrap"
+                    id={`${index}.name`}
+                    name={`${index}.name`}
+                    value={variable.name}
+                    placeholder={isLastEmptyRow ? 'Name' : ''}
+                    onChange={(e) => handleNameChange(index, e)}
+                    onBlur={() => handleNameBlur(index)}
+                    onKeyDown={(e) => handleNameKeyDown(index, e)}
+                  />
+                  <ErrorMessage name={`${index}.name`} index={index} />
+                </div>
+              </td>
+              <td className="flex flex-row flex-nowrap items-center">
+                <div className="overflow-hidden grow w-full relative">
+                  <MultiLineEditor
+                    theme={storedTheme}
+                    collection={_collection}
+                    name={`${index}.value`}
+                    value={variable.value}
+                    placeholder={isLastEmptyRow ? 'Value' : ''}
+                    isSecret={variable.secret}
+                    readOnly={typeof variable.value !== 'string'}
+                    onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                    onSave={handleSave}
+                  />
+                </div>
+                {typeof variable.value !== 'string' && (
+                  <span className="ml-2 flex items-center">
+                    <IconInfoCircle id={`${variable.uid}-disabled-info-icon`} className="text-muted" size={16} />
+                    <Tooltip
+                      anchorId={`${variable.uid}-disabled-info-icon`}
+                      content="Non-string values set via scripts are read-only and can only be updated through scripts."
+                      place="top"
+                    />
+                  </span>
+                )}
+                {!variable.secret && hasSensitiveUsage(variable.name) && (
+                  <SensitiveFieldWarning
+                    fieldName={variable.name}
+                    warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
+                  />
+                )}
+              </td>
+              <td className="text-center">
+                {!isLastEmptyRow && (
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${index}.secret`}
+                    checked={variable.secret}
+                    onChange={formik.handleChange}
+                  />
+                )}
+              </td>
+              <td>
+                {!isLastEmptyRow && (
+                  <button onClick={() => handleRemoveVar(variable.uid)}>
+                    <IconTrash strokeWidth={1.5} size={18} />
+                  </button>
+                )}
+              </td>
+            </>
+          );
+        }}
+      />

      <div className="button-container">
        <div className="flex items-center">
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';

 const StyledWrapper = styled.div`
  display: flex;
  height: 100%;
  overflow: hidden;
-  background-color: ${(props) => props.theme.bg};
  position: relative;

  .environments-container {
@@ -22,14 +22,12 @@ const StyledWrapper = styled.div`
    z-index: 10;
    background: ${(props) => props.theme.bg};
    padding: 12px;
-    border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
  }

  /* Left Sidebar */
  .sidebar {
    width: 240px;
    min-width: 240px;
-    border-right: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
    display: flex;
    flex-direction: column;
  }
@@ -86,7 +84,7 @@ const StyledWrapper = styled.div`
      padding: 6px 8px 6px 28px;
      font-size: 12px;
      background: transparent;
-      border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+      border: 1px solid ${(props) => props.theme.border.border1};
      border-radius: 5px;
      color: ${(props) => props.theme.text};
      transition: all 0.15s ease;
@@ -174,7 +172,7 @@ const StyledWrapper = styled.div`
    }
    
    &.active {
-      background: ${(props) => props.theme.workspace.environments.activeBg};
+      background: ${(props) => props.theme.background.surface0};
      color: ${(props) => props.theme.text};
    }
    
@@ -193,9 +191,12 @@ const StyledWrapper = styled.div`
      display: flex;
      align-items: center;
      flex: 1;
+      min-width: 0;
+      overflow: hidden;
      
      .environment-name-input {
        flex: 1;
+        min-width: 0;
        background: transparent;
        border: none;
        outline: none;
@@ -212,12 +213,14 @@ const StyledWrapper = styled.div`
        display: flex;
        gap: 2px;
        margin-left: 4px;
+        flex-shrink: 0;
      }
    }

    &.creating {
      .environment-name-input {
        flex: 1;
+        min-width: 0;
        background: transparent;
        border: none;
        outline: none;
@@ -234,36 +237,36 @@ const StyledWrapper = styled.div`
        display: flex;
        gap: 2px;
        margin-left: 4px;
+        flex-shrink: 0;
+      }
+    }
+
+    .inline-action-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      
+      &.save {
+        color: ${(props) => props.theme.colors.text.green};
+        
+        &:hover {
+          background: ${(props) => rgba(props.theme.colors.text.green, 0.1)};
+        }
      }
      
-      .inline-action-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 22px;
-        height: 22px;
-        padding: 0;
-        background: transparent;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        transition: all 0.15s ease;
+      &.cancel {
+        color: ${(props) => props.theme.colors.text.danger};
        
-        &.save {
-          color: ${(props) => props.theme.textLink};
-          
-          &:hover {
-            background: ${(props) => props.theme.listItem.hoverBg};
-          }
-        }
-        
-        &.cancel {
-          color: ${(props) => props.theme.colors.text.muted};
-          
-          &:hover {
-            background: ${(props) => props.theme.listItem.hoverBg};
-            color: ${(props) => props.theme.text};
-          }
+        &:hover {
+          background: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
        }
      }
    }
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
@@ -11,7 +11,7 @@ const StyledWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
-    justify-content: center;
+    padding-top: 10%;
    flex: 1;
    color: ${(props) => props.theme.colors.text.muted};

@@ -32,22 +32,6 @@ const StyledWrapper = styled.div`
      gap: 8px;
    }
  }
-
-  .shared-button {
-    padding: 5px 10px;
-    font-size: 12px;
-    border-radius: 5px;
-    border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
-    background: ${(props) => props.theme.sidebar.bg};
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: all 0.1s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-      border-color: ${(props) => props.theme.textLink};
-    }
-  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -5,30 +5,34 @@ import StyledWrapper from './StyledWrapper';
 import { IconFileAlert } from '@tabler/icons';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
+import Button from 'ui/Button';

 const DefaultTab = ({ setTab }) => (
  <div className="empty-state">
    <IconFileAlert size={48} strokeWidth={1.5} />
    <div className="title">No Environments</div>
    <div className="actions">
-      <button className="shared-button" onClick={() => setTab('create')}>
+      <Button size="sm" color="secondary" onClick={() => setTab('create')}>
        Create Environment
-      </button>
-      <button className="shared-button" onClick={() => setTab('import')}>
+      </Button>
+      <Button size="sm" color="secondary" onClick={() => setTab('import')}>
        Import Environment
-      </button>
+      </Button>
    </div>
  </div>
 );

 const EnvironmentSettings = ({ collection }) => {
  const [isModified, setIsModified] = useState(false);
-  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
+  const environments = collection?.environments || [];
+
+  const [selectedEnvironment, setSelectedEnvironment] = useState(() => {
+    if (!environments.length) return null;
+    return environments.find((env) => env.uid === collection?.activeEnvironmentUid) || environments[0];
+  });
  const [tab, setTab] = useState('default');
  const [showExportModal, setShowExportModal] = useState(false);

-  const environments = collection?.environments || [];
-
  if (!environments || !environments.length) {
    return (
      <StyledWrapper>
--- a/packages/bruno-app/src/components/FilePickerEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/StyledWrapper.js
@@ -0,0 +1,110 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+  min-width: 0;
+
+  .file-picker-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 8px;
+    color: ${(props) => props.theme.colors.text.muted};
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.15s ease;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    min-width: 0;
+    max-width: 100%;
+
+    &:hover {
+      color: ${(props) => props.theme.text} !important;
+    }
+
+    &.read-only {
+      cursor: default;
+      opacity: 0.6;
+    }
+
+    &.icon-only {
+      padding: 4px;
+      flex-shrink: 0;
+    }
+
+    &.icon-right {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    span {
+      line-height: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    .label {
+      font-style: italic;
+    }
+
+    svg {
+      flex-shrink: 0;
+    }
+  }
+
+  .file-picker-selected {
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+    width: 100%;
+    cursor: pointer;
+
+    &.read-only {
+      cursor: default;
+    }
+
+    .file-icon {
+      flex-shrink: 0;
+      color: ${(props) => props.theme.colors.text.muted};
+      margin-right: 4px;
+    }
+
+    .file-name {
+      flex: 1;
+      font-size: 12px;
+      color: ${(props) => props.theme.text};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .clear-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+      margin-left: 4px;
+      color: ${(props) => props.theme.colors.text.muted};
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      border-radius: 4px;
+      transition: color 0.15s ease;
+      flex-shrink: 0;
+
+      &:hover {
+        color: ${(props) => props.theme.text};
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -2,10 +2,33 @@ import React from 'react';
 import path from 'utils/common/path';
 import { useDispatch } from 'react-redux';
 import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
-import { IconX } from '@tabler/icons';
+import { IconX, IconUpload, IconFile } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
+import StyledWrapper from './StyledWrapper';

-const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false, readOnly = false }) => {
+/**
+ * FilePickerEditor component for selecting files
+ *
+ * @param {Object} props
+ * @param {string|string[]} props.value - Selected file path(s)
+ * @param {Function} props.onChange - Callback when file selection changes
+ * @param {Object} props.collection - Collection object with pathname
+ * @param {boolean} props.isSingleFilePicker - If true, only allows single file selection
+ * @param {boolean} props.readOnly - If true, disables file selection
+ * @param {string} props.displayMode - Display mode: 'label', 'icon', or 'labelAndIcon' (default: 'label')
+ * @param {string} props.label - Custom label text (defaults to "Select File" or "Select Files")
+ * @param {React.ComponentType} props.icon - Custom icon component (defaults to IconUpload)
+ */
+const FilePickerEditor = ({
+  value,
+  onChange,
+  collection,
+  isSingleFilePicker = false,
+  readOnly = false,
+  displayMode = 'label',
+  label,
+  icon: CustomIcon
+}) => {
  const dispatch = useDispatch();
  const filenames = (isSingleFilePicker ? [value] : value || [])
    .filter((v) => v != null && v != '')
@@ -18,6 +41,8 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
  const title = filenames.map((v) => `- ${v}`).join('\n');

  const browse = () => {
+    if (readOnly) return;
+
    dispatch(browseFiles([], [!isSingleFilePicker ? 'multiSelections' : '']))
      .then((filePaths) => {
        // If file is in the collection's directory, then we use relative path
@@ -39,7 +64,8 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
      });
  };

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

@@ -50,40 +76,69 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
    return filenames.length + ' file(s) selected';
  };

-  const buttonClass = `btn btn-secondary px-1 ${readOnly ? 'view-mode' : 'edit-mode'}`;
+  const defaultLabel = isSingleFilePicker ? 'Select File' : 'Select Files';
+  const displayLabel = label || defaultLabel;
+  const IconComponent = CustomIcon || IconUpload;

-  return filenames.length > 0 ? (
-    <div
-      className={buttonClass}
-      style={{
-        fontWeight: 400,
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        overflow: 'hidden'
-      }}
-      title={title}
-    >
-      {!readOnly && (
-        <button className="align-middle" onClick={clear} style={{ flexShrink: 0 }}>
-          <IconX size={18} />
-        </button>
-      )}
-      {!readOnly && <>&nbsp;</>}
-      <span style={{
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        flex: 1
-      }}
+  // Render the button content based on displayMode
+  const renderButtonContent = () => {
+    switch (displayMode) {
+      case 'icon':
+        return <IconComponent size={16} />;
+      case 'labelAndIcon':
+        return (
+          <>
+            <span className="label">{displayLabel}</span>
+            <IconComponent size={16} />
+          </>
+        );
+      case 'label':
+      default:
+        return <span>{displayLabel}</span>;
+    }
+  };
+
+  // When files are selected, show file info with clear button
+  if (filenames.length > 0) {
+    return (
+      <StyledWrapper>
+        <div
+          className={`file-picker-selected ${readOnly ? 'read-only' : ''}`}
+          title={title}
+          onClick={!readOnly ? browse : undefined}
+        >
+          <IconFile size={16} className="file-icon" />
+          <span className="file-name">
+            {renderButtonText(filenames)}
+          </span>
+          {!readOnly && (
+            <button
+              className="clear-btn"
+              onClick={clear}
+              title="Remove file"
+              type="button"
+            >
+              <IconX size={16} />
+            </button>
+          )}
+        </div>
+      </StyledWrapper>
+    );
+  }
+
+  // When no files selected, show the picker button
+  return (
+    <StyledWrapper>
+      <button
+        className={`file-picker-btn ${readOnly ? 'read-only' : ''} ${displayMode === 'icon' ? 'icon-only' : ''} ${displayMode === 'labelAndIcon' ? 'icon-right' : ''}`}
+        onClick={browse}
+        disabled={readOnly}
+        type="button"
+        title={displayLabel}
      >
-        {renderButtonText(filenames)}
-      </span>
-    </div>
-  ) : (
-    <button className={buttonClass} style={{ width: '100%' }} onClick={!readOnly ? browse : undefined} disabled={readOnly}>
-      {isSingleFilePicker ? 'Select File' : 'Select Files'}
-    </button>
+        {renderButtonContent()}
+      </button>
+    </StyledWrapper>
  );
 };

--- a/Show More
+++ b/Show More