Enhance error handling for script execution by introducing isScriptError flag in test results (#7029 )

* fix: Enhance error handling for script execution by introducing isScriptError flag in test results
Mark test script errors as failed in runner (#6261 )
2026-07-08 06:28:33 +00:00 · 2026-02-04 12:01:42 +05:30 · 2026-02-02 16:49:19 +05:30 · 2026-02-02 15:53:32 +05:30 · 2026-02-02 14:04:46 +05:30 · 2026-02-02 12:38:51 +05:30
269 changed files with 15314 additions and 2679 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -55,6 +55,7 @@ bruno.iml

 # Development plan files
 CLAUDE.md
+AGENTS.md
 *.plan.md

 # packages dist
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,7 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120
-}
--- a/CODING_STANDARDS.md
+++ b/CODING_STANDARDS.md
@@ -66,7 +66,16 @@ Remember, these rules are here to make our codebase harmonious. If something doe

 - Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any react component using the styled component 
 - Styled Components are used as wrappers to define both self and children components style, tailwind classes are used specifically for layout based styles. 
- Styled Component CSS might also change layout but tailwind classes shouldn't define colors. 
+- Styled Component CSS might also change layout but tailwind classes shouldn't define colors.
+- MUST: Prefer custom hooks for business logic, data fetching, and side-effects.
+- MUST: Avoid `useEffect` unless absolutely needed. Prefer derived state, event handlers.
+- SHOULD: Memoize only when necessary (`useMemo`/`useCallback`), and prefer moving logic into hooks first.
+- MUST: Do not use namespace access for hooks in app code (e.g., `React.useCallback`, `React.useMemo`, `React.useState`). Import hooks directly.
+  - Correct: `import { useCallback, useMemo, useState } from "react";`
+  - Avoid: `import * as React from "react";` then `React.useCallback(...)`
+- Add `data-testid` to testable elements for Playwright
+- Co-locate utilities that are truly component-specific next to the component, otherwise place shared items under a common folder
+

 ## Readability and Abstractions

--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
        "@types/node": "^22.14.1",
        "@typescript-eslint/parser": "^8.39.0",
        "concurrently": "^8.2.2",
+        "cross-env": "10.1.0",
        "eslint": "^9.26.0",
        "eslint-plugin-diff": "^2.0.3",
        "fs-extra": "^11.1.1",
@@ -3771,6 +3772,13 @@
      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
      "license": "MIT"
    },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.25.12",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -13872,22 +13880,21 @@
      }
    },
    "node_modules/cross-env": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "cross-spawn": "^7.0.1"
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
      },
      "bin": {
-        "cross-env": "src/bin/cross-env.js",
-        "cross-env-shell": "src/bin/cross-env-shell.js"
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
      },
      "engines": {
-        "node": ">=10.14",
-        "npm": ">=6",
-        "yarn": ">=1"
+        "node": ">=20"
      }
    },
    "node_modules/cross-fetch": {
@@ -30060,7 +30067,7 @@
        "polished": "^4.3.1",
        "posthog-node": "4.2.1",
        "prettier": "^2.7.1",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
        "query-string": "^7.0.1",
        "react": "19.0.0",
        "react-copy-to-clipboard": "^5.1.0",
@@ -31447,6 +31454,25 @@
        "url": "https://opencollective.com/core-js"
      }
    },
+    "packages/bruno-app/node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
    "packages/bruno-app/node_modules/electron-to-chromium": {
      "version": "1.5.157",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.157.tgz",
@@ -31516,6 +31542,21 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "packages/bruno-app/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "packages/bruno-app/node_modules/react-virtuoso": {
      "version": "4.18.1",
      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.18.1.tgz",
@@ -31611,7 +31652,7 @@
        "iconv-lite": "^0.6.3",
        "js-yaml": "^4.1.1",
        "lodash": "^4.17.21",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
        "socks-proxy-agent": "^8.0.2",
        "xmlbuilder": "^15.1.1",
        "yargs": "^17.6.2"
@@ -32661,6 +32702,21 @@
        "node": ">=12"
      }
    },
+    "packages/bruno-cli/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "packages/bruno-common": {
      "name": "@usebruno/common",
      "version": "0.1.0",
@@ -33246,9 +33302,9 @@
      "license": "MIT"
    },
    "packages/bruno-converters/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
      "dev": true,
      "license": "ISC",
      "dependencies": {
@@ -33351,7 +33407,7 @@
        "lodash": "^4.17.21",
        "mime-types": "^2.1.35",
        "nanoid": "3.3.8",
-        "qs": "^6.11.0",
+        "qs": "^6.14.1",
        "socks-proxy-agent": "^8.0.2",
        "tough-cookie": "^6.0.0",
        "uuid": "^9.0.0",
@@ -34837,6 +34893,21 @@
      "dev": true,
      "license": "MIT"
    },
+    "packages/bruno-electron/node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "packages/bruno-electron/node_modules/semver": {
      "version": "7.7.2",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -35200,7 +35271,10 @@
        "debug": "^4.4.3",
        "google-protobuf": "^4.0.0",
        "grpc-js-reflection-client": "^1.3.0",
+        "http-proxy-agent": "~7.0.2",
+        "https-proxy-agent": "~7.0.6",
        "is-ip": "^5.0.1",
+        "socks-proxy-agent": "~8.0.5",
        "system-ca": "^2.0.1",
        "tough-cookie": "^6.0.0",
        "ws": "^8.18.3"
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
    "@types/node": "^22.14.1",
    "@typescript-eslint/parser": "^8.39.0",
    "concurrently": "^8.2.2",
+    "cross-env": "10.1.0",
    "eslint": "^9.26.0",
    "eslint-plugin-diff": "^2.0.3",
    "fs-extra": "^11.1.1",
@@ -59,7 +60,6 @@
    "dev:watch": "node ./scripts/dev-hot-reload.js",
    "dev:web": "npm run dev --workspace=packages/bruno-app",
    "build:web": "npm run build --workspace=packages/bruno-app",
-    "prettier:web": "npm run prettier --workspace=packages/bruno-app",
    "dev:electron": "npm run dev --workspace=packages/bruno-electron",
    "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
    "storybook": "npm run storybook --workspace=packages/bruno-app",
@@ -78,12 +78,12 @@
    "build:electron:rpm": "./scripts/build-electron.sh rpm",
    "build:electron:snap": "./scripts/build-electron.sh snap",
    "watch:common": "npm run watch --workspace=packages/bruno-common",
+    "watch:requests": "npm run watch --workspace=packages/bruno-requests",
    "test:codegen": "node playwright/codegen.ts",
    "test:e2e": "playwright test --project=default",
    "test:e2e:ssl": "playwright test --project=ssl",
-    "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "lint": "node --max_old_space_size=4096 $(npx which eslint)",
-    "lint:fix": "node --max_old_space_size=4096 $(npx which eslint) --fix",
+    "lint": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" npx eslint",
+    "lint:fix": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" npx eslint --fix",
    "prepare": "husky"
  },
  "nano-staged": {
@@ -102,4 +102,4 @@
  "dependencies": {
    "ajv": "^8.17.1"
  }
-}
+}
--- a/packages/bruno-app/.prettierrc.json
+++ b/packages/bruno-app/.prettierrc.json
@@ -1,7 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120
-}
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -8,8 +8,6 @@
    "build": "rsbuild build -m production",
    "preview": "rsbuild preview",
    "test": "jest",
-    "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
-    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\"",
    "storybook": "storybook dev -p 6006 --config-dir storybook",
    "build-storybook": "storybook build --config-dir storybook"
  },
@@ -69,7 +67,7 @@
    "polished": "^4.3.1",
    "posthog-node": "4.2.1",
    "prettier": "^2.7.1",
-    "qs": "^6.11.0",
+    "qs": "^6.14.1",
    "query-string": "^7.0.1",
    "react": "19.0.0",
    "react-copy-to-clipboard": "^5.1.0",
@@ -132,4 +130,4 @@
      "form-data": "4.0.4"
    }
  }
-}
+}
--- a/packages/bruno-app/src/components/AppTitleBar/AppMenu/StyledWrapper.js
+++ b/packages/bruno-app/src/components/AppTitleBar/AppMenu/StyledWrapper.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  -webkit-app-region: no-drag;
+
+  .shortcut {
+    font-size: 11px;
+    color: ${(props) => props.theme.dropdown.mutedText};
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/AppTitleBar/AppMenu/index.js
+++ b/packages/bruno-app/src/components/AppTitleBar/AppMenu/index.js
@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { IconMenu2 } from '@tabler/icons';
+import MenuDropdown from 'ui/MenuDropdown';
+import ActionIcon from 'ui/ActionIcon';
+import StyledWrapper from './StyledWrapper';
+
+const AppMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { ipcRenderer } = window;
+
+  const menuItems = [
+    {
+      id: 'file',
+      label: 'File',
+      submenu: [
+        {
+          id: 'open-collection',
+          label: 'Open Collection',
+          onClick: () => ipcRenderer?.invoke('renderer:open-collection')
+        },
+        { type: 'divider', id: 'file-div-1' },
+        {
+          id: 'preferences',
+          label: 'Preferences',
+          rightSection: <span className="shortcut">Ctrl+,</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:open-preferences')
+        },
+        { type: 'divider', id: 'file-div-2' },
+        {
+          id: 'quit',
+          label: 'Quit',
+          rightSection: <span className="shortcut">Alt+F4</span>,
+          onClick: () => ipcRenderer?.send('renderer:window-close')
+        }
+      ]
+    },
+    {
+      id: 'edit',
+      label: 'Edit',
+      submenu: [
+        {
+          id: 'undo',
+          label: 'Undo',
+          rightSection: <span className="shortcut">Ctrl+Z</span>,
+          onClick: () => document.execCommand('undo')
+        },
+        {
+          id: 'redo',
+          label: 'Redo',
+          rightSection: <span className="shortcut">Ctrl+Y</span>,
+          onClick: () => document.execCommand('redo')
+        },
+        { type: 'divider', id: 'edit-div-1' },
+        {
+          id: 'cut',
+          label: 'Cut',
+          rightSection: <span className="shortcut">Ctrl+X</span>,
+          onClick: () => document.execCommand('cut')
+        },
+        {
+          id: 'copy',
+          label: 'Copy',
+          rightSection: <span className="shortcut">Ctrl+C</span>,
+          onClick: () => document.execCommand('copy')
+        },
+        {
+          id: 'paste',
+          label: 'Paste',
+          rightSection: <span className="shortcut">Ctrl+V</span>,
+          onClick: () => document.execCommand('paste')
+        },
+        { type: 'divider', id: 'edit-div-2' },
+        {
+          id: 'select-all',
+          label: 'Select All',
+          rightSection: <span className="shortcut">Ctrl+A</span>,
+          onClick: () => document.execCommand('selectAll')
+        }
+      ]
+    },
+    {
+      id: 'view',
+      label: 'View',
+      submenu: [
+        {
+          id: 'toggle-devtools',
+          label: 'Developer Tools',
+          rightSection: <span className="shortcut">Ctrl+Shift+I</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:toggle-devtools')
+        },
+        { type: 'divider', id: 'view-div-1' },
+        {
+          id: 'reset-zoom',
+          label: 'Reset Zoom',
+          rightSection: <span className="shortcut">Ctrl+0</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:reset-zoom')
+        },
+        {
+          id: 'zoom-in',
+          label: 'Zoom In',
+          rightSection: <span className="shortcut">Ctrl++</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:zoom-in')
+        },
+        {
+          id: 'zoom-out',
+          label: 'Zoom Out',
+          rightSection: <span className="shortcut">Ctrl+-</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:zoom-out')
+        },
+        { type: 'divider', id: 'view-div-2' },
+        {
+          id: 'toggle-fullscreen',
+          label: 'Full Screen',
+          rightSection: <span className="shortcut">F11</span>,
+          onClick: () => ipcRenderer?.invoke('renderer:toggle-fullscreen')
+        }
+      ]
+    },
+    {
+      id: 'help',
+      label: 'Help',
+      submenu: [
+        {
+          id: 'about',
+          label: 'About Bruno',
+          onClick: () => ipcRenderer?.invoke('renderer:open-about')
+        },
+        {
+          id: 'documentation',
+          label: 'Documentation',
+          onClick: () => ipcRenderer?.invoke('renderer:open-docs')
+        }
+      ]
+    }
+  ];
+
+  return (
+    <StyledWrapper>
+      <MenuDropdown
+        opened={isOpen}
+        onChange={setIsOpen}
+        placement="bottom-start"
+        showTickMark={false}
+        items={menuItems}
+      >
+        <ActionIcon label="Menu" size="lg">
+          <IconMenu2 size={16} stroke={1.5} />
+        </ActionIcon>
+      </MenuDropdown>
+    </StyledWrapper>
+  );
+};
+
+export default AppMenu;
--- a/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
@@ -210,6 +210,10 @@ const Wrapper = styled.div`
    margin-left: 6px;
  }

+  .app-menu {
+    margin-left: 8px;
+  }
+
  /* Custom window control buttons for Windows - always interactive, above modal overlay */
  .window-controls {
    display: flex;
--- a/packages/bruno-app/src/components/AppTitleBar/index.js
+++ b/packages/bruno-app/src/components/AppTitleBar/index.js
@@ -17,6 +17,7 @@ import CreateWorkspace from 'components/WorkspaceSidebar/CreateWorkspace';
 import ImportWorkspace from 'components/WorkspaceSidebar/ImportWorkspace';

 import IconBottombarToggle from 'components/Icons/IconBottombarToggle/index';
+import AppMenu from './AppMenu';
 import StyledWrapper from './StyledWrapper';
 import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
 import { isMacOS, isWindowsOS, isLinuxOS } from 'utils/common/platform';
@@ -247,8 +248,9 @@ const AppTitleBar = () => {
      )}

      <div className="titlebar-content">
-        {/* Left section: Home + Workspace */}
        <div className="titlebar-left">
+          {showWindowControls && <AppMenu />}
+
          <ActionIcon onClick={handleHomeClick} label="Home" size="lg" className="home-button">
            <IconHome size={16} stroke={1.5} />
          </ActionIcon>
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -5,10 +5,10 @@
 *  LICENSE file in the root directory of this source tree.
 */

-import React from 'react';
+import React, { createRef } from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import { setupAutoComplete } from 'utils/codemirror/autocomplete';
+import { setupAutoComplete, showRootHints } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
@@ -16,7 +16,7 @@ import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
 import { setupLinkAware } from 'utils/codemirror/linkAware';
 import { setupLintErrorTooltip } from 'utils/codemirror/lint-errors';
-import CodeMirrorSearch from 'components/CodeMirrorSearch';
+import CodeMirrorSearch from 'components/CodeMirrorSearch/index';

 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -34,6 +34,7 @@ export default class CodeEditor extends React.Component {
    this.cachedValue = props.value || '';
    this.variables = {};
    this.searchResultsCountElementId = 'search-results-count';
+    this.searchBarRef = createRef();

    this.lintOptions = {
      esversion: 11,
@@ -94,14 +95,14 @@ export default class CodeEditor extends React.Component {
          }
        },
        'Cmd-F': (cm) => {
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
-          }
+          this.setState({ searchBarVisible: true }, () => {
+            this.searchBarRef.current?.focus();
+          });
        },
        'Ctrl-F': (cm) => {
-          if (!this.state.searchBarVisible) {
-            this.setState({ searchBarVisible: true });
-          }
+          this.setState({ searchBarVisible: true }, () => {
+            this.searchBarRef.current?.focus();
+          });
        },
        'Cmd-H': 'replace',
        'Ctrl-H': 'replace',
@@ -111,8 +112,12 @@ export default class CodeEditor extends React.Component {
            : cm.replaceSelection('  ', 'end');
        },
        'Shift-Tab': 'indentLess',
-        'Ctrl-Space': 'autocomplete',
-        'Cmd-Space': 'autocomplete',
+        'Ctrl-Space': (cm) => {
+          showRootHints(cm, this.props.showHintsFor);
+        },
+        'Cmd-Space': (cm) => {
+          showRootHints(cm, this.props.showHintsFor);
+        },
        'Ctrl-Y': 'foldAll',
        'Cmd-Y': 'foldAll',
        'Ctrl-I': 'unfoldAll',
@@ -305,6 +310,10 @@ export default class CodeEditor extends React.Component {
        fontSize={this.props.fontSize}
      >
        <CodeMirrorSearch
+          ref={(node) => {
+            if (!node) return;
+            this.searchBarRef.current = node;
+          }}
          visible={this.state.searchBarVisible}
          editor={this.editor}
          onClose={() => this.setState({ searchBarVisible: false })}
--- a/packages/bruno-app/src/components/CodeMirrorSearch/index.js
+++ b/packages/bruno-app/src/components/CodeMirrorSearch/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
 import { IconRegex, IconArrowUp, IconArrowDown, IconX, IconLetterCase, IconLetterW } from '@tabler/icons';
 import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';
@@ -8,7 +8,7 @@ function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');
 }

-const CodeMirrorSearch = ({ visible, editor, onClose }) => {
+const CodeMirrorSearch = forwardRef(({ visible, editor, onClose }, ref) => {
  const [searchText, setSearchText] = useState('');
  const [regex, setRegex] = useState(false);
  const [caseSensitive, setCaseSensitive] = useState(false);
@@ -19,6 +19,7 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
  const searchMarks = useRef([]);
  const searchLineHighlight = useRef(null);
  const searchMatches = useRef([]);
+  const inputRef = useRef(null);

  const debouncedSearchText = useDebounce(searchText, 150);

@@ -106,6 +107,14 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
    }
  }, [debouncedSearchText, regex, caseSensitive, wholeWord, editor, memoizedMatches]);

+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }
+  }));
+
  useEffect(() => {
    doSearch(0, debouncedSearchText);
  }, [debouncedSearchText, doSearch]);
@@ -168,6 +177,7 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
    <StyledWrapper>
      <div className="bruno-search-bar">
        <input
+          ref={inputRef}
          autoFocus
          type="text"
          value={searchText}
@@ -196,6 +206,6 @@ const CodeMirrorSearch = ({ visible, editor, onClose }) => {
      </div>
    </StyledWrapper>
  );
-};
+});

 export default CodeMirrorSearch;
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
@@ -11,6 +11,7 @@ import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
 import Button from 'ui/Button';
+import { headerNameRegex, headerValueRegex } from 'utils/common/regex';

 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

@@ -32,6 +33,22 @@ const Headers = ({ collection }) => {

  const handleSave = () => dispatch(saveCollectionSettings(collection.uid));

+  const getRowError = useCallback((row, index, key) => {
+    if (key === 'name') {
+      if (!row.name || row.name.trim() === '') return null;
+      if (!headerNameRegex.test(row.name)) {
+        return 'Header name cannot contain spaces or newlines';
+      }
+    }
+    if (key === 'value') {
+      if (!row.value) return null;
+      if (!headerValueRegex.test(row.value)) {
+        return 'Header value cannot contain newlines';
+      }
+    }
+    return null;
+  }, []);
+
  const columns = [
    {
      key: 'name',
@@ -39,7 +56,7 @@ const Headers = ({ collection }) => {
      isKeyField: true,
      placeholder: 'Name',
      width: '30%',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -47,7 +64,7 @@ const Headers = ({ collection }) => {
          onChange={(newValue) => onChange(newValue.replace(/[\r\n]/g, ''))}
          autocomplete={headerAutoCompleteList}
          collection={collection}
-          placeholder={isLastEmptyRow ? 'Name' : ''}
+          placeholder={!value ? 'Name' : ''}
        />
      )
    },
@@ -55,7 +72,7 @@ const Headers = ({ collection }) => {
      key: 'value',
      name: 'Value',
      placeholder: 'Value',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -63,7 +80,7 @@ const Headers = ({ collection }) => {
          onChange={onChange}
          collection={collection}
          autocomplete={MimeTypes}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
@@ -101,6 +118,7 @@ const Headers = ({ collection }) => {
        rows={headers}
        onChange={handleHeadersChange}
        defaultRow={defaultRow}
+        getRowError={getRowError}
      />
      <div className="flex justify-end mt-2">
        <button className="text-link select-none" onClick={toggleBulkEditMode}>
--- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@@ -6,20 +6,38 @@ import { updateCollectionRequestScript, updateCollectionResponseScript } from 'p
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
+import StatusDot from 'components/StatusDot';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';

 const Script = ({ collection }) => {
  const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('pre-request');
  const preRequestEditorRef = useRef(null);
  const postResponseEditorRef = useRef(null);
  const requestScript = collection.draft?.root ? get(collection, 'draft.root.request.script.req', '') : get(collection, 'root.request.script.req', '');
  const responseScript = collection.draft?.root ? get(collection, 'draft.root.request.script.res', '') : get(collection, 'root.request.script.res', '');

+  // Default to post-response if pre-request script is empty
+  const getInitialTab = () => {
+    const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+    return hasPreRequestScript ? 'pre-request' : 'post-response';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab);
+  const prevCollectionUidRef = useRef(collection.uid);
+
  const { displayedTheme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);

+  // Update active tab only when switching to a different collection
+  useEffect(() => {
+    if (prevCollectionUidRef.current !== collection.uid) {
+      prevCollectionUidRef.current = collection.uid;
+      const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+      setActiveTab(hasPreRequestScript ? 'pre-request' : 'post-response');
+    }
+  }, [collection.uid, requestScript]);
+
  // Refresh CodeMirror when tab becomes visible
  useEffect(() => {
    const timer = setTimeout(() => {
@@ -63,8 +81,14 @@ const Script = ({ collection }) => {

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
-          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
-          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+          <TabsTrigger value="pre-request">
+            Pre Request
+            {requestScript && requestScript.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="post-response">
+            Post Response
+            {responseScript && responseScript.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
        </TabsList>

        <TabsContent value="pre-request" className="mt-2">
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/VarsTable/index.js
@@ -46,14 +46,14 @@ const VarsTable = ({ collection, vars, varType }) => {
        </div>
      ),
      placeholder: varType === 'request' ? 'Value' : 'Expr',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <MultiLineEditor
          value={value || ''}
          theme={storedTheme}
          onSave={onSave}
          onChange={onChange}
          collection={collection}
-          placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+          placeholder={!value ? (varType === 'request' ? 'Value' : 'Expr') : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/ColorBadge/index.js
+++ b/packages/bruno-app/src/components/ColorBadge/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTheme } from 'providers/Theme';
+
+const ColorBadge = ({ color, size = 10, showEmptyBorder = true }) => {
+  const sizeValue = typeof size === 'string' ? size : `${size}px`;
+  const { theme } = useTheme();
+
+  const showBorder = !color && showEmptyBorder;
+
+  return (
+    <div
+      className="flex-shrink-0 rounded-full"
+      style={{
+        width: sizeValue,
+        height: sizeValue,
+        backgroundColor: color || 'transparent',
+        border: showBorder ? '1px solid' : 'none',
+        borderColor: showBorder ? theme.background.surface1 : 'transparent'
+      }}
+    />
+  );
+};
+
+export default ColorBadge;
--- a/packages/bruno-app/src/components/ColorPicker/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ColorPicker/StyledWrapper.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/ColorPicker/index.js
+++ b/packages/bruno-app/src/components/ColorPicker/index.js
@@ -0,0 +1,164 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { IconBan, IconBrush } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import ColorBadge from 'components/ColorBadge';
+import StyledWrapper from './StyledWrapper';
+import { parseToRgb, toColorString } from 'polished';
+import ColorRangePicker from 'components/ColorRange/index';
+
+const PRESET_COLORS = [
+  '#CE4F3B',
+  '#2E8A54',
+  '#346AB2',
+  '#C77A0F',
+  '#B83D7F',
+  '#8D44B2'
+];
+
+const COLOR_RANGE_SEQUENCE = ['#D85D43', '#F4BB74', '#61DCB1', '#7EBDF2', '#D48ADE', '#B491E5'];
+
+/**
+ * @param {string} hex
+ * @returns {red:string,green:string,blue:string}
+ */
+const hexToRgb = (hex) => {
+  try {
+    return parseToRgb(hex);
+  } catch (err) {
+    return { red: 0, green: 0, blue: 0 };
+  }
+};
+
+const rgbToHex = (r, g, b) => {
+  return toColorString({ red: Math.round(r), green: Math.round(g), blue: Math.round(b) });
+};
+
+const interpolateColor = (position) => {
+  const numColors = COLOR_RANGE_SEQUENCE.length;
+  const scaledPos = (position / 100) * (numColors - 1);
+  const index = Math.floor(scaledPos);
+  const fraction = scaledPos - index;
+
+  if (index >= numColors - 1) {
+    return COLOR_RANGE_SEQUENCE[numColors - 1];
+  }
+
+  const color1 = hexToRgb(COLOR_RANGE_SEQUENCE[index]);
+  const color2 = hexToRgb(COLOR_RANGE_SEQUENCE[index + 1]);
+
+  const r = color1.red + (color2.red - color1.red) * fraction;
+  const g = color1.green + (color2.green - color1.green) * fraction;
+  const b = color1.blue + (color2.blue - color1.blue) * fraction;
+
+  return rgbToHex(r, g, b);
+};
+
+const findClosestPosition = (hex) => {
+  if (!hex) return 0;
+  const target = hexToRgb(hex);
+  let closestPos = 0;
+  let minDistance = Infinity;
+
+  for (let pos = 0; pos <= 100; pos++) {
+    const color = hexToRgb(interpolateColor(pos));
+    const distance = Math.sqrt(
+      Math.pow(target.red - color.red, 2) + Math.pow(target.green - color.green, 2) + Math.pow(target.blue - color.blue, 2)
+    );
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestPos = pos;
+    }
+  }
+  return closestPos;
+};
+
+const ColorPickerIcon = ({ color }) => {
+  if (color) {
+    return <ColorBadge color={color} size={8} />;
+  }
+  return <IconBrush size={14} strokeWidth={1.5} className="opacity-70" />;
+};
+
+const ColorPicker = ({ color, onChange, icon }) => {
+  const [sliderPosition, setSliderPosition] = useState(() =>
+    color && !PRESET_COLORS.includes(color) ? findClosestPosition(color) : 0
+  );
+  const [customColor, setCustomColor] = useState(() =>
+    color && !PRESET_COLORS.includes(color) ? color : COLOR_RANGE_SEQUENCE[0]
+  );
+  const pendingColorRef = useRef(customColor);
+
+  const handleColorSelect = (selectedColor) => {
+    onChange(selectedColor);
+  };
+
+  const handleSliderChange = (e) => {
+    const newPosition = parseInt(e.target.value, 10);
+    setSliderPosition(newPosition);
+    const newColor = interpolateColor(newPosition);
+    setCustomColor(newColor);
+    pendingColorRef.current = newColor;
+  };
+
+  const handleSliderEnd = () => {
+    onChange(pendingColorRef.current);
+  };
+
+  const defaultIcon = (
+    <div className="cursor-pointer flex items-center" title="Change color">
+      <ColorPickerIcon color={color} />
+    </div>
+  );
+
+  const colorPickerContent = (
+    <StyledWrapper>
+      <div className="p-2">
+        <div className="flex flex-wrap gap-1.5 justify-between items-center">
+          <div
+            className="w-5 h-5 cursor-pointer flex items-center justify-center transition-transform duration-100 hover:scale-110"
+            onClick={() => handleColorSelect(null)}
+            title="No color"
+          >
+            <IconBan size={20} strokeWidth={1.5} />
+          </div>
+          {PRESET_COLORS.map((presetColor, index) => (
+            <div
+              key={index}
+              className={`w-5 h-5 rounded cursor-pointer flex items-center justify-center transition-transform duration-100 hover:scale-110 border-2 border-transparent
+                ${color === presetColor ? 'border-solid !border-current' : ''}
+              `}
+              style={{ backgroundColor: presetColor }}
+              onClick={() => handleColorSelect(presetColor)}
+              title={presetColor}
+            />
+          ))}
+        </div>
+
+        <div className="flex items-center gap-2 mt-2 pt-2">
+          <div
+            className="w-4 h-4 rounded-full flex-shrink-0 cursor-pointer"
+            style={{ backgroundColor: customColor }}
+            onClick={() => handleColorSelect(customColor)}
+            title="Custom color"
+          />
+          <ColorRangePicker
+            className="flex-1"
+            value={sliderPosition}
+            onChange={handleSliderChange}
+            onMouseUp={handleSliderEnd}
+            selectedColor={customColor}
+            colorRange={COLOR_RANGE_SEQUENCE}
+          />
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+
+  return (
+    <Dropdown icon={icon || defaultIcon} placement="bottom-start">
+      {colorPickerContent}
+    </Dropdown>
+  );
+};
+
+export default ColorPicker;
--- a/packages/bruno-app/src/components/ColorRange/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ColorRange/StyledWrapper.js
@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .hue-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 4px;
+    border-radius: 2px;
+    outline: none;
+  }
+
+  .hue-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: ${(props) => props.color ?? props.theme.bg};
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: transform 0.1s ease;
+  }
+
+  .hue-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  .hue-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: ${(props) => props.color ?? props.theme.bg};
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: transform 0.1s ease;
+  }
+
+  .hue-slider::-moz-range-thumb:hover {
+    transform: scale(1.1);
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/ColorRange/index.js
+++ b/packages/bruno-app/src/components/ColorRange/index.js
@@ -0,0 +1,23 @@
+import StyledWrapper from './StyledWrapper';
+
+const ColorRangePicker = ({ selectedColor, className, value, onChange, colorRange, ...props }) => {
+  return (
+    <StyledWrapper color={selectedColor}>
+      <input
+        type="range"
+        min="0"
+        max="100"
+        value={value}
+        onChange={onChange}
+        className={`hue-slider ${className}`}
+        style={{
+          background: `linear-gradient(to right, ${colorRange.join(',')})`
+        }}
+        title="Adjust color"
+        {...props}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default ColorRangePicker;
--- a/packages/bruno-app/src/components/CreateTransientRequest/index.js
+++ b/packages/bruno-app/src/components/CreateTransientRequest/index.js
@@ -0,0 +1,245 @@
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { IconPlus, IconApi, IconBrandGraphql, IconPlugConnected, IconCode } from '@tabler/icons';
+import ActionIcon from 'ui/ActionIcon/index';
+import Dropdown from 'components/Dropdown';
+import { newHttpRequest, newGrpcRequest, newWsRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { sanitizeName } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+import { useDispatch, useSelector } from 'react-redux';
+import { flattenItems, isItemARequest, isItemTransientRequest } from 'utils/collections';
+import filter from 'lodash/filter';
+import { get } from 'lodash';
+
+const REQUEST_TYPE = {
+  HTTP: 'http',
+  GRAPHQL: 'graphql',
+  GRPC: 'grpc',
+  WEBSOCKET: 'websocket'
+};
+
+/**
+ * Generate a request name for transient requests in the pattern "Untitled {Count}"
+ * @param {Object} collection - The collection object
+ * @returns {string} A request name like "Untitled 1", "Untitled 2", etc.
+ */
+const generateTransientRequestName = (collection) => {
+  if (!collection || !collection.items) {
+    return 'Untitled 1';
+  }
+  const allItems = flattenItems(collection.items);
+  const transientRequests = filter(allItems, (item) => {
+    return isItemTransientRequest(item);
+  });
+
+  // Find the highest "Untitled X" number among transient requests
+  let maxNumber = 0;
+  transientRequests.forEach((item) => {
+    const match = item.name?.match(/^Untitled (\d+)$/);
+    if (match) {
+      const number = parseInt(match[1], 10);
+      if (number > maxNumber) {
+        maxNumber = number;
+      }
+    }
+  });
+
+  // Increment from the highest number found, or start at 1 if none found
+  const count = maxNumber + 1;
+
+  return `Untitled ${count}`;
+};
+
+const CreateTransientRequest = ({ collectionUid }) => {
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const dropdownTippyRef = useRef();
+  const dispatch = useDispatch();
+  const collections = useSelector((state) => state.collections.collections);
+
+  const collection = useMemo(() => {
+    return collections?.find((c) => c.uid === collectionUid);
+  }, [collections]);
+
+  const collectionPresets = useMemo(() => {
+    return get(collection, collection?.draft?.brunoConfig ? 'draft.brunoConfig.presets' : 'brunoConfig.presets', {
+      requestType: 'http',
+      requestUrl: ''
+    });
+  }, [collection]);
+
+  const onDropdownCreate = (ref) => {
+    dropdownTippyRef.current = ref;
+    if (ref) {
+      ref.setProps({
+        onHide: () => {
+          setDropdownVisible(false);
+        }
+      });
+    }
+  };
+
+  const handleLeftClick = () => {
+    handleItemClick(collectionPresets.requestType);
+  };
+
+  const handleRightClick = (e) => {
+    e.preventDefault();
+    setDropdownVisible(true);
+  };
+
+  const handleCreateHttpRequest = useCallback(() => {
+    if (!collection) return;
+
+    const uniqueName = generateTransientRequestName(collection);
+    const filename = sanitizeName(uniqueName);
+
+    dispatch(
+      newHttpRequest({
+        requestName: uniqueName,
+        filename: filename,
+        requestType: 'http-request',
+        requestUrl: collectionPresets.requestUrl,
+        requestMethod: 'GET',
+        collectionUid: collection.uid,
+        itemUid: null,
+        isTransient: true
+      })
+    ).catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+  }, [dispatch, collection, collectionPresets.requestUrl]);
+
+  const handleCreateGraphQLRequest = useCallback(() => {
+    if (!collection) return;
+
+    const uniqueName = generateTransientRequestName(collection);
+    const filename = sanitizeName(uniqueName);
+
+    dispatch(
+      newHttpRequest({
+        requestName: uniqueName,
+        filename: filename,
+        requestType: 'graphql-request',
+        requestUrl: collectionPresets.requestUrl,
+        requestMethod: 'POST',
+        collectionUid: collection.uid,
+        itemUid: null,
+        isTransient: true,
+        body: {
+          mode: 'graphql',
+          graphql: {
+            query: '',
+            variables: ''
+          }
+        }
+      })
+    ).catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+  }, [dispatch, collection, collectionPresets.requestUrl]);
+
+  const handleCreateWebSocketRequest = useCallback(() => {
+    if (!collection) return;
+
+    const uniqueName = generateTransientRequestName(collection);
+    const filename = sanitizeName(uniqueName);
+
+    dispatch(
+      newWsRequest({
+        requestName: uniqueName,
+        filename: filename,
+        requestUrl: collectionPresets.requestUrl,
+        requestMethod: 'ws',
+        collectionUid: collection.uid,
+        itemUid: null,
+        isTransient: true
+      })
+    ).catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+  }, [dispatch, collection, collectionPresets.requestUrl]);
+
+  const handleCreateGrpcRequest = useCallback(() => {
+    if (!collection) return;
+
+    const uniqueName = generateTransientRequestName(collection);
+    const filename = sanitizeName(uniqueName);
+
+    dispatch(
+      newGrpcRequest({
+        requestName: uniqueName,
+        filename: filename,
+        requestUrl: collectionPresets.requestUrl,
+        collectionUid: collection.uid,
+        itemUid: null,
+        isTransient: true
+      })
+    ).catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+  }, [dispatch, collection, collectionPresets.requestUrl]);
+
+  const handleItemClick = (type) => {
+    if (dropdownTippyRef.current) {
+      dropdownTippyRef.current.hide();
+    }
+    switch (type) {
+      case REQUEST_TYPE.HTTP:
+        handleCreateHttpRequest();
+        break;
+      case REQUEST_TYPE.GRAPHQL:
+        handleCreateGraphQLRequest();
+        break;
+      case REQUEST_TYPE.GRPC:
+        handleCreateGrpcRequest();
+        break;
+      case REQUEST_TYPE.WEBSOCKET:
+        handleCreateWebSocketRequest();
+        break;
+    }
+  };
+
+  if (!collection) {
+    return null;
+  }
+
+  const IconButton = (
+    <ActionIcon
+      onClick={handleLeftClick}
+      onContextMenu={handleRightClick}
+      aria-label="New Transient Request"
+      size="lg"
+      style={{ marginBottom: '3px' }}
+    >
+      <IconPlus size={18} strokeWidth={1.5} />
+    </ActionIcon>
+  );
+
+  return (
+    <Dropdown
+      icon={IconButton}
+      visible={dropdownVisible}
+      onCreate={onDropdownCreate}
+      onClickOutside={() => setDropdownVisible(false)}
+      placement="bottom-end"
+    >
+      <div className="dropdown-item" onClick={() => handleItemClick(REQUEST_TYPE.HTTP)}>
+        <div className="dropdown-icon">
+          <IconApi size={16} strokeWidth={2} />
+        </div>
+        <div className="dropdown-label">HTTP</div>
+      </div>
+      <div className="dropdown-item" onClick={() => handleItemClick(REQUEST_TYPE.GRAPHQL)}>
+        <div className="dropdown-icon">
+          <IconBrandGraphql size={16} strokeWidth={2} />
+        </div>
+        <div className="dropdown-label">GraphQL</div>
+      </div>
+      <div className="dropdown-item" onClick={() => handleItemClick(REQUEST_TYPE.GRPC)}>
+        <div className="dropdown-icon">
+          <IconCode size={16} strokeWidth={2} />
+        </div>
+        <div className="dropdown-label">gRPC</div>
+      </div>
+      <div className="dropdown-item" onClick={() => handleItemClick(REQUEST_TYPE.WEBSOCKET)}>
+        <div className="dropdown-icon">
+          <IconPlugConnected size={16} strokeWidth={2} />
+        </div>
+        <div className="dropdown-label">WebSocket</div>
+      </div>
+    </Dropdown>
+  );
+};
+
+export default CreateTransientRequest;
--- a/packages/bruno-app/src/components/Devtools/Console/TerminalTab/index.js
+++ b/packages/bruno-app/src/components/Devtools/Console/TerminalTab/index.js
@@ -2,10 +2,37 @@ import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { IconTerminal2, IconPlus } from '@tabler/icons';
+import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 import SessionList from './SessionList';
 import '@xterm/xterm/css/xterm.css';

+// Build xterm.js theme from app theme
+const getTerminalTheme = (theme) => {
+  return {
+    background: theme.console.bg,
+    foreground: theme.console.messageColor,
+    cursor: theme.console.messageColor,
+    selectionBackground: theme.status.info.background,
+    black: theme.background.base,
+    red: theme.status.danger.text,
+    green: theme.status.success.text,
+    yellow: theme.status.warning.text,
+    blue: theme.status.info.text,
+    magenta: theme.colors.text.purple,
+    cyan: theme.codemirror.variable.prompt,
+    white: theme.text,
+    brightBlack: theme.colors.text.muted,
+    brightRed: theme.status.danger.text,
+    brightGreen: theme.status.success.text,
+    brightYellow: theme.status.warning.text,
+    brightBlue: theme.status.info.text,
+    brightMagenta: theme.colors.text.purple,
+    brightCyan: theme.codemirror.variable.prompt,
+    brightWhite: theme.text
+  };
+};
+
 // Terminal instances per session - Map<sessionId, { terminal, fitAddon, inputDisposable, resizeDisposable }>
 const terminalInstances = new Map();

@@ -33,7 +60,7 @@ const ensureParkingHost = () => {
  return parkingHost;
 };

-const createTerminalForSession = (sessionId) => {
+const createTerminalForSession = (sessionId, terminalTheme) => {
  if (terminalInstances.has(sessionId)) {
    return terminalInstances.get(sessionId);
  }
@@ -42,28 +69,7 @@ const createTerminalForSession = (sessionId) => {
    cursorBlink: true,
    fontSize: 14,
    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
-    theme: {
-      background: '#1e1e1e',
-      foreground: '#d4d4d4',
-      cursor: '#d4d4d4',
-      selection: '#264f78',
-      black: '#1e1e1e',
-      red: '#f14c4c',
-      green: '#23d18b',
-      yellow: '#f5f543',
-      blue: '#3b8eea',
-      magenta: '#d670d6',
-      cyan: '#29b8db',
-      white: '#e5e5e5',
-      brightBlack: '#666666',
-      brightRed: '#f14c4c',
-      brightGreen: '#23d18b',
-      brightYellow: '#f5f543',
-      brightBlue: '#3b8eea',
-      brightMagenta: '#d670d6',
-      brightCyan: '#29b8db',
-      brightWhite: '#e5e5e5'
-    },
+    theme: terminalTheme,
    allowProposedApi: true
  });

@@ -156,10 +162,10 @@ const cleanupTerminalInstance = (sessionId) => {
  }
 };

-const openTerminalIntoContainer = async (container, sessionId) => {
+const openTerminalIntoContainer = async (container, sessionId, terminalTheme) => {
  if (!container || !sessionId) return;

-  const instance = createTerminalForSession(sessionId);
+  const instance = createTerminalForSession(sessionId, terminalTheme);
  const { terminal, fitAddon } = instance;

  if (!terminal.element) {
@@ -174,6 +180,7 @@ const openTerminalIntoContainer = async (container, sessionId) => {
  await new Promise((resolve) => setTimeout(resolve, 50));
  try {
    fitAddon.fit();
+    terminal.focus();
    const { cols, rows } = terminal;
    if (cols && rows && window.ipcRenderer) {
      window.ipcRenderer.send('terminal:resize', sessionId, { cols, rows });
@@ -211,6 +218,8 @@ const TerminalTab = () => {
  const [sessions, setSessions] = useState([]);
  const [activeSessionId, setActiveSessionId] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
+  const { theme } = useTheme();
+  const terminalTheme = getTerminalTheme(theme);

  // Load sessions list
  const loadSessions = useCallback(async (currentActiveSessionId = null) => {
@@ -354,6 +363,15 @@ const TerminalTab = () => {
    };
  }, []);

+  // Update all terminal themes when app theme changes
+  useEffect(() => {
+    terminalInstances.forEach((instance) => {
+      if (instance.terminal) {
+        instance.terminal.options.theme = terminalTheme;
+      }
+    });
+  }, [theme.mode]);
+
  // Handle terminal display for active session
  useEffect(() => {
    if (!activeSessionId || !terminalRef.current) return;
@@ -361,7 +379,7 @@ const TerminalTab = () => {
    let mounted = true;

    const setupTerminal = async () => {
-      await openTerminalIntoContainer(terminalRef.current, activeSessionId);
+      await openTerminalIntoContainer(terminalRef.current, activeSessionId, terminalTheme);

      if (mounted) {
        const instance = terminalInstances.get(activeSessionId);
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -173,6 +173,18 @@ const Wrapper = styled.div`
    background-color: ${(props) => props.theme.dropdown.separator};
    margin: 0.25rem 0;
  }
+
+  .submenu-trigger {
+    position: relative;
+  }
+
+  .submenu-arrow {
+    color: ${(props) => props.theme.dropdown.mutedText};
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/components/Dropdown/index.js
+++ b/packages/bruno-app/src/components/Dropdown/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';

-const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, appendTo, ...props }) => {
+const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, appendTo, onMouseEnter, onMouseLeave, ...props }) => {
  // When in controlled mode (visible prop is provided), don't use trigger prop
  const tippyProps = visible !== undefined
    ? { ...props, visible, interactive: true, appendTo: appendTo || 'parent' }
@@ -11,7 +11,14 @@ const Dropdown = ({ icon, children, onCreate, placement, transparent, visible, a
  return (
    <Tippy
      render={(attrs) => (
-        <StyledWrapper className="tippy-box dropdown" transparent={transparent} tabIndex={-1} {...attrs}>
+        <StyledWrapper
+          className="tippy-box dropdown"
+          transparent={transparent}
+          tabIndex={-1}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          {...attrs}
+        >
          {children}
        </StyledWrapper>
      )}
--- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
@@ -6,8 +6,13 @@ const StyledWrapper = styled.div`
  flex: 1;
  overflow: hidden;

+  &.is-resizing {
+    cursor: col-resize !important;
+    user-select: none;
+  }
+
  .table-container {
-    overflow-y: auto;
+    overflow: auto;
    border-radius: ${(props) => props.theme.border.radius.base};
    border: solid 1px ${(props) => props.theme.border.border0};
  }
@@ -24,6 +29,7 @@ const StyledWrapper = styled.div`
    color: ${(props) => props.theme.table.thead.color} !important;
    background: ${(props) => props.theme.sidebar.bg};
    user-select: none;
+    overflow: visible;

    border: none !important;

@@ -34,10 +40,36 @@ const StyledWrapper = styled.div`
      border-bottom: solid 1px ${(props) => props.theme.border.border0};
      border-right: solid 1px ${(props) => props.theme.border.border0};
      vertical-align: middle;
+      position: relative;
+      overflow: visible;

      &:last-child {
        border-right: none;
      }
+
+      .column-name {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-right: 4px;
+      }
+
+      .resize-handle {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 4px;
+        height: 100%;
+        cursor: col-resize;
+        background: transparent;
+        z-index: 100;
+
+        &:hover,
+        &.resizing {
+          background: ${(props) => props.theme.colors.accent};
+        }
+      }
    }
  }

@@ -61,10 +93,32 @@ const StyledWrapper = styled.div`
        border-bottom: solid 1px ${(props) => props.theme.border.border0};
        border-right: solid 1px ${(props) => props.theme.border.border0};
        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;

        &:last-child {
          border-right: none;
        }
+
+        /* Handle CodeMirror editors overflow */
+        .cm-editor {
+          max-width: 100%;
+
+          .cm-scroller {
+            overflow: hidden !important;
+          }
+
+          .cm-content {
+            max-width: 100%;
+          }
+
+          .cm-line {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
      }
    }
  }
--- a/packages/bruno-app/src/components/EditableTable/index.js
+++ b/packages/bruno-app/src/components/EditableTable/index.js
@@ -1,9 +1,11 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { IconTrash, IconAlertCircle, IconGripVertical, IconMinusVertical } from '@tabler/icons';
 import { Tooltip } from 'react-tooltip';
 import { uuid } from 'utils/common';
 import StyledWrapper from './StyledWrapper';

+const MIN_COLUMN_WIDTH = 80;
+
 const EditableTable = ({
  columns,
  rows,
@@ -23,7 +25,101 @@ const EditableTable = ({
  const tableRef = useRef(null);
  const emptyRowUidRef = useRef(null);
  const [hoveredRow, setHoveredRow] = useState(null);
-  const [dragStart, setDragStart] = useState(null);
+  const [resizing, setResizing] = useState(null);
+  const [tableHeight, setTableHeight] = useState(0);
+  const [columnWidths, setColumnWidths] = useState(() => {
+    const initialWidths = {};
+    columns.forEach((col) => {
+      initialWidths[col.key] = col.width || 'auto';
+    });
+    return initialWidths;
+  });
+
+  const handleResizeStart = useCallback((e, columnKey) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const currentCell = e.target.closest('td');
+    const nextCell = currentCell?.nextElementSibling;
+    if (!currentCell || !nextCell) return;
+
+    const columnIndex = columns.findIndex((col) => col.key === columnKey);
+    if (columnIndex >= columns.length - 1) return;
+
+    const startX = e.clientX;
+    const startWidth = currentCell.offsetWidth;
+    const nextColumnKey = columns[columnIndex + 1].key;
+    const nextColumnStartWidth = nextCell.offsetWidth;
+
+    setResizing(columnKey);
+
+    const handleMouseMove = (moveEvent) => {
+      const diff = moveEvent.clientX - startX;
+      const maxGrow = nextColumnStartWidth - MIN_COLUMN_WIDTH;
+      const maxShrink = startWidth - MIN_COLUMN_WIDTH;
+      const clampedDiff = Math.max(-maxShrink, Math.min(maxGrow, diff));
+
+      setColumnWidths((prev) => ({
+        ...prev,
+        [columnKey]: `${startWidth + clampedDiff}px`,
+        [nextColumnKey]: `${nextColumnStartWidth - clampedDiff}px`
+      }));
+    };
+
+    const handleMouseUp = () => {
+      // Convert pixel widths to percentages for responsive scaling
+      const table = tableRef.current?.querySelector('table');
+      if (table) {
+        const tableWidth = table.offsetWidth;
+        const headerCells = table.querySelectorAll('thead td');
+        const newWidths = {};
+
+        headerCells.forEach((cell, cellIndex) => {
+          const checkboxOffset = showCheckbox ? 1 : 0;
+          const colIndex = cellIndex - checkboxOffset;
+
+          if (colIndex >= 0 && colIndex < columns.length) {
+            const colKey = columns[colIndex]?.key;
+            if (colKey) {
+              const percentage = (cell.offsetWidth / tableWidth) * 100;
+              newWidths[colKey] = `${percentage}%`;
+            }
+          }
+        });
+
+        if (Object.keys(newWidths).length > 0) {
+          setColumnWidths((prev) => ({ ...prev, ...newWidths }));
+        }
+      }
+      setResizing(null);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [columns, showCheckbox]);
+
+  // Track table height for resize handles
+  useEffect(() => {
+    const table = tableRef.current?.querySelector('table');
+    if (!table) return;
+
+    const updateHeight = () => {
+      setTableHeight(table.offsetHeight);
+    };
+
+    updateHeight();
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(table);
+
+    return () => resizeObserver.disconnect();
+  }, [rows.length]);
+
+  const getColumnWidth = useCallback((column) => {
+    return columnWidths[column.key] || column.width || 'auto';
+  }, [columnWidths]);

  const createEmptyRow = useCallback(() => {
    const newUid = uuid();
@@ -138,15 +234,9 @@ const EditableTable = ({
    onChange(filteredRows);
  }, [rows, onChange]);

-  const getColumnWidth = useCallback((column) => {
-    if (column.width) return column.width;
-    return 'auto';
-  }, []);
-
  const handleDragStart = useCallback((e, index) => {
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', index);
-    setDragStart(index);
  }, []);

  const handleDragOver = useCallback((e, index) => {
@@ -162,15 +252,17 @@ const EditableTable = ({
      const reorderableRows = showAddRow ? rowsWithEmpty.slice(0, -1) : rowsWithEmpty;
      const updatedOrder = [...reorderableRows];
      const [movedRow] = updatedOrder.splice(fromIndex, 1);
+      if (!movedRow) {
+        setHoveredRow(null);
+        return;
+      }
      updatedOrder.splice(toIndex, 0, movedRow);
      onReorder({ updateReorderedItem: updatedOrder.map((row) => row.uid) });
    }
-    setDragStart(null);
    setHoveredRow(null);
  }, [onReorder, rowsWithEmpty, showAddRow]);

  const handleDragEnd = useCallback(() => {
-    setDragStart(null);
    setHoveredRow(null);
  }, []);

@@ -179,15 +271,34 @@ const EditableTable = ({
    const value = column.getValue ? column.getValue(row) : row[column.key];
    const error = getRowError?.(row, rowIndex, column.key);

+    const errorIcon = error && !isEmpty ? (
+      <span>
+        <IconAlertCircle
+          data-tooltip-id={`error-${row.uid}-${column.key}`}
+          className="text-red-600 cursor-pointer ml-1"
+          size={20}
+        />
+        <Tooltip
+          className="tooltip-mod"
+          id={`error-${row.uid}-${column.key}`}
+          html={error}
+        />
+      </span>
+    ) : null;
+
    if (column.render) {
-      return column.render({
-        row,
-        value,
-        rowIndex,
-        isLastEmptyRow: isEmpty,
-        onChange: (newValue) => handleValueChange(row.uid, column.key, newValue),
-        error
-      });
+      return (
+        <div className="flex items-center">
+          {column.render({
+            row,
+            value,
+            rowIndex,
+            isLastEmptyRow: isEmpty,
+            onChange: (newValue) => handleValueChange(row.uid, column.key, newValue)
+          })}
+          {errorIcon}
+        </div>
+      );
    }

    return (
@@ -201,23 +312,10 @@ const EditableTable = ({
          className="mousetrap"
          value={value || ''}
          readOnly={column.readOnly}
-          placeholder={isEmpty ? column.placeholder || column.name : ''}
+          placeholder={!value ? column.placeholder || column.name : ''}
          onChange={(e) => handleValueChange(row.uid, column.key, e.target.value)}
        />
-        {error && !isEmpty && (
-          <span>
-            <IconAlertCircle
-              data-tooltip-id={`error-${row.uid}-${column.key}`}
-              className="text-red-600 cursor-pointer"
-              size={20}
-            />
-            <Tooltip
-              className="tooltip-mod"
-              id={`error-${row.uid}-${column.key}`}
-              html={error}
-            />
-          </span>
-        )}
+        {errorIcon}
      </div>
    );
  }, [isLastEmptyRow, getRowError, handleValueChange]);
@@ -225,7 +323,7 @@ const EditableTable = ({
  const reorderableRowCount = showAddRow ? rowsWithEmpty.length - 1 : rowsWithEmpty.length;

  return (
-    <StyledWrapper className={showCheckbox ? 'has-checkbox' : 'no-checkbox'}>
+    <StyledWrapper className={`${showCheckbox ? 'has-checkbox' : 'no-checkbox'} ${resizing ? 'is-resizing' : ''}`}>
      <div className="table-container" ref={tableRef} data-testid={testId}>
        <table>
          <thead>
@@ -233,12 +331,19 @@ const EditableTable = ({
              {showCheckbox && (
                <td className="text-center">{checkboxLabel}</td>
              )}
-              {columns.map((column) => (
+              {columns.map((column, colIndex) => (
                <td
                  key={column.key}
                  style={{ width: getColumnWidth(column) }}
                >
-                  {column.name}
+                  <span className="column-name">{column.name}</span>
+                  {colIndex < columns.length - 1 && (
+                    <div
+                      className={`resize-handle ${resizing === column.key ? 'resizing' : ''}`}
+                      style={{ height: tableHeight > 0 ? `${tableHeight}px` : undefined }}
+                      onMouseDown={(e) => handleResizeStart(e, column.key)}
+                    />
+                  )}
                </td>
              ))}
              {showDelete && (
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -6,6 +6,11 @@ const Wrapper = styled.div`
  flex: 1;
  overflow: hidden;

+  &.is-resizing {
+    cursor: col-resize !important;
+    user-select: none;
+  }
+
  .table-container {
    overflow-y: auto;
    border-radius: 8px;
@@ -32,10 +37,6 @@ const Wrapper = styled.div`
      &:nth-child(5) {
        width: 60px;
      }
-
-      &:nth-child(2) {
-        width: 30%;
-      }
    }

    thead {
@@ -48,10 +49,26 @@ const Wrapper = styled.div`
        padding: 5px 10px !important;
        border-bottom: solid 1px ${(props) => props.theme.border.border0};
        border-right: solid 1px ${(props) => props.theme.border.border0};
+        position: relative;

        &:last-child {
          border-right: none;
        }
+
+        .resize-handle {
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 4px;
+          cursor: col-resize;
+          background: transparent;
+          z-index: 100;
+
+          &:hover,
+          &.resizing {
+            background: ${(props) => props.theme.colors.accent};
+          }
+        }
      }
    }

@@ -147,21 +164,6 @@ const Wrapper = styled.div`
      opacity: 0.9;
    }
  }
-
-  .discard {
-    padding: 6px 16px;
-    font-size: ${(props) => props.theme.font.size.sm};
-    border-radius: ${(props) => props.theme.border.radius.base};
-    background: transparent;
-    color: ${(props) => props.theme.text};
-    border: 1px solid ${(props) => props.theme.border.border1};
-    cursor: pointer;
-    transition: all 0.15s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
-    }
-  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
+++ b/packages/bruno-app/src/components/EnvironmentVariablesTable/index.js
@@ -0,0 +1,546 @@
+import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
+import { useTheme } from 'providers/Theme';
+import { useSelector } from 'react-redux';
+import MultiLineEditor from 'components/MultiLineEditor/index';
+import StyledWrapper from './StyledWrapper';
+import { uuid } from 'utils/common';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { variableNameRegex } from 'utils/common/regex';
+import toast from 'react-hot-toast';
+import { Tooltip } from 'react-tooltip';
+import { getGlobalEnvironmentVariables } from 'utils/collections';
+
+const MIN_H = 35 * 2;
+const MIN_COLUMN_WIDTH = 80;
+
+const TableRow = React.memo(
+  ({ children, item }) => (
+    <tr key={item.uid} data-testid={`env-var-row-${item.name}`}>
+      {children}
+    </tr>
+  ),
+  (prevProps, nextProps) => {
+    const prevUid = prevProps?.item?.uid;
+    const nextUid = nextProps?.item?.uid;
+    return prevUid === nextUid && prevProps.children === nextProps.children;
+  }
+);
+
+const EnvironmentVariablesTable = ({
+  environment,
+  collection,
+  onSave,
+  draft,
+  onDraftChange,
+  onDraftClear,
+  setIsModified,
+  renderExtraValueContent,
+  searchQuery = ''
+}) => {
+  const { storedTheme } = useTheme();
+  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
+
+  const hasDraftForThisEnv = draft?.environmentUid === environment.uid;
+
+  const [tableHeight, setTableHeight] = useState(MIN_H);
+  const [columnWidths, setColumnWidths] = useState({ name: '30%', value: 'auto' });
+  const [resizing, setResizing] = useState(null);
+
+  const handleResizeStart = useCallback((e, columnKey) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const currentCell = e.target.closest('td');
+    const nextCell = currentCell?.nextElementSibling;
+    if (!currentCell || !nextCell) return;
+
+    const startX = e.clientX;
+    const startWidth = currentCell.offsetWidth;
+    const nextColumnKey = 'value';
+    const nextColumnStartWidth = nextCell.offsetWidth;
+
+    setResizing(columnKey);
+
+    const handleMouseMove = (moveEvent) => {
+      const diff = moveEvent.clientX - startX;
+      const maxGrow = nextColumnStartWidth - MIN_COLUMN_WIDTH;
+      const maxShrink = startWidth - MIN_COLUMN_WIDTH;
+      const clampedDiff = Math.max(-maxShrink, Math.min(maxGrow, diff));
+
+      setColumnWidths({
+        [columnKey]: `${startWidth + clampedDiff}px`,
+        [nextColumnKey]: `${nextColumnStartWidth - clampedDiff}px`
+      });
+    };
+
+    const handleMouseUp = () => {
+      setResizing(null);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, []);
+
+  const handleTotalHeightChanged = useCallback((h) => {
+    setTableHeight(h);
+  }, []);
+
+  const prevEnvUidRef = useRef(null);
+  const mountedRef = useRef(false);
+
+  let _collection = collection ? cloneDeep(collection) : {};
+  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
+  if (_collection) {
+    _collection.globalEnvironmentVariables = globalEnvironmentVariables;
+  }
+
+  const initialValues = useMemo(() => {
+    const vars = environment.variables || [];
+    return [
+      ...vars,
+      {
+        uid: uuid(),
+        name: '',
+        value: '',
+        type: 'text',
+        secret: false,
+        enabled: true
+      }
+    ];
+  }, [environment.uid, environment.variables]);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: initialValues,
+    validationSchema: Yup.array().of(
+      Yup.object({
+        enabled: Yup.boolean(),
+        name: Yup.string().when('$isLastRow', {
+          is: true,
+          then: (schema) => schema.optional(),
+          otherwise: (schema) =>
+            schema
+              .required('Name cannot be empty')
+              .matches(
+                variableNameRegex,
+                'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.'
+              )
+              .trim()
+        }),
+        secret: Yup.boolean(),
+        type: Yup.string(),
+        uid: Yup.string(),
+        value: Yup.mixed().nullable()
+      })
+    ),
+    validate: (values) => {
+      const errors = {};
+      values.forEach((variable, index) => {
+        const isLastRow = index === values.length - 1;
+        const isEmptyRow = !variable.name || variable.name.trim() === '';
+
+        if (isLastRow && isEmptyRow) {
+          return;
+        }
+
+        if (!variable.name || variable.name.trim() === '') {
+          if (!errors[index]) errors[index] = {};
+          errors[index].name = 'Name cannot be empty';
+        } else if (!variableNameRegex.test(variable.name)) {
+          if (!errors[index]) errors[index] = {};
+          errors[index].name
+            = 'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.';
+        }
+      });
+      return Object.keys(errors).length > 0 ? errors : {};
+    },
+    onSubmit: () => {}
+  });
+
+  // Restore draft values on mount or environment switch
+  useEffect(() => {
+    const isMount = !mountedRef.current;
+    const envChanged = prevEnvUidRef.current !== null && prevEnvUidRef.current !== environment.uid;
+
+    prevEnvUidRef.current = environment.uid;
+    mountedRef.current = true;
+
+    if ((isMount || envChanged) && hasDraftForThisEnv && draft?.variables) {
+      formik.setValues([
+        ...draft.variables,
+        {
+          uid: uuid(),
+          name: '',
+          value: '',
+          type: 'text',
+          secret: false,
+          enabled: true
+        }
+      ]);
+    }
+  }, [environment.uid, hasDraftForThisEnv, draft?.variables]);
+
+  const savedValuesJson = useMemo(() => {
+    return JSON.stringify(environment.variables || []);
+  }, [environment.variables]);
+
+  // Sync modified state
+  useEffect(() => {
+    const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+    const currentValuesJson = JSON.stringify(currentValues);
+    const hasActualChanges = currentValuesJson !== savedValuesJson;
+    setIsModified(hasActualChanges);
+  }, [formik.values, savedValuesJson, setIsModified]);
+
+  // Sync draft state
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+      const currentValuesJson = JSON.stringify(currentValues);
+      const hasActualChanges = currentValuesJson !== savedValuesJson;
+
+      const existingDraftVariables = hasDraftForThisEnv ? draft?.variables : null;
+      const existingDraftJson = existingDraftVariables ? JSON.stringify(existingDraftVariables) : null;
+
+      if (hasActualChanges) {
+        if (currentValuesJson !== existingDraftJson) {
+          onDraftChange(currentValues);
+        }
+      } else if (hasDraftForThisEnv) {
+        onDraftClear();
+      }
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  }, [formik.values, savedValuesJson, environment.uid, hasDraftForThisEnv, draft?.variables, onDraftChange, onDraftClear]);
+
+  const ErrorMessage = ({ name, index }) => {
+    const meta = formik.getFieldMeta(name);
+    const id = `error-${name}-${index}`;
+
+    const isLastRow = index === formik.values.length - 1;
+    const variable = formik.values[index];
+    const isEmptyRow = !variable?.name || variable.name.trim() === '';
+
+    if (isLastRow && isEmptyRow) {
+      return null;
+    }
+
+    if (!meta.error || !meta.touched) {
+      return null;
+    }
+    return (
+      <span>
+        <IconAlertCircle id={id} className="text-red-600 cursor-pointer" size={20} />
+        <Tooltip className="tooltip-mod" anchorId={id} html={meta.error || ''} />
+      </span>
+    );
+  };
+
+  const handleRemoveVar = useCallback(
+    (id) => {
+      const currentValues = formik.values;
+
+      if (!currentValues || currentValues.length === 0) {
+        return;
+      }
+
+      const lastRow = currentValues[currentValues.length - 1];
+      const isLastEmptyRow = lastRow?.uid === id && (!lastRow.name || lastRow.name.trim() === '');
+
+      if (isLastEmptyRow) {
+        return;
+      }
+
+      const filteredValues = currentValues.filter((variable) => variable.uid !== id);
+
+      const hasEmptyLastRow
+        = filteredValues.length > 0
+          && (!filteredValues[filteredValues.length - 1].name
+            || filteredValues[filteredValues.length - 1].name.trim() === '');
+
+      const newValues = hasEmptyLastRow
+        ? filteredValues
+        : [
+            ...filteredValues,
+            {
+              uid: uuid(),
+              name: '',
+              value: '',
+              type: 'text',
+              secret: false,
+              enabled: true
+            }
+          ];
+
+      formik.setValues(newValues);
+    },
+    [formik.values]
+  );
+
+  const handleNameChange = (index, e) => {
+    formik.handleChange(e);
+    const isLastRow = index === formik.values.length - 1;
+
+    if (isLastRow) {
+      const newVariable = {
+        uid: uuid(),
+        name: '',
+        value: '',
+        type: 'text',
+        secret: false,
+        enabled: true
+      };
+      setTimeout(() => {
+        formik.setFieldValue(formik.values.length, newVariable, false);
+      }, 0);
+    }
+  };
+
+  const handleNameBlur = (index) => {
+    formik.setFieldTouched(`${index}.name`, true, true);
+  };
+
+  const handleNameKeyDown = (index, e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      formik.setFieldTouched(`${index}.name`, true, true);
+    }
+  };
+
+  const handleSave = useCallback(() => {
+    const variablesToSave = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
+    const savedValues = environment.variables || [];
+
+    const hasChanges = JSON.stringify(variablesToSave) !== JSON.stringify(savedValues);
+    if (!hasChanges) {
+      toast.error('No changes to save');
+      return;
+    }
+
+    const hasValidationErrors = variablesToSave.some((variable) => {
+      if (!variable.name || variable.name.trim() === '') {
+        return true;
+      }
+      if (!variableNameRegex.test(variable.name)) {
+        return true;
+      }
+      return false;
+    });
+
+    if (hasValidationErrors) {
+      toast.error('Please fix validation errors before saving');
+      return;
+    }
+
+    onSave(cloneDeep(variablesToSave))
+      .then(() => {
+        toast.success('Changes saved successfully');
+        const newValues = [
+          ...variablesToSave,
+          {
+            uid: uuid(),
+            name: '',
+            value: '',
+            type: 'text',
+            secret: false,
+            enabled: true
+          }
+        ];
+        formik.resetForm({ values: newValues });
+        setIsModified(false);
+      })
+      .catch((error) => {
+        console.error(error);
+        toast.error('An error occurred while saving the changes');
+      });
+  }, [formik.values, environment.variables, onSave, setIsModified]);
+
+  const handleReset = useCallback(() => {
+    const originalVars = environment.variables || [];
+    const resetValues = [
+      ...originalVars,
+      {
+        uid: uuid(),
+        name: '',
+        value: '',
+        type: 'text',
+        secret: false,
+        enabled: true
+      }
+    ];
+    formik.resetForm({ values: resetValues });
+    setIsModified(false);
+  }, [environment.variables, setIsModified]);
+
+  const handleSaveRef = useRef(handleSave);
+  handleSaveRef.current = handleSave;
+
+  useEffect(() => {
+    const handleSaveEvent = () => {
+      handleSaveRef.current();
+    };
+
+    window.addEventListener('environment-save', handleSaveEvent);
+
+    return () => {
+      window.removeEventListener('environment-save', handleSaveEvent);
+    };
+  }, []);
+
+  const filteredVariables = useMemo(() => {
+    const allVariables = formik.values.map((variable, index) => ({ variable, index }));
+    if (!searchQuery?.trim()) {
+      return allVariables;
+    }
+
+    const query = searchQuery.toLowerCase().trim();
+
+    return allVariables.filter(({ variable, index }) => {
+      const isLastRow = index === formik.values.length - 1;
+      const isEmptyRow = !variable.name || variable.name.trim() === '';
+      if (isLastRow && isEmptyRow) {
+        return true;
+      }
+
+      const nameMatch = variable.name ? variable.name.toLowerCase().includes(query) : false;
+      const valueMatch = typeof variable.value === 'string' ? variable.value.toLowerCase().includes(query) : false;
+
+      return !!(nameMatch || valueMatch);
+    });
+  }, [formik.values, searchQuery]);
+
+  return (
+    <StyledWrapper className={resizing ? 'is-resizing' : ''}>
+      <TableVirtuoso
+        className="table-container"
+        style={{ height: tableHeight }}
+        components={{ TableRow }}
+        data={filteredVariables}
+        totalListHeightChanged={handleTotalHeightChanged}
+        fixedHeaderContent={() => (
+          <tr>
+            <td className="text-center"></td>
+            <td style={{ width: columnWidths.name }}>
+              Name
+              <div
+                className={`resize-handle ${resizing === 'name' ? 'resizing' : ''}`}
+                style={{ height: tableHeight > 0 ? `${tableHeight}px` : undefined }}
+                onMouseDown={(e) => handleResizeStart(e, 'name')}
+              />
+            </td>
+            <td style={{ width: columnWidths.value }}>Value</td>
+            <td className="text-center">Secret</td>
+            <td></td>
+          </tr>
+        )}
+        fixedItemHeight={35}
+        computeItemKey={(index, item) => item.variable.uid}
+        itemContent={(index, { variable, index: actualIndex }) => {
+          const isLastRow = actualIndex === formik.values.length - 1;
+          const isEmptyRow = !variable.name || variable.name.trim() === '';
+          const isLastEmptyRow = isLastRow && isEmptyRow;
+
+          return (
+            <>
+              <td className="text-center">
+                {!isLastEmptyRow && (
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${actualIndex}.enabled`}
+                    checked={variable.enabled}
+                    onChange={formik.handleChange}
+                  />
+                )}
+              </td>
+              <td style={{ width: columnWidths.name }}>
+                <div className="flex items-center">
+                  <input
+                    type="text"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    spellCheck="false"
+                    className="mousetrap"
+                    id={`${actualIndex}.name`}
+                    name={`${actualIndex}.name`}
+                    value={variable.name}
+                    placeholder={!variable.value || (typeof variable.value === 'string' && variable.value.trim() === '') ? 'Value' : ''}
+                    onChange={(e) => handleNameChange(actualIndex, e)}
+                    onBlur={() => handleNameBlur(actualIndex)}
+                    onKeyDown={(e) => handleNameKeyDown(actualIndex, e)}
+                  />
+                  <ErrorMessage name={`${actualIndex}.name`} index={actualIndex} />
+                </div>
+              </td>
+              <td className="flex flex-row flex-nowrap items-center" style={{ width: columnWidths.value }}>
+                <div className="overflow-hidden grow w-full relative">
+                  <MultiLineEditor
+                    theme={storedTheme}
+                    collection={_collection}
+                    name={`${actualIndex}.value`}
+                    value={variable.value}
+                    placeholder={isLastEmptyRow ? 'Value' : ''}
+                    isSecret={variable.secret}
+                    readOnly={typeof variable.value !== 'string'}
+                    onChange={(newValue) => formik.setFieldValue(`${actualIndex}.value`, newValue, true)}
+                    onSave={handleSave}
+                  />
+                </div>
+                {typeof variable.value !== 'string' && (
+                  <span className="ml-2 flex items-center">
+                    <IconInfoCircle id={`${variable.uid}-disabled-info-icon`} className="text-muted" size={16} />
+                    <Tooltip
+                      anchorId={`${variable.uid}-disabled-info-icon`}
+                      content="Non-string values set via scripts are read-only and can only be updated through scripts."
+                      place="top"
+                    />
+                  </span>
+                )}
+                {renderExtraValueContent && renderExtraValueContent(variable)}
+              </td>
+              <td className="text-center">
+                {!isLastEmptyRow && (
+                  <input
+                    type="checkbox"
+                    className="mousetrap"
+                    name={`${actualIndex}.secret`}
+                    checked={variable.secret}
+                    onChange={formik.handleChange}
+                  />
+                )}
+              </td>
+              <td>
+                {!isLastEmptyRow && (
+                  <button onClick={() => handleRemoveVar(variable.uid)}>
+                    <IconTrash strokeWidth={1.5} size={18} />
+                  </button>
+                )}
+              </td>
+            </>
+          );
+        }}
+      />
+
+      <div className="button-container">
+        <div className="flex items-center">
+          <button type="button" className="submit" onClick={handleSave} data-testid="save-env">
+            Save
+          </button>
+          <button type="button" className="submit reset ml-2" onClick={handleReset} data-testid="reset-env">
+            Reset
+          </button>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default EnvironmentVariablesTable;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconPlus, IconDownload, IconSettings } from '@tabler/icons';
 import ToolHint from 'components/ToolHint';
+import ColorBadge from 'components/ColorBadge';

 const EnvironmentListContent = ({
  environments,
@@ -38,6 +39,7 @@ const EnvironmentListContent = ({
                    data-tooltip-content={env.name}
                    data-tooltip-hidden={env.name?.length < 90}
                  >
+                    <ColorBadge color={env.color} size={8} showEmptyBorder={false} />
                    <span className="max-w-100% truncate no-wrap">{env.name}</span>
                  </div>
                ))}
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -33,8 +33,7 @@ const Wrapper = styled.div`
    }

    .env-separator {
-      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.separator};
-      margin: 0 0.35rem;
+      background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.separator};
    }

    .env-text-inactive {
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -13,6 +13,166 @@ import ImportEnvironmentModal from 'components/Environments/Common/ImportEnviron
 import CreateGlobalEnvironment from 'components/WorkspaceHome/WorkspaceEnvironments/CreateEnvironment';
 import ToolHint from 'components/ToolHint';
 import StyledWrapper from './StyledWrapper';
+import { transparentize, toColorString, parseToRgb } from 'polished';
+
+const TABS = [
+  { id: 'collection', label: 'Collection', icon: <IconDatabase size={16} strokeWidth={1.5} /> },
+  { id: 'global', label: 'Global', icon: <IconWorld size={16} strokeWidth={1.5} /> }
+];
+
+const EMPTY_STATE_DESCRIPTIONS = {
+  collection: 'Create your first environment to begin working with your collection.',
+  global: 'Create your first global environment to begin working across collections.'
+};
+
+/**
+ * Generates background color with transparency for environment badges
+ */
+const getEnvBackgroundColor = (color) => (color ? transparentize(1 - 0.12, color) : 'transparent');
+
+/**
+ * Calculates the style for an environment badge section
+ */
+const getEnvBadgeStyle = (environment, position, hasOtherEnv) => {
+  const color = environment?.color;
+  const isLeft = position === 'left';
+
+  // Determine border radius based on position and whether other env exists
+  let borderRadius = '0.3rem';
+  if (hasOtherEnv) {
+    borderRadius = isLeft ? '0.3rem 0 0 0.3rem' : '0 0.3rem 0.3rem 0';
+  }
+
+  // Determine padding based on position
+  const padding = isLeft
+    ? hasOtherEnv
+      ? '0.25rem 0.5rem 0.25rem 0.5rem'
+      : '0.25rem 0.3rem 0.25rem 0.5rem'
+    : '0.25rem 0.3rem 0.25rem 0.5rem';
+
+  return {
+    backgroundColor: getEnvBackgroundColor(color),
+    padding,
+    borderRadius
+  };
+};
+
+/**
+ * Calculates dropdown width based on longest environment name
+ */
+const calculateDropdownWidth = (environments, globalEnvironments) => {
+  const allEnvironments = [...environments, ...globalEnvironments];
+  if (allEnvironments.length === 0) return 0;
+
+  const maxCharLength = Math.max(...allEnvironments.map((env) => env.name?.length || 0));
+  // 8 pixels per character (rough estimate for average character width)
+  return maxCharLength * 8;
+};
+
+/**
+ * Displays a single environment with icon, name, and optional color styling
+ */
+const EnvironmentBadge = ({ environment, icon: Icon }) => {
+  if (!environment) return null;
+
+  const colorStyle = environment.color ? { color: environment.color } : {};
+
+  return (
+    <>
+      <Icon size={14} strokeWidth={1.5} className="env-icon" style={colorStyle} />
+      <ToolHint
+        text={environment.name}
+        toolhintId={`env-${environment.uid}`}
+        place="bottom-start"
+        delayShow={1000}
+        hidden={environment.name?.length < 7}
+      >
+        <span className="env-text max-w-24 truncate overflow-hidden" style={colorStyle}>
+          {environment.name}
+        </span>
+      </ToolHint>
+    </>
+  );
+};
+
+/**
+ * Dropdown trigger component showing active environments
+ */
+const DropdownTrigger = forwardRef(({ collectionEnv, globalEnv }, ref) => {
+  const hasAnyEnv = collectionEnv || globalEnv;
+
+  // Empty state - no environments selected
+  if (!hasAnyEnv) {
+    return (
+      <div
+        ref={ref}
+        className="current-environment flex align-center justify-center cursor-pointer bg-transparent no-environments"
+        data-testid="environment-selector-trigger"
+      >
+        <span className="env-text-inactive max-w-36 truncate no-wrap">No Environment</span>
+        <IconCaretDown className="caret flex items-center justify-center" size={12} strokeWidth={2} />
+      </div>
+    );
+  }
+
+  // Only collection env selected - caret goes with collection env
+  if (collectionEnv && !globalEnv) {
+    return (
+      <div
+        ref={ref}
+        className="current-environment flex align-center justify-center cursor-pointer bg-transparent"
+        style={{ padding: 0 }}
+        data-testid="environment-selector-trigger"
+      >
+        <div className="flex items-center" style={getEnvBadgeStyle(collectionEnv, 'left', false)}>
+          <EnvironmentBadge environment={collectionEnv} icon={IconDatabase} />
+          <IconCaretDown className="caret flex items-center justify-center" size={12} strokeWidth={2} />
+        </div>
+      </div>
+    );
+  }
+
+  // Only global env selected - caret goes with global env
+  if (!collectionEnv && globalEnv) {
+    return (
+      <div
+        ref={ref}
+        className="current-environment flex align-center justify-center cursor-pointer bg-transparent"
+        style={{ padding: 0 }}
+        data-testid="environment-selector-trigger"
+      >
+        <div className="flex items-center" style={getEnvBadgeStyle(globalEnv, 'right', false)}>
+          <EnvironmentBadge environment={globalEnv} icon={IconWorld} />
+          <IconCaretDown className="caret flex items-center justify-center" size={12} strokeWidth={2} />
+        </div>
+      </div>
+    );
+  }
+
+  // Both environments selected
+  return (
+    <div
+      ref={ref}
+      className="current-environment flex align-center justify-center cursor-pointer bg-transparent"
+      style={{ padding: 0 }}
+      data-testid="environment-selector-trigger"
+    >
+      {/* Collection Environment Section */}
+      <div className="flex items-center" style={getEnvBadgeStyle(collectionEnv, 'left', true)}>
+        <EnvironmentBadge environment={collectionEnv} icon={IconDatabase} />
+      </div>
+
+      {/* Separator */}
+      <div className="env-separator" style={{ width: '1px', alignSelf: 'stretch' }} />
+
+      {/* Global Environment Section + Caret */}
+      <div className="flex items-center" style={getEnvBadgeStyle(globalEnv, 'right', true)}>
+        <EnvironmentBadge environment={globalEnv} icon={IconWorld} />
+        <IconCaretDown className="caret flex items-center justify-center" size={12} strokeWidth={2} />
+      </div>
+    </div>
+  );
+});

 const EnvironmentSelector = ({ collection }) => {
  const dispatch = useDispatch();
@@ -35,159 +195,82 @@ const EnvironmentSelector = ({ collection }) => {
    ? find(environments, (e) => e.uid === activeEnvironmentUid)
    : null;

-  const tabs = [
-    { id: 'collection', label: 'Collection', icon: <IconDatabase size={16} strokeWidth={1.5} /> },
-    { id: 'global', label: 'Global', icon: <IconWorld size={16} strokeWidth={1.5} /> }
-  ];
+  const dropdownWidth = useMemo(
+    () => calculateDropdownWidth(environments, globalEnvironments),
+    [environments, globalEnvironments]
+  );

-  const onDropdownCreate = (ref) => {
-    dropdownTippyRef.current = ref;
-  };
+  const description = EMPTY_STATE_DESCRIPTIONS[activeTab];

-  // Get description based on active tab
-  const description
-    = activeTab === 'collection'
-      ? 'Create your first environment to begin working with your collection.'
-      : 'Create your first global environment to begin working across collections.';
+  const hideDropdown = () => dropdownTippyRef.current?.hide();

-  // Environment selection handler
  const handleEnvironmentSelect = (environment) => {
    const action
      = activeTab === 'collection'
-        ? selectEnvironment(environment ? environment.uid : null, collection.uid)
-        : selectGlobalEnvironment({ environmentUid: environment ? environment.uid : null });
+        ? selectEnvironment(environment?.uid || null, collection.uid)
+        : selectGlobalEnvironment({ environmentUid: environment?.uid || null });

    dispatch(action)
      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-        } else {
-          toast.success('No Environments are active now');
-        }
-        dropdownTippyRef.current.hide();
+        toast.success(environment ? `Environment changed to ${environment.name}` : 'No Environments are active now');
+        hideDropdown();
      })
-      .catch((err) => {
+      .catch(() => {
        toast.error('An error occurred while selecting the environment');
      });
  };

-  // Settings handler - opens environment settings tab
  const handleSettingsClick = () => {
-    if (activeTab === 'collection') {
-      dispatch(
-        addTab({
-          uid: `${collection.uid}-environment-settings`,
-          collectionUid: collection.uid,
-          type: 'environment-settings'
-        })
-      );
-    } else {
-      dispatch(
-        addTab({
-          uid: `${collection.uid}-global-environment-settings`,
-          collectionUid: collection.uid,
-          type: 'global-environment-settings'
-        })
-      );
-    }
-    dropdownTippyRef.current.hide();
+    const isCollection = activeTab === 'collection';
+    dispatch(
+      addTab({
+        uid: `${collection.uid}-${isCollection ? 'environment' : 'global-environment'}-settings`,
+        collectionUid: collection.uid,
+        type: isCollection ? 'environment-settings' : 'global-environment-settings'
+      })
+    );
+    hideDropdown();
  };

-  // Create handler
  const handleCreateClick = () => {
    if (activeTab === 'collection') {
      setShowCreateCollectionModal(true);
    } else {
      setShowCreateGlobalModal(true);
    }
-    dropdownTippyRef.current.hide();
+    hideDropdown();
  };

-  // Import handler
  const handleImportClick = () => {
    if (activeTab === 'collection') {
      setShowImportCollectionModal(true);
    } else {
      setShowImportGlobalModal(true);
    }
-    dropdownTippyRef.current.hide();
+    hideDropdown();
  };

-  // Calculate dropdown width based on the longest environment name.
-  // To prevent resizing while switching between collection and global environments.
-  const dropdownWidth = useMemo(() => {
-    const allEnvironments = [...environments, ...globalEnvironments];
-    if (allEnvironments.length === 0) return 0;
-
-    const maxCharLength = Math.max(...allEnvironments.map((env) => env.name?.length || 0));
-    // 8 pixels per character: This is a rough estimate for the average character width in most fonts
-    // (monospace fonts are typically 8-10px, proportional fonts vary but 8px is a safe average)
-    return maxCharLength * 8;
-  }, [environments, globalEnvironments]);
-
-  // Create icon component for dropdown trigger
-  const Icon = forwardRef((props, ref) => {
-    const hasAnyEnv = activeGlobalEnvironment || activeCollectionEnvironment;
-
-    const displayContent = hasAnyEnv ? (
-      <>
-        {activeCollectionEnvironment && (
-          <>
-            <div className="flex items-center">
-              <IconDatabase size={14} strokeWidth={1.5} className="env-icon" />
-              <ToolHint
-                text={activeCollectionEnvironment.name}
-                toolhintId={`collection-env-${activeCollectionEnvironment.uid}`}
-                place="bottom-start"
-                delayShow={1000}
-                hidden={activeCollectionEnvironment.name?.length < 7}
-              >
-                <span className="env-text max-w-24 truncate overflow-hidden">{activeCollectionEnvironment.name}</span>
-              </ToolHint>
-            </div>
-            {activeGlobalEnvironment && <span className="env-separator">|</span>}
-          </>
-        )}
-        {activeGlobalEnvironment && (
-          <div className="flex items-center">
-            <IconWorld size={14} strokeWidth={1.5} className="env-icon" />
-            <ToolHint
-              text={activeGlobalEnvironment.name}
-              toolhintId={`global-env-${activeGlobalEnvironment.uid}`}
-              place="bottom-start"
-              delayShow={1000}
-              hidden={activeGlobalEnvironment.name?.length < 7}
-            >
-              <span className="env-text max-w-24 truncate overflow-hidden">{activeGlobalEnvironment.name}</span>
-            </ToolHint>
-          </div>
-        )}
-      </>
-    ) : (
-      <span className="env-text-inactive max-w-36 truncate no-wrap">No Environment</span>
+  const openEnvironmentSettingsTab = (type) => {
+    dispatch(
+      addTab({
+        uid: `${collection.uid}-${type}-settings`,
+        collectionUid: collection.uid,
+        type: `${type}-settings`
+      })
    );
-
-    return (
-      <div
-        ref={ref}
-        className={`current-environment flex align-center justify-center cursor-pointer bg-transparent ${
-          !hasAnyEnv ? 'no-environments' : ''
-        }`}
-        data-testid="environment-selector-trigger"
-      >
-        {displayContent}
-        <IconCaretDown className="caret flex items-center justify-center" size={12} strokeWidth={2} />
-      </div>
-    );
-  });
+  };

  return (
    <StyledWrapper width={dropdownWidth}>
      <div className="environment-selector flex align-center cursor-pointer">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+        <Dropdown
+          onCreate={(ref) => (dropdownTippyRef.current = ref)}
+          icon={<DropdownTrigger collectionEnv={activeCollectionEnvironment} globalEnv={activeGlobalEnvironment} />}
+          placement="bottom-end"
+        >
          {/* Tab Headers */}
          <div className="tab-header flex pt-3 pb-2 px-3">
-            {tabs.map((tab) => (
+            {TABS.map((tab) => (
              <button
                key={tab.id}
                className={`tab-button whitespace-nowrap pb-[0.375rem] border-b-[0.125rem] bg-transparent flex align-center cursor-pointer transition-all duration-200 mr-[1.25rem] ${
@@ -222,15 +305,7 @@ const EnvironmentSelector = ({ collection }) => {
      {showCreateGlobalModal && (
        <CreateGlobalEnvironment
          onClose={() => setShowCreateGlobalModal(false)}
-          onEnvironmentCreated={() => {
-            dispatch(
-              addTab({
-                uid: `${collection.uid}-global-environment-settings`,
-                collectionUid: collection.uid,
-                type: 'global-environment-settings'
-              })
-            );
-          }}
+          onEnvironmentCreated={() => openEnvironmentSettingsTab('global-environment')}
        />
      )}

@@ -238,15 +313,7 @@ const EnvironmentSelector = ({ collection }) => {
        <ImportEnvironmentModal
          type="global"
          onClose={() => setShowImportGlobalModal(false)}
-          onEnvironmentCreated={() => {
-            dispatch(
-              addTab({
-                uid: `${collection.uid}-global-environment-settings`,
-                collectionUid: collection.uid,
-                type: 'global-environment-settings'
-              })
-            );
-          }}
+          onEnvironmentCreated={() => openEnvironmentSettingsTab('global-environment')}
        />
      )}

@@ -254,15 +321,7 @@ const EnvironmentSelector = ({ collection }) => {
        <CreateEnvironment
          collection={collection}
          onClose={() => setShowCreateCollectionModal(false)}
-          onEnvironmentCreated={() => {
-            dispatch(
-              addTab({
-                uid: `${collection.uid}-environment-settings`,
-                collectionUid: collection.uid,
-                type: 'environment-settings'
-              })
-            );
-          }}
+          onEnvironmentCreated={() => openEnvironmentSettingsTab('environment')}
        />
      )}

@@ -271,15 +330,7 @@ const EnvironmentSelector = ({ collection }) => {
          type="collection"
          collection={collection}
          onClose={() => setShowImportCollectionModal(false)}
-          onEnvironmentCreated={() => {
-            dispatch(
-              addTab({
-                uid: `${collection.uid}-environment-settings`,
-                collectionUid: collection.uid,
-                type: 'environment-settings'
-              })
-            );
-          }}
+          onEnvironmentCreated={() => openEnvironmentSettingsTab('environment')}
        />
      )}
    </StyledWrapper>
--- 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,57 +1,20 @@
-import React, { useCallback, useRef, useMemo, useEffect } from 'react';
-import { TableVirtuoso } from 'react-virtuoso';
+import React, { useMemo, useCallback } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import { get } from 'lodash';
-import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
-import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
-import MultiLineEditor from 'components/MultiLineEditor/index';
-import StyledWrapper from './StyledWrapper';
-import { uuid } from 'utils/common';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import { variableNameRegex } from 'utils/common/regex';
-import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import { setEnvironmentsDraft, clearEnvironmentsDraft } from 'providers/ReduxStore/slices/collections';
-import { Tooltip } from 'react-tooltip';
-import { getGlobalEnvironmentVariables, flattenItems, isItemARequest } from 'utils/collections';
+import { flattenItems, isItemARequest } from 'utils/collections';
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
+import EnvironmentVariablesTable from 'components/EnvironmentVariablesTable';
 import { sensitiveFields } from './constants';

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

  const environmentsDraft = collection?.environmentsDraft;
  const hasDraftForThisEnv = environmentsDraft?.environmentUid === environment.uid;

-  const handleTotalHeightChanged = React.useCallback((h) => {
-    setTableHeight(h);
-  }, []);
-
-  // Track environment changes for draft restoration
-  const prevEnvUidRef = React.useRef(null);
-  const mountedRef = React.useRef(false);
-
-  let _collection = collection ? cloneDeep(collection) : {};
-
-  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
-  if (_collection) {
-    _collection.globalEnvironmentVariables = globalEnvironmentVariables;
-  }
-
  // Check for non-secret variables used in sensitive fields
  const nonSecretSensitiveVarUsageMap = useMemo(() => {
    const result = {};
@@ -97,428 +60,59 @@ const EnvironmentVariables = ({ environment, setIsModified, collection }) => {
    return result;
  }, [collection, environment]);

-  const hasSensitiveUsage = (name) => !!nonSecretSensitiveVarUsageMap[name];
+  const hasSensitiveUsage = useCallback((name) => !!nonSecretSensitiveVarUsageMap[name], [nonSecretSensitiveVarUsageMap]);

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

-  // Restore draft values on mount or environment switch
-  useEffect(() => {
-    const isMount = !mountedRef.current;
-    const envChanged = prevEnvUidRef.current !== null && prevEnvUidRef.current !== environment.uid;
+  const handleDraftChange = useCallback(
+    (variables) => {
+      dispatch(
+        setEnvironmentsDraft({
+          collectionUid: collection.uid,
+          environmentUid: environment.uid,
+          variables
+        })
+      );
+    },
+    [dispatch, collection.uid, environment.uid]
+  );

-    prevEnvUidRef.current = environment.uid;
-    mountedRef.current = true;
+  const handleDraftClear = useCallback(() => {
+    dispatch(clearEnvironmentsDraft({ collectionUid: collection.uid }));
+  }, [dispatch, collection.uid]);

-    if ((isMount || envChanged) && hasDraftForThisEnv && environmentsDraft?.variables) {
-      formik.setValues([
-        ...environmentsDraft.variables,
-        {
-          uid: uuid(),
-          name: '',
-          value: '',
-          type: 'text',
-          secret: false,
-          enabled: true
-        }
-      ]);
-    }
-  }, [environment.uid, hasDraftForThisEnv, environmentsDraft?.variables]);
-
-  const savedValuesJson = useMemo(() => {
-    return JSON.stringify(environment.variables || []);
-  }, [environment.variables]);
-
-  useEffect(() => {
-    const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-    const currentValuesJson = JSON.stringify(currentValues);
-    const hasActualChanges = currentValuesJson !== savedValuesJson;
-    setIsModified(hasActualChanges);
-  }, [formik.values, savedValuesJson, setIsModified]);
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-      const currentValuesJson = JSON.stringify(currentValues);
-      const hasActualChanges = currentValuesJson !== savedValuesJson;
-
-      // Get existing draft for comparison
-      const existingDraftVariables = hasDraftForThisEnv ? environmentsDraft?.variables : null;
-      const existingDraftJson = existingDraftVariables ? JSON.stringify(existingDraftVariables) : null;
-
-      if (hasActualChanges) {
-        // Only dispatch if draft values are actually different
-        if (currentValuesJson !== existingDraftJson) {
-          dispatch(setEnvironmentsDraft({
-            collectionUid: collection.uid,
-            environmentUid: environment.uid,
-            variables: currentValues
-          }));
-        }
-      } else if (hasDraftForThisEnv) {
-        dispatch(clearEnvironmentsDraft({ collectionUid: collection.uid }));
+  const renderExtraValueContent = useCallback(
+    (variable) => {
+      if (!variable.secret && hasSensitiveUsage(variable.name)) {
+        return (
+          <SensitiveFieldWarning
+            fieldName={variable.name}
+            warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
+          />
+        );
      }
-    }, 300);
-
-    return () => clearTimeout(timeoutId);
-  }, [formik.values, savedValuesJson, environment.uid, collection.uid, dispatch, hasDraftForThisEnv, environmentsDraft?.variables]);
-
-  const ErrorMessage = ({ name, index }) => {
-    const meta = formik.getFieldMeta(name);
-    const id = `error-${name}-${index}`;
-
-    const isLastRow = index === formik.values.length - 1;
-    const variable = formik.values[index];
-    const isEmptyRow = !variable?.name || variable.name.trim() === '';
-
-    if (isLastRow && isEmptyRow) {
      return null;
-    }
-
-    if (!meta.error || !meta.touched) {
-      return null;
-    }
-    return (
-      <span>
-        <IconAlertCircle id={id} className="text-red-600 cursor-pointer" size={20} />
-        <Tooltip className="tooltip-mod" anchorId={id} html={meta.error || ''} />
-      </span>
-    );
-  };
-
-  const handleRemoveVar = useCallback((id) => {
-    const currentValues = formik.values;
-
-    if (!currentValues || currentValues.length === 0) {
-      return;
-    }
-
-    const lastRow = currentValues[currentValues.length - 1];
-    const isLastEmptyRow = lastRow?.uid === id && (!lastRow.name || lastRow.name.trim() === '');
-
-    if (isLastEmptyRow) {
-      return;
-    }
-
-    const filteredValues = currentValues.filter((variable) => variable.uid !== id);
-
-    const hasEmptyLastRow
-      = filteredValues.length > 0
-        && (!filteredValues[filteredValues.length - 1].name
-          || filteredValues[filteredValues.length - 1].name.trim() === '');
-
-    const newValues = hasEmptyLastRow
-      ? filteredValues
-      : [
-          ...filteredValues,
-          {
-            uid: uuid(),
-            name: '',
-            value: '',
-            type: 'text',
-            secret: false,
-            enabled: true
-          }
-        ];
-
-    formik.setValues(newValues);
-  }, [formik.values]);
-
-  const handleNameChange = (index, e) => {
-    formik.handleChange(e);
-    const isLastRow = index === formik.values.length - 1;
-
-    if (isLastRow) {
-      const newVariable = {
-        uid: uuid(),
-        name: '',
-        value: '',
-        type: 'text',
-        secret: false,
-        enabled: true
-      };
-      setTimeout(() => {
-        formik.setFieldValue(formik.values.length, newVariable, false);
-      }, 0);
-    }
-  };
-
-  const handleNameBlur = (index) => {
-    formik.setFieldTouched(`${index}.name`, true, true);
-  };
-
-  const handleNameKeyDown = (index, e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      formik.setFieldTouched(`${index}.name`, true, true);
-    }
-  };
-
-  const handleSave = () => {
-    const variablesToSave = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-    const savedValues = environment.variables || [];
-
-    const hasChanges = JSON.stringify(variablesToSave) !== JSON.stringify(savedValues);
-    if (!hasChanges) {
-      toast.error('No changes to save');
-      return;
-    }
-
-    const hasValidationErrors = variablesToSave.some((variable) => {
-      if (!variable.name || variable.name.trim() === '') {
-        return true;
-      }
-      if (!variableNameRegex.test(variable.name)) {
-        return true;
-      }
-      return false;
-    });
-
-    if (hasValidationErrors) {
-      toast.error('Please fix validation errors before saving');
-      return;
-    }
-
-    dispatch(saveEnvironment(cloneDeep(variablesToSave), environment.uid, collection.uid))
-      .then(() => {
-        toast.success('Changes saved successfully');
-        const newValues = [
-          ...variablesToSave,
-          {
-            uid: uuid(),
-            name: '',
-            value: '',
-            type: 'text',
-            secret: false,
-            enabled: true
-          }
-        ];
-        formik.resetForm({ values: newValues });
-        setIsModified(false);
-      })
-      .catch((error) => {
-        console.error(error);
-        toast.error('An error occurred while saving the changes');
-      });
-  };
-
-  const handleReset = () => {
-    const originalVars = environment.variables || [];
-    const resetValues = [
-      ...originalVars,
-      {
-        uid: uuid(),
-        name: '',
-        value: '',
-        type: 'text',
-        secret: false,
-        enabled: true
-      }
-    ];
-    formik.resetForm({ values: resetValues });
-    setIsModified(false);
-  };
-
-  const handleSaveRef = useRef(handleSave);
-  handleSaveRef.current = handleSave;
-
-  useEffect(() => {
-    const handleSaveEvent = () => {
-      handleSaveRef.current();
-    };
-
-    window.addEventListener('environment-save', handleSaveEvent);
-
-    return () => {
-      window.removeEventListener('environment-save', handleSaveEvent);
-    };
-  }, []);
+    },
+    [hasSensitiveUsage]
+  );

  return (
-    <StyledWrapper>
-      <TableVirtuoso
-        className="table-container"
-        style={{ height: tableHeight }}
-        components={{ TableRow }}
-        data={formik.values}
-        totalListHeightChanged={handleTotalHeightChanged}
-        fixedHeaderContent={() => (
-          <tr>
-            <td className="text-center"></td>
-            <td>Name</td>
-            <td>Value</td>
-            <td className="text-center">Secret</td>
-            <td></td>
-          </tr>
-        )}
-        fixedItemHeight={35}
-        computeItemKey={(index, variable) => variable.uid}
-        itemContent={(index, variable) => {
-          const isLastRow = index === formik.values.length - 1;
-          const isEmptyRow = !variable.name || variable.name.trim() === '';
-          const isLastEmptyRow = isLastRow && isEmptyRow;
-
-          return (
-            <>
-              <td className="text-center">
-                {!isLastEmptyRow && (
-                  <input
-                    type="checkbox"
-                    className="mousetrap"
-                    name={`${index}.enabled`}
-                    checked={variable.enabled}
-                    onChange={formik.handleChange}
-                  />
-                )}
-              </td>
-              <td>
-                <div className="flex items-center">
-                  <input
-                    type="text"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck="false"
-                    className="mousetrap"
-                    id={`${index}.name`}
-                    name={`${index}.name`}
-                    value={variable.name}
-                    placeholder={isLastEmptyRow ? 'Name' : ''}
-                    onChange={(e) => handleNameChange(index, e)}
-                    onBlur={() => handleNameBlur(index)}
-                    onKeyDown={(e) => handleNameKeyDown(index, e)}
-                  />
-                  <ErrorMessage name={`${index}.name`} index={index} />
-                </div>
-              </td>
-              <td className="flex flex-row flex-nowrap items-center">
-                <div className="overflow-hidden grow w-full relative">
-                  <MultiLineEditor
-                    theme={storedTheme}
-                    collection={_collection}
-                    name={`${index}.value`}
-                    value={variable.value}
-                    placeholder={isLastEmptyRow ? 'Value' : ''}
-                    isSecret={variable.secret}
-                    readOnly={typeof variable.value !== 'string'}
-                    onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
-                    onSave={handleSave}
-                  />
-                </div>
-                {typeof variable.value !== 'string' && (
-                  <span className="ml-2 flex items-center">
-                    <IconInfoCircle id={`${variable.uid}-disabled-info-icon`} className="text-muted" size={16} />
-                    <Tooltip
-                      anchorId={`${variable.uid}-disabled-info-icon`}
-                      content="Non-string values set via scripts are read-only and can only be updated through scripts."
-                      place="top"
-                    />
-                  </span>
-                )}
-                {!variable.secret && hasSensitiveUsage(variable.name) && (
-                  <SensitiveFieldWarning
-                    fieldName={variable.name}
-                    warningMessage="This variable is used in sensitive fields. Mark it as a secret for security"
-                  />
-                )}
-              </td>
-              <td className="text-center">
-                {!isLastEmptyRow && (
-                  <input
-                    type="checkbox"
-                    className="mousetrap"
-                    name={`${index}.secret`}
-                    checked={variable.secret}
-                    onChange={formik.handleChange}
-                  />
-                )}
-              </td>
-              <td>
-                {!isLastEmptyRow && (
-                  <button onClick={() => handleRemoveVar(variable.uid)}>
-                    <IconTrash strokeWidth={1.5} size={18} />
-                  </button>
-                )}
-              </td>
-            </>
-          );
-        }}
-      />
-
-      <div className="button-container">
-        <div className="flex items-center">
-          <button type="button" className="submit" onClick={handleSave} data-testid="save-env">
-            Save
-          </button>
-          <button type="button" className="submit reset ml-2" onClick={handleReset} data-testid="reset-env">
-            Reset
-          </button>
-        </div>
-      </div>
-    </StyledWrapper>
+    <EnvironmentVariablesTable
+      environment={environment}
+      collection={collection}
+      onSave={handleSave}
+      draft={hasDraftForThisEnv ? environmentsDraft : null}
+      onDraftChange={handleDraftChange}
+      onDraftClear={handleDraftClear}
+      setIsModified={setIsModified}
+      renderExtraValueContent={renderExtraValueContent}
+      searchQuery={searchQuery}
+    />
  );
 };

--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
@@ -94,8 +94,63 @@ const StyledWrapper = styled.div`

    .actions {
      display: flex;
+      align-items: center;
      gap: 2px;

+      .search-input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .search-icon {
+          position: absolute;
+          left: 8px;
+          color: ${(props) => props.theme.colors.text.muted};
+          pointer-events: none;
+        }
+
+        .search-input {
+          width: 200px;
+          padding: 5px 32px 5px 32px;
+          border: 1px solid ${(props) => props.theme.input.border};
+          border-radius: ${(props) => props.theme.border.radius.sm};
+          background: ${(props) => props.theme.input.bg};
+          color: ${(props) => props.theme.text};
+          font-size: ${(props) => props.theme.font.size.base};
+          outline: none;
+          transition: border-color 0.15s ease;
+
+          &:focus {
+            border-color: ${(props) => props.theme.input.focusBorder};
+          }
+
+          &::placeholder {
+            color: ${(props) => props.theme.input.placeholder.color};
+            opacity: ${(props) => props.theme.input.placeholder.opacity};
+          }
+        }
+
+        .clear-search {
+          position: absolute;
+          right: 1px;
+          padding: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: ${(props) => props.theme.colors.text.muted};
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          border-radius: ${(props) => props.theme.border.radius.sm};
+          transition: all 0.15s ease;
+
+          &:hover {
+            color: ${(props) => props.theme.text};
+            background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+          }
+        }
+      }
+
      button {
        display: inline-flex;
        align-items: center;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -1,12 +1,14 @@
-import { IconCopy, IconEdit, IconTrash, IconCheck, IconX } from '@tabler/icons';
+import { IconCopy, IconEdit, IconTrash, IconCheck, IconX, IconSearch } from '@tabler/icons';
 import { useState, useRef } from 'react';
 import { useDispatch } from 'react-redux';
-import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import useDebounce from 'hooks/useDebounce';
+import { renameEnvironment, updateEnvironmentColor } from 'providers/ReduxStore/slices/collections/actions';
 import { validateName, validateNameError } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import CopyEnvironment from 'components/Environments/EnvironmentSettings/CopyEnvironment';
 import DeleteEnvironment from 'components/Environments/EnvironmentSettings/DeleteEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
+import ColorPicker from 'components/ColorPicker';
 import StyledWrapper from './StyledWrapper';

 const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
@@ -18,7 +20,11 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
  const [isRenaming, setIsRenaming] = useState(false);
  const [newName, setNewName] = useState('');
  const [nameError, setNameError] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
  const inputRef = useRef(null);
+  const searchInputRef = useRef(null);

  const validateEnvironmentName = (name) => {
    if (!name || name.trim() === '') {
@@ -111,6 +117,33 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
    }
  };

+  const handleSearchIconClick = () => {
+    setIsSearchExpanded(true);
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 50);
+  };
+
+  const handleClearSearch = () => {
+    setSearchQuery('');
+  };
+
+  const handleSearchBlur = () => {
+    if (searchQuery === '') {
+      setIsSearchExpanded(false);
+    }
+  };
+
+  const handleColorChange = (color) => {
+    dispatch(updateEnvironmentColor(environment.uid, color, collection.uid))
+      .then(() => {
+        toast.success('Environment color updated!');
+      })
+      .catch(() => {
+        toast.error('An error occurred while updating the environment color');
+      });
+  };
+
  return (
    <StyledWrapper>
      {openDeleteModal && (
@@ -157,11 +190,46 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
              </div>
            </>
          ) : (
-            <h2 className="title">{environment.name}</h2>
+            <div className="flex items-center gap-2">
+              <h2 className="title">{environment.name}</h2>
+              <ColorPicker color={environment.color} onChange={handleColorChange} />
+            </div>
          )}
        </div>
        {nameError && isRenaming && <div className="title-error">{nameError}</div>}
        <div className="actions">
+          {isSearchExpanded ? (
+            <div className="search-input-wrapper">
+              <IconSearch size={14} strokeWidth={1.5} className="search-icon" />
+              <input
+                ref={searchInputRef}
+                type="text"
+                placeholder="Search variables..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onBlur={handleSearchBlur}
+                className="search-input"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+              />
+              {searchQuery && (
+                <button
+                  className="clear-search"
+                  onClick={handleClearSearch}
+                  onMouseDown={(e) => e.preventDefault()}
+                  title="Clear search"
+                >
+                  <IconX size={14} strokeWidth={1.5} />
+                </button>
+              )}
+            </div>
+          ) : (
+            <button onClick={handleSearchIconClick} title="Search variables">
+              <IconSearch size={15} strokeWidth={1.5} />
+            </button>
+          )}
          <button onClick={handleRenameClick} title="Rename">
            <IconEdit size={15} strokeWidth={1.5} />
          </button>
@@ -175,7 +243,12 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
      </div>

      <div className="content">
-        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
+        <EnvironmentVariables
+          environment={environment}
+          setIsModified={setIsModified}
+          collection={collection}
+          searchQuery={debouncedSearchQuery}
+        />
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -110,6 +110,7 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
+    gap: 8px;
    padding: 4px 8px;
    margin-bottom: 1px;
    font-size: 13px;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -6,6 +6,7 @@ import { IconDownload, IconUpload, IconSearch, IconPlus, IconCheck, IconX } from
 import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from 'components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
+import ColorBadge from 'components/ColorBadge';
 import { isEqual } from 'lodash';
 import { useDispatch } from 'react-redux';
 import { addEnvironment, renameEnvironment, selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
@@ -367,6 +368,7 @@ const EnvironmentList = ({
                  </div>
                ) : (
                  <>
+                    <ColorBadge color={env.color} size={8} />
                    <span className="environment-name">{env.name}</span>
                    <div className="environment-actions">
                      {activeEnvironmentUid === env.uid ? (
--- a/packages/bruno-app/src/components/FolderSettings/Headers/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Headers/index.js
@@ -11,6 +11,7 @@ import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
 import Button from 'ui/Button';
+import { headerNameRegex, headerValueRegex } from 'utils/common/regex';

 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

@@ -36,6 +37,22 @@ const Headers = ({ collection, folder }) => {

  const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));

+  const getRowError = useCallback((row, index, key) => {
+    if (key === 'name') {
+      if (!row.name || row.name.trim() === '') return null;
+      if (!headerNameRegex.test(row.name)) {
+        return 'Header name cannot contain spaces or newlines';
+      }
+    }
+    if (key === 'value') {
+      if (!row.value) return null;
+      if (!headerValueRegex.test(row.value)) {
+        return 'Header value cannot contain newlines';
+      }
+    }
+    return null;
+  }, []);
+
  const columns = [
    {
      key: 'name',
@@ -43,7 +60,7 @@ const Headers = ({ collection, folder }) => {
      isKeyField: true,
      placeholder: 'Name',
      width: '30%',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -51,7 +68,7 @@ const Headers = ({ collection, folder }) => {
          onChange={(newValue) => onChange(newValue.replace(/[\r\n]/g, ''))}
          autocomplete={headerAutoCompleteList}
          collection={collection}
-          placeholder={isLastEmptyRow ? 'Name' : ''}
+          placeholder={!value ? 'Name' : ''}
        />
      )
    },
@@ -59,7 +76,7 @@ const Headers = ({ collection, folder }) => {
      key: 'value',
      name: 'Value',
      placeholder: 'Value',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -68,7 +85,7 @@ const Headers = ({ collection, folder }) => {
          collection={collection}
          item={folder}
          autocomplete={MimeTypes}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
@@ -106,6 +123,7 @@ const Headers = ({ collection, folder }) => {
        rows={headers}
        onChange={handleHeadersChange}
        defaultRow={defaultRow}
+        getRowError={getRowError}
      />
      <div className="flex justify-end mt-2">
        <button className="text-link select-none" onClick={toggleBulkEditMode}>
--- a/packages/bruno-app/src/components/FolderSettings/Script/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Script/index.js
@@ -6,20 +6,38 @@ import { updateFolderRequestScript, updateFolderResponseScript } from 'providers
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
+import StatusDot from 'components/StatusDot';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';

 const Script = ({ collection, folder }) => {
  const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('pre-request');
  const preRequestEditorRef = useRef(null);
  const postResponseEditorRef = useRef(null);
  const requestScript = folder.draft ? get(folder, 'draft.request.script.req', '') : get(folder, 'root.request.script.req', '');
  const responseScript = folder.draft ? get(folder, 'draft.request.script.res', '') : get(folder, 'root.request.script.res', '');

+  // Default to post-response if pre-request script is empty
+  const getInitialTab = () => {
+    const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+    return hasPreRequestScript ? 'pre-request' : 'post-response';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab);
+  const prevFolderUidRef = useRef(folder.uid);
+
  const { displayedTheme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);

+  // Update active tab only when switching to a different folder
+  useEffect(() => {
+    if (prevFolderUidRef.current !== folder.uid) {
+      prevFolderUidRef.current = folder.uid;
+      const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+      setActiveTab(hasPreRequestScript ? 'pre-request' : 'post-response');
+    }
+  }, [folder.uid, requestScript]);
+
  // Refresh CodeMirror when tab becomes visible
  useEffect(() => {
    const timer = setTimeout(() => {
@@ -65,8 +83,14 @@ const Script = ({ collection, folder }) => {

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
-          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
-          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+          <TabsTrigger value="pre-request">
+            Pre Request
+            {requestScript && requestScript.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="post-response">
+            Post Response
+            {responseScript && responseScript.trim().length > 0 && <StatusDot />}
+          </TabsTrigger>
        </TabsList>

        <TabsContent value="pre-request" className="mt-2">
--- a/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js
@@ -51,7 +51,7 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
        </div>
      ),
      placeholder: varType === 'request' ? 'Value' : 'Expr',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <MultiLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -59,7 +59,7 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
          onChange={onChange}
          collection={collection}
          item={folder}
-          placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+          placeholder={!value ? (varType === 'request' ? 'Value' : 'Expr') : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/Preferences/Beta/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/Beta/StyledWrapper.js
@@ -1,9 +1,10 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  .bruno-form {
-    padding: 1rem;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;

  .submit {
    margin-top: 1rem;
@@ -25,8 +26,6 @@ const StyledWrapper = styled.div`
  }

  .no-features-message {
-    text-align: center;
-    padding: 2rem;
    color: var(--color-gray-500);
    font-style: italic;
  }
--- a/packages/bruno-app/src/components/Preferences/Beta/index.js
+++ b/packages/bruno-app/src/components/Preferences/Beta/index.js
@@ -93,12 +93,9 @@ const Beta = ({ close }) => {

  return (
    <StyledWrapper>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+      <div className="section-header">Beta Features</div>
+      <form onSubmit={formik.handleSubmit}>
        <div className="mb-6">
-          <div className="flex items-center mb-2">
-            <IconFlask size={20} className="mr-2 text-orange-500" />
-            <h2 className="text-lg font-medium">Beta Features</h2>
-          </div>
          <p className="text-gray-500 dark:text-gray-400 mb-4 text-wrap">
            Beta features are experimental previews that may change before full release. Try them and share feedback.
          </p>
--- a/packages/bruno-app/src/components/Preferences/Display/Font/index.js
+++ b/packages/bruno-app/src/components/Preferences/Display/Font/index.js
@@ -6,7 +6,7 @@ import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';

-const Font = ({ close }) => {
+const Font = () => {
  const dispatch = useDispatch();
  const preferences = useSelector((state) => state.app.preferences);
  const isInitialMount = useRef(true);
--- a/packages/bruno-app/src/components/Preferences/Display/index.js
+++ b/packages/bruno-app/src/components/Preferences/Display/index.js
@@ -3,9 +3,12 @@ import Font from './Font/index';

 const Display = ({ close }) => {
  return (
-    <div className="flex flex-col my-2 gap-10 w-full">
-      <div className="w-fit flex flex-col gap-2">
-        <Font close={close} />
+    <div className="flex flex-col gap-4 w-full">
+      <div className="section-header">Display</div>
+      <div className="flex flex-col mb-2 gap-10 w-full">
+        <div className="w-fit flex flex-col gap-2">
+          <Font close={close} />
+        </div>
      </div>
    </div>
  );
--- a/packages/bruno-app/src/components/Preferences/General/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/General/StyledWrapper.js
@@ -1,7 +1,32 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  
  color: ${(props) => props.theme.text};
+
+  .text-link {
+    color: ${(props) => props.theme.colors.text.link};
+    text-decoration: none;
+    font-size: 0.8125rem;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  form.bruno-form {
+    label {
+      font-size: 0.8125rem;
+    }
+  }
+
+  .default-collection-location-input {
+    max-width: 28rem;
+  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/Preferences/General/index.js
+++ b/packages/bruno-app/src/components/Preferences/General/index.js
@@ -11,7 +11,7 @@ import toast from 'react-hot-toast';
 import path from 'utils/common/path';
 import { IconTrash } from '@tabler/icons';

-const General = ({ close }) => {
+const General = () => {
  const preferences = useSelector((state) => state.app.preferences);
  const dispatch = useDispatch();
  const inputFileCaCertificateRef = useRef();
@@ -174,8 +174,9 @@ const General = ({ close }) => {

  return (
    <StyledWrapper className="w-full">
+      <div className="section-header">General Settings</div>
      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="flex items-center my-2">
+        <div className="flex items-center mb-2">
          <input
            id="sslVerification"
            type="checkbox"
--- a/packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/Keybindings/StyledWrapper.js
@@ -1,13 +1,18 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  
  table {
-    width: 100%;
+    width: 80%;
    border-collapse: collapse;

    thead,
    td {
-      border: 2px solid ${(props) => props.theme.table.border};
+      border: 1px solid ${(props) => props.theme.table.border};
    }

    thead {
@@ -17,7 +22,7 @@ const StyledWrapper = styled.div`
    }

    td {
-      padding: 4px 8px;
+      padding: 6px 10px;
      font-size: ${(props) => props.theme.font.size.sm};
    }

@@ -25,6 +30,7 @@ const StyledWrapper = styled.div`
      font-weight: 500;
      padding: 10px;
      text-align: left;
+      border: 1px solid ${(props) => props.theme.table.border};
    }
  }

@@ -35,11 +41,13 @@ const StyledWrapper = styled.div`
  .key-button {
    display: inline-block;
    color: ${(props) => props.theme.table.input.color};
+    opacity: 0.7;
    border-radius: 4px;
    padding: 1px 5px;
    font-family: monospace;
    margin-right: 8px;
    border: 1px solid #ccc;
+    border-bottom: 1.44px solid ${(props) => props.theme.table.input.border};
  }
 `;

--- a/packages/bruno-app/src/components/Preferences/Keybindings/index.js
+++ b/packages/bruno-app/src/components/Preferences/Keybindings/index.js
@@ -8,6 +8,7 @@ const Keybindings = ({ close }) => {

  return (
    <StyledWrapper className="w-full">
+      <div className="section-header">Keybindings</div>
      <div className="table-container">
        <table>
          <thead>
--- a/packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js
@@ -1,6 +1,11 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  
  .settings-label {
    width: 100px;
  }
@@ -25,6 +30,41 @@ const StyledWrapper = styled.div`
    label {
      color: ${(props) => props.theme.colors.text.yellow};
    }
+
+    .system-proxy-title {
+      color: ${(props) => props.theme.text};
+    }
+
+    .system-proxy-description {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .system-proxy-error-container {
+      background: ${(props) => props.theme.status.danger.background};
+      border: 1px solid ${(props) => props.theme.status.danger.border};
+      width: fit-content;
+    }
+
+    .system-proxy-error-text {
+      color: ${(props) => props.theme.status.danger.text};
+    }
+
+    .system-proxy-source-label {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .system-proxy-source-value {
+      color: ${(props) => props.theme.text};
+    }
+
+    .system-proxy-info-text {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .system-proxy-value {
+      color: ${(props) => props.theme.colors.text.purple};
+      opacity: 0.8;
+    }
  }
 `;

--- a/packages/bruno-app/src/components/Preferences/ProxySettings/SystemProxy/index.js
+++ b/packages/bruno-app/src/components/Preferences/ProxySettings/SystemProxy/index.js
@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { IconLoader2, IconRefresh } from '@tabler/icons';
+import { getSystemProxyVariables, refreshSystemProxy } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from '../StyledWrapper';
+
+const SystemProxy = () => {
+  const dispatch = useDispatch();
+  const systemProxyVariables = useSelector((state) => state.app.systemProxyVariables);
+  const { source, http_proxy, https_proxy, no_proxy } = systemProxyVariables || {};
+  const [isFetching, setIsFetching] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchProxy = (forceRefresh = false) => {
+    setIsFetching(true);
+    setError(null);
+    const action = forceRefresh ? refreshSystemProxy : getSystemProxyVariables;
+    dispatch(action())
+      .then(() => setError(null))
+      .catch((err) => setError(err.message || String(err)))
+      .finally(() => setIsFetching(false));
+  };
+
+  useEffect(() => {
+    fetchProxy(false);
+  }, [dispatch]);
+
+  const handleRefresh = () => {
+    fetchProxy(true);
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="mb-3 text-muted system-proxy-settings space-y-4">
+        <div className="flex items-start justify-start flex-col gap-2 mt-2">
+          <div className="flex flex-row items-center gap-2">
+            <div>
+              <h2 className="text-xs system-proxy-title flex flex-row">
+                System Proxy {isFetching ? <IconLoader2 className="animate-spin ml-1" size={16} strokeWidth={1.5} /> : null}
+              </h2>
+              <small className="system-proxy-description">
+                Below values are sourced from your system proxy settings.
+              </small>
+            </div>
+          </div>
+        </div>
+        {error && (
+          <div className="mb-2 p-3 system-proxy-error-container rounded">
+            <small className="system-proxy-error-text">
+              Error loading system proxy settings: {error}
+            </small>
+          </div>
+        )}
+        {source && (
+          <div className="mb-2">
+            <small className="font-medium flex flex-row gap-2">
+              <div className="system-proxy-source-label text-xs">
+                Proxy source:
+              </div>
+              <div className="system-proxy-source-value">
+                {source}
+              </div>
+            </small>
+          </div>
+        )}
+        <small className="system-proxy-info-text">
+          These values cannot be directly updated in Bruno. Please refer to your OS documentation to update these.
+        </small>
+        <div className="flex flex-col justify-start items-start pt-2">
+          <div className="mb-1 flex items-center">
+            <label className="settings-label">
+              http_proxy
+            </label>
+            <div className="system-proxy-value">{http_proxy || '-'}</div>
+          </div>
+          <div className="mb-1 flex items-center">
+            <label className="settings-label">
+              https_proxy
+            </label>
+            <div className="system-proxy-value">{https_proxy || '-'}</div>
+          </div>
+          <div className="mb-1 flex items-center">
+            <label className="settings-label">
+              no_proxy
+            </label>
+            <div className="system-proxy-value">{no_proxy || '-'}</div>
+          </div>
+        </div>
+        <span
+          className="text-link cursor-pointer hover:underline default-collection-location-browse flex flex-row items-center"
+          onClick={handleRefresh}
+        >
+          <IconRefresh size={14} strokeWidth={1.5} className="mr-1" />
+          Refresh
+        </span>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default SystemProxy;
--- a/packages/bruno-app/src/components/Preferences/ProxySettings/index.js
+++ b/packages/bruno-app/src/components/Preferences/ProxySettings/index.js
@@ -9,13 +9,11 @@ import StyledWrapper from './StyledWrapper';
 import { useDispatch, useSelector } from 'react-redux';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 import { useState } from 'react';
+import SystemProxy from './SystemProxy';

 const ProxySettings = ({ close }) => {
  const preferences = useSelector((state) => state.app.preferences);
-  const systemProxyEnvVariables = useSelector((state) => state.app.systemProxyEnvVariables);
-  const { http_proxy, https_proxy, no_proxy } = systemProxyEnvVariables || {};
  const dispatch = useDispatch();
-  console.log(preferences);

  const proxySchema = Yup.object({
    disabled: Yup.boolean().optional(),
@@ -115,6 +113,7 @@ const ProxySettings = ({ close }) => {

  return (
    <StyledWrapper>
+      <div className="section-header">Proxy Settings</div>
      <form className="bruno-form" onSubmit={formik.handleSubmit}>
        <div className="mb-3 flex items-center mt-2">
          <label className="settings-label" htmlFor="protocol">
@@ -167,30 +166,7 @@ const ProxySettings = ({ close }) => {
        </div>
        {formik.values.disabled === false && formik.values.inherit === true ? (
          <div className="mb-3 pt-1 text-muted system-proxy-settings">
-            <small>
-              Below values are sourced from your system environment variables and cannot be directly updated in Bruno.<br />
-              Please refer to your OS documentation to change these values.
-            </small>
-            <div className="flex flex-col justify-start items-start pt-2">
-              <div className="mb-1 flex items-center">
-                <label className="settings-label" htmlFor="http_proxy">
-                  http_proxy
-                </label>
-                <div className="opacity-80">{http_proxy || '-'}</div>
-              </div>
-              <div className="mb-1 flex items-center">
-                <label className="settings-label" htmlFor="https_proxy">
-                  https_proxy
-                </label>
-                <div className="opacity-80">{https_proxy || '-'}</div>
-              </div>
-              <div className="mb-1 flex items-center">
-                <label className="settings-label" htmlFor="no_proxy">
-                  no_proxy
-                </label>
-                <div className="opacity-80">{no_proxy || '-'}</div>
-              </div>
-            </div>
+            <SystemProxy />
          </div>
        ) : null}
        {formik.values.disabled === false && formik.values.inherit === false ? (
@@ -291,12 +267,14 @@ const ProxySettings = ({ close }) => {
                Auth
              </label>
              <input
+                id="config.auth.disabled"
                type="checkbox"
                name="config.auth.disabled"
                checked={!formik.values.config.auth.disabled}
                onChange={(e) => {
                  formik.setFieldValue('config.auth.disabled', !e.target.checked);
                }}
+                className="mousetrap mr-0"
              />
            </div>
            <div>
--- a/packages/bruno-app/src/components/Preferences/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';

 const StyledWrapper = styled.div`
  div.tabs {
-    padding: 8px;
+    padding: 12px;
    min-width: 160px;

    div.tab {
@@ -28,10 +28,10 @@ const StyledWrapper = styled.div`

      &.active {
        color: ${(props) => props.theme.text} !important;
-        background: ${(props) => props.theme.modal.title.bg};
+        background: ${(props) => props.theme.tabs.secondary.active.bg};

        &:hover {
-          background: ${(props) => props.theme.modal.title.bg} !important;
+          background: ${(props) => props.theme.tabs.secondary.active.bg} !important;
        }
      }
    }
@@ -39,9 +39,9 @@ const StyledWrapper = styled.div`

  section.tab-panel {
    min-height: 70vh;
-    max-height: 70vh;
    overflow-y: auto;
-    width: clamp(300px, 45vw, 550px);
+    flex-grow: 1;
+    padding: 12px;
  }

  input[type="checkbox"],
@@ -50,11 +50,29 @@ const StyledWrapper = styled.div`
    cursor: pointer;
  }

+  .textbox {
+    line-height: 1.5;
+    padding: 0.45rem;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
+    color: ${(props) => props.theme.text};
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
+      outline: none !important;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
  .section-header {
    font-size: ${(props) => props.theme.font.size.sm};
    color: ${(props) => props.theme.colors.text.muted};
    font-weight: 500;
-    margin-bottom: 8px;
+    margin: 6px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
--- a/packages/bruno-app/src/components/Preferences/Support/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/Support/StyledWrapper.js
@@ -1,6 +1,11 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+
  color: ${(props) => props.theme.text};
  .rows {
    svg {
--- a/packages/bruno-app/src/components/Preferences/Support/index.js
+++ b/packages/bruno-app/src/components/Preferences/Support/index.js
@@ -8,8 +8,9 @@ const Support = () => {

  return (
    <StyledWrapper>
+      <div className="section-header">Support</div>
      <div className="rows">
-        <div className="mt-2">
+        <div className="mb-2">
          <a href="https://docs.usebruno.com" target="_blank" className="flex items-end">
            <IconBook size={18} strokeWidth={2} />
            <span className="label ml-2">{t('COMMON.DOCUMENTATION')}</span>
--- a/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js
@@ -3,7 +3,7 @@ import { rgba } from 'polished';

 const StyledWrapper = styled.div`
  .appearance-container {
-    padding: 8px 0 16px 0;
+    padding-bottom: 16px;
  }
        
  .theme-mode-option {
--- a/packages/bruno-app/src/components/Preferences/index.js
+++ b/packages/bruno-app/src/components/Preferences/index.js
@@ -1,7 +1,16 @@
-import Modal from 'components/Modal/index';
 import classnames from 'classnames';
-import React, { useState } from 'react';
-import { IconSettings, IconPalette, IconBrowser, IconUserCircle, IconKeyboard, IconZoomQuestion, IconSquareLetterB } from '@tabler/icons';
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateActivePreferencesTab } from 'providers/ReduxStore/slices/app';
+import {
+  IconSettings,
+  IconPalette,
+  IconBrowser,
+  IconUserCircle,
+  IconKeyboard,
+  IconZoomQuestion,
+  IconSquareLetterB
+} from '@tabler/icons';

 import Support from './Support';
 import General from './General';
@@ -13,8 +22,13 @@ import Beta from './Beta';

 import StyledWrapper from './StyledWrapper';

-const Preferences = ({ onClose }) => {
-  const [tab, setTab] = useState('general');
+const Preferences = () => {
+  const dispatch = useDispatch();
+  const tab = useSelector((state) => state.app.activePreferencesTab);
+
+  const setTab = (tab) => {
+    dispatch(updateActivePreferencesTab({ tab }));
+  };

  const getTabClassname = (tabName) => {
    return classnames(`tab select-none ${tabName}`, {
@@ -25,27 +39,27 @@ const Preferences = ({ onClose }) => {
  const getTabPanel = (tab) => {
    switch (tab) {
      case 'general': {
-        return <General close={onClose} />;
+        return <General />;
      }

      case 'themes': {
-        return <Themes close={onClose} />;
+        return <Themes />;
      }

      case 'proxy': {
-        return <Proxy close={onClose} />;
+        return <Proxy />;
      }

      case 'display': {
-        return <Display close={onClose} />;
+        return <Display />;
      }

      case 'keybindings': {
-        return <Keybindings close={onClose} />;
+        return <Keybindings />;
      }

      case 'beta': {
-        return <Beta close={onClose} />;
+        return <Beta />;
      }

      case 'support': {
@@ -55,42 +69,47 @@ const Preferences = ({ onClose }) => {
  };

  return (
-    <StyledWrapper>
-      <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className="flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2">
-          <div className="flex flex-col items-center tabs" role="tablist">
-            <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
-              <IconSettings size={16} strokeWidth={1.5} />
-              General
-            </div>
-            <div className={getTabClassname('themes')} role="tab" onClick={() => setTab('themes')}>
-              <IconPalette size={16} strokeWidth={1.5} />
-              Themes
-            </div>
-            <div className={getTabClassname('display')} role="tab" onClick={() => setTab('display')}>
-              <IconBrowser size={16} strokeWidth={1.5} />
-              Display
-            </div>
-            <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
-              <IconUserCircle size={16} strokeWidth={1.5} />
-              Proxy
-            </div>
-            <div className={getTabClassname('keybindings')} role="tab" onClick={() => setTab('keybindings')}>
-              <IconKeyboard size={16} strokeWidth={1.5} />
-              Keybindings
-            </div>
-            <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
-              <IconZoomQuestion size={16} strokeWidth={1.5} />
-              Support
-            </div>
-            <div className={getTabClassname('beta')} role="tab" onClick={() => setTab('beta')}>
-              <IconSquareLetterB size={16} strokeWidth={1.5} />
-              Beta
-            </div>
+    <StyledWrapper className="h-full">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="flex flex-col items-center tabs tablist" role="tablist">
+          <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
+            <IconSettings size={16} strokeWidth={1.5} />
+            General
+          </div>
+          <div className={getTabClassname('themes')} role="tab" onClick={() => setTab('themes')}>
+            <IconPalette size={16} strokeWidth={1.5} />
+            Themes
+          </div>
+          <div className={getTabClassname('display')} role="tab" onClick={() => setTab('display')}>
+            <IconBrowser size={16} strokeWidth={1.5} />
+            Display
+          </div>
+          <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
+            <IconUserCircle size={16} strokeWidth={1.5} />
+            Proxy
+          </div>
+          <div className={getTabClassname('keybindings')} role="tab" onClick={() => setTab('keybindings')}>
+            <IconKeyboard size={16} strokeWidth={1.5} />
+            Keybindings
+          </div>
+          <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
+            <IconZoomQuestion size={16} strokeWidth={1.5} />
+            Support
+          </div>
+          <div className={getTabClassname('beta')} role="tab" onClick={() => setTab('beta')}>
+            <IconSquareLetterB size={16} strokeWidth={1.5} />
+            Beta
          </div>
-          <section className="flex flex-grow ps-2 pe-4 pt-2 pb-6 tab-panel">{getTabPanel(tab)}</section>
        </div>
-      </Modal>
+        <section
+          className="flex flex-grow ps-2 pe-4 pt-2 pb-6 p-[12px] tab-panel"
+          role="tabpanel"
+          id={`${tab}-panel`}
+          aria-labelledby={`${tab}-tab`}
+        >
+          {getTabPanel(tab)}
+        </section>
+      </div>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Assertions/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/index.js
@@ -125,7 +125,7 @@ const Assertions = ({ item, collection }) => {
      key: 'value',
      name: 'Value',
      width: '30%',
-      render: ({ row, value, onChange, isLastEmptyRow }) => {
+      render: ({ row, value, onChange }) => {
        const { operator, value: assertionValue } = parseAssertionOperator(value);

        if (isUnaryOperator(operator)) {
@@ -141,7 +141,7 @@ const Assertions = ({ item, collection }) => {
            onRun={handleRun}
            collection={collection}
            item={item}
-            placeholder={isLastEmptyRow ? 'Value' : ''}
+            placeholder={!value ? 'Value' : ''}
          />
        );
      }
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -47,7 +47,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
      key: 'value',
      name: 'Value',
      placeholder: 'Value',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <MultiLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -57,7 +57,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
          onRun={handleRun}
          collection={collection}
          item={item}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
@@ -157,7 +157,7 @@ const MultipartFormParams = ({ item, collection }) => {
                allowNewlines={true}
                collection={collection}
                item={item}
-                placeholder={isLastEmptyRow ? 'Value' : ''}
+                placeholder={!value ? 'Value' : ''}
              />
            </div>
            {!hasTextValue && !isLastEmptyRow && (
@@ -178,11 +178,11 @@ const MultipartFormParams = ({ item, collection }) => {
      name: 'Content-Type',
      placeholder: 'Auto',
      width: '20%',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          onSave={onSave}
          theme={storedTheme}
-          placeholder={isLastEmptyRow ? 'Auto' : ''}
+          placeholder={!value ? 'Auto' : ''}
          value={value || ''}
          onChange={onChange}
          onRun={handleRun}
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -70,7 +70,7 @@ const QueryParams = ({ item, collection }) => {
      key: 'value',
      name: 'Value',
      placeholder: 'Value',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <MultiLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -80,7 +80,7 @@ const QueryParams = ({ item, collection }) => {
          collection={collection}
          item={item}
          variablesAutocomplete={true}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@@ -10,6 +10,7 @@ import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from '../../BulkEditor';
+import { headerNameRegex, headerValueRegex } from 'utils/common/regex';

 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);

@@ -38,6 +39,22 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
    }));
  }, [dispatch, collection.uid, item.uid]);

+  const getRowError = useCallback((row, index, key) => {
+    if (key === 'name') {
+      if (!row.name || row.name.trim() === '') return null;
+      if (!headerNameRegex.test(row.name)) {
+        return 'Header name cannot contain spaces or newlines';
+      }
+    }
+    if (key === 'value') {
+      if (!row.value) return null;
+      if (!headerValueRegex.test(row.value)) {
+        return 'Header value cannot contain newlines';
+      }
+    }
+    return null;
+  }, []);
+
  const toggleBulkEditMode = () => {
    setIsBulkEditMode(!isBulkEditMode);
  };
@@ -49,7 +66,7 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
      isKeyField: true,
      placeholder: 'Name',
      width: '30%',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -59,7 +76,7 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
          onRun={handleRun}
          collection={collection}
          item={item}
-          placeholder={isLastEmptyRow ? 'Name' : ''}
+          placeholder={!value ? 'Name' : ''}
        />
      )
    },
@@ -67,7 +84,7 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
      key: 'value',
      name: 'Value',
      placeholder: 'Value',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -77,7 +94,7 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
          autocomplete={MimeTypes}
          collection={collection}
          item={item}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
@@ -110,6 +127,7 @@ const RequestHeaders = ({ item, collection, addHeaderText }) => {
        rows={headers || []}
        onChange={handleHeadersChange}
        defaultRow={defaultRow}
+        getRowError={getRowError}
        reorderable={true}
        onReorder={handleHeaderDrag}
      />
--- a/packages/bruno-app/src/components/RequestPane/Script/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/index.js
@@ -6,18 +6,36 @@ import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
+import StatusDot from 'components/StatusDot';

 const Script = ({ item, collection }) => {
  const dispatch = useDispatch();
-  const [activeTab, setActiveTab] = useState('pre-request');
  const preRequestEditorRef = useRef(null);
  const postResponseEditorRef = useRef(null);
  const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
  const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');

+  // Default to post-response if pre-request script is empty
+  const getInitialTab = () => {
+    const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+    return hasPreRequestScript ? 'pre-request' : 'post-response';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab);
+  const prevItemUidRef = useRef(item.uid);
+
  const { displayedTheme } = useTheme();
  const preferences = useSelector((state) => state.app.preferences);

+  // Update active tab only when switching to a different item
+  useEffect(() => {
+    if (prevItemUidRef.current !== item.uid) {
+      prevItemUidRef.current = item.uid;
+      const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+      setActiveTab(hasPreRequestScript ? 'pre-request' : 'post-response');
+    }
+  }, [item.uid, requestScript]);
+
  // Refresh CodeMirror when tab becomes visible
  useEffect(() => {
    // Small delay to ensure DOM is updated
@@ -55,12 +73,21 @@ const Script = ({ item, collection }) => {
  const onRun = () => dispatch(sendRequest(item, collection.uid));
  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));

+  const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
+  const hasPostResponseScript = responseScript && responseScript.trim().length > 0;
+
  return (
    <div className="w-full h-full flex flex-col">
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
-          <TabsTrigger value="pre-request">Pre Request</TabsTrigger>
-          <TabsTrigger value="post-response">Post Response</TabsTrigger>
+          <TabsTrigger value="pre-request">
+            Pre Request
+            {hasPreRequestScript && <StatusDot />}
+          </TabsTrigger>
+          <TabsTrigger value="post-response">
+            Post Response
+            {hasPostResponseScript && <StatusDot />}
+          </TabsTrigger>
        </TabsList>

        <TabsContent value="pre-request" className="mt-2" dataTestId="pre-request-script-editor">
--- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
@@ -61,7 +61,7 @@ const VarsTable = ({ item, collection, vars, varType }) => {
        </div>
      ),
      placeholder: varType === 'request' ? 'Value' : 'Expr',
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <MultiLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -70,7 +70,7 @@ const VarsTable = ({ item, collection, vars, varType }) => {
          onRun={handleRun}
          collection={collection}
          item={item}
-          placeholder={isLastEmptyRow ? (varType === 'request' ? 'Value' : 'Expr') : ''}
+          placeholder={!value ? (varType === 'request' ? 'Value' : 'Expr') : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/index.js
@@ -93,6 +93,17 @@ const WSAuth = ({ item, collection }) => {
      case 'inherit': {
        const source = getEffectiveAuthSource();

+        // Check if inherited auth is OAuth2 - not supported for WebSockets
+        if (source?.auth?.mode === 'oauth2') {
+          return (
+            <>
+              <div className="flex flex-row w-full mt-2 gap-2">
+                OAuth 2 not <strong>yet</strong> supported by WebSockets. Using no auth instead.
+              </div>
+            </>
+          );
+        }
+
        // Only show inherited auth if it's one of the supported types
        if (source && supportedAuthModes.includes(source.auth?.mode)) {
          return (
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -33,6 +33,7 @@ import WSResponsePane from 'components/ResponsePane/WsResponsePane';
 import { useTabPaneBoundaries } from 'hooks/useTabPaneBoundaries/index';
 import ResponseExample from 'components/ResponseExample';
 import WorkspaceHome from 'components/WorkspaceHome';
+import Preferences from 'components/Preferences';
 import EnvironmentSettings from 'components/Environments/EnvironmentSettings';
 import GlobalEnvironmentSettings from 'components/Environments/GlobalEnvironmentSettings';

@@ -171,13 +172,17 @@ const RequestTabPanel = () => {
  }, [isConsoleOpen, isVerticalLayout]);

  if (!activeTabUid || !focusedTab) {
-    return <WorkspaceHome />;
+    return <div className="pb-4 px-4">An error occurred!</div>;
  }

  if (focusedTab.type === 'global-environment-settings') {
    return <GlobalEnvironmentSettings />;
  }

+  if (focusedTab.type === 'preferences') {
+    return <Preferences />;
+  }
+
  if (!focusedTab.uid || !focusedTab.collectionUid) {
    return <div className="pb-4 px-4">An error occurred!</div>;
  }
--- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
@@ -12,6 +12,10 @@ import ActionIcon from 'ui/ActionIcon';
 const CollectionToolBar = ({ collection }) => {
  const dispatch = useDispatch();

+  if (!collection) {
+    return null;
+  }
+
  const handleRun = () => {
    dispatch(
      addTab({
--- a/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
@@ -93,7 +93,7 @@ const ExampleTab = ({ tab, collection }) => {
          onSaveAndClose={() => {
            // For examples, we don't have a separate save action
            // The changes are saved automatically when the request is saved
-            dispatch(saveRequest(item.uid, collection.uid));
+            dispatch(saveRequest(item.uid, collection.uid, true));
            dispatch(closeTabs({
              tabUids: [tab.uid]
            }));
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
@@ -61,6 +61,14 @@ const SpecialTab = ({ handleCloseClick, type, tabName, handleDoubleClick, hasDra
          </>
        );
      }
+      case 'preferences': {
+        return (
+          <>
+            <IconSettings size={14} strokeWidth={1.5} className="special-tab-icon flex-shrink-0" />
+            <span className="ml-1 tab-name">Preferences</span>
+          </>
+        );
+      }
    }
  };

--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -172,7 +172,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
    setShowConfirmGlobalEnvironmentClose(true);
  };

-  if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'environment-settings', 'global-environment-settings'].includes(tab.type)) {
+  if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'environment-settings', 'global-environment-settings', 'preferences'].includes(tab.type)) {
    return (
      <StyledWrapper
        className={`flex items-center justify-between tab-container px-2 ${tab.preview ? 'italic' : ''}`}
--- a/packages/bruno-app/src/components/RequestTabs/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/index.js
@@ -10,8 +10,7 @@ import CollectionToolBar from './CollectionToolBar';
 import RequestTab from './RequestTab';
 import StyledWrapper from './StyledWrapper';
 import DraggableTab from './DraggableTab';
-import CreateUntitledRequest from 'components/CreateUntitledRequest';
-import { IconPlus } from '@tabler/icons';
+import CreateTransientRequest from 'components/CreateTransientRequest';
 import ActionIcon from 'ui/ActionIcon/index';

 const RequestTabs = () => {
@@ -44,7 +43,7 @@ const RequestTabs = () => {
  }, []);

  const activeTab = find(tabs, (t) => t.uid === activeTabUid);
-  const activeCollection = find(collections, (c) => c.uid === activeTab?.collectionUid);
+  const activeCollection = find(collections, (c) => c?.uid === activeTab?.collectionUid);
  const collectionRequestTabs = filter(tabs, (t) => t.collectionUid === activeTab?.collectionUid);

  useEffect(() => {
@@ -52,7 +51,7 @@ const RequestTabs = () => {

    const checkOverflow = () => {
      if (tabsRef.current && scrollContainerRef.current) {
-        const hasOverflow = tabsRef.current.scrollWidth > scrollContainerRef.current.clientWidth;
+        const hasOverflow = tabsRef.current.scrollWidth > scrollContainerRef.current.clientWidth + 1;
        setShowChevrons(hasOverflow);
      }
    };
@@ -111,7 +110,7 @@ const RequestTabs = () => {
      )}
      {collectionRequestTabs && collectionRequestTabs.length ? (
        <>
-          <CollectionToolBar collection={activeCollection} />
+          {activeCollection && <CollectionToolBar collection={activeCollection} />}
          <div className="flex items-center gap-2 pl-2" ref={collectionTabsRef}>
            <div className={classnames('scroll-chevrons', { hidden: !showChevrons })}>
              <ActionIcon size="lg" onClick={leftSlide} aria-label="Left Chevron" style={{ marginBottom: '3px' }}>
@@ -161,12 +160,7 @@ const RequestTabs = () => {
            </div>

            {activeCollection && (
-              <ActionIcon onClick={() => setNewRequestModalOpen(true)} aria-label="New Request" size="lg" style={{ marginBottom: '3px' }}>
-                <IconPlus
-                  size={18}
-                  strokeWidth={1.5}
-                />
-              </ActionIcon>
+              <CreateTransientRequest collectionUid={activeCollection.uid} />
            )}

            <div className={classnames('scroll-chevrons', { hidden: !showChevrons })}>
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
@@ -130,12 +130,12 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
      placeholder: 'Auto',
      width: '30%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          className="flex items-center justify-center"
          onSave={() => {}}
          theme={storedTheme}
-          placeholder={isLastEmptyRow ? 'Auto' : ''}
+          placeholder={!value ? 'Auto' : ''}
          value={value || ''}
          onChange={onChange}
          onRun={() => {}}
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
@@ -58,7 +58,7 @@ const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, edi
      placeholder: 'Value',
      width: '60%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <MultiLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -68,7 +68,7 @@ const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, edi
          onRun={() => {}}
          collection={collection}
          item={item}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
@@ -68,7 +68,7 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
      placeholder: 'Key',
      width: '40%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          readOnly={!editMode}
@@ -78,7 +78,7 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
          autocomplete={headerAutoCompleteList}
          onRun={() => {}}
          collection={collection}
-          placeholder={isLastEmptyRow ? 'Key' : ''}
+          placeholder={!value ? 'Key' : ''}
        />
      )
    },
@@ -88,7 +88,7 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
      placeholder: 'Value',
      width: '60%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          readOnly={!editMode}
@@ -100,7 +100,7 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
          allowNewlines={true}
          collection={collection}
          item={item}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
@@ -206,7 +206,7 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
                collection={collection}
                item={item}
                readOnly={!editMode}
-                placeholder={isLastEmptyRow ? 'Value' : ''}
+                placeholder={!value ? 'Value' : ''}
              />
            </div>
            {!hasTextValue && !isLastEmptyRow && (
@@ -228,11 +228,11 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
      placeholder: 'Auto',
      width: '30%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          onSave={() => {}}
          theme={storedTheme}
-          placeholder={isLastEmptyRow ? 'Auto' : ''}
+          placeholder={!value ? 'Auto' : ''}
          value={value || ''}
          onChange={onChange}
          onRun={() => {}}
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
@@ -105,7 +105,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
      placeholder: 'Name',
      width: '40%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -115,7 +115,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
          collection={collection}
          variablesAutocomplete={true}
          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Name' : ''}
+          placeholder={!value ? 'Name' : ''}
        />
      )
    },
@@ -125,7 +125,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
      placeholder: 'Value',
      width: '60%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -135,7 +135,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
          collection={collection}
          variablesAutocomplete={true}
          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
@@ -154,7 +154,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
      placeholder: 'Value',
      width: '60%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -164,7 +164,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
          collection={collection}
          variablesAutocomplete={true}
          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
@@ -124,7 +124,7 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
      placeholder: 'Key',
      width: '40%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -134,7 +134,7 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
          onRun={() => {}}
          collection={collection}
          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Key' : ''}
+          placeholder={!value ? 'Key' : ''}
        />
      )
    },
@@ -144,7 +144,7 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
      placeholder: 'Value',
      width: '60%',
      readOnly: !editMode,
-      render: ({ row, value, onChange, isLastEmptyRow }) => (
+      render: ({ value, onChange }) => (
        <SingleLineEditor
          value={value || ''}
          theme={storedTheme}
@@ -156,7 +156,7 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
          collection={collection}
          item={item}
          readOnly={!editMode}
-          placeholder={isLastEmptyRow ? 'Value' : ''}
+          placeholder={!value ? 'Value' : ''}
        />
      )
    }
--- a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
@@ -112,7 +112,7 @@ const ResponseBookmark = forwardRef(({ item, collection, responseSize, children
    }));

    // Save the request
-    await dispatch(saveRequest(item.uid, collection.uid));
+    await dispatch(saveRequest(item.uid, collection.uid, true));

    // Task middleware will track this and open the example in a new tab once the file is reloaded
    dispatch(insertTaskIntoQueue({
--- a/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponsePaneActions/index.js
@@ -47,6 +47,49 @@ const ResponsePaneActions = ({ item, collection, responseSize, selectedFormat, s
  const copyButtonRef = useRef(null);
  const layoutToggleButtonRef = useRef(null);

+  /**
+   * GQL response actions missing with Save response - because their is schema validation missing for saving GQL response will undo once example
+   * scehem is updated
+   */
+  const gqlMenuItems = [
+    {
+      id: 'copy-response',
+      label: 'Copy response',
+      leftSection: IconCopy,
+      get disabled() {
+        return copyButtonRef.current?.isDisabled ?? false;
+      },
+      onClick: () => copyButtonRef.current?.click()
+    },
+    {
+      id: 'download-response',
+      label: 'Download response',
+      leftSection: IconDownload,
+      get disabled() {
+        return downloadButtonRef.current?.isDisabled ?? false;
+      },
+      onClick: () => downloadButtonRef.current?.click()
+    },
+    {
+      id: 'clear-response',
+      label: 'Clear response',
+      leftSection: IconEraser,
+      get disabled() {
+        return clearButtonRef.current?.isDisabled ?? false;
+      },
+      onClick: () => clearButtonRef.current?.click()
+    },
+    {
+      id: 'change-layout',
+      label: 'Change layout',
+      leftSection: orientation === 'vertical' ? IconLayoutColumns : IconLayoutRows,
+      get disabled() {
+        return layoutToggleButtonRef.current?.isDisabled ?? false;
+      },
+      onClick: () => layoutToggleButtonRef.current?.click()
+    }
+  ];
+
  const menuItems = [
    {
      id: 'copy-response',
@@ -95,7 +138,7 @@ const ResponsePaneActions = ({ item, collection, responseSize, selectedFormat, s
    }
  ];

-  if (item.type !== 'http-request') {
+  if (!['http-request', 'graphql-request'].includes(item.type)) {
    return null;
  }

@@ -103,7 +146,7 @@ const ResponsePaneActions = ({ item, collection, responseSize, selectedFormat, s
    <StyledWrapper className="response-pane-actions-wrapper">
      <div className="actions-dropdown">
        <MenuDropdown
-          items={menuItems}
+          items={item.type !== 'graphql-request' ? menuItems : gqlMenuItems}
          placement="bottom-end"
          data-testid="response-actions-menu"
        >
@@ -119,7 +162,7 @@ const ResponsePaneActions = ({ item, collection, responseSize, selectedFormat, s
          data={data}
          dataBuffer={dataBuffer}
        />
-        <ResponseBookmark ref={bookmarkButtonRef} item={item} collection={collection} responseSize={responseSize} />
+        {item.type !== 'graphql-request' && <ResponseBookmark ref={bookmarkButtonRef} item={item} collection={collection} responseSize={responseSize} />}
        <ResponseDownload ref={downloadButtonRef} item={item} />
        <ResponseClear ref={clearButtonRef} item={item} collection={collection} />
        <ResponseLayoutToggle ref={layoutToggleButtonRef} />
--- a/packages/bruno-app/src/components/SaveTransientRequest/Container.js
+++ b/packages/bruno-app/src/components/SaveTransientRequest/Container.js
@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { pluralizeWord } from 'utils/common';
+import { IconAlertTriangle, IconDeviceFloppy } from '@tabler/icons';
+import { clearAllSaveTransientRequestModals } from 'providers/ReduxStore/slices/collections';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import toast from 'react-hot-toast';
+import Modal from 'components/Modal';
+import Button from 'ui/Button';
+import SaveTransientRequest from './index';
+
+const SaveTransientRequestContainer = () => {
+  const dispatch = useDispatch();
+  const modals = useSelector((state) => state.collections.saveTransientRequestModals);
+  const [openItemUid, setOpenItemUid] = useState(null);
+
+  // Reset openItemUid if the modal no longer exists in the array
+  useEffect(() => {
+    if (openItemUid && !modals.find((modal) => modal.item.uid === openItemUid)) {
+      setOpenItemUid(null);
+    }
+  }, [modals, openItemUid]);
+
+  const handleDiscardAll = () => {
+    // Close all tabs for the transient requests (this will also delete the transient files)
+    const tabUids = modals.map((modal) => modal.item.uid);
+    dispatch(closeTabs({ tabUids }));
+
+    // Clear all modals
+    dispatch(clearAllSaveTransientRequestModals());
+
+    // Show success message
+    toast.success(`Discarded ${modals.length} ${pluralizeWord('request', modals.length)}`);
+  };
+
+  const handleCancel = () => {
+    // Clear all modals on close
+    dispatch(clearAllSaveTransientRequestModals());
+  };
+
+  const handleOpenSpecificModal = (itemUid) => {
+    setOpenItemUid(itemUid);
+  };
+
+  // If a specific modal is open, show it
+  if (openItemUid) {
+    const modalToOpen = modals.find((modal) => modal.item.uid === openItemUid);
+    if (modalToOpen) {
+      return (
+        <SaveTransientRequest
+          item={modalToOpen.item}
+          collection={modalToOpen.collection}
+          isOpen={true}
+        />
+      );
+    }
+  }
+
+  // Show list of multiple modals
+  return (
+    <Modal
+      size="md"
+      title="Unsaved Transient Requests"
+      hideFooter={true}
+      disableEscapeKey={true}
+      disableCloseOnOutsideClick={true}
+      handleCancel={handleCancel}
+    >
+      <div className="flex items-center">
+        <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+        <h1 className="ml-2 text-lg font-medium">You have unsaved transient requests</h1>
+      </div>
+      <p className="mt-4">
+        You have <span className="font-medium">{modals.length}</span>{' '}
+        {pluralizeWord('request', modals.length)} that need to be saved.
+      </p>
+
+      <div className="mt-4">
+        <p className="text-sm font-medium mb-2">
+          Transient {pluralizeWord('Request', modals.length)} ({modals.length})
+        </p>
+        <p className="text-xs text-orange-600 mb-3">
+          These requests need to be saved before you can proceed.
+        </p>
+        <div className="space-y-2 max-h-96 overflow-y-auto pr-1">
+          {modals.map((modal) => {
+            const { item, collection } = modal;
+            return (
+              <div
+                key={item.uid}
+                className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded border border-gray-200"
+              >
+                <div className="flex flex-col flex-1 min-w-0 mr-3">
+                  <span className="text-sm text-gray-700 truncate">{item.name}</span>
+                  <span className="text-xs text-gray-500 truncate">
+                    {collection.name}
+                  </span>
+                </div>
+                <Button
+                  color="primary"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleOpenSpecificModal(item.uid)}
+                  icon={<IconDeviceFloppy size={14} strokeWidth={1.5} />}
+                >
+                  Save
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex justify-end mt-6 pt-4 border-t">
+        <Button color="danger" onClick={handleDiscardAll}>
+          Discard All
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default SaveTransientRequestContainer;
--- a/packages/bruno-app/src/components/SaveTransientRequest/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SaveTransientRequest/StyledWrapper.js
@@ -0,0 +1,287 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .save-request-form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .form-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: ${(props) => props.theme.text};
+  }
+
+  .form-input {
+    display: block;
+    width: 100%;
+    line-height: 1.42857143;
+    padding: 0.45rem;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
+    color: ${(props) => props.theme.text};
+    transition: border-color ease-in-out 0.1s;
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
+      outline: none !important;
+    }
+  }
+
+  .collections-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .collections-label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: ${(props) => props.theme.text};
+  }
+
+  .collection-name {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-bottom: 12px;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .collection-name-clickable {
+    cursor: pointer;
+  }
+
+  .collection-name-breadcrumb {
+    cursor: pointer;
+  }
+
+  .collection-name-chevron {
+    margin: 0 4px;
+  }
+
+  .search-container {
+    margin-bottom: 12px;
+  }
+
+  .folder-list {
+    border: 1px solid ${(props) => props.theme.border.border1};
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    max-height: 256px;
+    overflow-y: auto;
+    background-color: ${(props) => props.theme.modal.body.bg};
+    padding: 8px 8px;
+  }
+
+  .folder-list-items {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+  }
+
+  .folder-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    color: ${(props) => props.theme.text};
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    user-select: none;
+    &:hover {
+      background-color: ${(props) => props.theme.plainGrid.hoverBg};
+    }
+
+    &.selected {
+      background-color: ${(props) => props.theme.plainGrid.hoverBg};
+    }
+  }
+
+  .folder-item-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .folder-item-name {
+    color: ${(props) => props.theme.text};
+  }
+
+  .folder-empty-state {
+    padding: 16px 12px;
+    text-align: center;
+    font-size: 14px;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .custom-modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0px;
+    background-color: ${(props) => props.theme.modal.body.bg};
+    border-top: 1px solid ${(props) => props.theme.border.border0};
+    border-bottom-left-radius: ${(props) => props.theme.border.radius.base};
+    border-bottom-right-radius: ${(props) => props.theme.border.radius.base};
+  }
+
+  .footer-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .footer-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .text-muted {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .new-folder-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px 12px;
+    border-top: 1px solid ${(props) => props.theme.border.border1};
+    margin-top: 4px;
+    padding-top: 12px;
+  }
+
+  .new-folder-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .new-folder-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+  }
+
+  .new-folder-name-input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1;
+  }
+
+  .new-folder-name-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .new-folder-input-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .new-folder-input {
+    flex: 1;
+    padding: 6px 8px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    background-color: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
+    color: ${(props) => props.theme.text};
+    font-size: 14px;
+    transition: border-color ease-in-out 0.1s;
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.input.focusBorder} !important;
+      outline: none !important;
+    }
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+  }
+
+  .new-folder-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .new-folder-action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    color: ${(props) => props.theme.colors.text.muted};
+    cursor: pointer;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    transition: all 0.15s ease;
+
+    &:hover {
+      background-color: ${(props) => props.theme.plainGrid.hoverBg};
+      color: ${(props) => props.theme.text};
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  .new-folder-filesystem-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 4px;
+  }
+
+  .new-folder-filesystem-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .new-folder-toggle-filesystem-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    margin-top: 4px;
+    border: none;
+    background: transparent;
+    color: ${(props) => props.theme.colors.text.muted};
+    cursor: pointer;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    font-size: 12px;
+    transition: all 0.15s ease;
+    align-self: flex-start;
+
+    &:hover {
+      background-color: ${(props) => props.theme.plainGrid.hoverBg};
+      color: ${(props) => props.theme.text};
+    }
+  }
+
+  .new-folder-error {
+    color: ${(props) => props.theme.colors.danger};
+    font-size: 12px;
+    margin-top: 4px;
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/SaveTransientRequest/index.js
+++ b/packages/bruno-app/src/components/SaveTransientRequest/index.js
@@ -0,0 +1,412 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import Modal from 'components/Modal';
+import SearchInput from 'components/SearchInput';
+import Button from 'ui/Button';
+import { IconFolder, IconChevronRight, IconCheck, IconX, IconEye, IconEyeOff } from '@tabler/icons';
+import filter from 'lodash/filter';
+import toast from 'react-hot-toast';
+import StyledWrapper from './StyledWrapper';
+import useCollectionFolderTree from 'hooks/useCollectionFolderTree';
+import { removeSaveTransientRequestModal, deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
+import { newFolder } from 'providers/ReduxStore/slices/collections/actions';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
+import { resolveRequestFilename } from 'utils/common/platform';
+import { transformRequestToSaveToFilesystem, findCollectionByUid, findItemInCollection } from 'utils/collections';
+import { itemSchema } from '@usebruno/schema';
+
+const SaveTransientRequest = ({ item: itemProp, collection: collectionProp, isOpen = false, onClose }) => {
+  const dispatch = useDispatch();
+
+  const latestCollection = useSelector((state) =>
+    collectionProp ? findCollectionByUid(state.collections.collections, collectionProp.uid) : null
+  );
+  const latestItem = latestCollection && itemProp ? findItemInCollection(latestCollection, itemProp.uid) : itemProp;
+
+  const item = itemProp;
+  const collection = collectionProp;
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+      return;
+    }
+    // Remove from Redux array
+    dispatch(removeSaveTransientRequestModal({ itemUid: item.uid }));
+  };
+  const [requestName, setRequestName] = useState(item?.name || '');
+  const [searchText, setSearchText] = useState('');
+  const [showNewFolderInput, setShowNewFolderInput] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
+  const [newFolderDirectoryName, setNewFolderDirectoryName] = useState('');
+  const [showFilesystemName, setShowFilesystemName] = useState(false);
+  const newFolderInputRef = useRef(null);
+
+  const {
+    currentFolders,
+    breadcrumbs,
+    selectedFolderUid,
+    navigateIntoFolder,
+    navigateToRoot,
+    navigateToBreadcrumb,
+    getCurrentParentFolder,
+    getCurrentSelectedFolder,
+    reset,
+    isAtRoot
+  } = useCollectionFolderTree(collection?.uid);
+
+  const resetForm = () => {
+    setRequestName(item.name || '');
+    setSearchText('');
+    reset();
+    setShowNewFolderInput(false);
+    setNewFolderName('');
+    setNewFolderDirectoryName('');
+    setShowFilesystemName(false);
+  };
+
+  useEffect(() => {
+    isOpen && item && resetForm();
+  }, [isOpen, item]);
+
+  useEffect(() => {
+    if (showNewFolderInput && newFolderInputRef.current) {
+      newFolderInputRef.current.focus();
+    }
+  }, [showNewFolderInput]);
+
+  const filteredFolders = useMemo(() => {
+    if (!searchText.trim()) {
+      return currentFolders;
+    }
+    const searchLower = searchText.toLowerCase();
+    return filter(currentFolders, (folder) => folder.name.toLowerCase().includes(searchLower));
+  }, [currentFolders, searchText]);
+
+  const handleCancel = () => {
+    resetForm();
+    handleClose();
+  };
+
+  const handleConfirm = async () => {
+    if (!item || !collection || !latestItem) {
+      return;
+    }
+
+    try {
+      const { ipcRenderer } = window;
+
+      const selectedFolder = getCurrentSelectedFolder();
+      const targetDirname = selectedFolder ? selectedFolder.pathname : collection.pathname;
+
+      const trimmedName = requestName.trim();
+      if (!trimmedName || trimmedName.length === 0) {
+        toast.error('Request name is required');
+        return;
+      }
+
+      const sanitizedFilename = sanitizeName(trimmedName);
+
+      const itemToSave = latestItem.draft ? { ...latestItem, ...latestItem.draft } : { ...latestItem };
+      itemToSave.name = sanitizedFilename;
+      delete itemToSave.draft;
+
+      const transformedItem = transformRequestToSaveToFilesystem(itemToSave);
+      await itemSchema.validate(transformedItem);
+
+      const format = collection.format || 'bru';
+      const targetFilename = resolveRequestFilename(sanitizedFilename, format);
+
+      await ipcRenderer.invoke('renderer:save-transient-request', {
+        sourcePathname: item.pathname,
+        targetDirname,
+        targetFilename,
+        request: transformedItem,
+        format
+      });
+
+      dispatch(
+        closeTabs({
+          tabUids: [item.uid]
+        })
+      );
+
+      dispatch({
+        type: 'collections/deleteItem',
+        payload: {
+          itemUid: item.uid,
+          collectionUid: collection.uid
+        }
+      });
+
+      toast.success('Request saved successfully');
+      handleClose();
+    } catch (err) {
+      toast.error(err?.message || 'Failed to save request');
+      console.error('Error saving request:', err);
+    }
+  };
+
+  const handleShowNewFolder = () => {
+    setShowNewFolderInput(true);
+    setNewFolderName('');
+    setNewFolderDirectoryName('');
+    setShowFilesystemName(false);
+  };
+
+  const handleCancelNewFolder = () => {
+    setShowNewFolderInput(false);
+    setNewFolderName('');
+    setNewFolderDirectoryName('');
+    setShowFilesystemName(false);
+  };
+
+  const handleNewFolderNameChange = (value) => {
+    setNewFolderName(value);
+    if (!showFilesystemName) {
+      setNewFolderDirectoryName(sanitizeName(value));
+    }
+  };
+
+  const handleDirectoryNameChange = (value) => {
+    setNewFolderDirectoryName(value);
+  };
+
+  const handleCreateNewFolder = async () => {
+    const directoryName = newFolderDirectoryName.trim() || sanitizeName(newFolderName.trim());
+    const parentFolder = getCurrentParentFolder();
+
+    try {
+      await dispatch(newFolder(newFolderName.trim(), directoryName, collection?.uid, parentFolder?.uid));
+      toast.success('New folder created!');
+      handleCancelNewFolder();
+    } catch (err) {
+      const errorMessage = err?.message || 'An error occurred while adding the folder';
+      toast.error(errorMessage);
+    }
+  };
+
+  const handleFolderClick = (folderUid) => {
+    navigateIntoFolder(folderUid);
+    setSearchText('');
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper>
+      <Modal
+        size="md"
+        title="Save Request"
+        handleCancel={handleCancel}
+        handleConfirm={handleConfirm}
+        confirmText="Save"
+        cancelText="Cancel"
+        hideFooter={true}
+      >
+        <div className="save-request-form">
+          <div className="form-section">
+            <label htmlFor="request-name" className="form-label">
+              Request name
+            </label>
+            <input
+              id="request-name"
+              type="text"
+              className="form-input textbox"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              value={requestName}
+              onChange={(e) => setRequestName(e.target.value)}
+              autoFocus={true}
+              onFocus={(e) => e.target.select()}
+            />
+          </div>
+
+          <div className="collections-section">
+            <div className="collections-label">Save to Collections</div>
+            {collection && (
+              <div
+                className={`collection-name ${!isAtRoot ? 'collection-name-clickable' : ''}`}
+                onClick={!isAtRoot ? navigateToRoot : undefined}
+              >
+                <span>{collection.name}</span>
+                {breadcrumbs.length > 0 && (
+                  <>
+                    {breadcrumbs.map((breadcrumb, index) => (
+                      <React.Fragment key={breadcrumb.uid}>
+                        <IconChevronRight size={16} strokeWidth={1.5} className="collection-name-chevron" />
+                        <span
+                          className="collection-name-breadcrumb"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            navigateToBreadcrumb(index);
+                            setSearchText('');
+                          }}
+                        >
+                          {breadcrumb.name}
+                        </span>
+                      </React.Fragment>
+                    ))}
+                  </>
+                )}
+                {isAtRoot && <IconChevronRight size={16} strokeWidth={1.5} className="collection-name-chevron" />}
+              </div>
+            )}
+
+            <div className="search-container">
+              <SearchInput
+                searchText={searchText}
+                setSearchText={setSearchText}
+                placeholder="Search for folder"
+                autoFocus={false}
+              />
+            </div>
+
+            <div className="folder-list">
+              {filteredFolders.length > 0 || showNewFolderInput ? (
+                <ul className="folder-list-items">
+                  {filteredFolders.map((folder) => (
+                    <li
+                      key={folder.uid}
+                      className={`folder-item ${selectedFolderUid === folder.uid ? 'selected' : ''}`}
+                      onClick={() => handleFolderClick(folder.uid)}
+                    >
+                      <div className="folder-item-content">
+                        <IconFolder size={16} strokeWidth={1.5} />
+                        <span className="folder-item-name">{folder.name}</span>
+                      </div>
+                      <IconChevronRight size={16} strokeWidth={1.5} />
+                    </li>
+                  ))}
+                  {showNewFolderInput && (
+                    <li className="new-folder-item">
+                      <div className="new-folder-content">
+                        <IconFolder size={16} strokeWidth={1.5} />
+                        <div className="new-folder-inputs">
+                          <div className="new-folder-name-input-wrapper">
+                            {showFilesystemName && (
+                              <label className="new-folder-name-label">New Folder name (in bruno)</label>
+                            )}
+                            <div className="new-folder-input-row">
+                              <input
+                                ref={newFolderInputRef}
+                                type="text"
+                                className="new-folder-input"
+                                placeholder="Untitled new folder"
+                                value={newFolderName}
+                                onChange={(e) => handleNewFolderNameChange(e.target.value)}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    handleCreateNewFolder();
+                                  } else if (e.key === 'Escape') {
+                                    handleCancelNewFolder();
+                                  }
+                                }}
+                              />
+                              <div className="new-folder-actions">
+                                <button
+                                  type="button"
+                                  className="new-folder-action-btn"
+                                  onClick={handleCancelNewFolder}
+                                  title="Cancel"
+                                >
+                                  <IconX size={16} strokeWidth={1.5} />
+                                </button>
+                                <button
+                                  type="button"
+                                  className="new-folder-action-btn"
+                                  onClick={handleCreateNewFolder}
+                                  title="Create folder"
+                                >
+                                  <IconCheck size={16} strokeWidth={1.5} />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+
+                          {showFilesystemName && (
+                            <div className="new-folder-filesystem-wrapper">
+                              <label className="new-folder-filesystem-label">Name on filesystem</label>
+                              <input
+                                type="text"
+                                className="new-folder-input"
+                                value={newFolderDirectoryName}
+                                onChange={(e) => handleDirectoryNameChange(e.target.value)}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    handleCreateNewFolder();
+                                  }
+                                }}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        className="new-folder-toggle-filesystem-btn"
+                        onClick={() => {
+                          setShowFilesystemName(!showFilesystemName);
+                          setNewFolderDirectoryName(sanitizeName(newFolderName));
+                        }}
+                      >
+                        {showFilesystemName ? (
+                          <>
+                            <IconEyeOff size={16} strokeWidth={1.5} />
+                            <span>Hide filesystem name</span>
+                          </>
+                        ) : (
+                          <>
+                            <IconEye size={16} strokeWidth={1.5} />
+                            <span>Show filesystem name</span>
+                          </>
+                        )}
+                      </button>
+                    </li>
+                  )}
+                </ul>
+              ) : (
+                <div className="folder-empty-state">
+                  {searchText.trim() ? 'No folders found' : 'No folders available'}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="custom-modal-footer">
+          <div className="footer-left">
+            {!showNewFolderInput && (
+              <Button
+                type="button"
+                color="primary"
+                variant="ghost"
+                icon={<IconFolder size={16} strokeWidth={1.5} />}
+                onClick={handleShowNewFolder}
+              >
+                New Folder
+              </Button>
+            )}
+          </div>
+          <div className="footer-right">
+            <Button type="button" color="secondary" variant="ghost" onClick={handleCancel}>
+              Cancel
+            </Button>
+            <Button type="button" color="primary" onClick={handleConfirm}>
+              Save
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </StyledWrapper>
+  );
+};
+
+export default SaveTransientRequest;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js
@@ -20,7 +20,14 @@ const CloneCollection = ({ onClose, collectionUid }) => {
  const [isEditing, toggleEditing] = useState(false);
  const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));
  const preferences = useSelector((state) => state.app.preferences);
-  const defaultLocation = get(preferences, 'general.defaultCollectionLocation', '');
+  const workspaces = useSelector((state) => state.workspaces?.workspaces || []);
+  const workspaceUid = useSelector((state) => state.workspaces?.activeWorkspaceUid);
+  const activeWorkspace = workspaces.find((w) => w.uid === workspaceUid);
+  const isDefaultWorkspace = activeWorkspace?.type === 'default';
+
+  const defaultLocation = isDefaultWorkspace
+    ? get(preferences, 'general.defaultCollectionLocation', '')
+    : (activeWorkspace?.pathname ? `${activeWorkspace.pathname}/collections` : '');
  const { name } = collection;

  const formik = useFormik({
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js
@@ -17,8 +17,10 @@ const DeleteResponseExampleModal = ({ onClose, example, item, collection }) => {
      collectionUid: collection.uid,
      exampleUid: example.uid
    }));
-    dispatch(saveRequest(item.uid, collection.uid));
-    onClose();
+    dispatch(saveRequest(item.uid, collection.uid, true))
+      .then(() => {
+        onClose();
+      });
  };

  return (
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
@@ -27,7 +27,7 @@ const ExampleItem = ({ example, item, collection }) => {
  // Check if this example is the active tab
  const activeTabUid = useSelector((state) => state.tabs?.activeTabUid);
  const isExampleActive = activeTabUid === example.uid;
-  const [editName, setEditName] = useState(example.name);
+  const [editName, setEditName] = useState(example.name || '');
  const [showRenameModal, setShowRenameModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [generateCodeItemModalOpen, setGenerateCodeItemModalOpen] = useState(false);
@@ -86,7 +86,7 @@ const ExampleItem = ({ example, item, collection }) => {
    }));

    // Save the request
-    await dispatch(saveRequest(item.uid, collection.uid));
+    await dispatch(saveRequest(item.uid, collection.uid, true));

    // Task middleware will track this and open the example in a new tab once the file is reloaded
    dispatch(insertTaskIntoQueue({
@@ -125,8 +125,11 @@ const ExampleItem = ({ example, item, collection }) => {
        name: newName
      }
    }));
-    dispatch(saveRequest(item.uid, collection.uid));
-    setShowRenameModal(false);
+    dispatch(saveRequest(item.uid, collection.uid, true))
+      .then(() => {
+        toast.success(`Example renamed to "${newName}"`);
+        setShowRenameModal(false);
+      });
  };

  // Build menu items for MenuDropdown
@@ -227,7 +230,7 @@ const ExampleItem = ({ example, item, collection }) => {
          handleConfirm={() => handleRenameConfirm(editName)}
          confirmText="Rename"
          cancelText="Cancel"
-          confirmDisabled={!editName.trim()}
+          confirmDisabled={!editName || !editName.trim()}
        >
          <div>
            <label htmlFor="renameExampleName" className="block font-medium">
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/interpolation.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/interpolation.js
@@ -1,12 +1,29 @@
-import { interpolate } from '@usebruno/common';
+import { interpolate, interpolateObject } from '@usebruno/common';
 import { cloneDeep } from 'lodash';

+export const interpolateAuth = (auth, variables = {}) => {
+  if (!auth) return auth;
+  return interpolateObject(auth, variables);
+};
+
 export const interpolateHeaders = (headers = [], variables = {}) => {
-  return headers.map((header) => ({
-    ...header,
-    name: interpolate(header.name, variables),
-    value: interpolate(header.value, variables)
-  }));
+  if (!headers) return [];
+  return headers.map((header) => {
+    if (header.enabled) {
+      return interpolateObject(header, variables);
+    }
+    return header;
+  });
+};
+
+export const interpolateParams = (params = [], variables = {}) => {
+  if (!params) return [];
+  return params.map((param) => {
+    if (param.enabled) {
+      return interpolateObject(param, variables);
+    }
+    return param;
+  });
 };

 export const interpolateBody = (body, variables = {}) => {
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/interpolation.spec.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/interpolation.spec.js
@@ -1,48 +1,139 @@
-import { interpolateHeaders, interpolateBody } from './interpolation';
+import { interpolateAuth, interpolateHeaders, interpolateBody, interpolateParams } from './interpolation';

 describe('interpolation utils', () => {
+  describe('interpolateAuth', () => {
+    it('should interpolate auth object', () => {
+      const auth = {
+        mode: 'basic',
+        basic: {
+          username: '{{user}}',
+          password: '{{pass}}'
+        }
+      };
+      const variables = { user: 'admin', pass: 'secret' };
+
+      const result = interpolateAuth(auth, variables);
+
+      expect(result).toEqual({
+        mode: 'basic',
+        basic: {
+          username: 'admin',
+          password: 'secret'
+        }
+      });
+    });
+
+    it('should return null for null auth', () => {
+      expect(interpolateAuth(null, {})).toBeNull();
+    });
+
+    it('should return undefined for undefined auth', () => {
+      expect(interpolateAuth(undefined, {})).toBeUndefined();
+    });
+  });
+
  describe('interpolateHeaders', () => {
-    it('should interpolate variables in header name and value while preserving other props', () => {
+    it('should interpolate header names and values', () => {
      const headers = [
-        { uid: '1', name: 'X-{{var}}', value: 'value-{{var}}', enabled: true }
+        { name: 'X-{{headerName}}', value: '{{headerValue}}', enabled: true },
+        { name: 'Content-Type', value: 'application/json', enabled: true }
      ];
-      const variables = { var: 'test' };
+      const variables = { headerName: 'Custom', headerValue: 'test-value' };

      const result = interpolateHeaders(headers, variables);
+
      expect(result).toEqual([
-        {
-          uid: '1',
-          name: 'X-test',
-          value: 'value-test',
-          enabled: true
-        }
+        { name: 'X-Custom', value: 'test-value', enabled: true },
+        { name: 'Content-Type', value: 'application/json', enabled: true }
      ]);
    });
+
+    it('should return empty array for empty headers', () => {
+      expect(interpolateHeaders([], {})).toEqual([]);
+    });
  });

  describe('interpolateBody', () => {
-    it('should interpolate JSON body strings and keep formatting', () => {
+    it('should return null for null body', () => {
+      expect(interpolateBody(null, {})).toBeNull();
+    });
+
+    it('should interpolate JSON body with escaping', () => {
      const body = {
        mode: 'json',
-        json: '{"name": "{{username}}"}'
+        json: '{"name": "{{name}}", "count": {{count}}}'
      };
-      const variables = { username: 'bruno' };
+      const variables = { name: 'Test', count: 42 };

      const result = interpolateBody(body, variables);
-      expect(result.json).toBe('{\n  "name": "bruno"\n}');
+
+      expect(result.mode).toBe('json');
+      expect(JSON.parse(result.json)).toEqual({ name: 'Test', count: 42 });
    });

    it('should interpolate text body', () => {
-      const body = {
-        mode: 'text',
-        text: 'Hello {{name}}'
-      };
+      const body = { mode: 'text', text: 'Hello {{name}}' };
      const result = interpolateBody(body, { name: 'World' });
      expect(result.text).toBe('Hello World');
    });

-    it('should return null when body is null', () => {
-      expect(interpolateBody(null, { a: 1 })).toBeNull();
+    it('should interpolate xml body', () => {
+      const body = { mode: 'xml', xml: '<user>{{name}}</user>' };
+      const result = interpolateBody(body, { name: 'Alice' });
+      expect(result.xml).toBe('<user>Alice</user>');
+    });
+
+    it('should interpolate formUrlEncoded body for enabled params only', () => {
+      const body = {
+        mode: 'formUrlEncoded',
+        formUrlEncoded: [
+          { name: 'key1', value: '{{val1}}', enabled: true },
+          { name: 'key2', value: '{{val2}}', enabled: false }
+        ]
+      };
+      const variables = { val1: 'value1', val2: 'value2' };
+
+      const result = interpolateBody(body, variables);
+
+      expect(result.formUrlEncoded[0].value).toBe('value1');
+      expect(result.formUrlEncoded[1].value).toBe('{{val2}}');
+    });
+
+    it('should interpolate multipartForm body for enabled text params only', () => {
+      const body = {
+        mode: 'multipartForm',
+        multipartForm: [
+          { name: 'field1', value: '{{val}}', type: 'text', enabled: true },
+          { name: 'field2', value: '{{val}}', type: 'file', enabled: true }
+        ]
+      };
+      const variables = { val: 'interpolated' };
+
+      const result = interpolateBody(body, variables);
+
+      expect(result.multipartForm[0].value).toBe('interpolated');
+      expect(result.multipartForm[1].value).toBe('{{val}}');
+    });
+  });
+
+  describe('interpolateParams', () => {
+    it('should interpolate param names and values', () => {
+      const params = [
+        { name: '{{paramName}}', value: '{{paramValue}}', enabled: true },
+        { name: 'static', value: '{{val}}', enabled: false }
+      ];
+      const variables = { paramName: 'key', paramValue: 'value', val: 'skipped' };
+
+      const result = interpolateParams(params, variables);
+
+      expect(result[0].name).toBe('key');
+      expect(result[0].value).toBe('value');
+      expect(result[1].name).toBe('static');
+      expect(result[1].value).toBe('{{val}}');
+    });
+
+    it('should return empty array for empty params', () => {
+      expect(interpolateParams([], {})).toEqual([]);
    });
  });
 });
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.js
@@ -1,8 +1,33 @@
 import { buildHarRequest } from 'utils/codegenerator/har';
 import { getAuthHeaders } from 'utils/codegenerator/auth';
 import { getAllVariables, getTreePathFromCollectionToItem, mergeHeaders } from 'utils/collections/index';
-import { interpolateHeaders, interpolateBody } from './interpolation';
+import { resolveInheritedAuth } from 'utils/auth';
 import { get } from 'lodash';
+import { interpolateAuth, interpolateHeaders, interpolateBody, interpolateParams } from './interpolation';
+
+const addCurlAuthFlags = (curlCommand, auth) => {
+  if (!auth || !curlCommand) return curlCommand;
+
+  const authMode = auth.mode;
+
+  if (authMode === 'digest' || authMode === 'ntlm') {
+    const username = get(auth, `${authMode}.username`, '');
+    const password = get(auth, `${authMode}.password`, '');
+    const credentials = password ? `${username}:${password}` : username;
+    const authFlag = authMode === 'digest' ? '--digest' : '--ntlm';
+    // Escape single quotes for shell safety: ' becomes '\''
+    const escapedCredentials = credentials.replace(/'/g, `'\\''`);
+
+    const curlMatch = curlCommand.match(/^(curl(?:\.exe)?)/i);
+    if (curlMatch) {
+      const curlCmd = curlMatch[1];
+      const restOfCommand = curlCommand.slice(curlCmd.length);
+      return `${curlCmd} ${authFlag} --user '${escapedCredentials}'${restOfCommand}`;
+    }
+  }
+
+  return curlCommand;
+};

 const generateSnippet = ({ language, item, collection, shouldInterpolate = false }) => {
  try {
@@ -10,26 +35,33 @@ const generateSnippet = ({ language, item, collection, shouldInterpolate = false
    const { HTTPSnippet } = require('httpsnippet');

    const variables = getAllVariables(collection, item);
-
    const request = item.request;

+    let effectiveAuth = request.auth;
+    if (request.auth?.mode === 'inherit') {
+      const resolvedRequest = resolveInheritedAuth(item, collection);
+      effectiveAuth = resolvedRequest.auth;
+    }
+
    // Get the request tree path and merge headers
    const requestTreePath = getTreePathFromCollectionToItem(collection, item);
    let headers = mergeHeaders(collection, request, requestTreePath);

-    // Add auth headers if needed
+    // Add auth headers if needed (auth inheritance is resolved upstream)
    if (request.auth && request.auth.mode !== 'none') {
-      const collectionAuth = collection?.draft?.root ? get(collection, 'draft.root.request.auth', null) : get(collection, 'root.request.auth', null);
-      const authHeaders = getAuthHeaders(collectionAuth, request.auth);
+      if (shouldInterpolate) {
+        request.auth = interpolateAuth(request.auth, variables);
+      }
+
+      const authHeaders = getAuthHeaders(request.auth, collection, item);
      headers = [...headers, ...authHeaders];
    }

-    // Interpolate headers and body if needed
+    // Interpolate headers, body and params if needed
    if (shouldInterpolate) {
      headers = interpolateHeaders(headers, variables);
-      if (request.body) {
-        request.body = interpolateBody(request.body, variables);
-      }
+      request.body = interpolateBody(request.body, variables);
+      request.params = interpolateParams(request.params, variables);
    }

    // Build HAR request
@@ -40,7 +72,12 @@ const generateSnippet = ({ language, item, collection, shouldInterpolate = false

    // Generate snippet using HTTPSnippet
    const snippet = new HTTPSnippet(harRequest);
-    const result = snippet.convert(language.target, language.client);
+    let result = snippet.convert(language.target, language.client);
+
+    // For curl target, add special auth flags for digest/ntlm
+    if (language.target === 'shell' && language.client === 'curl') {
+      result = addCurlAuthFlags(result, effectiveAuth);
+    }

    return result;
  } catch (error) {
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.spec.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.spec.js
@@ -1,3 +1,5 @@
+import { getAuthHeaders } from 'utils/codegenerator/auth';
+
 jest.mock('httpsnippet', () => {
  return {
    HTTPSnippet: jest.fn().mockImplementation((harRequest) => ({
@@ -56,7 +58,9 @@ jest.mock('utils/collections/index', () => {
      ...collection?.processEnvVariables,
      baseUrl: 'https://api.example.com',
      apiKey: 'secret-key-123',
-      userId: '12345'
+      userId: '12345',
+      user: 'admin',
+      pass: 'secret123'
    })),
    getTreePathFromCollectionToItem: jest.fn(() => [])
  };
@@ -426,6 +430,55 @@ describe('Snippet Generator - Simple Tests', () => {

    expect(result).toBe('curl -X POST https://api.test.com/{{endpoint}} -H "Content-Type: application/json" -d \'{"name": "{{userName}}", "email": "{{userEmail}}", "age": {{userAge}}}\'');
  });
+
+  it('should interpolate auth credentials correctly', () => {
+    // Auth inheritance is resolved upstream in index.js before calling generateSnippet
+    // So the item already has the resolved auth (not 'inherit' mode)
+    const item = {
+      request: {
+        method: 'GET',
+        url: 'https://api.example.com',
+        auth: {
+          mode: 'basic',
+          basic: {
+            username: '{{user}}',
+            password: '{{pass}}'
+          }
+        }
+      }
+    };
+
+    const collection = {
+      root: {
+        request: {
+          auth: { mode: 'none' }
+        }
+      }
+    };
+
+    const { HTTPSnippet: mockedHTTPSnippet } = require('httpsnippet');
+    const { getAuthHeaders: actualGetAuthHeaders } = jest.requireActual('utils/codegenerator/auth');
+    getAuthHeaders.mockImplementation(actualGetAuthHeaders);
+
+    const language = { target: 'shell', client: 'curl' };
+
+    generateSnippet({
+      language,
+      item,
+      collection,
+      shouldInterpolate: true
+    });
+
+    const harRequest = mockedHTTPSnippet.mock.calls[0][0];
+
+    // "admin:secret123" encoded is "YWRtaW46c2VjcmV0MTIz"
+    expect(harRequest.headers).toContainEqual(
+      expect.objectContaining({
+        name: 'Authorization',
+        value: 'Basic YWRtaW46c2VjcmV0MTIz'
+      })
+    );
+  });
 });

 // Snippet should include inherited headers
@@ -554,3 +607,302 @@ describe('generateSnippet with edge-case bodies', () => {
    expect(result).toMatch(/^curl -X POST/);
  });
 });
+
+describe('generateSnippet with OAuth2 authentication', () => {
+  const language = { target: 'shell', client: 'curl' };
+  const baseCollection = { root: { request: { auth: { mode: 'none' }, headers: [] } } };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Mock getAuthHeaders to return OAuth2 headers based on the auth config
+    const authUtils = require('utils/codegenerator/auth');
+    authUtils.getAuthHeaders.mockImplementation((requestAuth, collection = null, item = null) => {
+      if (requestAuth?.mode === 'oauth2') {
+        const oauth2Config = requestAuth.oauth2 || {};
+        const tokenPlacement = oauth2Config.tokenPlacement || 'header';
+        // Use the actual value from config, defaulting to 'Bearer' only if undefined
+        // Empty string should be preserved to test no-prefix scenarios
+        const tokenHeaderPrefix = oauth2Config.tokenHeaderPrefix !== undefined
+          ? oauth2Config.tokenHeaderPrefix
+          : 'Bearer';
+        let accessToken = oauth2Config.accessToken || '<access_token>';
+
+        // If collection and item are provided, try to look up stored credentials
+        if (collection && item && collection.oauth2Credentials) {
+          const grantType = oauth2Config.grantType || '';
+          const urlToLookup = grantType === 'implicit'
+            ? oauth2Config.authorizationUrl || ''
+            : oauth2Config.accessTokenUrl || '';
+          const credentialsId = oauth2Config.credentialsId || 'credentials';
+          const collectionUid = collection.uid;
+
+          if (urlToLookup && collectionUid) {
+            // Look up stored credentials (simplified - assumes URL is already interpolated in test data)
+            const credentialsData = collection.oauth2Credentials.find(
+              (creds) =>
+                creds?.url === urlToLookup
+                && creds?.collectionUid === collectionUid
+                && creds?.credentialsId === credentialsId
+            );
+
+            if (credentialsData?.credentials?.access_token) {
+              accessToken = credentialsData.credentials.access_token;
+            }
+          }
+        }
+
+        if (tokenPlacement === 'header') {
+          // Always trim the final result for consistent formatting
+          const headerValue = tokenHeaderPrefix
+            ? `${tokenHeaderPrefix} ${accessToken}`.trim()
+            : accessToken.trim();
+          return [
+            {
+              enabled: true,
+              name: 'Authorization',
+              value: headerValue
+            }
+          ];
+        }
+      }
+      return [];
+    });
+  });
+
+  it('should include OAuth2 Bearer token in Authorization header when tokenPlacement is header', () => {
+    const item = {
+      uid: 'oauth-req',
+      request: {
+        method: 'GET',
+        url: 'https://api.example.com/users',
+        headers: [],
+        auth: {
+          mode: 'oauth2',
+          oauth2: {
+            grantType: 'client_credentials',
+            tokenPlacement: 'header',
+            tokenHeaderPrefix: 'Bearer',
+            accessToken: 'test-access-token-123'
+          }
+        }
+      }
+    };
+
+    generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+    const harUtils = require('utils/codegenerator/har');
+    const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+    expect(harCall.headers).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: 'Authorization',
+          value: 'Bearer test-access-token-123'
+        })
+      ])
+    );
+  });
+
+  it('should use custom tokenHeaderPrefix when provided', () => {
+    const item = {
+      uid: 'oauth-req-custom',
+      request: {
+        method: 'GET',
+        url: 'https://api.example.com/users',
+        headers: [],
+        auth: {
+          mode: 'oauth2',
+          oauth2: {
+            grantType: 'client_credentials',
+            tokenPlacement: 'header',
+            tokenHeaderPrefix: 'OAuth',
+            accessToken: 'custom-token-456'
+          }
+        }
+      }
+    };
+
+    generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+    const harUtils = require('utils/codegenerator/har');
+    const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+    expect(harCall.headers).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: 'Authorization',
+          value: 'OAuth custom-token-456'
+        })
+      ])
+    );
+  });
+
+  it('should not include Authorization header when tokenPlacement is url', () => {
+    const item = {
+      uid: 'oauth-req-url',
+      request: {
+        method: 'GET',
+        url: 'https://api.example.com/users',
+        headers: [],
+        auth: {
+          mode: 'oauth2',
+          oauth2: {
+            grantType: 'client_credentials',
+            tokenPlacement: 'url',
+            tokenQueryKey: 'access_token',
+            accessToken: 'token-in-url'
+          }
+        }
+      }
+    };
+
+    generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+    const harUtils = require('utils/codegenerator/har');
+    const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+    const authHeader = harCall.headers.find((h) => h.name === 'Authorization');
+    expect(authHeader).toBeUndefined();
+  });
+
+  it('should use placeholder when accessToken is not available', () => {
+    const item = {
+      uid: 'oauth-req-placeholder',
+      request: {
+        method: 'GET',
+        url: 'https://api.example.com/users',
+        headers: [],
+        auth: {
+          mode: 'oauth2',
+          oauth2: {
+            grantType: 'client_credentials',
+            tokenPlacement: 'header',
+            tokenHeaderPrefix: 'Bearer'
+          }
+        }
+      }
+    };
+
+    generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+    const harUtils = require('utils/codegenerator/har');
+    const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+    expect(harCall.headers).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: 'Authorization',
+          value: 'Bearer <access_token>'
+        })
+      ])
+    );
+  });
+
+  it('should handle empty tokenHeaderPrefix', () => {
+    const item = {
+      uid: 'oauth-req-no-prefix',
+      request: {
+        method: 'GET',
+        url: 'https://api.example.com/users',
+        headers: [],
+        auth: {
+          mode: 'oauth2',
+          oauth2: {
+            grantType: 'client_credentials',
+            tokenPlacement: 'header',
+            tokenHeaderPrefix: '',
+            accessToken: 'token-without-prefix'
+          }
+        }
+      }
+    };
+
+    generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+    const harUtils = require('utils/codegenerator/har');
+    const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+    expect(harCall.headers).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          name: 'Authorization',
+          value: 'token-without-prefix'
+        })
+      ])
+    );
+  });
+});
+
+describe('generateSnippet – digest and NTLM auth curl export', () => {
+  const language = { target: 'shell', client: 'curl' };
+
+  const baseCollection = {
+    root: {
+      request: {
+        headers: [],
+        auth: { mode: 'none' }
+      }
+    }
+  };
+
+  it('should add --digest flag and --user for digest auth', () => {
+    const item = {
+      uid: 'digest-req',
+      request: {
+        method: 'GET',
+        url: 'https://example.com/api',
+        headers: [],
+        body: { mode: 'none' },
+        auth: {
+          mode: 'digest',
+          digest: {
+            username: 'myuser',
+            password: 'mypass'
+          }
+        }
+      }
+    };
+
+    const result = generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+    expect(result).toMatch(/^curl --digest --user 'myuser:mypass'/);
+  });
+
+  it('should add --ntlm flag and --user for NTLM auth', () => {
+    const item = {
+      uid: 'ntlm-req',
+      request: {
+        method: 'GET',
+        url: 'https://example.com/api',
+        headers: [],
+        body: { mode: 'none' },
+        auth: {
+          mode: 'ntlm',
+          ntlm: {
+            username: 'myuser',
+            password: 'mypass'
+          }
+        }
+      }
+    };
+
+    const result = generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+    expect(result).toMatch(/^curl --ntlm --user 'myuser:mypass'/);
+  });
+
+  it('should handle digest auth with username only (no password)', () => {
+    const item = {
+      uid: 'digest-no-pass',
+      request: {
+        method: 'GET',
+        url: 'https://example.com/api',
+        headers: [],
+        body: { mode: 'none' },
+        auth: {
+          mode: 'digest',
+          digest: {
+            username: 'myuser',
+            password: ''
+          }
+        }
+      }
+    };
+
+    const result = generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+    expect(result).toMatch(/^curl --digest --user 'myuser'/);
+  });
+});
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
@@ -487,7 +487,7 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
    }));

    // Save the request
-    await dispatch(saveRequest(item.uid, collectionUid));
+    await dispatch(saveRequest(item.uid, collectionUid, true));

    // Task middleware will track this and open the example in a new tab once the file is reloaded
    dispatch(insertTaskIntoQueue({
@@ -502,8 +502,8 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
    setCreateExampleModalOpen(false);
  };

-  const folderItems = sortByNameThenSequence(filter(item.items, (i) => isItemAFolder(i)));
-  const requestItems = sortItemsBySequence(filter(item.items, (i) => isItemARequest(i)));
+  const folderItems = sortByNameThenSequence(filter(item.items, (i) => isItemAFolder(i) && !i.isTransient));
+  const requestItems = sortItemsBySequence(filter(item.items, (i) => isItemARequest(i) && !i.isTransient));

  const handleGenerateCode = () => {
    if (
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js
@@ -1,49 +1,89 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import filter from 'lodash/filter';
-import { useDispatch } from 'react-redux';
-import { flattenItems, isItemARequest, hasRequestChanges } from 'utils/collections';
+import { useDispatch, useSelector } from 'react-redux';
+import { flattenItems, isItemARequest, hasRequestChanges, findCollectionByUid } from 'utils/collections';
 import { pluralizeWord } from 'utils/common';
-import { saveMultipleRequests } from 'providers/ReduxStore/slices/collections/actions';
+import { saveRequest, saveMultipleRequests } from 'providers/ReduxStore/slices/collections/actions';
 import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
 import { removeCollection } from 'providers/ReduxStore/slices/collections/actions';
-import { IconAlertTriangle } from '@tabler/icons';
+import { IconAlertTriangle, IconDeviceFloppy } from '@tabler/icons';
 import Modal from 'components/Modal';
 import toast from 'react-hot-toast';
 import Button from 'ui/Button';

+const MAX_UNSAVED_REQUESTS_TO_SHOW = 5;
+
 const ConfirmCollectionCloseDrafts = ({ onClose, collection, collectionUid }) => {
-  const MAX_UNSAVED_REQUESTS_TO_SHOW = 5;
  const dispatch = useDispatch();

-  // Get all draft items in the collection
-  const currentDrafts = React.useMemo(() => {
-    if (!collection) return [];
-    const items = flattenItems(collection.items);
-    const collectionDrafts = filter(items, (item) => isItemARequest(item) && hasRequestChanges(item));
-    return collectionDrafts.map((draft) => ({
-      ...draft,
-      collectionUid: collectionUid
-    }));
-  }, [collection, collectionUid]);
+  const latestCollection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));
+
+  const activeCollection = latestCollection || collection;
+
+  const currentDrafts = useMemo(() => {
+    if (!activeCollection) return [];
+    const items = flattenItems(activeCollection.items);
+    return items
+      ?.filter((item) => isItemARequest(item) && hasRequestChanges(item) && !item.isTransient)
+      .map((item) => {
+        return {
+          ...item,
+          collectionUid: collectionUid
+        };
+      });
+  }, [activeCollection, collectionUid]);
+
+  const currentTransientDrafts = useMemo(() => {
+    if (!activeCollection) return [];
+    const items = flattenItems(activeCollection.items);
+    return items
+      ?.filter((item) => isItemARequest(item) && hasRequestChanges(item) && item.isTransient)
+      .map((item) => {
+        return {
+          ...item,
+          collectionUid: collectionUid
+        };
+      });
+  }, [activeCollection, collectionUid]);
+
+  const allDrafts = useMemo(() => {
+    return [...currentDrafts, ...currentTransientDrafts];
+  }, [currentDrafts, currentTransientDrafts]);

  const handleSaveAll = () => {
-    dispatch(saveMultipleRequests(currentDrafts))
-      .then(() => {
-        dispatch(removeCollection(collectionUid))
-          .then(() => {
-            toast.success('Collection removed from workspace');
-            onClose();
-          })
-          .catch(() => toast.error('An error occurred while removing the collection'));
-      })
-      .catch(() => {
-        toast.error('Failed to save requests!');
-      });
+    // If there are transient drafts, we can't proceed with batch save
+    if (currentTransientDrafts.length > 0) {
+      toast.error('Please save or discard transient requests first');
+      return;
+    }
+    // Save only non-transient drafts
+    if (currentDrafts.length > 0) {
+      dispatch(saveMultipleRequests(currentDrafts))
+        .then(() => {
+          dispatch(removeCollection(collectionUid))
+            .then(() => {
+              toast.success('Collection removed from workspace');
+              onClose();
+            })
+            .catch(() => toast.error('An error occurred while removing the collection'));
+        })
+        .catch(() => {
+          toast.error('Failed to save requests!');
+        });
+    } else {
+      // No non-transient drafts, just remove the collection
+      dispatch(removeCollection(collectionUid))
+        .then(() => {
+          toast.success('Collection removed from workspace');
+          onClose();
+        })
+        .catch(() => toast.error('An error occurred while removing the collection'));
+    }
  };

  const handleDiscardAll = () => {
-    // Discard all drafts
-    currentDrafts.forEach((draft) => {
+    // Discard all drafts (both regular and transient)
+    allDrafts.forEach((draft) => {
      dispatch(deleteRequestDraft({
        collectionUid: collectionUid,
        itemUid: draft.uid
@@ -59,7 +99,11 @@ const ConfirmCollectionCloseDrafts = ({ onClose, collection, collectionUid }) =>
      .catch(() => toast.error('An error occurred while removing the collection'));
  };

-  if (!currentDrafts.length) {
+  const handleSaveTransient = (draft) => {
+    dispatch(saveRequest(draft.uid, collectionUid));
+  };
+
+  if (!currentDrafts.length && !currentTransientDrafts.length) {
    return null;
  }

@@ -80,38 +124,82 @@ const ConfirmCollectionCloseDrafts = ({ onClose, collection, collectionUid }) =>
        <h1 className="ml-2 text-lg font-medium">Hold on..</h1>
      </div>
      <p className="mt-4">
-        Do you want to save the changes you made to the following{' '}
-        <span className="font-medium">{currentDrafts.length}</span> {pluralizeWord('request', currentDrafts.length)}?
+        You have unsaved changes in <span className="font-medium">{allDrafts.length}</span>{' '}
+        {pluralizeWord('request', allDrafts.length)}.
      </p>

-      <ul className="mt-4">
-        {currentDrafts.slice(0, MAX_UNSAVED_REQUESTS_TO_SHOW).map((item) => {
-          return (
-            <li key={item.uid} className="mt-1 text-xs">
-              {item.filename}
-            </li>
-          );
-        })}
-      </ul>
+      {/* Regular (saved) requests with changes */}
+      {currentDrafts.length > 0 && (
+        <div className="mt-4">
+          <p className="text-sm font-medium mb-2">
+            Saved {pluralizeWord('Request', currentDrafts.length)} ({currentDrafts.length})
+          </p>
+          <ul className="ml-2">
+            {currentDrafts.slice(0, MAX_UNSAVED_REQUESTS_TO_SHOW).map((item) => {
+              return (
+                <li key={item.uid} className="mt-1 text-xs text-gray-600">
+                  • {item.filename || item.name}
+                </li>
+              );
+            })}
+          </ul>
+          {currentDrafts.length > MAX_UNSAVED_REQUESTS_TO_SHOW && (
+            <p className="ml-2 mt-1 text-xs text-gray-500">
+              ...{currentDrafts.length - MAX_UNSAVED_REQUESTS_TO_SHOW} additional{' '}
+              {pluralizeWord('request', currentDrafts.length - MAX_UNSAVED_REQUESTS_TO_SHOW)} not shown
+            </p>
+          )}
+        </div>
+      )}

-      {currentDrafts.length > MAX_UNSAVED_REQUESTS_TO_SHOW && (
-        <p className="mt-1 text-xs">
-          ...{currentDrafts.length - MAX_UNSAVED_REQUESTS_TO_SHOW} additional{' '}
-          {pluralizeWord('request', currentDrafts.length - MAX_UNSAVED_REQUESTS_TO_SHOW)} not shown
-        </p>
+      {/* Transient (unsaved) requests */}
+      {currentTransientDrafts.length > 0 && (
+        <div className="mt-4">
+          <p className="text-sm font-medium mb-2">
+            Transient {pluralizeWord('Request', currentTransientDrafts.length)} ({currentTransientDrafts.length})
+          </p>
+          <p className="text-xs text-orange-600 mb-3">
+            These requests need to be saved individually before closing the collection.
+          </p>
+          <div className="space-y-2 max-h-64 overflow-y-auto pr-1">
+            {currentTransientDrafts.map((item) => {
+              return (
+                <div
+                  key={item.uid}
+                  className="flex items-center justify-between py-2 px-3 bg-gray-50 rounded border border-gray-200"
+                >
+                  <span className="text-sm text-gray-700 truncate mr-3">{item.name}</span>
+                  <Button
+                    color="primary"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleSaveTransient(item)}
+                    icon={<IconDeviceFloppy size={14} strokeWidth={1.5} />}
+                  >
+                    Save
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        </div>
      )}

      <div className="flex justify-between mt-6">
        <div>
          <Button color="danger" onClick={handleDiscardAll}>
-            Discard and Remove
+            Discard All and Remove
          </Button>
        </div>
        <div>
          <Button className="mr-2" color="secondary" variant="ghost" onClick={onClose}>
            Cancel
          </Button>
-          <Button onClick={handleSaveAll}>
+          <Button
+            onClick={handleSaveAll}
+            disabled={currentTransientDrafts.length > 0}
+            title={currentTransientDrafts.length > 0 ? 'Please save or discard transient requests first' : ''}
+          >
            {currentDrafts.length > 1 ? 'Save All and Remove' : 'Save and Remove'}
          </Button>
        </div>
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
@@ -276,8 +276,8 @@ const Collection = ({ collection, searchText }) => {
    return items.sort((a, b) => a.seq - b.seq);
  };

-  const requestItems = sortItemsBySequence(filter(collection.items, (i) => isItemARequest(i)));
-  const folderItems = sortByNameThenSequence(filter(collection.items, (i) => isItemAFolder(i)));
+  const requestItems = sortItemsBySequence(filter(collection.items, (i) => isItemARequest(i) && !i.isTransient));
+  const folderItems = sortByNameThenSequence(filter(collection.items, (i) => isItemAFolder(i) && !i.isTransient));

  const menuItems = [
    {
--- a/packages/bruno-app/src/components/StatusBar/index.js
+++ b/packages/bruno-app/src/components/StatusBar/index.js
@@ -1,22 +1,29 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import find from 'lodash/find';
 import { IconSettings, IconCookie, IconTool, IconSearch, IconPalette, IconBrandGithub } from '@tabler/icons';
 import Mousetrap from 'mousetrap';
 import { getKeyBindingsForActionAllOS } from 'providers/Hotkeys/keyMappings';
 import ToolHint from 'components/ToolHint';
-import Preferences from 'components/Preferences';
 import Cookies from 'components/Cookies';
 import Notifications from 'components/Notifications';
 import Portal from 'components/Portal';
 import ThemeDropdown from './ThemeDropdown';
-import { showPreferences } from 'providers/ReduxStore/slices/app';
 import { openConsole } from 'providers/ReduxStore/slices/logs';
+import { setActiveWorkspaceTab } from 'providers/ReduxStore/slices/workspaceTabs';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
 import { useApp } from 'providers/App';
 import StyledWrapper from './StyledWrapper';

 const StatusBar = () => {
  const dispatch = useDispatch();
-  const preferencesOpen = useSelector((state) => state.app.showPreferences);
+  const activeWorkspaceUid = useSelector((state) => state.workspaces.activeWorkspaceUid);
+  const showHomePage = useSelector((state) => state.app.showHomePage);
+  const showManageWorkspacePage = useSelector((state) => state.app.showManageWorkspacePage);
+  const showApiSpecPage = useSelector((state) => state.app.showApiSpecPage);
+  const tabs = useSelector((state) => state.tabs.tabs);
+  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+  const activeTab = find(tabs, (t) => t.uid === activeTabUid);
  const logs = useSelector((state) => state.logs.logs);
  const [cookiesOpen, setCookiesOpen] = useState(false);
  const { version } = useApp();
@@ -27,6 +34,22 @@ const StatusBar = () => {
    dispatch(openConsole());
  };

+  const handlePreferencesClick = () => {
+    if (showHomePage || showManageWorkspacePage || showApiSpecPage || !activeTabUid) {
+      if (activeWorkspaceUid) {
+        dispatch(setActiveWorkspaceTab({ workspaceUid: activeWorkspaceUid, type: 'preferences' }));
+      }
+    } else {
+      dispatch(
+        addTab({
+          type: 'preferences',
+          uid: activeTab?.collectionUid ? `${activeTab.collectionUid}-preferences` : 'preferences',
+          collectionUid: activeTab?.collectionUid
+        })
+      );
+    }
+  };
+
  const openGlobalSearch = () => {
    const bindings = getKeyBindingsForActionAllOS('globalSearch') || [];
    bindings.forEach((binding) => {
@@ -36,21 +59,6 @@ const StatusBar = () => {

  return (
    <StyledWrapper>
-      {preferencesOpen && (
-        <Portal>
-          <Preferences
-            onClose={() => {
-              dispatch(showPreferences(false));
-              document.querySelector('[data-trigger="preferences"]').focus();
-            }}
-            aria-modal="true"
-            role="dialog"
-            aria-labelledby="preferences-title"
-            aria-describedby="preferences-description"
-          />
-        </Portal>
-      )}
-
      {cookiesOpen && (
        <Portal>
          <Cookies
@@ -73,7 +81,7 @@ const StatusBar = () => {
              <button
                className="status-bar-button preferences-button"
                data-trigger="preferences"
-                onClick={() => dispatch(showPreferences(true))}
+                onClick={handlePreferencesClick}
                tabIndex={0}
                aria-label="Open Preferences"
              >
--- a/packages/bruno-app/src/components/Table/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Table/StyledWrapper.js
@@ -22,7 +22,7 @@ const StyledWrapper = styled.div`
  table tr {
    display: contents;
  }
- 
+
  table th {
    position: relative;
    font-weight: 400;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -1,112 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-  
-  .table-container {
-    overflow-y: auto;
-    border-radius: 8px;
-    border: solid 1px ${(props) => props.theme.border.border0};
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: fixed;
-
-    td {
-      vertical-align: middle;
-      padding: 2px 10px;
-
-      &:nth-child(1) {
-        width: 25px;
-        border-right: none;
-      }
-      &:nth-child(4) {
-        width: 80px;
-      }
-      &:nth-child(5) {
-        width: 60px;
-      }
-
-      &:nth-child(2) {
-        width: 30%;
-      }
-    }
-
-    thead {
-      color: ${(props) => props.theme.table.thead.color} !important;
-      background: ${(props) => props.theme.sidebar.bg};
-      font-size: ${(props) => props.theme.font.size.base};
-      user-select: none;
-      
-      td {
-        padding: 5px 10px !important;
-        border-bottom: solid 1px ${(props) => props.theme.border.border0};
-        border-right: solid 1px ${(props) => props.theme.border.border0};
-        
-        &:last-child {
-          border-right: none;
-        }
-      }
-    }
-    
-    tbody {
-      tr {
-        transition: background 0.1s ease;
-        
-        &:last-child td {
-          border-bottom: none;
-        }
-        
-        td {
-          border-bottom: solid 1px ${(props) => props.theme.border.border0};
-          border-right: solid 1px ${(props) => props.theme.border.border0};
-          
-          &:last-child {
-            border-right: none;
-          }
-        }
-      }
-    }
-  }
-
-  .tooltip-mod {
-    max-width: 200px !important;
-  }
-
-  input[type='text'] {
-    width: 100%;
-    border: 1px solid transparent;
-    outline: none !important;
-    background-color: transparent;
-    color: ${(props) => props.theme.text};
-    padding: 0;
-    border-radius: 4px;
-    transition: all 0.15s ease;
-
-    &:focus {
-      outline: none !important;
-    }
-  }
-
-  input[type='checkbox'] {
-    cursor: pointer;
-    width: 14px;
-    height: 14px;
-    accent-color: ${(props) => props.theme.colors.accent};
-    vertical-align: middle;
-    margin: 0;
-  }
-  
-  .button-container {
-    flex-shrink: 0;
-    display: flex;
-    gap: 8px;
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -1,456 +1,54 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
 import { TableVirtuoso } from 'react-virtuoso';
 import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
-import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
-import MultiLineEditor from 'components/MultiLineEditor/index';
-import StyledWrapper from './StyledWrapper';
-import { uuid } from 'utils/common';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import { variableNameRegex } from 'utils/common/regex';
-import toast from 'react-hot-toast';
 import {
  saveGlobalEnvironment,
  setGlobalEnvironmentDraft,
  clearGlobalEnvironmentDraft
 } from 'providers/ReduxStore/slices/global-environments';
-import { Tooltip } from 'react-tooltip';
-import { getGlobalEnvironmentVariables } from 'utils/collections';
-import Button from 'ui/Button';
+import EnvironmentVariablesTable from 'components/EnvironmentVariablesTable';

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

  const hasDraftForThisEnv = globalEnvironmentDraft?.environmentUid === environment.uid;

-  const [tableHeight, setTableHeight] = React.useState(MIN_H);
-
-  const handleTotalHeightChanged = React.useCallback((h) => {
-    setTableHeight(h);
-  }, []);
-
-  // Track environment changes for draft restoration
-  const prevEnvUidRef = React.useRef(null);
-  const mountedRef = React.useRef(false);
-
-  let _collection = collection ? cloneDeep(collection) : {};
-
-  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
-  if (_collection) {
-    _collection.globalEnvironmentVariables = globalEnvironmentVariables;
-  }
-
-  // Initial values based only on saved environment variables (not draft)
-  // Draft restoration happens in a separate effect to avoid infinite loops
-  const initialValues = React.useMemo(() => {
-    const vars = environment.variables || [];
-    return [
-      ...vars,
-      {
-        uid: uuid(),
-        name: '',
-        value: '',
-        type: 'text',
-        secret: false,
-        enabled: true
-      }
-    ];
-  }, [environment.uid, environment.variables]);
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: initialValues,
-    validationSchema: Yup.array().of(Yup.object({
-      enabled: Yup.boolean(),
-      name: Yup.string()
-        .when('$isLastRow', {
-          is: true,
-          then: (schema) => schema.optional(),
-          otherwise: (schema) => schema
-            .required('Name cannot be empty')
-            .matches(variableNameRegex,
-              'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.')
-            .trim()
-        }),
-      secret: Yup.boolean(),
-      type: Yup.string(),
-      uid: Yup.string(),
-      value: Yup.mixed().nullable()
-    })),
-    validate: (values) => {
-      const errors = {};
-      values.forEach((variable, index) => {
-        const isLastRow = index === values.length - 1;
-        const isEmptyRow = !variable.name || variable.name.trim() === '';
-
-        if (isLastRow && isEmptyRow) {
-          return;
-        }
-
-        if (!variable.name || variable.name.trim() === '') {
-          if (!errors[index]) errors[index] = {};
-          errors[index].name = 'Name cannot be empty';
-        } else if (!variableNameRegex.test(variable.name)) {
-          if (!errors[index]) errors[index] = {};
-          errors[index].name = 'Name contains invalid characters. Must only contain alphanumeric characters, "-", "_", "." and cannot start with a digit.';
-        }
-      });
-      return Object.keys(errors).length > 0 ? errors : {};
+  const handleSave = useCallback(
+    (variables) => {
+      return dispatch(saveGlobalEnvironment({ environmentUid: environment.uid, variables: cloneDeep(variables) }));
    },
-    onSubmit: () => {}
-  });
+    [dispatch, environment.uid]
+  );

-  // Restore draft values on mount or environment switch
-  React.useEffect(() => {
-    const isMount = !mountedRef.current;
-    const envChanged = prevEnvUidRef.current !== null && prevEnvUidRef.current !== environment.uid;
-
-    prevEnvUidRef.current = environment.uid;
-    mountedRef.current = true;
-
-    if ((isMount || envChanged) && hasDraftForThisEnv && globalEnvironmentDraft?.variables) {
-      formik.setValues([
-        ...globalEnvironmentDraft.variables,
-        {
-          uid: uuid(),
-          name: '',
-          value: '',
-          type: 'text',
-          secret: false,
-          enabled: true
-        }
-      ]);
-    }
-  }, [environment.uid, hasDraftForThisEnv, globalEnvironmentDraft?.variables]);
-
-  // Sync draft state to Redux
-  React.useEffect(() => {
-    const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-    const savedValues = environment.variables || [];
-
-    const currentValuesJson = JSON.stringify(currentValues);
-    const savedValuesJson = JSON.stringify(savedValues);
-    const hasActualChanges = currentValuesJson !== savedValuesJson;
-
-    setIsModified(hasActualChanges);
-
-    // Get existing draft for comparison
-    const existingDraftVariables = hasDraftForThisEnv ? globalEnvironmentDraft?.variables : null;
-    const existingDraftJson = existingDraftVariables ? JSON.stringify(existingDraftVariables) : null;
-
-    if (hasActualChanges) {
-      // Only dispatch if draft values are actually different
-      if (currentValuesJson !== existingDraftJson) {
-        dispatch(setGlobalEnvironmentDraft({
+  const handleDraftChange = useCallback(
+    (variables) => {
+      dispatch(
+        setGlobalEnvironmentDraft({
          environmentUid: environment.uid,
-          variables: currentValues
-        }));
-      }
-    } else if (hasDraftForThisEnv) {
-      dispatch(clearGlobalEnvironmentDraft());
-    }
-  }, [formik.values, environment.variables, environment.uid, setIsModified, dispatch, hasDraftForThisEnv, globalEnvironmentDraft?.variables]);
+          variables
+        })
+      );
+    },
+    [dispatch, environment.uid]
+  );

-  const ErrorMessage = ({ name, index }) => {
-    const meta = formik.getFieldMeta(name);
-    const id = `error-${name}-${index}`;
-
-    const isLastRow = index === formik.values.length - 1;
-    const variable = formik.values[index];
-    const isEmptyRow = !variable?.name || variable.name.trim() === '';
-
-    if (isLastRow && isEmptyRow) {
-      return null;
-    }
-
-    if (!meta.error || !meta.touched) {
-      return null;
-    }
-    return (
-      <span>
-        <IconAlertCircle id={id} className="text-red-600 cursor-pointer" size={20} />
-        <Tooltip className="tooltip-mod" anchorId={id} html={meta.error || ''} />
-      </span>
-    );
-  };
-
-  const handleRemoveVar = useCallback((id) => {
-    const currentValues = formik.values;
-
-    if (!currentValues || currentValues.length === 0) {
-      return;
-    }
-
-    const lastRow = currentValues[currentValues.length - 1];
-    const isLastEmptyRow = lastRow?.uid === id && (!lastRow.name || lastRow.name.trim() === '');
-
-    if (isLastEmptyRow) {
-      return;
-    }
-
-    const filteredValues = currentValues.filter((variable) => variable.uid !== id);
-
-    const hasEmptyLastRow = filteredValues.length > 0
-      && (!filteredValues[filteredValues.length - 1].name
-        || filteredValues[filteredValues.length - 1].name.trim() === '');
-
-    const newValues = hasEmptyLastRow
-      ? filteredValues
-      : [
-          ...filteredValues,
-          {
-            uid: uuid(),
-            name: '',
-            value: '',
-            type: 'text',
-            secret: false,
-            enabled: true
-          }
-        ];
-
-    formik.setValues(newValues);
-  }, [formik.values]);
-
-  const handleNameChange = (index, e) => {
-    formik.handleChange(e);
-    const isLastRow = index === formik.values.length - 1;
-
-    if (isLastRow) {
-      const newVariable = {
-        uid: uuid(),
-        name: '',
-        value: '',
-        type: 'text',
-        secret: false,
-        enabled: true
-      };
-      setTimeout(() => {
-        formik.setFieldValue(formik.values.length, newVariable, false);
-      }, 0);
-    }
-  };
-
-  const handleNameBlur = (index) => {
-    formik.setFieldTouched(`${index}.name`, true, true);
-  };
-
-  const handleNameKeyDown = (index, e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      formik.setFieldTouched(`${index}.name`, true, true);
-    }
-  };
-
-  const handleSave = () => {
-    const variablesToSave = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-    const savedValues = environment.variables || [];
-
-    const hasChanges = JSON.stringify(variablesToSave) !== JSON.stringify(savedValues);
-    if (!hasChanges) {
-      toast.error('No changes to save');
-      return;
-    }
-
-    const hasValidationErrors = variablesToSave.some((variable) => {
-      if (!variable.name || variable.name.trim() === '') {
-        return true;
-      }
-      if (!variableNameRegex.test(variable.name)) {
-        return true;
-      }
-      return false;
-    });
-
-    if (hasValidationErrors) {
-      toast.error('Please fix validation errors before saving');
-      return;
-    }
-
-    dispatch(saveGlobalEnvironment({ environmentUid: environment.uid, variables: cloneDeep(variablesToSave) }))
-      .then(() => {
-        toast.success('Changes saved successfully');
-        const newValues = [
-          ...variablesToSave,
-          {
-            uid: uuid(),
-            name: '',
-            value: '',
-            type: 'text',
-            secret: false,
-            enabled: true
-          }
-        ];
-        formik.resetForm({ values: newValues });
-        setIsModified(false);
-      })
-      .catch((error) => {
-        console.error(error);
-        toast.error('An error occurred while saving the changes');
-      });
-  };
-
-  const handleReset = () => {
-    const originalVars = environment.variables || [];
-    const resetValues = [
-      ...originalVars,
-      {
-        uid: uuid(),
-        name: '',
-        value: '',
-        type: 'text',
-        secret: false,
-        enabled: true
-      }
-    ];
-    formik.resetForm({ values: resetValues });
-    setIsModified(false);
-  };
-
-  const handleSaveRef = useRef(handleSave);
-  handleSaveRef.current = handleSave;
-
-  React.useEffect(() => {
-    const handleSaveEvent = () => {
-      handleSaveRef.current();
-    };
-
-    window.addEventListener('environment-save', handleSaveEvent);
-
-    return () => {
-      window.removeEventListener('environment-save', handleSaveEvent);
-    };
-  }, []);
+  const handleDraftClear = useCallback(() => {
+    dispatch(clearGlobalEnvironmentDraft());
+  }, [dispatch]);

  return (
-    <StyledWrapper>
-      <TableVirtuoso
-        className="table-container"
-        style={{ height: tableHeight }}
-        totalListHeightChanged={handleTotalHeightChanged}
-        data={formik.values}
-        fixedItemHeight={35}
-        components={{ TableRow }}
-        computeItemKey={(index, variable) => variable.uid}
-        fixedHeaderContent={() => (
-          <tr>
-            <td className="text-center"></td>
-            <td>Name</td>
-            <td>Value</td>
-            <td className="text-center">Secret</td>
-            <td></td>
-          </tr>
-        )}
-        itemContent={(index, variable) => {
-          const isLastRow = index === formik.values.length - 1;
-          const isEmptyRow = !variable.name || variable.name.trim() === '';
-          const isLastEmptyRow = isLastRow && isEmptyRow;
-
-          return (
-            <>
-              <td className="text-center">
-                {!isLastEmptyRow && (
-                  <input
-                    type="checkbox"
-                    className="mousetrap"
-                    name={`${index}.enabled`}
-                    checked={variable.enabled}
-                    onChange={formik.handleChange}
-                  />
-                )}
-              </td>
-              <td>
-                <div className="flex items-center">
-                  <input
-                    type="text"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck="false"
-                    className="mousetrap"
-                    id={`${index}.name`}
-                    name={`${index}.name`}
-                    value={variable.name}
-                    placeholder={isLastEmptyRow ? 'Name' : ''}
-                    onChange={(e) => handleNameChange(index, e)}
-                    onBlur={() => handleNameBlur(index)}
-                    onKeyDown={(e) => handleNameKeyDown(index, e)}
-                  />
-                  <ErrorMessage name={`${index}.name`} index={index} />
-                </div>
-              </td>
-              <td className="flex flex-row flex-nowrap items-center">
-                <div className="overflow-hidden grow w-full relative">
-                  <MultiLineEditor
-                    theme={storedTheme}
-                    collection={_collection}
-                    name={`${index}.value`}
-                    value={variable.value}
-                    placeholder={isLastEmptyRow ? 'Value' : ''}
-                    isSecret={variable.secret}
-                    readOnly={typeof variable.value !== 'string'}
-                    onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
-                    onSave={handleSave}
-                  />
-                </div>
-                {typeof variable.value !== 'string' && (
-                  <span className="ml-2 flex items-center">
-                    <IconInfoCircle id={`${variable.uid}-disabled-info-icon`} className="text-muted" size={16} />
-                    <Tooltip
-                      anchorId={`${variable.uid}-disabled-info-icon`}
-                      content="Non-string values set via scripts are read-only and can only be updated through scripts."
-                      place="top"
-                    />
-                  </span>
-                )}
-              </td>
-              <td className="text-center">
-                {!isLastEmptyRow && (
-                  <input
-                    type="checkbox"
-                    className="mousetrap"
-                    name={`${index}.secret`}
-                    checked={variable.secret}
-                    onChange={formik.handleChange}
-                  />
-                )}
-              </td>
-              <td>
-                {!isLastEmptyRow && (
-                  <button onClick={() => handleRemoveVar(variable.uid)}>
-                    <IconTrash strokeWidth={1.5} size={18} />
-                  </button>
-                )}
-              </td>
-            </>
-          );
-        }}
-      />
-
-      <div className="button-container mt-5">
-        <div className="flex items-center gap-2">
-          <Button type="submit" size="sm" onClick={handleSave} data-testid="save-env">
-            Save
-          </Button>
-          <Button type="reset" size="sm" color="secondary" variant="ghost" onClick={handleReset} data-testid="reset-env">
-            Reset
-          </Button>
-        </div>
-      </div>
-    </StyledWrapper>
+    <EnvironmentVariablesTable
+      environment={environment}
+      collection={collection}
+      onSave={handleSave}
+      draft={hasDraftForThisEnv ? globalEnvironmentDraft : null}
+      onDraftChange={handleDraftChange}
+      onDraftClear={handleDraftClear}
+      setIsModified={setIsModified}
+      searchQuery={searchQuery}
+    />
  );
 };

--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/StyledWrapper.js
@@ -94,8 +94,63 @@ const StyledWrapper = styled.div`
    
    .actions {
      display: flex;
+      align-items: center;
      gap: 2px;
-      
+
+      .search-input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .search-icon {
+          position: absolute;
+          left: 8px;
+          color: ${(props) => props.theme.colors.text.muted};
+          pointer-events: none;
+        }
+
+        .search-input {
+          width: 200px;
+          padding: 5px 32px 5px 32px;
+          border: 1px solid ${(props) => props.theme.input.border};
+          border-radius: ${(props) => props.theme.border.radius.sm};
+          background: ${(props) => props.theme.input.bg};
+          color: ${(props) => props.theme.text};
+          font-size: ${(props) => props.theme.font.size.base};
+          outline: none;
+          transition: border-color 0.15s ease;
+
+          &:focus {
+            border-color: ${(props) => props.theme.input.focusBorder};
+          }
+
+          &::placeholder {
+            color: ${(props) => props.theme.input.placeholder.color};
+            opacity: ${(props) => props.theme.input.placeholder.opacity};
+          }
+        }
+
+        .clear-search {
+          position: absolute;
+          right: 1px;
+          padding: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: ${(props) => props.theme.colors.text.muted};
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          border-radius: ${(props) => props.theme.border.radius.sm};
+          transition: all 0.15s ease;
+
+          &:hover {
+            color: ${(props) => props.theme.text};
+            background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+          }
+        }
+      }
+
      button {
        display: inline-flex;
        align-items: center;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/index.js
@@ -1,12 +1,14 @@
-import { IconCopy, IconEdit, IconTrash, IconCheck, IconX } from '@tabler/icons';
+import { IconCopy, IconEdit, IconTrash, IconCheck, IconX, IconSearch } from '@tabler/icons';
 import { useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { renameGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import useDebounce from 'hooks/useDebounce';
+import { renameGlobalEnvironment, updateGlobalEnvironmentColor } from 'providers/ReduxStore/slices/global-environments';
 import { validateName, validateNameError } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import CopyEnvironment from '../../CopyEnvironment';
 import DeleteEnvironment from '../../DeleteEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
+import ColorPicker from 'components/ColorPicker';
 import StyledWrapper from './StyledWrapper';

 const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
@@ -18,7 +20,11 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
  const [isRenaming, setIsRenaming] = useState(false);
  const [newName, setNewName] = useState('');
  const [nameError, setNameError] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
  const inputRef = useRef(null);
+  const searchInputRef = useRef(null);

  const validateEnvironmentName = (name) => {
    if (!name || name.trim() === '') {
@@ -110,6 +116,33 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
    }
  };

+  const handleSearchIconClick = () => {
+    setIsSearchExpanded(true);
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 50);
+  };
+
+  const handleClearSearch = () => {
+    setSearchQuery('');
+  };
+
+  const handleSearchBlur = () => {
+    if (searchQuery === '') {
+      setIsSearchExpanded(false);
+    }
+  };
+
+  const handleColorChange = (color) => {
+    dispatch(updateGlobalEnvironmentColor(environment.uid, color))
+      .then(() => {
+        toast.success('Environment color updated!');
+      })
+      .catch(() => {
+        toast.error('An error occurred while updating the environment color');
+      });
+  };
+
  return (
    <StyledWrapper>
      {openDeleteModal && (
@@ -159,11 +192,46 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
              </div>
            </>
          ) : (
-            <h2 className="title">{environment.name}</h2>
+            <div className="flex items-center gap-2">
+              <h2 className="title">{environment.name}</h2>
+              <ColorPicker color={environment.color} onChange={handleColorChange} />
+            </div>
          )}
        </div>
        {nameError && isRenaming && <div className="title-error">{nameError}</div>}
        <div className="actions">
+          {isSearchExpanded ? (
+            <div className="search-input-wrapper">
+              <IconSearch size={14} strokeWidth={1.5} className="search-icon" />
+              <input
+                ref={searchInputRef}
+                type="text"
+                placeholder="Search variables..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onBlur={handleSearchBlur}
+                className="search-input"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+              />
+              {searchQuery && (
+                <button
+                  className="clear-search"
+                  onClick={handleClearSearch}
+                  onMouseDown={(e) => e.preventDefault()}
+                  title="Clear search"
+                >
+                  <IconX size={14} strokeWidth={1.5} />
+                </button>
+              )}
+            </div>
+          ) : (
+            <button onClick={handleSearchIconClick} title="Search variables">
+              <IconSearch size={15} strokeWidth={1.5} />
+            </button>
+          )}
          <button onClick={handleRenameClick} title="Rename">
            <IconEdit size={15} strokeWidth={1.5} />
          </button>
@@ -177,7 +245,12 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
      </div>

      <div className="content">
-        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
+        <EnvironmentVariables
+          environment={environment}
+          setIsModified={setIsModified}
+          collection={collection}
+          searchQuery={debouncedSearchQuery}
+        />
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
@@ -110,6 +110,7 @@ const StyledWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
+    gap: 8px;
    padding: 4px 8px;
    margin-bottom: 1px;
    font-size: 13px;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/index.js
@@ -6,6 +6,7 @@ import { IconDownload, IconUpload, IconSearch, IconPlus, IconCheck, IconX } from
 import StyledWrapper from './StyledWrapper';
 import ConfirmSwitchEnv from './ConfirmSwitchEnv';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
+import ColorBadge from 'components/ColorBadge';
 import { isEqual } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { addGlobalEnvironment, renameGlobalEnvironment, selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
@@ -357,6 +358,7 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
                  </div>
                ) : (
                  <>
+                    <ColorBadge color={env.color} size={8} />
                    <span className="environment-name">{env.name}</span>
                    <div className="environment-actions">
                      {activeEnvironmentUid === env.uid ? (
--- a/packages/bruno-app/src/components/WorkspaceHome/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/index.js
@@ -7,6 +7,7 @@ import toast from 'react-hot-toast';
 import CloseWorkspace from 'components/Sidebar/CloseWorkspace';
 import WorkspaceOverview from './WorkspaceOverview';
 import WorkspaceEnvironments from './WorkspaceEnvironments';
+import Preferences from 'components/Preferences';
 import WorkspaceTabs from 'components/WorkspaceTabs';
 import StyledWrapper from './StyledWrapper';
 import Dropdown from 'components/Dropdown';
@@ -157,6 +158,8 @@ const WorkspaceHome = () => {
        return <WorkspaceOverview workspace={activeWorkspace} />;
      case 'environments':
        return <WorkspaceEnvironments workspace={activeWorkspace} />;
+      case 'preferences':
+        return <Preferences />;
      default:
        return null;
    }
--- a/Show More
+++ b/Show More