diff --git a/packages/bruno-api-docs/e2e/components/environments/env-editor.component.ts b/packages/bruno-api-docs/e2e/components/environments/env-editor.component.ts
index 25d4342b..e842c077 100644
--- a/packages/bruno-api-docs/e2e/components/environments/env-editor.component.ts
+++ b/packages/bruno-api-docs/e2e/components/environments/env-editor.component.ts
@@ -2,10 +2,22 @@ import type { Locator } from '@playwright/test';
 import { BaseComponent } from '../base.component';
 
 export class EnvEditorComponent extends BaseComponent {
+  // Each card and its inputs carry a per-card index (`-card-0`, `-name-input-0`, …) so an individual
+  // card is uniquely addressable; the regexes collect every card's field, ordered by index in the DOM.
   readonly cards = this.page.getByTestId('env-var-cards');
-  readonly cardItems = this.cards.locator('.env-card');
-  readonly nameInputs = this.cards.getByPlaceholder('Name');
-  readonly valueInputs = this.cards.getByPlaceholder('Value');
+  readonly cardItems = this.cards.getByTestId(/^env-var-cards-card-\d+$/);
+  readonly nameInputs = this.cards.getByTestId(/^env-var-cards-name-input-\d+$/);
+  readonly valueInputs = this.cards.getByTestId(/^env-var-cards-value-input-\d+$/);
+  readonly descriptionInputs = this.cards.getByTestId(/^env-var-cards-description-input-\d+$/);
+
+  async selectEnvironment(name: string): Promise<void> {
+    await this.page.getByTestId(`env-pill-${name}`).click();
+  }
+
+  /** The card at a given index, addressed directly by its unique test id. */
+  card(index: number): Locator {
+    return this.cards.getByTestId(`env-var-cards-card-${index}`);
+  }
 
   /** The per-variable enable/disable checkbox, addressed by the variable name via its aria-label. */
   enableToggle(name: string): Locator {
diff --git a/packages/bruno-api-docs/e2e/components/key-value-table/key-value-table.component.ts b/packages/bruno-api-docs/e2e/components/key-value-table/key-value-table.component.ts
index ab45e001..35a18b14 100644
--- a/packages/bruno-api-docs/e2e/components/key-value-table/key-value-table.component.ts
+++ b/packages/bruno-api-docs/e2e/components/key-value-table/key-value-table.component.ts
@@ -7,8 +7,11 @@ export class KeyValueTableComponent extends BaseComponent {
   readonly table: Locator;
   readonly nameInputs: Locator;
   readonly valueInputs: Locator;
+  readonly descriptionInputs: Locator;
+  readonly descriptionHeader: Locator;
   readonly cellErrors: Locator;
   readonly autocomplete: Locator;
+  readonly resizeHandles: Locator;
 
   constructor(page: Page, testId = 'key-value-table') {
     super(page, page.getByTestId(testId));
@@ -16,12 +19,20 @@ export class KeyValueTableComponent extends BaseComponent {
     this.table = page.getByTestId(`${testId}-table`);
     this.nameInputs = page.getByTestId(`${testId}-name-input`);
     this.valueInputs = page.getByTestId(`${testId}-value-input`);
+    this.descriptionInputs = page.getByTestId(`${testId}-description-input`);
+    this.descriptionHeader = page.getByTestId(`${testId}-description-header`);
     this.cellErrors = page.getByTestId(`${testId}-error`);
     this.autocomplete = page.getByTestId('variable-autocomplete');
+    this.resizeHandles = this.table.locator('.col-resize-handle');
   }
 
   /** The per-row enable/disable checkbox, addressed by the row name via its aria-label. */
   enableToggle(name: string): Locator {
     return this.table.getByRole('checkbox', { name: `Enable ${name}` });
   }
+
+  /** A column's header cell, addressed by its `col-*` class — used to measure the column width. */
+  columnHeader(colClass: string): Locator {
+    return this.table.locator(`thead th.${colClass}`);
+  }
 }
diff --git a/packages/bruno-api-docs/e2e/components/playground.component.ts b/packages/bruno-api-docs/e2e/components/playground.component.ts
index 87a75bf8..46644ee0 100644
--- a/packages/bruno-api-docs/e2e/components/playground.component.ts
+++ b/packages/bruno-api-docs/e2e/components/playground.component.ts
@@ -7,6 +7,7 @@ import type { DockMode } from '../../src/utils/playgroundDock';
 
 export class PlaygroundComponent extends BaseComponent {
   readonly keyValueTable = new KeyValueTableComponent(this.page);
+  readonly preRequestVars = new KeyValueTableComponent(this.page, 'variables-pre-request');
   // The Auth tab lives inside the playground request pane; open it with selectTab('auth').
   readonly auth = new RequestAuthComponent(this.page);
   readonly preRequestScriptEditor = new CodeEditorComponent(this.page, 'scripts-editor-pre-request');
@@ -58,6 +59,11 @@ export class PlaygroundComponent extends BaseComponent {
     return this.sidebarPanel.getByTestId('sidebar-example').filter({ hasText: exampleName });
   }
 
+  async open(dock: DockMode = 'bottom'): Promise<void> {
+    await this.page.goto(`/#/?pg=1&dock=${dock}`);
+    await this.runner.waitFor({ state: 'visible' });
+  }
+
   sidebarItem(name: string): Locator {
     return this.treeItems.filter({ hasText: name }).first();
   }
@@ -88,11 +94,6 @@ export class PlaygroundComponent extends BaseComponent {
     return this.page.getByTestId(`playground-dock-${mode}-panel`);
   }
 
-  async open(dock: DockMode = 'bottom'): Promise<void> {
-    await this.page.goto(`/#/?pg=1&dock=${dock}`);
-    await this.runner.waitFor({ state: 'visible' });
-  }
-
   async openRequest(name: string): Promise<void> {
     await this.sidebarItem(name).click();
     await this.view.waitFor({ state: 'visible' });
diff --git a/packages/bruno-api-docs/e2e/tests/playground/env-add-variable.spec.ts b/packages/bruno-api-docs/e2e/tests/playground/env-add-variable.spec.ts
index cdaea6bc..c7a4faa4 100644
--- a/packages/bruno-api-docs/e2e/tests/playground/env-add-variable.spec.ts
+++ b/packages/bruno-api-docs/e2e/tests/playground/env-add-variable.spec.ts
@@ -38,4 +38,33 @@ test.describe('Environment variables — adding rows (card view)', () => {
     await expect(toggle).toBeChecked();
     await expect(card).not.toHaveClass(disabled);
   });
+
+  test('a variable description is editable below the value and persists across an environment switch', async ({
+    playground,
+    envEditor
+  }) => {
+    await playground.open('inline');
+    await playground.openEnvironments();
+
+    // Each variable card carries a Description field (placeholder "Description") under its value.
+    const description = envEditor.descriptionInputs.first();
+    await description.fill('The API host');
+    await expect(description).toHaveValue('The API host');
+
+    // Switching environments and back re-derives the rows from the store; the edit was committed.
+    await envEditor.selectEnvironment('Prod');
+    await envEditor.selectEnvironment('Local');
+    await expect(envEditor.descriptionInputs.first()).toHaveValue('The API host');
+  });
+});
+
+test.describe('Environment variables — descriptions (desktop table)', () => {
+  test.use({ viewport: { width: 1400, height: 900 } });
+
+  test('the non-inline table renders a Description column for variables', async ({ page, playground }) => {
+    // A non-inline dock uses the full KeyValueTable (not the compact cards).
+    await playground.open('bottom');
+    await playground.openEnvironments();
+    await expect(page.getByRole('columnheader', { name: 'Description' })).toBeVisible();
+  });
 });
diff --git a/packages/bruno-api-docs/e2e/tests/playground/keyvalue-table.spec.ts b/packages/bruno-api-docs/e2e/tests/playground/keyvalue-table.spec.ts
index fa98c474..38dfcd51 100644
--- a/packages/bruno-api-docs/e2e/tests/playground/keyvalue-table.spec.ts
+++ b/packages/bruno-api-docs/e2e/tests/playground/keyvalue-table.spec.ts
@@ -71,4 +71,21 @@ test.describe('KeyValueTable — tooltips & mobile scroll', () => {
     await toggle.check();
     await expect(toggle).toBeChecked();
   });
+
+  test('columns are resizable by dragging a header divider', async ({ page, playground }) => {
+    const { keyValueTable } = playground;
+    const valueHeader = keyValueTable.columnHeader('col-value');
+    const before = (await valueHeader.boundingBox())!.width;
+
+    // Drag the Name/Value divider (the first handle) to the right: Name grows and Value shrinks by
+    // the same amount (zero-sum), so the Value column gets measurably narrower.
+    const handle = keyValueTable.resizeHandles.first();
+    const box = (await handle.boundingBox())!;
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+    await page.mouse.down();
+    await page.mouse.move(box.x + box.width / 2 + 80, box.y + box.height / 2, { steps: 6 });
+    await page.mouse.up();
+
+    await expect.poll(async () => (await valueHeader.boundingBox())!.width).toBeLessThan(before - 30);
+  });
 });
diff --git a/packages/bruno-api-docs/e2e/tests/playground/playground-descriptions.spec.ts b/packages/bruno-api-docs/e2e/tests/playground/playground-descriptions.spec.ts
new file mode 100644
index 00000000..2293398f
--- /dev/null
+++ b/packages/bruno-api-docs/e2e/tests/playground/playground-descriptions.spec.ts
@@ -0,0 +1,72 @@
+import { test, expect } from '../../playwright';
+
+// A request whose params, headers, variables and form body all carry authored descriptions.
+const DESCRIBED = '/?fixture=descriptions#/?pg=1&dock=bottom';
+
+test.describe('Playground — field descriptions', () => {
+  test.beforeEach(async ({ page, playground }) => {
+    await page.goto(DESCRIBED);
+    await playground.openRequest('Described Request');
+  });
+
+  test('query params show a Description column with the authored text', async ({ playground }) => {
+    await playground.selectTab('params');
+    await expect(playground.keyValueTable.descriptionHeader).toBeVisible();
+    await expect(playground.keyValueTable.descriptionInputs.first()).toHaveValue(
+      'Filter orders by their fulfilment status'
+    );
+  });
+
+  test('headers show descriptions, normalizing the legacy {content} object form to text', async ({ playground }) => {
+    await playground.selectTab('headers');
+    const descriptions = playground.keyValueTable.descriptionInputs;
+    await expect(descriptions.nth(0)).toHaveValue('Bearer access token for the API');
+    await expect(descriptions.nth(1)).toHaveValue('Correlation id echoed back on the response');
+  });
+
+  test('pre-request variables show the authored description', async ({ playground }) => {
+    await playground.selectTab('variables');
+    await expect(playground.preRequestVars.descriptionInputs.first()).toHaveValue('The order identifier under test');
+  });
+
+  test('form-urlencoded body fields show the authored description', async ({ playground }) => {
+    await playground.selectTab('body');
+    await expect(playground.keyValueTable.descriptionInputs.first()).toHaveValue('The OAuth2 grant type to use');
+  });
+
+  test('a description is editable and the edit persists across a tab switch', async ({ playground }) => {
+    await playground.selectTab('params');
+    const description = playground.keyValueTable.descriptionInputs.first();
+    await description.fill('Only open, unfulfilled orders');
+    await expect(description).toHaveValue('Only open, unfulfilled orders');
+
+    // Leaving the tab unmounts the table; returning re-reads from the edited request state.
+    await playground.selectTab('headers');
+    await playground.selectTab('params');
+    await expect(playground.keyValueTable.descriptionInputs.first()).toHaveValue('Only open, unfulfilled orders');
+  });
+
+  test('a description is multiline — pressing Enter starts a new line', async ({ page, playground }) => {
+    await playground.selectTab('params');
+    const description = playground.keyValueTable.descriptionInputs.first();
+    await description.click();
+    await description.press('ControlOrMeta+a');
+    await page.keyboard.type('first line');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('second line');
+    await expect(description).toHaveValue('first line\nsecond line');
+  });
+
+  test('a description does not soft-wrap — long text stays on one line until Enter', async ({ page, playground }) => {
+    await playground.selectTab('params');
+    const description = playground.keyValueTable.descriptionInputs.first();
+    await description.click();
+    await description.press('ControlOrMeta+a');
+    const oneLineHeight = (await description.boundingBox())!.height;
+
+    await page.keyboard.type(
+      'this is a very long single line of description text that would wrap onto several lines if soft wrapping were enabled in this column'
+    );
+    expect((await description.boundingBox())!.height).toBeLessThan(oneLineHeight + 4);
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx b/packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx
index 08282f13..75b757c0 100644
--- a/packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx
+++ b/packages/bruno-api-docs/src/components/HighlightedInput/HighlightedInput.tsx
@@ -25,6 +25,7 @@ interface HighlightedInputProps {
   title?: string;
   testId?: string;
   multiline?: boolean;
+  noWrap?: boolean;
 }
 
 interface HoveredToken {
@@ -75,7 +76,8 @@ export const HighlightedInput: React.FC<HighlightedInputProps> = ({
   variablesAutocomplete = true,
   title,
   testId,
-  multiline = false
+  multiline = false,
+  noWrap = false
 }) => {
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
   const mirrorRef = useRef<HTMLDivElement | null>(null);
@@ -178,6 +180,11 @@ export const HighlightedInput: React.FC<HighlightedInputProps> = ({
     if (!multiline || !el) return;
     el.style.height = 'auto';
     el.style.height = `${el.scrollHeight}px`;
+    const mirror = mirrorRef.current;
+    if (mirror) {
+      mirror.scrollTop = el.scrollTop;
+      mirror.scrollLeft = el.scrollLeft;
+    }
   }, [value, multiline]);
 
   useLayoutEffect(() => {
@@ -352,14 +359,20 @@ export const HighlightedInput: React.FC<HighlightedInputProps> = ({
 
   return (
     <StyledWrapper
-      className={`highlight-input${multiline ? ' highlight-input--multiline' : ''}`}
+      className={`highlight-input${multiline ? ' highlight-input--multiline' : ''}${
+        multiline && noWrap ? ' highlight-input--nowrap' : ''
+      }`}
       onMouseMove={handleMouseMove}
       onMouseLeave={scheduleClose}
     >
       <div className="highlight-input-mirror" aria-hidden="true" ref={mirrorRef}>
         {renderTokens(value, isFound)}
       </div>
-      {multiline ? <textarea {...fieldProps} rows={1} /> : <input {...fieldProps} type="text" />}
+      {multiline ? (
+        <textarea {...fieldProps} rows={1} wrap={noWrap ? 'off' : undefined} />
+      ) : (
+        <input {...fieldProps} type="text" />
+      )}
       {hovered && (
         <Portal>
           <HoverCard
diff --git a/packages/bruno-api-docs/src/components/HighlightedInput/StyledWrapper.ts b/packages/bruno-api-docs/src/components/HighlightedInput/StyledWrapper.ts
index df1ee37a..dcfd8ef2 100644
--- a/packages/bruno-api-docs/src/components/HighlightedInput/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/components/HighlightedInput/StyledWrapper.ts
@@ -90,6 +90,17 @@ export const StyledWrapper = styled.div`
     white-space: pre-wrap;
     overflow-wrap: break-word;
   }
+
+  &.highlight-input--nowrap .text-input {
+    overflow-x: auto;
+    white-space: pre;
+    overflow-wrap: normal;
+  }
+
+  &.highlight-input--nowrap .highlight-input-mirror {
+    white-space: pre;
+    overflow-wrap: normal;
+  }
 `;
 
 export const HoverCard = styled.div`
diff --git a/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.css b/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.css
index 7b7a522b..c4a94841 100644
--- a/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.css
+++ b/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.css
@@ -49,6 +49,7 @@
 }
 
 .key-value-table thead th {
+  position: relative;
   padding: 0.5rem 0.625rem 0.4375rem;
   text-align: left;
   font-size: 0.75rem;
@@ -65,6 +66,29 @@
   border-right: none;
 }
 
+.key-value-table .col-resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: var(--kvt-height);
+  right: -0.125rem;
+  z-index: 2;
+  width: 0.25rem;
+  cursor: col-resize;
+  touch-action: none;
+  background-color: transparent;
+}
+
+.key-value-table .col-resize-handle:hover,
+.key-value-table .col-resize-handle.is-resizing {
+  background-color: var(--primary-color);
+}
+
+.key-value-table-wrapper.is-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .key-value-table col.col-key {
   width: calc(30% + 1.625rem);
 }
@@ -73,10 +97,22 @@
   width: auto;
 }
 
+.key-value-table col.col-description {
+  width: 25%;
+}
+
 .key-value-table col.col-actions {
   width: 3.75rem;
 }
 
+.key-value-table .col-description {
+  vertical-align: middle;
+}
+
+.key-value-table .col-description .highlight-input {
+  width: 100%;
+}
+
 .key-value-table tbody tr {
   transition: background-color 0.1s ease;
 }
@@ -210,19 +246,13 @@
   align-items: center;
   gap: 0.5rem;
   padding-left: 0.625rem;
-}
-
-.key-value-table .value-cell-trailing .delete-button {
-  margin-right: 1.25rem;
+  padding-right: 0.625rem;
 }
 
 .key-value-table .value-cell:has(.secret-value) .value-cell-trailing {
   gap: 0.625rem;
   padding-left: 0;
-}
-
-.key-value-table .value-cell:has(.secret-value) .value-cell-trailing .delete-button {
-  margin-right: 0.625rem;
+  padding-right: 0.625rem;
 }
 
 .key-value-table .delete-button {
diff --git a/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.spec.tsx b/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.spec.tsx
new file mode 100644
index 00000000..739c377a
--- /dev/null
+++ b/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.spec.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { useRenderToDom } from '../../hooks/useRenderToDom';
+import { query } from '../../test-utils/dom';
+import KeyValueTable, { type KeyValueRow } from './KeyValueTable';
+
+const noop = () => {};
+const rows: KeyValueRow[] = [
+  { id: 'r1', name: 'X-Trace', value: 'abc', enabled: true, description: 'Correlation id' }
+];
+
+const headerTexts = (root: ReturnType<typeof useRenderToDom>) =>
+  root.querySelectorAll('thead th').map((th) => th.text.trim());
+
+describe('KeyValueTable — description column', () => {
+  it('renders a Description column and the authored description when showDescription is set', () => {
+    const root = useRenderToDom(<KeyValueTable data={rows} onChange={noop} showDescription />);
+    expect(headerTexts(root)).toContain('Description');
+    expect(root.querySelector('[data-testid="key-value-table-description-input"]')).toBeTruthy();
+    expect(root.text).toContain('Correlation id');
+  });
+
+  it('omits the Description column by default', () => {
+    const root = useRenderToDom(<KeyValueTable data={rows} onChange={noop} />);
+    expect(headerTexts(root)).not.toContain('Description');
+    expect(root.querySelector('[data-testid="key-value-table-description-input"]')).toBeFalsy();
+  });
+
+  it('orders columns name → value → Description → delete when actions are inline', () => {
+    // Headers/vars pass inlineActions (delete normally sits inside the value cell); adding the
+    // description column pushes delete back out to its own trailing column, matching the app.
+    const root = useRenderToDom(<KeyValueTable data={rows} onChange={noop} inlineActions showDescription />);
+    const columnClasses = root.querySelectorAll('colgroup col').map((col) => col.getAttribute('class'));
+    expect(columnClasses).toEqual(['col-key', 'col-value', 'col-description', 'col-actions']);
+  });
+
+  it('makes only the description no-wrap; a multiline value cell keeps soft-wrapping', () => {
+    const root = useRenderToDom(<KeyValueTable data={rows} onChange={noop} multilineValues showDescription />);
+    const valueClass = query(root, '.col-value .highlight-input').getAttribute('class');
+    const descriptionClass = query(root, '.col-description .highlight-input').getAttribute('class');
+    expect(valueClass).toContain('highlight-input--multiline');
+    expect(valueClass).not.toContain('highlight-input--nowrap');
+    expect(descriptionClass).toContain('highlight-input--nowrap');
+  });
+});
+
+describe('KeyValueTable — resizable columns', () => {
+  it('renders a resize handle on every resizable column except the last, by default', () => {
+    // Key, Value and Description are resizable; the delete column is fixed and the last resizable
+    // column (Description) has no right neighbour to trade width with, so handles land on Key + Value.
+    const root = useRenderToDom(<KeyValueTable data={rows} onChange={noop} showDescription />);
+    expect(root.querySelectorAll('.col-resize-handle').length).toBe(2);
+  });
+
+  it('renders no resize handles when resizableColumns is disabled', () => {
+    const root = useRenderToDom(<KeyValueTable data={rows} onChange={noop} showDescription resizableColumns={false} />);
+    expect(root.querySelector('.col-resize-handle')).toBeFalsy();
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.tsx b/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.tsx
index dea08e61..ae4c3e87 100644
--- a/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.tsx
+++ b/packages/bruno-api-docs/src/components/KeyValueTable/KeyValueTable.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useResolvedVariables } from '../../hooks/useVariableResolver';
 import { useEditableRows } from '../../hooks/useEditableRows';
 import { Tooltip } from '../../ui/Tooltip/Tooltip';
@@ -8,6 +8,9 @@ import { SecretValue } from '../../ui/SecretValue/SecretValue';
 import './KeyValueTable.css';
 import Checkbox from '../../ui/Checkbox/Checkbox';
 
+// Smallest a column may be dragged to; the neighbour it trades width with is held to the same floor.
+const MIN_COLUMN_WIDTH = 60;
+
 export interface KeyValueRow {
   id: string;
   name: string;
@@ -47,6 +50,9 @@ interface KeyValueTableProps {
   inlineActions?: boolean;
   multilineValues?: boolean;
   secretEditByDefault?: boolean;
+  showDescription?: boolean;
+  /** Let the user drag column dividers to resize (on by default; the delete column stays fixed). */
+  resizableColumns?: boolean;
   testId?: string;
 }
 
@@ -76,11 +82,132 @@ const KeyValueTable: React.FC<KeyValueTableProps> = ({
   inlineActions = false,
   multilineValues = false,
   secretEditByDefault = false,
+  showDescription = false,
+  resizableColumns = true,
   testId = 'key-value-table'
 }) => {
   const { isFound, names } = useResolvedVariables();
   const { rows, updateField, removeRow } = useEditableRows(data, onChange, { disableNewRow, makeNewRow, addWhenComplete });
 
+  // With a description column the delete action must sit in its own trailing column (after
+  // Description) rather than inline in the value cell, so any inline extras (e.g. the variable
+  // type dropdown) still render beside the value while delete stays last — matching the app.
+  const actionsAsColumn = showActions && (!inlineActions || showDescription);
+  const inlineDelete = showActions && !disableDelete && !actionsAsColumn;
+
+  const tableRef = useRef<HTMLTableElement>(null);
+  const [columnWidths, setColumnWidths] = useState<Record<string, string>>({});
+  const [resizingKey, setResizingKey] = useState<string | null>(null);
+  const dragCleanup = useRef<(() => void) | null>(null);
+  useEffect(() => () => dragCleanup.current?.(), []);
+
+  // The resize divider spans the whole column (header + rows), like the app. The handle is anchored in
+  // the header cell, so it's stretched to the full table height via a `--kvt-height` CSS variable set
+  // imperatively from a ResizeObserver — no React state, so growing/removing rows (e.g. autosizing a
+  // multiline cell) never re-renders the table. (Effects don't run under SSR; until measured the
+  // handle falls back to header height.)
+  useEffect(() => {
+    const table = tableRef.current;
+    if (!table || typeof ResizeObserver === 'undefined') return;
+    const setHeight = (h: number) => table.style.setProperty('--kvt-height', `${h}px`);
+    setHeight(table.offsetHeight);
+    const observer = new ResizeObserver((entries) => {
+      const box = entries[0]?.borderBoxSize?.[0];
+      setHeight(box ? box.blockSize : table.offsetHeight);
+    });
+    observer.observe(table);
+    return () => observer.disconnect();
+  }, []);
+
+  // Columns the user can resize, left→right. The delete column is fixed chrome, and the last
+  // resizable column gets no handle (it has no right neighbour to trade width with) — like the app.
+  const resizableKeys = resizableColumns
+    ? [
+        'key',
+        'value',
+        ...(!inlineActions ? additionalColumns.map((col) => col.key) : []),
+        ...(showDescription ? ['description'] : [])
+      ]
+    : [];
+  const lastResizableKey = resizableKeys[resizableKeys.length - 1];
+
+  // Drag a divider to resize: the dragged column and its right neighbour trade width zero-sum, so the
+  // table width never changes and no other column shifts. Widths are written straight to the two <col>
+  // elements during the drag (coalesced to one write per animation frame, no re-render) and only the
+  // two changed columns are committed to state as percentages on release, so they keep scaling with the
+  // pane. Pointer capture keeps the drag alive even if the pointer leaves the window/iframe.
+  const startResize = (event: React.PointerEvent<HTMLElement>, columnKey: string) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const table = tableRef.current;
+    const nextKey = resizableKeys[resizableKeys.indexOf(columnKey) + 1];
+    if (!table || !nextKey) return;
+
+    const columnCol = table.querySelector<HTMLTableColElement>(`col.col-${columnKey}`);
+    const nextCol = table.querySelector<HTMLTableColElement>(`col.col-${nextKey}`);
+    const columnHeader = table.querySelector<HTMLElement>(`thead th.col-${columnKey}`);
+    const nextHeader = table.querySelector<HTMLElement>(`thead th.col-${nextKey}`);
+    if (!columnCol || !nextCol || !columnHeader || !nextHeader) return;
+
+    const handle = event.currentTarget;
+    const pointerId = event.pointerId;
+    const startX = event.clientX;
+    const startWidth = columnHeader.offsetWidth;
+    const nextStartWidth = nextHeader.offsetWidth;
+
+    let frame = 0;
+    let clamped = 0;
+    const paint = () => {
+      frame = 0;
+      columnCol.style.width = `${startWidth + clamped}px`;
+      nextCol.style.width = `${nextStartWidth - clamped}px`;
+    };
+    const onMove = (moveEvent: PointerEvent) => {
+      const delta = moveEvent.clientX - startX;
+      clamped = Math.max(MIN_COLUMN_WIDTH - startWidth, Math.min(nextStartWidth - MIN_COLUMN_WIDTH, delta));
+      if (!frame) frame = requestAnimationFrame(paint);
+    };
+
+    const finish = () => {
+      if (frame) {
+        cancelAnimationFrame(frame);
+        paint();
+      }
+      dragCleanup.current?.();
+      dragCleanup.current = null;
+      setResizingKey(null);
+      const tableWidth = table.offsetWidth;
+      if (tableWidth <= 0) return;
+      setColumnWidths((current) => ({
+        ...current,
+        [columnKey]: `${(columnHeader.offsetWidth / tableWidth) * 100}%`,
+        [nextKey]: `${(nextHeader.offsetWidth / tableWidth) * 100}%`
+      }));
+    };
+
+    handle.setPointerCapture?.(pointerId);
+    dragCleanup.current = () => {
+      cancelAnimationFrame(frame);
+      handle.releasePointerCapture?.(pointerId);
+      handle.removeEventListener('pointermove', onMove);
+      handle.removeEventListener('pointerup', finish);
+      handle.removeEventListener('pointercancel', finish);
+    };
+    handle.addEventListener('pointermove', onMove);
+    handle.addEventListener('pointerup', finish);
+    handle.addEventListener('pointercancel', finish);
+    setResizingKey(columnKey);
+  };
+
+  const resizeHandle = (columnKey: string) =>
+    resizableColumns && columnKey !== lastResizableKey ? (
+      <span
+        className={`col-resize-handle${resizingKey === columnKey ? ' is-resizing' : ''}`}
+        onPointerDown={(event) => startResize(event, columnKey)}
+        aria-hidden="true"
+      />
+    ) : null;
+
   const cellError = (row: KeyValueRow, index: number, field: 'name' | 'value') => {
     const message = getRowError?.(row, index, field);
     if (!message) return null;
@@ -94,27 +221,43 @@ const KeyValueTable: React.FC<KeyValueTableProps> = ({
   };
 
   return (
-    <div className={`key-value-table-wrapper ${className}`} data-testid={testId}>
+    <div className={`key-value-table-wrapper ${className}${resizingKey ? ' is-resizing' : ''}`} data-testid={testId}>
       <div className="key-value-table-container" data-testid={`${testId}-container`}>
-        <table className="key-value-table" data-testid={`${testId}-table`}>
+        <table ref={tableRef} className="key-value-table" data-testid={`${testId}-table`}>
           <colgroup>
-            <col className="col-key" />
-            <col className="col-value" />
+            <col className="col-key" style={{ width: columnWidths.key }} />
+            <col className="col-value" style={{ width: columnWidths.value }} />
             {!inlineActions &&
-              additionalColumns.map((col) => <col key={col.key} className={`col-${col.key}`} />)}
-            {!inlineActions && showActions && <col className="col-actions" />}
+              additionalColumns.map((col) => (
+                <col key={col.key} className={`col-${col.key}`} style={{ width: columnWidths[col.key] }} />
+              ))}
+            {showDescription && <col className="col-description" style={{ width: columnWidths.description }} />}
+            {actionsAsColumn && <col className="col-actions" />}
           </colgroup>
           <thead>
             <tr>
-              <th className="col-key">{keyPlaceholder}</th>
-              <th className="col-value">{valueHeader ?? valuePlaceholder}</th>
+              <th className="col-key">
+                {keyPlaceholder}
+                {resizeHandle('key')}
+              </th>
+              <th className="col-value">
+                {valueHeader ?? valuePlaceholder}
+                {resizeHandle('value')}
+              </th>
               {!inlineActions &&
                 additionalColumns.map((col) => (
                   <th key={col.key} className={`col-${col.key}`}>
                     {col.label}
+                    {resizeHandle(col.key)}
                   </th>
                 ))}
-              {!inlineActions && showActions && <th className="col-actions"></th>}
+              {showDescription && (
+                <th className="col-description" data-testid={`${testId}-description-header`}>
+                  Description
+                  {resizeHandle('description')}
+                </th>
+              )}
+              {actionsAsColumn && <th className="col-actions"></th>}
             </tr>
           </thead>
           <tbody>
@@ -213,12 +356,12 @@ const KeyValueTable: React.FC<KeyValueTableProps> = ({
                       <div className="value-cell">
                         <div className="value-cell-field">{valueField}</div>
                         {!isLastEmptyRow && cellError(row, index, 'value')}
-                        {!isLastEmptyRow && (
+                        {!isLastEmptyRow && (additionalColumns.length > 0 || inlineDelete) && (
                           <div className="value-cell-trailing">
                             {additionalColumns.map((col) => (
                               <React.Fragment key={col.key}>{col.render(row, index, updateCell)}</React.Fragment>
                             ))}
-                            {showActions && !disableDelete && deleteButton}
+                            {inlineDelete && deleteButton}
                           </div>
                         )}
                       </div>
@@ -232,7 +375,22 @@ const KeyValueTable: React.FC<KeyValueTableProps> = ({
                         {!isLastEmptyRow && col.render(row, index, updateCell)}
                       </td>
                     ))}
-                  {!inlineActions && showActions && (
+                  {showDescription && (
+                    <td className="col-description">
+                      <HighlightedInput
+                        value={typeof row.description === 'string' ? row.description : ''}
+                        placeholder={isLastEmptyRow ? 'Description' : ''}
+                        onValueChange={(v) => updateField(index, 'description', v)}
+                        isFound={isFound}
+                        names={names}
+                        variablesAutocomplete={false}
+                        multiline
+                        noWrap
+                        testId={`${testId}-description-input`}
+                      />
+                    </td>
+                  )}
+                  {actionsAsColumn && (
                     <td className="col-actions">{!isLastEmptyRow && !disableDelete && deleteButton}</td>
                   )}
                 </tr>
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
index a743c5cc..768dc9bf 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/CollectionSettingsView/CollectionSettingsView.tsx
@@ -13,6 +13,7 @@ import { useAppDispatch } from '../../../../../store/hooks';
 import { updateCollectionSettings } from '@slices/playground';
 import { countEnabled, getItemDocs, scriptsArrayToObject, scriptsObjectToArray } from '../../../../../utils/schemaHelpers';
 import { rowToVariable } from '../../../../../utils/variableDataType';
+import { keyValueRowToEntry } from '../../../../../utils/keyValueRow';
 import { actionsToPostResponseVars, postResponseVarsToActions } from '../../../../../utils/request';
 import { StyledWrapper } from './StyledWrapper';
 
@@ -29,20 +30,7 @@ const CollectionSettings: React.FC<CollectionSettingsProps> = ({ collection }) =
   };
 
   const handleHeadersChange = (rows: KeyValueRow[]) => {
-    const originals = collection.request?.headers ?? [];
-    const originalByName = new Map(originals.filter((header) => header.name).map((header): [string, typeof header] => [header.name as string, header]));
-    updateRequest({
-      ...collection.request,
-      headers: rows.map((row) => {
-        const description = 'description' in row ? row.description : originalByName.get(row.name)?.description;
-        return {
-          name: row.name,
-          value: row.value,
-          disabled: !row.enabled,
-          ...(description !== undefined ? { description } : {})
-        };
-      })
-    });
+    updateRequest({ ...collection.request, headers: rows.map(keyValueRowToEntry) });
   };
 
   const handleVariablesChange = (rows: KeyValueRow[]) => {
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.spec.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.spec.tsx
new file mode 100644
index 00000000..7ffd7151
--- /dev/null
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.spec.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import type { HttpRequest } from '@opencollection/types/requests/http';
+import { useRenderToDom } from '../../../../../hooks/useRenderToDom';
+import { BodyTab } from './BodyTab';
+import type { RequestBody } from '../../../../../utils/schemaHelpers';
+
+const noop = () => {};
+const item = { http: { method: 'POST', url: 'https://api.example.com' } } as HttpRequest;
+
+const columnLabels = (root: ReturnType<typeof useRenderToDom>) =>
+  root.querySelectorAll('thead th').map((th) => th.text.trim());
+
+describe('BodyTab — form body descriptions', () => {
+  it('shows a Description column with authored form-urlencoded field descriptions', () => {
+    const body = {
+      type: 'form-urlencoded',
+      data: [{ name: 'grant_type', value: 'client_credentials', description: 'The OAuth grant type' }]
+    } as RequestBody;
+    const root = useRenderToDom(<BodyTab body={body} item={item} onItemChange={noop} />);
+    expect(columnLabels(root)).toContain('Description');
+    expect(root.text).toContain('The OAuth grant type');
+  });
+
+  it('shows a Description column with authored multipart text-field descriptions', () => {
+    const body = {
+      type: 'multipart-form',
+      data: [{ name: 'meta', value: '{}', type: 'text', description: 'JSON metadata part' }]
+    } as RequestBody;
+    const root = useRenderToDom(<BodyTab body={body} item={item} onItemChange={noop} />);
+    expect(columnLabels(root)).toContain('Description');
+    expect(root.text).toContain('JSON metadata part');
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx
index 89d11c2f..bcabb562 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BodyTab.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import type { HttpRequest } from '@opencollection/types/requests/http';
 import CodeEditor from '../../../../../ui/CodeEditor/CodeEditor';
 import KeyValueTable, { type KeyValueRow } from '../../../../../components/KeyValueTable/KeyValueTable';
+import { getDescription } from '../../../../../utils/request';
+import { keyValueRowToEntry } from '../../../../../utils/keyValueRow';
 import type { RequestBody } from '../../../../../utils/schemaHelpers';
 
 interface BodyTabProps {
@@ -20,11 +22,7 @@ export const BodyTab: React.FC<BodyTabProps> = ({
   const handleFormBodyChange = (formData: KeyValueRow[]) => {
     const updatedBody = {
       type: 'form-urlencoded' as const,
-      data: formData.map(f => ({
-        name: f.name,
-        value: f.value,
-        disabled: !f.enabled
-      }))
+      data: formData.map(keyValueRowToEntry)
     };
     onItemChange({
       ...item,
@@ -37,12 +35,7 @@ export const BodyTab: React.FC<BodyTabProps> = ({
 
   const handleMultipartChange = (rows: KeyValueRow[]) => {
     // Rebuild the text fields from the table; preserve any file fields untouched.
-    const textEntries = rows.map(r => ({
-      name: r.name,
-      value: r.value,
-      type: 'text' as const,
-      disabled: !r.enabled
-    }));
+    const textEntries = rows.map((r) => ({ ...keyValueRowToEntry(r), type: 'text' as const }));
     const fileEntries = (((body as { data?: any[] })?.data as any[]) || []).filter(e => e?.type === 'file');
     onItemChange({
       ...item,
@@ -94,7 +87,8 @@ export const BodyTab: React.FC<BodyTabProps> = ({
             id: `form-${index}`,
             name: field.name || '',
             value: field.value || '',
-            enabled: field.disabled !== true
+            enabled: field.disabled !== true,
+            description: getDescription(field)
           }));
 
           return (
@@ -110,6 +104,7 @@ export const BodyTab: React.FC<BodyTabProps> = ({
                 keyPlaceholder="Key"
                 valuePlaceholder="Value"
                 showEnabled={true}
+                showDescription
               />
             </div>
           );
@@ -123,7 +118,8 @@ export const BodyTab: React.FC<BodyTabProps> = ({
               id: `mp-${index}`,
               name: e.name || '',
               value: e.value || '',
-              enabled: e.disabled !== true
+              enabled: e.disabled !== true,
+              description: getDescription(e)
             }));
           const fileEntries = entries.filter(e => e?.type === 'file');
 
@@ -140,6 +136,7 @@ export const BodyTab: React.FC<BodyTabProps> = ({
                 keyPlaceholder="Key"
                 valuePlaceholder="Value"
                 showEnabled={true}
+                showDescription
               />
               {fileEntries.length > 0 && (
                 <div className="mt-4 text-sm" style={{ color: 'var(--text-secondary)' }}>
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BulkEdit/BulkEdit.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BulkEdit/BulkEdit.tsx
index 77c8f563..1664bef1 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BulkEdit/BulkEdit.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/BulkEdit/BulkEdit.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import CodeEditor from '../../../../../../ui/CodeEditor/CodeEditor';
 import type { KeyValueRow } from '../../../../../../components/KeyValueTable/KeyValueTable';
-import { parseBulkKeyValue, serializeBulkKeyValue } from '../../../../../../utils/bulkKeyValue';
+import { parseBulkKeyValue, preserveDescriptions, serializeBulkKeyValue } from '../../../../../../utils/bulkKeyValue';
 import { StyledWrapper } from './StyledWrapper';
 
 export interface BulkEditProps {
@@ -11,19 +11,12 @@ export interface BulkEditProps {
 }
 
 const BulkEdit: React.FC<BulkEditProps> = ({ data, onChange, idPrefix = 'bulk' }) => {
+  const originalRef = useRef(data);
   const [text, setText] = useState(() => serializeBulkKeyValue(data));
 
   const handleChange = (value: string) => {
     setText(value);
-    const parsed = parseBulkKeyValue(value);
-    onChange(
-      parsed.map((item, index) => ({
-        id: `${idPrefix}-${index}`,
-        name: item.name,
-        value: item.value,
-        enabled: item.enabled
-      }))
-    );
+    onChange(preserveDescriptions(parseBulkKeyValue(value), originalRef.current, idPrefix));
   };
 
   return (
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx
index 53b3eb8d..bd6d1cd4 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.spec.tsx
@@ -57,4 +57,20 @@ describe('HeadersTab', () => {
     );
     expect(root.querySelector('.cell-error')).toBeNull();
   });
+
+  it('shows a Description column with authored descriptions (bare string or {content} form)', () => {
+    const root = useRenderToDom(
+      <HeadersTab
+        headers={[
+          { name: 'Authorization', value: 'Bearer x', description: 'The bearer token' },
+          { name: 'Accept', value: 'text/html', description: { content: 'The media type', type: 'text' } }
+        ]}
+        onHeadersChange={noop}
+      />
+    );
+    const columns = root.querySelectorAll('thead th').map((th) => th.text.trim());
+    expect(columns).toContain('Description');
+    expect(root.text).toContain('The bearer token');
+    expect(root.text).toContain('The media type');
+  });
 });
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
index c68b9edd..70917c86 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/HeadersTab/HeadersTab.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react';
 import KeyValueTable, { type KeyValueRow } from '../../../../../../components/KeyValueTable/KeyValueTable';
 import { STANDARD_HTTP_HEADERS, MIME_TYPES } from '../../../../../../constants/httpHeaders';
 import { HEADER_NAME_REGEX, HEADER_VALUE_REGEX } from '../../../../../../constants/regex';
+import { getDescription } from '../../../../../../utils/request';
 import BulkEdit from '../BulkEdit/BulkEdit';
 import { StyledWrapper } from './StyledWrapper';
 
@@ -31,7 +32,7 @@ const HeadersDisplay: React.FC<Omit<HeadersTabProps, 'title' | 'description'>> =
     name: header.name || '',
     value: header.value || '',
     enabled: !header.disabled,
-    description: header.description
+    description: getDescription(header)
   }));
 
   const toggleBulkEditView = useCallback(() => {
@@ -51,6 +52,7 @@ const HeadersDisplay: React.FC<Omit<HeadersTabProps, 'title' | 'description'>> =
           keyAutocomplete={STANDARD_HTTP_HEADERS}
           valueAutocomplete={MIME_TYPES}
           getRowError={getHeaderError}
+          showDescription
         />
       ) : (
         <BulkEdit data={headersData} onChange={onHeadersChange} idPrefix="header" />
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.spec.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.spec.tsx
new file mode 100644
index 00000000..582e0e49
--- /dev/null
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.spec.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { useRenderToDom } from '../../../../../../hooks/useRenderToDom';
+import { ParamsTab } from './ParamsTab';
+
+const noop = () => {};
+
+const columnLabels = (root: ReturnType<typeof useRenderToDom>) =>
+  root.querySelectorAll('thead th').map((th) => th.text.trim());
+
+describe('ParamsTab — descriptions', () => {
+  it('shows a Description column with authored query-param descriptions', () => {
+    const root = useRenderToDom(
+      <ParamsTab
+        params={[{ name: 'page', value: '1', type: 'query', description: 'Page number, 1-based' }]}
+        onParamsChange={noop}
+      />
+    );
+    expect(columnLabels(root)).toContain('Description');
+    expect(root.text).toContain('Page number, 1-based');
+  });
+
+  it('normalizes an object-form ({content}) param description to its text', () => {
+    const root = useRenderToDom(
+      <ParamsTab
+        params={[{ name: 'q', value: 'cats', type: 'query', description: { content: 'Search query', type: 'text' } }]}
+        onParamsChange={noop}
+      />
+    );
+    expect(root.text).toContain('Search query');
+  });
+});
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
index ab64f4f7..6e76b4ef 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/ParamsTab/ParamsTab.tsx
@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
 import KeyValueTable, { type KeyValueRow } from '../../../../../KeyValueTable/KeyValueTable';
+import { getDescription } from '../../../../../../utils/request';
 import { StyledWrapper } from './StyledWrapper';
 
 interface ParamsTabProps {
-  params: Array<{ name?: string; value?: string; disabled?: boolean; type?: string }>;
+  params: Array<{ name?: string; value?: string; disabled?: boolean; type?: string; description?: unknown }>;
   onParamsChange: (params: KeyValueRow[]) => void;
   title?: string;
   description?: string;
@@ -56,6 +57,7 @@ const ParamsSection: React.FC<ParamsSectionProps> = React.memo(({
       showActions={showActions}
       disableNewRow={disableNewRow}
       readOnlyKey={readOnlyKey}
+      showDescription
     />
   </div>
 ));
@@ -80,7 +82,8 @@ export const ParamsTab: React.FC<ParamsTabProps> = ({
         name: param.name || '',
         value: param.value || '',
         enabled: !param.disabled,
-        type: param.type || 'query'
+        type: param.type || 'query',
+        description: getDescription(param)
       };
       (row.type === 'path' ? pathData : queryData).push(row);
     });
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/VariablesTab/VariablesTab.spec.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/VariablesTab/VariablesTab.spec.tsx
index 8122347d..1bc69e41 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/VariablesTab/VariablesTab.spec.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/VariablesTab/VariablesTab.spec.tsx
@@ -95,4 +95,17 @@ describe('VariablesTab', () => {
     expect(query(root, 'td.col-value textarea').text).toBe('localhost');
     expect(query(root, '.var-type-label').text.trim()).toBe('string');
   });
+
+  it('shows a Description column with the authored variable description', () => {
+    const root = useRenderToDom(
+      <VariablesTab
+        variables={[{ name: 'token', value: 'abc', description: 'The auth token' }]}
+        onVariablesChange={noop}
+      />
+    );
+    const columns = root.querySelectorAll('thead th').map((th) => th.text.trim());
+    expect(columns).toContain('Description');
+    // The description cell is a multiline editor (a textarea), matching the app — Enter adds a line.
+    expect(query(root, 'td.col-description textarea').text).toBe('The auth token');
+  });
 });
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/VariablesTab/VariablesTab.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/VariablesTab/VariablesTab.tsx
index acf4e71d..b7017354 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/VariablesTab/VariablesTab.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/Common/VariablesTab/VariablesTab.tsx
@@ -6,7 +6,7 @@ import { unwrapVariableTyped } from '../../../../../../utils/variableResolution'
 import { toDataType } from '../../../../../../utils/variableDataType';
 import { VARIABLE_NAME_REGEX } from '../../../../../../constants/regex';
 import { variableTypeColumn } from '../VariableTypeControl/variableTypeColumn';
-import type { PostResponseVar } from '../../../../../../utils/request';
+import { getDescription, type PostResponseVar } from '../../../../../../utils/request';
 import { StyledWrapper } from './StyledWrapper';
 
 interface VariablesTabProps {
@@ -49,7 +49,7 @@ export const VariablesTab: React.FC<VariablesTabProps> = ({
           value,
           enabled: !variable.disabled,
           dataType: toDataType(dataType),
-          description: (variable as Variable).description,
+          description: getDescription(variable as Variable),
           originalValue: (variable as Variable).value
         };
       }),
@@ -64,7 +64,7 @@ export const VariablesTab: React.FC<VariablesTabProps> = ({
         value: variable.expr || '',
         enabled: !variable.disabled,
         scope: variable.scope,
-        description: variable.description
+        description: getDescription(variable)
       })),
     [postResponseVars]
   );
@@ -91,6 +91,7 @@ export const VariablesTab: React.FC<VariablesTabProps> = ({
           multilineValues={true}
           additionalColumns={dataTypeColumns}
           getRowError={getVariableError}
+          showDescription
         />
       </section>
 
@@ -112,6 +113,7 @@ export const VariablesTab: React.FC<VariablesTabProps> = ({
             showEnabled={true}
             inlineActions={true}
             getRowError={getVariableError}
+            showDescription
           />
         </section>
       )}
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.spec.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.spec.tsx
index c3a07142..2198c97c 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.spec.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, it, expect } from 'vitest';
+import { useRenderToDom } from '../../../../../../hooks/useRenderToDom';
+import { query, getByTestId, queryByTestId } from '../../../../../../test-utils/dom';
 import EnvVarCards from './EnvVarCards';
 import type { KeyValueRow } from '../../../../../../components/KeyValueTable/KeyValueTable';
 
@@ -9,24 +10,63 @@ const rows: KeyValueRow[] = [
   { id: '2', name: 'token', value: '', enabled: true, secret: true }
 ];
 
+const rowWithDescription: KeyValueRow[] = [
+  { id: '1', name: 'host', value: 'localhost', enabled: true, description: 'The API host' }
+];
+
 describe('EnvVarCards', () => {
-  it('derives child test ids from the testId prop and renders placeholders', () => {
-    const html = renderToStaticMarkup(<EnvVarCards rows={rows} onChange={() => undefined} testId="env-var-cards" />);
-    expect(html).toContain('data-testid="env-var-cards"');
-    expect(html).toContain('data-testid="env-var-cards-name-0"');
-    expect(html).toContain('data-testid="env-var-cards-value-0"');
-    expect(html).toContain('placeholder="Name"');
-    expect(html).toContain('placeholder="Value"');
+  it('derives per-card indexed child test ids from the testId prop and labels the Name and Value fields', () => {
+    const root = useRenderToDom(<EnvVarCards rows={rows} onChange={() => undefined} testId="env-var-cards" />);
+    expect(getByTestId(root, 'env-var-cards')).toBeTruthy();
+    expect(getByTestId(root, 'env-var-cards-name-input-0').getAttribute('placeholder')).toBe('Name');
+    expect(getByTestId(root, 'env-var-cards-value-input-0').getAttribute('placeholder')).toBe('Value');
+  });
+
+  it('gives each card a unique indexed test id so multiple cards are individually addressable', () => {
+    const root = useRenderToDom(<EnvVarCards rows={rows} onChange={() => undefined} testId="env-var-cards" />);
+    // Two rows -> two distinct cards, each with its own -card-<index> / -name-input-<index> ids.
+    expect(getByTestId(root, 'env-var-cards-card-0')).toBeTruthy();
+    expect(getByTestId(root, 'env-var-cards-card-1')).toBeTruthy();
+    expect(getByTestId(root, 'env-var-cards-name-input-0').getAttribute('value')).toBe('host');
+    expect(getByTestId(root, 'env-var-cards-name-input-1').getAttribute('value')).toBe('token');
   });
 
   it('omits its test ids when no testId is given', () => {
-    const html = renderToStaticMarkup(<EnvVarCards rows={rows} onChange={() => undefined} />);
-    expect(html).not.toContain('env-var-cards');
+    const root = useRenderToDom(<EnvVarCards rows={rows} onChange={() => undefined} />);
+    expect(queryByTestId(root, 'env-var-cards')).toBeNull();
+    expect(queryByTestId(root, 'env-var-cards-name-input-0')).toBeNull();
+  });
+
+  it('renders a secret row as a masked password input labelled Value', () => {
+    const root = useRenderToDom(<EnvVarCards rows={rows} onChange={() => undefined} />);
+    const secret = query(root, 'input[type="password"]');
+    expect(secret.getAttribute('placeholder')).toBe('Value');
+  });
+
+  it('renders an editable Description field below the value when showDescription is set', () => {
+    const root = useRenderToDom(
+      <EnvVarCards rows={rows} onChange={() => undefined} showDescription testId="env-var-cards" />
+    );
+    expect(getByTestId(root, 'env-var-cards-description-input-0').getAttribute('placeholder')).toBe('Description');
+
+    // The description sits after (below) the value within the first card's body.
+    const order = query(root, '.env-card .body')
+      .querySelectorAll('[data-testid]')
+      .map((el) => el.getAttribute('data-testid'));
+    expect(order.indexOf('env-var-cards-description-input-0')).toBeGreaterThan(
+      order.indexOf('env-var-cards-value-input-0')
+    );
+  });
+
+  it('shows the authored description as the Description field value', () => {
+    const root = useRenderToDom(
+      <EnvVarCards rows={rowWithDescription} onChange={() => undefined} showDescription testId="env-var-cards" />
+    );
+    expect(getByTestId(root, 'env-var-cards-description-input-0').text).toBe('The API host');
   });
 
-  it('renders a secret row as a masked input with a Value placeholder', () => {
-    const html = renderToStaticMarkup(<EnvVarCards rows={rows} onChange={() => undefined} />);
-    expect(html).toContain('type="password"');
-    expect(html).toContain('placeholder="Value"');
+  it('omits the Description field by default', () => {
+    const root = useRenderToDom(<EnvVarCards rows={rows} onChange={() => undefined} testId="env-var-cards" />);
+    expect(queryByTestId(root, 'env-var-cards-description-input-0')).toBeNull();
   });
 });
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
index b0a5534a..3dfc254f 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/EnvVarCards.tsx
@@ -15,6 +15,7 @@ interface EnvVarCardsProps {
   makeNewRow?: () => Partial<KeyValueRow>;
   disableNewRow?: boolean;
   editableDataType?: boolean;
+  showDescription?: boolean;
   secretEditByDefault?: boolean;
   addWhenComplete?: boolean;
   testId?: string;
@@ -26,6 +27,7 @@ const EnvVarCards: React.FC<EnvVarCardsProps> = ({
   makeNewRow,
   disableNewRow = false,
   editableDataType = false,
+  showDescription = false,
   secretEditByDefault = false,
   addWhenComplete = false,
   testId
@@ -37,7 +39,11 @@ const EnvVarCards: React.FC<EnvVarCardsProps> = ({
       {rows.map((row, index) => {
         const isBlankRow = index === rows.length - 1 && (!row.name || row.name.trim() === '');
         return (
-          <div key={row.id} className={cx('env-card', { disabled: !row.enabled })}>
+          <div
+            key={row.id}
+            className={cx('env-card', { disabled: !row.enabled })}
+            data-testid={testId ? `${testId}-card-${index}` : undefined}
+          >
             {!isBlankRow && (
               <Checkbox
                 className="enabled"
@@ -50,7 +56,7 @@ const EnvVarCards: React.FC<EnvVarCardsProps> = ({
               <div className="name-row">
                 <input
                   className="name"
-                  data-testid={testId ? `${testId}-name-${index}` : undefined}
+                  data-testid={testId ? `${testId}-name-input-${index}` : undefined}
                   placeholder="Name"
                   value={row.name}
                   onChange={(e) => updateRow(index, { name: e.target.value })}
@@ -80,7 +86,7 @@ const EnvVarCards: React.FC<EnvVarCardsProps> = ({
                 ) : (
                   <textarea
                     className="value-input"
-                    data-testid={testId ? `${testId}-value-${index}` : undefined}
+                    data-testid={testId ? `${testId}-value-input-${index}` : undefined}
                     placeholder="Value"
                     rows={1}
                     value={row.value}
@@ -96,6 +102,16 @@ const EnvVarCards: React.FC<EnvVarCardsProps> = ({
                   />
                 )}
               </div>
+              {showDescription && (
+                <textarea
+                  className="description-input"
+                  data-testid={testId ? `${testId}-description-input-${index}` : undefined}
+                  placeholder="Description"
+                  rows={1}
+                  value={typeof row.description === 'string' ? row.description : ''}
+                  onChange={(e) => updateRow(index, { description: e.target.value })}
+                />
+              )}
             </div>
           </div>
         );
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts b/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
index 6983e009..283fffc0 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvVarCards/StyledWrapper.ts
@@ -62,12 +62,12 @@ export const StyledWrapper = styled.div`
 
   .env-card .value .value-secret .secret-value-input {
     font-size: var(--oc-font-size-sm);
+    font-family: 'Fira Code', var(--font-mono);
   }
 
-  .env-card .value-input {
-    flex: 0 1 auto;
+  .env-card .value-input,
+  .env-card .description-input {
     field-sizing: content;
-    max-width: 100%;
     border: none;
     outline: none;
     background: transparent;
@@ -82,8 +82,19 @@ export const StyledWrapper = styled.div`
     line-height: 1.5;
   }
 
+  .env-card .value-input {
+    flex: 0 1 auto;
+    max-width: 100%;
+    font-family: 'Fira Code', var(--font-mono);
+  }
+
+  .env-card .description-input {
+    width: 100%;
+  }
+
   .env-card .name::placeholder,
-  .env-card .value-input::placeholder {
+  .env-card .value-input::placeholder,
+  .env-card .description-input::placeholder {
     color: var(--oc-colors-text-subtext0);
     opacity: 0.6;
   }
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvironmentsView.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvironmentsView.tsx
index 089bd820..21de7b6a 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvironmentsView.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/EnvironmentsView/EnvironmentsView.tsx
@@ -134,12 +134,13 @@ const EnvironmentsView: React.FC<EnvironmentsViewProps> = ({ collection, compact
     makeNewRow?: () => Partial<KeyValueRow>;
     disableNewRow?: boolean;
     editableDataType?: boolean;
+    showDescription?: boolean;
   }
 
   const renderVars = (
     rows: KeyValueRow[],
     onChange: (rows: KeyValueRow[]) => void,
-    { makeNewRow, disableNewRow = false, editableDataType = false }: RenderVarsOptions = {}
+    { makeNewRow, disableNewRow = false, editableDataType = false, showDescription = false }: RenderVarsOptions = {}
   ): React.ReactNode =>
     compact ? (
       <EnvVarCards
@@ -148,6 +149,7 @@ const EnvironmentsView: React.FC<EnvironmentsViewProps> = ({ collection, compact
         makeNewRow={makeNewRow}
         disableNewRow={disableNewRow}
         editableDataType={editableDataType}
+        showDescription={showDescription}
         secretEditByDefault
         addWhenComplete
         testId="env-var-cards"
@@ -161,6 +163,7 @@ const EnvironmentsView: React.FC<EnvironmentsViewProps> = ({ collection, compact
         showEnabled={true}
         multilineValues
         inlineActions={editableDataType}
+        showDescription={showDescription}
         disableNewRow={disableNewRow}
         makeNewRow={makeNewRow}
         addWhenComplete
@@ -173,11 +176,18 @@ const EnvironmentsView: React.FC<EnvironmentsViewProps> = ({ collection, compact
   const panels: Record<EnvTabId, { contentIndicator: number; content: React.ReactNode }> = {
     variables: {
       contentIndicator: plainRows.length,
-      content: renderVars(plainRows, (rows) => commit(rows, secretRows), { editableDataType: true })
+      content: renderVars(plainRows, (rows) => commit(rows, secretRows), {
+        editableDataType: true,
+        showDescription: true
+      })
     },
     secrets: {
       contentIndicator: secretRows.length,
-      content: renderVars(secretRows, (rows) => commit(plainRows, rows), { makeNewRow: () => ({ secret: true }), editableDataType: true })
+      content: renderVars(secretRows, (rows) => commit(plainRows, rows), {
+        makeNewRow: () => ({ secret: true }),
+        editableDataType: true,
+        showDescription: true
+      })
     },
     external: {
       contentIndicator: externalRows.length,
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
index 91b61c39..07a033ae 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/FolderSettingsView/FolderSettingsView.tsx
@@ -5,6 +5,7 @@ import Tabs from '../../../../../ui/Tabs/Tabs';
 import TitleLabel from '../../../../TitleLabel/TitleLabel';
 import { type KeyValueRow } from '../../../../../components/KeyValueTable/KeyValueTable';
 import { rowToVariable } from '../../../../../utils/variableDataType';
+import { keyValueRowToEntry } from '../../../../../utils/keyValueRow';
 import HeadersTab from '../Common/HeadersTab/HeadersTab';
 import VariablesTab from '../Common/VariablesTab/VariablesTab';
 import AuthTab from '../Common/AuthTab/AuthTab';
@@ -34,6 +35,8 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, collection, onF
   const dispatch = useAppDispatch();
   const [activeTab, setActiveTab] = useState('overview');
 
+  // The folder's own auth may itself be `inherit` — resolve the nearest configured parent so the
+  // Auth tab can show "Auth inherited from {name}: {mode}" (matches the request Auth tab).
   const inheritedAuth = useMemo(() => {
     if (folder.request?.auth !== 'inherit') return null;
     const uuid = getItemUuid(folder);
@@ -41,101 +44,40 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, collection, onF
     return getInheritedAuthSummary(collection, ancestry, folder);
   }, [folder, collection]);
 
-  const handleHeadersChange = (headers: KeyValueRow[]) => {
-    const originals = folder.request?.headers ?? [];
-    const originalByName = new Map(
-      originals.filter((header) => header.name).map((header): [string, typeof header] => [header.name as string, header])
-    );
-    const updatedHeaders = headers.map((h) => {
-      const description = 'description' in h ? h.description : originalByName.get(h.name)?.description;
-      return {
-        name: h.name,
-        value: h.value,
-        disabled: !h.enabled,
-        ...(description !== undefined ? { description } : {})
-      };
-    });
-
-    const updatedFolder = {
-      ...folder,
-      request: {
-        ...folder.request,
-        headers: updatedHeaders
-      }
-    };
-
-    const uuid = (folder as any).uuid;
+  // Every edit rebuilds the folder and persists it the same way: push it into the collection (by the
+  // hydrated uuid) and bubble it up. Centralised so the handlers below stay one-liners.
+  const commitFolder = (updatedFolder: Folder) => {
+    const uuid = (updatedFolder as Folder & { uuid?: string }).uuid;
     if (uuid) {
       dispatch(updateFolderInCollection({ uuid, folder: updatedFolder }));
     }
     onFolderChange(updatedFolder);
   };
 
-  const handleVariablesChange = (variables: KeyValueRow[]) => {
-    const updatedFolder = {
-      ...folder,
-      request: {
-        ...folder.request,
-        variables: variables.map(rowToVariable)
-      }
-    };
+  const handleHeadersChange = (headers: KeyValueRow[]) => {
+    commitFolder({ ...folder, request: { ...folder.request, headers: headers.map(keyValueRowToEntry) } });
+  };
 
-    const uuid = (folder as any).uuid;
-    if (uuid) {
-      dispatch(updateFolderInCollection({ uuid, folder: updatedFolder }));
-    }
-    onFolderChange(updatedFolder);
+  const handleVariablesChange = (variables: KeyValueRow[]) => {
+    commitFolder({ ...folder, request: { ...folder.request, variables: variables.map(rowToVariable) } });
   };
 
   const handleScriptChange = (scriptType: 'preRequest' | 'postResponse' | 'tests', value: string) => {
-    const currentScriptsObj = scriptsArrayToObject(folder.request?.scripts);
-    const updatedScriptsObj = { ...currentScriptsObj, [scriptType]: value };
-
-    const updatedFolder = {
+    const updatedScriptsObj = { ...scriptsArrayToObject(folder.request?.scripts), [scriptType]: value };
+    commitFolder({
       ...folder,
-      request: {
-        ...folder.request,
-        scripts: scriptsObjectToArray(updatedScriptsObj)
-      }
-    } as Folder;
-
-    const uuid = (folder as any).uuid;
-    if (uuid) {
-      dispatch(updateFolderInCollection({ uuid, folder: updatedFolder }));
-    }
-    onFolderChange(updatedFolder);
+      request: { ...folder.request, scripts: scriptsObjectToArray(updatedScriptsObj) }
+    } as Folder);
   };
 
   const handleAuthChange = (authType: string) => {
     let auth: any = 'inherit';
-
     if (authType !== 'none' && authType !== 'inherit') {
       auth = { type: authType };
     } else if (authType === 'none') {
       auth = undefined;
     }
-
-    const updatedFolder = {
-      ...folder,
-      request: {
-        ...folder.request,
-        auth
-      }
-    };
-
-    const uuid = (folder as any).uuid;
-    if (uuid) {
-      dispatch(updateFolderInCollection({ uuid, folder: updatedFolder }));
-    }
-    onFolderChange(updatedFolder);
-  };
-
-  const handleFolderAuthChange = (updatedFolder: Folder) => {
-    const uuid = (updatedFolder as any).uuid;
-    if (uuid) {
-      dispatch(updateFolderInCollection({ uuid, folder: updatedFolder }));
-    }
-    onFolderChange(updatedFolder);
+    commitFolder({ ...folder, request: { ...folder.request, auth } });
   };
 
   const renderOverview = () => (
@@ -165,7 +107,7 @@ const FolderSettings: React.FC<FolderSettingsProps> = ({ folder, collection, onF
     <AuthTab
       auth={folder.request?.auth}
       onAuthChange={handleAuthChange}
-      onItemChange={handleFolderAuthChange}
+      onItemChange={commitFolder}
       item={folder}
       description="Configures authentication for this folder. This applies to all requests using the Inherit option in the Auth tab."
       showInherit={true}
diff --git a/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx b/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
index 384d3e64..660bfd08 100644
--- a/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
+++ b/packages/bruno-api-docs/src/components/Playground/Content/Views/PlaygroundView/RequestPane/RequestPane.tsx
@@ -30,6 +30,7 @@ import {
 } from '../../../../../../utils/schemaHelpers';
 import { setUrlQueryParams } from '../../../../../../utils/pathParams';
 import { actionsToPostResponseVars, postResponseVarsToActions, type InheritedAuthSummary } from '../../../../../../utils/request';
+import { keyValueRowToEntry } from '../../../../../../utils/keyValueRow';
 
 interface RequestPaneProps {
   item: HttpRequest;
@@ -41,22 +42,12 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange, inherited
   const [activeTab, setActiveTab] = useState('overview');
 
   const handleParamsChange = (params: KeyValueRow[]) => {
-    const originals = getHttpParams(item) as Array<{ name?: string }>;
-    const originalByName = new Map(
-      originals.filter((param) => param.name).map((param): [string, typeof param] => [param.name as string, param])
-    );
-    const updatedParams = params.map(p => ({
-      ...(originalByName.get(p?.name) ?? {}),
-      name: p?.name,
-      value: p?.value,
-      disabled: !p?.enabled,
-      type: p?.type
-    }));
+    const updatedParams = params.map((p) => ({ ...keyValueRowToEntry(p), type: p.type }));
     const url = setUrlQueryParams(getRequestUrl(item), updatedParams);
     onItemChange({
-      ...item, 
-      http: { 
-        ...item.http, 
+      ...item,
+      http: {
+        ...item.http,
         params: updatedParams,
         url
       }
@@ -64,25 +55,13 @@ const RequestPane: React.FC<RequestPaneProps> = ({ item, onItemChange, inherited
   };
 
   const handleHeadersChange = (headers: KeyValueRow[]) => {
-    const originals = getHttpHeaders(item);
-    const originalByName = new Map(
-      originals.filter((header) => header.name).map((header): [string, typeof header] => [header.name as string, header])
-    );
-    const updatedHeaders = headers.map(h => {
-      const description = 'description' in h ? h.description : originalByName.get(h.name)?.description;
-      return {
-        name: h.name,
-        value: h.value,
-        disabled: !h.enabled,
-        ...(description !== undefined ? { description } : {})
-      };
-    });
-    onItemChange({ 
-      ...item, 
-      http: { 
-        ...item.http, 
-        headers: updatedHeaders 
-      } 
+    const updatedHeaders = headers.map(keyValueRowToEntry);
+    onItemChange({
+      ...item,
+      http: {
+        ...item.http,
+        headers: updatedHeaders
+      }
     });
   };
 
diff --git a/packages/bruno-api-docs/src/dev.tsx b/packages/bruno-api-docs/src/dev.tsx
index 9c2268df..7463e197 100644
--- a/packages/bruno-api-docs/src/dev.tsx
+++ b/packages/bruno-api-docs/src/dev.tsx
@@ -10,6 +10,7 @@ import { createOpenCollectionStore } from './store/store';
 import { sampleCollectionYaml } from './sampleCollection';
 import { foldersFixtureCollection } from './e2eFixtures/foldersCollection';
 import { variablesFixtureCollection } from './e2eFixtures/variablesCollection';
+import { descriptionsFixtureCollection } from './e2eFixtures/descriptionsCollection';
 
 // `?fixture=folders` mounts a nested-folder collection for routing e2e tests;
 const fixture = new URLSearchParams(window.location.search).get('fixture');
@@ -18,7 +19,9 @@ const devCollection =
     ? foldersFixtureCollection
     : fixture === 'vars'
       ? variablesFixtureCollection
-      : sampleCollectionYaml;
+      : fixture === 'descriptions'
+        ? descriptionsFixtureCollection
+        : sampleCollectionYaml;
 
 // Ensure Prism is available globally for any code that might access it
 if (typeof window !== 'undefined') {
diff --git a/packages/bruno-api-docs/src/e2eFixtures/descriptionsCollection.ts b/packages/bruno-api-docs/src/e2eFixtures/descriptionsCollection.ts
new file mode 100644
index 00000000..56279e4e
--- /dev/null
+++ b/packages/bruno-api-docs/src/e2eFixtures/descriptionsCollection.ts
@@ -0,0 +1,36 @@
+import type { OpenCollection } from '@opencollection/types';
+
+// A single request carrying authored descriptions on every editable surface (query params, headers,
+// pre-request variables, form-urlencoded body fields), used to prove the playground shows and edits
+// them. One header uses the legacy `{ content }` object form to exercise description normalization.
+export const descriptionsFixtureCollection = {
+  opencollection: '1.0.0',
+  info: { name: 'Descriptions Demo', version: '1.0.0' },
+  items: [
+    {
+      name: 'Described Request',
+      type: 'http',
+      seq: 1,
+      method: 'POST',
+      url: 'https://api.example.com/orders?status=open',
+      params: [
+        { name: 'status', value: 'open', type: 'query', description: 'Filter orders by their fulfilment status' }
+      ],
+      headers: [
+        { name: 'Authorization', value: 'Bearer token', description: 'Bearer access token for the API' },
+        {
+          name: 'X-Trace',
+          value: 'abc-123',
+          description: { content: 'Correlation id echoed back on the response', type: 'text' }
+        }
+      ],
+      body: {
+        type: 'form-urlencoded',
+        data: [{ name: 'grant_type', value: 'client_credentials', description: 'The OAuth2 grant type to use' }]
+      },
+      runtime: {
+        variables: [{ name: 'orderId', value: 'ord-42', description: 'The order identifier under test' }]
+      }
+    }
+  ]
+} as unknown as OpenCollection;
diff --git a/packages/bruno-api-docs/src/utils/bulkKeyValue.spec.ts b/packages/bruno-api-docs/src/utils/bulkKeyValue.spec.ts
index a21b379b..2bce0030 100644
--- a/packages/bruno-api-docs/src/utils/bulkKeyValue.spec.ts
+++ b/packages/bruno-api-docs/src/utils/bulkKeyValue.spec.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { parseBulkKeyValue, serializeBulkKeyValue } from './bulkKeyValue';
+import type { KeyValueRow } from '../components/KeyValueTable/KeyValueTable';
+import { parseBulkKeyValue, preserveDescriptions, serializeBulkKeyValue } from './bulkKeyValue';
 
 describe('parseBulkKeyValue', () => {
   it('parses `name: value` lines and trims whitespace', () => {
@@ -55,3 +56,51 @@ describe('round-trip', () => {
     expect(parseBulkKeyValue(serializeBulkKeyValue(rows))).toEqual(rows);
   });
 });
+
+describe('preserveDescriptions', () => {
+  const original: KeyValueRow[] = [
+    { id: 'h-0', name: 'Accept', value: 'application/json', enabled: true, description: 'media type' },
+    { id: 'h-1', name: 'Authorization', value: 'Bearer x', enabled: true, description: 'the token' }
+  ];
+
+  it('re-attaches a description to the matching name', () => {
+    const rows = preserveDescriptions(parseBulkKeyValue('Accept:application/json\nAuthorization:Bearer x'), original, 'h');
+    expect(rows[0]).toMatchObject({ name: 'Accept', description: 'media type' });
+    expect(rows[1]).toMatchObject({ name: 'Authorization', description: 'the token' });
+  });
+
+  it('preserves descriptions when the rows are reordered', () => {
+    const rows = preserveDescriptions(parseBulkKeyValue('Authorization:Bearer x\nAccept:application/json'), original, 'h');
+    expect(rows[0]).toMatchObject({ name: 'Authorization', description: 'the token' });
+    expect(rows[1]).toMatchObject({ name: 'Accept', description: 'media type' });
+  });
+
+  it('drops the description when a key is renamed', () => {
+    const rows = preserveDescriptions(parseBulkKeyValue('Accepts:application/json'), original, 'h');
+    expect(rows[0]).not.toHaveProperty('description');
+  });
+
+  it('gives a brand-new entry no description', () => {
+    const rows = preserveDescriptions(parseBulkKeyValue('X-New:1'), original, 'h');
+    expect(rows[0]).not.toHaveProperty('description');
+  });
+
+  it('matches duplicate names by closest index and consumes each original once', () => {
+    const dupes: KeyValueRow[] = [
+      { id: 'd-0', name: 'X', value: 'a', enabled: true, description: 'first' },
+      { id: 'd-1', name: 'X', value: 'b', enabled: true, description: 'second' }
+    ];
+    const rows = preserveDescriptions(parseBulkKeyValue('X:a\nX:b\nX:c'), dupes, 'd');
+    expect(rows[0]).toMatchObject({ description: 'first' });
+    expect(rows[1]).toMatchObject({ description: 'second' });
+    expect(rows[2]).not.toHaveProperty('description');
+  });
+
+  it('does not attach an empty description and never mutates the snapshot', () => {
+    const withEmpty: KeyValueRow[] = [{ id: 'e-0', name: 'A', value: '1', enabled: true, description: '' }];
+    const snapshot = JSON.stringify(withEmpty);
+    const rows = preserveDescriptions(parseBulkKeyValue('A:1'), withEmpty, 'e');
+    expect(rows[0]).not.toHaveProperty('description');
+    expect(JSON.stringify(withEmpty)).toBe(snapshot);
+  });
+});
diff --git a/packages/bruno-api-docs/src/utils/bulkKeyValue.ts b/packages/bruno-api-docs/src/utils/bulkKeyValue.ts
index b5664295..cda2cc15 100644
--- a/packages/bruno-api-docs/src/utils/bulkKeyValue.ts
+++ b/packages/bruno-api-docs/src/utils/bulkKeyValue.ts
@@ -31,3 +31,30 @@ export function parseBulkKeyValue(value: string): BulkKeyValueItem[] {
 export function serializeBulkKeyValue(items: BulkKeyValueItem[]): string {
   return items.map((item) => `${item.enabled ? '' : '//'}${item.name}:${item.value}`).join('\n');
 }
+
+/**
+ * Re-attach descriptions to freshly-parsed bulk rows. The bulk text only carries name/value/enabled,
+ * so each row's description is reclaimed from `original` — a snapshot of the rows taken when bulk edit
+ * was entered — by exact name, in order (first-in-first-out among same-named rows), consuming each
+ * original once. A reordered row keeps its description, while a renamed key or an extra duplicate gets
+ * none. `original` is not mutated.
+ */
+export function preserveDescriptions(
+  parsed: BulkKeyValueItem[],
+  original: KeyValueRow[],
+  idPrefix: string
+): KeyValueRow[] {
+  const descriptionsByName = new Map<string, unknown[]>();
+  original.forEach((row) => {
+    const name = row.name || '';
+    const list = descriptionsByName.get(name) ?? [];
+    list.push(row.description);
+    descriptionsByName.set(name, list);
+  });
+
+  return parsed.map((item, index) => {
+    const row: KeyValueRow = { id: `${idPrefix}-${index}`, name: item.name, value: item.value, enabled: item.enabled };
+    const description = descriptionsByName.get(item.name || '')?.shift();
+    return description ? { ...row, description } : row;
+  });
+}
diff --git a/packages/bruno-api-docs/src/utils/description.spec.ts b/packages/bruno-api-docs/src/utils/description.spec.ts
new file mode 100644
index 00000000..5c8a8ba4
--- /dev/null
+++ b/packages/bruno-api-docs/src/utils/description.spec.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { descriptionText, resolveDescription } from './description';
+
+describe('descriptionText', () => {
+  it('returns a non-empty string unchanged (surrounding spaces kept)', () => {
+    expect(descriptionText('hello')).toBe('hello');
+    expect(descriptionText(' hi ')).toBe(' hi ');
+  });
+
+  it('treats a whitespace-only string as absent', () => {
+    expect(descriptionText('   ')).toBeUndefined();
+  });
+
+  it('extracts content from the legacy { content } object form', () => {
+    expect(descriptionText({ content: 'from object', type: 'markdown' })).toBe('from object');
+  });
+
+  it('returns undefined for null, non-objects and content-less objects', () => {
+    expect(descriptionText(null)).toBeUndefined();
+    expect(descriptionText(undefined)).toBeUndefined();
+    expect(descriptionText(42)).toBeUndefined();
+    expect(descriptionText({ type: 'text' })).toBeUndefined();
+  });
+});
+
+describe('resolveDescription', () => {
+  it('omits a blank, whitespace-only or absent edit', () => {
+    expect(resolveDescription('')).toBeUndefined();
+    expect(resolveDescription('   ')).toBeUndefined();
+    expect(resolveDescription(undefined)).toBeUndefined();
+  });
+
+  it('never coerces a non-string value to "[object Object]"', () => {
+    expect(resolveDescription({ content: 'x' })).toBeUndefined();
+  });
+
+  it('keeps a non-blank string as-is', () => {
+    expect(resolveDescription('brand new')).toBe('brand new');
+  });
+});
diff --git a/packages/bruno-api-docs/src/utils/description.ts b/packages/bruno-api-docs/src/utils/description.ts
new file mode 100644
index 00000000..5249f257
--- /dev/null
+++ b/packages/bruno-api-docs/src/utils/description.ts
@@ -0,0 +1,24 @@
+/**
+ * Normalize a raw description value (a bare string, the legacy `{ content, type }` object form, or
+ * null/undefined) to its display string, or `undefined` when there is no meaningful text. A
+ * whitespace-only description is treated as absent.
+ */
+export const descriptionText = (desc: unknown): string | undefined => {
+  if (typeof desc === 'string') return desc.trim() ? desc : undefined;
+  if (desc && typeof desc === 'object' && 'content' in desc) {
+    const content = (desc as { content?: unknown }).content;
+    return typeof content === 'string' && content.trim() ? content : undefined;
+  }
+  return undefined;
+};
+
+/**
+ * Resolve the description to persist from an editor row's text: a non-blank string is kept as-is, and
+ * a blank/whitespace-only or non-string value is omitted (returns `undefined`). Matches how the app
+ * stores a bare description string and omits blanks, and never coerces a stray object to
+ * `"[object Object]"`.
+ */
+export const resolveDescription = (text: unknown): string | undefined => {
+  const str = typeof text === 'string' ? text : '';
+  return str.trim() ? str : undefined;
+};
diff --git a/packages/bruno-api-docs/src/utils/environments.spec.ts b/packages/bruno-api-docs/src/utils/environments.spec.ts
index eb352434..48263e0e 100644
--- a/packages/bruno-api-docs/src/utils/environments.spec.ts
+++ b/packages/bruno-api-docs/src/utils/environments.spec.ts
@@ -222,4 +222,55 @@ describe('envVariableToRow / envRowToVariable round-trip', () => {
     const out = envRowToVariable({ id: 'var-0', name: 'retries', value: '3', enabled: true, dataType: 'number' });
     expect(out).toEqual({ name: 'retries', value: { type: 'number', data: '3' }, disabled: false });
   });
+
+  it('carries a plain variable description into the row and writes back the edited text', () => {
+    const row = envVariableToRow({ name: 'host', value: 'localhost', description: 'The API host' } as any, 0);
+    expect(row.description).toBe('The API host');
+
+    row.description = 'Updated host';
+    expect((envRowToVariable(row) as any).description).toBe('Updated host');
+
+    // Clearing the description drops the field entirely, matching how the app omits empty descriptions.
+    row.description = '';
+    expect('description' in (envRowToVariable(row) as any)).toBe(false);
+  });
+
+  it('carries and writes a secret variable description without emitting a value', () => {
+    const row = envVariableToRow({ name: 'token', secret: true, type: 'string', description: 'Bearer token' } as any, 0);
+    expect(row.description).toBe('Bearer token');
+
+    row.description = 'Rotated token';
+    const out = envRowToVariable(row) as any;
+    expect(out.description).toBe('Rotated token');
+    expect('value' in out).toBe(false);
+
+    row.description = '';
+    expect('description' in (envRowToVariable(row) as any)).toBe(false);
+  });
+
+  it('preserves a { content, type } description verbatim when another field is edited', () => {
+    const source = { name: 'host', value: 'localhost', description: { content: 'The **API** host', type: 'text/markdown' } };
+    const row = envVariableToRow(source as any, 0);
+    expect(row.description).toBe('The **API** host'); // flattened to text for the editor
+
+    // Editing the value (not the description) must not flatten the typed description to a bare string.
+    row.value = 'example.com';
+    expect((envRowToVariable(row) as any).description).toEqual({ content: 'The **API** host', type: 'text/markdown' });
+  });
+
+  it('flattens a { content, type } description to a plain string only when its text is actually edited', () => {
+    const source = { name: 'host', value: 'localhost', description: { content: 'Original', type: 'text/markdown' } };
+    const row = envVariableToRow(source as any, 0);
+    row.description = 'Rewritten as plain text';
+    expect((envRowToVariable(row) as any).description).toBe('Rewritten as plain text');
+  });
+
+  it('preserves a { content, type } description on a secret when another field is edited', () => {
+    const source = { name: 'token', secret: true, type: 'string', description: { content: 'Bearer *token*', type: 'text/markdown' } };
+    const row = envVariableToRow(source as any, 0);
+    row.value = 'new-token';
+    const out = envRowToVariable(row) as any;
+    expect(out.description).toEqual({ content: 'Bearer *token*', type: 'text/markdown' });
+    expect(out.value).toBe('new-token');
+  });
 });
diff --git a/packages/bruno-api-docs/src/utils/environments.ts b/packages/bruno-api-docs/src/utils/environments.ts
index 34fd1d75..cc4eea7c 100644
--- a/packages/bruno-api-docs/src/utils/environments.ts
+++ b/packages/bruno-api-docs/src/utils/environments.ts
@@ -2,6 +2,7 @@ import type { Environment } from '@opencollection/types/config/environments';
 import type { Variable, VariableValueType } from '@opencollection/types/common/variables';
 import { MANAGER_LABELS } from '../constants';
 import { getDescription, getVariableTypeLabel } from './request';
+import { descriptionText, resolveDescription } from './description';
 import { isSecretVariable, unwrapVariableValue } from './variableResolution';
 import { rowToVariable, toDataType } from './variableDataType';
 
@@ -24,6 +25,7 @@ export interface EnvVarRow {
   enabled: boolean;
   dataType?: string;
   secret?: boolean;
+  description?: string;
   source?: Variable;
 }
 
@@ -34,11 +36,20 @@ export const envVariableToRow = (variable: Variable, index: number): EnvVarRow =
   dataType: getVariableTypeLabel(variable),
   enabled: !variable.disabled,
   secret: isSecretVariable(variable),
+  description: getDescription(variable),
   source: variable
 });
 
+const rowDescription = (row: EnvVarRow): Variable['description'] | undefined => {
+  const text = resolveDescription(row.description);
+  if (text === undefined) return undefined;
+  const original = row.source?.description;
+  return descriptionText(original) === text ? original : text;
+};
+
 export const envRowToVariable = (row: EnvVarRow): Variable => {
   const source = row.source ?? ({} as Variable);
+  const description = rowDescription(row);
   if (row.secret) {
     const secret = { ...source, name: row.name, disabled: !row.enabled, secret: true } as Variable & { value?: string; type?: VariableValueType };
     const dataType = toDataType(row.dataType);
@@ -46,16 +57,18 @@ export const envRowToVariable = (row: EnvVarRow): Variable => {
     else delete secret.type;
     if (row.value) secret.value = row.value;
     else delete secret.value;
+    if (description !== undefined) secret.description = description;
+    else delete secret.description;
     return secret;
   }
-  return rowToVariable({
+  const variable = rowToVariable({
     name: row.name,
     value: row.value,
     enabled: row.enabled,
     dataType: row.dataType,
-    description: source.description,
     originalValue: source.value
   });
+  return description === undefined ? variable : { ...variable, description };
 };
 
 interface ExternalSecretsConfig {
diff --git a/packages/bruno-api-docs/src/utils/keyValueRow.spec.ts b/packages/bruno-api-docs/src/utils/keyValueRow.spec.ts
new file mode 100644
index 00000000..855b69e0
--- /dev/null
+++ b/packages/bruno-api-docs/src/utils/keyValueRow.spec.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { keyValueRowToEntry } from './keyValueRow';
+
+describe('keyValueRowToEntry', () => {
+  it('inverts enabled to disabled and carries name/value', () => {
+    expect(keyValueRowToEntry({ id: '1', name: 'X-Trace', value: 'abc', enabled: true })).toEqual({
+      name: 'X-Trace',
+      value: 'abc',
+      disabled: false
+    });
+    expect(keyValueRowToEntry({ id: '1', name: 'X-Trace', value: 'abc', enabled: false })).toEqual({
+      name: 'X-Trace',
+      value: 'abc',
+      disabled: true
+    });
+  });
+
+  it('writes a non-empty description and omits an empty, whitespace-only or absent one', () => {
+    expect(
+      keyValueRowToEntry({ id: '1', name: 'X', value: 'v', enabled: true, description: 'why it exists' })
+    ).toEqual({ name: 'X', value: 'v', disabled: false, description: 'why it exists' });
+
+    expect(
+      keyValueRowToEntry({ id: '1', name: 'X', value: 'v', enabled: true, description: '' })
+    ).not.toHaveProperty('description');
+
+    // A whitespace-only description is dropped, not persisted invisibly.
+    expect(
+      keyValueRowToEntry({ id: '1', name: 'X', value: 'v', enabled: true, description: '   ' })
+    ).not.toHaveProperty('description');
+
+    expect(keyValueRowToEntry({ id: '1', name: 'X', value: 'v', enabled: true })).not.toHaveProperty('description');
+  });
+
+  it('never persists "[object Object]" for a non-string description', () => {
+    expect(
+      keyValueRowToEntry({ id: '1', name: 'X', value: 'v', enabled: true, description: { content: 'x' } as unknown as string })
+    ).not.toHaveProperty('description');
+  });
+});
diff --git a/packages/bruno-api-docs/src/utils/keyValueRow.ts b/packages/bruno-api-docs/src/utils/keyValueRow.ts
new file mode 100644
index 00000000..edeefa92
--- /dev/null
+++ b/packages/bruno-api-docs/src/utils/keyValueRow.ts
@@ -0,0 +1,25 @@
+import type { KeyValueRow } from '../components/KeyValueTable/KeyValueTable';
+import { resolveDescription } from './description';
+
+export interface KeyValueEntry {
+  name: string;
+  value: string;
+  disabled: boolean;
+  description?: string;
+}
+
+/**
+ * Map an editable KeyValueTable row back to its stored entry: `enabled` inverts to `disabled`, and a
+ * non-blank description is stored as a plain string — a blank/whitespace-only one is dropped, matching
+ * how the app stores a bare description string and omits blanks. Callers add any entry-specific fields
+ * (e.g. a query param's `type`) around the result.
+ */
+export const keyValueRowToEntry = (row: KeyValueRow): KeyValueEntry => {
+  const description = resolveDescription(row.description);
+  return {
+    name: row.name,
+    value: row.value,
+    disabled: !row.enabled,
+    ...(description !== undefined ? { description } : {})
+  };
+};
diff --git a/packages/bruno-api-docs/src/utils/request.ts b/packages/bruno-api-docs/src/utils/request.ts
index 12c2cbaf..29f33cd7 100644
--- a/packages/bruno-api-docs/src/utils/request.ts
+++ b/packages/bruno-api-docs/src/utils/request.ts
@@ -13,6 +13,7 @@ import type { Auth } from '@opencollection/types/common/auth';
 import type { Scripts } from '@opencollection/types/common/scripts';
 import type { Variable, SecretVariable, VariableValue, VariableValueType } from '@opencollection/types/common/variables';
 import type { Action, ActionSetVariable } from '@opencollection/types/common/actions';
+import { descriptionText, resolveDescription } from './description';
 import {
   getRequestAuth,
   getItemName,
@@ -137,13 +138,7 @@ export const getInheritedAuthSummary = (
 
 export const getDescription = (item: unknown): string | undefined => {
   if (!item || typeof item !== 'object') return undefined;
-  const desc = (item as { description?: unknown }).description;
-  if (typeof desc === 'string') return desc.trim() ? desc : undefined;
-  if (desc && typeof desc === 'object' && 'content' in desc) {
-    const content = (desc as { content?: unknown }).content;
-    return typeof content === 'string' && content.trim() ? content : undefined;
-  }
-  return undefined;
+  return descriptionText((item as { description?: unknown }).description);
 };
 
 export const headerRows = (headers: (HttpRequestHeader | HttpResponseHeader)[]): PropertyRow[] =>
@@ -365,14 +360,17 @@ export const actionsToPostResponseVars = (actions: Action[] = []): PostResponseV
 
 export const postResponseVarsToActions = (rows: PostResponseRowInput[], actions: Action[] = []): Action[] => {
   const others = actions.filter((action) => !isAfterResponseSetVariable(action));
-  const postActions: ActionSetVariable[] = rows.map((row) => ({
-    type: 'set-variable',
-    phase: 'after-response',
-    selector: { expression: row.value ?? '', method: 'jsonq' },
-    variable: { name: row.name ?? '', scope: row.scope || 'runtime' },
-    disabled: !row.enabled,
-    ...(row.description !== undefined ? { description: row.description } : {})
-  }));
+  const postActions: ActionSetVariable[] = rows.map((row) => {
+    const description = resolveDescription(row.description);
+    return {
+      type: 'set-variable',
+      phase: 'after-response',
+      selector: { expression: row.value ?? '', method: 'jsonq' },
+      variable: { name: row.name ?? '', scope: row.scope || 'runtime' },
+      disabled: !row.enabled,
+      ...(description !== undefined ? { description } : {})
+    };
+  });
   return [...others, ...postActions];
 };
 
diff --git a/packages/bruno-api-docs/src/utils/variableDataType.spec.ts b/packages/bruno-api-docs/src/utils/variableDataType.spec.ts
index 3cf1b574..b21dedef 100644
--- a/packages/bruno-api-docs/src/utils/variableDataType.spec.ts
+++ b/packages/bruno-api-docs/src/utils/variableDataType.spec.ts
@@ -102,6 +102,15 @@ describe('rowToVariable', () => {
     });
   });
 
+  it('omits an empty or absent description rather than writing an empty string', () => {
+    expect(rowToVariable({ name: 'a', value: 'v', enabled: true, description: '' })).toEqual({
+      name: 'a',
+      value: 'v',
+      disabled: false
+    });
+    expect(rowToVariable({ name: 'a', value: 'v', enabled: true })).not.toHaveProperty('description');
+  });
+
   it('keeps an unsupported-type value verbatim when the display value is unchanged (a sibling-row edit must not flatten it)', () => {
     const original = { type: 'null', data: '' } as never;
     expect(rowToVariable({ name: 'x', value: '', enabled: true, dataType: 'string', originalValue: original })).toEqual({
diff --git a/packages/bruno-api-docs/src/utils/variableDataType.ts b/packages/bruno-api-docs/src/utils/variableDataType.ts
index 18e19ac4..36b06945 100644
--- a/packages/bruno-api-docs/src/utils/variableDataType.ts
+++ b/packages/bruno-api-docs/src/utils/variableDataType.ts
@@ -1,5 +1,6 @@
 import type { Variable, VariableValueOrVariants, VariableValueType } from '@opencollection/types/common/variables';
 import { unwrapVariableTyped } from './variableResolution';
+import { resolveDescription } from './description';
 
 /** The data types offered in the pre-request variable value dropdown (Bruno's BRUNO_VARIABLE_DATATYPES). */
 export type VariableDataType = 'string' | 'number' | 'boolean' | 'object';
@@ -87,7 +88,8 @@ export interface VariableRowInput {
  */
 export const rowToVariable = (row: VariableRowInput): Variable => {
   const dataType = row.dataType && row.dataType !== 'string' ? (row.dataType as VariableValueType) : undefined;
-  const description = row.description !== undefined ? { description: row.description } : {};
+  const resolvedDescription = resolveDescription(row.description);
+  const description = resolvedDescription !== undefined ? { description: resolvedDescription } : {};
 
   const nextValue = dataType ? { type: dataType, data: row.value } : row.value;