From 53201b5de3a9faae72bff452aec26e1793f8d3f4 Mon Sep 17 00:00:00 2001
From: sanish-bruno <sanish@usebruno.com>
Date: Thu, 18 Sep 2025 16:24:16 +0530
Subject: [PATCH 1/4] feat: enhance Bru grammar to support response blocks and
 examples

- Added new grammar rules for response headers, status, and body types (JSON, XML, text).
- Introduced parsing logic for example blocks, allowing multiple examples with various body types.
- Implemented tests for example parsing, including edge cases and complex examples with authentication.
- Created fixture files for simple and complex examples to validate parsing functionality.

feat: extend jsonToBru functionality to support response handling and examples

- Updated jsonToBru to include parsing for response headers, status, and body types (JSON, XML, text).
- Enhanced example handling to support multiple examples with various body types.
- Added comprehensive tests for example parsing, including edge cases and complex scenarios with authentication.
- Created fixture files for testing the new features and validating parsing functionality.

move: files to fixtures folder

refactor: simplify response body handling in Bru grammar and JSON conversion

- Removed specific body type handling (JSON, XML, text) from grammar and semantics.
- Updated response body parsing in jsonToBru to handle a unified response body format.
- Adjusted tests and fixtures to reflect changes in response body structure, ensuring compatibility with the new format.

feat: add response bookmarking functionality to ResponsePane

- Introduced ResponseBookmark component to allow users to save responses as examples.
- Added NameExampleModal for naming saved examples.
- Updated ResponsePane to include the new bookmarking feature.
- Implemented Redux actions to manage response examples in the collections state.
- Enhanced CollectionItem to display saved examples and allow for expansion.

fix: remove unnecessary padding from ExampleItem component

feat: implement delete and rename functionality for examples in ExampleItem component

- Added DeleteExampleModal for confirming deletion of examples.
- Integrated modal for renaming examples with state management.
- Enhanced ExampleItem to handle example deletion and renaming through modals.
- Updated Redux actions to support example updates and deletions in the collections state.

fix: example writing to  disc properly

fix: example parsing errors

fix: request with example parsing error

fix: handle examples in collections and requests

feat: implement response example functionality in the application

- Added ResponseExample component to handle displaying and editing response examples.
- Integrated ResponseExampleRequestPane and ResponseExampleResponsePane for structured request and response handling.
- Enhanced RequestTabPanel and RequestTab components to support response-example tabs.
- Introduced new styled components for better UI/UX in response examples.
- Updated theme files to include styles for response examples.
- Implemented URL bar for editing request URLs in response examples.
- Added functionality for managing headers and parameters in response examples.
- Improved overall structure and organization of response example components.

add styles for example url bar

feat: add Checkbox component and Table-v2 for enhanced UI

- Introduced a new Checkbox component for better user interaction in forms.
- Added Table-v2 component to improve table rendering and resizing functionality.
- Updated existing components to utilize the new Checkbox and Table-v2 for managing headers and parameters in response examples.
- Enhanced styling for better visual consistency across components.
- Updated theme files to include styles for the new components.

feat: implement custom scrollbar styles for response example components

fix: features

add actions , view more

feat: enhance response example functionality

- Added GenerateCodeItem component for generating code snippets from response examples.
- Integrated modal for code generation within ResponseExample component.
- Updated ResponseExampleTopBar to handle example name and description editing.
- Improved state management for response examples, including new actions for updating names and descriptions.
- Enhanced ResponseExampleRequestPane to support editing and saving request details.
- Refactored URL handling in ResponseExampleUrlBar to utilize example-specific data.
- Improved overall user experience with better UI elements and state management.

feat: enhance response example management and UI components

feat: enhance editing capabilities in response example components

feat: update multipart form parameter handling in response examples

feat: refactor response example parameter handling and enhance UI interactions

feat: introduce RadioButton component and update Checkbox usage in response examples

fix: styles

fix radio button styling

fixed radio button styles

feat: add create example from sidebar

feat: enhance ResponseExample components with layout adjustments and new HeightBoundContainer

feat: add Checkbox and RadioButton components with comprehensive tests for rendering, user interactions, and accessibility

feat: playwright test csaes

rm: comments

fix: linting

fix: tests

refactor: update response example tests and enhance functionality

fix: tests

fix: e2e-tests

refactor: implement hasRequestChanges utility for better change detection

rm: console

rm: consoles

fix: lint

fix: tests
---
 .../src/components/Checkbox/StyledWrapper.js  |   79 ++
 .../src/components/Checkbox/index.js          |   45 +
 .../src/components/Checkbox/index.spec.js     |  226 ++++
 .../src/components/CodeEditor/index.js        |    4 +
 .../src/components/FilePickerEditor/index.js  |   18 +-
 .../src/components/Icons/examples/index.js    |   59 +
 .../bruno-app/src/components/Modal/index.js   |    9 +-
 .../src/components/MultiLineEditor/index.js   |    5 +
 .../components/RadioButton/StyledWrapper.js   |   74 ++
 .../src/components/RadioButton/index.js       |   40 +
 .../src/components/RadioButton/index.spec.js  |  347 ++++++
 .../components/RequestPane/QueryUrl/index.js  |    7 +-
 .../RequestPane/WsQueryUrl/index.js           |    7 +-
 .../src/components/RequestTabPanel/index.js   |   27 +
 .../RequestTab/ConfirmRequestClose/index.js   |    8 +-
 .../RequestTabs/RequestTab/index.js           |   88 +-
 .../CreateExampleModal/index.js               |   84 ++
 .../ResponseExampleBody/StyledWrapper.js      |   80 ++
 .../ResponseExampleBody/index.js              |   77 ++
 .../ResponseExampleBodyMode/index.js          |  186 +++
 .../ResponseExampleBodyRenderer/index.js      |  104 ++
 .../StyledWrapper.js                          |   38 +
 .../ResponseExampleDescription/index.js       |   52 +
 .../ResponseExampleFileBody/StyledWrapper.js  |  131 +++
 .../ResponseExampleFileBody/index.js          |  221 ++++
 .../StyledWrapper.js                          |   80 ++
 .../index.js                                  |  178 +++
 .../ResponseExampleHeaders/StyledWrapper.js   |   60 +
 .../ResponseExampleHeaders/index.js           |  206 ++++
 .../StyledWrapper.js                          |  100 ++
 .../index.js                                  |  262 +++++
 .../ResponseExampleParams/StyledWrapper.js    |   89 ++
 .../ResponseExampleParams/index.js            |  192 +++
 .../ResponseExampleUrlBar/StyledWrapper.js    |   53 +
 .../ResponseExampleUrlBar/index.js            |   76 ++
 .../StyledWrapper.js                          |   31 +
 .../ResponseExampleRequestPane/index.js       |   47 +
 .../StyledWrapper.js                          |   16 +
 .../ResponseExampleResponseContent/index.js   |   72 ++
 .../StyledWrapper.js                          |   56 +
 .../ResponseExampleResponseHeaders/index.js   |  200 ++++
 .../StyledWrapper.js                          |   39 +
 .../ResponseExampleResponsePane/index.js      |   91 ++
 .../ResponseExampleTopBar/StyledWrapper.js    |   94 ++
 .../ResponseExampleTopBar/index.js            |  200 ++++
 .../ResponseExample/StyledWrapper.js          |   67 ++
 .../src/components/ResponseExample/index.js   |  208 ++++
 .../ResponseBookmark/StyledWrapper.js         |    8 +
 .../ResponsePane/ResponseBookmark/index.js    |   81 ++
 .../src/components/ResponsePane/index.js      |    2 +
 .../ExampleItem/DeleteExampleModal.js         |   37 +
 .../ExampleItem/StyledWrapper.js              |   49 +
 .../CollectionItem/ExampleItem/index.js       |  206 ++++
 .../CollectionItem/GenerateCodeItem/index.js  |   71 +-
 .../Collection/CollectionItem/index.js        |   92 +-
 .../src/components/SingleLineEditor/index.js  |    5 +
 .../src/components/Table-v2/StyledWrapper.js  |   77 ++
 .../src/components/Table-v2/index.js          |  109 ++
 .../src/components/TruncatedText/index.js     |  108 ++
 packages/bruno-app/src/globalStyles.js        |   36 +
 .../App/ConfirmAppClose/SaveRequestsModal.js  |    4 +-
 .../src/providers/ReduxStore/index.js         |    1 +
 .../slices/collections/exampleReducers.js     | 1037 +++++++++++++++++
 .../ReduxStore/slices/collections/index.js    |   84 +-
 .../src/providers/ReduxStore/slices/tabs.js   |    8 +-
 packages/bruno-app/src/themes/dark.js         |   20 +
 packages/bruno-app/src/themes/light.js        |   20 +
 .../src/ui/HeightBoundContainer/index.js      |    4 +-
 .../bruno-app/src/utils/collections/index.js  |   82 +-
 packages/bruno-cli/src/utils/bru.js           |    3 +-
 .../bruno-electron/src/cache/requestUids.js   |   15 +-
 packages/bruno-electron/src/ipc/collection.js |    1 -
 .../bruno-electron/src/utils/collection.js    |   20 +-
 .../bruno-filestore/src/formats/bru/index.ts  |   76 +-
 packages/bruno-filestore/src/index.ts         |    3 +-
 .../bruno-filestore/src/types/bruno-lang.d.ts |    2 +-
 packages/bruno-lang/v2/src/bruToJson.js       |   82 +-
 packages/bruno-lang/v2/src/jsonToBru.js       |   44 +-
 .../v2/tests/examples/examples.spec.js        |  414 +++++++
 .../fixtures/bruToJson-basic-auth.bru         |   20 +
 .../fixtures/bruToJson-basic-auth.json        |   26 +
 .../fixtures/bruToJson-bearer-auth.bru        |   19 +
 .../fixtures/bruToJson-bearer-auth.json       |   25 +
 .../fixtures/bruToJson-empty-example.bru      |    8 +
 .../fixtures/bruToJson-empty-example.json     |   10 +
 .../examples/fixtures/bruToJson-json-body.bru |   22 +
 .../fixtures/bruToJson-json-body.json         |   23 +
 .../fixtures/bruToJson-multiple-examples.bru  |   36 +
 .../fixtures/bruToJson-multiple-examples.json |   38 +
 .../fixtures/bruToJson-no-examples.bru        |    8 +
 .../fixtures/bruToJson-no-examples.json       |   11 +
 .../fixtures/bruToJson-response-example.bru   |   34 +
 .../fixtures/bruToJson-response-example.json  |   37 +
 .../fixtures/bruToJson-single-example.bru     |   23 +
 .../fixtures/bruToJson-single-example.json    |   31 +
 .../examples/fixtures/bruToJson-text-body.bru |   20 +
 .../fixtures/bruToJson-text-body.json         |   23 +
 .../examples/fixtures/bruToJson-xml-body.bru  |   23 +
 .../examples/fixtures/bruToJson-xml-body.json |   23 +
 .../examples/fixtures/examples-complex.bru    |  142 +++
 .../examples/fixtures/examples-simple.bru     |   71 ++
 .../examples/fixtures/examples-simple.json    |   69 ++
 .../examples/fixtures/jsonToBru-auth.bru      |   41 +
 .../examples/fixtures/jsonToBru-auth.json     |   43 +
 .../examples/fixtures/jsonToBru-bodytypes.bru |   64 +
 .../fixtures/jsonToBru-bodytypes.json         |   51 +
 .../examples/fixtures/jsonToBru-multiple.bru  |   38 +
 .../examples/fixtures/jsonToBru-multiple.json |   35 +
 .../examples/fixtures/jsonToBru-response.bru  |   35 +
 .../examples/fixtures/jsonToBru-response.json |   35 +
 .../examples/fixtures/jsonToBru-simple.bru    |   30 +
 .../examples/fixtures/jsonToBru-simple.json   |   32 +
 .../bruno-lang/v2/tests/fixtures/request.json |   23 +-
 .../bruno-schema/src/collections/index.js     |   39 +-
 .../bruno-tests/collection/echo/echo json.bru |    1 +
 tests/response-examples/collection/bruno.json |    5 +
 .../collection/echo-request.bru               |   22 +
 .../response-examples/create-example.spec.ts  |   96 ++
 tests/response-examples/edit-example.spec.ts  |  119 ++
 .../init-user-data/collection-security.json   |   10 +
 .../init-user-data/preferences.json           |    6 +
 .../response-examples/menu-operations.spec.ts |   69 ++
 122 files changed, 8693 insertions(+), 77 deletions(-)
 create mode 100644 packages/bruno-app/src/components/Checkbox/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/Checkbox/index.js
 create mode 100644 packages/bruno-app/src/components/Checkbox/index.spec.js
 create mode 100644 packages/bruno-app/src/components/Icons/examples/index.js
 create mode 100644 packages/bruno-app/src/components/RadioButton/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/RadioButton/index.js
 create mode 100644 packages/bruno-app/src/components/RadioButton/index.spec.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/index.js
 create mode 100644 packages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
 create mode 100644 packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteExampleModal.js
 create mode 100644 packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
 create mode 100644 packages/bruno-app/src/components/Table-v2/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/Table-v2/index.js
 create mode 100644 packages/bruno-app/src/components/TruncatedText/index.js
 create mode 100644 packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js
 create mode 100644 packages/bruno-lang/v2/tests/examples/examples.spec.js
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/examples-complex.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.json
 create mode 100644 tests/response-examples/collection/bruno.json
 create mode 100644 tests/response-examples/collection/echo-request.bru
 create mode 100644 tests/response-examples/create-example.spec.ts
 create mode 100644 tests/response-examples/edit-example.spec.ts
 create mode 100644 tests/response-examples/init-user-data/collection-security.json
 create mode 100644 tests/response-examples/init-user-data/preferences.json
 create mode 100644 tests/response-examples/menu-operations.spec.ts

diff --git a/packages/bruno-app/src/components/Checkbox/StyledWrapper.js b/packages/bruno-app/src/components/Checkbox/StyledWrapper.js
new file mode 100644
index 0000000000..ddfffe2250
--- /dev/null
+++ b/packages/bruno-app/src/components/Checkbox/StyledWrapper.js
@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .checkbox-container {
+    width: 1rem;
+    height: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  .checkbox-checkmark {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    visibility: ${(props) => props.checked ? 'visible' : 'hidden'};
+    pointer-events: none;
+  }
+
+  .checkbox-input {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid ${(props) => {
+      if (props.checked && props.disabled) {
+        return props.theme.colors.text.muted;
+      }
+
+      if (props.checked && !props.disabled) {
+        return props.theme.colors.text.yellow;
+      }
+
+      return props.theme.colors.text.muted;
+    }};
+    border-radius: 4px;
+    background-color: ${(props) => {
+      if (props.checked && !props.disabled) {
+        return props.theme.colors.text.yellow;
+      }
+
+      if (props.checked && props.disabled) {
+        return props.theme.colors.text.muted;
+      }
+
+      return 'transparent';
+    }};
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+    outline: none;
+    box-shadow: none;
+    
+    &:hover:not(:disabled) {
+      opacity: 0.8;
+    }
+    
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px ${(props) => props.theme.colors.text.yellow}40;
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Checkbox/index.js b/packages/bruno-app/src/components/Checkbox/index.js
new file mode 100644
index 0000000000..2e413fb06a
--- /dev/null
+++ b/packages/bruno-app/src/components/Checkbox/index.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+import { IconCheckMark } from 'components/Icons/examples';
+import { useTheme } from 'providers/Theme';
+
+const Checkbox = ({
+  checked = false,
+  disabled = false,
+  onChange,
+  className = '',
+  id,
+  name,
+  value,
+  ...props
+}) => {
+  const { theme } = useTheme();
+
+  const handleChange = (e) => {
+    if (!disabled && onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <StyledWrapper checked={checked} disabled={disabled} className={className}>
+      <div className="checkbox-container">
+        <input
+          type="checkbox"
+          id={id}
+          name={name}
+          value={value}
+          checked={checked}
+          disabled={disabled}
+          onChange={handleChange}
+          className="checkbox-input"
+          {...props}
+        />
+        <IconCheckMark className="checkbox-checkmark" color={theme.examples.checkbox.color} size={14} />
+      </div>
+
+    </StyledWrapper>
+  );
+};
+
+export default Checkbox;
diff --git a/packages/bruno-app/src/components/Checkbox/index.spec.js b/packages/bruno-app/src/components/Checkbox/index.spec.js
new file mode 100644
index 0000000000..f7f2a91e5f
--- /dev/null
+++ b/packages/bruno-app/src/components/Checkbox/index.spec.js
@@ -0,0 +1,226 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import Checkbox from './index';
+import themes from 'themes/index';
+
+// Mock the IconCheckMark component
+jest.mock('components/Icons/examples', () => ({
+  IconCheckMark: ({ className, color, size }) => (
+    <div
+      data-testid="icon-checkmark"
+      className={className}
+      style={{ color, fontSize: size }}
+    />
+  )
+}));
+
+// Mock the useTheme hook
+jest.mock('providers/Theme', () => ({
+  useTheme: () => ({
+    theme: {
+      examples: {
+        checkbox: {
+          color: '#f59e0b'
+        }
+      }
+    }
+  })
+}));
+
+const renderWithTheme = (component) => {
+  return render(<ThemeProvider theme={themes.dark}>{component}</ThemeProvider>);
+};
+
+describe('Checkbox', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  describe('Rendering', () => {
+    it('should render with default props', () => {
+      renderWithTheme(<Checkbox />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).not.toBeChecked();
+      expect(checkbox).not.toBeDisabled();
+    });
+
+    it('should render with custom props', () => {
+      renderWithTheme(<Checkbox id="test-checkbox" name="test-name" value="test-value" className="custom-class" />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toHaveAttribute('id', 'test-checkbox');
+      expect(checkbox).toHaveAttribute('name', 'test-name');
+      expect(checkbox).toHaveAttribute('value', 'test-value');
+    });
+
+    it('should render as checked when checked prop is true', () => {
+      renderWithTheme(<Checkbox checked={true} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeChecked();
+    });
+
+    it('should render as disabled when disabled prop is true', () => {
+      renderWithTheme(<Checkbox disabled={true} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeDisabled();
+    });
+
+    it('should render checkmark icon', () => {
+      renderWithTheme(<Checkbox />);
+
+      const checkmark = screen.getByTestId('icon-checkmark');
+      expect(checkmark).toBeInTheDocument();
+      expect(checkmark).toHaveClass('checkbox-checkmark');
+    });
+
+    it('should show checkmark when checked', () => {
+      renderWithTheme(<Checkbox checked={true} />);
+
+      const checkmark = screen.getByTestId('icon-checkmark');
+      expect(checkmark).toHaveStyle('visibility: visible');
+    });
+
+    it('should hide checkmark when not checked', () => {
+      renderWithTheme(<Checkbox checked={false} />);
+
+      const checkmark = screen.getByTestId('icon-checkmark');
+      expect(checkmark).toHaveStyle('visibility: hidden');
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('should call onChange when clicked and not disabled', () => {
+      renderWithTheme(<Checkbox onChange={mockOnChange} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      fireEvent.click(checkbox);
+
+      expect(mockOnChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onChange when clicked and disabled', () => {
+      renderWithTheme(<Checkbox onChange={mockOnChange} disabled={true} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      fireEvent.click(checkbox);
+
+      expect(mockOnChange).not.toHaveBeenCalled();
+    });
+
+    it('should not call onChange when no onChange prop is provided', () => {
+      renderWithTheme(<Checkbox />);
+
+      const checkbox = screen.getByRole('checkbox');
+      fireEvent.click(checkbox);
+
+      // Should not throw error
+      expect(checkbox).toBeInTheDocument();
+    });
+
+    it('should toggle checked state when clicked', () => {
+      const TestWrapper = () => {
+        const [checked, setChecked] = React.useState(false);
+
+        return (
+          <Checkbox
+            checked={checked}
+            onChange={() => setChecked(!checked)}
+          />
+        );
+      };
+
+      renderWithTheme(<TestWrapper />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).not.toBeChecked();
+
+      fireEvent.click(checkbox);
+      expect(checkbox).toBeChecked();
+
+      fireEvent.click(checkbox);
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should be focusable when not disabled', () => {
+      renderWithTheme(<Checkbox />);
+
+      const checkbox = screen.getByRole('checkbox');
+      checkbox.focus();
+      expect(checkbox).toHaveFocus();
+    });
+
+    it('should not be focusable when disabled', () => {
+      renderWithTheme(<Checkbox disabled={true} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      checkbox.focus();
+      expect(checkbox).not.toHaveFocus();
+    });
+
+    it('should have proper ARIA attributes', () => {
+      renderWithTheme(<Checkbox id="test-checkbox" name="test-name" value="test-value" />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toHaveAttribute('id', 'test-checkbox');
+      expect(checkbox).toHaveAttribute('name', 'test-name');
+      expect(checkbox).toHaveAttribute('value', 'test-value');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom className', () => {
+      renderWithTheme(<Checkbox className="custom-class" />);
+
+      const wrapper = screen.getByRole('checkbox').closest('.custom-class');
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it('should pass through additional props', () => {
+      renderWithTheme(<Checkbox data-testid="custom-checkbox" aria-label="Custom checkbox" />);
+
+      const checkbox = screen.getByTestId('custom-checkbox');
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).toHaveAttribute('aria-label', 'Custom checkbox');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle undefined checked prop', () => {
+      renderWithTheme(<Checkbox checked={undefined} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).not.toBeChecked();
+    });
+
+    it('should handle null checked prop', () => {
+      renderWithTheme(<Checkbox checked={null} />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).not.toBeChecked();
+    });
+
+    it('should handle string checked prop', () => {
+      renderWithTheme(<Checkbox checked="true" />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeChecked();
+    });
+
+    it('should handle empty string className', () => {
+      renderWithTheme(<Checkbox className="" />);
+
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js
index bf6f72211a..f3f1211dd1 100644
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -245,6 +245,10 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('mode', this.props.mode);
     }
 
+    if (this.props.readOnly !== prevProps.readOnly && this.editor) {
+      this.editor.setOption('readOnly', this.props.readOnly);
+    }
+
     this.ignoreChangeEvent = false;
   }
 
diff --git a/packages/bruno-app/src/components/FilePickerEditor/index.js b/packages/bruno-app/src/components/FilePickerEditor/index.js
index 26969dde39..04f9196f52 100644
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -5,7 +5,7 @@ import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
 
-const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false }) => {
+const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false, editMode = true }) => {
   const dispatch = useDispatch();
   const filenames = (isSingleFilePicker ? [value] : value || [])
     .filter((v) => v != null && v != '')
@@ -50,20 +50,24 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
     return filenames.length + ' file(s) selected';
   };
 
+  const buttonClass = `btn btn-secondary px-1 ${editMode ? 'edit-mode' : 'view-mode'}`;
+
   return filenames.length > 0 ? (
     <div
-      className="btn btn-secondary px-1"
+      className={buttonClass}
       style={{ fontWeight: 400, width: '100%', textOverflow: 'ellipsis', overflowX: 'hidden' }}
       title={title}
     >
-      <button className="align-middle" onClick={clear}>
-        <IconX size={18} />
-      </button>
-      &nbsp;
+      {editMode && (
+        <button className="align-middle" onClick={clear}>
+          <IconX size={18} />
+        </button>
+      )}
+      {editMode && <>&nbsp;</>}
       {renderButtonText(filenames)}
     </div>
   ) : (
-    <button className="btn btn-secondary px-1" style={{ width: '100%' }} onClick={browse}>
+    <button className={buttonClass} style={{ width: '100%' }} onClick={editMode ? browse : undefined} disabled={!editMode}>
       {isSingleFilePicker ? 'Select File' : 'Select Files'}
     </button>
   );
diff --git a/packages/bruno-app/src/components/Icons/examples/index.js b/packages/bruno-app/src/components/Icons/examples/index.js
new file mode 100644
index 0000000000..cb1fe72c65
--- /dev/null
+++ b/packages/bruno-app/src/components/Icons/examples/index.js
@@ -0,0 +1,59 @@
+import React from 'react';
+
+export const IconEdit = ({ color = '#F39D0E', size = 16, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g clipPath="url(#clip0_464_9527)">
+        <path d="M12.6665 13.3332H5.66654L2.85988 10.4665C2.73571 10.3416 2.66602 10.1727 2.66602 9.99654C2.66602 9.82042 2.73571 9.65145 2.85988 9.52654L9.52654 2.85988C9.65145 2.73571 9.82042 2.66602 9.99654 2.66602C10.1727 2.66602 10.3416 2.73571 10.4665 2.85988L13.7999 6.19321C13.924 6.31812 13.9937 6.48709 13.9937 6.66321C13.9937 6.83933 13.924 7.0083 13.7999 7.13321L7.66654 13.3332" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.9998 8.86663L7.7998 4.66663" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_464_9527">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const IconCaretDown = ({ color = '#8C8C8C', ...props }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <g clipPath="url(#clip0_464_9256)">
+        <path d="M10.5444 5.75H4.46004C4.26888 5.7509 4.08142 5.78521 3.91637 5.84952C3.75132 5.91383 3.61447 6.00587 3.51947 6.11647C3.42448 6.22706 3.37466 6.35234 3.375 6.47978C3.37534 6.60723 3.42583 6.73238 3.52142 6.84275L6.56492 10.23C6.66228 10.3372 6.79942 10.4258 6.96311 10.4874C7.1268 10.5489 7.31151 10.5813 7.49945 10.5814C7.68739 10.5816 7.8722 10.5494 8.03608 10.4881C8.19995 10.4267 8.33735 10.3383 8.43504 10.2312L11.4763 6.8465C11.573 6.73635 11.6246 6.61118 11.626 6.48355C11.6273 6.35591 11.5783 6.23028 11.4839 6.11924C11.3895 6.0082 11.253 5.91564 11.088 5.85084C10.9231 5.78603 10.7359 5.75126 10.5444 5.75Z" fill="#8C8C8C" />
+      </g>
+      <defs>
+        <clipPath id="clip0_464_9256">
+          <rect width="9" height="6" fill="white" transform="translate(3 5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const IconCheckMark = ({ color = '#cccccc', size = 16, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M3.3335 8.49996L6.66683 11.8333L13.3335 5.16663" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+
+  );
+};
+
+export const ExampleIcon = ({ color = 'white', size = 16, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g clipPath="url(#clip0_486_1191)">
+        <path d="M2.66699 3.33329C2.66699 3.15648 2.73723 2.98691 2.86225 2.86189C2.98728 2.73686 3.15685 2.66663 3.33366 2.66663H12.667C12.8438 2.66663 13.0134 2.73686 13.1384 2.86189C13.2634 2.98691 13.3337 3.15648 13.3337 3.33329V12.6666C13.3337 12.8434 13.2634 13.013 13.1384 13.138C13.0134 13.2631 12.8438 13.3333 12.667 13.3333H3.33366C3.15685 13.3333 2.98728 13.2631 2.86225 13.138C2.73723 13.013 2.66699 12.8434 2.66699 12.6666V3.33329Z" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M9.33366 5.33337H6.66699V10.6667H9.33366" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M9.33366 8H6.66699" stroke={color} stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_486_1191">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+
+  );
+};
diff --git a/packages/bruno-app/src/components/Modal/index.js b/packages/bruno-app/src/components/Modal/index.js
index 19d7557879..f520866a5c 100644
--- a/packages/bruno-app/src/components/Modal/index.js
+++ b/packages/bruno-app/src/components/Modal/index.js
@@ -26,7 +26,8 @@ const ModalFooter = ({
   handleCancel,
   confirmDisabled,
   hideCancel,
-  hideFooter
+  hideFooter,
+  confirmButtonClass
 }) => {
   confirmText = confirmText || 'Save';
   cancelText = cancelText || 'Cancel';
@@ -45,7 +46,7 @@ const ModalFooter = ({
       <span>
         <button
           type="submit"
-          className="submit btn btn-md btn-secondary"
+          className={`submit btn btn-md ${confirmButtonClass || 'btn-secondary'}`}
           disabled={confirmDisabled}
           onClick={handleSubmit}
         >
@@ -73,7 +74,8 @@ const Modal = ({
   disableEscapeKey,
   onClick,
   closeModalFadeTimeout = 500,
-  dataTestId
+  dataTestId,
+  confirmButtonClass
 }) => {
   const modalRef = useRef(null);
   const [isClosing, setIsClosing] = useState(false);
@@ -139,6 +141,7 @@ const Modal = ({
           confirmDisabled={confirmDisabled}
           hideCancel={hideCancel}
           hideFooter={hideFooter}
+          confirmButtonClass={confirmButtonClass}
         />
       </div>
 
diff --git a/packages/bruno-app/src/components/MultiLineEditor/index.js b/packages/bruno-app/src/components/MultiLineEditor/index.js
index 86b4b728f1..b7bc2047be 100644
--- a/packages/bruno-app/src/components/MultiLineEditor/index.js
+++ b/packages/bruno-app/src/components/MultiLineEditor/index.js
@@ -18,6 +18,7 @@ class MultiLineEditor extends Component {
     this.cachedValue = props.value || '';
     this.editorRef = React.createRef();
     this.variables = {};
+    this.readOnly = props.readOnly || false;
 
     this.state = {
       maskInput: props.isSecret || false // Always mask the input by default (if it's a secret)
@@ -37,6 +38,7 @@ class MultiLineEditor extends Component {
       },
       readOnly: this.props.readOnly ? 'nocursor' : false,
       tabindex: 0,
+      readOnly: this.readOnly,
       extraKeys: {
         'Ctrl-Enter': () => {
           if (this.props.onRun) {
@@ -143,6 +145,9 @@ class MultiLineEditor extends Component {
       // also set the maskInput flag to the new value
       this.setState({ maskInput: this.props.isSecret });
     }
+    if (this.props.readOnly !== prevProps.readOnly && this.editor) {
+      this.editor.setOption('readOnly', this.props.readOnly || false);
+    }
     this.ignoreChangeEvent = false;
   }
 
diff --git a/packages/bruno-app/src/components/RadioButton/StyledWrapper.js b/packages/bruno-app/src/components/RadioButton/StyledWrapper.js
new file mode 100644
index 0000000000..9ef04cf39d
--- /dev/null
+++ b/packages/bruno-app/src/components/RadioButton/StyledWrapper.js
@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .radio-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+
+  .radio-input {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 2px solid ${(props) => props.theme.colors.text.muted};
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+    position: relative;
+    outline: none;
+    box-shadow: none;
+    margin: 0;
+    
+    &:checked {
+      border-color: ${(props) => props.theme.colors.text.yellow};
+      background-color: transparent;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        background-color: ${(props) => props.theme.colors.text.yellow};
+      }
+    }
+    
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      border-color: ${(props) => props.theme.colors.text.muted};
+      background-color: transparent;
+      
+      &:checked {
+        border-color: ${(props) => props.theme.colors.text.muted};
+        
+        &::after {
+          background-color: ${(props) => props.theme.colors.text.muted};
+        }
+      }
+    }
+    
+    &:hover:not(:disabled) {
+      opacity: 0.8;
+    }
+  }
+
+  .radio-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    pointer-events: none;
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/RadioButton/index.js b/packages/bruno-app/src/components/RadioButton/index.js
new file mode 100644
index 0000000000..5a3d3a0dd7
--- /dev/null
+++ b/packages/bruno-app/src/components/RadioButton/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const RadioButton = ({
+  checked,
+  disabled = false,
+  onChange,
+  name,
+  value,
+  id,
+  className = '',
+  ...props
+}) => {
+  const handleChange = (e) => {
+    if (!disabled && onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <StyledWrapper>
+      <div className={`radio-container ${className}`}>
+        <input
+          type="radio"
+          id={id}
+          name={name}
+          value={value}
+          checked={checked}
+          disabled={disabled}
+          onChange={handleChange}
+          className="radio-input"
+          {...props}
+        />
+        <label htmlFor={id} className="radio-label" />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default RadioButton;
diff --git a/packages/bruno-app/src/components/RadioButton/index.spec.js b/packages/bruno-app/src/components/RadioButton/index.spec.js
new file mode 100644
index 0000000000..7439752715
--- /dev/null
+++ b/packages/bruno-app/src/components/RadioButton/index.spec.js
@@ -0,0 +1,347 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import RadioButton from './index';
+import themes from 'themes/index';
+
+const renderWithTheme = (component) => {
+  return render(<ThemeProvider theme={themes.dark}>{component}</ThemeProvider>);
+};
+
+describe('RadioButton', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  describe('Rendering', () => {
+    it('should render with default props', () => {
+      renderWithTheme(<RadioButton />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeInTheDocument();
+      expect(radio).not.toBeChecked();
+      expect(radio).not.toBeDisabled();
+    });
+
+    it('should render with custom props', () => {
+      renderWithTheme(<RadioButton id="test-radio" name="test-group" value="test-value" className="custom-class" />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toHaveAttribute('id', 'test-radio');
+      expect(radio).toHaveAttribute('name', 'test-group');
+      expect(radio).toHaveAttribute('value', 'test-value');
+    });
+
+    it('should render as checked when checked prop is true', () => {
+      renderWithTheme(<RadioButton checked={true} />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeChecked();
+    });
+
+    it('should render as disabled when disabled prop is true', () => {
+      renderWithTheme(<RadioButton disabled={true} />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeDisabled();
+    });
+
+    it('should render with label element', () => {
+      renderWithTheme(<RadioButton id="test-radio" />);
+
+      const radio = screen.getByRole('radio');
+      const label = radio.parentElement.querySelector('label');
+      expect(label).toBeInTheDocument();
+      expect(label).toHaveAttribute('for', 'test-radio');
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('should call onChange when clicked and not disabled', () => {
+      renderWithTheme(<RadioButton onChange={mockOnChange} />);
+
+      const radio = screen.getByRole('radio');
+      fireEvent.click(radio);
+
+      expect(mockOnChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onChange when clicked and disabled', () => {
+      renderWithTheme(<RadioButton onChange={mockOnChange} disabled={true} />);
+
+      const radio = screen.getByRole('radio');
+      fireEvent.click(radio);
+
+      expect(mockOnChange).not.toHaveBeenCalled();
+    });
+
+    it('should call onChange when label is clicked', () => {
+      renderWithTheme(<RadioButton id="test-radio" onChange={mockOnChange} />);
+
+      const radio = screen.getByRole('radio');
+      const label = radio.parentElement.querySelector('label');
+      fireEvent.click(label);
+
+      expect(mockOnChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onChange when no onChange prop is provided', () => {
+      renderWithTheme(<RadioButton />);
+
+      const radio = screen.getByRole('radio');
+      fireEvent.click(radio);
+
+      // Should not throw error
+      expect(radio).toBeInTheDocument();
+    });
+
+    it('should stay checked when clicked (radio button behavior)', () => {
+      const TestWrapper = () => {
+        const [checked, setChecked] = React.useState(false);
+
+        return (
+          <RadioButton
+            checked={checked}
+            onChange={() => setChecked(true)}
+          />
+        );
+      };
+
+      renderWithTheme(<TestWrapper />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).not.toBeChecked();
+
+      fireEvent.click(radio);
+      expect(radio).toBeChecked();
+
+      // Radio buttons stay checked when clicked again
+      fireEvent.click(radio);
+      expect(radio).toBeChecked();
+    });
+  });
+
+  describe('Radio Group Behavior', () => {
+    it('should work correctly in a radio group', () => {
+      const TestWrapper = () => {
+        const [selectedValue, setSelectedValue] = React.useState('option1');
+
+        return (
+          <div>
+            <RadioButton
+              id="option1"
+              name="test-group"
+              value="option1"
+              checked={selectedValue === 'option1'}
+              onChange={() => setSelectedValue('option1')}
+            />
+            <RadioButton
+              id="option2"
+              name="test-group"
+              value="option2"
+              checked={selectedValue === 'option2'}
+              onChange={() => setSelectedValue('option2')}
+            />
+          </div>
+        );
+      };
+
+      renderWithTheme(<TestWrapper />);
+
+      const radios = screen.getAllByRole('radio');
+      const option1 = radios.find((radio) => radio.value === 'option1');
+      const option2 = radios.find((radio) => radio.value === 'option2');
+
+      expect(option1).toBeChecked();
+      expect(option2).not.toBeChecked();
+
+      fireEvent.click(option2);
+
+      expect(option1).not.toBeChecked();
+      expect(option2).toBeChecked();
+    });
+
+    it('should maintain radio group behavior with multiple options', () => {
+      const TestWrapper = () => {
+        const [selectedValue, setSelectedValue] = React.useState('option1');
+
+        return (
+          <div>
+            <RadioButton
+              id="option1"
+              name="test-group"
+              value="option1"
+              checked={selectedValue === 'option1'}
+              onChange={() => setSelectedValue('option1')}
+            />
+            <RadioButton
+              id="option2"
+              name="test-group"
+              value="option2"
+              checked={selectedValue === 'option2'}
+              onChange={() => setSelectedValue('option2')}
+            />
+            <RadioButton
+              id="option3"
+              name="test-group"
+              value="option3"
+              checked={selectedValue === 'option3'}
+              onChange={() => setSelectedValue('option3')}
+            />
+          </div>
+        );
+      };
+
+      renderWithTheme(<TestWrapper />);
+
+      const radios = screen.getAllByRole('radio');
+      const option1 = radios.find((radio) => radio.value === 'option1');
+      const option2 = radios.find((radio) => radio.value === 'option2');
+      const option3 = radios.find((radio) => radio.value === 'option3');
+
+      expect(option1).toBeChecked();
+      expect(option2).not.toBeChecked();
+      expect(option3).not.toBeChecked();
+
+      fireEvent.click(option3);
+
+      expect(option1).not.toBeChecked();
+      expect(option2).not.toBeChecked();
+      expect(option3).toBeChecked();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should be focusable when not disabled', () => {
+      renderWithTheme(<RadioButton />);
+
+      const radio = screen.getByRole('radio');
+      radio.focus();
+      expect(radio).toHaveFocus();
+    });
+
+    it('should not be focusable when disabled', () => {
+      renderWithTheme(<RadioButton disabled={true} />);
+
+      const radio = screen.getByRole('radio');
+      radio.focus();
+      expect(radio).not.toHaveFocus();
+    });
+
+    it('should have proper ARIA attributes', () => {
+      renderWithTheme(<RadioButton id="test-radio" name="test-group" value="test-value" />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toHaveAttribute('id', 'test-radio');
+      expect(radio).toHaveAttribute('name', 'test-group');
+      expect(radio).toHaveAttribute('value', 'test-value');
+    });
+
+    it('should have associated label', () => {
+      renderWithTheme(<RadioButton id="test-radio" />);
+
+      const radio = screen.getByRole('radio');
+      const label = radio.parentElement.querySelector('label');
+
+      expect(label).toHaveAttribute('for', 'test-radio');
+      expect(radio).toHaveAttribute('id', 'test-radio');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom className to container', () => {
+      renderWithTheme(<RadioButton className="custom-class" />);
+
+      const container = screen.getByRole('radio').closest('.custom-class');
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should pass through additional props', () => {
+      renderWithTheme(<RadioButton data-testid="custom-radio" aria-label="Custom radio button" />);
+
+      const radio = screen.getByTestId('custom-radio');
+      expect(radio).toBeInTheDocument();
+      expect(radio).toHaveAttribute('aria-label', 'Custom radio button');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle undefined checked prop', () => {
+      renderWithTheme(<RadioButton checked={undefined} />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).not.toBeChecked();
+    });
+
+    it('should handle null checked prop', () => {
+      renderWithTheme(<RadioButton checked={null} />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).not.toBeChecked();
+    });
+
+    it('should handle string checked prop', () => {
+      renderWithTheme(<RadioButton checked="true" />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeChecked();
+    });
+
+    it('should handle empty string className', () => {
+      renderWithTheme(<RadioButton className="" />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeInTheDocument();
+    });
+
+    it('should handle missing id prop', () => {
+      renderWithTheme(<RadioButton />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeInTheDocument();
+      expect(radio).not.toHaveAttribute('id');
+    });
+
+    it('should handle missing name prop', () => {
+      renderWithTheme(<RadioButton />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeInTheDocument();
+      expect(radio).not.toHaveAttribute('name');
+    });
+
+    it('should handle missing value prop', () => {
+      renderWithTheme(<RadioButton />);
+
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeInTheDocument();
+      expect(radio).not.toHaveAttribute('value');
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('should be focusable and respond to click after focus', () => {
+      renderWithTheme(<RadioButton onChange={mockOnChange} />);
+
+      const radio = screen.getByRole('radio');
+      radio.focus();
+      expect(radio).toHaveFocus();
+
+      // Radio buttons don't trigger onChange on keyDown, but can be clicked after focus
+      fireEvent.click(radio);
+      expect(mockOnChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not be focusable when disabled', () => {
+      renderWithTheme(<RadioButton onChange={mockOnChange} disabled={true} />);
+
+      const radio = screen.getByRole('radio');
+      radio.focus();
+
+      expect(radio).not.toHaveFocus();
+    });
+  });
+});
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
index c5b1362879..4759039622 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -8,6 +8,7 @@ import { useTheme } from 'providers/Theme';
 import { IconDeviceFloppy, IconArrowRight, IconCode } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { isMacOS } from 'utils/common/platform';
+import { hasRequestChanges } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import GenerateCodeItem from 'components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index';
 import toast from 'react-hot-toast';
@@ -133,15 +134,15 @@ const QueryUrl = ({ item, collection, handleRun }) => {
             className="infotip mr-3"
             onClick={(e) => {
               e.stopPropagation();
-              if (!item.draft) return;
+              if (!hasRequestChanges(item)) return;
               onSave();
             }}
           >
             <IconDeviceFloppy
-              color={item.draft ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+              color={hasRequestChanges(item) ? theme.colors.text.yellow : theme.requestTabs.icon.color}
               strokeWidth={1.5}
               size={22}
-              className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
+              className={`${hasRequestChanges(item) ? 'cursor-pointer' : 'cursor-default'}`}
             />
             <span className="infotiptext text-xs">
               Save <span className="shortcut">({saveShortcut})</span>
diff --git a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
index 0c5f65d7d2..7232d2ec43 100644
--- a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
@@ -10,6 +10,7 @@ import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
 import { getPropertyFromDraftOrRequest } from 'utils/collections';
 import { isMacOS } from 'utils/common/platform';
+import { hasRequestChanges } from 'utils/collections';
 import { closeWsConnection, isWsConnectionActive } from 'utils/network/index';
 import StyledWrapper from './StyledWrapper';
 import get from 'lodash/get';
@@ -108,15 +109,15 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
               className="infotip mr-3"
               onClick={(e) => {
                 e.stopPropagation();
-                if (!item.draft) return;
+                if (!hasRequestChanges(item)) return;
                 onSave();
               }}
             >
               <IconDeviceFloppy
-                color={item.draft ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+                color={hasRequestChanges(item) ? theme.colors.text.yellow : theme.requestTabs.icon.color}
                 strokeWidth={1.5}
                 size={22}
-                className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
+                className={`${hasRequestChanges(item) ? 'cursor-pointer' : 'cursor-default'}`}
               />
               <span className="infotip-text text-xs">
                 Save <span className="shortcut">({saveShortcut})</span>
diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js
index ec3878a7fc..11671ece49 100644
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -32,6 +32,7 @@ import FolderNotFound from './FolderNotFound';
 import WsQueryUrl from 'components/RequestPane/WsQueryUrl';
 import WSRequestPane from 'components/RequestPane/WSRequestPane';
 import WSResponsePane from 'components/ResponsePane/WsResponsePane';
+import ResponseExample from 'components/ResponseExample';
 
 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
@@ -186,6 +187,32 @@ const RequestTabPanel = () => {
     return <div className="pb-4 px-4">Collection not found!</div>;
   }
 
+  if (focusedTab.type === 'response-example') {
+    const item = findItemInCollection(collection, focusedTab.itemUid);
+    const example = item?.examples?.find((ex) => ex.uid === focusedTab.uid);
+
+    if (!item) {
+      return (
+        <div className="pb-4 px-4">
+          Item not found! ItemUid:
+          {focusedTab.itemUid}
+        </div>
+      );
+    }
+
+    if (!example) {
+      return (
+        <div className="pb-4 px-4">
+          Example not found! Item:
+          {item?.uid}
+          , ExampleUid:
+          {focusedTab.uid}
+        </div>
+      );
+    }
+    return <ResponseExample item={item} collection={collection} example={example} />;
+  }
+
   const item = findItemInCollection(collection, activeTabUid);
   const isGrpcRequest = item?.type === 'grpc-request';
   const isWsRequest = item?.type === 'ws-request';
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js
index d02704636a..293ebb3a6f 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js
@@ -2,7 +2,11 @@ import React from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
 
-const ConfirmRequestClose = ({ item, onCancel, onCloseWithoutSave, onSaveAndClose }) => {
+const ConfirmRequestClose = ({ item, example, onCancel, onCloseWithoutSave, onSaveAndClose }) => {
+  const isExample = !!example;
+  const itemName = isExample ? example.name : item.name;
+  const itemType = isExample ? 'example' : 'request';
+
   return (
     <Modal
       size="md"
@@ -24,7 +28,7 @@ const ConfirmRequestClose = ({ item, onCancel, onCloseWithoutSave, onSaveAndClos
         <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
       </div>
       <div className="font-normal mt-4">
-        You have unsaved changes in request <span className="font-semibold">{item.name}</span>.
+        You have unsaved changes in {itemType} <span className="font-semibold">{itemName}</span>.
       </div>
 
       <div className="flex justify-between mt-6">
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index 71d57d940c..0fac7e0a24 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -7,7 +7,8 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import darkTheme from 'themes/dark';
 import lightTheme from 'themes/light';
-import { findItemInCollection } from 'utils/collections';
+import { findItemInCollection, hasRequestChanges, hasExampleChanges } from 'utils/collections';
+import { ExampleIcon } from 'components/Icons/examples';
 import ConfirmRequestClose from './ConfirmRequestClose';
 import RequestTabNotFound from './RequestTabNotFound';
 import SpecialTab from './SpecialTab';
@@ -29,6 +30,14 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
+  // Get item and example data for both request and example tabs
+  const item = tab.type === 'response-example'
+    ? findItemInCollection(collection, tab.itemUid)
+    : findItemInCollection(collection, tab.uid);
+  const example = tab.type === 'response-example'
+    ? item?.examples?.find((ex) => ex.uid === tab.uid)
+    : null;
+
   const handleCloseClick = (event) => {
     event.stopPropagation();
     event.preventDefault();
@@ -92,7 +101,71 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
     );
   }
 
-  const item = findItemInCollection(collection, tab.uid);
+  // Handle response-example tabs specially
+  if (tab.type === 'response-example') {
+    const hasChanges = hasExampleChanges(item, tab.uid);
+
+    if (!item || !example) {
+      return (
+        <StyledWrapper
+          className="flex items-center justify-between tab-container px-1"
+          onMouseUp={(e) => {
+            if (e.button === 1) {
+              e.preventDefault();
+              e.stopPropagation();
+
+              dispatch(closeTabs({ tabUids: [tab.uid] }));
+            }
+          }}
+        >
+          <RequestTabNotFound handleCloseClick={handleCloseClick} />
+        </StyledWrapper>
+      );
+    }
+
+    return (
+      <StyledWrapper className="flex items-center justify-between tab-container px-1">
+        <div
+          className={`flex items-center tab-label pl-2 ${tab.preview ? 'italic' : ''}`}
+          onContextMenu={handleRightClick}
+          onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
+          onMouseUp={(e) => {
+            if (!hasChanges) return handleMouseUp(e);
+
+            if (e.button === 1) {
+              e.stopPropagation();
+              e.preventDefault();
+              setShowConfirmClose(true);
+            }
+          }}
+        >
+          <ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-500 flex-shrink-0" />
+          <span className="tab-name" title={example.name}>
+            {example.name}
+          </span>
+        </div>
+        <div
+          className="flex px-2 close-icon-container"
+          onClick={(e) => {
+            if (!hasChanges) {
+              return handleCloseClick(e);
+            }
+
+            e.stopPropagation();
+            e.preventDefault();
+            setShowConfirmClose(true);
+          }}
+        >
+          {!hasChanges ? (
+            <CloseTabIcon />
+          ) : (
+            <DraftTabIcon />
+          )}
+        </div>
+      </StyledWrapper>
+    );
+  }
+
 
   const getMethodText = useCallback((item) => {
     if (!item) return;
@@ -135,6 +208,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
       {showConfirmClose && (
         <ConfirmRequestClose
           item={item}
+          example={tab.type === 'response-example' ? example : null}
           onCancel={() => setShowConfirmClose(false)}
           onCloseWithoutSave={() => {
             isWS && closeWsConnection(item.uid);
@@ -172,7 +246,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
         onContextMenu={handleRightClick}
         onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
         onMouseUp={(e) => {
-          if (!item.draft) return handleMouseUp(e);
+          if (!hasRequestChanges(item)) return handleMouseUp(e);
 
           if (e.button === 1) {
             e.stopPropagation();
@@ -200,7 +274,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
       <div
         className="flex px-2 close-icon-container"
         onClick={(e) => {
-          if (!item.draft) {
+          if (!hasRequestChanges(item)) {
             isWS && closeWsConnection(item.uid);
             return handleCloseClick(e);
           };
@@ -210,7 +284,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
           setShowConfirmClose(true);
         }}
       >
-        {!item.draft ? (
+        {!hasRequestChanges(item) ? (
           <CloseTabIcon />
         ) : (
           <DraftTabIcon />
@@ -243,7 +317,7 @@ function RequestTabMenu({ onDropdownCreate, collectionRequestTabs, tabIndex, col
     try {
       const item = findItemInCollection(collection, tabUid);
       // silently save unsaved changes before closing the tab
-      if (item.draft) {
+      if (hasRequestChanges(item)) {
         await dispatch(saveRequest(item.uid, collection.uid, true));
       }
 
@@ -295,7 +369,7 @@ function RequestTabMenu({ onDropdownCreate, collectionRequestTabs, tabIndex, col
     event.stopPropagation();
 
     const items = flattenItems(collection?.items);
-    const savedTabs = items?.filter?.((item) => !item.draft);
+    const savedTabs = items?.filter?.((item) => !hasRequestChanges(item));
     const savedTabIds = savedTabs?.map((item) => item.uid) || [];
     dispatch(closeTabs({ tabUids: savedTabIds }));
   }
diff --git a/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js b/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
new file mode 100644
index 0000000000..7066676bae
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import Modal from 'components/Modal';
+
+const CreateExampleModal = ({ isOpen, onClose, onSave, title = 'Create Response Example' }) => {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+
+  const handleConfirm = () => {
+    if (name.trim()) {
+      onSave(name.trim(), description.trim());
+      // Reset form
+      setName('');
+      setDescription('');
+    }
+  };
+
+  const handleClose = () => {
+    // Reset form when closing
+    setName('');
+    setDescription('');
+    onClose();
+  };
+
+  // Reset form when modal opens
+  React.useEffect(() => {
+    if (isOpen) {
+      setName('');
+      setDescription('');
+    }
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Modal
+      size="sm"
+      title={title}
+      handleCancel={handleClose}
+      handleConfirm={handleConfirm}
+      confirmText="Create Example"
+      cancelText="Cancel"
+      confirmDisabled={!name.trim()}
+      isOpen={isOpen}
+    >
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="exampleName" className="block font-semibold">
+            Example Name
+          </label>
+          <input
+            id="exampleName"
+            type="text"
+            className="textbox mt-2 w-full"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Enter example name..."
+            autoFocus
+            required
+            data-testid="create-example-name-input"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="exampleDescription" className="block font-semibold">
+            Description (Optional)
+          </label>
+          <textarea
+            id="exampleDescription"
+            className="textbox mt-2 w-full"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Enter example description..."
+            rows={3}
+            data-testid="create-example-description-input"
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default CreateExampleModal;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
new file mode 100644
index 0000000000..4ab2ce15ed
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .title {
+    font-weight: 700;
+    color: ${(props) => props.theme.text};
+  }
+
+  font-size: 0.8125rem;
+
+  .body-mode-selector {
+    background: transparent;
+    border-radius: 3px;
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+      padding-left: 1.5rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .selected-body-mode {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
+    &.cursor-default {
+      opacity: 0.6;
+      
+      .selected-body-mode {
+        color: ${(props) => props.theme.colors.text.muted};
+      }
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+
+  .btn-action {
+    border-radius: 3px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${(props) => props.theme.colors.text.muted};
+    
+    &:hover {
+      opacity: 0.9;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .no-body-text {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  /* CodeEditor container */
+  .code-editor-container {
+    flex: 1;
+    min-height: 200px;
+    height: 200px;
+    border-top: none;
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js
new file mode 100644
index 0000000000..ebe5fbf1e3
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { updateResponseExampleRequest } from 'providers/ReduxStore/slices/collections';
+import ResponseExampleBodyMode from '../ResponseExampleBodyMode';
+import ResponseExampleBodyRenderer from '../ResponseExampleBodyRenderer';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseExampleBody = ({ editMode, item, collection, exampleUid, onSave }) => {
+  const dispatch = useDispatch();
+
+  // Get body from item draft, similar to how RequestHeaders works
+  const body = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body || { mode: 'none' } : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body || { mode: 'none' };
+
+  const onBodyEdit = (value) => {
+    if (editMode && item && collection.uid && exampleUid) {
+      const updatedBody = { ...body };
+      switch (body.mode) {
+        case 'json':
+          updatedBody.json = value;
+          break;
+        case 'text':
+          updatedBody.text = value;
+          break;
+        case 'xml':
+          updatedBody.xml = value;
+          break;
+        case 'sparql':
+          updatedBody.sparql = value;
+          break;
+        default:
+          break;
+      }
+
+      dispatch(updateResponseExampleRequest({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        request: {
+          body: updatedBody
+        }
+      }));
+    }
+  };
+
+  return (
+    <StyledWrapper className="w-full mt-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <div className="title text-xs mr-2">Body</div>
+        </div>
+        <ResponseExampleBodyMode
+          item={item}
+          collection={collection}
+          exampleUid={exampleUid}
+          body={body}
+          bodyMode={body.mode}
+          onBodyEdit={onBodyEdit}
+          editMode={editMode}
+        />
+      </div>
+
+      <ResponseExampleBodyRenderer
+        bodyMode={body.mode}
+        body={body}
+        editMode={editMode}
+        item={item}
+        collection={collection}
+        exampleUid={exampleUid}
+        onBodyEdit={onBodyEdit}
+        onSave={onSave}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleBody;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js
new file mode 100644
index 0000000000..23e698f0f0
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js
@@ -0,0 +1,186 @@
+import React, { useRef, forwardRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { IconCaretDown } from '@tabler/icons';
+import { updateResponseExampleRequest } from 'providers/ReduxStore/slices/collections';
+import Dropdown from 'components/Dropdown';
+import { humanizeRequestBodyMode } from 'utils/collections';
+import { format, applyEdits } from 'jsonc-parser';
+import xmlFormat from 'xml-formatter';
+import { toastError } from 'utils/common/error';
+
+const ResponseExampleBodyMode = ({ item, collection, exampleUid, body, bodyMode, onBodyEdit, editMode = false }) => {
+  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
+        {humanizeRequestBodyMode(bodyMode)}
+        {' '}
+        <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeChange = (value) => {
+    if (item && collection && exampleUid) {
+      // Initialize the new body structure based on the selected mode
+      let newBody = { mode: value };
+
+      // Preserve existing data for the new mode if it exists
+      if (body) {
+        switch (value) {
+          case 'json':
+            newBody.json = body.json || '';
+            break;
+          case 'text':
+            newBody.text = body.text || '';
+            break;
+          case 'xml':
+            newBody.xml = body.xml || '';
+            break;
+          case 'sparql':
+            newBody.sparql = body.sparql || '';
+            break;
+          case 'formUrlEncoded':
+            newBody.formUrlEncoded = body.formUrlEncoded || [];
+            break;
+          case 'multipartForm':
+            newBody.multipartForm = body.multipartForm || [];
+            break;
+          case 'file':
+            newBody.file = body.file || { name: '', data: '' };
+            break;
+          case 'none':
+            // No additional data needed for 'none' mode
+            break;
+          default:
+            break;
+        }
+      }
+
+      dispatch(updateResponseExampleRequest({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        request: {
+          body: newBody
+        }
+      }));
+    }
+  };
+
+  const onPrettify = () => {
+    if (body?.json && bodyMode === 'json') {
+      try {
+        const edits = format(body.json, undefined, { tabSize: 2, insertSpaces: true });
+        const prettyBodyJson = applyEdits(body.json, edits);
+        onBodyEdit(prettyBodyJson);
+      } catch (e) {
+        toastError(new Error('Unable to prettify. Invalid JSON format.'));
+      }
+    } else if (body?.xml && bodyMode === 'xml') {
+      try {
+        const prettyBodyXML = xmlFormat(body.xml, { collapseContent: true });
+        onBodyEdit(prettyBodyXML);
+      } catch (e) {
+        toastError(new Error('Unable to prettify. Invalid XML format.'));
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      {['json', 'xml'].includes(bodyMode) && (
+        <button
+          className="btn-action text-link mr-2 py-1 px-2 text-xs"
+          onClick={onPrettify}
+        >
+          Prettify
+        </button>
+      )}
+      <div className={`inline-flex items-center body-mode-selector ${editMode ? 'cursor-pointer' : 'cursor-default'}`}>
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end" disabled={!editMode}>
+          <div className="label-item font-medium">Form</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('multipartForm');
+            }}
+          >
+            Multipart Form
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('formUrlEncoded');
+            }}
+          >
+            Form URL Encoded
+          </div>
+          <div className="label-item font-medium">Raw</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('json');
+            }}
+          >
+            JSON
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('xml');
+            }}
+          >
+            XML
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('text');
+            }}
+          >
+            TEXT
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('sparql');
+            }}
+          >
+            SPARQL
+          </div>
+          <div className="label-item font-medium">Other</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('file');
+            }}
+          >
+            File / Binary
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('none');
+            }}
+          >
+            None
+          </div>
+        </Dropdown>
+      </div>
+    </div>
+  );
+};
+
+export default ResponseExampleBodyMode;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js
new file mode 100644
index 0000000000..cac4c5239d
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import get from 'lodash/get';
+import CodeEditor from 'components/CodeEditor';
+import ResponseExampleFormUrlEncodedParams from '../ResponseExampleFormUrlEncodedParams';
+import ResponseExampleMultipartFormParams from '../ResponseExampleMultipartFormParams';
+import ResponseExampleFileBody from '../ResponseExampleFileBody';
+
+const ResponseExampleBodyRenderer = ({
+  bodyMode,
+  body,
+  editMode,
+  item,
+  collection,
+  exampleUid,
+  onBodyEdit,
+  onSave
+}) => {
+  const { displayedTheme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
+
+  const getBodyContent = () => {
+    if (!body) return '';
+
+    switch (bodyMode) {
+      case 'json':
+        return body.json || '';
+      case 'text':
+        return body.text || '';
+      case 'xml':
+        return body.xml || '';
+      case 'sparql':
+        return body.sparql || '';
+      default:
+        return '';
+    }
+  };
+
+  const getCodeMirrorMode = () => {
+    const modeMap = {
+      json: 'application/ld+json',
+      text: 'application/text',
+      xml: 'application/xml',
+      sparql: 'application/sparql-query'
+    };
+    return modeMap[bodyMode] || 'application/text';
+  };
+
+  const renderBodyContent = () => {
+    switch (bodyMode) {
+      case 'none':
+        return (
+          <div className="text-sm no-body-text">
+            No Body
+          </div>
+        );
+
+      case 'json':
+      case 'xml':
+      case 'text':
+      case 'sparql':
+        return (
+          <div className="min-h-96">
+            <CodeEditor
+              collection={collection}
+              item={item}
+              theme={displayedTheme}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              value={getBodyContent()}
+              onEdit={onBodyEdit}
+              onRun={() => {}}
+              onSave={onSave}
+              mode={getCodeMirrorMode()}
+              enableVariableHighlighting={true}
+              showHintsFor={['variables']}
+              readOnly={!editMode}
+            />
+          </div>
+        );
+
+      case 'formUrlEncoded':
+        return <ResponseExampleFormUrlEncodedParams item={item} collection={collection} exampleUid={exampleUid} editMode={editMode} />;
+
+      case 'multipartForm':
+        return <ResponseExampleMultipartFormParams item={item} collection={collection} exampleUid={exampleUid} editMode={editMode} />;
+
+      case 'file':
+        return <ResponseExampleFileBody item={item} collection={collection} exampleUid={exampleUid} editMode={editMode} />;
+
+      default:
+        return (
+          <div className="text-sm no-body-text">
+            No Body
+          </div>
+        );
+    }
+  };
+
+  return renderBodyContent();
+};
+
+export default ResponseExampleBodyRenderer;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js
new file mode 100644
index 0000000000..9d2bc703c0
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js
@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  textarea {
+    background-color: transparent;
+    color: ${(props) => props.theme.text};
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    border: 1px solid transparent;
+    padding: 0;
+    
+    &:not([readonly]) {
+      border: 1px solid ${(props) => props.theme.input.border};
+      padding: 8px;
+    }
+    
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      border: 1px solid ${(props) => props.theme.examples.urlBar.border};
+    }
+    
+    &:disabled {
+      background: transparent;
+      color: ${(props) => props.theme.colors.text.muted};
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+    
+    &::placeholder {
+      color: ${(props) => props.theme.input.placeholder.color};
+      opacity: ${(props) => props.theme.input.placeholder.opacity};
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js
new file mode 100644
index 0000000000..b106d51965
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import get from 'lodash/get';
+import { updateResponseExampleDetails } from 'providers/ReduxStore/slices/collections';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseExampleDescription = ({ editMode, item, collection, exampleUid }) => {
+  const dispatch = useDispatch();
+
+  // Get description from item draft, similar to how RequestHeaders works
+  const description = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.description || '' : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.description || '';
+
+  const [value, setValue] = useState(description || '');
+
+  // Update local state when description changes
+  useEffect(() => {
+    setValue(description || '');
+  }, [description]);
+
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+
+    if (editMode && item && collection && exampleUid) {
+      dispatch(updateResponseExampleDetails({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        details: {
+          description: newValue
+        }
+      }));
+    }
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <div className="mb-2">
+        <textarea
+          value={value}
+          onChange={editMode ? handleChange : () => {}}
+          readOnly={!editMode}
+          placeholder="Enter example description..."
+          className="w-full p-3 border rounded-md"
+          rows={1}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleDescription;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/StyledWrapper.js
new file mode 100644
index 0000000000..a1a444d6bc
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/StyledWrapper.js
@@ -0,0 +1,131 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+      }
+    }
+
+  .btn-add-param {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    color: ${(props) => props.theme.table.input.color};
+    background: transparent;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+
+  .btn-action {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    color: ${(props) => props.theme.colors.text.muted};
+    
+    &:hover {
+      opacity: 0.8;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .btn-secondary {
+    &.edit-mode {
+      background-color: ${(props) => props.theme.colors.text.yellow}20;
+      border-color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
+    &.view-mode {
+      background-color: transparent;
+      border-color: ${(props) => props.theme.colors.text.muted};
+      color: ${(props) => props.theme.colors.text.muted};
+      cursor: default;
+    }
+
+    /* Fix alignment for file picker content */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px;
+      margin-right: 4px;
+    }
+  }
+
+  tr {
+    position: relative;
+    
+    &:hover .delete-button.edit-mode {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .delete-button {
+    opacity: 0;
+    visibility: hidden;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-left: 8px;
+    
+    &:hover {
+      color: ${(props) => props.theme.colors.text.red};
+    }
+
+    &:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: ${(props) => props.theme.text};
+    }
+  }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
new file mode 100644
index 0000000000..44c07a5826
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
@@ -0,0 +1,221 @@
+import React, { useState, useEffect } from 'react';
+import { get, cloneDeep, isArray } from 'lodash';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { updateResponseExampleFileBodyParams } from 'providers/ReduxStore/slices/collections';
+import mime from 'mime-types';
+import path from 'utils/common/path';
+import StyledWrapper from './StyledWrapper';
+import FilePickerEditor from 'components/FilePickerEditor/index';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable';
+import RadioButton from 'components/RadioButton';
+
+const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = false }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  // Get file data from the specific example
+  const rawParams = item.draft
+    ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.file
+    : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.file;
+
+  // Ensure params is always an array
+  const params = Array.isArray(rawParams) ? rawParams : [];
+
+  const [enabledFileUid, setEnableFileUid] = useState(params.length > 0 ? params[0].uid : '');
+
+  const addFile = () => {
+    const newParam = {
+      filePath: '',
+      contentType: '',
+      selected: params.length === 0 // First file is selected by default
+    };
+
+    const updatedParams = [...params, newParam];
+
+    dispatch(updateResponseExampleFileBodyParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamChange = (e, _param, type) => {
+    if (!editMode) return;
+
+    const param = cloneDeep(_param);
+    switch (type) {
+      case 'filePath': {
+        param.filePath = e.target.filePath;
+        // Auto-detect content type from file extension using mime library (same as updateFile)
+        const contentType = mime.contentType(path.extname(e.target.filePath));
+        param.contentType = contentType || '';
+        break;
+      }
+      case 'contentType': {
+        param.contentType = e.target.contentType;
+        break;
+      }
+      case 'selected': {
+        // When a file is selected, deselect all others and select this one
+        const updatedParams = params.map((p) => ({
+          ...p,
+          selected: p.uid === param.uid ? e.target.checked : false
+        }));
+
+        dispatch(updateResponseExampleFileBodyParams({
+          itemUid: item.uid,
+          collectionUid: collection.uid,
+          exampleUid: exampleUid,
+          params: updatedParams
+        }));
+
+        // Update the enabled file UID state
+        if (e.target.checked) {
+          setEnableFileUid(param.uid);
+        }
+        return; // Early return since we already dispatched
+      }
+    }
+
+    const updatedParams = params.map((p) => p.uid === param.uid ? param : p);
+
+    dispatch(updateResponseExampleFileBodyParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleRemoveParams = (param) => {
+    if (!editMode) return;
+
+    const updatedParams = params.filter((p) => p.uid !== param.uid);
+
+    dispatch(updateResponseExampleFileBodyParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamDrag = ({ updateReorderedItem }) => {
+    if (!editMode) return;
+
+    const reorderedParams = updateReorderedItem.map((uid) => {
+      return params.find((p) => p.uid === uid);
+    });
+
+    dispatch(updateResponseExampleFileBodyParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: reorderedParams
+    }));
+  };
+
+  if (params.length === 0 && !editMode) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="w-full mt-4">
+      <Table
+        headers={[
+          { name: 'File', accessor: 'file', width: '50%' },
+          { name: 'Content-Type', accessor: 'contentType', width: '30%' },
+          { name: 'Selected', accessor: 'selected', width: '20%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleParamDrag}>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid} data-uid={param.uid}>
+                    <td className="flex relative">
+                      <FilePickerEditor
+                        isSingleFilePicker={true}
+                        value={param.filePath}
+                        onChange={editMode ? (path) =>
+                          handleParamChange({
+                            target: {
+                              filePath: path
+                            }
+                          },
+                          param,
+                          'filePath') : () => {}}
+                        collection={collection}
+                        editMode={editMode}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <SingleLineEditor
+                          className="flex items-center justify-center"
+                          onSave={() => {}}
+                          theme={storedTheme}
+                          placeholder="Auto"
+                          value={param.contentType}
+                          onChange={editMode ? (newValue) =>
+                            handleParamChange({
+                              target: {
+                                contentType: newValue
+                              }
+                            },
+                            param,
+                            'contentType') : () => {}}
+                          onRun={() => {}}
+                          collection={collection}
+                        />
+                      </div>
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <RadioButton
+                          key={param.uid}
+                          id={`file-${param.uid}`}
+                          name="selectedFile"
+                          value={param.uid}
+                          checked={enabledFileUid === param.uid || param.selected}
+                          onChange={editMode ? (e) => handleParamChange(e, param, 'selected') : () => {}}
+                          disabled={!editMode}
+                          className="mr-1 mousetrap"
+                        />
+                        <button
+                          tabIndex="-1"
+                          onClick={() => handleRemoveParams(param)}
+                          className={`delete-button ${editMode ? 'edit-mode' : ''}`}
+                          disabled={!editMode}
+                        >
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action pr-2 py-3 select-none"
+            onClick={addFile}
+          >
+            + Add File
+          </button>
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleFileBody;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/StyledWrapper.js
new file mode 100644
index 0000000000..2743713580
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/StyledWrapper.js
@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+      }
+    }
+
+  .btn-add-param {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    color: ${(props) => props.theme.table.input.color};
+    background: transparent;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+
+  tr {
+    position: relative;
+    
+    &:hover .delete-button.edit-mode {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .delete-button {
+    opacity: 0;
+    visibility: hidden;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-left: 8px;
+    
+    &:hover {
+      color: ${(props) => props.theme.colors.text.red};
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: ${(props) => props.theme.text};
+    }
+  }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
new file mode 100644
index 0000000000..ac5b09d94f
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
@@ -0,0 +1,178 @@
+import React from 'react';
+import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { updateResponseExampleFormUrlEncodedParams } from 'providers/ReduxStore/slices/collections';
+import MultiLineEditor from 'components/MultiLineEditor';
+import StyledWrapper from './StyledWrapper';
+import ReorderTable from 'components/ReorderTable/index';
+import Table from 'components/Table-v2';
+import Checkbox from 'components/Checkbox';
+
+const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, editMode = false }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  // Get form data from the specific example
+  const params = item.draft
+    ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.formUrlEncoded || []
+    : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.formUrlEncoded || [];
+
+  const addParam = () => {
+    const newParam = {
+      name: '',
+      value: '',
+      enabled: true
+    };
+
+    const updatedParams = [...params, newParam];
+
+    dispatch(updateResponseExampleFormUrlEncodedParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamChange = (e, _param, type) => {
+    if (!editMode) return;
+
+    const param = cloneDeep(_param);
+    switch (type) {
+      case 'name': {
+        param.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        param.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        param.enabled = e.target.checked;
+        break;
+      }
+    }
+
+    const updatedParams = params.map((p) => p.uid === param.uid ? param : p);
+
+    dispatch(updateResponseExampleFormUrlEncodedParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleRemoveParams = (param) => {
+    const updatedParams = params.filter((p) => p.uid !== param.uid);
+
+    dispatch(updateResponseExampleFormUrlEncodedParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamDrag = ({ updateReorderedItem }) => {
+    const updatedParams = updateReorderedItem(params);
+
+    dispatch(updateResponseExampleFormUrlEncodedParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  if (params.length === 0 && !editMode) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="w-full mt-4">
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '60%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleParamDrag}>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid} data-uid={param.uid}>
+                    <td className="flex relative">
+                      <div className="flex items-center justify-center mr-3">
+                        <Checkbox
+                          checked={param.enabled === true}
+                          disabled={!editMode}
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
+                      </div>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={param.name}
+                        className="mousetrap"
+                        onChange={editMode ? (e) => handleParamChange(e, param, 'name') : () => {}}
+                        disabled={!editMode}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <MultiLineEditor
+                          value={param.value}
+                          theme={storedTheme}
+                          onSave={() => {}}
+                          onChange={editMode ? (newValue) =>
+                            handleParamChange({
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value') : () => {}}
+                          allowNewlines={true}
+                          onRun={() => {}}
+                          collection={collection}
+                          item={item}
+                        />
+                        <button
+                          tabIndex="-1"
+                          onClick={() => handleRemoveParams(param)}
+                          className={`delete-button ${editMode ? 'edit-mode' : ''}`}
+                          disabled={!editMode}
+                        >
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={addParam}
+          >
+            + Add Param
+          </button>
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleFormUrlEncodedParams;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/StyledWrapper.js
new file mode 100644
index 0000000000..e56183dab9
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/StyledWrapper.js
@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .title {
+    color: ${(props) => props.theme.text};
+  }
+  
+  .btn-action {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    transition: opacity 0.2s ease;
+    color: ${(props) => props.theme.colors.text.muted};
+    
+    &:hover {
+      opacity: 0.8;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  
+  tr {
+    position: relative;
+    
+    &:hover .delete-button {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .delete-button {
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-left: 8px;
+    
+    &:hover {
+      color: ${(props) => props.theme.colors.text.red};
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: ${(props) => props.theme.text};
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
new file mode 100644
index 0000000000..a05fc2e4bf
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
@@ -0,0 +1,206 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { IconTrash } from '@tabler/icons';
+import get from 'lodash/get';
+import { addResponseExampleRequestHeader, updateResponseExampleRequestHeader, deleteResponseExampleRequestHeader, moveResponseExampleRequestHeader, setResponseExampleRequestHeaders } from 'providers/ReduxStore/slices/collections';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable';
+import SingleLineEditor from 'components/SingleLineEditor';
+import BulkEditor from 'components/BulkEditor';
+import Checkbox from 'components/Checkbox';
+import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
+import StyledWrapper from './StyledWrapper';
+
+const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
+
+const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+  // Get headers from item draft, similar to how RequestHeaders works
+  const headers = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.headers || [] : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.headers || [];
+
+  const handleAddHeader = () => {
+    if (editMode) {
+      dispatch(addResponseExampleRequestHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid
+      }));
+    }
+  };
+
+  const handleHeaderValueChange = (e, header, type) => {
+    if (editMode) {
+      const updatedHeader = { ...header };
+      switch (type) {
+        case 'name': {
+          updatedHeader.name = e.target.value;
+          break;
+        }
+        case 'value': {
+          updatedHeader.value = e.target.value;
+          break;
+        }
+        case 'enabled': {
+          updatedHeader.enabled = e.target.checked;
+          break;
+        }
+      }
+
+      dispatch(updateResponseExampleRequestHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        header: updatedHeader
+      }));
+    }
+  };
+
+  const handleRemoveHeader = (header) => {
+    if (editMode) {
+      dispatch(deleteResponseExampleRequestHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        headerUid: header.uid
+      }));
+    }
+  };
+
+  const handleHeaderDrag = ({ updateReorderedItem }) => {
+    if (editMode) {
+      dispatch(moveResponseExampleRequestHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        updateReorderedItem
+      }));
+    }
+  };
+
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkHeadersChange = (newHeaders) => {
+    if (editMode) {
+      dispatch(setResponseExampleRequestHeaders({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        headers: newHeaders
+      }));
+    }
+  };
+
+  if (isBulkEditMode && editMode) {
+    return (
+      <StyledWrapper className="w-full mt-3">
+        <BulkEditor
+          params={headers}
+          onChange={handleBulkHeadersChange}
+          onToggle={toggleBulkEditMode}
+        />
+      </StyledWrapper>
+    );
+  }
+
+  if (headers.length === 0 && !editMode) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="w-full mt-4">
+      <div className="mb-1 title text-xs font-bold">Headers</div>
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '60%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleHeaderDrag}>
+          {headers && headers.length
+            ? headers.map((header) => (
+                <tr key={header.uid} data-uid={header.uid}>
+                  <td className="flex relative">
+                    <div className="flex items-center justify-center mr-3">
+                      <Checkbox
+                        checked={header.enabled === true}
+                        disabled={!editMode}
+                        onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                      />
+                    </div>
+                    <SingleLineEditor
+                      value={header.name || ''}
+                      theme={storedTheme}
+                      onSave={() => {}}
+                      onChange={(newValue) =>
+                        handleHeaderValueChange({
+                          target: {
+                            value: newValue
+                          }
+                        },
+                        header,
+                        'name')}
+                      autocomplete={headerAutoCompleteList}
+                      onRun={() => {}}
+                      collection={collection}
+                    />
+                  </td>
+                  <td>
+                    <div className="flex items-center justify-center pl-4">
+                      <SingleLineEditor
+                        value={header.value || ''}
+                        theme={storedTheme}
+                        onSave={() => {}}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange({
+                            target: {
+                              value: newValue
+                            }
+                          },
+                          header,
+                          'value')}
+                        onRun={() => {}}
+                        autocomplete={MimeTypes}
+                        allowNewlines={true}
+                        collection={collection}
+                        item={item}
+                      />
+                      {editMode && (
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)} className="delete-button">
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={handleAddHeader}
+          >
+            + Add Header
+          </button>
+          <button
+            className="btn-action text-link select-none"
+            onClick={toggleBulkEditMode}
+          >
+            Bulk Edit
+          </button>
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleHeaders;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js
new file mode 100644
index 0000000000..23becdb27d
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js
@@ -0,0 +1,100 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+      }
+    }
+
+  .btn-add-param {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    color: ${(props) => props.theme.table.input.color};
+    background: transparent;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+
+  .btn-secondary {
+    &.edit-mode {
+      background-color: ${(props) => props.theme.colors.text.yellow}20;
+      border-color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
+    &.view-mode {
+      background-color: transparent;
+      border-color: ${(props) => props.theme.colors.text.muted};
+      color: ${(props) => props.theme.colors.text.muted};
+      cursor: default;
+    }
+  }
+
+  tr {
+    position: relative;
+    
+    &:hover .delete-button.edit-mode {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .delete-button {
+    opacity: 0;
+    visibility: hidden;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-left: 8px;
+    
+    &:hover {
+      color: ${(props) => props.theme.colors.text.red};
+    }
+
+    &:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: ${(props) => props.theme.text};
+    }
+  }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
new file mode 100644
index 0000000000..0d8b413eaf
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
@@ -0,0 +1,262 @@
+import React from 'react';
+import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { updateResponseExampleMultipartFormParams } from 'providers/ReduxStore/slices/collections';
+import mime from 'mime-types';
+import path from 'utils/common/path';
+import MultiLineEditor from 'components/MultiLineEditor';
+import StyledWrapper from './StyledWrapper';
+import FilePickerEditor from 'components/FilePickerEditor';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable/index';
+import Checkbox from 'components/Checkbox';
+
+const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, editMode = false }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  // Get multipart form data from the specific example
+  const params = item.draft
+    ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.multipartForm || []
+    : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.multipartForm || [];
+
+  const addParam = () => {
+    const newParam = {
+      name: '',
+      value: '',
+      contentType: '',
+      enabled: true,
+      type: 'text'
+    };
+
+    const updatedParams = [...params, newParam];
+
+    dispatch(updateResponseExampleMultipartFormParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const addFile = () => {
+    const newParam = {
+      name: '',
+      value: [],
+      contentType: '',
+      enabled: true,
+      type: 'file'
+    };
+
+    const updatedParams = [...params, newParam];
+
+    dispatch(updateResponseExampleMultipartFormParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamChange = (e, _param, type) => {
+    if (!editMode) return;
+
+    const param = cloneDeep(_param);
+    switch (type) {
+      case 'name': {
+        param.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        param.value = e.target.value;
+        // Auto-detect content type for file types using mime library (same as updateFile)
+        if (param.type === 'file' && e.target.value) {
+          const contentType = mime.contentType(path.extname(e.target.value));
+          param.contentType = contentType || '';
+        }
+        break;
+      }
+      case 'contentType': {
+        param.contentType = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        param.enabled = e.target.checked;
+        break;
+      }
+    }
+
+    const updatedParams = params.map((p) => p.uid === param.uid ? param : p);
+
+    dispatch(updateResponseExampleMultipartFormParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleRemoveParams = (param) => {
+    if (!editMode) return;
+
+    const updatedParams = params.filter((p) => p.uid !== param.uid);
+
+    dispatch(updateResponseExampleMultipartFormParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: updatedParams
+    }));
+  };
+
+  const handleParamDrag = ({ updateReorderedItem }) => {
+    if (!editMode) return;
+
+    const reorderedParams = updateReorderedItem.map((uid) => {
+      return params.find((p) => p.uid === uid);
+    });
+
+    dispatch(updateResponseExampleMultipartFormParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: reorderedParams
+    }));
+  };
+
+  if (params.length === 0 && !editMode) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="w-full mt-4">
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '30%' },
+          { name: 'Value', accessor: 'value', width: '40%' },
+          { name: 'Content-Type', accessor: 'content-type', width: '30%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleParamDrag}>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid} className="w-full" data-uid={param.uid}>
+                    <td className="flex relative">
+                      <div className="flex items-center justify-center mr-3">
+                        <Checkbox
+                          checked={param.enabled === true}
+                          disabled={!editMode}
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
+                      </div>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={param.name}
+                        className="mousetrap"
+                        onChange={editMode ? (e) => handleParamChange(e, param, 'name') : () => {}}
+                        disabled={!editMode}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        {param.type === 'file' ? (
+                          <FilePickerEditor
+                            value={param.value}
+                            onChange={editMode ? (newValue) =>
+                              handleParamChange({
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value') : () => {}}
+                            collection={collection}
+                            editMode={editMode}
+                          />
+                        ) : (
+                          <MultiLineEditor
+                            onSave={() => {}}
+                            theme={storedTheme}
+                            value={param.value}
+                            onChange={editMode ? (newValue) =>
+                              handleParamChange({
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value') : () => {}}
+                            onRun={() => {}}
+                            allowNewlines={true}
+                            collection={collection}
+                            item={item}
+                            readOnly={!editMode}
+                          />
+                        )}
+                      </div>
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <MultiLineEditor
+                          onSave={() => {}}
+                          theme={storedTheme}
+                          placeholder="Auto"
+                          value={param.contentType}
+                          onChange={editMode ? (newValue) =>
+                            handleParamChange({
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'contentType') : () => {}}
+                          onRun={() => {}}
+                          collection={collection}
+                          readOnly={!editMode}
+                        />
+                        <button
+                          tabIndex="-1"
+                          onClick={() => handleRemoveParams(param)}
+                          className={`delete-button ${editMode ? 'edit-mode' : ''}`}
+                          disabled={!editMode}
+                        >
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={addParam}
+          >
+            + Add Param
+          </button>
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={addFile}
+          >
+            + Add File
+          </button>
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleMultipartFormParams;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js
new file mode 100644
index 0000000000..67f57387eb
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/StyledWrapper.js
@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .title {
+    font-weight: 700;
+    color: ${(props) => props.theme.text};
+  }
+  
+  .btn-action {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    transition: opacity 0.2s ease;
+    color: ${(props) => props.theme.colors.text.muted};
+    
+    &:hover {
+      opacity: 0.8;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    
+    thead {
+      td {
+        font-weight: 600;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        padding: 8px 0;
+        border-bottom: 1px solid ${(props) => props.theme.table.border};
+      }
+    }
+    
+    tbody {
+      tr {
+        border-bottom: 1px solid ${(props) => props.theme.table.border};
+        
+        &:hover {
+          background: ${(props) => props.theme.plainGrid.hoverBg};
+        }
+      }
+    }
+  }
+  
+
+  tr {
+    position: relative;
+    
+    &:hover .delete-button {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .delete-button {
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-left: 8px;
+    
+    &:hover {
+      color: ${(props) => props.theme.colors.text.red};
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: ${(props) => props.theme.text};
+    }
+  }
+  
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
new file mode 100644
index 0000000000..d9ce7284b2
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { IconTrash } from '@tabler/icons';
+import { useTheme } from 'providers/Theme';
+import get from 'lodash/get';
+import { addResponseExampleParam, updateResponseExampleParam, deleteResponseExampleParam, moveResponseExampleParam, setResponseExampleParams } from 'providers/ReduxStore/slices/collections';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable';
+import SingleLineEditor from 'components/SingleLineEditor';
+import BulkEditor from 'components/BulkEditor';
+import Checkbox from 'components/Checkbox';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+
+  // Get params from item draft, similar to how RequestHeaders works
+  const params = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.params || [] : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.params || [];
+
+  const queryParams = params.filter((param) => param.type === 'query');
+  const pathParams = params.filter((param) => param.type === 'path');
+
+  const handleAddQueryParam = () => {
+    if (editMode) {
+      dispatch(addResponseExampleParam({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid
+      }));
+    }
+  };
+
+  const handleQueryParamChange = (e, data, key) => {
+    if (editMode) {
+      const updatedParam = { ...data };
+      switch (key) {
+        case 'name': {
+          updatedParam.name = e.target.value;
+          break;
+        }
+        case 'value': {
+          updatedParam.value = e.target.value;
+          break;
+        }
+        case 'enabled': {
+          updatedParam.enabled = e.target.checked;
+          break;
+        }
+      }
+
+      dispatch(updateResponseExampleParam({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        param: updatedParam
+      }));
+    }
+  };
+
+  const handleRemoveQueryParam = (param) => {
+    if (editMode) {
+      dispatch(deleteResponseExampleParam({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        paramUid: param.uid
+      }));
+    }
+  };
+
+  const handleQueryParamDrag = ({ updateReorderedItem }) => {
+    if (editMode) {
+      dispatch(moveResponseExampleParam({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        updateReorderedItem
+      }));
+    }
+  };
+
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkParamsChange = (newParams) => {
+    if (editMode) {
+      dispatch(setResponseExampleParams({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        params: newParams
+      }));
+    }
+  };
+
+  if (isBulkEditMode && editMode) {
+    return (
+      <StyledWrapper className="w-full mt-3">
+        <BulkEditor
+          params={queryParams}
+          onChange={handleBulkParamsChange}
+          onToggle={toggleBulkEditMode}
+        />
+      </StyledWrapper>
+    );
+  }
+
+  if (queryParams.length === 0 && !editMode) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="w-full mt-4">
+      <div className="flex-1 mt-2">
+        <div className="mb-1 title text-xs">Query parameters</div>
+        <Table
+          headers={[
+            { name: 'Name', accessor: 'name', width: '40%' },
+            { name: 'Value', accessor: 'value', width: '60%' }
+          ]}
+        >
+          <ReorderTable updateReorderedItem={handleQueryParamDrag}>
+            {queryParams && queryParams.length
+              ? queryParams.map((param) => (
+                  <tr key={param.uid} data-uid={param.uid}>
+                    <td className="flex relative">
+                      <div className="flex items-center justify-center mr-3">
+                        <Checkbox
+                          checked={param.enabled !== false}
+                          disabled={!editMode}
+                          onChange={editMode ? (e) => handleQueryParamChange(e, param, 'enabled') : () => {}}
+                        />
+                      </div>
+                      <SingleLineEditor
+                        value={param.name || ''}
+                        theme={storedTheme}
+                        onSave={() => {}}
+                        onChange={editMode ? (newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'name') : () => {}}
+                        onRun={() => {}}
+                        collection={collection}
+                        variablesAutocomplete={true}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center pl-4">
+                        <SingleLineEditor
+                          value={param.value || ''}
+                          theme={storedTheme}
+                          onSave={() => {}}
+                          onChange={editMode ? (newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'value') : () => {}}
+                          onRun={() => {}}
+                          collection={collection}
+                          variablesAutocomplete={true}
+                        />
+                        {editMode && (
+                          <button tabIndex="-1" onClick={() => handleRemoveQueryParam(param)} className="delete-button">
+                            <IconTrash strokeWidth={1.5} size={16} />
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              : null}
+          </ReorderTable>
+        </Table>
+
+        {editMode && (
+          <div className="flex justify-between mt-2">
+            <button
+              className="btn-action text-link pr-2 py-3 select-none"
+              onClick={handleAddQueryParam}
+            >
+              + Add Param
+            </button>
+            <button
+              className="btn-action text-link select-none"
+              onClick={toggleBulkEditMode}
+            >
+              Bulk Edit
+            </button>
+          </div>
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleParams;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/StyledWrapper.js
new file mode 100644
index 0000000000..ec06a1d0e7
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/StyledWrapper.js
@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .url-bar-container {
+    border: 1px solid ${(props) => props.theme.examples.urlBar.border};
+  }
+
+  .method {
+    color: #fff;
+  }
+
+  .method-get {
+    background-color: ${(props) => props.theme.request.methods.get};
+  }
+
+  .method-post {
+    background-color: ${(props) => props.theme.request.methods.post};
+  }
+
+  .method-put {
+    background-color: ${(props) => props.theme.request.methods.put};
+  }
+
+  .method-delete {
+    background-color: ${(props) => props.theme.request.methods.delete};
+  }
+
+  .method-patch {
+    background-color: ${(props) => props.theme.request.methods.patch};
+  }
+
+  .method-options {
+    background-color: ${(props) => props.theme.request.methods.options};
+  }
+
+  .method-head {
+    background-color: ${(props) => props.theme.request.methods.head};
+  }
+
+  .method-trace {
+    background-color: ${(props) => props.theme.request.methods.options};
+  }
+
+  .method-connect {
+    background-color: ${(props) => props.theme.request.methods.options};
+  }
+
+  .method-custom {
+    background-color: ${(props) => props.theme.colors.text.muted};
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
new file mode 100644
index 0000000000..2dfa6365d2
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { updateResponseExampleRequestUrl } from 'providers/ReduxStore/slices/collections';
+import SingleLineEditor from 'components/SingleLineEditor';
+import StyledWrapper from './StyledWrapper';
+import get from 'lodash/get';
+
+const ResponseExampleUrlBar = ({ item, collection, editMode, onSave, exampleUid }) => {
+  const dispatch = useDispatch();
+
+  // Get method and URL from the example, not the main request
+  const exampleData = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) : get(item, 'examples', []).find((e) => e.uid === exampleUid);
+  const method = get(exampleData, 'request.method');
+  const url = get(exampleData, 'request.url');
+
+  const onChange = (value) => {
+    dispatch(updateResponseExampleRequestUrl({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      request: { url: value }
+    }));
+  };
+
+  const getMethodClass = () => {
+    switch (method) {
+      case 'GET':
+        return 'method-get';
+      case 'POST':
+        return 'method-post';
+      case 'PUT':
+        return 'method-put';
+      case 'DELETE':
+        return 'method-delete';
+      case 'PATCH':
+        return 'method-patch';
+      case 'OPTIONS':
+        return 'method-options';
+      case 'HEAD':
+        return 'method-head';
+      case 'OPTIONS':
+        return 'method-options';
+      case 'HEAD':
+        return 'method-head';
+      default:
+        return 'method-get';
+    };
+  };
+
+  return (
+    <StyledWrapper className="flex items-center">
+      <div className="url-bar-container w-full flex p-2 text-xs rounded-md items-center justify-between" data-testid="url-bar-container">
+        <div className={`method flex text-xs items-center justify-center px-2 rounded h-6 flex-shrink-0 mr-2 overflow-hidden whitespace-nowrap font-semibold ${getMethodClass()}`}>
+          {method || 'GET'}
+        </div>
+
+        <div
+          id="response-example-url"
+          className="response-example-url flex items-center flex-1 h-6"
+        >
+          <SingleLineEditor
+            value={url}
+            onSave={onSave}
+            onChange={onChange}
+            collection={collection}
+            highlightPathParams={true}
+            item={item}
+            readOnly={!editMode}
+          />
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleUrlBar;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
new file mode 100644
index 0000000000..c6ebd7b5e2
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  font-size: 0.8125rem;
+
+  .body-mode-selector {
+    background: transparent;
+    border-radius: 3px;
+
+    .dropdown-item {
+      padding: 0.2rem 0.6rem !important;
+      padding-left: 1.5rem !important;
+    }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
+
+    .selected-body-mode {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/index.js
new file mode 100644
index 0000000000..e4cc2a0dc2
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/index.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import ResponseExampleUrlBar from './ResponseExampleUrlBar';
+import ResponseExampleParams from './ResponseExampleParams';
+import ResponseExampleHeaders from './ResponseExampleHeaders';
+import ResponseExampleBody from './ResponseExampleBody';
+import StyledWrapper from './StyledWrapper';
+import HeightBoundContainer from 'ui/HeightBoundContainer';
+
+const ResponseExampleRequestPane = ({ item, collection, editMode, exampleUid, onSave }) => {
+  return (
+    <HeightBoundContainer>
+      <StyledWrapper className="flex flex-col h-full w-full">
+        <ResponseExampleUrlBar
+          item={item}
+          collection={collection}
+          exampleUid={exampleUid}
+          editMode={editMode}
+          onSave={onSave}
+        />
+
+        <ResponseExampleParams
+          editMode={editMode}
+          item={item}
+          collection={collection}
+          exampleUid={exampleUid}
+        />
+
+        <ResponseExampleHeaders
+          editMode={editMode}
+          item={item}
+          collection={collection}
+          exampleUid={exampleUid}
+        />
+
+        <ResponseExampleBody
+          editMode={editMode}
+          item={item}
+          collection={collection}
+          exampleUid={exampleUid}
+          onSave={onSave}
+        />
+      </StyledWrapper>
+    </HeightBoundContainer>
+  );
+};
+
+export default ResponseExampleRequestPane;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/StyledWrapper.js
new file mode 100644
index 0000000000..50a92734ae
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/StyledWrapper.js
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  /* CodeEditor container */
+  .code-editor-container {
+    flex: 1;
+    min-height: 300px;
+    height: 300px;
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/index.js
new file mode 100644
index 0000000000..db058020ab
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/index.js
@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { useSelector } from 'react-redux';
+import get from 'lodash/get';
+import { updateResponseExampleResponse } from 'providers/ReduxStore/slices/collections';
+import CodeEditor from 'components/CodeEditor';
+import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
+import { safeStringifyJSON } from 'utils/common';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseExampleResponseContent = ({ editMode, item, collection, exampleUid, onSave }) => {
+  const dispatch = useDispatch();
+  const { theme, displayedTheme } = useTheme();
+  const preferences = useSelector((state) => state.app.preferences);
+
+  // Get response from item draft, similar to how RequestHeaders works
+  const response = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response || {};
+
+  const getResponseContent = () => {
+    if (typeof response.body === 'string') {
+      return response.body;
+    }
+    if (typeof response.body === 'object') {
+      return safeStringifyJSON(response.body, true);
+    }
+    return '';
+  };
+
+  const getCodeMirrorMode = () => {
+    // Try to detect content type from headers
+    const contentType = response.headers?.find((h) => h.name?.toLowerCase() === 'content-type')?.value?.toLowerCase() || '';
+
+    return getCodeMirrorModeBasedOnContentType(contentType);
+  };
+
+  const onResponseEdit = (value) => {
+    if (editMode && item && collection && exampleUid) {
+      dispatch(updateResponseExampleResponse({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        response: {
+          body: value
+        }
+      }));
+    }
+  };
+
+  return (
+    <StyledWrapper className="w-full px-4">
+      <div className="code-editor-container">
+        <CodeEditor
+          collection={collection}
+          item={item}
+          theme={displayedTheme}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          value={getResponseContent()}
+          onEdit={onResponseEdit}
+          onRun={() => {}}
+          onSave={onSave}
+          mode={getCodeMirrorMode()}
+          enableVariableHighlighting={false}
+          readOnly={!editMode}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleResponseContent;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/StyledWrapper.js
new file mode 100644
index 0000000000..f271a3a4a3
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/StyledWrapper.js
@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .btn-action {
+    background: none;
+    color: ${(props) => props.theme.colors.text.muted};
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    transition: opacity 0.2s ease;
+    
+    &:hover {
+      opacity: 0.8;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  
+  tr {
+    position: relative;
+    
+    &:hover .delete-button {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .delete-button {
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-left: 8px;
+    
+    &:hover {
+      color: ${(props) => props.theme.colors.text.red};
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: ${(props) => props.theme.text};
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
new file mode 100644
index 0000000000..e0dede0310
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { IconTrash } from '@tabler/icons';
+import get from 'lodash/get';
+import { addResponseExampleHeader, updateResponseExampleHeader, deleteResponseExampleHeader, moveResponseExampleHeader, setResponseExampleHeaders } from 'providers/ReduxStore/slices/collections';
+import Table from 'components/Table-v2';
+import ReorderTable from 'components/ReorderTable';
+import SingleLineEditor from 'components/SingleLineEditor';
+import BulkEditor from 'components/BulkEditor';
+import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
+import StyledWrapper from './StyledWrapper';
+
+const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
+
+const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid }) => {
+  const dispatch = useDispatch();
+  const { theme, storedTheme } = useTheme();
+  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
+
+  // Get headers from item draft, similar to how RequestHeaders works
+  const headers = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response?.headers || [] : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response?.headers || [];
+
+  const handleAddHeader = () => {
+    if (editMode) {
+      dispatch(addResponseExampleHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid
+      }));
+    }
+  };
+
+  const handleHeaderValueChange = (e, header, type) => {
+    if (editMode) {
+      const updatedHeader = { ...header };
+      switch (type) {
+        case 'name': {
+          updatedHeader.name = e.target.value;
+          break;
+        }
+        case 'value': {
+          updatedHeader.value = e.target.value;
+          break;
+        }
+      }
+
+      dispatch(updateResponseExampleHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        header: updatedHeader
+      }));
+    }
+  };
+
+  const handleRemoveHeader = (header) => {
+    if (editMode) {
+      dispatch(deleteResponseExampleHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        headerUid: header.uid
+      }));
+    }
+  };
+
+  const handleHeaderDrag = ({ updateReorderedItem }) => {
+    if (editMode) {
+      dispatch(moveResponseExampleHeader({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        updateReorderedItem
+      }));
+    }
+  };
+
+  const toggleBulkEditMode = () => {
+    setIsBulkEditMode(!isBulkEditMode);
+  };
+
+  const handleBulkHeadersChange = (newHeaders) => {
+    if (editMode) {
+      const cleanedHeaders = newHeaders.map((header) => ({
+        uid: header.uid,
+        name: header.name,
+        value: header.value
+      }));
+      dispatch(setResponseExampleHeaders({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: exampleUid,
+        headers: cleanedHeaders
+      }));
+    }
+  };
+
+  if (isBulkEditMode && editMode) {
+    // Ensure all headers have enabled: true for bulk edit display
+    const headersForBulkEdit = headers.map((header) => ({
+      ...header,
+      enabled: true
+    }));
+    return (
+      <StyledWrapper className="w-full overflow-auto">
+        <BulkEditor
+          params={headersForBulkEdit}
+          onChange={handleBulkHeadersChange}
+          onToggle={toggleBulkEditMode}
+        />
+      </StyledWrapper>
+    );
+  }
+
+  return (
+    <StyledWrapper className="w-full px-4">
+      <Table
+        headers={[
+          { name: 'Key', accessor: 'key', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '60%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleHeaderDrag}>
+          {headers && headers.length
+            ? headers.map((header) => (
+                <tr key={header.uid} data-uid={header.uid}>
+                  <td className="flex relative">
+                    <SingleLineEditor
+                      value={header.name || ''}
+                      theme={storedTheme}
+                      onSave={() => {}}
+                      onChange={editMode ? (newValue) =>
+                        handleHeaderValueChange({
+                          target: {
+                            value: newValue
+                          }
+                        },
+                        header,
+                        'name') : () => {}}
+                      autocomplete={headerAutoCompleteList}
+                      onRun={() => {}}
+                      collection={collection}
+                    />
+                  </td>
+                  <td>
+                    <div className="flex items-center justify-center pl-4">
+                      <SingleLineEditor
+                        value={header.value || ''}
+                        theme={storedTheme}
+                        onSave={() => {}}
+                        onChange={editMode ? (newValue) =>
+                          handleHeaderValueChange({
+                            target: {
+                              value: newValue
+                            }
+                          },
+                          header,
+                          'value') : () => {}}
+                        onRun={() => {}}
+                        autocomplete={MimeTypes}
+                        allowNewlines={true}
+                        collection={collection}
+                        item={item}
+                      />
+                      {editMode && (
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)} className="delete-button">
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2 flex-shrink-0">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={handleAddHeader}
+          >
+            + Add Header
+          </button>
+          <button
+            className="btn-action text-link select-none"
+            onClick={toggleBulkEditMode}
+          >
+            Bulk Edit
+          </button>
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleResponseHeaders;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
new file mode 100644
index 0000000000..549d47ae57
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.tabs {
+    div.tab {
+      padding: 6px 0px;
+      border: none;
+      border-bottom: solid 2px transparent;
+      margin-right: 1.25rem;
+      color: var(--color-tab-inactive);
+      cursor: pointer;
+
+      &:focus,
+      &:active,
+      &:focus-within,
+      &:focus-visible,
+      &:target {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      &.active {
+        color: ${(props) => props.theme.tabs.active.color} !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+      }
+    }
+  }
+
+  .some-tests-failed {
+    color: ${(props) => props.theme.colors.text.danger} !important;
+  }
+
+  .all-tests-passed {
+    color: ${(props) => props.theme.colors.text.green} !important;
+  }
+
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js
new file mode 100644
index 0000000000..18b46f2902
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { useTheme } from 'providers/Theme';
+import get from 'lodash/get';
+import Tab from 'components/Tab';
+import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
+import StatusCode from 'components/ResponsePane/StatusCode';
+import ResponseExampleResponseContent from './ResponseExampleResponseContent';
+import ResponseExampleResponseHeaders from './ResponseExampleResponseHeaders';
+import StyledWrapper from './StyledWrapper';
+import HeightBoundContainer from 'ui/HeightBoundContainer';
+
+const ResponseExampleResponsePane = ({ item, collection, editMode, exampleUid, onSave }) => {
+  const [activeTab, setActiveTab] = useState('response');
+
+  // Get example data from item draft, similar to how RequestHeaders works
+  const exampleData = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid) || {};
+
+  const getTabPanel = (tab) => {
+    switch (tab) {
+      case 'response': {
+        return (
+          <ResponseExampleResponseContent
+            editMode={editMode}
+            item={item}
+            collection={collection}
+            exampleUid={exampleUid}
+            onSave={onSave}
+          />
+        );
+      }
+      case 'headers': {
+        return (
+          <ResponseExampleResponseHeaders
+            editMode={editMode}
+            item={item}
+            collection={collection}
+            exampleUid={exampleUid}
+            onSave={onSave}
+          />
+        );
+      }
+      default: {
+        return <div>404 | Not found</div>;
+      }
+    }
+  };
+
+  const tabConfig = [
+    {
+      name: 'response',
+      label: 'Response'
+    },
+    {
+      name: 'headers',
+      label: 'Headers',
+      count: (exampleData?.response?.headers || []).length
+    }
+  ];
+
+  return (
+    <StyledWrapper className="flex flex-col h-full relative">
+      <div className="flex flex-wrap items-center tabs mb-4 px-4" role="tablist">
+        {tabConfig.map((tab) => (
+          <Tab
+            key={tab.name}
+            name={tab.name}
+            label={tab.label}
+            isActive={activeTab === tab.name}
+            onClick={setActiveTab}
+            count={tab.count}
+          />
+        ))}
+
+        <div className="flex flex-grow justify-end items-center">
+          <ResponseLayoutToggle />
+          {exampleData?.response?.status && (
+            <StatusCode status={exampleData.response.status} />
+          )}
+        </div>
+      </div>
+
+      <section className="flex w-full mt-3 flex-1 relative">
+        <HeightBoundContainer>
+          {getTabPanel(activeTab)}
+        </HeightBoundContainer>
+      </section>
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleResponsePane;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
new file mode 100644
index 0000000000..a01f2a8f19
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  background-color: ${(props) => props.theme.bg};
+  border-bottom: 1px solid ${(props) => props.theme.examples.border};
+
+  .response-example-title {
+    color: ${(props) => props.theme.text};
+  }
+
+  .response-example-description {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .primary-btn {
+    background-color: ${(props) => props.theme.examples.buttonColor};
+    border: 1px solid ${(props) => props.theme.examples.buttonColor};
+    color: white;
+
+    svg {
+      color: ${(props) => props.theme.text} !important;
+    }
+  }
+
+  .secondary-btn {
+    background-color: transparent;
+    color: ${(props) => props.theme.text};
+    border: 1px solid ${(props) => props.theme.examples.border};
+
+    svg {
+      color: ${(props) => props.theme.text};
+    }
+  }
+
+  .example-input-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: ${(props) => props.theme.text};
+    margin-bottom: 4px;
+  }
+
+  .example-input {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid ${(props) => props.theme.examples.border};
+    border-radius: 6px;
+    background-color: transparent;
+    color: ${(props) => props.theme.text};
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    transition: all 0.2s ease;
+    outline: none;
+    box-shadow: none;
+
+    &::placeholder {
+      color: ${(props) => props.theme.input.placeholder.color};
+      opacity: ${(props) => props.theme.input.placeholder.opacity};
+    }
+
+    &:focus {
+      border-color: ${(props) => props.theme.input.focusBorder};
+      outline: none;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      background-color: transparent;
+      color: ${(props) => props.theme.text};
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  .example-input-name {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.2;
+
+    @media (min-width: 768px) {
+      font-size: 24px;
+    }
+  }
+
+  .example-input-description {
+    font-size: 14px;
+    line-height: 1.6;
+    resize: none;
+    min-height: 80px;
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
new file mode 100644
index 0000000000..2c67183213
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
@@ -0,0 +1,200 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { IconEdit } from 'components/Icons/examples';
+import { IconCode, IconDeviceFloppy } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+import { useTheme } from 'providers/Theme';
+import TruncatedText from 'components/TruncatedText';
+import { findItemInCollection } from 'utils/collections/index';
+import { updateResponseExampleName, updateResponseExampleDescription } from 'providers/ReduxStore/slices/collections';
+import get from 'lodash/get';
+
+const ResponseExampleTopBar = ({
+  item,
+  collection,
+  exampleUid,
+  editMode,
+  onEditToggle,
+  onSave,
+  onCancel,
+  onGenerateCode
+}) => {
+  const { theme } = useTheme();
+  const dispatch = useDispatch();
+  const example = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) : get(item, 'examples', []).find((e) => e.uid === exampleUid);
+
+  const handleGenerateCode = () => {
+    if (onGenerateCode) {
+      onGenerateCode({
+        ...example,
+        isExample: true,
+        exampleUid: exampleUid
+      });
+    }
+  };
+
+  const handleNameChange = (e) => {
+    // Validate required fields before dispatching
+    if (!item?.uid) {
+      console.error('item.uid is missing');
+      return;
+    }
+    if (!collection?.uid) {
+      console.error('collection.uid is missing');
+      return;
+    }
+    if (!exampleUid) {
+      console.error('exampleUid is missing');
+      return;
+    }
+
+    dispatch(updateResponseExampleName({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      name: e.target.value
+    }));
+  };
+
+  const handleDescriptionChange = (e) => {
+    // Validate required fields before dispatching
+    if (!item?.uid) {
+      console.error('item.uid is missing');
+      return;
+    }
+    if (!collection?.uid) {
+      console.error('collection.uid is missing');
+      return;
+    }
+    if (!exampleUid) {
+      console.error('exampleUid is missing');
+      return;
+    }
+
+    dispatch(updateResponseExampleDescription({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      description: e.target.value
+    }));
+  };
+
+  const handleSave = () => {
+    // Call the parent save handler
+    if (onSave) {
+      onSave();
+    }
+  };
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+  };
+
+  if (!example || !exampleUid) {
+    return null;
+  }
+
+  if (editMode) {
+    return (
+      <StyledWrapper className="p-4">
+        <div className="max-w-full">
+          <div className="flex items-start justify-between gap-6 md:flex-row flex-col">
+            <div className="flex-1 min-w-0">
+              <div className="space-y-3">
+                <div>
+                  <input
+                    type="text"
+                    value={example?.name || ''}
+                    onChange={handleNameChange}
+                    className="example-input example-input-name"
+                    placeholder="Enter example name"
+                    autoFocus
+                    data-testid="response-example-name-input"
+                  />
+                </div>
+                <div>
+                  <textarea
+                    value={example?.description || ''}
+                    onChange={handleDescriptionChange}
+                    className="example-input example-input-description"
+                    placeholder="Enter example description"
+                    rows={3}
+                    data-testid="response-example-description-input"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3 flex-shrink-0 md:w-auto w-full md:justify-end">
+              <button
+                className="secondary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-sm font-medium cursor-pointer border whitespace-nowrap"
+                onClick={handleCancel}
+                data-testid="response-example-cancel-btn"
+              >
+                Cancel
+              </button>
+              <button
+                className="primary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-sm font-medium cursor-pointer border whitespace-nowrap"
+                onClick={handleSave}
+                data-testid="response-example-save-btn"
+              >
+                <IconDeviceFloppy size={16} color={theme.examples.buttonText} />
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      </StyledWrapper>
+    );
+  }
+
+  // Default view mode
+  return (
+    <StyledWrapper className="p-4">
+      <div className="max-w-full">
+        <div className="flex items-start justify-between gap-6 md:flex-row flex-col">
+          <div className="flex-1 min-w-0">
+            <h2 className="response-example-title text-xl font-bold mb-2 leading-tight md:text-2xl" data-testid="response-example-title">
+              {example.name}
+            </h2>
+            {example.description && example.description.trim().length > 0 && (
+              <TruncatedText
+                text={example.description}
+                maxLines={2}
+                className="response-example-description-container"
+                textClassName="response-example-description text-sm leading-relaxed max-w-fit"
+                buttonClassName="text-blue-600 hover:text-blue-800 font-medium"
+                viewMoreText="View More"
+                viewLessText="View Less"
+                data-testid="response-example-description"
+              />
+            )}
+          </div>
+
+          <div className="flex items-center gap-3 flex-shrink-0 md:w-auto w-full md:justify-end">
+            <button
+              className="secondary-btn flex items-center gap-1.5 p-2 rounded-md text-sm font-medium cursor-pointer border whitespace-nowrap"
+              onClick={handleGenerateCode}
+              title="Generate Code"
+              data-testid="response-example-generate-code-btn"
+            >
+              <IconCode size={16} color={theme.examples.buttonIconColor} />
+            </button>
+            <button
+              className="secondary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-sm font-medium cursor-pointer border whitespace-nowrap"
+              onClick={onEditToggle}
+              data-testid="response-example-edit-btn"
+            >
+              <IconEdit size={16} color={theme.examples.buttonIconColor} />
+              Edit Example
+            </button>
+          </div>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleTopBar;
diff --git a/packages/bruno-app/src/components/ResponseExample/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/StyledWrapper.js
new file mode 100644
index 0000000000..9e72cb4df7
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/StyledWrapper.js
@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  &.dragging {
+    cursor: col-resize;
+
+    &.vertical-layout {
+      cursor: row-resize;
+    }
+  }
+
+  div.dragbar-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 10px;
+    min-width: 10px;
+    padding: 0;
+    cursor: col-resize;
+    background: transparent;
+    position: relative;
+
+    div.dragbar-handle {
+      display: flex;
+      height: 100%;
+      width: 1px;
+      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
+    }
+
+    &:hover div.dragbar-handle {
+      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
+    }
+  }
+
+  &.vertical-layout {
+    .request-pane {
+      padding-bottom: 0.5rem;
+    }
+
+    .response-pane {
+      padding-top: 0.5rem;
+    }
+
+    div.dragbar-wrapper {
+      width: 100%;
+      height: 10px;
+      cursor: row-resize;
+      padding: 0 1rem;
+      position: relative;
+
+      div.dragbar-handle {
+        width: 100%;
+        height: 1px;
+        border-left: none;
+        border-top: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
+      }
+
+      &:hover div.dragbar-handle {
+        border-left: none;
+        border-top: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
+      }
+    }
+  }
+
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/index.js b/packages/bruno-app/src/components/ResponseExample/index.js
new file mode 100644
index 0000000000..05d365d68d
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/index.js
@@ -0,0 +1,208 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { cancelResponseExampleEdit } from 'providers/ReduxStore/slices/collections';
+import ResponseExampleTopBar from './ResponseExampleTopBar';
+import ResponseExampleRequestPane from './ResponseExampleRequestPane';
+import ResponseExampleResponsePane from './ResponseExampleResponsePane';
+import GenerateCodeItem from 'components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem';
+import StyledWrapper from './StyledWrapper';
+
+const MIN_LEFT_PANE_WIDTH = 300;
+const MIN_RIGHT_PANE_WIDTH = 350;
+const MIN_TOP_PANE_HEIGHT = 150;
+const MIN_BOTTOM_PANE_HEIGHT = 150;
+
+const ResponseExample = ({ item, collection, example }) => {
+  const dispatch = useDispatch();
+  const preferences = useSelector((state) => state.app.preferences);
+  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
+
+  const [leftPaneWidth, setLeftPaneWidth] = useState(400);
+  const [topPaneHeight, setTopPaneHeight] = useState(MIN_TOP_PANE_HEIGHT);
+  const [dragging, setDragging] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [showGenerateCodeModal, setShowGenerateCodeModal] = useState(false);
+  const dragOffset = useRef({ x: 0, y: 0 });
+  const mainSectionRef = useRef(null);
+
+  const handleMouseMove = (e) => {
+    if (dragging && mainSectionRef.current) {
+      e.preventDefault();
+      const mainRect = mainSectionRef.current.getBoundingClientRect();
+
+      if (isVerticalLayout) {
+        const newHeight = e.clientY - mainRect.top - dragOffset.current.y;
+        if (newHeight < MIN_TOP_PANE_HEIGHT || newHeight > mainRect.height - MIN_BOTTOM_PANE_HEIGHT) {
+          return;
+        }
+        setTopPaneHeight(newHeight);
+      } else {
+        const newWidth = e.clientX - mainRect.left - dragOffset.current.x;
+        if (newWidth < MIN_LEFT_PANE_WIDTH || newWidth > mainRect.width - MIN_RIGHT_PANE_WIDTH) {
+          return;
+        }
+        setLeftPaneWidth(newWidth);
+      }
+    }
+  };
+
+  const handleMouseUp = (e) => {
+    if (dragging && mainSectionRef.current) {
+      e.preventDefault();
+      setDragging(false);
+      if (!isVerticalLayout) {
+        const mainRect = mainSectionRef.current.getBoundingClientRect();
+        dispatch(updateRequestPaneTabWidth({
+          uid: item.uid,
+          requestPaneWidth: e.clientX - mainRect.left
+        }));
+      }
+    }
+  };
+
+  const handleDragbarMouseDown = (e) => {
+    e.preventDefault();
+    setDragging(true);
+
+    if (isVerticalLayout) {
+      const dragBar = e.currentTarget;
+      const dragBarRect = dragBar.getBoundingClientRect();
+      dragOffset.current.y = e.clientY - dragBarRect.top;
+    } else {
+      const dragBar = e.currentTarget;
+      const dragBarRect = dragBar.getBoundingClientRect();
+      dragOffset.current.x = e.clientX - dragBarRect.left;
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [dragging]);
+
+  const handleEditToggle = () => {
+    setEditMode(!editMode);
+  };
+
+  const handleSave = () => {
+    if (item && collection) {
+      dispatch(saveRequest(item.uid, collection.uid));
+      setEditMode(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (item && collection && example?.uid) {
+      dispatch(cancelResponseExampleEdit({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        exampleUid: example.uid
+      }));
+    }
+    setEditMode(false);
+  };
+
+  const handleGenerateCode = (exampleData) => {
+    setShowGenerateCodeModal(true);
+  };
+
+  const handleCloseGenerateCodeModal = () => {
+    setShowGenerateCodeModal(false);
+  };
+
+  const handleTryExample = (example) => {
+    // TODO: Implement try example functionality
+  };
+
+  // Keyboard shortcut support for Ctrl/Cmd+S
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        if (editMode && item && collection) {
+          handleSave();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [editMode, item, collection]);
+
+  return (
+    <>
+      <StyledWrapper className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''} ${isVerticalLayout ? 'vertical-layout' : ''}`}>
+        <ResponseExampleTopBar
+          item={item}
+          collection={collection}
+          exampleUid={example.uid}
+          editMode={editMode}
+          onEditToggle={handleEditToggle}
+          onSave={handleSave}
+          onCancel={handleCancel}
+          onGenerateCode={handleGenerateCode}
+          onTryExample={handleTryExample}
+        />
+        <section ref={mainSectionRef} className={`main wrapper flex mt-4 ${isVerticalLayout ? 'flex-col' : ''} flex-grow pb-4 relative overflow-auto scrollbar-hover`}>
+          <section className="request-pane">
+            <div
+              className="px-4 h-full"
+              style={isVerticalLayout ? {
+                height: `${Math.max(topPaneHeight, MIN_TOP_PANE_HEIGHT)}px`,
+                minHeight: `${MIN_TOP_PANE_HEIGHT}px`,
+                width: '100%'
+              } : {
+                width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`
+              }}
+            >
+              <ResponseExampleRequestPane
+                item={item}
+                collection={collection}
+                example={example}
+                editMode={editMode}
+                exampleUid={example?.uid}
+                onSave={handleSave}
+              />
+            </div>
+          </section>
+
+          <div className="dragbar-wrapper" onMouseDown={handleDragbarMouseDown}>
+            <div className="dragbar-handle" />
+          </div>
+
+          <section className="response-pane flex-grow overflow-x-auto">
+            <ResponseExampleResponsePane
+              item={item}
+              collection={collection}
+              example={example}
+              editMode={editMode}
+              exampleUid={example?.uid}
+              onSave={handleSave}
+            />
+          </section>
+        </section>
+      </StyledWrapper>
+
+      {showGenerateCodeModal && (
+        <GenerateCodeItem
+          collectionUid={collection.uid}
+          item={item}
+          onClose={handleCloseGenerateCodeModal}
+          isExample={true}
+          exampleUid={example.uid}
+        />
+      )}
+    </>
+  );
+};
+
+export default ResponseExample;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.js
new file mode 100644
index 0000000000..f5c6b0b1d1
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/StyledWrapper.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
new file mode 100644
index 0000000000..9b7953099f
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { IconBookmark } from '@tabler/icons';
+import { addResponseExample } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import toast from 'react-hot-toast';
+import CreateExampleModal from 'components/ResponseExample/CreateExampleModal';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseBookmark = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const [showNameModal, setShowNameModal] = useState(false);
+  const response = item.response || {};
+
+  // Only show for HTTP requests
+  if (item.type !== 'http-request') {
+    return null;
+  }
+
+  const handleSaveClick = () => {
+    if (!response || response.error) {
+      toast.error('No valid response to save as example');
+      return;
+    }
+    setShowNameModal(true);
+  };
+
+  const saveAsExample = (name, description = '') => {
+    // Convert headers object to array format expected by schema
+    const headersArray = response.headers && typeof response.headers === 'object'
+      ? Object.entries(response.headers).map(([name, value]) => ({
+          name,
+          value,
+          enabled: true
+        }))
+      : [];
+
+    // Only pass response-related data - the reducer will automatically capture current request state
+    const exampleData = {
+      name: name,
+      status: response.status || 200,
+      headers: headersArray,
+      body: response.data || response.dataBuffer || '',
+      description: description
+    };
+
+    dispatch(addResponseExample({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      example: exampleData
+    }));
+    dispatch(saveRequest(item.uid, collection.uid));
+    setShowNameModal(false);
+    toast.success(`Example "${name}" created successfully`);
+  };
+
+  return (
+    <>
+      <StyledWrapper className="ml-2 flex items-center">
+        <button
+          onClick={handleSaveClick}
+          disabled={!response || response.error}
+          title="Save current response as example"
+          className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+          data-testid="response-bookmark-btn"
+        >
+          <IconBookmark size={16} strokeWidth={1.5} />
+        </button>
+      </StyledWrapper>
+
+      <CreateExampleModal
+        isOpen={showNameModal}
+        onClose={() => setShowNameModal(false)}
+        onSave={saveAsExample}
+        title="Save Response as Example"
+      />
+    </>
+  );
+};
+
+export default ResponseBookmark;
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index d9147632a3..4d41f2cdc4 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -18,6 +18,7 @@ import ScriptErrorIcon from './ScriptErrorIcon';
 import StyledWrapper from './StyledWrapper';
 import ResponseSave from 'src/components/ResponsePane/ResponseSave';
 import ResponseClear from 'src/components/ResponsePane/ResponseClear';
+import ResponseBookmark from 'src/components/ResponsePane/ResponseBookmark';
 import SkippedRequest from './SkippedRequest';
 import ClearTimeline from './ClearTimeline/index';
 import ResponseLayoutToggle from './ResponseLayoutToggle';
@@ -167,6 +168,7 @@ const ResponsePane = ({ item, collection }) => {
               <>
                 <ResponseClear item={item} collection={collection} />
                 <ResponseSave item={item} />
+                <ResponseBookmark item={item} collection={collection} />
                 <StatusCode status={response.status} />
                 <ResponseTime duration={response.duration} />
                 <ResponseSize size={responseSize} />
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteExampleModal.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteExampleModal.js
new file mode 100644
index 0000000000..edd119e1e1
--- /dev/null
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteExampleModal.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import Modal from 'components/Modal';
+import { useDispatch } from 'react-redux';
+import { deleteResponseExample } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const DeleteExampleModal = ({ onClose, example, item, collection }) => {
+  const dispatch = useDispatch();
+
+  const onConfirm = () => {
+    dispatch(deleteResponseExample({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: example.uid
+    }));
+    dispatch(saveRequest(item.uid, collection.uid));
+    onClose();
+  };
+
+  return (
+    <StyledWrapper>
+      <Modal
+        size="sm"
+        title="Delete Example"
+        confirmText="Delete"
+        handleConfirm={onConfirm}
+        handleCancel={onClose}
+        confirmButtonClass="btn-danger"
+      >
+        Are you sure you want to delete the example <span className="font-semibold">{example.name}</span>?
+      </Modal>
+    </StyledWrapper>
+  );
+};
+
+export default DeleteExampleModal;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
new file mode 100644
index 0000000000..5a17c174aa
--- /dev/null
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  position: relative;
+  
+  .menu-icon {
+    color: ${(props) => props.theme.sidebar.dropdownIcon.color};
+
+    .dropdown {
+      div[aria-expanded='true'] {
+        visibility: visible;
+      }
+      div[aria-expanded='false'] {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .indent-block {
+    border-right: ${(props) => props.theme.sidebar.collection.item.indentBorder};
+  }
+
+  .collection-item-name {
+    height: 1.875rem;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+
+    span.item-name {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &:hover,
+    &.item-hovered {
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
+      .menu-icon {
+        .dropdown {
+          div[aria-expanded='false'] {
+            visibility: visible;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git 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
new file mode 100644
index 0000000000..2800f0b3c2
--- /dev/null
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
@@ -0,0 +1,206 @@
+import React, { useState, useRef, forwardRef, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
+import { deleteResponseExample, updateResponseExample, addResponseExample } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { IconDots } from '@tabler/icons';
+import { ExampleIcon } from 'components/Icons/examples';
+import range from 'lodash/range';
+import Dropdown from 'components/Dropdown';
+import Modal from 'components/Modal';
+import DeleteExampleModal from './DeleteExampleModal';
+import StyledWrapper from './StyledWrapper';
+
+const ExampleItem = ({ example, item, collection }) => {
+  const dispatch = useDispatch();
+  const [editName, setEditName] = useState(example.name);
+  const [showRenameModal, setShowRenameModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const dropdownTippyRef = useRef(null);
+
+  // Calculate indentation: item depth + 1 for examples
+  const indents = range((item.depth || 0) + 1);
+
+  const handleExampleClick = () => {
+    dispatch(addTab({
+      uid: example.uid, // Use example.uid as the tab uid
+      exampleUid: example.uid,
+      collectionUid: collection.uid,
+      type: 'response-example',
+      itemUid: item.uid
+    }));
+  };
+
+  const handleRename = () => {
+    setEditName(example.name); // Set current name when opening modal
+    setShowRenameModal(true);
+    if (dropdownTippyRef.current) {
+      dropdownTippyRef.current.hide();
+    }
+  };
+
+  // Update editName when example changes
+  useEffect(() => {
+    setEditName(example.name);
+  }, [example.name]);
+
+  const handleClone = () => {
+    // Only pass response-related data - the reducer will automatically capture current request state
+    const clonedExample = {
+      name: `${example.name} (Copy)`,
+      status: example.status,
+      headers: example.headers,
+      body: example.body,
+      description: example.description
+    };
+
+    dispatch(addResponseExample({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      example: clonedExample
+    }));
+    dispatch(saveRequest(item.uid, collection.uid));
+
+    if (dropdownTippyRef.current) {
+      dropdownTippyRef.current.hide();
+    }
+  };
+
+  const handleDelete = () => {
+    setShowDeleteModal(true);
+    if (dropdownTippyRef.current) {
+      dropdownTippyRef.current.hide();
+    }
+  };
+
+  const handleRenameConfirm = (newName) => {
+    // Find the example index in the original examples array
+    dispatch(updateResponseExample({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: example.uid,
+      example: {
+        name: newName
+      }
+    }));
+    dispatch(saveRequest(item.uid, collection.uid));
+    setShowRenameModal(false);
+  };
+
+  const onDropdownCreate = (instance) => {
+    dropdownTippyRef.current = instance;
+  };
+
+  const MenuIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} data-testid="response-example-menu-icon">
+        <IconDots size={22} />
+      </div>
+    );
+  });
+
+  return (
+    <StyledWrapper
+      className="flex collection-item-name relative items-center"
+      onClick={handleExampleClick}
+    >
+      {indents && indents.length
+        ? indents.map((i) => (
+            <div
+              className="indent-block"
+              key={i}
+              style={{ width: 16, minWidth: 16, height: '100%' }}
+            >
+              &nbsp;{/* Indent */}
+            </div>
+          ))
+        : null}
+      <div
+        className="flex flex-grow items-center h-full overflow-hidden"
+        style={{ paddingLeft: 8 }}
+      >
+        <ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-400 flex-shrink-0" />
+        <span className="item-name truncate text-gray-700 dark:text-gray-300 ">
+          {example.name}
+        </span>
+      </div>
+      <div className="menu-icon pr-2">
+        <Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
+          <div
+            className="dropdown-item"
+            onClick={(e) => {
+              dropdownTippyRef.current.hide();
+              handleRename();
+            }}
+            data-testid="response-example-rename-option"
+          >
+            Rename
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={(e) => {
+              dropdownTippyRef.current.hide();
+              handleClone();
+            }}
+            data-testid="response-example-clone-option"
+          >
+            Clone
+          </div>
+          <div
+            className="dropdown-item text-red-600"
+            onClick={(e) => {
+              dropdownTippyRef.current.hide();
+              handleDelete();
+            }}
+            data-testid="response-example-delete-option"
+          >
+            Delete
+          </div>
+        </Dropdown>
+      </div>
+
+      {showRenameModal && (
+        <Modal
+          size="sm"
+          title="Rename Example"
+          handleCancel={() => {
+            setShowRenameModal(false);
+            setEditName(example.name); // Reset to original name on cancel
+          }}
+          handleConfirm={() => handleRenameConfirm(editName)}
+          confirmText="Rename"
+          cancelText="Cancel"
+          confirmDisabled={!editName.trim()}
+        >
+          <div>
+            <label htmlFor="renameExampleName" className="block font-semibold">
+              Example Name
+            </label>
+            <input
+              data-testid="rename-example-name-input"
+              id="renameExampleName"
+              type="text"
+              className="textbox mt-2"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              placeholder="Enter example name..."
+              autoFocus
+              required
+            />
+          </div>
+        </Modal>
+      )}
+
+      {showDeleteModal && (
+        <DeleteExampleModal
+          onClose={() => setShowDeleteModal(false)}
+          example={example}
+          item={item}
+          collection={collection}
+        />
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default ExampleItem;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
index fbef672ebf..f7fc6111cf 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
@@ -14,7 +14,7 @@ import { useSelector } from 'react-redux';
 import { getAllVariables, getGlobalEnvironmentVariables } from 'utils/collections/index';
 import { resolveInheritedAuth } from './utils/auth-utils';
 
-const GenerateCodeItem = ({ collectionUid, item, onClose }) => {
+const GenerateCodeItem = ({ collectionUid, item, onClose, isExample = false, exampleUid = null }) => {
   const languages = getLanguages();
   const collection = useSelector(state => state.collections.collections?.find(c => c.uid === collectionUid));
   const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector((state) => state.globalEnvironments);
@@ -34,22 +34,60 @@ const GenerateCodeItem = ({ collectionUid, item, onClose }) => {
     }, {});
   }
 
-  const requestUrl =
-    get(item, 'draft.request.url') !== undefined ? get(item, 'draft.request.url') : get(item, 'request.url');
+  // Function to handle normal request data
+  const getNormalRequestData = () => {
+    const requestUrl = get(item, 'draft.request.url') !== undefined ? get(item, 'draft.request.url') : get(item, 'request.url');
+    const requestParams = get(item, 'draft.request.params') !== undefined ? get(item, 'draft.request.params') : get(item, 'request.params');
+
+    return {
+      url: requestUrl,
+      params: requestParams,
+      request: get(item, 'draft.request') !== undefined ? get(item, 'draft.request') : get(item, 'request')
+    };
+  };
+
+  // Function to handle request example data
+  const getExampleRequestData = () => {
+    if (!isExample || !exampleUid) {
+      return getNormalRequestData();
+    }
+
+    // Find the specific example - check both draft and non-draft examples
+    const examples = item.draft ? get(item, 'draft.examples', []) : get(item, 'examples', []);
+    const example = examples.find((e) => e.uid === exampleUid);
+
+    if (!example) {
+      return getNormalRequestData();
+    }
+
+    // Use example request data
+    const requestUrl = get(example, 'request.url');
+    const requestParams = get(example, 'request.params');
+    const requestData = get(example, 'request');
+
+    return {
+      url: requestUrl,
+      params: requestParams,
+      request: requestData
+    };
+  };
+
+  // Get the appropriate request data based on mode
+  const requestData = isExample ? getExampleRequestData() : getNormalRequestData();
 
   const variables = useMemo(() => {
     return getAllVariables({ ...collection, globalEnvironmentVariables }, item);
   }, [collection, globalEnvironmentVariables, item]);
 
   const interpolatedUrl = interpolateUrl({
-    url: requestUrl,
+    url: requestData.url,
     variables
   });
 
   // interpolate the path params
   const finalUrl = interpolateUrlPathParams(
     interpolatedUrl,
-    get(item, 'draft.request.params') !== undefined ? get(item, 'draft.request.params') : get(item, 'request.params')
+    requestData.params
   );
 
   // Get the full language object based on current preferences
@@ -64,8 +102,21 @@ const GenerateCodeItem = ({ collectionUid, item, onClose }) => {
   // Resolve auth inheritance
   const resolvedRequest = resolveInheritedAuth(item, collection);
 
+  // Create the final item for code generation
+  const finalItem = {
+    ...item,
+    request: {
+      ...resolvedRequest,
+      ...requestData.request,
+      url: finalUrl
+    }
+  };
+
+  // Update modal title based on mode
+  const modalTitle = isExample ? `Generate Code - ${get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.name || 'Example'}` : 'Generate Code';
+
   return (
-    <Modal size="lg" title="Generate Code" handleCancel={onClose} hideFooter={true}>
+    <Modal size="lg" title={modalTitle} handleCancel={onClose} hideFooter={true}>
       <StyledWrapper>
         <div className="code-generator">
           <CodeViewToolbar />
@@ -74,13 +125,7 @@ const GenerateCodeItem = ({ collectionUid, item, onClose }) => {
             {isValidUrl(finalUrl) ? (
               <CodeView
                 language={selectedLanguage}
-                item={{
-                  ...item,
-                  request: {
-                    ...resolvedRequest,
-                    url: finalUrl
-                  }
-                }}
+                item={finalItem}
               />
             ) : (
               <div className="error-message">
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
index b6602aa7f6..48f2d4af0f 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
@@ -8,7 +8,7 @@ import { IconChevronRight, IconDots } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
 import { addTab, focusTab, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import { handleCollectionItemDrop, sendRequest, showInFolder, pasteItem } from 'providers/ReduxStore/slices/collections/actions';
-import { toggleCollectionItem } from 'providers/ReduxStore/slices/collections';
+import { toggleCollectionItem, addResponseExample } from 'providers/ReduxStore/slices/collections';
 import { copyRequest } from 'providers/ReduxStore/slices/app';
 import Dropdown from 'components/Dropdown';
 import NewRequest from 'components/Sidebar/NewRequest';
@@ -27,11 +27,13 @@ import StyledWrapper from './StyledWrapper';
 import NetworkError from 'components/ResponsePane/NetworkError/index';
 import CollectionItemInfo from './CollectionItemInfo/index';
 import CollectionItemIcon from './CollectionItemIcon';
+import ExampleItem from './ExampleItem';
 import { scrollToTheActiveTab } from 'utils/tabs';
 import { isTabForItemActive as isTabForItemActiveSelector, isTabForItemPresent as isTabForItemPresentSelector } from 'src/selectors/tab';
 import { isEqual } from 'lodash';
 import { calculateDraggedItemNewPathname } from 'utils/collections/index';
 import { sortByNameThenSequence } from 'utils/common/index';
+import CreateExampleModal from 'components/ResponseExample/CreateExampleModal';
 
 const CollectionItem = ({ item, collectionUid, collectionPathname, searchText }) => {
   const _isTabForItemActiveSelector = isTabForItemActiveSelector({ itemUid: item.uid });
@@ -41,6 +43,7 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
   const isTabForItemPresent = useSelector(_isTabForItemPresentSelector, isEqual);
   
   const isSidebarDragging = useSelector((state) => state.app.isDragging);
+  const collection = useSelector((state) => state.collections.collections?.find((c) => c.uid === collectionUid));
   const { hasCopiedItems } = useSelector((state) => state.app.clipboard);
   const dispatch = useDispatch();
 
@@ -50,15 +53,20 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
   const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
   const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
   const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false);
+  const [createExampleModalOpen, setCreateExampleModalOpen] = useState(false);
   const [generateCodeItemModalOpen, setGenerateCodeItemModalOpen] = useState(false);
   const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
   const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
   const [runCollectionModalOpen, setRunCollectionModalOpen] = useState(false);
   const [itemInfoModalOpen, setItemInfoModalOpen] = useState(false);
+  const [examplesExpanded, setExamplesExpanded] = useState(false);
   const hasSearchText = searchText && searchText?.trim()?.length;
   const itemIsCollapsed = hasSearchText ? false : item.collapsed;
   const isFolder = isItemAFolder(item);
 
+  // Check if request has examples (only for HTTP requests)
+  const hasExamples = isItemARequest(item) && item.type === 'http-request' && item.examples && item.examples.length > 0;
+
   const [dropType, setDropType] = useState(null); // 'adjacent' or 'inside'
 
   const [{ isDragging }, drag, dragPreview] = useDrag({
@@ -156,6 +164,10 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
     'rotate-90': !itemIsCollapsed
   });
 
+  const examplesIconClassName = classnames({
+    'rotate-90': examplesExpanded
+  });
+
   const itemRowClassName = classnames('flex collection-item-name relative items-center', {
     'item-focused-in-tab': isTabForItemActive,
     'item-hovered': isOver && canDrop,
@@ -230,6 +242,18 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
     e.preventDefault();
   };
 
+  const handleExamplesCollapse = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setExamplesExpanded(!examplesExpanded);
+  };
+
+  // prevent the parent's double-click handler from firing
+  const handleExamplesDoubleClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
   const handleRightClick = (event) => {
     const _menuDropdown = dropdownTippyRef.current;
     if (_menuDropdown) {
@@ -276,6 +300,27 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
     });
   };
 
+  const handleCreateExample = (name, description = '') => {
+    // Create example with default values
+    const exampleData = {
+      name: name,
+      description: description,
+      status: '200',
+      statusText: 'OK',
+      headers: [],
+      body: ''
+    };
+
+    dispatch(addResponseExample({
+      itemUid: item.uid,
+      collectionUid: collectionUid,
+      example: exampleData
+    }));
+
+    toast.success(`Example "${name}" created successfully`);
+    setCreateExampleModalOpen(false);
+  };
+
   const folderItems = sortByNameThenSequence(filter(item.items, (i) => isItemAFolder(i))); 
   const requestItems = sortItemsBySequence(filter(item.items, (i) => isItemARequest(i)));
  
@@ -351,6 +396,12 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
       {itemInfoModalOpen && (
         <CollectionItemInfo item={item} onClose={() => setItemInfoModalOpen(false)} />
       )}
+      <CreateExampleModal
+        isOpen={createExampleModalOpen}
+        onClose={() => setCreateExampleModalOpen(false)}
+        onSave={handleCreateExample}
+        title="Create Response Example"
+      />
       <div
         className={itemRowClassName}
         ref={(node) => {
@@ -389,6 +440,17 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
                   style={{ color: 'rgb(160 160 160)' }}
                   onClick={handleFolderCollapse}
                   onDoubleClick={handleFolderDoubleClick}
+                  data-testid="collection-item-chevron"
+                />
+              ) : hasExamples ? (
+                <IconChevronRight
+                  size={16}
+                  strokeWidth={2}
+                  className={examplesIconClassName}
+                  style={{ color: 'rgb(160 160 160)' }}
+                  onClick={handleExamplesCollapse}
+                  onDoubleClick={handleExamplesDoubleClick}
+                  data-testid="request-item-chevron"
                 />
               ) : null}
             </div>
@@ -488,6 +550,17 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
                   Generate Code
                 </div>
               )}
+              {!isFolder && isItemARequest(item) && item.type === 'http-request' && (
+                <div
+                  className="dropdown-item"
+                  onClick={(e) => {
+                    dropdownTippyRef.current.hide();
+                    setCreateExampleModalOpen(true);
+                  }}
+                >
+                  Create Example
+                </div>
+              )}
               <div
                 className="dropdown-item"
                 onClick={(e) => {
@@ -544,6 +617,23 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
             : null}
         </div>
       ) : null}
+
+      {/* Show examples when expanded (only for HTTP requests) */}
+      {isItemARequest(item) && item.type === 'http-request' && examplesExpanded && hasExamples && (
+        <div>
+          {(item.examples || []).map((example, index) => {
+            return (
+              <ExampleItem
+                key={example.uid || index}
+                example={example}
+                item={item}
+                index={index}
+                collection={collection}
+              />
+            );
+          })}
+        </div>
+      )}
     </StyledWrapper>
   );
 };
diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js
index 00df02b7ae..03f0dc7181 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -18,6 +18,7 @@ class SingleLineEditor extends Component {
     this.cachedValue = props.value || '';
     this.editorRef = React.createRef();
     this.variables = {};
+    this.readOnly = props.readOnly || false;
 
     this.state = {
       maskInput: props.isSecret || false // Always mask the input by default (if it's a secret)
@@ -52,6 +53,7 @@ class SingleLineEditor extends Component {
       },
       scrollbarStyle: null,
       tabindex: 0,
+      readOnly: this.props.readOnly || false,
       extraKeys: {
         Enter: runHandler,
         'Ctrl-Enter': runHandler,
@@ -150,6 +152,9 @@ class SingleLineEditor extends Component {
       // also set the maskInput flag to the new value
       this.setState({ maskInput: this.props.isSecret });
     }
+    if (this.props.readOnly !== prevProps.readOnly && this.editor) {
+      this.editor.setOption('readOnly', this.props.readOnly || false);
+    }
     this.ignoreChangeEvent = false;
   }
 
diff --git a/packages/bruno-app/src/components/Table-v2/StyledWrapper.js b/packages/bruno-app/src/components/Table-v2/StyledWrapper.js
new file mode 100644
index 0000000000..85efd5157a
--- /dev/null
+++ b/packages/bruno-app/src/components/Table-v2/StyledWrapper.js
@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  table {
+    width: 100%;
+    display: grid;
+    overflow-y: hidden;
+    overflow-x: auto;
+    padding: 0 1.5px;
+    border-radius: 8px;
+
+    // for icon hover
+    position: inherit;
+
+    grid-template-columns: ${({ columns }) =>
+      columns?.[0]?.width
+        ? columns.map((col) => `${col?.width}`).join(' ')
+        : columns.map((col) => `${100 / columns.length}%`).join(' ')};
+  }
+
+  table thead,
+  table tbody,
+  table tr {
+    display: contents;
+    border: none;
+  }
+
+  table th {
+    position: relative;
+    border: none;
+    border-bottom: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+    background: ${(props) => props.theme.examples.table.thead.bg};
+    color: ${(props) => props.theme.examples.table.thead.color};
+    font-weight: 400;
+
+    tr td {
+      border: none;
+      color: ${(props) => props.theme.examples.table.thead.color};
+      background: ${(props) => props.theme.examples.table.thead.bg};
+    }
+  }
+
+  table tr td {
+    padding: 0.5rem;
+    text-align: left;
+    border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+  }
+
+  tr {
+    transition: transform 0.2s ease-in-out;
+  }
+
+  tr.dragging {
+    opacity: 0.5;
+  }
+
+  tr.hovered {
+    transform: translateY(10px); /* Adjust the value as needed for the animation effect */
+  }
+
+  table tr th {
+    padding: 0.5rem;
+    text-align: left;
+    border-top: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+    font-weight: 400;
+
+    &:nth-child(1) {
+      border-left: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+    }
+
+    &:last-child {
+      border-right: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Table-v2/index.js b/packages/bruno-app/src/components/Table-v2/index.js
new file mode 100644
index 0000000000..5cd55525b2
--- /dev/null
+++ b/packages/bruno-app/src/components/Table-v2/index.js
@@ -0,0 +1,109 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const Table = ({ minColumnWidth = 1, headers = [], children }) => {
+  const [activeColumnIndex, setActiveColumnIndex] = useState(null);
+  const tableRef = useRef(null);
+
+  const columns = headers?.map((item) => ({
+    ...item,
+    ref: useRef()
+  }));
+
+  const updateDivHeights = () => {
+    if (tableRef.current) {
+      const height = tableRef.current.offsetHeight;
+      columns.forEach((col) => {
+        if (col.ref.current) {
+          col.ref.current.querySelector('.resizer').style.height = `${height}px`;
+        }
+      });
+    }
+  };
+
+  useEffect(() => {
+    updateDivHeights();
+    window.addEventListener('resize', updateDivHeights);
+
+    return () => {
+      window.removeEventListener('resize', updateDivHeights);
+    };
+  }, [columns]);
+
+  useEffect(() => {
+    if (tableRef.current) {
+      const observer = new MutationObserver(updateDivHeights);
+      observer.observe(tableRef.current, { childList: true, subtree: true });
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [columns]);
+
+  const handleMouseDown = (index) => (e) => {
+    setActiveColumnIndex(index);
+  };
+
+  const handleMouseMove = useCallback((e) => {
+    const gridColumns = columns.map((col, i) => {
+      if (i === activeColumnIndex) {
+        const width = e.clientX - col.ref?.current?.getBoundingClientRect()?.left;
+
+        if (width >= minColumnWidth) {
+          return `${width}px`;
+        }
+      }
+      return `${col.ref.current.offsetWidth}px`;
+    });
+
+    tableRef.current.style.gridTemplateColumns = `${gridColumns.join(' ')}`;
+  },
+  [activeColumnIndex, columns, minColumnWidth]);
+
+  const removeListeners = useCallback(() => {
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', removeListeners);
+  }, [handleMouseMove]);
+
+  const handleMouseUp = useCallback(() => {
+    setActiveColumnIndex(null);
+    removeListeners?.();
+  }, [removeListeners]);
+
+  useEffect(() => {
+    if (activeColumnIndex !== null) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+      removeListeners();
+    };
+  }, [activeColumnIndex, handleMouseMove, handleMouseUp, removeListeners]);
+
+  return (
+    <StyledWrapper columns={columns}>
+      <div className="relative">
+        <table ref={tableRef} className="inherit">
+          <thead>
+            <tr>
+              {columns.map(({ ref, name }, i) => (
+                <th ref={ref} key={name} title={name}>
+                  <span>{name}</span>
+                  <div
+                    className="resizer absolute cursor-col-resize w-[4px] right-[-2px] top-0 z-10 opacity-50 hover:bg-blue-500 active:bg-blue-500"
+                    onMouseDown={handleMouseDown(i)}
+                  >
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          {children}
+        </table>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Table;
diff --git a/packages/bruno-app/src/components/TruncatedText/index.js b/packages/bruno-app/src/components/TruncatedText/index.js
new file mode 100644
index 0000000000..38203097d3
--- /dev/null
+++ b/packages/bruno-app/src/components/TruncatedText/index.js
@@ -0,0 +1,108 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const TruncatedText = ({
+  text,
+  maxLines = 2,
+  className = '',
+  textClassName = '',
+  buttonClassName = '',
+  viewMoreText = 'View More',
+  viewLessText = 'View Less',
+  showButton = true,
+  onToggle = null,
+  children,
+  ...props
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [shouldTruncate, setShouldTruncate] = useState(false);
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    if (textRef.current) {
+      const element = textRef.current;
+      const computedStyle = window.getComputedStyle(element);
+      const lineHeight = computedStyle.lineHeight;
+
+      let actualLineHeight;
+      if (lineHeight === 'normal') {
+        // If line-height is 'normal', calculate it from font-size (typically 1.2x font-size)
+        const fontSize = parseInt(computedStyle.fontSize, 10);
+        actualLineHeight = fontSize * 1.2;
+      } else {
+        actualLineHeight = parseInt(lineHeight, 10);
+      }
+
+      const maxHeight = actualLineHeight * maxLines;
+
+      // Add a small tolerance (3px) to account for sub-pixel rendering and rounding errors
+      const tolerance = 3;
+
+      // Check if text needs truncation
+      if (element.scrollHeight > maxHeight + tolerance) {
+        setShouldTruncate(true);
+      } else {
+        setShouldTruncate(false);
+      }
+    }
+  }, [text, maxLines]);
+
+  const handleToggle = () => {
+    const newExpandedState = !isExpanded;
+    setIsExpanded(newExpandedState);
+
+    if (onToggle) {
+      onToggle(newExpandedState);
+    }
+  };
+
+  const defaultTextStyles = {
+    display: '-webkit-box',
+    WebkitLineClamp: isExpanded ? 'none' : maxLines,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    wordBreak: 'break-word'
+  };
+
+  const defaultButtonStyles = {
+    background: 'none',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    padding: '0',
+    marginLeft: '4px',
+    textDecoration: 'underline',
+    fontSize: 'inherit',
+    fontFamily: 'inherit'
+  };
+
+  if (!text || text.trim().length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={className} {...props}>
+      <div
+        ref={textRef}
+        className={textClassName}
+        style={!isExpanded && shouldTruncate ? defaultTextStyles : {}}
+      >
+        {children || text}
+      </div>
+
+      {shouldTruncate && showButton && (
+        <button
+          type="button"
+          className={buttonClassName}
+          style={defaultButtonStyles}
+          onClick={handleToggle}
+          aria-label={isExpanded ? viewLessText : viewMoreText}
+        >
+          {isExpanded ? viewLessText : viewMoreText}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default TruncatedText;
diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
index c63f23c17f..7d820c41f1 100644
--- a/packages/bruno-app/src/globalStyles.js
+++ b/packages/bruno-app/src/globalStyles.js
@@ -192,6 +192,42 @@ const GlobalStyle = createGlobalStyle`
     }
   }
 
+  // Utility class for scrollbars that are hidden by default and shown on hover
+  .scrollbar-hover {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+      border-radius: 14px;
+      border: 3px solid transparent;
+      background-clip: content-box;
+      transition: background-color 0.2s ease;
+    }
+
+    &:hover {
+      scrollbar-color: ${(props) => props.theme.scrollbar.color} transparent;
+      
+      &::-webkit-scrollbar-thumb {
+        background-color: ${(props) => props.theme.scrollbar.color};
+      }
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: ${(props) => props.theme.scrollbar.color};
+      opacity: 0.8;
+    }
+  }
+
 
   // codemirror
   .CodeMirror {
diff --git a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
index cb04256bdc..97ebf07113 100644
--- a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
+++ b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
@@ -4,7 +4,7 @@ import filter from 'lodash/filter';
 import groupBy from 'lodash/groupBy';
 import { useSelector } from 'react-redux';
 import { useDispatch } from 'react-redux';
-import { findCollectionByUid, flattenItems, isItemARequest } from 'utils/collections';
+import { findCollectionByUid, flattenItems, isItemARequest, hasRequestChanges } from 'utils/collections';
 import { pluralizeWord } from 'utils/common';
 import { completeQuitFlow } from 'providers/ReduxStore/slices/app';
 import { saveMultipleRequests } from 'providers/ReduxStore/slices/collections/actions';
@@ -23,7 +23,7 @@ const SaveRequestsModal = ({ onClose }) => {
     const collection = findCollectionByUid(collections, collectionUid);
     if (collection) {
       const items = flattenItems(collection.items);
-      const drafts = filter(items, (item) => isItemARequest(item) && item.draft);
+      const drafts = filter(items, (item) => isItemARequest(item) && hasRequestChanges(item));
       each(drafts, (draft) => {
         currentDrafts.push({
           ...draft,
diff --git a/packages/bruno-app/src/providers/ReduxStore/index.js b/packages/bruno-app/src/providers/ReduxStore/index.js
index b86305011f..4c127c6a68 100644
--- a/packages/bruno-app/src/providers/ReduxStore/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/index.js
@@ -3,6 +3,7 @@ import tasksMiddleware from './middlewares/tasks/middleware';
 import debugMiddleware from './middlewares/debug/middleware';
 import appReducer from './slices/app';
 import collectionsReducer from './slices/collections';
+// Response examples are now handled by the collections slice
 import tabsReducer from './slices/tabs';
 import notificationsReducer from './slices/notifications';
 import globalEnvironmentsReducer from './slices/global-environments';
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js
new file mode 100644
index 0000000000..580472552a
--- /dev/null
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js
@@ -0,0 +1,1037 @@
+import { find, map, filter, cloneDeep } from 'lodash';
+import { uuid } from 'utils/common';
+import { findCollectionByUid, findItemInCollection } from 'utils/collections';
+
+// Response Example Actions
+export const addResponseExample = (state, action) => {
+  const { itemUid, collectionUid, example } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item) {
+      if (!item.draft) {
+        item.draft = cloneDeep(item);
+      }
+      if (!item.draft.examples) {
+        item.draft.examples = [];
+      }
+
+      const newExample = {
+        uid: uuid(),
+        itemUid: item.uid,
+        name: example.name,
+        description: example.description,
+        type: item.draft.type,
+        request: {
+          url: item.draft.request.url,
+          method: item.draft.request.method,
+          headers: item.draft.request.headers,
+          params: item.draft.request.params,
+          body: item.draft.request.body
+        },
+        response: {
+          status: String(example.status),
+          statusText: String(example.statusText),
+          headers: (example.headers || []).map((header) => ({
+            uid: uuid(),
+            name: String(header.name),
+            value: String(header.value),
+            description: String(header.description),
+            enabled: header.enabled
+          })),
+          body: example.body
+        }
+      };
+
+      item.draft.examples.push(newExample);
+    }
+  }
+};
+
+export const updateResponseExample = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, example: details } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item.draft.examples.length > 0) {
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        item.draft.examples = item.draft.examples.map((e) =>
+          e.uid === exampleUid ? { ...e, ...details } : e);
+      }
+    }
+  }
+};
+
+export const deleteResponseExample = (state, action) => {
+  const { itemUid, collectionUid, exampleUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft && item.draft.examples) {
+      item.draft.examples = item.draft.examples.filter((e) => e.uid !== exampleUid);
+    }
+  }
+};
+
+export const cancelResponseExampleEdit = (state, action) => {
+  const { itemUid, collectionUid, exampleUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && item.draft && item.draft.examples && item.examples) {
+      const originalExample = item.examples.find((e) => e.uid === exampleUid);
+      if (originalExample) {
+        // Replace the draft example with the original example
+        const exampleIndex = item.draft.examples.findIndex((e) => e.uid === exampleUid);
+        if (exampleIndex !== -1) {
+          item.draft.examples[exampleIndex] = cloneDeep(originalExample);
+        }
+      }
+    }
+  }
+};
+
+// Response Example Headers
+export const addResponseExampleHeader = (state, action) => {
+  const { itemUid, collectionUid, exampleUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.response.headers = example.response.headers || [];
+        example.response.headers.push({
+          uid: uuid(),
+          name: '',
+          value: '',
+          description: '',
+          enabled: true
+        });
+      }
+    }
+  }
+};
+
+export const updateResponseExampleHeader = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, header } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.response.headers) {
+        const headerToUpdate = find(example.response.headers, (h) => h.uid === header.uid);
+        if (headerToUpdate) {
+          headerToUpdate.name = header.name;
+          headerToUpdate.value = header.value;
+          headerToUpdate.description = header.description;
+          headerToUpdate.enabled = header.enabled;
+        }
+      }
+    }
+  }
+};
+
+export const deleteResponseExampleHeader = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, headerUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.response.headers) {
+        example.response.headers = filter(example.response.headers, (h) => h.uid !== headerUid);
+      }
+    }
+  }
+};
+
+export const moveResponseExampleHeader = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, updateReorderedItem } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.response && example.response.headers) {
+        example.response.headers = updateReorderedItem.map((uid) => {
+          return example.response.headers.find((h) => h.uid === uid);
+        });
+      }
+    }
+  }
+};
+
+export const setResponseExampleHeaders = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, headers } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.response.headers = map(headers, ({ name = '', value = '', enabled = true }) => ({
+          uid: uuid(),
+          name: name,
+          value: value,
+          description: '',
+          enabled: enabled
+        }));
+      }
+    }
+  }
+};
+
+// Response Example Params
+export const addResponseExampleParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.request.params = example.request.params || [];
+        example.request.params.push({
+          uid: uuid(),
+          name: '',
+          value: '',
+          description: '',
+          type: 'query',
+          enabled: true
+        });
+      }
+    }
+  }
+};
+
+export const updateResponseExampleParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, param } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.params) {
+        const paramToUpdate = find(example.request.params, (p) => p.uid === param.uid);
+        if (paramToUpdate) {
+          paramToUpdate.name = param.name;
+          paramToUpdate.value = param.value;
+          paramToUpdate.description = param.description;
+          paramToUpdate.enabled = param.enabled;
+        }
+      }
+    }
+  }
+};
+
+export const deleteResponseExampleParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, paramUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.params) {
+        example.request.params = filter(example.request.params, (p) => p.uid !== paramUid);
+      }
+    }
+  }
+};
+
+export const moveResponseExampleParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, updateReorderedItem } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.params) {
+        example.request.params = updateReorderedItem.map((uid) => {
+          return example.request.params.find((p) => p.uid === uid);
+        });
+      }
+    }
+  }
+};
+
+// Response Example Request/Response Updates
+export const updateResponseExampleMultipartFormParams = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, params } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        if (!example.request) {
+          example.request = {};
+        }
+        if (!example.request.body) {
+          example.request.body = { mode: 'multipartForm', multipartForm: [] };
+        }
+
+        // Ensure all params have unique UIDs
+        const paramsWithUids = params.map((param, index) => ({
+          ...param,
+          uid: param.uid || uuid()
+        }));
+
+        example.request.body.multipartForm = paramsWithUids;
+      }
+    }
+  }
+};
+
+export const updateResponseExampleFileBodyParams = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, params } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        if (!example.request) {
+          example.request = {};
+        }
+        if (!example.request.body) {
+          example.request.body = { mode: 'file', file: [] };
+        }
+
+        // Ensure all params have unique UIDs
+        const paramsWithUids = params.map((param, index) => ({
+          ...param,
+          uid: param.uid || uuid()
+        }));
+
+        example.request.body.file = paramsWithUids;
+      }
+    }
+  }
+};
+
+export const updateResponseExampleFormUrlEncodedParams = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, params } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        if (!example.request) {
+          example.request = {};
+        }
+        if (!example.request.body) {
+          example.request.body = { mode: 'formUrlEncoded', formUrlEncoded: [] };
+        }
+
+        // Ensure all params have unique UIDs
+        const paramsWithUids = params.map((param, index) => ({
+          ...param,
+          uid: param.uid || uuid()
+        }));
+
+        example.request.body.formUrlEncoded = paramsWithUids;
+      }
+    }
+  }
+};
+
+export const updateResponseExampleRequest = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, request } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.request = { ...example.request, ...request };
+      }
+    }
+  }
+};
+
+export const updateResponseExampleRequestUrl = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, request } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.request.url = request.url;
+      }
+    }
+  }
+};
+
+export const updateResponseExampleResponse = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, response } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.response = { ...example.response, ...response };
+      }
+    }
+  }
+};
+
+export const updateResponseExampleDetails = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, details } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.name = details.name || example.name;
+        example.description = details.description || example.description;
+      }
+    }
+  }
+};
+
+export const updateResponseExampleName = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, name } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.name = name;
+      }
+    }
+  }
+};
+
+export const updateResponseExampleDescription = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, description } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.description = description;
+      }
+    }
+  }
+};
+
+// Response Example Request Headers
+export const addResponseExampleRequestHeader = (state, action) => {
+  const { itemUid, collectionUid, exampleUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.request.headers = example.request.headers || [];
+        example.request.headers.push({
+          uid: uuid(),
+          name: '',
+          value: '',
+          description: '',
+          enabled: true
+        });
+      }
+    }
+  }
+};
+
+export const updateResponseExampleRequestHeader = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, header } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.headers) {
+        const headerToUpdate = find(example.request.headers, (h) => h.uid === header.uid);
+        if (headerToUpdate) {
+          headerToUpdate.name = header.name;
+          headerToUpdate.value = header.value;
+          headerToUpdate.description = header.description;
+          headerToUpdate.enabled = header.enabled;
+        }
+      }
+    }
+  }
+};
+
+export const deleteResponseExampleRequestHeader = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, headerUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.headers) {
+        example.request.headers = filter(example.request.headers, (h) => h.uid !== headerUid);
+      }
+    }
+  }
+};
+
+export const moveResponseExampleRequestHeader = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, updateReorderedItem } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.headers) {
+        example.request.headers = updateReorderedItem.map((uid) => {
+          return example.request.headers.find((h) => h.uid === uid);
+        });
+      }
+    }
+  }
+};
+
+export const setResponseExampleRequestHeaders = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, headers } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.request.headers = map(headers, ({ name = '', value = '', enabled = true }) => ({
+          uid: uuid(),
+          name: name,
+          value: value,
+          description: '',
+          enabled: enabled
+        }));
+      }
+    }
+  }
+};
+
+export const setResponseExampleParams = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, params } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.request.params = map(params, ({ name = '', value = '', enabled = true, type = 'query' }) => ({
+          uid: uuid(),
+          name: name,
+          value: value,
+          description: '',
+          enabled: enabled,
+          type: type
+        }));
+      }
+    }
+  }
+};
+
+// Response Example Body Types
+export const updateResponseExampleBody = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, body } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        example.request.body = { ...example.request.body, ...body };
+      }
+    }
+  }
+};
+
+// Response Example File Body
+export const addResponseExampleFileParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        if (!example.request.body) {
+          example.request.body = { mode: 'file', file: [] };
+        }
+        if (!example.request.body.file) {
+          example.request.body.file = [];
+        }
+        example.request.body.file.push({
+          uid: uuid(),
+          name: '',
+          value: '',
+          description: '',
+          enabled: true
+        });
+      }
+    }
+  }
+};
+
+export const updateResponseExampleFileParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, param } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.body && example.request.body.file) {
+        const paramToUpdate = find(example.request.body.file, (p) => p.uid === param.uid);
+        if (paramToUpdate) {
+          paramToUpdate.name = param.name;
+          paramToUpdate.value = param.value;
+          paramToUpdate.description = param.description;
+          paramToUpdate.enabled = param.enabled;
+        }
+      }
+    }
+  }
+};
+
+export const deleteResponseExampleFileParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, paramUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.body && example.request.body.file) {
+        example.request.body.file = filter(example.request.body.file, (p) => p.uid !== paramUid);
+      }
+    }
+  }
+};
+
+// Response Example Form URL Encoded Body
+export const addResponseExampleFormUrlEncodedParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        if (!example.request.body) {
+          example.request.body = { mode: 'formUrlEncoded', formUrlEncoded: [] };
+        }
+        if (!example.request.body.formUrlEncoded) {
+          example.request.body.formUrlEncoded = [];
+        }
+        example.request.body.formUrlEncoded.push({
+          uid: uuid(),
+          name: '',
+          value: '',
+          description: '',
+          enabled: true
+        });
+      }
+    }
+  }
+};
+
+export const updateResponseExampleFormUrlEncodedParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, param } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.body && example.request.body.formUrlEncoded) {
+        const paramToUpdate = find(example.request.body.formUrlEncoded, (p) => p.uid === param.uid);
+        if (paramToUpdate) {
+          paramToUpdate.name = param.name;
+          paramToUpdate.value = param.value;
+          paramToUpdate.description = param.description;
+          paramToUpdate.enabled = param.enabled;
+        }
+      }
+    }
+  }
+};
+
+export const deleteResponseExampleFormUrlEncodedParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, paramUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.body && example.request.body.formUrlEncoded) {
+        example.request.body.formUrlEncoded = filter(example.request.body.formUrlEncoded, (p) => p.uid !== paramUid);
+      }
+    }
+  }
+};
+
+// Response Example Multipart Form Body
+export const addResponseExampleMultipartFormParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        if (!example.request.body) {
+          example.request.body = { mode: 'multipartForm', multipartForm: [] };
+        }
+        if (!example.request.body.multipartForm) {
+          example.request.body.multipartForm = [];
+        }
+        example.request.body.multipartForm.push({
+          uid: uuid(),
+          name: '',
+          value: '',
+          description: '',
+          enabled: true,
+          type: 'text',
+          contentType: ''
+        });
+      }
+    }
+  }
+};
+
+export const updateResponseExampleMultipartFormParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, param } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.body && example.request.body.multipartForm) {
+        const paramToUpdate = find(example.request.body.multipartForm, (p) => p.uid === param.uid);
+        if (paramToUpdate) {
+          paramToUpdate.name = param.name;
+          paramToUpdate.value = param.value;
+          paramToUpdate.description = param.description;
+          paramToUpdate.enabled = param.enabled;
+          paramToUpdate.type = param.type;
+          paramToUpdate.contentType = param.contentType;
+        }
+      }
+    }
+  }
+};
+
+export const deleteResponseExampleMultipartFormParam = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, paramUid } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example && example.request.body && example.request.body.multipartForm) {
+        example.request.body.multipartForm = filter(example.request.body.multipartForm, (p) => p.uid !== paramUid);
+      }
+    }
+  }
+};
+
+// Response Status Code and Status Text Reducers
+export const updateResponseExampleStatusCode = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, statusCode } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        if (!example.response) {
+          example.response = {};
+        }
+        example.response.status = String(statusCode);
+      }
+    }
+  }
+};
+
+export const updateResponseExampleStatusText = (state, action) => {
+  const { itemUid, collectionUid, exampleUid, statusText } = action.payload;
+  const collection = findCollectionByUid(state.collections, collectionUid);
+
+  if (collection) {
+    const item = findItemInCollection(collection, itemUid);
+    if (item && !item.draft) {
+      item.draft = cloneDeep(item);
+    }
+    if (item && item.draft) {
+      if (!item.draft.examples) {
+        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+      }
+      const example = item.draft.examples.find((e) => e.uid === exampleUid);
+      if (example) {
+        if (!example.response) {
+          example.response = {};
+        }
+        example.response.statusText = String(statusText);
+      }
+    }
+  }
+};
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
index 11a9b92070..51a238549c 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -22,6 +22,7 @@ import toast from 'react-hot-toast';
 import mime from 'mime-types';
 import path from 'utils/common/path';
 import { getUniqueTagsFromItems } from 'utils/collections/index';
+import * as exampleReducers from './exampleReducers';
 
 // gRPC status code meanings
 const grpcStatusCodes = {
@@ -2198,6 +2199,7 @@ export const collectionsSlice = createSlice({
             currentItem.filename = file.meta.name;
             currentItem.pathname = file.meta.pathname;
             currentItem.settings = file.data.settings;
+            currentItem.examples = file.data.examples;
             currentItem.draft = null;
             currentItem.partial = file.partial;
             currentItem.loading = file.loading;
@@ -2212,6 +2214,7 @@ export const collectionsSlice = createSlice({
               tags: file.data.tags,
               request: file.data.request,
               settings: file.data.settings,
+              examples: file.data.examples,
               filename: file.meta.name,
               pathname: file.meta.pathname,
               draft: null,
@@ -2303,6 +2306,7 @@ export const collectionsSlice = createSlice({
             item.tags = file.data.tags;
             item.request = file.data.request;
             item.settings = file.data.settings;
+            item.examples = file.data.examples;
             item.filename = file.meta.name;
             item.pathname = file.meta.pathname;
             item.draft = null;
@@ -2916,7 +2920,50 @@ export const collectionsSlice = createSlice({
           item.response.sortOrder = item.response.sortOrder ? -item.response.sortOrder : -1;
         }
       }
-    }
+    },
+
+    /* Response Example Actions */
+    addResponseExample: exampleReducers.addResponseExample,
+    updateResponseExample: exampleReducers.updateResponseExample,
+    deleteResponseExample: exampleReducers.deleteResponseExample,
+    cancelResponseExampleEdit: exampleReducers.cancelResponseExampleEdit,
+    addResponseExampleHeader: exampleReducers.addResponseExampleHeader,
+    updateResponseExampleHeader: exampleReducers.updateResponseExampleHeader,
+    deleteResponseExampleHeader: exampleReducers.deleteResponseExampleHeader,
+    moveResponseExampleHeader: exampleReducers.moveResponseExampleHeader,
+    setResponseExampleHeaders: exampleReducers.setResponseExampleHeaders,
+    addResponseExampleParam: exampleReducers.addResponseExampleParam,
+    updateResponseExampleParam: exampleReducers.updateResponseExampleParam,
+    deleteResponseExampleParam: exampleReducers.deleteResponseExampleParam,
+    moveResponseExampleParam: exampleReducers.moveResponseExampleParam,
+    updateResponseExampleRequest: exampleReducers.updateResponseExampleRequest,
+    updateResponseExampleMultipartFormParams: exampleReducers.updateResponseExampleMultipartFormParams,
+    updateResponseExampleFileBodyParams: exampleReducers.updateResponseExampleFileBodyParams,
+    updateResponseExampleFormUrlEncodedParams: exampleReducers.updateResponseExampleFormUrlEncodedParams,
+    updateResponseExampleStatusCode: exampleReducers.updateResponseExampleStatusCode,
+    updateResponseExampleStatusText: exampleReducers.updateResponseExampleStatusText,
+    updateResponseExampleRequestUrl: exampleReducers.updateResponseExampleRequestUrl,
+    updateResponseExampleResponse: exampleReducers.updateResponseExampleResponse,
+    updateResponseExampleDetails: exampleReducers.updateResponseExampleDetails,
+    updateResponseExampleName: exampleReducers.updateResponseExampleName,
+    updateResponseExampleDescription: exampleReducers.updateResponseExampleDescription,
+    addResponseExampleRequestHeader: exampleReducers.addResponseExampleRequestHeader,
+    updateResponseExampleRequestHeader: exampleReducers.updateResponseExampleRequestHeader,
+    deleteResponseExampleRequestHeader: exampleReducers.deleteResponseExampleRequestHeader,
+    moveResponseExampleRequestHeader: exampleReducers.moveResponseExampleRequestHeader,
+    setResponseExampleRequestHeaders: exampleReducers.setResponseExampleRequestHeaders,
+    setResponseExampleParams: exampleReducers.setResponseExampleParams,
+    updateResponseExampleBody: exampleReducers.updateResponseExampleBody,
+    addResponseExampleFileParam: exampleReducers.addResponseExampleFileParam,
+    updateResponseExampleFileParam: exampleReducers.updateResponseExampleFileParam,
+    deleteResponseExampleFileParam: exampleReducers.deleteResponseExampleFileParam,
+    addResponseExampleFormUrlEncodedParam: exampleReducers.addResponseExampleFormUrlEncodedParam,
+    updateResponseExampleFormUrlEncodedParam: exampleReducers.updateResponseExampleFormUrlEncodedParam,
+    deleteResponseExampleFormUrlEncodedParam: exampleReducers.deleteResponseExampleFormUrlEncodedParam,
+    addResponseExampleMultipartFormParam: exampleReducers.addResponseExampleMultipartFormParam,
+    updateResponseExampleMultipartFormParam: exampleReducers.updateResponseExampleMultipartFormParam,
+    deleteResponseExampleMultipartFormParam: exampleReducers.deleteResponseExampleMultipartFormParam
+    /* End Response Example Actions */
   }
 });
 
@@ -3048,7 +3095,40 @@ export const {
   updateActiveConnections,
   runWsRequestEvent,
   wsResponseReceived,
-  wsUpdateResponseSortOrder
+  wsUpdateResponseSortOrder,
+
+  /* Response Example Actions - Start */
+  addResponseExample,
+  updateResponseExample,
+  deleteResponseExample,
+  cancelResponseExampleEdit,
+  addResponseExampleHeader,
+  updateResponseExampleHeader,
+  deleteResponseExampleHeader,
+  moveResponseExampleHeader,
+  setResponseExampleHeaders,
+  addResponseExampleParam,
+  updateResponseExampleParam,
+  deleteResponseExampleParam,
+  moveResponseExampleParam,
+  updateResponseExampleRequest,
+  updateResponseExampleMultipartFormParams,
+  updateResponseExampleFileBodyParams,
+  updateResponseExampleFormUrlEncodedParams,
+  updateResponseExampleStatusCode,
+  updateResponseExampleStatusText,
+  updateResponseExampleRequestUrl,
+  updateResponseExampleResponse,
+  updateResponseExampleDetails,
+  updateResponseExampleName,
+  updateResponseExampleDescription,
+  addResponseExampleRequestHeader,
+  updateResponseExampleRequestHeader,
+  deleteResponseExampleRequestHeader,
+  moveResponseExampleRequestHeader,
+  setResponseExampleRequestHeaders,
+  setResponseExampleParams
+  /* Response Example Actions - End */
 } = collectionsSlice.actions;
 
 export default collectionsSlice.reducer;
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
index e987d8e5bc..d394807bc8 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
@@ -19,7 +19,7 @@ export const tabsSlice = createSlice({
   initialState,
   reducers: {
     addTab: (state, action) => {
-      const { uid, collectionUid, type, requestPaneTab, preview } = action.payload;
+      const { uid, collectionUid, type, requestPaneTab, preview, ...otherFields } = action.payload;
       const nonReplaceableTabTypes = [
         "variables",
         "collection-runner",
@@ -60,7 +60,8 @@ export const tabsSlice = createSlice({
           preview: preview !== undefined
             ? preview
           : !nonReplaceableTabTypes.includes(type),
-          ...(uid ? { folderUid: uid } : {})
+          ...(uid ? { folderUid: uid } : {}),
+          ...otherFields
         };
 
         state.activeTabUid = uid;
@@ -78,7 +79,8 @@ export const tabsSlice = createSlice({
         ...(uid ? { folderUid: uid } : {}),
         preview: preview !== undefined
             ? preview
-          : !nonReplaceableTabTypes.includes(type)
+          : !nonReplaceableTabTypes.includes(type),
+        ...otherFields
       });
       state.activeTabUid = uid;
     },
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index f7493cdc1d..6e74e47a29 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -453,6 +453,26 @@ const darkTheme = {
         hoverBorder: '#696969'
       }
     }
+  },
+  examples: {
+    buttonBg: '#F59E0B1A',
+    buttonColor: '#F59E0B',
+    buttonText: '#fff',
+    buttonIconColor: '#fff',
+    border: '#444',
+    urlBar: {
+      border: '#3D3D3D',
+      bg: '#292929'
+    },
+    table: {
+      thead: {
+        bg: '#292929',
+        color: '#969696'
+      }
+    },
+    checkbox: {
+      color: '#000'
+    }
   }
 };
 
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index c5865a0f9b..1ada3438bb 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -460,6 +460,26 @@ const lightTheme = {
         hoverBorder: '#696969'
       }
     }
+  },
+  examples: {
+    buttonBg: '#D977061A',
+    buttonColor: '#D97706',
+    buttonText: '#fff',
+    buttonIconColor: '#000',
+    border: '#efefef',
+    urlBar: {
+      border: '#efefef',
+      bg: '#F5F5F5'
+    },
+    table: {
+      thead: {
+        bg: '#f8f9fa',
+        color: '#212529'
+      }
+    },
+    checkbox: {
+      color: '#fff'
+    }
   }
 };
 
diff --git a/packages/bruno-app/src/ui/HeightBoundContainer/index.js b/packages/bruno-app/src/ui/HeightBoundContainer/index.js
index 149c02da1d..d7dddc2091 100644
--- a/packages/bruno-app/src/ui/HeightBoundContainer/index.js
+++ b/packages/bruno-app/src/ui/HeightBoundContainer/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import StyledWrapper from './StyledWrapper';
 
-const HeightBoundContainer = ({children}) => {
+const HeightBoundContainer = ({ children, className }) => {
   return (
-    <StyledWrapper>
+    <StyledWrapper className={className}>
       <div className="height-constraint">
         <div className="flex-boundary">
           {children}
diff --git a/packages/bruno-app/src/utils/collections/index.js b/packages/bruno-app/src/utils/collections/index.js
index 3b8440ba1f..69ded5628b 100644
--- a/packages/bruno-app/src/utils/collections/index.js
+++ b/packages/bruno-app/src/utils/collections/index.js
@@ -611,6 +611,7 @@ export const transformRequestToSaveToFilesystem = (item) => {
     seq: _item.seq,
     settings: _item.settings,
     tags: _item.tags,
+    examples: _item.examples || [],
     request: {
       method: _item.request.method,
       url: _item.request.url,
@@ -891,6 +892,54 @@ export const areItemsTheSameExceptSeqUpdate = (_item1, _item2) => {
   return isEqual(item1, item2);
 };
 
+/**
+ * Check if a request has actual changes (excluding examples)
+ * This function compares the request data between the original item and its draft,
+ * but excludes examples from the comparison to determine if the save dot should be shown
+ */
+export const hasRequestChanges = (item) => {
+  if (!item || !item.draft) {
+    return false;
+  }
+
+  // Create copies of the item and draft without examples for comparison
+  const originalItem = cloneDeep(item);
+  const draftItem = cloneDeep(item.draft);
+
+  // Remove examples from both items for comparison
+  delete originalItem.examples;
+  delete originalItem.draft;
+  delete draftItem.examples;
+  delete draftItem.draft;
+
+  return !isEqual(originalItem, draftItem);
+};
+
+/**
+ * Check if a specific example has unsaved changes
+ * This function compares the example data between the original item and its draft
+ */
+export const hasExampleChanges = (item, exampleUid) => {
+  if (!item || !item.draft || !exampleUid) {
+    return false;
+  }
+
+  // Get the original example from the saved item
+  const originalExample = item.examples?.find((ex) => ex.uid === exampleUid);
+  if (!originalExample) {
+    return false;
+  }
+
+  // Get the draft example from the draft item
+  const draftExample = item.draft.examples?.find((ex) => ex.uid === exampleUid);
+  if (!draftExample) {
+    return false;
+  }
+
+  // Compare the examples (excluding any internal metadata)
+  return !isEqual(originalExample, draftExample);
+};
+
 export const getDefaultRequestPaneTab = (item) => {
   if (item.type === 'http-request') {
     return 'params';
@@ -1252,4 +1301,35 @@ export const getRequestItemsForCollectionRun = ({ recursive, items = [], tags })
 
 export const getPropertyFromDraftOrRequest = (item, propertyKey, defaultValue = null) => {
   return item.draft ? get(item, `draft.${propertyKey}`, defaultValue) : get(item, propertyKey, defaultValue);
-};
\ No newline at end of file
+};
+
+export const transformExampleToDraft = (example, newExample) => {
+  const exampleToDraft = cloneDeep(example);
+
+  if (newExample.name) {
+    exampleToDraft.name = newExample.name;
+  }
+  if (newExample.description) {
+    exampleToDraft.description = newExample.description;
+  }
+  if (newExample.status) {
+    exampleToDraft.response.status = String(newExample.status);
+  }
+  if (newExample.statusText) {
+    exampleToDraft.response.statusText = newExample.statusText;
+  }
+  if (newExample.headers && newExample.headers.length) {
+    exampleToDraft.response.headers = newExample.headers.map((header) => ({
+      uid: uuid(),
+      name: String(header.name),
+      value: String(header.value),
+      description: String(header.description),
+      enabled: header.enabled
+    }));
+  }
+  if (newExample.body) {
+    exampleToDraft.response.body = newExample.body;
+  }
+
+  return exampleToDraft;
+};
diff --git a/packages/bruno-cli/src/utils/bru.js b/packages/bruno-cli/src/utils/bru.js
index aef2cfd181..58d4a520ab 100644
--- a/packages/bruno-cli/src/utils/bru.js
+++ b/packages/bruno-cli/src/utils/bru.js
@@ -77,6 +77,7 @@ const bruToJson = (bru) => {
       seq: !_.isNaN(sequence) ? Number(sequence) : 1,
       settings: _.get(json, 'settings', {}),
       tags: _.get(json, 'meta.tags', []),
+      examples: _.get(json, 'examples', []),
       request: {
         url: _.get(json, requestType === 'grpc-request' ? 'grpc.url' : 'http.url'),
         headers: requestType === 'grpc-request' ? _.get(json, 'metadata', []) : _.get(json, 'headers', []),
@@ -120,8 +121,6 @@ const bruToJson = (bru) => {
       transformedJson.request.body.mode = _.get(json, 'http.body', 'none');
     }
 
-
-
     return transformedJson;
   } catch (err) {
     return Promise.reject(err);
diff --git a/packages/bruno-electron/src/cache/requestUids.js b/packages/bruno-electron/src/cache/requestUids.js
index c6c3bfe7c7..2d47f027f1 100644
--- a/packages/bruno-electron/src/cache/requestUids.js
+++ b/packages/bruno-electron/src/cache/requestUids.js
@@ -11,6 +11,7 @@
  */
 
 const requestUids = new Map();
+const exampleUids = new Map();
 const { uuid } = require('../utils/common');
 
 const getRequestUid = (pathname) => {
@@ -37,8 +38,20 @@ const deleteRequestUid = (pathname) => {
   requestUids.delete(pathname);
 };
 
+const getExampleUid = (pathname, index) => {
+  let uid = exampleUids.get(`${pathname}-${index}`);
+
+  if (!uid) {
+    uid = uuid();
+    exampleUids.set(`${pathname}-${index}`, uid);
+  }
+
+  return uid;
+};
+
 module.exports = {
   getRequestUid,
   moveRequestUid,
-  deleteRequestUid
+  deleteRequestUid,
+  getExampleUid
 };
diff --git a/packages/bruno-electron/src/ipc/collection.js b/packages/bruno-electron/src/ipc/collection.js
index 8aaa20f2d1..1f01064503 100644
--- a/packages/bruno-electron/src/ipc/collection.js
+++ b/packages/bruno-electron/src/ipc/collection.js
@@ -263,7 +263,6 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
       if (!fs.existsSync(pathname)) {
         throw new Error(`path: ${pathname} does not exist`);
       }
-
       const content = await stringifyRequestViaWorker(request);
       await writeFile(pathname, content);
     } catch (error) {
diff --git a/packages/bruno-electron/src/utils/collection.js b/packages/bruno-electron/src/utils/collection.js
index 4d0fb5face..1eef73fcbb 100644
--- a/packages/bruno-electron/src/utils/collection.js
+++ b/packages/bruno-electron/src/utils/collection.js
@@ -1,6 +1,6 @@
 const { get, each, find, compact, isString, filter } = require('lodash');
 const fs = require('fs');
-const { getRequestUid } = require('../cache/requestUids');
+const { getRequestUid, getExampleUid } = require('../cache/requestUids');
 const { uuid } = require('./common');
 const os = require('os');
 const { preferencesUtil } = require('../store/preferences');
@@ -293,6 +293,7 @@ const hydrateRequestWithUuid = (request, pathname) => {
   const bodyFormUrlEncoded = get(request, 'request.body.formUrlEncoded', []);
   const bodyMultipartForm = get(request, 'request.body.multipartForm', []);
   const file = get(request, 'request.body.file', []);
+  const examples = get(request, 'examples', []);
 
   params.forEach((param) => (param.uid = uuid()));
   headers.forEach((header) => (header.uid = uuid()));
@@ -302,6 +303,22 @@ const hydrateRequestWithUuid = (request, pathname) => {
   bodyFormUrlEncoded.forEach((param) => (param.uid = uuid()));
   bodyMultipartForm.forEach((param) => (param.uid = uuid()));
   file.forEach((param) => (param.uid = uuid()));
+  examples.forEach((example, eIndex) => {
+    example.uid = getExampleUid(pathname, eIndex);
+    example.itemUid = request.uid;
+    const params = get(example, 'request.params', []);
+    const headers = get(example, 'request.headers', []);
+    const responseHeaders = get(example, 'response.headers', []);
+    const bodyMultipartForm = get(example, 'request.body.multipartForm', []);
+    const bodyFormUrlEncoded = get(example, 'request.body.formUrlEncoded', []);
+    const file = get(example, 'request.body.file', []);
+    params.forEach((param) => (param.uid = uuid()));
+    headers.forEach((header) => (header.uid = uuid()));
+    responseHeaders.forEach((header) => (header.uid = uuid()));
+    bodyMultipartForm.forEach((param) => (param.uid = uuid()));
+    bodyFormUrlEncoded.forEach((param) => (param.uid = uuid()));
+    file.forEach((param) => (param.uid = uuid()));
+  });
 
   return request;
 };
@@ -333,6 +350,7 @@ const transformRequestToSaveToFilesystem = (item) => {
     seq: _item.seq,
     settings: _item.settings,
     tags: _item.tags,
+    examples: _item.examples || [],
     request: {
       method: _item.request.method,
       url: _item.request.url,
diff --git a/packages/bruno-filestore/src/formats/bru/index.ts b/packages/bruno-filestore/src/formats/bru/index.ts
index 61002db648..db197c0630 100644
--- a/packages/bruno-filestore/src/formats/bru/index.ts
+++ b/packages/bruno-filestore/src/formats/bru/index.ts
@@ -9,9 +9,9 @@ import {
 } from '@usebruno/lang';
 import { getOauth2AdditionalParameters } from './utils/oauth2-additional-params';
 
-export const bruRequestToJson = (data: string | any, parsed: boolean = false): any => {
+export const bruRequestToJson = (data: string | any, parsed: boolean = false, isExample: boolean = false): any => {
   try {
-    const json = parsed ? data : bruToJsonV2(data);
+    const json = parsed ? data : bruToJsonV2(data, isExample);
 
     let requestType = _.get(json, 'meta.type');
     switch (requestType) {
@@ -58,8 +58,34 @@ export const bruRequestToJson = (data: string | any, parsed: boolean = false): a
         assertions: _.get(json, 'assertions', []),
         tests: _.get(json, 'tests', ''),
         docs: _.get(json, 'docs', '')
-      }
-    };
+      },
+      examples: _.get(json, 'examples', []).map((e: any) => {
+        return bruRequestToJson(e, true, true);
+      })
+    } as any;
+
+    if (isExample) {
+      delete transformedJson.seq;
+      delete transformedJson.tags;
+      delete transformedJson.settings;
+      delete transformedJson.examples;
+      delete transformedJson.request.script;
+      delete transformedJson.request.vars;
+      delete transformedJson.request.assertions;
+      delete transformedJson.request.tests;
+      delete transformedJson.request.docs;
+      transformedJson.description = _.get(json, 'meta.description', '');
+      const res = _.get(json, 'response', {});
+      transformedJson.response = {
+        headers: (res.headers || []).map((header: any) => ({
+          name: header.name,
+          value: header.value
+        })),
+        status: res.status.code,
+        statusText: res.status.text,
+        body: typeof res.body !== 'string' ? JSON.stringify(res.body, null, 2) : res.body || ''
+      };
+    }
 
     // Add request type specific fields
     if (requestType === 'grpc-request') {
@@ -104,14 +130,14 @@ export const bruRequestToJson = (data: string | any, parsed: boolean = false): a
         transformedJson.request.auth.oauth2.additionalParameters = additionalParameters;
       }
     }
-
     return transformedJson;
   } catch (error) {
+    console.log('bruRequestToJson error', error);
     throw error;
   }
 };
 
-export const jsonRequestToBru = (json: any): string => {
+export const jsonRequestToBru = (json: any, isExample: boolean = false): string => {
   try {
     let type = _.get(json, 'type');
     switch (type) {
@@ -215,6 +241,44 @@ export const jsonRequestToBru = (json: any): string => {
     bruJson.tests = _.get(json, 'request.tests', '');
     bruJson.settings = _.get(json, 'settings', {});
     bruJson.docs = _.get(json, 'request.docs', '');
+    bruJson.examples = _.get(json, 'examples', []).map((e: any) => jsonRequestToBru(e, true));
+
+    // TODO:  do we even care about certain keys like assertions, tests, docs, etc. for examples?
+    if (isExample) {
+      delete bruJson.meta.seq;
+      delete bruJson.meta.tags;
+      delete bruJson.settings;
+      delete bruJson.docs;
+      delete bruJson.assertions;
+      delete bruJson.tests;
+      delete bruJson.vars;
+      delete bruJson.auth;
+      delete bruJson.script;
+      delete bruJson.examples;
+
+      bruJson.meta.description = _.get(json, 'description', '');
+
+      const response = _.get(json, 'response', {
+        headers: [],
+        status: {
+          code: 200,
+          text: 'OK'
+        },
+        body: ''
+      });
+      bruJson.response = {
+        headers: response.headers,
+        status: {
+          code: response.status,
+          text: response.statusText
+        },
+        body: typeof response.body !== 'string' ? JSON.stringify(response.body, null, 2) : response.body || ''
+      };
+    }
+
+    if (isExample) {
+      return bruJson;
+    }
 
     const bru = jsonToBruV2(bruJson);
     return bru;
diff --git a/packages/bruno-filestore/src/index.ts b/packages/bruno-filestore/src/index.ts
index 2e1ec26d56..6e1f6964cb 100644
--- a/packages/bruno-filestore/src/index.ts
+++ b/packages/bruno-filestore/src/index.ts
@@ -19,7 +19,8 @@ import { bruRequestParseAndRedactBodyData } from './formats/bru/utils/request-pa
 
 export const parseRequest = (content: string, options: ParseOptions = { format: 'bru' }): any => {
   if (options.format === 'bru') {
-    return bruRequestToJson(content);
+    const contentJson = bruRequestToJson(content);
+    return contentJson;
   }
   throw new Error(`Unsupported format: ${options.format}`);
 };
diff --git a/packages/bruno-filestore/src/types/bruno-lang.d.ts b/packages/bruno-filestore/src/types/bruno-lang.d.ts
index 257d6e8a0d..a50930022e 100644
--- a/packages/bruno-filestore/src/types/bruno-lang.d.ts
+++ b/packages/bruno-filestore/src/types/bruno-lang.d.ts
@@ -1,5 +1,5 @@
 declare module '@usebruno/lang' {
-  export function bruToJsonV2(bruContent: string): any;
+  export function bruToJsonV2(bruContent: string, isExample?: boolean): any;
   export function jsonToBruV2(jsonData: any): string;
   export function bruToEnvJsonV2(bruContent: string): any;
   export function envJsonToBruV2(jsonData: any): string;
diff --git a/packages/bruno-lang/v2/src/bruToJson.js b/packages/bruno-lang/v2/src/bruToJson.js
index e80daa1706..e84138569e 100644
--- a/packages/bruno-lang/v2/src/bruToJson.js
+++ b/packages/bruno-lang/v2/src/bruToJson.js
@@ -29,11 +29,13 @@ const { safeParseJson, outdentString } = require('./utils');
  *
  */
 const grammar = ohm.grammar(`Bru {
-  BruFile = (meta | http | grpc | ws | query | params | headers | metadata | auths | bodies | varsandassert | script | tests | settings | docs)*
+  BruFile = (meta | http | grpc | ws | query | params | headers | metadata | auths | bodies | varsandassert | script | tests | settings | docs | responses | example)*
   auths = authawsv4 | authbasic | authbearer | authdigest | authNTLM | authOAuth2 | authwsse | authapikey | authOauth2Configs
   bodies = bodyjson | bodytext | bodyxml | bodysparql | bodygraphql | bodygraphqlvars | bodyforms | body | bodygrpc | bodyws
   bodyforms = bodyformurlencoded | bodymultipart | bodyfile
   params = paramspath | paramsquery
+  responses = responseheaders | responsebodies | responsestatus
+  responsebodies = responsebody
   
   // Oauth2 additional parameters
   authOauth2Configs = oauth2AuthReqConfig | oauth2AccessTokenReqConfig | oauth2RefreshTokenReqConfig
@@ -144,6 +146,15 @@ const grammar = ohm.grammar(`Bru {
   bodyformurlencoded = "body:form-urlencoded" dictionary
   bodymultipart = "body:multipart-form" dictionary
   bodyfile = "body:file" dictionary
+
+  // Response blocks
+  responseheaders = "response:headers" dictionary
+  responsestatus = "response:status" dictionary
+  responsebody = "response:body" st* "{" nl* textblock tagend
+
+  // Examples - multiple example blocks
+  example = "example" st* "{" nl* examplecontent tagend
+  examplecontent = (~tagend any)*
   
   script = scriptreq | scriptres
   scriptreq = "script:pre-request" st* "{" nl* textblock tagend
@@ -293,6 +304,43 @@ const createGetNumFromRecord = (obj) => (key, { fallback } = {}) => {
   return asNumber;
 };
 
+// Recursive parser for example content
+const parseExampleContent = (content) => {
+  try {
+    // Unindent the content by removing leading whitespace from each line
+    const lines = content.split('\n');
+
+    // Find the minimum indentation (excluding empty lines)
+    let minIndent = Infinity;
+    lines.forEach((line) => {
+      if (line.trim() !== '') {
+        const indent = line.match(/^[ \t]*/)[0].length;
+        minIndent = Math.min(minIndent, indent);
+      }
+    });
+
+    // Remove the minimum indentation from all lines
+    const unindentedLines = lines.map((line) => {
+      if (line.trim() === '') return line; // Keep empty lines as is
+      return line.substring(minIndent);
+    });
+
+    const unindentedContent = unindentedLines.join('\n').trim();
+
+    // Parse the unindented content using the same grammar
+    const match = grammar.match(unindentedContent);
+    if (match.succeeded()) {
+      return sem(match).ast;
+    } else {
+      console.warn('Failed to parse example content:', match.message);
+      return { error: 'Failed to parse example content' };
+    }
+  } catch (error) {
+    console.error('Error parsing example content:', error);
+    return { error: error.message };
+  }
+};
+
 const sem = grammar.createSemantics().addAttribute('ast', {
   BruFile(tags) {
     if (!tags || !tags.ast || !tags.ast.length) {
@@ -1054,6 +1102,38 @@ const sem = grammar.createSemantics().addAttribute('ast', {
         ]
       }
     };
+  },
+  // Response semantic rules
+  responseheaders(_1, dictionary) {
+    return {
+      response: {
+        headers: mapPairListToKeyValPairs(dictionary.ast)
+      }
+    };
+  },
+  responsestatus(_1, dictionary) {
+    return {
+      response: {
+        status: mapPairListToKeyValPair(dictionary.ast)
+      }
+    };
+  },
+  responsebody(_1, _2, _3, _4, textblock, _5) {
+    return {
+      response: {
+        body: outdentString(textblock.sourceString)
+      }
+    };
+  },
+  example(_1, _2, _3, _4, examplecontent, _5) {
+    const content = examplecontent.sourceString;
+    const parsedExample = parseExampleContent(content);
+    return {
+      examples: [parsedExample]
+    };
+  },
+  examplecontent(chars) {
+    return chars.sourceString;
   }
 });
 
diff --git a/packages/bruno-lang/v2/src/jsonToBru.js b/packages/bruno-lang/v2/src/jsonToBru.js
index 9606324ffc..a162e98b27 100644
--- a/packages/bruno-lang/v2/src/jsonToBru.js
+++ b/packages/bruno-lang/v2/src/jsonToBru.js
@@ -17,8 +17,7 @@ const stripLastLine = (text) => {
 };
 
 const jsonToBru = (json) => {
-  const { meta, http, grpc, ws, params, headers, metadata, auth, body, script, tests, vars, assertions, settings, docs } = json;
-
+  const { meta, http, grpc, ws, params, headers, metadata, auth, body, script, tests, vars, assertions, settings, docs, examples, response } = json;
 
   let bru = '';
 
@@ -750,6 +749,47 @@ ${indentString(docs)}
 `;
   }
 
+  // Handle response blocks
+  if (response) {
+    // Response headers
+    if (response.headers && response.headers.length) {
+      bru += 'response:headers {';
+      if (enabled(response.headers).length) {
+        bru += `\n${indentString(enabled(response.headers)
+          .map((item) => `${quoteKey(item.name)}: ${item.value}`)
+          .join('\n'))}`;
+      }
+
+      if (disabled(response.headers).length) {
+        bru += `\n${indentString(disabled(response.headers)
+          .map((item) => `~${quoteKey(item.name)}: ${item.value}`)
+          .join('\n'))}`;
+      }
+
+      bru += '\n}\n\n';
+    }
+
+    // Response status
+    if (response.status) {
+      bru += 'response:status {\n';
+      for (const key in response.status) {
+        bru += `  ${key}: ${response.status[key]}\n`;
+      }
+      bru += '}\n\n';
+    }
+
+    if (response.body) {
+      bru += `response:body {\n${indentString(response.body)}\n}\n\n`;
+    }
+  }
+
+  if (examples && examples.length) {
+    examples.forEach((example) => {
+      const bruExample = jsonToBru(example);
+      bru += `example {\n${indentString(bruExample)}\n}\n\n`;
+    });
+  }
+
   return stripLastLine(bru);
 };
 
diff --git a/packages/bruno-lang/v2/tests/examples/examples.spec.js b/packages/bruno-lang/v2/tests/examples/examples.spec.js
new file mode 100644
index 0000000000..3449a2bcf8
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/examples.spec.js
@@ -0,0 +1,414 @@
+const fs = require('fs');
+const path = require('path');
+const bruToJson = require('../../src/bruToJson');
+const jsonToBru = require('../../src/jsonToBru');
+
+describe('Examples functionality', () => {
+  describe('Fixture-based tests', () => {
+    it('should parse examples-simple.bru correctly', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'examples-simple.bru'), 'utf8');
+      const expected = require('./fixtures/examples-simple.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should parse examples-complex.bru correctly', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'examples-complex.bru'), 'utf8');
+      const output = bruToJson(input);
+
+      // Basic structure validation
+      expect(output.meta).toBeDefined();
+      expect(output.http).toBeDefined();
+      expect(output.examples).toBeDefined();
+      expect(Array.isArray(output.examples)).toBe(true);
+      expect(output.examples).toHaveLength(3);
+
+      // Check each example has the expected structure
+      output.examples.forEach((example, index) => {
+        expect(example.meta).toBeDefined();
+        expect(example.http).toBeDefined();
+        expect(example.headers).toBeDefined();
+        expect(example.auth).toBeDefined();
+        expect(example.body).toBeDefined();
+        if (example.response) {
+          expect(example.response.status).toBeDefined();
+          expect(example.response.body).toBeDefined();
+        }
+      });
+
+      // Check specific examples
+      const jsonExample = output.examples[0];
+      expect(jsonExample.meta.name).toBe('JSON API Example');
+      expect(jsonExample.http.method).toBe('post');
+      expect(jsonExample.auth.basic).toBeDefined();
+      expect(jsonExample.body.json).toContain('"format": "json"');
+
+      const xmlExample = output.examples[1];
+      expect(xmlExample.meta.name).toBe('XML API Example');
+      expect(xmlExample.auth.bearer).toBeDefined();
+      expect(xmlExample.body.xml).toContain('<format>xml</format>');
+
+      const textExample = output.examples[2];
+      expect(textExample.meta.name).toBe('Text API Example');
+      expect(textExample.auth.apikey).toBeDefined();
+    });
+  });
+
+  describe('Basic examples parsing', () => {
+    it('should parse a single example block', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-single-example.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-single-example.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should parse multiple example blocks', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-multiple-examples.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-multiple-examples.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle examples with response blocks', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-response-example.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-response-example.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+  });
+
+  describe('Examples with different body types', () => {
+    it('should handle examples with JSON body', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-json-body.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-json-body.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle examples with XML body', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-xml-body.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-xml-body.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle examples with text body', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-text-body.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-text-body.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+  });
+
+  describe('Examples with authentication', () => {
+    it('should handle examples with basic auth', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-basic-auth.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-basic-auth.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle examples with bearer token', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-bearer-auth.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-bearer-auth.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty example blocks', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-empty-example.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-empty-example.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle malformed example content gracefully', () => {
+      const input = `
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  meta {
+    name: Malformed Example
+    type: http
+  }
+  
+  invalid-syntax {
+    this is not valid bru syntax
+  }
+}`;
+
+      const result = bruToJson(input);
+
+      expect(result.examples).toBeDefined();
+      expect(result.examples).toHaveLength(1);
+      // Should handle malformed content gracefully - may contain error
+      expect(result.examples[0]).toBeDefined();
+      // Either parsed successfully or contains error
+      expect(result.examples[0].error || result.examples[0].meta).toBeDefined();
+    });
+
+    it('should work without any examples', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-no-examples.bru'), 'utf8');
+      const expected = require('./fixtures/bruToJson-no-examples.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+  });
+
+  describe('Complex examples', () => {
+    it('should handle examples with all features', () => {
+      const input = `
+meta {
+  name: Complex API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: Complete Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/users
+  }
+  
+  headers {
+    content-type: application/json
+    authorization: Bearer token123
+  }
+  
+  params:query {
+    page: 1
+    limit: 10
+  }
+  
+  auth:oauth2 {
+    grant_type: client_credentials
+    client_id: test-client
+    client_secret: test-secret
+    access_token_url: https://auth.example.com/token
+  }
+  
+  body:json {
+    {
+      "name": "John Doe",
+      "email": "john@example.com"
+    }
+  }
+  
+  script:pre-request {
+    console.log('Making request to create user');
+  }
+  
+  script:post-response {
+    console.log('User created successfully');
+  }
+  
+  response:headers {
+    content-type: application/json
+    location: https://api.example.com/users/123
+  }
+  
+  response:status {
+    code: 201
+  }
+  
+  response:body {
+    {
+      "id": 123,
+      "name": "John Doe",
+      "email": "john@example.com",
+      "created_at": "2023-01-15T10:30:00Z"
+    }
+  }
+}`;
+
+      const result = bruToJson(input);
+
+      expect(result.examples).toBeDefined();
+      expect(result.examples).toHaveLength(1);
+
+      const example = result.examples[0];
+
+      // Check all features are present
+      expect(example.meta).toBeDefined();
+      expect(example.http).toBeDefined();
+      expect(example.headers).toBeDefined();
+      expect(example.params).toBeDefined();
+      expect(example.auth).toBeDefined();
+      expect(example.body).toBeDefined();
+      expect(example.script).toBeDefined();
+      expect(example.response).toBeDefined();
+
+      // Check specific values
+      expect(example.meta.name).toBe('Complete Example');
+      expect(example.http.method).toBe('post');
+      expect(example.headers).toHaveLength(2);
+      expect(example.params).toHaveLength(2);
+      expect(example.auth.oauth2).toBeDefined();
+      expect(example.body.json).toContain('"name": "John Doe"');
+      expect(example.script.req).toContain('Making request');
+      expect(example.script.res).toContain('User created successfully');
+      expect(example.response.status.code).toBe('201');
+      expect(example.response.body).toContain('"id": 123');
+    });
+  });
+
+  describe('jsonToBru conversion', () => {
+    it('should convert JSON with examples to BRU format', () => {
+      const jsonInput = require('./fixtures/jsonToBru-simple.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-simple.bru'), 'utf8');
+      const output = jsonToBru(jsonInput);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle multiple examples correctly', () => {
+      const jsonInput = require('./fixtures/jsonToBru-multiple.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-multiple.bru'), 'utf8');
+      const output = jsonToBru(jsonInput);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle examples with response blocks', () => {
+      const jsonInput = require('./fixtures/jsonToBru-response.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-response.bru'), 'utf8');
+      const output = jsonToBru(jsonInput);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle examples with authentication', () => {
+      const jsonInput = require('./fixtures/jsonToBru-auth.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-auth.bru'), 'utf8');
+      const output = jsonToBru(jsonInput);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle examples with different body types', () => {
+      const jsonInput = require('./fixtures/jsonToBru-bodytypes.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-bodytypes.bru'), 'utf8');
+      const output = jsonToBru(jsonInput);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle round-trip conversion correctly', () => {
+      const originalBru = fs.readFileSync(path.join(__dirname, 'fixtures', 'examples-simple.bru'), 'utf8');
+      const jsonFromBru = bruToJson(originalBru);
+      const bruFromJson = jsonToBru(jsonFromBru);
+      const jsonFromBruAgain = bruToJson(bruFromJson);
+
+      // The examples should be preserved through the round-trip
+      expect(jsonFromBruAgain.examples).toBeDefined();
+      expect(Array.isArray(jsonFromBruAgain.examples)).toBe(true);
+      expect(jsonFromBruAgain.examples).toHaveLength(2);
+      expect(jsonFromBruAgain.examples[0].meta.name).toBe('Get User by ID');
+      expect(jsonFromBruAgain.examples[1].meta.name).toBe('Create New User');
+    });
+
+    it('should handle empty examples array', () => {
+      const jsonInput = {
+        meta: {
+          name: 'No Examples API',
+          type: 'http'
+        },
+        http: {
+          method: 'get',
+          url: 'https://api.example.com/test'
+        },
+        examples: []
+      };
+
+      const expected = `meta {
+  name: No Examples API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+`;
+
+      const output = jsonToBru(jsonInput);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should handle examples without meta block', () => {
+      const jsonInput = {
+        meta: {
+          name: 'Test API',
+          type: 'http'
+        },
+        http: {
+          method: 'get',
+          url: 'https://api.example.com/test'
+        },
+        examples: [
+          {
+            http: {
+              method: 'post',
+              url: 'https://api.example.com/example'
+            },
+            headers: [
+              {
+                name: 'authorization',
+                value: 'Bearer token123',
+                enabled: true
+              }
+            ]
+          }
+        ]
+      };
+
+      const expected = `meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  post {
+    url: https://api.example.com/example
+  }
+  
+  headers {
+    authorization: Bearer token123
+  }
+  
+}
+`;
+
+      const output = jsonToBru(jsonInput);
+
+      expect(output).toEqual(expected);
+    });
+  });
+});
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.bru
new file mode 100644
index 0000000000..fe394e43e3
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.bru
@@ -0,0 +1,20 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  meta {
+    name: Basic Auth Example
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/protected
+  }
+  
+  auth:basic {
+    username: testuser
+    password: testpass
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.json
new file mode 100644
index 0000000000..ce23f289bf
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.json
@@ -0,0 +1,26 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Basic Auth Example",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/protected"
+            },
+            "auth": {
+                "basic": {
+                    "username": "testuser",
+                    "password": "testpass"
+                }
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.bru
new file mode 100644
index 0000000000..436d52bdea
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.bru
@@ -0,0 +1,19 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  meta {
+    name: Bearer Token Example
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/protected
+  }
+  
+  auth:bearer {
+    token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.json
new file mode 100644
index 0000000000..b139cd67d6
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.json
@@ -0,0 +1,25 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Bearer Token Example",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/protected"
+            },
+            "auth": {
+                "bearer": {
+                    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
+                }
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.bru
new file mode 100644
index 0000000000..9718a18990
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.bru
@@ -0,0 +1,8 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.json
new file mode 100644
index 0000000000..4fcfd47be5
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.json
@@ -0,0 +1,10 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "examples": [
+        {}
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.bru
new file mode 100644
index 0000000000..3a7cf97ca7
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.bru
@@ -0,0 +1,22 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  meta {
+    name: JSON Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/data
+  }
+  
+  body:json {
+    {
+      "name": "Test",
+      "value": 123
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.json
new file mode 100644
index 0000000000..73af1126c1
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.json
@@ -0,0 +1,23 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "JSON Example",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/data"
+            },
+            "body": {
+                "json": "{\n  \"name\": \"Test\",\n  \"value\": 123\n}"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.bru
new file mode 100644
index 0000000000..fcf6c1153e
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.bru
@@ -0,0 +1,36 @@
+meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: Example 1
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/example1
+  }
+}
+
+example {
+  meta {
+    name: Example 2
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/example2
+  }
+  
+  body:json {
+    {
+      "data": "test"
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.json
new file mode 100644
index 0000000000..1f21185d22
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.json
@@ -0,0 +1,38 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Example 1",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/example1"
+            }
+        },
+        {
+            "meta": {
+                "name": "Example 2",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/example2"
+            },
+            "body": {
+                "json": "{\n  \"data\": \"test\"\n}"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.bru
new file mode 100644
index 0000000000..d3913762a5
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.bru
@@ -0,0 +1,8 @@
+meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.json
new file mode 100644
index 0000000000..a01b22344f
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.json
@@ -0,0 +1,11 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    }
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.bru
new file mode 100644
index 0000000000..d57ba7fbe8
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.bru
@@ -0,0 +1,34 @@
+meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: Example with Response
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/users/123
+  }
+  
+  response:headers {
+    content-type: application/json
+  }
+  
+  response:status {
+    code: 200
+  }
+  
+  response:body {
+    {
+      "id": 123,
+      "name": "John Doe"
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.json
new file mode 100644
index 0000000000..fb43aa26f2
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.json
@@ -0,0 +1,37 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Example with Response",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/users/123"
+            },
+            "response": {
+                "headers": [
+                    {
+                        "name": "content-type",
+                        "value": "application/json",
+                        "enabled": true
+                    }
+                ],
+                "status": {
+                    "code": "200"
+                },
+                "body": "{\n  \"id\": 123,\n  \"name\": \"John Doe\"\n}"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.bru
new file mode 100644
index 0000000000..0f043b0042
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.bru
@@ -0,0 +1,23 @@
+meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: Example Request
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/example
+  }
+  
+  headers {
+    authorization: Bearer token123
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.json
new file mode 100644
index 0000000000..0442b9baac
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.json
@@ -0,0 +1,31 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Example Request",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/example"
+            },
+            "headers": [
+                {
+                    "name": "authorization",
+                    "value": "Bearer token123",
+                    "enabled": true
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.bru
new file mode 100644
index 0000000000..cdedf35fed
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.bru
@@ -0,0 +1,20 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  meta {
+    name: Text Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/data
+  }
+  
+  body:text {
+    Plain text data
+    with multiple lines
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.json
new file mode 100644
index 0000000000..ea4c8afda7
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.json
@@ -0,0 +1,23 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Text Example",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/data"
+            },
+            "body": {
+                "text": "Plain text data\nwith multiple lines"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.bru
new file mode 100644
index 0000000000..57701f306b
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.bru
@@ -0,0 +1,23 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  meta {
+    name: XML Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/data
+  }
+  
+  body:xml {
+    <?xml version="1.0" encoding="UTF-8"?>
+    <data>
+      <name>Test</name>
+      <value>123</value>
+    </data>
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.json
new file mode 100644
index 0000000000..6132b062d4
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.json
@@ -0,0 +1,23 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http",
+        "seq": 1
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "XML Example",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/data"
+            },
+            "body": {
+                "xml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<data>\n  <name>Test</name>\n  <value>123</value>\n</data>"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/examples-complex.bru b/packages/bruno-lang/v2/tests/examples/fixtures/examples-complex.bru
new file mode 100644
index 0000000000..5d021c0132
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/examples-complex.bru
@@ -0,0 +1,142 @@
+meta {
+  name: Multi-format API
+  type: http
+}
+
+get {
+  url: https://api.example.com/data
+}
+
+headers {
+  content-type: application/json
+}
+
+body:json {
+  {
+    "message": "API supports multiple formats"
+  }
+}
+
+example {
+  meta {
+    name: JSON API Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/json
+  }
+  
+  headers {
+    content-type: application/json
+    authorization: Bearer json-token
+  }
+  
+  auth:basic {
+    username: jsonuser
+    password: jsonpass
+  }
+  
+  body:json {
+    {
+      "format": "json",
+      "data": {
+        "name": "JSON Example",
+        "value": 123
+      }
+    }
+  }
+  
+  response:status {
+    code: 201
+  }
+  
+  response:body {
+    {
+      "id": 1,
+      "format": "json",
+      "created": true
+    }
+  }
+}
+
+example {
+  meta {
+    name: XML API Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/xml
+  }
+  
+  headers {
+    content-type: application/xml
+    authorization: Bearer xml-token
+  }
+  
+  auth:bearer {
+    token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+  }
+  
+  body:xml {
+    <?xml version="1.0" encoding="UTF-8"?>
+    <data>
+      <format>xml</format>
+      <name>XML Example</name>
+      <value>456</value>
+    </data>
+  }
+  
+  response:status {
+    code: 201
+  }
+  
+  response:body {
+    <?xml version="1.0" encoding="UTF-8"?>
+    <response>
+      <id>2</id>
+      <format>xml</format>
+      <created>true</created>
+    </response>
+  }
+}
+
+example {
+  meta {
+    name: Text API Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/text
+  }
+  
+  headers {
+    content-type: text/plain
+    authorization: Bearer text-token
+  }
+  
+  auth:apikey {
+    key: X-API-Key
+    value: text-api-key-123
+    placement: header
+  }
+  
+  body:text {
+    Plain text data
+    Format: text
+    Name: Text Example
+    Value: 789
+  }
+  
+  response:status {
+    code: 201
+  }
+  
+  response:body {
+    Success: true
+    Format: text
+    ID: 3
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.bru
new file mode 100644
index 0000000000..913dedcda0
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.bru
@@ -0,0 +1,71 @@
+meta {
+  name: User API Documentation
+  type: http
+}
+
+get {
+  url: https://api.example.com/users
+}
+
+example {
+  meta {
+    name: Get User by ID
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/users/123
+  }
+  
+  headers {
+    authorization: Bearer token123
+  }
+  
+  response:status {
+    code: 200
+  }
+  
+  response:body {
+    {
+      "id": 123,
+      "name": "John Doe",
+      "email": "john@example.com"
+    }
+  }
+}
+
+example {
+  meta {
+    name: Create New User
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/users
+  }
+  
+  headers {
+    content-type: application/json
+    authorization: Bearer token123
+  }
+  
+  body:json {
+    {
+      "name": "New User",
+      "email": "newuser@example.com"
+    }
+  }
+  
+  response:status {
+    code: 201
+  }
+  
+  response:body {
+    {
+      "id": 456,
+      "name": "New User",
+      "email": "newuser@example.com",
+      "created_at": "2023-01-15T10:30:00Z"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.json b/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.json
new file mode 100644
index 0000000000..3deb01c842
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.json
@@ -0,0 +1,69 @@
+{
+    "meta": {
+        "name": "User API Documentation",
+        "type": "http",
+        "seq": 1
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/users"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Get User by ID",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/users/123"
+            },
+            "headers": [
+                {
+                    "name": "authorization",
+                    "value": "Bearer token123",
+                    "enabled": true
+                }
+            ],
+            "response": {
+                "status": {
+                    "code": "200"
+                },
+                "body": "{\n  \"id\": 123,\n  \"name\": \"John Doe\",\n  \"email\": \"john@example.com\"\n}"
+            }
+        },
+        {
+            "meta": {
+                "name": "Create New User",
+                "type": "http",
+                "seq": 1
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/users"
+            },
+            "headers": [
+                {
+                    "name": "content-type",
+                    "value": "application/json",
+                    "enabled": true
+                },
+                {
+                    "name": "authorization",
+                    "value": "Bearer token123",
+                    "enabled": true
+                }
+            ],
+            "body": {
+                "json": "{\n  \"name\": \"New User\",\n  \"email\": \"newuser@example.com\"\n}"
+            },
+            "response": {
+                "status": {
+                    "code": "201"
+                },
+                "body": "{\n  \"id\": 456,\n  \"name\": \"New User\",\n  \"email\": \"newuser@example.com\",\n  \"created_at\": \"2023-01-15T10:30:00Z\"\n}"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.bru
new file mode 100644
index 0000000000..c17ccef6aa
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.bru
@@ -0,0 +1,41 @@
+meta {
+  name: Auth Example API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: Basic Auth Example
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/protected
+  }
+  
+  auth:basic {
+    username: testuser
+    password: testpass
+  }
+  
+}
+
+example {
+  meta {
+    name: Bearer Token Example
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/protected2
+  }
+  
+  auth:bearer {
+    token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+  }
+  
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.json
new file mode 100644
index 0000000000..ebf6c276fe
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.json
@@ -0,0 +1,43 @@
+{
+    "meta": {
+        "name": "Auth Example API",
+        "type": "http"
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Basic Auth Example",
+                "type": "http"
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/protected"
+            },
+            "auth": {
+                "basic": {
+                    "username": "testuser",
+                    "password": "testpass"
+                }
+            }
+        },
+        {
+            "meta": {
+                "name": "Bearer Token Example",
+                "type": "http"
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/protected2"
+            },
+            "auth": {
+                "bearer": {
+                    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
+                }
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.bru
new file mode 100644
index 0000000000..c430595306
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.bru
@@ -0,0 +1,64 @@
+meta {
+  name: Body Types API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: JSON Body Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/json
+  }
+  
+  body:json {
+    {
+      "name": "Test",
+      "value": 123
+    }
+  }
+  
+}
+
+example {
+  meta {
+    name: XML Body Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/xml
+  }
+  
+  body:xml {
+    <?xml version="1.0"?>
+    <data>
+      <name>Test</name>
+      <value>123</value>
+    </data>
+  }
+  
+}
+
+example {
+  meta {
+    name: Text Body Example
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/text
+  }
+  
+  body:text {
+    Plain text data
+    with multiple lines
+  }
+  
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.json
new file mode 100644
index 0000000000..3693e4c0e1
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.json
@@ -0,0 +1,51 @@
+{
+    "meta": {
+        "name": "Body Types API",
+        "type": "http"
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "JSON Body Example",
+                "type": "http"
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/json"
+            },
+            "body": {
+                "json": "{\n  \"name\": \"Test\",\n  \"value\": 123\n}"
+            }
+        },
+        {
+            "meta": {
+                "name": "XML Body Example",
+                "type": "http"
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/xml"
+            },
+            "body": {
+                "xml": "<?xml version=\"1.0\"?>\n<data>\n  <name>Test</name>\n  <value>123</value>\n</data>"
+            }
+        },
+        {
+            "meta": {
+                "name": "Text Body Example",
+                "type": "http"
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/text"
+            },
+            "body": {
+                "text": "Plain text data\nwith multiple lines"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.bru
new file mode 100644
index 0000000000..6dd5d78b41
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.bru
@@ -0,0 +1,38 @@
+meta {
+  name: Multi-Example API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: Example 1
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/example1
+  }
+  
+}
+
+example {
+  meta {
+    name: Example 2
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/example2
+  }
+  
+  body:json {
+    {
+      "data": "test2"
+    }
+  }
+  
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.json
new file mode 100644
index 0000000000..a78212d05c
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.json
@@ -0,0 +1,35 @@
+{
+    "meta": {
+        "name": "Multi-Example API",
+        "type": "http"
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Example 1",
+                "type": "http"
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/example1"
+            }
+        },
+        {
+            "meta": {
+                "name": "Example 2",
+                "type": "http"
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/example2"
+            },
+            "body": {
+                "json": "{\n  \"data\": \"test2\"\n}"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.bru
new file mode 100644
index 0000000000..572111caa9
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.bru
@@ -0,0 +1,35 @@
+meta {
+  name: Response Example API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: Response Example
+    type: http
+  }
+  
+  get {
+    url: https://api.example.com/users/123
+  }
+  
+  response:headers {
+    content-type: application/json
+  }
+  
+  response:status {
+    code: 200
+  }
+  
+  response:body {
+    {
+      "id": 123,
+      "name": "John Doe"
+    }
+  }
+  
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.json
new file mode 100644
index 0000000000..f57a54ffc1
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.json
@@ -0,0 +1,35 @@
+{
+    "meta": {
+        "name": "Response Example API",
+        "type": "http"
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Response Example",
+                "type": "http"
+            },
+            "http": {
+                "method": "get",
+                "url": "https://api.example.com/users/123"
+            },
+            "response": {
+                "headers": [
+                    {
+                        "name": "content-type",
+                        "value": "application/json",
+                        "enabled": true
+                    }
+                ],
+                "status": {
+                    "code": "200"
+                },
+                "body": "{\n  \"id\": 123,\n  \"name\": \"John Doe\"\n}"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.bru
new file mode 100644
index 0000000000..f5fd12fd7e
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.bru
@@ -0,0 +1,30 @@
+meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  meta {
+    name: Example Request
+    type: http
+  }
+  
+  post {
+    url: https://api.example.com/example
+  }
+  
+  headers {
+    authorization: Bearer token123
+  }
+  
+  body:json {
+    {
+      "data": "test"
+    }
+  }
+  
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.json
new file mode 100644
index 0000000000..2af7b61db7
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.json
@@ -0,0 +1,32 @@
+{
+    "meta": {
+        "name": "Test API",
+        "type": "http"
+    },
+    "http": {
+        "method": "get",
+        "url": "https://api.example.com/test"
+    },
+    "examples": [
+        {
+            "meta": {
+                "name": "Example Request",
+                "type": "http"
+            },
+            "http": {
+                "method": "post",
+                "url": "https://api.example.com/example"
+            },
+            "headers": [
+                {
+                    "name": "authorization",
+                    "value": "Bearer token123",
+                    "enabled": true
+                }
+            ],
+            "body": {
+                "json": "{\n  \"data\": \"test\"\n}"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/fixtures/request.json b/packages/bruno-lang/v2/tests/fixtures/request.json
index 1b6e664970..86cb48e5de 100644
--- a/packages/bruno-lang/v2/tests/fixtures/request.json
+++ b/packages/bruno-lang/v2/tests/fixtures/request.json
@@ -3,7 +3,10 @@
     "name": "Send Bulk SMS",
     "type": "http",
     "seq": "1",
-    "tags": ["foo", "bar"]
+    "tags": [
+      "foo",
+      "bar"
+    ]
   },
   "http": {
     "method": "get",
@@ -31,14 +34,14 @@
       "enabled": true
     },
     {
-      "name" : "colon:parameter",
-      "value" : "is allowed",
+      "name": "colon:parameter",
+      "value": "is allowed",
       "type": "query",
       "enabled": true
     },
     {
-      "name" : "nested escaped \"quote\"",
-      "value" : "is allowed",
+      "name": "nested escaped \"quote\"",
+      "value": "is allowed",
       "type": "query",
       "enabled": true
     },
@@ -49,8 +52,8 @@
       "enabled": true
     },
     {
-      "name" : "disabled:colon:parameter",
-      "value" : "is allowed",
+      "name": "disabled:colon:parameter",
+      "value": "is allowed",
       "type": "query",
       "enabled": false
     },
@@ -132,7 +135,7 @@
     "oauth2": {
       "accessTokenUrl": "http://localhost:8080/api/auth/oauth2/authorization_code/token",
       "authorizationUrl": "http://localhost:8080/api/auth/oauth2/authorization_code/authorize",
-       "autoFetchToken": true,
+      "autoFetchToken": true,
       "autoRefreshToken": true,
       "callbackUrl": "http://localhost:8080/api/auth/oauth2/authorization_code/callback",
       "clientId": "client_id_1",
@@ -262,7 +265,7 @@
         "type": "text"
       }
     ],
-    "file" : [
+    "file": [
       {
         "filePath": "path/to/file.json",
         "contentType": "application/json",
@@ -339,4 +342,4 @@
   },
   "tests": "function onResponse(request, response) {\n  expect(response.status).to.equal(200);\n}",
   "docs": "This request needs auth token to be set in the headers."
-}
+}
\ No newline at end of file
diff --git a/packages/bruno-schema/src/collections/index.js b/packages/bruno-schema/src/collections/index.js
index 10852a3da6..b9755ccb51 100644
--- a/packages/bruno-schema/src/collections/index.js
+++ b/packages/bruno-schema/src/collections/index.js
@@ -317,6 +317,36 @@ const requestParamsSchema = Yup.object({
   .noUnknown(true)
   .strict();
 
+const exampleSchema = Yup.object({
+  uid: uidSchema,
+  itemUid: uidSchema,
+  name: Yup.string().min(1, 'name must be at least 1 character').required('name is required'),
+  description: Yup.string().nullable(),
+  type: Yup.string().oneOf(['http-request', 'graphql-request', 'grpc-request',]).required('type is required'),
+  request: Yup.object({
+    url: requestUrlSchema,
+    method: requestMethodSchema,
+    headers: Yup.array().of(keyValueSchema).required('headers are required'),
+    params: Yup.array().of(requestParamsSchema).required('params are required'),
+    auth: authSchema,
+    body: requestBodySchema
+  })
+    .noUnknown(true)
+    .strict()
+    .nullable(),
+  response: Yup.object({
+    status: Yup.string().nullable(),
+    statusText: Yup.string().nullable(),
+    headers: Yup.array().of(keyValueSchema).nullable(),
+    body: Yup.mixed().nullable(),
+  })
+    .noUnknown(true)
+    .strict()
+    .nullable()
+})
+  .noUnknown(true)
+  .strict();
+
 // Right now, the request schema is very tightly coupled with http request
 // As we introduce more request types in the future, we will improve the definition to support
 // schema structure based on other request type
@@ -342,7 +372,7 @@ const requestSchema = Yup.object({
     .nullable(),
   assertions: Yup.array().of(keyValueSchema).nullable(),
   tests: Yup.string().nullable(),
-  docs: Yup.string().nullable()
+  docs: Yup.string().nullable(),
 })
   .noUnknown(true)
   .strict();
@@ -378,7 +408,7 @@ const grpcRequestSchema = Yup.object({
     .nullable(),
   assertions: Yup.array().of(keyValueSchema).nullable(),
   tests: Yup.string().nullable(),
-  docs: Yup.string().nullable()
+  docs: Yup.string().nullable(),
 })
   .noUnknown(true)
   .strict();
@@ -512,6 +542,11 @@ const itemSchema = Yup.object({
     otherwise: Yup.mixed().nullable().notRequired()
   }),
   items: Yup.lazy(() => Yup.array().of(itemSchema)),
+  examples: Yup.array().of(exampleSchema).when('type', {
+    is: (type) => ['http-request', 'graphql-request', 'grpc-request'].includes(type),
+    then: (schema) => schema.nullable(),
+    otherwise: Yup.array().strip()
+  }),
   filename: Yup.string().nullable(),
   pathname: Yup.string().nullable()
 })
diff --git a/packages/bruno-tests/collection/echo/echo json.bru b/packages/bruno-tests/collection/echo/echo json.bru
index 62137591eb..be27fb7c78 100644
--- a/packages/bruno-tests/collection/echo/echo json.bru	
+++ b/packages/bruno-tests/collection/echo/echo json.bru	
@@ -45,3 +45,4 @@ tests {
     });
   });  
 }
+
diff --git a/tests/response-examples/collection/bruno.json b/tests/response-examples/collection/bruno.json
new file mode 100644
index 0000000000..03a26e1f76
--- /dev/null
+++ b/tests/response-examples/collection/bruno.json
@@ -0,0 +1,5 @@
+{
+  "version": "1",
+  "name": "collection",
+  "type": "collection"
+}
diff --git a/tests/response-examples/collection/echo-request.bru b/tests/response-examples/collection/echo-request.bru
new file mode 100644
index 0000000000..694e3a104b
--- /dev/null
+++ b/tests/response-examples/collection/echo-request.bru
@@ -0,0 +1,22 @@
+meta {
+  name: echo-request
+  type: http
+  seq: 1
+}
+
+post {
+  url: https://testbench-sanity.usebruno.com/api/echo/json
+  body: json
+  auth: none
+}
+
+headers {
+  Content-Type: application/json
+}
+
+body:json {
+  {
+    "message": "Hello World",
+    "timestamp": "{{$timestamp}}"
+  }
+}
diff --git a/tests/response-examples/create-example.spec.ts b/tests/response-examples/create-example.spec.ts
new file mode 100644
index 0000000000..5e1f6d4f14
--- /dev/null
+++ b/tests/response-examples/create-example.spec.ts
@@ -0,0 +1,96 @@
+import { test, expect } from '../../playwright';
+
+test.describe('Create Response Examples', () => {
+  test('should create a response example from response bookmark', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Send request and create example', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click();
+
+      await expect(page.getByText('Save Response as Example')).toBeVisible();
+      await expect(page.getByTestId('create-example-name-input')).toBeVisible();
+      await expect(page.getByTestId('create-example-description-input')).toBeVisible();
+
+      await page.getByTestId('create-example-name-input').fill('Test Example from Bookmark');
+      await page.getByTestId('create-example-description-input').fill('This is a test example created from response bookmark');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      await expect(page.getByText('Test Example from Bookmark')).toBeVisible();
+    });
+  });
+
+  test('should require example name to create', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Test name requirement', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click();
+
+      await expect(page.getByRole('button', { name: 'Create Example' })).toBeDisabled();
+      await page.getByTestId('create-example-name-input').fill('Required Name');
+      await expect(page.getByRole('button', { name: 'Create Example' })).toBeEnabled();
+      await page.getByRole('button', { name: 'Cancel' }).click();
+    });
+  });
+
+  test('should close modal when cancelled', async ({ pageWithUserData: page }) => {
+    await test.step('Test modal cancellation', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByRole('button', { name: 'Cancel' }).click();
+      await expect(page.getByText('Save Response as Example')).not.toBeVisible();
+    });
+  });
+
+  test('should reset form when modal is reopened', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Test form reset', async () => {
+      await page.locator('#send-request').getByRole('img').nth(2).click();
+      await page.waitForTimeout(2000);
+      await page.getByTestId('response-bookmark-btn').click();
+
+      await page.getByTestId('create-example-name-input').fill('Test Name');
+      await page.getByTestId('create-example-description-input').fill('Test Description');
+      await page.getByRole('button', { name: 'Cancel' }).click();
+
+      await page.getByTestId('response-bookmark-btn').click();
+      await expect(page.getByTestId('create-example-name-input')).toHaveValue('');
+      await expect(page.getByTestId('create-example-description-input')).toHaveValue('');
+      await page.getByRole('button', { name: 'Cancel' }).click();
+    });
+  });
+
+  test('should show created example in sidebar after expanding request', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Create example and verify sidebar visibility', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click();
+
+      await page.getByTestId('create-example-name-input').fill('Sidebar Test Example');
+      await page.getByTestId('create-example-description-input').fill('This example should appear in the sidebar');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+    });
+
+    await test.step('Verify example appears in sidebar', async () => {
+      await page.getByTestId('request-item-chevron').click();
+      const exampleItem = page.locator('.collection-item-name').getByText('Sidebar Test Example');
+      await expect(exampleItem).toBeVisible();
+
+      await exampleItem.click();
+    });
+  });
+});
diff --git a/tests/response-examples/edit-example.spec.ts b/tests/response-examples/edit-example.spec.ts
new file mode 100644
index 0000000000..bc13e9d147
--- /dev/null
+++ b/tests/response-examples/edit-example.spec.ts
@@ -0,0 +1,119 @@
+import { test, expect } from '../../playwright';
+
+test.describe('Edit Response Examples', () => {
+  test('should enter edit mode when edit button is clicked', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('make a successful request, and create an example', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('create-example-name-input').fill('Test Example');
+      await page.getByTestId('create-example-description-input').fill('This is a test example');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Test edit mode', async () => {
+      await expect(page.getByTestId('response-example-title')).toBeVisible();
+      await expect(page.getByTestId('response-example-edit-btn')).toBeVisible();
+      await page.getByTestId('response-example-edit-btn').click();
+      await expect(page.getByTestId('response-example-name-input')).toBeVisible();
+      await expect(page.getByTestId('response-example-description-input')).toBeVisible();
+      await expect(page.getByTestId('response-example-save-btn')).toBeVisible();
+      await expect(page.getByTestId('response-example-cancel-btn')).toBeVisible();
+    });
+  });
+
+  test('should allow editing example name', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Edit example name', async () => {
+      await page.getByTestId('response-example-edit-btn').click();
+      await page.getByTestId('response-example-name-input').clear();
+      await page.getByTestId('response-example-name-input').fill('Updated Example Name');
+      await page.getByTestId('response-example-save-btn').click();
+      await expect(page.getByTestId('response-example-title')).toHaveText('Updated Example Name');
+    });
+  });
+
+  test('should allow editing example description', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Updated Example Name', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Edit example description', async () => {
+      await page.getByTestId('response-example-edit-btn').click();
+      await page.getByTestId('response-example-description-input').clear();
+      await page.getByTestId('response-example-description-input').fill('Updated description for the example');
+      await page.getByTestId('response-example-save-btn').click();
+      await expect(page.getByTestId('response-example-description')).toHaveText('Updated description for the example');
+    });
+  });
+
+  test('should cancel editing and revert changes', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Updated Example Name', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Test cancel editing', async () => {
+      const originalName = await page.getByTestId('response-example-title').textContent();
+      await page.getByTestId('response-example-edit-btn').click();
+      await page.getByTestId('response-example-name-input').clear();
+      await page.getByTestId('response-example-name-input').fill('This should not be saved');
+      await page.getByTestId('response-example-cancel-btn').click();
+      await expect(page.getByTestId('response-example-title')).toHaveText(originalName!);
+    });
+  });
+
+  test('should support keyboard shortcuts for saving', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Open existing example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Updated Example Name');
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click();
+    });
+
+    await test.step('Test keyboard shortcut', async () => {
+      await page.getByTestId('response-example-edit-btn').click();
+      await page.getByTestId('response-example-name-input').clear();
+      await page.getByTestId('response-example-name-input').fill('Keyboard Shortcut Test');
+      await page.keyboard.press('Meta+s');
+      await expect(page.getByTestId('response-example-title')).toHaveText('Keyboard Shortcut Test');
+    });
+  });
+});
diff --git a/tests/response-examples/init-user-data/collection-security.json b/tests/response-examples/init-user-data/collection-security.json
new file mode 100644
index 0000000000..abb600094d
--- /dev/null
+++ b/tests/response-examples/init-user-data/collection-security.json
@@ -0,0 +1,10 @@
+{
+  "collections": [
+    {
+      "path": "{{projectRoot}}/tests/response-examples/collection",
+      "securityConfig": {
+        "jsSandboxMode": "safe"
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tests/response-examples/init-user-data/preferences.json b/tests/response-examples/init-user-data/preferences.json
new file mode 100644
index 0000000000..ac9b3b7ac8
--- /dev/null
+++ b/tests/response-examples/init-user-data/preferences.json
@@ -0,0 +1,6 @@
+{
+    "maximized": true,
+    "lastOpenedCollections": [
+        "{{projectRoot}}/tests/response-examples/collection"
+    ]
+}
\ No newline at end of file
diff --git a/tests/response-examples/menu-operations.spec.ts b/tests/response-examples/menu-operations.spec.ts
new file mode 100644
index 0000000000..e9422086dc
--- /dev/null
+++ b/tests/response-examples/menu-operations.spec.ts
@@ -0,0 +1,69 @@
+import { test, expect } from '../../playwright';
+
+test.describe('Response Example Menu Operations', () => {
+  test('should clone a response example via three dots menu', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Create and clone example', async () => {
+      await page.locator('#send-request').getByRole('img').nth(2).click();
+      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('create-example-name-input').fill('Example to Clone');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.hover();
+      await page.getByTestId('response-example-menu-icon').last().click();
+
+      await page.getByTestId('response-example-clone-option').click();
+      const clonedExampleItem = page.locator('.collection-item-name').getByText('Example to Clone (Copy)');
+      await expect(clonedExampleItem).toBeVisible();
+    });
+  });
+
+  test('should delete a response example via three dots menu', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Delete example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone (Copy)');
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.hover();
+      await page.getByTestId('response-example-menu-icon').last().click();
+
+      await page.getByTestId('response-example-delete-option').click();
+      await expect(page.getByText('Delete Example')).toBeVisible();
+      await page.getByRole('button', { name: 'Delete' }).click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+  });
+
+  test('should rename a response example via three dots menu', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Rename example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.hover();
+      await page.getByTestId('response-example-menu-icon').last().click();
+      await page.getByTestId('response-example-rename-option').click();
+      await expect(page.getByText('Rename Example')).toBeVisible();
+      const renameExampleNameInput = page.getByTestId('rename-example-name-input');
+      await renameExampleNameInput.clear();
+      await renameExampleNameInput.fill('Example to Rename');
+      await page.getByRole('button', { name: 'Rename' }).click();
+      const updatedExampleItem = page.locator('.collection-item-name').getByText('Example to Rename');
+      await expect(exampleItem).not.toBeVisible();
+      await expect(updatedExampleItem).toBeVisible();
+      await expect(updatedExampleItem).toHaveText('Example to Rename');
+    });
+  });
+});

From 83ec2cee662cc45bc9e2881eb23fba8c5ef291d1 Mon Sep 17 00:00:00 2001
From: sanish-bruno <sanish@usebruno.com>
Date: Thu, 23 Oct 2025 18:26:03 +0530
Subject: [PATCH 2/4] fix: response header disabled by default issue

---
 .../ResponsePane/ResponseBookmark/index.js       |  2 +-
 packages/bruno-lang/v2/src/jsonToBru.js          | 16 ++++------------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
index 9b7953099f..6af2223ad6 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
@@ -61,7 +61,7 @@ const ResponseBookmark = ({ item, collection }) => {
           onClick={handleSaveClick}
           disabled={!response || response.error}
           title="Save current response as example"
-          className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+          className="p-1"
           data-testid="response-bookmark-btn"
         >
           <IconBookmark size={16} strokeWidth={1.5} />
diff --git a/packages/bruno-lang/v2/src/jsonToBru.js b/packages/bruno-lang/v2/src/jsonToBru.js
index a162e98b27..f7770700fa 100644
--- a/packages/bruno-lang/v2/src/jsonToBru.js
+++ b/packages/bruno-lang/v2/src/jsonToBru.js
@@ -754,18 +754,10 @@ ${indentString(docs)}
     // Response headers
     if (response.headers && response.headers.length) {
       bru += 'response:headers {';
-      if (enabled(response.headers).length) {
-        bru += `\n${indentString(enabled(response.headers)
-          .map((item) => `${quoteKey(item.name)}: ${item.value}`)
-          .join('\n'))}`;
-      }
-
-      if (disabled(response.headers).length) {
-        bru += `\n${indentString(disabled(response.headers)
-          .map((item) => `~${quoteKey(item.name)}: ${item.value}`)
-          .join('\n'))}`;
-      }
-
+      // Response headers don't need enable/disable functionality - they're just data from server
+      bru += `\n${indentString(response.headers
+        .map((item) => `${quoteKey(item.name)}: ${item.value}`)
+        .join('\n'))}`;
       bru += '\n}\n\n';
     }
 

From 24ffe1e2a2713a760ed09eaec5b077de0678d310 Mon Sep 17 00:00:00 2001
From: sanish chirayath <sanish@usebruno.com>
Date: Sun, 26 Oct 2025 20:47:17 +0530
Subject: [PATCH 3/4] Feat/with bru example parser (#5892)

* fix: response header disabled by default issue

feat: new parsing logic

fix: change test cases to accomodate new brulang

add: path params features

rm:consoles

six: make tab permanent on double click

fix width

feat: add status editing

feat: review fixes

review fixes

fix: review fixes

fix: post review

mv: test files

fix: review

* fix: lint

* fix: review comments

* fix: icons folder strcuture

fix: tests

fix: lint

fix: unit tests

feat: body mode selector

fix: close all collections

rm: example

feat added tests. lang change

feat: add custom status text

fix: status update

feat: add body mode, update tests

add default name prefilled for example

fix: active tab styles, prefilled name, text fixes

fix : pkg lock

fix: review

fix: review comments

fix: hide cursor when readonly

fix: height

fix: null body

fix: response body parsing

fix: test cases

feat: add method support for examples

fix: reponse parsing

fix: update response body type when content type is updated

rm : commented code

feat: update parser logic

fix: organize files
---
 .../src/components/BodyModeSelector/index.js  |   83 +
 .../src/components/Checkbox/index.js          |    6 +-
 .../src/components/Checkbox/index.spec.js     |  226 ---
 .../components/CodeEditor/StyledWrapper.js    |   12 +
 .../src/components/CodeEditor/index.js        |    6 +-
 .../src/components/FilePickerEditor/index.js  |   10 +-
 .../components/Icons/IconCaretDown/index.js   |   18 +
 .../components/Icons/IconCheckMark/index.js   |   11 +
 .../src/components/Icons/IconEdit/index.js    |   19 +
 .../src/components/Icons/examples/index.js    |   44 +-
 .../bruno-app/src/components/Modal/index.js   |    2 +-
 .../src/components/RadioButton/index.js       |    4 +-
 .../src/components/RadioButton/index.spec.js  |  347 ----
 .../components/RequestPane/QueryUrl/index.js  |    9 +-
 .../RequestPane/WsQueryUrl/index.js           |    9 +-
 .../RequestTabPanel/ExampleNotFound/index.js  |   40 +
 .../src/components/RequestTabPanel/index.js   |   19 +-
 .../RequestTabs/ExampleTab/index.js           |  144 ++
 .../RequestTabs/RequestTab/index.js           |   89 +-
 .../CreateExampleModal/index.js               |  114 +-
 .../ResponseExampleBody/index.js              |    9 +-
 .../ResponseExampleBodyMode/index.js          |  102 +-
 .../ResponseExampleDescription/index.js       |   22 +-
 .../ResponseExampleFileBody/index.js          |   18 +-
 .../index.js                                  |   12 +-
 .../ResponseExampleHeaders/index.js           |   15 +-
 .../index.js                                  |   29 +-
 .../ResponseExampleParams/index.js            |  298 +--
 .../ResponseExampleUrlBar/index.js            |   15 +-
 .../ResponseExampleResponseContent/index.js   |   46 +-
 .../ResponseExampleResponseHeaders/index.js   |  156 +-
 .../StyledWrapper.js                          |   83 +
 .../ResponseExampleStatusInput/index.js       |  208 ++
 .../ResponseExampleResponsePane/index.js      |   23 +-
 .../ResponseExampleTopBar/StyledWrapper.js    |    9 +-
 .../ResponseExampleTopBar/index.js            |   22 +-
 .../src/components/ResponseExample/index.js   |   20 +-
 .../ResponsePane/ResponseBookmark/index.js    |   58 +-
 .../ResponsePane/StatusCode/index.js          |    4 +-
 .../index.js}                                 |   10 +-
 .../ExampleItem/StyledWrapper.js              |    8 +
 .../CollectionItem/ExampleItem/index.js       |   39 +-
 .../SingleLineEditor/StyledWrapper.js         |   12 +
 .../src/components/SingleLineEditor/index.js  |    6 +-
 .../src/components/TruncatedText/index.js     |    5 +-
 .../App/ConfirmAppClose/SaveRequestsModal.js  |   35 +-
 .../src/providers/ReduxStore/index.js         |    1 -
 .../slices/collections/exampleReducers.js     | 1688 ++++++++++-------
 .../src/providers/ReduxStore/slices/tabs.js   |    9 +-
 .../src/utils/responseBodyProcessor.js        |   23 +
 .../bruno-filestore/src/formats/bru/index.ts  |  156 +-
 packages/bruno-filestore/src/index.ts         |    3 +-
 packages/bruno-lang/v2/src/bruToJson.js       |   45 +-
 .../bruno-lang/v2/src/example/bruToJson.js    |  188 ++
 .../bruno-lang/v2/src/example/jsonToBru.js    |  240 +++
 .../v2/src/example/request/bruToJson.js       |  400 ++++
 .../v2/src/example/response/bruToJson.js      |  231 +++
 packages/bruno-lang/v2/src/jsonToBru.js       |   32 +-
 packages/bruno-lang/v2/src/utils.js           |    5 +-
 .../v2/tests/examples/examples.spec.js        |  339 ++--
 .../{ => bru}/bruToJson-empty-example.bru     |    0
 .../fixtures/bru/bruToJson-json-body.bru      |   21 +
 .../bru/bruToJson-multiple-examples.bru       |   35 +
 .../{ => bru}/bruToJson-no-examples.bru       |    0
 .../bru/bruToJson-response-example.bru        |   40 +
 .../{ => bru}/bruToJson-single-example.bru    |   14 +-
 .../fixtures/bru/bruToJson-text-body.bru      |   19 +
 .../fixtures/bru/bruToJson-xml-body.bru       |   22 +
 .../fixtures/bru/complex-with-auth.bru        |  267 +++
 .../fixtures/bru/examples-complex.bru         |  123 ++
 .../examples/fixtures/bru/examples-simple.bru |   71 +
 .../fixtures/bru/form-data-complex.bru        |  132 ++
 .../fixtures/bru/jsonToBru-bodytypes.bru      |   58 +
 .../fixtures/bru/jsonToBru-multiple.bru       |   35 +
 .../fixtures/bru/jsonToBru-response.bru       |   40 +
 .../fixtures/bru/jsonToBru-simple.bru         |   24 +
 .../bru/multiple-examples-variations.bru      |  299 +++
 .../examples/fixtures/bru/oauth2-examples.bru |  248 +++
 .../fixtures/bruToJson-basic-auth.bru         |   20 -
 .../fixtures/bruToJson-basic-auth.json        |   26 -
 .../fixtures/bruToJson-bearer-auth.bru        |   19 -
 .../fixtures/bruToJson-bearer-auth.json       |   25 -
 .../fixtures/bruToJson-empty-example.json     |   10 -
 .../examples/fixtures/bruToJson-json-body.bru |   22 -
 .../fixtures/bruToJson-json-body.json         |   23 -
 .../fixtures/bruToJson-multiple-examples.bru  |   36 -
 .../fixtures/bruToJson-multiple-examples.json |   38 -
 .../fixtures/bruToJson-no-examples.json       |   11 -
 .../fixtures/bruToJson-response-example.bru   |   34 -
 .../fixtures/bruToJson-response-example.json  |   37 -
 .../fixtures/bruToJson-single-example.json    |   31 -
 .../examples/fixtures/bruToJson-text-body.bru |   20 -
 .../fixtures/bruToJson-text-body.json         |   23 -
 .../examples/fixtures/bruToJson-xml-body.bru  |   23 -
 .../examples/fixtures/bruToJson-xml-body.json |   23 -
 .../examples/fixtures/examples-complex.bru    |  142 --
 .../examples/fixtures/examples-simple.bru     |   71 -
 .../examples/fixtures/examples-simple.json    |   69 -
 .../json/bruToJson-empty-example.json         |   10 +
 .../fixtures/json/bruToJson-json-body.json    |   21 +
 .../json/bruToJson-multiple-examples.json     |   36 +
 .../fixtures/json/bruToJson-no-examples.json  |   11 +
 .../json/bruToJson-response-example.json      |   39 +
 .../json/bruToJson-single-example.json        |   24 +
 .../fixtures/json/bruToJson-text-body.json    |   21 +
 .../fixtures/json/bruToJson-xml-body.json     |   21 +
 .../fixtures/json/complex-with-auth.json      |  211 +++
 .../fixtures/json/examples-complex.json       |   83 +
 .../fixtures/json/examples-simple.json        |   52 +
 .../fixtures/json/form-data-complex.json      |  198 ++
 .../fixtures/json/jsonToBru-bodytypes.json    |   48 +
 .../fixtures/json/jsonToBru-multiple.json     |   35 +
 .../fixtures/json/jsonToBru-response.json     |   38 +
 .../fixtures/json/jsonToBru-simple.json       |   24 +
 .../json/multiple-examples-variations.json    |  223 +++
 .../fixtures/json/oauth2-examples.json        |  185 ++
 .../examples/fixtures/jsonToBru-auth.bru      |   41 -
 .../examples/fixtures/jsonToBru-auth.json     |   43 -
 .../examples/fixtures/jsonToBru-bodytypes.bru |   64 -
 .../fixtures/jsonToBru-bodytypes.json         |   51 -
 .../examples/fixtures/jsonToBru-multiple.bru  |   38 -
 .../examples/fixtures/jsonToBru-multiple.json |   35 -
 .../examples/fixtures/jsonToBru-response.bru  |   35 -
 .../examples/fixtures/jsonToBru-response.json |   35 -
 .../examples/fixtures/jsonToBru-simple.bru    |   30 -
 .../examples/fixtures/jsonToBru-simple.json   |   32 -
 .../bruno-schema/src/collections/index.js     |    8 +-
 .../bruno-tests/collection/echo/echo json.bru |    1 -
 .../test JSON false response.bru              |   40 +
 .../test JSON number response.bru             |   40 +
 .../test JSON string with quotes response.bru |   40 +
 .../test JSON true response.bru               |   40 +
 .../test JSON unsafe-int response.bru         |   40 +
 ... invalid JSON response with formatting.bru |   41 +
 ...st plain text response with formatting.bru |   41 +
 .../test plain text utf16 response.bru        |   40 +
 .../response-examples/create-example.spec.ts  |   80 +-
 tests/response-examples/edit-example.spec.ts  |  142 +-
 .../{ => fixtures}/collection/bruno.json      |    0
 .../collection/echo-request.bru               |    0
 .../init-user-data/collection-security.json   |    2 +-
 .../init-user-data/preferences.json           |    4 +-
 .../response-examples/menu-operations.spec.ts |   86 +-
 143 files changed, 6889 insertions(+), 3427 deletions(-)
 create mode 100644 packages/bruno-app/src/components/BodyModeSelector/index.js
 delete mode 100644 packages/bruno-app/src/components/Checkbox/index.spec.js
 create mode 100644 packages/bruno-app/src/components/Icons/IconCaretDown/index.js
 create mode 100644 packages/bruno-app/src/components/Icons/IconCheckMark/index.js
 create mode 100644 packages/bruno-app/src/components/Icons/IconEdit/index.js
 delete mode 100644 packages/bruno-app/src/components/RadioButton/index.spec.js
 create mode 100644 packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js
 create mode 100644 packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
 create mode 100644 packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/index.js
 rename packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/{DeleteExampleModal.js => DeleteResponseExampleModal/index.js} (82%)
 create mode 100644 packages/bruno-app/src/utils/responseBodyProcessor.js
 create mode 100644 packages/bruno-lang/v2/src/example/bruToJson.js
 create mode 100644 packages/bruno-lang/v2/src/example/jsonToBru.js
 create mode 100644 packages/bruno-lang/v2/src/example/request/bruToJson.js
 create mode 100644 packages/bruno-lang/v2/src/example/response/bruToJson.js
 rename packages/bruno-lang/v2/tests/examples/fixtures/{ => bru}/bruToJson-empty-example.bru (100%)
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-json-body.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-multiple-examples.bru
 rename packages/bruno-lang/v2/tests/examples/fixtures/{ => bru}/bruToJson-no-examples.bru (100%)
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-response-example.bru
 rename packages/bruno-lang/v2/tests/examples/fixtures/{ => bru}/bruToJson-single-example.bru (55%)
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-text-body.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-xml-body.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/complex-with-auth.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/examples-complex.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/examples-simple.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/form-data-complex.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-bodytypes.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-multiple.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-response.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-simple.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/multiple-examples-variations.bru
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bru/oauth2-examples.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/examples-complex.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-empty-example.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-json-body.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-multiple-examples.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-no-examples.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-response-example.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-single-example.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-text-body.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-xml-body.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/complex-with-auth.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/examples-complex.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/examples-simple.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/form-data-complex.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-bodytypes.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-multiple.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-response.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-simple.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/multiple-examples-variations.json
 create mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/json/oauth2-examples.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.json
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.bru
 delete mode 100644 packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.json
 rename tests/response-examples/{ => fixtures}/collection/bruno.json (100%)
 rename tests/response-examples/{ => fixtures}/collection/echo-request.bru (100%)

diff --git a/packages/bruno-app/src/components/BodyModeSelector/index.js b/packages/bruno-app/src/components/BodyModeSelector/index.js
new file mode 100644
index 0000000000..842c3f9ce6
--- /dev/null
+++ b/packages/bruno-app/src/components/BodyModeSelector/index.js
@@ -0,0 +1,83 @@
+import React, { useRef, forwardRef } from 'react';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import { humanizeRequestBodyMode } from 'utils/collections';
+
+const DEFAULT_MODES = [
+  { key: 'multipartForm', label: 'Multipart Form', category: 'Form' },
+  { key: 'formUrlEncoded', label: 'Form URL Encoded', category: 'Form' },
+  { key: 'json', label: 'JSON', category: 'Raw' },
+  { key: 'xml', label: 'XML', category: 'Raw' },
+  { key: 'text', label: 'TEXT', category: 'Raw' },
+  { key: 'sparql', label: 'SPARQL', category: 'Raw' },
+  { key: 'file', label: 'File / Binary', category: 'Other' },
+  { key: 'none', label: 'None', category: 'Other' }
+];
+
+const BodyModeSelector = ({
+  currentMode,
+  onModeChange,
+  modes = DEFAULT_MODES,
+  disabled = false,
+  className = '',
+  wrapperClassName = '',
+  showCategories = true,
+  placement = 'bottom-end'
+}) => {
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
+        {humanizeRequestBodyMode(currentMode)}
+        {' '}
+        <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onModeSelect = (mode) => {
+    dropdownTippyRef.current.hide();
+    onModeChange(mode);
+  };
+
+  // Group modes by category for rendering
+  const groupedModes = modes.reduce((acc, mode) => {
+    const category = mode.category || 'Other';
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(mode);
+    return acc;
+  }, {});
+
+  return (
+    <div className={`inline-flex items-center body-mode-selector ${disabled ? 'cursor-default' : 'cursor-pointer'} ${wrapperClassName}`}>
+      <Dropdown
+        onCreate={onDropdownCreate}
+        icon={<Icon />}
+        placement={placement}
+        disabled={disabled}
+        className={className}
+      >
+        {Object.entries(groupedModes).map(([category, categoryModes]) => (
+          <React.Fragment key={category}>
+            {showCategories && <div className="label-item font-medium">{category}</div>}
+            {categoryModes.map((mode) => (
+              <div
+                key={mode.key}
+                className="dropdown-item"
+                onClick={() => onModeSelect(mode.key)}
+              >
+                {mode.label}
+              </div>
+            ))}
+          </React.Fragment>
+        ))}
+      </Dropdown>
+    </div>
+  );
+};
+
+export default BodyModeSelector;
diff --git a/packages/bruno-app/src/components/Checkbox/index.js b/packages/bruno-app/src/components/Checkbox/index.js
index 2e413fb06a..175292db0f 100644
--- a/packages/bruno-app/src/components/Checkbox/index.js
+++ b/packages/bruno-app/src/components/Checkbox/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import StyledWrapper from './StyledWrapper';
-import { IconCheckMark } from 'components/Icons/examples';
+import IconCheckMark from 'components/Icons/IconCheckMark';
 import { useTheme } from 'providers/Theme';
 
 const Checkbox = ({
@@ -11,7 +11,7 @@ const Checkbox = ({
   id,
   name,
   value,
-  ...props
+  dataTestId = 'checkbox'
 }) => {
   const { theme } = useTheme();
 
@@ -33,7 +33,7 @@ const Checkbox = ({
           disabled={disabled}
           onChange={handleChange}
           className="checkbox-input"
-          {...props}
+          data-testid={dataTestId}
         />
         <IconCheckMark className="checkbox-checkmark" color={theme.examples.checkbox.color} size={14} />
       </div>
diff --git a/packages/bruno-app/src/components/Checkbox/index.spec.js b/packages/bruno-app/src/components/Checkbox/index.spec.js
deleted file mode 100644
index f7f2a91e5f..0000000000
--- a/packages/bruno-app/src/components/Checkbox/index.spec.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
-import Checkbox from './index';
-import themes from 'themes/index';
-
-// Mock the IconCheckMark component
-jest.mock('components/Icons/examples', () => ({
-  IconCheckMark: ({ className, color, size }) => (
-    <div
-      data-testid="icon-checkmark"
-      className={className}
-      style={{ color, fontSize: size }}
-    />
-  )
-}));
-
-// Mock the useTheme hook
-jest.mock('providers/Theme', () => ({
-  useTheme: () => ({
-    theme: {
-      examples: {
-        checkbox: {
-          color: '#f59e0b'
-        }
-      }
-    }
-  })
-}));
-
-const renderWithTheme = (component) => {
-  return render(<ThemeProvider theme={themes.dark}>{component}</ThemeProvider>);
-};
-
-describe('Checkbox', () => {
-  const mockOnChange = jest.fn();
-
-  beforeEach(() => {
-    mockOnChange.mockClear();
-  });
-
-  describe('Rendering', () => {
-    it('should render with default props', () => {
-      renderWithTheme(<Checkbox />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).not.toBeChecked();
-      expect(checkbox).not.toBeDisabled();
-    });
-
-    it('should render with custom props', () => {
-      renderWithTheme(<Checkbox id="test-checkbox" name="test-name" value="test-value" className="custom-class" />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveAttribute('id', 'test-checkbox');
-      expect(checkbox).toHaveAttribute('name', 'test-name');
-      expect(checkbox).toHaveAttribute('value', 'test-value');
-    });
-
-    it('should render as checked when checked prop is true', () => {
-      renderWithTheme(<Checkbox checked={true} />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeChecked();
-    });
-
-    it('should render as disabled when disabled prop is true', () => {
-      renderWithTheme(<Checkbox disabled={true} />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeDisabled();
-    });
-
-    it('should render checkmark icon', () => {
-      renderWithTheme(<Checkbox />);
-
-      const checkmark = screen.getByTestId('icon-checkmark');
-      expect(checkmark).toBeInTheDocument();
-      expect(checkmark).toHaveClass('checkbox-checkmark');
-    });
-
-    it('should show checkmark when checked', () => {
-      renderWithTheme(<Checkbox checked={true} />);
-
-      const checkmark = screen.getByTestId('icon-checkmark');
-      expect(checkmark).toHaveStyle('visibility: visible');
-    });
-
-    it('should hide checkmark when not checked', () => {
-      renderWithTheme(<Checkbox checked={false} />);
-
-      const checkmark = screen.getByTestId('icon-checkmark');
-      expect(checkmark).toHaveStyle('visibility: hidden');
-    });
-  });
-
-  describe('User Interactions', () => {
-    it('should call onChange when clicked and not disabled', () => {
-      renderWithTheme(<Checkbox onChange={mockOnChange} />);
-
-      const checkbox = screen.getByRole('checkbox');
-      fireEvent.click(checkbox);
-
-      expect(mockOnChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not call onChange when clicked and disabled', () => {
-      renderWithTheme(<Checkbox onChange={mockOnChange} disabled={true} />);
-
-      const checkbox = screen.getByRole('checkbox');
-      fireEvent.click(checkbox);
-
-      expect(mockOnChange).not.toHaveBeenCalled();
-    });
-
-    it('should not call onChange when no onChange prop is provided', () => {
-      renderWithTheme(<Checkbox />);
-
-      const checkbox = screen.getByRole('checkbox');
-      fireEvent.click(checkbox);
-
-      // Should not throw error
-      expect(checkbox).toBeInTheDocument();
-    });
-
-    it('should toggle checked state when clicked', () => {
-      const TestWrapper = () => {
-        const [checked, setChecked] = React.useState(false);
-
-        return (
-          <Checkbox
-            checked={checked}
-            onChange={() => setChecked(!checked)}
-          />
-        );
-      };
-
-      renderWithTheme(<TestWrapper />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).not.toBeChecked();
-
-      fireEvent.click(checkbox);
-      expect(checkbox).toBeChecked();
-
-      fireEvent.click(checkbox);
-      expect(checkbox).not.toBeChecked();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should be focusable when not disabled', () => {
-      renderWithTheme(<Checkbox />);
-
-      const checkbox = screen.getByRole('checkbox');
-      checkbox.focus();
-      expect(checkbox).toHaveFocus();
-    });
-
-    it('should not be focusable when disabled', () => {
-      renderWithTheme(<Checkbox disabled={true} />);
-
-      const checkbox = screen.getByRole('checkbox');
-      checkbox.focus();
-      expect(checkbox).not.toHaveFocus();
-    });
-
-    it('should have proper ARIA attributes', () => {
-      renderWithTheme(<Checkbox id="test-checkbox" name="test-name" value="test-value" />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toHaveAttribute('id', 'test-checkbox');
-      expect(checkbox).toHaveAttribute('name', 'test-name');
-      expect(checkbox).toHaveAttribute('value', 'test-value');
-    });
-  });
-
-  describe('Styling', () => {
-    it('should apply custom className', () => {
-      renderWithTheme(<Checkbox className="custom-class" />);
-
-      const wrapper = screen.getByRole('checkbox').closest('.custom-class');
-      expect(wrapper).toBeInTheDocument();
-    });
-
-    it('should pass through additional props', () => {
-      renderWithTheme(<Checkbox data-testid="custom-checkbox" aria-label="Custom checkbox" />);
-
-      const checkbox = screen.getByTestId('custom-checkbox');
-      expect(checkbox).toBeInTheDocument();
-      expect(checkbox).toHaveAttribute('aria-label', 'Custom checkbox');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle undefined checked prop', () => {
-      renderWithTheme(<Checkbox checked={undefined} />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).not.toBeChecked();
-    });
-
-    it('should handle null checked prop', () => {
-      renderWithTheme(<Checkbox checked={null} />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).not.toBeChecked();
-    });
-
-    it('should handle string checked prop', () => {
-      renderWithTheme(<Checkbox checked="true" />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeChecked();
-    });
-
-    it('should handle empty string className', () => {
-      renderWithTheme(<Checkbox className="" />);
-
-      const checkbox = screen.getByRole('checkbox');
-      expect(checkbox).toBeInTheDocument();
-    });
-  });
-});
diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
index bce574f3c5..8d2586c8b7 100644
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -1,6 +1,18 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  &.read-only {
+    div.CodeMirror .CodeMirror-lines {
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      -ms-user-select: none !important;
+    }
+
+    div.CodeMirror .CodeMirror-cursor {
+      display: none !important;
+    }
+  }
+
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js
index f3f1211dd1..721f35b42f 100644
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -63,7 +63,7 @@ export default class CodeEditor extends React.Component {
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
       lint: this.lintOptions,
-      readOnly: this.props.readOnly,
+      readOnly: this.props.readOnly ? 'nocursor' : false,
       scrollbarStyle: 'overlay',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
@@ -246,7 +246,7 @@ export default class CodeEditor extends React.Component {
     }
 
     if (this.props.readOnly !== prevProps.readOnly && this.editor) {
-      this.editor.setOption('readOnly', this.props.readOnly);
+      this.editor.setOption('readOnly', this.props.readOnly ? 'nocursor' : false);
     }
 
     this.ignoreChangeEvent = false;
@@ -266,7 +266,7 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className="h-full w-full flex flex-col relative graphiql-container"
+        className={`h-full w-full flex flex-col relative graphiql-container ${this.props.readOnly ? 'read-only' : ''}`}
         aria-label="Code Editor"
         font={this.props.font}
         fontSize={this.props.fontSize}
diff --git a/packages/bruno-app/src/components/FilePickerEditor/index.js b/packages/bruno-app/src/components/FilePickerEditor/index.js
index 04f9196f52..4aa2543993 100644
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -5,7 +5,7 @@ import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
 
-const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false, editMode = true }) => {
+const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false, readOnly = false }) => {
   const dispatch = useDispatch();
   const filenames = (isSingleFilePicker ? [value] : value || [])
     .filter((v) => v != null && v != '')
@@ -50,7 +50,7 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
     return filenames.length + ' file(s) selected';
   };
 
-  const buttonClass = `btn btn-secondary px-1 ${editMode ? 'edit-mode' : 'view-mode'}`;
+  const buttonClass = `btn btn-secondary px-1 ${readOnly ? 'view-mode' : 'edit-mode'}`;
 
   return filenames.length > 0 ? (
     <div
@@ -58,16 +58,16 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
       style={{ fontWeight: 400, width: '100%', textOverflow: 'ellipsis', overflowX: 'hidden' }}
       title={title}
     >
-      {editMode && (
+      {!readOnly && (
         <button className="align-middle" onClick={clear}>
           <IconX size={18} />
         </button>
       )}
-      {editMode && <>&nbsp;</>}
+      {!readOnly && <>&nbsp;</>}
       {renderButtonText(filenames)}
     </div>
   ) : (
-    <button className={buttonClass} style={{ width: '100%' }} onClick={editMode ? browse : undefined} disabled={!editMode}>
+    <button className={buttonClass} style={{ width: '100%' }} onClick={!readOnly ? browse : undefined} disabled={readOnly}>
       {isSingleFilePicker ? 'Select File' : 'Select Files'}
     </button>
   );
diff --git a/packages/bruno-app/src/components/Icons/IconCaretDown/index.js b/packages/bruno-app/src/components/Icons/IconCaretDown/index.js
new file mode 100644
index 0000000000..3eb4bb7cf1
--- /dev/null
+++ b/packages/bruno-app/src/components/Icons/IconCaretDown/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const IconCaretDown = ({ color = '#8C8C8C', ...props }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <g clipPath="url(#clip0_464_9256)">
+        <path d="M10.5444 5.75H4.46004C4.26888 5.7509 4.08142 5.78521 3.91637 5.84952C3.75132 5.91383 3.61447 6.00587 3.51947 6.11647C3.42448 6.22706 3.37466 6.35234 3.375 6.47978C3.37534 6.60723 3.42583 6.73238 3.52142 6.84275L6.56492 10.23C6.66228 10.3372 6.79942 10.4258 6.96311 10.4874C7.1268 10.5489 7.31151 10.5813 7.49945 10.5814C7.68739 10.5816 7.8722 10.5494 8.03608 10.4881C8.19995 10.4267 8.33735 10.3383 8.43504 10.2312L11.4763 6.8465C11.573 6.73635 11.6246 6.61118 11.626 6.48355C11.6273 6.35591 11.5783 6.23028 11.4839 6.11924C11.3895 6.0082 11.253 5.91564 11.088 5.85084C10.9231 5.78603 10.7359 5.75126 10.5444 5.75Z" fill="#8C8C8C" />
+      </g>
+      <defs>
+        <clipPath id="clip0_464_9256">
+          <rect width="9" height="6" fill="white" transform="translate(3 5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default IconCaretDown;
diff --git a/packages/bruno-app/src/components/Icons/IconCheckMark/index.js b/packages/bruno-app/src/components/Icons/IconCheckMark/index.js
new file mode 100644
index 0000000000..86b5bd501f
--- /dev/null
+++ b/packages/bruno-app/src/components/Icons/IconCheckMark/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const IconCheckMark = ({ color = '#cccccc', size = 16, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M3.3335 8.49996L6.66683 11.8333L13.3335 5.16663" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};
+
+export default IconCheckMark;
diff --git a/packages/bruno-app/src/components/Icons/IconEdit/index.js b/packages/bruno-app/src/components/Icons/IconEdit/index.js
new file mode 100644
index 0000000000..a02d7b6468
--- /dev/null
+++ b/packages/bruno-app/src/components/Icons/IconEdit/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const IconEdit = ({ color = '#F39D0E', size = 16, ...props }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g clipPath="url(#clip0_464_9527)">
+        <path d="M12.6665 13.3332H5.66654L2.85988 10.4665C2.73571 10.3416 2.66602 10.1727 2.66602 9.99654C2.66602 9.82042 2.73571 9.65145 2.85988 9.52654L9.52654 2.85988C9.65145 2.73571 9.82042 2.66602 9.99654 2.66602C10.1727 2.66602 10.3416 2.73571 10.4665 2.85988L13.7999 6.19321C13.924 6.31812 13.9937 6.48709 13.9937 6.66321C13.9937 6.83933 13.924 7.0083 13.7999 7.13321L7.66654 13.3332" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M11.9998 8.86663L7.7998 4.66663" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_464_9527">
+          <rect width={size} height={size} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default IconEdit;
diff --git a/packages/bruno-app/src/components/Icons/examples/index.js b/packages/bruno-app/src/components/Icons/examples/index.js
index cb1fe72c65..aa7a5c47be 100644
--- a/packages/bruno-app/src/components/Icons/examples/index.js
+++ b/packages/bruno-app/src/components/Icons/examples/index.js
@@ -1,46 +1,6 @@
 import React from 'react';
 
-export const IconEdit = ({ color = '#F39D0E', size = 16, ...props }) => {
-  return (
-    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <g clipPath="url(#clip0_464_9527)">
-        <path d="M12.6665 13.3332H5.66654L2.85988 10.4665C2.73571 10.3416 2.66602 10.1727 2.66602 9.99654C2.66602 9.82042 2.73571 9.65145 2.85988 9.52654L9.52654 2.85988C9.65145 2.73571 9.82042 2.66602 9.99654 2.66602C10.1727 2.66602 10.3416 2.73571 10.4665 2.85988L13.7999 6.19321C13.924 6.31812 13.9937 6.48709 13.9937 6.66321C13.9937 6.83933 13.924 7.0083 13.7999 7.13321L7.66654 13.3332" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
-        <path d="M11.9998 8.86663L7.7998 4.66663" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
-      </g>
-      <defs>
-        <clipPath id="clip0_464_9527">
-          <rect width={size} height={size} fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-
-export const IconCaretDown = ({ color = '#8C8C8C', ...props }) => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <g clipPath="url(#clip0_464_9256)">
-        <path d="M10.5444 5.75H4.46004C4.26888 5.7509 4.08142 5.78521 3.91637 5.84952C3.75132 5.91383 3.61447 6.00587 3.51947 6.11647C3.42448 6.22706 3.37466 6.35234 3.375 6.47978C3.37534 6.60723 3.42583 6.73238 3.52142 6.84275L6.56492 10.23C6.66228 10.3372 6.79942 10.4258 6.96311 10.4874C7.1268 10.5489 7.31151 10.5813 7.49945 10.5814C7.68739 10.5816 7.8722 10.5494 8.03608 10.4881C8.19995 10.4267 8.33735 10.3383 8.43504 10.2312L11.4763 6.8465C11.573 6.73635 11.6246 6.61118 11.626 6.48355C11.6273 6.35591 11.5783 6.23028 11.4839 6.11924C11.3895 6.0082 11.253 5.91564 11.088 5.85084C10.9231 5.78603 10.7359 5.75126 10.5444 5.75Z" fill="#8C8C8C" />
-      </g>
-      <defs>
-        <clipPath id="clip0_464_9256">
-          <rect width="9" height="6" fill="white" transform="translate(3 5)" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-
-export const IconCheckMark = ({ color = '#cccccc', size = 16, ...props }) => {
-  return (
-    <svg width={size} height={size} viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M3.3335 8.49996L6.66683 11.8333L13.3335 5.16663" stroke={color} strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-
-  );
-};
-
-export const ExampleIcon = ({ color = 'white', size = 16, ...props }) => {
+const ExampleIcon = ({ color = 'white', size = 16, ...props }) => {
   return (
     <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <g clipPath="url(#clip0_486_1191)">
@@ -57,3 +17,5 @@ export const ExampleIcon = ({ color = 'white', size = 16, ...props }) => {
 
   );
 };
+
+export default ExampleIcon;
diff --git a/packages/bruno-app/src/components/Modal/index.js b/packages/bruno-app/src/components/Modal/index.js
index f520866a5c..0a48fbeee7 100644
--- a/packages/bruno-app/src/components/Modal/index.js
+++ b/packages/bruno-app/src/components/Modal/index.js
@@ -27,7 +27,7 @@ const ModalFooter = ({
   confirmDisabled,
   hideCancel,
   hideFooter,
-  confirmButtonClass
+  confirmButtonClass = 'btn-secondary'
 }) => {
   confirmText = confirmText || 'Save';
   cancelText = cancelText || 'Cancel';
diff --git a/packages/bruno-app/src/components/RadioButton/index.js b/packages/bruno-app/src/components/RadioButton/index.js
index 5a3d3a0dd7..8f1950cfcb 100644
--- a/packages/bruno-app/src/components/RadioButton/index.js
+++ b/packages/bruno-app/src/components/RadioButton/index.js
@@ -9,7 +9,7 @@ const RadioButton = ({
   value,
   id,
   className = '',
-  ...props
+  dataTestId = 'radio-button'
 }) => {
   const handleChange = (e) => {
     if (!disabled && onChange) {
@@ -29,7 +29,7 @@ const RadioButton = ({
           disabled={disabled}
           onChange={handleChange}
           className="radio-input"
-          {...props}
+          data-testid={dataTestId}
         />
         <label htmlFor={id} className="radio-label" />
       </div>
diff --git a/packages/bruno-app/src/components/RadioButton/index.spec.js b/packages/bruno-app/src/components/RadioButton/index.spec.js
deleted file mode 100644
index 7439752715..0000000000
--- a/packages/bruno-app/src/components/RadioButton/index.spec.js
+++ /dev/null
@@ -1,347 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
-import RadioButton from './index';
-import themes from 'themes/index';
-
-const renderWithTheme = (component) => {
-  return render(<ThemeProvider theme={themes.dark}>{component}</ThemeProvider>);
-};
-
-describe('RadioButton', () => {
-  const mockOnChange = jest.fn();
-
-  beforeEach(() => {
-    mockOnChange.mockClear();
-  });
-
-  describe('Rendering', () => {
-    it('should render with default props', () => {
-      renderWithTheme(<RadioButton />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeInTheDocument();
-      expect(radio).not.toBeChecked();
-      expect(radio).not.toBeDisabled();
-    });
-
-    it('should render with custom props', () => {
-      renderWithTheme(<RadioButton id="test-radio" name="test-group" value="test-value" className="custom-class" />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toHaveAttribute('id', 'test-radio');
-      expect(radio).toHaveAttribute('name', 'test-group');
-      expect(radio).toHaveAttribute('value', 'test-value');
-    });
-
-    it('should render as checked when checked prop is true', () => {
-      renderWithTheme(<RadioButton checked={true} />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeChecked();
-    });
-
-    it('should render as disabled when disabled prop is true', () => {
-      renderWithTheme(<RadioButton disabled={true} />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeDisabled();
-    });
-
-    it('should render with label element', () => {
-      renderWithTheme(<RadioButton id="test-radio" />);
-
-      const radio = screen.getByRole('radio');
-      const label = radio.parentElement.querySelector('label');
-      expect(label).toBeInTheDocument();
-      expect(label).toHaveAttribute('for', 'test-radio');
-    });
-  });
-
-  describe('User Interactions', () => {
-    it('should call onChange when clicked and not disabled', () => {
-      renderWithTheme(<RadioButton onChange={mockOnChange} />);
-
-      const radio = screen.getByRole('radio');
-      fireEvent.click(radio);
-
-      expect(mockOnChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not call onChange when clicked and disabled', () => {
-      renderWithTheme(<RadioButton onChange={mockOnChange} disabled={true} />);
-
-      const radio = screen.getByRole('radio');
-      fireEvent.click(radio);
-
-      expect(mockOnChange).not.toHaveBeenCalled();
-    });
-
-    it('should call onChange when label is clicked', () => {
-      renderWithTheme(<RadioButton id="test-radio" onChange={mockOnChange} />);
-
-      const radio = screen.getByRole('radio');
-      const label = radio.parentElement.querySelector('label');
-      fireEvent.click(label);
-
-      expect(mockOnChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not call onChange when no onChange prop is provided', () => {
-      renderWithTheme(<RadioButton />);
-
-      const radio = screen.getByRole('radio');
-      fireEvent.click(radio);
-
-      // Should not throw error
-      expect(radio).toBeInTheDocument();
-    });
-
-    it('should stay checked when clicked (radio button behavior)', () => {
-      const TestWrapper = () => {
-        const [checked, setChecked] = React.useState(false);
-
-        return (
-          <RadioButton
-            checked={checked}
-            onChange={() => setChecked(true)}
-          />
-        );
-      };
-
-      renderWithTheme(<TestWrapper />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).not.toBeChecked();
-
-      fireEvent.click(radio);
-      expect(radio).toBeChecked();
-
-      // Radio buttons stay checked when clicked again
-      fireEvent.click(radio);
-      expect(radio).toBeChecked();
-    });
-  });
-
-  describe('Radio Group Behavior', () => {
-    it('should work correctly in a radio group', () => {
-      const TestWrapper = () => {
-        const [selectedValue, setSelectedValue] = React.useState('option1');
-
-        return (
-          <div>
-            <RadioButton
-              id="option1"
-              name="test-group"
-              value="option1"
-              checked={selectedValue === 'option1'}
-              onChange={() => setSelectedValue('option1')}
-            />
-            <RadioButton
-              id="option2"
-              name="test-group"
-              value="option2"
-              checked={selectedValue === 'option2'}
-              onChange={() => setSelectedValue('option2')}
-            />
-          </div>
-        );
-      };
-
-      renderWithTheme(<TestWrapper />);
-
-      const radios = screen.getAllByRole('radio');
-      const option1 = radios.find((radio) => radio.value === 'option1');
-      const option2 = radios.find((radio) => radio.value === 'option2');
-
-      expect(option1).toBeChecked();
-      expect(option2).not.toBeChecked();
-
-      fireEvent.click(option2);
-
-      expect(option1).not.toBeChecked();
-      expect(option2).toBeChecked();
-    });
-
-    it('should maintain radio group behavior with multiple options', () => {
-      const TestWrapper = () => {
-        const [selectedValue, setSelectedValue] = React.useState('option1');
-
-        return (
-          <div>
-            <RadioButton
-              id="option1"
-              name="test-group"
-              value="option1"
-              checked={selectedValue === 'option1'}
-              onChange={() => setSelectedValue('option1')}
-            />
-            <RadioButton
-              id="option2"
-              name="test-group"
-              value="option2"
-              checked={selectedValue === 'option2'}
-              onChange={() => setSelectedValue('option2')}
-            />
-            <RadioButton
-              id="option3"
-              name="test-group"
-              value="option3"
-              checked={selectedValue === 'option3'}
-              onChange={() => setSelectedValue('option3')}
-            />
-          </div>
-        );
-      };
-
-      renderWithTheme(<TestWrapper />);
-
-      const radios = screen.getAllByRole('radio');
-      const option1 = radios.find((radio) => radio.value === 'option1');
-      const option2 = radios.find((radio) => radio.value === 'option2');
-      const option3 = radios.find((radio) => radio.value === 'option3');
-
-      expect(option1).toBeChecked();
-      expect(option2).not.toBeChecked();
-      expect(option3).not.toBeChecked();
-
-      fireEvent.click(option3);
-
-      expect(option1).not.toBeChecked();
-      expect(option2).not.toBeChecked();
-      expect(option3).toBeChecked();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should be focusable when not disabled', () => {
-      renderWithTheme(<RadioButton />);
-
-      const radio = screen.getByRole('radio');
-      radio.focus();
-      expect(radio).toHaveFocus();
-    });
-
-    it('should not be focusable when disabled', () => {
-      renderWithTheme(<RadioButton disabled={true} />);
-
-      const radio = screen.getByRole('radio');
-      radio.focus();
-      expect(radio).not.toHaveFocus();
-    });
-
-    it('should have proper ARIA attributes', () => {
-      renderWithTheme(<RadioButton id="test-radio" name="test-group" value="test-value" />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toHaveAttribute('id', 'test-radio');
-      expect(radio).toHaveAttribute('name', 'test-group');
-      expect(radio).toHaveAttribute('value', 'test-value');
-    });
-
-    it('should have associated label', () => {
-      renderWithTheme(<RadioButton id="test-radio" />);
-
-      const radio = screen.getByRole('radio');
-      const label = radio.parentElement.querySelector('label');
-
-      expect(label).toHaveAttribute('for', 'test-radio');
-      expect(radio).toHaveAttribute('id', 'test-radio');
-    });
-  });
-
-  describe('Styling', () => {
-    it('should apply custom className to container', () => {
-      renderWithTheme(<RadioButton className="custom-class" />);
-
-      const container = screen.getByRole('radio').closest('.custom-class');
-      expect(container).toBeInTheDocument();
-    });
-
-    it('should pass through additional props', () => {
-      renderWithTheme(<RadioButton data-testid="custom-radio" aria-label="Custom radio button" />);
-
-      const radio = screen.getByTestId('custom-radio');
-      expect(radio).toBeInTheDocument();
-      expect(radio).toHaveAttribute('aria-label', 'Custom radio button');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle undefined checked prop', () => {
-      renderWithTheme(<RadioButton checked={undefined} />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).not.toBeChecked();
-    });
-
-    it('should handle null checked prop', () => {
-      renderWithTheme(<RadioButton checked={null} />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).not.toBeChecked();
-    });
-
-    it('should handle string checked prop', () => {
-      renderWithTheme(<RadioButton checked="true" />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeChecked();
-    });
-
-    it('should handle empty string className', () => {
-      renderWithTheme(<RadioButton className="" />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeInTheDocument();
-    });
-
-    it('should handle missing id prop', () => {
-      renderWithTheme(<RadioButton />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeInTheDocument();
-      expect(radio).not.toHaveAttribute('id');
-    });
-
-    it('should handle missing name prop', () => {
-      renderWithTheme(<RadioButton />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeInTheDocument();
-      expect(radio).not.toHaveAttribute('name');
-    });
-
-    it('should handle missing value prop', () => {
-      renderWithTheme(<RadioButton />);
-
-      const radio = screen.getByRole('radio');
-      expect(radio).toBeInTheDocument();
-      expect(radio).not.toHaveAttribute('value');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('should be focusable and respond to click after focus', () => {
-      renderWithTheme(<RadioButton onChange={mockOnChange} />);
-
-      const radio = screen.getByRole('radio');
-      radio.focus();
-      expect(radio).toHaveFocus();
-
-      // Radio buttons don't trigger onChange on keyDown, but can be clicked after focus
-      fireEvent.click(radio);
-      expect(mockOnChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not be focusable when disabled', () => {
-      renderWithTheme(<RadioButton onChange={mockOnChange} disabled={true} />);
-
-      const radio = screen.getByRole('radio');
-      radio.focus();
-
-      expect(radio).not.toHaveFocus();
-    });
-  });
-});
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
index 4759039622..bcfd07f24e 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
 import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
@@ -25,6 +25,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
 
   const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
   const [generateCodeItemModalOpen, setGenerateCodeItemModalOpen] = useState(false);
+  const hasChanges = useMemo(() => hasRequestChanges(item), [item]);
 
   useEffect(() => {
     const el = document.querySelector('.method-selector-container');
@@ -134,15 +135,15 @@ const QueryUrl = ({ item, collection, handleRun }) => {
             className="infotip mr-3"
             onClick={(e) => {
               e.stopPropagation();
-              if (!hasRequestChanges(item)) return;
+              if (!hasChanges) return;
               onSave();
             }}
           >
             <IconDeviceFloppy
-              color={hasRequestChanges(item) ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+              color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
               strokeWidth={1.5}
               size={22}
-              className={`${hasRequestChanges(item) ? 'cursor-pointer' : 'cursor-default'}`}
+              className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
             />
             <span className="infotiptext text-xs">
               Save <span className="shortcut">({saveShortcut})</span>
diff --git a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
index 7232d2ec43..f06102998d 100644
--- a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
@@ -5,7 +5,7 @@ import SingleLineEditor from 'components/SingleLineEditor/index';
 import { requestUrlChanged } from 'providers/ReduxStore/slices/collections';
 import { wsConnectOnly, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
 import { getPropertyFromDraftOrRequest } from 'utils/collections';
@@ -24,6 +24,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
   const url = getPropertyFromDraftOrRequest(item, 'request.url');
   const response = item.draft ? get(item, 'draft.response', {}) : get(item, 'response', {});
   const saveShortcut = isMacOS() ? '⌘S' : 'Ctrl+S';
+  const hasChanges = useMemo(() => hasRequestChanges(item), [item]);
 
   const showConnectingPulse = isConnecting && response.status !== 'CLOSED';
 
@@ -109,15 +110,15 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
               className="infotip mr-3"
               onClick={(e) => {
                 e.stopPropagation();
-                if (!hasRequestChanges(item)) return;
+                if (!hasChanges) return;
                 onSave();
               }}
             >
               <IconDeviceFloppy
-                color={hasRequestChanges(item) ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+                color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
                 strokeWidth={1.5}
                 size={22}
-                className={`${hasRequestChanges(item) ? 'cursor-pointer' : 'cursor-default'}`}
+                className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
               />
               <span className="infotip-text text-xs">
                 Save <span className="shortcut">({saveShortcut})</span>
diff --git a/packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js b/packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js
new file mode 100644
index 0000000000..50bc4c3f57
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { useDispatch } from 'react-redux';
+
+const ExampleNotFound = ({ exampleUid }) => {
+  const dispatch = useDispatch();
+  const [showErrorMessage, setShowErrorMessage] = useState(false);
+
+  const closeTab = () => {
+    dispatch(closeTabs({
+      tabUids: [exampleUid]
+    }));
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowErrorMessage(true);
+    }, 300);
+  }, []);
+
+  if (!showErrorMessage) {
+    return null;
+  }
+
+  return (
+    <div className="mt-6 px-6">
+      <div className="p-4 bg-orange-100 border-l-4 border-yellow-500 text-yellow-700">
+        <div>Response example no longer exists.</div>
+        <div className="mt-2">
+          This can occur when the example definition in your local file has been deleted or updated.
+        </div>
+      </div>
+      <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
+        Close Tab
+      </button>
+    </div>
+  );
+};
+
+export default ExampleNotFound;
diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js
index 11671ece49..f7880e5097 100644
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -29,6 +29,7 @@ import CollectionOverview from 'components/CollectionSettings/Overview';
 import RequestNotLoaded from './RequestNotLoaded';
 import RequestIsLoading from './RequestIsLoading';
 import FolderNotFound from './FolderNotFound';
+import ExampleNotFound from './ExampleNotFound';
 import WsQueryUrl from 'components/RequestPane/WsQueryUrl';
 import WSRequestPane from 'components/RequestPane/WSRequestPane';
 import WSResponsePane from 'components/ResponsePane/WsResponsePane';
@@ -191,24 +192,8 @@ const RequestTabPanel = () => {
     const item = findItemInCollection(collection, focusedTab.itemUid);
     const example = item?.examples?.find((ex) => ex.uid === focusedTab.uid);
 
-    if (!item) {
-      return (
-        <div className="pb-4 px-4">
-          Item not found! ItemUid:
-          {focusedTab.itemUid}
-        </div>
-      );
-    }
-
     if (!example) {
-      return (
-        <div className="pb-4 px-4">
-          Example not found! Item:
-          {item?.uid}
-          , ExampleUid:
-          {focusedTab.uid}
-        </div>
-      );
+      return <ExampleNotFound itemUid={focusedTab.itemUid} exampleUid={focusedTab.uid} />;
     }
     return <ResponseExample item={item} collection={collection} example={example} />;
   }
diff --git a/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
new file mode 100644
index 0000000000..25ade712fc
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
@@ -0,0 +1,144 @@
+import React, { useState, useRef, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { closeTabs, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
+import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
+import { hasExampleChanges, findItemInCollection } from 'utils/collections';
+import ExampleIcon from 'components/Icons/Examples';
+import ConfirmRequestClose from '../RequestTab/ConfirmRequestClose';
+import RequestTabNotFound from '../RequestTab/RequestTabNotFound';
+import StyledWrapper from '../RequestTab/StyledWrapper';
+import CloseTabIcon from '../RequestTab/CloseTabIcon';
+import DraftTabIcon from '../RequestTab/DraftTabIcon';
+
+const ExampleTab = ({ tab, collection }) => {
+  const dispatch = useDispatch();
+  const [showConfirmClose, setShowConfirmClose] = useState(false);
+
+  const dropdownTippyRef = useRef();
+
+  // Get item and example data
+  const item = findItemInCollection(collection, tab.itemUid);
+  const example = useMemo(() => item?.examples?.find((ex) => ex.uid === tab.uid), [item?.examples, tab.uid]);
+
+  const hasChanges = useMemo(() => hasExampleChanges(item, tab.uid), [item, tab.uid]);
+
+  const handleCloseClick = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    dispatch(closeTabs({
+      tabUids: [tab.uid]
+    }));
+  };
+
+  const handleRightClick = (_event) => {
+    const menuDropdown = dropdownTippyRef.current;
+    if (!menuDropdown) {
+      return;
+    }
+
+    if (menuDropdown.state.isShown) {
+      menuDropdown.hide();
+    } else {
+      menuDropdown.show();
+    }
+  };
+
+  const handleMouseUp = (e) => {
+    if (e.button === 1) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // Close the tab
+      dispatch(closeTabs({
+        tabUids: [tab.uid]
+      }));
+    }
+  };
+
+  if (!item || !example) {
+    return (
+      <StyledWrapper
+        className="flex items-center justify-between tab-container px-1"
+        onMouseUp={(e) => {
+          if (e.button === 1) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            dispatch(closeTabs({ tabUids: [tab.uid] }));
+          }
+        }}
+      >
+        <RequestTabNotFound handleCloseClick={handleCloseClick} />
+      </StyledWrapper>
+    );
+  }
+
+  return (
+    <StyledWrapper className="flex items-center justify-between tab-container px-1">
+      {showConfirmClose && (
+        <ConfirmRequestClose
+          item={item}
+          example={example}
+          onCancel={() => setShowConfirmClose(false)}
+          onCloseWithoutSave={() => {
+            dispatch(deleteRequestDraft({
+              itemUid: item.uid,
+              collectionUid: collection.uid
+            }));
+            dispatch(closeTabs({
+              tabUids: [tab.uid]
+            }));
+            setShowConfirmClose(false);
+          }}
+          onSaveAndClose={() => {
+            // For examples, we don't have a separate save action
+            // The changes are saved automatically when the request is saved
+            dispatch(closeTabs({
+              tabUids: [tab.uid]
+            }));
+            setShowConfirmClose(false);
+          }}
+        />
+      )}
+      <div
+        className={`flex items-center tab-label pl-2 ${tab.preview ? 'italic' : ''}`}
+        onContextMenu={handleRightClick}
+        onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
+        onMouseUp={(e) => {
+          if (!hasChanges) return handleMouseUp(e);
+
+          if (e.button === 1) {
+            e.stopPropagation();
+            e.preventDefault();
+            setShowConfirmClose(true);
+          }
+        }}
+      >
+        <ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-500 flex-shrink-0" />
+        <span className="tab-name" title={example.name}>
+          {example.name}
+        </span>
+      </div>
+      <div
+        className="flex px-2 close-icon-container"
+        onClick={(e) => {
+          if (!hasChanges) {
+            return handleCloseClick(e);
+          }
+
+          e.stopPropagation();
+          e.preventDefault();
+          setShowConfirmClose(true);
+        }}
+      >
+        {!hasChanges ? (
+          <CloseTabIcon />
+        ) : (
+          <DraftTabIcon />
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ExampleTab;
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index 0fac7e0a24..028c9bb2c5 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useRef, Fragment } from 'react';
+import React, { useCallback, useState, useRef, Fragment, useMemo } from 'react';
 import get from 'lodash/get';
 import { closeTabs, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -7,8 +7,7 @@ import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import darkTheme from 'themes/dark';
 import lightTheme from 'themes/light';
-import { findItemInCollection, hasRequestChanges, hasExampleChanges } from 'utils/collections';
-import { ExampleIcon } from 'components/Icons/examples';
+import { findItemInCollection, hasRequestChanges } from 'utils/collections';
 import ConfirmRequestClose from './ConfirmRequestClose';
 import RequestTabNotFound from './RequestTabNotFound';
 import SpecialTab from './SpecialTab';
@@ -20,6 +19,7 @@ import CloseTabIcon from './CloseTabIcon';
 import DraftTabIcon from './DraftTabIcon';
 import { flattenItems } from 'utils/collections/index';
 import { closeWsConnection } from 'utils/network/index';
+import ExampleTab from '../ExampleTab';
 
 const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid }) => {
   const dispatch = useDispatch();
@@ -30,13 +30,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  // Get item and example data for both request and example tabs
-  const item = tab.type === 'response-example'
-    ? findItemInCollection(collection, tab.itemUid)
-    : findItemInCollection(collection, tab.uid);
-  const example = tab.type === 'response-example'
-    ? item?.examples?.find((ex) => ex.uid === tab.uid)
-    : null;
+  const item = findItemInCollection(collection, tab.uid);
 
   const handleCloseClick = (event) => {
     event.stopPropagation();
@@ -103,66 +97,14 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
 
   // Handle response-example tabs specially
   if (tab.type === 'response-example') {
-    const hasChanges = hasExampleChanges(item, tab.uid);
-
-    if (!item || !example) {
-      return (
-        <StyledWrapper
-          className="flex items-center justify-between tab-container px-1"
-          onMouseUp={(e) => {
-            if (e.button === 1) {
-              e.preventDefault();
-              e.stopPropagation();
-
-              dispatch(closeTabs({ tabUids: [tab.uid] }));
-            }
-          }}
-        >
-          <RequestTabNotFound handleCloseClick={handleCloseClick} />
-        </StyledWrapper>
-      );
-    }
-
     return (
-      <StyledWrapper className="flex items-center justify-between tab-container px-1">
-        <div
-          className={`flex items-center tab-label pl-2 ${tab.preview ? 'italic' : ''}`}
-          onContextMenu={handleRightClick}
-          onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
-          onMouseUp={(e) => {
-            if (!hasChanges) return handleMouseUp(e);
-
-            if (e.button === 1) {
-              e.stopPropagation();
-              e.preventDefault();
-              setShowConfirmClose(true);
-            }
-          }}
-        >
-          <ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-500 flex-shrink-0" />
-          <span className="tab-name" title={example.name}>
-            {example.name}
-          </span>
-        </div>
-        <div
-          className="flex px-2 close-icon-container"
-          onClick={(e) => {
-            if (!hasChanges) {
-              return handleCloseClick(e);
-            }
-
-            e.stopPropagation();
-            e.preventDefault();
-            setShowConfirmClose(true);
-          }}
-        >
-          {!hasChanges ? (
-            <CloseTabIcon />
-          ) : (
-            <DraftTabIcon />
-          )}
-        </div>
-      </StyledWrapper>
+      <ExampleTab
+        tab={tab}
+        collection={collection}
+        tabIndex={tabIndex}
+        collectionRequestTabs={collectionRequestTabs}
+        folderUid={folderUid}
+      />
     );
   }
 
@@ -202,13 +144,13 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
 
   const isWS = item.type === 'ws-request';
   const method = getMethodText(item);
+  const hasChanges = useMemo(() => hasRequestChanges(item), [item]);
 
   return (
     <StyledWrapper className="flex items-center justify-between tab-container px-1">
       {showConfirmClose && (
         <ConfirmRequestClose
           item={item}
-          example={tab.type === 'response-example' ? example : null}
           onCancel={() => setShowConfirmClose(false)}
           onCloseWithoutSave={() => {
             isWS && closeWsConnection(item.uid);
@@ -246,7 +188,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
         onContextMenu={handleRightClick}
         onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
         onMouseUp={(e) => {
-          if (!hasRequestChanges(item)) return handleMouseUp(e);
+          if (!hasChanges) return handleMouseUp(e);
 
           if (e.button === 1) {
             e.stopPropagation();
@@ -274,7 +216,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
       <div
         className="flex px-2 close-icon-container"
         onClick={(e) => {
-          if (!hasRequestChanges(item)) {
+          if (!hasChanges) {
             isWS && closeWsConnection(item.uid);
             return handleCloseClick(e);
           };
@@ -284,7 +226,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
           setShowConfirmClose(true);
         }}
       >
-        {!hasRequestChanges(item) ? (
+        {!hasChanges ? (
           <CloseTabIcon />
         ) : (
           <DraftTabIcon />
@@ -301,6 +243,7 @@ function RequestTabMenu({ onDropdownCreate, collectionRequestTabs, tabIndex, col
   const totalTabs = collectionRequestTabs.length || 0;
   const currentTabUid = collectionRequestTabs[tabIndex]?.uid;
   const currentTabItem = findItemInCollection(collection, currentTabUid);
+  const currentTabHasChanges = useMemo(() => hasRequestChanges(currentTabItem), [currentTabItem]);
 
   const hasLeftTabs = tabIndex !== 0;
   const hasRightTabs = totalTabs > tabIndex + 1;
diff --git a/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js b/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
index 7066676bae..636d61b4a3 100644
--- a/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/CreateExampleModal/index.js
@@ -1,9 +1,19 @@
-import React, { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Modal from 'components/Modal';
+import Portal from 'components/Portal';
 
-const CreateExampleModal = ({ isOpen, onClose, onSave, title = 'Create Response Example' }) => {
+const CreateExampleModal = ({ isOpen, onClose, onSave, title = 'Create Response Example', initialName = '' }) => {
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
+  const [nameError, setNameError] = useState('');
+
+  const handleNameChange = (e) => {
+    setName(e.target.value);
+    // Clear error when user starts typing
+    if (nameError) {
+      setNameError('');
+    }
+  };
 
   const handleConfirm = () => {
     if (name.trim()) {
@@ -11,6 +21,9 @@ const CreateExampleModal = ({ isOpen, onClose, onSave, title = 'Create Response
       // Reset form
       setName('');
       setDescription('');
+      setNameError('');
+    } else {
+      setNameError('Example name is required');
     }
   };
 
@@ -18,66 +31,71 @@ const CreateExampleModal = ({ isOpen, onClose, onSave, title = 'Create Response
     // Reset form when closing
     setName('');
     setDescription('');
+    setNameError('');
     onClose();
   };
 
-  // Reset form when modal opens
-  React.useEffect(() => {
+  useEffect(() => {
     if (isOpen) {
-      setName('');
+      setName(initialName);
       setDescription('');
+      setNameError('');
     }
-  }, [isOpen]);
+  }, [isOpen, initialName]);
 
   if (!isOpen) {
     return null;
   }
 
   return (
-    <Modal
-      size="sm"
-      title={title}
-      handleCancel={handleClose}
-      handleConfirm={handleConfirm}
-      confirmText="Create Example"
-      cancelText="Cancel"
-      confirmDisabled={!name.trim()}
-      isOpen={isOpen}
-    >
-      <div className="space-y-4">
-        <div>
-          <label htmlFor="exampleName" className="block font-semibold">
-            Example Name
-          </label>
-          <input
-            id="exampleName"
-            type="text"
-            className="textbox mt-2 w-full"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="Enter example name..."
-            autoFocus
-            required
-            data-testid="create-example-name-input"
-          />
-        </div>
+    <Portal>
+      <Modal
+        size="md"
+        title={title}
+        handleCancel={handleClose}
+        handleConfirm={handleConfirm}
+        confirmText="Create Example"
+        cancelText="Cancel"
+        isOpen={isOpen}
+      >
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="exampleName" className="block font-semibold">
+              Example Name<span className="text-red-600">*</span>
+            </label>
+            <input
+              id="exampleName"
+              type="text"
+              className="textbox mt-2 w-full"
+              value={name}
+              onChange={handleNameChange}
+              autoFocus
+              required
+              data-testid="create-example-name-input"
+            />
+            {nameError && (
+              <div className="text-red-500 text-sm mt-1" data-testid="name-error">
+                {nameError}
+              </div>
+            )}
+          </div>
 
-        <div>
-          <label htmlFor="exampleDescription" className="block font-semibold">
-            Description (Optional)
-          </label>
-          <textarea
-            id="exampleDescription"
-            className="textbox mt-2 w-full"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            placeholder="Enter example description..."
-            rows={3}
-            data-testid="create-example-description-input"
-          />
+          <div>
+            <label htmlFor="exampleDescription" className="block font-semibold">
+              Description
+            </label>
+            <textarea
+              id="exampleDescription"
+              className="textbox mt-2 w-full"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              data-testid="create-example-description-input"
+            />
+          </div>
         </div>
-      </div>
-    </Modal>
+      </Modal>
+    </Portal>
   );
 };
 
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js
index ebe5fbf1e3..dee4f683e7 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import get from 'lodash/get';
 import { updateResponseExampleRequest } from 'providers/ReduxStore/slices/collections';
@@ -9,8 +9,11 @@ import StyledWrapper from './StyledWrapper';
 const ResponseExampleBody = ({ editMode, item, collection, exampleUid, onSave }) => {
   const dispatch = useDispatch();
 
-  // Get body from item draft, similar to how RequestHeaders works
-  const body = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body || { mode: 'none' } : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body || { mode: 'none' };
+  const body = useMemo(() => {
+    return item.draft
+      ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body || { mode: 'none' }
+      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body || { mode: 'none' };
+  }, [item, exampleUid]);
 
   const onBodyEdit = (value) => {
     if (editMode && item && collection.uid && exampleUid) {
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js
index 23e698f0f0..d471245e71 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyMode/index.js
@@ -1,27 +1,13 @@
-import React, { useRef, forwardRef } from 'react';
+import React from 'react';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown } from '@tabler/icons';
 import { updateResponseExampleRequest } from 'providers/ReduxStore/slices/collections';
-import Dropdown from 'components/Dropdown';
-import { humanizeRequestBodyMode } from 'utils/collections';
+import BodyModeSelector from 'components/BodyModeSelector';
 import { format, applyEdits } from 'jsonc-parser';
 import xmlFormat from 'xml-formatter';
 import { toastError } from 'utils/common/error';
 
 const ResponseExampleBodyMode = ({ item, collection, exampleUid, body, bodyMode, onBodyEdit, editMode = false }) => {
   const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none selected-body-mode">
-        {humanizeRequestBodyMode(bodyMode)}
-        {' '}
-        <IconCaretDown className="caret ml-2" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
 
   const onModeChange = (value) => {
     if (item && collection && exampleUid) {
@@ -100,85 +86,11 @@ const ResponseExampleBodyMode = ({ item, collection, exampleUid, body, bodyMode,
           Prettify
         </button>
       )}
-      <div className={`inline-flex items-center body-mode-selector ${editMode ? 'cursor-pointer' : 'cursor-default'}`}>
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end" disabled={!editMode}>
-          <div className="label-item font-medium">Form</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('multipartForm');
-            }}
-          >
-            Multipart Form
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('formUrlEncoded');
-            }}
-          >
-            Form URL Encoded
-          </div>
-          <div className="label-item font-medium">Raw</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('json');
-            }}
-          >
-            JSON
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('xml');
-            }}
-          >
-            XML
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('text');
-            }}
-          >
-            TEXT
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('sparql');
-            }}
-          >
-            SPARQL
-          </div>
-          <div className="label-item font-medium">Other</div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('file');
-            }}
-          >
-            File / Binary
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            None
-          </div>
-        </Dropdown>
-      </div>
+      <BodyModeSelector
+        currentMode={bodyMode}
+        onModeChange={onModeChange}
+        disabled={!editMode}
+      />
     </div>
   );
 };
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js
index b106d51965..c2dbd8cf9b 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import get from 'lodash/get';
 import { updateResponseExampleDetails } from 'providers/ReduxStore/slices/collections';
@@ -7,19 +7,14 @@ import StyledWrapper from './StyledWrapper';
 const ResponseExampleDescription = ({ editMode, item, collection, exampleUid }) => {
   const dispatch = useDispatch();
 
-  // Get description from item draft, similar to how RequestHeaders works
-  const description = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.description || '' : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.description || '';
-
-  const [value, setValue] = useState(description || '');
-
-  // Update local state when description changes
-  useEffect(() => {
-    setValue(description || '');
-  }, [description]);
+  const description = useMemo(() => {
+    return item.draft
+      ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.description || ''
+      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.description || '';
+  }, [item, exampleUid]);
 
   const handleChange = (e) => {
     const newValue = e.target.value;
-    setValue(newValue);
 
     if (editMode && item && collection && exampleUid) {
       dispatch(updateResponseExampleDetails({
@@ -37,8 +32,9 @@ const ResponseExampleDescription = ({ editMode, item, collection, exampleUid })
     <StyledWrapper className="w-full">
       <div className="mb-2">
         <textarea
-          value={value}
-          onChange={editMode ? handleChange : () => {}}
+          data-testid="response-example-description-input"
+          value={description}
+          onChange={handleChange}
           readOnly={!editMode}
           placeholder="Enter example description..."
           className="w-full p-3 border rounded-md"
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
index 44c07a5826..989e7ac9c7 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFileBody/index.js
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { get, cloneDeep, isArray } from 'lodash';
+import React, { useState, useMemo } from 'react';
+import { get, cloneDeep } from 'lodash';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
@@ -18,12 +18,11 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
   const { storedTheme } = useTheme();
 
   // Get file data from the specific example
-  const rawParams = item.draft
-    ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.file
-    : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.file;
-
-  // Ensure params is always an array
-  const params = Array.isArray(rawParams) ? rawParams : [];
+  const params = useMemo(() => {
+    return item.draft
+      ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.file || []
+      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.file || [];
+  }, [item.draft, item.examples, item, exampleUid]);
 
   const [enabledFileUid, setEnableFileUid] = useState(params.length > 0 ? params[0].uid : '');
 
@@ -151,7 +150,7 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
                           param,
                           'filePath') : () => {}}
                         collection={collection}
-                        editMode={editMode}
+                        readOnly={!editMode}
                       />
                     </td>
                     <td>
@@ -186,6 +185,7 @@ const ResponseExampleFileBody = ({ item, collection, exampleUid, editMode = fals
                           onChange={editMode ? (e) => handleParamChange(e, param, 'selected') : () => {}}
                           disabled={!editMode}
                           className="mr-1 mousetrap"
+                          dataTestId={`file-radio-button-${index}`}
                         />
                         <button
                           tabIndex="-1"
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
index ac5b09d94f..f4f88fb027 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleFormUrlEncodedParams/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@@ -15,10 +15,11 @@ const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, edi
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  // Get form data from the specific example
-  const params = item.draft
-    ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.formUrlEncoded || []
-    : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.formUrlEncoded || [];
+  const params = useMemo(() => {
+    return item.draft
+      ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.formUrlEncoded || []
+      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.formUrlEncoded || [];
+  }, [item, exampleUid]);
 
   const addParam = () => {
     const newParam = {
@@ -111,6 +112,7 @@ const ResponseExampleFormUrlEncodedParams = ({ item, collection, exampleUid, edi
                           checked={param.enabled === true}
                           disabled={!editMode}
                           onChange={(e) => handleParamChange(e, param, 'enabled')}
+                          dataTestId={`urlencoded-param-checkbox-${index}`}
                         />
                       </div>
                       <input
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
index a05fc2e4bf..beb1266ed3 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { IconTrash } from '@tabler/icons';
@@ -19,8 +19,12 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
-  // Get headers from item draft, similar to how RequestHeaders works
-  const headers = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.headers || [] : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.headers || [];
+
+  const headers = useMemo(() => {
+    return item.draft
+      ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.headers || []
+      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.headers || [];
+  }, [item, exampleUid]);
 
   const handleAddHeader = () => {
     if (editMode) {
@@ -123,7 +127,7 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
       >
         <ReorderTable updateReorderedItem={handleHeaderDrag}>
           {headers && headers.length
-            ? headers.map((header) => (
+            ? headers.map((header, index) => (
                 <tr key={header.uid} data-uid={header.uid}>
                   <td className="flex relative">
                     <div className="flex items-center justify-center mr-3">
@@ -131,10 +135,12 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
                         checked={header.enabled === true}
                         disabled={!editMode}
                         onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                        dataTestId={`header-checkbox-${index}`}
                       />
                     </div>
                     <SingleLineEditor
                       value={header.name || ''}
+                      readOnly={!editMode}
                       theme={storedTheme}
                       onSave={() => {}}
                       onChange={(newValue) =>
@@ -154,6 +160,7 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {
                     <div className="flex items-center justify-center pl-4">
                       <SingleLineEditor
                         value={header.value || ''}
+                        readOnly={!editMode}
                         theme={storedTheme}
                         onSave={() => {}}
                         onChange={(newValue) =>
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
index 0d8b413eaf..9a4f8238c9 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@@ -18,10 +18,11 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
-  // Get multipart form data from the specific example
-  const params = item.draft
-    ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.multipartForm || []
-    : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.multipartForm || [];
+  const params = useMemo(() => {
+    return item.draft
+      ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.body?.multipartForm || []
+      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.body?.multipartForm || [];
+  }, [item, exampleUid]);
 
   const addParam = () => {
     const newParam = {
@@ -72,7 +73,6 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
       }
       case 'value': {
         param.value = e.target.value;
-        // Auto-detect content type for file types using mime library (same as updateFile)
         if (param.type === 'file' && e.target.value) {
           const contentType = mime.contentType(path.extname(e.target.value));
           param.contentType = contentType || '';
@@ -151,6 +151,7 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
                           checked={param.enabled === true}
                           disabled={!editMode}
                           onChange={(e) => handleParamChange(e, param, 'enabled')}
+                          dataTestId={`multipart-form-param-checkbox-${index}`}
                         />
                       </div>
                       <input
@@ -161,7 +162,7 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
                         spellCheck="false"
                         value={param.name}
                         className="mousetrap"
-                        onChange={editMode ? (e) => handleParamChange(e, param, 'name') : () => {}}
+                        onChange={(e) => handleParamChange(e, param, 'name')}
                         disabled={!editMode}
                       />
                     </td>
@@ -170,30 +171,30 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
                         {param.type === 'file' ? (
                           <FilePickerEditor
                             value={param.value}
-                            onChange={editMode ? (newValue) =>
+                            onChange={(newValue) =>
                               handleParamChange({
                                 target: {
                                   value: newValue
                                 }
                               },
                               param,
-                              'value') : () => {}}
+                              'value')}
                             collection={collection}
-                            editMode={editMode}
+                            readOnly={!editMode}
                           />
                         ) : (
                           <MultiLineEditor
                             onSave={() => {}}
                             theme={storedTheme}
                             value={param.value}
-                            onChange={editMode ? (newValue) =>
+                            onChange={(newValue) =>
                               handleParamChange({
                                 target: {
                                   value: newValue
                                 }
                               },
                               param,
-                              'value') : () => {}}
+                              'value')}
                             onRun={() => {}}
                             allowNewlines={true}
                             collection={collection}
@@ -210,14 +211,14 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
                           theme={storedTheme}
                           placeholder="Auto"
                           value={param.contentType}
-                          onChange={editMode ? (newValue) =>
+                          onChange={(newValue) =>
                             handleParamChange({
                               target: {
                                 value: newValue
                               }
                             },
                             param,
-                            'contentType') : () => {}}
+                            'contentType')}
                           onRun={() => {}}
                           collection={collection}
                           readOnly={!editMode}
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
index d9ce7284b2..1fcf0ef2ac 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { IconTrash } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
@@ -9,6 +9,7 @@ import ReorderTable from 'components/ReorderTable';
 import SingleLineEditor from 'components/SingleLineEditor';
 import BulkEditor from 'components/BulkEditor';
 import Checkbox from 'components/Checkbox';
+import InfoTip from 'components/InfoTip';
 import StyledWrapper from './StyledWrapper';
 
 const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
@@ -16,69 +17,80 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
   const { storedTheme } = useTheme();
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
-  // Get params from item draft, similar to how RequestHeaders works
-  const params = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.params || [] : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.params || [];
+  const params = useMemo(() => {
+    return item.draft
+      ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.request?.params || []
+      : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.request?.params || [];
+  }, [item, exampleUid]);
 
   const queryParams = params.filter((param) => param.type === 'query');
   const pathParams = params.filter((param) => param.type === 'path');
 
   const handleAddQueryParam = () => {
-    if (editMode) {
-      dispatch(addResponseExampleParam({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid
-      }));
+    if (!editMode) {
+      return;
     }
+
+    dispatch(addResponseExampleParam({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid
+    }));
   };
 
   const handleQueryParamChange = (e, data, key) => {
-    if (editMode) {
-      const updatedParam = { ...data };
-      switch (key) {
-        case 'name': {
-          updatedParam.name = e.target.value;
-          break;
-        }
-        case 'value': {
-          updatedParam.value = e.target.value;
-          break;
-        }
-        case 'enabled': {
-          updatedParam.enabled = e.target.checked;
-          break;
-        }
-      }
+    if (!editMode) {
+      return;
+    }
 
-      dispatch(updateResponseExampleParam({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid,
-        param: updatedParam
-      }));
+    const updatedParam = { ...data };
+    switch (key) {
+      case 'name': {
+        updatedParam.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        updatedParam.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        updatedParam.enabled = e.target.checked;
+        break;
+      }
     }
+
+    dispatch(updateResponseExampleParam({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      param: updatedParam
+    }));
   };
 
   const handleRemoveQueryParam = (param) => {
-    if (editMode) {
-      dispatch(deleteResponseExampleParam({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid,
-        paramUid: param.uid
-      }));
+    if (!editMode) {
+      return;
     }
+
+    dispatch(deleteResponseExampleParam({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      paramUid: param.uid
+    }));
   };
 
   const handleQueryParamDrag = ({ updateReorderedItem }) => {
-    if (editMode) {
-      dispatch(moveResponseExampleParam({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid,
-        updateReorderedItem
-      }));
+    if (!editMode) {
+      return;
     }
+
+    dispatch(moveResponseExampleParam({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      updateReorderedItem
+    }));
   };
 
   const toggleBulkEditMode = () => {
@@ -86,14 +98,32 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
   };
 
   const handleBulkParamsChange = (newParams) => {
-    if (editMode) {
-      dispatch(setResponseExampleParams({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid,
-        params: newParams
-      }));
+    if (!editMode) {
+      return;
     }
+
+    dispatch(setResponseExampleParams({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      params: newParams
+    }));
+  };
+
+  const handlePathParamChange = (e, data) => {
+    if (!editMode) {
+      return;
+    }
+
+    const updatedParam = { ...data };
+    updatedParam.value = e.target.value;
+
+    dispatch(updateResponseExampleParam({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      param: updatedParam
+    }));
   };
 
   if (isBulkEditMode && editMode) {
@@ -108,83 +138,133 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
     );
   }
 
-  if (queryParams.length === 0 && !editMode) {
+  if (queryParams.length === 0 && pathParams.length === 0 && !editMode) {
     return null;
   }
 
   return (
     <StyledWrapper className="w-full mt-4">
-      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Query parameters</div>
-        <Table
-          headers={[
-            { name: 'Name', accessor: 'name', width: '40%' },
-            { name: 'Value', accessor: 'value', width: '60%' }
-          ]}
-        >
-          <ReorderTable updateReorderedItem={handleQueryParamDrag}>
-            {queryParams && queryParams.length
-              ? queryParams.map((param) => (
-                  <tr key={param.uid} data-uid={param.uid}>
-                    <td className="flex relative">
-                      <div className="flex items-center justify-center mr-3">
-                        <Checkbox
-                          checked={param.enabled !== false}
-                          disabled={!editMode}
-                          onChange={editMode ? (e) => handleQueryParamChange(e, param, 'enabled') : () => {}}
-                        />
-                      </div>
+      <div className="mb-1 title text-xs font-bold">Query parameters</div>
+      <Table
+        headers={[
+          { name: 'Name', accessor: 'name', width: '40%' },
+          { name: 'Value', accessor: 'value', width: '60%' }
+        ]}
+      >
+        <ReorderTable updateReorderedItem={handleQueryParamDrag}>
+          {queryParams && queryParams.length
+            ? queryParams.map((param, index) => (
+                <tr key={param.uid} data-uid={param.uid}>
+                  <td className="flex relative">
+                    <div className="flex items-center justify-center mr-3">
+                      <Checkbox
+                        checked={param.enabled !== false}
+                        disabled={!editMode}
+                        onChange={(e) => handleQueryParamChange(e, param, 'enabled')}
+                        dataTestId={`query-param-checkbox-${index}`}
+                      />
+                    </div>
+                    <SingleLineEditor
+                      value={param.name || ''}
+                      theme={storedTheme}
+                      onSave={() => {}}
+                      onChange={(newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'name')}
+                      onRun={() => {}}
+                      collection={collection}
+                      variablesAutocomplete={true}
+                      readOnly={!editMode}
+                    />
+                  </td>
+                  <td>
+                    <div className="flex items-center justify-center pl-4">
                       <SingleLineEditor
-                        value={param.name || ''}
+                        value={param.value || ''}
                         theme={storedTheme}
                         onSave={() => {}}
-                        onChange={editMode ? (newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'name') : () => {}}
+                        onChange={(newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'value')}
                         onRun={() => {}}
                         collection={collection}
                         variablesAutocomplete={true}
+                        readOnly={!editMode}
                       />
-                    </td>
-                    <td>
-                      <div className="flex items-center justify-center pl-4">
+                      {editMode && (
+                        <button tabIndex="-1" onClick={() => handleRemoveQueryParam(param)} className="delete-button">
+                          <IconTrash strokeWidth={1.5} size={16} />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            : null}
+        </ReorderTable>
+      </Table>
+
+      {editMode && (
+        <div className="flex justify-between mt-2">
+          <button
+            className="btn-action text-link pr-2 py-3 select-none"
+            onClick={handleAddQueryParam}
+          >
+            + Add Param
+          </button>
+          <button
+            className="btn-action text-link select-none"
+            onClick={toggleBulkEditMode}
+          >
+            Bulk Edit
+          </button>
+        </div>
+      )}
+      {pathParams && pathParams.length > 0 && (
+        <>
+          <div className="mb-1 title text-xs font-bold flex items-stretch mt-4">
+            <span>Path parameters</span>
+            <InfoTip infotipId="path-param-InfoTip">
+              <div>
+                Path variables are automatically added whenever the
+                <code className="font-mono mx-2">:name</code>
+                template is used in the URL. <br /> For example:
+                <code className="font-mono mx-2">
+                  https://example.com/v1/users/<span>:id</span>
+                </code>
+              </div>
+            </InfoTip>
+          </div>
+          <Table
+            headers={[
+              { name: 'Name', accessor: 'name', width: '40%' },
+              { name: 'Value', accessor: 'value', width: '60%' }
+            ]}
+          >
+            {pathParams && pathParams.length
+              ? pathParams.map((path, index) => {
+                  return (
+                    <tr key={index} data-uid={path.uid}>
+                      <td>
+                        {path.name}
+                      </td>
+                      <td>
                         <SingleLineEditor
-                          value={param.value || ''}
+                          value={path.value}
                           theme={storedTheme}
                           onSave={() => {}}
-                          onChange={editMode ? (newValue) => handleQueryParamChange({ target: { value: newValue } }, param, 'value') : () => {}}
+                          onChange={(newValue) => handlePathParamChange({ target: { value: newValue } }, path)}
                           onRun={() => {}}
                           collection={collection}
                           variablesAutocomplete={true}
+                          readOnly={!editMode}
                         />
-                        {editMode && (
-                          <button tabIndex="-1" onClick={() => handleRemoveQueryParam(param)} className="delete-button">
-                            <IconTrash strokeWidth={1.5} size={16} />
-                          </button>
-                        )}
-                      </div>
-                    </td>
-                  </tr>
-                ))
+                      </td>
+                    </tr>
+                  );
+                })
               : null}
-          </ReorderTable>
-        </Table>
-
-        {editMode && (
-          <div className="flex justify-between mt-2">
-            <button
-              className="btn-action text-link pr-2 py-3 select-none"
-              onClick={handleAddQueryParam}
-            >
-              + Add Param
-            </button>
-            <button
-              className="btn-action text-link select-none"
-              onClick={toggleBulkEditMode}
-            >
-              Bulk Edit
-            </button>
-          </div>
-        )}
-      </div>
+          </Table>
+          {pathParams.length === 0 && <div className="title pr-2 py-3 mt-2 text-xs">No path parameters defined</div>}
+        </>
+      )}
+
     </StyledWrapper>
   );
 };
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
index 2dfa6365d2..50553123d1 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { updateResponseExampleRequestUrl } from 'providers/ReduxStore/slices/collections';
 import SingleLineEditor from 'components/SingleLineEditor';
@@ -8,12 +8,17 @@ import get from 'lodash/get';
 const ResponseExampleUrlBar = ({ item, collection, editMode, onSave, exampleUid }) => {
   const dispatch = useDispatch();
 
-  // Get method and URL from the example, not the main request
-  const exampleData = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) : get(item, 'examples', []).find((e) => e.uid === exampleUid);
+  const exampleData = useMemo(() => {
+    return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) : get(item, 'examples', []).find((e) => e.uid === exampleUid);
+  }, [item, exampleUid]);
   const method = get(exampleData, 'request.method');
   const url = get(exampleData, 'request.url');
 
   const onChange = (value) => {
+    if (!editMode) {
+      return;
+    }
+
     dispatch(updateResponseExampleRequestUrl({
       itemUid: item.uid,
       collectionUid: collection.uid,
@@ -23,7 +28,7 @@ const ResponseExampleUrlBar = ({ item, collection, editMode, onSave, exampleUid
   };
 
   const getMethodClass = () => {
-    switch (method) {
+    switch (method?.toUpperCase()) {
       case 'GET':
         return 'method-get';
       case 'POST':
@@ -50,7 +55,7 @@ const ResponseExampleUrlBar = ({ item, collection, editMode, onSave, exampleUid
   return (
     <StyledWrapper className="flex items-center">
       <div className="url-bar-container w-full flex p-2 text-xs rounded-md items-center justify-between" data-testid="url-bar-container">
-        <div className={`method flex text-xs items-center justify-center px-2 rounded h-6 flex-shrink-0 mr-2 overflow-hidden whitespace-nowrap font-semibold ${getMethodClass()}`}>
+        <div className={`method flex text-xs items-center justify-center px-2 rounded h-6 flex-shrink-0 mr-2 overflow-hidden whitespace-nowrap font-semibold uppercase ${getMethodClass()}`}>
           {method || 'GET'}
         </div>
 
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/index.js
index db058020ab..6b8de351d8 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseContent/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { useSelector } from 'react-redux';
@@ -6,29 +6,47 @@ import get from 'lodash/get';
 import { updateResponseExampleResponse } from 'providers/ReduxStore/slices/collections';
 import CodeEditor from 'components/CodeEditor';
 import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
-import { safeStringifyJSON } from 'utils/common';
 import StyledWrapper from './StyledWrapper';
 
 const ResponseExampleResponseContent = ({ editMode, item, collection, exampleUid, onSave }) => {
   const dispatch = useDispatch();
-  const { theme, displayedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
-  // Get response from item draft, similar to how RequestHeaders works
-  const response = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response || {};
+  const response = useMemo(() => {
+    return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response || {};
+  }, [item, exampleUid]);
 
   const getResponseContent = () => {
-    if (typeof response.body === 'string') {
-      return response.body;
+    if (!response) {
+      return '';
     }
-    if (typeof response.body === 'object') {
-      return safeStringifyJSON(response.body, true);
+
+    if (!response.body) {
+      return '';
     }
-    return '';
+
+    return response.body.content;
   };
 
   const getCodeMirrorMode = () => {
-    // Try to detect content type from headers
+    if (!response) {
+      return null;
+    }
+
+    if (response.body && response.body.type) {
+      const bodyType = response.body.type;
+      if (bodyType === 'json') {
+        return 'application/ld+json';
+      } else if (bodyType === 'xml') {
+        return 'application/xml';
+      } else if (bodyType === 'html') {
+        return 'application/html';
+      } else if (bodyType === 'text') {
+        return 'application/text';
+      }
+    }
+
     const contentType = response.headers?.find((h) => h.name?.toLowerCase() === 'content-type')?.value?.toLowerCase() || '';
 
     return getCodeMirrorModeBasedOnContentType(contentType);
@@ -36,12 +54,16 @@ const ResponseExampleResponseContent = ({ editMode, item, collection, exampleUid
 
   const onResponseEdit = (value) => {
     if (editMode && item && collection && exampleUid) {
+      const currentBody = response.body || {};
       dispatch(updateResponseExampleResponse({
         itemUid: item.uid,
         collectionUid: collection.uid,
         exampleUid: exampleUid,
         response: {
-          body: value
+          body: {
+            type: currentBody.type || 'text',
+            content: value
+          }
         }
       }));
     }
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
index e0dede0310..e2ffd6573e 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleResponseHeaders/index.js
@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { IconTrash } from '@tabler/icons';
 import get from 'lodash/get';
-import { addResponseExampleHeader, updateResponseExampleHeader, deleteResponseExampleHeader, moveResponseExampleHeader, setResponseExampleHeaders } from 'providers/ReduxStore/slices/collections';
+import { addResponseExampleHeader, updateResponseExampleHeader, deleteResponseExampleHeader, moveResponseExampleHeader, setResponseExampleHeaders, updateResponseExampleResponse } from 'providers/ReduxStore/slices/collections';
+import { getBodyType } from 'utils/responseBodyProcessor';
 import Table from 'components/Table-v2';
 import ReorderTable from 'components/ReorderTable';
 import SingleLineEditor from 'components/SingleLineEditor';
@@ -16,65 +17,100 @@ const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid }) => {
   const dispatch = useDispatch();
-  const { theme, storedTheme } = useTheme();
+  const { storedTheme } = useTheme();
   const [isBulkEditMode, setIsBulkEditMode] = useState(false);
 
-  // Get headers from item draft, similar to how RequestHeaders works
-  const headers = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response?.headers || [] : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response?.headers || [];
+  const headers = useMemo(() => {
+    return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response?.headers || [] : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response?.headers || [];
+  }, [item, exampleUid]);
+
+  const response = useMemo(() => {
+    return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.response || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.response || {};
+  }, [item, exampleUid]);
 
   const handleAddHeader = () => {
-    if (editMode) {
-      dispatch(addResponseExampleHeader({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid
-      }));
+    if (!editMode) {
+      return;
     }
+
+    dispatch(addResponseExampleHeader({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid
+    }));
   };
 
   const handleHeaderValueChange = (e, header, type) => {
-    if (editMode) {
-      const updatedHeader = { ...header };
-      switch (type) {
-        case 'name': {
-          updatedHeader.name = e.target.value;
-          break;
-        }
-        case 'value': {
-          updatedHeader.value = e.target.value;
-          break;
-        }
+    if (!editMode) {
+      return;
+    }
+
+    const updatedHeader = { ...header };
+    switch (type) {
+      case 'name': {
+        updatedHeader.name = e.target.value;
+        break;
       }
+      case 'value': {
+        updatedHeader.value = e.target.value;
+        break;
+      }
+    }
+
+    dispatch(updateResponseExampleHeader({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      header: updatedHeader
+    }));
 
-      dispatch(updateResponseExampleHeader({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid,
-        header: updatedHeader
-      }));
+    // If content-type header is being updated, automatically update the body type
+    if (header.name?.toLowerCase() === 'content-type' && type === 'value') {
+      const newContentType = updatedHeader.value?.toLowerCase() || '';
+      const newBodyType = getBodyType(newContentType);
+      const currentBodyType = response.body?.type || 'text';
+
+      // Only update if the body type has changed
+      if (newBodyType !== currentBodyType) {
+        dispatch(updateResponseExampleResponse({
+          itemUid: item.uid,
+          collectionUid: collection.uid,
+          exampleUid: exampleUid,
+          response: {
+            body: {
+              type: newBodyType,
+              content: response.body?.content || ''
+            }
+          }
+        }));
+      }
     }
   };
 
   const handleRemoveHeader = (header) => {
-    if (editMode) {
-      dispatch(deleteResponseExampleHeader({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid,
-        headerUid: header.uid
-      }));
+    if (!editMode) {
+      return;
     }
+
+    dispatch(deleteResponseExampleHeader({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      headerUid: header.uid
+    }));
   };
 
   const handleHeaderDrag = ({ updateReorderedItem }) => {
-    if (editMode) {
-      dispatch(moveResponseExampleHeader({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid,
-        updateReorderedItem
-      }));
+    if (!editMode) {
+      return;
     }
+
+    dispatch(moveResponseExampleHeader({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      updateReorderedItem
+    }));
   };
 
   const toggleBulkEditMode = () => {
@@ -82,19 +118,21 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
   };
 
   const handleBulkHeadersChange = (newHeaders) => {
-    if (editMode) {
-      const cleanedHeaders = newHeaders.map((header) => ({
-        uid: header.uid,
-        name: header.name,
-        value: header.value
-      }));
-      dispatch(setResponseExampleHeaders({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        exampleUid: exampleUid,
-        headers: cleanedHeaders
-      }));
+    if (!editMode) {
+      return;
     }
+    const cleanedHeaders = newHeaders.map((header) => ({
+      uid: header.uid,
+      name: header.name,
+      value: header.value
+    }));
+
+    dispatch(setResponseExampleHeaders({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      headers: cleanedHeaders
+    }));
   };
 
   if (isBulkEditMode && editMode) {
@@ -131,17 +169,18 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
                       value={header.name || ''}
                       theme={storedTheme}
                       onSave={() => {}}
-                      onChange={editMode ? (newValue) =>
+                      onChange={(newValue) =>
                         handleHeaderValueChange({
                           target: {
                             value: newValue
                           }
                         },
                         header,
-                        'name') : () => {}}
+                        'name')}
                       autocomplete={headerAutoCompleteList}
                       onRun={() => {}}
                       collection={collection}
+                      readOnly={!editMode}
                     />
                   </td>
                   <td>
@@ -150,19 +189,20 @@ const ResponseExampleResponseHeaders = ({ editMode, item, collection, exampleUid
                         value={header.value || ''}
                         theme={storedTheme}
                         onSave={() => {}}
-                        onChange={editMode ? (newValue) =>
+                        onChange={(newValue) =>
                           handleHeaderValueChange({
                             target: {
                               value: newValue
                             }
                           },
                           header,
-                          'value') : () => {}}
+                          'value')}
                         onRun={() => {}}
                         autocomplete={MimeTypes}
                         allowNewlines={true}
                         collection={collection}
                         item={item}
+                        readOnly={!editMode}
                       />
                       {editMode && (
                         <button tabIndex="-1" onClick={() => handleRemoveHeader(header)} className="delete-button">
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
new file mode 100644
index 0000000000..ca5722925a
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+
+  .response-status-input {
+    background: ${(props) => props.theme.requestTabPanel.url.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+    border-radius: 3px;
+    padding: 0.35rem 0.6rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: ${(props) => props.theme.text.primary};
+    min-width: 120px;
+    transition: all 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: ${(props) => props.theme.colors.primary};
+      box-shadow: 0 0 0 2px ${(props) => props.theme.colors.primary}20;
+    }
+
+    &::placeholder {
+      color: ${(props) => props.theme.text.muted};
+    }
+
+    &.text-ok {
+      color: ${(props) => props.theme.colors.success};
+    }
+
+    &.text-warning {
+      color: ${(props) => props.theme.colors.warning};
+    }
+
+    &.text-error {
+      color: ${(props) => props.theme.colors.error};
+    }
+  }
+
+  .status-suggestions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: ${(props) => props.theme.dropdown.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+    border-top: none;
+    border-radius: 0 0 3px 3px;
+    box-shadow: ${(props) => props.theme.dropdown.shadow};
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .suggestion-item {
+      display: flex;
+      align-items: center;
+      padding: 0.35rem 0.6rem;
+      margin: 0;
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+      font-size: 0.8125rem;
+      color: ${(props) => props.theme.dropdown.primaryText};
+      width: 100%;
+      box-sizing: border-box;
+
+              &:hover:not(:disabled) {
+                background-color: ${(props) => props.theme.dropdown.hoverBg};
+              }
+
+      .status {
+        font-weight: 600;
+        color: inherit;
+        margin-right: 0.5rem;
+        min-width: 40px;
+        flex-shrink: 0;
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/index.js
new file mode 100644
index 0000000000..0f4558fd36
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/index.js
@@ -0,0 +1,208 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { updateResponseExampleStatusCode, updateResponseExampleStatusText } from 'providers/ReduxStore/slices/collections';
+import statusCodePhraseMap from 'components/ResponsePane/StatusCode/get-status-code-phrase';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseExampleStatusInput = ({ item, collection, exampleUid, status, statusText }) => {
+  const dispatch = useDispatch();
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const inputRef = useRef(null);
+  const suggestionsRef = useRef(null);
+
+  // Initialize inputValue from Redux state on mount or when prop changes
+  useEffect(() => {
+    const displayValue = () => {
+      if (status && statusText) {
+        return `${status} ${statusText}`;
+      } else if (status) {
+        return status;
+      }
+      return '';
+    };
+    setInputValue(displayValue());
+  }, [status, statusText]);
+
+  // Create suggestions from status code map
+  const suggestions = Object.entries(statusCodePhraseMap).map(([code, phrase]) => ({
+    code: parseInt(code),
+    phrase,
+    display: `${code} ${phrase}`
+  }));
+
+  const handleInputChange = (e) => {
+    const value = e.target.value;
+
+    // Update local state to allow typing freely (including spaces)
+    setInputValue(value);
+
+    if (value.trim()) {
+      // Filter suggestions based on input
+      const filtered = suggestions.filter((suggestion) =>
+        suggestion.display.toLowerCase().includes(value.toLowerCase())
+        || suggestion.code.toString().includes(value)
+        || suggestion.phrase.toLowerCase().includes(value.toLowerCase()));
+      setFilteredSuggestions(filtered);
+      setShowSuggestions(true);
+    } else {
+      setShowSuggestions(false);
+      setFilteredSuggestions([]);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    // Handle Cmd+S to save status to Redux
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault();
+      parseAndSaveStatus(inputValue);
+    }
+
+    if (!showSuggestions) return;
+
+    switch (e.key) {
+      case 'Escape':
+        setShowSuggestions(false);
+        break;
+    }
+  };
+
+  const selectSuggestion = (suggestion) => {
+    setShowSuggestions(false);
+
+    // Update local input value
+    const newValue = `${suggestion.code} ${suggestion.phrase}`;
+    setInputValue(newValue);
+
+    // Save the status and statusText
+    dispatch(updateResponseExampleStatusCode({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      statusCode: String(suggestion.code)
+    }));
+
+    dispatch(updateResponseExampleStatusText({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      statusText: suggestion.phrase
+    }));
+  };
+
+  const parseAndSaveStatus = (value) => {
+    // Find the first space
+    const firstSpaceIndex = value.indexOf(' ');
+
+    let statusCode, statusText;
+
+    if (firstSpaceIndex === -1) {
+      // No space found, treat entire value as status code
+      statusCode = value;
+      statusText = '';
+    } else {
+      // Split on first space only, preserving all other spaces
+      statusCode = value.substring(0, firstSpaceIndex);
+      statusText = value.substring(firstSpaceIndex + 1);
+    }
+
+    // Save both as strings - no validation needed
+    dispatch(updateResponseExampleStatusCode({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      statusCode: statusCode
+    }));
+
+    dispatch(updateResponseExampleStatusText({
+      itemUid: item.uid,
+      collectionUid: collection.uid,
+      exampleUid: exampleUid,
+      statusText: statusText
+    }));
+
+    setShowSuggestions(false);
+  };
+
+  const handleBlur = (e) => {
+    // Check if the blur is caused by clicking on a suggestion
+    const relatedTarget = e.relatedTarget;
+    if (relatedTarget && relatedTarget.closest('.status-suggestions')) {
+      return; // Don't close suggestions if clicking on them
+    }
+
+    // Save the status to Redux
+    parseAndSaveStatus(inputValue);
+
+    // Small delay to allow click events on suggestions
+    setTimeout(() => {
+      setShowSuggestions(false);
+    }, 150);
+  };
+
+  const handleFocus = () => {
+    if (inputValue.trim()) {
+      const filtered = suggestions.filter((suggestion) =>
+        suggestion.display.toLowerCase().includes(inputValue.toLowerCase())
+        || suggestion.code.toString().includes(inputValue)
+        || suggestion.phrase.toLowerCase().includes(inputValue.toLowerCase()));
+      setFilteredSuggestions(filtered);
+      setShowSuggestions(true);
+    }
+  };
+
+  const getStatusClass = (status) => {
+    const numStatus = parseInt(status);
+    if (!isNaN(numStatus)) {
+      if (numStatus >= 200 && numStatus < 300) return 'text-ok';
+      if (numStatus >= 300 && numStatus < 400) return 'text-warning';
+      if (numStatus >= 400) return 'text-error';
+    }
+    return 'text-ok';
+  };
+
+  return (
+    <StyledWrapper className="relative">
+      <input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        placeholder="e.g., 200 OK, 404 Unknown, 999 Custom Error"
+        className={`response-status-input ${getStatusClass(status)}`}
+        data-testid="response-status-input"
+      />
+
+      {showSuggestions && filteredSuggestions.length > 0 && (
+        <div
+          ref={suggestionsRef}
+          className="status-suggestions"
+          data-testid="status-suggestions"
+          onMouseDown={(e) => e.preventDefault()} // Prevent input blur when clicking on suggestions
+        >
+          {filteredSuggestions.map((suggestion) => (
+            <div
+              key={suggestion.code}
+              className="suggestion-item"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                selectSuggestion(suggestion);
+              }}
+              onMouseDown={(e) => e.preventDefault()}
+              data-testid={`suggestion-${suggestion.code}`}
+            >
+              <span className="status">{`${suggestion.code} ${suggestion.phrase}`}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default ResponseExampleStatusInput;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js
index 18b46f2902..47d054f6b1 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/index.js
@@ -1,19 +1,20 @@
-import React, { useState } from 'react';
-import { useTheme } from 'providers/Theme';
+import React, { useState, useMemo } from 'react';
 import get from 'lodash/get';
 import Tab from 'components/Tab';
 import ResponseLayoutToggle from 'components/ResponsePane/ResponseLayoutToggle';
 import StatusCode from 'components/ResponsePane/StatusCode';
 import ResponseExampleResponseContent from './ResponseExampleResponseContent';
 import ResponseExampleResponseHeaders from './ResponseExampleResponseHeaders';
+import ResponseExampleStatusInput from './ResponseExampleStatusInput';
 import StyledWrapper from './StyledWrapper';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
 
 const ResponseExampleResponsePane = ({ item, collection, editMode, exampleUid, onSave }) => {
   const [activeTab, setActiveTab] = useState('response');
 
-  // Get example data from item draft, similar to how RequestHeaders works
-  const exampleData = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid) || {};
+  const exampleData = useMemo(() => {
+    return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) || {} : get(item, 'examples', []).find((e) => e.uid === exampleUid) || {};
+  }, [item, exampleUid]);
 
   const getTabPanel = (tab) => {
     switch (tab) {
@@ -73,8 +74,18 @@ const ResponseExampleResponsePane = ({ item, collection, editMode, exampleUid, o
 
         <div className="flex flex-grow justify-end items-center">
           <ResponseLayoutToggle />
-          {exampleData?.response?.status && (
-            <StatusCode status={exampleData.response.status} />
+          {editMode ? (
+            <ResponseExampleStatusInput
+              item={item}
+              collection={collection}
+              exampleUid={exampleUid}
+              status={exampleData?.response?.status}
+              statusText={exampleData?.response?.statusText}
+            />
+          ) : (
+            exampleData?.response?.status && (
+              <StatusCode status={exampleData.response.status} statusText={exampleData.response.statusText} />
+            )
           )}
         </div>
       </div>
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
index a01f2a8f19..c95778c64e 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/StyledWrapper.js
@@ -74,17 +74,12 @@ const StyledWrapper = styled.div`
   }
 
   .example-input-name {
-    font-size: 20px;
+    font-size: 1.25rem;
     font-weight: 700;
-    line-height: 1.2;
-
-    @media (min-width: 768px) {
-      font-size: 24px;
-    }
   }
 
   .example-input-description {
-    font-size: 14px;
+    font-size: 0.875rem;
     line-height: 1.6;
     resize: none;
     min-height: 80px;
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
index 2c67183213..4d97847dda 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleTopBar/index.js
@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { IconEdit } from 'components/Icons/examples';
+import IconEdit from 'components/Icons/IconEdit';
 import { IconCode, IconDeviceFloppy } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 import { useTheme } from 'providers/Theme';
 import TruncatedText from 'components/TruncatedText';
-import { findItemInCollection } from 'utils/collections/index';
 import { updateResponseExampleName, updateResponseExampleDescription } from 'providers/ReduxStore/slices/collections';
 import get from 'lodash/get';
 
@@ -21,7 +20,10 @@ const ResponseExampleTopBar = ({
 }) => {
   const { theme } = useTheme();
   const dispatch = useDispatch();
-  const example = item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) : get(item, 'examples', []).find((e) => e.uid === exampleUid);
+
+  const example = useMemo(() => {
+    return item.draft ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid) : get(item, 'examples', []).find((e) => e.uid === exampleUid);
+  }, [item.draft, item.examples, item, exampleUid]);
 
   const handleGenerateCode = () => {
     if (onGenerateCode) {
@@ -129,14 +131,14 @@ const ResponseExampleTopBar = ({
 
             <div className="flex items-center gap-3 flex-shrink-0 md:w-auto w-full md:justify-end">
               <button
-                className="secondary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-sm font-medium cursor-pointer border whitespace-nowrap"
+                className="secondary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-medium cursor-pointer border whitespace-nowrap"
                 onClick={handleCancel}
                 data-testid="response-example-cancel-btn"
               >
                 Cancel
               </button>
               <button
-                className="primary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-sm font-medium cursor-pointer border whitespace-nowrap"
+                className="primary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-medium cursor-pointer border whitespace-nowrap"
                 onClick={handleSave}
                 data-testid="response-example-save-btn"
               >
@@ -156,7 +158,7 @@ const ResponseExampleTopBar = ({
       <div className="max-w-full">
         <div className="flex items-start justify-between gap-6 md:flex-row flex-col">
           <div className="flex-1 min-w-0">
-            <h2 className="response-example-title text-xl font-bold mb-2 leading-tight md:text-2xl" data-testid="response-example-title">
+            <h2 className="response-example-title text-lg font-bold mb-2 leading-tight md:text-xl" data-testid="response-example-title">
               {example.name}
             </h2>
             {example.description && example.description.trim().length > 0 && (
@@ -168,14 +170,14 @@ const ResponseExampleTopBar = ({
                 buttonClassName="text-blue-600 hover:text-blue-800 font-medium"
                 viewMoreText="View More"
                 viewLessText="View Less"
-                data-testid="response-example-description"
+                dataTestId="response-example-description"
               />
             )}
           </div>
 
           <div className="flex items-center gap-3 flex-shrink-0 md:w-auto w-full md:justify-end">
             <button
-              className="secondary-btn flex items-center gap-1.5 p-2 rounded-md text-sm font-medium cursor-pointer border whitespace-nowrap"
+              className="secondary-btn flex items-center gap-1.5 p-2 rounded-md text-xs font-medium cursor-pointer border whitespace-nowrap"
               onClick={handleGenerateCode}
               title="Generate Code"
               data-testid="response-example-generate-code-btn"
@@ -183,7 +185,7 @@ const ResponseExampleTopBar = ({
               <IconCode size={16} color={theme.examples.buttonIconColor} />
             </button>
             <button
-              className="secondary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-sm font-medium cursor-pointer border whitespace-nowrap"
+              className="secondary-btn flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-medium cursor-pointer border whitespace-nowrap"
               onClick={onEditToggle}
               data-testid="response-example-edit-btn"
             >
diff --git a/packages/bruno-app/src/components/ResponseExample/index.js b/packages/bruno-app/src/components/ResponseExample/index.js
index 05d365d68d..0b060dea9c 100644
--- a/packages/bruno-app/src/components/ResponseExample/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/index.js
@@ -11,15 +11,17 @@ import StyledWrapper from './StyledWrapper';
 
 const MIN_LEFT_PANE_WIDTH = 300;
 const MIN_RIGHT_PANE_WIDTH = 350;
-const MIN_TOP_PANE_HEIGHT = 150;
+const MIN_TOP_PANE_HEIGHT = 300;
 const MIN_BOTTOM_PANE_HEIGHT = 150;
 
 const ResponseExample = ({ item, collection, example }) => {
   const dispatch = useDispatch();
   const preferences = useSelector((state) => state.app.preferences);
+  const screenWidth = useSelector((state) => state.app.screenWidth);
+  const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
   const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
 
-  const [leftPaneWidth, setLeftPaneWidth] = useState(400);
+  const [leftPaneWidth, setLeftPaneWidth] = useState((screenWidth - leftSidebarWidth) / 2.2);
   const [topPaneHeight, setTopPaneHeight] = useState(MIN_TOP_PANE_HEIGHT);
   const [dragging, setDragging] = useState(false);
   const [editMode, setEditMode] = useState(false);
@@ -121,6 +123,20 @@ const ResponseExample = ({ item, collection, example }) => {
     // TODO: Implement try example functionality
   };
 
+  // Update width when screen width or sidebar width changes
+  useEffect(() => {
+    if (mainSectionRef.current) {
+      const mainRect = mainSectionRef.current.getBoundingClientRect();
+      if (isVerticalLayout) {
+        // In vertical mode, set leftPaneWidth to full container width
+        setLeftPaneWidth(mainRect.width);
+      } else {
+        // In horizontal mode, set to roughly half width
+        setLeftPaneWidth((screenWidth - leftSidebarWidth) / 2.2);
+      }
+    }
+  }, [isVerticalLayout, screenWidth, leftSidebarWidth]);
+
   // Keyboard shortcut support for Ctrl/Cmd+S
   useEffect(() => {
     const handleKeyDown = (e) => {
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
index 6af2223ad6..d8c00c7add 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseBookmark/index.js
@@ -5,11 +5,12 @@ import { addResponseExample } from 'providers/ReduxStore/slices/collections';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import toast from 'react-hot-toast';
 import CreateExampleModal from 'components/ResponseExample/CreateExampleModal';
+import { getBodyType, processResponseContent } from 'utils/responseBodyProcessor';
 import StyledWrapper from './StyledWrapper';
 
 const ResponseBookmark = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const [showNameModal, setShowNameModal] = useState(false);
+  const [showSaveResponseExampleModal, setShowSaveResponseExampleModal] = useState(false);
   const response = item.response || {};
 
   // Only show for HTTP requests
@@ -17,12 +18,46 @@ const ResponseBookmark = ({ item, collection }) => {
     return null;
   }
 
+  // Generate initial name for the example
+  const getInitialExampleName = () => {
+    const requestName = item.name || 'request';
+    const baseName = `${requestName} example`;
+    const existingExamples = item.draft?.examples || item.examples || [];
+
+    // Check if any existing example has the same base name
+    const hasSameBaseName = existingExamples.some((example) => {
+      const exampleName = example.name || '';
+      return exampleName === baseName || exampleName.startsWith(`${baseName} (`);
+    });
+
+    if (!hasSameBaseName) {
+      return baseName;
+    }
+
+    // Find the highest existing counter
+    let maxCounter = 0;
+    existingExamples.forEach((example) => {
+      const exampleName = example.name || '';
+      if (exampleName.startsWith(`${baseName} (`)) {
+        const match = exampleName.match(/\((\d+)\)$/);
+        if (match) {
+          const counter = parseInt(match[1], 10);
+          if (counter > maxCounter) {
+            maxCounter = counter;
+          }
+        }
+      }
+    });
+
+    return `${baseName} (${maxCounter + 1})`;
+  };
+
   const handleSaveClick = () => {
     if (!response || response.error) {
       toast.error('No valid response to save as example');
       return;
     }
-    setShowNameModal(true);
+    setShowSaveResponseExampleModal(true);
   };
 
   const saveAsExample = (name, description = '') => {
@@ -35,12 +70,20 @@ const ResponseBookmark = ({ item, collection }) => {
         }))
       : [];
 
-    // Only pass response-related data - the reducer will automatically capture current request state
+    const contentTypeHeader = headersArray.find((h) => h.name?.toLowerCase() === 'content-type');
+    const contentType = contentTypeHeader?.value?.toLowerCase() || '';
+
+    const bodyType = getBodyType(contentType);
+    const content = response.data;
+
     const exampleData = {
       name: name,
       status: response.status || 200,
       headers: headersArray,
-      body: response.data || response.dataBuffer || '',
+      body: {
+        type: bodyType,
+        content: content
+      },
       description: description
     };
 
@@ -50,7 +93,7 @@ const ResponseBookmark = ({ item, collection }) => {
       example: exampleData
     }));
     dispatch(saveRequest(item.uid, collection.uid));
-    setShowNameModal(false);
+    setShowSaveResponseExampleModal(false);
     toast.success(`Example "${name}" created successfully`);
   };
 
@@ -69,10 +112,11 @@ const ResponseBookmark = ({ item, collection }) => {
       </StyledWrapper>
 
       <CreateExampleModal
-        isOpen={showNameModal}
-        onClose={() => setShowNameModal(false)}
+        isOpen={showSaveResponseExampleModal}
+        onClose={() => setShowSaveResponseExampleModal(false)}
         onSave={saveAsExample}
         title="Save Response as Example"
+        initialName={getInitialExampleName()}
       />
     </>
   );
diff --git a/packages/bruno-app/src/components/ResponsePane/StatusCode/index.js b/packages/bruno-app/src/components/ResponsePane/StatusCode/index.js
index be7e7ecbf6..222aad9e83 100644
--- a/packages/bruno-app/src/components/ResponsePane/StatusCode/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/StatusCode/index.js
@@ -4,7 +4,7 @@ import statusCodePhraseMap from './get-status-code-phrase';
 import StyledWrapper from './StyledWrapper';
 
 // Todo: text-error class is not getting pulled in for 500 errors
-const StatusCode = ({ status }) => {
+const StatusCode = ({ status, statusText }) => {
   const getTabClassname = (status) => {
     return classnames('ml-2', {
       'text-ok': status >= 100 && status < 200,
@@ -17,7 +17,7 @@ const StatusCode = ({ status }) => {
 
   return (
     <StyledWrapper className={`response-status-code ${getTabClassname(status)}`} data-testid="response-status-code">
-      {status} {statusCodePhraseMap[status]}
+      {status} {statusText || statusCodePhraseMap[status]}
     </StyledWrapper>
   );
 };
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteExampleModal.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js
similarity index 82%
rename from packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteExampleModal.js
rename to packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js
index edd119e1e1..1f4eaf1048 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteExampleModal.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import Modal from 'components/Modal';
+import Portal from 'components/Portal';
 import { useDispatch } from 'react-redux';
 import { deleteResponseExample } from 'providers/ReduxStore/slices/collections';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
 
-const DeleteExampleModal = ({ onClose, example, item, collection }) => {
+const DeleteResponseExampleModal = ({ onClose, example, item, collection }) => {
   const dispatch = useDispatch();
 
   const onConfirm = () => {
@@ -19,7 +19,7 @@ const DeleteExampleModal = ({ onClose, example, item, collection }) => {
   };
 
   return (
-    <StyledWrapper>
+    <Portal>
       <Modal
         size="sm"
         title="Delete Example"
@@ -30,8 +30,8 @@ const DeleteExampleModal = ({ onClose, example, item, collection }) => {
       >
         Are you sure you want to delete the example <span className="font-semibold">{example.name}</span>?
       </Modal>
-    </StyledWrapper>
+    </Portal>
   );
 };
 
-export default DeleteExampleModal;
+export default DeleteResponseExampleModal;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
index 5a17c174aa..d6b889abbc 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
@@ -43,6 +43,14 @@ const StyledWrapper = styled.div`
         }
       }
     }
+
+    &.item-focused-in-tab {
+      background: ${(props) => props.theme.sidebar.collection.item.bg};
+
+      &:hover {
+        background: ${(props) => props.theme.sidebar.collection.item.bg} !important;
+      }
+    }
   }
 `;
 
diff --git 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
index 2800f0b3c2..3ae02d8e90 100644
--- 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
@@ -1,18 +1,22 @@
 import React, { useState, useRef, forwardRef, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { addTab } from 'providers/ReduxStore/slices/tabs';
+import { useDispatch, useSelector } from 'react-redux';
+import { addTab, makeTabPermanent } from 'providers/ReduxStore/slices/tabs';
 import { deleteResponseExample, updateResponseExample, addResponseExample } from 'providers/ReduxStore/slices/collections';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { IconDots } from '@tabler/icons';
-import { ExampleIcon } from 'components/Icons/examples';
+import ExampleIcon from 'components/Icons/Examples';
 import range from 'lodash/range';
+import classnames from 'classnames';
 import Dropdown from 'components/Dropdown';
 import Modal from 'components/Modal';
-import DeleteExampleModal from './DeleteExampleModal';
+import DeleteResponseExampleModal from './DeleteResponseExampleModal';
 import StyledWrapper from './StyledWrapper';
 
 const ExampleItem = ({ example, item, collection }) => {
   const dispatch = useDispatch();
+  // 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 [showRenameModal, setShowRenameModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -31,6 +35,10 @@ const ExampleItem = ({ example, item, collection }) => {
     }));
   };
 
+  const handleDoubleClick = () => {
+    dispatch(makeTabPermanent({ uid: example.uid }));
+  };
+
   const handleRename = () => {
     setEditName(example.name); // Set current name when opening modal
     setShowRenameModal(true);
@@ -73,6 +81,16 @@ const ExampleItem = ({ example, item, collection }) => {
     }
   };
 
+  const handleRightClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Show the dropdown menu programmatically
+    if (dropdownTippyRef.current) {
+      dropdownTippyRef.current.show();
+    }
+  };
+
   const handleRenameConfirm = (newName) => {
     // Find the example index in the original examples array
     dispatch(updateResponseExample({
@@ -99,10 +117,16 @@ const ExampleItem = ({ example, item, collection }) => {
     );
   });
 
+  const itemRowClassName = classnames('flex collection-item-name relative items-center', {
+    'item-focused-in-tab': isExampleActive
+  });
+
   return (
     <StyledWrapper
-      className="flex collection-item-name relative items-center"
+      className={itemRowClassName}
       onClick={handleExampleClick}
+      onDoubleClick={handleDoubleClick}
+      onContextMenu={handleRightClick}
     >
       {indents && indents.length
         ? indents.map((i) => (
@@ -110,6 +134,7 @@ const ExampleItem = ({ example, item, collection }) => {
               className="indent-block"
               key={i}
               style={{ width: 16, minWidth: 16, height: '100%' }}
+              onContextMenu={handleRightClick}
             >
               &nbsp;{/* Indent */}
             </div>
@@ -118,7 +143,9 @@ const ExampleItem = ({ example, item, collection }) => {
       <div
         className="flex flex-grow items-center h-full overflow-hidden"
         style={{ paddingLeft: 8 }}
+        onContextMenu={handleRightClick}
       >
+        <div style={{ width: 16, minWidth: 16 }}></div>
         <ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-400 flex-shrink-0" />
         <span className="item-name truncate text-gray-700 dark:text-gray-300 ">
           {example.name}
@@ -192,7 +219,7 @@ const ExampleItem = ({ example, item, collection }) => {
       )}
 
       {showDeleteModal && (
-        <DeleteExampleModal
+        <DeleteResponseExampleModal
           onClose={() => setShowDeleteModal(false)}
           example={example}
           item={item}
diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
index 3398cb5ffe..c19bd57a80 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
@@ -6,6 +6,18 @@ const StyledWrapper = styled.div`
   overflow-y: hidden;
   overflow-x: hidden;
 
+  &.read-only {
+    .CodeMirror .CodeMirror-lines {
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      -ms-user-select: none !important;
+    }
+
+    .CodeMirror-cursor {
+      display: none !important;
+    }
+  }
+
   .CodeMirror {
     background: transparent;
     height: 34px;
diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js
index 03f0dc7181..20a9d1870b 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -53,7 +53,7 @@ class SingleLineEditor extends Component {
       },
       scrollbarStyle: null,
       tabindex: 0,
-      readOnly: this.props.readOnly || false,
+      readOnly: this.props.readOnly ? 'nocursor' : false,
       extraKeys: {
         Enter: runHandler,
         'Ctrl-Enter': runHandler,
@@ -153,7 +153,7 @@ class SingleLineEditor extends Component {
       this.setState({ maskInput: this.props.isSecret });
     }
     if (this.props.readOnly !== prevProps.readOnly && this.editor) {
-      this.editor.setOption('readOnly', this.props.readOnly || false);
+      this.editor.setOption('readOnly', this.props.readOnly ? 'nocursor' : false);
     }
     this.ignoreChangeEvent = false;
   }
@@ -205,7 +205,7 @@ class SingleLineEditor extends Component {
   render() {
     return (
       <div className={`flex flex-row justify-between w-full overflow-x-auto ${this.props.className}`}>
-        <StyledWrapper ref={this.editorRef} className="single-line-editor grow" />
+        <StyledWrapper ref={this.editorRef} className={`single-line-editor grow ${this.props.readOnly ? 'read-only' : ''}`} />
         {this.secretEye(this.props.isSecret)}
       </div>
     );
diff --git a/packages/bruno-app/src/components/TruncatedText/index.js b/packages/bruno-app/src/components/TruncatedText/index.js
index 38203097d3..47339c521e 100644
--- a/packages/bruno-app/src/components/TruncatedText/index.js
+++ b/packages/bruno-app/src/components/TruncatedText/index.js
@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
 
 const TruncatedText = ({
   text,
@@ -12,7 +11,7 @@ const TruncatedText = ({
   showButton = true,
   onToggle = null,
   children,
-  ...props
+  dataTestId = ''
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [shouldTruncate, setShouldTruncate] = useState(false);
@@ -81,7 +80,7 @@ const TruncatedText = ({
   }
 
   return (
-    <div className={className} {...props}>
+    <div className={className} data-testid={dataTestId}>
       <div
         ref={textRef}
         className={textClassName}
diff --git a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
index 97ebf07113..342f60b527 100644
--- a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
+++ b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import each from 'lodash/each';
 import filter from 'lodash/filter';
 import groupBy from 'lodash/groupBy';
@@ -13,25 +13,30 @@ import Modal from 'components/Modal';
 
 const SaveRequestsModal = ({ onClose }) => {
   const MAX_UNSAVED_REQUESTS_TO_SHOW = 5;
-  const currentDrafts = [];
   const collections = useSelector((state) => state.collections.collections);
   const tabs = useSelector((state) => state.tabs.tabs);
   const dispatch = useDispatch();
 
-  const tabsByCollection = groupBy(tabs, (t) => t.collectionUid);
-  Object.keys(tabsByCollection).forEach((collectionUid) => {
-    const collection = findCollectionByUid(collections, collectionUid);
-    if (collection) {
-      const items = flattenItems(collection.items);
-      const drafts = filter(items, (item) => isItemARequest(item) && hasRequestChanges(item));
-      each(drafts, (draft) => {
-        currentDrafts.push({
-          ...draft,
-          collectionUid: collectionUid
+  const currentDrafts = useMemo(() => {
+    const drafts = [];
+    const tabsByCollection = groupBy(tabs, (t) => t.collectionUid);
+
+    Object.keys(tabsByCollection).forEach((collectionUid) => {
+      const collection = findCollectionByUid(collections, collectionUid);
+      if (collection) {
+        const items = flattenItems(collection.items);
+        const collectionDrafts = filter(items, (item) => isItemARequest(item) && hasRequestChanges(item));
+        each(collectionDrafts, (draft) => {
+          drafts.push({
+            ...draft,
+            collectionUid: collectionUid
+          });
         });
-      });
-    }
-  });
+      }
+    });
+
+    return drafts;
+  }, [collections, tabs]);
 
   useEffect(() => {
     if (currentDrafts.length === 0) {
diff --git a/packages/bruno-app/src/providers/ReduxStore/index.js b/packages/bruno-app/src/providers/ReduxStore/index.js
index 4c127c6a68..b86305011f 100644
--- a/packages/bruno-app/src/providers/ReduxStore/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/index.js
@@ -3,7 +3,6 @@ import tasksMiddleware from './middlewares/tasks/middleware';
 import debugMiddleware from './middlewares/debug/middleware';
 import appReducer from './slices/app';
 import collectionsReducer from './slices/collections';
-// Response examples are now handled by the collections slice
 import tabsReducer from './slices/tabs';
 import notificationsReducer from './slices/notifications';
 import globalEnvironmentsReducer from './slices/global-environments';
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js
index 580472552a..e7f72aad5d 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js
@@ -1,105 +1,121 @@
-import { find, map, filter, cloneDeep } from 'lodash';
+import { find, map, filter, cloneDeep, each, concat } from 'lodash';
+import { parseQueryParams, buildQueryString as stringifyQueryParams } from '@usebruno/common/utils';
 import { uuid } from 'utils/common';
 import { findCollectionByUid, findItemInCollection } from 'utils/collections';
+import { parsePathParams, splitOnFirst, interpolateUrlPathParams } from 'utils/url';
 
-// Response Example Actions
 export const addResponseExample = (state, action) => {
   const { itemUid, collectionUid, example } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item) {
-      if (!item.draft) {
-        item.draft = cloneDeep(item);
-      }
-      if (!item.draft.examples) {
-        item.draft.examples = [];
-      }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+  if (!item.draft.examples) {
+    item.draft.examples = [];
+  }
+
+  // Ensure body always has a mode field (default to 'none' if not present)
+  const requestBody = item.draft.request.body || {};
+  if (!requestBody.mode) {
+    requestBody.mode = 'none';
+  }
 
-      const newExample = {
+  const newExample = {
+    uid: uuid(),
+    itemUid: item.uid,
+    name: example.name,
+    description: example.description,
+    type: item.draft.type,
+    request: {
+      url: item.draft.request.url,
+      method: item.draft.request.method,
+      headers: item.draft.request.headers,
+      params: item.draft.request.params,
+      body: requestBody
+    },
+    response: {
+      status: String(example.status ?? ''),
+      statusText: String(example.statusText ?? ''),
+      headers: (example.headers || []).map((header) => ({
         uid: uuid(),
-        itemUid: item.uid,
-        name: example.name,
-        description: example.description,
-        type: item.draft.type,
-        request: {
-          url: item.draft.request.url,
-          method: item.draft.request.method,
-          headers: item.draft.request.headers,
-          params: item.draft.request.params,
-          body: item.draft.request.body
-        },
-        response: {
-          status: String(example.status),
-          statusText: String(example.statusText),
-          headers: (example.headers || []).map((header) => ({
-            uid: uuid(),
-            name: String(header.name),
-            value: String(header.value),
-            description: String(header.description),
-            enabled: header.enabled
-          })),
-          body: example.body
-        }
-      };
-
-      item.draft.examples.push(newExample);
+        name: String(header.name),
+        value: String(header.value),
+        description: String(header.description),
+        enabled: header.enabled
+      })),
+      body: example.body
     }
-  }
+  };
+
+  item.draft.examples.push(newExample);
 };
 
 export const updateResponseExample = (state, action) => {
   const { itemUid, collectionUid, exampleUid, example: details } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item.draft.examples.length > 0) {
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        item.draft.examples = item.draft.examples.map((e) =>
-          e.uid === exampleUid ? { ...e, ...details } : e);
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (item.draft.examples.length === 0) return;
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  item.draft.examples = item.draft.examples.map((e) =>
+    e.uid === exampleUid ? { ...e, ...details } : e);
 };
 
 export const deleteResponseExample = (state, action) => {
   const { itemUid, collectionUid, exampleUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft && item.draft.examples) {
-      item.draft.examples = item.draft.examples.filter((e) => e.uid !== exampleUid);
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) return;
+
+  item.draft.examples = item.draft.examples.filter((e) => e.uid !== exampleUid);
 };
 
 export const cancelResponseExampleEdit = (state, action) => {
   const { itemUid, collectionUid, exampleUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && item.draft && item.draft.examples && item.examples) {
-      const originalExample = item.examples.find((e) => e.uid === exampleUid);
-      if (originalExample) {
-        // Replace the draft example with the original example
-        const exampleIndex = item.draft.examples.findIndex((e) => e.uid === exampleUid);
-        if (exampleIndex !== -1) {
-          item.draft.examples[exampleIndex] = cloneDeep(originalExample);
-        }
-      }
-    }
-  }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+  if (!item.draft) return;
+  if (!item.draft.examples) return;
+  if (!item.examples) return;
+
+  const originalExample = item.examples.find((e) => e.uid === exampleUid);
+  if (!originalExample) return;
+
+  // Replace the draft example with the original example
+  const exampleIndex = item.draft.examples.findIndex((e) => e.uid === exampleUid);
+  if (exampleIndex === -1) return;
+
+  item.draft.examples[exampleIndex] = cloneDeep(originalExample);
 };
 
 // Response Example Headers
@@ -107,126 +123,140 @@ export const addResponseExampleHeader = (state, action) => {
   const { itemUid, collectionUid, exampleUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.response.headers = example.response.headers || [];
-        example.response.headers.push({
-          uid: uuid(),
-          name: '',
-          value: '',
-          description: '',
-          enabled: true
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.response.headers = example.response.headers || [];
+  example.response.headers.push({
+    uid: uuid(),
+    name: '',
+    value: '',
+    description: '',
+    enabled: true
+  });
 };
 
 export const updateResponseExampleHeader = (state, action) => {
   const { itemUid, collectionUid, exampleUid, header } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.response.headers) {
-        const headerToUpdate = find(example.response.headers, (h) => h.uid === header.uid);
-        if (headerToUpdate) {
-          headerToUpdate.name = header.name;
-          headerToUpdate.value = header.value;
-          headerToUpdate.description = header.description;
-          headerToUpdate.enabled = header.enabled;
-        }
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.response.headers) return;
+
+  const headerToUpdate = find(example.response.headers, (h) => h.uid === header.uid);
+  if (!headerToUpdate) return;
+
+  headerToUpdate.name = header.name;
+  headerToUpdate.value = header.value;
+  headerToUpdate.description = header.description;
+  headerToUpdate.enabled = header.enabled;
 };
 
 export const deleteResponseExampleHeader = (state, action) => {
   const { itemUid, collectionUid, exampleUid, headerUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.response.headers) {
-        example.response.headers = filter(example.response.headers, (h) => h.uid !== headerUid);
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.response.headers) return;
+
+  example.response.headers = filter(example.response.headers, (h) => h.uid !== headerUid);
 };
 
 export const moveResponseExampleHeader = (state, action) => {
   const { itemUid, collectionUid, exampleUid, updateReorderedItem } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.response && example.response.headers) {
-        example.response.headers = updateReorderedItem.map((uid) => {
-          return example.response.headers.find((h) => h.uid === uid);
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.response) return;
+  if (!example.response.headers) return;
+
+  example.response.headers = updateReorderedItem.map((uid) => {
+    return example.response.headers.find((h) => h.uid === uid);
+  });
 };
 
 export const setResponseExampleHeaders = (state, action) => {
   const { itemUid, collectionUid, exampleUid, headers } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.response.headers = map(headers, ({ name = '', value = '', enabled = true }) => ({
-          uid: uuid(),
-          name: name,
-          value: value,
-          description: '',
-          enabled: enabled
-        }));
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.response.headers = map(headers, ({ name = '', value = '', enabled = true }) => ({
+    uid: uuid(),
+    name: name,
+    value: value,
+    description: '',
+    enabled: enabled
+  }));
 };
 
 // Response Example Params
@@ -234,53 +264,75 @@ export const addResponseExampleParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.request.params = example.request.params || [];
-        example.request.params.push({
-          uid: uuid(),
-          name: '',
-          value: '',
-          description: '',
-          type: 'query',
-          enabled: true
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.request.params = example.request.params || [];
+  example.request.params.push({
+    uid: uuid(),
+    name: '',
+    value: '',
+    description: '',
+    type: 'query',
+    enabled: true
+  });
 };
 
 export const updateResponseExampleParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, param } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.params) return;
+
+  const paramToUpdate = find(example.request.params, (p) => p.uid === param.uid);
+  if (!paramToUpdate) return;
+
+  paramToUpdate.name = param.name;
+  paramToUpdate.value = param.value;
+  paramToUpdate.description = param.description;
+  paramToUpdate.enabled = param.enabled;
+
+  if (paramToUpdate.type === 'query') {
+    const parts = splitOnFirst(example.request.url, '?');
+    const query = stringifyQueryParams(filter(example.request.params, (p) => p.enabled && p.type === 'query'));
+
+    if (!query || !query.length) {
+      if (parts.length) {
+        example.request.url = parts[0];
       }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.params) {
-        const paramToUpdate = find(example.request.params, (p) => p.uid === param.uid);
-        if (paramToUpdate) {
-          paramToUpdate.name = param.name;
-          paramToUpdate.value = param.value;
-          paramToUpdate.description = param.description;
-          paramToUpdate.enabled = param.enabled;
-        }
+    } else {
+      if (!parts.length) {
+        example.request.url += '?' + query;
+      } else {
+        example.request.url = parts[0] + '?' + query;
       }
     }
   }
@@ -290,18 +342,39 @@ export const deleteResponseExampleParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, paramUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.params) return;
+
+  const paramToDelete = find(example.request.params, (p) => p.uid === paramUid);
+  example.request.params = filter(example.request.params, (p) => p.uid !== paramUid);
+
+  if (paramToDelete && paramToDelete.type === 'query') {
+    const parts = splitOnFirst(example.request.url, '?');
+    const query = stringifyQueryParams(filter(example.request.params, (p) => p.enabled && p.type === 'query'));
+
+    if (!query || !query.length) {
+      if (parts.length) {
+        example.request.url = parts[0];
       }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.params) {
-        example.request.params = filter(example.request.params, (p) => p.uid !== paramUid);
+    } else {
+      if (!parts.length) {
+        example.request.url += '?' + query;
+      } else {
+        example.request.url = parts[0] + '?' + query;
       }
     }
   }
@@ -311,23 +384,26 @@ export const moveResponseExampleParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, updateReorderedItem } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.params) {
-        example.request.params = updateReorderedItem.map((uid) => {
-          return example.request.params.find((p) => p.uid === uid);
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.params) return;
+
+  example.request.params = updateReorderedItem.map((uid) => {
+    return example.request.params.find((p) => p.uid === uid);
+  });
 };
 
 // Response Example Request/Response Updates
@@ -335,229 +411,304 @@ export const updateResponseExampleMultipartFormParams = (state, action) => {
   const { itemUid, collectionUid, exampleUid, params } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        if (!example.request) {
-          example.request = {};
-        }
-        if (!example.request.body) {
-          example.request.body = { mode: 'multipartForm', multipartForm: [] };
-        }
-
-        // Ensure all params have unique UIDs
-        const paramsWithUids = params.map((param, index) => ({
-          ...param,
-          uid: param.uid || uuid()
-        }));
-
-        example.request.body.multipartForm = paramsWithUids;
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.request) {
+    example.request = {};
+  }
+  if (!example.request.body) {
+    example.request.body = { mode: 'multipartForm', multipartForm: [] };
+  }
+
+  // Ensure all params have unique UIDs
+  const paramsWithUids = params.map((param, index) => ({
+    ...param,
+    uid: param.uid || uuid()
+  }));
+
+  example.request.body.multipartForm = paramsWithUids;
 };
 
 export const updateResponseExampleFileBodyParams = (state, action) => {
   const { itemUid, collectionUid, exampleUid, params } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        if (!example.request) {
-          example.request = {};
-        }
-        if (!example.request.body) {
-          example.request.body = { mode: 'file', file: [] };
-        }
-
-        // Ensure all params have unique UIDs
-        const paramsWithUids = params.map((param, index) => ({
-          ...param,
-          uid: param.uid || uuid()
-        }));
-
-        example.request.body.file = paramsWithUids;
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.request) {
+    example.request = {};
+  }
+  if (!example.request.body) {
+    example.request.body = { mode: 'file', file: [] };
+  }
+
+  // Ensure all params have unique UIDs
+  const paramsWithUids = params.map((param, index) => ({
+    ...param,
+    uid: param.uid || uuid()
+  }));
+
+  example.request.body.file = paramsWithUids;
 };
 
 export const updateResponseExampleFormUrlEncodedParams = (state, action) => {
   const { itemUid, collectionUid, exampleUid, params } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        if (!example.request) {
-          example.request = {};
-        }
-        if (!example.request.body) {
-          example.request.body = { mode: 'formUrlEncoded', formUrlEncoded: [] };
-        }
-
-        // Ensure all params have unique UIDs
-        const paramsWithUids = params.map((param, index) => ({
-          ...param,
-          uid: param.uid || uuid()
-        }));
-
-        example.request.body.formUrlEncoded = paramsWithUids;
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.request) {
+    example.request = {};
+  }
+  if (!example.request.body) {
+    example.request.body = { mode: 'formUrlEncoded', formUrlEncoded: [] };
   }
+
+  // Ensure all params have unique UIDs
+  const paramsWithUids = params.map((param, index) => ({
+    ...param,
+    uid: param.uid || uuid()
+  }));
+
+  example.request.body.formUrlEncoded = paramsWithUids;
 };
 
 export const updateResponseExampleRequest = (state, action) => {
   const { itemUid, collectionUid, exampleUid, request } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.request = { ...example.request, ...request };
-      }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  // Ensure body always has a mode field if it's being updated
+  if (request.body) {
+    if (!request.body.mode) {
+      request.body.mode = 'none';
     }
   }
+
+  example.request = { ...example.request, ...request };
 };
 
 export const updateResponseExampleRequestUrl = (state, action) => {
   const { itemUid, collectionUid, exampleUid, request } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.request.url = request.url;
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.request) {
+    example.request = {};
+  }
+
+  example.request.url = request.url;
+
+  const parts = splitOnFirst(example.request.url, '?');
+  const urlQueryParams = parseQueryParams(parts[1]);
+  let urlPathParams = [];
+
+  try {
+    urlPathParams = parsePathParams(parts[0]);
+  } catch (err) {
+    console.error(err);
+  }
+
+  const existingParams = example.request.params || [];
+  const disabledQueryParams = filter(existingParams, (p) => !p.enabled && p.type === 'query');
+  let enabledQueryParams = filter(existingParams, (p) => p.enabled && p.type === 'query');
+  let oldPathParams = filter(existingParams, (p) => p.enabled && p.type === 'path');
+  let newPathParams = [];
+
+  each(urlQueryParams, (urlQueryParam) => {
+    const existingQueryParam = find(enabledQueryParams, (p) => p?.name === urlQueryParam?.name || p?.value === urlQueryParam?.value);
+    urlQueryParam.uid = existingQueryParam?.uid || uuid();
+    urlQueryParam.enabled = true;
+    urlQueryParam.type = 'query';
+
+    if (existingQueryParam) {
+      enabledQueryParams = filter(enabledQueryParams, (p) => p?.uid !== existingQueryParam?.uid);
+    }
+  });
+
+  newPathParams = filter(urlPathParams, (urlPath) => {
+    const existingPathParam = find(oldPathParams, (p) => p.name === urlPath.name);
+    if (existingPathParam) {
+      // Preserve existing path parameter values
+      urlPath.value = existingPathParam.value;
+      return false;
+    }
+    urlPath.uid = uuid();
+    urlPath.enabled = true;
+    urlPath.type = 'path';
+    return true;
+  });
+
+  oldPathParams = filter(oldPathParams, (urlPath) => {
+    return find(urlPathParams, (p) => p.name === urlPath.name);
+  });
+
+  example.request.params = concat(urlQueryParams, newPathParams, disabledQueryParams, oldPathParams);
 };
 
 export const updateResponseExampleResponse = (state, action) => {
   const { itemUid, collectionUid, exampleUid, response } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.response = { ...example.response, ...response };
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.response = { ...example.response, ...response };
 };
 
 export const updateResponseExampleDetails = (state, action) => {
   const { itemUid, collectionUid, exampleUid, details } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.name = details.name || example.name;
-        example.description = details.description || example.description;
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.name = details.name || example.name;
+  example.description = details.description || example.description;
 };
 
 export const updateResponseExampleName = (state, action) => {
   const { itemUid, collectionUid, exampleUid, name } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.name = name;
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.name = name;
 };
 
 export const updateResponseExampleDescription = (state, action) => {
   const { itemUid, collectionUid, exampleUid, description } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.description = description;
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.description = description;
 };
 
 // Response Example Request Headers
@@ -565,154 +716,169 @@ export const addResponseExampleRequestHeader = (state, action) => {
   const { itemUid, collectionUid, exampleUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.request.headers = example.request.headers || [];
-        example.request.headers.push({
-          uid: uuid(),
-          name: '',
-          value: '',
-          description: '',
-          enabled: true
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.request.headers = example.request.headers || [];
+  example.request.headers.push({
+    uid: uuid(),
+    name: '',
+    value: '',
+    description: '',
+    enabled: true
+  });
 };
 
 export const updateResponseExampleRequestHeader = (state, action) => {
   const { itemUid, collectionUid, exampleUid, header } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.headers) {
-        const headerToUpdate = find(example.request.headers, (h) => h.uid === header.uid);
-        if (headerToUpdate) {
-          headerToUpdate.name = header.name;
-          headerToUpdate.value = header.value;
-          headerToUpdate.description = header.description;
-          headerToUpdate.enabled = header.enabled;
-        }
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.headers) return;
+
+  const headerToUpdate = find(example.request.headers, (h) => h.uid === header.uid);
+  if (!headerToUpdate) return;
+
+  headerToUpdate.name = header.name;
+  headerToUpdate.value = header.value;
+  headerToUpdate.description = header.description;
+  headerToUpdate.enabled = header.enabled;
 };
 
 export const deleteResponseExampleRequestHeader = (state, action) => {
   const { itemUid, collectionUid, exampleUid, headerUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.headers) {
-        example.request.headers = filter(example.request.headers, (h) => h.uid !== headerUid);
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.headers) return;
+
+  example.request.headers = filter(example.request.headers, (h) => h.uid !== headerUid);
 };
 
 export const moveResponseExampleRequestHeader = (state, action) => {
   const { itemUid, collectionUid, exampleUid, updateReorderedItem } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.headers) {
-        example.request.headers = updateReorderedItem.map((uid) => {
-          return example.request.headers.find((h) => h.uid === uid);
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.headers) return;
+
+  example.request.headers = updateReorderedItem.map((uid) => {
+    return example.request.headers.find((h) => h.uid === uid);
+  });
 };
 
 export const setResponseExampleRequestHeaders = (state, action) => {
   const { itemUid, collectionUid, exampleUid, headers } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.request.headers = map(headers, ({ name = '', value = '', enabled = true }) => ({
-          uid: uuid(),
-          name: name,
-          value: value,
-          description: '',
-          enabled: enabled
-        }));
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.request.headers = map(headers, ({ name = '', value = '', enabled = true }) => ({
+    uid: uuid(),
+    name: name,
+    value: value,
+    description: '',
+    enabled: enabled
+  }));
 };
 
 export const setResponseExampleParams = (state, action) => {
   const { itemUid, collectionUid, exampleUid, params } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.request.params = map(params, ({ name = '', value = '', enabled = true, type = 'query' }) => ({
-          uid: uuid(),
-          name: name,
-          value: value,
-          description: '',
-          enabled: enabled,
-          type: type
-        }));
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  example.request.params = map(params, ({ name = '', value = '', enabled = true, type = 'query' }) => ({
+    uid: uuid(),
+    name: name,
+    value: value,
+    description: '',
+    enabled: enabled,
+    type: type
+  }));
 };
 
 // Response Example Body Types
@@ -720,21 +886,28 @@ export const updateResponseExampleBody = (state, action) => {
   const { itemUid, collectionUid, exampleUid, body } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        example.request.body = { ...example.request.body, ...body };
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  // Ensure body always has a mode field
+  if (!body.mode && !example.request.body?.mode) {
+    body.mode = 'none';
+  }
+
+  example.request.body = { ...example.request.body, ...body };
 };
 
 // Response Example File Body
@@ -742,81 +915,92 @@ export const addResponseExampleFileParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        if (!example.request.body) {
-          example.request.body = { mode: 'file', file: [] };
-        }
-        if (!example.request.body.file) {
-          example.request.body.file = [];
-        }
-        example.request.body.file.push({
-          uid: uuid(),
-          name: '',
-          value: '',
-          description: '',
-          enabled: true
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.request.body) {
+    example.request.body = { mode: 'file', file: [] };
   }
+  if (!example.request.body.file) {
+    example.request.body.file = [];
+  }
+
+  example.request.body.file.push({
+    uid: uuid(),
+    name: '',
+    value: '',
+    description: '',
+    enabled: true
+  });
 };
 
 export const updateResponseExampleFileParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, param } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.body && example.request.body.file) {
-        const paramToUpdate = find(example.request.body.file, (p) => p.uid === param.uid);
-        if (paramToUpdate) {
-          paramToUpdate.name = param.name;
-          paramToUpdate.value = param.value;
-          paramToUpdate.description = param.description;
-          paramToUpdate.enabled = param.enabled;
-        }
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.body) return;
+  if (!example.request.body.file) return;
+
+  const paramToUpdate = find(example.request.body.file, (p) => p.uid === param.uid);
+  if (!paramToUpdate) return;
+
+  paramToUpdate.name = param.name;
+  paramToUpdate.value = param.value;
+  paramToUpdate.description = param.description;
+  paramToUpdate.enabled = param.enabled;
 };
 
 export const deleteResponseExampleFileParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, paramUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.body && example.request.body.file) {
-        example.request.body.file = filter(example.request.body.file, (p) => p.uid !== paramUid);
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.body) return;
+  if (!example.request.body.file) return;
+
+  example.request.body.file = filter(example.request.body.file, (p) => p.uid !== paramUid);
 };
 
 // Response Example Form URL Encoded Body
@@ -824,81 +1008,92 @@ export const addResponseExampleFormUrlEncodedParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        if (!example.request.body) {
-          example.request.body = { mode: 'formUrlEncoded', formUrlEncoded: [] };
-        }
-        if (!example.request.body.formUrlEncoded) {
-          example.request.body.formUrlEncoded = [];
-        }
-        example.request.body.formUrlEncoded.push({
-          uid: uuid(),
-          name: '',
-          value: '',
-          description: '',
-          enabled: true
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.request.body) {
+    example.request.body = { mode: 'formUrlEncoded', formUrlEncoded: [] };
+  }
+  if (!example.request.body.formUrlEncoded) {
+    example.request.body.formUrlEncoded = [];
+  }
+
+  example.request.body.formUrlEncoded.push({
+    uid: uuid(),
+    name: '',
+    value: '',
+    description: '',
+    enabled: true
+  });
 };
 
 export const updateResponseExampleFormUrlEncodedParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, param } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.body && example.request.body.formUrlEncoded) {
-        const paramToUpdate = find(example.request.body.formUrlEncoded, (p) => p.uid === param.uid);
-        if (paramToUpdate) {
-          paramToUpdate.name = param.name;
-          paramToUpdate.value = param.value;
-          paramToUpdate.description = param.description;
-          paramToUpdate.enabled = param.enabled;
-        }
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.body) return;
+  if (!example.request.body.formUrlEncoded) return;
+
+  const paramToUpdate = find(example.request.body.formUrlEncoded, (p) => p.uid === param.uid);
+  if (!paramToUpdate) return;
+
+  paramToUpdate.name = param.name;
+  paramToUpdate.value = param.value;
+  paramToUpdate.description = param.description;
+  paramToUpdate.enabled = param.enabled;
 };
 
 export const deleteResponseExampleFormUrlEncodedParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, paramUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.body && example.request.body.formUrlEncoded) {
-        example.request.body.formUrlEncoded = filter(example.request.body.formUrlEncoded, (p) => p.uid !== paramUid);
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.body) return;
+  if (!example.request.body.formUrlEncoded) return;
+
+  example.request.body.formUrlEncoded = filter(example.request.body.formUrlEncoded, (p) => p.uid !== paramUid);
 };
 
 // Response Example Multipart Form Body
@@ -906,85 +1101,96 @@ export const addResponseExampleMultipartFormParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        if (!example.request.body) {
-          example.request.body = { mode: 'multipartForm', multipartForm: [] };
-        }
-        if (!example.request.body.multipartForm) {
-          example.request.body.multipartForm = [];
-        }
-        example.request.body.multipartForm.push({
-          uid: uuid(),
-          name: '',
-          value: '',
-          description: '',
-          enabled: true,
-          type: 'text',
-          contentType: ''
-        });
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.request.body) {
+    example.request.body = { mode: 'multipartForm', multipartForm: [] };
+  }
+  if (!example.request.body.multipartForm) {
+    example.request.body.multipartForm = [];
   }
+
+  example.request.body.multipartForm.push({
+    uid: uuid(),
+    name: '',
+    value: '',
+    description: '',
+    enabled: true,
+    type: 'text',
+    contentType: ''
+  });
 };
 
 export const updateResponseExampleMultipartFormParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, param } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.body && example.request.body.multipartForm) {
-        const paramToUpdate = find(example.request.body.multipartForm, (p) => p.uid === param.uid);
-        if (paramToUpdate) {
-          paramToUpdate.name = param.name;
-          paramToUpdate.value = param.value;
-          paramToUpdate.description = param.description;
-          paramToUpdate.enabled = param.enabled;
-          paramToUpdate.type = param.type;
-          paramToUpdate.contentType = param.contentType;
-        }
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.body) return;
+  if (!example.request.body.multipartForm) return;
+
+  const paramToUpdate = find(example.request.body.multipartForm, (p) => p.uid === param.uid);
+  if (!paramToUpdate) return;
+
+  paramToUpdate.name = param.name;
+  paramToUpdate.value = param.value;
+  paramToUpdate.description = param.description;
+  paramToUpdate.enabled = param.enabled;
+  paramToUpdate.type = param.type;
+  paramToUpdate.contentType = param.contentType;
 };
 
 export const deleteResponseExampleMultipartFormParam = (state, action) => {
   const { itemUid, collectionUid, exampleUid, paramUid } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example && example.request.body && example.request.body.multipartForm) {
-        example.request.body.multipartForm = filter(example.request.body.multipartForm, (p) => p.uid !== paramUid);
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
   }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+  if (!example.request.body) return;
+  if (!example.request.body.multipartForm) return;
+
+  example.request.body.multipartForm = filter(example.request.body.multipartForm, (p) => p.uid !== paramUid);
 };
 
 // Response Status Code and Status Text Reducers
@@ -992,46 +1198,52 @@ export const updateResponseExampleStatusCode = (state, action) => {
   const { itemUid, collectionUid, exampleUid, statusCode } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        if (!example.response) {
-          example.response = {};
-        }
-        example.response.status = String(statusCode);
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
+  }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.response) {
+    example.response = {};
   }
+
+  example.response.status = String(statusCode ?? '');
 };
 
 export const updateResponseExampleStatusText = (state, action) => {
   const { itemUid, collectionUid, exampleUid, statusText } = action.payload;
   const collection = findCollectionByUid(state.collections, collectionUid);
 
-  if (collection) {
-    const item = findItemInCollection(collection, itemUid);
-    if (item && !item.draft) {
-      item.draft = cloneDeep(item);
-    }
-    if (item && item.draft) {
-      if (!item.draft.examples) {
-        item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
-      }
-      const example = item.draft.examples.find((e) => e.uid === exampleUid);
-      if (example) {
-        if (!example.response) {
-          example.response = {};
-        }
-        example.response.statusText = String(statusText);
-      }
-    }
+  if (!collection) return;
+
+  const item = findItemInCollection(collection, itemUid);
+  if (!item) return;
+
+  if (!item.draft) {
+    item.draft = cloneDeep(item);
   }
+
+  if (!item.draft.examples) {
+    item.draft.examples = item.examples ? cloneDeep(item.examples) : [];
+  }
+
+  const example = item.draft.examples.find((e) => e.uid === exampleUid);
+  if (!example) return;
+
+  if (!example.response) {
+    example.response = {};
+  }
+
+  example.response.statusText = String(statusText ?? '');
 };
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
index d394807bc8..1692c3eeb2 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
@@ -19,7 +19,8 @@ export const tabsSlice = createSlice({
   initialState,
   reducers: {
     addTab: (state, action) => {
-      const { uid, collectionUid, type, requestPaneTab, preview, ...otherFields } = action.payload;
+      const { uid, collectionUid, type, requestPaneTab, preview, exampleUid, itemUid } = action.payload;
+
       const nonReplaceableTabTypes = [
         "variables",
         "collection-runner",
@@ -61,7 +62,8 @@ export const tabsSlice = createSlice({
             ? preview
           : !nonReplaceableTabTypes.includes(type),
           ...(uid ? { folderUid: uid } : {}),
-          ...otherFields
+          ...(exampleUid ? { exampleUid } : {}),
+          ...(itemUid ? { itemUid } : {})
         };
 
         state.activeTabUid = uid;
@@ -80,7 +82,8 @@ export const tabsSlice = createSlice({
         preview: preview !== undefined
             ? preview
           : !nonReplaceableTabTypes.includes(type),
-        ...otherFields
+        ...(exampleUid ? { exampleUid } : {}),
+        ...(itemUid ? { itemUid } : {})
       });
       state.activeTabUid = uid;
     },
diff --git a/packages/bruno-app/src/utils/responseBodyProcessor.js b/packages/bruno-app/src/utils/responseBodyProcessor.js
new file mode 100644
index 0000000000..b32170ea60
--- /dev/null
+++ b/packages/bruno-app/src/utils/responseBodyProcessor.js
@@ -0,0 +1,23 @@
+/**
+ * Utility functions for processing response body content and determining body type
+ */
+
+/**
+ * Determines the body type based on content-type header
+ * @param {string} contentType - The content-type header value
+ * @param {Buffer} dataBuffer - Optional binary data buffer
+ * @returns {string} - The body type (json, xml, html, text, binary)
+ */
+export const getBodyType = (contentType = '') => {
+  const normalizedContentType = contentType.toLowerCase();
+
+  if (normalizedContentType.includes('application/json')) {
+    return 'json';
+  } else if (normalizedContentType.includes('text/xml') || normalizedContentType.includes('application/xml')) {
+    return 'xml';
+  } else if (normalizedContentType.includes('text/html')) {
+    return 'html';
+  }
+
+  return 'text';
+};
diff --git a/packages/bruno-filestore/src/formats/bru/index.ts b/packages/bruno-filestore/src/formats/bru/index.ts
index db197c0630..edb028f306 100644
--- a/packages/bruno-filestore/src/formats/bru/index.ts
+++ b/packages/bruno-filestore/src/formats/bru/index.ts
@@ -9,9 +9,9 @@ import {
 } from '@usebruno/lang';
 import { getOauth2AdditionalParameters } from './utils/oauth2-additional-params';
 
-export const bruRequestToJson = (data: string | any, parsed: boolean = false, isExample: boolean = false): any => {
+export const bruRequestToJson = (data: string | any, parsed: boolean = false): any => {
   try {
-    const json = parsed ? data : bruToJsonV2(data, isExample);
+    const json = parsed ? data : bruToJsonV2(data);
 
     let requestType = _.get(json, 'meta.type');
     switch (requestType) {
@@ -60,33 +60,10 @@ export const bruRequestToJson = (data: string | any, parsed: boolean = false, is
         docs: _.get(json, 'docs', '')
       },
       examples: _.get(json, 'examples', []).map((e: any) => {
-        return bruRequestToJson(e, true, true);
+        return bruExampleToJson(e, true, requestType, _.get(json, 'http.method'));
       })
     } as any;
 
-    if (isExample) {
-      delete transformedJson.seq;
-      delete transformedJson.tags;
-      delete transformedJson.settings;
-      delete transformedJson.examples;
-      delete transformedJson.request.script;
-      delete transformedJson.request.vars;
-      delete transformedJson.request.assertions;
-      delete transformedJson.request.tests;
-      delete transformedJson.request.docs;
-      transformedJson.description = _.get(json, 'meta.description', '');
-      const res = _.get(json, 'response', {});
-      transformedJson.response = {
-        headers: (res.headers || []).map((header: any) => ({
-          name: header.name,
-          value: header.value
-        })),
-        status: res.status.code,
-        statusText: res.status.text,
-        body: typeof res.body !== 'string' ? JSON.stringify(res.body, null, 2) : res.body || ''
-      };
-    }
-
     // Add request type specific fields
     if (requestType === 'grpc-request') {
       const selectedMethodType = _.get(json, 'grpc.methodType');
@@ -137,7 +114,7 @@ export const bruRequestToJson = (data: string | any, parsed: boolean = false, is
   }
 };
 
-export const jsonRequestToBru = (json: any, isExample: boolean = false): string => {
+export const jsonRequestToBru = (json: any): string => {
   try {
     let type = _.get(json, 'type');
     switch (type) {
@@ -241,44 +218,7 @@ export const jsonRequestToBru = (json: any, isExample: boolean = false): string
     bruJson.tests = _.get(json, 'request.tests', '');
     bruJson.settings = _.get(json, 'settings', {});
     bruJson.docs = _.get(json, 'request.docs', '');
-    bruJson.examples = _.get(json, 'examples', []).map((e: any) => jsonRequestToBru(e, true));
-
-    // TODO:  do we even care about certain keys like assertions, tests, docs, etc. for examples?
-    if (isExample) {
-      delete bruJson.meta.seq;
-      delete bruJson.meta.tags;
-      delete bruJson.settings;
-      delete bruJson.docs;
-      delete bruJson.assertions;
-      delete bruJson.tests;
-      delete bruJson.vars;
-      delete bruJson.auth;
-      delete bruJson.script;
-      delete bruJson.examples;
-
-      bruJson.meta.description = _.get(json, 'description', '');
-
-      const response = _.get(json, 'response', {
-        headers: [],
-        status: {
-          code: 200,
-          text: 'OK'
-        },
-        body: ''
-      });
-      bruJson.response = {
-        headers: response.headers,
-        status: {
-          code: response.status,
-          text: response.statusText
-        },
-        body: typeof response.body !== 'string' ? JSON.stringify(response.body, null, 2) : response.body || ''
-      };
-    }
-
-    if (isExample) {
-      return bruJson;
-    }
+    bruJson.examples = _.get(json, 'examples', []).map((e: any) => jsonExampleToBru(e));
 
     const bru = jsonToBruV2(bruJson);
     return bru;
@@ -399,3 +339,89 @@ export const jsonEnvironmentToBru = (json: any): string => {
     throw error;
   }
 };
+
+// New functions for example handling
+export const bruExampleToJson = (data: string | any, parsed: boolean = false, parentType?: string, parentMethod?: string): any => {
+  try {
+    const json = parsed ? data : bruToJsonV2(data, true); // Always use example parsing
+
+    // Use parent request's type and method if provided
+    const requestType = parentType || _.get(json, 'meta.type', 'http');
+    const requestMethod = parentMethod || _.get(json, 'http.method', 'GET');
+
+    let transformedType = requestType;
+    switch (requestType) {
+      case 'http':
+        transformedType = 'http-request';
+        break;
+      case 'graphql':
+        transformedType = 'graphql-request';
+        break;
+      case 'grpc':
+        transformedType = 'grpc-request';
+        break;
+      case 'ws':
+        transformedType = 'ws-request';
+        break;
+      default:
+        transformedType = 'http-request';
+    }
+
+    // Follow the same structure as the main request, but with missing fields for examples
+    const transformedJson = {
+      type: transformedType,
+      name: _.get(json, 'name'),
+      description: _.get(json, 'description', ''),
+      // Examples don't have seq, settings, tags
+      request: {
+        method: _.get(json, 'request.method') || requestMethod,
+        url: _.get(json, 'request.url'),
+        headers: _.get(json, 'request.headers', []),
+        body: _.get(json, 'request.body', {}),
+        // Examples don't have script, vars, assertions, tests, docs
+        params: _.get(json, 'request.params', [])
+      },
+      response: {
+        headers: _.get(json, 'response.headers', []).map((header: any) => ({
+          name: header.name,
+          value: header.value
+        })),
+        status: String(_.get(json, 'response.status', '200')),
+        statusText: _.get(json, 'response.statusText', 'OK'),
+        body: {
+          type: _.get(json, 'response.body.type', 'json'),
+          content: _.get(json, 'response.body.content', '')
+        }
+      }
+    } as any;
+
+    return transformedJson;
+  } catch (error) {
+    console.log('bruExampleToJson error', error);
+    throw error;
+  }
+};
+
+export const jsonExampleToBru = (json: any) => {
+  try {
+    // Transform the JSON to match the same structure as main request, but with missing fields
+    const exampleJson = {
+      name: _.get(json, 'name'),
+      description: _.get(json, 'description', ''),
+      // Examples don't have seq, settings, tags
+      request: {
+        method: _.get(json, 'request.method'),
+        url: _.get(json, 'request.url'),
+        headers: _.get(json, 'request.headers', []),
+        body: _.get(json, 'request.body', {}),
+        // Examples don't have script, vars, assertions, tests, docs
+        params: _.get(json, 'request.params', [])
+      },
+      response: _.get(json, 'response', {})
+    };
+
+    return exampleJson;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/packages/bruno-filestore/src/index.ts b/packages/bruno-filestore/src/index.ts
index 6e1f6964cb..2e1ec26d56 100644
--- a/packages/bruno-filestore/src/index.ts
+++ b/packages/bruno-filestore/src/index.ts
@@ -19,8 +19,7 @@ import { bruRequestParseAndRedactBodyData } from './formats/bru/utils/request-pa
 
 export const parseRequest = (content: string, options: ParseOptions = { format: 'bru' }): any => {
   if (options.format === 'bru') {
-    const contentJson = bruRequestToJson(content);
-    return contentJson;
+    return bruRequestToJson(content);
   }
   throw new Error(`Unsupported format: ${options.format}`);
 };
diff --git a/packages/bruno-lang/v2/src/bruToJson.js b/packages/bruno-lang/v2/src/bruToJson.js
index e84138569e..b97d9068cc 100644
--- a/packages/bruno-lang/v2/src/bruToJson.js
+++ b/packages/bruno-lang/v2/src/bruToJson.js
@@ -1,6 +1,7 @@
 const ohm = require('ohm-js');
 const _ = require('lodash');
 const { safeParseJson, outdentString } = require('./utils');
+const parseExample = require('./example/bruToJson');
 
 /**
  * A Bru file is made up of blocks.
@@ -29,13 +30,11 @@ const { safeParseJson, outdentString } = require('./utils');
  *
  */
 const grammar = ohm.grammar(`Bru {
-  BruFile = (meta | http | grpc | ws | query | params | headers | metadata | auths | bodies | varsandassert | script | tests | settings | docs | responses | example)*
+  BruFile = (meta | http | grpc | ws | query | params | headers | metadata | auths | bodies | varsandassert | script | tests | settings | docs | example)*
   auths = authawsv4 | authbasic | authbearer | authdigest | authNTLM | authOAuth2 | authwsse | authapikey | authOauth2Configs
   bodies = bodyjson | bodytext | bodyxml | bodysparql | bodygraphql | bodygraphqlvars | bodyforms | body | bodygrpc | bodyws
   bodyforms = bodyformurlencoded | bodymultipart | bodyfile
   params = paramspath | paramsquery
-  responses = responseheaders | responsebodies | responsestatus
-  responsebodies = responsebody
   
   // Oauth2 additional parameters
   authOauth2Configs = oauth2AuthReqConfig | oauth2AccessTokenReqConfig | oauth2RefreshTokenReqConfig
@@ -147,10 +146,6 @@ const grammar = ohm.grammar(`Bru {
   bodymultipart = "body:multipart-form" dictionary
   bodyfile = "body:file" dictionary
 
-  // Response blocks
-  responseheaders = "response:headers" dictionary
-  responsestatus = "response:status" dictionary
-  responsebody = "response:body" st* "{" nl* textblock tagend
 
   // Examples - multiple example blocks
   example = "example" st* "{" nl* examplecontent tagend
@@ -304,7 +299,7 @@ const createGetNumFromRecord = (obj) => (key, { fallback } = {}) => {
   return asNumber;
 };
 
-// Recursive parser for example content
+// Parse example content using dedicated example parser
 const parseExampleContent = (content) => {
   try {
     // Unindent the content by removing leading whitespace from each line
@@ -327,14 +322,8 @@ const parseExampleContent = (content) => {
 
     const unindentedContent = unindentedLines.join('\n').trim();
 
-    // Parse the unindented content using the same grammar
-    const match = grammar.match(unindentedContent);
-    if (match.succeeded()) {
-      return sem(match).ast;
-    } else {
-      console.warn('Failed to parse example content:', match.message);
-      return { error: 'Failed to parse example content' };
-    }
+    // Parse the unindented content using the dedicated example parser
+    return parseExample(unindentedContent);
   } catch (error) {
     console.error('Error parsing example content:', error);
     return { error: error.message };
@@ -1103,28 +1092,6 @@ const sem = grammar.createSemantics().addAttribute('ast', {
       }
     };
   },
-  // Response semantic rules
-  responseheaders(_1, dictionary) {
-    return {
-      response: {
-        headers: mapPairListToKeyValPairs(dictionary.ast)
-      }
-    };
-  },
-  responsestatus(_1, dictionary) {
-    return {
-      response: {
-        status: mapPairListToKeyValPair(dictionary.ast)
-      }
-    };
-  },
-  responsebody(_1, _2, _3, _4, textblock, _5) {
-    return {
-      response: {
-        body: outdentString(textblock.sourceString)
-      }
-    };
-  },
   example(_1, _2, _3, _4, examplecontent, _5) {
     const content = examplecontent.sourceString;
     const parsedExample = parseExampleContent(content);
@@ -1133,7 +1100,7 @@ const sem = grammar.createSemantics().addAttribute('ast', {
     };
   },
   examplecontent(chars) {
-    return chars.sourceString;
+    return outdentString(chars.sourceString);
   }
 });
 
diff --git a/packages/bruno-lang/v2/src/example/bruToJson.js b/packages/bruno-lang/v2/src/example/bruToJson.js
new file mode 100644
index 0000000000..dc55d1c481
--- /dev/null
+++ b/packages/bruno-lang/v2/src/example/bruToJson.js
@@ -0,0 +1,188 @@
+const ohm = require('ohm-js');
+const _ = require('lodash');
+const { safeParseJson, outdentString } = require('../utils');
+const parseRequest = require('./request/bruToJson');
+const parseResponse = require('./response/bruToJson');
+
+/**
+ * Example Grammar for Bruno
+ *
+ * Examples follow a simplified grammar with root-level properties and proper colon syntax.
+ * No meta block - everything is at root level: name, description, type, url, etc.
+ * Supports all body types from request side but response body stays as simple text.
+ */
+const exampleGrammar = ohm.grammar(`Example {
+  ExampleFile = (name | description | request | response)*
+  
+  nl = "\\r"? "\\n"
+  st = " " | "\\t"
+  stnl = st | nl
+  tagend = nl "}"
+  optionalnl = ~tagend nl
+  keychar = ~(tagend | st | nl | ":") any
+  valuechar = ~(nl | tagend) any
+
+  // Multiline text block surrounded by '''
+  multilinetextblockdelimiter = "'''"
+  multilinetextblock = multilinetextblockdelimiter (~multilinetextblockdelimiter any)* multilinetextblockdelimiter
+
+  // Dictionary Blocks
+  dictionary = st* "{" pairlist? tagend
+  pairlist = optionalnl* pair (~tagend nl pair)*
+  pair = st* (quoted_key | key) st* ":" st* value st*
+  disable_char = "~"
+  quote_char = "\\""
+  esc_char = "\\\\"
+  esc_quote_char = esc_char quote_char
+  quoted_key_char = ~(quote_char | esc_quote_char | nl) any
+  quoted_key = disable_char? quote_char (esc_quote_char | quoted_key_char)* quote_char
+  key = keychar*
+  value = multilinetextblock | valuechar*
+
+  // Text Blocks
+  textblock = textline (~tagend nl textline)*
+  textline = textchar*
+  textchar = ~nl any
+
+  // Root level properties
+  name =  "name" st* ":" st* valuechar* st*
+  description = "description" st* ":" st* valuechar* st*
+
+  // Request block
+  request = nl* "request" st* ":" st* "{" nl* requestcontent+ nl* "}" nl*
+  requestcontent = (~tagend any)+
+
+  // Response block
+  response =  "response" st* ":" st* "{" nl* responsecontent nl* "}" nl*
+  responsecontent = (~tagend any)+
+}`);
+
+const sem = exampleGrammar.createSemantics().addAttribute('ast', {
+  ExampleFile(tags) {
+    if (!tags || !tags.ast || !tags.ast.length) {
+      return {};
+    }
+
+    const result = _.reduce(tags.ast, (acc, item) => {
+      return _.merge(acc, item);
+    }, {});
+
+    return result;
+  },
+  dictionary(_1, _2, pairlist, _3) {
+    return pairlist.ast;
+  },
+  pairlist(_1, pair, _2, rest) {
+    return [pair.ast, ...rest.ast];
+  },
+  pair(_1, key, _2, _3, _4, value, _5) {
+    let res = {};
+    res[key.ast] = value.ast ? value.ast.trim() : '';
+    return res;
+  },
+  esc_quote_char(_1, quote) {
+    return quote.sourceString;
+  },
+  quoted_key(disabled, _1, chars, _2) {
+    return (disabled ? disabled.sourceString : '') + chars.ast.join('');
+  },
+  key(chars) {
+    return chars.sourceString ? chars.sourceString.trim() : '';
+  },
+  value(chars) {
+    try {
+      let isMultiline = chars.sourceString?.startsWith('```') && chars.sourceString?.endsWith('```');
+      if (isMultiline) {
+        const multilineString = chars.sourceString?.replace(/^```|```$/g, '');
+        return multilineString
+          .split('\n')
+          .map((line) => line.slice(4))
+          .join('\n');
+      }
+      return chars.sourceString ? chars.sourceString.trim() : '';
+    } catch (err) {
+      console.error(err);
+    }
+    return chars.sourceString ? chars.sourceString.trim() : '';
+  },
+  textblock(line, _1, rest) {
+    return [line.ast, ...rest.ast].join('\n');
+  },
+  textline(chars) {
+    return chars.sourceString;
+  },
+  textchar(char) {
+    return char.sourceString;
+  },
+  nl(_1, _2) {
+    return '';
+  },
+  st(_) {
+    return '';
+  },
+  tagend(_1, _2) {
+    return '';
+  },
+  _terminal() {
+    return this.sourceString;
+  },
+  multilinetextblockdelimiter(_) {
+    return '';
+  },
+  multilinetextblock(_1, content, _2) {
+    return content.sourceString.trim();
+  },
+  _iter(...elements) {
+    return elements.map((e) => e.ast);
+  },
+
+  // Root level properties
+  name(_1, _2, _3, _4, value, _6) {
+    return {
+      name: value.sourceString ? value.sourceString.trim() : ''
+    };
+  },
+  description(_1, _2, _3, _4, value, _6) {
+    return {
+      description: value.sourceString ? value.sourceString.trim() : ''
+    };
+  },
+  request(_1, _2, _3, _4, _5, _6, _7, requestcontent, _8, _9, _10) {
+    if (!requestcontent || !requestcontent.ast || !requestcontent.ast.length) {
+      return {};
+    }
+
+    const outdentedContent = outdentString(requestcontent.sourceString);
+    const parsedRequest = parseRequest(outdentedContent);
+
+    return {
+      request: parsedRequest
+    };
+  },
+  requestcontent(chars) {
+    return chars.sourceString;
+  },
+  response(_1, _2, _3, _4, _5, _6, content, _7, _8, _9) {
+    const outdentedContent = outdentString(content.sourceString);
+    const parsedResponse = parseResponse(outdentedContent);
+
+    return { response: parsedResponse };
+  },
+  responsecontent(chars) {
+    return chars.sourceString;
+  }
+});
+
+const parseExample = (input) => {
+  const match = exampleGrammar.match(input);
+
+  if (match.succeeded()) {
+    let ast = sem(match).ast;
+    return ast;
+  } else {
+    console.log('match failed', match);
+    throw new Error(match.message);
+  }
+};
+
+module.exports = parseExample;
diff --git a/packages/bruno-lang/v2/src/example/jsonToBru.js b/packages/bruno-lang/v2/src/example/jsonToBru.js
new file mode 100644
index 0000000000..5918acef91
--- /dev/null
+++ b/packages/bruno-lang/v2/src/example/jsonToBru.js
@@ -0,0 +1,240 @@
+const { indentString } = require('../utils');
+
+// remove the last line if two new lines are found
+const stripLastLine = (text) => {
+  if (!text || !text.length) return text;
+
+  return text.replace(/(\r?\n)$/, '');
+};
+
+// Custom indentation function for proper spacing
+const indentStringCustom = (str, spaces = 4) => {
+  if (!str || !str.length) {
+    return str || '';
+  }
+
+  const indent = ' '.repeat(spaces);
+  return str
+    .split(/\r\n|\r|\n/)
+    .map((line) => indent + line)
+    .join('\n');
+};
+
+// Convert JSON to example BRU format with proper colon syntax
+const jsonToExampleBru = (json) => {
+  const { name, description, request, response } = json;
+  const { url, method, params, headers, body } = request || {};
+  const { headers: responseHeaders, status: responseStatus, statusText: responseStatusText, body: responseBody } = response || {};
+
+  let bru = '';
+
+  if (name) {
+    bru += `name: ${name}\n`;
+  }
+
+  if (description) {
+    bru += `description: ${description}\n`;
+  }
+
+  // Request block
+  bru += '\nrequest: {\n';
+
+  if (url) {
+    bru += `  url: ${url}\n`;
+  }
+
+  // Add method field right after url
+  if (method) {
+    bru += `  method: ${method}\n`;
+  }
+
+  // Add mode field inside request block, right after method
+  if (request && request.body && request.body.mode) {
+    bru += `  mode: ${request.body.mode}\n`;
+  }
+
+  if (params && params.length) {
+    const queryParams = params.filter((param) => param.type === 'query');
+    const pathParams = params.filter((param) => param.type === 'path');
+
+    if (queryParams.length) {
+      bru += '  params:query: {\n';
+      bru += `${indentStringCustom(queryParams
+        .map((item) => `${item.enabled ? '' : '~'}${item.name}: ${item.value}`)
+        .join('\n'), 4)}`;
+      bru += '\n  }\n\n';
+    }
+
+    if (pathParams.length) {
+      bru += '  params:path: {\n';
+      bru += `${indentStringCustom(pathParams
+        .map((item) => `${item.enabled ? '' : '~'}${item.name}: ${item.value}`)
+        .join('\n'), 4)}`;
+      bru += '\n  }\n\n';
+    }
+  }
+
+  if (headers && headers.length) {
+    bru += '  headers: {\n';
+    bru += `${indentStringCustom(headers
+      .map((item) => `${item.enabled ? '' : '~'}${item.name}: ${item.value}`)
+      .join('\n'), 4)}`;
+    bru += '\n  }\n\n';
+  }
+
+  // All body types from request side
+  if (body && body.json) {
+    bru += `  body:json: {\n${indentStringCustom(body.json, 4)}\n  }\n\n`;
+  }
+
+  if (body && body.text) {
+    bru += `  body:text: {\n${indentStringCustom(body.text, 4)}\n  }\n\n`;
+  }
+
+  if (body && body.xml) {
+    bru += `  body:xml: {\n${indentStringCustom(body.xml, 4)}\n  }\n\n`;
+  }
+
+  if (body && body.sparql) {
+    bru += `  body:sparql: {\n${indentStringCustom(body.sparql, 4)}\n  }\n\n`;
+  }
+
+  if (body && body.graphql && body.graphql.query) {
+    bru += `  body:graphql: {\n${indentStringCustom(body.graphql.query, 4)}\n  }\n\n`;
+  }
+
+  if (body && body.graphql && body.graphql.variables) {
+    bru += `  body:graphql:vars: {\n${indentStringCustom(body.graphql.variables, 4)}\n  }\n\n`;
+  }
+
+  if (body && body.formUrlEncoded && body.formUrlEncoded.length) {
+    bru += `  body:form-urlencoded: {\n`;
+    const enabledValues = body.formUrlEncoded
+      .filter((item) => item.enabled)
+      .map((item) => `${item.name}: ${item.value}`)
+      .join('\n');
+    const disabledValues = body.formUrlEncoded
+      .filter((item) => !item.enabled)
+      .map((item) => `~${item.name}: ${item.value}`)
+      .join('\n');
+
+    if (enabledValues) {
+      bru += `${indentStringCustom(enabledValues, 4)}\n`;
+    }
+    if (disabledValues) {
+      bru += `${indentStringCustom(disabledValues, 4)}\n`;
+    }
+    bru += '  }\n\n';
+  }
+
+  if (body && body.multipartForm && body.multipartForm.length) {
+    bru += `  body:multipart-form: {\n`;
+    const multipartForms = body.multipartForm;
+    if (multipartForms.length) {
+      bru += `${indentStringCustom(multipartForms
+        .map((item) => {
+          const enabled = item.enabled ? '' : '~';
+          const contentType
+            = item.contentType && item.contentType !== '' ? ' @contentType(' + item.contentType + ')' : '';
+
+          if (item.type === 'text') {
+            return `${enabled}${item.name}: ${item.value}${contentType}`;
+          }
+
+          if (item.type === 'file') {
+            const filepaths = Array.isArray(item.value) ? item.value : [];
+            const filestr = filepaths.join('|');
+            const value = `@file(${filestr})`;
+            return `${enabled}${item.name}: ${value}${contentType}`;
+          }
+        })
+        .join('\n'), 4)}\n`;
+    }
+    bru += '  }\n\n';
+  }
+
+  if (body && body.file && body.file.length) {
+    bru += `  body:file: {\n`;
+    const files = body.file;
+    if (files.length) {
+      bru += `${indentStringCustom(files
+        .map((item) => {
+          const selected = item.selected ? '' : '~';
+          const contentType
+            = item.contentType && item.contentType !== '' ? ' @contentType(' + item.contentType + ')' : '';
+          const filePath = item.filePath || '';
+          const value = `@file(${filePath})`;
+          const itemName = 'file';
+          return `${selected}${itemName}: ${value}${contentType}`;
+        })
+        .join('\n'), 4)}\n`;
+    }
+    bru += '  }\n\n';
+  }
+  /**
+   * Only remove the last line if there are two new lines at the end
+   * else the stripLastLine function will remove the last line and the curly braces move to the end of last line
+   */
+  if (bru.endsWith('\n\n')) {
+    bru = stripLastLine(bru);
+  }
+
+  bru += '}\n\n';
+
+  // Response block
+  if (response) {
+    bru += 'response: {\n';
+
+    // Response headers
+    if (responseHeaders && responseHeaders.length) {
+      bru += '  headers: {\n';
+      bru += `${indentStringCustom(responseHeaders
+        .map((item) => `${item.name}: ${item.value}`)
+        .join('\n'), 4)}`;
+      bru += '\n  }\n\n';
+    }
+
+    // Response status
+    if (responseStatus || responseStatusText) {
+      bru += '  status: {\n';
+      if (responseStatus !== undefined) {
+        bru += `    code: ${responseStatus}\n`;
+      }
+      if (responseStatusText !== undefined) {
+        bru += `    text: ${responseStatusText}\n`;
+      }
+      bru += '  }\n\n';
+    }
+
+    // Response body with type and content
+    if (responseBody) {
+      bru += '  body: {\n';
+
+      if (responseBody.type) {
+        bru += `    type: ${responseBody.type}\n`;
+      }
+
+      if (responseBody.content !== undefined) {
+        let contentString = typeof responseBody.content === 'string' ? responseBody.content : JSON.stringify(responseBody.content, null, 2);
+        bru += `    content: '''\n${indentStringCustom(contentString, 6)}\n    '''\n`;
+      }
+
+      bru += '  }\n\n';
+    }
+
+    bru = stripLastLine(bru);
+    bru += '}';
+  }
+
+  /**
+   * Only remove the last line if there are two new lines at the end
+   * else the stripLastLine function will remove the last line and the curly braces move to the end of last line
+   */
+  while (bru.endsWith('\n')) {
+    bru = stripLastLine(bru);
+  }
+
+  return bru;
+};
+
+module.exports = jsonToExampleBru;
diff --git a/packages/bruno-lang/v2/src/example/request/bruToJson.js b/packages/bruno-lang/v2/src/example/request/bruToJson.js
new file mode 100644
index 0000000000..ab141552d3
--- /dev/null
+++ b/packages/bruno-lang/v2/src/example/request/bruToJson.js
@@ -0,0 +1,400 @@
+const ohm = require('ohm-js');
+const _ = require('lodash');
+const { safeParseJson, outdentString } = require('../../utils');
+
+/**
+ * Request Block Grammar for Bruno Examples
+ *
+ * Handles parsing of request blocks within example files.
+ * Supports all body types: json, text, xml, sparql, graphql, form-urlencoded, multipart-form, file
+ */
+const requestGrammar = ohm.grammar(`Request {
+  RequestFile = requestcontent*
+  
+  nl = "\\r"? "\\n"
+  st = " " | "\\t"
+  stnl = st | nl
+  tagend = nl "}"
+  optionalnl = ~tagend nl
+  keychar = ~(tagend | st | nl | ":") any
+  valuechar = ~(nl | tagend) any
+
+  // Multiline text block surrounded by '''
+  multilinetextblockdelimiter = "'''"
+  multilinetextblock = multilinetextblockdelimiter (~multilinetextblockdelimiter any)* multilinetextblockdelimiter
+
+  // Dictionary Blocks
+  dictionary = st* "{" pairlist? tagend
+  pairlist = optionalnl* pair (~tagend nl pair)*
+  pair = st* (quoted_key | key) st* ":" st* value st*
+  disable_char = "~"
+  quote_char = "\\""
+  esc_char = "\\\\"
+  esc_quote_char = esc_char quote_char
+  quoted_key_char = ~(quote_char | esc_quote_char | nl) any
+  quoted_key = disable_char? quote_char (esc_quote_char | quoted_key_char)* quote_char
+  key = keychar*
+  value = list | multilinetextblock | valuechar*
+
+  // List
+  list = st* "[" nl+ listitems? st* nl+ st* "]"
+  listitems = listitem (nl+ listitem)*
+  listitem = st+ (alnum | "_" | "-")+ st*
+
+  // Text Blocks
+  textblock = textline (~tagend nl textline)*
+  textline = textchar*
+  textchar = ~nl any
+
+  // Request content
+  requestcontent = requesturl | requestmethod | requestmode | requestparamspath | requestparamsquery | requestheaders | requestbodies
+  requesturl = "url" st* ":" st* valuechar*
+  requestmethod = "method" st* ":" st* valuechar*
+  requestmode = "mode" st* ":" st* valuechar*
+  requestparamspath = "params:path" st* ":" st* dictionary
+  requestparamsquery = "params:query" st* ":" st* dictionary
+  requestheaders = "headers" st* ":" st* dictionary
+  requestbodies = bodyjson | bodytext | bodyxml | bodysparql | bodygraphql | bodygraphqlvars | bodyformurlencoded | bodymultipart | bodyfile
+
+  // All body types from request side
+  bodyjson = "body:json" st* ":" st* "{" nl* textblock tagend
+  bodytext = "body:text" st* ":" st* "{" nl* textblock tagend
+  bodyxml = "body:xml" st* ":" st* "{" nl* textblock tagend
+  bodysparql = "body:sparql" st* ":" st* "{" nl* textblock tagend
+  bodygraphql = "body:graphql" st* ":" st* "{" nl* textblock tagend
+  bodygraphqlvars = "body:graphql:vars" st* ":" st* "{" nl* textblock tagend
+  bodyformurlencoded = "body:form-urlencoded" st* ":" st* dictionary
+  bodymultipart = "body:multipart-form" st* ":" st* dictionary
+  bodyfile = "body:file" st* ":" st* dictionary
+}`);
+
+const mapPairListToKeyValPairs = (pairList = [], parseEnabled = true) => {
+  if (!pairList.length) {
+    return [];
+  }
+  return _.map(pairList[0], (pair) => {
+    let name = _.keys(pair)[0];
+    let value = pair[name];
+
+    if (!parseEnabled) {
+      return {
+        name,
+        value
+      };
+    }
+
+    let enabled = true;
+    if (name && name.length && name.charAt(0) === '~') {
+      name = name.slice(1);
+      enabled = false;
+    }
+
+    return {
+      name,
+      value,
+      enabled
+    };
+  });
+};
+
+const mapRequestParams = (pairList = [], type) => {
+  if (!pairList.length) {
+    return [];
+  }
+  return _.map(pairList[0], (pair) => {
+    let name = _.keys(pair)[0];
+    let value = pair[name];
+    let enabled = true;
+    if (name && name.length && name.charAt(0) === '~') {
+      name = name.slice(1);
+      enabled = false;
+    }
+
+    return {
+      name,
+      value,
+      enabled,
+      type
+    };
+  });
+};
+
+// Helper functions for multipart and file handling
+const multipartExtractContentType = (pair) => {
+  if (_.isString(pair.value)) {
+    const match = pair.value.match(/^(.*?)\s*@contentType\((.*?)\)\s*$/);
+    if (match != null && match.length > 2) {
+      pair.value = match[1];
+      pair.contentType = match[2];
+    } else {
+      pair.contentType = '';
+    }
+  }
+};
+
+const fileExtractContentType = (pair) => {
+  if (_.isString(pair.value)) {
+    const match = pair.value.match(/^(.*?)\s*@contentType\((.*?)\)\s*$/);
+    if (match && match.length > 2) {
+      pair.value = match[1].trim();
+      pair.contentType = match[2].trim();
+    } else {
+      pair.contentType = '';
+    }
+  }
+};
+
+const mapPairListToKeyValPairsMultipart = (pairList = [], parseEnabled = true) => {
+  const pairs = mapPairListToKeyValPairs(pairList, parseEnabled);
+
+  return pairs.map((pair) => {
+    pair.type = 'text';
+    multipartExtractContentType(pair);
+
+    if (pair.value.startsWith('@file(') && pair.value.endsWith(')')) {
+      let filestr = pair.value.replace(/^@file\(/, '').replace(/\)$/, '');
+      pair.type = 'file';
+      pair.value = filestr.split('|');
+    }
+
+    return pair;
+  });
+};
+
+const mapPairListToKeyValPairsFile = (pairList = [], parseEnabled = true) => {
+  const pairs = mapPairListToKeyValPairs(pairList, parseEnabled);
+  return pairs.map((pair) => {
+    fileExtractContentType(pair);
+
+    if (pair.value.startsWith('@file(') && pair.value.endsWith(')')) {
+      let filePath = pair.value.replace(/^@file\(/, '').replace(/\)$/, '');
+      pair.filePath = filePath;
+      pair.selected = pair.enabled;
+
+      // Remove pair.value as it only contains the file path reference
+      delete pair.value;
+      // Remove pair.name as it is auto-generated (e.g., file1, file2, file3, etc.)
+      delete pair.name;
+      delete pair.enabled;
+    }
+
+    return pair;
+  });
+};
+
+const concatArrays = (objValue, srcValue) => {
+  if (_.isArray(objValue) && _.isArray(srcValue)) {
+    return objValue.concat(srcValue);
+  }
+};
+
+const sem = requestGrammar.createSemantics().addAttribute('ast', {
+  RequestFile(tags) {
+    if (!tags || !tags.ast || !tags.ast.length) {
+      return {};
+    }
+
+    return _.reduce(tags.ast,
+      (result, item) => {
+        return _.mergeWith(result, item, concatArrays);
+      },
+      {});
+  },
+  dictionary(_1, _2, pairlist, _3) {
+    return pairlist.ast;
+  },
+  pairlist(_1, pair, _2, rest) {
+    return [pair.ast, ...rest.ast];
+  },
+  pair(_1, key, _2, _3, _4, value, _5) {
+    let res = {};
+    res[key.ast] = value.ast ? value.ast.trim() : '';
+    return res;
+  },
+  esc_quote_char(_1, quote) {
+    return quote.sourceString;
+  },
+  quoted_key(disabled, _1, chars, _2) {
+    return (disabled ? disabled.sourceString : '') + chars.ast.join('');
+  },
+  key(chars) {
+    return chars.sourceString ? chars.sourceString.trim() : '';
+  },
+  value(chars) {
+    try {
+      let isMultiline = chars.sourceString?.startsWith('```') && chars.sourceString?.endsWith('```');
+      if (isMultiline) {
+        const multilineString = chars.sourceString?.replace(/^```|```$/g, '');
+        return multilineString
+          .split('\n')
+          .map((line) => line.slice(4))
+          .join('\n');
+      }
+      return chars.sourceString ? chars.sourceString.trim() : '';
+    } catch (err) {
+      console.error(err);
+    }
+    return chars.sourceString ? chars.sourceString.trim() : '';
+  },
+  textblock(line, _1, rest) {
+    return [line.ast, ...rest.ast].join('\n');
+  },
+  textline(chars) {
+    return chars.sourceString;
+  },
+  textchar(char) {
+    return char.sourceString;
+  },
+  nl(_1, _2) {
+    return '';
+  },
+  st(_) {
+    return '';
+  },
+  tagend(_1, _2) {
+    return '';
+  },
+  _terminal() {
+    return this.sourceString;
+  },
+  multilinetextblockdelimiter(_) {
+    return '';
+  },
+  multilinetextblock(_1, content, _2) {
+    return content.sourceString.trim();
+  },
+  _iter(...elements) {
+    return elements.map((e) => e.ast);
+  },
+
+  requesturl(_1, _2, _3, _4, value) {
+    return {
+      url: value.sourceString ? value.sourceString.trim() : ''
+    };
+  },
+  requestmethod(_1, _2, _3, _4, value) {
+    return {
+      method: value.sourceString ? value.sourceString.trim() : ''
+    };
+  },
+  requestmode(_1, _2, _3, _4, value) {
+    const modeValue = value.sourceString ? value.sourceString.trim() : '';
+    // If mode is "none", return a body with mode: "none"
+    if (modeValue === 'none') {
+      return {
+        body: {
+          mode: 'none'
+        }
+      };
+    }
+    // For other modes, return nothing since the body parser will handle it
+    return {};
+  },
+  requestparamspath(_1, _2, _3, _4, dictionary) {
+    return {
+      params: mapRequestParams(dictionary.ast, 'path')
+    };
+  },
+  requestparamsquery(_1, _2, _3, _4, dictionary) {
+    return {
+      params: mapRequestParams(dictionary.ast, 'query')
+    };
+  },
+  requestheaders(_1, _2, _3, _4, dictionary) {
+    return {
+      headers: mapPairListToKeyValPairs(dictionary.ast)
+    };
+  },
+
+  // All body types from request side
+  bodyjson(_1, _2, _3, _4, _5, _6, textblock, _8) {
+    return {
+      body: {
+        mode: 'json',
+        json: outdentString(textblock.sourceString)
+      }
+    };
+  },
+  bodytext(_1, _2, _3, _4, _5, _6, textblock, _8) {
+    return {
+      body: {
+        mode: 'text',
+        text: outdentString(textblock.sourceString)
+      }
+    };
+  },
+  bodyxml(_1, _2, _3, _4, _5, _6, textblock, _8) {
+    return {
+      body: {
+        mode: 'xml',
+        xml: outdentString(textblock.sourceString)
+      }
+    };
+  },
+  bodysparql(_1, _2, _3, _4, _5, _6, textblock, _8) {
+    return {
+      body: {
+        mode: 'sparql',
+        sparql: outdentString(textblock.sourceString)
+      }
+    };
+  },
+  bodygraphql(_1, _2, _3, _4, _5, _6, textblock, _8) {
+    return {
+      body: {
+        mode: 'graphql',
+        graphql: {
+          query: outdentString(textblock.sourceString)
+        }
+      }
+    };
+  },
+  bodygraphqlvars(_1, _2, _3, _4, _5, _6, textblock, _8) {
+    return {
+      body: {
+        mode: 'graphql',
+        graphql: {
+          variables: outdentString(textblock.sourceString)
+        }
+      }
+    };
+  },
+  bodyformurlencoded(_1, _2, _3, _4, dictionary) {
+    return {
+      body: {
+        mode: 'formUrlEncoded',
+        formUrlEncoded: mapPairListToKeyValPairs(dictionary.ast)
+      }
+    };
+  },
+  bodymultipart(_1, _2, _3, _4, dictionary) {
+    return {
+      body: {
+        mode: 'multipartForm',
+        multipartForm: mapPairListToKeyValPairsMultipart(dictionary.ast)
+      }
+    };
+  },
+  bodyfile(_1, _2, _3, _4, dictionary) {
+    return {
+      body: {
+        mode: 'file',
+        file: mapPairListToKeyValPairsFile(dictionary.ast)
+      }
+    };
+  }
+});
+
+const parseRequest = (input) => {
+  const match = requestGrammar.match(input);
+
+  if (match.succeeded()) {
+    let ast = sem(match).ast;
+    return ast;
+  } else {
+    console.log('match failed', match);
+    throw new Error(match.message);
+  }
+};
+
+module.exports = parseRequest;
diff --git a/packages/bruno-lang/v2/src/example/response/bruToJson.js b/packages/bruno-lang/v2/src/example/response/bruToJson.js
new file mode 100644
index 0000000000..5579ab7eea
--- /dev/null
+++ b/packages/bruno-lang/v2/src/example/response/bruToJson.js
@@ -0,0 +1,231 @@
+const ohm = require('ohm-js');
+const _ = require('lodash');
+const { safeParseJson, outdentString } = require('../../utils');
+
+/**
+ * Response Block Grammar for Bruno Examples
+ *
+ * Handles parsing of response blocks within example files.
+ * Supports headers, status, and body parsing.
+ */
+const responseGrammar = ohm.grammar(`Response {
+  ResponseFile = responsecontent*
+  
+  nl = "\\r"? "\\n"
+  st = " " | "\\t"
+  stnl = st | nl
+  tagend = nl "}"
+  optionalnl = ~tagend nl
+  keychar = ~(tagend | st | nl | ":") any
+  valuechar = ~(nl | tagend) any
+
+  // Multiline text block surrounded by '''
+  multilinetextblockdelimiter = "'''"
+  multilinetextblock = multilinetextblockdelimiter (~multilinetextblockdelimiter any)* multilinetextblockdelimiter
+
+  // Dictionary Blocks
+  dictionary = st* "{" pairlist? tagend
+  pairlist = optionalnl* pair (~tagend nl pair)*
+  pair = st* (quoted_key | key) st* ":" st* value st*
+  disable_char = "~"
+  quote_char = "\\""
+  esc_char = "\\\\"
+  esc_quote_char = esc_char quote_char
+  quoted_key_char = ~(quote_char | esc_quote_char | nl) any
+  quoted_key = disable_char? quote_char (esc_quote_char | quoted_key_char)* quote_char
+  key = keychar*
+  value = list | multilinetextblock | valuechar*
+
+  // List
+  list = st* "[" nl+ listitems? st* nl+ st* "]"
+  listitems = listitem (nl+ listitem)*
+  listitem = st+ (alnum | "_" | "-")+ st*
+
+  // Text Blocks
+  textblock = textline (~tagend nl textline)*
+  textline = textchar*
+  textchar = ~nl any
+
+  // Response content
+  responsecontent = responseheaders | responsestatus | responsebodyblock
+  responseheaders = "headers" st* ":" st* dictionary nl*
+  responsestatus = "status" st* ":" st* dictionary nl*
+  responsebodyblock = "body" st* ":" st* "{" nl* responsebodyfields tagend
+  responsebodyfields = (responsebodytype | responsebodycontentvalue)*
+  responsebodytype = st* "type" st* ":" st* valuechar* nl*
+  responsebodycontentvalue = st* "content" st* ":" st* multilinetextblock
+}`);
+
+const mapPairListToKeyValPairs = (pairList = [], parseEnabled = true) => {
+  if (!pairList.length) {
+    return [];
+  }
+  return _.map(pairList[0], (pair) => {
+    let name = _.keys(pair)[0];
+    let value = pair[name];
+
+    if (!parseEnabled) {
+      return {
+        name,
+        value
+      };
+    }
+
+    let enabled = true;
+    if (name && name.length && name.charAt(0) === '~') {
+      name = name.slice(1);
+      enabled = false;
+    }
+
+    return {
+      name,
+      value,
+      enabled
+    };
+  });
+};
+
+const sem = responseGrammar.createSemantics().addAttribute('ast', {
+  ResponseFile(tags) {
+    if (!tags || !tags.ast || !tags.ast.length) {
+      return {};
+    }
+    // Filter out empty items and merge the results
+    const validItems = tags.ast.filter((item) => item && Object.keys(item).length > 0);
+    return _.reduce(validItems, (result, item) => {
+      return _.merge(result, item);
+    }, {});
+  },
+  dictionary(_1, _2, pairlist, _3) {
+    return pairlist.ast;
+  },
+  pairlist(_1, pair, _2, rest) {
+    return [pair.ast, ...rest.ast];
+  },
+  pair(_1, key, _2, _3, _4, value, _5) {
+    let res = {};
+    res[key.ast] = value.ast ? value.ast.trim() : '';
+    return res;
+  },
+  esc_quote_char(_1, quote) {
+    return quote.sourceString;
+  },
+  quoted_key(disabled, _1, chars, _2) {
+    return (disabled ? disabled.sourceString : '') + chars.ast.join('');
+  },
+  key(chars) {
+    return chars.sourceString ? chars.sourceString.trim() : '';
+  },
+  value(chars) {
+    if (chars.ctorName === 'list') {
+      return chars.ast;
+    }
+    try {
+      let isMultiline = chars.sourceString?.startsWith(`'''`) && chars.sourceString?.endsWith(`'''`);
+      if (isMultiline) {
+        const multilineString = chars.sourceString?.replace(/^'''|'''$/g, '');
+        return multilineString
+          .split('\n')
+          .map((line) => line.slice(4))
+          .join('\n');
+      }
+      return chars.sourceString ?? '';
+    } catch (err) {
+      console.error(err);
+    }
+    return chars.sourceString ?? '';
+  },
+  textblock(line, _1, rest) {
+    return [line.ast, ...rest.ast].join('\n');
+  },
+  textline(chars) {
+    return chars.sourceString;
+  },
+  textchar(char) {
+    return char.sourceString;
+  },
+  nl(_1, _2) {
+    return '';
+  },
+  st(_) {
+    return '';
+  },
+  tagend(_1, _2) {
+    return '';
+  },
+  _terminal() {
+    return this.sourceString;
+  },
+  multilinetextblockdelimiter(_) {
+    return '';
+  },
+  multilinetextblock(_1, content, _2) {
+    // Join all the content between the triple quotes and trim it
+    return content.sourceString.trim();
+  },
+  _iter(...elements) {
+    return elements.map((e) => e.ast);
+  },
+
+  responsecontent(content) {
+    return content.ast;
+  },
+  responseheaders(_1, _2, _3, _4, dictionary, _6) {
+    return { headers: mapPairListToKeyValPairs(dictionary.ast) };
+  },
+  responsestatus(_1, _2, _3, _4, dictionary, _6) {
+    const statusPairs = mapPairListToKeyValPairs(dictionary.ast, false);
+    return {
+      status: statusPairs.find((p) => p.name === 'code')?.value || 200,
+      statusText: statusPairs.find((p) => p.name === 'text')?.value || 'OK'
+    };
+  },
+  responsebodyblock(_1, _2, _3, _4, _5, _6, responsebodyfields, _8) {
+    // Extract type and content from the array structure
+    // responsebodyfields.ast is an array like [{ type: 'json' }, { content: "'''..." }]
+    const bodyData = {};
+
+    if (Array.isArray(responsebodyfields.ast)) {
+      responsebodyfields.ast.forEach((field) => {
+        if (field && typeof field === 'object') {
+          if (field.type !== undefined) {
+            bodyData.type = field.type;
+          }
+          if (field.content !== undefined) {
+            bodyData.content = field.content;
+          }
+        }
+      });
+    }
+
+    return {
+      body: bodyData
+    };
+  },
+  responsebodytype(_1, _2, _3, _4, _5, value, _7) {
+    return {
+      type: value.sourceString ? value.sourceString.trim() : ''
+    };
+  },
+  responsebodycontentvalue(_1, _2, _3, _4, _5, multilinetextblock) {
+    const multilineString = multilinetextblock.sourceString?.replace(/^'''|'''$/g, '').replace(/  $/g, '').replace(/^\n|\n$/g, '');
+
+    return {
+      content: outdentString(multilineString ?? '', 4)
+    };
+  }
+});
+
+const parseResponse = (input) => {
+  const match = responseGrammar.match(input);
+
+  if (match.succeeded()) {
+    let ast = sem(match).ast;
+    return ast;
+  } else {
+    console.log('match failed', match);
+    throw new Error(match.message);
+  }
+};
+
+module.exports = parseResponse;
diff --git a/packages/bruno-lang/v2/src/jsonToBru.js b/packages/bruno-lang/v2/src/jsonToBru.js
index f7770700fa..9258be11bc 100644
--- a/packages/bruno-lang/v2/src/jsonToBru.js
+++ b/packages/bruno-lang/v2/src/jsonToBru.js
@@ -1,6 +1,7 @@
 const _ = require('lodash');
 
 const { indentString, getValueString } = require('./utils');
+const jsonToExampleBru = require('./example/jsonToBru');
 
 const enabled = (items = [], key = "enabled") => items.filter((item) => item[key]);
 const disabled = (items = [], key = "enabled") => items.filter((item) => !item[key]);
@@ -17,7 +18,7 @@ const stripLastLine = (text) => {
 };
 
 const jsonToBru = (json) => {
-  const { meta, http, grpc, ws, params, headers, metadata, auth, body, script, tests, vars, assertions, settings, docs, examples, response } = json;
+  const { meta, http, grpc, ws, params, headers, metadata, auth, body, script, tests, vars, assertions, settings, docs, examples } = json;
 
   let bru = '';
 
@@ -749,35 +750,9 @@ ${indentString(docs)}
 `;
   }
 
-  // Handle response blocks
-  if (response) {
-    // Response headers
-    if (response.headers && response.headers.length) {
-      bru += 'response:headers {';
-      // Response headers don't need enable/disable functionality - they're just data from server
-      bru += `\n${indentString(response.headers
-        .map((item) => `${quoteKey(item.name)}: ${item.value}`)
-        .join('\n'))}`;
-      bru += '\n}\n\n';
-    }
-
-    // Response status
-    if (response.status) {
-      bru += 'response:status {\n';
-      for (const key in response.status) {
-        bru += `  ${key}: ${response.status[key]}\n`;
-      }
-      bru += '}\n\n';
-    }
-
-    if (response.body) {
-      bru += `response:body {\n${indentString(response.body)}\n}\n\n`;
-    }
-  }
-
   if (examples && examples.length) {
     examples.forEach((example) => {
-      const bruExample = jsonToBru(example);
+      const bruExample = jsonToExampleBru(example);
       bru += `example {\n${indentString(bruExample)}\n}\n\n`;
     });
   }
@@ -786,5 +761,6 @@ ${indentString(docs)}
 };
 
 module.exports = jsonToBru;
+module.exports.jsonToExampleBru = jsonToExampleBru;
 
 // alternative to writing the below code to avoid undefined
diff --git a/packages/bruno-lang/v2/src/utils.js b/packages/bruno-lang/v2/src/utils.js
index 9c76a05949..8dee48999b 100644
--- a/packages/bruno-lang/v2/src/utils.js
+++ b/packages/bruno-lang/v2/src/utils.js
@@ -19,14 +19,15 @@ const indentString = (str) => {
     .join('\n');
 };
 
-const outdentString = (str) => {
+const outdentString = (str, spaces = 2) => {
   if (!str || !str.length) {
     return str || '';
   }
 
+  const spacesRegex = new RegExp(`^ {${spaces}}`);
   return str
     .split(/\r\n|\r|\n/)
-    .map((line) => line.replace(/^  /, ''))
+    .map((line) => line.replace(spacesRegex, ''))
     .join('\n');
 };
 
diff --git a/packages/bruno-lang/v2/tests/examples/examples.spec.js b/packages/bruno-lang/v2/tests/examples/examples.spec.js
index 3449a2bcf8..6181390b09 100644
--- a/packages/bruno-lang/v2/tests/examples/examples.spec.js
+++ b/packages/bruno-lang/v2/tests/examples/examples.spec.js
@@ -6,15 +6,15 @@ const jsonToBru = require('../../src/jsonToBru');
 describe('Examples functionality', () => {
   describe('Fixture-based tests', () => {
     it('should parse examples-simple.bru correctly', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'examples-simple.bru'), 'utf8');
-      const expected = require('./fixtures/examples-simple.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'examples-simple.bru'), 'utf8');
+      const expected = require('./fixtures/json/examples-simple.json');
       const output = bruToJson(input);
 
       expect(output).toEqual(expected);
     });
 
     it('should parse examples-complex.bru correctly', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'examples-complex.bru'), 'utf8');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'examples-complex.bru'), 'utf8');
       const output = bruToJson(input);
 
       // Basic structure validation
@@ -26,11 +26,10 @@ describe('Examples functionality', () => {
 
       // Check each example has the expected structure
       output.examples.forEach((example, index) => {
-        expect(example.meta).toBeDefined();
-        expect(example.http).toBeDefined();
-        expect(example.headers).toBeDefined();
-        expect(example.auth).toBeDefined();
-        expect(example.body).toBeDefined();
+        expect(example.name).toBeDefined();
+        expect(example.description).toBeDefined();
+        expect(example.request).toBeDefined();
+        expect(example.request.url).toBeDefined();
         if (example.response) {
           expect(example.response.status).toBeDefined();
           expect(example.response.body).toBeDefined();
@@ -39,86 +38,68 @@ describe('Examples functionality', () => {
 
       // Check specific examples
       const jsonExample = output.examples[0];
-      expect(jsonExample.meta.name).toBe('JSON API Example');
-      expect(jsonExample.http.method).toBe('post');
-      expect(jsonExample.auth.basic).toBeDefined();
-      expect(jsonExample.body.json).toContain('"format": "json"');
+      expect(jsonExample.name).toBe('JSON API Example');
+      expect(jsonExample.request.url).toBeDefined();
+      if (jsonExample.request.body && jsonExample.request.body.json) {
+        expect(jsonExample.request.body.json).toContain('"format": "json"');
+      }
 
       const xmlExample = output.examples[1];
-      expect(xmlExample.meta.name).toBe('XML API Example');
-      expect(xmlExample.auth.bearer).toBeDefined();
-      expect(xmlExample.body.xml).toContain('<format>xml</format>');
+      expect(xmlExample.name).toBe('XML API Example');
+      if (xmlExample.request.body && xmlExample.request.body.xml) {
+        expect(xmlExample.request.body.xml).toContain('<format>xml</format>');
+      }
 
       const textExample = output.examples[2];
-      expect(textExample.meta.name).toBe('Text API Example');
-      expect(textExample.auth.apikey).toBeDefined();
+      expect(textExample.name).toBe('Text API Example');
     });
   });
 
   describe('Basic examples parsing', () => {
     it('should parse a single example block', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-single-example.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-single-example.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'bruToJson-single-example.bru'), 'utf8');
+      const expected = require('./fixtures/json/bruToJson-single-example.json');
       const output = bruToJson(input);
 
       expect(output).toEqual(expected);
     });
 
     it('should parse multiple example blocks', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-multiple-examples.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-multiple-examples.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'bruToJson-multiple-examples.bru'), 'utf8');
+      const expected = require('./fixtures/json/bruToJson-multiple-examples.json');
       const output = bruToJson(input);
 
       expect(output).toEqual(expected);
     });
 
     it('should handle examples with response blocks', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-response-example.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-response-example.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'bruToJson-response-example.bru'), 'utf8');
+      const expected = require('./fixtures/json/bruToJson-response-example.json');
       const output = bruToJson(input);
-
       expect(output).toEqual(expected);
     });
   });
 
   describe('Examples with different body types', () => {
     it('should handle examples with JSON body', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-json-body.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-json-body.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'bruToJson-json-body.bru'), 'utf8');
+      const expected = require('./fixtures/json/bruToJson-json-body.json');
       const output = bruToJson(input);
 
       expect(output).toEqual(expected);
     });
 
     it('should handle examples with XML body', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-xml-body.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-xml-body.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'bruToJson-xml-body.bru'), 'utf8');
+      const expected = require('./fixtures/json/bruToJson-xml-body.json');
       const output = bruToJson(input);
 
       expect(output).toEqual(expected);
     });
 
     it('should handle examples with text body', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-text-body.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-text-body.json');
-      const output = bruToJson(input);
-
-      expect(output).toEqual(expected);
-    });
-  });
-
-  describe('Examples with authentication', () => {
-    it('should handle examples with basic auth', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-basic-auth.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-basic-auth.json');
-      const output = bruToJson(input);
-
-      expect(output).toEqual(expected);
-    });
-
-    it('should handle examples with bearer token', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-bearer-auth.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-bearer-auth.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'bruToJson-text-body.bru'), 'utf8');
+      const expected = require('./fixtures/json/bruToJson-text-body.json');
       const output = bruToJson(input);
 
       expect(output).toEqual(expected);
@@ -127,197 +108,55 @@ describe('Examples functionality', () => {
 
   describe('Edge cases', () => {
     it('should handle empty example blocks', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-empty-example.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-empty-example.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'bruToJson-empty-example.bru'), 'utf8');
+      const expected = require('./fixtures/json/bruToJson-empty-example.json');
       const output = bruToJson(input);
 
       expect(output).toEqual(expected);
     });
 
-    it('should handle malformed example content gracefully', () => {
-      const input = `
-meta {
-  name: Test API
-  type: http
-}
-
-example {
-  meta {
-    name: Malformed Example
-    type: http
-  }
-  
-  invalid-syntax {
-    this is not valid bru syntax
-  }
-}`;
-
-      const result = bruToJson(input);
-
-      expect(result.examples).toBeDefined();
-      expect(result.examples).toHaveLength(1);
-      // Should handle malformed content gracefully - may contain error
-      expect(result.examples[0]).toBeDefined();
-      // Either parsed successfully or contains error
-      expect(result.examples[0].error || result.examples[0].meta).toBeDefined();
-    });
-
     it('should work without any examples', () => {
-      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bruToJson-no-examples.bru'), 'utf8');
-      const expected = require('./fixtures/bruToJson-no-examples.json');
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'bruToJson-no-examples.bru'), 'utf8');
+      const expected = require('./fixtures/json/bruToJson-no-examples.json');
       const output = bruToJson(input);
 
       expect(output).toEqual(expected);
     });
   });
 
-  describe('Complex examples', () => {
-    it('should handle examples with all features', () => {
-      const input = `
-meta {
-  name: Complex API
-  type: http
-}
-
-get {
-  url: https://api.example.com/test
-}
-
-example {
-  meta {
-    name: Complete Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/users
-  }
-  
-  headers {
-    content-type: application/json
-    authorization: Bearer token123
-  }
-  
-  params:query {
-    page: 1
-    limit: 10
-  }
-  
-  auth:oauth2 {
-    grant_type: client_credentials
-    client_id: test-client
-    client_secret: test-secret
-    access_token_url: https://auth.example.com/token
-  }
-  
-  body:json {
-    {
-      "name": "John Doe",
-      "email": "john@example.com"
-    }
-  }
-  
-  script:pre-request {
-    console.log('Making request to create user');
-  }
-  
-  script:post-response {
-    console.log('User created successfully');
-  }
-  
-  response:headers {
-    content-type: application/json
-    location: https://api.example.com/users/123
-  }
-  
-  response:status {
-    code: 201
-  }
-  
-  response:body {
-    {
-      "id": 123,
-      "name": "John Doe",
-      "email": "john@example.com",
-      "created_at": "2023-01-15T10:30:00Z"
-    }
-  }
-}`;
-
-      const result = bruToJson(input);
-
-      expect(result.examples).toBeDefined();
-      expect(result.examples).toHaveLength(1);
-
-      const example = result.examples[0];
-
-      // Check all features are present
-      expect(example.meta).toBeDefined();
-      expect(example.http).toBeDefined();
-      expect(example.headers).toBeDefined();
-      expect(example.params).toBeDefined();
-      expect(example.auth).toBeDefined();
-      expect(example.body).toBeDefined();
-      expect(example.script).toBeDefined();
-      expect(example.response).toBeDefined();
-
-      // Check specific values
-      expect(example.meta.name).toBe('Complete Example');
-      expect(example.http.method).toBe('post');
-      expect(example.headers).toHaveLength(2);
-      expect(example.params).toHaveLength(2);
-      expect(example.auth.oauth2).toBeDefined();
-      expect(example.body.json).toContain('"name": "John Doe"');
-      expect(example.script.req).toContain('Making request');
-      expect(example.script.res).toContain('User created successfully');
-      expect(example.response.status.code).toBe('201');
-      expect(example.response.body).toContain('"id": 123');
-    });
-  });
-
   describe('jsonToBru conversion', () => {
     it('should convert JSON with examples to BRU format', () => {
-      const jsonInput = require('./fixtures/jsonToBru-simple.json');
-      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-simple.bru'), 'utf8');
+      const jsonInput = require('./fixtures/json/jsonToBru-simple.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'jsonToBru-simple.bru'), 'utf8');
       const output = jsonToBru(jsonInput);
-
       expect(output).toEqual(expected);
     });
 
     it('should handle multiple examples correctly', () => {
-      const jsonInput = require('./fixtures/jsonToBru-multiple.json');
-      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-multiple.bru'), 'utf8');
+      const jsonInput = require('./fixtures/json/jsonToBru-multiple.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'jsonToBru-multiple.bru'), 'utf8');
       const output = jsonToBru(jsonInput);
 
       expect(output).toEqual(expected);
     });
 
     it('should handle examples with response blocks', () => {
-      const jsonInput = require('./fixtures/jsonToBru-response.json');
-      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-response.bru'), 'utf8');
-      const output = jsonToBru(jsonInput);
-
-      expect(output).toEqual(expected);
-    });
-
-    it('should handle examples with authentication', () => {
-      const jsonInput = require('./fixtures/jsonToBru-auth.json');
-      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-auth.bru'), 'utf8');
+      const jsonInput = require('./fixtures/json/jsonToBru-response.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'jsonToBru-response.bru'), 'utf8');
       const output = jsonToBru(jsonInput);
-
       expect(output).toEqual(expected);
     });
 
     it('should handle examples with different body types', () => {
-      const jsonInput = require('./fixtures/jsonToBru-bodytypes.json');
-      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'jsonToBru-bodytypes.bru'), 'utf8');
+      const jsonInput = require('./fixtures/json/jsonToBru-bodytypes.json');
+      const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'jsonToBru-bodytypes.bru'), 'utf8');
       const output = jsonToBru(jsonInput);
 
       expect(output).toEqual(expected);
     });
 
     it('should handle round-trip conversion correctly', () => {
-      const originalBru = fs.readFileSync(path.join(__dirname, 'fixtures', 'examples-simple.bru'), 'utf8');
+      const originalBru = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'examples-simple.bru'), 'utf8');
       const jsonFromBru = bruToJson(originalBru);
       const bruFromJson = jsonToBru(jsonFromBru);
       const jsonFromBruAgain = bruToJson(bruFromJson);
@@ -326,8 +165,8 @@ example {
       expect(jsonFromBruAgain.examples).toBeDefined();
       expect(Array.isArray(jsonFromBruAgain.examples)).toBe(true);
       expect(jsonFromBruAgain.examples).toHaveLength(2);
-      expect(jsonFromBruAgain.examples[0].meta.name).toBe('Get User by ID');
-      expect(jsonFromBruAgain.examples[1].meta.name).toBe('Create New User');
+      expect(jsonFromBruAgain.examples[0].name).toBe('Get User by ID');
+      expect(jsonFromBruAgain.examples[1].name).toBe('Create New User');
     });
 
     it('should handle empty examples array', () => {
@@ -358,7 +197,7 @@ get {
       expect(output).toEqual(expected);
     });
 
-    it('should handle examples without meta block', () => {
+    it('should handle examples with minimal structure', () => {
       const jsonInput = {
         meta: {
           name: 'Test API',
@@ -370,17 +209,11 @@ get {
         },
         examples: [
           {
-            http: {
-              method: 'post',
+            name: 'Example Request',
+            description: 'A simple example',
+            request: {
               url: 'https://api.example.com/example'
-            },
-            headers: [
-              {
-                name: 'authorization',
-                value: 'Bearer token123',
-                enabled: true
-              }
-            ]
+            }
           }
         ]
       };
@@ -395,14 +228,12 @@ get {
 }
 
 example {
-  post {
-    url: https://api.example.com/example
-  }
+  name: Example Request
+  description: A simple example
   
-  headers {
-    authorization: Bearer token123
+  request: {
+    url: https://api.example.com/example
   }
-  
 }
 `;
 
@@ -411,4 +242,68 @@ example {
       expect(output).toEqual(expected);
     });
   });
+
+  describe('Complex examples with auth', () => {
+    it('should parse complex-with-auth.bru correctly', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'complex-with-auth.bru'), 'utf8');
+      const expected = require('./fixtures/json/complex-with-auth.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should parse form-data-complex.bru correctly', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'form-data-complex.bru'), 'utf8');
+      const expected = require('./fixtures/json/form-data-complex.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should parse multiple-examples-variations.bru correctly', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'multiple-examples-variations.bru'), 'utf8');
+      const expected = require('./fixtures/json/multiple-examples-variations.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    it('should parse oauth2-examples.bru correctly', () => {
+      const input = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'oauth2-examples.bru'), 'utf8');
+      const expected = require('./fixtures/json/oauth2-examples.json');
+      const output = bruToJson(input);
+
+      expect(output).toEqual(expected);
+    });
+
+    describe('jsonToBru conversion for complex fixtures', () => {
+      it('should convert complex-with-auth.json to BRU format and preserve examples', () => {
+        const jsonInput = require('./fixtures/json/complex-with-auth.json');
+        const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'complex-with-auth.bru'), 'utf8');
+        const output = jsonToBru(jsonInput);
+        expect(output).toEqual(expected);
+      });
+
+      it('should convert form-data-complex.json to BRU format and preserve examples', () => {
+        const jsonInput = require('./fixtures/json/form-data-complex.json');
+        const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'form-data-complex.bru'), 'utf8');
+        const output = jsonToBru(jsonInput);
+        expect(output).toEqual(expected);
+      });
+
+      it('should convert multiple-examples-variations.json to BRU format and preserve examples', () => {
+        const jsonInput = require('./fixtures/json/multiple-examples-variations.json');
+        const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'multiple-examples-variations.bru'), 'utf8');
+        const output = jsonToBru(jsonInput);
+        expect(output).toEqual(expected);
+      });
+
+      it('should convert oauth2-examples.json to BRU format and preserve examples', () => {
+        const jsonInput = require('./fixtures/json/oauth2-examples.json');
+        const expected = fs.readFileSync(path.join(__dirname, 'fixtures', 'bru', 'oauth2-examples.bru'), 'utf8');
+        const output = jsonToBru(jsonInput);
+        expect(output).toEqual(expected);
+      });
+    });
+  });
 });
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-empty-example.bru
similarity index 100%
rename from packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.bru
rename to packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-empty-example.bru
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-json-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-json-body.bru
new file mode 100644
index 0000000000..bb6be80537
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-json-body.bru
@@ -0,0 +1,21 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  name: JSON Example
+  description: An example with JSON body
+  
+  request: {
+    url: https://api.example.com/data
+    method: post
+    mode: json
+    body:json: {
+      {
+        "name": "Test",
+        "value": 123
+      }
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-multiple-examples.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-multiple-examples.bru
new file mode 100644
index 0000000000..ff4b28f645
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-multiple-examples.bru
@@ -0,0 +1,35 @@
+meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  name: Example 1
+  description: First example
+
+  request: {
+    url: https://api.example.com/example1
+    method: get
+    mode: none
+  }
+}
+
+example {
+  name: Example 2
+  description: Second example with JSON body
+
+  request: {
+    url: https://api.example.com/example2
+    method: get
+    mode: json
+    body:json: {
+      {
+        "data": "test"
+      }
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-no-examples.bru
similarity index 100%
rename from packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.bru
rename to packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-no-examples.bru
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-response-example.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-response-example.bru
new file mode 100644
index 0000000000..c65b027adc
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-response-example.bru
@@ -0,0 +1,40 @@
+meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  name: Example with Response
+  description: An example with response data
+  
+  request: {
+    url: https://api.example.com/users/123
+    method: get
+    mode: none
+  }
+
+  response: {
+    headers: {
+      content-type: application/json
+    }
+
+    status: {
+      code: 200
+      text: OK
+    }
+    
+    body: {
+      type: json
+      content: '''
+        {
+          "id": 123,
+          "name": "John Doe"
+        }
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-single-example.bru
similarity index 55%
rename from packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.bru
rename to packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-single-example.bru
index 0f043b0042..793da3fd32 100644
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.bru
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-single-example.bru
@@ -8,16 +8,12 @@ get {
 }
 
 example {
-  meta {
-    name: Example Request
-    type: http
-  }
+  name: Example Request
+  description: A simple example request
   
-  get {
+  request: {
     url: https://api.example.com/example
-  }
-  
-  headers {
-    authorization: Bearer token123
+    method: get
+    mode: none
   }
 }
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-text-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-text-body.bru
new file mode 100644
index 0000000000..a3f09555ed
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-text-body.bru
@@ -0,0 +1,19 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  name: Text Example
+  description: An example with text body
+  
+  request: {
+    url: https://api.example.com/data
+    method: post
+    mode: text
+    body:text: {
+      Plain text data
+      with multiple lines
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-xml-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-xml-body.bru
new file mode 100644
index 0000000000..a92818cbe2
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/bruToJson-xml-body.bru
@@ -0,0 +1,22 @@
+meta {
+  name: Test API
+  type: http
+}
+
+example {
+  name: XML Example
+  description: An example with XML body
+
+  request: {
+    url: https://api.example.com/data
+    method: post
+    mode: xml
+    body:xml: {
+      <?xml version="1.0" encoding="UTF-8"?>
+      <data>
+        <name>Test</name>
+        <value>123</value>
+      </data>
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/complex-with-auth.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/complex-with-auth.bru
new file mode 100644
index 0000000000..a2a12d0bed
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/complex-with-auth.bru
@@ -0,0 +1,267 @@
+meta {
+  name: Complex API with Auth
+  type: http
+  seq: 1
+}
+
+post {
+  url: https://api.example.com/users
+  body: json
+  auth: bearer
+}
+
+params:query {
+  include: details
+  format: json
+}
+
+params:path {
+  id: 123
+  status: active
+}
+
+headers {
+  content-type: application/json
+  x-api-key: my-secret-key
+  x-request-id: {{$uuid}}
+}
+
+auth:basic {
+  username: admin
+  password: secret123
+}
+
+auth:bearer {
+  token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHluKJe2vncyz4h4SH6FSS7YOKIx
+}
+
+auth:apikey {
+  key: x-api-key
+  value: api-secret-key-12345
+  placement: header
+}
+
+body:json {
+  {
+    "username": "johndoe",
+    "email": "john@example.com",
+    "profile": {
+      "firstName": "John",
+      "lastName": "Doe",
+      "age": 30
+    },
+    "preferences": {
+      "theme": "dark",
+      "notifications": true
+    },
+    "tags": ["admin", "user", "verified"]
+  }
+}
+
+vars:pre-request {
+  user_id: 12345
+  environment: production
+}
+
+vars:post-response {
+  response_id: {{res.id}}
+  processed_at: {{$timestamp}}
+}
+
+script:pre-request {
+  const timestamp = Date.now();
+  bru.setVar("request_timestamp", timestamp);
+  bru.setVar("signature", crypto.createHash('md5').update(timestamp.toString()).digest('hex'));
+}
+
+tests {
+  test("Response should be 201", function() {
+    expect(res.getStatus()).to.eql(201);
+  });
+  
+  test("Response should have user data", function() {
+    const body = res.getBody();
+    expect(body.username).to.be.ok;
+    expect(body.email).to.be.ok;
+  });
+}
+
+docs {
+  This endpoint creates a new user account.
+  Requires authentication via Bearer token or API key.
+  Supports nested JSON structures with arrays.
+}
+
+example {
+  name: Basic User Creation
+  description: Creates a new user with minimal required fields
+  
+  request: {
+    url: https://api.example.com/users
+    method: post
+    mode: json
+    headers: {
+      authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
+      content-type: "application/json"
+    }
+  
+    body:json: {
+      {
+        "username": "newuser",
+        "email": "newuser@example.com",
+        "password": "SecurePass123!"
+      }
+    }
+  }
+  
+  response: {
+    status: {
+      code: 201
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "id": 100,
+          "username": "newuser",
+          "email": "newuser@example.com",
+          "created_at": "2024-01-15T10:30:00Z",
+          "status": "active"
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: Advanced User with Profile
+  description: Creates a user with complete profile information and nested data
+  
+  request: {
+    url: https://api.example.com/users
+    method: post
+    mode: json
+    headers: {
+      authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
+      content-type: "application/json",
+      x-api-key: "advanced-api-key-45678"
+    }
+  
+    body:json: {
+      {
+        "username": "developer",
+        "email": "dev@example.com",
+        "password": "DevPass2024!",
+        "profile": {
+          "firstName": "Jane",
+          "lastName": "Developer",
+          "bio": "Software engineer passionate about APIs",
+          "location": {
+            "city": "San Francisco",
+            "country": "USA",
+            "timezone": "America/Los_Angeles"
+          },
+          "social": {
+            "github": "jandeveloper",
+            "twitter": "@jane_dev"
+          }
+        },
+        "skills": ["JavaScript", "Node.js", "React", "API Design"],
+        "experience": 5,
+        "preferences": {
+          "theme": "dark",
+          "language": "en",
+          "notifications": {
+            "email": true,
+            "push": true,
+            "sms": false
+          }
+        }
+      }
+    }
+  }
+  
+  response: {
+    status: {
+      code: 201
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "id": 101,
+          "username": "developer",
+          "email": "dev@example.com",
+          "profile": {
+            "firstName": "Jane",
+            "lastName": "Developer",
+            "bio": "Software engineer passionate about APIs",
+            "location": {
+              "city": "San Francisco",
+              "country": "USA",
+              "timezone": "America/Los_Angeles"
+            }
+          },
+          "skills": ["JavaScript", "Node.js", "React", "API Design"],
+          "experience": 5,
+          "created_at": "2024-01-15T12:45:30Z",
+          "status": "active",
+          "verified": false
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: XML Data Example
+  description: Example with XML format and complex structure
+  
+  request: {
+    url: https://api.example.com/users/xml
+    method: post
+    mode: xml
+    headers: {
+      content-type: "application/xml",
+      authorization: "Basic YWRtaW46cGFzc3dvcmQ="
+    }
+  
+    body:xml: {
+      <?xml version="1.0" encoding="UTF-8"?>
+      <user>
+        <username>xmluser</username>
+        <email>xml@example.com</email>
+        <profile>
+          <firstName>XML</firstName>
+          <lastName>User</lastName>
+        </profile>
+      </user>
+    }
+  }
+  
+  response: {
+    status: {
+      code: 201
+      text: OK
+    }
+  
+    body: {
+      type: xml
+      content: '''
+        <?xml version="1.0" encoding="UTF-8"?>
+        <response>
+          <id>102</id>
+          <status>created</status>
+          <user>
+            <username>xmluser</username>
+            <email>xml@example.com</email>
+          </user>
+        </response>
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/examples-complex.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/examples-complex.bru
new file mode 100644
index 0000000000..48fa15fb9f
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/examples-complex.bru
@@ -0,0 +1,123 @@
+meta {
+  name: Multi-format API
+  type: http
+}
+
+get {
+  url: https://api.example.com/data
+}
+
+headers {
+  content-type: application/json
+}
+
+body:json {
+  {
+    "message": "API supports multiple formats"
+  }
+}
+
+example {
+  name: JSON API Example
+  description: An example using JSON format
+
+  request: {
+    url: https://api.example.com/json
+    method: post
+    mode: json
+    body:json: {
+      {
+        "format": "json",
+        "data": {
+          "name": "JSON Example",
+          "value": 123
+        }
+      }
+    }
+  }
+
+  response: {
+    status: {
+      code: 201
+    }
+
+    body: {
+      type: json
+      content: '''
+        {
+          "id": 1,
+          "format": "json",
+          "created": true
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: XML API Example
+  description: An example using XML format
+
+  request: {
+    url: https://api.example.com/xml
+    method: post
+    mode: xml
+    body:xml: {
+      <?xml version="1.0" encoding="UTF-8"?>
+      <data>
+        <format>xml</format>
+        <name>XML Example</name>
+        <value>456</value>
+      </data>
+    }
+  }
+  response: {
+    status: {
+      code: 201
+    }
+
+    body: {
+      type: xml
+      content: '''
+        <?xml version="1.0" encoding="UTF-8"?>
+        <response>
+          <id>2</id>
+          <format>xml</format>
+          <created>true</created>
+        </response>
+      '''
+    }
+  }
+}
+
+example {
+  name: Text API Example
+  description: An example using text format
+
+  request: {
+    url: https://api.example.com/text
+    method: post
+    mode: text
+    body:text: {
+      Plain text data
+      Format: text
+      Name: Text Example
+      Value: 789
+    }
+  }
+
+  response: {
+    status: {
+      code: 201
+    }
+    
+    body: {
+      type: text
+      content: '''
+        Success: true
+        Format: text
+        ID: 3
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/examples-simple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/examples-simple.bru
new file mode 100644
index 0000000000..06583c8242
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/examples-simple.bru
@@ -0,0 +1,71 @@
+meta {
+  name: User API Documentation
+  type: http
+}
+
+get {
+  url: https://api.example.com/users
+}
+
+example {
+  name: Get User by ID
+  description: Example of getting a user by ID
+  
+  request: {
+    url: https://api.example.com/users/123
+    method: get
+    mode: none
+  }
+
+  response: {
+    status: {
+      code: 200
+    }
+
+    body: {
+      type: json
+      content: '''
+        {
+          "id": 123,
+          "name": "John Doe",
+          "email": "john@example.com"
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: Create New User
+  description: Example of creating a new user
+  
+  request: {
+    url: https://api.example.com/users
+    method: post
+    mode: json
+    body:json: {
+      {
+        "name": "New User",
+        "email": "newuser@example.com"
+      }
+    }
+  }
+
+  response: {
+    status: {
+      code: 201
+    }
+    
+    body: {
+      type: json
+      content: '''
+        {
+          "id": 456,
+          "name": "New User",
+          "email": "newuser@example.com",
+          "created_at": "2023-01-15T10:30:00Z"
+        }
+      '''
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/form-data-complex.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/form-data-complex.bru
new file mode 100644
index 0000000000..ecccfaa84f
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/form-data-complex.bru
@@ -0,0 +1,132 @@
+meta {
+  name: Form Data Complex
+  type: http
+  seq: 1
+}
+
+post {
+  url: https://api.example.com/upload
+  body: multipart-form
+  auth: bearer
+}
+
+headers {
+  content-type: multipart/form-data
+  x-upload-version: v2
+}
+
+auth:basic {
+  username: uploader
+  password: upload-secure-pass
+}
+
+auth:bearer {
+  token: upload-token-abc123xyz
+}
+
+body:multipart-form {
+  document: @file(/path/to/file.pdf)
+  title: Quarterly Report 2024
+  description: Detailed quarterly financial analysis
+  tags: finance,q4,2024
+}
+
+script:pre-request {
+  const file = bru.readFile("/path/to/file.pdf");
+  bru.setVar("file_size", file.length);
+  bru.setVar("file_name", "document.pdf");
+}
+
+example {
+  name: File Upload with Metadata
+  description: Upload a file with comprehensive metadata
+  
+  request: {
+    url: https://api.example.com/upload
+    method: post
+    mode: multipartForm
+    headers: {
+      authorization: "Bearer upload-token-abc123xyz",
+      x-upload-client: "bruno"
+    }
+  
+    body:multipart-form: {
+      document: @file(examples/sample.pdf)
+      title: Sample Document
+      description: This is a sample document for testing
+      category: documents
+      tags: sample,test,documents
+      metadata: {"author":"John Doe","version":"1.0","date":"2024-01-15"}
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "id": "file-12345",
+          "filename": "sample.pdf",
+          "size": 245760,
+          "uploaded_at": "2024-01-15T14:30:00Z",
+          "status": "completed",
+          "url": "https://cdn.example.com/files/sample.pdf",
+          "metadata": {
+            "title": "Sample Document",
+            "description": "This is a sample document for testing",
+            "category": "documents",
+            "tags": ["sample", "test", "documents"]
+          }
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: Form URL Encoded Data
+  description: Example with form-urlencoded body type
+  
+  request: {
+    url: https://api.example.com/submit
+    method: post
+    mode: formUrlEncoded
+    headers: {
+      content-type: "application/x-www-form-urlencoded",
+      authorization: "Basic dGVzdDp0ZXN0"
+    }
+  
+    body:form-urlencoded: {
+      username: testuser
+      password: testpass123
+      remember: true
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "success": true,
+          "message": "Form submitted successfully",
+          "session_id": "sess-abc123def456",
+          "user": {
+            "username": "testuser",
+            "authenticated": true
+          }
+        }
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-bodytypes.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-bodytypes.bru
new file mode 100644
index 0000000000..23c1af9a85
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-bodytypes.bru
@@ -0,0 +1,58 @@
+meta {
+  name: Body Types API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  name: JSON Body Example
+  description: An example with JSON body
+  
+  request: {
+    url: https://api.example.com/json
+    method: post
+    mode: json
+    body:json: {
+      {
+        "name": "Test",
+        "value": 123
+      }
+    }
+  }
+}
+
+example {
+  name: XML Body Example
+  description: An example with XML body
+  
+  request: {
+    url: https://api.example.com/xml
+    method: post
+    mode: xml
+    body:xml: {
+      <?xml version="1.0"?>
+      <data>
+        <name>Test</name>
+        <value>123</value>
+      </data>
+    }
+  }
+}
+
+example {
+  name: Text Body Example
+  description: An example with text body
+  
+  request: {
+    url: https://api.example.com/text
+    method: post
+    mode: text
+    body:text: {
+      Plain text data
+      with multiple lines
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-multiple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-multiple.bru
new file mode 100644
index 0000000000..559b681d71
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-multiple.bru
@@ -0,0 +1,35 @@
+meta {
+  name: Multi-Example API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  name: Example 1
+  description: First example
+  
+  request: {
+    url: https://api.example.com/example1
+    method: get
+    mode: none
+  }
+}
+
+example {
+  name: Example 2
+  description: Second example with JSON body
+  
+  request: {
+    url: https://api.example.com/example2
+    method: get
+    mode: json
+    body:json: {
+      {
+        "data": "test2"
+      }
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-response.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-response.bru
new file mode 100644
index 0000000000..aef99a8a1e
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-response.bru
@@ -0,0 +1,40 @@
+meta {
+  name: Response Example API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  name: Response Example
+  description: An example with response data
+  
+  request: {
+    url: https://api.example.com/users/123
+    method: get
+    mode: none
+  }
+  
+  response: {
+    headers: {
+      content-type: application/json
+    }
+  
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "id": 123,
+          "name": "John Doe"
+        }
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-simple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-simple.bru
new file mode 100644
index 0000000000..6b830fdd85
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/jsonToBru-simple.bru
@@ -0,0 +1,24 @@
+meta {
+  name: Test API
+  type: http
+}
+
+get {
+  url: https://api.example.com/test
+}
+
+example {
+  name: Example Request
+  description: A simple example request
+  
+  request: {
+    url: https://api.example.com/example
+    method: post
+    mode: json
+    body:json: {
+      {
+        "data": "test"
+      }
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/multiple-examples-variations.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/multiple-examples-variations.bru
new file mode 100644
index 0000000000..434a98a0cd
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/multiple-examples-variations.bru
@@ -0,0 +1,299 @@
+meta {
+  name: Multiple Examples Variations
+  type: http
+  seq: 1
+}
+
+get {
+  url: https://api.example.com/data
+}
+
+params:query {
+  page: 1
+  limit: 10
+  sort: desc
+}
+
+headers {
+  accept: application/json
+  x-client: bruno
+}
+
+auth:bearer {
+  token: token-for-multiple-examples
+}
+
+body:json {
+  {
+    "query": "search",
+    "filters": []
+  }
+}
+
+example {
+  name: Simple GET Request
+  description: Basic GET request with minimal data
+  
+  request: {
+    url: https://api.example.com/data?id=123
+    method: get
+    mode: none
+    headers: {
+      accept: "application/json"
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "id": 123,
+          "name": "Item",
+          "value": 42
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: Complex Search Query
+  description: GET request with complex query parameters
+  
+  request: {
+    url: https://api.example.com/data?page=1&limit=20&sort=name&order=asc&filter[status]=active&filter[type]=premium
+    method: get
+    mode: none
+    headers: {
+      accept: "application/json",
+      x-api-key: "search-key-789"
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "data": [
+            {
+              "id": 1,
+              "name": "Premium Item 1",
+              "status": "active",
+              "type": "premium"
+            },
+            {
+              "id": 2,
+              "name": "Premium Item 2",  
+              "status": "active",
+              "type": "premium"
+            }
+          ],
+          "pagination": {
+            "page": 1,
+            "limit": 20,
+            "total": 2
+          }
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: Text Response Example
+  description: Request returning plain text response
+  
+  request: {
+    url: https://api.example.com/data/text
+    method: get
+    mode: none
+    headers: {
+      accept: "text/plain"
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: text
+      content: '''
+        This is a plain text response
+        Multiple lines of content
+        No JSON formatting needed
+      '''
+    }
+  }
+}
+
+example {
+  name: XML Response with Nested Structure
+  description: Example with complex XML response
+  
+  request: {
+    url: https://api.example.com/data/xml
+    method: get
+    mode: none
+    headers: {
+      accept: "application/xml"
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: xml
+      content: '''
+        <?xml version="1.0" encoding="UTF-8"?>
+        <response>
+          <metadata>
+            <version>1.0</version>
+            <timestamp>2024-01-15T15:00:00Z</timestamp>
+          </metadata>
+          <data>
+            <item id="1">
+              <name>Item One</name>
+              <value>100</value>
+              <nested>
+                <attribute key="type">primary</attribute>
+              </nested>
+            </item>
+            <item id="2">
+              <name>Item Two</name>
+              <value>200</value>
+              <nested>
+                <attribute key="type">secondary</attribute>
+              </nested>
+            </item>
+          </data>
+        </response>
+      '''
+    }
+  }
+}
+
+example {
+  name: GraphQL Query Example
+  description: Example with GraphQL query body
+  
+  request: {
+    url: https://api.example.com/graphql
+    method: post
+    mode: graphql
+    headers: {
+      content-type: "application/json",
+      authorization: "Bearer graphql-token-xyz"
+    }
+  
+    body:graphql: {
+      query {
+        user(id: "123") {
+          id
+          name
+          email
+          posts {
+            title
+            content
+          }
+        }
+      }
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "data": {
+            "user": {
+              "id": "123",
+              "name": "John Doe",
+              "email": "john@example.com",
+              "posts": [
+                {
+                  "title": "First Post",
+                  "content": "This is my first blog post"
+                }
+              ]
+            }
+          }
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: SPARQL Query Example
+  description: Example with SPARQL query
+  
+  request: {
+    url: https://sparql.example.com/query
+    method: post
+    mode: sparql
+    headers: {
+      content-type: "application/sparql-query"
+    }
+  
+    body:sparql: {
+      SELECT ?name ?email WHERE {
+        ?person <http://example.org/name> ?name .
+        ?person <http://example.org/email> ?email .
+        ?person <http://example.org/age> ?age .
+        FILTER(?age > 18)
+      }
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "results": {
+            "bindings": [
+              {
+                "name": {
+                  "value": "John Doe"
+                },
+                "email": {
+                  "value": "john@example.com"
+                }
+              }
+            ]
+          }
+        }
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bru/oauth2-examples.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bru/oauth2-examples.bru
new file mode 100644
index 0000000000..1b0e77097e
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/bru/oauth2-examples.bru
@@ -0,0 +1,248 @@
+meta {
+  name: OAuth2 Examples API
+  type: http
+  seq: 1
+}
+
+post {
+  url: https://api.example.com/oauth/protected
+  body: json
+  auth: oauth2
+}
+
+headers {
+  content-type: application/json
+}
+
+auth:oauth2 {
+  grant_type: authorization_code
+  callback_url: https://api.example.com/oauth/callback
+  authorization_url: https://oauth.example.com/authorize
+  access_token_url: https://oauth.example.com/token
+  refresh_token_url: https://oauth.example.com/token
+  client_id: my-client-id
+  client_secret: my-client-secret
+  scope: read write
+  state: 
+  pkce: true
+  credentials_placement: header
+  credentials_id: authorization
+  token_placement: header
+  token_header_prefix: Bearer
+  auto_fetch_token: true
+  auto_refresh_token: true
+}
+
+body:json {
+  {
+    "action": "test",
+    "data": {
+      "message": "Protected resource access"
+    }
+  }
+}
+
+vars:pre-request {
+  oauth_state: {{$uuid}}
+  client_scopes: read,write,admin
+}
+
+script:pre-request {
+  const state = crypto.randomBytes(16).toString('hex');
+  bru.setVar('oauth_state', state);
+  bru.setVar('timestamp', Date.now());
+}
+
+tests {
+  test("Response should be 200", function() {
+    expect(res.getStatus()).to.eql(200);
+  });
+  
+  test("Should have user data in response", function() {
+    const body = res.getBody();
+    expect(body.access_token).to.be.ok;
+  });
+}
+
+docs {
+  This collection demonstrates OAuth2 authentication flows.
+  Supports authorization code, client credentials, and password grant types.
+  Examples show token refresh and protected resource access.
+}
+
+example {
+  name: OAuth2 Protected Resource
+  description: Example accessing resource protected with OAuth2 authorization code flow
+  
+  request: {
+    url: https://api.example.com/oauth/protected
+    method: post
+    mode: json
+    headers: {
+      authorization: "Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9",
+      content-type: "application/json"
+    }
+  
+    body:json: {
+      {
+        "action": "fetch",
+        "resource": "user_profile"
+      }
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "user": {
+            "id": "123",
+            "name": "John Doe",
+            "email": "john@example.com",
+            "scopes": ["read", "write"]
+          },
+          "token": {
+            "access_token": "access_token_abc123",
+            "expires_in": 3600,
+            "token_type": "Bearer"
+          }
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: OAuth2 Token Refresh
+  description: Example demonstrating OAuth2 token refresh flow
+  
+  request: {
+    url: https://api.example.com/oauth/token
+    method: post
+    mode: json
+    headers: {
+      content-type: "application/json",
+      accept: "application/json"
+    }
+  
+    body:json: {
+      {
+        "grant_type": "refresh_token",
+        "refresh_token": "refresh_token_xyz789",
+        "client_id": "my-client-id",
+        "client_secret": "my-client-secret"
+      }
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "access_token": "new_access_token_def456",
+          "refresh_token": "new_refresh_token_abc789",
+          "expires_in": 3600,
+          "token_type": "Bearer",
+          "scope": "read write"
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: OAuth2 Client Credentials
+  description: Example using OAuth2 client credentials grant type
+  
+  request: {
+    url: https://api.example.com/oauth/client-credentials
+    method: post
+    mode: json
+    headers: {
+      content-type: "application/json"
+    }
+  
+    body:json: {
+      {
+        "grant_type": "client_credentials",
+        "client_id": "service-account",
+        "client_secret": "service-secret-key",
+        "scope": "admin"
+      }
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "access_token": "service_access_token_123",
+          "expires_in": 7200,
+          "token_type": "Bearer",
+          "scope": "admin"
+        }
+      '''
+    }
+  }
+}
+
+example {
+  name: OAuth2 Password Grant
+  description: Example using OAuth2 password grant (username/password)
+  
+  request: {
+    url: https://api.example.com/oauth/password
+    method: post
+    mode: json
+    headers: {
+      content-type: "application/json"
+    }
+  
+    body:json: {
+      {
+        "grant_type": "password",
+        "username": "user@example.com",
+        "password": "SecurePass123!",
+        "client_id": "mobile-app",
+        "client_secret": "mobile-app-secret"
+      }
+    }
+  }
+  
+  response: {
+    status: {
+      code: 200
+      text: OK
+    }
+  
+    body: {
+      type: json
+      content: '''
+        {
+          "access_token": "user_access_token_456",
+          "refresh_token": "user_refresh_token_789",
+          "expires_in": 3600,
+          "token_type": "Bearer"
+        }
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.bru
deleted file mode 100644
index fe394e43e3..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.bru
+++ /dev/null
@@ -1,20 +0,0 @@
-meta {
-  name: Test API
-  type: http
-}
-
-example {
-  meta {
-    name: Basic Auth Example
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/protected
-  }
-  
-  auth:basic {
-    username: testuser
-    password: testpass
-  }
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.json
deleted file mode 100644
index ce23f289bf..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-basic-auth.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Basic Auth Example",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/protected"
-            },
-            "auth": {
-                "basic": {
-                    "username": "testuser",
-                    "password": "testpass"
-                }
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.bru
deleted file mode 100644
index 436d52bdea..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.bru
+++ /dev/null
@@ -1,19 +0,0 @@
-meta {
-  name: Test API
-  type: http
-}
-
-example {
-  meta {
-    name: Bearer Token Example
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/protected
-  }
-  
-  auth:bearer {
-    token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
-  }
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.json
deleted file mode 100644
index b139cd67d6..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-bearer-auth.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Bearer Token Example",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/protected"
-            },
-            "auth": {
-                "bearer": {
-                    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
-                }
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.json
deleted file mode 100644
index 4fcfd47be5..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-empty-example.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "examples": [
-        {}
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.bru
deleted file mode 100644
index 3a7cf97ca7..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.bru
+++ /dev/null
@@ -1,22 +0,0 @@
-meta {
-  name: Test API
-  type: http
-}
-
-example {
-  meta {
-    name: JSON Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/data
-  }
-  
-  body:json {
-    {
-      "name": "Test",
-      "value": 123
-    }
-  }
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.json
deleted file mode 100644
index 73af1126c1..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-json-body.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "JSON Example",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/data"
-            },
-            "body": {
-                "json": "{\n  \"name\": \"Test\",\n  \"value\": 123\n}"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.bru
deleted file mode 100644
index fcf6c1153e..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.bru
+++ /dev/null
@@ -1,36 +0,0 @@
-meta {
-  name: Test API
-  type: http
-}
-
-get {
-  url: https://api.example.com/test
-}
-
-example {
-  meta {
-    name: Example 1
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/example1
-  }
-}
-
-example {
-  meta {
-    name: Example 2
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/example2
-  }
-  
-  body:json {
-    {
-      "data": "test"
-    }
-  }
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.json
deleted file mode 100644
index 1f21185d22..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-multiple-examples.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Example 1",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/example1"
-            }
-        },
-        {
-            "meta": {
-                "name": "Example 2",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/example2"
-            },
-            "body": {
-                "json": "{\n  \"data\": \"test\"\n}"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.json
deleted file mode 100644
index a01b22344f..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-no-examples.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    }
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.bru
deleted file mode 100644
index d57ba7fbe8..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.bru
+++ /dev/null
@@ -1,34 +0,0 @@
-meta {
-  name: Test API
-  type: http
-}
-
-get {
-  url: https://api.example.com/test
-}
-
-example {
-  meta {
-    name: Example with Response
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/users/123
-  }
-  
-  response:headers {
-    content-type: application/json
-  }
-  
-  response:status {
-    code: 200
-  }
-  
-  response:body {
-    {
-      "id": 123,
-      "name": "John Doe"
-    }
-  }
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.json
deleted file mode 100644
index fb43aa26f2..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-response-example.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Example with Response",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/users/123"
-            },
-            "response": {
-                "headers": [
-                    {
-                        "name": "content-type",
-                        "value": "application/json",
-                        "enabled": true
-                    }
-                ],
-                "status": {
-                    "code": "200"
-                },
-                "body": "{\n  \"id\": 123,\n  \"name\": \"John Doe\"\n}"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.json
deleted file mode 100644
index 0442b9baac..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-single-example.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Example Request",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/example"
-            },
-            "headers": [
-                {
-                    "name": "authorization",
-                    "value": "Bearer token123",
-                    "enabled": true
-                }
-            ]
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.bru
deleted file mode 100644
index cdedf35fed..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.bru
+++ /dev/null
@@ -1,20 +0,0 @@
-meta {
-  name: Test API
-  type: http
-}
-
-example {
-  meta {
-    name: Text Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/data
-  }
-  
-  body:text {
-    Plain text data
-    with multiple lines
-  }
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.json
deleted file mode 100644
index ea4c8afda7..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-text-body.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Text Example",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/data"
-            },
-            "body": {
-                "text": "Plain text data\nwith multiple lines"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.bru b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.bru
deleted file mode 100644
index 57701f306b..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.bru
+++ /dev/null
@@ -1,23 +0,0 @@
-meta {
-  name: Test API
-  type: http
-}
-
-example {
-  meta {
-    name: XML Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/data
-  }
-  
-  body:xml {
-    <?xml version="1.0" encoding="UTF-8"?>
-    <data>
-      <name>Test</name>
-      <value>123</value>
-    </data>
-  }
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.json
deleted file mode 100644
index 6132b062d4..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/bruToJson-xml-body.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http",
-        "seq": 1
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "XML Example",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/data"
-            },
-            "body": {
-                "xml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<data>\n  <name>Test</name>\n  <value>123</value>\n</data>"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/examples-complex.bru b/packages/bruno-lang/v2/tests/examples/fixtures/examples-complex.bru
deleted file mode 100644
index 5d021c0132..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/examples-complex.bru
+++ /dev/null
@@ -1,142 +0,0 @@
-meta {
-  name: Multi-format API
-  type: http
-}
-
-get {
-  url: https://api.example.com/data
-}
-
-headers {
-  content-type: application/json
-}
-
-body:json {
-  {
-    "message": "API supports multiple formats"
-  }
-}
-
-example {
-  meta {
-    name: JSON API Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/json
-  }
-  
-  headers {
-    content-type: application/json
-    authorization: Bearer json-token
-  }
-  
-  auth:basic {
-    username: jsonuser
-    password: jsonpass
-  }
-  
-  body:json {
-    {
-      "format": "json",
-      "data": {
-        "name": "JSON Example",
-        "value": 123
-      }
-    }
-  }
-  
-  response:status {
-    code: 201
-  }
-  
-  response:body {
-    {
-      "id": 1,
-      "format": "json",
-      "created": true
-    }
-  }
-}
-
-example {
-  meta {
-    name: XML API Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/xml
-  }
-  
-  headers {
-    content-type: application/xml
-    authorization: Bearer xml-token
-  }
-  
-  auth:bearer {
-    token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
-  }
-  
-  body:xml {
-    <?xml version="1.0" encoding="UTF-8"?>
-    <data>
-      <format>xml</format>
-      <name>XML Example</name>
-      <value>456</value>
-    </data>
-  }
-  
-  response:status {
-    code: 201
-  }
-  
-  response:body {
-    <?xml version="1.0" encoding="UTF-8"?>
-    <response>
-      <id>2</id>
-      <format>xml</format>
-      <created>true</created>
-    </response>
-  }
-}
-
-example {
-  meta {
-    name: Text API Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/text
-  }
-  
-  headers {
-    content-type: text/plain
-    authorization: Bearer text-token
-  }
-  
-  auth:apikey {
-    key: X-API-Key
-    value: text-api-key-123
-    placement: header
-  }
-  
-  body:text {
-    Plain text data
-    Format: text
-    Name: Text Example
-    Value: 789
-  }
-  
-  response:status {
-    code: 201
-  }
-  
-  response:body {
-    Success: true
-    Format: text
-    ID: 3
-  }
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.bru
deleted file mode 100644
index 913dedcda0..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.bru
+++ /dev/null
@@ -1,71 +0,0 @@
-meta {
-  name: User API Documentation
-  type: http
-}
-
-get {
-  url: https://api.example.com/users
-}
-
-example {
-  meta {
-    name: Get User by ID
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/users/123
-  }
-  
-  headers {
-    authorization: Bearer token123
-  }
-  
-  response:status {
-    code: 200
-  }
-  
-  response:body {
-    {
-      "id": 123,
-      "name": "John Doe",
-      "email": "john@example.com"
-    }
-  }
-}
-
-example {
-  meta {
-    name: Create New User
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/users
-  }
-  
-  headers {
-    content-type: application/json
-    authorization: Bearer token123
-  }
-  
-  body:json {
-    {
-      "name": "New User",
-      "email": "newuser@example.com"
-    }
-  }
-  
-  response:status {
-    code: 201
-  }
-  
-  response:body {
-    {
-      "id": 456,
-      "name": "New User",
-      "email": "newuser@example.com",
-      "created_at": "2023-01-15T10:30:00Z"
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.json b/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.json
deleted file mode 100644
index 3deb01c842..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/examples-simple.json
+++ /dev/null
@@ -1,69 +0,0 @@
-{
-    "meta": {
-        "name": "User API Documentation",
-        "type": "http",
-        "seq": 1
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/users"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Get User by ID",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/users/123"
-            },
-            "headers": [
-                {
-                    "name": "authorization",
-                    "value": "Bearer token123",
-                    "enabled": true
-                }
-            ],
-            "response": {
-                "status": {
-                    "code": "200"
-                },
-                "body": "{\n  \"id\": 123,\n  \"name\": \"John Doe\",\n  \"email\": \"john@example.com\"\n}"
-            }
-        },
-        {
-            "meta": {
-                "name": "Create New User",
-                "type": "http",
-                "seq": 1
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/users"
-            },
-            "headers": [
-                {
-                    "name": "content-type",
-                    "value": "application/json",
-                    "enabled": true
-                },
-                {
-                    "name": "authorization",
-                    "value": "Bearer token123",
-                    "enabled": true
-                }
-            ],
-            "body": {
-                "json": "{\n  \"name\": \"New User\",\n  \"email\": \"newuser@example.com\"\n}"
-            },
-            "response": {
-                "status": {
-                    "code": "201"
-                },
-                "body": "{\n  \"id\": 456,\n  \"name\": \"New User\",\n  \"email\": \"newuser@example.com\",\n  \"created_at\": \"2023-01-15T10:30:00Z\"\n}"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-empty-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-empty-example.json
new file mode 100644
index 0000000000..33799285a1
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-empty-example.json
@@ -0,0 +1,10 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http",
+    "seq": 1
+  },
+  "examples": [
+    {}
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-json-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-json-body.json
new file mode 100644
index 0000000000..04b65ac945
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-json-body.json
@@ -0,0 +1,21 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http",
+    "seq": 1
+  },
+  "examples": [
+    {
+      "name": "JSON Example",
+      "description": "An example with JSON body",
+      "request": {
+        "url": "https://api.example.com/data",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"name\": \"Test\",\n  \"value\": 123\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-multiple-examples.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-multiple-examples.json
new file mode 100644
index 0000000000..67ac2110c4
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-multiple-examples.json
@@ -0,0 +1,36 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http",
+    "seq": 1
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/test"
+  },
+  "examples": [
+    {
+      "name": "Example 1",
+      "description": "First example",
+      "request": {
+        "url": "https://api.example.com/example1",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        }
+      }
+    },
+    {
+      "name": "Example 2",
+      "description": "Second example with JSON body",
+      "request": {
+        "url": "https://api.example.com/example2",
+        "method": "get",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"data\": \"test\"\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-no-examples.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-no-examples.json
new file mode 100644
index 0000000000..848babe6e2
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-no-examples.json
@@ -0,0 +1,11 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http",
+    "seq": 1
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/test"
+  }
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-response-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-response-example.json
new file mode 100644
index 0000000000..7c197018ff
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-response-example.json
@@ -0,0 +1,39 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http",
+    "seq": 1
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/test"
+  },
+  "examples": [
+    {
+      "name": "Example with Response",
+      "description": "An example with response data",
+      "request": {
+        "url": "https://api.example.com/users/123",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        }
+      },
+      "response": {
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "application/json",
+            "enabled": true
+          }
+        ],
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": 123,\n  \"name\": \"John Doe\"\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-single-example.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-single-example.json
new file mode 100644
index 0000000000..8e45ab774d
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-single-example.json
@@ -0,0 +1,24 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http",
+    "seq": 1
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/test"
+  },
+  "examples": [
+    {
+      "name": "Example Request",
+      "description": "A simple example request",
+      "request": {
+        "url": "https://api.example.com/example",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-text-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-text-body.json
new file mode 100644
index 0000000000..aaf60a7eec
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-text-body.json
@@ -0,0 +1,21 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http",
+    "seq": 1
+  },
+  "examples": [
+    {
+      "name": "Text Example",
+      "description": "An example with text body",
+      "request": {
+        "url": "https://api.example.com/data",
+        "method": "post",
+        "body": {
+          "mode": "text",
+          "text": "Plain text data\nwith multiple lines"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-xml-body.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-xml-body.json
new file mode 100644
index 0000000000..d050939fef
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/bruToJson-xml-body.json
@@ -0,0 +1,21 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http",
+    "seq": 1
+  },
+  "examples": [
+    {
+      "name": "XML Example",
+      "description": "An example with XML body",
+      "request": {
+        "url": "https://api.example.com/data",
+        "method": "post",
+        "body": {
+          "mode": "xml",
+          "xml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<data>\n  <name>Test</name>\n  <value>123</value>\n</data>"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/complex-with-auth.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/complex-with-auth.json
new file mode 100644
index 0000000000..1b1f0100e1
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/complex-with-auth.json
@@ -0,0 +1,211 @@
+{
+  "meta": {
+    "name": "Complex API with Auth",
+    "type": "http",
+    "seq": "1"
+  },
+  "http": {
+    "method": "post",
+    "url": "https://api.example.com/users",
+    "body": "json",
+    "auth": "bearer"
+  },
+  "headers": [
+    {
+      "name": "content-type",
+      "value": "application/json",
+      "enabled": true
+    },
+    {
+      "name": "x-api-key",
+      "value": "my-secret-key",
+      "enabled": true
+    },
+    {
+      "name": "x-request-id",
+      "value": "{{$uuid}}",
+      "enabled": true
+    }
+  ],
+  "params": [
+    {
+      "name": "include",
+      "value": "details",
+      "enabled": true,
+      "type": "query"
+    },
+    {
+      "name": "format",
+      "value": "json",
+      "enabled": true,
+      "type": "query"
+    },
+    {
+      "name": "id",
+      "value": "123",
+      "enabled": true,
+      "type": "path"
+    },
+    {
+      "name": "status",
+      "value": "active",
+      "enabled": true,
+      "type": "path"
+    }
+  ],
+  "auth": {
+    "basic": {
+      "username": "admin",
+      "password": "secret123"
+    },
+    "bearer": {
+      "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHluKJe2vncyz4h4SH6FSS7YOKIx"
+    },
+    "apikey": {
+      "key": "x-api-key",
+      "value": "api-secret-key-12345",
+      "placement": "header"
+    }
+  },
+  "body": {
+    "json": "{\n  \"username\": \"johndoe\",\n  \"email\": \"john@example.com\",\n  \"profile\": {\n    \"firstName\": \"John\",\n    \"lastName\": \"Doe\",\n    \"age\": 30\n  },\n  \"preferences\": {\n    \"theme\": \"dark\",\n    \"notifications\": true\n  },\n  \"tags\": [\"admin\", \"user\", \"verified\"]\n}"
+  },
+  "script": {
+    "req": "const timestamp = Date.now();\nbru.setVar(\"request_timestamp\", timestamp);\nbru.setVar(\"signature\", crypto.createHash('md5').update(timestamp.toString()).digest('hex'));"
+  },
+  "vars": {
+    "req": [
+      {
+        "name": "user_id",
+        "value": "12345",
+        "enabled": true,
+        "local": false
+      },
+      {
+        "name": "environment",
+        "value": "production",
+        "enabled": true,
+        "local": false
+      }
+    ],
+    "res": [
+      {
+        "name": "response_id",
+        "value": "{{res.id}}",
+        "enabled": true,
+        "local": false
+      },
+      {
+        "name": "processed_at",
+        "value": "{{$timestamp}}",
+        "enabled": true,
+        "local": false
+      }
+    ]
+  },
+  "tests": "test(\"Response should be 201\", function() {\n  expect(res.getStatus()).to.eql(201);\n});\n\ntest(\"Response should have user data\", function() {\n  const body = res.getBody();\n  expect(body.username).to.be.ok;\n  expect(body.email).to.be.ok;\n});",
+  "docs": "This endpoint creates a new user account.\nRequires authentication via Bearer token or API key.\nSupports nested JSON structures with arrays.",
+  "examples": [
+    {
+      "name": "Basic User Creation",
+      "description": "Creates a new user with minimal required fields",
+      "request": {
+        "url": "https://api.example.com/users",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"username\": \"newuser\",\n  \"email\": \"newuser@example.com\",\n  \"password\": \"SecurePass123!\"\n}"
+        },
+        "headers": [
+          {
+            "name": "authorization",
+            "value": "\"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\",",
+            "enabled": true
+          },
+          {
+            "name": "content-type",
+            "value": "\"application/json\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "201",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": 100,\n  \"username\": \"newuser\",\n  \"email\": \"newuser@example.com\",\n  \"created_at\": \"2024-01-15T10:30:00Z\",\n  \"status\": \"active\"\n}"
+        }
+      }
+    },
+    {
+      "name": "Advanced User with Profile",
+      "description": "Creates a user with complete profile information and nested data",
+      "request": {
+        "url": "https://api.example.com/users",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"username\": \"developer\",\n  \"email\": \"dev@example.com\",\n  \"password\": \"DevPass2024!\",\n  \"profile\": {\n    \"firstName\": \"Jane\",\n    \"lastName\": \"Developer\",\n    \"bio\": \"Software engineer passionate about APIs\",\n    \"location\": {\n      \"city\": \"San Francisco\",\n      \"country\": \"USA\",\n      \"timezone\": \"America/Los_Angeles\"\n    },\n    \"social\": {\n      \"github\": \"jandeveloper\",\n      \"twitter\": \"@jane_dev\"\n    }\n  },\n  \"skills\": [\"JavaScript\", \"Node.js\", \"React\", \"API Design\"],\n  \"experience\": 5,\n  \"preferences\": {\n    \"theme\": \"dark\",\n    \"language\": \"en\",\n    \"notifications\": {\n      \"email\": true,\n      \"push\": true,\n      \"sms\": false\n    }\n  }\n}"
+        },
+        "headers": [
+          {
+            "name": "authorization",
+            "value": "\"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9\",",
+            "enabled": true
+          },
+          {
+            "name": "content-type",
+            "value": "\"application/json\",",
+            "enabled": true
+          },
+          {
+            "name": "x-api-key",
+            "value": "\"advanced-api-key-45678\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "201",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": 101,\n  \"username\": \"developer\",\n  \"email\": \"dev@example.com\",\n  \"profile\": {\n    \"firstName\": \"Jane\",\n    \"lastName\": \"Developer\",\n    \"bio\": \"Software engineer passionate about APIs\",\n    \"location\": {\n      \"city\": \"San Francisco\",\n      \"country\": \"USA\",\n      \"timezone\": \"America/Los_Angeles\"\n    }\n  },\n  \"skills\": [\"JavaScript\", \"Node.js\", \"React\", \"API Design\"],\n  \"experience\": 5,\n  \"created_at\": \"2024-01-15T12:45:30Z\",\n  \"status\": \"active\",\n  \"verified\": false\n}"
+        }
+      }
+    },
+    {
+      "name": "XML Data Example",
+      "description": "Example with XML format and complex structure",
+      "request": {
+        "url": "https://api.example.com/users/xml",
+        "method": "post",
+        "body": {
+          "mode": "xml",
+          "xml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<user>\n  <username>xmluser</username>\n  <email>xml@example.com</email>\n  <profile>\n    <firstName>XML</firstName>\n    <lastName>User</lastName>\n  </profile>\n</user>"
+        },
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "\"application/xml\",",
+            "enabled": true
+          },
+          {
+            "name": "authorization",
+            "value": "\"Basic YWRtaW46cGFzc3dvcmQ=\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "201",
+        "statusText": "OK",
+        "body": {
+          "type": "xml",
+          "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<response>\n  <id>102</id>\n  <status>created</status>\n  <user>\n    <username>xmluser</username>\n    <email>xml@example.com</email>\n  </user>\n</response>"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/examples-complex.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/examples-complex.json
new file mode 100644
index 0000000000..7690afd2e1
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/examples-complex.json
@@ -0,0 +1,83 @@
+{
+  "meta": {
+    "name": "Multi-format API",
+    "type": "http",
+    "seq": 1
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/data"
+  },
+  "headers": [
+    {
+      "name": "content-type",
+      "value": "application/json",
+      "enabled": true
+    }
+  ],
+  "body": {
+    "json": "{\n  \"message\": \"API supports multiple formats\"\n}"
+  },
+  "examples": [
+    {
+      "name": "JSON API Example",
+      "description": "An example using JSON format",
+      "request": {
+        "url": "https://api.example.com/json",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"format\": \"json\",\n  \"data\": {\n    \"name\": \"JSON Example\",\n    \"value\": 123\n  }\n}"
+        }
+      },
+      "response": {
+        "status": "201",
+        "statusText": "Created",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": 1,\n  \"format\": \"json\",\n  \"created\": true\n}"
+        }
+      }
+    },
+    {
+      "name": "XML API Example",
+      "description": "An example using XML format",
+      "request": {
+        "url": "https://api.example.com/xml",
+        "method": "post",
+        "body": {
+          "mode": "xml",
+          "xml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<data>\n  <format>xml</format>\n  <name>XML Example</name>\n  <value>456</value>\n</data>"
+        }
+      },
+      "response": {
+        "status": "201",
+        "statusText": "Created",
+        "body": {
+          "type": "xml",
+          "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<response>\n  <id>2</id>\n  <format>xml</format>\n  <created>true</created>\n</response>"
+        }
+      }
+    },
+    {
+      "name": "Text API Example",
+      "description": "An example using text format",
+      "request": {
+        "url": "https://api.example.com/text",
+        "method": "post",
+        "body": {
+          "mode": "text",
+          "text": "Plain text data\nFormat: text\nName: Text Example\nValue: 789"
+        }
+      },
+      "response": {
+        "status": "201",
+        "statusText": "Created",
+        "body": {
+          "type": "text",
+          "content": "Success: true\nFormat: text\nID: 3"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/examples-simple.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/examples-simple.json
new file mode 100644
index 0000000000..da43507a19
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/examples-simple.json
@@ -0,0 +1,52 @@
+{
+  "meta": {
+    "name": "User API Documentation",
+    "type": "http",
+    "seq": 1
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/users"
+  },
+  "examples": [
+    {
+      "name": "Get User by ID",
+      "description": "Example of getting a user by ID",
+      "request": {
+        "url": "https://api.example.com/users/123",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        }
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": 123,\n  \"name\": \"John Doe\",\n  \"email\": \"john@example.com\"\n}"
+        }
+      }
+    },
+    {
+      "name": "Create New User",
+      "description": "Example of creating a new user",
+      "request": {
+        "url": "https://api.example.com/users",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"name\": \"New User\",\n  \"email\": \"newuser@example.com\"\n}"
+        }
+      },
+      "response": {
+        "status": "201",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": 456,\n  \"name\": \"New User\",\n  \"email\": \"newuser@example.com\",\n  \"created_at\": \"2023-01-15T10:30:00Z\"\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/form-data-complex.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/form-data-complex.json
new file mode 100644
index 0000000000..b2f87b7fb3
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/form-data-complex.json
@@ -0,0 +1,198 @@
+{
+  "meta": {
+    "name": "Form Data Complex",
+    "type": "http",
+    "seq": "1"
+  },
+  "http": {
+    "method": "post",
+    "url": "https://api.example.com/upload",
+    "body": "multipart-form",
+    "auth": "bearer"
+  },
+  "headers": [
+    {
+      "name": "content-type",
+      "value": "multipart/form-data",
+      "enabled": true
+    },
+    {
+      "name": "x-upload-version",
+      "value": "v2",
+      "enabled": true
+    }
+  ],
+  "auth": {
+    "basic": {
+      "username": "uploader",
+      "password": "upload-secure-pass"
+    },
+    "bearer": {
+      "token": "upload-token-abc123xyz"
+    }
+  },
+  "body": {
+    "multipartForm": [
+      {
+        "name": "document",
+        "value": [
+          "/path/to/file.pdf"
+        ],
+        "enabled": true,
+        "type": "file",
+        "contentType": ""
+      },
+      {
+        "name": "title",
+        "value": "Quarterly Report 2024",
+        "enabled": true,
+        "type": "text",
+        "contentType": ""
+      },
+      {
+        "name": "description",
+        "value": "Detailed quarterly financial analysis",
+        "enabled": true,
+        "type": "text",
+        "contentType": ""
+      },
+      {
+        "name": "tags",
+        "value": "finance,q4,2024",
+        "enabled": true,
+        "type": "text",
+        "contentType": ""
+      }
+    ]
+  },
+  "script": {
+    "req": "const file = bru.readFile(\"/path/to/file.pdf\");\nbru.setVar(\"file_size\", file.length);\nbru.setVar(\"file_name\", \"document.pdf\");"
+  },
+  "examples": [
+    {
+      "name": "File Upload with Metadata",
+      "description": "Upload a file with comprehensive metadata",
+      "request": {
+        "url": "https://api.example.com/upload",
+        "method": "post",
+        "body": {
+          "mode": "multipartForm",
+          "multipartForm": [
+            {
+              "name": "document",
+              "value": [
+                "examples/sample.pdf"
+              ],
+              "enabled": true,
+              "type": "file",
+              "contentType": ""
+            },
+            {
+              "name": "title",
+              "value": "Sample Document",
+              "enabled": true,
+              "type": "text",
+              "contentType": ""
+            },
+            {
+              "name": "description",
+              "value": "This is a sample document for testing",
+              "enabled": true,
+              "type": "text",
+              "contentType": ""
+            },
+            {
+              "name": "category",
+              "value": "documents",
+              "enabled": true,
+              "type": "text",
+              "contentType": ""
+            },
+            {
+              "name": "tags",
+              "value": "sample,test,documents",
+              "enabled": true,
+              "type": "text",
+              "contentType": ""
+            },
+            {
+              "name": "metadata",
+              "value": "{\"author\":\"John Doe\",\"version\":\"1.0\",\"date\":\"2024-01-15\"}",
+              "enabled": true,
+              "type": "text",
+              "contentType": ""
+            }
+          ]
+        },
+        "headers": [
+          {
+            "name": "authorization",
+            "value": "\"Bearer upload-token-abc123xyz\",",
+            "enabled": true
+          },
+          {
+            "name": "x-upload-client",
+            "value": "\"bruno\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": \"file-12345\",\n  \"filename\": \"sample.pdf\",\n  \"size\": 245760,\n  \"uploaded_at\": \"2024-01-15T14:30:00Z\",\n  \"status\": \"completed\",\n  \"url\": \"https://cdn.example.com/files/sample.pdf\",\n  \"metadata\": {\n    \"title\": \"Sample Document\",\n    \"description\": \"This is a sample document for testing\",\n    \"category\": \"documents\",\n    \"tags\": [\"sample\", \"test\", \"documents\"]\n  }\n}"
+        }
+      }
+    },
+    {
+      "name": "Form URL Encoded Data",
+      "description": "Example with form-urlencoded body type",
+      "request": {
+        "url": "https://api.example.com/submit",
+        "method": "post",
+        "body": {
+          "mode": "formUrlEncoded",
+          "formUrlEncoded": [
+            {
+              "name": "username",
+              "value": "testuser",
+              "enabled": true
+            },
+            {
+              "name": "password",
+              "value": "testpass123",
+              "enabled": true
+            },
+            {
+              "name": "remember",
+              "value": "true",
+              "enabled": true
+            }
+          ]
+        },
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "\"application/x-www-form-urlencoded\",",
+            "enabled": true
+          },
+          {
+            "name": "authorization",
+            "value": "\"Basic dGVzdDp0ZXN0\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"success\": true,\n  \"message\": \"Form submitted successfully\",\n  \"session_id\": \"sess-abc123def456\",\n  \"user\": {\n    \"username\": \"testuser\",\n    \"authenticated\": true\n  }\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-bodytypes.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-bodytypes.json
new file mode 100644
index 0000000000..d42235d852
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-bodytypes.json
@@ -0,0 +1,48 @@
+{
+  "meta": {
+    "name": "Body Types API",
+    "type": "http"
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/test"
+  },
+  "examples": [
+    {
+      "name": "JSON Body Example",
+      "description": "An example with JSON body",
+      "request": {
+        "url": "https://api.example.com/json",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"name\": \"Test\",\n  \"value\": 123\n}"
+        }
+      }
+    },
+    {
+      "name": "XML Body Example",
+      "description": "An example with XML body",
+      "request": {
+        "url": "https://api.example.com/xml",
+        "method": "post",
+        "body": {
+          "mode": "xml",
+          "xml": "<?xml version=\"1.0\"?>\n<data>\n  <name>Test</name>\n  <value>123</value>\n</data>"
+        }
+      }
+    },
+    {
+      "name": "Text Body Example",
+      "description": "An example with text body",
+      "request": {
+        "url": "https://api.example.com/text",
+        "method": "post",
+        "body": {
+          "mode": "text",
+          "text": "Plain text data\nwith multiple lines"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-multiple.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-multiple.json
new file mode 100644
index 0000000000..a4ae6fe592
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-multiple.json
@@ -0,0 +1,35 @@
+{
+  "meta": {
+    "name": "Multi-Example API",
+    "type": "http"
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/test"
+  },
+  "examples": [
+    {
+      "name": "Example 1",
+      "description": "First example",
+      "request": {
+        "url": "https://api.example.com/example1",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        }
+      }
+    },
+    {
+      "name": "Example 2",
+      "description": "Second example with JSON body",
+      "request": {
+        "url": "https://api.example.com/example2",
+        "method": "get",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"data\": \"test2\"\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-response.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-response.json
new file mode 100644
index 0000000000..9018182fc5
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-response.json
@@ -0,0 +1,38 @@
+{
+  "meta": {
+    "name": "Response Example API",
+    "type": "http"
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/test"
+  },
+  "examples": [
+    {
+      "name": "Response Example",
+      "description": "An example with response data",
+      "request": {
+        "url": "https://api.example.com/users/123",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        }
+      },
+      "response": {
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "application/json",
+            "enabled": true
+          }
+        ],
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": 123,\n  \"name\": \"John Doe\"\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-simple.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-simple.json
new file mode 100644
index 0000000000..ee4f1aa3fb
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/jsonToBru-simple.json
@@ -0,0 +1,24 @@
+{
+  "meta": {
+    "name": "Test API",
+    "type": "http"
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/test"
+  },
+  "examples": [
+    {
+      "name": "Example Request",
+      "description": "A simple example request",
+      "request": {
+        "url": "https://api.example.com/example",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"data\": \"test\"\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/multiple-examples-variations.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/multiple-examples-variations.json
new file mode 100644
index 0000000000..1725269d21
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/multiple-examples-variations.json
@@ -0,0 +1,223 @@
+{
+  "meta": {
+    "name": "Multiple Examples Variations",
+    "type": "http",
+    "seq": "1"
+  },
+  "http": {
+    "method": "get",
+    "url": "https://api.example.com/data"
+  },
+  "headers": [
+    {
+      "name": "accept",
+      "value": "application/json",
+      "enabled": true
+    },
+    {
+      "name": "x-client",
+      "value": "bruno",
+      "enabled": true
+    }
+  ],
+  "params": [
+    {
+      "name": "page",
+      "value": "1",
+      "enabled": true,
+      "type": "query"
+    },
+    {
+      "name": "limit",
+      "value": "10",
+      "enabled": true,
+      "type": "query"
+    },
+    {
+      "name": "sort",
+      "value": "desc",
+      "enabled": true,
+      "type": "query"
+    }
+  ],
+  "auth": {
+    "bearer": {
+      "token": "token-for-multiple-examples"
+    }
+  },
+  "body": {
+    "json": "{\n  \"query\": \"search\",\n  \"filters\": []\n}"
+  },
+  "examples": [
+    {
+      "name": "Simple GET Request",
+      "description": "Basic GET request with minimal data",
+      "request": {
+        "url": "https://api.example.com/data?id=123",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        },
+        "headers": [
+          {
+            "name": "accept",
+            "value": "\"application/json\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"id\": 123,\n  \"name\": \"Item\",\n  \"value\": 42\n}"
+        }
+      }
+    },
+    {
+      "name": "Complex Search Query",
+      "description": "GET request with complex query parameters",
+      "request": {
+        "url": "https://api.example.com/data?page=1&limit=20&sort=name&order=asc&filter[status]=active&filter[type]=premium",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        },
+        "headers": [
+          {
+            "name": "accept",
+            "value": "\"application/json\",",
+            "enabled": true
+          },
+          {
+            "name": "x-api-key",
+            "value": "\"search-key-789\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"data\": [\n    {\n      \"id\": 1,\n      \"name\": \"Premium Item 1\",\n      \"status\": \"active\",\n      \"type\": \"premium\"\n    },\n    {\n      \"id\": 2,\n      \"name\": \"Premium Item 2\",  \n      \"status\": \"active\",\n      \"type\": \"premium\"\n    }\n  ],\n  \"pagination\": {\n    \"page\": 1,\n    \"limit\": 20,\n    \"total\": 2\n  }\n}"
+        }
+      }
+    },
+    {
+      "name": "Text Response Example",
+      "description": "Request returning plain text response",
+      "request": {
+        "url": "https://api.example.com/data/text",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        },
+        "headers": [
+          {
+            "name": "accept",
+            "value": "\"text/plain\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "text",
+          "content": "This is a plain text response\nMultiple lines of content\nNo JSON formatting needed"
+        }
+      }
+    },
+    {
+      "name": "XML Response with Nested Structure",
+      "description": "Example with complex XML response",
+      "request": {
+        "url": "https://api.example.com/data/xml",
+        "method": "get",
+        "body": {
+          "mode": "none"
+        },
+        "headers": [
+          {
+            "name": "accept",
+            "value": "\"application/xml\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "xml",
+          "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<response>\n  <metadata>\n    <version>1.0</version>\n    <timestamp>2024-01-15T15:00:00Z</timestamp>\n  </metadata>\n  <data>\n    <item id=\"1\">\n      <name>Item One</name>\n      <value>100</value>\n      <nested>\n        <attribute key=\"type\">primary</attribute>\n      </nested>\n    </item>\n    <item id=\"2\">\n      <name>Item Two</name>\n      <value>200</value>\n      <nested>\n        <attribute key=\"type\">secondary</attribute>\n      </nested>\n    </item>\n  </data>\n</response>"
+        }
+      }
+    },
+    {
+      "name": "GraphQL Query Example",
+      "description": "Example with GraphQL query body",
+      "request": {
+        "url": "https://api.example.com/graphql",
+        "method": "post",
+        "body": {
+          "mode": "graphql",
+          "graphql": {
+            "query": "query {\n  user(id: \"123\") {\n    id\n    name\n    email\n    posts {\n      title\n      content\n    }\n  }\n}"
+          }
+        },
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "\"application/json\",",
+            "enabled": true
+          },
+          {
+            "name": "authorization",
+            "value": "\"Bearer graphql-token-xyz\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"data\": {\n    \"user\": {\n      \"id\": \"123\",\n      \"name\": \"John Doe\",\n      \"email\": \"john@example.com\",\n      \"posts\": [\n        {\n          \"title\": \"First Post\",\n          \"content\": \"This is my first blog post\"\n        }\n      ]\n    }\n  }\n}"
+        }
+      }
+    },
+    {
+      "name": "SPARQL Query Example",
+      "description": "Example with SPARQL query",
+      "request": {
+        "url": "https://sparql.example.com/query",
+        "method": "post",
+        "body": {
+          "mode": "sparql",
+          "sparql": "SELECT ?name ?email WHERE {\n  ?person <http://example.org/name> ?name .\n  ?person <http://example.org/email> ?email .\n  ?person <http://example.org/age> ?age .\n  FILTER(?age > 18)\n}"
+        },
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "\"application/sparql-query\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"results\": {\n    \"bindings\": [\n      {\n        \"name\": {\n          \"value\": \"John Doe\"\n        },\n        \"email\": {\n          \"value\": \"john@example.com\"\n        }\n      }\n    ]\n  }\n}"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/json/oauth2-examples.json b/packages/bruno-lang/v2/tests/examples/fixtures/json/oauth2-examples.json
new file mode 100644
index 0000000000..9b625908a8
--- /dev/null
+++ b/packages/bruno-lang/v2/tests/examples/fixtures/json/oauth2-examples.json
@@ -0,0 +1,185 @@
+{
+  "meta": {
+    "name": "OAuth2 Examples API",
+    "type": "http",
+    "seq": "1"
+  },
+  "http": {
+    "method": "post",
+    "url": "https://api.example.com/oauth/protected",
+    "body": "json",
+    "auth": "oauth2"
+  },
+  "headers": [
+    {
+      "name": "content-type",
+      "value": "application/json",
+      "enabled": true
+    }
+  ],
+  "auth": {
+    "oauth2": {
+      "grantType": "authorization_code",
+      "callbackUrl": "https://api.example.com/oauth/callback",
+      "authorizationUrl": "https://oauth.example.com/authorize",
+      "accessTokenUrl": "https://oauth.example.com/token",
+      "refreshTokenUrl": "https://oauth.example.com/token",
+      "clientId": "my-client-id",
+      "clientSecret": "my-client-secret",
+      "scope": "read write",
+      "state": "",
+      "pkce": true,
+      "credentialsPlacement": "header",
+      "credentialsId": "authorization",
+      "tokenPlacement": "header",
+      "tokenHeaderPrefix": "Bearer",
+      "tokenQueryKey": "access_token",
+      "autoFetchToken": true,
+      "autoRefreshToken": true
+    }
+  },
+  "body": {
+    "json": "{\n  \"action\": \"test\",\n  \"data\": {\n    \"message\": \"Protected resource access\"\n  }\n}"
+  },
+  "vars": {
+    "req": [
+      {
+        "name": "oauth_state",
+        "value": "{{$uuid}}",
+        "enabled": true,
+        "local": false
+      },
+      {
+        "name": "client_scopes",
+        "value": "read,write,admin",
+        "enabled": true,
+        "local": false
+      }
+    ]
+  },
+  "script": {
+    "req": "const state = crypto.randomBytes(16).toString('hex');\nbru.setVar('oauth_state', state);\nbru.setVar('timestamp', Date.now());"
+  },
+  "tests": "test(\"Response should be 200\", function() {\n  expect(res.getStatus()).to.eql(200);\n});\n\ntest(\"Should have user data in response\", function() {\n  const body = res.getBody();\n  expect(body.access_token).to.be.ok;\n});",
+  "examples": [
+    {
+      "name": "OAuth2 Protected Resource",
+      "description": "Example accessing resource protected with OAuth2 authorization code flow",
+      "request": {
+        "url": "https://api.example.com/oauth/protected",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"action\": \"fetch\",\n  \"resource\": \"user_profile\"\n}"
+        },
+        "headers": [
+          {
+            "name": "authorization",
+            "value": "\"Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9\",",
+            "enabled": true
+          },
+          {
+            "name": "content-type",
+            "value": "\"application/json\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"user\": {\n    \"id\": \"123\",\n    \"name\": \"John Doe\",\n    \"email\": \"john@example.com\",\n    \"scopes\": [\"read\", \"write\"]\n  },\n  \"token\": {\n    \"access_token\": \"access_token_abc123\",\n    \"expires_in\": 3600,\n    \"token_type\": \"Bearer\"\n  }\n}"
+        }
+      }
+    },
+    {
+      "name": "OAuth2 Token Refresh",
+      "description": "Example demonstrating OAuth2 token refresh flow",
+      "request": {
+        "url": "https://api.example.com/oauth/token",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"grant_type\": \"refresh_token\",\n  \"refresh_token\": \"refresh_token_xyz789\",\n  \"client_id\": \"my-client-id\",\n  \"client_secret\": \"my-client-secret\"\n}"
+        },
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "\"application/json\",",
+            "enabled": true
+          },
+          {
+            "name": "accept",
+            "value": "\"application/json\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"access_token\": \"new_access_token_def456\",\n  \"refresh_token\": \"new_refresh_token_abc789\",\n  \"expires_in\": 3600,\n  \"token_type\": \"Bearer\",\n  \"scope\": \"read write\"\n}"
+        }
+      }
+    },
+    {
+      "name": "OAuth2 Client Credentials",
+      "description": "Example using OAuth2 client credentials grant type",
+      "request": {
+        "url": "https://api.example.com/oauth/client-credentials",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"grant_type\": \"client_credentials\",\n  \"client_id\": \"service-account\",\n  \"client_secret\": \"service-secret-key\",\n  \"scope\": \"admin\"\n}"
+        },
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "\"application/json\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"access_token\": \"service_access_token_123\",\n  \"expires_in\": 7200,\n  \"token_type\": \"Bearer\",\n  \"scope\": \"admin\"\n}"
+        }
+      }
+    },
+    {
+      "name": "OAuth2 Password Grant",
+      "description": "Example using OAuth2 password grant (username/password)",
+      "request": {
+        "url": "https://api.example.com/oauth/password",
+        "method": "post",
+        "body": {
+          "mode": "json",
+          "json": "{\n  \"grant_type\": \"password\",\n  \"username\": \"user@example.com\",\n  \"password\": \"SecurePass123!\",\n  \"client_id\": \"mobile-app\",\n  \"client_secret\": \"mobile-app-secret\"\n}"
+        },
+        "headers": [
+          {
+            "name": "content-type",
+            "value": "\"application/json\"",
+            "enabled": true
+          }
+        ]
+      },
+      "response": {
+        "status": "200",
+        "statusText": "OK",
+        "body": {
+          "type": "json",
+          "content": "{\n  \"access_token\": \"user_access_token_456\",\n  \"refresh_token\": \"user_refresh_token_789\",\n  \"expires_in\": 3600,\n  \"token_type\": \"Bearer\"\n}"
+        }
+      }
+    }
+  ],
+  "docs": "This collection demonstrates OAuth2 authentication flows.\nSupports authorization code, client credentials, and password grant types.\nExamples show token refresh and protected resource access."
+}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.bru
deleted file mode 100644
index c17ccef6aa..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.bru
+++ /dev/null
@@ -1,41 +0,0 @@
-meta {
-  name: Auth Example API
-  type: http
-}
-
-get {
-  url: https://api.example.com/test
-}
-
-example {
-  meta {
-    name: Basic Auth Example
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/protected
-  }
-  
-  auth:basic {
-    username: testuser
-    password: testpass
-  }
-  
-}
-
-example {
-  meta {
-    name: Bearer Token Example
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/protected2
-  }
-  
-  auth:bearer {
-    token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
-  }
-  
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.json
deleted file mode 100644
index ebf6c276fe..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-auth.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-    "meta": {
-        "name": "Auth Example API",
-        "type": "http"
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Basic Auth Example",
-                "type": "http"
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/protected"
-            },
-            "auth": {
-                "basic": {
-                    "username": "testuser",
-                    "password": "testpass"
-                }
-            }
-        },
-        {
-            "meta": {
-                "name": "Bearer Token Example",
-                "type": "http"
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/protected2"
-            },
-            "auth": {
-                "bearer": {
-                    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
-                }
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.bru
deleted file mode 100644
index c430595306..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.bru
+++ /dev/null
@@ -1,64 +0,0 @@
-meta {
-  name: Body Types API
-  type: http
-}
-
-get {
-  url: https://api.example.com/test
-}
-
-example {
-  meta {
-    name: JSON Body Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/json
-  }
-  
-  body:json {
-    {
-      "name": "Test",
-      "value": 123
-    }
-  }
-  
-}
-
-example {
-  meta {
-    name: XML Body Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/xml
-  }
-  
-  body:xml {
-    <?xml version="1.0"?>
-    <data>
-      <name>Test</name>
-      <value>123</value>
-    </data>
-  }
-  
-}
-
-example {
-  meta {
-    name: Text Body Example
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/text
-  }
-  
-  body:text {
-    Plain text data
-    with multiple lines
-  }
-  
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.json
deleted file mode 100644
index 3693e4c0e1..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-bodytypes.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-    "meta": {
-        "name": "Body Types API",
-        "type": "http"
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "JSON Body Example",
-                "type": "http"
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/json"
-            },
-            "body": {
-                "json": "{\n  \"name\": \"Test\",\n  \"value\": 123\n}"
-            }
-        },
-        {
-            "meta": {
-                "name": "XML Body Example",
-                "type": "http"
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/xml"
-            },
-            "body": {
-                "xml": "<?xml version=\"1.0\"?>\n<data>\n  <name>Test</name>\n  <value>123</value>\n</data>"
-            }
-        },
-        {
-            "meta": {
-                "name": "Text Body Example",
-                "type": "http"
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/text"
-            },
-            "body": {
-                "text": "Plain text data\nwith multiple lines"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.bru
deleted file mode 100644
index 6dd5d78b41..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.bru
+++ /dev/null
@@ -1,38 +0,0 @@
-meta {
-  name: Multi-Example API
-  type: http
-}
-
-get {
-  url: https://api.example.com/test
-}
-
-example {
-  meta {
-    name: Example 1
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/example1
-  }
-  
-}
-
-example {
-  meta {
-    name: Example 2
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/example2
-  }
-  
-  body:json {
-    {
-      "data": "test2"
-    }
-  }
-  
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.json
deleted file mode 100644
index a78212d05c..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-multiple.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-    "meta": {
-        "name": "Multi-Example API",
-        "type": "http"
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Example 1",
-                "type": "http"
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/example1"
-            }
-        },
-        {
-            "meta": {
-                "name": "Example 2",
-                "type": "http"
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/example2"
-            },
-            "body": {
-                "json": "{\n  \"data\": \"test2\"\n}"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.bru
deleted file mode 100644
index 572111caa9..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.bru
+++ /dev/null
@@ -1,35 +0,0 @@
-meta {
-  name: Response Example API
-  type: http
-}
-
-get {
-  url: https://api.example.com/test
-}
-
-example {
-  meta {
-    name: Response Example
-    type: http
-  }
-  
-  get {
-    url: https://api.example.com/users/123
-  }
-  
-  response:headers {
-    content-type: application/json
-  }
-  
-  response:status {
-    code: 200
-  }
-  
-  response:body {
-    {
-      "id": 123,
-      "name": "John Doe"
-    }
-  }
-  
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.json
deleted file mode 100644
index f57a54ffc1..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-response.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-    "meta": {
-        "name": "Response Example API",
-        "type": "http"
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Response Example",
-                "type": "http"
-            },
-            "http": {
-                "method": "get",
-                "url": "https://api.example.com/users/123"
-            },
-            "response": {
-                "headers": [
-                    {
-                        "name": "content-type",
-                        "value": "application/json",
-                        "enabled": true
-                    }
-                ],
-                "status": {
-                    "code": "200"
-                },
-                "body": "{\n  \"id\": 123,\n  \"name\": \"John Doe\"\n}"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.bru b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.bru
deleted file mode 100644
index f5fd12fd7e..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.bru
+++ /dev/null
@@ -1,30 +0,0 @@
-meta {
-  name: Test API
-  type: http
-}
-
-get {
-  url: https://api.example.com/test
-}
-
-example {
-  meta {
-    name: Example Request
-    type: http
-  }
-  
-  post {
-    url: https://api.example.com/example
-  }
-  
-  headers {
-    authorization: Bearer token123
-  }
-  
-  body:json {
-    {
-      "data": "test"
-    }
-  }
-  
-}
diff --git a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.json b/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.json
deleted file mode 100644
index 2af7b61db7..0000000000
--- a/packages/bruno-lang/v2/tests/examples/fixtures/jsonToBru-simple.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-    "meta": {
-        "name": "Test API",
-        "type": "http"
-    },
-    "http": {
-        "method": "get",
-        "url": "https://api.example.com/test"
-    },
-    "examples": [
-        {
-            "meta": {
-                "name": "Example Request",
-                "type": "http"
-            },
-            "http": {
-                "method": "post",
-                "url": "https://api.example.com/example"
-            },
-            "headers": [
-                {
-                    "name": "authorization",
-                    "value": "Bearer token123",
-                    "enabled": true
-                }
-            ],
-            "body": {
-                "json": "{\n  \"data\": \"test\"\n}"
-            }
-        }
-    ]
-}
\ No newline at end of file
diff --git a/packages/bruno-schema/src/collections/index.js b/packages/bruno-schema/src/collections/index.js
index b9755ccb51..495a038a67 100644
--- a/packages/bruno-schema/src/collections/index.js
+++ b/packages/bruno-schema/src/collections/index.js
@@ -328,7 +328,6 @@ const exampleSchema = Yup.object({
     method: requestMethodSchema,
     headers: Yup.array().of(keyValueSchema).required('headers are required'),
     params: Yup.array().of(requestParamsSchema).required('params are required'),
-    auth: authSchema,
     body: requestBodySchema
   })
     .noUnknown(true)
@@ -338,7 +337,10 @@ const exampleSchema = Yup.object({
     status: Yup.string().nullable(),
     statusText: Yup.string().nullable(),
     headers: Yup.array().of(keyValueSchema).nullable(),
-    body: Yup.mixed().nullable(),
+    body: Yup.object({
+      type: Yup.string().oneOf(['json', 'text', 'xml', 'html', 'binary']).nullable(),
+      content: Yup.mixed().nullable()
+    }).nullable()
   })
     .noUnknown(true)
     .strict()
@@ -372,7 +374,7 @@ const requestSchema = Yup.object({
     .nullable(),
   assertions: Yup.array().of(keyValueSchema).nullable(),
   tests: Yup.string().nullable(),
-  docs: Yup.string().nullable(),
+  docs: Yup.string().nullable()
 })
   .noUnknown(true)
   .strict();
diff --git a/packages/bruno-tests/collection/echo/echo json.bru b/packages/bruno-tests/collection/echo/echo json.bru
index be27fb7c78..62137591eb 100644
--- a/packages/bruno-tests/collection/echo/echo json.bru	
+++ b/packages/bruno-tests/collection/echo/echo json.bru	
@@ -45,4 +45,3 @@ tests {
     });
   });  
 }
-
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON false response.bru b/packages/bruno-tests/collection/response-parsing/test JSON false response.bru
index a507434e52..4b40cb61e2 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON false response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON false response.bru	
@@ -20,3 +20,43 @@ body:json {
 assert {
   res.body: eq false
 }
+
+example {
+  name: test JSON false response example
+  
+  request: {
+    url: {{httpfaker}}/api/echo/custom
+    mode: json
+    body:json: {
+      {
+        "headers": { "content-type": "application/json" },
+        "content": "false"
+      }
+    }
+  }
+  
+  response: {
+    headers: {
+      server: nginx/1.26.0
+      date: Mon, 27 Oct 2025 22:37:33 GMT
+      content-type: application/json
+      transfer-encoding: chunked
+      connection: keep-alive
+      strict-transport-security: max-age=63072000; includeSubdomains
+      x-frame-options: DENY
+      x-content-type-options: nosniff
+    }
+  
+    status: {
+      code: 200
+      text: 
+    }
+  
+    body: {
+      type: json
+      content: '''
+        false
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON number response.bru b/packages/bruno-tests/collection/response-parsing/test JSON number response.bru
index 8f995b395d..b82df98c07 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON number response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON number response.bru	
@@ -20,3 +20,43 @@ body:json {
 assert {
   res.body: eq 3.1
 }
+
+example {
+  name: test JSON number response example
+  
+  request: {
+    url: {{httpfaker}}/api/echo/custom
+    mode: json
+    body:json: {
+      {
+        "headers": { "content-type": "application/json" },
+        "content": "3.1"
+      }
+    }
+  }
+  
+  response: {
+    headers: {
+      server: nginx/1.26.0
+      date: Mon, 27 Oct 2025 22:37:41 GMT
+      content-type: application/json
+      transfer-encoding: chunked
+      connection: keep-alive
+      strict-transport-security: max-age=63072000; includeSubdomains
+      x-frame-options: DENY
+      x-content-type-options: nosniff
+    }
+  
+    status: {
+      code: 200
+      text: 
+    }
+  
+    body: {
+      type: json
+      content: '''
+        3.1
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON string with quotes response.bru b/packages/bruno-tests/collection/response-parsing/test JSON string with quotes response.bru
index d262ff0841..917e67f8a8 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON string with quotes response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON string with quotes response.bru	
@@ -20,3 +20,43 @@ body:json {
 assert {
   res.body: eq '"ok"'
 }
+
+example {
+  name: test JSON string with quotes response example
+  
+  request: {
+    url: {{httpfaker}}/api/echo/custom
+    mode: json
+    body:json: {
+      {
+        "headers": { "content-type": "application/json" },
+        "contentJSON": "\"ok\""
+      }
+    }
+  }
+  
+  response: {
+    headers: {
+      server: nginx/1.26.0
+      date: Mon, 27 Oct 2025 22:36:51 GMT
+      content-type: application/json
+      transfer-encoding: chunked
+      connection: keep-alive
+      strict-transport-security: max-age=63072000; includeSubdomains
+      x-frame-options: DENY
+      x-content-type-options: nosniff
+    }
+  
+    status: {
+      code: 200
+      text: 
+    }
+  
+    body: {
+      type: json
+      content: '''
+        "ok"
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON true response.bru b/packages/bruno-tests/collection/response-parsing/test JSON true response.bru
index 7f4c0bd659..7fe416f713 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON true response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON true response.bru	
@@ -20,3 +20,43 @@ body:json {
 assert {
   res.body: eq true
 }
+
+example {
+  name: test JSON true response example
+  
+  request: {
+    url: {{httpfaker}}/api/echo/custom
+    mode: json
+    body:json: {
+      {
+        "headers": { "content-type": "application/json" },
+        "content": "true"
+      }
+    }
+  }
+  
+  response: {
+    headers: {
+      server: nginx/1.26.0
+      date: Mon, 27 Oct 2025 22:37:22 GMT
+      content-type: application/json
+      transfer-encoding: chunked
+      connection: keep-alive
+      strict-transport-security: max-age=63072000; includeSubdomains
+      x-frame-options: DENY
+      x-content-type-options: nosniff
+    }
+  
+    status: {
+      code: 200
+      text: 
+    }
+  
+    body: {
+      type: json
+      content: '''
+        true
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON unsafe-int response.bru b/packages/bruno-tests/collection/response-parsing/test JSON unsafe-int response.bru
index db4fe3bcc3..329f621f45 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON unsafe-int response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON unsafe-int response.bru	
@@ -24,3 +24,43 @@ assert {
 docs {
   Note: This test is not perfect, we should match the unparsed raw-response with the expected string version of the unsafe-integer
 }
+
+example {
+  name: test JSON unsafe-int response example
+  
+  request: {
+    url: {{httpfaker}}/api/echo/custom
+    mode: json
+    body:json: {
+      {
+        "headers": { "content-type": "application/json" },
+        "content": "90071992547409919876"
+      }
+    }
+  }
+  
+  response: {
+    headers: {
+      server: nginx/1.26.0
+      date: Mon, 27 Oct 2025 22:37:52 GMT
+      content-type: application/json
+      transfer-encoding: chunked
+      connection: keep-alive
+      strict-transport-security: max-age=63072000; includeSubdomains
+      x-frame-options: DENY
+      x-content-type-options: nosniff
+    }
+  
+    status: {
+      code: 200
+      text: 
+    }
+  
+    body: {
+      type: json
+      content: '''
+        90071992547409920000
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-tests/collection/response-parsing/test invalid JSON response with formatting.bru b/packages/bruno-tests/collection/response-parsing/test invalid JSON response with formatting.bru
index 57e2a68724..ca84df5499 100644
--- a/packages/bruno-tests/collection/response-parsing/test invalid JSON response with formatting.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test invalid JSON response with formatting.bru	
@@ -20,3 +20,44 @@ body:json {
 assert {
   res.body: eq hello\n\tworld
 }
+
+example {
+  name: test invalid JSON response with formatting example
+  
+  request: {
+    url: {{httpfaker}}/api/echo/custom
+    mode: json
+    body:json: {
+      {
+        "headers": { "content-type": "application/json" },
+        "content": "hello\n\tworld"
+      }
+    }
+  }
+  
+  response: {
+    headers: {
+      server: nginx/1.26.0
+      date: Mon, 27 Oct 2025 22:38:39 GMT
+      content-type: application/json
+      transfer-encoding: chunked
+      connection: keep-alive
+      strict-transport-security: max-age=63072000; includeSubdomains
+      x-frame-options: DENY
+      x-content-type-options: nosniff
+    }
+  
+    status: {
+      code: 200
+      text: 
+    }
+  
+    body: {
+      type: json
+      content: '''
+        hello
+        	world
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-tests/collection/response-parsing/test plain text response with formatting.bru b/packages/bruno-tests/collection/response-parsing/test plain text response with formatting.bru
index af9a871441..8eafa4301c 100644
--- a/packages/bruno-tests/collection/response-parsing/test plain text response with formatting.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test plain text response with formatting.bru	
@@ -20,3 +20,44 @@ body:json {
 assert {
   res.body: eq hello\n\tworld
 }
+
+example {
+  name: test plain text response with formatting example
+  
+  request: {
+    url: {{httpfaker}}/api/echo/custom
+    mode: json
+    body:json: {
+      {
+        "headers": { "content-type": "text/plain" },
+        "content": "hello\n\tworld"
+      }
+    }
+  }
+  
+  response: {
+    headers: {
+      server: nginx/1.26.0
+      date: Mon, 27 Oct 2025 22:38:28 GMT
+      content-type: text/plain
+      transfer-encoding: chunked
+      connection: keep-alive
+      strict-transport-security: max-age=63072000; includeSubdomains
+      x-frame-options: DENY
+      x-content-type-options: nosniff
+    }
+  
+    status: {
+      code: 200
+      text: 
+    }
+  
+    body: {
+      type: text
+      content: '''
+        hello
+        	world
+      '''
+    }
+  }
+}
diff --git a/packages/bruno-tests/collection/response-parsing/test plain text utf16 response.bru b/packages/bruno-tests/collection/response-parsing/test plain text utf16 response.bru
index 096985f0ac..a66a9628a8 100644
--- a/packages/bruno-tests/collection/response-parsing/test plain text utf16 response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test plain text utf16 response.bru	
@@ -20,3 +20,43 @@ body:json {
 assert {
   res.body: eq "this is encoded with utf16"
 }
+
+example {
+  name: test plain text utf16 response example
+  
+  request: {
+    url: {{httpfaker}}/api/echo/custom
+    mode: json
+    body:json: {
+      {
+        "headers": { "content-type": "text/plain; charset=utf-16" },
+        "contentBase64": "dABoAGkAcwAgAGkAcwAgAGUAbgBjAG8AZABlAGQAIAB3AGkAdABoACAAdQB0AGYAMQA2AA=="
+      }
+    }
+  }
+  
+  response: {
+    headers: {
+      server: nginx/1.26.0
+      date: Mon, 27 Oct 2025 22:38:02 GMT
+      content-type: text/plain; charset=utf-16
+      transfer-encoding: chunked
+      connection: keep-alive
+      strict-transport-security: max-age=63072000; includeSubdomains
+      x-frame-options: DENY
+      x-content-type-options: nosniff
+    }
+  
+    status: {
+      code: 200
+      text: 
+    }
+  
+    body: {
+      type: text
+      content: '''
+        this is encoded with utf16
+      '''
+    }
+  }
+}
diff --git a/tests/response-examples/create-example.spec.ts b/tests/response-examples/create-example.spec.ts
index 5e1f6d4f14..79e87b50b3 100644
--- a/tests/response-examples/create-example.spec.ts
+++ b/tests/response-examples/create-example.spec.ts
@@ -7,14 +7,16 @@ test.describe('Create Response Examples', () => {
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
-    await test.step('Send request and create example', async () => {
+    await test.step('Send request and validate example creation', async () => {
       await page.getByTestId('send-arrow-icon').click();
-      await page.getByTestId('response-bookmark-btn').click();
+      // Wait for 30 seconds for the response bookmark button to be visible, on slower internet connections it may take longer to get the response.
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
 
       await expect(page.getByText('Save Response as Example')).toBeVisible();
       await expect(page.getByTestId('create-example-name-input')).toBeVisible();
       await expect(page.getByTestId('create-example-description-input')).toBeVisible();
 
+      await page.getByTestId('create-example-name-input').clear();
       await page.getByTestId('create-example-name-input').fill('Test Example from Bookmark');
       await page.getByTestId('create-example-description-input').fill('This is a test example created from response bookmark');
       await page.getByRole('button', { name: 'Create Example' }).click();
@@ -22,27 +24,38 @@ test.describe('Create Response Examples', () => {
     });
   });
 
-  test('should require example name to create', async ({ pageWithUserData: page }) => {
+  test('Validate name is required to create example', async ({ pageWithUserData: page }) => {
     await test.step('Open collection and request', async () => {
       await page.locator('#sidebar-collection-name').getByText('collection').click();
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
-    await test.step('Test name requirement', async () => {
+    await test.step('Validate error when name is empty', async () => {
       await page.getByTestId('send-arrow-icon').click();
-      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
 
-      await expect(page.getByRole('button', { name: 'Create Example' })).toBeDisabled();
-      await page.getByTestId('create-example-name-input').fill('Required Name');
       await expect(page.getByRole('button', { name: 'Create Example' })).toBeEnabled();
-      await page.getByRole('button', { name: 'Cancel' }).click();
+
+      // Clear the pre-filled name to test validation
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByRole('button', { name: 'Create Example' }).click();
+      await expect(page.getByTestId('name-error')).toBeVisible();
+      await expect(page.getByTestId('name-error')).toHaveText('Example name is required');
+    });
+
+    await test.step('Create example with valid name', async () => {
+      await page.getByTestId('create-example-name-input').fill('Required Name');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      // Modal should close and example should be created
+      await expect(page.getByText('Save Response as Example')).not.toBeVisible();
     });
   });
 
   test('should close modal when cancelled', async ({ pageWithUserData: page }) => {
     await test.step('Test modal cancellation', async () => {
       await page.getByTestId('send-arrow-icon').click();
-      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
       await page.getByRole('button', { name: 'Cancel' }).click();
       await expect(page.getByText('Save Response as Example')).not.toBeVisible();
     });
@@ -56,15 +69,16 @@ test.describe('Create Response Examples', () => {
 
     await test.step('Test form reset', async () => {
       await page.locator('#send-request').getByRole('img').nth(2).click();
-      await page.waitForTimeout(2000);
-      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
 
       await page.getByTestId('create-example-name-input').fill('Test Name');
       await page.getByTestId('create-example-description-input').fill('Test Description');
       await page.getByRole('button', { name: 'Cancel' }).click();
 
-      await page.getByTestId('response-bookmark-btn').click();
-      await expect(page.getByTestId('create-example-name-input')).toHaveValue('');
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      // The name field should have the pre-filled default value
+      await expect(page.getByTestId('create-example-name-input')).toHaveValue('echo-request example');
+      // Description should still be empty
       await expect(page.getByTestId('create-example-description-input')).toHaveValue('');
       await page.getByRole('button', { name: 'Cancel' }).click();
     });
@@ -78,8 +92,9 @@ test.describe('Create Response Examples', () => {
 
     await test.step('Create example and verify sidebar visibility', async () => {
       await page.getByTestId('send-arrow-icon').click();
-      await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
 
+      await page.getByTestId('create-example-name-input').clear();
       await page.getByTestId('create-example-name-input').fill('Sidebar Test Example');
       await page.getByTestId('create-example-description-input').fill('This example should appear in the sidebar');
       await page.getByRole('button', { name: 'Create Example' }).click();
@@ -87,10 +102,45 @@ test.describe('Create Response Examples', () => {
 
     await test.step('Verify example appears in sidebar', async () => {
       await page.getByTestId('request-item-chevron').click();
-      const exampleItem = page.locator('.collection-item-name').getByText('Sidebar Test Example');
+      const exampleItem = page.locator('.collection-item-name').getByText('Sidebar Test Example', { exact: true });
       await expect(exampleItem).toBeVisible();
 
       await exampleItem.click();
     });
   });
+
+  test('Cleanup: Delete all created examples', async ({ pageWithUserData: page }) => {
+    await test.step('Delete Test Example from Bookmark', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Test Example from Bookmark', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+
+    await test.step('Delete Required Name example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Required Name', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click({ timeout: 30000 });
+      await expect(exampleItem).not.toBeVisible();
+    });
+
+    await test.step('Delete Sidebar Test Example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Sidebar Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+  });
 });
diff --git a/tests/response-examples/edit-example.spec.ts b/tests/response-examples/edit-example.spec.ts
index bc13e9d147..20f6274e7b 100644
--- a/tests/response-examples/edit-example.spec.ts
+++ b/tests/response-examples/edit-example.spec.ts
@@ -1,15 +1,15 @@
 import { test, expect } from '../../playwright';
-
 test.describe('Edit Response Examples', () => {
-  test('should enter edit mode when edit button is clicked', async ({ pageWithUserData: page }) => {
+  test('should enter edit mode and show editable fields when edit button is clicked', async ({ pageWithUserData: page }) => {
     await test.step('Open collection and request', async () => {
       await page.locator('#sidebar-collection-name').getByText('collection').click();
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
-    await test.step('make a successful request, and create an example', async () => {
+    await test.step('Make a successful request and create an example', async () => {
       await page.getByTestId('send-arrow-icon').click();
       await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('create-example-name-input').clear();
       await page.getByTestId('create-example-name-input').fill('Test Example');
       await page.getByTestId('create-example-description-input').fill('This is a test example');
       await page.getByRole('button', { name: 'Create Example' }).click();
@@ -21,7 +21,7 @@ test.describe('Edit Response Examples', () => {
       await exampleItem.click();
     });
 
-    await test.step('Test edit mode', async () => {
+    await test.step('Verify edit mode functionality', async () => {
       await expect(page.getByTestId('response-example-title')).toBeVisible();
       await expect(page.getByTestId('response-example-edit-btn')).toBeVisible();
       await page.getByTestId('response-example-edit-btn').click();
@@ -32,19 +32,31 @@ test.describe('Edit Response Examples', () => {
     });
   });
 
-  test('should allow editing example name', async ({ pageWithUserData: page }) => {
+  test('should successfully update example name and persist changes', async ({ pageWithUserData: page }) => {
     await test.step('Open collection and request', async () => {
       await page.locator('#sidebar-collection-name').getByText('collection').click();
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
+    await test.step('Create example to update', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Original Example Name');
+      await page.getByTestId('create-example-description-input').fill('Original description');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Original Example Name', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
     await test.step('Open existing example', async () => {
-      const exampleItem = page.locator('.collection-item-name').getByText('Test Example', { exact: true });
+      const exampleItem = page.locator('.collection-item-name').getByText('Original Example Name', { exact: true });
       await expect(exampleItem).toBeVisible();
       await exampleItem.click();
     });
 
-    await test.step('Edit example name', async () => {
+    await test.step('Update example name and verify persistence', async () => {
       await page.getByTestId('response-example-edit-btn').click();
       await page.getByTestId('response-example-name-input').clear();
       await page.getByTestId('response-example-name-input').fill('Updated Example Name');
@@ -53,19 +65,31 @@ test.describe('Edit Response Examples', () => {
     });
   });
 
-  test('should allow editing example description', async ({ pageWithUserData: page }) => {
+  test('should successfully update example description and persist changes', async ({ pageWithUserData: page }) => {
     await test.step('Open collection and request', async () => {
       await page.locator('#sidebar-collection-name').getByText('collection').click();
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
+    await test.step('Create example to update description', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Description Test Example');
+      await page.getByTestId('create-example-description-input').fill('Original description');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Description Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
     await test.step('Open existing example', async () => {
-      const exampleItem = page.locator('.collection-item-name').getByText('Updated Example Name', { exact: true });
+      const exampleItem = page.locator('.collection-item-name').getByText('Description Test Example', { exact: true });
       await expect(exampleItem).toBeVisible();
       await exampleItem.click();
     });
 
-    await test.step('Edit example description', async () => {
+    await test.step('Update example description and verify persistence', async () => {
       await page.getByTestId('response-example-edit-btn').click();
       await page.getByTestId('response-example-description-input').clear();
       await page.getByTestId('response-example-description-input').fill('Updated description for the example');
@@ -74,19 +98,31 @@ test.describe('Edit Response Examples', () => {
     });
   });
 
-  test('should cancel editing and revert changes', async ({ pageWithUserData: page }) => {
+  test('should discard changes and revert to original values when cancel is clicked', async ({ pageWithUserData: page }) => {
     await test.step('Open collection and request', async () => {
       await page.locator('#sidebar-collection-name').getByText('collection').click();
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
+    await test.step('Create example to test cancel functionality', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Cancel Test Example');
+      await page.getByTestId('create-example-description-input').fill('Original description for cancel test');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Cancel Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
     await test.step('Open existing example', async () => {
-      const exampleItem = page.locator('.collection-item-name').getByText('Updated Example Name', { exact: true });
+      const exampleItem = page.locator('.collection-item-name').getByText('Cancel Test Example', { exact: true });
       await expect(exampleItem).toBeVisible();
       await exampleItem.click();
     });
 
-    await test.step('Test cancel editing', async () => {
+    await test.step('Test cancel functionality and verify reversion', async () => {
       const originalName = await page.getByTestId('response-example-title').textContent();
       await page.getByTestId('response-example-edit-btn').click();
       await page.getByTestId('response-example-name-input').clear();
@@ -96,19 +132,31 @@ test.describe('Edit Response Examples', () => {
     });
   });
 
-  test('should support keyboard shortcuts for saving', async ({ pageWithUserData: page }) => {
+  test('should save changes using keyboard shortcut (Cmd+S)', async ({ pageWithUserData: page }) => {
     await test.step('Open collection and request', async () => {
       await page.locator('#sidebar-collection-name').getByText('collection').click();
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
+    await test.step('Create example to test keyboard shortcut', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Keyboard Shortcut Test Example');
+      await page.getByTestId('create-example-description-input').fill('Original description for keyboard test');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Keyboard Shortcut Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
     await test.step('Open existing example', async () => {
-      const exampleItem = page.locator('.collection-item-name').getByText('Updated Example Name');
+      const exampleItem = page.locator('.collection-item-name').getByText('Keyboard Shortcut Test Example', { exact: true });
       await expect(exampleItem).toBeVisible();
       await exampleItem.click();
     });
 
-    await test.step('Test keyboard shortcut', async () => {
+    await test.step('Test keyboard shortcut save functionality', async () => {
       await page.getByTestId('response-example-edit-btn').click();
       await page.getByTestId('response-example-name-input').clear();
       await page.getByTestId('response-example-name-input').fill('Keyboard Shortcut Test');
@@ -116,4 +164,66 @@ test.describe('Edit Response Examples', () => {
       await expect(page.getByTestId('response-example-title')).toHaveText('Keyboard Shortcut Test');
     });
   });
+
+  test('Cleanup: Delete all created examples', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Delete Test Example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+
+    await test.step('Delete Updated Example Name', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Updated Example Name', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+
+    await test.step('Delete Description Test Example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Description Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+
+    await test.step('Delete Cancel Test Example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Cancel Test Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+
+    await test.step('Delete Keyboard Shortcut Test', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Keyboard Shortcut Test', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+  });
 });
diff --git a/tests/response-examples/collection/bruno.json b/tests/response-examples/fixtures/collection/bruno.json
similarity index 100%
rename from tests/response-examples/collection/bruno.json
rename to tests/response-examples/fixtures/collection/bruno.json
diff --git a/tests/response-examples/collection/echo-request.bru b/tests/response-examples/fixtures/collection/echo-request.bru
similarity index 100%
rename from tests/response-examples/collection/echo-request.bru
rename to tests/response-examples/fixtures/collection/echo-request.bru
diff --git a/tests/response-examples/init-user-data/collection-security.json b/tests/response-examples/init-user-data/collection-security.json
index abb600094d..ff73a6d1b0 100644
--- a/tests/response-examples/init-user-data/collection-security.json
+++ b/tests/response-examples/init-user-data/collection-security.json
@@ -1,7 +1,7 @@
 {
   "collections": [
     {
-      "path": "{{projectRoot}}/tests/response-examples/collection",
+      "path": "{{projectRoot}}/tests/response-examples/fixtures/collection",
       "securityConfig": {
         "jsSandboxMode": "safe"
       }
diff --git a/tests/response-examples/init-user-data/preferences.json b/tests/response-examples/init-user-data/preferences.json
index ac9b3b7ac8..6a7a777291 100644
--- a/tests/response-examples/init-user-data/preferences.json
+++ b/tests/response-examples/init-user-data/preferences.json
@@ -1,6 +1,6 @@
 {
-    "maximized": true,
+    "maximized": false,
     "lastOpenedCollections": [
-        "{{projectRoot}}/tests/response-examples/collection"
+        "{{projectRoot}}/tests/response-examples/fixtures/collection"
     ]
 }
\ No newline at end of file
diff --git a/tests/response-examples/menu-operations.spec.ts b/tests/response-examples/menu-operations.spec.ts
index e9422086dc..c52ba1ad6e 100644
--- a/tests/response-examples/menu-operations.spec.ts
+++ b/tests/response-examples/menu-operations.spec.ts
@@ -1,20 +1,30 @@
 import { test, expect } from '../../playwright';
+import { closeAllCollections } from '../utils/page';
 
 test.describe('Response Example Menu Operations', () => {
+  test.afterAll(async ({ pageWithUserData: page }) => {
+    await closeAllCollections(page);
+  });
+
   test('should clone a response example via three dots menu', async ({ pageWithUserData: page }) => {
     await test.step('Open collection and request', async () => {
       await page.locator('#sidebar-collection-name').getByText('collection').click();
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
-    await test.step('Create and clone example', async () => {
+    await test.step('Create example', async () => {
       await page.locator('#send-request').getByRole('img').nth(2).click();
       await page.getByTestId('response-bookmark-btn').click();
+      await page.getByTestId('create-example-name-input').clear();
       await page.getByTestId('create-example-name-input').fill('Example to Clone');
       await page.getByRole('button', { name: 'Create Example' }).click();
 
       const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
       await expect(exampleItem).toBeVisible();
+    });
+
+    await test.step('Clone example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
       await exampleItem.hover();
       await page.getByTestId('response-example-menu-icon').last().click();
 
@@ -30,8 +40,20 @@ test.describe('Response Example Menu Operations', () => {
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
+    await test.step('Create example to delete', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Example to Delete');
+      await page.getByTestId('create-example-description-input').fill('This example will be deleted');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Delete', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
     await test.step('Delete example', async () => {
-      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone (Copy)');
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Delete', { exact: true });
       await expect(exampleItem).toBeVisible();
       await exampleItem.hover();
       await page.getByTestId('response-example-menu-icon').last().click();
@@ -49,8 +71,20 @@ test.describe('Response Example Menu Operations', () => {
       await page.locator('.collection-item-name').getByText('echo-request').click();
     });
 
+    await test.step('Create example to rename', async () => {
+      await page.getByTestId('send-arrow-icon').click();
+      await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
+      await page.getByTestId('create-example-name-input').clear();
+      await page.getByTestId('create-example-name-input').fill('Example to Rename');
+      await page.getByTestId('create-example-description-input').fill('This example will be renamed');
+      await page.getByRole('button', { name: 'Create Example' }).click();
+
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Rename', { exact: true });
+      await expect(exampleItem).toBeVisible();
+    });
+
     await test.step('Rename example', async () => {
-      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Rename', { exact: true });
       await expect(exampleItem).toBeVisible();
       await exampleItem.hover();
       await page.getByTestId('response-example-menu-icon').last().click();
@@ -58,12 +92,52 @@ test.describe('Response Example Menu Operations', () => {
       await expect(page.getByText('Rename Example')).toBeVisible();
       const renameExampleNameInput = page.getByTestId('rename-example-name-input');
       await renameExampleNameInput.clear();
-      await renameExampleNameInput.fill('Example to Rename');
+      await renameExampleNameInput.fill('Renamed Example');
       await page.getByRole('button', { name: 'Rename' }).click();
-      const updatedExampleItem = page.locator('.collection-item-name').getByText('Example to Rename');
+      const updatedExampleItem = page.locator('.collection-item-name').getByText('Renamed Example', { exact: true });
       await expect(exampleItem).not.toBeVisible();
       await expect(updatedExampleItem).toBeVisible();
-      await expect(updatedExampleItem).toHaveText('Example to Rename');
+      await expect(updatedExampleItem).toHaveText('Renamed Example');
+    });
+  });
+
+  test('Cleanup: Delete all created examples', async ({ pageWithUserData: page }) => {
+    await test.step('Open collection and request', async () => {
+      await page.locator('#sidebar-collection-name').getByText('collection').click();
+      await page.locator('.collection-item-name').getByText('echo-request').click();
+    });
+
+    await test.step('Delete Example to Clone', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+
+    await test.step('Delete Example to Clone (Copy)', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone (Copy)', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
+    });
+
+    await test.step('Delete Renamed Example', async () => {
+      const exampleItem = page.locator('.collection-item-name').getByText('Renamed Example', { exact: true });
+      await expect(exampleItem).toBeVisible();
+      await exampleItem.click({ button: 'right' });
+      await page.getByText('Delete').click();
+      const deleteButton = page.getByRole('button', { name: 'Delete' });
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await expect(exampleItem).not.toBeVisible();
     });
   });
 });

From 588b5f1585924209f7c8e71bf699de28f03bc707 Mon Sep 17 00:00:00 2001
From: sanish-bruno <sanish@usebruno.com>
Date: Fri, 31 Oct 2025 00:55:38 +0530
Subject: [PATCH 4/4] rm: examples

---
 .../test JSON false response.bru              | 40 ------------------
 .../test JSON number response.bru             | 40 ------------------
 .../test JSON string with quotes response.bru | 40 ------------------
 .../test JSON true response.bru               | 40 ------------------
 .../test JSON unsafe-int response.bru         | 40 ------------------
 ... invalid JSON response with formatting.bru | 41 -------------------
 ...st plain text response with formatting.bru | 41 -------------------
 .../test plain text utf16 response.bru        | 40 ------------------
 8 files changed, 322 deletions(-)

diff --git a/packages/bruno-tests/collection/response-parsing/test JSON false response.bru b/packages/bruno-tests/collection/response-parsing/test JSON false response.bru
index 4b40cb61e2..a507434e52 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON false response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON false response.bru	
@@ -20,43 +20,3 @@ body:json {
 assert {
   res.body: eq false
 }
-
-example {
-  name: test JSON false response example
-  
-  request: {
-    url: {{httpfaker}}/api/echo/custom
-    mode: json
-    body:json: {
-      {
-        "headers": { "content-type": "application/json" },
-        "content": "false"
-      }
-    }
-  }
-  
-  response: {
-    headers: {
-      server: nginx/1.26.0
-      date: Mon, 27 Oct 2025 22:37:33 GMT
-      content-type: application/json
-      transfer-encoding: chunked
-      connection: keep-alive
-      strict-transport-security: max-age=63072000; includeSubdomains
-      x-frame-options: DENY
-      x-content-type-options: nosniff
-    }
-  
-    status: {
-      code: 200
-      text: 
-    }
-  
-    body: {
-      type: json
-      content: '''
-        false
-      '''
-    }
-  }
-}
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON number response.bru b/packages/bruno-tests/collection/response-parsing/test JSON number response.bru
index b82df98c07..8f995b395d 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON number response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON number response.bru	
@@ -20,43 +20,3 @@ body:json {
 assert {
   res.body: eq 3.1
 }
-
-example {
-  name: test JSON number response example
-  
-  request: {
-    url: {{httpfaker}}/api/echo/custom
-    mode: json
-    body:json: {
-      {
-        "headers": { "content-type": "application/json" },
-        "content": "3.1"
-      }
-    }
-  }
-  
-  response: {
-    headers: {
-      server: nginx/1.26.0
-      date: Mon, 27 Oct 2025 22:37:41 GMT
-      content-type: application/json
-      transfer-encoding: chunked
-      connection: keep-alive
-      strict-transport-security: max-age=63072000; includeSubdomains
-      x-frame-options: DENY
-      x-content-type-options: nosniff
-    }
-  
-    status: {
-      code: 200
-      text: 
-    }
-  
-    body: {
-      type: json
-      content: '''
-        3.1
-      '''
-    }
-  }
-}
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON string with quotes response.bru b/packages/bruno-tests/collection/response-parsing/test JSON string with quotes response.bru
index 917e67f8a8..d262ff0841 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON string with quotes response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON string with quotes response.bru	
@@ -20,43 +20,3 @@ body:json {
 assert {
   res.body: eq '"ok"'
 }
-
-example {
-  name: test JSON string with quotes response example
-  
-  request: {
-    url: {{httpfaker}}/api/echo/custom
-    mode: json
-    body:json: {
-      {
-        "headers": { "content-type": "application/json" },
-        "contentJSON": "\"ok\""
-      }
-    }
-  }
-  
-  response: {
-    headers: {
-      server: nginx/1.26.0
-      date: Mon, 27 Oct 2025 22:36:51 GMT
-      content-type: application/json
-      transfer-encoding: chunked
-      connection: keep-alive
-      strict-transport-security: max-age=63072000; includeSubdomains
-      x-frame-options: DENY
-      x-content-type-options: nosniff
-    }
-  
-    status: {
-      code: 200
-      text: 
-    }
-  
-    body: {
-      type: json
-      content: '''
-        "ok"
-      '''
-    }
-  }
-}
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON true response.bru b/packages/bruno-tests/collection/response-parsing/test JSON true response.bru
index 7fe416f713..7f4c0bd659 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON true response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON true response.bru	
@@ -20,43 +20,3 @@ body:json {
 assert {
   res.body: eq true
 }
-
-example {
-  name: test JSON true response example
-  
-  request: {
-    url: {{httpfaker}}/api/echo/custom
-    mode: json
-    body:json: {
-      {
-        "headers": { "content-type": "application/json" },
-        "content": "true"
-      }
-    }
-  }
-  
-  response: {
-    headers: {
-      server: nginx/1.26.0
-      date: Mon, 27 Oct 2025 22:37:22 GMT
-      content-type: application/json
-      transfer-encoding: chunked
-      connection: keep-alive
-      strict-transport-security: max-age=63072000; includeSubdomains
-      x-frame-options: DENY
-      x-content-type-options: nosniff
-    }
-  
-    status: {
-      code: 200
-      text: 
-    }
-  
-    body: {
-      type: json
-      content: '''
-        true
-      '''
-    }
-  }
-}
diff --git a/packages/bruno-tests/collection/response-parsing/test JSON unsafe-int response.bru b/packages/bruno-tests/collection/response-parsing/test JSON unsafe-int response.bru
index 329f621f45..db4fe3bcc3 100644
--- a/packages/bruno-tests/collection/response-parsing/test JSON unsafe-int response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test JSON unsafe-int response.bru	
@@ -24,43 +24,3 @@ assert {
 docs {
   Note: This test is not perfect, we should match the unparsed raw-response with the expected string version of the unsafe-integer
 }
-
-example {
-  name: test JSON unsafe-int response example
-  
-  request: {
-    url: {{httpfaker}}/api/echo/custom
-    mode: json
-    body:json: {
-      {
-        "headers": { "content-type": "application/json" },
-        "content": "90071992547409919876"
-      }
-    }
-  }
-  
-  response: {
-    headers: {
-      server: nginx/1.26.0
-      date: Mon, 27 Oct 2025 22:37:52 GMT
-      content-type: application/json
-      transfer-encoding: chunked
-      connection: keep-alive
-      strict-transport-security: max-age=63072000; includeSubdomains
-      x-frame-options: DENY
-      x-content-type-options: nosniff
-    }
-  
-    status: {
-      code: 200
-      text: 
-    }
-  
-    body: {
-      type: json
-      content: '''
-        90071992547409920000
-      '''
-    }
-  }
-}
diff --git a/packages/bruno-tests/collection/response-parsing/test invalid JSON response with formatting.bru b/packages/bruno-tests/collection/response-parsing/test invalid JSON response with formatting.bru
index ca84df5499..57e2a68724 100644
--- a/packages/bruno-tests/collection/response-parsing/test invalid JSON response with formatting.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test invalid JSON response with formatting.bru	
@@ -20,44 +20,3 @@ body:json {
 assert {
   res.body: eq hello\n\tworld
 }
-
-example {
-  name: test invalid JSON response with formatting example
-  
-  request: {
-    url: {{httpfaker}}/api/echo/custom
-    mode: json
-    body:json: {
-      {
-        "headers": { "content-type": "application/json" },
-        "content": "hello\n\tworld"
-      }
-    }
-  }
-  
-  response: {
-    headers: {
-      server: nginx/1.26.0
-      date: Mon, 27 Oct 2025 22:38:39 GMT
-      content-type: application/json
-      transfer-encoding: chunked
-      connection: keep-alive
-      strict-transport-security: max-age=63072000; includeSubdomains
-      x-frame-options: DENY
-      x-content-type-options: nosniff
-    }
-  
-    status: {
-      code: 200
-      text: 
-    }
-  
-    body: {
-      type: json
-      content: '''
-        hello
-        	world
-      '''
-    }
-  }
-}
diff --git a/packages/bruno-tests/collection/response-parsing/test plain text response with formatting.bru b/packages/bruno-tests/collection/response-parsing/test plain text response with formatting.bru
index 8eafa4301c..af9a871441 100644
--- a/packages/bruno-tests/collection/response-parsing/test plain text response with formatting.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test plain text response with formatting.bru	
@@ -20,44 +20,3 @@ body:json {
 assert {
   res.body: eq hello\n\tworld
 }
-
-example {
-  name: test plain text response with formatting example
-  
-  request: {
-    url: {{httpfaker}}/api/echo/custom
-    mode: json
-    body:json: {
-      {
-        "headers": { "content-type": "text/plain" },
-        "content": "hello\n\tworld"
-      }
-    }
-  }
-  
-  response: {
-    headers: {
-      server: nginx/1.26.0
-      date: Mon, 27 Oct 2025 22:38:28 GMT
-      content-type: text/plain
-      transfer-encoding: chunked
-      connection: keep-alive
-      strict-transport-security: max-age=63072000; includeSubdomains
-      x-frame-options: DENY
-      x-content-type-options: nosniff
-    }
-  
-    status: {
-      code: 200
-      text: 
-    }
-  
-    body: {
-      type: text
-      content: '''
-        hello
-        	world
-      '''
-    }
-  }
-}
diff --git a/packages/bruno-tests/collection/response-parsing/test plain text utf16 response.bru b/packages/bruno-tests/collection/response-parsing/test plain text utf16 response.bru
index a66a9628a8..096985f0ac 100644
--- a/packages/bruno-tests/collection/response-parsing/test plain text utf16 response.bru	
+++ b/packages/bruno-tests/collection/response-parsing/test plain text utf16 response.bru	
@@ -20,43 +20,3 @@ body:json {
 assert {
   res.body: eq "this is encoded with utf16"
 }
-
-example {
-  name: test plain text utf16 response example
-  
-  request: {
-    url: {{httpfaker}}/api/echo/custom
-    mode: json
-    body:json: {
-      {
-        "headers": { "content-type": "text/plain; charset=utf-16" },
-        "contentBase64": "dABoAGkAcwAgAGkAcwAgAGUAbgBjAG8AZABlAGQAIAB3AGkAdABoACAAdQB0AGYAMQA2AA=="
-      }
-    }
-  }
-  
-  response: {
-    headers: {
-      server: nginx/1.26.0
-      date: Mon, 27 Oct 2025 22:38:02 GMT
-      content-type: text/plain; charset=utf-16
-      transfer-encoding: chunked
-      connection: keep-alive
-      strict-transport-security: max-age=63072000; includeSubdomains
-      x-frame-options: DENY
-      x-content-type-options: nosniff
-    }
-  
-    status: {
-      code: 200
-      text: 
-    }
-  
-    body: {
-      type: text
-      content: '''
-        this is encoded with utf16
-      '''
-    }
-  }
-}