Fix: CLI-Tests Workflow lacks contents:read permission

fix graphql variables editor and tests editor height
Feat: Move-Collection with Drag-and-Drop (#3755 )
2026-07-03 09:28:33 +00:00 · 2025-02-11 15:23:12 +05:30 · 2025-02-10 21:42:53 +05:30 · 2025-02-10 20:46:42 +05:30 · 2025-02-10 18:55:20 +05:30 · 2025-02-10 18:55:11 +05:30
174 changed files with 4759 additions and 1155 deletions
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -5,14 +5,13 @@ on:
  pull_request:
    branches: [main]

-permissions:
-  contents: read
-
 jobs:
  unit-test:
    name: Unit Tests
    timeout-minutes: 60
    runs-on: ubuntu-latest
+    permissions:
+      contents: read
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
@@ -52,6 +51,10 @@ jobs:
  cli-test:
    name: CLI Tests
    runs-on: ubuntu-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: read
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
--- a/package-lock.json
+++ b/package-lock.json
@@ -8184,6 +8184,29 @@
        "proxy-from-env": "^1.1.0"
      }
    },
+    "node_modules/axios-ntlm": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/axios-ntlm/-/axios-ntlm-1.4.3.tgz",
+      "integrity": "sha512-CS6WE8chZpEDKxv4IFwr5zcG7InMC6Ek0aj2n2tHauBh+8KiYVC4qMn3N2arjR5tnyILQuTGlI0mc83hgWxS4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^1.7.9",
+        "des.js": "^1.1.0",
+        "dev-null": "^0.1.1",
+        "js-md4": "^0.3.2"
+      }
+    },
+    "node_modules/axios-ntlm/node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/babel-jest": {
      "version": "29.7.0",
      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -8563,7 +8586,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true,
      "license": "ISC"
    },
    "node_modules/boolean": {
@@ -9394,6 +9416,229 @@
        "node": "*"
      }
    },
+    "node_modules/cheerio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz",
+      "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "encoding-sniffer": "^0.2.0",
+        "htmlparser2": "^9.1.0",
+        "parse5": "^7.1.2",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^6.19.5",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.17"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/cheerio-select/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/cheerio/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/cheerio/node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
    "node_modules/chokidar": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -10560,7 +10805,6 @@
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">= 6"
@@ -10928,7 +11172,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
      "integrity": "sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "inherits": "^2.0.1",
@@ -10979,6 +11222,12 @@
      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
      "license": "MIT"
    },
+    "node_modules/dev-null": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dev-null/-/dev-null-0.1.1.tgz",
+      "integrity": "sha512-nMNZG0zfMgmdv8S5O0TM5cpwNbGKRGPCxVsr0SmA3NZZy9CYBbuNLL0PD3Acx9e5LIUgwONXtM9kM6RlawPxEQ==",
+      "license": "MIT"
+    },
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -11697,6 +11946,19 @@
        "iconv-lite": "^0.6.2"
      }
    },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz",
+      "integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
    "node_modules/end-of-stream": {
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -15466,6 +15728,12 @@
        "jiti": "bin/jiti.js"
      }
    },
+    "node_modules/js-md4": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
+      "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==",
+      "license": "MIT"
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -16722,7 +16990,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
-      "dev": true,
      "license": "ISC"
    },
    "node_modules/minimalistic-crypto-utils": {
@@ -17344,7 +17611,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
        "boolbase": "^1.0.0"
@@ -17749,6 +18015,106 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream/node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
    "node_modules/parseurl": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -21137,7 +21503,6 @@
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
-      "dev": true,
      "license": "ISC"
    },
    "node_modules/scheduler": {
@@ -23196,6 +23561,15 @@
      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
      "license": "MIT"
    },
+    "node_modules/undici": {
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.1.tgz",
+      "integrity": "sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
    "node_modules/undici-types": {
      "version": "6.20.0",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
@@ -23724,6 +24098,27 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/whatwg-url": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -23865,6 +24260,28 @@
        "node": ">= 16"
      }
    },
+    "node_modules/xml2js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
+      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/xml2js/node_modules/xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
    "node_modules/xmlbuilder": {
      "version": "15.1.1",
      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
@@ -23997,7 +24414,6 @@
        "@usebruno/common": "0.1.0",
        "@usebruno/graphql-docs": "0.1.0",
        "@usebruno/schema": "0.7.0",
-        "axios": "1.7.5",
        "classnames": "^2.3.1",
        "codemirror": "5.65.2",
        "codemirror-graphql": "2.1.1",
@@ -24011,7 +24427,7 @@
        "graphiql": "3.7.1",
        "graphql": "^16.6.0",
        "graphql-request": "^3.7.0",
-        "httpsnippet": "^3.0.6",
+        "httpsnippet": "^3.0.9",
        "i18next": "24.1.2",
        "idb": "^7.0.0",
        "immer": "^9.0.15",
@@ -24114,7 +24530,8 @@
        "@usebruno/lang": "0.12.0",
        "@usebruno/vm2": "^3.9.13",
        "aws4-axios": "^3.3.0",
-        "axios": "1.7.5",
+        "axios": "1.7.7",
+        "axios-ntlm": "^1.4.2",
        "chai": "^4.3.7",
        "chalk": "^3.0.0",
        "decomment": "^0.9.5",
@@ -24134,6 +24551,16 @@
        "bru": "bin/bru.js"
      }
    },
+    "packages/bruno-cli/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "packages/bruno-cli/node_modules/fs-extra": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -24165,7 +24592,7 @@
    },
    "packages/bruno-electron": {
      "name": "bruno",
-      "version": "v1.36.0",
+      "version": "v1.38.1",
      "dependencies": {
        "@aws-sdk/credential-providers": "3.658.1",
        "@usebruno/common": "0.1.0",
@@ -24176,7 +24603,8 @@
        "@usebruno/vm2": "^3.9.13",
        "about-window": "^1.15.2",
        "aws4-axios": "^3.3.0",
-        "axios": "1.7.5",
+        "axios": "1.7.7",
+        "axios-ntlm": "^1.4.2",
        "chai": "^4.3.7",
        "chokidar": "^3.5.3",
        "content-disposition": "^0.5.4",
@@ -24212,6 +24640,17 @@
        "dmg-license": "^1.0.11"
      }
    },
+    "packages/bruno-electron/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "packages/bruno-electron/node_modules/fs-extra": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -24306,10 +24745,11 @@
        "ajv": "^8.12.0",
        "ajv-formats": "^2.1.1",
        "atob": "^2.1.2",
-        "axios": "1.7.5",
+        "axios": "1.7.7",
        "btoa": "^1.2.1",
        "chai": "^4.3.7",
        "chai-string": "^1.5.0",
+        "cheerio": "^1.0.0",
        "crypto-js": "^4.1.1",
        "json-query": "^2.2.2",
        "lodash": "^4.17.21",
@@ -24319,7 +24759,8 @@
        "node-vault": "^0.10.2",
        "path": "^0.12.7",
        "quickjs-emscripten": "^0.29.2",
-        "uuid": "^9.0.0"
+        "uuid": "^9.0.0",
+        "xml2js": "^0.6.2"
      },
      "devDependencies": {
        "@rollup/plugin-commonjs": "^23.0.2",
@@ -24333,6 +24774,16 @@
        "@usebruno/vm2": "^3.9.13"
      }
    },
+    "packages/bruno-js/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "packages/bruno-js/node_modules/nanoid": {
      "version": "3.3.8",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -24410,7 +24861,7 @@
      "version": "0.0.1",
      "license": "MIT",
      "dependencies": {
-        "axios": "1.7.5",
+        "axios": "1.7.7",
        "body-parser": "1.20.3",
        "cookie-parser": "^1.4.6",
        "cors": "^2.8.5",
@@ -24424,6 +24875,16 @@
        "multer": "^1.4.5-lts.1"
      }
    },
+    "packages/bruno-tests/node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "packages/bruno-tests/node_modules/fast-xml-parser": {
      "version": "4.5.1",
      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.1.tgz",
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
    "build:web": "npm run build --workspace=packages/bruno-app",
    "prettier:web": "npm run prettier --workspace=packages/bruno-app",
    "dev:electron": "npm run dev --workspace=packages/bruno-electron",
+    "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
    "build:bruno-common": "npm run build --workspace=packages/bruno-common",
    "build:bruno-query": "npm run build --workspace=packages/bruno-query",
    "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -20,7 +20,6 @@
    "@usebruno/common": "0.1.0",
    "@usebruno/graphql-docs": "0.1.0",
    "@usebruno/schema": "0.7.0",
-    "axios": "1.7.5",
    "classnames": "^2.3.1",
    "codemirror": "5.65.2",
    "codemirror-graphql": "2.1.1",
@@ -34,7 +33,7 @@
    "graphiql": "3.7.1",
    "graphql": "^16.6.0",
    "graphql-request": "^3.7.0",
-    "httpsnippet": "^3.0.6",
+    "httpsnippet": "^3.0.9",
    "i18next": "24.1.2",
    "idb": "^7.0.0",
    "immer": "^9.0.15",
--- a/packages/bruno-app/rsbuild.config.mjs
+++ b/packages/bruno-app/rsbuild.config.mjs
@@ -24,4 +24,16 @@ export default defineConfig({
  html: {
    title: 'Bruno'
  },
+  tools: {
+    rspack: {
+      module: {
+        parser: {
+          javascript: {
+            // This loads the JavaScript contents from a library along with the main JavaScript bundle.
+            dynamicImportMode: "eager",
+          },
+        },
+      },
+    },
+  }
 });
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -8,6 +8,8 @@ const StyledWrapper = styled.div`
    font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
    line-break: anywhere;
    flex: 1 1 0;
+    display: flex;
+    flex-direction: column-reverse;
  }

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

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

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

 let CodeMirror;
 const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
@@ -74,13 +74,16 @@ if (!SERVER_RENDERED) {
    'bru.setNextRequest(requestName)',
    'req.disableParsingResponseJson()',
    'bru.getRequestVar(key)',
+    'bru.runRequest(requestPathName)',
+    'bru.getAssertionResults()',
+    'bru.getTestResults()',
    'bru.sleep(ms)',
    'bru.getGlobalEnvVar(key)',
    'bru.setGlobalEnvVar(key, value)',
    'bru.runner',
    'bru.runner.setNextRequest(requestName)',
    'bru.runner.skipRequest()',
-    'bru.runner.stopExecution()'
+    'bru.runner.stopExecution()',
  ];
  CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
    const cursor = editor.getCursor();
@@ -194,8 +197,20 @@ export default class CodeEditor extends React.Component {
        'Cmd-Y': 'foldAll',
        'Ctrl-I': 'unfoldAll',
        'Cmd-I': 'unfoldAll',
-        'Ctrl-/': 'toggleComment',
-        'Cmd-/': 'toggleComment'
+        'Ctrl-/': () => {
+          if (['application/ld+json', 'application/json'].includes(this.props.mode)) {
+            this.editor.toggleComment({ lineComment: '//', blockComment: '/*' });
+          } else {
+            this.editor.toggleComment();
+          }
+        },
+        'Cmd-/': () => {
+          if (['application/ld+json', 'application/json'].includes(this.props.mode)) {
+            this.editor.toggleComment({ lineComment: '//', blockComment: '/*' });
+          } else {
+            this.editor.toggleComment();
+          }
+        }
      },
      foldOptions: {
        widget: (from, to) => {
@@ -293,7 +308,7 @@ export default class CodeEditor extends React.Component {
    }

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

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

    defineCodeMirrorBrunoVariablesMode(variables, mode);
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
@@ -79,6 +79,15 @@ const AuthMode = ({ collection }) => {
          >
            Digest Auth
          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('ntlm');
+            }}
+          >
+            NTLM Auth
+          </div>          
          <div
            className="dropdown-item"
            onClick={() => {
@@ -86,7 +95,7 @@ const AuthMode = ({ collection }) => {
              onModeChange('oauth2');
            }}
          >
-            OAuth 2.0
+            Oauth2
          </div>
          <div
            className="dropdown-item"
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js
@@ -2,13 +2,13 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  label {
-    display: block;
    font-size: 0.8125rem;
  }

-  textarea {
-    height: fit-content;
+  .single-line-editor-wrapper {
    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
    border: solid 1px ${(props) => props.theme.input.border};
    background-color: ${(props) => props.theme.input.bg};
  }
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+
+
+
+
+const NTLMAuth = ({ collection }) => {
+
+
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const ntlmAuth = get(collection, 'root.request.auth.ntlm', {});
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+
+  const handleUsernameChange = (username) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        content: {
+          username: username,
+          password: ntlmAuth.password,
+          domain: ntlmAuth.domain
+
+        }
+      })
+    );
+  };
+
+  const handlePasswordChange = (password) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        content: {
+          username: ntlmAuth.username,
+          password: password,
+          domain: ntlmAuth.domain
+        }
+      })
+    );
+  };
+
+  const handleDomainChange = (domain) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        content: {
+          username: ntlmAuth.username,
+          password: ntlmAuth.password,
+          domain: domain
+        }
+      })
+    );
+  };  
+
+
+
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={ntlmAuth.username || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleUsernameChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={ntlmAuth.password || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handlePasswordChange(val)}
+          collection={collection}
+          isSecret={true}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Domain</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={ntlmAuth.domain || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleDomainChange(val)}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default NTLMAuth;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
@@ -7,6 +7,8 @@ import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/Redux
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+import { clearOauth2Cache } from 'utils/network/index';
+import toast from 'react-hot-toast';

 const OAuth2AuthorizationCode = ({ collection }) => {
  const dispatch = useDispatch();
@@ -62,6 +64,17 @@ const OAuth2AuthorizationCode = ({ collection }) => {
      })
    );
  };
+
+  const handleClearCache = (e) => {
+    clearOauth2Cache(collection?.uid)
+      .then(() => {
+        toast.success('cleared cache successfully');
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      });
+  };
+
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      {inputsConfig.map((input) => {
@@ -92,6 +105,14 @@ const OAuth2AuthorizationCode = ({ collection }) => {
          onChange={handlePKCEToggle}
        />
      </div>
+      <div className="flex flex-row gap-4">
+        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+          Get Access Token
+        </button>
+        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
+          Clear Cache
+        </button>
+      </div>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
@@ -60,6 +60,9 @@ const OAuth2ClientCredentials = ({ collection }) => {
          </div>
        );
      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
@@ -6,9 +6,9 @@ import SingleLineEditor from 'components/SingleLineEditor';
 import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';

-const OAuth2PasswordCredentials = ({ collection }) => {
+const OAuth2AuthorizationCode = ({ item, collection }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();

@@ -62,8 +62,11 @@ const OAuth2PasswordCredentials = ({ collection }) => {
          </div>
        );
      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
    </StyledWrapper>
  );
 };

-export default OAuth2PasswordCredentials;
+export default OAuth2AuthorizationCode;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js
@@ -5,7 +5,6 @@ import GrantTypeSelector from './GrantTypeSelector/index';
 import OAuth2PasswordCredentials from './PasswordCredentials/index';
 import OAuth2AuthorizationCode from './AuthorizationCode/index';
 import OAuth2ClientCredentials from './ClientCredentials/index';
-import CredentialsPreview from 'components/RequestPane/Auth/OAuth2/CredentialsPreview';

 const grantTypeComponentMap = (grantType, collection) => {
  switch (grantType) {
@@ -31,7 +30,6 @@ const OAuth2 = ({ collection }) => {
    <StyledWrapper className="mt-2 w-full">
      <GrantTypeSelector collection={collection} />
      {grantTypeComponentMap(oAuth?.grantType, collection)}
-      <CredentialsPreview collection={collection} />
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/StyledWrapper.js
@@ -1,5 +1,7 @@
 import styled from 'styled-components';

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

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

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

 const StyledWrapper = styled.div`
  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 240px);
-
    .CodeMirror-scroll {
      padding-bottom: 0px;
    }
  }
  .editing-mode {
    cursor: pointer;
-    color: ${(props) => props.theme.colors.text.yellow};
  }
 `;

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

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

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

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

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

 const Wrapper = styled.div`
+  max-width: 800px;
+
  table {
    width: 100%;
    border-collapse: collapse;
--- a/packages/bruno-app/src/components/CollectionSettings/Info/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Info/StyledWrapper.js
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  table {
-    td {
-      &:first-child {
-        width: 120px;
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Info/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Info/index.js
@@ -1,39 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-import { getTotalRequestCountInCollection } from 'utils/collections/';
-
-const Info = ({ collection }) => {
-  const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
-
-  return (
-    <StyledWrapper className="w-full flex flex-col h-full">
-      <div className="text-xs mb-4 text-muted">General information about the collection.</div>
-      <table className="w-full border-collapse">
-        <tbody>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Name&nbsp;:</td>
-            <td className="py-2 px-2">{collection.name}</td>
-          </tr>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Location&nbsp;:</td>
-            <td className="py-2 px-2 break-all">{collection.pathname}</td>
-          </tr>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Ignored files&nbsp;:</td>
-            <td className="py-2 px-2 break-all">{collection.brunoConfig?.ignore?.map((x) => `'${x}'`).join(', ')}</td>
-          </tr>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Environments&nbsp;:</td>
-            <td className="py-2 px-2">{collection.environments?.length || 0}</td>
-          </tr>
-          <tr className="">
-            <td className="py-2 px-2 text-right">Requests&nbsp;:</td>
-            <td className="py-2 px-2">{totalRequestsInCollection}</td>
-          </tr>
-        </tbody>
-      </table>
-    </StyledWrapper>
-  );
-};
-
-export default Info;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/Info/index.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { getTotalRequestCountInCollection } from 'utils/collections/';
+import { IconFolder, IconFileOff, IconWorld, IconApi } from '@tabler/icons';
+
+const Info = ({ collection }) => {
+  const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
+
+  return (
+    <div className="w-full flex flex-col h-fit">
+      <div className="rounded-lg py-6">
+        <div className="grid gap-6">
+          {/* Location Row */}
+          <div className="flex items-start">
+            <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
+            </div>
+            <div className="ml-4">
+              <div className="font-semibold text-sm">Location</div>
+              <div className="mt-1 text-sm text-muted break-all">
+                {collection.pathname}
+              </div>
+            </div>
+          </div>
+
+          {/* Environments Row */}
+          <div className="flex items-start">
+            <div className="flex-shrink-0 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
+            </div>
+            <div className="ml-4">
+              <div className="font-semibold text-sm">Environments</div>
+              <div className="mt-1 text-sm text-muted">
+                {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured
+              </div>
+            </div>
+          </div>
+
+          {/* Requests Row */}
+          <div className="flex items-start">
+            <div className="flex-shrink-0 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+              <IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
+            </div>
+            <div className="ml-4">
+              <div className="font-semibold text-sm">Requests</div>
+              <div className="mt-1 text-sm text-muted">
+                {totalRequestsInCollection} request{totalRequestsInCollection !== 1 ? 's' : ''} in collection
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Info;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  &.card {
+    background-color: ${(props) => props.theme.requestTabPanel.card.bg};
+
+    .title {
+      border-top: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+      border-left: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+      border-right: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+
+    .table {
+      thead {
+        background-color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.bg};
+        color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.color};
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/index.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { flattenItems } from "utils/collections";
+import { IconAlertTriangle } from '@tabler/icons';
+import StyledWrapper from "./StyledWrapper";
+
+const RequestsNotLoaded = ({ collection }) => {
+  const flattenedItems = flattenItems(collection.items);
+  const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading);
+
+  if (!itemsFailedLoading?.length) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="w-full card my-2">
+      <div className="flex items-center gap-2 px-3 py-2 title bg-yellow-50 dark:bg-yellow-900/20">
+        <IconAlertTriangle size={16} className="text-yellow-500" />
+        <span className="font-medium">Following requests were not loaded</span>
+      </div>
+      <table className="w-full border-collapse">
+        <thead>
+          <tr>
+            <th className="py-2 px-3 text-left font-medium">
+              Pathname
+            </th>
+            <th className="py-2 px-3 text-left font-medium">
+              Size
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {flattenedItems?.map((item, index) => (
+            item?.partial && !item?.loading ? (
+              <tr key={index}>
+                <td className="py-1.5 px-3">
+                  {item?.pathname?.split(`${collection?.pathname}/`)?.[1]}
+                </td>
+                <td className="py-1.5 px-3">
+                  {item?.size?.toFixed?.(2)}&nbsp;MB
+                </td>
+              </tr>
+            ) : null
+          ))}
+        </tbody>
+      </table>
+    </StyledWrapper>
+  );
+};
+
+export default RequestsNotLoaded;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/StyledWrapper.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .partial {
+    color: ${(props) => props.theme.colors.text.yellow};
+    opacity: 0.8;
+  }
+
+  .loading {
+    color: ${(props) => props.theme.colors.text.muted};
+    opacity: 0.8;
+  }
+
+  .completed {
+    color: ${(props) => props.theme.colors.text.green};
+    opacity: 0.8;
+  }
+
+  .failed {
+    color: ${(props) => props.theme.colors.text.danger};
+    opacity: 0.8;
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/index.js
@@ -0,0 +1,27 @@
+import StyledWrapper from "./StyledWrapper";
+import Docs from "../Docs";
+import Info from "./Info";
+import { IconBox } from '@tabler/icons';
+import RequestsNotLoaded from "./RequestsNotLoaded";
+
+const Overview = ({ collection }) => {
+  return (
+    <div className="h-full">
+      <div className="grid grid-cols-5 gap-4 h-full">
+        <div className="col-span-2">
+          <div className="text-xl font-semibold flex items-center gap-2">
+            <IconBox size={24} stroke={1.5} />
+            {collection?.name}
+          </div>
+          <Info collection={collection} />
+          <RequestsNotLoaded collection={collection} />
+        </div>
+        <div className="col-span-3">
+          <Docs collection={collection} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Overview;
--- a/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js
@@ -1,6 +1,8 @@
 import styled from 'styled-components';

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

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

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

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

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

 const StyledWrapper = styled.div`
+  max-width: 800px;
+
  div.title {
    color: var(--color-tab-inactive);
  }
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -12,12 +12,11 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
-import Docs from './Docs';
 import Presets from './Presets';
-import Info from './Info';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
 import DotIcon from 'components/Icons/Dot';
+import Overview from './Overview/index';

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

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

@@ -146,6 +142,9 @@ const CollectionSettings = ({ collection }) => {
  return (
    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
      <div className="flex flex-wrap items-center tabs" role="tablist">
+      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
+          Overview
+        </div>
        <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
          Headers
          {activeHeadersCount > 0 && <sup className="ml-1 font-medium">{activeHeadersCount}</sup>}
@@ -177,13 +176,6 @@ const CollectionSettings = ({ collection }) => {
          Client Certificates
          {clientCertConfig.length > 0 && <ContentIndicator />}
        </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
-          Docs
-          {hasDocs && <ContentIndicator />}
-        </div>
-        <div className={getTabClassname('info')} role="tab" onClick={() => setTab('info')}>
-          Info
-        </div>
      </div>
      <section className="mt-4 h-full">{getTabPanel(tab)}</section>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
  .editing-mode {
    cursor: pointer;
-    color: ${(props) => props.theme.colors.text.yellow};
  }
 `;

--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -78,7 +78,10 @@ const EnvironmentSelector = ({ collection }) => {
            <IconDatabaseOff size={18} strokeWidth={1.5} />
            <span className="ml-2">No Environment</span>
          </div>
-          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
+          <div className="dropdown-item border-top" onClick={() => {
+            handleSettingsIconClick();
+            dropdownTippyRef.current.hide();
+          }}>
            <div className="pr-2 text-gray-600">
              <IconSettings size={18} strokeWidth={1.5} />
            </div>
--- 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,8 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash, IconAlertCircle } from '@tabler/icons';
+import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCheck } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
+import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
@@ -13,7 +14,7 @@ import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions
 import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';

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

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

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

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

      <div>
-        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} />
+        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} onClose={onClose} />
      </div>
    </div>
  );
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -9,8 +9,9 @@ import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from './ConfirmSwitchEnv';
 import ToolHint from 'components/ToolHint';
+import { isEqual } from 'lodash';

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

  useEffect(() => {
    if (selectedEnvironment) {
+      const _selectedEnvironment = environments?.find(env => env?.uid === selectedEnvironment?.uid);
+      const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
+      if (hasSelectedEnvironmentChanged) {
+        setSelectedEnvironment(_selectedEnvironment);
+      }
      setOriginalEnvironmentVariables(selectedEnvironment.variables);
      return;
    }
@@ -135,6 +141,7 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
          collection={collection}
          setIsModified={setIsModified}
          originalEnvironmentVariables={originalEnvironmentVariables}
+          onClose={onClose}
        />
      </div>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -72,6 +72,7 @@ const EnvironmentSettings = ({ collection, onClose }) => {
        collection={collection}
        isModified={isModified}
        setIsModified={setIsModified}
+        onClose={onClose}
      />
    </Modal>
  );
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -6,10 +6,9 @@ import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
 import slash from 'utils/common/slash';

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

  const browse = () => {
-    dispatch(browseFiles())
+    dispatch(browseFiles([], [!isSingleFilePicker ? "multiSelections": ""]))
      .then((filePaths) => {
        // If file is in the collection's directory, then we use relative path
        // Otherwise, we use the absolute path
@@ -34,7 +33,7 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
          return filePath;
        });

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

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

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

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

-export default FilePickerEditor;
+export default FilePickerEditor;
--- a/packages/bruno-app/src/components/FolderSettings/Documentation/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Documentation/index.js
@@ -37,22 +37,25 @@ const Documentation = ({ collection, folder }) => {
  }

  return (
-    <StyledWrapper className="flex flex-col gap-y-1 h-full w-full relative">
-      <div className="editing-mode" role="tab" onClick={toggleViewMode}>
+    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
+      <div className="editing-mode flex justify-between items-center" role="tab" onClick={toggleViewMode}>
        {isEditing ? 'Preview' : 'Edit'}
      </div>

      {isEditing ? (
-        <CodeEditor
-          collection={collection}
-          theme={displayedTheme}
-          font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
-          value={docs || ''}
-          onEdit={onEdit}
-          onSave={onSave}
-          mode="application/text"
-        />
+        <div className="mt-2 flex-1 max-h-[70vh]">
+          <CodeEditor
+            collection={collection}
+            theme={displayedTheme}
+            value={docs || ''}
+            onEdit={onEdit}
+            onSave={onSave}
+            mode="application/text"
+          />
+          <button type="submit" className="submit btn btn-sm btn-secondary my-6" onClick={onSave}>
+            Save
+          </button>
+        </div>
      ) : (
        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
      )}
--- a/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
@@ -9,7 +9,6 @@ const StyledMarkdownBodyWrapper = styled.div`
    box-sizing: border-box;
    height: 100%;
    margin: 0 auto;
-    padding-top: 0.5rem;
    font-size: 0.875rem;

    h1 {
@@ -55,7 +54,7 @@ const StyledMarkdownBodyWrapper = styled.div`
      height: 1px;
      padding: 0;
      margin: 24px 0;
-      background-color: var(--color-border-default);
+      background-color: var(--color-sidebar-collection-item-active-indent-border);
      border: 0;
    }

@@ -80,12 +79,6 @@ const StyledMarkdownBodyWrapper = styled.div`
      }
    }
  }
-
-  @media (max-width: 767px) {
-    .markdown-body {
-      padding: 15px;
-    }
-  }
 `;

 export default StyledMarkdownBodyWrapper;
--- a/packages/bruno-app/src/components/Modal/index.js
+++ b/packages/bruno-app/src/components/Modal/index.js
@@ -62,7 +62,7 @@ const Modal = ({
  confirmText,
  cancelText,
  handleCancel,
-  handleConfirm,
+  handleConfirm = () => {},
  children,
  confirmDisabled,
  hideCancel,
@@ -92,7 +92,7 @@ const Modal = ({
  };

  useFocusTrap(modalRef);
-  
+
  const closeModal = (args) => {
    setIsClosing(true);
    setTimeout(() => handleCancel(args), closeModalFadeTimeout);
@@ -103,7 +103,7 @@ const Modal = ({
    return () => {
      document.removeEventListener('keydown', handleKeydown);
    };
-  }, [disableEscapeKey, document]);
+  }, [disableEscapeKey, document, handleConfirm]);

  let classes = 'bruno-modal';
  if (isClosing) {
--- a/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js
@@ -19,9 +19,8 @@ const StyledWrapper = styled.div`
      opacity: 0.5;
    }

-    .CodeMirror-scroll {
-      overflow: hidden !important;
-      ${'' /* padding-bottom: 50px !important; */}
+  .CodeMirror-scroll {
+      overflow: visible !important;
      position: relative;
      display: block;
      margin: 0px;
--- a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
@@ -146,19 +146,8 @@ const AssertionRow = ({
  const { operator, value } = parseAssertionOperator(assertion.value);

  return (
-    <tr key={assertion.uid}>
-      <td>
-        <input
-          type="text"
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-          value={assertion.name}
-          className="mousetrap"
-          onChange={(e) => handleAssertionChange(e, assertion, 'name')}
-        />
-      </td>
+    <>
+
      <td>
        <AssertionOperator
          operator={operator}
@@ -216,7 +205,7 @@ const AssertionRow = ({
          </button>
        </div>
      </td>
-    </tr>
+    </>
  );
 };

--- a/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
@@ -4,6 +4,7 @@ const Wrapper = styled.div`
  table {
    width: 100%;
    border-collapse: collapse;
+    font-weight: 600;
    table-layout: fixed;

    thead,
@@ -15,24 +16,15 @@ const Wrapper = styled.div`
      color: ${(props) => props.theme.table.thead.color};
      font-size: 0.8125rem;
      user-select: none;
-      font-weight: 600;
    }
    td {
      padding: 6px 10px;
-
-      &:nth-child(2) {
-        width: 130px;
      }

-      &:nth-child(4) {
-        width: 70px;
-      }
-
-      select {
+    select {
        background-color: transparent;
      }
    }
-  }

  .btn-add-assertion {
    font-size: 0.8125rem;
@@ -42,7 +34,8 @@ const Wrapper = styled.div`
    width: 100%;
    border: solid 1px transparent;
    outline: none !important;
-    background-color: inherit;
+    color: ${(props) => props.theme.table.input.color};
+    background: transparent;

    &:focus {
      outline: none !important;
--- a/packages/bruno-app/src/components/RequestPane/Assertions/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/index.js
@@ -6,6 +6,9 @@ import { addAssertion, updateAssertion, deleteAssertion } from 'providers/ReduxS
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import AssertionRow from './AssertionRow';
 import StyledWrapper from './StyledWrapper';
+import Table from 'components/Table/index';
+import ReorderTable from 'components/ReorderTable/index';
+import { moveAssertion } from 'providers/ReduxStore/slices/collections/index';

 const Assertions = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -57,21 +60,43 @@ const Assertions = ({ item, collection }) => {
    );
  };

+  const handleAssertionDrag = ({ updateReorderedItem }) => {
+    dispatch(
+      moveAssertion({
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        updateReorderedItem
+      })
+    );
+  };
+
  return (
    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Expr</td>
-            <td>Operator</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
+      <Table
+        headers={[
+          { name: 'Expr', accessor: 'expr', width: '30%' },
+          { name: 'Operator', accessor: 'operator', width: '120px' },
+          { name: 'Value', accessor: 'value', width: '30%' },
+          { name: '', accessor: '', width: '15%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleAssertionDrag}>
          {assertions && assertions.length
            ? assertions.map((assertion) => {
-                return (
+              return (
+                <tr key={assertion.uid} data-uid={assertion.uid}>
+                  <td className='flex relative'>
+                    <input
+                      type="text"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      value={assertion.name}
+                      className="mousetrap"
+                      onChange={(e) => handleAssertionChange(e, assertion, 'name')}
+                    />
+                  </td>
                  <AssertionRow
                    key={assertion.uid}
                    assertion={assertion}
@@ -82,11 +107,12 @@ const Assertions = ({ item, collection }) => {
                    onSave={onSave}
                    handleRun={handleRun}
                  />
-                );
-              })
+                </tr>
+              );
+            })
            : null}
-        </tbody>
-      </table>
+        </ReorderTable>
+      </Table>
      <button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
        + Add Assertion
      </button>
--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
@@ -70,6 +70,15 @@ const AuthMode = ({ item, collection }) => {
          >
            Digest Auth
          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef?.current?.hide();
+              onModeChange('ntlm');
+            }}
+          >
+            NTLM Auth
+          </div>
          <div
            className="dropdown-item"
            onClick={() => {
--- a/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const NTLMAuth = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const ntlmAuth = item.draft ? get(item, 'draft.request.auth.ntlm', {}) : get(item, 'request.auth.ntlm', {});
+
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const handleUsernameChange = (username) => {
+    dispatch(
+      updateAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          username: username,
+          password: ntlmAuth.password,
+          domain: ntlmAuth.domain
+
+        }
+      })
+    );
+  };
+
+  const handlePasswordChange = (password) => {
+    dispatch(
+      updateAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          username: ntlmAuth.username,
+          password: password,
+          domain: ntlmAuth.domain
+        }
+      })
+    );
+  };
+
+  const handleDomainChange = (domain) => {
+    dispatch(
+      updateAuth({
+        mode: 'ntlm',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          username: ntlmAuth.username,
+          password: ntlmAuth.password,
+          domain: domain
+        }
+      })
+    );
+  };  
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={ntlmAuth.username || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleUsernameChange(val)}
+          onRun={handleRun}
+          collection={collection}
+          item={item}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={ntlmAuth.password || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handlePasswordChange(val)}
+          onRun={handleRun}
+          collection={collection}
+          item={item}
+          isSecret={true}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Domain</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={ntlmAuth.domain || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleDomainChange(val)}
+          onRun={handleRun}
+          collection={collection}
+          item={item}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default NTLMAuth;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
@@ -7,6 +7,8 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
+import { clearOauth2Cache } from 'utils/network/index';
+import toast from 'react-hot-toast';

 const OAuth2AuthorizationCode = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -65,6 +67,16 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
    );
  };

+  const handleClearCache = (e) => {
+    clearOauth2Cache(collection?.uid)
+      .then(() => {
+        toast.success('cleared cache successfully');
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      });
+  };
+
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      {inputsConfig.map((input) => {
@@ -96,6 +108,14 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
          onChange={handlePKCEToggle}
        />
      </div>
+      <div className="flex flex-row gap-4">
+        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+          Get Access Token
+        </button>
+        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
+          Clear Cache
+        </button>
+      </div>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
@@ -62,6 +62,9 @@ const OAuth2ClientCredentials = ({ item, collection }) => {
          </div>
        );
      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js
@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { clearOauth2Cache, readOauth2CachedCredentials } from 'utils/network';
-import { sendCollectionOauth2Request, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-
-const CredentialsPreview = ({ item, collection }) => {
-  const oauth2CredentialsAreaRef = React.createRef();
-  const [oauth2Credentials, setOauth2Credentials] = useState({});
-
-  const dispatch = useDispatch();
-  useEffect(() => {
-    oauth2CredentialsAreaRef.current.value = oauth2Credentials;
-    readOauth2CachedCredentials(collection.uid).then((credentials) => setOauth2Credentials(credentials));
-  }, [oauth2CredentialsAreaRef]);
-
-  const handleRun = async () => {
-    if (item) {
-      dispatch(sendRequest(item, collection.uid));
-    } else {
-      dispatch(sendCollectionOauth2Request(collection.uid));
-    }
-  };
-
-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        readOauth2CachedCredentials(collection.uid).then((credentials) => {
-          setOauth2Credentials(credentials);
-          toast.success('Cleared cache successfully');
-        });
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
-  const sortedFields = () => {
-    const tokens = {};
-    const extras = {};
-    Object.entries(oauth2Credentials).forEach(([key, value]) => {
-      if (key.endsWith('_token')) {
-        tokens[key] = value;
-      } else {
-        extras[key] = value;
-      }
-    });
-    return { ...tokens, ...extras };
-  };
-
-  return (
-    <StyledWrapper className="flex flex-col w-full gap-1 mt-4">
-      <div className="credential-item-wrapper" ref={oauth2CredentialsAreaRef}>
-        {Object.entries(oauth2Credentials).length > 0 ? (
-          <>
-            <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-              Clear Access Token Cache
-            </button>
-            <details className="cursor-pointer flex flex-row w-full mt-2 gap-2">
-              <summary>Cached OAuth2 Credentials</summary>
-              {Object.entries(sortedFields()).map(([field, value]) => (
-                <div key={field}>
-                  <label className="text-xs">{field}</label>
-                  <textarea className="w-full h-24 p-2 text-xs border rounded" value={value} readOnly />
-                </div>
-              ))}
-            </details>
-          </>
-        ) : (
-          <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-            Get Access Token
-          </button>
-        )}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default CredentialsPreview;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -8,7 +8,7 @@ import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collection
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';

-const OAuth2PasswordCredentials = ({ item, collection }) => {
+const OAuth2AuthorizationCode = ({ item, collection }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();

@@ -64,8 +64,11 @@ const OAuth2PasswordCredentials = ({ item, collection }) => {
          </div>
        );
      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
    </StyledWrapper>
  );
 };

-export default OAuth2PasswordCredentials;
+export default OAuth2AuthorizationCode;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/index.js
@@ -5,7 +5,6 @@ import GrantTypeSelector from './GrantTypeSelector/index';
 import OAuth2PasswordCredentials from './PasswordCredentials/index';
 import OAuth2AuthorizationCode from './AuthorizationCode/index';
 import OAuth2ClientCredentials from './ClientCredentials/index';
-import CredentialsPreview from './CredentialsPreview';

 const grantTypeComponentMap = (grantType, item, collection) => {
  switch (grantType) {
@@ -31,7 +30,6 @@ const OAuth2 = ({ item, collection }) => {
    <StyledWrapper className="mt-2 w-full">
      <GrantTypeSelector item={item} collection={collection} />
      {grantTypeComponentMap(oAuth?.grantType, item, collection)}
-      <CredentialsPreview item={item} collection={collection} />
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Auth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/index.js
@@ -6,11 +6,12 @@ import BearerAuth from './BearerAuth';
 import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
 import WsseAuth from './WsseAuth';
+import NTLMAuth from './NTLMAuth';
+
 import ApiKeyAuth from './ApiKeyAuth';
 import StyledWrapper from './StyledWrapper';
-import { humanizeRequestAuthMode } from 'utils/collections';
+import { humanizeRequestAuthMode } from 'utils/collections/index';
 import OAuth2 from './OAuth2/index';
-import CredentialsPreview from './OAuth2/CredentialsPreview';

 const Auth = ({ item, collection }) => {
  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
@@ -32,6 +33,9 @@ const Auth = ({ item, collection }) => {
      case 'digest': {
        return <DigestAuth collection={collection} item={item} />;
      }
+      case 'ntlm': {
+        return <NTLMAuth collection={collection} item={item} />;
+      }      
      case 'oauth2': {
        return <OAuth2 collection={collection} item={item} />;
      }
@@ -43,13 +47,24 @@ const Auth = ({ item, collection }) => {
      }
      case 'inherit': {
        return (
-          <>
-            <div className="flex flex-row w-full mt-2 gap-2">
-              <div>Auth inherited from the Collection: </div>
-              <div className="inherit-mode-text">{humanizeRequestAuthMode(collectionAuth?.mode)}</div>
-            </div>
-            {collectionAuth?.mode === 'oauth2' && <CredentialsPreview item={item} collection={collection} />}
-          </>
+          <div className="flex flex-row w-full mt-2 gap-2">
+            {collectionAuth?.mode === 'oauth2' ? (
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-row gap-1">
+                  <div>Collection level auth is: </div>
+                  <div className="inherit-mode-text">{humanizeRequestAuthMode(collectionAuth?.mode)}</div>
+                </div>
+                <div className="text-sm opacity-50">
+                  Note: You need to use scripting to set the access token in the request headers.
+                </div>
+              </div>
+            ) : (
+              <>
+                <div>Auth inherited from the Collection: </div>
+                <div className="inherit-mode-text">{humanizeRequestAuthMode(collectionAuth?.mode)}</div>
+              </>
+            )}
+          </div>
        );
      }
    }
--- a/packages/bruno-app/src/components/RequestPane/FileBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/FileBody/StyledWrapper.js
@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(2) {
+        width: 45%;
+      }
+
+      &:nth-child(3) {
+        width: 25%;
+      }
+
+      &:nth-child(4) {
+        width: 70px;
+      }
+    }
+  }
+
+  .btn-add-param {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    color: ${(props) => props.theme.table.input.color};
+    background: transparent;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='radio'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/FileBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FileBody/index.js
@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from 'react';
+import { get, cloneDeep, isArray } from 'lodash';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { addFile as _addFile, updateFile, deleteFile } from 'providers/ReduxStore/slices/collections/index';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import FilePickerEditor from 'components/FilePickerEditor/index';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+
+const FileBody = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const params = item.draft ? get(item, 'draft.request.body.file') : get(item, 'request.body.file');
+
+  const [enabledFileUid, setEnableFileUid] = useState(params && params.length ? params[0].uid : '');
+
+  const addFile = () => {
+    dispatch(
+      _addFile({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+
+  const handleParamChange = (e, _param, type) => {
+    const param = cloneDeep(_param);
+    switch (type) {
+      case 'filePath': {
+        param.filePath = e.target.filePath;
+        param.contentType = "";
+        break;
+      }
+      case 'contentType': {
+        param.contentType = e.target.contentType;
+        break;
+      }
+      case 'selected': {
+        param.selected = e.target.selected;
+        setEnableFileUid(param.uid)
+        break;
+      }
+    }
+    dispatch(
+      updateFile({
+        param: param,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleRemoveParams = (param) => {
+    dispatch(
+      deleteFile({
+        paramUid: param.uid,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <table>
+        <thead>
+          <tr>
+            <td>
+              <div className="flex items-center justify-center">File</div>
+            </td>
+            <td>
+              <div className="flex items-center justify-center">Content-Type</div>
+            </td>
+            <td>
+              <div className="flex items-center justify-center">Selected</div>
+            </td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid}>
+                    <td>
+                      <FilePickerEditor
+                        isSingleFilePicker={true}
+                        value={param.filePath}
+                        onChange={(path) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                filePath: path
+                              }
+                            },
+                            param,
+                            'filePath'
+                          )
+                        }
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <SingleLineEditor
+                        className="flex items-center justify-center"
+                        onSave={onSave}
+                        theme={storedTheme}
+                        placeholder="Auto"
+                        value={param.contentType}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                contentType: newValue
+                              }
+                            },
+                            param,
+                            'contentType'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center">
+                        <input
+                          key={param.uid}
+                          type="radio"
+                          name="selected"
+                          checked={enabledFileUid === param.uid || param.selected}
+                          tabIndex="-1"
+                          className="mr-1 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'selected')}
+                        />
+                      </div>
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center">
+                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
+      <div>
+        <button className="btn-add-param text-link pr-2 pt-3 select-none" onClick={addFile}>
+          + Add File
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default FileBody;
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
@@ -19,16 +19,8 @@ const Wrapper = styled.div`
    }
    td {
      padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
      }
    }
-  }

  .btn-add-param {
    font-size: 0.8125rem;
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -7,11 +7,14 @@ import { useTheme } from 'providers/Theme';
 import {
  addFormUrlEncodedParam,
  updateFormUrlEncodedParam,
-  deleteFormUrlEncodedParam
+  deleteFormUrlEncodedParam,
+  moveFormUrlEncodedParam
 } from 'providers/ReduxStore/slices/collections';
 import MultiLineEditor from 'components/MultiLineEditor';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
+import ReorderTable from 'components/ReorderTable/index';
+import Table from 'components/Table/index';

 const FormUrlEncodedParams = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -64,75 +67,84 @@ const FormUrlEncodedParams = ({ item, collection }) => {
    );
  };

+  const handleParamDrag = ({ updateReorderedItem }) => {
+    dispatch(
+      moveFormUrlEncodedParam({
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        updateReorderedItem
+      })
+    );
+  };
+
  return (
    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Key</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '46%' },
+          { name: '', accessor: '', width: '14%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleParamDrag}>
          {params && params.length
            ? params.map((param, index) => {
-                return (
-                  <tr key={param.uid}>
-                    <td>
+              return (
+                <tr key={param.uid} data-uid={param.uid}>
+                  <td className='flex relative'>
+                    <input
+                      type="text"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      value={param.name}
+                      className="mousetrap"
+                      onChange={(e) => handleParamChange(e, param, 'name')}
+                    />
+                  </td>
+                  <td>
+                    <MultiLineEditor
+                      value={param.value}
+                      theme={storedTheme}
+                      onSave={onSave}
+                      onChange={(newValue) =>
+                        handleParamChange(
+                          {
+                            target: {
+                              value: newValue
+                            }
+                          },
+                          param,
+                          'value'
+                        )
+                      }
+                      allowNewlines={true}
+                      onRun={handleRun}
+                      collection={collection}
+                      item={item}
+                    />
+                  </td>
+                  <td>
+                    <div className="flex items-center">
                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={param.name}
-                        className="mousetrap"
-                        onChange={(e) => handleParamChange(e, param, 'name')}
+                        type="checkbox"
+                        checked={param.enabled}
+                        tabIndex="-1"
+                        className="mr-3 mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'enabled')}
                      />
-                    </td>
-                    <td>
-                      <MultiLineEditor
-                        value={param.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            param,
-                            'value'
-                          )
-                        }
-                        allowNewlines={true}
-                        onRun={handleRun}
-                        collection={collection}
-                        item={item}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={param.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleParamChange(e, param, 'enabled')}
-                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
+                      <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
+                        <IconTrash strokeWidth={1.5} size={20} />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })
            : null}
-        </tbody>
-      </table>
+        </ReorderTable>
+      </Table>
      <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={addParam}>
        + Add Param
      </button>
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -154,7 +154,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
        </div>
        <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
      </div>
-      <section className="flex w-full mt-5 flex-1">{getTabPanel(focusedTab.requestPaneTab)}</section>
+      <section className="flex w-full mt-5 flex-1 relative">{getTabPanel(focusedTab.requestPaneTab)}</section>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
@@ -49,7 +49,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));

  return (
-    <StyledWrapper className="w-full relative">
+    <>
      <button
        className="btn-add-param text-link px-4 py-4 select-none absolute top-0 right-0 z-10"
        onClick={onPrettify}
@@ -68,7 +68,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
        onRun={onRun}
        onSave={onSave}
      />
-    </StyledWrapper>
+    </>
  );
 };

--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
@@ -19,23 +19,7 @@ const Wrapper = styled.div`
    }
    td {
      padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
      }
-
-      &:nth-child(2) {
-        width: 45%;
-      }
-
-      &:nth-child(3) {
-        width: 25%;
-      }
-
-      &:nth-child(4) {
-        width: 70px;
-      }
-    }
  }

  .btn-add-param {
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
@@ -7,12 +7,15 @@ import { useTheme } from 'providers/Theme';
 import {
  addMultipartFormParam,
  updateMultipartFormParam,
-  deleteMultipartFormParam
+  deleteMultipartFormParam,
+  moveMultipartFormParam
 } from 'providers/ReduxStore/slices/collections';
 import MultiLineEditor from 'components/MultiLineEditor';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import FilePickerEditor from 'components/FilePickerEditor';
+import Table from 'components/Table/index';
+import ReorderTable from 'components/ReorderTable/index';

 const MultipartFormParams = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -82,80 +85,47 @@ const MultipartFormParams = ({ item, collection }) => {
    );
  };

+  const handleParamDrag = ({ updateReorderedItem }) => {
+    dispatch(
+      moveMultipartFormParam({
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        updateReorderedItem
+      })
+    );
+  };
+
  return (
    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Key</td>
-            <td>Value</td>
-            <td>Content-Type</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '29%' },
+          { name: 'Value', accessor: 'value', width: '29%' },
+          { name: 'Content-Type', accessor: 'content-type', width: '28%' },
+          { name: '', accessor: '', width: '14%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleParamDrag}>
          {params && params.length
            ? params.map((param, index) => {
-                return (
-                  <tr key={param.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={param.name}
-                        className="mousetrap"
-                        onChange={(e) => handleParamChange(e, param, 'name')}
-                      />
-                    </td>
-                    <td>
-                      {param.type === 'file' ? (
-                        <FilePickerEditor
-                          value={param.value}
-                          onChange={(newValue) =>
-                            handleParamChange(
-                              {
-                                target: {
-                                  value: newValue
-                                }
-                              },
-                              param,
-                              'value'
-                            )
-                          }
-                          collection={collection}
-                        />
-                      ) : (
-                        <MultiLineEditor
-                          onSave={onSave}
-                          theme={storedTheme}
-                          value={param.value}
-                          onChange={(newValue) =>
-                            handleParamChange(
-                              {
-                                target: {
-                                  value: newValue
-                                }
-                              },
-                              param,
-                              'value'
-                            )
-                          }
-                          onRun={handleRun}
-                          allowNewlines={true}
-                          collection={collection}
-                          item={item}
-                        />
-                      )}
-                    </td>
-                    <td>
-                      <MultiLineEditor
-                        onSave={onSave}
-                        theme={storedTheme}
-                        placeholder="Auto"
-                        value={param.contentType}
+              return (
+                <tr key={param.uid} className='w-full' data-uid={param.uid}>
+                  <td className="flex relative">
+                    <input
+                      type="text"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      autoCapitalize="off"
+                      spellCheck="false"
+                      value={param.name}
+                      className="mousetrap"
+                      onChange={(e) => handleParamChange(e, param, 'name')}
+                    />
+                  </td>
+                  <td>
+                    {param.type === 'file' ? (
+                      <FilePickerEditor
+                        value={param.value}
                        onChange={(newValue) =>
                          handleParamChange(
                            {
@@ -164,33 +134,75 @@ const MultipartFormParams = ({ item, collection }) => {
                              }
                            },
                            param,
-                            'contentType'
+                            'value'
+                          )
+                        }
+                        collection={collection}
+                      />
+                    ) : (
+                      <MultiLineEditor
+                        onSave={onSave}
+                        theme={storedTheme}
+                        value={param.value}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value'
                          )
                        }
                        onRun={handleRun}
+                        allowNewlines={true}
                        collection={collection}
+                        item={item}
                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={param.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleParamChange(e, param, 'enabled')}
-                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
+                    )}
+                  </td>
+                  <td>
+                    <MultiLineEditor
+                      onSave={onSave}
+                      theme={storedTheme}
+                      placeholder="Auto"
+                      value={param.contentType}
+                      onChange={(newValue) =>
+                        handleParamChange(
+                          {
+                            target: {
+                              value: newValue
+                            }
+                          },
+                          param,
+                          'contentType'
+                        )
+                      }
+                      onRun={handleRun}
+                      collection={collection}
+                    />
+                  </td>
+                  <td>
+                    <div className="flex items-center">
+                      <input
+                        type="checkbox"
+                        checked={param.enabled}
+                        tabIndex="-1"
+                        className="mr-3 mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'enabled')}
+                      />
+                      <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
+                        <IconTrash strokeWidth={1.5} size={20} />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })
            : null}
-        </tbody>
-      </table>
+        </ReorderTable>
+      </Table>
      <div>
        <button className="btn-add-param text-link pr-2 pt-3 mt-2 select-none" onClick={addParam}>
          + Add Param
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -103,7 +103,7 @@ const QueryParams = ({ item, collection }) => {
    );
  };

-  const handleParamDrag = ({ updateReorderedItem }) => {
+  const handleQueryParamDrag = ({ updateReorderedItem }) => {
    dispatch(
      moveQueryParam({
        collectionUid: collection.uid,
@@ -124,7 +124,7 @@ const QueryParams = ({ item, collection }) => {
            { name: '', accessor: '', width: '13%' }
          ]}
        >
-          <ReorderTable updateReorderedItem={handleParamDrag}>
+          <ReorderTable updateReorderedItem={handleQueryParamDrag}>
            {queryParams && queryParams.length
              ? queryParams.map((param, index) => (
                  <tr key={param.uid} data-uid={param.uid}>
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
@@ -128,6 +128,15 @@ const RequestBodyMode = ({ item, collection }) => {
            SPARQL
          </div>
          <div className="label-item font-medium">Other</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('file');
+            }}
+          >
+            File / Binary
+          </div>
          <div
            className="dropdown-item"
            onClick={() => {
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
@@ -8,6 +8,7 @@ import { useTheme } from 'providers/Theme';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
+import FileBody from '../FileBody/index';

 const RequestBody = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -48,6 +49,7 @@ const RequestBody = ({ item, collection }) => {
      <StyledWrapper className="w-full">
        <CodeEditor
          collection={collection}
+          item={item} 
          theme={displayedTheme}
          font={get(preferences, 'font.codeFont', 'default')}
          fontSize={get(preferences, 'font.codeFontSize')}
@@ -61,6 +63,10 @@ const RequestBody = ({ item, collection }) => {
    );
  }

+  if (bodyMode === 'file') {
+    return <FileBody item={item} collection={collection}/>
+  }
+
  if (bodyMode === 'formUrlEncoded') {
    return <FormUrlEncodedParams item={item} collection={collection} />;
  }
@@ -71,4 +77,4 @@ const RequestBody = ({ item, collection }) => {

  return <StyledWrapper className="w-full">No Body</StyledWrapper>;
 };
-export default RequestBody;
+export default RequestBody;
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
@@ -19,15 +19,7 @@ const Wrapper = styled.div`
    }
    td {
      padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
-    }
  }

  .btn-add-header {
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@@ -4,12 +4,14 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections';
+import { addRequestHeader, updateRequestHeader, deleteRequestHeader, moveRequestHeader } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
+import Table from 'components/Table/index';
+import ReorderTable from 'components/ReorderTable/index';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

 const RequestHeaders = ({ item, collection }) => {
@@ -63,22 +65,31 @@ const RequestHeaders = ({ item, collection }) => {
    );
  };

+    const handleHeaderDrag = ({ updateReorderedItem }) => {
+      dispatch(
+        moveRequestHeader({
+          collectionUid: collection.uid,
+          itemUid: item.uid,
+          updateReorderedItem
+        })
+      );
+    };
+
  return (
    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {headers && headers.length
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '34%' },
+          { name: 'Value', accessor: 'value', width: '46%' },
+          { name: '', accessor: '', width: '20%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleHeaderDrag}>
+        {headers && headers.length
            ? headers.map((header) => {
                return (
-                  <tr key={header.uid}>
-                    <td>
+                  <tr key={header.uid} data-uid={header.uid}>
+                    <td className='flex relative'>
                      <SingleLineEditor
                        value={header.name}
                        theme={storedTheme}
@@ -140,8 +151,8 @@ const RequestHeaders = ({ item, collection }) => {
                );
              })
            : null}
-        </tbody>
-      </table>
+        </ReorderTable>
+      </Table>
      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
        + Add Header
      </button>
--- a/packages/bruno-app/src/components/RequestPane/Tests/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Tests/StyledWrapper.js
@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/RequestPane/Tests/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Tests/index.js
@@ -5,7 +5,6 @@ import CodeEditor from 'components/CodeEditor';
 import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';

 const Tests = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -28,19 +27,17 @@ const Tests = ({ item, collection }) => {
  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));

  return (
-    <StyledWrapper className="w-full">
-      <CodeEditor
-        collection={collection}
-        value={tests || ''}
-        theme={displayedTheme}
-        font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
-        onEdit={onEdit}
-        mode="javascript"
-        onRun={onRun}
-        onSave={onSave}
-      />
-    </StyledWrapper>
+    <CodeEditor
+      collection={collection}
+      value={tests || ''}
+      theme={displayedTheme}
+      font={get(preferences, 'font.codeFont', 'default')}
+      fontSize={get(preferences, 'font.codeFontSize')}
+      onEdit={onEdit}
+      mode="javascript"
+      onRun={onRun}
+      onSave={onSave}
+    />
  );
 };

--- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/StyledWrapper.js
@@ -19,16 +19,8 @@ const Wrapper = styled.div`
    }
    td {
      padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
      }
    }
-  }

  .btn-add-var {
    font-size: 0.8125rem;
@@ -38,7 +30,8 @@ const Wrapper = styled.div`
    width: 100%;
    border: solid 1px transparent;
    outline: none !important;
-    background-color: inherit;
+    color: ${(props) => props.theme.table.input.color};
+    background: transparent;

    &:focus {
      outline: none !important;
--- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
@@ -3,13 +3,15 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { addVar, updateVar, deleteVar } from 'providers/ReduxStore/slices/collections';
+import { addVar, updateVar, deleteVar, moveVar } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { variableNameRegex } from 'utils/common/regex';
+import Table from 'components/Table/index';
+import ReorderTable from 'components/ReorderTable/index';

 const VarsTable = ({ item, collection, vars, varType }) => {
  const dispatch = useDispatch();
@@ -73,35 +75,41 @@ const VarsTable = ({ item, collection, vars, varType }) => {
    );
  };

+  const handleVarDrag = ({ updateReorderedItem }) => {
+    dispatch(
+      moveVar({
+        type: varType,
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        updateReorderedItem
+      })
+    );
+  };
+
  return (
    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            {varType === 'request' ? (
-              <td>
-                <div className="flex items-center">
-                  <span>Value</span>
-                </div>
-              </td>
-            ) : (
-              <td>
-                <div className="flex items-center">
-                  <span>Expr</span>
-                  <InfoTip text="You can write any valid JS expression here" infotipId="response-var" />
-                </div>
-              </td>
-            )}
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {vars && vars.length
+      <Table
+        headers={[
+          { name: 'Name', accessor: 'name', width: '40%' },
+          { name: varType === 'request' ? (
+              <div className="flex items-center">
+                <span>Value</span>
+              </div>
+          ) : (
+              <div className="flex items-center">
+                <span>Expr</span>
+                <InfoTip text="You can write any valid JS expression here" infotipId="response-var" />
+              </div>
+          ), accessor: 'value', width: '46%' },
+          { name: '', accessor: '', width: '14%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleVarDrag}>
+        {vars && vars.length
            ? vars.map((_var) => {
                return (
-                  <tr key={_var.uid}>
-                    <td>
+                  <tr key={_var.uid} data-uid={_var.uid}>
+                    <td className='flex relative'>
                      <input
                        type="text"
                        autoComplete="off"
@@ -152,8 +160,8 @@ const VarsTable = ({ item, collection, vars, varType }) => {
                );
              })
            : null}
-        </tbody>
-      </table>
+        </ReorderTable>
+      </Table>
      <button className="btn-add-var text-link pr-2 py-3 mt-2 select-none" onClick={handleAddVar}>
        + Add
      </button>
--- a/packages/bruno-app/src/components/RequestTabPanel/RequestIsLoading/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/RequestIsLoading/StyledWrapper.js
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.card {
+    background: ${(props) => props.theme.requestTabPanel.card.bg};
+    border: 1px solid ${(props) => props.theme.requestTabPanel.card.border};
+
+    div.hr {
+      border-bottom: 1px solid ${(props) => props.theme.requestTabPanel.card.hr};
+      height: 1px;
+    }
+
+    div.border-top {
+      border-top: 1px solid ${(props) => props.theme.requestTabPanel.card.border};
+    }
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/RequestTabPanel/RequestIsLoading/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/RequestIsLoading/index.js
@@ -0,0 +1,47 @@
+import { IconLoader2, IconFile } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const RequestIsLoading = ({ item }) => {
+  return <StyledWrapper>
+    <div className='flex flex-col p-4'>
+      <div className='card shadow-sm rounded-md p-4 w-[600px]'>
+        <div>
+          <div className='font-medium flex items-center gap-2 pb-4'>
+            <IconFile size={16} strokeWidth={1.5} className="text-gray-400" />
+            File Info
+          </div>
+          <div className='hr'/>
+
+          <div className='flex items-center mt-2'>
+            <span className='w-12 mr-2 text-muted'>Name:</span>
+            <div>
+              {item?.name}
+            </div>
+          </div>
+          
+          <div className='flex items-center mt-1'>
+            <span className='w-12 mr-2 text-muted'>Path:</span>
+            <div className='break-all'>
+              {item?.pathname}
+            </div>
+          </div>
+          
+          <div className='flex items-center mt-1 pb-4'>
+            <span className='w-12 mr-2 text-muted'>Size:</span>
+            <div>
+              {item?.size?.toFixed?.(2)} MB
+            </div>
+          </div>
+
+          <div className='hr'/>
+          <div className='flex items-center gap-2 mt-4'>
+            <IconLoader2 className="animate-spin" size={16} strokeWidth={2} />
+            <span>Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </StyledWrapper>
+}
+
+export default RequestIsLoading;
--- a/packages/bruno-app/src/components/RequestTabPanel/RequestNotLoaded/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/RequestNotLoaded/StyledWrapper.js
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.card {
+    background: ${(props) => props.theme.requestTabPanel.card.bg};
+    border: 1px solid ${(props) => props.theme.requestTabPanel.card.border};
+
+    div.hr {
+      border-bottom: 1px solid ${(props) => props.theme.requestTabPanel.card.hr};
+      height: 1px;
+    }
+
+    div.border-top {
+      border-top: 1px solid ${(props) => props.theme.requestTabPanel.card.border};
+    }
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/RequestTabPanel/RequestNotLoaded/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/RequestNotLoaded/index.js
@@ -0,0 +1,89 @@
+import { IconLoader2, IconFile } from '@tabler/icons';
+import { loadRequest, loadRequestViaWorker } from 'providers/ReduxStore/slices/collections/actions';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+
+const RequestNotLoaded = ({ collection, item }) => {
+  const dispatch = useDispatch();
+  const handleLoadRequestViaWorker = () => {
+    !item?.loading && dispatch(loadRequestViaWorker({ collectionUid: collection?.uid, pathname: item?.pathname }));
+  }
+
+  const handleLoadRequest = () => {
+    !item?.loading && dispatch(loadRequest({ collectionUid: collection?.uid, pathname: item?.pathname }));
+  }
+
+  return <StyledWrapper>
+    <div className='flex flex-col p-4'>
+      <div className='card shadow-sm rounded-md p-4 w-[600px]'>
+        <div>
+          <div className='font-medium flex items-center gap-2 pb-4'>
+            <IconFile size={16} strokeWidth={1.5} className="text-gray-400" />
+            File Info
+          </div>
+          <div className='hr'/>
+
+          <div className='flex items-center mt-2'>
+            <span className='w-12 mr-2 text-muted'>Name:</span>
+            <div>{item?.name}</div>
+          </div>
+          
+          <div className='flex items-center mt-1'>
+            <span className='w-12 mr-2 text-muted'>Path:</span>
+            <div className='break-all'>{item?.pathname}</div>
+          </div>
+          
+          <div className='flex items-center mt-1 pb-4'>
+            <span className='w-12 mr-2 text-muted'>Size:</span>
+            <div>{item?.size?.toFixed?.(2)} MB</div>
+          </div>
+
+          {!item?.error && (
+            <>
+              <div className='hr'/>
+              <div className='text-muted text-xs mt-4 mb-2'>
+                Due to its large size, this request wasn't loaded automatically.
+              </div>
+              <div className='flex flex-col gap-6 mt-4'>
+                <div className='flex flex-col'>
+                  <button 
+                    className={`submit btn btn-sm btn-secondary w-fit h-fit flex flex-row gap-2 ${item?.loading? 'opacity-50 cursor-blocked': ''}`} 
+                    onClick={handleLoadRequest}
+                  >
+                    Load Request
+                  </button>
+                  <small className='text-muted mt-1'>
+                    May cause the app to freeze temporarily while it runs.
+                  </small>
+                </div>
+                <div className='flex flex-col'>
+                  <button 
+                    className={`submit btn btn-sm btn-secondary w-fit h-fit flex flex-row gap-2 ${item?.loading? 'opacity-50 cursor-blocked': ''}`} 
+                    onClick={handleLoadRequestViaWorker}
+                  >
+                    Load Request in Background
+                  </button>
+                  <small className='text-muted mt-1'>
+                    Runs in background.
+                  </small>
+                </div>
+              </div>
+            </>
+          )}
+
+          {item?.loading && (
+            <>
+              <div className='hr mt-4'/>
+              <div className='flex items-center gap-2 mt-4'>
+                <IconLoader2 className="animate-spin" size={16} strokeWidth={2} />
+                <span>Loading...</span>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  </StyledWrapper>
+}
+
+export default RequestNotLoaded;
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -22,6 +22,9 @@ import SecuritySettings from 'components/SecuritySettings';
 import FolderSettings from 'components/FolderSettings';
 import { getGlobalEnvironmentVariables, getGlobalEnvironmentVariablesMasked } from 'utils/collections/index';
 import { produce } from 'immer';
+import CollectionOverview from 'components/CollectionSettings/Overview';
+import RequestNotLoaded from './RequestNotLoaded';
+import RequestIsLoading from './RequestIsLoading';

 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
@@ -153,6 +156,11 @@ const RequestTabPanel = () => {
  if (focusedTab.type === 'collection-settings') {
    return <CollectionSettings collection={collection} />;
  }
+
+  if (focusedTab.type === 'collection-overview') {
+    return <CollectionOverview collection={collection} />;
+  }
+
  if (focusedTab.type === 'folder-settings') {
    const folder = findItemInCollection(collection, focusedTab.folderUid);
    return <FolderSettings collection={collection} folder={folder} />;
@@ -167,6 +175,14 @@ const RequestTabPanel = () => {
    return <RequestNotFound itemUid={activeTabUid} />;
  }

+  if (item?.partial) {
+    return <RequestNotLoaded item={item} collection={collection} />
+  }
+
+  if (item?.loading) {
+    return <RequestIsLoading item={item} />
+  }
+
  const handleRun = async () => {
    dispatch(sendRequest(item, collection.uid)).catch((err) =>
      toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
@@ -2,10 +2,18 @@ import React from 'react';
 import CloseTabIcon from './CloseTabIcon';
 import { IconVariable, IconSettings, IconRun, IconFolder, IconShieldLock } from '@tabler/icons';

-const SpecialTab = ({ handleCloseClick, type, tabName }) => {
+const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick }) => {
  const getTabInfo = (type, tabName) => {
    switch (type) {
      case 'collection-settings': {
+        return (
+          <div onDoubleClick={handleDoubleClick} className="flex items-center flex-nowrap overflow-hidden">
+            <IconSettings size={18} strokeWidth={1.5} className="text-yellow-600" />
+            <span className="ml-1 leading-6">Collection</span>
+          </div>
+        );
+      }
+      case 'collection-overview': {
        return (
          <>
            <IconSettings size={18} strokeWidth={1.5} className="text-yellow-600" />
@@ -23,7 +31,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName }) => {
      }
      case 'folder-settings': {
        return (
-          <div className="flex items-center flex-nowrap overflow-hidden">
+          <div onDoubleClick={handleDoubleClick} className="flex items-center flex-nowrap overflow-hidden">
            <IconFolder size={18} strokeWidth={1.5} className="text-yellow-600 min-w-[18px]" />
            <span className="ml-1 leading-6 truncate">{tabName || 'Folder'}</span>
          </div>
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useRef, Fragment } from 'react';
 import get from 'lodash/get';
-import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { closeTabs, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme';
@@ -70,16 +70,16 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
  };

  const folder = folderUid ? findItemInCollection(collection, folderUid) : null;
-  if (['collection-settings', 'folder-settings', 'variables', 'collection-runner', 'security-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-1"
+        className={`flex items-center justify-between tab-container px-1 ${tab.preview ? "italic" : ""}`}
        onMouseUp={handleMouseUp} // Add middle-click behavior here
      >
        {tab.type === 'folder-settings' ? (
-          <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} tabName={folder?.name} />
+          <SpecialTab handleCloseClick={handleCloseClick} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} tabName={folder?.name} />
        ) : (
-          <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} />
+          <SpecialTab handleCloseClick={handleCloseClick} handleDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))} type={tab.type} />
        )}
      </StyledWrapper>
    );
@@ -144,8 +144,9 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
        />
      )}
      <div
-        className="flex items-baseline tab-label pl-2"
+        className={`flex items-baseline tab-label pl-2 ${tab.preview ? "italic" : ""}`}
        onContextMenu={handleRightClick}
+        onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
        onMouseUp={(e) => {
          if (!item.draft) return handleMouseUp(e);

--- a/packages/bruno-app/src/components/RunnerResults/index.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/index.jsx
@@ -9,6 +9,7 @@ import { IconRefresh, IconCircleCheck, IconCircleX, IconCheck, IconX, IconRun }
 import slash from 'utils/common/slash';
 import ResponsePane from './ResponsePane';
 import StyledWrapper from './StyledWrapper';
+import { areItemsLoading } from 'utils/collections';

 const getRelativePath = (fullPath, pathname) => {
  // convert to unix style path
@@ -106,6 +107,8 @@ export default function RunnerResults({ collection }) {
    return (item.status !== 'error' && item.testStatus === 'fail') || item.assertionStatus === 'fail';
  });

+  let isCollectionLoading = areItemsLoading(collection);
+
  if (!items || !items.length) {
    return (
      <StyledWrapper className="px-4 pb-4">
@@ -116,7 +119,7 @@ export default function RunnerResults({ collection }) {
        <div className="mt-6">
          You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
        </div>
-
+        {isCollectionLoading ? <div className='my-1 danger'>Requests in this collection are still loading.</div> : null}
        <div className="mt-6">
          <label>Delay (in ms)</label>
          <input
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemIcon/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemIcon/StyledWrapper.js
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .partial {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+  .error {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemIcon/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CollectionItemIcon/index.js
@@ -0,0 +1,21 @@
+import RequestMethod from "../RequestMethod";
+import { IconLoader2, IconAlertTriangle, IconAlertCircle } from '@tabler/icons';
+import StyledWrapper from "./StyledWrapper";
+
+const CollectionItemIcon = ({ item }) => {
+  if (item?.error) {
+    return <StyledWrapper><IconAlertCircle className="w-fit mr-2 error" size={18} strokeWidth={1.5} /></StyledWrapper>;
+  }
+
+  if (item?.loading) {
+    return <IconLoader2 className="animate-spin w-fit mr-2" size={18} strokeWidth={1.5} />;
+  }
+
+  if (item?.partial) {
+    return <StyledWrapper><IconAlertTriangle size={18} className="w-fit mr-2 partial" strokeWidth={1.5} /></StyledWrapper>;
+  }
+
+  return <RequestMethod item={item} />;
+};
+
+export default CollectionItemIcon;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/StyledWrapper.js
@@ -4,6 +4,9 @@ const Wrapper = styled.div`
  .bruno-modal-content {
    padding-bottom: 1rem;
  }
+  .warning {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js
@@ -7,6 +7,7 @@ import { addTab } from 'providers/ReduxStore/slices/tabs';
 import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/actions';
 import { flattenItems } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
+import { areItemsLoading } from 'utils/collections';

 const RunCollectionItem = ({ collection, item, onClose }) => {
  const dispatch = useDispatch();
@@ -32,6 +33,10 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
  const flattenedItems = flattenItems(item ? item.items : collection.items);
  const recursiveRunLength = getRequestsCount(flattenedItems);

+  const isFolderLoading = areItemsLoading(item);
+  console.log(item);
+  console.log(isFolderLoading);
+
  return (
    <StyledWrapper>
      <Modal size="md" title="Collection Runner" hideFooter={true} handleCancel={onClose}>
@@ -44,13 +49,12 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
              <span className="ml-1 text-xs">({runLength} requests)</span>
            </div>
            <div className="mb-8">This will only run the requests in this folder.</div>
-
            <div className="mb-1">
              <span className="font-medium">Recursive Run</span>
              <span className="ml-1 text-xs">({recursiveRunLength} requests)</span>
            </div>
-            <div className="mb-8">This will run all the requests in this folder and all its subfolders.</div>
-
+            <div className={isFolderLoading ? "mb-2" : "mb-8"}>This will run all the requests in this folder and all its subfolders.</div>
+            {isFolderLoading ? <div className='mb-8 warning'>Requests in this folder are still loading.</div> : null}
            <div className="flex justify-end bruno-modal-footer">
              <span className="mr-3">
                <button type="button" onClick={onClose} className="btn btn-md btn-close">
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
@@ -5,13 +5,12 @@ import classnames from 'classnames';
 import { useDrag, useDrop } from 'react-dnd';
 import { IconChevronRight, IconDots } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
-import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
-import { moveItem, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { addTab, focusTab, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
+import { moveItem, showInFolder, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { collectionFolderClicked } from 'providers/ReduxStore/slices/collections';
 import Dropdown from 'components/Dropdown';
 import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
-import RequestMethod from './RequestMethod';
 import RenameCollectionItem from './RenameCollectionItem';
 import CloneCollectionItem from './CloneCollectionItem';
 import DeleteCollectionItem from './DeleteCollectionItem';
@@ -24,13 +23,16 @@ import { hideHomePage } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
 import NetworkError from 'components/ResponsePane/NetworkError/index';
-import { uuid } from 'utils/common';
+import { findItemInCollection } from 'utils/collections';
+import CollectionItemIcon from './CollectionItemIcon';
+import { scrollToTheActiveTab } from 'utils/tabs';

 const CollectionItem = ({ item, collection, searchText }) => {
  const tabs = useSelector((state) => state.tabs.tabs);
  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
  const isSidebarDragging = useSelector((state) => state.app.isDragging);
  const dispatch = useDispatch();
+  const collectionItemRef = useRef(null);

  const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
  const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
@@ -39,38 +41,35 @@ const CollectionItem = ({ item, collection, searchText }) => {
  const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
  const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
  const [runCollectionModalOpen, setRunCollectionModalOpen] = useState(false);
-  const [itemIsCollapsed, setItemisCollapsed] = useState(item.collapsed);
+
+  const hasSearchText = searchText && searchText?.trim()?.length;
+  const itemIsCollapsed = hasSearchText ? false : item.collapsed;

  const [{ isDragging }, drag] = useDrag({
-    type: `COLLECTION_ITEM_${collection.uid}`,
+    type: `collection-item-${collection.uid}`,
    item: item,
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
-    })
+    }),
+    options: {
+      dropEffect: "move"
+    }
  });

  const [{ isOver }, drop] = useDrop({
-    accept: `COLLECTION_ITEM_${collection.uid}`,
+    accept: `collection-item-${collection.uid}`,
    drop: (draggedItem) => {
-      if (draggedItem.uid !== item.uid) {
-        dispatch(moveItem(collection.uid, draggedItem.uid, item.uid));
-      }
+      dispatch(moveItem(collection.uid, draggedItem.uid, item.uid));
    },
    canDrop: (draggedItem) => {
      return draggedItem.uid !== item.uid;
    },
    collect: (monitor) => ({
-      isOver: monitor.isOver()
-    })
+      isOver: monitor.isOver(),
+    }),
  });

-  useEffect(() => {
-    if (searchText && searchText.length) {
-      setItemisCollapsed(false);
-    } else {
-      setItemisCollapsed(item.collapsed);
-    }
-  }, [searchText, item]);
+  drag(drop(collectionItemRef));

  const dropdownTippyRef = useRef();
  const MenuIcon = forwardRef((props, ref) => {
@@ -90,13 +89,6 @@ const CollectionItem = ({ item, collection, searchText }) => {
    'item-hovered': isOver
  });

-  const scrollToTheActiveTab = () => {
-    const activeTab = document.querySelector('.request-tab.active');
-    if (activeTab) {
-      activeTab.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  };
-
  const handleRun = async () => {
    dispatch(sendRequest(item, collection.uid)).catch((err) =>
      toast.custom((t) => <NetworkError onClose={() => toast.dismiss(t.id)} />, {
@@ -106,10 +98,13 @@ const CollectionItem = ({ item, collection, searchText }) => {
  };

  const handleClick = (event) => {
+    if (event.detail != 1) return;
    //scroll to the active tab
    setTimeout(scrollToTheActiveTab, 50);
-
-    if (isItemARequest(item)) {
+  
+    const isRequest = isItemARequest(item);
+  
+    if (isRequest) {
      dispatch(hideHomePage());
      if (itemIsOpenedInTabs(item, tabs)) {
        dispatch(
@@ -119,20 +114,21 @@ const CollectionItem = ({ item, collection, searchText }) => {
        );
        return;
      }
+  
      dispatch(
        addTab({
          uid: item.uid,
          collectionUid: collection.uid,
-          requestPaneTab: getDefaultRequestPaneTab(item)
+          requestPaneTab: getDefaultRequestPaneTab(item),
+          type: 'request',
        })
      );
-      return;
-    }
+    } else {
      dispatch(
        addTab({
          uid: item.uid,
          collectionUid: collection.uid,
-          type: 'folder-settings'
+          type: 'folder-settings',
        })
      );
      dispatch(
@@ -141,9 +137,12 @@ const CollectionItem = ({ item, collection, searchText }) => {
          collectionUid: collection.uid
        })
      );
+    }
  };

-  const handleFolderCollapse = () => {
+  const handleFolderCollapse = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
    dispatch(
      collectionFolderClicked({
        itemUid: item.uid,
@@ -163,10 +162,6 @@ const CollectionItem = ({ item, collection, searchText }) => {
    }
  };

-  const handleDoubleClick = (event) => {
-    setRenameItemModalOpen(true);
-  };
-
  let indents = range(item.depth);
  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
  const isFolder = isItemAFolder(item);
@@ -187,6 +182,10 @@ const CollectionItem = ({ item, collection, searchText }) => {
    }
  }

+  const handleDoubleClick = (event) => {
+    dispatch(makeTabPermanent({ uid: item.uid }))
+  };
+
  // we need to sort request items by seq property
  const sortRequestItems = (items = []) => {
    return items.sort((a, b) => a.seq - b.seq);
@@ -227,6 +226,13 @@ const CollectionItem = ({ item, collection, searchText }) => {
    }
  };

+  const handleShowInFolder = () => {
+    dispatch(showInFolder(item.pathname)).catch((error) => {
+      console.error('Error opening the folder', error);
+      toast.error('Error opening the folder');
+    });
+  };
+
  const requestItems = sortRequestItems(filter(item.items, (i) => isItemARequest(i)));
  const folderItems = sortFolderItems(filter(item.items, (i) => isItemAFolder(i)));

@@ -253,7 +259,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
      {generateCodeItemModalOpen && (
        <GenerateCodeItem collection={collection} item={item} onClose={() => setGenerateCodeItemModalOpen(false)} />
      )}
-      <div className={itemRowClassName} ref={(node) => drag(drop(node))}>
+      <div className={itemRowClassName} ref={collectionItemRef}>
        <div className="flex items-center h-full w-full">
          {indents && indents.length
            ? indents.map((i) => {
@@ -280,6 +286,9 @@ const CollectionItem = ({ item, collection, searchText }) => {
            style={{
              paddingLeft: 8
            }}
+            onClick={handleClick}
+            onContextMenu={handleRightClick}
+            onDoubleClick={handleDoubleClick}
          >
            <div style={{ width: 16, minWidth: 16 }}>
              {isFolder ? (
@@ -294,12 +303,9 @@ const CollectionItem = ({ item, collection, searchText }) => {
            </div>

            <div 
-              className="ml-1 flex items-center overflow-hidden flex-1" 
-              onClick={handleClick}
-              onContextMenu={handleRightClick}
-              onDoubleClick={handleDoubleClick}
+              className="ml-1 flex w-full h-full items-center overflow-hidden"
            >
-              <RequestMethod item={item} />
+              <CollectionItemIcon item={item} />
              <span className="item-name" title={item.name}>
                {item.name}
              </span>
@@ -378,6 +384,15 @@ const CollectionItem = ({ item, collection, searchText }) => {
                  Generate Code
                </div>
              )}
+              <div
+                className="dropdown-item"
+                onClick={(e) => {
+                  dropdownTippyRef.current.hide();
+                  handleShowInFolder();
+                }}
+              >
+                Show in Folder
+              </div>
              <div
                className="dropdown-item delete-item"
                onClick={(e) => {
@@ -421,4 +436,4 @@ const CollectionItem = ({ item, collection, searchText }) => {
  );
 };

-export default CollectionItem;
+export default CollectionItem;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
@@ -12,6 +12,17 @@ const Wrapper = styled.div`
      transform: rotateZ(90deg);
    }

+    &.item-hovered {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+      .collection-actions {
+        .dropdown {
+          div[aria-expanded='false'] {
+            visibility: visible;
+          }
+        }
+      }
+    }
+
    .collection-actions {
      .dropdown {
        div[aria-expanded='true'] {
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
@@ -2,25 +2,26 @@ import React, { useState, forwardRef, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { uuid } from 'utils/common';
 import filter from 'lodash/filter';
-import { useDrop } from 'react-dnd';
-import { IconChevronRight, IconDots } from '@tabler/icons';
+import { useDrop, useDrag } from 'react-dnd';
+import { IconChevronRight, IconDots, IconLoader2 } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
-import { collectionClicked } from 'providers/ReduxStore/slices/collections';
-import { moveItemToRootOfCollection } from 'providers/ReduxStore/slices/collections/actions';
-import { useDispatch } from 'react-redux';
-import { addTab } from 'providers/ReduxStore/slices/tabs';
+import { collapseCollection } from 'providers/ReduxStore/slices/collections';
+import { mountCollection, moveItemToRootOfCollection, moveCollectionAndPersist } from 'providers/ReduxStore/slices/collections/actions';
+import { useDispatch, useSelector } from 'react-redux';
+import { addTab, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import NewRequest from 'components/Sidebar/NewRequest';
 import NewFolder from 'components/Sidebar/NewFolder';
 import CollectionItem from './CollectionItem';
 import RemoveCollection from './RemoveCollection';
 import ExportCollection from './ExportCollection';
 import { doesCollectionHaveItemsMatchingSearchText } from 'utils/collections/search';
-import { isItemAFolder, isItemARequest, transformCollectionToSaveToExportAsFile } from 'utils/collections';
-import exportCollection from 'utils/collections/export';
+import { isItemAFolder, isItemARequest } from 'utils/collections';

 import RenameCollection from './RenameCollection';
 import StyledWrapper from './StyledWrapper';
-import CloneCollection from './CloneCollection/index';
+import CloneCollection from './CloneCollection';
+import { areItemsLoading, findItemInCollection } from 'utils/collections';
+import { scrollToTheActiveTab } from 'utils/tabs';

 const Collection = ({ collection, searchText }) => {
  const [showNewFolderModal, setShowNewFolderModal] = useState(false);
@@ -29,8 +30,10 @@ const Collection = ({ collection, searchText }) => {
  const [showCloneCollectionModalOpen, setShowCloneCollectionModalOpen] = useState(false);
  const [showExportCollectionModal, setShowExportCollectionModal] = useState(false);
  const [showRemoveCollectionModal, setShowRemoveCollectionModal] = useState(false);
-  const [collectionIsCollapsed, setCollectionIsCollapsed] = useState(collection.collapsed);
+  const tabs = useSelector((state) => state.tabs.tabs);
  const dispatch = useDispatch();
+  const isLoading = areItemsLoading(collection);
+  const collectionRef = useRef(null);

  const menuDropdownTippyRef = useRef();
  const onMenuDropdownCreate = (ref) => (menuDropdownTippyRef.current = ref);
@@ -52,31 +55,53 @@ const Collection = ({ collection, searchText }) => {
    );
  };

-  useEffect(() => {
-    if (searchText && searchText.length) {
-      setCollectionIsCollapsed(false);
-    } else {
-      setCollectionIsCollapsed(collection.collapsed);
+  const ensureCollectionIsMounted = () => {
+    if (collection.mountStatus === 'unmounted') {
+      dispatch(mountCollection({
+        collectionUid: collection.uid,
+        collectionPathname: collection.pathname,
+        brunoConfig: collection.brunoConfig
+      }));
    }
-  }, [searchText, collection]);
+  }
+
+  const hasSearchText = searchText && searchText?.trim()?.length;
+  const collectionIsCollapsed = hasSearchText ? false : collection.collapsed;

  const iconClassName = classnames({
    'rotate-90': !collectionIsCollapsed
  });

  const handleClick = (event) => {
-    dispatch(collectionClicked(collection.uid));
+    if (event.detail != 1) return;
+    // Check if the click came from the chevron icon
+    const isChevronClick = event.target.closest('svg')?.classList.contains('chevron-icon');
+    setTimeout(scrollToTheActiveTab, 50);
+    
+    ensureCollectionIsMounted();
+
+    dispatch(collapseCollection(collection.uid));
+  
+    if(!isChevronClick) {
+      dispatch(
+        addTab({
+          uid: collection.uid,
+          collectionUid: collection.uid,
+          type: 'collection-settings',
+        })
+      );
+    }
  };

-  const handleCollapseCollection = () => {
-    dispatch(collectionClicked(collection.uid));
-    dispatch(
-      addTab({
-        uid: uuid(),
-        collectionUid: collection.uid,
-        type: 'collection-settings'
-      })
-    );
+  const handleDoubleClick = (event) => {
+    dispatch(makeTabPermanent({ uid: collection.uid }))
+  };
+
+  const handleCollectionCollapse = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    ensureCollectionIsMounted();
+    dispatch(collapseCollection(collection.uid));
  }

  const handleRightClick = (event) => {
@@ -100,26 +125,51 @@ const Collection = ({ collection, searchText }) => {
    );
  };

+  const isCollectionItem = (itemType) => {
+    return itemType.startsWith('collection-item');
+  };
+  
+  const [{ isDragging }, drag] = useDrag({
+    type: "collection",
+    item: collection,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    options: {
+      dropEffect: "move"
+    }
+  });
+  
  const [{ isOver }, drop] = useDrop({
-    accept: `COLLECTION_ITEM_${collection.uid}`,
-    drop: (draggedItem) => {
-      dispatch(moveItemToRootOfCollection(collection.uid, draggedItem.uid));
+    accept: ["collection", `collection-item-${collection.uid}`],
+    drop: (draggedItem, monitor) => {
+      const itemType = monitor.getItemType();
+      if (isCollectionItem(itemType)) {
+        dispatch(moveItemToRootOfCollection(collection.uid, draggedItem.uid))
+      } else {
+        dispatch(moveCollectionAndPersist({draggedItem, targetItem: collection}));
+      }
    },
    canDrop: (draggedItem) => {
-      // todo need to make sure that draggedItem belongs to the collection
-      return true;
+      return draggedItem.uid !== collection.uid;
    },
    collect: (monitor) => ({
-      isOver: monitor.isOver()
-    })
+      isOver: monitor.isOver(),
+    }),
  });

+  drag(drop(collectionRef));
+
  if (searchText && searchText.length) {
    if (!doesCollectionHaveItemsMatchingSearchText(collection, searchText)) {
      return null;
    }
  }

+  const collectionRowClassName = classnames('flex py-1 collection-name items-center', {
+      'item-hovered': isOver
+    });
+
  // we need to sort request items by seq property
  const sortRequestItems = (items = []) => {
    return items.sort((a, b) => a.seq - b.seq);
@@ -149,22 +199,26 @@ const Collection = ({ collection, searchText }) => {
      {showCloneCollectionModalOpen && (
        <CloneCollection collection={collection} onClose={() => setShowCloneCollectionModalOpen(false)} />
      )}
-      <div className="flex py-1 collection-name items-center" ref={drop}>
+      <div className={collectionRowClassName}
+      ref={collectionRef}
+      >
        <div
          className="flex flex-grow items-center overflow-hidden"
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          onContextMenu={handleRightClick}
        >
          <IconChevronRight
            size={16}
            strokeWidth={2}
-            className={iconClassName}
+            className={`chevron-icon ${iconClassName}`}
            style={{ width: 16, minWidth: 16, color: 'rgb(160 160 160)' }}
-            onClick={handleClick}
+            onClick={handleCollectionCollapse}
          />
-          <div className="ml-1" id="sidebar-collection-name"    
-            onClick={handleCollapseCollection}
-            onContextMenu={handleRightClick}>
+          <div className="ml-1" id="sidebar-collection-name">
            {collection.name}
          </div>
+          {isLoading ? <IconLoader2 className="animate-spin mx-1" size={18} strokeWidth={1.5} /> : null}
        </div>
        <div className="collection-actions">
          <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
--- a/packages/bruno-app/src/components/Sidebar/Collections/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/index.js
@@ -8,12 +8,10 @@ import {
  IconSortDescendingLetters,
  IconX
 } from '@tabler/icons';
-import Collection from '../Collections/Collection';
+import Collection from './Collection';
 import CreateCollection from '../CreateCollection';
 import StyledWrapper from './StyledWrapper';
 import CreateOrOpenCollection from './CreateOrOpenCollection';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { sortCollections } from 'providers/ReduxStore/slices/collections/actions';

 // todo: move this to a separate folder
@@ -119,9 +117,7 @@ const Collections = () => {
        {collections && collections.length
          ? collections.map((c) => {
              return (
-                <DndProvider backend={HTML5Backend} key={c.uid}>
-                  <Collection searchText={searchText} collection={c} key={c.uid} />
-                </DndProvider>
+                <Collection searchText={searchText} collection={c} key={c.uid} />
              );
            })
          : null}
--- a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
@@ -68,7 +68,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
    );
  };
  return (
-    <Modal size="sm" title="Import Collection" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+    <Modal size="sm" title="Import Collection" hideFooter={true} handleCancel={onClose}>
      <div className="flex flex-col">
        <h3 className="text-sm">Select the type of your existing collection :</h3>
        <div className="mt-4 grid grid-rows-2 grid-flow-col gap-2">
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -184,7 +184,7 @@ const Sidebar = () => {
                  Star
                </GitHubButton> */}
              </div>
-              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.36.0</div>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.36.1</div>
            </div>
          </div>
        </div>
--- a/packages/bruno-app/src/components/VariablesEditor/index.js
+++ b/packages/bruno-app/src/components/VariablesEditor/index.js
@@ -15,7 +15,7 @@ const KeyValueExplorer = ({ data = [], theme }) => {
      <SecretToggle showSecret={showSecret} onClick={() => setShowSecret(!showSecret)} />
      <table className="border-collapse">
        <tbody>
-          {data.map((envVar) => (
+          {data.toSorted((a, b) => a.name.localeCompare(b.name)).map((envVar) => (
            <tr key={envVar.name}>
              <td className="px-2 py-1">{envVar.name}</td>
              <td className="px-2 py-1">
--- a/packages/bruno-app/src/index.js
+++ b/packages/bruno-app/src/index.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './pages/index';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';

 const rootElement = document.getElementById('root');

@@ -8,7 +10,9 @@ if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
-      <App />
+      <DndProvider backend={HTML5Backend}>
+        <App />
+      </DndProvider>
    </React.StrictMode>
  );
 }
--- a/packages/bruno-app/src/providers/App/useTelemetry.js
+++ b/packages/bruno-app/src/providers/App/useTelemetry.js
@@ -58,7 +58,7 @@ const trackStart = () => {
    event: 'start',
    properties: {
      os: platformLib.os.family,
-      version: '1.36.0'
+      version: '1.38.1'
    }
  });
 };
--- a/packages/bruno-app/src/providers/ReduxStore/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/index.js
@@ -6,12 +6,13 @@ import collectionsReducer from './slices/collections';
 import tabsReducer from './slices/tabs';
 import notificationsReducer from './slices/notifications';
 import globalEnvironmentsReducer from './slices/global-environments';
+import { draftDetectMiddleware } from './middlewares/draft/middleware';

 const isDevEnv = () => {
  return import.meta.env.MODE === 'development';
 };

-let middleware = [tasksMiddleware.middleware];
+let middleware = [tasksMiddleware.middleware, draftDetectMiddleware];
 if (isDevEnv()) {
  middleware = [...middleware, debugMiddleware.middleware];
 }
--- a/packages/bruno-app/src/providers/ReduxStore/middlewares/draft/middleware.js
+++ b/packages/bruno-app/src/providers/ReduxStore/middlewares/draft/middleware.js
@@ -0,0 +1,56 @@
+import { handleMakeTabParmanent } from "./utils";
+
+const actionsToIntercept = [
+  'collections/requestUrlChanged',
+  'collections/updateAuth',
+  'collections/addQueryParam',
+  'collections/moveQueryParam',
+  'collections/updateQueryParam',
+  'collections/deleteQueryParam',
+  'collections/updatePathParam',
+  'collections/addRequestHeader',
+  'collections/updateRequestHeader',
+  'collections/deleteRequestHeader',
+  'collections/moveRequestHeader',
+  'collections/addFormUrlEncodedParam',
+  'collections/updateFormUrlEncodedParam',
+  'collections/deleteFormUrlEncodedParam',
+  'collections/moveFormUrlEncodedParam',
+  'collections/addMultipartFormParam',
+  'collections/updateMultipartFormParam',
+  'collections/deleteMultipartFormParam',
+  'collections/moveMultipartFormParam',
+  'collections/updateRequestAuthMode',
+  'collections/updateRequestBodyMode',
+  'collections/updateRequestBody',
+  'collections/updateRequestGraphqlQuery',
+  'collections/updateRequestGraphqlVariables',
+  'collections/updateRequestScript',
+  'collections/updateResponseScript',
+  'collections/updateRequestTests',
+  'collections/updateRequestMethod',
+  'collections/addAssertion',
+  'collections/updateAssertion',
+  'collections/deleteAssertion',
+  'collections/moveAssertion',
+  'collections/addVar',
+  'collections/updateVar',
+  'collections/deleteVar',
+  'collections/moveVar',
+  'collections/addFolderHeader',
+  'collections/updateFolderHeader',
+  'collections/deleteFolderHeader',
+  'collections/addFolderVar',
+  'collections/updateFolderVar',
+  'collections/deleteFolderVar',
+  'collections/updateRequestDocs',
+  'collections/runRequestEvent', // TODO: This doesn't necessarily related to a draft state, need to rethink.
+];
+
+export const draftDetectMiddleware = ({ dispatch, getState }) => (next) => (action) => {
+  if (actionsToIntercept.includes(action.type)) {
+    const state = getState();
+    handleMakeTabParmanent(state, action, dispatch);
+  }
+  return next(action);
+};
--- a/packages/bruno-app/src/providers/ReduxStore/middlewares/draft/utils.js
+++ b/packages/bruno-app/src/providers/ReduxStore/middlewares/draft/utils.js
@@ -0,0 +1,21 @@
+import { makeTabPermanent } from "providers/ReduxStore/slices/tabs";
+import { findCollectionByUid, findItemInCollection } from "utils/collections/index";
+import find from 'lodash/find';
+
+function handleMakeTabParmanent(state, action, dispatch) {
+  const tabs = state.tabs.tabs;
+  const activeTabUid = state.tabs.activeTabUid;
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  const itemUid = action.payload.itemUid || action.payload.folderUid
+  const collection = findCollectionByUid(state.collections.collections, action.payload.collectionUid);
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && focusedTab.preview == true) {
+      dispatch(makeTabPermanent({ uid: itemUid }));
+    }
+  }
+}
+
+export {
+  handleMakeTabParmanent
+}
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@@ -21,8 +21,9 @@ import {
  transformRequestToSaveToFilesystem
 } from 'utils/collections';
 import { uuid, waitForNextTick } from 'utils/common';
-import { PATH_SEPARATOR, getDirectoryName } from 'utils/common/platform';
+import { PATH_SEPARATOR, getDirectoryName, isWindowsPath } from 'utils/common/platform';
 import { cancelNetworkRequest, sendNetworkRequest } from 'utils/network';
+import { callIpc } from 'utils/common/ipc';

 import {
  collectionAddEnvFileEvent as _collectionAddEnvFileEvent,
@@ -30,6 +31,8 @@ import {
  removeCollection as _removeCollection,
  selectEnvironment as _selectEnvironment,
  sortCollections as _sortCollections,
+  updateCollectionMountStatus,
+  moveCollection,
  requestCancelled,
  resetRunResults,
  responseReceived,
@@ -42,7 +45,6 @@ import { closeAllCollectionTabs } from 'providers/ReduxStore/slices/tabs';
 import { resolveRequestFilename } from 'utils/common/platform';
 import { parsePathParams, parseQueryParams, splitOnFirst } from 'utils/url/index';
 import { sendCollectionOauth2Request as _sendCollectionOauth2Request } from 'utils/network/index';
-import { name } from 'file-loader';
 import slash from 'utils/common/slash';
 import { getGlobalEnvironmentVariables } from 'utils/collections/index';
 import { findCollectionByPathname, findEnvironmentInCollectionByName } from 'utils/collections/index';
@@ -161,7 +163,6 @@ export const saveFolderRoot = (collectionUid, folderUid) => (dispatch, getState)
    if (!folder) {
      return reject(new Error('Folder not found'));
    }
-    console.log(collection);

    const { ipcRenderer } = window;

@@ -170,7 +171,6 @@ export const saveFolderRoot = (collectionUid, folderUid) => (dispatch, getState)
      pathname: folder.pathname,
      root: folder.root
    };
-    console.log(folderData);

    ipcRenderer
      .invoke('renderer:save-folder-root', folderData)
@@ -494,7 +494,7 @@ export const cloneItem = (newName, itemUid, collectionUid) => (dispatch, getStat
      );
      if (!reqWithSameNameExists) {
        const dirname = getDirectoryName(item.pathname);
-        const fullName = path.join(dirname, filename);
+        const fullName = isWindowsPath(item.pathname) ? path.win32.join(dirname, filename) : path.join(dirname, filename);
        const { ipcRenderer } = window;
        const requestItems = filter(parentItem.items, (i) => i.type !== 'folder');
        itemToSave.seq = requestItems ? requestItems.length + 1 : 1;
@@ -759,7 +759,8 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
          xml: null,
          sparql: null,
          multipartForm: null,
-          formUrlEncoded: null
+          formUrlEncoded: null,
+          file: null
        },
        auth: auth ?? {
          mode: 'none'
@@ -1039,14 +1040,17 @@ export const browseDirectory = () => (dispatch, getState) => {
 };

 export const browseFiles =
-  (filters = []) =>
-  (dispatch, getState) => {
+  (filters, properties) =>
+  (_dispatch, _getState) => {
    const { ipcRenderer } = window;

    return new Promise((resolve, reject) => {
-      ipcRenderer.invoke('renderer:browse-files', filters).then(resolve).catch(reject);
+      ipcRenderer
+        .invoke('renderer:browse-files', filters, properties)
+        .then(resolve)
+        .catch(reject);
    });
-  };
+};

 export const updateBrunoConfig = (brunoConfig, collectionUid) => (dispatch, getState) => {
  const state = getState();
@@ -1148,6 +1152,22 @@ export const importCollection = (collection, collectionLocation) => (dispatch, g
  });
 };

+export const moveCollectionAndPersist = ({ draggedItem, targetItem }) => (dispatch, getState) => {
+  dispatch(moveCollection({ draggedItem, targetItem }));
+
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+    const state = getState();
+
+    const collectionPaths = state.collections.collections.map((collection) => collection.pathname);
+
+    ipcRenderer
+      .invoke('renderer:update-collection-paths', collectionPaths) 
+      .then(resolve)
+      .catch(reject);
+  });
+};
+
 export const saveCollectionSecurityConfig = (collectionUid, securityConfig) => (dispatch, getState) => {
  return new Promise((resolve, reject) => {
    const { ipcRenderer } = window;
@@ -1192,4 +1212,38 @@ export const hydrateCollectionWithUiStateSnapshot = (payload) => (dispatch, getS
        reject(error);
      }
    });
-  };
+  };
+
+export const loadRequestViaWorker = ({ collectionUid, pathname }) => (dispatch, getState) => {
+  return new Promise(async (resolve, reject) => {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('renderer:load-request-via-worker', { collectionUid, pathname }).then(resolve).catch(reject);
+  });
+};
+
+export const loadRequest = ({ collectionUid, pathname }) => (dispatch, getState) => {
+  return new Promise(async (resolve, reject) => {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('renderer:load-request', { collectionUid, pathname }).then(resolve).catch(reject);
+  });
+};
+
+export const mountCollection = ({ collectionUid, collectionPathname, brunoConfig }) => (dispatch, getState) => {
+  dispatch(updateCollectionMountStatus({ collectionUid, mountStatus: 'mounting' }));
+  return new Promise(async (resolve, reject) => {
+    callIpc('renderer:mount-collection', { collectionUid, collectionPathname, brunoConfig })
+      .then(() => dispatch(updateCollectionMountStatus({ collectionUid, mountStatus: 'mounted' })))
+      .then(resolve)
+      .catch(() => {
+        dispatch(updateCollectionMountStatus({ collectionUid, mountStatus: 'unmounted' }));
+        reject();
+      });
+  });
+};
+
+  export const showInFolder = (collectionPath) => () => {
+    return new Promise((resolve, reject) => {
+      const { ipcRenderer } = window;
+      ipcRenderer.invoke('renderer:show-in-folder', collectionPath).then(resolve).catch(reject);
+    });
+  };
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -1,10 +1,10 @@
 import { uuid } from 'utils/common';
-import { find, map, forOwn, concat, filter, each, cloneDeep, get, set } from 'lodash';
+import { find, map, forOwn, concat, filter, each, cloneDeep, get, set, findIndex } from 'lodash';
 import { createSlice } from '@reduxjs/toolkit';
 import {
  addDepth,
  areItemsTheSameExceptSeqUpdate,
-  collapseCollection,
+  collapseAllItemsInCollection,
  deleteItemInCollection,
  deleteItemInCollectionByPathname,
  findCollectionByPathname,
@@ -18,6 +18,8 @@ import {
 import { parsePathParams, parseQueryParams, splitOnFirst, stringifyQueryParams } from 'utils/url';
 import { getDirectoryName, getSubdirectoriesFromRoot, PATH_SEPARATOR } from 'utils/common/platform';
 import toast from 'react-hot-toast';
+import mime from 'mime-types';
+import path from 'node:path';

 const initialState = {
  collections: [],
@@ -32,9 +34,13 @@ export const collectionsSlice = createSlice({
      const collectionUids = map(state.collections, (c) => c.uid);
      const collection = action.payload;

-      collection.settingsSelectedTab = 'headers';
+      collection.settingsSelectedTab = 'overview';
      collection.folderLevelSettingsSelectedTab = {};

+      // Collection mount status is used to track the mount status of the collection
+      // values can be 'unmounted', 'mounting', 'mounted'
+      collection.mountStatus = 'unmounted';
+
      // TODO: move this to use the nextAction approach
      // last action is used to track the last action performed on the collection
      // this is optional
@@ -44,12 +50,18 @@ export const collectionsSlice = createSlice({
      collection.importedAt = new Date().getTime();
      collection.lastAction = null;

-      collapseCollection(collection);
+      collapseAllItemsInCollection(collection);
      addDepth(collection.items);
      if (!collectionUids.includes(collection.uid)) {
        state.collections.push(collection);
      }
    },
+    updateCollectionMountStatus: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+      if (collection) {
+        collection.mountStatus = action.payload.mountStatus;
+      }
+    },
    setCollectionSecurityConfig: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
      if (collection) {
@@ -88,6 +100,12 @@ export const collectionsSlice = createSlice({
          break;
      }
    },
+    moveCollection: (state, action) => {
+      const { draggedItem, targetItem } = action.payload;
+      state.collections = state.collections.filter((i) => i.uid !== draggedItem.uid); // Remove dragged item
+      const targetItemIndex = state.collections.findIndex((i) => i.uid === targetItem.uid); // Find target item
+      state.collections.splice(targetItemIndex, 0, draggedItem); // Insert dragged-item above target-item
+    },
    updateLastAction: (state, action) => {
      const { collectionUid, lastAction } = action.payload;
      const collection = findCollectionByUid(state.collections, collectionUid);
@@ -358,7 +376,7 @@ export const collectionsSlice = createSlice({
        collection.items.push(item);
      }
    },
-    collectionClicked: (state, action) => {
+    collapseCollection: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload);

      if (collection) {
@@ -473,6 +491,10 @@ export const collectionsSlice = createSlice({
              item.draft.request.auth.mode = 'digest';
              item.draft.request.auth.digest = action.payload.content;
              break;
+            case 'ntlm':
+              item.draft.request.auth.mode = 'ntlm';
+              item.draft.request.auth.ntlm = action.payload.content;
+              break;              
            case 'oauth2':
              item.draft.request.auth.mode = 'oauth2';
              item.draft.request.auth.oauth2 = action.payload.content;
@@ -528,11 +550,16 @@ export const collectionsSlice = createSlice({
          const { updateReorderedItem } = action.payload;
          const params = item.draft.request.params;

-          item.draft.request.params = updateReorderedItem.map((uid) => {
-            return params.find((param) => param.uid === uid);
+          const queryParams = params.filter((param) => param.type === 'query');
+          const pathParams = params.filter((param) => param.type === 'path');
+    
+          // Reorder only query params based on updateReorderedItem
+          const reorderedQueryParams = updateReorderedItem.map((uid) => {
+            return queryParams.find((param) => param.uid === uid);
          });
-
-          // update request url
+          item.draft.request.params = [...reorderedQueryParams, ...pathParams];
+    
+          // Update request URL
          const parts = splitOnFirst(item.draft.request.url, '?');
          const query = stringifyQueryParams(filter(item.draft.request.params, (p) => p.enabled && p.type === 'query'));
          if (query && query.length) {
@@ -690,6 +717,28 @@ export const collectionsSlice = createSlice({
        }
      }
    },
+    moveRequestHeader: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          // Ensure item.draft is a deep clone of item if not already present
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+
+          // Extract payload data
+          const { updateReorderedItem } = action.payload;
+          const params = item.draft.request.headers;
+
+          item.draft.request.headers = updateReorderedItem.map((uid) => {
+            return params.find((param) => param.uid === uid);
+          });
+        }
+      }
+    },
    addFormUrlEncodedParam: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);

@@ -748,6 +797,28 @@ export const collectionsSlice = createSlice({
        }
      }
    },
+    moveFormUrlEncodedParam: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          // Ensure item.draft is a deep clone of item if not already present
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+
+          // Extract payload data
+          const { updateReorderedItem } = action.payload;
+          const params = item.draft.request.body.formUrlEncoded;
+
+          item.draft.request.body.formUrlEncoded = updateReorderedItem.map((uid) => {
+            return params.find((param) => param.uid === uid);
+          });
+        }
+      }
+    },
    addMultipartFormParam: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);

@@ -810,6 +881,98 @@ export const collectionsSlice = createSlice({
        }
      }
    },
+    moveMultipartFormParam: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          // Ensure item.draft is a deep clone of item if not already present
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+
+          // Extract payload data
+          const { updateReorderedItem } = action.payload;
+          const params = item.draft.request.body.multipartForm;
+
+          item.draft.request.body.multipartForm = updateReorderedItem.map((uid) => {
+            return params.find((param) => param.uid === uid);
+          });
+        }
+      }
+    },
+    addFile: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+    
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+    
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          item.draft.request.body.file = item.draft.request.body.file || [];
+    
+          item.draft.request.body.file.push({
+            uid: uuid(),
+            filePath: '',
+            contentType: '',
+            selected: false
+          });
+        }
+      }
+    },
+    updateFile: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+    
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+    
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+    
+          const param = find(item.draft.request.body.file, (p) => p.uid === action.payload.param.uid);
+    
+          if (param) {
+            const contentType = mime.contentType(path.extname(action.payload.param.filePath));
+            param.filePath = action.payload.param.filePath;
+            param.contentType = action.payload.param.contentType || contentType || '';
+            param.selected = action.payload.param.selected;
+    
+            item.draft.request.body.file = item.draft.request.body.file.map((p) => {
+              p.selected = p.uid === param.uid;
+              return p;
+            });
+          }
+        }
+      }
+    },
+    deleteFile: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+      
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+        
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          
+          item.draft.request.body.file = filter(
+            item.draft.request.body.file,
+            (p) => p.uid !== action.payload.paramUid
+          );
+    
+          if (item.draft.request.body.file.length > 0) {
+            item.draft.request.body.file[0].selected = true;
+          }
+        }
+      }
+    },
    updateRequestAuthMode: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);

@@ -866,6 +1029,10 @@ export const collectionsSlice = createSlice({
              item.draft.request.body.sparql = action.payload.content;
              break;
            }
+            case 'file': {
+              item.draft.request.body.file = action.payload.content;
+              break;
+            }
            case 'formUrlEncoded': {
              item.draft.request.body.formUrlEncoded = action.payload.content;
              break;
@@ -1023,6 +1190,28 @@ export const collectionsSlice = createSlice({
        }
      }
    },
+    moveAssertion: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          // Ensure item.draft is a deep clone of item if not already present
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+
+          // Extract payload data
+          const { updateReorderedItem } = action.payload;
+          const params = item.draft.request.assertions;
+
+          item.draft.request.assertions = updateReorderedItem.map((uid) => {
+            return params.find((param) => param.uid === uid);
+          });
+        }
+      }
+    },
    addVar: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
      const type = action.payload.type;
@@ -1117,6 +1306,37 @@ export const collectionsSlice = createSlice({
        }
      }
    },
+    moveVar: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+      const type = action.payload.type;
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          // Ensure item.draft is a deep clone of item if not already present
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+
+          // Extract payload data
+          const { updateReorderedItem } = action.payload;
+          if(type == "request"){
+            const params = item.draft.request.vars.req;
+
+            item.draft.request.vars.req = updateReorderedItem.map((uid) => {
+            return params.find((param) => param.uid === uid);
+          });
+          } else if (type === 'response') {
+            const params = item.draft.request.vars.res;
+
+            item.draft.request.vars.res = updateReorderedItem.map((uid) => {
+            return params.find((param) => param.uid === uid);
+            });
+          }
+        }
+      }
+    },
    updateCollectionAuthMode: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);

@@ -1144,6 +1364,9 @@ export const collectionsSlice = createSlice({
          case 'digest':
            set(collection, 'root.request.auth.digest', action.payload.content);
            break;
+          case 'ntlm':
+            set(collection, 'root.request.auth.ntlm', action.payload.content);
+            break;            
          case 'oauth2':
            set(collection, 'root.request.auth.oauth2', action.payload.content);
            break;
@@ -1451,7 +1674,7 @@ export const collectionsSlice = createSlice({
              name: directoryName,
              collapsed: true,
              type: 'folder',
-              items: []
+              items: [],
            };
            currentSubItems.push(childItem);
          }
@@ -1473,6 +1696,10 @@ export const collectionsSlice = createSlice({
            currentItem.filename = file.meta.name;
            currentItem.pathname = file.meta.pathname;
            currentItem.draft = null;
+            currentItem.partial = file.partial;
+            currentItem.loading = file.loading;
+            currentItem.size = file.size;
+            currentItem.error = file.error;
          } else {
            currentSubItems.push({
              uid: file.data.uid,
@@ -1482,7 +1709,11 @@ export const collectionsSlice = createSlice({
              request: file.data.request,
              filename: file.meta.name,
              pathname: file.meta.pathname,
-              draft: null
+              draft: null,
+              partial: file.partial,
+              loading: file.loading,
+              size: file.size,
+              error: file.error
            });
          }
        }
@@ -1759,6 +1990,7 @@ export const collectionsSlice = createSlice({

 export const {
  createCollection,
+  updateCollectionMountStatus,
  setCollectionSecurityConfig,
  brunoConfigUpdateEvent,
  renameCollection,
@@ -1782,7 +2014,7 @@ export const {
  saveRequest,
  deleteRequestDraft,
  newEphemeralHttpRequest,
-  collectionClicked,
+  collapseCollection,
  collectionFolderClicked,
  requestUrlChanged,
  updateAuth,
@@ -1794,12 +2026,18 @@ export const {
  addRequestHeader,
  updateRequestHeader,
  deleteRequestHeader,
+  moveRequestHeader,
  addFormUrlEncodedParam,
  updateFormUrlEncodedParam,
  deleteFormUrlEncodedParam,
+  moveFormUrlEncodedParam,
  addMultipartFormParam,
  updateMultipartFormParam,
  deleteMultipartFormParam,
+  addFile,
+  updateFile,
+  deleteFile,
+  moveMultipartFormParam,
  updateRequestAuthMode,
  updateRequestBodyMode,
  updateRequestBody,
@@ -1812,9 +2050,11 @@ export const {
  addAssertion,
  updateAssertion,
  deleteAssertion,
+  moveAssertion,
  addVar,
  updateVar,
  deleteVar,
+  moveVar,
  addFolderHeader,
  updateFolderHeader,
  deleteFolderHeader,
@@ -1848,7 +2088,8 @@ export const {
  runFolderEvent,
  resetCollectionRunner,
  updateRequestDocs,
-  updateFolderDocs
+  updateFolderDocs,
+  moveCollection
 } = collectionsSlice.actions;

 export default collectionsSlice.reducer;
--- a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { findIndex } from 'lodash';
 import filter from 'lodash/filter';
 import find from 'lodash/find';
 import last from 'lodash/last';
@@ -10,40 +11,55 @@ const initialState = {
  activeTabUid: null
 };

-const tabTypeAlreadyExists = (tabs, collectionUid, type) => {
-  return find(tabs, (tab) => tab.collectionUid === collectionUid && tab.type === type);
-};
-
 export const tabsSlice = createSlice({
  name: 'tabs',
  initialState,
  reducers: {
    addTab: (state, action) => {
-      const alreadyExists = find(state.tabs, (tab) => tab.uid === action.payload.uid);
-      if (alreadyExists) {
+      const { uid, collectionUid, type, requestPaneTab, preview } = action.payload;
+    
+      const existingTab = find(state.tabs, (tab) => tab.uid === uid);
+    
+      if (existingTab) {
+        state.activeTabUid = existingTab.uid;
        return;
      }
+      const nonReplaceableTabTypes = [
+        "variables",
+        "collection-runner",
+        "security-settings",
+      ];

-      if (
-        ['variables', 'collection-settings', 'collection-runner', 'security-settings'].includes(action.payload.type)
-      ) {
-        const tab = tabTypeAlreadyExists(state.tabs, action.payload.collectionUid, action.payload.type);
-        if (tab) {
-          state.activeTabUid = tab.uid;
-          return;
+      const lastTab = state.tabs[state.tabs.length - 1];
+      if (state.tabs.length > 0 && lastTab.preview) {
+        state.tabs[state.tabs.length - 1] = {
+          uid,
+          collectionUid,
+          requestPaneWidth: null,
+          requestPaneTab: requestPaneTab || 'params',
+          responsePaneTab: 'response',
+          type: type || 'request',
+          preview: true,
+          ...(uid ? { folderUid: uid } : {})
        }
-      }

+        state.activeTabUid = uid;
+        return
+      }
+    
      state.tabs.push({
-        uid: action.payload.uid,
-        collectionUid: action.payload.collectionUid,
+        uid,
+        collectionUid,
        requestPaneWidth: null,
-        requestPaneTab: action.payload.requestPaneTab || 'params',
+        requestPaneTab: requestPaneTab || 'params',
        responsePaneTab: 'response',
-        type: action.payload.type || 'request',
-        ...(action.payload.uid ? { folderUid: action.payload.uid } : {})
+        type: type || 'request',
+        ...(uid ? { folderUid: uid } : {}),
+        preview: preview !== undefined
+            ? preview
+          : !nonReplaceableTabTypes.includes(type)
      });
-      state.activeTabUid = action.payload.uid;
+      state.activeTabUid = uid;
    },
    focusTab: (state, action) => {
      state.activeTabUid = action.payload.uid;
@@ -124,6 +140,15 @@ export const tabsSlice = createSlice({
      const collectionUid = action.payload.collectionUid;
      state.tabs = filter(state.tabs, (t) => t.collectionUid !== collectionUid);
      state.activeTabUid = null;
+    },
+    makeTabPermanent: (state, action) => {
+      const { uid } = action.payload;
+      const tab = find(state.tabs, (t) => t.uid === uid);
+      if (tab) {
+        tab.preview = false;
+      } else{
+        console.error("Tab not found!")
+      }
    }
  }
 });
@@ -136,7 +161,8 @@ export const {
  updateRequestPaneTab,
  updateResponsePaneTab,
  closeTabs,
-  closeAllCollectionTabs
+  closeAllCollectionTabs,
+  makeTabPermanent
 } = tabsSlice.actions;

-export default tabsSlice.reducer;
+export default tabsSlice.reducer;
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -114,7 +114,25 @@ const darkTheme = {
    responseStatus: '#ccc',
    responseOk: '#8cd656',
    responseError: '#f06f57',
-    responseOverlayBg: 'rgba(30, 30, 30, 0.6)'
+    responseOverlayBg: 'rgba(30, 30, 30, 0.6)',
+
+    card: {
+      bg: '#252526',
+      border: 'transparent',
+      borderDark: '#8cd656',
+      hr: '#424242'
+    },
+
+    cardTable: {
+      border: '#333',
+      bg: '#252526',
+      table: {
+        thead: {
+          bg: '#3D3D3D',
+          color: '#ccc'
+        }
+      }
+    }
  },

  collection: {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
ramki-bruno	07682ba7b5	Fix: CLI-Tests Workflow lacks contents:read permission	2025-02-11 15:23:12 +05:30
lohxt1	8810b9e291	fix graphql variables editor and tests editor height	2025-02-10 21:42:53 +05:30
Sanjai Kumar	89a4cd62bc	Feat: Move-Collection with Drag-and-Drop (#3755 ) --------- Co-authored-by: sanjai0py <sanjailucifer666@gmail.com> Co-authored-by: ramki-bruno <ramki@usebruno.com>	2025-02-10 20:46:42 +05:30
Anoop M D	4c1765e9f9	feat(#2896 ): add support for cheerio and xml2json as inbuilt library	2025-02-10 18:55:20 +05:30
Sreelakshmi Jayarajan	8351589994	Fixing typo in pm translation of util function	2025-02-10 18:55:11 +05:30
Sreelakshmi Jayarajan	4d063b2d0b	Revert "Fixing typo in pm translation of util functions" This reverts commit `fceff56872`.	2025-02-10 18:55:11 +05:30
Sreelakshmi Jayarajan	288628003f	Fixing typo in pm translation of util functions	2025-02-10 18:55:11 +05:30
Pooja Belaramani	ced6ddfab5	add: translation for skipRequest and stopExecution	2025-02-10 11:45:23 +05:30
Pragadesh-45	5291bbaef7	Fix: Import failing for collections with special characters in Windows (#3969 ) * fix: correct variable used in collection name update * fix: sanitize collection names by removing invalid filesystem characters * refactor: refactor collection name sanitization to use `sanitizeDirectoryName`	2025-02-10 11:37:50 +05:30
ramki-bruno	667b15386c	Fix: Unresponsive click-area in folder-collection-item between chevron-icon and name	2025-02-06 23:34:58 +05:30
ramki-bruno	086e943c04	Fix: Collectio-items not loading when clicking on chevron icon the first-time	2025-02-06 23:34:58 +05:30
ramki-bruno	901c4e1ca2	Fix: Request-send action should make the Tab permanent/non-preview	2025-02-06 23:34:58 +05:30
sanjai0py	14e9227e07	refactor: enhance JSON parsing logic for Buffer responses	2025-02-06 21:24:55 +05:30
sanjai0py	d8a2e6f405	fix: improve handling of Buffer responses and set default charset to utf-8	2025-02-06 21:24:55 +05:30
lohxt1	5c096cff7b	fix worker lane logic	2025-02-06 21:20:23 +05:30
Sanjai Kumar	0913e668e0	refactor: update browseFiles action to remove default properties and improve file dialog handling (#3957 ) --------- Co-authored-by: sanjai0py <sanjailucifer666@gmail.com>	2025-02-06 20:26:49 +05:30
Sahil Khan	f0c3125227	fix:handle render svg response (#3833 )	2025-02-06 20:23:27 +05:30
naman-bruno	a5d23599a1	Fixed: user cookie header getting overwritten by stored cookie in cli	2025-02-06 20:03:42 +05:30
naman-bruno	28ca0494e0	Fixed: user cookie header getting overwritten by stored cookie	2025-02-06 20:03:42 +05:30
naman-bruno	722d9788ca	Feature: Improve tab UX (#3831 ) --------- Co-authored-by: ramki-bruno <ramki@usebruno.com>	2025-02-06 19:34:10 +05:30
lohit	038f2d1f0b	temp. revert tests for file body (#3941 ) * temporarily revert tests for file body	2025-02-04 22:12:59 +05:30
lohit	8f604efc7e	fixes tests for the file body pr (#3940 ) fixes tests for bruno-app and bruno-electron	2025-02-04 22:12:59 +05:30
Sanjai Kumar	af182a9c00	refactor: rename binaryFile to file and update related references	2025-02-04 22:12:59 +05:30
Sanjai Kumar	dd23962958	improvements (#3930 ) Co-authored-by: Sanjai Kumar <sanjai@usebruno.com>	2025-02-04 22:12:59 +05:30
Marcos Adriano	324b7cec51	feat: raw binary files handling in request body (#3734 ) -------------- Co-authored-by: lohit <lohit@usebruno.com> Co-authored-by: Anoop M D <anoop.md1421@gmail.com>	2025-02-04 22:12:59 +05:30
lohxt1	8abf8ff9c8	skipped request should not be considered as errors in junit reports	2025-02-04 21:48:10 +05:30
Pragadesh-45	ec5a5c9b56	fix: correct variable used in collection name update	2025-02-04 18:49:02 +05:30
Pooja Belaramani	4598acd068	fix	2025-02-03 13:49:35 +05:30
Pooja Belaramani	062ab00a66	fix: ensure API key values are converted to strings in Postman collection importer.	2025-02-03 13:49:35 +05:30
Pooja Belaramani	650cb47a8b	fix: resolve function recusion	2025-02-03 13:01:24 +05:30
Pooja Belaramani	08139a8f3e	fix	2025-01-30 09:58:38 +05:30
Pooja Belaramani	51e087efba	add: hint word for runRequest, sendNextRequest, skipRequest, getTestResults	2025-01-30 09:58:38 +05:30
lohxt1	ff5683f19f	add runRequest and runner utils functions to cli ~ add bru.runRequest support for cli ~ add bru.runner.skipRequest, bru.runner.stopExecution support for cli	2025-01-29 11:53:02 +05:30
lohxt1	d13e4b3b54	ensure variables set in scripts/tests during `bru.runRequest` reflect in original request scripts/tests	2025-01-29 11:53:02 +05:30
Jarod Gowgiel	2d08567d8d	Add an npm script to run the Electron app for debugging (#3616 ) This allows for developers to attach Dev Tools, e.g. the Chrome "dedicated DevTools for node", to the main Electron process for debugging operations that occur on the main process.	2025-01-29 11:25:41 +05:30
ramki-bruno	b51f8109a2	Review changes and minor-refactoring in `Reveal in Finder` feature	2025-01-29 11:18:57 +05:30
Naman	8f241a32ae	Feature: Reveal in Finder (#3698 ) * feat: Reveal in Finder * added support for linux	2025-01-29 11:18:57 +05:30
Sanjai Kumar	b7fda331dc	Fix: Comment toggling for JSON modes in CodeEditor	2025-01-29 11:16:15 +05:30
lohxt1	10e0fde2a8	use lowercase header keys while making requests	2025-01-29 08:34:01 +05:30
Anoop M D	9f5f975f70	feat: async parser workers (#3834 ) (#3887 ) feat: async parser workers (#3834) Co-authored-by: lohit <lohit.jiddimani@gmail.com>	2025-01-29 02:53:53 +05:30
Pragadesh-45	b5bd259a1b	fix: handle Windows paths in cloneItem and getDirectoryName functions (fixes: #3401 ) (#3646 ) * fix: handle Windows paths in cloneItem and getDirectoryName functions * chore: removed commented lines --------- Co-authored-by: Anoop M D <anoop.md1421@gmail.com>	2025-01-28 21:32:51 +05:30
lohit	0633d45a10	upgraded axios libarary (#3899 )	2025-01-28 18:55:59 +05:30
Pragadesh-45	16e27d2ca4	feat: make `BrunoResponse` callable to access body data using expressions fixes (#481 ) (#3710 ) * feat: make `BrunoResponse` callable to access body data using expressions	2025-01-28 14:57:00 +05:30
Alex	956d5a38e9	fix: bump axios version to handle ivp6 (#3878 ) Co-authored-by: alex.chua <alex.chua@bytedance.com>	2025-01-28 14:36:29 +05:30
Sanjai Kumar	bfc1101371	refactor: update GitHub Actions workflow to add permissions for checks and pull requests for the `cli-tests` job (#3844 )	2025-01-28 14:13:14 +05:30
sanish chirayath	05be59f00c	style: update StyledWrapper to use flex layout and adjust dialog positioning (#3888 )	2025-01-27 18:49:05 +05:30
tlaloc911	fee631d496	passing defaults instead of axiosInstance to NTLMClient (#3841 )	2025-01-18 21:34:19 +05:30
Bobby Bonestell	d03de2b622	fix: Inherited apikey auth mapping for bruno-cli (#3512 ) * Added bruno-cli support for mapping inherited apikey auth from collection Co-authored-by: Anoop M D <anoop.md1421@gmail.com>	2025-01-17 20:33:53 +05:30
sanish chirayath	31b2818821	fix: modal - provide default handleConfirm function and update dependencies in useEffect (#3830 )	2025-01-17 14:52:06 +05:30
naman-bruno	8a71dfc022	enhancement: moved collection click area from name to div (#3813 )	2025-01-17 13:20:53 +05:30
naman-bruno	3e6204e49b	Fix: Horizontal Rules missing in markdown docs preview (#3814 )	2025-01-17 13:10:16 +05:30
naman-bruno	dab4bb6a1c	fix: hide env dropdown on configure (#3826 )	2025-01-17 13:07:39 +05:30
Anoop M D	3c8cb702f5	feat: added icons to env modal buttons	2025-01-17 02:46:06 +05:30
Hadi	2df7fd6588	Added activate button to environment window. (#1531 ) Co-authored-by: Anoop M D <anoop.md1421@gmail.com>	2025-01-17 02:12:33 +05:30
Sanjai Kumar	e5d7cd1be9	feat: add rspack dynamic import configuration to rsbuild (#3819 )	2025-01-16 20:11:49 +05:30
pooja-bruno	2bce9b3716	add: document save button for folder and collection settings (#3742 )	2025-01-16 20:09:51 +05:30
naman-bruno	5bfcc9b6e7	Fix: Path table is removed when we rearrange items (#3804 )	2025-01-16 20:08:30 +05:30
naman-bruno	472b5452f7	Allow rearrangement of table items in params, body, vars, headers, etc… (#3801 ) * Allow rearrangement of table items in params, body, vars, headers, and assert * updated drag function name	2025-01-16 20:06:53 +05:30
pooja-bruno	5b04e0c189	fix: renaming first collection env (#3735 )	2025-01-16 20:04:34 +05:30
pooja-bruno	3da12a05db	fix: body formurl value disappearing (#3803 )	2025-01-16 20:01:48 +05:30
naman-bruno	a73d2a02cf	fix: Request vars displayed in red color in body even if they are valid (#3812 ) * fix: Request vars displayed in red color in body * chore: removing index import --------- Co-authored-by: Anoop M D <anoop.md1421@gmail.com>	2025-01-16 19:59:14 +05:30
lohit	63d3cb380d	Merge pull request #3806 from Pragadesh-45/fix/handle-assert-results Chore/ Remove Unused `RemoveQuotes` function	2025-01-15 20:47:31 +05:30
Pragadesh-45	10a5935a12	Merge branch 'usebruno:main' into fix/handle-assert-results	2025-01-15 20:43:10 +05:30
Pragadesh-45	cf2cb0736e	fix: remove commented-out `removeQuotes()` function	2025-01-15 20:42:02 +05:30
lohit	6abd063749	Merge pull request #3805 from Pragadesh-45/fix/handle-assert-results Refactor: Improve expression handling across different runtimes (Fix: #3758)	2025-01-15 20:36:07 +05:30
Pragadesh-45	dbf1cad124	fix: remove `removeQuotes()`	2025-01-15 19:57:06 +05:30
lohit	00c5298b7d	Merge pull request #3798 from Pragadesh-45/main chore: version bump	2025-01-15 15:12:03 +05:30
Pragadesh-45	27ef28ae9b	chore: version bump	2025-01-15 13:15:21 +05:30
Pragadesh-45	abb0a7b0db	chore: version bump	2025-01-15 13:08:44 +05:30
Anoop M D	d2d7638a54	chore: updated package-lock	2025-01-13 18:49:45 +05:30
tlaloc911	5500070b49	ntlm auth (#3329 ) Co-authored-by: Anoop M D <anoop.md1421@gmail.com>	2025-01-13 18:48:26 +05:30
Tim Nikischin	72b8c547b2	Order Variables alphabetically (#2982 ) Order variables in Variables Tab alphabetically by name	2025-01-13 18:36:08 +05:30