fix

fixes
2026-07-05 10:28:32 +00:00 · 2025-12-12 01:00:55 +05:30 · 2025-12-12 00:21:56 +05:30 · 2025-12-11 23:21:25 +05:30 · 2025-12-11 22:50:32 +05:30 · 2025-12-11 19:53:02 +05:30
289 changed files with 6326 additions and 10850 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -53,7 +53,6 @@ bruno.iml
 /blob-report/

 # Development plan files
-CLAUDE.md
 *.plan.md

 # packages dist
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,6 @@
        "@eslint/compat": "^1.3.2",
        "@faker-js/faker": "^7.6.0",
        "@jest/globals": "^29.2.0",
-        "@opencollection/types": "0.3.0",
        "@playwright/test": "^1.51.1",
        "@rollup/plugin-json": "^6.1.0",
        "@stylistic/eslint-plugin": "^5.3.1",
@@ -4372,6 +4371,7 @@
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "string-width": "^5.1.2",
@@ -4389,6 +4389,7 @@
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12"
@@ -4401,6 +4402,7 @@
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12"
@@ -4413,12 +4415,14 @@
      "version": "9.2.2",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/@isaacs/cliui/node_modules/string-width": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "eastasianwidth": "^0.2.0",
@@ -4436,6 +4440,7 @@
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^6.0.1"
@@ -4451,6 +4456,7 @@
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-styles": "^6.1.0",
@@ -5681,13 +5687,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/@opencollection/types": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.3.0.tgz",
-      "integrity": "sha512-kw+co3sM4ATDQI85lgy5UmOilEHFVdNYvOjZXmnSw6PUDUTAGBiaZNdwdSXwp//o4IwKbTQb8/0I3UdjLKh+qA==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/@parcel/watcher": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
@@ -6008,6 +6007,7 @@
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "engines": {
@@ -9324,6 +9324,7 @@
      "version": "2.10.3",
      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -9968,6 +9969,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "event-target-shim": "^5.0.0"
@@ -10198,95 +10200,6 @@
      "license": "ISC",
      "optional": true
    },
-    "node_modules/archiver": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/archiver/-/archiver-7.0.1.tgz",
-      "integrity": "sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==",
-      "license": "MIT",
-      "dependencies": {
-        "archiver-utils": "^5.0.2",
-        "async": "^3.2.4",
-        "buffer-crc32": "^1.0.0",
-        "readable-stream": "^4.0.0",
-        "readdir-glob": "^1.1.2",
-        "tar-stream": "^3.0.0",
-        "zip-stream": "^6.0.1"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/archiver-utils": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-5.0.2.tgz",
-      "integrity": "sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==",
-      "license": "MIT",
-      "dependencies": {
-        "glob": "^10.0.0",
-        "graceful-fs": "^4.2.0",
-        "is-stream": "^2.0.1",
-        "lazystream": "^1.0.0",
-        "lodash": "^4.17.15",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/archiver-utils/node_modules/glob": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
-      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/archiver-utils/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/archiver-utils/node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/archiver/node_modules/buffer-crc32": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
-      "integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
    "node_modules/arcsecond": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/arcsecond/-/arcsecond-5.0.0.tgz",
@@ -10426,6 +10339,7 @@
      "version": "3.2.6",
      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/async-exit-hook": {
@@ -10594,20 +10508,6 @@
        "js-md4": "^0.3.2"
      }
    },
-    "node_modules/b4a": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.7.3.tgz",
-      "integrity": "sha512-5Q2mfq2WfGuFp3uS//0s6baOJLMoVduPYVeNmDYxu5OUA1/cBfvr2RIS7vi62LdNj/urk1hfmj867I3qt6uZ7Q==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react-native-b4a": "*"
-      },
-      "peerDependenciesMeta": {
-        "react-native-b4a": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/babel-jest": {
      "version": "29.7.0",
      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -10815,20 +10715,6 @@
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "license": "MIT"
    },
-    "node_modules/bare-events": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.8.2.tgz",
-      "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "bare-abort-controller": "*"
-      },
-      "peerDependenciesMeta": {
-        "bare-abort-controller": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/base16": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
@@ -11317,6 +11203,7 @@
      "version": "0.2.13",
      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": "*"
@@ -12296,22 +12183,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/compress-commons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-6.0.2.tgz",
-      "integrity": "sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==",
-      "license": "MIT",
-      "dependencies": {
-        "crc-32": "^1.2.0",
-        "crc32-stream": "^6.0.0",
-        "is-stream": "^2.0.1",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -12670,31 +12541,6 @@
        "buffer": "^5.1.0"
      }
    },
-    "node_modules/crc-32": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
-      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
-      "license": "Apache-2.0",
-      "bin": {
-        "crc32": "bin/crc32.njs"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/crc32-stream": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-6.0.0.tgz",
-      "integrity": "sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==",
-      "license": "MIT",
-      "dependencies": {
-        "crc-32": "^1.2.0",
-        "readable-stream": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
    "node_modules/create-ecdh": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -12813,6 +12659,7 @@
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "path-key": "^3.1.0",
@@ -13871,6 +13718,7 @@
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/ecc-jsbn": {
@@ -14126,6 +13974,7 @@
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "once": "^1.4.0"
@@ -14733,6 +14582,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=6"
@@ -14748,20 +14598,12 @@
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.8.x"
      }
    },
-    "node_modules/events-universal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/events-universal/-/events-universal-1.0.1.tgz",
-      "integrity": "sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "bare-events": "^2.7.0"
-      }
-    },
    "node_modules/eventsource": {
      "version": "3.0.6",
      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.6.tgz",
@@ -15185,6 +15027,7 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
        "debug": "^4.1.1",
@@ -15205,6 +15048,7 @@
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ms": "^2.1.3"
@@ -15222,6 +15066,7 @@
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/extsprintf": {
@@ -15240,12 +15085,6 @@
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "license": "MIT"
    },
-    "node_modules/fast-fifo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
-      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
-      "license": "MIT"
-    },
    "node_modules/fast-fuzzy": {
      "version": "1.12.0",
      "resolved": "https://registry.npmjs.org/fast-fuzzy/-/fast-fuzzy-1.12.0.tgz",
@@ -15400,6 +15239,7 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "pend": "~1.2.0"
@@ -15745,6 +15585,7 @@
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "cross-spawn": "^7.0.0",
@@ -15761,6 +15602,7 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
      "license": "ISC",
      "engines": {
        "node": ">=14"
@@ -16072,6 +15914,7 @@
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "pump": "^3.0.0"
@@ -17680,6 +17523,7 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@@ -17745,6 +17589,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
      "license": "ISC"
    },
    "node_modules/isobject": {
@@ -17875,6 +17720,7 @@
      "version": "3.4.3",
      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
      "license": "BlueOak-1.0.0",
      "dependencies": {
        "@isaacs/cliui": "^8.0.2"
@@ -19532,48 +19378,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/lazystream": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
-      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
-      "license": "MIT",
-      "dependencies": {
-        "readable-stream": "^2.0.5"
-      },
-      "engines": {
-        "node": ">= 0.6.3"
-      }
-    },
-    "node_modules/lazystream/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "license": "MIT",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/lazystream/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "license": "MIT"
-    },
-    "node_modules/lazystream/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
    "node_modules/leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -21177,6 +20981,7 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
      "license": "BlueOak-1.0.0"
    },
    "node_modules/pako": {
@@ -21430,6 +21235,7 @@
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@@ -21446,6 +21252,7 @@
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
      "license": "BlueOak-1.0.0",
      "dependencies": {
        "lru-cache": "^10.2.0",
@@ -21462,12 +21269,14 @@
      "version": "10.4.3",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
      "license": "ISC"
    },
    "node_modules/path-scurry/node_modules/minipass": {
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
      "license": "ISC",
      "engines": {
        "node": ">=16 || 14 >=14.17"
@@ -21563,6 +21372,7 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/performance-now": {
@@ -22924,6 +22734,7 @@
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "end-of-stream": "^1.1.0",
@@ -23734,6 +23545,7 @@
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.6.0.tgz",
      "integrity": "sha512-cbAdYt0VcnpN2Bekq7PU+k363ZRsPwJoEEJOEtSJQlJXzwaxt3FIo/uL+KeDSGIjJqtkwyge4KQgD2S2kd+CQw==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "abort-controller": "^3.0.0",
@@ -23750,6 +23562,7 @@
      "version": "6.0.3",
      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -23770,27 +23583,6 @@
        "ieee754": "^1.2.1"
      }
    },
-    "node_modules/readdir-glob": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
-      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "minimatch": "^5.1.0"
-      }
-    },
-    "node_modules/readdir-glob/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -25423,6 +25215,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "shebang-regex": "^3.0.0"
@@ -25435,6 +25228,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@@ -25966,17 +25760,6 @@
        "node": ">=10.0.0"
      }
    },
-    "node_modules/streamx": {
-      "version": "2.23.0",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.23.0.tgz",
-      "integrity": "sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==",
-      "license": "MIT",
-      "dependencies": {
-        "events-universal": "^1.0.0",
-        "fast-fifo": "^1.3.2",
-        "text-decoder": "^1.1.0"
-      }
-    },
    "node_modules/strict-uri-encode": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -25990,6 +25773,7 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "safe-buffer": "~5.2.0"
@@ -26035,6 +25819,7 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "emoji-regex": "^8.0.0",
@@ -26085,6 +25870,7 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^5.0.1"
@@ -26839,17 +26625,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/tar-stream": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
-      "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
-      "license": "MIT",
-      "dependencies": {
-        "b4a": "^1.6.4",
-        "fast-fifo": "^1.2.0",
-        "streamx": "^2.15.0"
-      }
-    },
    "node_modules/tar/node_modules/minipass": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
@@ -27102,15 +26877,6 @@
        "node": "*"
      }
    },
-    "node_modules/text-decoder": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
-      "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "b4a": "^1.6.4"
-      }
-    },
    "node_modules/thenify": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -28256,6 +28022,7 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
      "license": "ISC",
      "dependencies": {
        "isexe": "^2.0.0"
@@ -28359,6 +28126,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-styles": "^4.0.0",
@@ -28570,6 +28338,7 @@
      "version": "2.10.0",
      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "buffer-crc32": "~0.2.3",
@@ -28613,20 +28382,6 @@
      "integrity": "sha512-jEA1znR7b4C/NnaycInCU6h/d15ZzCd1jmsruqOKnZP6WXQSMH3W2GL+OXbkruslU4h+Tzuos0HdswzRUk/Vgg==",
      "license": "Unlicense"
    },
-    "node_modules/zip-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-6.0.1.tgz",
-      "integrity": "sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==",
-      "license": "MIT",
-      "dependencies": {
-        "archiver-utils": "^5.0.0",
-        "compress-commons": "^6.0.2",
-        "readable-stream": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
    "node_modules/zod": {
      "version": "3.24.4",
      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.4.tgz",
@@ -28695,7 +28450,6 @@
        "lodash": "^4.17.21",
        "markdown-it": "^13.0.2",
        "markdown-it-replace-link": "^1.2.0",
-        "mime-types": "^3.0.2",
        "moment": "^2.30.1",
        "moment-timezone": "^0.5.47",
        "mousetrap": "^1.6.5",
@@ -30253,31 +30007,6 @@
        "uc.micro": "^2.0.0"
      }
    },
-    "packages/bruno-app/node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "packages/bruno-app/node_modules/mime-types": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
-      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "^1.54.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
    "packages/bruno-app/node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -32084,7 +31813,6 @@
        "@usebruno/requests": "^0.1.0",
        "@usebruno/schema": "0.7.0",
        "about-window": "^1.15.2",
-        "archiver": "^7.0.1",
        "aws4-axios": "^3.3.0",
        "axios": "^1.8.3",
        "axios-ntlm": "^1.4.2",
@@ -32097,7 +31825,6 @@
        "electron-notarize": "^1.2.2",
        "electron-store": "^8.1.0",
        "electron-util": "^0.17.2",
-        "extract-zip": "^2.0.1",
        "form-data": "^4.0.0",
        "fs-extra": "^10.1.0",
        "graphql": "^16.6.0",
@@ -33634,6 +33361,7 @@
      "devDependencies": {
        "@babel/preset-env": "^7.22.0",
        "@babel/preset-typescript": "^7.22.0",
+        "@opencollection/types": "0.2.0",
        "@rollup/plugin-commonjs": "^23.0.2",
        "@rollup/plugin-json": "^6.1.0",
        "@rollup/plugin-node-resolve": "^15.0.1",
@@ -33653,6 +33381,13 @@
        "typescript": "^4.8.4"
      }
    },
+    "packages/bruno-filestore/node_modules/@opencollection/types": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@opencollection/types/-/types-0.2.0.tgz",
+      "integrity": "sha512-Lucjjoy+ZzfdjL0/9HF6PFlNSDG/m11VZBiR2K5XU6ChJ2XXfJyKocRB2g0tm7e5zQNMoVL3oUoDJ2gexx6xyg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "packages/bruno-filestore/node_modules/@rollup/plugin-typescript": {
      "version": "12.3.0",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-12.3.0.tgz",
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
    "@eslint/compat": "^1.3.2",
    "@faker-js/faker": "^7.6.0",
    "@jest/globals": "^29.2.0",
-    "@opencollection/types": "0.3.0",
    "@playwright/test": "^1.51.1",
    "@rollup/plugin-json": "^6.1.0",
    "@stylistic/eslint-plugin": "^5.3.1",
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -44,8 +44,9 @@
    "i18next": "24.1.2",
    "idb": "^7.0.0",
    "immer": "^9.0.15",
-    "js-yaml": "^4.1.0",
    "jsesc": "^3.0.2",
+    "js-yaml": "^4.1.0",
+    "xml2js": "^0.6.2",
    "jshint": "^2.13.6",
    "json5": "^2.2.3",
    "jsonc-parser": "^3.2.1",
@@ -55,7 +56,6 @@
    "lodash": "^4.17.21",
    "markdown-it": "^13.0.2",
    "markdown-it-replace-link": "^1.2.0",
-    "mime-types": "^3.0.2",
    "moment": "^2.30.1",
    "moment-timezone": "^0.5.47",
    "mousetrap": "^1.6.5",
@@ -89,7 +89,6 @@
    "system": "^2.0.1",
    "url": "^0.11.3",
    "xml-formatter": "^3.5.0",
-    "xml2js": "^0.6.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
--- a/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
@@ -5,6 +5,7 @@ const Wrapper = styled.div`
  display: flex;
  align-items: center;
  background: ${(props) => props.theme.sidebar.bg};
+  border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.hoverBg};
  -webkit-app-region: drag;
  user-select: none;

@@ -21,7 +22,7 @@ const Wrapper = styled.div`

  /* When in full screen, no traffic lights so reduce padding */
  &.fullscreen .titlebar-content {
-    padding-left: 6px;
+    padding-left: 4px;
  }

  /* Remove drag region from interactive elements */
@@ -102,13 +103,6 @@ const Wrapper = styled.div`
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
-    -webkit-app-region: no-drag;
-  }
-
-  /* App action buttons container */
-  .titlebar-actions {
-    display: flex;
-    align-items: center;
  }

  /* Workspace Dropdown Styles */
@@ -187,54 +181,16 @@ const Wrapper = styled.div`
  }

  /* Adjust for non-macOS platforms */
-  &:not(.os-mac) .titlebar-content {
-    padding-left: 12px;
-  }
-
-  /* Windows-specific styles */
-  &.os-windows .titlebar-content {
-    padding-right: 0px;
-    padding-left: 0px;
-  }
-
-  &.os-windows .titlebar-left {
-    margin-left: 6px;
-  }
-
-  /* Custom window control buttons for Windows - always interactive, above modal overlay */
-  .window-controls {
-    display: flex;
-    align-items: stretch;
-    height: 36px;
-    margin-left: 8px;
-    position: relative;
-    z-index: 1000;
-  }
-
-  .window-control-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 46px;
-    height: 100%;
-    border: none;
-    background: transparent;
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: background-color 0.1s ease;
-    -webkit-app-region: no-drag;
-
-    &:hover {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+  body:not(.os-mac) & {
+    .titlebar-content {
+      padding-left: 12px;
    }
+  }

-    &:active {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-    }
-
-    &.close:hover {
-      background: #e81123;
-      color: white;
+  /* Leave room for Windows caption buttons when the overlay is enabled */
+  body.os-windows & {
+    .titlebar-content {
+      padding-right: 120px;
    }
  }
 `;
--- a/packages/bruno-app/src/components/AppTitleBar/index.js
+++ b/packages/bruno-app/src/components/AppTitleBar/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { IconCheck, IconChevronDown, IconFolder, IconHome, IconPin, IconPinned, IconPlus, IconUpload, IconSettings, IconMinus, IconSquare, IconX, IconCopy } from '@tabler/icons';
+import { IconCheck, IconChevronDown, IconFolder, IconHome, IconLayoutColumns, IconLayoutRows, IconPin, IconPinned, IconPlus } from '@tabler/icons';
 import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useDispatch, useSelector } from 'react-redux';

-import { savePreferences, showHomePage, showManageWorkspacePage, toggleSidebarCollapse } from 'providers/ReduxStore/slices/app';
+import { savePreferences, showHomePage, toggleSidebarCollapse } from 'providers/ReduxStore/slices/app';
 import { closeConsole, openConsole } from 'providers/ReduxStore/slices/logs';
 import { openWorkspaceDialog, switchWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
 import { sortWorkspaces, toggleWorkspacePin } from 'utils/workspaces';
@@ -14,26 +14,14 @@ import MenuDropdown from 'ui/MenuDropdown';
 import ActionIcon from 'ui/ActionIcon';
 import IconSidebarToggle from 'components/Icons/IconSidebarToggle';
 import CreateWorkspace from 'components/WorkspaceSidebar/CreateWorkspace';
-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 } from 'utils/common/platform';
-
-const getOsClass = () => {
-  if (isMacOS()) return 'os-mac';
-  if (isWindowsOS()) return 'os-windows';
-  return 'os-other';
-};

 const AppTitleBar = () => {
  const dispatch = useDispatch();
  const [isFullScreen, setIsFullScreen] = useState(false);
-  const [isMaximized, setIsMaximized] = useState(false);
-  const osClass = getOsClass();
-  const isWindows = osClass === 'os-windows';

  // Listen for fullscreen changes
  useEffect(() => {
@@ -54,50 +42,6 @@ const AppTitleBar = () => {
    };
  }, []);

-  // Check initial maximized state and listen for changes (Windows only)
-  useEffect(() => {
-    if (!isWindows) return;
-    const { ipcRenderer } = window;
-    if (!ipcRenderer) return;
-
-    // Get initial state
-    ipcRenderer.invoke('renderer:window-is-maximized')
-      .then((maximized) => {
-        setIsMaximized(maximized);
-      })
-      .catch((error) => {
-        console.error('Error getting initial maximized state:', error);
-      });
-
-    // Listen for maximize/unmaximize events from main process
-    const removeMaximizedListener = ipcRenderer.on('main:window-maximized', () => {
-      setIsMaximized(true);
-    });
-
-    const removeUnmaximizedListener = ipcRenderer.on('main:window-unmaximized', () => {
-      setIsMaximized(false);
-    });
-
-    return () => {
-      removeMaximizedListener();
-      removeUnmaximizedListener();
-    };
-  }, [isWindows]);
-
-  // Window control handlers (Windows only) - these always work, even with modals open
-  const handleMinimize = useCallback(() => {
-    window.ipcRenderer?.send('renderer:window-minimize');
-  }, []);
-
-  const handleMaximize = useCallback(() => {
-    window.ipcRenderer?.send('renderer:window-maximize');
-    // State will be updated via IPC events from main process (main:window-maximized/main:window-unmaximized)
-  }, []);
-
-  const handleClose = useCallback(() => {
-    window.ipcRenderer?.send('renderer:window-close');
-  }, []);
-
  // Get workspace info
  const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
  const preferences = useSelector((state) => state.app.preferences);
@@ -111,7 +55,6 @@ const AppTitleBar = () => {
  }, [workspaces, preferences]);

  const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);
-  const [importWorkspaceModalOpen, setImportWorkspaceModalOpen] = useState(false);

  const WorkspaceName = forwardRef((props, ref) => {
    return (
@@ -144,14 +87,6 @@ const AppTitleBar = () => {
    setCreateWorkspaceModalOpen(true);
  };

-  const handleManageWorkspaces = () => {
-    dispatch(showManageWorkspacePage());
-  };
-
-  const handleImportWorkspace = () => {
-    setImportWorkspaceModalOpen(true);
-  };
-
  const handlePinWorkspace = useCallback((workspaceUid, e) => {
    e.preventDefault();
    e.stopPropagation();
@@ -159,6 +94,8 @@ const AppTitleBar = () => {
    dispatch(savePreferences(newPreferences));
  }, [dispatch, preferences]);

+  const orientation = preferences?.layout?.responsePaneOrientation || 'horizontal';
+
  const handleToggleSidebar = () => {
    dispatch(toggleSidebarCollapse());
  };
@@ -171,6 +108,18 @@ const AppTitleBar = () => {
    }
  };

+  const handleToggleVerticalLayout = () => {
+    const newOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+    const updatedPreferences = {
+      ...preferences,
+      layout: {
+        ...preferences?.layout || {},
+        responsePaneOrientation: newOrientation
+      }
+    };
+    dispatch(savePreferences(updatedPreferences));
+  };
+
  // Build workspace menu items
  const workspaceMenuItems = useMemo(() => {
    const items = sortedWorkspaces.map((workspace) => {
@@ -218,18 +167,6 @@ const AppTitleBar = () => {
        leftSection: IconFolder,
        label: 'Open workspace',
        onClick: handleOpenWorkspace
-      },
-      {
-        id: 'import-workspace',
-        leftSection: IconUpload,
-        label: 'Import workspace',
-        onClick: handleImportWorkspace
-      },
-      {
-        id: 'manage-workspaces',
-        leftSection: IconSettings,
-        label: 'Manage workspaces',
-        onClick: handleManageWorkspaces
      }
    );

@@ -237,13 +174,10 @@ const AppTitleBar = () => {
  }, [sortedWorkspaces, activeWorkspaceUid, preferences, handlePinWorkspace]);

  return (
-    <StyledWrapper className={`app-titlebar ${osClass} ${isFullScreen ? 'fullscreen' : ''}`}>
+    <StyledWrapper className={`app-titlebar ${isFullScreen ? 'fullscreen' : ''}`}>
      {createWorkspaceModalOpen && (
        <CreateWorkspace onClose={() => setCreateWorkspaceModalOpen(false)} />
      )}
-      {importWorkspaceModalOpen && (
-        <ImportWorkspace onClose={() => setImportWorkspaceModalOpen(false)} />
-      )}

      <div className="titlebar-content">
        {/* Left section: Home + Workspace */}
@@ -276,55 +210,39 @@ const AppTitleBar = () => {

        {/* Right section: Action buttons */}
        <div className="titlebar-right">
-          <div className="titlebar-actions">
-            {/* Toggle sidebar */}
-            <ActionIcon
-              onClick={handleToggleSidebar}
-              label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
-              size="lg"
-              data-testid="toggle-sidebar-button"
-            >
-              <IconSidebarToggle collapsed={sidebarCollapsed} size={16} strokeWidth={1.5} />
-            </ActionIcon>
+          {/* Toggle sidebar */}
+          <ActionIcon
+            onClick={handleToggleSidebar}
+            label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+            size="lg"
+            data-testid="toggle-sidebar-button"
+          >
+            <IconSidebarToggle collapsed={sidebarCollapsed} size={16} strokeWidth={1.5} />
+          </ActionIcon>

-            {/* Toggle devtools */}
-            <ActionIcon
-              onClick={handleToggleDevtools}
-              label={isConsoleOpen ? 'Hide devtools' : 'Show devtools'}
-              size="lg"
-              data-testid="toggle-devtools-button"
-            >
-              <IconBottombarToggle collapsed={!isConsoleOpen} size={16} strokeWidth={1.5} />
-            </ActionIcon>
+          {/* Toggle devtools */}
+          <ActionIcon
+            onClick={handleToggleDevtools}
+            label={isConsoleOpen ? 'Hide devtools' : 'Show devtools'}
+            size="lg"
+            data-testid="toggle-devtools-button"
+          >
+            <IconBottombarToggle collapsed={!isConsoleOpen} size={16} strokeWidth={1.5} />
+          </ActionIcon>

-            <ResponseLayoutToggle />
-          </div>
-
-          {isWindows && (
-            <div className="window-controls">
-              <button
-                className="window-control-btn minimize"
-                onClick={handleMinimize}
-                aria-label="Minimize"
-              >
-                <IconMinus size={16} stroke={1} />
-              </button>
-              <button
-                className="window-control-btn maximize"
-                onClick={handleMaximize}
-                aria-label={isMaximized ? 'Restore' : 'Maximize'}
-              >
-                {isMaximized ? <IconCopy size={14} stroke={1} /> : <IconSquare size={14} stroke={1} />}
-              </button>
-              <button
-                className="window-control-btn close"
-                onClick={handleClose}
-                aria-label="Close"
-              >
-                <IconX size={16} stroke={1} />
-              </button>
-            </div>
-          )}
+          {/* Toggle vertical layout */}
+          <ActionIcon
+            onClick={handleToggleVerticalLayout}
+            label={orientation === 'horizontal' ? 'Switch to vertical layout' : 'Switch to horizontal layout'}
+            size="lg"
+            data-testid="toggle-vertical-layout-button"
+          >
+            {orientation === 'horizontal' ? (
+              <IconLayoutColumns size={16} stroke={1.5} />
+            ) : (
+              <IconLayoutRows size={16} stroke={1.5} />
+            )}
+          </ActionIcon>
        </div>
      </div>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js
@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  font-size: ${(props) => props.theme.font.size.base};
-
-  .body-mode-selector {
-    background: transparent;
-    border-radius: 3px;
-
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
-      padding-left: 1.5rem !important;
-      display: flex;
-      align-items: center;
-    }
-
-    .label-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-
-    .selected-body-mode {
-      color: ${(props) => props.theme.colors.text.yellow};
-    }
-
-    .dropdown-icon {
-      display: flex;
-      align-items: center;
-      margin-right: 0.5rem;
-    }
-  }
-
-  .caret {
-    color: ${(props) => props.theme.colors.text.muted};
-    fill: ${(props) => props.theme.colors.text.muted};
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/BodyModeSelector/index.js
+++ b/packages/bruno-app/src/components/BodyModeSelector/index.js
@@ -1,33 +1,17 @@
-import React, { useMemo } from 'react';
-import { IconCaretDown, IconForms, IconBraces, IconCode, IconFileText, IconDatabase, IconFile, IconX } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import React, { useRef, forwardRef } from 'react';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
 import { humanizeRequestBodyMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';

 const DEFAULT_MODES = [
-  {
-    name: 'Form',
-    options: [
-      { id: 'multipartForm', label: 'Multipart Form', leftSection: IconForms },
-      { id: 'formUrlEncoded', label: 'Form URL Encoded', leftSection: IconForms }
-    ]
-  },
-  {
-    name: 'Raw',
-    options: [
-      { id: 'json', label: 'JSON', leftSection: IconBraces },
-      { id: 'xml', label: 'XML', leftSection: IconCode },
-      { id: 'text', label: 'TEXT', leftSection: IconFileText },
-      { id: 'sparql', label: 'SPARQL', leftSection: IconDatabase }
-    ]
-  },
-  {
-    name: 'Other',
-    options: [
-      { id: 'file', label: 'File / Binary', leftSection: IconFile },
-      { id: 'none', label: 'No Body', leftSection: IconX }
-    ]
-  }
+  { key: 'multipartForm', label: 'Multipart Form', category: 'Form' },
+  { key: 'formUrlEncoded', label: 'Form URL Encoded', category: 'Form' },
+  { key: 'json', label: 'JSON', category: 'Raw' },
+  { key: 'xml', label: 'XML', category: 'Raw' },
+  { key: 'text', label: 'TEXT', category: 'Raw' },
+  { key: 'sparql', label: 'SPARQL', category: 'Raw' },
+  { key: 'file', label: 'File / Binary', category: 'Other' },
+  { key: 'none', label: 'None', category: 'Other' }
 ];

 const BodyModeSelector = ({
@@ -37,39 +21,62 @@ const BodyModeSelector = ({
  disabled = false,
  className = '',
  wrapperClassName = '',
+  showCategories = true,
  placement = 'bottom-end'
 }) => {
-  // Add onClick handlers to mode options
-  const menuItems = useMemo(() => {
-    return modes.map((group) => ({
-      ...group,
-      options: group.options.map((option) => ({
-        ...option,
-        onClick: () => onModeChange(option.id)
-      }))
-    }));
-  }, [modes, onModeChange]);
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
+        {humanizeRequestBodyMode(currentMode)}
+        {' '}
+        <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeSelect = (mode) => {
+    dropdownTippyRef.current.hide();
+    onModeChange(mode);
+  };
+
+  // Group modes by category for rendering
+  const groupedModes = modes.reduce((acc, mode) => {
+    const category = mode.category || 'Other';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(mode);
+    return acc;
+  }, {});

  return (
-    <StyledWrapper className={wrapperClassName}>
-      <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'}`}>
-        <MenuDropdown
-          items={menuItems}
-          placement={placement}
-          disabled={disabled}
-          className={className}
-          selectedItemId={currentMode}
-          showGroupDividers={false}
-          groupStyle="select"
-        >
-          <div className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
-            {humanizeRequestBodyMode(currentMode)}
-            {' '}
-            <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
-          </div>
-        </MenuDropdown>
-      </div>
-    </StyledWrapper>
+    <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'} ${wrapperClassName}`}>
+      <Dropdown
+        onCreate={onDropdownCreate}
+        icon={<Icon />}
+        placement={placement}
+        disabled={disabled}
+        className={className}
+      >
+        {Object.entries(groupedModes).map(([category, categoryModes]) => (
+          <React.Fragment key={category}>
+            {showCategories && <div className="label-item font-medium">{category}</div>}
+            {categoryModes.map((mode) => (
+              <div
+                key={mode.key}
+                className="dropdown-item"
+                onClick={() => onModeSelect(mode.key)}
+              >
+                {mode.label}
+              </div>
+            ))}
+          </React.Fragment>
+        ))}
+      </Dropdown>
+    </div>
  );
 };

--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -192,6 +192,7 @@ export default class CodeEditor extends React.Component {
    if (editor) {
      editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
      editor.on('change', this._onEdit);
+      editor.on('scroll', this.onScroll);
      editor.scrollTo(null, this.props.initialScroll);
      this.addOverlay();

@@ -274,19 +275,13 @@ export default class CodeEditor extends React.Component {

  componentWillUnmount() {
    if (this.editor) {
-      if (this.props.onScroll) {
-        this.props.onScroll(this.editor);
-      }
-
      this.editor?._destroyLinkAware?.();
      this.editor.off('change', this._onEdit);
+      this.editor.off('scroll', this.onScroll);

      // Clean up lint error tooltip
      this.cleanupLintErrorTooltip?.();

-      const wrapper = this.editor.getWrapperElement();
-      wrapper?.parentNode?.removeChild(wrapper);
-
      this.editor = null;
    }
  }
@@ -330,6 +325,8 @@ export default class CodeEditor extends React.Component {
    this.editor.setOption('mode', 'brunovariables');
  };

+  onScroll = (event) => this.props.onScroll?.(event);
+
  _onEdit = () => {
    if (!this.ignoreChangeEvent && this.editor) {
      this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
@@ -8,12 +8,20 @@ const Wrapper = styled.div`

    .auth-mode-label {
      color: ${(props) => props.theme.colors.text.yellow};
-
-      .caret {
-        color: rgb(140, 140, 140);
-        fill: rgb(140, 140, 140);
-      }
    }
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
  }
 `;

--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
@@ -1,7 +1,7 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,77 +9,113 @@ import StyledWrapper from './StyledWrapper';

 const AuthMode = ({ collection }) => {
  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
  const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');

-  const onModeChange = useCallback((value) => {
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
    dispatch(
      updateCollectionAuthMode({
        collectionUid: collection.uid,
        mode: value
      })
    );
-  }, [dispatch, collection.uid]);
-
-  const menuItems = useMemo(() => [
-    {
-      id: 'awsv4',
-      label: 'AWS Sig v4',
-      onClick: () => onModeChange('awsv4')
-    },
-    {
-      id: 'basic',
-      label: 'Basic Auth',
-      onClick: () => onModeChange('basic')
-    },
-    {
-      id: 'wsse',
-      label: 'WSSE Auth',
-      onClick: () => onModeChange('wsse')
-    },
-    {
-      id: 'bearer',
-      label: 'Bearer Token',
-      onClick: () => onModeChange('bearer')
-    },
-    {
-      id: 'digest',
-      label: 'Digest Auth',
-      onClick: () => onModeChange('digest')
-    },
-    {
-      id: 'ntlm',
-      label: 'NTLM Auth',
-      onClick: () => onModeChange('ntlm')
-    },
-    {
-      id: 'oauth2',
-      label: 'OAuth 2.0',
-      onClick: () => onModeChange('oauth2')
-    },
-    {
-      id: 'apikey',
-      label: 'API Key',
-      onClick: () => onModeChange('apikey')
-    },
-    {
-      id: 'none',
-      label: 'No Auth',
-      onClick: () => onModeChange('none')
-    }
-  ], [onModeChange]);
+  };

  return (
    <StyledWrapper>
      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <MenuDropdown
-          items={menuItems}
-          placement="bottom-end"
-          selectedItemId={authMode}
-        >
-          <div className="flex items-center justify-center auth-mode-label select-none">
-            {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('awsv4');
+            }}
+          >
+            AWS Sig v4
          </div>
-        </MenuDropdown>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('basic');
+            }}
+          >
+            Basic Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('wsse');
+            }}
+          >
+            WSSE Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('bearer');
+            }}
+          >
+            Bearer Token
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('digest');
+            }}
+          >
+            Digest Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('ntlm');
+            }}
+          >
+            NTLM Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('oauth2');
+            }}
+          >
+            OAuth 2.0
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('apikey');
+            }}
+          >
+            API Key
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('none');
+            }}
+          >
+            No Auth
+          </div>
+        </Dropdown>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
@@ -48,37 +48,32 @@ const StyledWrapper = styled.div`
  }

  .protocol-https,
-  .protocol-grpcs,
-  .protocol-wss {
+  .protocol-grpcs {
    position: absolute;
    right: 8px;
    top: 0;
    bottom: 0;
+    transition: transform 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .protocol-https {
-    animation: slideUpDown 9s infinite;
+    animation: slideUpDown 6s infinite;
    transform: translateY(0);
  }

  .protocol-grpcs {
-    animation: slideUpDown 9s infinite 3s;
-    transform: translateY(100%);
-  }
-
-  .protocol-wss {
-    animation: slideUpDown 9s infinite 6s;
+    animation: slideUpDown 6s infinite 3s;
    transform: translateY(100%);
  }

  @keyframes slideUpDown {
-    0%, 30% {
+    0%, 45% {
      transform: translateY(0);
    }
-    33.33%, 97% {
+    50%, 95% {
      transform: translateY(100%);
    }
    100% {
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
@@ -180,7 +180,6 @@ const ClientCertSettings = ({ collection }) => {
              <span className="protocol-placeholder">
                <span className="protocol-https">https://</span>
                <span className="protocol-grpcs">grpcs://</span>
-                <span className="protocol-wss">wss://</span>
              </span>
            </div>
            <input
--- 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,11 @@
 import React from 'react';
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
+import { IconBox, IconFolder, IconWorld, IconApi, IconShare } 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 { addTab } from 'providers/ReduxStore/slices/tabs';
+import { updateEnvironmentSettingsModalVisibility, updateGlobalEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';

 const Info = ({ collection }) => {
  const dispatch = useDispatch();
@@ -53,13 +53,7 @@ const Info = ({ collection }) => {
                  type="button"
                  className="text-sm text-link cursor-pointer hover:underline text-left bg-transparent"
                  onClick={() => {
-                    dispatch(
-                      addTab({
-                        uid: `${collection.uid}-environment-settings`,
-                        collectionUid: collection.uid,
-                        type: 'environment-settings'
-                      })
-                    );
+                    dispatch(updateEnvironmentSettingsModalVisibility(true));
                  }}
                >
                  {collectionEnvironmentCount} collection environment{collectionEnvironmentCount !== 1 ? 's' : ''}
@@ -67,15 +61,7 @@ const Info = ({ collection }) => {
                <button
                  type="button"
                  className="text-sm text-link cursor-pointer hover:underline text-left bg-transparent"
-                  onClick={() => {
-                    dispatch(
-                      addTab({
-                        uid: `${collection.uid}-global-environment-settings`,
-                        collectionUid: collection.uid,
-                        type: 'global-environment-settings'
-                      })
-                    );
-                  }}
+                  onClick={() => dispatch(updateGlobalEnvironmentSettingsModalVisibility(true))}
                >
                  {globalEnvironmentCount} global environment{globalEnvironmentCount !== 1 ? 's' : ''}
                </button>
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  max-width: 800px;
-
-  .settings-label {
-    width: 110px;
-  }
-
-  .textbox {
-    border: 1px solid #ccc;
-    padding: 0.15rem 0.45rem;
-    box-shadow: none;
-    border-radius: 0px;
-    outline: none;
-    box-shadow: none;
-    transition: border-color ease-in-out 0.1s;
-    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
-
-    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-      outline: none !important;
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/index.js
@@ -1,134 +0,0 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-import { updateCollectionPresets } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
-import { get } from 'lodash';
-
-const PresetsSettings = ({ collection }) => {
-  const dispatch = useDispatch();
-  const initialPresets = { requestType: 'http', requestUrl: '' };
-
-  // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig
-  const currentPresets = collection.draft?.brunoConfig
-    ? get(collection, 'draft.brunoConfig.presets', initialPresets)
-    : get(collection, 'brunoConfig.presets', initialPresets);
-
-  // Helper to update presets config
-  const updatePresets = (updates) => {
-    const updatedPresets = { ...currentPresets, ...updates };
-    dispatch(updateCollectionPresets({
-      collectionUid: collection.uid,
-      presets: updatedPresets
-    }));
-  };
-
-  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-
-  const handleRequestTypeChange = (e) => {
-    updatePresets({ requestType: e.target.value });
-  };
-
-  const handleRequestUrlChange = (e) => {
-    updatePresets({ requestUrl: e.target.value });
-  };
-
-  return (
-    <StyledWrapper className="h-full w-full">
-      <div className="text-xs mb-4 mt-4 text-muted">
-        These presets will be used as the default values for new requests in this collection.
-      </div>
-      <div className="bruno-form">
-        <div className="mb-3 flex items-center">
-          <label className="settings-label flex items-center" htmlFor="http">
-            Request Type
-          </label>
-          <div className="flex items-center">
-            <input
-              id="http"
-              className="cursor-pointer"
-              type="radio"
-              name="requestType"
-              onChange={handleRequestTypeChange}
-              value="http"
-              checked={(currentPresets.requestType || 'http') === 'http'}
-            />
-            <label htmlFor="http" className="ml-1 cursor-pointer select-none">
-              HTTP
-            </label>
-
-            <input
-              id="graphql"
-              className="ml-4 cursor-pointer"
-              type="radio"
-              name="requestType"
-              onChange={handleRequestTypeChange}
-              value="graphql"
-              checked={(currentPresets.requestType || 'http') === 'graphql'}
-            />
-            <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
-              GraphQL
-            </label>
-
-            <input
-              id="grpc"
-              className="ml-4 cursor-pointer"
-              type="radio"
-              name="requestType"
-              onChange={handleRequestTypeChange}
-              value="grpc"
-              checked={(currentPresets.requestType || 'http') === 'grpc'}
-            />
-            <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
-              gRPC
-            </label>
-
-            <input
-              id="ws"
-              className="ml-4 cursor-pointer"
-              type="radio"
-              name="requestType"
-              onChange={handleRequestTypeChange}
-              value="ws"
-              checked={(currentPresets.requestType || 'http') === 'ws'}
-            />
-            <label htmlFor="ws" className="ml-1 cursor-pointer select-none">
-              WebSocket
-            </label>
-          </div>
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="request-url">
-            Base URL
-          </label>
-          <div className="flex items-center w-full">
-            <div className="flex items-center flex-grow input-container h-full">
-              <input
-                id="request-url"
-                type="text"
-                name="requestUrl"
-                placeholder="Request URL"
-                className="block textbox"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={handleRequestUrlChange}
-                value={currentPresets.requestUrl || ''}
-                style={{ width: '100%' }}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-6">
-          <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-            Save
-          </button>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default PresetsSettings;
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -9,7 +9,6 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
-import Presets from './Presets';
 import Protobuf from './Protobuf';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
@@ -59,8 +58,6 @@ const CollectionSettings = ({ collection }) => {
  const protobufConfig = collection.draft?.brunoConfig
    ? get(collection, 'draft.brunoConfig.protobuf', {})
    : get(collection, 'brunoConfig.protobuf', {});
-  const presets = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.presets', {}) : get(collection, 'brunoConfig.presets', {});
-  const hasPresets = presets && presets.requestUrl !== '';

  const getTabPanel = (tab) => {
    switch (tab) {
@@ -82,9 +79,6 @@ const CollectionSettings = ({ collection }) => {
      case 'tests': {
        return <Test collection={collection} />;
      }
-      case 'presets': {
-        return <Presets collection={collection} />;
-      }
      case 'proxy': {
        return <ProxySettings collection={collection} />;
      }
@@ -129,10 +123,6 @@ const CollectionSettings = ({ collection }) => {
          Tests
          {hasTests && <StatusDot />}
        </div>
-        <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
-          Presets
-          {hasPresets && <StatusDot />}
-        </div>
        <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
          Proxy
          {Object.keys(proxyConfig).length > 0 && proxyEnabled && <StatusDot />}
--- a/packages/bruno-app/src/components/Cookies/index.js
+++ b/packages/bruno-app/src/components/Cookies/index.js
@@ -137,7 +137,6 @@ const CollectionProperties = ({ onClose }) => {
              value={searchText || ''}
              onChange={(e) => setSearchText(e.target.value)}
              className="block textbox non-passphrase-input ml-auto font-normal"
-              autoFocus
            />
            <button
              type="submit"
--- a/packages/bruno-app/src/components/CreateUntitledRequest/index.js
+++ b/packages/bruno-app/src/components/CreateUntitledRequest/index.js
@@ -1,19 +1,26 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { newHttpRequest, newGrpcRequest, newWsRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { generateUniqueRequestName } from 'utils/collections';
 import { sanitizeName } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { IconApi, IconBrandGraphql, IconPlugConnected, IconCode, IconPlus } from '@tabler/icons';
-import ActionIcon from 'ui/ActionIcon';

 const CreateUntitledRequest = ({ collectionUid, itemUid = null, onRequestCreated, placement = 'bottom' }) => {
  const dispatch = useDispatch();
  const collections = useSelector((state) => state.collections.collections);
  const collection = collections?.find((c) => c.uid === collectionUid);
+  const dropdownTippyRef = useRef();

-  const handleCreateHttpRequest = useCallback(async () => {
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  if (!collection) {
+    return null;
+  }
+
+  const handleCreateHttpRequest = async () => {
+    dropdownTippyRef.current?.hide();
    const uniqueName = await generateUniqueRequestName(collection, 'Untitled', itemUid);
    const filename = sanitizeName(uniqueName);

@@ -33,9 +40,10 @@ const CreateUntitledRequest = ({ collectionUid, itemUid = null, onRequestCreated
        onRequestCreated?.();
      })
      .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
-  }, [dispatch, collection, itemUid, onRequestCreated]);
+  };

-  const handleCreateGraphQLRequest = useCallback(async () => {
+  const handleCreateGraphQLRequest = async () => {
+    dropdownTippyRef.current?.hide();
    const uniqueName = await generateUniqueRequestName(collection, 'Untitled', itemUid);
    const filename = sanitizeName(uniqueName);

@@ -62,9 +70,10 @@ const CreateUntitledRequest = ({ collectionUid, itemUid = null, onRequestCreated
        onRequestCreated?.();
      })
      .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
-  }, [dispatch, collection, itemUid, onRequestCreated]);
+  };

-  const handleCreateWebSocketRequest = useCallback(async () => {
+  const handleCreateWebSocketRequest = async () => {
+    dropdownTippyRef.current?.hide();
    const uniqueName = await generateUniqueRequestName(collection, 'Untitled', itemUid);
    const filename = sanitizeName(uniqueName);

@@ -83,9 +92,10 @@ const CreateUntitledRequest = ({ collectionUid, itemUid = null, onRequestCreated
        onRequestCreated?.();
      })
      .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
-  }, [dispatch, collection, itemUid, onRequestCreated]);
+  };

-  const handleCreateGrpcRequest = useCallback(async () => {
+  const handleCreateGrpcRequest = async () => {
+    dropdownTippyRef.current?.hide();
    const uniqueName = await generateUniqueRequestName(collection, 'Untitled', itemUid);
    const filename = sanitizeName(uniqueName);

@@ -103,49 +113,59 @@ const CreateUntitledRequest = ({ collectionUid, itemUid = null, onRequestCreated
        onRequestCreated?.();
      })
      .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
-  }, [dispatch, collection, itemUid, onRequestCreated]);
-
-  const menuItems = useMemo(() => [
-    {
-      id: 'http',
-      label: 'HTTP',
-      leftSection: <IconApi size={16} strokeWidth={2} />,
-      onClick: handleCreateHttpRequest
-    },
-    {
-      id: 'graphql',
-      label: 'GraphQL',
-      leftSection: <IconBrandGraphql size={16} strokeWidth={2} />,
-      onClick: handleCreateGraphQLRequest
-    },
-    {
-      id: 'websocket',
-      label: 'WebSocket',
-      leftSection: <IconPlugConnected size={16} strokeWidth={2} />,
-      onClick: handleCreateWebSocketRequest
-    },
-    {
-      id: 'grpc',
-      label: 'gRPC',
-      leftSection: <IconCode size={16} strokeWidth={2} />,
-      onClick: handleCreateGrpcRequest
-    }
-  ], [handleCreateHttpRequest, handleCreateGraphQLRequest, handleCreateWebSocketRequest, handleCreateGrpcRequest]);
-
-  if (!collection) {
-    return null;
-  }
+  };

  return (
-    <MenuDropdown
-      items={menuItems}
-      placement={placement}
-      autoFocusFirstOption={true}
-    >
-      <ActionIcon size="sm">
-        <IconPlus size={16} strokeWidth={2} />
-      </ActionIcon>
-    </MenuDropdown>
+    <Dropdown onCreate={onDropdownCreate} icon={<IconPlus size={16} strokeWidth={2} />} placement={placement}>
+      <div
+        className="dropdown-item"
+        onClick={(e) => {
+          dropdownTippyRef.current.hide();
+          handleCreateHttpRequest();
+        }}
+      >
+        <span className="dropdown-icon">
+          <IconApi size={16} strokeWidth={2} />
+        </span>
+        HTTP
+      </div>
+      <div
+        className="dropdown-item"
+        onClick={(e) => {
+          dropdownTippyRef.current.hide();
+          handleCreateGraphQLRequest();
+        }}
+      >
+        <span className="dropdown-icon">
+          <IconBrandGraphql size={16} strokeWidth={2} />
+        </span>
+        GraphQL
+      </div>
+      <div
+        className="dropdown-item"
+        onClick={(e) => {
+          dropdownTippyRef.current.hide();
+          handleCreateWebSocketRequest();
+        }}
+      >
+        <span className="dropdown-icon">
+          <IconPlugConnected size={16} strokeWidth={2} />
+        </span>
+        WebSocket
+      </div>
+      <div
+        className="dropdown-item"
+        onClick={(e) => {
+          dropdownTippyRef.current.hide();
+          handleCreateGrpcRequest();
+        }}
+      >
+        <span className="dropdown-icon">
+          <IconCode size={16} strokeWidth={2} />
+        </span>
+        gRPC
+      </div>
+    </Dropdown>
  );
 };

--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -41,6 +41,7 @@ const Wrapper = styled.div`
        padding: 0.375rem 0.625rem 0.25rem 0.625rem;
        font-size: 0.6875rem;
        font-weight: 600;
+        text-transform: uppercase;
        letter-spacing: 0.025em;
        color: ${(props) => props.theme.dropdown.color};
        opacity: 0.6;
@@ -136,10 +137,6 @@ const Wrapper = styled.div`
          margin-top: 0.25rem;
          padding-top: 0.375rem;
        }
-
-        &.dropdown-item-select {
-          padding-left: 1.5rem;
-        }
      }

      .dropdown-separator {
--- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
@@ -35,17 +35,17 @@ const StyledWrapper = styled.div`
      border-right: ${(props) => props.theme.workspace.environments.indentBorder};
      vertical-align: middle;

+      &:nth-child(1) {
+        width: 25px !important;
+        border-right: none;
+      }
+
      &:last-child {
        border-right: none;
      }
    }
  }

-  &.has-checkbox thead td:nth-child(1) {
-    width: 25px !important;
-    border-right: none;
-  }
-
  tbody {
    tr {
      transition: background 0.1s ease;
@@ -62,6 +62,19 @@ const StyledWrapper = styled.div`
        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
        vertical-align: middle;

+        &:nth-child(1) {
+          width: 25px;
+          border-right: none;
+          text-align: center;
+          vertical-align: middle;
+          line-height: 1;
+
+          input[type='checkbox'] {
+            vertical-align: baseline;
+            display: inline-block;
+          }
+        }
+
        &:last-child {
          border-right: none;
        }
@@ -69,19 +82,6 @@ const StyledWrapper = styled.div`
    }
  }

-  &.has-checkbox tbody td:nth-child(1) {
-    width: 25px;
-    border-right: none;
-    text-align: center;
-    vertical-align: middle;
-    line-height: 1;
-
-    input[type='checkbox'] {
-      vertical-align: baseline;
-      display: inline-block;
-    }
-  }
-
  .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
@@ -16,8 +16,7 @@ const EditableTable = ({
  checkboxKey = 'enabled',
  reorderable = false,
  onReorder,
-  showAddRow = true,
-  testId = 'editable-table'
+  showAddRow = true
 }) => {
  const tableRef = useRef(null);
  const emptyRowUidRef = useRef(null);
@@ -224,8 +223,8 @@ const EditableTable = ({
  const reorderableRowCount = showAddRow ? rowsWithEmpty.length - 1 : rowsWithEmpty.length;

  return (
-    <StyledWrapper className={showCheckbox ? 'has-checkbox' : 'no-checkbox'}>
-      <div className="table-container" ref={tableRef} data-testid={testId}>
+    <StyledWrapper>
+      <div className="table-container" ref={tableRef}>
        <table>
          <thead>
            <tr>
@@ -286,7 +285,6 @@ const EditableTable = ({
                        <input
                          type="checkbox"
                          className="mousetrap"
-                          data-testid="column-checkbox"
                          checked={row[checkboxKey] ?? true}
                          onChange={(e) => handleCheckboxChange(row.uid, e.target.checked)}
                        />
@@ -294,17 +292,14 @@ const EditableTable = ({
                    </td>
                  )}
                  {columns.map((column) => (
-                    <td key={column.key} data-testid={`column-${column.key}`}>
+                    <td key={column.key}>
                      {renderCell(column, row, rowIndex)}
                    </td>
                  ))}
                  {showDelete && (
                    <td>
                      {!isEmpty && (
-                        <button
-                          data-testid="column-delete"
-                          onClick={() => handleRemoveRow(row.uid)}
-                        >
+                        <button onClick={() => handleRemoveRow(row.uid)}>
                          <IconTrash strokeWidth={1.5} size={18} />
                        </button>
                      )}
--- a/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js
@@ -1,46 +0,0 @@
-import React from 'react';
-import { IconAlertTriangle } from '@tabler/icons';
-import Modal from 'components/Modal';
-import Portal from 'components/Portal';
-
-const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose, isGlobal }) => {
-  return (
-    <Portal>
-      <Modal
-        size="md"
-        title="Unsaved changes"
-        disableEscapeKey={true}
-        disableCloseOnOutsideClick={true}
-        closeModalFadeTimeout={150}
-        handleCancel={onCancel}
-        hideFooter={true}
-      >
-        <div className="flex items-center font-normal">
-          <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-          <h1 className="ml-2 text-lg font-medium">Hold on...</h1>
-        </div>
-        <div className="font-normal mt-4">
-          You have unsaved changes in {isGlobal ? 'global' : 'collection'} environment settings.
-        </div>
-
-        <div className="flex justify-between mt-6">
-          <div>
-            <button className="btn btn-sm btn-danger" onClick={onCloseWithoutSave}>
-              Don't Save
-            </button>
-          </div>
-          <div>
-            <button className="btn btn-close btn-sm mr-2" onClick={onCancel}>
-              Cancel
-            </button>
-            <button className="btn btn-secondary btn-sm" onClick={onSaveAndClose}>
-              Save
-            </button>
-          </div>
-        </div>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default ConfirmCloseEnvironment;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -1,16 +1,18 @@
 import React, { useMemo, useState, useRef, forwardRef } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
-import { IconWorld, IconDatabase, IconCaretDown } from '@tabler/icons';
+import { IconWorld, IconDatabase, IconCaretDown, IconSettings, IconPlus, IconDownload } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
-import { addTab } from 'providers/ReduxStore/slices/tabs';
+import { updateEnvironmentSettingsModalVisibility, updateGlobalEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import toast from 'react-hot-toast';
 import EnvironmentListContent from './EnvironmentListContent/index';
+import EnvironmentSettings from '../EnvironmentSettings';
+import GlobalEnvironmentSettings from 'components/GlobalEnvironments/EnvironmentSettings';
 import CreateEnvironment from '../EnvironmentSettings/CreateEnvironment';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
-import CreateGlobalEnvironment from 'components/WorkspaceHome/WorkspaceEnvironments/CreateEnvironment';
+import CreateGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment';
 import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';

@@ -25,6 +27,8 @@ const EnvironmentSelector = ({ collection }) => {

  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
  const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
+  const isEnvironmentSettingsModalOpen = useSelector((state) => state.app.isEnvironmentSettingsModalOpen);
+  const isGlobalEnvironmentSettingsModalOpen = useSelector((state) => state.app.isGlobalEnvironmentSettingsModalOpen);
  const activeGlobalEnvironment = activeGlobalEnvironmentUid
    ? find(globalEnvironments, (e) => e.uid === activeGlobalEnvironmentUid)
    : null;
@@ -71,24 +75,12 @@ const EnvironmentSelector = ({ collection }) => {
      });
  };

-  // Settings handler - opens environment settings tab
+  // Settings handler
  const handleSettingsClick = () => {
    if (activeTab === 'collection') {
-      dispatch(
-        addTab({
-          uid: `${collection.uid}-environment-settings`,
-          collectionUid: collection.uid,
-          type: 'environment-settings'
-        })
-      );
+      dispatch(updateEnvironmentSettingsModalVisibility(true));
    } else {
-      dispatch(
-        addTab({
-          uid: `${collection.uid}-global-environment-settings`,
-          collectionUid: collection.uid,
-          type: 'global-environment-settings'
-        })
-      );
+      dispatch(updateGlobalEnvironmentSettingsModalVisibility(true));
    }
    dropdownTippyRef.current.hide();
  };
@@ -113,6 +105,12 @@ const EnvironmentSelector = ({ collection }) => {
    dropdownTippyRef.current.hide();
  };

+  // Modal handlers
+  const handleCloseSettings = () => {
+    dispatch(updateEnvironmentSettingsModalVisibility(false));
+    dispatch(updateGlobalEnvironmentSettingsModalVisibility(false));
+  };
+
  // Calculate dropdown width based on the longest environment name.
  // To prevent resizing while switching between collection and global environments.
  const dropdownWidth = useMemo(() => {
@@ -219,17 +217,25 @@ const EnvironmentSelector = ({ collection }) => {
        </Dropdown>
      </div>

+      {/* Modals - Rendered outside dropdown to avoid conflicts */}
+      {isGlobalEnvironmentSettingsModalOpen && (
+        <GlobalEnvironmentSettings
+          globalEnvironments={globalEnvironments}
+          collection={collection}
+          activeGlobalEnvironmentUid={activeGlobalEnvironmentUid}
+          onClose={handleCloseSettings}
+        />
+      )}
+
+      {isEnvironmentSettingsModalOpen && (
+        <EnvironmentSettings collection={collection} onClose={handleCloseSettings} />
+      )}
+
      {showCreateGlobalModal && (
        <CreateGlobalEnvironment
          onClose={() => setShowCreateGlobalModal(false)}
          onEnvironmentCreated={() => {
-            dispatch(
-              addTab({
-                uid: `${collection.uid}-global-environment-settings`,
-                collectionUid: collection.uid,
-                type: 'global-environment-settings'
-              })
-            );
+            dispatch(updateGlobalEnvironmentSettingsModalVisibility(true));
          }}
        />
      )}
@@ -239,13 +245,7 @@ const EnvironmentSelector = ({ collection }) => {
          type="global"
          onClose={() => setShowImportGlobalModal(false)}
          onEnvironmentCreated={() => {
-            dispatch(
-              addTab({
-                uid: `${collection.uid}-global-environment-settings`,
-                collectionUid: collection.uid,
-                type: 'global-environment-settings'
-              })
-            );
+            dispatch(updateGlobalEnvironmentSettingsModalVisibility(true));
          }}
        />
      )}
@@ -255,13 +255,7 @@ const EnvironmentSelector = ({ collection }) => {
          collection={collection}
          onClose={() => setShowCreateCollectionModal(false)}
          onEnvironmentCreated={() => {
-            dispatch(
-              addTab({
-                uid: `${collection.uid}-environment-settings`,
-                collectionUid: collection.uid,
-                type: 'environment-settings'
-              })
-            );
+            dispatch(updateEnvironmentSettingsModalVisibility(true));
          }}
        />
      )}
@@ -272,13 +266,7 @@ const EnvironmentSelector = ({ collection }) => {
          collection={collection}
          onClose={() => setShowImportCollectionModal(false)}
          onEnvironmentCreated={() => {
-            dispatch(
-              addTab({
-                uid: `${collection.uid}-environment-settings`,
-                collectionUid: collection.uid,
-                type: 'environment-settings'
-              })
-            );
+            dispatch(updateEnvironmentSettingsModalVisibility(true));
          }}
        />
      )}
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { IconAlertTriangle } from '@tabler/icons';
+import Modal from 'components/Modal';
+import { createPortal } from 'react-dom';
+
+const ConfirmSwitchEnv = ({ onCancel }) => {
+  return createPortal(
+    <Modal
+      size="md"
+      title="Unsaved changes"
+      confirmText="Save and Close"
+      cancelText="Close without saving"
+      disableEscapeKey={true}
+      disableCloseOnOutsideClick={true}
+      closeModalFadeTimeout={150}
+      handleCancel={onCancel}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      hideFooter={true}
+    >
+      <div className="flex items-center font-normal">
+        <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
+      </div>
+      <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
+
+      <div className="flex justify-between mt-6">
+        <div>
+          <button className="btn btn-sm btn-danger" onClick={onCancel}>
+            Close
+          </button>
+        </div>
+        <div></div>
+      </div>
+    </Modal>,
+    document.body
+  );
+};
+
+export default ConfirmSwitchEnv;
--- 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
@@ -1,192 +1,67 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-
-  .table-container {
-    overflow-y: auto;
-    border-radius: 8px;
-    border: ${(props) => props.theme.workspace.environments.indentBorder};
-  }
-
  table {
    width: 100%;
    border-collapse: collapse;
+    font-weight: 500;
    table-layout: fixed;
-    font-size: 12px;

+    thead,
    td {
+      border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
+      padding: 4px 10px;
      vertical-align: middle;
-      padding: 2px 10px;

-      &:nth-child(1) {
-        width: 25px;
-        border-right: none;
-      }
+      &:nth-child(1),
      &:nth-child(4) {
-        width: 80px;
+        width: 70px;
      }
      &:nth-child(5) {
-        width: 60px;
+        width: 40px;
      }

      &:nth-child(2) {
-        width: 30%;
+        width: 25%;
      }
    }

    thead {
-      color: ${(props) => props.theme.colors.text};
-      background: ${(props) => props.theme.sidebar.bg};
+      color: ${(props) => props.theme.table.thead.color};
      font-size: ${(props) => props.theme.font.size.base};
      user-select: none;
-
-      td {
-        padding: 8px 10px;
-        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
-
-        &:last-child {
-          border-right: none;
-        }
-      }
    }
-
-    tbody {
-      tr {
-        transition: background 0.1s ease;
-
-        &:last-child td {
-          border-bottom: none;
-        }
-
-        td {
-          border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-          border-right: ${(props) => props.theme.workspace.environments.indentBorder};
-
-          &:last-child {
-            border-right: none;
-          }
-        }
-      }
+    thead td {
+      padding: 6px 10px;
    }
  }

  .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};
-    }
+    font-size: ${(props) => props.theme.font.size.base};
  }

  .tooltip-mod {
-    font-size: 11px !important;
-    max-width: 200px !important;
+    font-size: ${(props) => props.theme.font.size.xs} !important;
+    width: 150px !important;
  }

  input[type='text'] {
    width: 100%;
-    border: 1px solid transparent;
+    border: solid 1px transparent;
    outline: none !important;
    background-color: transparent;
-    color: ${(props) => props.theme.text};
-    padding: 0;
-    font-size: 12px;
-    border-radius: 4px;
-    transition: all 0.15s ease;

    &:focus {
      outline: none !important;
+      border: solid 1px transparent;
    }
  }

  input[type='checkbox'] {
    cursor: pointer;
-    width: 14px;
-    height: 14px;
-    accent-color: ${(props) => props.theme.workspace.accent};
    vertical-align: middle;
    margin: 0;
  }
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    color: ${(props) => props.theme.colors.text.muted};
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: color 0.15s ease, background 0.15s ease;
-  }
-
-  .button-container {
-    padding: 12px 2px;
-    background: ${(props) => props.theme.bg};
-    flex-shrink: 0;
-    display: flex;
-    gap: 8px;
-  }
-
-  .submit {
-    padding: 7px 16px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 6px;
-    border: none;
-    background: ${(props) => props.theme.workspace.accent};
-    color: ${(props) => props.theme.bg};
-    cursor: pointer;
-    transition: opacity 0.15s ease;
-
-    &:hover {
-      opacity: 0.9;
-    }
-  }
-
-  .reset {
-    background: transparent;
-    padding: 6px 16px;
-    border: 1px solid ${(props) => props.theme.workspace.accent};
-    color: ${(props) => props.theme.workspace.accent};
-    &:hover {
-      opacity: 0.9;
-    }
-  }
-
-  .discard {
-    padding: 7px 16px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 6px;
-    background: transparent;
-    color: ${(props) => props.theme.text};
-    border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
-    cursor: pointer;
-    transition: all 0.15s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-    }
-  }
 `;

 export default Wrapper;
--- 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,43 +1,34 @@
-import React, { useCallback, useRef, useMemo, useEffect } from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import { get } from 'lodash';
-import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
+import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
+import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import MultiLineEditor from 'components/MultiLineEditor/index';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { variableNameRegex } from 'utils/common/regex';
-import toast from 'react-hot-toast';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { setEnvironmentsDraft, clearEnvironmentsDraft } from 'providers/ReduxStore/slices/collections';
+import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';
-import { getGlobalEnvironmentVariables, flattenItems, isItemARequest } from 'utils/collections';
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import { getGlobalEnvironmentVariables, flattenItems, isItemARequest } from 'utils/collections';
 import { sensitiveFields } from './constants';

-const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
+const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables, onClose }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();
+  const addButtonRef = useRef(null);
  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);

-  const environmentsDraft = collection?.environmentsDraft;
-  const hasDraftForThisEnv = environmentsDraft?.environmentUid === environment.uid;
-
-  // Track environment changes for draft restoration
-  const prevEnvUidRef = React.useRef(null);
-  const mountedRef = React.useRef(false);
-
-  let _collection = collection ? cloneDeep(collection) : {};
+  let _collection = cloneDeep(collection);

  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
-  if (_collection) {
-    _collection.globalEnvironmentVariables = globalEnvironmentVariables;
-  }
+  _collection.globalEnvironmentVariables = globalEnvironmentVariables;

-  // Check for non-secret variables used in sensitive fields
  const nonSecretSensitiveVarUsageMap = useMemo(() => {
    const result = {};
    if (!collection || !environment?.variables) {
@@ -53,7 +44,7 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
      const value = get(obj, fieldPath);
      if (typeof value === 'string') {
        varNames.forEach((varName) => {
-          if (new RegExp(`\\{\\{\\s*${varName}\\s*\\}\\}`).test(value)) {
+          if (new RegExp(`\{\{\s*${varName}\s*\}\}`).test(value)) {
            result[varName] = true;
          }
        });
@@ -82,147 +73,51 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
    return result;
  }, [collection, environment]);

-  const hasSensitiveUsage = (name) => !!nonSecretSensitiveVarUsageMap[name];
-
-  // Initial values based only on saved environment variables (not draft)
-  // Draft restoration happens in a separate effect to avoid infinite loops
-  const initialValues = React.useMemo(() => {
-    const vars = environment.variables || [];
-    return [
-      ...vars,
-      {
-        uid: uuid(),
-        name: '',
-        value: '',
-        type: 'text',
-        secret: false,
-        enabled: true
-      }
-    ];
-  }, [environment.uid, environment.variables]);
-
  const formik = useFormik({
    enableReinitialize: true,
-    initialValues: initialValues,
+    initialValues: environment.variables || [],
    validationSchema: Yup.array().of(
      Yup.object({
        enabled: Yup.boolean(),
        name: Yup.string()
-          .when('$isLastRow', {
-            is: true,
-            then: (schema) => schema.optional(),
-            otherwise: (schema) =>
-              schema
-                .required('Name cannot be empty')
-                .matches(
-                  variableNameRegex,
-                  'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.'
-                )
-                .trim()
-          }),
+          .required('Name cannot be empty')
+          .matches(
+            variableNameRegex,
+            'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.'
+          )
+          .trim(),
        secret: Yup.boolean(),
        type: Yup.string(),
        uid: Yup.string(),
-        value: Yup.mixed().nullable()
+        value: Yup.string().trim().nullable()
      })
    ),
-    validate: (values) => {
-      const errors = {};
-      values.forEach((variable, index) => {
-        const isLastRow = index === values.length - 1;
-        const isEmptyRow = !variable.name || variable.name.trim() === '';
+    onSubmit: (values) => {
+      if (!formik.dirty) {
+        toast.error('Nothing to save');
+        return;
+      }

-        if (isLastRow && isEmptyRow) {
-          return;
-        }
-
-        if (!variable.name || variable.name.trim() === '') {
-          if (!errors[index]) errors[index] = {};
-          errors[index].name = 'Name cannot be empty';
-        } else if (!variableNameRegex.test(variable.name)) {
-          if (!errors[index]) errors[index] = {};
-          errors[index].name
-            = 'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.';
-        }
-      });
-      return Object.keys(errors).length > 0 ? errors : {};
-    },
-    onSubmit: () => {}
+      dispatch(saveEnvironment(cloneDeep(values), environment.uid, collection.uid))
+        .then(() => {
+          toast.success('Changes saved successfully');
+          formik.resetForm({ values });
+          setIsModified(false);
+        })
+        .catch(() => toast.error('An error occurred while saving the changes'));
+    }
  });

-  // Restore draft values on mount or environment switch
-  useEffect(() => {
-    const isMount = !mountedRef.current;
-    const envChanged = prevEnvUidRef.current !== null && prevEnvUidRef.current !== environment.uid;
+  const hasSensitiveUsage = (name) => !!nonSecretSensitiveVarUsageMap[name];

-    prevEnvUidRef.current = environment.uid;
-    mountedRef.current = true;
+  // Effect to track modifications.
+  React.useEffect(() => {
+    setIsModified(formik.dirty);
+  }, [formik.dirty]);

-    if ((isMount || envChanged) && hasDraftForThisEnv && environmentsDraft?.variables) {
-      formik.setValues([
-        ...environmentsDraft.variables,
-        {
-          uid: uuid(),
-          name: '',
-          value: '',
-          type: 'text',
-          secret: false,
-          enabled: true
-        }
-      ]);
-    }
-  }, [environment.uid, hasDraftForThisEnv, environmentsDraft?.variables]);
-
-  const savedValuesJson = useMemo(() => {
-    return JSON.stringify(environment.variables || []);
-  }, [environment.variables]);
-
-  useEffect(() => {
-    const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-    const currentValuesJson = JSON.stringify(currentValues);
-    const hasActualChanges = currentValuesJson !== savedValuesJson;
-    setIsModified(hasActualChanges);
-  }, [formik.values, savedValuesJson, setIsModified]);
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-      const currentValuesJson = JSON.stringify(currentValues);
-      const hasActualChanges = currentValuesJson !== savedValuesJson;
-
-      // Get existing draft for comparison
-      const existingDraftVariables = hasDraftForThisEnv ? environmentsDraft?.variables : null;
-      const existingDraftJson = existingDraftVariables ? JSON.stringify(existingDraftVariables) : null;
-
-      if (hasActualChanges) {
-        // Only dispatch if draft values are actually different
-        if (currentValuesJson !== existingDraftJson) {
-          dispatch(setEnvironmentsDraft({
-            collectionUid: collection.uid,
-            environmentUid: environment.uid,
-            variables: currentValues
-          }));
-        }
-      } else if (hasDraftForThisEnv) {
-        dispatch(clearEnvironmentsDraft({ collectionUid: collection.uid }));
-      }
-    }, 300);
-
-    return () => clearTimeout(timeoutId);
-  }, [formik.values, savedValuesJson, environment.uid, collection.uid, dispatch, hasDraftForThisEnv, environmentsDraft?.variables]);
-
-  const ErrorMessage = ({ name, index }) => {
+  const ErrorMessage = ({ name }) => {
    const meta = formik.getFieldMeta(name);
-    const id = `error-${name}-${index}`;
-
-    const isLastRow = index === formik.values.length - 1;
-    const variable = formik.values[index];
-    const isEmptyRow = !variable?.name || variable.name.trim() === '';
-
-    if (isLastRow && isEmptyRow) {
-      return null;
-    }
-
+    const id = uuid();
    if (!meta.error || !meta.touched) {
      return null;
    }
@@ -234,161 +129,54 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
    );
  };

-  const handleRemoveVar = useCallback((id) => {
-    const currentValues = formik.values;
-
-    if (!currentValues || currentValues.length === 0) {
-      return;
-    }
-
-    const lastRow = currentValues[currentValues.length - 1];
-    const isLastEmptyRow = lastRow?.uid === id && (!lastRow.name || lastRow.name.trim() === '');
-
-    if (isLastEmptyRow) {
-      return;
-    }
-
-    const filteredValues = currentValues.filter((variable) => variable.uid !== id);
-
-    const hasEmptyLastRow
-      = filteredValues.length > 0
-        && (!filteredValues[filteredValues.length - 1].name
-          || filteredValues[filteredValues.length - 1].name.trim() === '');
-
-    const newValues = hasEmptyLastRow
-      ? filteredValues
-      : [
-          ...filteredValues,
-          {
-            uid: uuid(),
-            name: '',
-            value: '',
-            type: 'text',
-            secret: false,
-            enabled: true
-          }
-        ];
-
-    formik.setValues(newValues);
-  }, [formik.values]);
-
-  const handleNameChange = (index, e) => {
-    formik.handleChange(e);
-    const isLastRow = index === formik.values.length - 1;
-
-    if (isLastRow) {
-      const newVariable = {
-        uid: uuid(),
-        name: '',
-        value: '',
-        type: 'text',
-        secret: false,
-        enabled: true
-      };
-      setTimeout(() => {
-        formik.setFieldValue(formik.values.length, newVariable, false);
-      }, 0);
-    }
+  const addVariable = () => {
+    const newVariable = {
+      uid: uuid(),
+      name: '',
+      value: '',
+      type: 'text',
+      secret: false,
+      enabled: true
+    };
+    formik.setFieldValue(formik.values.length, newVariable, false);
  };

-  const handleNameBlur = (index) => {
-    formik.setFieldTouched(`${index}.name`, true, true);
-  };
-
-  const handleNameKeyDown = (index, e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      formik.setFieldTouched(`${index}.name`, true, true);
-    }
-  };
-
-  const handleSave = () => {
-    const variablesToSave = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-    const savedValues = environment.variables || [];
-
-    const hasChanges = JSON.stringify(variablesToSave) !== JSON.stringify(savedValues);
-    if (!hasChanges) {
-      toast.error('No changes to save');
-      return;
-    }
-
-    const hasValidationErrors = variablesToSave.some((variable) => {
-      if (!variable.name || variable.name.trim() === '') {
-        return true;
-      }
-      if (!variableNameRegex.test(variable.name)) {
-        return true;
-      }
-      return false;
-    });
-
-    if (hasValidationErrors) {
-      toast.error('Please fix validation errors before saving');
-      return;
-    }
-
-    dispatch(saveEnvironment(cloneDeep(variablesToSave), environment.uid, collection.uid))
+  const onActivate = () => {
+    dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
      .then(() => {
-        toast.success('Changes saved successfully');
-        const newValues = [
-          ...variablesToSave,
-          {
-            uid: uuid(),
-            name: '',
-            value: '',
-            type: 'text',
-            secret: false,
-            enabled: true
-          }
-        ];
-        formik.resetForm({ values: newValues });
-        setIsModified(false);
+        if (environment) {
+          toast.success(`Environment changed to ${environment.name}`);
+          onClose();
+        } else {
+          toast.success(`No Environments are active now`);
+        }
      })
-      .catch((error) => {
-        console.error(error);
-        toast.error('An error occurred while saving the changes');
-      });
+      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
  };

-  const handleReset = () => {
-    const originalVars = environment.variables || [];
-    const resetValues = [
-      ...originalVars,
-      {
-        uid: uuid(),
-        name: '',
-        value: '',
-        type: 'text',
-        secret: false,
-        enabled: true
-      }
-    ];
-    formik.resetForm({ values: resetValues });
-    setIsModified(false);
+  const handleRemoveVar = (id) => {
+    formik.setValues(formik.values.filter((variable) => variable.uid !== id));
  };

-  const handleSaveRef = useRef(handleSave);
-  handleSaveRef.current = handleSave;
-
  useEffect(() => {
-    const handleSaveEvent = () => {
-      handleSaveRef.current();
-    };
+    if (formik.dirty) {
+      // Smooth scrolling to the changed parameter is temporarily disabled
+      // due to UX issues when editing the first row in a long list of environment variables.
+      // addButtonRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [formik.values, formik.dirty]);

-    window.addEventListener('environment-save', handleSaveEvent);
-
-    return () => {
-      window.removeEventListener('environment-save', handleSaveEvent);
-    };
-  }, []);
+  const handleReset = () => {
+    formik.resetForm({ originalEnvironmentVariables });
+  };

  return (
-    <StyledWrapper>
-      <div className="table-container">
-        <table>
+    <StyledWrapper className="w-full mt-6 mb-6">
+      <div className="h-[50vh] overflow-y-auto w-full">
+        <table className="environment-variables">
          <thead>
            <tr>
-              <td className="text-center"></td>
+              <td className="text-center">Enabled</td>
              <td>Name</td>
              <td>Value</td>
              <td className="text-center">Secret</td>
@@ -396,112 +184,99 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
            </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;
-
-              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>
-              );
-            })}
+            {formik.values.map((variable, index) => (
+              <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
+                <td className="text-center">
+                  <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}
+                      onChange={formik.handleChange}
+                    />
+                    <ErrorMessage name={`${index}.name`} />
+                  </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}
+                      isSecret={variable.secret}
+                      onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                      enableBrunoVarInfo={false}
+                    />
+                  </div>
+                  {!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">
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${index}.secret`}
+                    checked={variable.secret}
+                    onChange={formik.handleChange}
+                  />
+                </td>
+                <td>
+                  <button onClick={() => handleRemoveVar(variable.uid)}>
+                    <IconTrash strokeWidth={1.5} size={20} />
+                  </button>
+                </td>
+              </tr>
+            ))}
          </tbody>
        </table>
-      </div>
-
-      <div className="button-container">
-        <div className="flex items-center">
-          <button type="button" className="submit" onClick={handleSave} data-testid="save-env">
-            Save
-          </button>
-          <button type="button" className="submit reset ml-2" onClick={handleReset} data-testid="reset-env">
-            Reset
+        <div>
+          <button
+            ref={addButtonRef}
+            className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
+            onClick={addVariable}
+            id="add-variable"
+            data-testid="add-variable"
+          >
+            + Add Variable
          </button>
        </div>
      </div>
+
+      <div className="flex items-center">
+        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit} data-testid="save-env">
+          <IconDeviceFloppy size={16} strokeWidth={1.5} className="mr-1" />
+          Save
+        </button>
+        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset} data-testid="reset-env">
+          <IconRefresh size={16} strokeWidth={1.5} className="mr-1" />
+          Reset
+        </button>
+        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate} data-testid="activate-env">
+          <IconCircleCheck size={16} strokeWidth={1.5} className="mr-1" />
+          Activate
+        </button>
+      </div>
    </StyledWrapper>
  );
 };
-
 export default EnvironmentVariables;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
@@ -1,134 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: ${(props) => props.theme.bg};
-
-  .header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 20px 8px 20px;
-    flex-shrink: 0;
-
-    .title {
-      font-size: 13px;
-      font-weight: 600;
-      color: ${(props) => props.theme.text};
-      margin: 0;
-    }
-
-    .title-container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex: 1;
-
-      &.renaming {
-        .title-input {
-          flex: 1;
-          background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-          outline: none;
-          color: ${(props) => props.theme.text};
-          font-size: 15px;
-          font-weight: 600;
-          padding: 4px 8px;
-          border-radius: 5px;
-        }
-
-        .inline-actions {
-          display: flex;
-          gap: 2px;
-        }
-
-        .inline-action-btn {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 26px;
-          height: 26px;
-          padding: 0;
-          background: transparent;
-          border: none;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: all 0.15s ease;
-
-          &.save {
-            color: ${(props) => props.theme.textLink};
-
-            &:hover {
-              background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-            }
-          }
-
-          &.cancel {
-            color: ${(props) => props.theme.colors.text.muted};
-
-            &:hover {
-              background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-              color: ${(props) => props.theme.text};
-            }
-          }
-        }
-      }
-    }
-
-    .title-error {
-      position: absolute;
-      top: 100%;
-      left: 20px;
-      margin-top: 4px;
-      padding: 4px 8px;
-      font-size: 11px;
-      color: ${(props) => props.theme.colors.text.danger};
-      background: ${(props) => props.theme.bg};
-      border: 1px solid ${(props) => props.theme.colors.text.danger};
-      border-radius: 4px;
-      white-space: nowrap;
-    }
-
-    .actions {
-      display: flex;
-      gap: 2px;
-
-      button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 28px;
-        height: 28px;
-        padding: 0;
-        color: ${(props) => props.theme.colors.text.muted};
-        background: transparent;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        transition: all 0.15s ease;
-
-        &:hover {
-          background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-          color: ${(props) => props.theme.text};
-        }
-
-        &:last-child:hover {
-          color: ${(props) => props.theme.colors.text.danger};
-        }
-      }
-    }
-  }
-
-  .content {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding: 0 20px 20px 20px;
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -1,183 +1,59 @@
-import { IconCopy, IconEdit, IconTrash, IconCheck, IconX } from '@tabler/icons';
-import { useState, useRef } from 'react';
-import { useDispatch } from 'react-redux';
-import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { validateName, validateNameError } from 'utils/common/regex';
-import toast from 'react-hot-toast';
-import CopyEnvironment from 'components/Environments/EnvironmentSettings/CopyEnvironment';
-import DeleteEnvironment from 'components/Environments/EnvironmentSettings/DeleteEnvironment';
+import { IconCopy, IconDatabase, IconEdit, IconTrash } from '@tabler/icons';
+import { useState } from 'react';
+import CopyEnvironment from '../../CopyEnvironment';
+import DeleteEnvironment from '../../DeleteEnvironment';
+import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
-import StyledWrapper from './StyledWrapper';
-
-const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
-  const dispatch = useDispatch();
-  const environments = collection?.environments || [];
+import ToolHint from 'components/ToolHint/index';

+const EnvironmentDetails = ({ environment, collection, setIsModified, onClose }) => {
+  const [openEditModal, setOpenEditModal] = useState(false);
  const [openDeleteModal, setOpenDeleteModal] = useState(false);
  const [openCopyModal, setOpenCopyModal] = useState(false);
-  const [isRenaming, setIsRenaming] = useState(false);
-  const [newName, setNewName] = useState('');
-  const [nameError, setNameError] = useState('');
-  const inputRef = useRef(null);
-
-  const validateEnvironmentName = (name) => {
-    if (!name || name.trim() === '') {
-      return 'Name is required';
-    }
-
-    if (name.length < 1) {
-      return 'Must be at least 1 character';
-    }
-
-    if (name.length > 255) {
-      return 'Must be 255 characters or less';
-    }
-
-    if (!validateName(name)) {
-      return validateNameError(name);
-    }
-
-    const trimmedName = name.toLowerCase().trim();
-    const isDuplicate = (environments || []).some(
-      (env) => env?.uid !== environment.uid && env?.name?.toLowerCase().trim() === trimmedName
-    );
-    if (isDuplicate) {
-      return 'Environment already exists';
-    }
-
-    return null;
-  };
-
-  const handleRenameClick = () => {
-    setIsRenaming(true);
-    setNewName(environment.name);
-    setNameError('');
-    setTimeout(() => {
-      inputRef.current?.focus();
-      inputRef.current?.select();
-    }, 50);
-  };
-
-  const handleSaveRename = () => {
-    const error = validateEnvironmentName(newName);
-    if (error) {
-      setNameError(error);
-      return;
-    }
-
-    dispatch(renameEnvironment(newName, environment.uid, collection.uid))
-      .then(() => {
-        toast.success('Environment renamed!');
-        setIsRenaming(false);
-        setNewName('');
-        setNameError('');
-      })
-      .catch(() => {
-        toast.error('An error occurred while renaming the environment');
-      });
-  };
-
-  const handleCancelRename = () => {
-    setIsRenaming(false);
-    setNewName('');
-    setNameError('');
-  };
-
-  const handleNameChange = (e) => {
-    setNewName(e.target.value);
-    if (nameError) {
-      setNameError('');
-    }
-  };
-
-  const handleNameBlur = () => {
-    if (newName.trim() === '') {
-      handleCancelRename();
-    } else {
-      const error = validateEnvironmentName(newName);
-      if (error) {
-        setNameError(error);
-      }
-    }
-  };
-
-  const handleNameKeyDown = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      handleSaveRename();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      handleCancelRename();
-    }
-  };

  return (
-    <StyledWrapper>
+    <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
+      {openEditModal && (
+        <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />
+      )}
      {openDeleteModal && (
-        <DeleteEnvironment onClose={() => setOpenDeleteModal(false)} environment={environment} collection={collection} />
+        <DeleteEnvironment
+          onClose={() => setOpenDeleteModal(false)}
+          environment={environment}
+          collection={collection}
+        />
      )}
      {openCopyModal && (
        <CopyEnvironment onClose={() => setOpenCopyModal(false)} environment={environment} collection={collection} />
      )}
-
-      <div className="header">
-        <div className={`title-container ${isRenaming ? 'renaming' : ''}`}>
-          {isRenaming ? (
-            <>
-              <input
-                ref={inputRef}
-                type="text"
-                className="title-input"
-                value={newName}
-                onChange={handleNameChange}
-                onBlur={handleNameBlur}
-                onKeyDown={handleNameKeyDown}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-              />
-              <div className="inline-actions">
-                <button
-                  className="inline-action-btn save"
-                  onClick={handleSaveRename}
-                  onMouseDown={(e) => e.preventDefault()}
-                  title="Save"
-                >
-                  <IconCheck size={14} strokeWidth={2} />
-                </button>
-                <button
-                  className="inline-action-btn cancel"
-                  onClick={handleCancelRename}
-                  onMouseDown={(e) => e.preventDefault()}
-                  title="Cancel"
-                >
-                  <IconX size={14} strokeWidth={2} />
-                </button>
-              </div>
-            </>
-          ) : (
-            <h2 className="title">{environment.name}</h2>
-          )}
+      <div className="flex">
+        <div className="flex flex-grow items-center">
+          <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
+          <span className="ml-1 font-medium break-all">{environment.name}</span>
        </div>
-        {nameError && isRenaming && <div className="title-error">{nameError}</div>}
-        <div className="actions">
-          <button onClick={handleRenameClick} title="Rename">
-            <IconEdit size={15} strokeWidth={1.5} />
-          </button>
-          <button onClick={() => setOpenCopyModal(true)} title="Copy">
-            <IconCopy size={15} strokeWidth={1.5} />
-          </button>
-          <button onClick={() => setOpenDeleteModal(true)} title="Delete">
-            <IconTrash size={15} strokeWidth={1.5} />
-          </button>
+        <div className="flex gap-x-2 pl-2">
+          <ToolHint text="Edit Environment" toolhintId={`edit-${environment.uid}`}>
+            <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
+          </ToolHint>
+          <ToolHint text="Copy Environment" toolhintId={`copy-${environment.uid}`}>
+            <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
+          </ToolHint>
+          <ToolHint text="Delete Environment" toolhintId={`delete-${environment.uid}`}>
+            <IconTrash
+              className="cursor-pointer"
+              size={20}
+              strokeWidth={1.5}
+              onClick={() => setOpenDeleteModal(true)}
+              data-testid="delete-environment-button"
+            />
+          </ToolHint>
        </div>
      </div>

-      <div className="content">
-        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
+      <div>
+        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} onClose={onClose} />
      </div>
-    </StyledWrapper>
+    </div>
  );
 };

--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -1,281 +1,61 @@
 import styled from 'styled-components';

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

-  .environments-container {
-    display: flex;
+  background-color: ${(props) => props.theme.collection.environment.settings.bg};
+
+  .environments-sidebar {
+    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
+    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
+    min-height: 400px;
    height: 100%;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  .confirm-switch-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    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;
-  }
-
-  .sidebar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 16px 12px 16px;
-    
-    .title {
-      font-size: 13px;
-      font-weight: 600;
-      color: ${(props) => props.theme.text};
-      margin: 0;
-    }
-    
-    .btn-action {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      background: transparent;
-      border: none;
-      border-radius: 4px;
-      color: ${(props) => props.theme.colors.text.muted};
-      cursor: pointer;
-      transition: all 0.15s ease;
-      
-      &:hover {
-        background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-        color: ${(props) => props.theme.text};
-      }
-    }
-  }
-
-  .search-container {
-    position: relative;
-    padding: 0 12px 12px 12px;
-    
-    .search-icon {
-      position: absolute;
-      left: 20px;
-      top: 50%;
-      transform: translateY(-100%);
-      color: ${(props) => props.theme.colors.text.muted};
-      pointer-events: none;
-    }
-    
-    .search-input {
-      width: 100%;
-      padding: 6px 8px 6px 28px;
-      font-size: 12px;
-      background: transparent;
-      border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
-      border-radius: 5px;
-      color: ${(props) => props.theme.text};
-      transition: all 0.15s ease;
-      
-      &::placeholder {
-        color: ${(props) => props.theme.colors.text.muted};
-      }
-      
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-
-  .environments-list {
-    flex: 1;
+    max-height: 85vh;
    overflow-y: auto;
-    padding: 0 8px;
  }

  .environment-item {
+    min-width: 150px;
+    display: block;
    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 4px 8px;
-    margin-bottom: 1px;
-    font-size: 13px;
-    color: ${(props) => props.theme.text};
    cursor: pointer;
-    border-radius: 5px;
-    transition: background 0.15s ease;
-    
-    .environment-name {
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .environment-actions {
-      display: flex;
-      align-items: center;
-      opacity: 0;
-      transition: opacity 0.15s ease;
-
-      .activate-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 4px;
-        border: none;
-        background: transparent;
-        cursor: pointer;
-        color: ${(props) => props.theme.text.muted};
-        border-radius: 3px;
-        transition: all 0.15s ease;
-
-        &:hover {
-          background: ${(props) => props.theme.workspace.button.bg};
-          color: ${(props) => props.theme.colors.text.green};
-        }
-      }
-
-      .activated-checkmark {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 4px;
-        color: ${(props) => props.theme.colors.text.green};
-        opacity: 1;
-      }
-    }
-
-    &:hover .environment-actions {
-      opacity: 1;
-    }
-
-    &.activated .environment-actions {
-      opacity: 1;
-    }
+    padding: 8px 10px;
+    border-left: solid 2px transparent;
+    text-decoration: none;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;

    &:hover {
-      background: ${(props) => props.theme.workspace.button.bg};
-    }
-    
-    &.active {
-      background: ${(props) => props.theme.workspace.environments.activeBg};
-      color: ${(props) => props.theme.text};
-    }
-    
-    &.renaming,
-    &.creating {
-      cursor: default;
-      padding: 4px 4px 4px 8px;
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-      
-      &:hover {
-        background: ${(props) => props.theme.workspace.button.bg};
-      }
-    }
-
-    .rename-container {
-      display: flex;
-      align-items: center;
-      flex: 1;
-      
-      .environment-name-input {
-        flex: 1;
-        background: transparent;
-        border: none;
-        outline: none;
-        color: ${(props) => props.theme.text};
-        font-size: 13px;
-        padding: 2px 4px;
-        
-        &::placeholder {
-          color: ${(props) => props.theme.colors.text.muted};
-        }
-      }
-      
-      .inline-actions {
-        display: flex;
-        gap: 2px;
-        margin-left: 4px;
-      }
-    }
-
-    &.creating {
-      .environment-name-input {
-        flex: 1;
-        background: transparent;
-        border: none;
-        outline: none;
-        color: ${(props) => props.theme.text};
-        font-size: 13px;
-        padding: 2px 4px;
-        
-        &::placeholder {
-          color: ${(props) => props.theme.colors.text.muted};
-        }
-      }
-      
-      .inline-actions {
-        display: flex;
-        gap: 2px;
-        margin-left: 4px;
-      }
-      
-      .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.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};
-          }
-        }
-      }
+      text-decoration: none;
+      background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg};
    }
  }
-  
-  .env-error {
-    padding: 4px 12px;
-    margin-top: 4px;
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.danger};
-    background: ${(props) => `${props.theme.colors.text.danger}15`};
-    border-radius: 4px;
+
+  .active {
+    background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important;
+    border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
+    &:hover {
+      background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
+    }
+  }
+
+  .btn-create-environment,
+  .btn-import-environment {
+    padding: 8px 10px;
+    cursor: pointer;
+    border-bottom: none;
+    color: ${(props) => props.theme.textLink};
+
+    span:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .btn-import-environment {
+    color: ${(props) => props.theme.colors.text.muted};
  }
 `;

--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -1,39 +1,21 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
+import { findEnvironmentInCollection } from 'utils/collections';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
-import CreateEnvironment from 'components/Environments/EnvironmentSettings/CreateEnvironment';
-import { IconDownload, IconUpload, IconSearch, IconPlus, IconCheck, IconX } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-import ConfirmSwitchEnv from 'components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv';
+import CreateEnvironment from '../CreateEnvironment';
+import { IconDownload, IconShieldLock, IconUpload } from '@tabler/icons';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
+import ManageSecrets from '../ManageSecrets';
+import StyledWrapper from './StyledWrapper';
+import ConfirmSwitchEnv from './ConfirmSwitchEnv';
+import ToolHint from 'components/ToolHint';
 import { isEqual } from 'lodash';
-import { useDispatch } from 'react-redux';
-import { addEnvironment, renameEnvironment, selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { validateName, validateNameError } from 'utils/common/regex';
-import toast from 'react-hot-toast';
-
-const EnvironmentList = ({
-  environments,
-  activeEnvironmentUid,
-  selectedEnvironment,
-  setSelectedEnvironment,
-  isModified,
-  setIsModified,
-  collection,
-  setShowExportModal
-}) => {
-  const dispatch = useDispatch();

+const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified, onClose, setShowExportModal }) => {
+  const { environments } = collection;
  const [openCreateModal, setOpenCreateModal] = useState(false);
  const [openImportModal, setOpenImportModal] = useState(false);
-  const [searchText, setSearchText] = useState('');
-  const [isCreatingInline, setIsCreatingInline] = useState(false);
-  const [renamingEnvUid, setRenamingEnvUid] = useState(null);
-  const [newEnvName, setNewEnvName] = useState('');
-  const [envNameError, setEnvNameError] = useState('');
-  const inputRef = useRef(null);
-  const renameContainerRef = useRef(null);
-  const createContainerRef = useRef(null);
+  const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);

  const [switchEnvConfirmClose, setSwitchEnvConfirmClose] = useState(false);
  const [originalEnvironmentVariables, setOriginalEnvironmentVariables] = useState([]);
@@ -42,36 +24,23 @@ const EnvironmentList = ({
  const prevEnvUids = usePrevious(envUids);

  useEffect(() => {
-    if (!environments?.length) {
-      setSelectedEnvironment(null);
-      setOriginalEnvironmentVariables([]);
-      return;
-    }
-
    if (selectedEnvironment) {
-      let _selectedEnvironment = environments?.find((env) => env?.uid === selectedEnvironment?.uid);
-
-      if (!_selectedEnvironment) {
-        _selectedEnvironment = environments?.find((env) => env?.name === selectedEnvironment?.name);
-      }
-
-      if (!_selectedEnvironment) {
-        _selectedEnvironment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0];
-      }
-
+      const _selectedEnvironment = environments?.find((env) => env?.uid === selectedEnvironment?.uid);
      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
-      if (hasSelectedEnvironmentChanged || selectedEnvironment.uid !== _selectedEnvironment?.uid) {
+      if (hasSelectedEnvironmentChanged) {
        setSelectedEnvironment(_selectedEnvironment);
      }
-      setOriginalEnvironmentVariables(_selectedEnvironment?.variables || []);
+      setOriginalEnvironmentVariables(selectedEnvironment.variables);
      return;
    }

-    const environment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0];
-
-    setSelectedEnvironment(environment);
-    setOriginalEnvironmentVariables(environment?.variables || []);
-  }, [environments, activeEnvironmentUid, selectedEnvironment]);
+    const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
+    if (environment) {
+      setSelectedEnvironment(environment);
+    } else {
+      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+    }
+  }, [collection, environments, selectedEnvironment]);

  useEffect(() => {
    if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
@@ -86,36 +55,6 @@ const EnvironmentList = ({
    }
  }, [envUids, environments, prevEnvUids]);

-  useEffect(() => {
-    if (!renamingEnvUid) return;
-
-    const handleClickOutside = (event) => {
-      if (renameContainerRef.current && !renameContainerRef.current.contains(event.target)) {
-        handleCancelRename();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [renamingEnvUid]);
-
-  useEffect(() => {
-    if (!isCreatingInline) return;
-
-    const handleClickOutside = (event) => {
-      if (createContainerRef.current && !createContainerRef.current.contains(event.target)) {
-        handleCancelCreate();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isCreatingInline]);
-
  const handleEnvironmentClick = (env) => {
    if (!isModified) {
      setSelectedEnvironment(env);
@@ -124,141 +63,18 @@ const EnvironmentList = ({
    }
  };

-  const handleEnvironmentDoubleClick = (env) => {
-    setRenamingEnvUid(env.uid);
-    setNewEnvName(env.name);
-    setEnvNameError('');
-    setTimeout(() => {
-      inputRef.current?.focus();
-      inputRef.current?.select();
-    }, 50);
-  };
-
-  const handleActivateEnvironment = (e, env) => {
-    e.stopPropagation();
-    dispatch(selectEnvironment(env.uid, collection.uid))
-      .then(() => {
-        toast.success(`Environment "${env.name}" activated`);
-      })
-      .catch(() => {
-        toast.error('Failed to activate environment');
-      });
-  };
-
  if (!selectedEnvironment) {
    return null;
  }

-  const validateEnvironmentName = (name, excludeUid = null) => {
-    if (!name || name.trim() === '') {
-      return 'Name is required';
-    }
-
-    if (!validateName(name)) {
-      return validateNameError(name);
-    }
-
-    const trimmedName = name.toLowerCase().trim();
-    const isDuplicate = environments.some(
-      (env) => env?.uid !== excludeUid && env?.name?.toLowerCase().trim() === trimmedName
-    );
-    if (isDuplicate) {
-      return 'Environment already exists';
-    }
-
-    return null;
-  };
-
  const handleCreateEnvClick = () => {
    if (!isModified) {
-      setIsCreatingInline(true);
-      setNewEnvName('');
-      setEnvNameError('');
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 50);
+      setOpenCreateModal(true);
    } else {
      setSwitchEnvConfirmClose(true);
    }
  };

-  const handleCancelCreate = () => {
-    setIsCreatingInline(false);
-    setNewEnvName('');
-    setEnvNameError('');
-  };
-
-  const handleSaveNewEnv = () => {
-    const error = validateEnvironmentName(newEnvName);
-    if (error) {
-      setEnvNameError(error);
-      return;
-    }
-
-    dispatch(addEnvironment(newEnvName, collection.uid))
-      .then(() => {
-        toast.success('Environment created!');
-        setIsCreatingInline(false);
-        setNewEnvName('');
-        setEnvNameError('');
-      })
-      .catch(() => {
-        toast.error('An error occurred while creating the environment');
-      });
-  };
-
-  const handleEnvNameChange = (e) => {
-    const value = e.target.value;
-    setNewEnvName(value);
-
-    if (envNameError) {
-      setEnvNameError('');
-    }
-  };
-
-  const handleEnvNameKeyDown = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      if (renamingEnvUid) {
-        handleSaveRename();
-      } else {
-        handleSaveNewEnv();
-      }
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      if (renamingEnvUid) {
-        handleCancelRename();
-      } else {
-        handleCancelCreate();
-      }
-    }
-  };
-
-  const handleSaveRename = () => {
-    const error = validateEnvironmentName(newEnvName, renamingEnvUid);
-    if (error) {
-      setEnvNameError(error);
-      return;
-    }
-
-    dispatch(renameEnvironment(newEnvName, renamingEnvUid, collection.uid))
-      .then(() => {
-        toast.success('Environment renamed!');
-        setRenamingEnvUid(null);
-        setNewEnvName('');
-        setEnvNameError('');
-      })
-      .catch(() => {
-        toast.error('An error occurred while renaming the environment');
-      });
-  };
-
-  const handleCancelRename = () => {
-    setRenamingEnvUid(null);
-    setNewEnvName('');
-    setEnvNameError('');
-  };
-
  const handleImportClick = () => {
    if (!isModified) {
      setOpenImportModal(true);
@@ -267,10 +83,8 @@ const EnvironmentList = ({
    }
  };

-  const handleExportClick = () => {
-    if (setShowExportModal) {
-      setShowExportModal(true);
-    }
+  const handleSecretsClick = () => {
+    setOpenManageSecretsModal(true);
  };

  const handleConfirmSwitch = (saveChanges) => {
@@ -279,160 +93,59 @@ const EnvironmentList = ({
    }
  };

-  const filteredEnvironments
-    = environments?.filter((env) => env.name.toLowerCase().includes(searchText.toLowerCase())) || [];
-
  return (
    <StyledWrapper>
      {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
-      {openImportModal && (
-        <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setOpenImportModal(false)} />
-      )}
+      {openImportModal && <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setOpenImportModal(false)} />}
+      {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}

-      <div className="environments-container">
-        {switchEnvConfirmClose && (
-          <div className="confirm-switch-overlay">
-            <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
-          </div>
-        )}
+      <div className="flex">
+        <div>
+          {switchEnvConfirmClose && (
+            <div className="flex items-center justify-between tab-container px-1">
+              <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
+            </div>
+          )}
+          <div className="environments-sidebar flex flex-col">
+            {environments
+              && environments.length
+              && environments.map((env) => (
+                <ToolHint key={env.uid} text={env.name} toolhintId={env.uid} place="right">
+                  <div
+                    id={env.uid}
+                    className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
+                    onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
+                  >
+                    <span className="break-all">{env.name}</span>
+                  </div>
+                </ToolHint>
+              ))}
+            <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
+              + <span>Create</span>
+            </div>

-        <div className="sidebar">
-          <div className="sidebar-header">
-            <h2 className="title">Environments</h2>
-            <div className="flex items-center gap-2">
-              <button className="btn-action" onClick={() => handleCreateEnvClick()} title="Create environment">
-                <IconPlus size={16} strokeWidth={1.5} />
-              </button>
-              <button className="btn-action" onClick={() => handleImportClick()} title="Import environment">
-                <IconDownload size={16} strokeWidth={1.5} />
-              </button>
-              <button className="btn-action" onClick={() => handleExportClick()} title="Export environment">
-                <IconUpload size={16} strokeWidth={1.5} />
-              </button>
+            <div className="mt-auto btn-import-environment">
+              <div className="flex items-center" onClick={() => handleImportClick()}>
+                <IconDownload size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Import</span>
+              </div>
+              <div className="flex items-center mt-2" onClick={() => setShowExportModal(true)}>
+                <IconUpload size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Export</span>
+              </div>
+              <div className="flex items-center mt-2" onClick={() => handleSecretsClick()}>
+                <IconShieldLock size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Managing Secrets</span>
+              </div>
            </div>
          </div>
-
-          <div className="search-container">
-            <IconSearch size={14} strokeWidth={1.5} className="search-icon" />
-            <input
-              type="text"
-              placeholder="Search environments..."
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              className="search-input"
-            />
-          </div>
-
-          <div className="environments-list">
-            {filteredEnvironments.map((env) => (
-              <div
-                key={env.uid}
-                id={env.uid}
-                className={`environment-item ${selectedEnvironment.uid === env.uid ? 'active' : ''} ${renamingEnvUid === env.uid ? 'renaming' : ''} ${activeEnvironmentUid === env.uid ? 'activated' : ''}`}
-                onClick={() => renamingEnvUid !== env.uid && handleEnvironmentClick(env)}
-                onDoubleClick={() => handleEnvironmentDoubleClick(env)}
-              >
-                {renamingEnvUid === env.uid ? (
-                  <div className="rename-container" ref={renameContainerRef}>
-                    <input
-                      ref={inputRef}
-                      type="text"
-                      className="environment-name-input"
-                      value={newEnvName}
-                      onChange={handleEnvNameChange}
-                      onKeyDown={handleEnvNameKeyDown}
-                      autoComplete="off"
-                      autoCorrect="off"
-                      autoCapitalize="off"
-                      spellCheck="false"
-                    />
-                    <div className="inline-actions">
-                      <button
-                        className="inline-action-btn save"
-                        onClick={handleSaveRename}
-                        onMouseDown={(e) => e.preventDefault()}
-                        title="Save"
-                      >
-                        <IconCheck size={14} strokeWidth={2} />
-                      </button>
-                      <button
-                        className="inline-action-btn cancel"
-                        onClick={handleCancelRename}
-                        onMouseDown={(e) => e.preventDefault()}
-                        title="Cancel"
-                      >
-                        <IconX size={14} strokeWidth={2} />
-                      </button>
-                    </div>
-                  </div>
-                ) : (
-                  <>
-                    <span className="environment-name">{env.name}</span>
-                    <div className="environment-actions">
-                      {activeEnvironmentUid === env.uid ? (
-                        <div className="activated-checkmark" title="Active environment">
-                          <IconCheck size={16} strokeWidth={2} />
-                        </div>
-                      ) : (
-                        <button
-                          className="activate-btn"
-                          onClick={(e) => handleActivateEnvironment(e, env)}
-                          title="Activate environment"
-                        >
-                          <IconCheck size={16} strokeWidth={2} />
-                        </button>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            ))}
-
-            {isCreatingInline && (
-              <div className="environment-item creating" ref={createContainerRef}>
-                <input
-                  ref={inputRef}
-                  type="text"
-                  className="environment-name-input"
-                  value={newEnvName}
-                  onChange={handleEnvNameChange}
-                  onKeyDown={handleEnvNameKeyDown}
-                  placeholder="Environment name..."
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck="false"
-                />
-                <div className="inline-actions">
-                  <button
-                    className="inline-action-btn save"
-                    onClick={handleSaveNewEnv}
-                    onMouseDown={(e) => e.preventDefault()}
-                    title="Save"
-                  >
-                    <IconCheck size={14} strokeWidth={2} />
-                  </button>
-                  <button
-                    className="inline-action-btn cancel"
-                    onClick={handleCancelCreate}
-                    onMouseDown={(e) => e.preventDefault()}
-                    title="Cancel"
-                  >
-                    <IconX size={14} strokeWidth={2} />
-                  </button>
-                </div>
-              </div>
-            )}
-
-            {envNameError && (isCreatingInline || renamingEnvUid) && <div className="env-error">{envNameError}</div>}
-          </div>
        </div>
-
        <EnvironmentDetails
          environment={selectedEnvironment}
+          collection={collection}
          setIsModified={setIsModified}
          originalEnvironmentVariables={originalEnvironmentVariables}
-          collection={collection}
+          onClose={onClose}
        />
      </div>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/ManageSecrets/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/ManageSecrets/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import Portal from 'components/Portal';
+import Modal from 'components/Modal';
+
+const ManageSecrets = ({ onClose }) => {
+  return (
+    <Portal>
+      <Modal size="sm" title="Manage Secrets" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+        <div>
+          <p>In any collection, there are secrets that need to be managed.</p>
+          <p className="mt-2">These secrets can be anything such as API keys, passwords, or tokens.</p>
+          <p className="mt-4">Bruno offers three approaches to manage secrets in collections.</p>
+          <p className="mt-2">
+            Read more about it in our{' '}
+            <a
+              href="https://docs.usebruno.com/secrets-management/overview"
+              target="_blank"
+              rel="noreferrer"
+              className="text-link hover:underline"
+            >
+              docs
+            </a>
+            .
+          </p>
+        </div>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default ManageSecrets;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
@@ -0,0 +1,89 @@
+import React, { useEffect, useRef } from 'react';
+import Portal from 'components/Portal/index';
+import Modal from 'components/Modal/index';
+import toast from 'react-hot-toast';
+import { useFormik } from 'formik';
+import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import * as Yup from 'yup';
+import { useDispatch } from 'react-redux';
+import { validateName, validateNameError } from 'utils/common/regex';
+
+const RenameEnvironment = ({ onClose, environment, collection }) => {
+  const dispatch = useDispatch();
+  const inputRef = useRef();
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      name: environment.name
+    },
+    validationSchema: Yup.object({
+      name: Yup.string()
+        .min(1, 'must be at least 1 character')
+        .max(255, 'Must be 255 characters or less')
+        .test('is-valid-filename', function (value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
+        .required('name is required')
+    }),
+    onSubmit: (values) => {
+      if (values.name === environment.name) {
+        return;
+      }
+      dispatch(renameEnvironment(values.name, environment.uid, collection.uid))
+        .then(() => {
+          toast.success('Environment renamed successfully');
+          onClose();
+        })
+        .catch(() => toast.error('An error occurred while renaming the environment'));
+    }
+  });
+
+  useEffect(() => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  const onSubmit = () => {
+    formik.handleSubmit();
+  };
+
+  return (
+    <Portal>
+      <Modal
+        size="sm"
+        title="Rename Environment"
+        confirmText="Rename"
+        handleConfirm={onSubmit}
+        handleCancel={onClose}
+      >
+        <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
+          <div>
+            <label htmlFor="name" className="block font-medium">
+              Environment Name
+            </label>
+            <input
+              id="environment-name"
+              type="text"
+              name="name"
+              ref={inputRef}
+              className="block textbox mt-2 w-full"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              onChange={formik.handleChange}
+              value={formik.values.name || ''}
+            />
+            {formik.touched.name && formik.errors.name ? (
+              <div className="text-red-500">{formik.errors.name}</div>
+            ) : null}
+          </div>
+        </form>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default RenameEnvironment;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
@@ -1,51 +1,11 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: ${(props) => props.theme.bg};
-
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    color: ${(props) => props.theme.colors.text.muted};
-
-    svg {
-      opacity: 0.3;
-      margin-bottom: 8px;
-    }
-
-    .title {
-      font-size: 13px;
-      font-weight: 500;
-      margin-bottom: 12px;
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    .actions {
-      display: flex;
-      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;
-
+  button.btn-create-environment {
    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-      border-color: ${(props) => props.theme.textLink};
+      span {
+        text-decoration: underline;
+      }
    }
  }
 `;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -1,64 +1,87 @@
+import Modal from 'components/Modal/index';
 import React, { useState } from 'react';
-import CreateEnvironment from 'components/Environments/EnvironmentSettings/CreateEnvironment';
+import CreateEnvironment from './CreateEnvironment';
 import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
-import { IconFileAlert } from '@tabler/icons';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
+import { IconFileAlert } from '@tabler/icons';
 import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';

-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')}>
-        Create Environment
-      </button>
-      <button className="shared-button" onClick={() => setTab('import')}>
-        Import Environment
-      </button>
-    </div>
-  </div>
-);
+export const SharedButton = ({ children, className, onClick }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`rounded bg-transparent px-2.5 py-2 w-fit text-xs font-medium text-zinc-900 dark:text-zinc-50 shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-500 hover:bg-gray-50 dark:hover:bg-zinc-700
+        ${className}`}
+    >
+      {children}
+    </button>
+  );
+};

-const EnvironmentSettings = ({ collection }) => {
+const DefaultTab = ({ setTab }) => {
+  return (
+    <div className="text-center items-center flex flex-col">
+      <IconFileAlert size={64} strokeWidth={1} />
+      <span className="font-medium mt-2">No environments found</span>
+      <span className="font-extralight mt-2 text-zinc-500 dark:text-zinc-400">
+        Get started by using the following buttons :
+      </span>
+      <div className="flex items-center justify-center mt-6">
+        <SharedButton onClick={() => setTab('create')}>
+          <span>Create Environment</span>
+        </SharedButton>
+
+        <span className="mx-4">Or</span>
+
+        <SharedButton onClick={() => setTab('import')}>
+          <span>Import Environment</span>
+        </SharedButton>
+      </div>
+    </div>
+  );
+};
+
+const EnvironmentSettings = ({ collection, onClose }) => {
  const [isModified, setIsModified] = useState(false);
+  const { environments } = collection;
  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
  const [tab, setTab] = useState('default');
  const [showExportModal, setShowExportModal] = useState(false);
-
-  const environments = collection?.environments || [];
-
  if (!environments || !environments.length) {
    return (
      <StyledWrapper>
-        {tab === 'create' ? (
-          <CreateEnvironment collection={collection} onClose={() => setTab('default')} />
-        ) : tab === 'import' ? (
-          <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setTab('default')} />
-        ) : (
-          <DefaultTab setTab={setTab} />
-        )}
+        <Modal size="md" title="Environments" handleCancel={onClose} hideCancel={true} hideFooter={true}>
+          {tab === 'create' ? (
+            <CreateEnvironment collection={collection} onClose={() => setTab('default')} />
+          ) : tab === 'import' ? (
+            <ImportEnvironmentModal type="collection" collection={collection} onClose={() => setTab('default')} />
+          ) : (
+            <DefaultTab setTab={setTab} />
+          )}
+        </Modal>
      </StyledWrapper>
    );
  }

  return (
    <StyledWrapper>
-      <EnvironmentList
-        environments={environments}
-        activeEnvironmentUid={collection?.activeEnvironmentUid}
-        selectedEnvironment={selectedEnvironment}
-        setSelectedEnvironment={setSelectedEnvironment}
-        isModified={isModified}
-        setIsModified={setIsModified}
-        collection={collection}
-        setShowExportModal={setShowExportModal}
-      />
+      <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
+        <EnvironmentList
+          selectedEnvironment={selectedEnvironment}
+          setSelectedEnvironment={setSelectedEnvironment}
+          collection={collection}
+          isModified={isModified}
+          setIsModified={setIsModified}
+          onClose={onClose}
+          setShowExportModal={setShowExportModal}
+        />
+      </Modal>
      {showExportModal && (
        <ExportEnvironmentModal
          onClose={() => setShowExportModal(false)}
-          environments={environments}
+          environments={collection.environments}
          environmentType="collection"
        />
      )}
--- a/packages/bruno-app/src/components/Environments/GlobalEnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/GlobalEnvironmentSettings/index.js
@@ -1,8 +0,0 @@
-import React from 'react';
-import WorkspaceEnvironments from 'components/WorkspaceHome/WorkspaceEnvironments';
-
-const GlobalEnvironmentSettings = () => {
-  return <WorkspaceEnvironments />;
-};
-
-export default GlobalEnvironmentSettings;
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -55,30 +55,16 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
  return filenames.length > 0 ? (
    <div
      className={buttonClass}
-      style={{
-        fontWeight: 400,
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        overflow: 'hidden'
-      }}
+      style={{ fontWeight: 400, width: '100%', textOverflow: 'ellipsis', overflowX: 'hidden' }}
      title={title}
    >
      {!readOnly && (
-        <button className="align-middle" onClick={clear} style={{ flexShrink: 0 }}>
+        <button className="align-middle" onClick={clear}>
          <IconX size={18} />
        </button>
      )}
      {!readOnly && <>&nbsp;</>}
-      <span style={{
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        flex: 1
-      }}
-      >
-        {renderButtonText(filenames)}
-      </span>
+      {renderButtonText(filenames)}
    </div>
  ) : (
    <button className={buttonClass} style={{ width: '100%' }} onClick={!readOnly ? browse : undefined} disabled={readOnly}>
--- a/packages/bruno-app/src/components/FolderSettings/Auth/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Auth/index.js
@@ -206,7 +206,7 @@ const Auth = ({ collection, folder }) => {
        Configures authentication for the entire folder. This applies to all requests using the{' '}
        <span className="font-medium">Inherit</span> option in the <span className="font-medium">Auth</span> tab.
      </div>
-      <div className="flex flex-grow justify-start items-center">
+      <div className="flex flex-grow justify-start items-center mb-4">
        <AuthMode collection={collection} folder={folder} />
      </div>
      {getAuthView()}
--- a/packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js
@@ -1,20 +1,16 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  font-size: ${(props) => props.theme.font.size.base};
-
  .auth-mode-selector {
-    background: transparent;
-
-    .auth-mode-label {
-      color: ${(props) => props.theme.colors.text.yellow};
-
-    .caret {
-      color: rgb(140, 140, 140);
-      fill: rgb(140, 140, 140);
-    }
+    border: 1px solid ${({ theme }) => theme.colors.border};
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: ${(props) => props.theme.font.size.base};
+  }
+
+  .auth-mode-label {
+    color: ${({ theme }) => theme.colors.text};
  }
-}
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/FolderSettings/AuthMode/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/AuthMode/index.js
@@ -1,7 +1,7 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateFolderAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,9 +9,19 @@ import StyledWrapper from './StyledWrapper';

 const AuthMode = ({ collection, folder }) => {
  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
  const authMode = folder.draft ? get(folder, 'draft.request.auth.mode') : get(folder, 'root.request.auth.mode');

-  const onModeChange = useCallback((value) => {
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
    dispatch(
      updateFolderAuthMode({
        mode: value,
@@ -19,74 +29,103 @@ const AuthMode = ({ collection, folder }) => {
        folderUid: folder.uid
      })
    );
-  }, [dispatch, collection.uid, folder.uid]);
-
-  const menuItems = useMemo(() => [
-    {
-      id: 'awsv4',
-      label: 'AWS Sig v4',
-      onClick: () => onModeChange('awsv4')
-    },
-    {
-      id: 'basic',
-      label: 'Basic Auth',
-      onClick: () => onModeChange('basic')
-    },
-    {
-      id: 'bearer',
-      label: 'Bearer Token',
-      onClick: () => onModeChange('bearer')
-    },
-    {
-      id: 'digest',
-      label: 'Digest Auth',
-      onClick: () => onModeChange('digest')
-    },
-    {
-      id: 'ntlm',
-      label: 'NTLM Auth',
-      onClick: () => onModeChange('ntlm')
-    },
-    {
-      id: 'oauth2',
-      label: 'OAuth 2.0',
-      onClick: () => onModeChange('oauth2')
-    },
-    {
-      id: 'wsse',
-      label: 'WSSE Auth',
-      onClick: () => onModeChange('wsse')
-    },
-    {
-      id: 'apikey',
-      label: 'API Key',
-      onClick: () => onModeChange('apikey')
-    },
-    {
-      id: 'inherit',
-      label: 'Inherit',
-      onClick: () => onModeChange('inherit')
-    },
-    {
-      id: 'none',
-      label: 'No Auth',
-      onClick: () => onModeChange('none')
-    }
-  ], [onModeChange]);
+  };

  return (
    <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <MenuDropdown
-          items={menuItems}
-          placement="bottom-end"
-          selectedItemId={authMode}
-          showTickMark={true}
-        >
-          <div className="flex items-center justify-center auth-mode-label select-none">
-            {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      <div className="inline-flex items-center cursor-pointer">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('awsv4');
+            }}
+          >
+            AWS Sig v4
          </div>
-        </MenuDropdown>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('basic');
+            }}
+          >
+            Basic Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('bearer');
+            }}
+          >
+            Bearer Token
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('digest');
+            }}
+          >
+            Digest Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('ntlm');
+            }}
+          >
+            NTLM Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('oauth2');
+            }}
+          >
+            OAuth 2.0
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('wsse');
+            }}
+          >
+            WSSE Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('apikey');
+            }}
+          >
+            API Key
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('inherit');
+            }}
+          >
+            Inherit
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('none');
+            }}
+          >
+            No Auth
+          </div>
+        </Dropdown>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CopyEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CopyEnvironment/index.js
@@ -0,0 +1,78 @@
+import Modal from 'components/Modal/index';
+import Portal from 'components/Portal/index';
+import { useFormik } from 'formik';
+import { copyGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { useEffect, useRef } from 'react';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+import * as Yup from 'yup';
+
+const CopyEnvironment = ({ environment, onClose }) => {
+  const dispatch = useDispatch();
+  const inputRef = useRef();
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      name: environment.name + ' - Copy'
+    },
+    validationSchema: Yup.object({
+      name: Yup.string()
+        .min(1, 'must be at least 1 character')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
+    }),
+    onSubmit: (values) => {
+      dispatch(copyGlobalEnvironment({ name: values.name, environmentUid: environment.uid }))
+        .then(() => {
+          toast.success('Global environment created!');
+          onClose();
+        })
+        .catch((error) => {
+          toast.error('An error occurred while created the environment');
+          console.error(error);
+        });
+    }
+  });
+
+  useEffect(() => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  const onSubmit = () => {
+    formik.handleSubmit();
+  };
+
+  return (
+    <Portal>
+      <Modal size="sm" title="Copy Global Environment" confirmText="Copy" handleConfirm={onSubmit} handleCancel={onClose}>
+        <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
+          <div>
+            <label htmlFor="name" className="block font-medium">
+              New Environment Name
+            </label>
+            <input
+              id="environment-name"
+              type="text"
+              name="name"
+              ref={inputRef}
+              className="block textbox mt-2 w-full"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              onChange={formik.handleChange}
+              value={formik.values.name || ''}
+            />
+            {formik.touched.name && formik.errors.name ? (
+              <div className="text-red-500">{formik.errors.name}</div>
+            ) : null}
+          </div>
+        </form>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default CopyEnvironment;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment/index.js
@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from 'react';
+import toast from 'react-hot-toast';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { useDispatch, useSelector } from 'react-redux';
+import Portal from 'components/Portal';
+import Modal from 'components/Modal';
+import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { validateName, validateNameError } from 'utils/common/regex';
+
+const CreateEnvironment = ({ onClose, onEnvironmentCreated }) => {
+  const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
+
+  const validateEnvironmentName = (name) => {
+    const trimmedName = name?.toLowerCase().trim();
+    return globalEnvs.every((env) => env?.name?.toLowerCase().trim() !== trimmedName);
+  };
+
+  const dispatch = useDispatch();
+  const inputRef = useRef();
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      name: ''
+    },
+    validationSchema: Yup.object({
+      name: Yup.string()
+        .min(1, 'Must be at least 1 character')
+        .max(255, 'Must be 255 characters or less')
+        .test('is-valid-filename', function (value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
+        })
+        .required('Name is required')
+        .test('duplicate-name', 'Global Environment already exists', validateEnvironmentName)
+    }),
+    onSubmit: (values) => {
+      dispatch(addGlobalEnvironment({ name: values.name }))
+        .then(() => {
+          toast.success('Global environment created!');
+          onClose();
+          // Call the callback if provided
+          if (onEnvironmentCreated) {
+            onEnvironmentCreated();
+          }
+        })
+        .catch(() => toast.error('An error occurred while creating the environment'));
+    }
+  });
+
+  useEffect(() => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  const onSubmit = () => {
+    formik.handleSubmit();
+  };
+
+  return (
+    <Portal>
+      <Modal
+        size="sm"
+        title="Create Global Environment"
+        confirmText="Create"
+        handleConfirm={onSubmit}
+        handleCancel={onClose}
+      >
+        <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
+          <div>
+            <label htmlFor="name" className="block font-medium">
+              Environment Name
+            </label>
+            <div className="flex items-center mt-2">
+              <input
+                id="environment-name"
+                type="text"
+                name="name"
+                ref={inputRef}
+                className="block textbox w-full"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                onChange={formik.handleChange}
+                value={formik.values.name || ''}
+              />
+            </div>
+            {formik.touched.name && formik.errors.name ? (
+              <div className="text-red-500">{formik.errors.name}</div>
+            ) : null}
+          </div>
+        </form>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default CreateEnvironment;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/StyledWrapper.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  button.submit {
+    color: white;
+    background-color: var(--color-background-danger) !important;
+    border: inherit !important;
+
+    &:hover {
+      border: inherit !important;
+    }
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/DeleteEnvironment/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import Portal from 'components/Portal/index';
+import toast from 'react-hot-toast';
+import Modal from 'components/Modal/index';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import { deleteGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+
+const DeleteEnvironment = ({ onClose, environment }) => {
+  const dispatch = useDispatch();
+  const onConfirm = () => {
+    dispatch(deleteGlobalEnvironment({ environmentUid: environment.uid }))
+      .then(() => {
+        toast.success('Global Environment deleted successfully');
+        onClose();
+      })
+      .catch(() => toast.error('An error occurred while deleting the environment'));
+  };
+
+  return (
+    <Portal>
+      <StyledWrapper>
+        <Modal
+          size="sm"
+          title="Delete Global Environment"
+          confirmText="Delete"
+          handleConfirm={onConfirm}
+          handleCancel={onClose}
+        >
+          Are you sure you want to delete <span className="font-medium">{environment.name}</span> ?
+        </Modal>
+      </StyledWrapper>
+    </Portal>
+  );
+};
+
+export default DeleteEnvironment;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { IconAlertTriangle } from '@tabler/icons';
+import Modal from 'components/Modal';
+import { createPortal } from 'react-dom';
+
+const ConfirmSwitchEnv = ({ onCancel }) => {
+  return createPortal(
+    <Modal
+      size="md"
+      title="Unsaved changes"
+      confirmText="Save and Close"
+      cancelText="Close without saving"
+      disableEscapeKey={true}
+      disableCloseOnOutsideClick={true}
+      closeModalFadeTimeout={150}
+      handleCancel={onCancel}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      hideFooter={true}
+    >
+      <div className="flex items-center font-normal">
+        <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
+      </div>
+      <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
+
+      <div className="flex justify-between mt-6">
+        <div>
+          <button className="btn btn-sm btn-danger" onClick={onCancel}>
+            Close
+          </button>
+        </div>
+        <div></div>
+      </div>
+    </Modal>,
+    document.body
+  );
+};
+
+export default ConfirmSwitchEnv;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 500;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
+      padding: 4px 10px;
+      vertical-align: middle;
+
+      &:nth-child(1),
+      &:nth-child(4) {
+        width: 70px;
+      }
+      &:nth-child(5) {
+        width: 40px;
+      }
+
+      &:nth-child(2) {
+        width: 25%;
+      }
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: ${(props) => props.theme.font.size.base};
+      user-select: none;
+    }
+    thead td {
+      padding: 6px 10px;
+    }
+  }
+
+  .btn-add-param {
+    font-size: ${(props) => props.theme.font.size.base};
+  }
+
+  .tooltip-mod {
+    font-size: ${(props) => props.theme.font.size.xs} !important;
+    width: 150px !important;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    background-color: transparent;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    vertical-align: middle;
+    margin: 0;
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -0,0 +1,224 @@
+import React, { useRef, useEffect } from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
+import { useTheme } from 'providers/Theme';
+import { useDispatch, useSelector } from 'react-redux';
+import MultiLineEditor from 'components/MultiLineEditor/index';
+import StyledWrapper from './StyledWrapper';
+import { uuid } from 'utils/common';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { variableNameRegex } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { Tooltip } from 'react-tooltip';
+import { getGlobalEnvironmentVariables } from 'utils/collections';
+
+const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const addButtonRef = useRef(null);
+  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
+
+  let _collection = cloneDeep(collection);
+
+  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
+  _collection.globalEnvironmentVariables = globalEnvironmentVariables;
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: environment.variables || [],
+    validationSchema: Yup.array().of(
+      Yup.object({
+        enabled: Yup.boolean(),
+        name: Yup.string()
+          .required('Name cannot be empty')
+          .matches(
+            variableNameRegex,
+            'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.'
+          )
+          .trim(),
+        secret: Yup.boolean(),
+        type: Yup.string(),
+        uid: Yup.string(),
+        value: Yup.mixed().nullable()
+      })
+    ),
+    onSubmit: (values) => {
+      if (!formik.dirty) {
+        toast.error('Nothing to save');
+        return;
+      }
+
+      dispatch(saveGlobalEnvironment({ environmentUid: environment.uid, variables: cloneDeep(values) }))
+        .then(() => {
+          toast.success('Changes saved successfully');
+          formik.resetForm({ values });
+          setIsModified(false);
+        })
+        .catch((error) => {
+          console.error(error);
+          toast.error('An error occurred while saving the changes');
+        });
+    }
+  });
+
+  // Effect to track modifications.
+  React.useEffect(() => {
+    setIsModified(formik.dirty);
+  }, [formik.dirty]);
+
+  const ErrorMessage = ({ name }) => {
+    const meta = formik.getFieldMeta(name);
+    const id = uuid();
+    if (!meta.error || !meta.touched) {
+      return null;
+    }
+    return (
+      <span>
+        <IconAlertCircle id={id} className="text-red-600 cursor-pointer" size={20} />
+        <Tooltip className="tooltip-mod" anchorId={id} html={meta.error || ''} />
+      </span>
+    );
+  };
+
+  const addVariable = () => {
+    const newVariable = {
+      uid: uuid(),
+      name: '',
+      value: '',
+      type: 'text',
+      secret: false,
+      enabled: true
+    };
+    formik.setFieldValue(formik.values.length, newVariable, false);
+  };
+
+  const handleRemoveVar = (id) => {
+    formik.setValues(formik.values.filter((variable) => variable.uid !== id));
+  };
+
+  useEffect(() => {
+    if (formik.dirty) {
+      // Smooth scrolling to the changed parameter is temporarily disabled
+      // due to UX issues when editing the first row in a long list of environment variables.
+      // addButtonRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [formik.values, formik.dirty]);
+
+  const handleReset = () => {
+    formik.resetForm({ originalEnvironmentVariables });
+  };
+
+  return (
+    <StyledWrapper className="w-full mt-6 mb-6">
+      <div className="h-[50vh] overflow-y-auto w-full">
+        <table>
+          <thead>
+            <tr>
+              <td className="text-center">Enabled</td>
+              <td>Name</td>
+              <td>Value</td>
+              <td className="text-center">Secret</td>
+              <td></td>
+            </tr>
+          </thead>
+          <tbody>
+            {formik.values.map((variable, index) => (
+              <tr key={variable.uid} data-testid={`env-var-row-${variable.name}`}>
+                <td className="text-center">
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${index}.enabled`}
+                    checked={variable.enabled}
+                    onChange={formik.handleChange}
+                  />
+                </td>
+                <td>
+                  <div className="flex items-center" data-testid={`env-var-name-${index}`}>
+                    <input
+                      type="text"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      className="mousetrap"
+                      id={`${index}.name`}
+                      name={`${index}.name`}
+                      value={variable.name}
+                      onChange={formik.handleChange}
+                    />
+                    <ErrorMessage name={`${index}.name`} />
+                  </div>
+                </td>
+                <td className="flex flex-row flex-nowrap items-center">
+                  <div className="overflow-hidden grow w-full relative" data-testid={`env-var-value-${index}`}>
+                    <MultiLineEditor
+                      theme={storedTheme}
+                      collection={_collection}
+                      name={`${index}.value`}
+                      value={variable.value}
+                      isSecret={variable.secret}
+                      readOnly={typeof variable.value !== 'string'}
+                      onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                      enableBrunoVarInfo={false}
+                    />
+                  </div>
+                  {typeof variable.value !== 'string' && (
+                    <span className="ml-2 flex items-center">
+                      <IconInfoCircle
+                        id={`${variable.name}-disabled-info-icon`}
+                        className="text-muted"
+                        size={16}
+                      />
+                      <Tooltip
+                        anchorId={`${variable.name}-disabled-info-icon`}
+                        content="Non-string values set via scripts are read-only and can only be updated through scripts."
+                        place="top"
+                      />
+                    </span>
+                  )}
+                </td>
+                <td className="text-center">
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${index}.secret`}
+                    checked={variable.secret}
+                    onChange={formik.handleChange}
+                  />
+                </td>
+                <td>
+                  <button onClick={() => handleRemoveVar(variable.uid)}>
+                    <IconTrash strokeWidth={1.5} size={20} />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div>
+          <button
+            ref={addButtonRef}
+            className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
+            onClick={addVariable}
+            data-testid="add-variable"
+          >
+            + Add Variable
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit} data-testid="save-env">
+          Save
+        </button>
+        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset} data-testid="reset-env">
+          Reset
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default EnvironmentVariables;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -0,0 +1,58 @@
+import { IconCopy, IconDatabase, IconEdit, IconTrash } from '@tabler/icons';
+import { useState } from 'react';
+import CopyEnvironment from '../../CopyEnvironment';
+import DeleteEnvironment from '../../DeleteEnvironment';
+import RenameEnvironment from '../../RenameEnvironment';
+import EnvironmentVariables from './EnvironmentVariables';
+import ToolHint from 'components/ToolHint/index';
+
+const EnvironmentDetails = ({ environment, setIsModified, collection, allEnvironments }) => {
+  const [openEditModal, setOpenEditModal] = useState(false);
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  const [openCopyModal, setOpenCopyModal] = useState(false);
+
+  return (
+    <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
+      {openEditModal && (
+        <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} />
+      )}
+      {openDeleteModal && (
+        <DeleteEnvironment
+          onClose={() => setOpenDeleteModal(false)}
+          environment={environment}
+        />
+      )}
+      {openCopyModal && (
+        <CopyEnvironment onClose={() => setOpenCopyModal(false)} environment={environment} />
+      )}
+      <div className="flex">
+        <div className="flex flex-grow items-center">
+          <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
+          <span className="ml-1 font-medium break-all">{environment.name}</span>
+        </div>
+        <div className="flex gap-x-2 pl-2">
+          <ToolHint text="Edit Environment" toolhintId={`edit-${environment.uid}`}>
+            <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
+          </ToolHint>
+          <ToolHint text="Copy Environment" toolhintId={`copy-${environment.uid}`}>
+            <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
+          </ToolHint>
+          <ToolHint text="Delete Environment" toolhintId={`delete-${environment.uid}`}>
+            <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} data-testid="delete-environment-button" />
+          </ToolHint>
+        </div>
+      </div>
+
+      <div>
+        <EnvironmentVariables
+          environment={environment}
+          setIsModified={setIsModified}
+          collection={collection}
+          allEnvironments={allEnvironments}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default EnvironmentDetails;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  margin-inline: -1rem;
+  margin-block: -1.5rem;
+
+  background-color: ${(props) => props.theme.collection.environment.settings.bg};
+
+  .environments-sidebar {
+    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
+    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
+    min-height: 400px;
+    height: 100%;
+    max-height: 85vh;
+    overflow-y: auto;
+  }
+
+  .environment-item {
+    min-width: 150px;
+    display: block;
+    position: relative;
+    cursor: pointer;
+    padding: 8px 10px;
+    border-left: solid 2px transparent;
+    text-decoration: none;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: none;
+      background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg};
+    }
+  }
+
+  .active {
+    background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important;
+    border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
+    &:hover {
+      background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
+    }
+  }
+
+  .btn-create-environment,
+  .btn-import-environment {
+    padding: 8px 10px;
+    cursor: pointer;
+    border-bottom: none;
+    color: ${(props) => props.theme.textLink};
+
+    span:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .btn-import-environment {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/EnvironmentList/index.js
@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from 'react';
+import usePrevious from 'hooks/usePrevious';
+import EnvironmentDetails from './EnvironmentDetails';
+import CreateEnvironment from '../CreateEnvironment';
+import { IconDownload, IconShieldLock, IconUpload } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+import ConfirmSwitchEnv from './ConfirmSwitchEnv';
+import ManageSecrets from 'components/Environments/EnvironmentSettings/ManageSecrets/index';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
+import { isEqual } from 'lodash';
+import ToolHint from 'components/ToolHint/index';
+
+const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection, setShowExportModal }) => {
+  const [openCreateModal, setOpenCreateModal] = useState(false);
+  const [openImportModal, setOpenImportModal] = useState(false);
+  const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
+
+  const [switchEnvConfirmClose, setSwitchEnvConfirmClose] = useState(false);
+  const [originalEnvironmentVariables, setOriginalEnvironmentVariables] = useState([]);
+
+  const envUids = environments ? environments.map((env) => env.uid) : [];
+  const prevEnvUids = usePrevious(envUids);
+
+  useEffect(() => {
+    if (!environments?.length) {
+      setSelectedEnvironment(null);
+      setOriginalEnvironmentVariables([]);
+      return;
+    }
+
+    if (selectedEnvironment) {
+      const _selectedEnvironment = environments?.find((env) => env?.uid === selectedEnvironment?.uid);
+      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
+      if (hasSelectedEnvironmentChanged) {
+        setSelectedEnvironment(_selectedEnvironment);
+      }
+      setOriginalEnvironmentVariables(selectedEnvironment.variables);
+      return;
+    }
+
+    const environment = environments?.find((env) => env.uid === activeEnvironmentUid) || environments?.[0] || null;
+
+    setSelectedEnvironment(environment);
+    setOriginalEnvironmentVariables(environment?.variables || []);
+  }, [environments, activeEnvironmentUid]);
+
+  useEffect(() => {
+    if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
+      const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
+      if (newEnv) {
+        setSelectedEnvironment(newEnv);
+      }
+    }
+
+    if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
+      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+    }
+  }, [envUids, environments, prevEnvUids]);
+
+  const handleEnvironmentClick = (env) => {
+    if (!isModified) {
+      setSelectedEnvironment(env);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
+  if (!selectedEnvironment) {
+    return null;
+  }
+
+  const handleCreateEnvClick = () => {
+    if (!isModified) {
+      setOpenCreateModal(true);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
+  const handleImportClick = () => {
+    if (!isModified) {
+      setOpenImportModal(true);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
+  const handleSecretsClick = () => {
+    setOpenManageSecretsModal(true);
+  };
+
+  const handleExportClick = () => {
+    if (setShowExportModal) {
+      setShowExportModal(true);
+    }
+  };
+
+  const handleConfirmSwitch = (saveChanges) => {
+    if (!saveChanges) {
+      setSwitchEnvConfirmClose(false);
+    }
+  };
+
+  return (
+    <StyledWrapper>
+      {openCreateModal && <CreateEnvironment onClose={() => setOpenCreateModal(false)} />}
+      {openImportModal && <ImportEnvironmentModal type="global" onClose={() => setOpenImportModal(false)} />}
+      {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
+
+      <div className="flex">
+        <div>
+          {switchEnvConfirmClose && (
+            <div className="flex items-center justify-between tab-container px-1">
+              <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
+            </div>
+          )}
+          <div className="environments-sidebar flex flex-col">
+            {environments
+              && environments.length
+              && environments.map((env) => (
+                <ToolHint key={env.uid} text={env.name} toolhintId={env.uid} place="right">
+                  <div
+                    id={env.uid}
+                    className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
+                    onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle click
+                  >
+                    <span className="break-all">{env.name}</span>
+                  </div>
+                </ToolHint>
+              ))}
+            <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
+              + <span>Create</span>
+            </div>
+
+            <div className="mt-auto btn-import-environment">
+              <div className="flex items-center" onClick={() => handleImportClick()}>
+                <IconDownload size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Import</span>
+              </div>
+              <div className="flex items-center mt-2" onClick={() => handleExportClick()}>
+                <IconUpload size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Export</span>
+              </div>
+              <div className="flex items-center mt-2" onClick={() => handleSecretsClick()}>
+                <IconShieldLock size={12} strokeWidth={2} />
+                <span className="label ml-1 text-xs">Managing Secrets</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <EnvironmentDetails
+          environment={selectedEnvironment}
+          setIsModified={setIsModified}
+          originalEnvironmentVariables={originalEnvironmentVariables}
+          collection={collection}
+          allEnvironments={environments}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default EnvironmentList;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/RenameEnvironment/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/RenameEnvironment/index.js
@@ -4,42 +4,40 @@ import Modal from 'components/Modal/index';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useDispatch, useSelector } from 'react-redux';
-import { renameWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/actions';
+import { useDispatch } from 'react-redux';
+import { renameGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { validateName, validateNameError } from 'utils/common/regex';

-const RenameWorkspace = ({ onClose, workspace }) => {
+const RenameEnvironment = ({ onClose, environment }) => {
  const dispatch = useDispatch();
-  const { workspaces } = useSelector((state) => state.workspaces);
  const inputRef = useRef();
-
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
-      name: workspace.name
+      name: environment.name
    },
    validationSchema: Yup.object({
      name: Yup.string()
        .min(1, 'must be at least 1 character')
-        .max(255, 'must be 255 characters or less')
-        .required('name is required')
-        .test('unique-name', 'A workspace with this name already exists', function (value) {
-          if (!value) return true;
-          return !workspaces.some((w) =>
-            w.uid !== workspace.uid && w.name.toLowerCase() === value.toLowerCase()
-          );
+        .max(255, 'Must be 255 characters or less')
+        .test('is-valid-filename', function (value) {
+          const isValid = validateName(value);
+          return isValid ? true : this.createError({ message: validateNameError(value) });
        })
+        .required('name is required')
    }),
    onSubmit: (values) => {
-      if (values.name === workspace.name) {
-        onClose();
+      if (values.name === environment.name) {
        return;
      }
-      dispatch(renameWorkspaceAction(workspace.uid, values.name))
+      dispatch(renameGlobalEnvironment({ name: values.name, environmentUid: environment.uid }))
        .then(() => {
+          toast.success('Environment renamed successfully');
          onClose();
        })
        .catch((error) => {
-          toast.error(error?.message || 'An error occurred while renaming the workspace');
+          toast.error('An error occurred while renaming the environment');
+          console.error(error);
        });
    }
  });
@@ -47,7 +45,6 @@ const RenameWorkspace = ({ onClose, workspace }) => {
  useEffect(() => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus();
-      inputRef.current.select();
    }
  }, [inputRef]);

@@ -59,18 +56,18 @@ const RenameWorkspace = ({ onClose, workspace }) => {
    <Portal>
      <Modal
        size="sm"
-        title="Rename Workspace"
+        title="Rename Environment"
        confirmText="Rename"
        handleConfirm={onSubmit}
        handleCancel={onClose}
      >
        <form className="bruno-form" onSubmit={(e) => e.preventDefault()}>
          <div>
-            <label htmlFor="workspace-name" className="block font-semibold">
-              Workspace Name
+            <label htmlFor="name" className="block font-medium">
+              Environment Name
            </label>
            <input
-              id="workspace-name"
+              id="environment-name"
              type="text"
              name="name"
              ref={inputRef}
@@ -92,4 +89,4 @@ const RenameWorkspace = ({ onClose, workspace }) => {
  );
 };

-export default RenameWorkspace;
+export default RenameEnvironment;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/StyledWrapper.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  button.btn-create-environment {
+    &:hover {
+      span {
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/GlobalEnvironments/EnvironmentSettings/index.js
@@ -0,0 +1,90 @@
+import Modal from 'components/Modal/index';
+import React, { useState } from 'react';
+import CreateEnvironment from './CreateEnvironment';
+import EnvironmentList from './EnvironmentList';
+import StyledWrapper from './StyledWrapper';
+import { IconFileAlert } from '@tabler/icons';
+import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
+import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
+
+export const SharedButton = ({ children, className, onClick }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`rounded bg-transparent px-2.5 py-2 w-fit text-xs font-medium text-zinc-900 dark:text-zinc-50 shadow-sm ring-1 ring-inset ring-zinc-300 dark:ring-zinc-500 hover:bg-gray-50 dark:hover:bg-zinc-700
+        ${className}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+const DefaultTab = ({ setTab }) => {
+  return (
+    <div className="text-center items-center flex flex-col">
+      <IconFileAlert size={64} strokeWidth={1} />
+      <span className="font-medium mt-2">No Global Environments found</span>
+      <div className="flex items-center justify-center mt-6">
+        <SharedButton onClick={() => setTab('create')}>
+          <span>Create Global Environment</span>
+        </SharedButton>
+
+        <span className="mx-4">Or</span>
+
+        <SharedButton onClick={() => setTab('import')}>
+          <span>Import Environment</span>
+        </SharedButton>
+      </div>
+    </div>
+  );
+};
+
+const EnvironmentSettings = ({ globalEnvironments, collection, activeGlobalEnvironmentUid, onClose }) => {
+  const [isModified, setIsModified] = useState(false);
+  const environments = globalEnvironments;
+  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
+  const [tab, setTab] = useState('default');
+  const [showExportModal, setShowExportModal] = useState(false);
+  if (!environments || !environments.length) {
+    return (
+      <StyledWrapper>
+        <Modal size="md" title="Global Environments" handleCancel={onClose} hideCancel={true} hideFooter={true}>
+          {tab === 'create' ? (
+            <CreateEnvironment onClose={() => setTab('default')} />
+          ) : tab === 'import' ? (
+            <ImportEnvironmentModal type="global" onClose={() => setTab('default')} />
+          ) : (
+            <DefaultTab setTab={setTab} />
+          )}
+        </Modal>
+      </StyledWrapper>
+    );
+  }
+
+  return (
+    <StyledWrapper>
+      <Modal size="lg" title="Global Environments" handleCancel={onClose} hideFooter={true}>
+        <EnvironmentList
+          environments={globalEnvironments}
+          activeEnvironmentUid={activeGlobalEnvironmentUid}
+          selectedEnvironment={selectedEnvironment}
+          setSelectedEnvironment={setSelectedEnvironment}
+          isModified={isModified}
+          setIsModified={setIsModified}
+          collection={collection}
+          setShowExportModal={setShowExportModal}
+        />
+      </Modal>
+      {showExportModal && (
+        <ExportEnvironmentModal
+          onClose={() => setShowExportModal(false)}
+          environments={globalEnvironments}
+          environmentType="global"
+        />
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default EnvironmentSettings;
--- a/packages/bruno-app/src/components/Icons/ExampleIcon/index.js
+++ b/packages/bruno-app/src/components/Icons/ExampleIcon/index.js
@@ -1,16 +1,16 @@
 import React from 'react';

-const ExampleIcon = ({ color = 'currentColor', size = 16, ...props }) => {
+const ExampleIcon = ({ color = 'white', size = 16, ...props }) => {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <g clipPath="url(#clip0_486_1191)">
-        <path d="M2.66699 3.33329C2.66699 3.15648 2.73723 2.98691 2.86225 2.86189C2.98728 2.73686 3.15685 2.66663 3.33366 2.66663H12.667C12.8438 2.66663 13.0134 2.73686 13.1384 2.86189C13.2634 2.98691 13.3337 3.15648 13.3337 3.33329V12.6666C13.3337 12.8434 13.2634 13.013 13.1384 13.138C13.0134 13.2631 12.8438 13.3333 12.667 13.3333H3.33366C3.15685 13.3333 2.98728 13.2631 2.86225 13.138C2.73723 13.013 2.66699 12.8434 2.66699 12.6666V3.33329Z" stroke={color} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M9.33366 5.33337H6.66699V10.6667H9.33366" stroke={color} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M9.33366 8H6.66699" stroke={color} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M2.66699 3.33329C2.66699 3.15648 2.73723 2.98691 2.86225 2.86189C2.98728 2.73686 3.15685 2.66663 3.33366 2.66663H12.667C12.8438 2.66663 13.0134 2.73686 13.1384 2.86189C13.2634 2.98691 13.3337 3.15648 13.3337 3.33329V12.6666C13.3337 12.8434 13.2634 13.013 13.1384 13.138C13.0134 13.2631 12.8438 13.3333 12.667 13.3333H3.33366C3.15685 13.3333 2.98728 13.2631 2.86225 13.138C2.73723 13.013 2.66699 12.8434 2.66699 12.6666V3.33329Z" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M9.33366 5.33337H6.66699V10.6667H9.33366" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M9.33366 8H6.66699" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
      </g>
      <defs>
        <clipPath id="clip0_486_1191">
-          <rect width={size} height={size} fill={color} />
+          <rect width={size} height={size} fill="white" />
        </clipPath>
      </defs>
    </svg>
--- a/packages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.js
+++ b/packages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.js
@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import Portal from 'components/Portal/index';
-import Modal from 'components/Modal/index';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
-import { IconFolder } from '@tabler/icons';
-import { closeWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/actions';
-
-const DeleteWorkspace = ({ onClose, workspace }) => {
-  const dispatch = useDispatch();
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const onConfirm = async () => {
-    if (isDeleting) return;
-
-    try {
-      setIsDeleting(true);
-      await dispatch(closeWorkspaceAction(workspace.uid));
-      onClose();
-    } catch (error) {
-      toast.error(error?.message || 'An error occurred while removing the workspace');
-      setIsDeleting(false);
-    }
-  };
-
-  return (
-    <Portal>
-      <Modal
-        size="sm"
-        title="Remove Workspace"
-        confirmText={isDeleting ? 'Removing...' : 'Remove'}
-        handleConfirm={onConfirm}
-        handleCancel={onClose}
-        confirmDisabled={isDeleting}
-        confirmButtonClass="btn-danger"
-      >
-        <div className="flex items-center">
-          <IconFolder size={18} strokeWidth={1.5} />
-          <span className="ml-2 mr-4 font-semibold">{workspace?.name}</span>
-        </div>
-        {workspace?.pathname && (
-          <div className="break-words text-xs mt-1">{workspace.pathname}</div>
-        )}
-        <div className="mt-4">
-          Are you sure you want to remove workspace <span className="font-semibold">{workspace?.name}</span>?
-        </div>
-        <div className="mt-4">
-          The workspace will still be available in the file system and can be re-opened later.
-        </div>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default DeleteWorkspace;
--- a/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js
@@ -1,175 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .manage-workspace-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    border-bottom: 1px solid ${(props) => props.theme.workspace.border};
-  }
-
-  .header-left {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .back-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    cursor: pointer;
-    color: ${(props) => props.theme.text};
-  }
-
-  .header-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: ${(props) => props.theme.text};
-  }
-
-  .create-workspace-btn {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    border-radius: ${(props) => props.theme.border.radius.base};
-    background: ${(props) => props.theme.workspace.accent};
-    color: white;
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
-    cursor: pointer;
-    border: none;
-  }
-
-  .workspace-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0 16px;
-  }
-
-  .workspace-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 0;
-    border-bottom: 1px solid ${(props) => props.theme.workspace.border};
-  }
-
-  .workspace-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .workspace-name-row {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  .workspace-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-
-    &.default {
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-
-    &.regular {
-      color: ${(props) => props.theme.workspace.accent};
-    }
-  }
-
-  .workspace-name {
-    font-size: ${(props) => props.theme.font.size.md};
-    font-weight: 500;
-    color: ${(props) => props.theme.text};
-  }
-
-  .default-badge {
-    padding: 1px 6px;
-    border-radius: ${(props) => props.theme.border.radius.sm};
-    background: ${(props) => props.theme.sidebar.badge.bg};
-    color: ${(props) => props.theme.colors.text.muted};
-    font-size: ${(props) => props.theme.font.size.xs};
-    font-weight: 500;
-  }
-
-  .workspace-path {
-    font-size: ${(props) => props.theme.font.size.xs};
-    color: ${(props) => props.theme.colors.text.muted};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .workspace-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .action-btn {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 8px;
-    background: transparent;
-    border: none;
-    color: ${(props) => props.theme.text};
-    font-size: ${(props) => props.theme.font.size.xs};
-    cursor: pointer;
-  }
-
-  .more-actions-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    background: transparent;
-    border: none;
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-  }
-
-  .dropdown-menu {
-    min-width: 120px;
-  }
-
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    color: ${(props) => props.theme.text};
-    font-size: ${(props) => props.theme.font.size.sm};
-
-    &.danger {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    color: ${(props) => props.theme.colors.text.muted};
-    font-size: ${(props) => props.theme.font.size.sm};
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/ManageWorkspace/index.js
+++ b/packages/bruno-app/src/components/ManageWorkspace/index.js
@@ -1,162 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { IconArrowLeft, IconPlus, IconFolder, IconLock, IconDots, IconCategory, IconLogin } from '@tabler/icons';
-import toast from 'react-hot-toast';
-
-import { showHomePage } from 'providers/ReduxStore/slices/app';
-import { switchWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
-import { showInFolder } from 'providers/ReduxStore/slices/collections/actions';
-import { sortWorkspaces } from 'utils/workspaces';
-
-import CreateWorkspace from 'components/WorkspaceSidebar/CreateWorkspace';
-import RenameWorkspace from './RenameWorkspace';
-import DeleteWorkspace from './DeleteWorkspace';
-import StyledWrapper from './StyledWrapper';
-import MenuDropdown from 'ui/MenuDropdown/index';
-
-const ManageWorkspace = () => {
-  const dispatch = useDispatch();
-  const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
-  const preferences = useSelector((state) => state.app.preferences);
-
-  const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);
-  const [renameWorkspaceModal, setRenameWorkspaceModal] = useState({ open: false, workspace: null });
-  const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState({ open: false, workspace: null });
-
-  const sortedWorkspaces = useMemo(() => {
-    return sortWorkspaces(workspaces, preferences);
-  }, [workspaces, preferences]);
-
-  const handleBack = () => {
-    dispatch(showHomePage());
-  };
-
-  const handleOpenWorkspace = (workspace) => {
-    dispatch(switchWorkspace(workspace.uid));
-    dispatch(showHomePage());
-    toast.success(`Switched to ${workspace.name}`);
-  };
-
-  const handleShowInFolder = (workspace) => {
-    if (workspace.pathname) {
-      dispatch(showInFolder(workspace.pathname)).catch(() => {
-        toast.error('Error opening the folder');
-      });
-    }
-  };
-
-  const handleRenameClick = (workspace) => {
-    setRenameWorkspaceModal({ open: true, workspace });
-  };
-
-  const handleCloseClick = (workspace) => {
-    if (workspace.type === 'default') {
-      toast.error('Cannot remove the default workspace');
-      return;
-    }
-    setDeleteWorkspaceModal({ open: true, workspace });
-  };
-
-  return (
-    <StyledWrapper>
-      {createWorkspaceModalOpen && (
-        <CreateWorkspace onClose={() => setCreateWorkspaceModalOpen(false)} />
-      )}
-
-      {renameWorkspaceModal.open && renameWorkspaceModal.workspace && (
-        <RenameWorkspace
-          workspace={renameWorkspaceModal.workspace}
-          onClose={() => setRenameWorkspaceModal({ open: false, workspace: null })}
-        />
-      )}
-
-      {deleteWorkspaceModal.open && deleteWorkspaceModal.workspace && (
-        <DeleteWorkspace
-          workspace={deleteWorkspaceModal.workspace}
-          onClose={() => setDeleteWorkspaceModal({ open: false, workspace: null })}
-        />
-      )}
-
-      <div className="manage-workspace-header">
-        <div className="header-left">
-          <div className="back-button" onClick={handleBack}>
-            <IconArrowLeft size={18} strokeWidth={1.5} />
-          </div>
-          <span className="header-title">Manage Workspace</span>
-        </div>
-        <button className="create-workspace-btn" onClick={() => setCreateWorkspaceModalOpen(true)}>
-          <IconPlus size={14} strokeWidth={2} />
-          <span>Create Workspace</span>
-        </button>
-      </div>
-
-      <div className="workspace-list">
-        {sortedWorkspaces.length === 0 ? (
-          <div className="empty-state">
-            <span>No workspaces found</span>
-          </div>
-        ) : (
-          sortedWorkspaces.map((workspace) => {
-            const isDefault = workspace.type === 'default';
-            const isActive = workspace.uid === activeWorkspaceUid;
-
-            return (
-              <div key={workspace.uid} className="workspace-item">
-                <div className="workspace-info">
-                  <div className="workspace-name-row">
-                    <span className={`workspace-icon ${isDefault ? 'default' : 'regular'}`}>
-                      {isDefault ? (
-                        <IconLock size={14} strokeWidth={1.5} />
-                      ) : (
-                        <IconCategory size={14} strokeWidth={1.5} />
-                      )}
-                    </span>
-                    <span className="workspace-name">{workspace.name}</span>
-                    {isDefault && <span className="default-badge">Default</span>}
-                  </div>
-                  {workspace.pathname && (
-                    <div className="workspace-path">{workspace.pathname}</div>
-                  )}
-                </div>
-
-                <div className="workspace-actions">
-                  <button
-                    className="action-btn"
-                    onClick={() => handleOpenWorkspace(workspace)}
-                  >
-                    <IconLogin size={14} strokeWidth={1.5} />
-                    <span>Open</span>
-                  </button>
-                  {workspace.pathname && workspace.type !== 'default' && (
-                    <button
-                      className="action-btn"
-                      onClick={() => handleShowInFolder(workspace)}
-                    >
-                      <IconFolder size={14} strokeWidth={1.5} />
-                      <span>Show in folder</span>
-                    </button>
-                  )}
-                  {!isDefault && (
-                    <MenuDropdown
-                      placement="bottom-end"
-                      items={[
-                        { id: 'rename', label: 'Rename', onClick: () => handleRenameClick(workspace) },
-                        { id: 'remove', label: 'Remove', onClick: () => handleCloseClick(workspace) }
-                      ]}
-                    >
-                      <button className="more-actions-btn">
-                        <IconDots size={14} strokeWidth={1.5} />
-                      </button>
-                    </MenuDropdown>
-                  )}
-                </div>
-              </div>
-            );
-          })
-        )}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default ManageWorkspace;
--- a/packages/bruno-app/src/components/Preferences/General/index.js
+++ b/packages/bruno-app/src/components/Preferences/General/index.js
@@ -56,9 +56,6 @@ const General = ({ close }) => {
      }
      return true;
    }),
-    oauth2: Yup.object({
-      useSystemBrowser: Yup.boolean()
-    }),
    defaultCollectionLocation: Yup.string().max(1024)
  });

@@ -79,9 +76,6 @@ const General = ({ close }) => {
        enabled: get(preferences, 'autoSave.enabled', false),
        interval: get(preferences, 'autoSave.interval', 1000)
      },
-      oauth2: {
-        useSystemBrowser: get(preferences, 'request.oauth2.useSystemBrowser', false)
-      },
      defaultCollectionLocation: get(preferences, 'general.defaultCollectionLocation', '')
    },
    validationSchema: preferencesSchema,
@@ -110,10 +104,7 @@ const General = ({ close }) => {
          },
          timeout: newPreferences.timeout,
          storeCookies: newPreferences.storeCookies,
-          sendCookies: newPreferences.sendCookies,
-          oauth2: {
-            useSystemBrowser: newPreferences.oauth2.useSystemBrowser
-          }
+          sendCookies: newPreferences.sendCookies
        },
        autoSave: {
          enabled: newPreferences.autoSave.enabled,
@@ -267,19 +258,6 @@ const General = ({ close }) => {
            Send Cookies automatically
          </label>
        </div>
-        <div className="flex items-center mt-2">
-          <input
-            id="oauth2.useSystemBrowser"
-            type="checkbox"
-            name="oauth2.useSystemBrowser"
-            checked={formik.values.oauth2.useSystemBrowser}
-            onChange={formik.handleChange}
-            className="mousetrap mr-0"
-          />
-          <label className="block ml-2 select-none" htmlFor="oauth2.useSystemBrowser">
-            Use System Browser for OAuth2 Authorization
-          </label>
-        </div>
        <div className="flex flex-col mt-6">
          <label className="block select-none" htmlFor="timeout">
            Request Timeout (in ms)
--- a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js
@@ -81,7 +81,7 @@ const AssertionOperator = ({ operator, onChange }) => {
  };

  return (
-    <select value={operator} onChange={handleChange} className="mousetrap" data-testid="assertion-operator-select">
+    <select value={operator} onChange={handleChange} className="mousetrap">
      {operators.map((operator) => (
        <option key={operator} value={operator}>
          {getLabel(operator)}
--- a/packages/bruno-app/src/components/RequestPane/Assertions/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/index.js
@@ -163,7 +163,6 @@ const Assertions = ({ item, collection }) => {
        defaultRow={defaultRow}
        reorderable={true}
        onReorder={handleAssertionDrag}
-        testId="assertions-table"
      />
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
@@ -8,12 +8,20 @@ const Wrapper = styled.div`

    .auth-mode-label {
      color: ${(props) => props.theme.colors.text.yellow};
-
-      .caret {
-        color: rgb(140, 140, 140);
-        fill: rgb(140, 140, 140);
-      }
    }
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
  }
 `;

--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
@@ -1,7 +1,7 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,9 +9,19 @@ import StyledWrapper from './StyledWrapper';

 const AuthMode = ({ item, collection }) => {
  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');

-  const onModeChange = useCallback((value) => {
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
    dispatch(
      updateRequestAuthMode({
        itemUid: item.uid,
@@ -19,74 +29,102 @@ const AuthMode = ({ item, collection }) => {
        mode: value
      })
    );
-  }, [dispatch, item.uid, collection.uid]);
-
-  const menuItems = useMemo(() => [
-    {
-      id: 'awsv4',
-      label: 'AWS Sig v4',
-      onClick: () => onModeChange('awsv4')
-    },
-    {
-      id: 'basic',
-      label: 'Basic Auth',
-      onClick: () => onModeChange('basic')
-    },
-    {
-      id: 'bearer',
-      label: 'Bearer Token',
-      onClick: () => onModeChange('bearer')
-    },
-    {
-      id: 'digest',
-      label: 'Digest Auth',
-      onClick: () => onModeChange('digest')
-    },
-    {
-      id: 'ntlm',
-      label: 'NTLM Auth',
-      onClick: () => onModeChange('ntlm')
-    },
-    {
-      id: 'oauth2',
-      label: 'OAuth 2.0',
-      onClick: () => onModeChange('oauth2')
-    },
-    {
-      id: 'wsse',
-      label: 'WSSE Auth',
-      onClick: () => onModeChange('wsse')
-    },
-    {
-      id: 'apikey',
-      label: 'API Key',
-      onClick: () => onModeChange('apikey')
-    },
-    {
-      id: 'inherit',
-      label: 'Inherit',
-      onClick: () => onModeChange('inherit')
-    },
-    {
-      id: 'none',
-      label: 'No Auth',
-      onClick: () => onModeChange('none')
-    }
-  ], [onModeChange]);
-
+  };
  return (
    <StyledWrapper>
      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <MenuDropdown
-          items={menuItems}
-          placement="bottom-end"
-          selectedItemId={authMode}
-          showTickMark={true}
-        >
-          <div className="flex items-center justify-center auth-mode-label select-none">
-            {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('awsv4');
+            }}
+          >
+            AWS Sig v4
          </div>
-        </MenuDropdown>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('basic');
+            }}
+          >
+            Basic Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('bearer');
+            }}
+          >
+            Bearer Token
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('digest');
+            }}
+          >
+            Digest Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('ntlm');
+            }}
+          >
+            NTLM Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('oauth2');
+            }}
+          >
+            OAuth 2.0
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('wsse');
+            }}
+          >
+            WSSE Auth
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('apikey');
+            }}
+          >
+            API Key
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('inherit');
+            }}
+          >
+            Inherit
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('none');
+            }}
+          >
+            No Auth
+          </div>
+        </Dropdown>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
@@ -2,7 +2,7 @@ import React, { useRef, forwardRef } from 'react';
 import { useDetectSensitiveField } from 'hooks/useDetectSensitiveField';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { IconCaretDown, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import SingleLineEditor from 'components/SingleLineEditor';
@@ -12,14 +12,10 @@ import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
 import AdditionalParams from '../AdditionalParams/index';
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
-import { savePreferences } from 'providers/ReduxStore/slices/app';
-import toast from 'react-hot-toast';

 const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
  const dispatch = useDispatch();
-  const preferences = useSelector((state) => state.app.preferences);
  const { storedTheme } = useTheme();
-  const useSystemBrowser = get(preferences, 'request.oauth2.useSystemBrowser', false);
  const dropdownTippyRef = useRef();
  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
  const { isSensitive } = useDetectSensitiveField(collection);
@@ -126,29 +122,6 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
    );
  };

-  const handleUseSystemBrowserToggle = (e) => {
-    const newValue = e.target.checked;
-    dispatch(
-      savePreferences({
-        ...preferences,
-        request: {
-          ...preferences.request,
-          oauth2: {
-            ...preferences.request.oauth2,
-            useSystemBrowser: newValue
-          }
-        }
-      })
-    )
-      .then(() => {
-        toast.success('Preference updated successfully');
-      })
-      .catch((err) => {
-        console.error(err);
-        toast.error('Failed to update preference');
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
@@ -160,43 +133,6 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
          Configuration
        </span>
      </div>
-      <div className="flex items-center gap-4 w-full" key="input-callbackUrl">
-        <label className="block min-w-[140px]">Callback URL</label>
-        <div className="flex flex-col gap-1 w-full">
-          <div className="single-line-editor-wrapper flex-1 flex items-center">
-            <SingleLineEditor
-              value={callbackUrl}
-              theme={storedTheme}
-              onSave={handleSave}
-              onChange={(val) => handleChange('callbackUrl', val)}
-              onRun={handleRun}
-              collection={collection}
-              item={item}
-              placeholder={useSystemBrowser ? 'https://oauth2.usebruno.com/callback' : undefined}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="flex items-center gap-4 w-full" key="input-use-system-browser">
-        <label className="block min-w-[140px]"></label>
-        <div className="flex items-center gap-2">
-          <input
-            type="checkbox"
-            checked={Boolean(useSystemBrowser)}
-            onChange={handleUseSystemBrowserToggle}
-            className="cursor-pointer"
-          />
-          <label
-            className="block cursor-pointer"
-            onClick={(e) => {
-              e.preventDefault();
-              handleUseSystemBrowserToggle({ target: { checked: !useSystemBrowser } });
-            }}
-          >
-            Use system browser for OAuth
-          </label>
-        </div>
-      </div>
      {inputsConfig.map((input) => {
        const { key, label, isSecret } = input;
        const value = oAuth[key] || '';
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/inputsConfig.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/inputsConfig.js
@@ -1,4 +1,8 @@
 const inputsConfig = [
+  {
+    key: 'callbackUrl',
+    label: 'Callback URL'
+  },
  {
    key: 'authorizationUrl',
    label: 'Authorization URL'
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
@@ -1,7 +1,7 @@
 import React, { useRef, forwardRef, useMemo } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { IconCaretDown, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import SingleLineEditor from 'components/SingleLineEditor';
@@ -12,13 +12,9 @@ import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
 import AdditionalParams from '../AdditionalParams/index';
 import { getAllVariables } from 'utils/collections/index';
 import { interpolate } from '@usebruno/common';
-import { savePreferences } from 'providers/ReduxStore/slices/app';
-import toast from 'react-hot-toast';

 const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
  const dispatch = useDispatch();
-  const preferences = useSelector((state) => state.app.preferences);
-  const useSystemBrowser = get(preferences, 'request.oauth2.useSystemBrowser', false);
  const { storedTheme } = useTheme();
  const dropdownTippyRef = useRef();
  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
@@ -81,29 +77,6 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
    handleChange('autoFetchToken', e.target.checked);
  };

-  const handleUseSystemBrowserToggle = (e) => {
-    const newValue = e.target.checked;
-    dispatch(
-      savePreferences({
-        ...preferences,
-        request: {
-          ...preferences.request,
-          oauth2: {
-            ...preferences.request.oauth2,
-            useSystemBrowser: newValue
-          }
-        }
-      })
-    )
-      .then(() => {
-        toast.success('Preference updated successfully');
-      })
-      .catch((err) => {
-        console.error(err);
-        toast.error('Failed to update preference');
-      });
-  };
-
  return (
    <Wrapper className="mt-2 flex w-full gap-4 flex-col">
      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={authorizationUrl} credentialsId={credentialsId} />
@@ -115,43 +88,6 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
          Configuration
        </span>
      </div>
-      <div className="flex items-center gap-4 w-full" key="input-callbackUrl">
-        <label className="block min-w-[140px]">Callback URL</label>
-        <div className="flex flex-col gap-1 w-full">
-          <div className="oauth2-input-wrapper flex-1 flex items-center">
-            <SingleLineEditor
-              value={callbackUrl}
-              theme={storedTheme}
-              onSave={handleSave}
-              onChange={(val) => handleChange('callbackUrl', val)}
-              onRun={handleRun}
-              collection={collection}
-              item={item}
-              placeholder={useSystemBrowser ? 'https://oauth2.usebruno.com/callback' : undefined}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="flex items-center gap-4 w-full" key="input-use-system-browser">
-        <label className="block min-w-[140px]"></label>
-        <div className="flex items-center gap-2">
-          <input
-            type="checkbox"
-            checked={Boolean(useSystemBrowser)}
-            onChange={handleUseSystemBrowserToggle}
-            className="cursor-pointer"
-          />
-          <label
-            className="block cursor-pointer"
-            onClick={(e) => {
-              e.preventDefault();
-              handleUseSystemBrowserToggle({ target: { checked: !useSystemBrowser } });
-            }}
-          >
-            Use system browser for OAuth
-          </label>
-        </div>
-      </div>
      {inputsConfig.map((input) => {
        const { key, label, isSecret } = input;
        return (
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/inputsConfig.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/inputsConfig.js
@@ -1,4 +1,8 @@
 const inputsConfig = [
+  {
+    key: 'callbackUrl',
+    label: 'Callback URL'
+  },
  {
    key: 'authorizationUrl',
    label: 'Authorization URL'
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
@@ -1,36 +1,18 @@
-import { useMemo, useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import toast from 'react-hot-toast';
-import { cloneDeep, find, get } from 'lodash';
-import { IconLoader2, IconX } from '@tabler/icons';
+import { cloneDeep, find } from 'lodash';
+import { IconLoader2 } from '@tabler/icons';
 import { interpolate } from '@usebruno/common';
-import { fetchOauth2Credentials, clearOauth2Cache, refreshOauth2Credentials, cancelOauth2AuthorizationRequest, isOauth2AuthorizationRequestInProgress } from 'providers/ReduxStore/slices/collections/actions';
+import { fetchOauth2Credentials, clearOauth2Cache, refreshOauth2Credentials } from 'providers/ReduxStore/slices/collections/actions';
 import { getAllVariables } from 'utils/collections/index';

 const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, credentialsId }) => {
  const { uid: collectionUid } = collection;

  const dispatch = useDispatch();
-  const preferences = useSelector((state) => state.app.preferences);
  const [fetchingToken, toggleFetchingToken] = useState(false);
  const [refreshingToken, toggleRefreshingToken] = useState(false);
-  const [fetchingAuthorizationCode, toggleFetchingAuthorizationCode] = useState(false);
-
-  const useSystemBrowser = get(preferences, 'request.oauth2.useSystemBrowser', false);
-
-  // Check for pending authorization when component mounts or when fetching starts
-  useEffect(() => {
-    if (useSystemBrowser && fetchingToken) {
-      const getRequestStatus = async () => {
-        try {
-          toggleFetchingAuthorizationCode(await dispatch(isOauth2AuthorizationRequestInProgress()));
-        } catch (err) {
-          console.error('Error checking pending authorization:', err);
-        }
-      };
-      getRequestStatus();
-    }
-  }, [useSystemBrowser, fetchingToken, dispatch]);

  const interpolatedAccessTokenUrl = useMemo(() => {
    const variables = getAllVariables(collection, item);
@@ -53,6 +35,8 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
        forceGetToken: true
      }));

+      toggleFetchingToken(false);
+
      // Check if the result contains error or if access_token is missing
      if (!result || !result.access_token) {
        const errorMessage = result?.error || 'No access token received from authorization server';
@@ -65,14 +49,8 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
    } catch (error) {
      console.error('could not fetch the token!');
      console.error(error);
-      // Don't show error toast for user cancellation
-      if (error?.message && error.message.includes('cancelled by user')) {
-        return;
-      }
-      toast.error(error?.message || 'An error occurred while fetching token!');
-    } finally {
      toggleFetchingToken(false);
-      toggleFetchingAuthorizationCode(false);
+      toast.error(error?.message || 'An error occurred while fetching token!');
    }
  };

@@ -117,20 +95,6 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
      });
  };

-  const handleCancelAuthorization = async () => {
-    try {
-      const result = await dispatch(cancelOauth2AuthorizationRequest());
-      if (result.success && result.cancelled) {
-        toast.error('Authorization cancelled');
-        toggleFetchingToken(false);
-        toggleFetchingAuthorizationCode(false);
-      }
-    } catch (err) {
-      console.error('Error cancelling authorization:', err);
-      toast.error('Failed to cancel authorization');
-    }
-  };
-
  return (
    <div className="flex flex-row gap-4 mt-4">
      <button
@@ -151,16 +115,6 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
            </button>
          )
        : null}
-      {useSystemBrowser && fetchingAuthorizationCode
-        ? (
-            <button
-              onClick={handleCancelAuthorization}
-              className="submit btn btn-sm btn-secondary w-fit flex flex-row items-center"
-            >
-              <IconX size={16} className="mr-1" />
-              Cancel Authorization
-            </button>
-          ) : null}
      <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
        Clear Cache
      </button>
--- a/packages/bruno-app/src/components/RequestPane/Auth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import get from 'lodash/get';
+import AuthMode from './AuthMode';
 import AwsV4Auth from './AwsV4Auth';
 import BearerAuth from './BearerAuth';
 import BasicAuth from './BasicAuth';
@@ -72,9 +73,6 @@ const Auth = ({ item, collection }) => {

  const getAuthView = () => {
    switch (authMode) {
-      case 'none': {
-        return <div className="mt-2">No Auth</div>;
-      }
      case 'awsv4': {
        return <AwsV4Auth collection={collection} item={item} request={request} save={save} updateAuth={updateAuth} />;
      }
@@ -115,6 +113,9 @@ const Auth = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full mt-1 overflow-auto">
+      <div className="flex flex-grow justify-start items-center">
+        <AuthMode item={item} collection={collection} />
+      </div>
      {getAuthView()}
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -19,7 +19,7 @@ import Documentation from 'components/Documentation/index';
 import GraphQLSchemaActions from '../GraphQLSchemaActions/index';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
 import Settings from 'components/RequestPane/Settings';
-import ResponsiveTabs from 'ui/ResponsiveTabs';
+import RequestPaneTabs from 'components/RequestPane/RequestPaneTabs';

 const MULTIPLE_CONTENT_TABS = new Set(['script', 'vars', 'auth', 'docs']);

@@ -46,8 +46,8 @@ const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handle
    ? get(item, 'draft.request.body.graphql.query', '')
    : get(item, 'request.body.graphql.query', '');
  const variables = item.draft
-    ? get(item, 'draft.request.body.graphql.variables', '')
-    : get(item, 'request.body.graphql.variables', '');
+    ? get(item, 'draft.request.body.graphql.variables')
+    : get(item, 'request.body.graphql.variables');

  const { displayedTheme } = useTheme();
  const [schema, setSchema] = useState(null);
@@ -146,7 +146,7 @@ const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handle

  return (
    <div className="flex flex-col h-full relative">
-      <ResponsiveTabs
+      <RequestPaneTabs
        tabs={allTabs}
        activeTab={requestPaneTab}
        onTabSelect={selectTab}
--- a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
@@ -50,7 +50,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
  return (
    <>
      <button
-        className="btn-add-param text-link px-4 py-4 select-none absolute right-0 z-10"
+        className="btn-add-param text-link px-4 py-4 select-none absolute top-0 right-0 z-10"
        onClick={onPrettify}
        title="Prettify"
      >
--- a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/GrpcAuthMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/GrpcAuthMode/index.js
@@ -1,7 +1,7 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
@@ -9,9 +9,50 @@ import StyledWrapper from '../../../Auth/AuthMode/StyledWrapper';

 const GrpcAuthMode = ({ item, collection }) => {
  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');

-  const onModeChange = useCallback((value) => {
+  const authModes = [
+    {
+      name: 'Basic Auth',
+      mode: 'basic'
+    },
+    {
+      name: 'Bearer Token',
+      mode: 'bearer'
+    },
+    {
+      name: 'API Key',
+      mode: 'apikey'
+    },
+    {
+      name: 'OAuth2',
+      mode: 'oauth2'
+    },
+    {
+      name: 'WSSE Auth',
+      mode: 'wsse'
+    },
+    {
+      name: 'Inherit',
+      mode: 'inherit'
+    },
+    {
+      name: 'No Auth',
+      mode: 'none'
+    }
+  ];
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
    dispatch(
      updateRequestAuthMode({
        itemUid: item.uid,
@@ -19,59 +60,27 @@ const GrpcAuthMode = ({ item, collection }) => {
        mode: value
      })
    );
-  }, [dispatch, item.uid, collection.uid]);
+  };

-  const menuItems = useMemo(() => [
-    {
-      id: 'basic',
-      label: 'Basic Auth',
-      onClick: () => onModeChange('basic')
-    },
-    {
-      id: 'bearer',
-      label: 'Bearer Token',
-      onClick: () => onModeChange('bearer')
-    },
-    {
-      id: 'apikey',
-      label: 'API Key',
-      onClick: () => onModeChange('apikey')
-    },
-    {
-      id: 'oauth2',
-      label: 'OAuth 2.0',
-      onClick: () => onModeChange('oauth2')
-    },
-    {
-      id: 'wsse',
-      label: 'WSSE Auth',
-      onClick: () => onModeChange('wsse')
-    },
-    {
-      id: 'inherit',
-      label: 'Inherit',
-      onClick: () => onModeChange('inherit')
-    },
-    {
-      id: 'none',
-      label: 'No Auth',
-      onClick: () => onModeChange('none')
-    }
-  ], [onModeChange]);
+  const onClickHandler = (mode) => {
+    dropdownTippyRef?.current?.hide();
+    onModeChange(mode);
+  };

  return (
    <StyledWrapper>
      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <MenuDropdown
-          items={menuItems}
-          placement="bottom-end"
-          selectedItemId={authMode}
-          showTickMark={true}
-        >
-          <div className="flex items-center justify-center auth-mode-label select-none">
-            {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
-          </div>
-        </MenuDropdown>
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          {authModes.map((authMode) => (
+            <div
+              key={authMode.mode}
+              className="dropdown-item"
+              onClick={() => onClickHandler(authMode.mode)}
+            >
+              {authMode.name}
+            </div>
+          ))}
+        </Dropdown>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -15,9 +15,8 @@ import Tests from 'components/RequestPane/Tests';
 import Settings from 'components/RequestPane/Settings';
 import Documentation from 'components/Documentation/index';
 import StatusDot from 'components/StatusDot';
-import ResponsiveTabs from 'ui/ResponsiveTabs';
+import RequestPaneTabs from 'components/RequestPane/RequestPaneTabs';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
-import AuthMode from '../Auth/AuthMode/index';

 const MULTIPLE_CONTENT_TABS = new Set(['params', 'script', 'vars', 'auth', 'docs']);

@@ -52,7 +51,7 @@ const HttpRequestPane = ({ item, collection }) => {
  const tabs = useSelector((state) => state.tabs.tabs);
  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);

-  const rightContentRef = useRef(null);
+  const bodyModeRef = useRef(null);
  const initialAutoSelectDone = useRef(false);

  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
@@ -131,23 +130,19 @@ const HttpRequestPane = ({ item, collection }) => {
  const isMultipleContentTab = MULTIPLE_CONTENT_TABS.has(requestPaneTab);

  const rightContent = requestPaneTab === 'body' ? (
-    <div ref={rightContentRef}>
+    <div ref={bodyModeRef}>
      <RequestBodyMode item={item} collection={collection} />
    </div>
-  ) : requestPaneTab === 'auth' ? (
-    <div ref={rightContentRef} className="flex flex-grow justify-start items-center">
-      <AuthMode item={item} collection={collection} />
-    </div>
  ) : null;

  return (
    <div className="flex flex-col h-full relative">
-      <ResponsiveTabs
+      <RequestPaneTabs
        tabs={allTabs}
        activeTab={requestPaneTab}
        onTabSelect={selectTab}
        rightContent={rightContent}
-        rightContentRef={rightContent ? rightContentRef : null}
+        rightContentRef={bodyModeRef}
        delayedTabs={['body']}
      />

--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js
@@ -18,10 +18,6 @@ const Wrapper = styled.div`
    .dropdown-item {
      padding: 0.25rem 0.6rem !important;
    }
-
-    .text-link {
-      color: ${(props) => props.theme.textLink};
-    }
  }

  input {
@@ -44,9 +40,6 @@ const Wrapper = styled.div`
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
-    text-align: center;
-    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
  }

  .caret {
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js
@@ -1,6 +1,6 @@
-import React, { useState, useRef, useMemo, useCallback } from 'react';
+import React, { useState, useRef, forwardRef } from 'react';
 import { IconCaretDown } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import StyledWrapper from './StyledWrapper';

 const STANDARD_METHODS = Object.freeze(['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS', 'HEAD', 'TRACE', 'CONNECT']);
@@ -9,27 +9,58 @@ const KEY = Object.freeze({ ENTER: 'Enter', ESCAPE: 'Escape' });

 const DEFAULT_METHOD = 'GET';

-const TriggerButton = ({ method, ...props }) => {
+function Verb({ verb, onSelect }) {
  return (
-    <button
-      type="button"
-      className="cursor-pointer flex items-center text-left w-full pr-4 select-none"
-      {...props}
-    >
-      <span
-        className="px-3 truncate method-span"
-        id="create-new-request-method"
-        title={method}
-      >
-        {method}
-      </span>
-      <IconCaretDown className="caret" size={16} strokeWidth={2} />
-    </button>
+    <div className="dropdown-item" onClick={() => onSelect(verb)}>
+      {verb}
+    </div>
  );
-};
+}
+
+const Icon = forwardRef(function IconComponent(
+  { isCustomMode, inputValue, handleInputChange, handleBlur, handleKeyDown, inputRef },
+  ref
+) {
+  if (isCustomMode) {
+    return (
+      <div className="flex flex-col w-full">
+        <input
+          ref={inputRef}
+          type="text"
+          className="px-2 w-full focus:bg-transparent"
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          title={inputValue}
+          autoFocus
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div ref={ref} className="flex pr-4 select-none">
+      <button
+        type="button"
+        className="cursor-pointer flex items-center text-left w-full"
+      >
+        <span
+          className="px-2 truncate method-span"
+          id="create-new-request-method"
+          title={inputValue}
+        >
+          {inputValue}
+        </span>
+        <IconCaretDown className="caret" size={16} strokeWidth={2} />
+      </button>
+    </div>
+  );
+});

 const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect }) => {
  const [isCustomMode, setIsCustomMode] = useState(false);
+  const dropdownTippyRef = useRef();
  const inputRef = useRef();

  const blurInput = () => inputRef.current?.blur();
@@ -39,110 +70,74 @@ const HttpMethodSelector = ({ method = DEFAULT_METHOD, onMethodSelect }) => {
    onMethodSelect(val);
  };

-  const handleMethodSelect = useCallback((verb) => {
+  const handleDropdownSelect = (verb) => {
    onMethodSelect(verb);
    setIsCustomMode(false);
+    dropdownTippyRef.current?.hide();
    blurInput();
-  }, [onMethodSelect]);
+  };

-  const handleBlur = (e) => {
-    // Keep the current value when blurring
-    const currentValue = e.target.value ? e.target.value.toUpperCase() : method;
-    onMethodSelect(currentValue);
+  const handleBlur = () => {
    setIsCustomMode(false);
  };

-  const handleAddCustomMethod = useCallback(() => {
+  const handleAddCustomMethod = () => {
    setIsCustomMode(true);
    onMethodSelect('');
+    dropdownTippyRef.current?.hide();

    setTimeout(() => {
      inputRef.current?.focus();
      inputRef.current?.select();
    }, 0);
-  }, [onMethodSelect]);
+  };

  const handleKeyDown = (e) => {
    switch (e.key) {
-      case KEY.ESCAPE: {
+      case KEY.ESCAPE:
        setIsCustomMode(false);
        blurInput();
        e.preventDefault();
        e.stopPropagation();
        return;
-      }
-      case KEY.ENTER: {
+      case KEY.ENTER:
        onMethodSelect(e.target.value ? e.target.value.toUpperCase() : DEFAULT_METHOD);
        setIsCustomMode(false);
        blurInput();
        return;
-      }
-      default: {
+      default:
        return;
-      }
    }
  };

-  // Convert STANDARD_METHODS to MenuDropdown items format
-  const menuItems = useMemo(() => {
-    const items = STANDARD_METHODS.map((verb) => ({
-      id: verb.toLowerCase(),
-      label: verb,
-      onClick: () => handleMethodSelect(verb)
-    }));
-
-    // Add "Add Custom" item
-    items.push({
-      id: 'add-custom',
-      label: '+ Add Custom',
-      onClick: handleAddCustomMethod,
-      className: 'font-normal mt-1 text-link'
-    });
-
-    return items;
-  }, [handleMethodSelect, handleAddCustomMethod]);
-
-  // Determine selected item ID (only if method is a standard method)
-  const selectedItemId = useMemo(() => {
-    if (isCustomMode || !STANDARD_METHODS.includes(method)) {
-      return null;
-    }
-    return method.toLowerCase();
-  }, [method, isCustomMode]);
-
-  // If in custom mode, render input field instead of dropdown
-  if (isCustomMode) {
-    return (
-      <StyledWrapper>
-        <div className="flex method-selector">
-          <div className="flex flex-col w-full">
-            <input
-              ref={inputRef}
-              type="text"
-              className="px-2 w-full focus:bg-transparent"
-              value={method}
-              onChange={handleInputChange}
-              onBlur={handleBlur}
-              onKeyDown={handleKeyDown}
-              title={method}
-              autoFocus
-            />
-          </div>
-        </div>
-      </StyledWrapper>
-    );
-  }
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);

  return (
    <StyledWrapper>
      <div className="flex method-selector">
-        <MenuDropdown
-          items={menuItems}
+        <Dropdown
+          onCreate={onDropdownCreate}
+          icon={(
+            <Icon
+              isCustomMode={isCustomMode}
+              inputValue={method}
+              handleInputChange={handleInputChange}
+              handleBlur={handleBlur}
+              handleKeyDown={handleKeyDown}
+              inputRef={inputRef}
+            />
+          )}
          placement="bottom-start"
-          selectedItemId={selectedItemId}
        >
-          <TriggerButton method={method} />
-        </MenuDropdown>
+          <div>
+            {STANDARD_METHODS.map((verb) => (
+              <Verb key={verb} verb={verb} onSelect={handleDropdownSelect} />
+            ))}
+            <div className="dropdown-item font-normal mt-1" onClick={handleAddCustomMethod}>
+              <span className="text-link">+ Add Custom</span>
+            </div>
+          </div>
+        </Dropdown>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.spec.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.spec.js
@@ -57,13 +57,13 @@ describe('HttpMethodSelector', () => {

      await waitFor(() => {
        const standardMethods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS', 'HEAD', 'TRACE', 'CONNECT'];
-        const dropdownItems = screen.getAllByRole('menuitem');
-        const renderedMethods = dropdownItems.map((item) => item.textContent.trim());
+        const dropdownItems = screen.getAllByText((content, element) => {
+          return element?.classList.contains('dropdown-item');
+        });
+        const renderedMethods = dropdownItems.map((item) => item.textContent);

-        standardMethods.forEach((method, index) => {
-          // GET should have a checkmark (✓) since it's the default selected method
-          const expectedText = index === 0 ? method + '✓' : method;
-          expect(renderedMethods).toContain(expectedText);
+        standardMethods.forEach((method) => {
+          expect(renderedMethods).toContain(method);
        });
      });
    });
@@ -77,8 +77,7 @@ describe('HttpMethodSelector', () => {
      await waitFor(() => {
        const addCustomSpan = screen.getByText('+ Add Custom');
        expect(addCustomSpan).toBeInTheDocument();
-        // The className is applied to the parent dropdown-item div, not the label span
-        expect(addCustomSpan.closest('.dropdown-item')).toHaveClass('text-link');
+        expect(addCustomSpan).toHaveClass('text-link');
      });
    });

@@ -89,13 +88,10 @@ describe('HttpMethodSelector', () => {
      fireEvent.click(button);

      await waitFor(() => {
-        const postMethod = screen.getByRole('menuitem', { name: /^POST/ });
-        expect(postMethod).toBeInTheDocument();
+        const postMethod = screen.getByText('POST');
+        fireEvent.click(postMethod);
      });

-      const postMethod = screen.getByRole('menuitem', { name: /^POST/ });
-      fireEvent.click(postMethod);
-
      expect(mockOnMethodSelect).toHaveBeenCalledWith('POST');
    });
  });
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
@@ -2,12 +2,21 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  font-size: ${(props) => props.theme.font.size.base};
-  white-space: nowrap;
+  min-width: 125px;

  .body-mode-selector {
    background: transparent;
    border-radius: 3px;

+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+      padding-left: 1.5rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
    .selected-body-mode {
      color: ${(props) => props.theme.colors.text.yellow};
    }
@@ -15,7 +24,7 @@ const Wrapper = styled.div`

  .caret {
    color: rgb(140, 140, 140);
-    fill: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
  }
 `;

--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import {
  IconCaretDown,
@@ -10,7 +10,7 @@ import {
  IconFile,
  IconX
 } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateRequestBodyMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestBodyMode } from 'utils/collections';
@@ -20,38 +20,22 @@ import { toastError } from 'utils/common/error';
 import { prettifyJsonString } from 'utils/common/index';
 import xmlFormat from 'xml-formatter';

-const DEFAULT_MODES = [
-  {
-    name: 'Form',
-    options: [
-      { id: 'multipartForm', label: 'Multipart Form', leftSection: IconForms },
-      { id: 'formUrlEncoded', label: 'Form URL Encoded', leftSection: IconForms }
-    ]
-  },
-  {
-    name: 'Raw',
-    options: [
-      { id: 'json', label: 'JSON', leftSection: IconBraces },
-      { id: 'xml', label: 'XML', leftSection: IconCode },
-      { id: 'text', label: 'TEXT', leftSection: IconFileText },
-      { id: 'sparql', label: 'SPARQL', leftSection: IconDatabase }
-    ]
-  },
-  {
-    name: 'Other',
-    options: [
-      { id: 'file', label: 'File / Binary', leftSection: IconFile },
-      { id: 'none', label: 'No Body', leftSection: IconX }
-    ]
-  }
-];
-
 const RequestBodyMode = ({ item, collection }) => {
  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
  const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
  const bodyMode = body?.mode;

-  const onModeChange = useCallback((value) => {
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
+        {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
    dispatch(
      updateRequestBodyMode({
        itemUid: item.uid,
@@ -59,7 +43,7 @@ const RequestBodyMode = ({ item, collection }) => {
        mode: value
      })
    );
-  }, [dispatch, item.uid, collection.uid]);
+  };

  const onPrettify = () => {
    if (body?.json && bodyMode === 'json') {
@@ -91,30 +75,110 @@ const RequestBodyMode = ({ item, collection }) => {
    }
  };

-  const menuItems = useMemo(() => {
-    return DEFAULT_MODES.map((group) => ({
-      ...group,
-      options: group.options.map((option) => ({
-        ...option,
-        onClick: () => onModeChange(option.id)
-      }))
-    }));
-  }, [onModeChange]);
-
  return (
    <StyledWrapper>
      <div className="inline-flex items-center cursor-pointer body-mode-selector">
-        <MenuDropdown
-          items={menuItems}
-          placement="bottom-end"
-          selectedItemId={bodyMode}
-          showGroupDividers={false}
-          groupStyle="select"
-        >
-          <div className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
-            {humanizeRequestBodyMode(bodyMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div className="label-item">Form</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('multipartForm');
+            }}
+          >
+            <span className="dropdown-icon">
+              <IconForms size={16} strokeWidth={2} />
+            </span>
+            Multipart Form
          </div>
-        </MenuDropdown>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('formUrlEncoded');
+            }}
+          >
+            <span className="dropdown-icon">
+              <IconForms size={16} strokeWidth={2} />
+            </span>
+            Form URL Encoded
+          </div>
+          <div className="label-item">Raw</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('json');
+            }}
+          >
+            <span className="dropdown-icon">
+              <IconBraces size={16} strokeWidth={2} />
+            </span>
+            JSON
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('xml');
+            }}
+          >
+            <span className="dropdown-icon">
+              <IconCode size={16} strokeWidth={2} />
+            </span>
+            XML
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('text');
+            }}
+          >
+            <span className="dropdown-icon">
+              <IconFileText size={16} strokeWidth={2} />
+            </span>
+            TEXT
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('sparql');
+            }}
+          >
+            <span className="dropdown-icon">
+              <IconDatabase size={16} strokeWidth={2} />
+            </span>
+            SPARQL
+          </div>
+          <div className="label-item">Other</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('file');
+            }}
+          >
+            <span className="dropdown-icon">
+              <IconFile size={16} strokeWidth={2} />
+            </span>
+            File / Binary
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('none');
+            }}
+          >
+            <span className="dropdown-icon">
+              <IconX size={16} strokeWidth={2} />
+            </span>
+            No Body
+          </div>
+        </Dropdown>
      </div>
      {(bodyMode === 'json' || bodyMode === 'xml') && (
        <button className="ml-2" onClick={onPrettify}>
--- a/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js
@@ -2,21 +2,12 @@ import styled from 'styled-components';

 const StyledWrapper = styled.div`
  &.tabs {
-    overflow: hidden;
-    min-width: 0;
-
-    > div:first-child {
-      overflow: hidden;
-      min-width: 0;
-      flex-shrink: 1;
-    }
-
-    .more-tabs {
+    div.more-tabs {
      color: var(--color-tab-inactive) !important;
      border-bottom: solid 2px transparent;
    }

-    .tab {
+    div.tab {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
--- a/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js
@@ -0,0 +1,178 @@
+import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import classnames from 'classnames';
+import Dropdown from 'components/Dropdown';
+import { IconChevronDown } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const DROPDOWN_WIDTH = 60;
+const CALCULATION_DELAY_DEFAULT = 20;
+const CALCULATION_DELAY_EXTENDED = 150;
+
+const RequestPaneTabs = ({
+  tabs,
+  activeTab,
+  onTabSelect,
+  rightContent,
+  rightContentRef,
+  delayedTabs = []
+}) => {
+  const [visibleTabs, setVisibleTabs] = useState([]);
+  const [overflowTabs, setOverflowTabs] = useState([]);
+
+  const tabsContainerRef = useRef(null);
+  const tabRefsMap = useRef({});
+  const dropdownTippyRef = useRef(null);
+
+  const handleTabSelect = useCallback(
+    (tabKey) => {
+      onTabSelect(tabKey);
+      dropdownTippyRef.current?.hide();
+    },
+    [onTabSelect]
+  );
+
+  const calculateTabVisibility = useCallback(() => {
+    const container = tabsContainerRef.current;
+    if (!container || !tabs.length) return;
+
+    const containerWidth = container.offsetWidth;
+    const rightContentWidth = rightContentRef?.current
+      ? rightContentRef.current.offsetWidth + 20
+      : 0;
+
+    const availableWidth = containerWidth - rightContentWidth - DROPDOWN_WIDTH;
+    const visible = [];
+    const overflow = [];
+    let currentWidth = 0;
+
+    for (const tab of tabs) {
+      const tabElement = tabRefsMap.current[tab.key];
+      const tabWidth = tabElement ? tabElement.offsetWidth + 20 : 100;
+
+      if (currentWidth + tabWidth <= availableWidth && !overflow.length) {
+        visible.push(tab);
+        currentWidth += tabWidth;
+      } else {
+        overflow.push(tab);
+      }
+    }
+
+    if (!visible.some((t) => t.key === activeTab) && overflow.length) {
+      const activeTabIndex = overflow.findIndex((t) => t.key === activeTab);
+      if (activeTabIndex !== -1) {
+        const [activeTabItem] = overflow.splice(activeTabIndex, 1);
+        const lastVisible = visible.pop();
+        if (lastVisible) overflow.unshift(lastVisible);
+        visible.push(activeTabItem);
+      }
+    }
+
+    setVisibleTabs(visible);
+    setOverflowTabs(overflow);
+  }, [tabs, activeTab, rightContentRef]);
+
+  const renderTab = useCallback(
+    (tab, isInDropdown = false) => {
+      const isActive = tab.key === activeTab;
+
+      if (isInDropdown) {
+        return (
+          <div
+            key={tab.key}
+            className={classnames('dropdown-item', { active: isActive })}
+            role="tab"
+            onClick={() => handleTabSelect(tab.key)}
+          >
+            <span className="flex items-center gap-1">
+              {tab.label}
+              {tab.indicator}
+            </span>
+          </div>
+        );
+      }
+
+      return (
+        <div
+          key={tab.key}
+          className={classnames('tab select-none', tab.key, { active: isActive })}
+          role="tab"
+          onClick={() => handleTabSelect(tab.key)}
+          ref={(el) => el && (tabRefsMap.current[tab.key] = el)}
+        >
+          {tab.label}
+          {tab.indicator}
+        </div>
+      );
+    },
+    [activeTab, handleTabSelect]
+  );
+
+  useEffect(() => {
+    const delay = delayedTabs.includes(activeTab) ? CALCULATION_DELAY_EXTENDED : CALCULATION_DELAY_DEFAULT;
+    const timeoutId = setTimeout(() => requestAnimationFrame(calculateTabVisibility), delay);
+    return () => clearTimeout(timeoutId);
+  }, [calculateTabVisibility, activeTab, delayedTabs]);
+
+  useEffect(() => {
+    let frameId = null;
+    const observer = new ResizeObserver(() => {
+      if (frameId) cancelAnimationFrame(frameId);
+      frameId = requestAnimationFrame(calculateTabVisibility);
+    });
+
+    if (tabsContainerRef.current) observer.observe(tabsContainerRef.current);
+    if (rightContentRef?.current) observer.observe(rightContentRef.current);
+
+    return () => {
+      if (frameId) cancelAnimationFrame(frameId);
+      observer.disconnect();
+    };
+  }, [calculateTabVisibility, rightContentRef]);
+
+  const hiddenStyle = useMemo(
+    () => ({ visibility: 'hidden', position: 'absolute', display: 'flex', pointerEvents: 'none' }),
+    []
+  );
+
+  return (
+    <StyledWrapper ref={tabsContainerRef} className="flex items-center tabs" role="tablist">
+      <div style={hiddenStyle}>
+        {tabs.map((tab) => (
+          <div
+            key={tab.key}
+            className={classnames('tab select-none', tab.key, { active: tab.key === activeTab })}
+            ref={(el) => el && (tabRefsMap.current[tab.key] = el)}
+          >
+            {tab.label}
+            {tab.indicator}
+          </div>
+        ))}
+      </div>
+
+      {visibleTabs.map((tab) => renderTab(tab))}
+
+      {overflowTabs.length > 0 && (
+        <Dropdown
+          icon={(
+            <div className="more-tabs select-none flex items-center cursor-pointer gap-1">
+              <span>More</span>
+              <IconChevronDown size={14} strokeWidth={2} />
+            </div>
+          )}
+          placement="bottom-start"
+          onCreate={(instance) => (dropdownTippyRef.current = instance)}
+        >
+          <div style={{ minWidth: '150px' }}>{overflowTabs.map((tab) => renderTab(tab, true))}</div>
+        </Dropdown>
+      )}
+
+      {rightContent && (
+        <div className="flex flex-grow justify-end items-center">
+          {rightContent}
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default RequestPaneTabs;
--- a/packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/WSAuthMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/WSAuthMode/index.js
@@ -1,70 +1,82 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { IconCaretDown } from '@tabler/icons';
-import MenuDropdown from 'ui/MenuDropdown';
+import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
 import { humanizeRequestAuthMode } from 'utils/collections';
 import StyledWrapper from '../../../Auth/AuthMode/StyledWrapper';

+const AUTH_MODES = [
+  {
+    name: 'Basic Auth',
+    mode: 'basic'
+  },
+  {
+    name: 'Bearer Token',
+    mode: 'bearer'
+  },
+  {
+    name: 'API Key',
+    mode: 'apikey'
+  },
+  {
+    name: 'OAuth2',
+    mode: 'oauth2'
+  },
+  {
+    name: 'Inherit',
+    mode: 'inherit'
+  },
+  {
+    name: 'No Auth',
+    mode: 'none'
+  }
+];
+
 const WSAuthMode = ({ item, collection }) => {
  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');

-  const onModeChange = useCallback((value) => {
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)}
+        {' '}
+        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
    dispatch(updateRequestAuthMode({
      itemUid: item.uid,
      collectionUid: collection.uid,
      mode: value
    }));
-  }, [dispatch, item.uid, collection.uid]);
+  };

-  const menuItems = useMemo(() => [
-    {
-      id: 'basic',
-      label: 'Basic Auth',
-      onClick: () => onModeChange('basic')
-    },
-    {
-      id: 'bearer',
-      label: 'Bearer Token',
-      onClick: () => onModeChange('bearer')
-    },
-    {
-      id: 'apikey',
-      label: 'API Key',
-      onClick: () => onModeChange('apikey')
-    },
-    {
-      id: 'oauth2',
-      label: 'OAuth 2.0',
-      onClick: () => onModeChange('oauth2')
-    },
-    {
-      id: 'inherit',
-      label: 'Inherit',
-      onClick: () => onModeChange('inherit')
-    },
-    {
-      id: 'none',
-      label: 'No Auth',
-      onClick: () => onModeChange('none')
-    }
-  ], [onModeChange]);
+  const onClickHandler = (mode) => {
+    dropdownTippyRef?.current?.hide();
+    onModeChange(mode);
+  };

  return (
    <StyledWrapper>
      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <MenuDropdown
-          items={menuItems}
-          placement="bottom-end"
-          selectedItemId={authMode}
-          showTickMark={true}
-        >
-          <div className="flex items-center justify-center auth-mode-label select-none">
-            {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1" size={14} strokeWidth={2} />
-          </div>
-        </MenuDropdown>
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          {AUTH_MODES.map((authMode) => (
+            <div
+              key={authMode.mode}
+              className="dropdown-item"
+              onClick={() => onClickHandler(authMode.mode)}
+            >
+              {authMode.name}
+            </div>
+          ))}
+        </Dropdown>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
@@ -9,14 +9,6 @@ const StyledWrapper = styled.div`
    }
  }

-  .request-pane {
-    flex-shrink: 0;
-  }
-
-  .response-pane {
-    min-width: 0;
-  }
-
  div.dragbar-wrapper {
    display: flex;
    align-items: center;
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import find from 'lodash/find';
 import toast from 'react-hot-toast';
 import { useSelector, useDispatch } from 'react-redux';
@@ -34,11 +34,9 @@ import WSResponsePane from 'components/ResponsePane/WsResponsePane';
 import { useTabPaneBoundaries } from 'hooks/useTabPaneBoundaries/index';
 import ResponseExample from 'components/ResponseExample';
 import WorkspaceHome from 'components/WorkspaceHome';
-import EnvironmentSettings from 'components/Environments/EnvironmentSettings';
-import GlobalEnvironmentSettings from 'components/Environments/GlobalEnvironmentSettings';

 const MIN_LEFT_PANE_WIDTH = 300;
-const MIN_RIGHT_PANE_WIDTH = 480;
+const MIN_RIGHT_PANE_WIDTH = 350;
 const MIN_TOP_PANE_HEIGHT = 150;
 const MIN_BOTTOM_PANE_HEIGHT = 150;

@@ -54,17 +52,10 @@ const RequestTabPanel = () => {
  const _collections = useSelector((state) => state.collections.collections);
  const preferences = useSelector((state) => state.app.preferences);
  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
-  const isConsoleOpen = useSelector((state) => state.logs.isConsoleOpen);
-
-  // Use ref to avoid stale closure in event handlers
-  const isVerticalLayoutRef = useRef(isVerticalLayout);
-  useEffect(() => {
-    isVerticalLayoutRef.current = isVerticalLayout;
-  }, [isVerticalLayout]);

  // merge `globalEnvironmentVariables` into the active collection and rebuild `collections` immer proxy object
-  const collections = produce(_collections, (draft) => {
-    const collection = find(draft, (c) => c.uid === focusedTab?.collectionUid);
+  let collections = produce(_collections, (draft) => {
+    let collection = find(draft, (c) => c.uid === focusedTab?.collectionUid);

    if (collection) {
      // add selected global env variables to the collection object
@@ -78,66 +69,62 @@ const RequestTabPanel = () => {
    }
  });

-  const collection = find(collections, (c) => c.uid === focusedTab?.collectionUid);
+  let collection = find(collections, (c) => c.uid === focusedTab?.collectionUid);
  const [dragging, setDragging] = useState(false);
-  const draggingRef = useRef(false);
-
+  const dragOffset = useRef({ x: 0, y: 0 });
  const { left: leftPaneWidth, top: topPaneHeight, reset: resetPaneBoundaries, setTop: setTopPaneHeight, setLeft: setLeftPaneWidth } = useTabPaneBoundaries(activeTabUid);
-  const previousTopPaneHeight = useRef(null); // Store height before devtools opens

  // Not a recommended pattern here to have the child component
  // make a callback to set state, but treating this as an exception
  const docExplorerRef = useRef(null);
  const mainSectionRef = useRef(null);
-
  const [schema, setSchema] = useState(null);
  const [showGqlDocs, setShowGqlDocs] = useState(false);
-  const onSchemaLoad = useCallback((schema) => setSchema(schema), []);
-  const toggleDocs = useCallback(() => setShowGqlDocs((prev) => !prev), []);
-
-  const handleGqlClickReference = useCallback((reference) => {
+  const onSchemaLoad = (schema) => setSchema(schema);
+  const toggleDocs = () => setShowGqlDocs((showGqlDocs) => !showGqlDocs);
+  const handleGqlClickReference = (reference) => {
    if (docExplorerRef.current) {
      docExplorerRef.current.showDocForReference(reference);
    }
    if (!showGqlDocs) {
      setShowGqlDocs(true);
    }
-  }, []);
+  };

-  const handleMouseMove = useCallback((e) => {
-    if (!draggingRef.current || !mainSectionRef.current) return;
-
-    e.preventDefault();
-    const mainRect = mainSectionRef.current.getBoundingClientRect();
-
-    if (isVerticalLayoutRef.current) {
-      const newHeight = e.clientY - mainRect.top;
-      const maxHeight = mainRect.height - MIN_BOTTOM_PANE_HEIGHT;
-      // Clamp to bounds instead of returning early
-      const clampedHeight = Math.max(MIN_TOP_PANE_HEIGHT, Math.min(newHeight, maxHeight));
-      setTopPaneHeight(clampedHeight);
-    } else {
-      const newWidth = e.clientX - mainRect.left;
-      const maxWidth = mainRect.width - MIN_RIGHT_PANE_WIDTH;
-      // Clamp to bounds instead of returning early
-      const clampedWidth = Math.max(MIN_LEFT_PANE_WIDTH, Math.min(newWidth, maxWidth));
-      setLeftPaneWidth(clampedWidth);
-    }
-  }, [setTopPaneHeight, setLeftPaneWidth]);
-
-  const handleMouseUp = useCallback((e) => {
-    if (draggingRef.current) {
+  const handleMouseMove = (e) => {
+    if (dragging && mainSectionRef.current) {
+      e.preventDefault();
+      const mainRect = mainSectionRef.current.getBoundingClientRect();
+
+      if (isVerticalLayout) {
+        const newHeight = e.clientY - mainRect.top - dragOffset.current.y;
+        if (newHeight < MIN_TOP_PANE_HEIGHT || newHeight > mainRect.height - MIN_BOTTOM_PANE_HEIGHT) {
+          return;
+        }
+
+        setTopPaneHeight(newHeight);
+      } else {
+        const newWidth = e.clientX - mainRect.left - dragOffset.current.x;
+        if (newWidth < MIN_LEFT_PANE_WIDTH || newWidth > mainRect.width - MIN_RIGHT_PANE_WIDTH) {
+          return;
+        }
+
+        setLeftPaneWidth(newWidth);
+      }
+    }
+  };
+
+  const handleMouseUp = (e) => {
+    if (dragging) {
      e.preventDefault();
-      draggingRef.current = false;
      setDragging(false);
    }
-  }, []);
+  };

-  const handleDragbarMouseDown = useCallback((e) => {
+  const handleDragbarMouseDown = (e) => {
    e.preventDefault();
-    draggingRef.current = true;
    setDragging(true);
-  }, []);
+  };

  useEffect(() => {
    document.addEventListener('mouseup', handleMouseUp);
@@ -147,39 +134,13 @@ const RequestTabPanel = () => {
      document.removeEventListener('mouseup', handleMouseUp);
      document.removeEventListener('mousemove', handleMouseMove);
    };
-  }, [handleMouseUp, handleMouseMove]);
+  }, [dragging]);

-  useEffect(() => {
-    if (!isVerticalLayout) return;
-
-    if (isConsoleOpen) {
-      // Store current height before reducing
-      if (previousTopPaneHeight.current === null) {
-        previousTopPaneHeight.current = topPaneHeight;
-      }
-      // Reduce request pane height to make room for response pane when devtools is open
-      const maxHeight = 200;
-      if (topPaneHeight > maxHeight) {
-        setTopPaneHeight(maxHeight);
-      }
-    } else {
-      // Restore previous height when devtools closes
-      if (previousTopPaneHeight.current !== null) {
-        setTopPaneHeight(previousTopPaneHeight.current);
-        previousTopPaneHeight.current = null;
-      }
-    }
-  }, [isConsoleOpen, isVerticalLayout]);
-
-  if (!activeTabUid || !focusedTab) {
+  if (!activeTabUid) {
    return <WorkspaceHome />;
  }

-  if (focusedTab.type === 'global-environment-settings') {
-    return <GlobalEnvironmentSettings />;
-  }
-
-  if (!focusedTab.uid || !focusedTab.collectionUid) {
+  if (!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) {
    return <div className="pb-4 px-4">An error occurred!</div>;
  }

@@ -230,10 +191,6 @@ const RequestTabPanel = () => {
    return <SecuritySettings collection={collection} />;
  }

-  if (focusedTab.type === 'environment-settings') {
-    return <EnvironmentSettings collection={collection} />;
-  }
-
  if (!item || !item.uid) {
    return <RequestNotFound itemUid={activeTabUid} />;
  }
@@ -247,6 +204,8 @@ const RequestTabPanel = () => {
  }

  const handleRun = async () => {
+    const isGrpcRequest = item?.type === 'grpc-request';
+    const isWsRequest = item?.type === 'ws-request';
    const request = item.draft ? item.draft.request : item.request;

    if (isGrpcRequest && !request.url) {
@@ -277,60 +236,7 @@ const RequestTabPanel = () => {
    }
  };

-  const renderQueryUrl = () => {
-    if (isGrpcRequest) {
-      return <GrpcQueryUrl item={item} collection={collection} handleRun={handleRun} />;
-    }
-    if (isWsRequest) {
-      return <WsQueryUrl item={item} collection={collection} handleRun={handleRun} />;
-    }
-    return <QueryUrl item={item} collection={collection} handleRun={handleRun} />;
-  };
-
-  const renderRequestPane = () => {
-    switch (item.type) {
-      case 'graphql-request':
-        return (
-          <GraphQLRequestPane
-            item={item}
-            collection={collection}
-            onSchemaLoad={onSchemaLoad}
-            toggleDocs={toggleDocs}
-            handleGqlClickReference={handleGqlClickReference}
-          />
-        );
-      case 'http-request':
-        return <HttpRequestPane item={item} collection={collection} />;
-      case 'grpc-request':
-        return <GrpcRequestPane item={item} collection={collection} handleRun={handleRun} />;
-      case 'ws-request':
-        return <WSRequestPane item={item} collection={collection} handleRun={handleRun} />;
-      default:
-        return null;
-    }
-  };
-
-  const renderResponsePane = () => {
-    switch (item.type) {
-      case 'grpc-request':
-        return <GrpcResponsePane item={item} collection={collection} response={item.response} />;
-      case 'ws-request':
-        return <WSResponsePane item={item} collection={collection} response={item.response} />;
-      default:
-        return <ResponsePane item={item} collection={collection} response={item.response} />;
-    }
-  };
-
-  const requestPaneStyle = isVerticalLayout
-    ? {
-        height: `${Math.max(topPaneHeight, MIN_TOP_PANE_HEIGHT)}px`,
-        minHeight: `${MIN_TOP_PANE_HEIGHT}px`,
-        width: '100%'
-      }
-    : {
-        width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`
-      };
-
+  // TODO: reaper, improve selection of panes
  return (
    <StyledWrapper
      className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''} ${
@@ -338,15 +244,48 @@ const RequestTabPanel = () => {
      }`}
    >
      <div className="pt-3 pb-3 px-4">
-        {renderQueryUrl()}
+        {
+          isGrpcRequest
+            ? <GrpcQueryUrl item={item} collection={collection} handleRun={handleRun} />
+            : isWsRequest
+              ? <WsQueryUrl item={item} collection={collection} handleRun={handleRun} />
+              : <QueryUrl item={item} collection={collection} handleRun={handleRun} />
+        }
      </div>
      <section ref={mainSectionRef} className={`main flex ${isVerticalLayout ? 'flex-col' : ''} flex-grow pb-4 relative overflow-auto`}>
        <section className="request-pane">
          <div
            className="px-4 h-full"
-            style={requestPaneStyle}
+            style={isVerticalLayout ? {
+              height: `${Math.max(topPaneHeight, MIN_TOP_PANE_HEIGHT)}px`,
+              minHeight: `${MIN_TOP_PANE_HEIGHT}px`,
+              width: '100%'
+
+            } : {
+              width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`
+            }}
          >
-            {renderRequestPane()}
+            {item.type === 'graphql-request' ? (
+              <GraphQLRequestPane
+                item={item}
+                collection={collection}
+                onSchemaLoad={onSchemaLoad}
+                toggleDocs={toggleDocs}
+                handleGqlClickReference={handleGqlClickReference}
+              />
+            ) : null}
+
+            {item.type === 'http-request' ? (
+              <HttpRequestPane item={item} collection={collection} />
+            ) : null}
+
+            {isGrpcRequest ? (
+              <GrpcRequestPane item={item} collection={collection} handleRun={handleRun} />
+            ) : null}
+
+            {isWsRequest ? (
+              <WSRequestPane item={item} collection={collection} handleRun={handleRun} />
+            ) : null}
          </div>
        </section>

@@ -362,7 +301,25 @@ const RequestTabPanel = () => {
        </div>

        <section className="response-pane flex-grow overflow-x-auto">
-          {renderResponsePane()}
+          {item.type === 'grpc-request' ? (
+            <GrpcResponsePane
+              item={item}
+              collection={collection}
+              response={item.response}
+            />
+          ) : item.type === 'ws-request' ? (
+            <WSResponsePane
+              item={item}
+              collection={collection}
+              response={item.response}
+            />
+          ) : (
+            <ResponsePane
+              item={item}
+              collection={collection}
+              response={item.response}
+            />
+          )}
        </section>
      </section>

--- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
@@ -7,7 +7,6 @@ import { useDispatch } from 'react-redux';
 import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';
 import JsSandboxMode from 'components/SecuritySettings/JsSandboxMode';
-import ActionIcon from 'ui/ActionIcon';

 const CollectionToolBar = ({ collection }) => {
  const dispatch = useDispatch();
@@ -44,31 +43,33 @@ const CollectionToolBar = ({ collection }) => {

  return (
    <StyledWrapper>
-      <div className="flex items-center justify-between gap-2 py-2 px-4">
-        <button className="flex items-center cursor-pointer hover:underline bg-transparent border-none p-0 text-inherit" onClick={viewCollectionSettings}>
+      <div className="flex items-center py-2 px-4">
+        <div className="flex flex-1 items-center cursor-pointer hover:underline" onClick={viewCollectionSettings}>
          <IconBox size={18} strokeWidth={1.5} />
          <span className="ml-2 mr-4 font-medium">{collection?.name}</span>
-        </button>
-        <div className="flex flex-grow gap-1 items-center justify-end">
-          <ToolHint text="Runner" toolhintId="RunnerToolhintId" place="bottom">
-            <ActionIcon onClick={handleRun} aria-label="Runner" size="sm">
-              <IconRun size={16} strokeWidth={1.5} />
-            </ActionIcon>
-          </ToolHint>
-          <ToolHint text="Variables" toolhintId="VariablesToolhintId">
-            <ActionIcon onClick={viewVariables} aria-label="Variables" size="sm">
-              <IconEye size={16} strokeWidth={1.5} />
-            </ActionIcon>
-          </ToolHint>
-          <ToolHint text="Collection Settings" toolhintId="CollectionSettingsToolhintId">
-            <ActionIcon onClick={viewCollectionSettings} aria-label="Collection Settings" size="sm">
-              <IconSettings size={16} strokeWidth={1.5} />
-            </ActionIcon>
-          </ToolHint>
-          <ToolHint text="Javascript Sandbox" toolhintId="JavascriptSandboxToolhintId" place="bottom">
-            <JsSandboxMode collection={collection} />
-          </ToolHint>
-          <span className="ml-2">
+        </div>
+        <div className="flex flex-3 items-center justify-end">
+          <span className="mr-3">
+            <ToolHint text="Runner" toolhintId="RunnnerToolhintId" place="bottom">
+              <IconRun className="cursor-pointer" size={16} strokeWidth={1.5} onClick={handleRun} />
+            </ToolHint>
+          </span>
+          <span className="mr-3">
+            <ToolHint text="Variables" toolhintId="VariablesToolhintId">
+              <IconEye className="cursor-pointer" size={16} strokeWidth={1.5} onClick={viewVariables} />
+            </ToolHint>
+          </span>
+          <span className="mr-3">
+            <ToolHint text="Collection Settings" toolhintId="CollectionSettingsToolhintId">
+              <IconSettings className="cursor-pointer" size={16} strokeWidth={1.5} onClick={viewCollectionSettings} />
+            </ToolHint>
+          </span>
+          <span className="mr-2">
+            <ToolHint text="Javascript Sandbox" toolhintId="JavascriptSandboxToolhintId" place="bottom">
+              <JsSandboxMode collection={collection} />
+            </ToolHint>
+          </span>
+          <span>
            <EnvironmentSelector collection={collection} />
          </span>
        </div>
--- a/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
@@ -115,8 +115,8 @@ const ExampleTab = ({ tab, collection }) => {
          }
        }}
      >
-        <ExampleIcon size={14} color="currentColor" className="example-icon flex-shrink-0" />
-        <span className="tab-name ml-1" title={example.name}>
+        <ExampleIcon size={14} color="currentColor" className="mr-1.5 text-gray-500 flex-shrink-0" />
+        <span className="tab-name" title={example.name}>
          {example.name}
        </span>
      </div>
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js
@@ -15,6 +15,7 @@ const StyledWrapper = styled.div.attrs((props) => ({
  right: 0;
  top: 0;
  padding-right: 4px;
+  z-index: 3;
  
  background-image: linear-gradient(
    90deg,
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
-import GradientCloseButton from './GradientCloseButton';
+import CloseTabIcon from './CloseTabIcon';

 const RequestTabNotFound = ({ handleCloseClick }) => {
  const [showErrorMessage, setShowErrorMessage] = useState(false);
@@ -28,7 +28,9 @@ const RequestTabNotFound = ({ handleCloseClick }) => {
          </>
        ) : null}
      </div>
-      <GradientCloseButton onClick={handleCloseClick} hasChanges={true} />
+      <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
+        <CloseTabIcon />
+      </div>
    </>
  );
 };
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import GradientCloseButton from './GradientCloseButton';
-import { IconVariable, IconSettings, IconRun, IconFolder, IconShieldLock, IconDatabase, IconWorld } from '@tabler/icons';
+import { IconVariable, IconSettings, IconRun, IconFolder, IconShieldLock } from '@tabler/icons';

 const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDraft }) => {
  const getTabInfo = (type, tabName) => {
@@ -53,22 +53,6 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra
          </>
        );
      }
-      case 'environment-settings': {
-        return (
-          <>
-            <IconDatabase size={14} strokeWidth={1.5} className="text-yellow-600 flex-shrink-0" />
-            <span className="ml-1 tab-name">Environments</span>
-          </>
-        );
-      }
-      case 'global-environment-settings': {
-        return (
-          <>
-            <IconWorld size={14} strokeWidth={1.5} className="text-yellow-600 flex-shrink-0" />
-            <span className="ml-1 tab-name">Global Environments</span>
-          </>
-        );
-      }
    }
  };

--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -28,10 +28,6 @@ const StyledWrapper = styled.div`
    // so that the name does not cutoff when italicized
    padding-right: 2px;
  }
-
-  .example-icon {
-    color: ${(props) => props.theme.requestTabs.example.iconColor};
-  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -1,19 +1,16 @@
 import React, { useCallback, useState, useRef, Fragment, useMemo, useEffect } from 'react';
 import get from 'lodash/get';
 import { closeTabs, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
-import { saveRequest, saveCollectionRoot, saveFolderRoot, saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { deleteRequestDraft, deleteCollectionDraft, deleteFolderDraft, clearEnvironmentsDraft } from 'providers/ReduxStore/slices/collections';
-import { clearGlobalEnvironmentDraft } from 'providers/ReduxStore/slices/global-environments';
-import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import { saveRequest, saveCollectionRoot, saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { deleteRequestDraft, deleteCollectionDraft, deleteFolderDraft } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import darkTheme from 'themes/dark';
 import lightTheme from 'themes/light';
 import { findItemInCollection, hasRequestChanges } from 'utils/collections';
 import ConfirmRequestClose from './ConfirmRequestClose';
 import ConfirmCollectionClose from './ConfirmCollectionClose';
 import ConfirmFolderClose from './ConfirmFolderClose';
-import ConfirmCloseEnvironment from 'components/Environments/ConfirmCloseEnvironment';
 import RequestTabNotFound from './RequestTabNotFound';
 import SpecialTab from './SpecialTab';
 import StyledWrapper from './StyledWrapper';
@@ -24,7 +21,6 @@ import GradientCloseButton from './GradientCloseButton';
 import { flattenItems } from 'utils/collections/index';
 import { closeWsConnection } from 'utils/network/index';
 import ExampleTab from '../ExampleTab';
-import toast from 'react-hot-toast';

 const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid, hasOverflow, setHasOverflow }) => {
  const dispatch = useDispatch();
@@ -35,8 +31,6 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
  const [showConfirmClose, setShowConfirmClose] = useState(false);
  const [showConfirmCollectionClose, setShowConfirmCollectionClose] = useState(false);
  const [showConfirmFolderClose, setShowConfirmFolderClose] = useState(false);
-  const [showConfirmEnvironmentClose, setShowConfirmEnvironmentClose] = useState(false);
-  const [showConfirmGlobalEnvironmentClose, setShowConfirmGlobalEnvironmentClose] = useState(false);

  const dropdownTippyRef = useRef();
  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
@@ -57,10 +51,6 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
    }
  }, [item]);

-  const hasChanges = useMemo(() => hasRequestChanges(item), [item]);
-
-  const isWS = item?.type === 'ws-request';
-
  useEffect(() => {
    if (!item || !tabNameRef.current || !setHasOverflow) return;

@@ -158,31 +148,8 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi

  const hasDraft = tab.type === 'collection-settings' && collection?.draft;
  const hasFolderDraft = tab.type === 'folder-settings' && folder?.draft;
-  const hasEnvironmentDraft = tab.type === 'environment-settings' && collection?.environmentsDraft;
-  const globalEnvironmentDraft = useSelector((state) => state.globalEnvironments.globalEnvironmentDraft);
-  const hasGlobalEnvironmentDraft = tab.type === 'global-environment-settings' && globalEnvironmentDraft;

-  const handleCloseEnvironmentSettings = (event) => {
-    if (!collection?.environmentsDraft) {
-      return handleCloseClick(event);
-    }
-
-    event.stopPropagation();
-    event.preventDefault();
-    setShowConfirmEnvironmentClose(true);
-  };
-
-  const handleCloseGlobalEnvironmentSettings = (event) => {
-    if (!globalEnvironmentDraft) {
-      return handleCloseClick(event);
-    }
-
-    event.stopPropagation();
-    event.preventDefault();
-    setShowConfirmGlobalEnvironmentClose(true);
-  };
-
-  if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'security-settings', 'environment-settings', 'global-environment-settings'].includes(tab.type)) {
+  if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
    return (
      <StyledWrapper
        className={`flex items-center justify-between tab-container px-2 ${tab.preview ? 'italic' : ''}`}
@@ -243,70 +210,12 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
            }}
          />
        )}
-        {showConfirmEnvironmentClose && tab.type === 'environment-settings' && (
-          <ConfirmCloseEnvironment
-            isGlobal={false}
-            onCancel={() => setShowConfirmEnvironmentClose(false)}
-            onCloseWithoutSave={() => {
-              dispatch(clearEnvironmentsDraft({ collectionUid: collection.uid }));
-              dispatch(closeTabs({ tabUids: [tab.uid] }));
-              setShowConfirmEnvironmentClose(false);
-            }}
-            onSaveAndClose={() => {
-              const draft = collection.environmentsDraft;
-              if (draft?.environmentUid && draft?.variables) {
-                dispatch(saveEnvironment(draft.variables, draft.environmentUid, collection.uid))
-                  .then(() => {
-                    dispatch(clearEnvironmentsDraft({ collectionUid: collection.uid }));
-                    dispatch(closeTabs({ tabUids: [tab.uid] }));
-                    setShowConfirmEnvironmentClose(false);
-                    toast.success('Environment saved');
-                  })
-                  .catch((err) => {
-                    console.log('err', err);
-                    toast.error('Failed to save environment');
-                  });
-              }
-            }}
-          />
-        )}
-        {showConfirmGlobalEnvironmentClose && tab.type === 'global-environment-settings' && (
-          <ConfirmCloseEnvironment
-            isGlobal={true}
-            onCancel={() => setShowConfirmGlobalEnvironmentClose(false)}
-            onCloseWithoutSave={() => {
-              dispatch(clearGlobalEnvironmentDraft());
-              dispatch(closeTabs({ tabUids: [tab.uid] }));
-              setShowConfirmGlobalEnvironmentClose(false);
-            }}
-            onSaveAndClose={() => {
-              const draft = globalEnvironmentDraft;
-              if (draft?.environmentUid && draft?.variables) {
-                dispatch(saveGlobalEnvironment({ variables: draft.variables, environmentUid: draft.environmentUid }))
-                  .then(() => {
-                    dispatch(clearGlobalEnvironmentDraft());
-                    dispatch(closeTabs({ tabUids: [tab.uid] }));
-                    setShowConfirmGlobalEnvironmentClose(false);
-                    toast.success('Global environment saved');
-                  })
-                  .catch((err) => {
-                    console.log('err', err);
-                    toast.error('Failed to save global environment');
-                  });
-              }
-            }}
-          />
-        )}
        {tab.type === 'folder-settings' && !folder ? (
          <RequestTabNotFound handleCloseClick={handleCloseClick} />
        ) : tab.type === 'folder-settings' ? (
          <SpecialTab handleCloseClick={handleCloseFolderSettings} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} tabName={folder?.name} hasDraft={hasFolderDraft} />
        ) : tab.type === 'collection-settings' ? (
          <SpecialTab handleCloseClick={handleCloseCollectionSettings} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} tabName={collection?.name} hasDraft={hasDraft} />
-        ) : tab.type === 'environment-settings' ? (
-          <SpecialTab handleCloseClick={handleCloseEnvironmentSettings} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} hasDraft={hasEnvironmentDraft} />
-        ) : tab.type === 'global-environment-settings' ? (
-          <SpecialTab handleCloseClick={handleCloseGlobalEnvironmentSettings} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} hasDraft={hasGlobalEnvironmentDraft} />
        ) : (
          <SpecialTab handleCloseClick={handleCloseClick} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} />
        )}
@@ -327,6 +236,8 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
    );
  }

+  const hasChanges = useMemo(() => hasRequestChanges(item), [item]);
+
  if (!item) {
    return (
      <StyledWrapper
@@ -345,6 +256,35 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
    );
  }

+  const isWS = item.type === 'ws-request';
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (tabNameRef.current && setHasOverflow) {
+        const hasOverflow = tabNameRef.current.scrollWidth > tabNameRef.current.clientWidth;
+        if (lastOverflowStateRef.current !== hasOverflow) {
+          lastOverflowStateRef.current = hasOverflow;
+          setHasOverflow(hasOverflow);
+        }
+      }
+    };
+
+    const timeoutId = setTimeout(checkOverflow, 0);
+
+    const resizeObserver = new ResizeObserver(() => {
+      checkOverflow();
+    });
+
+    if (tabNameRef.current) {
+      resizeObserver.observe(tabNameRef.current);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+      resizeObserver.disconnect();
+    };
+  }, [item.name, method, setHasOverflow]);
+
  return (
    <StyledWrapper className="flex items-center justify-between tab-container px-2">
      {showConfirmClose && (
--- a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
@@ -38,6 +38,7 @@ const Wrapper = styled.div`
    display: flex;
    align-items: flex-end;
    position: relative;
+    z-index: 1;

    &::-webkit-scrollbar {
      display: none;
@@ -76,7 +77,7 @@ const Wrapper = styled.div`
      }

      &:nth-last-child(1) {
-        margin-right: 4px;
+        margin-right: 10px;
      }

      &.has-overflow:not(:hover) .tab-name {
--- a/packages/bruno-app/src/components/RequestTabs/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/index.js
@@ -83,6 +83,10 @@ const RequestTabs = () => {
    return null;
  }

+  if (!activeTab) {
+    return <StyledWrapper>Something went wrong!</StyledWrapper>;
+  }
+
  const effectiveSidebarWidth = sidebarCollapsed ? 0 : leftSidebarWidth;
  const maxTablistWidth = screenWidth - effectiveSidebarWidth - 150;

--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js
@@ -14,34 +14,36 @@ const ResponseExampleBodyMode = ({ item, collection, exampleUid, body, bodyMode,
      // Initialize the new body structure based on the selected mode
      let newBody = { mode: value };

-      // Initialize body content based on selected mode
-      switch (value) {
-        case 'json':
-          newBody.json = body?.json || '';
-          break;
-        case 'text':
-          newBody.text = body?.text || '';
-          break;
-        case 'xml':
-          newBody.xml = body?.xml || '';
-          break;
-        case 'sparql':
-          newBody.sparql = body?.sparql || '';
-          break;
-        case 'formUrlEncoded':
-          newBody.formUrlEncoded = body?.formUrlEncoded || [];
-          break;
-        case 'multipartForm':
-          newBody.multipartForm = body?.multipartForm || [];
-          break;
-        case 'file':
-          newBody.file = Array.isArray(body?.file) ? body.file : [];
-          break;
-        case 'none':
-          // No additional data needed for 'none' mode
-          break;
-        default:
-          break;
+      // Preserve existing data for the new mode if it exists
+      if (body) {
+        switch (value) {
+          case 'json':
+            newBody.json = body.json || '';
+            break;
+          case 'text':
+            newBody.text = body.text || '';
+            break;
+          case 'xml':
+            newBody.xml = body.xml || '';
+            break;
+          case 'sparql':
+            newBody.sparql = body.sparql || '';
+            break;
+          case 'formUrlEncoded':
+            newBody.formUrlEncoded = body.formUrlEncoded || [];
+            break;
+          case 'multipartForm':
+            newBody.multipartForm = body.multipartForm || [];
+            break;
+          case 'file':
+            newBody.file = body.file || { name: '', data: '' };
+            break;
+          case 'none':
+            // No additional data needed for 'none' mode
+            break;
+          default:
+            break;
+        }
      }

      dispatch(updateResponseExampleRequest({
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
@@ -1,14 +1,16 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { get } from 'lodash';
+import React, { useState, useMemo } from 'react';
+import { get, cloneDeep } from 'lodash';
+import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { updateResponseExampleFileBodyParams } from 'providers/ReduxStore/slices/collections';
 import mime from 'mime-types';
 import path from 'utils/common/path';
-import EditableTable from 'components/EditableTable';
 import StyledWrapper from './StyledWrapper';
 import FilePickerEditor from 'components/FilePickerEditor/index';
 import SingleLineEditor from 'components/SingleLineEditor/index';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable';
 import RadioButton from 'components/RadioButton';

 const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = false }) => {
@@ -23,8 +25,16 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
    return Array.isArray(_params) ? _params : [];
  }, [item.draft, item.examples, item, exampleUid]);

-  const handleParamsChange = useCallback((updatedParams) => {
-    if (!editMode) return;
+  const [enabledFileUid, setEnableFileUid] = useState(params.length > 0 ? params[0].uid : '');
+
+  const addFile = () => {
+    const newParam = {
+      filePath: '',
+      contentType: '',
+      selected: true
+    };
+
+    const updatedParams = [...params, newParam];

    dispatch(updateResponseExampleFileBodyParams({
      itemUid: item.uid,
@@ -32,70 +42,75 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
      exampleUid: exampleUid,
      params: updatedParams
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid]);
+  };

-  const handleFilePathChange = useCallback((row, newFilePath, onChange) => {
+  const handleParamChange = (e, _param, type) => {
    if (!editMode) return;

-    const currentParams = params || [];
-    const existingParam = currentParams.find((p) => p.uid === row.uid);
-
-    let updatedParams;
-    if (existingParam) {
-      // Update existing param
-      updatedParams = currentParams.map((p) => {
-        if (p.uid === row.uid) {
-          const updated = { ...p, filePath: newFilePath };
-          // Auto-detect content type from file extension
-          if (newFilePath) {
-            const contentType = mime.contentType(path.extname(newFilePath));
-            updated.contentType = contentType || '';
-          } else {
-            updated.contentType = '';
-          }
-          return updated;
-        }
-        return p;
-      });
-    } else {
-      // Add new param (from EditableTable's empty row)
-      // Deselect all existing params and select the new one
-      const deselectedParams = currentParams.map((p) => ({ ...p, selected: false }));
-      const newParam = {
-        uid: row.uid,
-        filePath: newFilePath,
-        contentType: '',
-        selected: true
-      };
-      // Auto-detect content type from file extension
-      if (newFilePath) {
-        const contentType = mime.contentType(path.extname(newFilePath));
-        newParam.contentType = contentType || '';
+    const param = cloneDeep(_param);
+    switch (type) {
+      case 'filePath': {
+        param.filePath = e.target.filePath;
+        // Auto-detect content type from file extension using mime library (same as updateFile)
+        const contentType = mime.contentType(path.extname(e.target.filePath));
+        param.contentType = contentType || '';
+        break;
+      }
+      case 'contentType': {
+        param.contentType = e.target.contentType;
+        break;
+      }
+      case 'selected': {
+        // When a file is selected, deselect all others and select this one
+        const updatedParams = params.map((p) => ({
+          ...p,
+          selected: p.uid === param.uid ? e.target.checked : false
+        }));
+
+        dispatch(updateResponseExampleFileBodyParams({
+          itemUid: item.uid,
+          collectionUid: collection.uid,
+          exampleUid: exampleUid,
+          params: updatedParams
+        }));
+
+        // Update the enabled file UID state
+        if (e.target.checked) {
+          setEnableFileUid(param.uid);
+        }
+        return; // Early return since we already dispatched
      }
-      updatedParams = [...deselectedParams, newParam];
    }

-    handleParamsChange(updatedParams);
-  }, [editMode, params, handleParamsChange]);
+    const updatedParams = params.map((p) => p.uid === param.uid ? param : p);

-  const handleSelectedChange = useCallback((row, checked) => {
+    dispatch(updateResponseExampleFileBodyParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleRemoveParams = (param) => {
    if (!editMode) return;

-    // When a file is selected, deselect all others and select this one
-    const updatedParams = params.map((p) => ({
-      ...p,
-      selected: p.uid === row.uid ? checked : false
+    const updatedParams = params.filter((p) => p.uid !== param.uid);
+
+    dispatch(updateResponseExampleFileBodyParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
    }));
+  };

-    handleParamsChange(updatedParams);
-  }, [editMode, params, handleParamsChange]);
-
-  const handleParamDrag = useCallback(({ updateReorderedItem }) => {
+  const handleParamDrag = ({ updateReorderedItem }) => {
    if (!editMode) return;

    const reorderedParams = updateReorderedItem.map((uid) => {
      return params.find((p) => p.uid === uid);
-    }).filter(Boolean);
+    });

    dispatch(updateResponseExampleFileBodyParams({
      itemUid: item.uid,
@@ -103,73 +118,6 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
      exampleUid: exampleUid,
      params: reorderedParams
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid, params]);
-
-  const columns = [
-    {
-      key: 'filePath',
-      name: 'File',
-      isKeyField: true,
-      placeholder: 'File',
-      width: '50%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <FilePickerEditor
-          isSingleFilePicker={true}
-          value={value || ''}
-          onChange={(newPath) => handleFilePathChange(row, newPath, onChange)}
-          collection={collection}
-          readOnly={!editMode}
-        />
-      )
-    },
-    {
-      key: 'contentType',
-      name: 'Content-Type',
-      placeholder: 'Auto',
-      width: '30%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          className="flex items-center justify-center"
-          onSave={() => {}}
-          theme={storedTheme}
-          placeholder={isLastEmptyRow ? 'Auto' : ''}
-          value={value || ''}
-          onChange={onChange}
-          onRun={() => {}}
-          collection={collection}
-          readOnly={!editMode}
-        />
-      )
-    },
-    {
-      key: 'selected',
-      name: 'Selected',
-      width: '20%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow, rowIndex }) => (
-        <div className="flex items-center justify-center pl-4">
-          <RadioButton
-            key={row.uid}
-            id={`file-${row.uid}`}
-            name="selectedFile"
-            value={row.uid}
-            checked={row.selected}
-            onChange={(e) => handleSelectedChange(row, e.target.checked)}
-            disabled={!editMode}
-            className="mr-1 mousetrap"
-            dataTestId={`file-radio-button-${rowIndex}`}
-          />
-        </div>
-      )
-    }
-  ];
-
-  const defaultRow = {
-    filePath: '',
-    contentType: '',
-    selected: false
  };

  if (params.length === 0 && !editMode) {
@@ -178,16 +126,95 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals

  return (
    <StyledWrapper className="w-full mt-4">
-      <EditableTable
-        columns={columns}
-        rows={params || []}
-        onChange={handleParamsChange}
-        defaultRow={defaultRow}
-        reorderable={editMode}
-        onReorder={handleParamDrag}
-        showAddRow={editMode}
-        showCheckbox={false}
-      />
+      <Table
+        headers={[
+          { name: 'File', accessor: 'file', width: '50%' },
+          { name: 'Content-Type', accessor: 'contentType', width: '30%' },
+          { name: 'Selected', accessor: 'selected', width: '20%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleParamDrag}>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid} data-uid={param.uid}>
+                    <td className="flex relative">
+                      <FilePickerEditor
+                        isSingleFilePicker={true}
+                        value={param.filePath}
+                        onChange={editMode ? (path) =>
+                          handleParamChange({
+                            target: {
+                              filePath: path
+                            }
+                          },
+                          param,
+                          'filePath') : () => {}}
+                        collection={collection}
+                        readOnly={!editMode}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <SingleLineEditor
+                          className="flex items-center justify-center"
+                          onSave={() => {}}
+                          theme={storedTheme}
+                          placeholder="Auto"
+                          value={param.contentType}
+                          onChange={editMode ? (newValue) =>
+                            handleParamChange({
+                              target: {
+                                contentType: newValue
+                              }
+                            },
+                            param,
+                            'contentType') : () => {}}
+                          onRun={() => {}}
+                          collection={collection}
+                        />
+                      </div>
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <RadioButton
+                          key={param.uid}
+                          id={`file-${param.uid}`}
+                          name="selectedFile"
+                          value={param.uid}
+                          checked={enabledFileUid === param.uid || param.selected}
+                          onChange={editMode ? (e) => handleParamChange(e, param, 'selected') : () => {}}
+                          disabled={!editMode}
+                          className="mr-1 mousetrap"
+                          dataTestId={`file-radio-button-${index}`}
+                        />
+                        <button
+                          tabIndex="-1"
+                          onClick={() => handleRemoveParams(param)}
+                          className={`delete-button ${editMode ? 'edit-mode' : ''}`}
+                          disabled={!editMode}
+                        >
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action pr-2 py-3 select-none"
+            onClick={addFile}
+          >
+            + Add File
+          </button>
+        </div>
+      )}
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
@@ -1,11 +1,15 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { updateResponseExampleFormUrlEncodedParams } from 'providers/ReduxStore/slices/collections';
-import EditableTable from 'components/EditableTable';
 import MultiLineEditor from 'components/MultiLineEditor';
 import StyledWrapper from './StyledWrapper';
+import ReorderTable from 'components/ReorderTable/index';
+import Table from 'components/Table-v2';
+import Checkbox from 'components/Checkbox';

 const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, editMode = false }) => {
  const dispatch = useDispatch();
@@ -17,8 +21,14 @@ const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, edi
      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.formUrlEncoded || [];
  }, [item, exampleUid]);

-  const handleParamsChange = useCallback((updatedParams) => {
-    if (!editMode) return;
+  const addParam = () => {
+    const newParam = {
+      name: '',
+      value: '',
+      enabled: true
+    };
+
+    const updatedParams = [...params, newParam];

    dispatch(updateResponseExampleFormUrlEncodedParams({
      itemUid: item.uid,
@@ -26,58 +36,57 @@ const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, edi
      exampleUid: exampleUid,
      params: updatedParams
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid]);
+  };

-  const handleParamDrag = useCallback(({ updateReorderedItem }) => {
+  const handleParamChange = (e, _param, type) => {
    if (!editMode) return;

-    const reorderedParams = updateReorderedItem.map((uid) => {
-      return params.find((p) => p.uid === uid);
-    }).filter(Boolean);
+    const param = cloneDeep(_param);
+    switch (type) {
+      case 'name': {
+        param.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        param.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        param.enabled = e.target.checked;
+        break;
+      }
+    }
+
+    const updatedParams = params.map((p) => p.uid === param.uid ? param : p);

    dispatch(updateResponseExampleFormUrlEncodedParams({
      itemUid: item.uid,
      collectionUid: collection.uid,
      exampleUid: exampleUid,
-      params: reorderedParams
+      params: updatedParams
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid, params]);
+  };

-  const columns = [
-    {
-      key: 'name',
-      name: 'Key',
-      isKeyField: true,
-      placeholder: 'Key',
-      width: '40%',
-      readOnly: !editMode
-    },
-    {
-      key: 'value',
-      name: 'Value',
-      placeholder: 'Value',
-      width: '60%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <MultiLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={() => {}}
-          onChange={onChange}
-          allowNewlines={true}
-          onRun={() => {}}
-          collection={collection}
-          item={item}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
-        />
-      )
-    }
-  ];
+  const handleRemoveParams = (param) => {
+    const updatedParams = params.filter((p) => p.uid !== param.uid);

-  const defaultRow = {
-    name: '',
-    value: '',
-    enabled: true
+    dispatch(updateResponseExampleFormUrlEncodedParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamDrag = ({ updateReorderedItem }) => {
+    const updatedParams = updateReorderedItem(params);
+
+    dispatch(updateResponseExampleFormUrlEncodedParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
  };

  if (params.length === 0 && !editMode) {
@@ -86,15 +95,84 @@ const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, edi

  return (
    <StyledWrapper className="w-full mt-4">
-      <EditableTable
-        columns={columns}
-        rows={params || []}
-        onChange={handleParamsChange}
-        defaultRow={defaultRow}
-        reorderable={editMode}
-        onReorder={handleParamDrag}
-        showAddRow={editMode}
-      />
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '60%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleParamDrag}>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid} data-uid={param.uid}>
+                    <td className="flex relative">
+                      <div className="flex items-center justify-center mr-3">
+                        <Checkbox
+                          checked={param.enabled === true}
+                          disabled={!editMode}
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                          dataTestId={`urlencoded-param-checkbox-${index}`}
+                        />
+                      </div>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={param.name}
+                        className="mousetrap"
+                        onChange={editMode ? (e) => handleParamChange(e, param, 'name') : () => {}}
+                        disabled={!editMode}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <MultiLineEditor
+                          value={param.value}
+                          theme={storedTheme}
+                          onSave={() => {}}
+                          onChange={editMode ? (newValue) =>
+                            handleParamChange({
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value') : () => {}}
+                          allowNewlines={true}
+                          onRun={() => {}}
+                          collection={collection}
+                          item={item}
+                        />
+                        <button
+                          tabIndex="-1"
+                          onClick={() => handleRemoveParams(param)}
+                          className={`delete-button ${editMode ? 'edit-mode' : ''}`}
+                          disabled={!editMode}
+                        >
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={addParam}
+          >
+            + Add Param
+          </button>
+        </div>
+      )}
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
@@ -1,11 +1,14 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
+import { IconTrash } from '@tabler/icons';
 import get from 'lodash/get';
-import { moveResponseExampleRequestHeader, setResponseExampleRequestHeaders } from 'providers/ReduxStore/slices/collections';
-import EditableTable from 'components/EditableTable';
+import { addResponseExampleRequestHeader, updateResponseExampleRequestHeader, deleteResponseExampleRequestHeader, moveResponseExampleRequestHeader, setResponseExampleRequestHeaders } from 'providers/ReduxStore/slices/collections';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable';
 import SingleLineEditor from 'components/SingleLineEditor';
 import BulkEditor from 'components/BulkEditor';
+import Checkbox from 'components/Checkbox';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import StyledWrapper from './StyledWrapper';
@@ -23,18 +26,55 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.headers || [];
  }, [item, exampleUid]);

-  const handleHeadersChange = useCallback((updatedHeaders) => {
+  const handleAddHeader = () => {
    if (editMode) {
-      dispatch(setResponseExampleRequestHeaders({
+      dispatch(addResponseExampleRequestHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid
+      }));
+    }
+  };
+
+  const handleHeaderValueChange = (e, header, type) => {
+    if (editMode) {
+      const updatedHeader = { ...header };
+      switch (type) {
+        case 'name': {
+          updatedHeader.name = e.target.value;
+          break;
+        }
+        case 'value': {
+          updatedHeader.value = e.target.value;
+          break;
+        }
+        case 'enabled': {
+          updatedHeader.enabled = e.target.checked;
+          break;
+        }
+      }
+
+      dispatch(updateResponseExampleRequestHeader({
        itemUid: item.uid,
        collectionUid: collection.uid,
        exampleUid: exampleUid,
-        headers: updatedHeaders
+        header: updatedHeader
      }));
    }
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid]);
+  };

-  const handleHeaderDrag = useCallback(({ updateReorderedItem }) => {
+  const handleRemoveHeader = (header) => {
+    if (editMode) {
+      dispatch(deleteResponseExampleRequestHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        headerUid: header.uid
+      }));
+    }
+  };
+
+  const handleHeaderDrag = ({ updateReorderedItem }) => {
    if (editMode) {
      dispatch(moveResponseExampleRequestHeader({
        itemUid: item.uid,
@@ -43,7 +83,7 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
        updateReorderedItem
      }));
    }
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid]);
+  };

  const toggleBulkEditMode = () => {
    setIsBulkEditMode(!isBulkEditMode);
@@ -60,58 +100,6 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
    }
  };

-  const columns = [
-    {
-      key: 'name',
-      name: 'Key',
-      isKeyField: true,
-      placeholder: 'Key',
-      width: '40%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          readOnly={!editMode}
-          theme={storedTheme}
-          onSave={() => {}}
-          onChange={(newValue) => onChange(newValue.replace(/[\r\n]/g, ''))}
-          autocomplete={headerAutoCompleteList}
-          onRun={() => {}}
-          collection={collection}
-          placeholder={isLastEmptyRow ? 'Key' : ''}
-        />
-      )
-    },
-    {
-      key: 'value',
-      name: 'Value',
-      placeholder: 'Value',
-      width: '60%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          readOnly={!editMode}
-          theme={storedTheme}
-          onSave={() => {}}
-          onChange={onChange}
-          onRun={() => {}}
-          autocomplete={MimeTypes}
-          allowNewlines={true}
-          collection={collection}
-          item={item}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
-        />
-      )
-    }
-  ];
-
-  const defaultRow = {
-    name: '',
-    value: '',
-    enabled: true
-  };
-
  if (isBulkEditMode && editMode) {
    return (
      <StyledWrapper className="w-full mt-3">
@@ -131,17 +119,85 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
  return (
    <StyledWrapper className="w-full mt-4">
      <div className="mb-1 title text-xs font-bold">Headers</div>
-      <EditableTable
-        columns={columns}
-        rows={headers || []}
-        onChange={handleHeadersChange}
-        defaultRow={defaultRow}
-        reorderable={editMode}
-        onReorder={handleHeaderDrag}
-        showAddRow={editMode}
-      />
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '60%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleHeaderDrag}>
+          {headers && headers.length
+            ? headers.map((header, index) => (
+                <tr key={header.uid} data-uid={header.uid}>
+                  <td className="flex relative">
+                    <div className="flex items-center justify-center mr-3">
+                      <Checkbox
+                        checked={header.enabled === true}
+                        disabled={!editMode}
+                        onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                        dataTestId={`header-checkbox-${index}`}
+                      />
+                    </div>
+                    <SingleLineEditor
+                      value={header.name || ''}
+                      readOnly={!editMode}
+                      theme={storedTheme}
+                      onSave={() => {}}
+                      onChange={(newValue) =>
+                        handleHeaderValueChange({
+                          target: {
+                            value: newValue
+                          }
+                        },
+                        header,
+                        'name')}
+                      autocomplete={headerAutoCompleteList}
+                      onRun={() => {}}
+                      collection={collection}
+                    />
+                  </td>
+                  <td>
+                    <div className="flex items-center justify-center pl-4">
+                      <SingleLineEditor
+                        value={header.value || ''}
+                        readOnly={!editMode}
+                        theme={storedTheme}
+                        onSave={() => {}}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange({
+                            target: {
+                              value: newValue
+                            }
+                          },
+                          header,
+                          'value')}
+                        onRun={() => {}}
+                        autocomplete={MimeTypes}
+                        allowNewlines={true}
+                        collection={collection}
+                        item={item}
+                      />
+                      {editMode && (
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)} className="delete-button">
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            : null}
+        </ReorderTable>
+      </Table>
+
      {editMode && (
-        <div className="flex justify-end mt-2">
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={handleAddHeader}
+          >
+            + Add Header
+          </button>
          <button
            className="btn-action text-link select-none"
            onClick={toggleBulkEditMode}
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
@@ -1,17 +1,19 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { IconUpload, IconX, IconFile } from '@tabler/icons';
 import { updateResponseExampleMultipartFormParams } from 'providers/ReduxStore/slices/collections';
-import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import mime from 'mime-types';
 import path from 'utils/common/path';
-import EditableTable from 'components/EditableTable';
 import MultiLineEditor from 'components/MultiLineEditor';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
-import { isWindowsOS } from 'utils/common/platform';
+import FilePickerEditor from 'components/FilePickerEditor';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable/index';
+import Checkbox from 'components/Checkbox';

 const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, editMode = false }) => {
  const dispatch = useDispatch();
@@ -23,8 +25,16 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.multipartForm || [];
  }, [item, exampleUid]);

-  const handleParamsChange = useCallback((updatedParams) => {
-    if (!editMode) return;
+  const addParam = () => {
+    const newParam = {
+      name: '',
+      value: '',
+      contentType: '',
+      enabled: true,
+      type: 'text'
+    };
+
+    const updatedParams = [...params, newParam];

    dispatch(updateResponseExampleMultipartFormParams({
      itemUid: item.uid,
@@ -32,100 +42,78 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
      exampleUid: exampleUid,
      params: updatedParams
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid]);
+  };

-  const handleBrowseFiles = useCallback((row, onChange) => {
+  const addFile = () => {
+    const newParam = {
+      name: '',
+      value: [],
+      contentType: '',
+      enabled: true,
+      type: 'file'
+    };
+
+    const updatedParams = [...params, newParam];
+
+    dispatch(updateResponseExampleMultipartFormParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamChange = (e, _param, type) => {
    if (!editMode) return;

-    dispatch(browseFiles())
-      .then((filePaths) => {
-        const processedPaths = filePaths.map((filePath) => {
-          const collectionDir = collection.pathname;
-          if (filePath.startsWith(collectionDir)) {
-            return path.relative(collectionDir, filePath);
-          }
-          return filePath;
-        });
-
-        const currentParams = params || [];
-        const existingParam = currentParams.find((p) => p.uid === row.uid);
-
-        let updatedParams;
-        if (existingParam) {
-          // Update existing param
-          updatedParams = currentParams.map((p) => {
-            if (p.uid === row.uid) {
-              const updated = { ...p, type: 'file', value: processedPaths };
-              // Auto-detect content type from first file
-              if (processedPaths.length > 0) {
-                const contentType = mime.contentType(path.extname(processedPaths[0]));
-                updated.contentType = contentType || '';
-              }
-              return updated;
-            }
-            return p;
-          });
-        } else {
-          // Add new param (from EditableTable's empty row)
-          const newParam = {
-            uid: row.uid,
-            name: row.name || '',
-            type: 'file',
-            value: processedPaths,
-            contentType: '',
-            enabled: true
-          };
-          // Auto-detect content type from first file
-          if (processedPaths.length > 0) {
-            const contentType = mime.contentType(path.extname(processedPaths[0]));
-            newParam.contentType = contentType || '';
-          }
-          updatedParams = [...currentParams, newParam];
+    const param = cloneDeep(_param);
+    switch (type) {
+      case 'name': {
+        param.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        param.value = e.target.value;
+        if (param.type === 'file' && e.target.value) {
+          const contentType = mime.contentType(path.extname(e.target.value));
+          param.contentType = contentType || '';
        }
-
-        handleParamsChange(updatedParams);
-      })
-      .catch((error) => {
-        console.error(error);
-      });
-  }, [editMode, dispatch, collection.pathname, params, handleParamsChange]);
-
-  const handleClearFile = useCallback((row) => {
-    if (!editMode) return;
-
-    const currentParams = params || [];
-    const existingParam = currentParams.find((p) => p.uid === row.uid);
-
-    if (existingParam) {
-      const updatedParams = currentParams.map((p) => {
-        if (p.uid === row.uid) {
-          return { ...p, type: 'text', value: '' };
-        }
-        return p;
-      });
-      handleParamsChange(updatedParams);
+        break;
+      }
+      case 'contentType': {
+        param.contentType = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        param.enabled = e.target.checked;
+        break;
+      }
    }
-  }, [editMode, params, handleParamsChange]);

-  const handleValueChange = useCallback((row, newValue, onChange) => {
+    const updatedParams = params.map((p) => p.uid === param.uid ? param : p);
+
+    dispatch(updateResponseExampleMultipartFormParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleRemoveParams = (param) => {
    if (!editMode) return;

-    const currentParams = params || [];
-    const existingParam = currentParams.find((p) => p.uid === row.uid);
-    if (existingParam) {
-      const updatedParams = currentParams.map((p) => {
-        if (p.uid === row.uid) {
-          return { ...p, type: 'text', value: newValue };
-        }
-        return p;
-      });
-      handleParamsChange(updatedParams);
-    } else {
-      onChange(newValue);
-    }
-  }, [editMode, params, handleParamsChange]);
+    const updatedParams = params.filter((p) => p.uid !== param.uid);

-  const handleParamDrag = useCallback(({ updateReorderedItem }) => {
+    dispatch(updateResponseExampleMultipartFormParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamDrag = ({ updateReorderedItem }) => {
    if (!editMode) return;

    const reorderedParams = updateReorderedItem.map((uid) => {
@@ -138,117 +126,6 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
      exampleUid: exampleUid,
      params: reorderedParams
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid, params]);
-
-  const getFileName = (filePaths) => {
-    if (!filePaths || (Array.isArray(filePaths) && filePaths.length === 0)) {
-      return null;
-    }
-    const paths = Array.isArray(filePaths) ? filePaths : [filePaths];
-    const validPaths = paths.filter((v) => v != null && v !== '');
-    if (validPaths.length === 0) return null;
-
-    const separator = isWindowsOS() ? '\\' : '/';
-    if (validPaths.length === 1) {
-      return validPaths[0].split(separator).pop();
-    }
-    return `${validPaths.length} file(s)`;
-  };
-
-  const columns = [
-    {
-      key: 'name',
-      name: 'Key',
-      isKeyField: true,
-      placeholder: 'Key',
-      width: '30%',
-      readOnly: !editMode
-    },
-    {
-      key: 'value',
-      name: 'Value',
-      placeholder: 'Value',
-      width: '40%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => {
-        const isFile = row.type === 'file';
-        const fileName = isFile ? getFileName(value) : null;
-        const hasTextValue = !isFile && value && value.length > 0;
-
-        if (fileName) {
-          return (
-            <div className="flex items-center file-value-cell">
-              <IconFile size={16} className="text-muted mr-1" />
-              <span className="file-name flex-1 truncate" title={Array.isArray(value) ? value.join(', ') : value}>
-                {fileName}
-              </span>
-              <button
-                className="clear-file-btn ml-1"
-                onClick={() => handleClearFile(row)}
-                title="Remove file"
-              >
-                <IconX size={16} />
-              </button>
-            </div>
-          );
-        }
-
-        return (
-          <div className="flex items-center value-cell">
-            <div className="flex-1">
-              <MultiLineEditor
-                onSave={() => {}}
-                theme={storedTheme}
-                value={value || ''}
-                onChange={(newValue) => handleValueChange(row, newValue, onChange)}
-                onRun={() => {}}
-                allowNewlines={true}
-                collection={collection}
-                item={item}
-                readOnly={!editMode}
-                placeholder={isLastEmptyRow ? 'Value' : ''}
-              />
-            </div>
-            {!hasTextValue && !isLastEmptyRow && (
-              <button
-                className="upload-btn ml-1"
-                onClick={() => handleBrowseFiles(row, onChange)}
-                title="Select file"
-              >
-                <IconUpload size={16} />
-              </button>
-            )}
-          </div>
-        );
-      }
-    },
-    {
-      key: 'contentType',
-      name: 'Content-Type',
-      placeholder: 'Auto',
-      width: '30%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          onSave={() => {}}
-          theme={storedTheme}
-          placeholder={isLastEmptyRow ? 'Auto' : ''}
-          value={value || ''}
-          onChange={onChange}
-          onRun={() => {}}
-          collection={collection}
-          readOnly={!editMode}
-        />
-      )
-    }
-  ];
-
-  const defaultRow = {
-    name: '',
-    value: '',
-    contentType: '',
-    enabled: true,
-    type: 'text'
  };

  if (params.length === 0 && !editMode) {
@@ -257,15 +134,129 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit

  return (
    <StyledWrapper className="w-full mt-4">
-      <EditableTable
-        columns={columns}
-        rows={params || []}
-        onChange={handleParamsChange}
-        defaultRow={defaultRow}
-        reorderable={editMode}
-        onReorder={handleParamDrag}
-        showAddRow={editMode}
-      />
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '30%' },
+          { name: 'Value', accessor: 'value', width: '40%' },
+          { name: 'Content-Type', accessor: 'content-type', width: '30%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleParamDrag}>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid} className="w-full" data-uid={param.uid}>
+                    <td className="flex relative">
+                      <div className="flex items-center justify-center mr-3">
+                        <Checkbox
+                          checked={param.enabled === true}
+                          disabled={!editMode}
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                          dataTestId={`multipart-form-param-checkbox-${index}`}
+                        />
+                      </div>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={param.name}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'name')}
+                        disabled={!editMode}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        {param.type === 'file' ? (
+                          <FilePickerEditor
+                            value={param.value}
+                            onChange={(newValue) =>
+                              handleParamChange({
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value')}
+                            collection={collection}
+                            readOnly={!editMode}
+                          />
+                        ) : (
+                          <MultiLineEditor
+                            onSave={() => {}}
+                            theme={storedTheme}
+                            value={param.value}
+                            onChange={(newValue) =>
+                              handleParamChange({
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value')}
+                            onRun={() => {}}
+                            allowNewlines={true}
+                            collection={collection}
+                            item={item}
+                            readOnly={!editMode}
+                          />
+                        )}
+                      </div>
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <SingleLineEditor
+                          onSave={() => {}}
+                          theme={storedTheme}
+                          placeholder="Auto"
+                          value={param.contentType}
+                          onChange={(newValue) =>
+                            handleParamChange({
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'contentType')}
+                          onRun={() => {}}
+                          collection={collection}
+                          readOnly={!editMode}
+                        />
+                        <button
+                          tabIndex="-1"
+                          onClick={() => handleRemoveParams(param)}
+                          className={`delete-button ${editMode ? 'edit-mode' : ''}`}
+                          disabled={!editMode}
+                        >
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={addParam}
+          >
+            + Add Param
+          </button>
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={addFile}
+          >
+            + Add File
+          </button>
+        </div>
+      )}
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js
@@ -43,17 +43,13 @@ const StyledWrapper = styled.div`
    tbody {
      tr {
        border-bottom: 1px solid ${(props) => props.theme.table.border};
+        
+        &:hover {
+          background: ${(props) => props.theme.plainGrid.hoverBg};
+        }
      }
    }
  }
-
-  /* Override styles for EditableTable to prevent uppercase transformation and ensure proper spacing */
-  /* The .table-container is from EditableTable component */
-  .table-container table thead td {
-    text-transform: none !important;
-    letter-spacing: normal !important;
-    padding: 8px 10px !important;
-  }
  

  tr {
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
@@ -1,11 +1,14 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
+import { IconTrash } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import get from 'lodash/get';
-import { moveResponseExampleParam, setResponseExampleParams } from 'providers/ReduxStore/slices/collections';
-import EditableTable from 'components/EditableTable';
+import { addResponseExampleParam, updateResponseExampleParam, deleteResponseExampleParam, moveResponseExampleParam, setResponseExampleParams } from 'providers/ReduxStore/slices/collections';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable';
 import SingleLineEditor from 'components/SingleLineEditor';
 import BulkEditor from 'components/BulkEditor';
+import Checkbox from 'components/Checkbox';
 import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';

@@ -23,22 +26,61 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
  const queryParams = params.filter((param) => param.type === 'query');
  const pathParams = params.filter((param) => param.type === 'path');

-  const handleQueryParamsChange = useCallback((updatedQueryParams) => {
+  const handleAddQueryParam = () => {
    if (!editMode) {
      return;
    }

-    // Merge updated query params with path params
-    const allParams = [...updatedQueryParams, ...pathParams];
-    dispatch(setResponseExampleParams({
+    dispatch(addResponseExampleParam({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid
+    }));
+  };
+
+  const handleQueryParamChange = (e, data, key) => {
+    if (!editMode) {
+      return;
+    }
+
+    const updatedParam = { ...data };
+    switch (key) {
+      case 'name': {
+        updatedParam.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        updatedParam.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        updatedParam.enabled = e.target.checked;
+        break;
+      }
+    }
+
+    dispatch(updateResponseExampleParam({
      itemUid: item.uid,
      collectionUid: collection.uid,
      exampleUid: exampleUid,
-      params: allParams
+      param: updatedParam
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid, pathParams]);
+  };

-  const handleQueryParamDrag = useCallback(({ updateReorderedItem }) => {
+  const handleRemoveQueryParam = (param) => {
+    if (!editMode) {
+      return;
+    }
+
+    dispatch(deleteResponseExampleParam({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      paramUid: param.uid
+    }));
+  };
+
+  const handleQueryParamDrag = ({ updateReorderedItem }) => {
    if (!editMode) {
      return;
    }
@@ -49,22 +91,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
      exampleUid: exampleUid,
      updateReorderedItem
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid]);
-
-  const handlePathParamsChange = useCallback((updatedPathParams) => {
-    if (!editMode) {
-      return;
-    }
-
-    // Merge updated path params with query params
-    const allParams = [...queryParams, ...updatedPathParams];
-    dispatch(setResponseExampleParams({
-      itemUid: item.uid,
-      collectionUid: collection.uid,
-      exampleUid: exampleUid,
-      params: allParams
-    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid, queryParams]);
+  };

  const toggleBulkEditMode = () => {
    setIsBulkEditMode(!isBulkEditMode);
@@ -75,13 +102,27 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
      return;
    }

-    // Merge bulk edited query params with path params
-    const allParams = [...newParams, ...pathParams];
    dispatch(setResponseExampleParams({
      itemUid: item.uid,
      collectionUid: collection.uid,
      exampleUid: exampleUid,
-      params: allParams
+      params: newParams
+    }));
+  };
+
+  const handlePathParamChange = (e, data) => {
+    if (!editMode) {
+      return;
+    }
+
+    const updatedParam = { ...data };
+    updatedParam.value = e.target.value;
+
+    dispatch(updateResponseExampleParam({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      param: updatedParam
    }));
  };

@@ -97,86 +138,6 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
    );
  }

-  const queryColumns = [
-    {
-      key: 'name',
-      name: 'Name',
-      isKeyField: true,
-      placeholder: 'Name',
-      width: '40%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={() => {}}
-          onChange={onChange}
-          onRun={() => {}}
-          collection={collection}
-          variablesAutocomplete={true}
-          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Name' : ''}
-        />
-      )
-    },
-    {
-      key: 'value',
-      name: 'Value',
-      placeholder: 'Value',
-      width: '60%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={() => {}}
-          onChange={onChange}
-          onRun={() => {}}
-          collection={collection}
-          variablesAutocomplete={true}
-          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
-        />
-      )
-    }
-  ];
-
-  const pathColumns = [
-    {
-      key: 'name',
-      name: 'Name',
-      readOnly: true,
-      width: '40%'
-    },
-    {
-      key: 'value',
-      name: 'Value',
-      placeholder: 'Value',
-      width: '60%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={() => {}}
-          onChange={onChange}
-          onRun={() => {}}
-          collection={collection}
-          variablesAutocomplete={true}
-          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
-        />
-      )
-    }
-  ];
-
-  const defaultQueryRow = {
-    name: '',
-    value: '',
-    enabled: true,
-    type: 'query'
-  };
-
  if (queryParams.length === 0 && pathParams.length === 0 && !editMode) {
    return null;
  }
@@ -184,17 +145,69 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
  return (
    <StyledWrapper className="w-full mt-4">
      <div className="mb-1 title text-xs font-bold">Query parameters</div>
-      <EditableTable
-        columns={queryColumns}
-        rows={queryParams || []}
-        onChange={handleQueryParamsChange}
-        defaultRow={defaultQueryRow}
-        reorderable={editMode}
-        onReorder={handleQueryParamDrag}
-        showAddRow={editMode}
-      />
+      <Table
+        headers={[
+          { name: 'Name', accessor: 'name', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '60%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleQueryParamDrag}>
+          {queryParams && queryParams.length
+            ? queryParams.map((param, index) => (
+                <tr key={param.uid} data-uid={param.uid}>
+                  <td className="flex relative">
+                    <div className="flex items-center justify-center mr-3">
+                      <Checkbox
+                        checked={param.enabled !== false}
+                        disabled={!editMode}
+                        onChange={(e) => handleQueryParamChange(e, param, 'enabled')}
+                        dataTestId={`query-param-checkbox-${index}`}
+                      />
+                    </div>
+                    <SingleLineEditor
+                      value={param.name || ''}
+                      theme={storedTheme}
+                      onSave={() => {}}
+                      onChange={(newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'name')}
+                      onRun={() => {}}
+                      collection={collection}
+                      variablesAutocomplete={true}
+                      readOnly={!editMode}
+                    />
+                  </td>
+                  <td>
+                    <div className="flex items-center justify-center pl-4">
+                      <SingleLineEditor
+                        value={param.value || ''}
+                        theme={storedTheme}
+                        onSave={() => {}}
+                        onChange={(newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'value')}
+                        onRun={() => {}}
+                        collection={collection}
+                        variablesAutocomplete={true}
+                        readOnly={!editMode}
+                      />
+                      {editMode && (
+                        <button tabIndex="-1" onClick={() => handleRemoveQueryParam(param)} className="delete-button">
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            : null}
+        </ReorderTable>
+      </Table>
+
      {editMode && (
-        <div className="flex justify-end mt-2">
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={handleAddQueryParam}
+          >
+            + Add Param
+          </button>
          <button
            className="btn-action text-link select-none"
            onClick={toggleBulkEditMode}
@@ -218,16 +231,37 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
              </div>
            </InfoTip>
          </div>
-          <EditableTable
-            columns={pathColumns}
-            rows={pathParams}
-            onChange={handlePathParamsChange}
-            defaultRow={{}}
-            showCheckbox={false}
-            showDelete={false}
-            showAddRow={false}
-            reorderable={false}
-          />
+          <Table
+            headers={[
+              { name: 'Name', accessor: 'name', width: '40%' },
+              { name: 'Value', accessor: 'value', width: '60%' }
+            ]}
+          >
+            {pathParams && pathParams.length
+              ? pathParams.map((path, index) => {
+                  return (
+                    <tr key={index} data-uid={path.uid}>
+                      <td>
+                        {path.name}
+                      </td>
+                      <td>
+                        <SingleLineEditor
+                          value={path.value}
+                          theme={storedTheme}
+                          onSave={() => {}}
+                          onChange={(newValue) => handlePathParamChange({ target: { value: newValue } }, path)}
+                          onRun={() => {}}
+                          collection={collection}
+                          variablesAutocomplete={true}
+                          readOnly={!editMode}
+                        />
+                      </td>
+                    </tr>
+                  );
+                })
+              : null}
+          </Table>
+          {pathParams.length === 0 && <div className="title pr-2 py-3 mt-2 text-xs">No path parameters defined</div>}
        </>
      )}

--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
@@ -1,10 +1,12 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
+import { IconTrash } from '@tabler/icons';
 import get from 'lodash/get';
-import { moveResponseExampleHeader, setResponseExampleHeaders, updateResponseExampleResponse } from 'providers/ReduxStore/slices/collections';
+import { addResponseExampleHeader, updateResponseExampleHeader, deleteResponseExampleHeader, moveResponseExampleHeader, setResponseExampleHeaders, updateResponseExampleResponse } from 'providers/ReduxStore/slices/collections';
 import { getBodyType } from 'utils/responseBodyProcessor';
-import EditableTable from 'components/EditableTable';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable';
 import SingleLineEditor from 'components/SingleLineEditor';
 import BulkEditor from 'components/BulkEditor';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
@@ -26,17 +28,45 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
    return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response || {};
  }, [item, exampleUid]);

-  const handleHeadersChange = useCallback((updatedHeaders) => {
+  const handleAddHeader = () => {
    if (!editMode) {
      return;
    }

-    // Check if content-type header was updated
-    const contentTypeHeader = updatedHeaders.find((h) => h.name?.toLowerCase() === 'content-type');
-    const oldContentTypeHeader = headers.find((h) => h.name?.toLowerCase() === 'content-type');
+    dispatch(addResponseExampleHeader({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid
+    }));
+  };

-    if (contentTypeHeader && oldContentTypeHeader && contentTypeHeader.value !== oldContentTypeHeader.value) {
-      const newContentType = contentTypeHeader.value?.toLowerCase() || '';
+  const handleHeaderValueChange = (e, header, type) => {
+    if (!editMode) {
+      return;
+    }
+
+    const updatedHeader = { ...header };
+    switch (type) {
+      case 'name': {
+        updatedHeader.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        updatedHeader.value = e.target.value;
+        break;
+      }
+    }
+
+    dispatch(updateResponseExampleHeader({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      header: updatedHeader
+    }));
+
+    // If content-type header is being updated, automatically update the body type
+    if (header.name?.toLowerCase() === 'content-type' && type === 'value') {
+      const newContentType = updatedHeader.value?.toLowerCase() || '';
      const newBodyType = getBodyType(newContentType);
      const currentBodyType = response.body?.type || 'text';

@@ -55,16 +85,22 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
        }));
      }
    }
+  };

-    dispatch(setResponseExampleHeaders({
+  const handleRemoveHeader = (header) => {
+    if (!editMode) {
+      return;
+    }
+
+    dispatch(deleteResponseExampleHeader({
      itemUid: item.uid,
      collectionUid: collection.uid,
      exampleUid: exampleUid,
-      headers: updatedHeaders
+      headerUid: header.uid
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid, headers, response]);
+  };

-  const handleHeaderDrag = useCallback(({ updateReorderedItem }) => {
+  const handleHeaderDrag = ({ updateReorderedItem }) => {
    if (!editMode) {
      return;
    }
@@ -75,7 +111,7 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
      exampleUid: exampleUid,
      updateReorderedItem
    }));
-  }, [editMode, dispatch, item.uid, collection.uid, exampleUid]);
+  };

  const toggleBulkEditMode = () => {
    setIsBulkEditMode(!isBulkEditMode);
@@ -116,71 +152,79 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
    );
  }

-  const columns = [
-    {
-      key: 'name',
-      name: 'Key',
-      isKeyField: true,
-      placeholder: 'Key',
-      width: '40%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={() => {}}
-          onChange={(newValue) => onChange(newValue.replace(/[\r\n]/g, ''))}
-          autocomplete={headerAutoCompleteList}
-          onRun={() => {}}
-          collection={collection}
-          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Key' : ''}
-        />
-      )
-    },
-    {
-      key: 'value',
-      name: 'Value',
-      placeholder: 'Value',
-      width: '60%',
-      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
-        <SingleLineEditor
-          value={value || ''}
-          theme={storedTheme}
-          onSave={() => {}}
-          onChange={onChange}
-          onRun={() => {}}
-          autocomplete={MimeTypes}
-          allowNewlines={true}
-          collection={collection}
-          item={item}
-          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
-        />
-      )
-    }
-  ];
-
-  const defaultRow = {
-    name: '',
-    value: ''
-  };
-
  return (
    <StyledWrapper className="w-full px-4">
-      <EditableTable
-        columns={columns}
-        rows={headers || []}
-        onChange={handleHeadersChange}
-        defaultRow={defaultRow}
-        reorderable={editMode}
-        onReorder={handleHeaderDrag}
-        showAddRow={editMode}
-        showCheckbox={false}
-      />
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '60%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleHeaderDrag}>
+          {headers && headers.length
+            ? headers.map((header) => (
+                <tr key={header.uid} data-uid={header.uid}>
+                  <td className="flex relative">
+                    <SingleLineEditor
+                      value={header.name || ''}
+                      theme={storedTheme}
+                      onSave={() => {}}
+                      onChange={(newValue) =>
+                        handleHeaderValueChange({
+                          target: {
+                            value: newValue
+                          }
+                        },
+                        header,
+                        'name')}
+                      autocomplete={headerAutoCompleteList}
+                      onRun={() => {}}
+                      collection={collection}
+                      readOnly={!editMode}
+                    />
+                  </td>
+                  <td>
+                    <div className="flex items-center justify-center pl-4">
+                      <SingleLineEditor
+                        value={header.value || ''}
+                        theme={storedTheme}
+                        onSave={() => {}}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange({
+                            target: {
+                              value: newValue
+                            }
+                          },
+                          header,
+                          'value')}
+                        onRun={() => {}}
+                        autocomplete={MimeTypes}
+                        allowNewlines={true}
+                        collection={collection}
+                        item={item}
+                        readOnly={!editMode}
+                      />
+                      {editMode && (
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)} className="delete-button">
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            : null}
+        </ReorderTable>
+      </Table>
+
      {editMode && (
-        <div className="flex justify-end mt-2 flex-shrink-0">
+        <div className="flex justify-between mt-2 flex-shrink-0">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={handleAddHeader}
+          >
+            + Add Header
+          </button>
          <button
            className="btn-action text-link select-none"
            onClick={toggleBulkEditMode}
--- a/packages/bruno-app/src/components/ResponseExample/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/StyledWrapper.js
@@ -9,14 +9,6 @@ const StyledWrapper = styled.div`
    }
  }

-  .request-pane {
-    flex-shrink: 0;
-  }
-
-  .response-pane {
-    min-width: 0;
-  }
-
  div.dragbar-wrapper {
    display: flex;
    align-items: center;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
naman-bruno	90a4f8271e	fix	2025-12-12 01:00:55 +05:30
naman-bruno	0c62ead394	fixes	2025-12-12 00:21:56 +05:30
naman-bruno	b82b3088c1	fixes	2025-12-11 23:21:25 +05:30
naman-bruno	72dccdb8e3	fix	2025-12-11 22:50:32 +05:30
naman-bruno	013c128c78	fixes	2025-12-11 19:53:02 +05:30
naman-bruno	9053c47789	add: tests	2025-12-11 19:53:02 +05:30
naman-bruno	f3fd8a1ce0	fix: default workspace error checking	2025-12-11 19:53:02 +05:30